/* =========================================================================
Prestige Tapis Bruxelles — feuille de style unique
Structure : héro sombre, typo d'antiquaire, cartes sans rayon, filets.
Palette : noir chaud et or. L'or est la seule couleur : doré clair sur
fond sombre, doré profond sur fond clair. Les couples
texte/fond passent WCAG AA, le plus serré à 4,65:1.
Aucune dépendance, aucune requête tierce.
========================================================================= */
/* ---------- 0. Fontes auto-hébergées ---------- */
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2-variations"),
url("/assets/fonts/inter-var.woff2") format("woff2");
font-weight:100 900;font-style:normal;font-display:swap;
unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,
U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-300.woff2") format("woff2");
font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-400.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-500.woff2") format("woff2");
font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("/assets/fonts/cormorant-600.woff2") format("woff2");
font-weight:600;font-style:normal;font-display:swap}
/* ---------- 1. Jetons ---------- */
:root{
--papier:#FCFAF7; --surface:#F3EEE7; --surface-2:#E7DFD4;
--filet:#DDD5C9; --filet-fort:#BFB3A3;
--noir:#0B0A09; --noir-2:#151210; --filet-nuit:rgba(245,241,234,.16);
--encre:#17130F; --encre-doux:#5B5148;
--clair:#F5F1EA; --clair-doux:#ADA396;
/* L'or est la seule couleur du site. Deux versants : le doré clair porte sur
fond sombre, le doré profond sur fond clair. Les treize couples texte/fond
passent WCAG AA, le plus serré à 4,65:1. */
--or:#C9A227; /* accent sur fond sombre */
--or-vif:#E3C25F; /* survol sur fond sombre */
--or-profond:#8A6410; /* accent sur fond clair, fond du bouton principal */
--or-sombre:#6B4C09; /* survol sur fond clair */
--or-voile:#F8F1DF; /* aplat très clair */
--f-titre:"Cormorant",Georgia,"Times New Roman",serif;
--f-corps:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
--enveloppe:1240px; --gout:22px;
--e:cubic-bezier(.2,.7,.3,1); --e-out:cubic-bezier(.16,1,.3,1);
}
@media(min-width:900px){:root{--gout:40px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:96px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);
font-family:var(--f-corps);font-size:16px;line-height:1.65;
font-feature-settings:"kern" 1;-webkit-font-smoothing:antialiased;
overflow-x:clip}
@media(min-width:760px){body{font-size:17px}}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:var(--or-profond);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--or-sombre)}
:focus-visible{outline:2px solid var(--or-profond);outline-offset:3px}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit,.entete,.tiroir) :focus-visible{outline-color:var(--or)}
.btn--pri:focus-visible{outline-color:var(--clair);outline-offset:3px}
::selection{background:var(--or-profond);color:#fff}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saut{position:absolute;left:-9999px;top:0;background:var(--papier);color:var(--encre);
padding:12px 18px;z-index:100}
.saut:focus{left:12px;top:12px}
#contenu:focus{outline:none}
/* ---------- 2. Typographie ---------- */
h1,h2,h3{font-family:var(--f-titre);margin:0;font-weight:400}
.t-heros{font-size:clamp(2.9rem,7.4vw,6.2rem);font-weight:300;line-height:1.02;letter-spacing:-.018em}
.t2{font-size:clamp(2.05rem,4.4vw,3.5rem);font-weight:300;line-height:1.08;letter-spacing:-.014em}
.t3{font-size:1.5rem;font-weight:500;line-height:1.2;letter-spacing:-.008em}
.t4{font-family:var(--f-corps);font-size:1.0625rem;font-weight:600;line-height:1.35;margin:0;
letter-spacing:-.005em}
.chapo{font-size:1.1875rem;line-height:1.55;letter-spacing:-.004em;color:var(--encre-doux);margin:0}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .chapo{color:var(--clair-doux)}
.surtitre{font-family:var(--f-corps);font-size:.6875rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--or-profond);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.surtitre::before{content:"";width:38px;height:1px;background:var(--or-profond);flex:none}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .surtitre{color:var(--or)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .surtitre::before{background:var(--or)}
.surtitre--seul::before{display:none}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.doux{color:var(--encre-doux)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .doux{color:var(--clair-doux)}
.micro{font-family:var(--f-corps);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--encre-doux);margin:0 0 10px}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .micro{color:var(--clair-doux)}
/* ---------- 3. Mise en page ---------- */
.enveloppe{width:100%;max-width:var(--enveloppe);margin:0 auto;padding:0 var(--gout)}
.enveloppe--etroit{max-width:820px}
.sec{padding:76px 0}
@media(min-width:900px){.sec{padding:124px 0}}
.sec--serre{padding:60px 0}
@media(min-width:900px){.sec--serre{padding:92px 0}}
.sec--alt{background:var(--surface)}
.nuit,.sec--nuit{background:var(--noir);color:var(--clair)}
.sec--nuit{padding:92px 0}
@media(min-width:900px){.sec--nuit{padding:150px 0}}
/* Deux sections de même fond qui se suivent ne forment qu'un seul aplat : leurs
deux marges intérieures s'additionnaient en un trou de 300 px. */
.sec--nuit + .sec--nuit{padding-top:0}
.sec--alt + .sec--alt{padding-top:0}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) :is(h1,h2,h3,h4){color:var(--clair)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) a{color:var(--or)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) a:hover{color:var(--or-vif)}
/* les éléments qui portent leur propre couleur reprennent la main */
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--pri,
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--pri:hover{color:#fff}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--fantome,
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--fantome:hover{color:var(--clair)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--clair,
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--clair:hover{color:var(--encre)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) a.carte{color:inherit}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) a.marque{color:var(--clair)}
.grille{display:grid;gap:22px}
.grille>*,.duo>*,.corps-2col>*{min-width:0}
.g2{grid-template-columns:1fr}
.g3{grid-template-columns:1fr}
.g4{grid-template-columns:repeat(2,1fr)}
@media(max-width:479px){.g4{grid-template-columns:1fr}}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.duo{display:grid;gap:38px;align-items:start}
@media(min-width:960px){.duo{grid-template-columns:1fr 1fr;gap:62px}
.duo--60{grid-template-columns:1.35fr 1fr}
.duo--40{grid-template-columns:1fr 1.35fr}}
.entete-sec{max-width:740px;margin-bottom:46px}
.entete-sec--large{max-width:920px}
.entete-sec p{margin-top:16px}
.filet{height:1px;background:var(--filet);position:relative;margin:0 0 38px}
.filet::before{content:"";position:absolute;left:0;top:0;width:64px;height:1px;background:var(--or-profond)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .filet{background:var(--filet-nuit)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .filet::before{background:var(--or)}
/* ---------- 4. Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:var(--f-corps);font-size:.9375rem;font-weight:600;letter-spacing:.01em;
padding:16px 26px;border:1px solid transparent;border-radius:0;cursor:pointer;text-decoration:none;
transition:background .18s var(--e),color .18s var(--e),border-color .18s var(--e),transform .18s var(--e)}
.btn:hover{transform:translateY(-2px)}
.btn--pri{background:var(--or-profond);color:#fff}
.btn--pri:hover{background:var(--or-sombre);color:#fff}
.btn--fantome{background:transparent;color:var(--encre);border-color:var(--filet-fort)}
.btn--fantome:hover{border-color:var(--encre);color:var(--encre)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--fantome{color:var(--clair);border-color:var(--filet-nuit)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .btn--fantome:hover{border-color:var(--clair);color:var(--clair)}
.btn--clair{background:var(--papier);color:var(--encre)}
.btn--clair:hover{background:var(--surface-2);color:var(--encre)}
.btn--bloc{width:100%}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.jeton{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--filet);
padding:7px 15px;font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
color:var(--encre-doux);background:var(--papier)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .jeton{border-color:var(--filet-nuit);
color:var(--clair-doux);background:transparent}
.jeton .point{width:6px;height:6px;border-radius:999px;background:var(--or-profond);flex:none}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .jeton .point{background:var(--or)}
.jetons{display:flex;flex-wrap:wrap;gap:10px}
/* ---------- 5. En-tête ---------- */
.entete{position:fixed;inset:0 0 auto;z-index:60;
transition:background .26s ease-out,border-color .26s ease-out}
.entete::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:transparent;
transition:background .26s ease-out}
.entete.est-fige{background:rgba(11,10,9,.94);backdrop-filter:saturate(140%) blur(8px)}
.entete.est-fige::after{background:var(--filet-nuit)}
.entete-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:74px}
@media(min-width:900px){.entete-in{height:88px}}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--clair);flex:none}
.marque:hover{color:var(--clair)}
.marque__sceau{width:34px;height:34px;flex:none}
.marque__nom{display:flex;flex-direction:column;line-height:1}
.marque__nom b{font-family:var(--f-titre);font-weight:500;font-size:1.24rem;letter-spacing:.005em}
.marque__nom span{font-size:.5625rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
color:var(--clair-doux);margin-top:4px}
@media(max-width:420px){.marque__nom span{display:none}}
.nav{display:none}
@media(min-width:1140px){.nav{display:flex;align-items:center;gap:16px}}
@media(min-width:1320px){.nav{gap:20px}}
.nav a{font-size:.9375rem;font-weight:500;color:var(--clair);text-decoration:none;padding:6px 0;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--or);
transition:right .2s var(--e)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.entete-outils{display:flex;align-items:center;gap:14px}
.entete-tel{display:none}
@media(min-width:1320px){.entete-tel{display:inline-flex;align-items:center;min-height:24px;gap:8px;font-size:.875rem;
font-weight:600;letter-spacing:.03em;color:var(--clair);text-decoration:none;white-space:nowrap}}
.entete-tel:hover{color:var(--or)}
/* Le libellé du bouton passait à la ligne dès 1320 px : le bouton faisait
alors 78 px dans un en-tête de 88 px. On le tient sur une ligne. */
.entete-cta{display:none}
@media(min-width:900px){.entete-cta{display:inline-flex;padding:13px 18px;white-space:nowrap}}
@media(max-width:379px){
.entete-in{gap:8px}
.entete-outils{gap:8px}
.langue summary{padding:9px 7px;gap:5px}
.langue summary>span:not(.sr){display:none}
.marque__sceau{width:30px;height:30px}
.marque__nom b{font-size:1.08rem}
}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
background:none;border:1px solid var(--filet-nuit);cursor:pointer;padding:0 11px}
@media(min-width:1140px){.burger{display:none}}
.burger span{display:block;height:1.5px;background:var(--clair);
transition:transform .2s var(--e),opacity .2s var(--e)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.tiroir{position:fixed;inset:0;z-index:55;background:var(--noir);padding:96px var(--gout) 48px;
overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-12px);
transition:opacity .24s var(--e),transform .24s var(--e),visibility .24s}
.tiroir.est-ouvert{opacity:1;visibility:visible;transform:none}
.tiroir nav a{display:block;font-family:var(--f-titre);font-size:1.9rem;font-weight:300;
letter-spacing:-.01em;color:var(--clair);text-decoration:none;padding:13px 0;
border-bottom:1px solid var(--filet-nuit)}
.tiroir nav a:hover{color:var(--or)}
.tiroir .btn{margin-top:26px}
.tiroir__tete{display:grid;gap:10px;margin:0 0 22px}
.tiroir__tel{display:flex;align-items:center;justify-content:center;gap:10px;padding:15px 18px;
border:1px solid var(--filet-nuit);color:var(--clair);text-decoration:none;
font-size:1rem;font-weight:600;letter-spacing:.02em}
.tiroir__tete .btn{margin-top:0}
/* ---------- 6. Sélecteur de langue ---------- */
.drapeau{width:19px;height:13px;flex:none;border:1px solid rgba(255,255,255,.3);border-radius:1px;display:block}
.langue{position:relative;flex:none}
.langue summary{display:flex;align-items:center;gap:7px;cursor:pointer;list-style:none;padding:9px 10px;
border:1px solid var(--filet-nuit);background:transparent;color:var(--clair);
font-size:.6875rem;font-weight:600;letter-spacing:.1em;transition:border-color .18s var(--e)}
.langue summary::-webkit-details-marker{display:none}
.langue summary::marker{content:""}
.langue summary:hover,.langue[open] summary{border-color:var(--clair)}
.langue summary:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.langue-fleche{width:10px;height:6px;flex:none;transition:transform .18s var(--e)}
.langue[open] .langue-fleche{transform:rotate(180deg)}
.langue ul{position:absolute;right:0;top:calc(100% + 6px);z-index:80;margin:0;padding:6px;list-style:none;
min-width:196px;background:var(--noir-2);border:1px solid var(--filet-nuit);
box-shadow:0 24px 48px -24px rgba(0,0,0,.85)}
.langue ul a{display:flex;align-items:center;gap:10px;padding:10px 12px;text-decoration:none;
color:var(--clair);font-size:.9375rem;font-weight:500;letter-spacing:0}
.langue ul a:hover{background:rgba(255,255,255,.07);color:var(--clair)}
.langue ul a[aria-current="true"]{color:var(--or)}
.langue ul a[aria-current="true"]::after{content:"✓";margin-left:auto;font-size:.8125rem}
.langue--tiroir{margin:20px 0 4px;width:100%}
.langue--tiroir summary{justify-content:flex-start;padding:15px 0;border:0;
border-top:1px solid var(--filet-nuit);font-size:.75rem}
.langue--tiroir ul{position:static;min-width:0;border:0;padding:0;box-shadow:none;background:transparent}
.langue--tiroir ul a{padding:12px 0}
/* =========================================================================
7. HÉROS D'ACCUEIL — l'éventail des quatre métiers
Quatre volets ouverts en éventail dans un espace en perspective. Au survol
ou au focus, le volet visé se redresse et vient vers le lecteur pendant que
les trois autres reculent et s'assombrissent : il n'y a jamais deux endroits
où regarder. Toute la géométrie est ici — le JavaScript n'ajoute que
l'inclinaison de la scène au pointeur, et son absence ne change rien.
========================================================================= */
.heros{position:relative;background:var(--noir);color:var(--clair);isolation:isolate}
.heros--eventail{overflow:hidden;padding:calc(74px + 44px) 0 44px;
display:flex;flex-direction:column;justify-content:center;gap:38px}
@media(min-width:900px){.heros--eventail{padding:calc(88px + 40px) 0 40px;min-height:100svh;gap:30px}}
/* fond : une lueur dorée qui respire, et un grain fixe */
.heros__lueur{position:absolute;inset:-20% 0 auto;height:120%;z-index:-3;pointer-events:none;
background:radial-gradient(58% 52% at 26% 40%,rgba(201,162,39,.22),transparent 70%),
radial-gradient(52% 46% at 76% 62%,rgba(138,100,16,.30),transparent 74%);
animation:lueur-respire 15s ease-in-out infinite}
@keyframes lueur-respire{0%,100%{opacity:.82;transform:translate3d(0,0,0) scale(1)}
50%{opacity:1;transform:translate3d(0,-1.4%,0) scale(1.05)}}
.heros__grain{position:absolute;inset:0;z-index:-2;opacity:.05;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.heros__in{position:relative;display:grid;gap:44px;align-items:center;width:100%}
@media(min-width:1000px){.heros__in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:40px}}
@media(min-width:1240px){.heros__in{gap:64px}}
.heros h1{margin:14px 0 0;text-wrap:balance}
.heros--eventail h1{font-size:clamp(2.5rem,4.3vw,4.05rem)}
.heros .chapo{margin-top:18px;max-width:34em;font-size:1.0625rem}
.heros__actions{margin-top:26px}
.heros__preuves{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
/* mots du titre : apparition différée */
.heros h1 .mot{display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.2deg);
animation:mot-monte .9s var(--e-out) forwards;animation-delay:calc(var(--m) * 70ms + 120ms)}
@keyframes mot-monte{to{opacity:1;transform:none}}
/* ---------- l'éventail ---------- */
/* La perspective est portée par le conteneur direct des volets, et le pointeur
déplace son point de fuite. On avait d'abord fait pivoter une scène en
`preserve-3d` : le rendu était le même, mais le navigateur ne retrouvait plus
les volets au pointeur — ils n'étaient ni survolables ni cliquables. */
.eventail{position:relative}
.eventail__scene{display:flex;justify-content:center;align-items:center;
perspective:1500px;
perspective-origin:calc(50% + var(--px,0px)) calc(46% + var(--py,0px));
transition:perspective-origin .5s var(--e-out)}
/* Le volet ne porte QUE sa transformation. Un `filter` posé ici sortirait
l'élément du contexte 3D du parent : le rendu resterait juste, mais le
pointeur ne le trouverait plus — ni le survol, ni le clic. L'assombrissement
est donc appliqué à la photo, à l'intérieur. */
.volet{position:relative;display:block;text-decoration:none;color:var(--clair);
/* `flex-shrink:1` : l'éventail se resserre plutôt que de sortir de sa
colonne — sinon il touchait le bord de l'écran entre 1000 et 1300 px. */
flex:0 1 auto;width:clamp(126px,15vw,214px);min-width:0;
height:clamp(300px,45vh,468px);
transform:translateY(var(--ty)) translateZ(var(--tz)) rotateY(var(--ry)) rotateZ(var(--rz));
transition:transform .55s var(--e-out),box-shadow .45s ease;
box-shadow:0 26px 54px -26px rgba(0,0,0,.92);
border:1px solid var(--filet-nuit);
overflow:hidden;
animation:volet-ouvre 1s var(--e-out) backwards;
animation-delay:calc(var(--i) * 130ms + 260ms)}
@keyframes volet-ouvre{
from{opacity:0;transform:translateY(64px) translateZ(-190px) rotateY(0deg) rotateZ(0deg)}}
/* l'éventail proprement dit : symétrique, les volets extérieurs reculent */
.volet:nth-child(1){--ry:27deg;--tz:-74px;--ty:32px;--rz:-3.2deg}
.volet:nth-child(2){--ry:9.5deg;--tz:-8px;--ty:5px;--rz:-1.1deg}
.volet:nth-child(3){--ry:-9.5deg;--tz:-8px;--ty:5px;--rz:1.1deg}
.volet:nth-child(4){--ry:-27deg;--tz:-74px;--ty:32px;--rz:3.2deg}
.volet__photo{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;
filter:brightness(.8) saturate(.9);transition:filter .45s ease}
.volet__photo picture,.volet__photo img{display:block;width:100%;height:100%;object-fit:cover}
.volet__photo img{transform:scale(1.08);
animation:volet-derive 18s ease-in-out infinite;
animation-delay:calc(var(--i) * -4.2s)}
@keyframes volet-derive{0%,100%{transform:scale(1.08) translate3d(0,0,0)}
50%{transform:scale(1.15) translate3d(0,-2%,0)}}
.volet__voile{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(11,10,9,.30) 0%,rgba(11,10,9,0) 26%,
rgba(11,10,9,.52) 58%,rgba(11,10,9,.94) 100%);
transition:background .45s ease}
.volet__texte{position:absolute;inset:auto 0 0;z-index:2;display:block;
padding:0 14px 16px}
@media(min-width:1240px){.volet__texte{padding:0 18px 20px}}
.volet__num{display:block;font-family:var(--f-corps);font-size:.625rem;font-weight:600;
letter-spacing:.2em;color:var(--or);margin-bottom:8px}
.volet__nom{display:block;font-family:var(--f-titre);font-weight:500;line-height:1.12;
font-size:clamp(1.12rem,1.5vw,1.45rem);letter-spacing:-.005em;text-wrap:balance}
.volet__nom::after{content:"";display:block;width:26px;height:1px;background:var(--or);
margin-top:10px;transition:width .5s var(--e-out)}
.volet__ligne,.volet__suite{display:block;overflow:hidden;
max-height:0;opacity:0;
transition:max-height .55s var(--e-out),opacity .3s ease,margin .55s var(--e-out)}
.volet__ligne{font-size:.78125rem;line-height:1.42;color:var(--clair-doux)}
.volet__suite{font-size:.625rem;font-weight:600;letter-spacing:.16em;
text-transform:uppercase;color:var(--or)}
/* le volet visé : il se redresse, s'avance, et parle */
.eventail__scene:hover .volet:not(:hover) .volet__photo,
.eventail__scene:focus-within .volet:not(:focus-within) .volet__photo{
filter:brightness(.4) saturate(.7)}
.eventail__scene:hover .volet:not(:hover),
.eventail__scene:focus-within .volet:not(:focus-within){
transform:translateY(calc(var(--ty) + 8px)) translateZ(calc(var(--tz) - 34px))
rotateY(var(--ry)) rotateZ(var(--rz))}
.volet:hover,.volet:focus-within{
transform:translateY(-14px) translateZ(86px) rotateY(0deg) rotateZ(0deg);
box-shadow:0 44px 88px -30px rgba(0,0,0,.95),0 0 0 1px var(--or)}
.volet:hover .volet__photo,.volet:focus-within .volet__photo{
filter:brightness(1.04) saturate(1.02)}
.volet:hover .volet__voile,.volet:focus-within .volet__voile{
background:linear-gradient(180deg,rgba(11,10,9,.22) 0%,rgba(11,10,9,0) 20%,
rgba(11,10,9,.66) 46%,rgba(11,10,9,.97) 100%)}
.volet:hover .volet__nom::after,.volet:focus-within .volet__nom::after{width:52px}
.volet:hover .volet__ligne,.volet:focus-within .volet__ligne{max-height:9em;opacity:1;margin-top:10px}
.volet:hover .volet__suite,.volet:focus-within .volet__suite{max-height:2em;opacity:1;margin-top:12px}
/* ---------- les chiffres, en bas du héros ---------- */
.heros__chiffres{position:relative;display:grid;grid-template-columns:repeat(2,1fr);
gap:18px 24px;padding-top:22px;border-top:1px solid var(--filet-nuit)}
@media(min-width:760px){.heros__chiffres{grid-template-columns:repeat(4,1fr);gap:26px}}
.heros__chiffres .n b{display:block;font-family:var(--f-titre);font-weight:300;line-height:1;
font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.02em;color:var(--clair)}
.heros__chiffres .n b i{font-style:normal;font-size:.42em;margin-left:.16em;letter-spacing:0;
color:var(--or)}
.heros__chiffres .n>span{display:block;margin-top:8px;font-size:.78125rem;
color:var(--clair-doux);max-width:18em}
/* ---------- sous 1000 px : plus de perspective, quatre tuiles ---------- */
@media(max-width:999px){
/* on resserre le haut du héros pour que les quatre tuiles montrent le bout
du nez avant le premier défilement */
.heros--eventail{padding:calc(74px + 26px) 0 38px;gap:26px}
.heros--eventail h1{font-size:clamp(2.2rem,8.6vw,3.1rem)}
.heros .chapo{margin-top:15px;font-size:1rem}
.heros__actions{margin-top:22px}
.heros__actions .btn{flex:1 1 auto;justify-content:center}
.heros__preuves{margin-top:16px;gap:7px}
.heros__preuves .jeton{padding:6px 11px;font-size:.625rem;letter-spacing:.08em}
.eventail__scene{perspective:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.volet{flex:none;width:auto;height:clamp(176px,34vw,240px);
transform:none;box-shadow:0 16px 34px -20px rgba(0,0,0,.9)}
.volet__photo{filter:none}
.volet:nth-child(n){--ry:0deg;--tz:0px;--ty:0px;--rz:0deg}
@keyframes volet-ouvre{from{opacity:0;transform:translateY(26px)}}
.eventail__scene:hover .volet:not(:hover),
.eventail__scene:focus-within .volet:not(:focus-within){transform:none}
.eventail__scene:hover .volet:not(:hover) .volet__photo,
.eventail__scene:focus-within .volet:not(:focus-within) .volet__photo{filter:none}
.volet:hover,.volet:focus-within{transform:none;box-shadow:0 16px 34px -20px rgba(0,0,0,.9),0 0 0 1px var(--or)}
/* sur écran tactile il n'y a pas de survol : on ne cache pas de texte */
.volet__ligne{display:none}
.volet__suite{max-height:2em;opacity:1;margin-top:10px}
}
/* héro court des pages internes */
.heros-page{position:relative;background:var(--noir);color:var(--clair);overflow:hidden;
padding:118px 0 58px;isolation:isolate}
@media(min-width:900px){.heros-page{padding:164px 0 76px}}
.heros-page__fond{position:absolute;inset:0;z-index:-2}
.heros-page__fond img{width:100%;height:100%;object-fit:cover;opacity:.42}
.heros-page::before{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,.62) 45%,rgba(11,10,9,.95) 100%)}
.heros-page__grille{display:grid;gap:34px;align-items:end}
@media(min-width:1000px){.heros-page__grille{grid-template-columns:1.3fr .78fr;gap:56px}}
.heros-page h1{margin:14px 0 0;text-wrap:balance}
.heros-page .chapo{margin-top:20px;max-width:38em}
.heros-page__actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.heros-page__image img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* ---------- 8. Fil d'Ariane ---------- */
.ariane{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--clair-doux);margin:0 0 4px}
.ariane ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 9px}
.ariane li{display:flex;gap:9px;align-items:center}
.ariane a,.ariane [aria-current]{display:inline-flex;align-items:center;min-height:24px}
.ariane li+li::before{content:"/";opacity:.42}
.ariane a{color:var(--clair-doux);text-decoration:none}
.ariane a:hover{color:var(--or)}
.ariane [aria-current]{color:var(--clair)}
/* ---------- 9. Repères chiffrés ---------- */
.reperes{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0;
border-top:1px solid var(--filet)}
@media(min-width:760px){.reperes{grid-template-columns:repeat(4,1fr)}}
.reperes>div{padding:20px 22px 20px 0;border-bottom:1px solid var(--filet)}
.reperes dt{font-size:.6875rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
color:var(--encre-doux);margin-bottom:7px}
.reperes dd{margin:0;font-family:var(--f-titre);font-size:1.6rem;font-weight:400;line-height:1.15;
letter-spacing:-.01em}
.reperes dd.long{font-family:var(--f-corps);font-size:.9375rem;font-weight:500;line-height:1.45}
:is(.nuit,.sec--nuit,.heros-page,.heros) .reperes,
:is(.nuit,.sec--nuit,.heros-page,.heros) .reperes>div{border-color:var(--filet-nuit)}
:is(.nuit,.sec--nuit,.heros-page,.heros) .reperes dt{color:var(--clair-doux)}
:is(.nuit,.sec--nuit,.heros-page,.heros) .reperes dd{color:var(--clair)}
/* ---------- 10. Cartes ---------- */
.carte{background:var(--papier);border:1px solid var(--filet);display:flex;flex-direction:column;
text-decoration:none;color:inherit;height:100%;position:relative;
transition:border-color .2s var(--e),transform .3s var(--e),box-shadow .3s var(--e)}
a.carte:hover{border-color:var(--encre);color:inherit;box-shadow:0 26px 48px -34px rgba(23,19,15,.55)}
.carte__image{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--surface-2)}
.carte__image img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
a.carte:hover .carte__image img{transform:scale(1.05)}
.carte__num{position:absolute;top:0;left:0;z-index:2;background:var(--noir);color:var(--or);
font-size:.6875rem;font-weight:600;letter-spacing:.14em;padding:7px 11px}
.carte__corps{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.carte__suite{margin-top:auto;padding-top:15px;font-size:.6875rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--or-profond);display:flex;align-items:center;gap:9px}
.carte__suite::after{content:"";width:22px;height:1px;background:var(--or-profond);transition:width .2s var(--e)}
a.carte:hover .carte__suite::after{width:36px}
.carte--nuit{background:var(--noir-2);border-color:var(--filet-nuit);color:var(--clair)}
a.carte--nuit:hover{border-color:var(--clair-doux);color:var(--clair)}
.carte--nuit .carte__suite{color:var(--or)}
.carte--nuit .carte__suite::after{background:var(--or)}
/* inclinaison 3D légère au pointeur — uniquement là où il y a un vrai curseur */
@media(hover:hover) and (pointer:fine){
.incline{transform-style:preserve-3d;
transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);
transition:transform .4s var(--e-out)}
.incline:hover{transition:transform .1s linear}
.incline>*{transform:translateZ(18px)}
}
/* ---------- 11. Listes ---------- */
.puces{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.puces li{position:relative;padding-left:28px;font-size:.9375rem}
.puces li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:2px;background:var(--or-profond)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .puces li::before{background:var(--or)}
.etapes{list-style:none;margin:0;padding:0;counter-reset:e;display:grid}
/* Le numéro était une cellule de grille, et le en comptait donc trois
quand l'étape avait un titre ET un paragraphe : le paragraphe retombait sous
le numéro, dans une colonne de 52 px, et se lisait un mot par ligne. Le
numéro est maintenant posé en absolu — le contenu du coule normalement,
quel que soit le nombre d'éléments. */
.etapes li{counter-increment:e;position:relative;
padding:26px 0 26px 56px;border-top:1px solid var(--filet)}
@media(min-width:640px){.etapes li{padding-left:72px}}
.etapes li:last-child{border-bottom:1px solid var(--filet)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .etapes li{border-color:var(--filet-nuit)}
.etapes li::before{content:counter(e,decimal-leading-zero);position:absolute;left:0;top:24px;
font-family:var(--f-titre);font-size:1.5rem;
font-weight:300;color:var(--or-profond);line-height:1.18}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .etapes li::before{color:var(--or)}
.liens-jetons{display:flex;flex-wrap:wrap;gap:10px}
.liens-jetons a{font-size:.875rem;text-decoration:none;color:var(--encre);border:1px solid var(--filet);
padding:9px 15px;transition:border-color .18s var(--e),color .18s var(--e)}
.liens-jetons a:hover{border-color:var(--or-profond);color:var(--or-profond)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .liens-jetons a{color:var(--clair);border-color:var(--filet-nuit)}
:is(.nuit,.sec--nuit,.heros,.heros-page,.bandeau-cta,.pied,.cote-bloc--nuit) .liens-jetons a:hover{border-color:var(--or);color:var(--or)}
/* ---------- 12. Prose ---------- */
.prose{max-width:70ch}
.prose h2{font-family:var(--f-titre);font-size:clamp(1.65rem,3vw,2.3rem);font-weight:400;
line-height:1.15;letter-spacing:-.012em;margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--f-titre);font-size:1.4rem;font-weight:500;margin:36px 0 12px}
.prose ul,.prose ol{padding-left:20px;margin:0 0 1.2em}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--or-profond)}
.prose figure{margin:36px 0}
.prose figure img{width:100%}
.prose figcaption{margin-top:12px;font-size:.8125rem;color:var(--encre-doux);
display:flex;gap:10px;align-items:baseline}
.prose figcaption b{font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--or-profond);flex:none}
.prose table{width:100%;border-collapse:collapse;margin:30px 0;font-size:.9375rem}
.prose th,.prose td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--filet);vertical-align:top}
.prose th{font-size:.6875rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
color:var(--encre-doux);border-bottom-color:var(--filet-fort)}
.tableau-large{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose blockquote{margin:34px 0;padding:0 0 0 24px;border-left:2px solid var(--or-profond);
font-family:var(--f-titre);font-size:1.35rem;font-weight:400;line-height:1.45;color:var(--encre)}
/* colonne latérale */
.corps-2col{display:grid;gap:44px;align-items:start}
@media(min-width:1000px){.corps-2col{grid-template-columns:minmax(0,1fr) 330px;gap:62px}}
.cote{display:grid;gap:22px}
@media(min-width:1000px){.cote{position:sticky;top:112px}}
.cote-bloc{border:1px solid var(--filet);padding:24px;background:var(--papier)}
.cote-bloc--nuit{background:var(--noir);border-color:var(--noir);color:var(--clair)}
.cote-bloc--nuit .micro{color:var(--or)}
.cote-tel{font-family:var(--f-titre);font-size:1.7rem;font-weight:400;margin:0 0 8px;letter-spacing:-.01em}
.cote-tel a{color:var(--clair);text-decoration:none}
.cote-tel a:hover{color:var(--or)}
.cote-bloc--nuit p{font-size:.875rem;color:var(--clair-doux)}
.cote-bloc--nuit .btn{margin-top:16px}
/* liste de définitions (coordonnées, caractéristiques) */
.kv{display:grid;gap:0;border-top:1px solid var(--filet);margin:34px 0 0}
.kv>div{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;
border-bottom:1px solid var(--filet)}
@media(min-width:640px){.kv>div{grid-template-columns:190px 1fr;gap:24px;align-items:baseline}}
.kv dt{font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--encre-doux)}
.kv dd{margin:0}
:is(.nuit,.sec--nuit) .kv,:is(.nuit,.sec--nuit) .kv>div{border-color:var(--filet-nuit)}
:is(.nuit,.sec--nuit) .kv dt{color:var(--clair-doux)}
/* ---------- 13. Faits locaux ---------- */
.faits{display:grid;gap:1px;background:var(--filet);border:1px solid var(--filet)}
@media(min-width:760px){.faits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.faits{grid-template-columns:repeat(3,1fr)}}
.fait{background:var(--papier);padding:26px}
.sec--alt .fait{background:var(--surface)}
.fait p{font-size:.9375rem;line-height:1.62}
.fait__lien{margin-top:14px;padding-top:14px;border-top:1px solid var(--filet);
font-size:.875rem;color:var(--encre-doux)}
.sec--nuit .faits{background:var(--filet-nuit);border-color:var(--filet-nuit)}
.sec--nuit .fait{background:var(--noir)}
.sec--nuit .fait__lien{border-color:var(--filet-nuit);color:var(--clair-doux)}
/* ---------- 14. Comparateur avant / après ---------- */
.comparateur{position:relative;overflow:hidden;aspect-ratio:var(--ar,4/3);background:var(--noir);
user-select:none;touch-action:pan-y}
.comparateur img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.comparateur .apres{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p,50%))}
.comparateur__poignee{position:absolute;top:0;bottom:0;left:var(--p,50%);width:2px;background:var(--papier);
transform:translateX(-1px);pointer-events:none}
.comparateur__poignee::after{content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
transform:translate(-50%,-50%);border:2px solid var(--papier);background:rgba(11,10,9,.34)}
.comparateur input[type=range]{position:absolute;inset:auto 0 0;width:100%;height:100%;margin:0;
opacity:0;cursor:ew-resize}
.comparateur__etiq{position:absolute;top:15px;font-size:.625rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:#fff;background:rgba(11,10,9,.74);padding:6px 11px;pointer-events:none}
.comparateur__etiq.g{left:15px}
.comparateur__etiq.d{right:15px}
.comparateur-lg{margin-top:14px;font-size:.875rem;color:var(--encre-doux)}
:is(.nuit,.sec--nuit) .comparateur-lg{color:var(--clair-doux)}
/* ---------- 15. Communes ---------- */
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--filet-nuit)}
@media(min-width:700px){.zones{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.zones{grid-template-columns:repeat(4,1fr)}}
.zone{display:flex;align-items:baseline;gap:10px;padding:17px 4px;
border-bottom:1px solid var(--filet-nuit);text-decoration:none;color:var(--clair);font-size:1rem;
transition:padding-left .18s var(--e),color .18s var(--e)}
.zone:hover{padding-left:12px;color:var(--or)}
.zone em{font-style:normal;font-size:.6875rem;font-weight:600;letter-spacing:.08em;color:var(--clair-doux)}
/* ---------- 16. FAQ ---------- */
summary::-webkit-details-marker{display:none}
.faq{border-top:1px solid var(--filet)}
:is(.nuit,.sec--nuit) .faq{border-color:var(--filet-nuit)}
.qr{border-bottom:1px solid var(--filet)}
:is(.nuit,.sec--nuit) .qr{border-color:var(--filet-nuit)}
.qr>summary{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
padding:24px 0;cursor:pointer;list-style:none;
font-family:var(--f-titre);font-size:1.35rem;font-weight:500;line-height:1.28;letter-spacing:-.008em}
.qr>summary::marker{content:""}
.qr .ic{flex:none;width:20px;height:20px;position:relative;margin-top:7px}
.qr .ic::before,.qr .ic::after{content:"";position:absolute;background:var(--or-profond);
transition:transform .28s var(--e)}
:is(.nuit,.sec--nuit) .qr .ic::before,:is(.nuit,.sec--nuit) .qr .ic::after{background:var(--or)}
.qr .ic::before{left:0;right:0;top:9.5px;height:1.5px}
.qr .ic::after{top:0;bottom:0;left:9.5px;width:1.5px}
.qr[open] .ic::after{transform:scaleY(0)}
.qr__corps{padding-bottom:26px;max-width:72ch;color:var(--encre-doux);font-size:.9375rem}
:is(.nuit,.sec--nuit) .qr__corps{color:var(--clair-doux)}
@supports (interpolate-size:allow-keywords){
:root{interpolate-size:allow-keywords}
.qr::details-content{block-size:0;overflow:hidden;
transition:block-size .32s var(--e),content-visibility .32s var(--e) allow-discrete}
.qr[open]::details-content{block-size:auto}
}
/* ---------- 17. Formulaire ---------- */
.devis{background:var(--papier);color:var(--encre);padding:28px;
box-shadow:0 32px 64px -32px rgba(0,0,0,.5)}
@media(min-width:900px){.devis{padding:34px}}
.devis h2,.devis h3{font-family:var(--f-titre);font-size:1.55rem;font-weight:500;letter-spacing:-.01em}
.devis-grille{display:grid;gap:0 18px;grid-template-columns:1fr}
@media(min-width:620px){.devis-grille{grid-template-columns:1fr 1fr}
.champ.plein{grid-column:1 / -1}}
.champ{margin-top:16px}
.champ label{display:block;font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
color:var(--encre-doux);margin-bottom:7px}
.champ input,.champ select,.champ textarea{width:100%;font-family:var(--f-corps);font-size:1rem;
color:var(--encre);background:var(--papier);border:1px solid var(--filet-fort);border-radius:2px;
padding:13px 14px;transition:border-color .18s var(--e)}
.champ textarea{min-height:116px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--or-profond);outline:none}
.champ--case{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:20px}
.champ--case input[type=checkbox]{width:24px;height:24px;margin-top:0;accent-color:var(--or-profond);flex:none}
.champ--case label{font-size:.8125rem;line-height:1.5;letter-spacing:0;text-transform:none;
color:var(--encre-doux);margin-bottom:0;font-weight:400}
.champ--case label a{color:var(--or-profond);text-decoration:underline;text-underline-offset:2px}
.pot-de-miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.devis .note{font-size:.8125rem;color:var(--encre-doux);margin-top:14px}
.form-msg{margin-top:16px;padding:14px;border:1px solid var(--filet);font-size:.9375rem;display:none}
.form-msg.ok{display:block;border-color:var(--or-profond);background:var(--or-voile);color:var(--or-sombre)}
.form-msg.ko{display:block;border-color:var(--filet-fort);background:var(--surface)}
.devis,.devis :is(h1,h2,h3,h4,p,label){color:var(--encre)}
.devis .note,.devis .doux{color:var(--encre-doux)}
.devis a{color:var(--or-profond)}
.devis a:hover{color:var(--or-sombre)}
.devis :focus-visible{outline-color:var(--or-profond)}
/* ---------- 18. Bandeau CTA, pied de page, barre d'appel ---------- */
.bandeau-cta{background:var(--noir);color:var(--clair);padding:78px 0}
@media(min-width:900px){.bandeau-cta{padding:110px 0}}
.bandeau-cta .duo{align-items:center}
.pied{background:var(--noir);color:var(--clair-doux);padding:76px 0 30px;border-top:1px solid var(--filet-nuit)}
.pied-grille{display:grid;gap:42px}
@media(min-width:800px){.pied-grille{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.pied h3{font-family:var(--f-corps);font-size:.6875rem;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--clair);margin:0 0 18px}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pied a{color:var(--clair-doux);text-decoration:none;font-size:.9375rem}
.pied a:hover{color:var(--or)}
.pied-bas{margin-top:52px;padding-top:24px;border-top:1px solid var(--filet-nuit);
display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;
font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.barre-appel{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;
background:var(--noir);border-top:1px solid var(--filet-nuit);transform:translateY(100%);
transition:transform .24s var(--e)}
.barre-appel.est-visible{transform:none}
@media(min-width:1320px){.barre-appel{display:none}}
.barre-appel a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;
font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;color:var(--clair);white-space:nowrap}
@media(max-width:420px){.barre-appel a{font-size:.6875rem;letter-spacing:.03em;padding:15px 4px}}
.barre-appel a+a{background:var(--or-profond);color:#fff;border-left:1px solid var(--filet-nuit)}
@media(max-width:1319px){body{padding-bottom:52px}}
/* ---------- 19. Révélations au défilement ---------- */
[data-rvl]{opacity:0;transform:translateY(28px);
transition:opacity .75s var(--e-out),transform .75s var(--e-out)}
[data-rvl].est-vu{opacity:1;transform:none}
[data-rvl][data-rvl="2"]{transition-delay:.11s}
[data-rvl][data-rvl="3"]{transition-delay:.22s}
/* ---------- 20. Motif noué (SVG décoratif) ---------- */
.motif{display:block;width:100%;height:24px;color:var(--filet);margin:0 0 30px}
:is(.nuit,.sec--nuit,.bandeau-cta) .motif{color:var(--filet-nuit)}
/* ---------- 21. Pile 3D « avant / pendant / après » ---------- */
.pile{perspective:1200px;perspective-origin:50% 40%;padding:30px 0}
.pile__scene{position:relative;transform-style:preserve-3d;
transform:rotateX(52deg) rotateZ(-32deg);aspect-ratio:1/1;max-width:520px;margin:0 auto}
.pile__plan{position:absolute;inset:0;border:1px solid var(--filet-nuit);overflow:hidden;
transform:translateZ(calc(var(--k) * var(--ecart,60px)));
box-shadow:0 20px 40px -22px rgba(0,0,0,.85);transition:transform .8s var(--e-out)}
.pile__plan img{width:100%;height:100%;object-fit:cover}
.pile__etiq{position:absolute;right:-6%;top:calc(var(--k) * -6% + 46%);z-index:3;
font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--or)}
/* La pile est un carré tourné en 3D : sa boîte englobante est ~1,2 fois plus
large que son côté, et l'étiquette dépasse encore de 6%. À 320 px cela
faisait déborder la page de 30 px. On rétrécit le côté plutôt que de
rogner, pour ne pas couper l'étiquette. */
@media(max-width:700px){.pile__scene{transform:rotateX(42deg) rotateZ(-24deg);--ecart:38px;width:74%}}
/* ---------- 22. Bande photo pleine largeur ---------- */
.bande-photo{margin:0;position:relative;overflow:hidden;max-height:60vh}
.bande-photo img{width:100%;height:100%;object-fit:cover}
.bande-photo figcaption{position:absolute;left:0;bottom:0;padding:14px 18px;background:rgba(11,10,9,.78);
color:var(--clair);font-size:.75rem;letter-spacing:.06em}
/* ---------- 23. Mouvement réduit ----------
L'éventail n'est pas du mouvement : c'est une mise en page. On le garde, et
l'on supprime tout ce qui bouge — l'ouverture, la dérive des photos, la
respiration de la lueur. Le survol continue d'éclairer le volet visé, sans
déplacement. */
@media(prefers-reduced-motion:reduce){
[data-rvl]{opacity:1!important;transform:none!important;transition:none!important}
.heros h1 .mot{opacity:1;transform:none;animation:none}
.heros__lueur{animation:none}
.volet{animation:none}
.volet__photo img{animation:none;transform:scale(1.08)}
.volet,.volet__voile,.volet__ligne,.volet__suite,.volet__nom::after,
.eventail__scene{transition:none}
.eventail__scene:hover .volet:not(:hover),
.eventail__scene:focus-within .volet:not(:focus-within){transform:none}
.volet:hover,.volet:focus-within{transform:none}
.btn:hover,a.carte:hover{transform:none}
a.carte:hover .carte__image img{transform:none}
.incline{transform:none!important}
}
/* ---------- 24. Repli sans JavaScript ----------
L'éventail est entièrement en CSS : sans JavaScript il s'ouvre, il réagit au
survol et au clavier. Seule l'inclinaison de la scène au pointeur disparaît. */
html:not(.js) [data-rvl]{opacity:1;transform:none}
html:not(.js) .comparateur .apres{clip-path:inset(0 0 0 50%)}
/* ---------- 25. Impression ---------- */
@media print{
.entete,.tiroir,.barre-appel,.langue,.bandeau-cta,.pied{display:none!important}
body{background:#fff;color:#000;font-size:11pt}
.heros,.heros-page,.sec--nuit{background:#fff!important;color:#000!important}
.heros--eventail{min-height:0!important;padding:12pt 0!important}
.eventail{display:none!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
}