/* ══════════════════════════════════════════════════════════════════════════
   GOOD ALLURE BLANK — feuille de style
   Mise en page reprise de cultureblank.com, habillage de la maison
   (good-allure-refonte/PLAN-HARMONISATION-DA.md).

   Les règles qui tiennent tout :
   1. L'interface parle en CAPITALES SERRÉES (Archivo). Les grands énoncés
      parlent en police-logo italique lowercase (GA Display). Jamais l'inverse.
   2. Le filet est un séparateur HORIZONTAL. Jamais un contour, jamais un cadre.
   3. Tout numéro est en GA Mono.
   4. La photo est en noir et blanc.
   Blanc, noir, gris. Aucune couleur.

   Piège vérifié : l'état par défaut est TOUJOURS l'état visible. Tout
   opacity:0 vit dans @supports (animation-timeline) + prefers-reduced-motion,
   sinon Firefox garde la page blanche pour de bon.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/archivo-latin.woff2") format("woff2");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:"Archivo";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"GA Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("fonts/ibm-plex-mono-latin.woff2") format("woff2");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:"GA Display";font-style:italic;font-weight:300 800;font-display:swap;src:url("fonts/open-sans-italic-latin.woff2") format("woff2");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}

:root{
  --bg:#ffffff; --tile:#efefef; --raise:#f6f6f6; --noir:#000000;
  --ink:rgba(0,0,0,.84); --ink-full:#000000;
  --ink-60:rgba(0,0,0,.58); --ink-40:rgba(0,0,0,.56); --ink-35:rgba(0,0,0,.42);
  --line:rgba(0,0,0,.12); --line-2:rgba(0,0,0,.20);
  --mono:"GA Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --disp:"GA Display",Georgia,serif;
  --t-xs:11px; --t-s:12px; --t-m:14px; --t-l:16px; --t-xl:20px;
  --track:.09em; --track-l:.2em;
  --marge:clamp(16px,3.4vw,42px);
  --large:1600px;
  --ease:cubic-bezier(.22,1,.36,1);
  --lent:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans); font-size:var(--t-m); line-height:1.6; font-weight:400;
  color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body[data-fige="oui"]{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink-full);outline-offset:2px}
.nb{filter:grayscale(1)}
.saut{position:absolute;left:-9999px}
.saut:focus{left:12px;top:12px;z-index:200;background:#fff;padding:10px 16px;border:1px solid #000}

/* ── Bandeau défilant ──────────────────────────────────────────────────── */
.ruban{background:var(--noir);color:#fff;overflow:hidden;height:30px;display:flex;align-items:center}
.ruban-piste{display:flex;white-space:nowrap;animation:file 40s linear infinite;will-change:transform}
.ruban span{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;padding:0 26px;opacity:.92}
.ruban span::after{content:"|";padding-left:26px;opacity:.35}
@keyframes file{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── En-tête ───────────────────────────────────────────────────────────── */
.tete{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:transform .5s var(--ease)}
.tete[data-cache="oui"]{transform:translateY(-100%)}
.tete-in{max-width:var(--large);margin:0 auto;padding:18px var(--marge) 14px;position:relative;text-align:center}
.logo{font-family:var(--disp);font-style:italic;font-weight:800;font-size:22px;line-height:1;letter-spacing:-.015em;color:var(--ink-full);display:inline-block}
.logo em{font-weight:400;font-style:italic;font-size:.58em;letter-spacing:.02em;color:var(--ink-40);vertical-align:.12em;margin-left:.12em}
.nav{display:flex;justify-content:center;gap:clamp(14px,2.6vw,36px);margin-top:12px;flex-wrap:wrap}
.nav a{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:var(--track-l);color:var(--ink-40);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink-full);border-bottom-color:var(--ink-full)}
.tete-fin{position:absolute;right:var(--marge);top:22px;display:flex;gap:16px;align-items:center}
.tete-fin button{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.tete-fin button:hover{color:var(--ink-full)}
.tete-fin b{font-weight:400;color:var(--ink-full)}
@media(max-width:760px){.tete-fin{position:static;justify-content:center;margin-top:10px}}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero{position:relative;height:min(86svh,860px);overflow:hidden;background:var(--tile)}
.hero-m{position:absolute;inset:0}
.hero-m img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:respire 22s var(--lent) infinite alternate}
@keyframes respire{from{transform:scale(1.06)}to{transform:scale(1.14)}}
.hero-voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.14) 40%,rgba(0,0,0,.5) 100%)}
.hero-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--marge);gap:16px}
.hero h1{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;font-size:clamp(34px,6.6vw,78px);line-height:.98;letter-spacing:-.024em;color:#fff;max-width:16ch}
.kicker{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.hero-bas{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:16px;padding:16px var(--marge);font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* Mots qui montent, un par un */
.mot{display:inline-block}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .mot{animation:lever .9s var(--lent) both;animation-delay:calc(var(--i) * .07s)}
    @keyframes lever{from{opacity:0;transform:translateY(.5em)}to{opacity:1;transform:none}}
  }
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--ink-full);color:var(--ink-full);
  padding:14px 30px;font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track-l);
  transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:var(--ink-full);color:var(--bg)}
.btn--clair{border-color:rgba(255,255,255,.72);color:#fff}
.btn--clair:hover{background:#fff;color:var(--noir)}
.btn--plein{background:var(--ink-full);color:var(--bg)}
.btn--plein:hover{opacity:.86}
.btn[disabled]{opacity:.3;cursor:not-allowed}
.btn--min{padding:10px 20px}

/* ── Sections ──────────────────────────────────────────────────────────── */
.wrap{max-width:var(--large);margin:0 auto;padding:0 var(--marge)}
.sec{padding-block:clamp(56px,9vw,150px)}
.sec+.sec{padding-top:0}
.head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--ink-full);padding-bottom:10px;margin-bottom:clamp(20px,2.6vw,34px);flex-wrap:wrap}
.head .t{font-family:var(--mono);font-weight:500;font-size:var(--t-s);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-full)}
.head .c{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-40)}

/* ── Filtres ───────────────────────────────────────────────────────────── */
.filtres{display:flex;gap:0 26px;flex-wrap:wrap;margin-bottom:22px}
.filtre{font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink-35);
  padding:8px 0;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.filtre:hover{color:var(--ink-60)}
.filtre[aria-pressed="true"]{color:var(--ink-full);border-bottom-color:var(--ink-full)}

/* ── Grille de pièces ──────────────────────────────────────────────────── */
.grille{display:grid;grid-template-columns:repeat(4,1fr);column-gap:clamp(14px,1.8vw,28px);row-gap:clamp(40px,4.6vw,72px)}
@media(max-width:1080px){.grille{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.grille{grid-template-columns:repeat(2,1fr)}}
.piece{display:block;text-align:left;width:100%}
.piece .m{position:relative;background:var(--tile);aspect-ratio:4/5;overflow:hidden}
.piece .m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--lent),opacity .5s var(--ease)}
.piece .m img.alt{position:absolute;inset:0;opacity:0}
.piece:hover .m img.base{transform:scale(1.04)}
.piece:hover .m img.alt{opacity:1;transform:scale(1.04)}
.badge{position:absolute;top:0;left:0;z-index:2;background:var(--noir);color:#fff;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px}
.piece .l{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.piece .n{font-size:var(--t-m);color:var(--ink-full)}
.piece .p{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-40);white-space:nowrap}
.piece .g{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-35);letter-spacing:.04em;margin-top:3px}
.puces{display:flex;gap:6px;margin-top:9px}
.puces i{width:9px;height:9px;border-radius:50%;border:1px solid var(--line-2);display:block}

/* ── Bloc noir ─────────────────────────────────────────────────────────── */
.noir{background:var(--noir);color:#fff}
.noir-in{max-width:var(--large);margin:0 auto;padding:clamp(44px,6vw,96px) var(--marge);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);gap:clamp(24px,4vw,64px);align-items:end}
@media(max-width:860px){.noir-in{grid-template-columns:1fr}}
.noir .k{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-bottom:18px}
.noir h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;
  font-size:clamp(32px,5.6vw,68px);line-height:.96;letter-spacing:-.024em;color:#fff}
.noir p{margin-top:18px;color:rgba(255,255,255,.72);max-width:48ch;font-weight:300;font-size:var(--t-l)}
.noir ul{list-style:none;margin-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.noir li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:var(--t-m);color:rgba(255,255,255,.8);display:flex;justify-content:space-between;gap:16px}
.noir li b{font-family:var(--mono);font-weight:400;font-size:var(--t-s);color:#fff}

/* ── Duo ───────────────────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3.4vw,60px);align-items:center}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.duo .m{background:var(--tile);aspect-ratio:3/4;overflow:hidden}
.duo .m img{width:100%;height:100%;object-fit:cover}
.duo h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;
  font-size:clamp(26px,3.6vw,48px);line-height:1;letter-spacing:-.02em;color:var(--ink-full);margin-bottom:16px}
.duo p{color:var(--ink-60);max-width:52ch;font-weight:300;font-size:var(--t-l)}
.duo dl{margin-top:26px;border-top:1px solid var(--line)}
.duo .r{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.duo dt{font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink-40)}
.duo dd{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-full)}

/* ── Bande large et mosaïque d'univers ─────────────────────────────────── */
.bande{position:relative;aspect-ratio:16/7;overflow:hidden;background:var(--tile)}
.bande img{width:100%;height:100%;object-fit:cover}
.bande .c{position:absolute;inset:0;display:grid;place-items:center;padding:0 var(--marge)}
.bande h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;text-align:center;
  font-size:clamp(26px,4.8vw,60px);line-height:1;letter-spacing:-.024em;color:#fff;text-shadow:0 2px 46px rgba(0,0,0,.5)}
.mosaique{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(8px,1vw,16px)}
.mos{position:relative;overflow:hidden;background:var(--tile)}
.mos img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--lent)}
.mos:hover img{transform:scale(1.05)}
.mos .lg{position:absolute;left:0;bottom:0;background:var(--noir);color:#fff;font-family:var(--mono);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;padding:6px 12px}
.m-a{grid-column:span 7;aspect-ratio:16/11}
.m-b{grid-column:span 5;aspect-ratio:4/5}
.m-c{grid-column:span 4;aspect-ratio:1/1}
.m-d{grid-column:span 4;aspect-ratio:1/1}
.m-e{grid-column:span 4;aspect-ratio:1/1}
@media(max-width:760px){.m-a,.m-b{grid-column:span 12}.m-c,.m-d,.m-e{grid-column:span 4}}

/* ── Panneau latéral : fiche pièce et panier ───────────────────────────── */
.voile{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.voile[data-on="oui"]{opacity:1;pointer-events:auto}
.tiroir{position:fixed;top:0;right:0;bottom:0;z-index:90;width:min(560px,100vw);background:var(--bg);
  transform:translateX(100%);transition:transform .5s var(--lent);display:flex;flex-direction:column;box-shadow:-1px 0 0 var(--line)}
.tiroir[data-on="oui"]{transform:none}
.tiroir-tete{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:20px var(--marge) 14px;border-bottom:1px solid var(--ink-full)}
.tiroir-tete .t{font-family:var(--mono);font-size:var(--t-s);text-transform:uppercase;letter-spacing:.16em}
.tiroir-tete button{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-40);text-transform:uppercase;letter-spacing:.1em}
.tiroir-tete button:hover{color:var(--ink-full)}
.tiroir-corps{flex:1;overflow-y:auto;padding:0 var(--marge) 20px}
.tiroir-pied{border-top:1px solid var(--ink-full);padding:16px var(--marge);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tiroir-pied .tot{font-family:var(--mono);font-size:var(--t-l);color:var(--ink-full)}
.tiroir-pied .tot small{display:block;font-size:var(--t-xs);color:var(--ink-40);letter-spacing:.1em;text-transform:uppercase}

.fp-m{background:var(--tile);aspect-ratio:4/5;overflow:hidden;margin:18px 0}
.fp-m img{width:100%;height:100%;object-fit:cover}
.fp-vign{display:flex;gap:8px;margin-bottom:20px}
.fp-vign button{width:56px;aspect-ratio:4/5;background:var(--tile);overflow:hidden;border:1px solid transparent}
.fp-vign button[aria-pressed="true"]{border-color:var(--ink-full)}
.fp-vign img{width:100%;height:100%;object-fit:cover}
.fp h2{font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;font-size:clamp(26px,4vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ink-full)}
.fp .res{color:var(--ink-60);margin-top:8px;font-weight:300;font-size:var(--t-l)}
.bl{margin-top:26px}
.bl h3{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-full);padding-bottom:8px;border-bottom:1px solid var(--ink-full);margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:0 22px}
.opt{font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink-35);padding:8px 0;border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.opt:hover{color:var(--ink-60)}
.opt[aria-pressed="true"]{color:var(--ink-full);border-bottom-color:var(--ink-full)}
.opt[disabled]{opacity:.3;cursor:not-allowed}
.cols{display:flex;gap:20px}
.col{display:flex;align-items:center;gap:9px;padding:6px 0}
.col i{width:24px;height:24px;display:block;border:1px solid var(--line-2)}
.col span{font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track);color:var(--ink-35)}
.col[aria-pressed="true"] span{color:var(--ink-full)}
.col[aria-pressed="true"] i{box-shadow:0 0 0 1px var(--bg),0 0 0 2px var(--ink-full)}
.tailles{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));border-top:1px solid var(--line)}
.tailles label{display:flex;flex-direction:column;gap:4px;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.tailles span{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-40)}
.tailles input{width:100%;border:0;border-bottom:1px solid var(--line);background:none;padding:2px 0;font-family:var(--mono);font-size:var(--t-l)}
.tailles input:focus{outline:0;border-bottom-color:var(--ink-full)}
.specs{border-top:1px solid var(--line)}
.specs .r{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-m)}
.specs dt{color:var(--ink-40);font-size:var(--t-s);text-transform:uppercase;letter-spacing:var(--track)}
.specs dd{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-full)}
.specs .avr{color:var(--ink-35);font-style:italic}
.txt p{color:var(--ink-60);font-weight:300;margin-bottom:10px}

/* ── Panier ────────────────────────────────────────────────────────────── */
.pan-l{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.pan-l .m{width:72px;aspect-ratio:4/5;background:var(--tile);overflow:hidden;flex:none}
.pan-l .m img{width:100%;height:100%;object-fit:cover}
.pan-l .d{flex:1;min-width:0}
.pan-l .n{color:var(--ink-full)}
.pan-l .s{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-40);letter-spacing:.04em;margin-top:3px}
.pan-l .x{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-35)}
.pan-l .x:hover{color:var(--ink-full)}
.vide{padding:40px 0;color:var(--ink-40);text-align:center}

/* ── Formulaires ───────────────────────────────────────────────────────── */
.form{display:grid;gap:0}
.champ{display:flex;flex-direction:column;gap:5px;padding:12px 0;border-bottom:1px solid var(--line)}
.champ:first-of-type{border-top:1px solid var(--line)}
.champ label{font-family:var(--mono);font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--ink-40)}
.champ input,.champ textarea,.champ select{border:0;background:none;padding:4px 0;font-size:var(--t-l);color:var(--ink-full);width:100%}
.champ textarea{resize:vertical;min-height:70px;font-size:var(--t-m)}
.champ input:focus,.champ textarea:focus,.champ select:focus{outline:0}
.champ:focus-within{border-bottom-color:var(--ink-full)}
.msg{font-family:var(--mono);font-size:var(--t-s);color:var(--ink-60);margin-top:14px;min-height:1.4em}
.msg[data-ok="oui"]{color:var(--ink-full)}

/* ── Recherche ─────────────────────────────────────────────────────────── */
.rech{position:fixed;inset:0;z-index:95;background:var(--bg);display:none;flex-direction:column}
.rech[data-on="oui"]{display:flex}
.rech-in{max-width:var(--large);margin:0 auto;width:100%;padding:clamp(30px,6vh,80px) var(--marge)}
.rech input{width:100%;border:0;border-bottom:1px solid var(--ink-full);background:none;
  font-family:var(--disp);font-style:italic;font-weight:800;text-transform:lowercase;
  font-size:clamp(28px,5vw,54px);letter-spacing:-.02em;padding:10px 0;color:var(--ink-full)}
.rech input:focus{outline:0}
.rech-res{margin-top:30px}

/* ── Pied ──────────────────────────────────────────────────────────────── */
.pied{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,80px)}
.pied-in{max-width:var(--large);margin:0 auto;padding:clamp(30px,3.4vw,54px) var(--marge);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px}
.pied h3{font-family:var(--mono);font-weight:500;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-full);margin-bottom:12px}
.pied p,.pied a{font-size:var(--t-s);color:var(--ink-40);line-height:1.9;display:block}
.pied a:hover{color:var(--ink-full)}
.pied-bas{border-top:1px solid var(--line);padding:14px var(--marge);max-width:var(--large);margin:0 auto;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-35);letter-spacing:.08em;text-transform:uppercase}

/* ── Bandeau de travail ────────────────────────────────────────────────── */
.chantier{background:var(--raise);border-bottom:1px solid var(--line)}
.chantier-in{max-width:var(--large);margin:0 auto;padding:10px var(--marge);
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ink-40);letter-spacing:.04em}
.chantier b{color:var(--ink-full);font-weight:500}

/* ── Apparition au défilement ──────────────────────────────────────────── */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .fade{animation:monte linear both;animation-timeline:view();animation-range:entry 0% entry 44%}
    @keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
    .revele{animation:decouvre linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes decouvre{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOTION — l'habillage du mouvement
   Rien n'est masqué ici : le JS masque, et seulement s'il tourne. Une page
   sans JS reste entièrement lisible.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le voile d'ouverture */
.voile-ouv{position:fixed;inset:0;z-index:300;background:var(--noir,#000);display:grid;place-items:center;
  transition:transform 1.1s cubic-bezier(.76,0,.24,1),opacity .5s .5s}
.voile-ouv[data-parti="oui"]{transform:translateY(-101%)}
.voile-ouv .sig{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(22px,4vw,40px);
  letter-spacing:-.02em;color:#fff;opacity:.94}
.voile-ouv .sig em{font-weight:400;font-size:.58em;letter-spacing:.02em;color:rgba(255,255,255,.5);vertical-align:.12em;margin-left:.12em}
.voile-ouv .fil{position:absolute;left:0;bottom:0;height:1px;background:rgba(255,255,255,.5);width:0;animation:charge 1.4s cubic-bezier(.76,0,.24,1) forwards}
@keyframes charge{to{width:100%}}

/* Reveal par masque */
.mq{display:inline-block;overflow:hidden;vertical-align:top}
.mq-i{display:inline-block;will-change:transform}

/* Parallaxe : l'image déborde pour ne jamais laisser de vide */
[data-para]{will-change:transform;height:126% !important;top:-13%;position:relative}

/* Curseur */
.curseur{position:fixed;top:0;left:0;width:9px;height:9px;border-radius:50%;background:var(--ink-full,#000);
  pointer-events:none;z-index:250;margin:-4.5px 0 0 -4.5px;mix-blend-mode:difference;
  transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1),margin .35s cubic-bezier(.22,1,.36,1),opacity .3s}
.curseur{background:#fff}
.curseur[data-sur="oui"]{width:46px;height:46px;margin:-23px 0 0 -23px;opacity:.9}
.curseur[data-clic]{width:26px;height:26px;margin:-13px 0 0 -13px}
@media(hover:none){.curseur{display:none}}

/* Le grain, très léger, sur les photos */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* La bande qui défile en travers */
.travers{overflow:hidden;padding-block:clamp(56px,9vw,150px)}
.travers-piste{display:flex;gap:clamp(14px,1.6vw,26px);will-change:transform;padding-right:80px}
.travers-piste > *{flex:0 0 clamp(240px,26vw,380px)}
@media(max-width:860px){
  .travers{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .travers::-webkit-scrollbar{display:none}
  .travers-piste{padding-right:var(--marge)}
}

/* Lenis */
html[data-lenis="oui"]{scroll-behavior:auto}
html[data-lenis="oui"] body{overscroll-behavior:none}

/* ══════════════════════════════════════════════════════════════════════════
   AMBIANCE SOMBRE — décision d'Enzo du 2026-08-23
   « pas trop de trait, pas trop de fond blanc, anime énormément »
   Le fond par défaut passe au #0a0a0c du standard maison. Les filets
   disparaissent presque tous : ce qui sépare, c'est le vide et la photo.
   Le sélecteur de peau garde le clair pour ceux qui le préfèrent.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le fond est BLANC, et il le reste : décision d'Enzo du 2026-08-23.
   Ce qui empêche la page de virer au blanc uniforme, ce sont les grandes
   photos et les blocs d'encre pleine largeur, pas un fond gris. */
:root{
  --bg:#ffffff; --paper:#ffffff; --noir:#0a0a0c;
  --tile:#efefef; --raise:#f7f7f8;
  --ink:rgba(0,0,0,.84); --ink-full:#000000;
  --ink-60:rgba(0,0,0,.58); --ink-40:rgba(0,0,0,.52); --ink-35:rgba(0,0,0,.38);
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.18);
  color-scheme:light;
}
[data-peau="noir"]{
  --bg:#0a0a0c; --paper:#0a0a0c; --noir:#0a0a0c;
  --tile:#141417; --raise:#101013;
  --ink:rgba(255,255,255,.88); --ink-full:#ffffff;
  --ink-60:rgba(255,255,255,.60); --ink-40:rgba(255,255,255,.48); --ink-35:rgba(255,255,255,.34);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  color-scheme:dark;
}

/* ── Moins de traits ─────────────────────────────────────────────────────
   La tête de section perdait sa règle pleine largeur : le label suffit,
   posé sur du vide. */
.head{border-bottom:0;padding-bottom:0;margin-bottom:clamp(22px,3vw,44px);
  display:flex;align-items:baseline;justify-content:space-between;gap:20px}
.head .t{color:var(--ink-40);letter-spacing:.2em}
.head .c,.head .aide{color:var(--ink-35)}

/* Les rangées se séparent par le vide et le survol, plus par un filet */
.rangs,.modes,.etapes{border-top:0}
.rang,.mode,.etape-l{border-bottom:0;position:relative;padding-block:clamp(16px,2vw,26px)}
.rang::after,.mode::after,.etape-l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--line);transform:scaleX(1);transform-origin:left;transition:background .35s var(--ease)}
.rang:last-child::after,.mode:last-child::after,.etape-l:last-child::after{background:transparent}
.rang:hover::after,.mode:hover::after{background:var(--line-2)}
.rang[aria-pressed="true"]::after,.mode[aria-pressed="true"]::after{background:var(--ink-full)}

/* Les listes de réglages : un filet sur deux disparaît */
.l:first-of-type,.opt:first-of-type,.rec-l:first-of-type,.specs .r:first-of-type{border-top:0}
.champ:first-of-type{border-top:0}
.duo dl,.tailles,.specs{border-top:0}

/* Le pied s'allège */
.pied{border-top:0}
.pied-bas{border-top:1px solid var(--line)}

/* ── La photo porte la page ──────────────────────────────────────────── */
.piece .m,.duo .m,.mos,.tuile,.bande,.hero,.ah{background:var(--tile)}
.piece .m img,.duo .m img,.mos img{filter:grayscale(1) contrast(1.06)}
.bande img,.hero img,.ah-m img{filter:grayscale(1) contrast(1.04) brightness(.92)}

/* Le bloc noir devient un bloc de lumière sur fond sombre */
.noir{background:#0a0a0c}
[data-peau="noir"] .noir{background:var(--tile)}
.noir h2,.noir li b{color:#fff}
.noir p,.noir li{color:rgba(255,255,255,.7)}
.noir .k{color:rgba(255,255,255,.45)}
.noir ul{border-top-color:rgba(255,255,255,.14)}
.noir li{border-bottom-color:rgba(255,255,255,.14)}

/* ── Boutons : plus de présence ─────────────────────────────────────── */
.btn{border-color:var(--line-2);position:relative;overflow:hidden;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink-full);
  transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.24,1)}
.btn:hover{color:var(--bg);border-color:var(--ink-full);background:none}
.btn:hover::before{transform:translateY(0)}
.btn--plein,.btn--p{background:var(--ink-full);color:var(--bg);border-color:var(--ink-full)}
.btn--plein::before,.btn--p::before{background:var(--bg)}
.btn--plein:hover,.btn--p:hover{color:var(--ink-full)}
.btn--clair{border-color:rgba(255,255,255,.4);color:#fff}
.btn--clair::before{background:#fff}
.btn--clair:hover{color:#0a0a0c;border-color:#fff}

/* ── Cartes : le nom monte au survol ────────────────────────────────── */
.piece{position:relative}
.piece .l,.piece .g,.piece .puces{transition:transform .5s var(--ease)}
.piece:hover .l,.piece:hover .g,.piece:hover .puces{transform:translateY(-4px)}
.piece .m::after{content:"";position:absolute;inset:0;background:var(--ink-full);opacity:0;
  transition:opacity .5s var(--ease);mix-blend-mode:overlay;pointer-events:none}
.piece:hover .m::after{opacity:.06}

/* ── Le bandeau défilant respire ────────────────────────────────────── */
.ruban{background:#0a0a0c;border-bottom:0}
[data-peau="noir"] .ruban{background:var(--tile);border-bottom:1px solid var(--line)}
.ruban span{color:rgba(255,255,255,.82)}

/* ── En-tête et voile ───────────────────────────────────────────────── */
.tete,.bar{background:color-mix(in srgb, var(--bg) 84%, transparent);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);border-bottom:1px solid var(--line)}
.chantier{background:var(--tile);border-bottom:1px solid var(--line)}
.hero-voile,.ah-voile{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 42%,rgba(10,10,12,.94) 100%)}

/* ── Le tiroir ──────────────────────────────────────────────────────── */
.tiroir{background:var(--bg);box-shadow:-1px 0 0 var(--line),-40px 0 90px -20px rgba(0,0,0,.6)}
.tiroir-tete{border-bottom:1px solid var(--line)}
.tiroir-pied{border-top:1px solid var(--line)}
.bl h3{border-bottom:0;color:var(--ink-40);letter-spacing:.2em}

/* ── Filets restants, très discrets ─────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line)}
.travers .head{margin-bottom:clamp(18px,2.4vw,34px)}

/* Le badge reste dans sa tuile, jamais sur la carte voisine */
.piece .m{isolation:isolate}
.badge{z-index:3}
.piece .puces{margin-bottom:2px}