/* RESET + TYPOGRAPHIE
---------------------------------------------------------- */
@charset "UTF-8";
:root {
	--primary: #f95311;
	/* Orange de marque assombri, reserve au TEXTE : #f95311 ne donne que 3,3:1 sur
	   blanc et 2,9:1 sur creme, sous le seuil de lisibilite. Les fonds, bordures et
	   degrades gardent --primary, ou le contraste ne se calcule pas. */
	--primary-txt: #c2410c;
	--secondary: #b52b61;
	--accent: #32CD32;
	--text-light: #fff;
	--text-color: #000;
	--hover-color: #555;
	--link-hover: #fe6f6f;
	--link-visited: #df3c3c;
	--bg-dark: #000;
	--bg-light: #fff;
	--bg-grey: #e6e6e6;
	--highlight: #f8b805;
	--transition-speed: 0.3s;}

html {font-size:100%}
body {font-family:Arial,"Helvetica Neue","Segoe UI",Roboto,"Nimbus Sans",sans-serif;font-size:15px;margin:0;line-height:1.6}
* {margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4{margin-top:8px;margin-bottom:2px;font-weight:400}h3,h4{line-height:1.4}h1{font-size:32px;line-height:1.1}h2{font-size:28px;line-height:1.3}h3{font-size:20px}h4{font-size:20px}

/* STRUCTURE GÉNÉRALE
---------------------------------------------------------- */
hr{border:none;border-top:1px solid #ddd;margin:5px 0}
section{padding-top:0;padding-bottom:0px}img{max-width:100%;height:auto;display:block;border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0;max-width:100%;background-color:transparent}
input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
input{line-height:normal}

/* HEADER / NAVIGATION
---------------------------------------------------------- */
nav{display:block}
nav[itemtype="http://schema.org/BreadcrumbList"]
>div{display:inline-block;margin:0 5px}#headerwrap{position:relative;margin:0 auto;padding:0;background-color:var(--bg-light);text-align:center;width:100%;aspect-ratio:4/3;overflow:hidden}
#headerwrap.no-image{aspect-ratio:auto;height:auto;padding:0;margin:0}
#headerwrap-video{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
#background-video {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: 1;}
.headerwrap-overlay{position:absolute;top:50%;left:0;right:0;z-index:2;transform:translateY(-50%);text-align:center;padding:20px;color:#fff}
.headerwrap-overlay .espace-nom{display:block;font-size:60px;font-weight:700;letter-spacing:4px;margin:0 0 4px;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.headerwrap-overlay h1{font-size:32px;margin:0;text-shadow:0 2px 6px rgba(0,0,0,0.5)}
.headerwrap-overlay h2{font-size:18px;font-weight:400;margin:6px 0 0;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
.headerwrap-overlay p{font-size:14px;margin:8px 0 0;opacity:0.9;text-shadow:0 1px 3px rgba(0,0,0,0.4)}
#headerwrap:not(.no-image)::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.5))}

/* Styles pour .lift (headerwrap avec image statique) */
.lift{display:block;position:relative;width:100%;height:100%}
.lift picture{display:block;width:100%;height:100%}
.lift img{width:100%;height:100%;object-fit:cover;display:block}

.navbar{position:sticky;top:0;z-index:1000;text-align:center;margin-top:0;padding:8px 0;background-color:var(--bg-light);box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.nav-links{list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;align-items:center}
.nav-links li{margin-right:10px}
.nav-links li:last-child{margin-right:0}
.nav-links li a{display:inline-block;padding:7px 6px;min-height:24px;color:var(--text-color);transition:color var(--transition-speed) ease}
.nav-links li a:hover{color:var(--hover-color)}

/* SLIDERS
---------------------------------------------------------- */
.image-slider{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:12px}
.image-slider .slides{position:relative;width:100%;height:100%;border-radius:12px}
.image-slider picture{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 0.5s ease;border-radius:12px}
.image-slider picture:first-child{animation-delay:-1s}.image-slider img{width:100%;/*height:100%;*/object-fit:cover;border-radius:12px;user-select:none}
.image-slider.image-slider-3{--duration:9s}
.image-slider.image-slider-3 picture{animation:fade-3 var(--duration) infinite}
.image-slider.image-slider-3 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-3 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-3 picture:nth-child(3){animation-delay:5s}
@keyframes fade-3{0%{opacity:0}8%{opacity:1}33.33%{opacity:1}41%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-4{--duration:12s}
.image-slider.image-slider-4 picture{animation:fade-4 var(--duration) infinite}
.image-slider.image-slider-4 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-4 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-4 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-4 picture:nth-child(4){animation-delay:8s}@keyframes fade-4{0%{opacity:0}10%{opacity:1}25%{opacity:1}35%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-5{--duration:15s}
.image-slider.image-slider-5 picture{animation:fade-5 var(--duration) infinite}
.image-slider.image-slider-5 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-5 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-5 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-5 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-5 picture:nth-child(5){animation-delay:11s}
@keyframes fade-5{0%{opacity:0}12%{opacity:1}20%{opacity:1}28%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-6{--duration:18s}
.image-slider.image-slider-6 picture{animation:fade-6 var(--duration) infinite}
.image-slider.image-slider-6 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-6 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-6 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-6 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-6 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-6 picture:nth-child(6){animation-delay:14s}
@keyframes fade-6{0%{opacity:0}10%{opacity:1}16.66%{opacity:1}23%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-7{--duration:21s}
.image-slider.image-slider-7 picture{animation:fade-7 var(--duration) infinite}
.image-slider.image-slider-7 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-7 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-7 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-7 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-7 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-7 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-7 picture:nth-child(7){animation-delay:17s}
@keyframes fade-7{0%{opacity:0}9%{opacity:1}14.28%{opacity:1}20%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-8{--duration:24s}
.image-slider.image-slider-8 picture{animation:fade-8 var(--duration) infinite}
.image-slider.image-slider-8 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-8 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-8 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-8 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-8 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-8 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-8 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-8 picture:nth-child(8){animation-delay:20s}
@keyframes fade-8{0%{opacity:0}8%{opacity:1}12.5%{opacity:1}18%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-9{--duration:27s}
.image-slider.image-slider-9 picture{animation:fade-9 var(--duration) infinite}
.image-slider.image-slider-9 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-9 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-9 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-9 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-9 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-9 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-9 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-9 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-9 picture:nth-child(9){animation-delay:23s}
@keyframes fade-9{0%{opacity:0}7%{opacity:1}11.11%{opacity:1}16%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-10{--duration:30s}
.image-slider.image-slider-10 picture{animation:fade-10 var(--duration) infinite}
.image-slider.image-slider-10 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-10 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-10 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-10 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-10 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-10 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-10 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-10 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-10 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-10 picture:nth-child(10){animation-delay:26s}
@keyframes fade-10{0%{opacity:0}6%{opacity:1}10%{opacity:1}15%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-11{--duration:33s}
.image-slider.image-slider-11 picture{animation:fade-11 var(--duration) infinite}
.image-slider.image-slider-11 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-11 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-11 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-11 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-11 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-11 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-11 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-11 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-11 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-11 picture:nth-child(10){animation-delay:26s}
.image-slider.image-slider-11 picture:nth-child(11){animation-delay:29s}
@keyframes fade-11{0%{opacity:0}6%{opacity:1}9.09%{opacity:1}14%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-12{--duration:36s}
.image-slider.image-slider-12 picture{animation:fade-12 var(--duration) infinite}
.image-slider.image-slider-12 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-12 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-12 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-12 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-12 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-12 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-12 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-12 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-12 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-12 picture:nth-child(10){animation-delay:26s}
.image-slider.image-slider-12 picture:nth-child(11){animation-delay:29s}
.image-slider.image-slider-12 picture:nth-child(12){animation-delay:32s}
@keyframes fade-12{0%{opacity:0}5%{opacity:1}8.33%{opacity:1}13%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-13{--duration:39s}
.image-slider.image-slider-13 picture{animation:fade-13 var(--duration) infinite}
.image-slider.image-slider-13 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-13 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-13 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-13 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-13 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-13 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-13 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-13 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-13 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-13 picture:nth-child(10){animation-delay:26s}
.image-slider.image-slider-13 picture:nth-child(11){animation-delay:29s}
.image-slider.image-slider-13 picture:nth-child(12){animation-delay:32s}
.image-slider.image-slider-13 picture:nth-child(13){animation-delay:35s}
@keyframes fade-13{0%{opacity:0}5%{opacity:1}7.69%{opacity:1}12%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-14{--duration:42s}
.image-slider.image-slider-14 picture{animation:fade-14 var(--duration) infinite}
.image-slider.image-slider-14 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-14 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-14 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-14 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-14 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-14 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-14 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-14 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-14 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-14 picture:nth-child(10){animation-delay:26s}
.image-slider.image-slider-14 picture:nth-child(11){animation-delay:29s}
.image-slider.image-slider-14 picture:nth-child(12){animation-delay:32s}
.image-slider.image-slider-14 picture:nth-child(13){animation-delay:35s}
.image-slider.image-slider-14 picture:nth-child(14){animation-delay:38s}
@keyframes fade-14{0%{opacity:0}5%{opacity:1}7.14%{opacity:1}11%{opacity:0}100%{opacity:0}}
.image-slider.image-slider-15{--duration:45s}
.image-slider.image-slider-15 picture{animation:fade-15 var(--duration) infinite}
.image-slider.image-slider-15 picture:nth-child(1){animation-delay:-1s}
.image-slider.image-slider-15 picture:nth-child(2){animation-delay:2s}
.image-slider.image-slider-15 picture:nth-child(3){animation-delay:5s}
.image-slider.image-slider-15 picture:nth-child(4){animation-delay:8s}
.image-slider.image-slider-15 picture:nth-child(5){animation-delay:11s}
.image-slider.image-slider-15 picture:nth-child(6){animation-delay:14s}
.image-slider.image-slider-15 picture:nth-child(7){animation-delay:17s}
.image-slider.image-slider-15 picture:nth-child(8){animation-delay:20s}
.image-slider.image-slider-15 picture:nth-child(9){animation-delay:23s}
.image-slider.image-slider-15 picture:nth-child(10){animation-delay:26s}
.image-slider.image-slider-15 picture:nth-child(11){animation-delay:29s}
.image-slider.image-slider-15 picture:nth-child(12){animation-delay:32s}
.image-slider.image-slider-15 picture:nth-child(13){animation-delay:35s}
.image-slider.image-slider-15 picture:nth-child(14){animation-delay:38s}
.image-slider.image-slider-15 picture:nth-child(15){animation-delay:41s}
@keyframes fade-15{0%{opacity:0}4%{opacity:1}6.66%{opacity:1}10%{opacity:0}100%{opacity:0}}
.fallback-slider picture{position:static!important;opacity:1!important;animation:none!important}

/* Slider manuel avec flèches et points - Animation de glissement */
.slider-manual .slides{display:flex;transition:transform 0.4s ease-out;will-change:transform}
.slider-manual .slide-wrapper{position:relative;min-width:100%;height:100%;flex-shrink:0}
.slider-manual .slide-wrapper picture{position:relative;width:100%;height:100%;animation:none!important;opacity:1}
.slider-manual picture{position:relative;min-width:100%;height:100%;flex-shrink:0;animation:none!important;opacity:1}

/* Flèches de navigation (style Airbnb) */
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,0.9);border:1px solid rgba(0,0,0,0.08);border-radius:50%;width:32px;height:32px;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.18)}
.slider-arrow:hover{background:rgba(255,255,255,1);transform:translateY(-50%) scale(1.05);box-shadow:0 4px 8px rgba(0,0,0,0.25)}
.slider-arrow svg{width:12px;height:12px;stroke:#222}
.slider-arrow.show{display:flex}
.slider-arrow-prev{left:12px}
.slider-arrow-next{right:12px}

/* Points indicateurs */
.slider-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.slider-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;transition:all 0.3s ease}
.slider-dot:hover{background:rgba(255,255,255,0.8);transform:scale(1.2)}
.slider-dot.active{background:rgba(255,255,255,1);width:8px;height:8px}

/* Wrapper pour les slides avec badge (W3C compliance) */
.slide-wrapper{position:relative;width:100%;height:100%}

/* Badge en haut à gauche du slider */
.slider-badge{position:absolute;top:12px;left:12px;z-index:10;background:rgba(255,255,255,0.95);color:#222;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,0.15)}

/* Ajustements pour mobile */
@media (max-width:767px){
  .slider-dots{bottom:8px}
  .slider-dot{width:5px;height:5px}
  .slider-dot.active{width:6px;height:6px}
  .slider-badge{font-size:12px;padding:5px 10px}
  .headerwrap-overlay{padding:20px 15px}
  .headerwrap-overlay .espace-nom{font-size:40px}
  .headerwrap-overlay h1{font-size:24px}
  .headerwrap-overlay h2{font-size:15px}
  .headerwrap-overlay p{font-size:13px}
}

/* ACCORDÉONS
---------------------------------------------------------- */
.accordion-wrapper{max-width:720px;margin:0 auto 0;padding:5px 15px}
.accordion-toggle{display:none}
.accordion-label{display:flex;justify-content:flex-start;gap:10px;align-items:center;cursor:pointer;padding:4px 40px 4px 0;border-bottom:1px solid rgba(0,0,0,0.1);font-size:16px;font-weight:400;color:var(--text-color);position:relative;transition:color var(--transition-speed) ease}
.accordion-label::after{content:'\2304';display:inline-block;position:absolute;right:20px;top:50%;transform:translateY(-60%) scaleX(1.8);font-size:20px;color:var(--text-color);transition:transform var(--transition-speed) ease}
.accordion-toggle:checked+.accordion-label::after,.prix-item[open]>.accordion-label::after{transform:translateY(-60%) scaleX(1.8) rotate(180deg)}
.panel{max-height:0;overflow:hidden;transition:max-height .5s ease,padding var(--transition-speed) ease;padding:0;border-bottom:1px solid rgba(0,0,0,0.1)}
.accordion-toggle:checked+.accordion-label+.panel{max-height:100vh;padding:16px 0}
.accordion-toggle:checked+.accordion-label{border-bottom:none}
.prix-item>.accordion-label{list-style:none}
.prix-item>.accordion-label::-webkit-details-marker{display:none}
.prix-item[open]>.accordion-label{border-bottom:none}
.prix-item[open]>.panel{max-height:none;overflow:visible;padding:16px 0}
.accordion-label h3{display:inline;margin:0;font-size:16px;font-weight:400}


/* FAQ
---------------------------------------------------------- */
.faq-wrapper{max-width:720px;margin:40px auto;padding:0 15px}
.faq-item{margin-bottom:8px}
.faq-label{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-light);color:var(--text-color);font-weight:400;font-size:18px;padding:8px 50px 8px 20px;border-radius:8px;cursor:pointer;position:relative;transition:background var(--transition-speed) ease;border:1px solid #2222223b;list-style:none}
.faq-label::-webkit-details-marker{display:none}
.faq-label::after{content:'';border:solid var(--text-color);border-width:0 2px 2px 0;padding:4px;transform:translateY(-2px) rotate(45deg);position:absolute;right:22px;transition:transform var(--transition-speed) ease}
.faq-item[open]>.faq-label::after{transform:translateY(2px) rotate(-135deg)}
.faq-item[open]>.faq-label{background-color:#ececec}
.faq-panel{background:transparent;padding:16px 20px 20px}


/* BLOG
---------------------------------------------------------- */
.grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;justify-content:center;align-content:start}
.grid-item{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}
.text-container{line-height:1.5em;height:3em;overflow:hidden;width:100%;text-align:center}
.img-container{width:100%;text-align:center}
.grid-img{width:200px;height:200px;margin-top:2px;margin-bottom:22px;object-fit:cover}


/* COMPOSANTS : Liens, blocs, icônes
---------------------------------------------------------- */
a{color:var(--text-color);text-decoration:none;transition:color var(--transition-speed) ease}
a:hover{color:var(--hover-color)}
a:active{color:var(--link-visited)}
a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
footer{background-color:var(--bg-dark);border:none;padding-top:20px;padding-bottom:20px;color:var(--bg-light);text-align:center;font-weight:300}
footer a{color:var(--bg-light)}
footer a:hover{color:#c0fff6}
.footer-grey{background-color:var(--bg-grey);border:none;padding-top:20px;padding-bottom:20px;color:var(--text-color);text-align:center;font-weight:300}
.page-column{max-width:720px;margin:0 auto;padding:0 20px 10px 20px;background-color:var(--bg-light);z-index:2;position:relative;font-size:16px;font-weight:300}
.page-column b,.page-column strong{font-weight:600}
.gradient{background-image:linear-gradient(to right,var(--primary),var(--secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.green{color:var(--accent)}


/* svg (logos) */
svg{width:25px;height:25px;vertical-align:middle;stroke:currentColor}
svg.icon-align{position:relative;top:-2px;flex-shrink:0;margin-left:-6px;width:16px;height:16px}
svg.icon-accordion{position:relative;top:2px;flex-shrink:0;margin-left:-6px}
svg:hover{background-color:var(--hover-color)}.container{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;padding:4px 15px}.container>*{margin-right:13px;}
.container>:last-child{margin-right:0}
.icon-row{display:flex;align-items:center;gap:6px;margin-left:0;padding-left:0}

/* logo-carousel
Le sélecteur double n'est pas une coquetterie : la règle legacy
@media(max-width:1199px){.responsive img{height:auto}} plus bas dans ce fichier a la
même spécificité et gagne par l'ordre → sous 1200px les SVG reprenaient leur taille
intrinsèque (logos plein écran sur mobile, constaté par Arthur le 14/08).
--- */
.slider-wrapper{overflow:hidden;width:100%;padding:20px 0}
.slider-track{display:flex;width:max-content;animation:scrollLogos 40s linear infinite;align-items:center}
.logo-carousel{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:26px 34px;padding:8px 30px;max-width:900px;margin:0 auto}
.logo-carousel img,.responsive .logo-carousel img{height:30px;width:auto;max-width:120px;object-fit:contain;opacity:.62;filter:grayscale(1);transition:opacity .15s ease,filter .15s ease}
.logo-carousel img:hover{opacity:1;filter:none}
.separator{height:40px;width:1px;background:#ccc}

.underline-red{border-bottom:2px solid red;display:inline;color:#c62828!important}
.underline-center-red::after{content:"";display:block;width:80px;height:5px;background-color:#f95311;position:relative;bottom:0;left:50%;transform:translateX(-50%);margin-top:5px;}
.radius{border-radius:10px}
.white-rectangle{background-color:var(--bg-light);color:var(--text-color);margin:15px 0;padding:15px 10px 10px 15px;font-weight:300}
.space-details{color:#717171;font-size:14px;margin-top:4px}.space-details strong{color:#717171}.space-details p{margin:2px 0 0;color:#717171}
.space-details a:not(.menu-booking-btn){color:#717171;text-decoration:none;display:inline!important;margin:0!important;padding:0!important}.space-details a:not(.menu-booking-btn):hover{color:#222;text-decoration:underline;background-color:transparent!important}
.white-rectangle>a:not(.menu-booking-btn){display:block;text-decoration:none;margin:-15px -10px -10px -15px;padding:15px 10px 10px 15px;}
.white-rectangle a:not(.menu-booking-btn):hover{background-color:rgba(0,0,0,0.03);}
.grey-rectangle{background-color:var(--bg-grey);color:var(--text-color);margin:15px 0;padding:15px 10px 10px 15px;border-radius:6px;font-weight:300}
.dark-rectangle {background-color: var(--bg-dark);color: var(--text-light);margin: 15px 0;padding: 15px;font-weight: 300;}
.dark-rectangle a {color: var(--text-light);}

.gradient-rectangle{background-image:linear-gradient(to right,var(--primary),var(--secondary));color:var(--bg-light);margin:15px 0;padding:15px; transition: 0.25s ease;}
.gradient-rectangle:hover {filter: brightness(1.12);}
.gradient-rectangle a{color:var(--bg-light)}
.spaced-letter{display:block;letter-spacing:5px}
.small-letter{font-size:20px;letter-spacing:1px}
.medium-letter{font-size:30px;letter-spacing:-1px}
.big-letter{font-size:40px;letter-spacing:-3px}
.animate-button{position:relative;overflow:hidden}
.animate-button:before{content:'';position:absolute;top:-50%;left:0;width:300%;height:300%;transform:translateY(-20%);background:rgba(255,255,255,0.2);border-radius:50%;animation:sweep 1.8s ease-in infinite;z-index:1}.anim-link{position:relative;z-index:2}


/* Flèche remonte (footer) */
.scroll-to-top{position:fixed;bottom:30px;right:30px;background-color:#000;color:#fff;padding:10px;border-radius:50%;z-index:999;cursor:pointer;opacity:0;transition:opacity .3s ease}
.scroll-to-top:hover{background-color:#e50914}
.scroll-to-top.show{opacity:1}


/* sitemap (espaces) */
.sitemap li{list-style-type:disc;margin-bottom:4px}.sitemap ul li{list-style-type:circle}.sitemap ul ul li,.sitemap ul ul ul li{list-style-type:square}.sitemap ul,.sitemap ul ul,.sitemap ul ul ul,.sitemap ul ul ul ul{margin-left:20px}


/* RESPONSIVE & PRINT
---------------------------------------------------------- */
@media screen and (max-width:768px){.accordion-label{font-size:15px}}
@media print{a,a:visited,body,h1,li,p{color:var(--text-color);text-shadow:none;background:0 0;box-shadow:none}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}a[href^="#"]:after{content:""}img,tr{page-break-inside:avoid}img{max-width:100%;height:auto}@page{margin:2cm .5cm}h2,h3,h4,p{orphans:3;widows:3}h2,h3,h4{page-break-after:avoid}}@media (max-width:1199px){.responsive img{max-width:100%;height:auto}}


/* ANIMATIONS
---------------------------------------------------------- */
@keyframes scrollLogos{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Bouton RÉSERVER dans le header vidéo */
.header-booking-btn{display:block;width:fit-content;margin:20px auto 0;background:linear-gradient(135deg,#f95311,#b52b61);color:#fff;padding:12px 30px;font-size:15px;font-weight:500;letter-spacing:0.5px;text-decoration:none;border-radius:8px;transition:all 0.2s ease;box-shadow:none}
.header-booking-btn:hover{filter:brightness(1.1);color:#fff}
@media (max-width:767px){.header-booking-btn{padding:10px 24px;font-size:14px;margin:15px auto 0}}

/* Bouton RÉSERVER dans le menu */
.menu-booking-btn{display:inline-block;background:linear-gradient(135deg,#f95311,#b52b61);color:#fff!important;padding:5px 12px;font-size:13px;font-weight:500;letter-spacing:0.3px;border-radius:6px;transition:all 0.2s ease;position:relative;box-shadow:none}
.space-details .menu-booking-btn{padding:2px 8px;font-size:11px;border-radius:4px;vertical-align:middle}
.menu-booking-btn:hover{filter:brightness(1.1);color:#fff!important}

/* Badges espaces (climatisé, promo, nouveau…)
---------------------------------------------------------- */
.espace-badge{position:absolute;bottom:10px;right:10px;padding:5px 10px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;z-index:10;display:inline-flex;align-items:center;gap:4px;transform:rotate(-3deg);box-shadow:0 2px 8px rgba(0,0,0,0.3);pointer-events:none;line-height:1.2;white-space:nowrap}
.espace-badge--header{bottom:20px;right:20px;font-size:14px;padding:8px 16px;border-radius:5px;gap:6px}
.espace-badge--ice{background:linear-gradient(135deg,#0369a1,#06b6d4);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.espace-badge--promo{background:linear-gradient(135deg,#dc2626,#f59e0b);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.espace-badge--new{background:linear-gradient(135deg,#059669,#34d399);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
.espace-badge--warn{background:linear-gradient(135deg,#d97706,#fbbf24);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
@media(max-width:767px){.espace-badge{font-size:9px;padding:4px 7px;bottom:6px;right:6px;gap:3px}.espace-badge--header{font-size:11px;padding:6px 12px;bottom:12px;right:12px}}
/* Avis clients (Google)
---------------------------------------------------------------------------- */
.avis{margin:22px 0}
.avis-head{text-align:center;margin-bottom:14px;font-size:19px}
.avis-stars{color:var(--highlight);letter-spacing:1px}
.avis-count{color:var(--hover-color);font-size:14px}
.avis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.avis-card{background-color:var(--bg-grey);border-radius:6px;margin:0;padding:12px 14px;font-weight:300}
.avis-top{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.avis-ava{width:34px;height:34px;flex:0 0 34px;border-radius:50%;color:#fff;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;object-fit:cover}
.avis-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.avis-name{font-weight:600;font-size:14px}
.avis-card .avis-stars{font-size:13px}
.avis-card blockquote{margin:0;font-style:italic;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.avis-more{display:inline-block;margin-top:12px;font-weight:600}
@media(max-width:767px){.avis-grid{grid-template-columns:1fr}}

/* Ligne dual-offre (espace nu / avec techniciens)
---------------------------------------------------------------------------- */
.dual-offre{text-align:center;font-size:16px;padding:2px 20px 14px;line-height:1.6}
.dual-offre strong{color:var(--primary-txt)}

/* Bulle Clochette 🧚 (déplacé depuis clochette-bubble.php pour validité W3C : pas de <style> dans body)
---------------------------------------------------------------------------- */
@keyframes cloGlow{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 5px rgba(227,179,65,.55),0 4px 20px rgba(0,0,0,.35)}}
@keyframes cloPop{0%{opacity:0;transform:translateY(10px) scale(.9)}60%{opacity:1;transform:translateY(-3px) scale(1.03)}100%{opacity:1;transform:none}}
@keyframes cloAttn{0%,100%{transform:translateY(0);box-shadow:0 6px 18px rgba(0,0,0,.28)}50%{transform:translateY(-4px);box-shadow:0 0 0 5px rgba(227,179,65,.40),0 10px 26px rgba(0,0,0,.32)}}
#clochette-fab{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:#fff;border:1px solid #111;cursor:pointer;z-index:99998;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;animation:cloGlow 2s ease-in-out infinite}
#clochette-fab:hover{transform:scale(1.07)}
#clochette-teaser{position:fixed;right:90px;bottom:28px;width:max-content;max-width:280px;background:#fff;border:2px solid #e3b341;border-radius:14px;padding:10px 14px;font:14.5px/1.3 system-ui,Arial,sans-serif;font-weight:500;color:#1c3a2b;box-shadow:0 6px 18px rgba(0,0,0,.28);z-index:99998;display:none;cursor:pointer}
#clochette-teaser::after{content:'';position:absolute;right:-9px;bottom:16px;width:0;height:0;border:8px solid transparent;border-left-color:#e3b341}
#clochette-teaser.show{display:block;animation:cloPop .45s ease-out both,cloAttn 1.6s ease-in-out .6s infinite}
#clochette-box{position:fixed;right:20px;bottom:92px;width:300px;max-width:calc(100vw - 24px);height:420px;max-height:calc(100vh - 120px);background:#eaf7ef;border-radius:16px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.35);z-index:99999;display:none;flex-direction:column;transform-origin:bottom right}
#clochette-box.open{display:flex;animation:cloGenieIn .22s ease-out}
#clochette-box.open.closing{animation:cloGenieOut .26s ease-in forwards}
@keyframes cloGenieIn{from{opacity:0;transform:translate(36px,44px) scale(.06)}to{opacity:1;transform:none}}
@keyframes cloGenieOut{from{opacity:1;transform:none}to{opacity:0;transform:translate(36px,44px) scale(.06)}}
#clochette-bar{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:#e3b341;color:#163a29;flex-shrink:0;font-family:system-ui,Arial,sans-serif}
#clochette-bar span{font-weight:700;font-size:15px}
#clochette-x{background:none;border:none;color:#163a29;font-size:24px;line-height:1;cursor:pointer;padding:2px 6px;flex-shrink:0;opacity:.85;display:inline-flex;align-items:center;gap:4px}
#clochette-x:hover{opacity:1}
#clochette-x .clo-x-lbl{font-size:12px;font-weight:600}
#clochette-frame{flex:1;border:none;width:100%}
@media(max-width:600px){#clochette-box{right:12px;left:auto;width:calc(100vw - 24px);max-width:360px;height:62vh;bottom:88px}#clochette-fab{font-size:40px}#clochette-teaser{max-width:calc(100vw - 108px)}}

/* Titres d'accordéon (ex-<h3>, passés en <span> pour validité W3C : heading interdit dans label/span)
---------------------------------------------------------------------------- */
.acc-ttl{display:block}
.acc-h3{display:inline;margin:0;font-size:16px;font-weight:400}

/* GABARIT ÉDITORIAL PAGES AUDIO (.rec) — hero clair, étapes numérotées, bandeaux
   Scopé sous body.rec : n'affecte QUE les pages qui l'activent. N'écrase aucune règle existante
   (nouveaux composants .rec-* ; les rares affinages .rec .accordion-* sont volontaires et locaux).
---------------------------------------------------------------------------- */
.rec{--rec-gold:#c98a17;--rec-line:#e7ded2;--rec-card:#fff;--rec-chip:#f5efe6;--rec-sub:#6d635b}
.rec-hero{background:radial-gradient(120% 80% at 85% -20%,rgba(249,83,17,.10),transparent 60%),radial-gradient(90% 70% at -10% 120%,rgba(181,43,97,.08),transparent 55%),#faf7f2;padding:44px 22px 40px;border-bottom:1px solid var(--rec-line);text-align:center}
.rec-eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--primary-txt)}
.rec-hero h1{font-size:clamp(30px,6vw,50px);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:8px 0 10px}
.rec-lede{max-width:60ch;margin:0 auto;color:var(--rec-sub);font-size:18px}
.rec-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 22px}
.rec-chip{background:var(--rec-card);border:1px solid var(--rec-line);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:600}
.rec-chip .st{color:var(--rec-gold)}
.rec-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f95311,#b52b61);color:#fff!important;font-weight:700;padding:13px 26px;border-radius:10px;font-size:16px}
.rec-cta:hover{filter:brightness(1.08)}
.rec-band{background:var(--rec-chip);border-radius:14px;padding:22px 20px;text-align:center;margin:20px 0}
.rec-band .g{display:inline-block;background:var(--rec-card);border:1px solid var(--rec-line);border-radius:8px;padding:8px 14px;font-weight:600;font-size:14px;margin:5px}
.rec-quote{margin:22px 0;padding:12px 24px;border-left:3px solid var(--primary);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:19px}
.rec-quote cite{display:block;font-size:14px;font-style:normal;color:var(--rec-sub);margin-top:6px}
/* affinage local des accordéons sur les pages .rec (cartes) */
.rec .accordion-wrapper{border-radius:12px;margin:10px auto;padding:2px 16px;background:var(--rec-card);max-width:760px}
.rec .accordion-title>span h3,.rec .accordion-title>span .acc-h3{font-weight:700}
.rec .accordion-title small{display:block;color:var(--rec-sub);font-weight:400;font-size:13px;margin-top:2px}
.rec main h2{font-size:clamp(22px,4vw,30px);font-weight:800;letter-spacing:-.01em}

/* Footer — cartes « Nos lieux »
--- */
.footer-maps{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:720px;text-align:center}
.footer-maps .lieu{margin:0;width:320px;max-width:100%}
.footer-maps img{width:100%;height:auto;display:block}
.footer-maps .studios{font-size:.95rem;font-weight:600;margin:0 0 4px;line-height:1.3}
.footer-maps .lieu-addr{font-size:.82rem;opacity:.85;margin:0}
.footer-maps .access{display:block;font-size:.72rem;opacity:.7;margin:0 0 6px}
.footer-maps .lieu > a,.footer-maps .lieu > picture{display:block}

/* Bloc « Nous trouver » — un lieu au cœur d'une page espace
--- */
.lieu-bloc{text-align:center;max-width:520px;margin:30px auto;padding:0 15px}
.lieu-bloc .lieu-titre{font-size:1.3rem;margin:0 0 4px}
.lieu-bloc .lieu-adresse{margin:0 0 2px}
.lieu-bloc .lieu-acces{font-size:.85rem;opacity:.75;margin:0 0 10px}
.lieu-bloc .lieu-plan{display:inline-block;max-width:100%}
.lieu-bloc .lieu-plan img{width:480px;max-width:100%;height:auto}
.lieu-bloc .lieu-itineraire{display:inline-block;margin-top:8px;font-weight:600}

/* STUDIO ENREGISTREMENT PARIS — identité & compléments (override du global.css leizart)
--- polices propres au site + classes absentes chez leizart (.col-*, .border, .just) --------- */
@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:local('Lato Regular'),url(../fonts/Lato-Regular.woff2) format('woff2'),url(../fonts/Lato-Regular.woff) format('woff')}
@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:local('Lato Bold'),url(../fonts/Lato-Bold.woff2) format('woff2'),url(../fonts/Lato-Bold.woff) format('woff')}
@font-face{font-family:Anton;font-style:normal;font-weight:400;font-display:swap;src:local('Anton'),url(../fonts/Anton.woff2) format('woff2'),url(../fonts/Anton.woff) format('woff')}
@font-face{font-family:Sailec;font-style:normal;font-weight:700;font-display:swap;src:local('Sailec Bold'),url(../fonts/Sailec-Bold.woff2) format('woff2'),url(../fonts/Sailec-Bold.woff) format('woff')}
body{font-family:Lato,"Helvetica Neue",Arial,sans-serif}
.headerwrap-overlay .espace-nom,.headerwrap-overlay h1{font-family:Anton,sans-serif;letter-spacing:2px}
h2.section-title,.faq-wrapper>h2{font-family:Sailec,Arial,sans-serif}
/* Le libellé d'accordéon est un conteneur flex hérité du gabarit : sans direction imposée,
   le <small> de description devenait une COLONNE écrasée à droite du titre (illisible sur
   téléphone). On empile : ligne 1 = intitulé + prix, ligne 2 = description sur toute la largeur.
--- */
.accordion-title{width:100%;flex-direction:column;align-items:stretch;gap:2px}
.accordion-title .column-layout{justify-content:space-between;width:100%;gap:10px;flex-wrap:wrap}
.accordion-title .gradient{font-weight:700;white-space:nowrap}
.accordion-title .column-layout>span:first-child{flex:1 1 auto;min-width:0}
.accordion-title .column-layout>span:last-child{flex:0 0 auto;white-space:nowrap;text-align:right}
.accordion-title .column-layout .spaced-letter{letter-spacing:2.5px}
/* Sur téléphone le prix passe TOUJOURS sous l'intitulé : en le laissant se replier au cas par
   cas, deux blocs tenaient sur une ligne et trois sur deux — la grille perdait son alignement.
--- */
@media(max-width:560px){
.accordion-label{font-size:14px;padding-right:30px}
.accordion-label::after{right:8px}
.rec .accordion-wrapper{padding:2px 10px}
.accordion-title .column-layout{flex-direction:column;align-items:flex-start;gap:1px}
.accordion-title .column-layout>span:last-child{text-align:left}
.accordion-title .column-layout .spaced-letter{letter-spacing:1px}
}
.avis{max-width:1000px;margin:22px auto;padding:0 15px}

/* Grille responsive (leizart n'a aucune .col-* → mes cartes tombaient en escalier)
--- */
.col-50{flex:1 1 44%}.col-33{flex:1 1 30%}.col-25{flex:1 1 21%}.col-20{flex:1 1 16%}
.container>.col-50,.container>.col-33,.container>.col-25,.container>.col-20{align-self:stretch;box-sizing:border-box;min-width:230px}
.container>.col-50>*,.container>.col-33>*,.container>.col-25>*,.container>.col-20>*{height:100%}
@media(max-width:640px){.container>.col-50,.container>.col-33,.container>.col-25,.container>.col-20{flex-basis:100%;min-width:0}}

/* Cartes bordées (identité studio-video : les cartes doivent se voir)
--- */
.border{border:1px solid #cfc7b8}
.white-rectangle{border:1px solid #cfc7b8;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.06);text-align:center;padding:20px 16px}
.white-rectangle h3{margin:0 0 6px}
.gradient-rectangle{border-radius:12px;text-align:center;padding:20px 16px}
.dark-rectangle{background:#000;color:#fff;border-radius:12px;text-align:center;padding:18px}.dark-rectangle a{color:#fff}
.gradient-frame{background-image:linear-gradient(to right,var(--primary),var(--secondary));color:#fff;border-radius:12px;padding:22px}
.dark-frame{background:#000;color:#fff;border-radius:12px;padding:22px}

/* Titres de section + texte
--- */
h2.section-title{text-align:center;font-size:24px;margin:12px 0 16px}
.underline-center::after{content:"";display:block;width:70px;height:4px;background:linear-gradient(to right,var(--primary),var(--secondary));margin:8px auto 0;border-radius:2px}
.just{text-align:justify}.last-center{text-align-last:center}
/* Sur une colonne étroite, le texte justifié creuse des rivières de blanc entre les mots. */
@media(max-width:600px){.just{text-align:left}.last-center{text-align-last:auto}}

/* Réservation — le moteur leizart est cadré en iframe (frame-ancestors côté leizart)
--- */
.reserver-alt{font-size:14px;color:#6d635b;margin-top:10px;text-align:center}
main .container{align-items:stretch}

/* Grilles de cartes (prestations, encadrés)
--- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;max-width:1000px;margin:16px auto;padding:0 15px}
.services-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){.services-grid.g3{grid-template-columns:1fr}}
.services-grid>.white-rectangle{margin:0}
#booking{scroll-margin-top:72px}

/* Marque (logo navbar)
--- pastille SVG + libellé texte : pas d'image bitmap à charger, net sur tous les écrans ------ */
.navbar>.container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:4px 14px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text-color)}
.brand-mark{flex:0 0 auto;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.brand-txt b{font-family:Lato,Arial,sans-serif;font-size:14.5px;letter-spacing:.05em;font-weight:400}
.brand-txt i{font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--primary-txt);font-weight:700}
.ico-mail{position:relative;top:-2px;fill:currentColor}
@media(max-width:1000px){.nav-links li{margin-right:4px}.nav-links li a,.nav-sub summary{padding:7px 4px;font-size:14px}}
@media(max-width:420px){.brand-txt b{font-size:13px}}

/* En-tête de page (hero)
--- */
.rec-hero .rec-lede strong{color:var(--text-color)}
.hero-img{max-width:1000px;margin:26px auto 0;padding:0 15px}
.img-large{display:block;max-width:1000px;margin:26px auto}
.img-large img{width:100%;height:auto;border-radius:12px;display:block}
.hero-img img{width:100%;height:auto;border-radius:14px;display:block;aspect-ratio:2/1;object-fit:cover}
/* Vidéo d'en-tête : même cadre que l'image, et le poster occupe la place tant que la
   vidéo n'est pas chargée — donc aucun saut de mise en page à son arrivée. */
.hero-video video{width:100%;height:auto;border-radius:14px;display:block;aspect-ratio:2/1;object-fit:cover;background:#111}
.fil{max-width:1000px;margin:14px auto 0;padding:0 15px;font-size:13px;color:var(--rec-sub)}
.fil a{color:var(--rec-sub);display:inline-block;padding:5px 0}
.fil a[aria-current]{color:var(--text-color);font-weight:600}

/* Cartes cliquables (grilles de prestations)
--- */
.carte{display:block;text-decoration:none;color:inherit;transition:transform .15s ease,box-shadow .15s ease;position:relative;padding-bottom:28px}
.carte:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.09)}
.carte:active{transform:translateY(0);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.carte::after{content:"›";position:absolute;right:14px;bottom:6px;color:var(--primary-txt);font-size:24px;line-height:1;font-weight:700}
.carte h3{color:var(--text-color)}
.carte p{color:#555;font-size:14px;margin:0}
/* Un bloc d'INFORMATION ne doit pas ressembler à un bouton : sur téléphone il n'y a pas de
   survol pour faire la différence, alors on tape dans le vide. Les cartes cliquables portent
   un chevron ; les blocs informatifs sont posés à plat, sur fond crème et sans ombre.
--- */
.services-grid>div.white-rectangle{background:var(--rec-chip);border-color:transparent;box-shadow:none}

/* Listes éditoriales (étapes numérotées, listes à coche)
--- */
.etapes{max-width:760px;margin:16px auto;padding-left:22px;text-align:left;line-height:1.65}
.etapes li{margin-bottom:10px}
.liste-check{max-width:760px;margin:16px auto;padding-left:0;list-style:none;text-align:left;line-height:1.65}
.liste-check li{position:relative;padding-left:26px;margin-bottom:9px}
.liste-check li::before{content:"✓";position:absolute;left:0;color:var(--primary-txt);font-weight:700}

/* Duo texte + photo
--- */
.duo{display:flex;flex-wrap:wrap;gap:22px;align-items:center;max-width:1000px;margin:18px auto;padding:0 15px}
.duo>picture,.duo>.image-slider{flex:1 1 300px;min-width:260px}
.duo>picture img{width:100%;height:auto;border-radius:12px;display:block}
.duo>div{flex:1 1 380px;min-width:280px}
.duo-reverse{flex-direction:row-reverse}
@media(max-width:640px){.duo-reverse{flex-direction:row}}

/* Tarifs — note et tableau récapitulatif
--- */
.prix-note{max-width:760px;margin:12px auto 0;padding:0 16px;font-size:14px;color:var(--rec-sub);text-align:center}
.tarif-table-wrap{max-width:820px;margin:16px auto;padding:0 15px;overflow-x:auto}
.tarif-table{width:100%;border-collapse:collapse;font-size:15px;background:var(--rec-card)}
.tarif-table caption{caption-side:top;font-size:13px;color:var(--rec-sub);padding-bottom:8px}
.tarif-table th,.tarif-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rec-line)}
.tarif-table thead th{background:var(--rec-chip);font-family:Sailec,Arial,sans-serif}
.tarif-table tbody tr:last-child td{border-bottom:0}
.tarif-table td:last-child{font-weight:700;white-space:nowrap}

/* Réservation (iframe du moteur leizart) et carte d'accès
--- */
.booking-iframe{width:100%;border:0;overflow:hidden}
.booking-intro{flex-direction:column;align-items:stretch}
.mapwrap{max-width:820px;margin:16px auto;padding:0 15px}
.mapwrap iframe{width:100%;max-width:100%;border-radius:12px;display:block}

/* Pied de page — colonnes de liens + bloc NAP
--- */
.footer-cols{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;text-align:center;margin:8px auto 18px}
/* ⚠️ `.container>*{margin-right:13px}` (règle héritée du gabarit leizart) écrase le
   `margin-right:auto` du raccourci ci-dessus. Il reste alors un `margin-left:auto` SEUL, qui
   absorbe tout l'espace libre : les trois colonnes partaient se coller à droite. On repose les
   deux marges automatiques avec une spécificité qui gagne. */
.site-footer .footer-cols{margin-left:auto;margin-right:auto}
.footer-col{min-width:180px}
.footer-col h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);margin:0 0 8px;font-family:Sailec,Arial,sans-serif}
.footer-col a{display:block;font-size:14px;padding:6px 0;opacity:.9}
.footer-nap{font-size:14px;line-height:1.7;padding:6px 15px}
.footer-nav{font-size:13px;padding:10px 15px 4px;opacity:.85}
.footer-nav a{display:inline-block;padding:6px 2px}
.social-links{padding-bottom:6px}
.social-links a{display:inline-block;padding:8px}
.site-footer{padding-top:26px}

/* Menu — sous-menu PRESTATIONS (details/summary : marche au clic ET au tap, sans JS)
--- */
.nav-sub{position:relative}
.nav-sub details{display:inline-block}
.nav-sub summary{display:inline-block;padding:7px 6px;min-height:24px;cursor:pointer;list-style:none;color:var(--text-color);transition:color var(--transition-speed) ease}
.nav-sub summary::-webkit-details-marker{display:none}
.nav-sub summary::after{content:"▾";margin-left:5px;font-size:11px;position:relative;top:-1px}
.nav-sub details[open] summary::after{content:"▴"}
.nav-sub summary:hover{color:var(--hover-color)}
.nav-sub[data-actif] summary{color:var(--primary-txt);font-weight:700}
.nav-sub-panel{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--rec-line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.13);padding:10px 0;min-width:260px}
.nav-sub-panel a{display:block;padding:7px 16px;font-size:14px;white-space:nowrap;color:var(--text-color)}
.nav-sub-panel a:hover{background:var(--rec-chip);color:var(--primary-txt)}
.nav-sub-panel a[aria-current]{color:var(--primary-txt);font-weight:700}
.nav-sub-titre{display:block;padding:8px 16px 3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rec-sub);font-weight:700}
.nav-sub details[open] .nav-sub-panel{position:absolute;top:100%;left:auto;right:0;z-index:1100}

/* Dès que les liens passent sous la marque (≈860 px), ils se centrent au lieu de rester
   collés à gauche par le space-between de la barre.
--- */
@media(max-width:860px){.nav-links{width:100%;justify-content:center;gap:4px}.nav-links li{margin-right:0}}

/* Menu sur téléphone — le bandeau tenait sur QUATRE lignes collées au bord gauche.
   La marque prend sa ligne, les liens se centrent sous elle sur deux lignes.
   Le dépliant s'ancre sur la navbar (elle est sticky, donc positionnée) et non sur
   son entrée : sinon il déborde de l'écran ou repousse tout le contenu vers le bas.
--- */
@media(max-width:560px){
.navbar{padding:6px 0}
.navbar>.container{padding:0 10px;gap:4px}
.brand-mark{width:32px;height:32px}
.brand-txt b{font-size:13.5px}
.nav-links{width:100%;justify-content:center;gap:0}
.nav-links li{margin-right:0}
.nav-links li a,.nav-sub summary{padding:6px 7px;font-size:13px}
.nav-sub{position:static}
.nav-sub details{display:inline-block;width:auto}
.nav-sub summary{display:inline-block}
.nav-sub details[open] .nav-sub-panel{left:8px;right:8px;min-width:0}
.menu-booking-btn{padding:6px 12px}
}

/* Formules au forfait (cartes prix) — on vend un livrable, pas un taux horaire
--- */
.formules{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;max-width:1000px;margin:18px auto;padding:0 15px;align-items:stretch}
.formule{position:relative;display:flex;flex-direction:column;background:var(--rec-card);border:1px solid var(--rec-line);border-radius:14px;padding:22px 18px 18px;text-align:center}
.formule-nom{font-family:Sailec,Arial,sans-serif;font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--rec-sub)}
.formule-prix{display:block;font-family:Anton,sans-serif;font-size:40px;line-height:1.1;margin:6px 0 2px;background:linear-gradient(135deg,#f95311,#b52b61);-webkit-background-clip:text;background-clip:text;color:transparent}
.formule-sous{display:block;font-size:13px;color:var(--rec-sub);margin-bottom:12px}
.formule ul{list-style:none;padding:0;margin:0 0 12px;text-align:left;font-size:14px;line-height:1.55;flex:1}
.formule li{position:relative;padding-left:20px;margin-bottom:6px}
.formule li::before{content:"✓";position:absolute;left:0;color:var(--primary-txt);font-weight:700}
.formule-note{display:block;font-size:13px;color:var(--rec-sub);font-style:italic;border-top:1px solid var(--rec-line);padding-top:10px}
.formule--phare{border-color:var(--primary);box-shadow:0 6px 20px rgba(249,83,17,.13)}
.formule-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f95311,#b52b61);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap}
.formule--option{background:var(--rec-chip)}

/* Deux cibles — artistes et professionnels côte à côte dès l'accueil
--- */
.cibles{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1000px;margin:18px auto;padding:0 15px}
.cible{background:var(--rec-card);border:1px solid var(--rec-line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column}
.cible-eyebrow{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--rec-sub);margin-bottom:4px}
.cible h3{font-family:Sailec,Arial,sans-serif;font-size:22px;margin:0 0 8px}
.cible p{flex:1 1 auto;margin:0 0 14px}
.cible .rec-cta{align-self:flex-start}
@media(max-width:700px){.cibles{grid-template-columns:1fr}}

/* Prestations — une colonne par cible, qui RESTENT deux colonnes sur mobile
--- */
.prestations{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:1000px;margin:18px auto;padding:0 15px;align-items:start}
.presta-col{display:flex;flex-direction:column;gap:10px}
.presta-titre{font-family:Sailec,Arial,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-txt);margin:0 0 2px;text-align:center}
.presta{display:block;background:var(--rec-card);border:1px solid var(--rec-line);border-radius:12px;padding:12px 14px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s}
.presta:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.presta b{display:block;font-size:15px;margin-bottom:3px}
.presta span{display:block;font-size:13px;line-height:1.35;color:var(--rec-sub)}
@media(max-width:560px){.prestations{gap:8px}.presta{padding:10px 11px;border-radius:10px}.presta b{font-size:13px}.presta span{font-size:11.5px;line-height:1.3}.presta-titre{font-size:11.5px;letter-spacing:.1em}}

/* Repères — ancienneté et références du groupe
--- */
.reperes{text-align:center}
.chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:800px;margin:18px auto 0;padding:0 15px}
.chiffres div{background:var(--rec-chip);border-radius:12px;padding:14px 8px}
.chiffres b{display:block;font-family:Sailec,Arial,sans-serif;font-size:22px;color:var(--primary-txt)}
.chiffres span{display:block;font-size:12px;color:var(--rec-sub);margin-top:2px}
@media(max-width:560px){.chiffres{grid-template-columns:1fr 1fr}.chiffres b{font-size:19px}}

/* Photo pleine largeur d'une section (illustration posée seule, sans texte à côté)
--- */
.photo-large{max-width:1000px;margin:18px auto;padding:0 15px}
.photo-large img{width:100%;height:auto;border-radius:14px;display:block;aspect-ratio:4/3;object-fit:cover}
.photo-large--libre img{aspect-ratio:auto;object-fit:fill}

/* Pastilles d'en-tête agrandies — pour une page dont les pastilles portent l'information
   principale (les prix sur la page des formules), pas un simple rappel.
--- */
.rec-chips--grand{gap:11px;margin:24px 0 26px}
.rec-chips--grand .rec-chip{font-size:17px;padding:11px 20px;font-weight:700}
@media(max-width:560px){.rec-chips--grand .rec-chip{font-size:15px;padding:9px 15px}}

/* Liens dans le texte — un lien au fil d'une phrase doit SE VOIR. La règle générale
   « a{color:hérité;text-decoration:none} » est faite pour le menu, le pied de page et les
   boutons ; au milieu d'un paragraphe elle rend le lien invisible, surtout sur mobile où
   il n'y a pas de survol pour le révéler. Couleur assombrie par rapport à --primary pour
   rester lisible sur le fond crème (contraste ~5:1, l'orange de marque plafonne à 3:1).
--- */
.rec .rec-lede a,.rec main.responsive p a,.rec main.responsive li a,.rec .panel a,.rec .faq-panel a,.rec .prix-note a,.rec .reserver-alt a,.rec .booking-section p a{color:#c2410c;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.rec .rec-lede a:hover,.rec main.responsive p a:hover,.rec main.responsive li a:hover,.rec .panel a:hover,.rec .faq-panel a:hover,.rec .prix-note a:hover,.rec .reserver-alt a:hover,.rec .booking-section p a:hover{color:var(--primary);text-decoration-thickness:2px}

/* Bandeau du groupe — la marque en grand, sur fond blanc, à la place d'une photo. Fait en
   SVG + texte réel plutôt qu'en image : net sur tous les écrans, quasi zéro poids, et le
   mot LEIZART reste du texte lisible par Google.
--- */
.logo-bandeau{display:flex;align-items:center;justify-content:center;gap:26px;background:#fff;max-width:1000px;margin:18px auto;padding:46px 20px}
.logo-bandeau svg{width:120px;height:120px;flex-shrink:0}.logo-bandeau svg:hover{background:none}
.logo-bandeau span{font-family:Sailec,Arial,sans-serif;font-weight:700;font-size:76px;letter-spacing:6px;line-height:1;color:#111}
@media(max-width:767px){.logo-bandeau{gap:16px;padding:30px 15px}.logo-bandeau svg{width:74px;height:74px}.logo-bandeau span{font-size:42px;letter-spacing:3px}}


/* PLATEAU DE TOURNAGE — grille des lieux
Le niveau 3 des horaires : la règle générale est « 24h/24 sur rendez-vous », le détail par
lieu vit dans ces cartes. La pastille dit d'un coup d'œil si la nuit est possible.
--- */
.plateaux{margin:34px 0}
.plateaux-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px;max-width:1000px;width:100%;min-width:0;flex:1 1 100%;box-sizing:border-box;margin:16px auto;padding:0 15px}
.plateau-card{background:var(--bg-light);border:1px solid #cfc7b8;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.06);padding:0 0 16px;text-align:left;overflow:hidden}
.plateau-card>h3,.plateau-card>p{padding-left:16px;padding-right:16px}
.plateau-img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;display:block}
.pslider{margin-bottom:14px}
.plateau-card--soon{padding-top:18px}
.plateau-card h3{margin:0 0 4px;font-size:19px}
.plateau-card p{margin:0 0 8px;font-size:14px;color:#555;line-height:1.55}
.plateau-card--soon{background:var(--rec-chip);border-style:dashed}
.plateau-surf{font-size:13px;font-weight:400;color:var(--rec-sub);margin-left:6px}
.plateau-adr{font-size:13px!important;color:var(--rec-sub)!important}
.plateau-usage{font-size:12px!important;letter-spacing:.03em;text-transform:uppercase;color:var(--primary-txt)!important;margin-bottom:0!important;font-weight:600}

/* Note Google seule (sans cartes d'avis)
--- */
.avis-note{margin:30px 0;text-align:center}
.avis-note-lien{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;text-decoration:none;color:inherit;background:var(--rec-chip);border-radius:999px;padding:10px 20px}
.avis-note-lien:hover{background:rgba(0,0,0,.05)}
.avis-note-chiffre{font-size:24px;font-weight:800;line-height:1}
.avis-note-etoiles{color:#f5a623;letter-spacing:1px}
.avis-note-texte{font-size:14px;color:var(--rec-sub)}

/* Tarifs — bandeau de rappel sous la grille
--- */
.prix{margin:34px 0}
.prix .accordion-wrapper{max-width:1000px;margin:0 auto;padding:0 15px}


/* Grilles placées dans .container (qui est en flex)
Sans min-width:0, un enfant en grid se dimensionne sur son CONTENU et déborde de l'écran :
mesuré le 14/08, la grille des plateaux faisait 902 px sur un téléphone de 390 px.
--- */
.container>.plateaux-grid,.container>.avis-grid,.container>.services-grid,.container>.accordion-wrapper{flex:1 1 100%;min-width:0;width:100%;box-sizing:border-box}
.avis-grid{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.plateau-card{min-width:0}
.plateau-cta{margin:10px 0 0!important}
.plateau-cta a{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--primary);padding:8px 16px;border-radius:999px}
.plateau-cta a:hover{filter:brightness(1.08)}

/* Tableau comparatif des plateaux (/studio-de-tournage)
Le wrapper porte le scroll horizontal : sur mobile un tableau à 7 colonnes ne se
« responsivise » pas, il se fait glisser. min-width:0 obligatoire, .container est en flex.
--- */
.tableau-scroll{flex:1 1 100%;min-width:0;width:100%;max-width:1000px;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px auto;border:1px solid #cfc7b8;border-radius:10px;background:#fff}
.comparatif{border-collapse:collapse;width:100%;min-width:820px;font-size:14px;line-height:1.45}
.comparatif th,.comparatif td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #e8e3da}
.comparatif thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--rec-sub);background:var(--rec-chip);white-space:nowrap;border-bottom:1px solid #cfc7b8}
.comparatif tbody th{font-weight:800;white-space:nowrap}
.comparatif tbody tr:last-child td,.comparatif tbody tr:last-child th{border-bottom:0}
.comparatif tbody tr:hover{background:rgba(0,0,0,.02)}
.comparatif-soon th,.comparatif-soon td{color:var(--rec-sub);font-style:italic}
.tableau-note{flex:1 1 100%;max-width:1000px;margin:0 auto;padding:0 4px;font-size:13px!important;color:var(--rec-sub)!important;text-align:left}
.comparatif-prix{font-weight:700;white-space:nowrap}

/* Comparatif en CARTES sous 768 px
Un tableau de 7 colonnes ne rentre pas dans un téléphone : plutôt que de le faire glisser
de droite à gauche (Arthur, 14/08 : « pas esthétique et pas pratique »), on le replie en une
carte par studio. Chaque cellule affiche son en-tête de colonne via data-label.
Seuil à 999 px, trouvé en mesurant et pas en devinant : à 767 une tablette en portrait
glissait encore (874 px de tableau pour 738 de wrapper), et à 899 il restait un dépassement
à 900 px. Le tableau ne tient qu'à partir d'un wrapper de 1000 px — donc cartes en dessous.
--- */
@media (max-width:999px){
.tableau-scroll{overflow-x:visible;border:0;background:transparent;margin:16px auto 4px}
.comparatif{min-width:0;display:block;font-size:14px}
.comparatif thead{display:none}
.comparatif tbody,.comparatif tr,.comparatif tbody th,.comparatif td{display:block}
.comparatif tr{border:1px solid #cfc7b8;border-radius:12px;background:#fff;margin-bottom:14px;overflow:hidden}
.comparatif tbody th{background:var(--rec-chip);font-size:17px;padding:10px 14px;border-bottom:1px solid #cfc7b8;white-space:normal}
.comparatif td{display:flex;gap:12px;align-items:baseline;padding:9px 14px;border-bottom:1px solid #efeae1}
.comparatif td::before{content:attr(data-label);flex:0 0 40%;color:var(--rec-sub);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.comparatif tr>td:last-child{border-bottom:0}
.comparatif td[colspan]{display:block;color:var(--rec-sub)}
.comparatif td[colspan]::before{content:none}
.comparatif-soon th,.comparatif-soon td{font-style:normal}
.comparatif-soon tbody th,.comparatif-soon>th{font-style:italic}
}

/* Carrousel de photos dans les cartes de plateau
Le défilement est natif (scroll-snap) : le doigt et le trackpad marchent sans JavaScript.
La barre de défilement est masquée, les flèches et les points ne sont qu'un confort.
--- */
.pslider{position:relative;overflow:hidden}
.pslider-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;outline:0}
.pslider-piste::-webkit-scrollbar{display:none}
.pslider-vue{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:block}
.pslider-vue img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;display:block}
.pslider-fleche{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:#111;font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.22);opacity:.55;transition:opacity .15s ease;padding:0 2px 3px}
.pslider:hover .pslider-fleche{opacity:1}
.pslider-fleche[hidden]{display:none}
.pslider-prec{left:8px}
.pslider-suiv{right:8px}
.pslider-points{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:6px;pointer-events:none}
.pslider-points span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.4);transition:background .15s ease}
.pslider-points span.actif{background:#fff}
.faq-panel p{margin:0 0 10px}
.faq-panel p:last-child{margin-bottom:0}
.faq-panel ul{margin:0 0 10px;padding-left:20px}
.faq-panel li{margin-bottom:6px;line-height:1.5}

/* Outils — calculateurs
Le formulaire est l'outil : il passe avant le texte, en pleine largeur de colonne.
Les champs inutiles au mode choisi sont MASQUÉS et non pas grisés : un champ grisé se lit
quand même et fait douter de ce qu'il faut remplir.
--- */
.calc{background:var(--bg-light);border:1px solid #cfc7b8;border-radius:14px;padding:20px;margin:26px 0}
.calc-modes{border:0;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.calc-modes legend{float:left;width:100%;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--rec-sub);margin-bottom:8px;padding:0}
.calc-modes label{display:inline-flex;align-items:center;gap:7px;font-size:15px;cursor:pointer}
.calc-champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:14px}
.calc-champ{display:flex;flex-direction:column;gap:5px;min-width:0}
.calc-champ>span{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--rec-sub);font-weight:700}
.calc-champ>span i{font-style:normal;font-weight:400;text-transform:none;letter-spacing:0}
.calc-champ input,.calc-champ select{font:inherit;font-size:17px;padding:9px 11px;border:1px solid #cfc7b8;border-radius:8px;background:#fff;color:var(--text-color);width:100%;box-sizing:border-box}
.calc-champ input:focus,.calc-champ select:focus{outline:2px solid var(--primary);outline-offset:1px}
.calc[data-mode="largeur"] .calc-champ[data-pour="focale recul"],
.calc[data-mode="focale"] .calc-champ[data-pour="largeur focale recul"],
.calc[data-mode="recul"] .calc-champ[data-pour="largeur focale"]{display:none}
.calc-resultat{display:block;margin-top:20px;padding-top:18px;border-top:1px solid #cfc7b8}
.calc-chiffre{font-size:34px!important;font-weight:800;line-height:1.1;margin:0 0 8px!important;color:var(--primary-txt)}
.calc-detail{margin:0 0 6px!important;font-size:15px!important;line-height:1.5}
.calc-repere{margin:0!important;font-size:14px!important;color:var(--rec-sub)!important}
.calc-vide{margin:0!important;color:var(--rec-sub)!important;font-size:15px!important}
.calc-formule{text-align:center;font-size:17px;font-weight:600;background:var(--rec-chip);border-radius:10px;padding:14px 16px;margin:16px 0}

/* Outils — cartes de l'index */
.outil-pour{font-size:12px!important;letter-spacing:.03em;text-transform:uppercase;color:var(--rec-sub)!important;margin-bottom:0!important;font-weight:600}
.carte--chantier{border-style:dashed;background:var(--rec-chip)}
.etiquette-chantier{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--rec-sub);border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:middle;white-space:nowrap}

/* Glossaire
--- */
.gl-recherche{display:block;margin:24px 0 8px}
.gl-recherche>span{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--rec-sub);font-weight:700;margin-bottom:6px}
.gl-recherche input{font:inherit;font-size:17px;padding:11px 14px;border:1px solid #cfc7b8;border-radius:10px;background:#fff;width:100%;box-sizing:border-box}
.gl-recherche input:focus{outline:2px solid var(--primary);outline-offset:1px}
.gl-compteur{font-size:13px!important;color:var(--rec-sub)!important;margin:0 0 8px!important}
.gl-liste{margin:0}
.gl-item{padding:14px 0;border-bottom:1px solid #e8e3da}
.gl-item:last-child{border-bottom:0}
.gl-item[hidden]{display:none}
.gl-item dt{font-weight:800;font-size:17px;margin:0 0 5px}
.gl-item dd{margin:0;font-size:15px;line-height:1.55;color:#444}
.gl-maison{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--primary);border-radius:999px;padding:2px 7px;margin-left:6px;vertical-align:middle}
.gl-famille[hidden]{display:none}

/* Outils en construction — l'encart d'honnêteté
--- */
.chantier-encart{background:var(--rec-chip);border:1px dashed #cfc7b8;border-radius:14px;padding:18px 20px;margin:26px 0}
.chantier-titre{font-size:18px!important;font-weight:800;margin:0 0 8px!important}
.chantier-encart p{margin:0 0 8px;font-size:15px;line-height:1.55}
.chantier-encart p:last-child{margin-bottom:0}
.chantier-meta{font-size:13px!important;color:var(--rec-sub)!important}