/* VORTEX 23™ — boutique. Tokens et règles : DESIGN.md (racine du repo).
   Deux tons encre / os. UN signal jaune par écran. Orange-rouge = « Rupture » seulement. Jamais de vert.
   Base 18 px, tout en rem, pleine largeur. */
:root{
  --ink:#0B0B0B;--bone:#EDE8DD;--sand:#E2DDD3;--signal:#FFE100;--safety:#F2361B;--muted:#5D5A54;--line:#0B0B0B26;
  --gut:clamp(1rem,3vw,3rem);--hh:3.6rem;
  --f-disp:Archivo,"Arial Narrow",sans-serif;--f-mono:"JetBrains Mono",ui-monospace,monospace;
  --f-serif:"Instrument Serif",Georgia,serif;--f-text:"IBM Plex Sans",system-ui,sans-serif;--f-jp:"Zen Kaku Gothic New",sans-serif;
  --e-out:cubic-bezier(.16,1,.3,1);--e-volet:cubic-bezier(.77,0,.18,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:18px;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--ink);font-family:var(--f-text);line-height:1.55;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.mono{font-family:var(--f-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gut);top:-3rem;z-index:100;background:var(--ink);color:var(--bone);padding:.4rem .8rem;font-family:var(--f-mono);font-size:.75rem}
.skip:focus{top:.5rem}
[hidden]{display:none!important}

/* grain : le « street » vient de la matière, pas de la couleur */
.grain{position:relative;isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.inkbg.grain::after{mix-blend-mode:screen;opacity:.09}
.grain>*{position:relative;z-index:2}

/* ---------------------------------------------------------------- en-tête */
.hd{position:sticky;top:0;z-index:40;height:var(--hh);display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:0 var(--gut);background:var(--bone);color:var(--ink);border-bottom:2px solid var(--ink);
  font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase}
.hd .logo{display:flex;align-items:center;text-decoration:none;flex:none}
.hd .logo img{height:2.15rem;width:auto}
.hd .logo .sq{display:none}
.hd nav{display:flex;gap:1.4rem}
.hd nav a{text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.hd nav a:hover,.hd nav a[aria-current="page"]{border-bottom-color:currentColor}
.hd .tools{display:flex;align-items:center;gap:.9rem}
.lang{display:inline-flex;border:2px solid currentColor}
.lang a{padding:.12rem .45rem;text-decoration:none;font-weight:700}
.lang a[aria-current="true"]{background:var(--ink);color:var(--bone)}
.cartbtn{border:2px solid var(--ink);background:var(--ink);color:var(--bone);padding:.35rem .7rem;font-weight:700;text-transform:uppercase;font-family:var(--f-mono);font-size:.72rem;white-space:nowrap}
@media (max-width:760px){
  :root{--hh:3.2rem}
  .hd .logo .full{display:none}.hd .logo .sq{display:block;height:2.1rem}
  .hd{gap:.5rem}
  .hd nav{gap:.7rem;font-size:.62rem}
  .hd nav .opt,.hd nav .lg,.cartbtn .lbl{display:none}
  .hd .tools{gap:.4rem}
  .lang a{padding:.12rem .32rem}
  .cartbtn{padding:.3rem .5rem}
}

/* ---------------------------------------------------------------- pied de page */
.ft{background:var(--ink);color:var(--bone);padding:2.4rem var(--gut) 1.4rem;margin-top:auto}
.ft .big{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.82;font-size:clamp(3rem,12vw,11rem);white-space:nowrap;overflow:hidden}
.ft .big sup{font-size:.14em;vertical-align:top;position:relative;top:.55em;font-variation-settings:"wdth" 100}
.ft .lockl{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font-family:var(--f-mono);font-weight:700;font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;margin:.6rem 0 1.8rem}
.ft .lockl .jp{font-family:var(--f-jp);letter-spacing:.4em}
.ft .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.6rem;border-top:1px solid #ede8dd33;padding-top:1.4rem}
.ft h3{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7;margin-bottom:.6rem;font-weight:700}
.ft ul{list-style:none}
.ft li{margin:.25rem 0}
.ft a{text-decoration:none}.ft a:hover{text-decoration:underline}
.ft .legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2rem;font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;opacity:.7}
.news{display:flex;gap:.5rem;flex-wrap:wrap}
.news input{flex:1 1 14rem;border:2px solid currentColor;background:transparent;padding:.65rem .8rem;min-width:0}
.news input::placeholder{color:currentColor;opacity:.55}
.news button{border:2px solid var(--ink);background:var(--ink);color:var(--bone);padding:.65rem 1rem;font-family:var(--f-mono);font-weight:700;font-size:.75rem;text-transform:uppercase}
.ft .news button{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.news-msg{font-family:var(--f-mono);font-size:.72rem;min-height:1.2rem;margin-top:.4rem}
@media (max-width:860px){.ft .cols{grid-template-columns:1fr 1fr}.ft .cols>div:first-child{grid-column:1/-1}}

/* ---------------------------------------------------------------- éléments communs */
.badge{display:inline-block;font-family:var(--f-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;padding:.2rem .4rem;line-height:1.2;white-space:nowrap}
.badge.abs{position:absolute;left:.5rem;top:.5rem;z-index:3}
.b-IN_STOCK{background:var(--ink);color:var(--bone)}
.b-SOON{background:var(--bone);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.b-SOLD_OUT{background:var(--safety);color:var(--ink)}
.btn{display:inline-block;font-family:var(--f-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;border:2px solid var(--ink);background:var(--bone);color:var(--ink);padding:.55rem .9rem;text-decoration:none;text-align:center}
.btn.solid{background:var(--ink);color:var(--bone)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.bigbtn{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 85;text-transform:uppercase;font-size:clamp(1.1rem,1.8vw,1.5rem);border:3px solid var(--ink);padding:.8rem 1.1rem;background:var(--ink);color:var(--bone);text-decoration:none;display:inline-block;text-align:center}
.bigbtn.ghost{background:transparent;color:inherit;border-color:currentColor}
.bigbtn.out{background:var(--safety);color:var(--ink);border-color:var(--ink)}
.bigbtn:disabled{opacity:.5;cursor:not-allowed}
.kick{font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.bc{background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 5px,currentColor 5px 6px,transparent 6px 9px,currentColor 9px 13px,transparent 13px 14px,currentColor 14px 15px,transparent 15px 19px)}
.skel{background:var(--sand)}
.note{font-family:var(--f-mono);font-size:.72rem;min-height:1.1rem}
.err{color:var(--ink);background:#f2361b22;border-left:4px solid var(--safety);padding:.5rem .7rem;font-size:.9rem}

/* carte pièce (collection, « tu aimeras aussi ») */
.pc{display:block;position:relative;text-decoration:none}
.pc .im{position:relative;aspect-ratio:338/420;background:var(--sand);overflow:hidden}
.pc .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease,transform .5s var(--e-out)}
.pc .im img.alt{opacity:0}
.pc:hover .im img.alt,.pc:focus-visible .im img.alt{opacity:1}
.pc:hover .im img:not(.alt){transform:scale(1.03)}
.pc.SOLD_OUT .im img:not(.alt){filter:grayscale(.8);opacity:.75}
.pc .t{display:flex;justify-content:space-between;gap:.5rem;margin-top:.45rem;align-items:baseline}
.pc .t b{font-family:var(--f-disp);font-variation-settings:"wdth" 80;font-weight:800;font-size:.88rem;text-transform:uppercase;line-height:1.1}
.pc .t span{font-family:var(--f-mono);font-size:.7rem;white-space:nowrap}
.pc .s{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;opacity:.7;margin-top:.15rem}

/* ---------------------------------------------------------------- HERO C « Décodage »
   Base = état FINAL ; l'animation joue une seule fois sous .play. Rien n'est lié au scroll :
   une fois posé, le titre est immobile. Le titre est calé à la largeur par JS (fit). */
.hero{display:flex;flex-direction:column;background:var(--bone);color:var(--ink);overflow:hidden;padding-bottom:1.6rem}
.h-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.75rem var(--gut);font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;font-weight:700;letter-spacing:.04em}
.h-tech{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem var(--gut) 0;font-family:var(--f-mono);font-size:.72rem;font-weight:700;text-transform:uppercase}
.h-tech .bar{height:2.2rem;width:min(22rem,60%);color:var(--ink)}
.h-tech .idt{display:inline-block}
.h-title{padding:0 var(--gut);overflow:hidden}
.word{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;line-height:.8;white-space:nowrap;display:block;font-size:10rem;letter-spacing:-.02em;font-variation-settings:"wdth" 110}
.word .ln{display:inline-block;white-space:nowrap}
.word .ln+.ln{margin-left:.18em}
.word sup{font-size:.14em;vertical-align:top;margin-left:.05em;letter-spacing:0;position:relative;top:.55em;font-variation-settings:"wdth" 100}
.stack .word .ln{display:block;width:max-content}
.stack .word .ln+.ln{margin-left:0;margin-top:.04em}
.word .ch{display:inline-block;text-align:center}
.word .ch.scr{font-family:var(--f-mono);font-weight:700;font-size:.62em;vertical-align:.32em;opacity:.55}
.h-lock{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;padding:.8rem var(--gut) 0;font-family:var(--f-mono);font-weight:700;font-size:clamp(.72rem,1.1vw,.95rem);letter-spacing:.32em;text-transform:uppercase}
.h-lock .jp{font-family:var(--f-jp);font-weight:700;letter-spacing:.42em}
.h-lock .rule{flex:1 1 4rem;height:3px;background:var(--signal);transform-origin:0 50%}   /* le seul signal jaune de l'écran */
.h-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2rem;padding:2.4rem var(--gut) .6rem;align-items:end}
.h-manif{font-family:var(--f-serif);font-size:clamp(1.35rem,2.3vw,2.1rem);line-height:1.15;max-width:38rem}
.h-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.h-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.h-photos a{display:block;text-decoration:none}
.h-photos .fr{aspect-ratio:338/420;background:var(--sand);outline:2px solid var(--ink);outline-offset:-2px;overflow:hidden}
.h-photos img{width:100%;height:100%;object-fit:cover}
.h-photos figcaption{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;padding-top:.35rem}
.fade{opacity:1}
.play .fade{animation:fadeUp .6s var(--e-out) both;animation-delay:var(--d,1.4s)}
@keyframes fadeUp{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
.play .ch{animation:lockIn .35s var(--e-out) both;animation-delay:var(--ld,0ms)}
@keyframes lockIn{from{transform:scale(1.12);opacity:.4}to{transform:none;opacity:1}}
.play .h-tech .bar,.play .h-tech .idt{animation:typeOn .9s steps(24,end) both;animation-delay:.25s}
.play .h-tech .idt{animation-delay:.5s}
@keyframes typeOn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.play .h-lock .rule{animation:draw .6s cubic-bezier(.65,0,.35,1) both;animation-delay:1.55s}
@keyframes draw{from{transform:scaleX(0)}to{transform:none}}
.play .h-photos figure{animation:volet .9s var(--e-volet) both;animation-delay:calc(1.4s + var(--k) * 110ms)}
@keyframes volet{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:760px){.h-body{grid-template-columns:1fr}.hero{min-height:0}}

/* ---------------------------------------------------------------- ACCUEIL « Rails » : sections collées */
.rs{position:sticky;top:var(--hh);min-height:calc(100svh - var(--hh));display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;border-top:3px solid var(--ink)}
.rs.bone{background:var(--bone);color:var(--ink)}
.rs.ink{background:var(--ink);color:var(--bone);border-top-color:#ede8dd33}
.rs-title{padding:1.4rem var(--gut) 0;font-family:var(--f-disp);font-weight:900;text-transform:uppercase;line-height:.8;font-size:clamp(3.2rem,11vw,11rem);font-variation-settings:"wdth" 100;white-space:nowrap}
.rs-title .jp{font-family:var(--f-jp)}
@media (max-width:700px){.rs-title{white-space:normal;font-size:min(4rem,11.5vw)}.rs{min-height:0;gap:1.2rem;padding-bottom:.4rem}}
.rs-sub{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.7rem var(--gut);font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;font-weight:700}
.rail{overflow:hidden;padding:.7rem 0;border-block:2px solid currentColor;touch-action:pan-y;cursor:grab;user-select:none}
.rail:active{cursor:grabbing}
.row{display:flex;gap:.9rem;width:max-content;will-change:transform}
.rc{width:clamp(10rem,16vw,15.5rem);flex:none;position:relative;display:block;text-decoration:none}
.rc .im{aspect-ratio:338/420;background:var(--sand);overflow:hidden;position:relative}
.rc .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--e-out);pointer-events:none}
.rc:hover .im img,.rc:focus-visible .im img{transform:scale(1.04)}
.rc .cap{font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;padding-top:.4rem;display:flex;justify-content:space-between;gap:.4rem}
.rc .cap b{font-family:var(--f-disp);font-variation-settings:"wdth" 80;font-weight:800;font-size:.8rem}
.rs-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.1rem var(--gut)}
.rs-hint{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase}
.rs.ink .news button{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.rs.ink .bigbtn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.brand{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;padding:1.4rem var(--gut)}
.brand p.m{font-family:var(--f-serif);font-size:clamp(1.4rem,2.6vw,2.4rem);line-height:1.12}
.brand ul{list-style:none;font-family:var(--f-mono);font-size:.78rem;text-transform:uppercase;font-weight:700;border-top:2px solid currentColor}
.brand li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.brand li span:last-child{font-weight:400;text-transform:none;font-family:var(--f-text);font-size:.92rem;text-align:right}
@media (max-width:800px){.brand{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- PAGE COLLECTION */
.col-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;padding:1.6rem var(--gut) 1.2rem;border-bottom:2px solid var(--ink)}
.col-head h1{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(3rem,8vw,7rem);line-height:.82;text-transform:uppercase}
.col-head h1 .jp{font-family:var(--f-jp);font-weight:700}
.col-head p{font-family:var(--f-serif);font-size:1.4rem;line-height:1.2;margin-top:.5rem;max-width:40rem}
.col-tabs{display:flex;gap:.3rem;flex-wrap:wrap}
.col-tabs a{border:2px solid var(--ink);padding:.35rem .7rem;font-family:var(--f-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;text-decoration:none}
.col-tabs a[aria-current="page"]{background:var(--ink);color:var(--bone)}
.col-body{display:grid;grid-template-columns:15rem minmax(0,1fr)}
.col-filters{border-right:2px solid var(--ink);padding:1.1rem var(--gut) 1.1rem;font-size:.92rem;align-self:start;position:sticky;top:var(--hh)}
.col-filters fieldset{border:0;margin-bottom:1.2rem}
.col-filters legend{font-family:var(--f-mono);font-size:.68rem;font-weight:700;text-transform:uppercase;margin-bottom:.4rem}
.col-filters label{display:flex;justify-content:space-between;gap:.5rem;padding:.15rem 0;cursor:pointer}
.col-filters .c{font-family:var(--f-mono);font-size:.7rem;opacity:.6}
.col-filters input{accent-color:var(--ink);margin-right:.45rem}
.col-main{padding:1.1rem var(--gut) 2rem}
.col-bar{display:flex;justify-content:space-between;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;margin-bottom:1rem}
.chips{display:flex;gap:.3rem;flex-wrap:wrap}
.chips button{border:1.5px solid var(--ink);background:var(--bone);font-size:.65rem;padding:.12rem .45rem;font-family:var(--f-mono);text-transform:uppercase}
.col-bar select{border:2px solid var(--ink);background:var(--bone);padding:.25rem .35rem;font-family:var(--f-mono);font-size:.72rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1.4rem 1rem}
.col-more{text-align:center;margin:1.6rem 0 .4rem}
.empty{padding:3rem 0;font-family:var(--f-serif);font-size:1.6rem}
.fbtn{display:none}
@media (max-width:800px){
  .col-body{grid-template-columns:1fr}
  .col-filters{display:none;position:static;border-right:0;border-bottom:2px solid var(--ink)}
  .col-filters.open{display:block}
  .fbtn{display:inline-block}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem .7rem}
}

/* ---------------------------------------------------------------- FICHE PIÈCE */
.fi-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem var(--gut);background:var(--ink);color:var(--bone);font-family:var(--f-mono);font-size:.7rem;font-weight:700;text-transform:uppercase}
.fi-top a{text-decoration:none;white-space:nowrap}
.fi-top .crumb{opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.fi-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border-bottom:3px solid var(--ink)}
.fi-gal{border-right:3px solid var(--ink);display:grid;grid-template-columns:5.5rem minmax(0,1fr)}
.fi-thumbs{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border-right:2px solid var(--ink)}
.fi-thumbs button{border:2px solid transparent;background:var(--sand);padding:0;aspect-ratio:338/420;overflow:hidden;position:relative}
.fi-thumbs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--bone)}
.fi-thumbs img{width:100%;height:100%;object-fit:cover}
.fi-thumbs span{position:absolute;left:0;right:0;bottom:0;background:var(--ink);color:var(--bone);font-family:var(--f-mono);font-size:.5rem;text-transform:uppercase;padding:.05rem .2rem}
.fi-big{position:relative;background:var(--sand);min-height:min(82vh,54rem);overflow:hidden}
.fi-big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.fi-big img.flat{object-fit:contain;padding:4%}
.fi-big .badge{font-size:.75rem;left:1rem;top:1rem}
.fi-info{padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:1.15rem}
.fi-kick{display:flex;gap:.8rem;flex-wrap:wrap}
.fi-name{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 72;font-size:clamp(2.6rem,5.2vw,5.4rem);line-height:.84;text-transform:uppercase;overflow-wrap:anywhere}
.fi-price{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-family:var(--f-disp);font-weight:800;font-size:1.7rem;font-variation-settings:"wdth" 90}
.fi-desc{font-size:1.02rem;max-width:34rem}
.fi-sizes{border:0}
.fi-sizes legend{font-family:var(--f-mono);font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:.45rem;display:flex;gap:1rem;width:100%;justify-content:space-between}
.fi-sizes legend button{background:none;border:0;text-decoration:underline;font-family:inherit;font-size:inherit;text-transform:uppercase;font-weight:700}
.sz{display:flex;gap:.35rem;flex-wrap:wrap}
.sz label{position:relative}
.sz input{position:absolute;opacity:0;inset:0;cursor:pointer}
.sz span{display:block;min-width:3.1rem;text-align:center;border:2px solid var(--ink);padding:.45rem .5rem;font-family:var(--f-mono);font-weight:700;font-size:.8rem;cursor:pointer;position:relative}
.sz .SOLD_OUT span{text-decoration:line-through;opacity:.5}
.sz .SOON span::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border:1.5px solid currentColor;border-radius:50%}
.sz input:checked+span{background:var(--ink);color:var(--bone);opacity:1}
.sz input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.sz-legend{font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;opacity:.7;margin-top:.45rem}
.fi-cta{display:flex;flex-direction:column;gap:.55rem}
.fi-cta form{display:flex;gap:.4rem;flex-wrap:wrap}
.fi-cta input[type=email]{flex:1 1 14rem;border:3px solid var(--ink);padding:.6rem .7rem;background:#fff;min-width:0}
.fi-label{border:3px solid var(--ink);border-left:.9rem solid var(--signal);background:#ffffff70;padding:.75rem .95rem;font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase}
.fi-label .lh{display:flex;justify-content:space-between;gap:.6rem;font-weight:700;border-bottom:2px solid var(--ink);padding-bottom:.35rem;margin-bottom:.5rem}
.fi-label dl{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.28rem .8rem}
.fi-label dt{opacity:.6}
.fi-label dd{font-weight:700}
.fi-label .bc{height:1.4rem;margin-top:.65rem}
.fi-worn{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase}
.fi-worn b{font-family:var(--f-disp);font-size:1rem;font-variation-settings:"wdth" 80}
.fi-more{padding:1.6rem var(--gut) 2.4rem}
.fi-more h2{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 70;font-size:clamp(1.8rem,3.5vw,3rem);text-transform:uppercase;line-height:.9;margin-bottom:1rem}
.fi-more .rowg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.9rem}
@media (max-width:900px){
  .fi-main{grid-template-columns:1fr}
  .fi-gal{border-right:0;border-bottom:3px solid var(--ink);grid-template-columns:1fr}
  .fi-thumbs{flex-direction:row;order:2;border-right:0;border-top:2px solid var(--ink);overflow-x:auto}
  .fi-thumbs button{width:4.5rem;flex:none}
  .fi-big{min-height:64vh}
  .fi-more .rowg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
dialog.sg{border:3px solid var(--ink);padding:0;max-width:min(40rem,94vw);margin:auto;background:var(--bone);color:var(--ink)}
dialog.sg::backdrop{background:#0b0b0b99}
.sg .in{padding:1.3rem}
.sg h2{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 75;font-size:1.8rem;text-transform:uppercase;margin-bottom:.6rem}
.sg table{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.75rem}
.sg th,.sg td{border-bottom:1px solid var(--line);padding:.35rem .4rem;text-align:left}
.sg th{background:var(--ink);color:var(--bone)}
.sg td.na{opacity:.55}

/* ---------------------------------------------------------------- PANIER (tiroir) */
dialog.cart{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(30rem,100vw);max-width:none;border:0;border-left:3px solid var(--ink);padding:0;background:var(--bone);color:var(--ink)}
dialog.cart[open]{display:flex;flex-direction:column;animation:drawer .32s var(--e-out)}
@keyframes drawer{from{transform:translateX(100%)}to{transform:none}}
dialog.cart::backdrop{background:#0b0b0b80}
.cart-h{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.1rem;background:var(--ink);color:var(--bone);font-family:var(--f-mono);font-size:.75rem;font-weight:700;text-transform:uppercase}
.cart-h button{background:none;border:2px solid var(--bone);padding:.25rem .55rem;font-weight:700;font-size:.7rem;text-transform:uppercase}
.cart-b{flex:1;overflow-y:auto;padding:1rem 1.1rem}
.cl{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:.8rem;padding:.8rem 0;border-bottom:1px solid var(--line);align-items:start}
.cl img{width:4.5rem;aspect-ratio:338/420;object-fit:cover;background:var(--sand)}
.cl b{font-family:var(--f-disp);font-variation-settings:"wdth" 80;font-weight:800;text-transform:uppercase;font-size:.9rem;line-height:1.1;display:block}
.cl .m{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;opacity:.75}
.qty{display:inline-flex;border:2px solid var(--ink);margin-top:.4rem}
.qty button{background:none;border:0;width:1.8rem;font-weight:700}
.qty span{min-width:1.8rem;text-align:center;font-family:var(--f-mono);font-size:.8rem;line-height:1.8rem}
.cl .rm{background:none;border:0;text-decoration:underline;font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;margin-left:.6rem}
.cl .p{font-family:var(--f-mono);font-size:.8rem;font-weight:700;white-space:nowrap}
.cart-f{border-top:3px solid var(--ink);padding:1rem 1.1rem}
.tot{display:grid;grid-template-columns:1fr auto;gap:.25rem .8rem;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;margin-bottom:.9rem}
.tot .g{font-family:var(--f-disp);font-weight:900;font-size:1.4rem;font-variation-settings:"wdth" 80;margin-top:.3rem}
.cart-empty{font-family:var(--f-serif);font-size:1.5rem;line-height:1.2;padding:2rem 0}

/* ---------------------------------------------------------------- CHECKOUT */
.co{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:0;border-bottom:3px solid var(--ink)}
.co>section{padding:1.6rem var(--gut)}
.co>section+section{border-left:3px solid var(--ink);background:#ffffff40}
.co h1{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(2.6rem,6vw,5rem);line-height:.84;text-transform:uppercase;margin-bottom:1.2rem}
.co h2{font-family:var(--f-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:1.4rem 0 .6rem;border-bottom:2px solid var(--ink);padding-bottom:.3rem}
.fld{display:grid;gap:.25rem;margin-bottom:.7rem}
.fld label{font-family:var(--f-mono);font-size:.66rem;font-weight:700;text-transform:uppercase}
.fld input,.fld select{border:2px solid var(--ink);background:#fff;padding:.55rem .65rem;min-width:0;width:100%}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.promo{display:flex;gap:.4rem}
.promo input{flex:1;border:2px solid var(--ink);background:#fff;padding:.5rem .6rem;text-transform:uppercase;font-family:var(--f-mono);min-width:0}
.pay-off{border:3px solid var(--ink);padding:1rem;background:var(--bone)}
.pay-off b{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 80;font-size:1.3rem;text-transform:uppercase;display:block;margin-bottom:.3rem}
#payEl{margin:.8rem 0}
@media (max-width:860px){.co{grid-template-columns:minmax(0,1fr)}.co>section+section{border-left:0;border-top:3px solid var(--ink)}.two{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- PAGES INFO */
.pg{padding:2rem var(--gut) 3rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem}
.pg h1{font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(2.8rem,7vw,6rem);line-height:.84;text-transform:uppercase}
.pg .lead{font-family:var(--f-serif);font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.15;margin-bottom:1.4rem}
.pg h2{font-family:var(--f-mono);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin:1.6rem 0 .5rem;border-bottom:2px solid var(--ink);padding-bottom:.3rem}
.pg p,.pg li{max-width:46rem;margin-bottom:.6rem}
.pg ul{padding-left:1.2rem}
.tbd{font-family:var(--f-mono);font-size:.8em;background:var(--sand);padding:.05rem .35rem;text-transform:uppercase}
.spec{border:3px solid var(--ink);border-left:.9rem solid var(--signal);padding:.8rem 1rem;font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;max-width:34rem}
.spec dl{display:grid;grid-template-columns:9rem 1fr;gap:.3rem .8rem}
.spec dt{opacity:.6}
@media (max-width:800px){.pg{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------------------------------------------------------------- SECTIONS DE COLLECTION (accueil)
   Grandes, en flux normal (plus collées) : en-tête géant · texte + lookbook · frise des drops · ruban.
   Un seul signal jaune : le point « drop en cours ». */
.cs{position:relative;border-top:3px solid var(--ink);padding-bottom:.6rem;overflow:hidden}
.cs.bone{background:var(--bone);color:var(--ink)}
.cs.ink{background:var(--ink);color:var(--bone);border-top-color:#ede8dd33}
.cs-meta{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.2rem var(--gut) 0;font-family:var(--f-mono);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.cs-live{display:inline-flex;align-items:center;gap:.5rem}
.cs-live i{width:.6rem;height:.6rem;background:var(--signal);display:inline-block}
.cs-title{white-space:nowrap;font-size:clamp(3.6rem,15vw,17rem);padding-top:.6rem;line-height:.78}
.cs-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:clamp(1.5rem,3vw,3rem);padding:clamp(1.6rem,3vw,3rem) var(--gut);align-items:start}
.cs-desc{font-family:var(--f-serif);font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.18}
.cs-spec{margin:1.6rem 0 1.8rem;border-top:2px solid currentColor}
.cs-spec>div{display:grid;grid-template-columns:9rem 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.cs-spec dt{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;font-weight:700;opacity:.7;padding-top:.15rem}
.cs-spec dd{font-family:var(--f-mono);font-size:.85rem;text-transform:uppercase;font-weight:700}
.cs.ink .bigbtn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.cs.ink .news button{background:var(--bone);color:var(--ink);border-color:var(--bone)}
/* lookbook : une grande photo + deux plus petites empilées */
.cs-look{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:.8rem;min-height:clamp(28rem,52vw,46rem)}
.cs-look1{grid-template-columns:1fr;grid-template-rows:1fr}
.cs-look2{grid-template-rows:1fr}
.cs-fig{position:relative;margin:0;background:var(--sand);overflow:hidden;display:flex;flex-direction:column;min-height:0}
.cs-fig>a{display:block;flex:1;min-height:0}
.cs-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s var(--e-out)}
.cs-fig:hover img{transform:scale(1.03)}
.cs-fig0{grid-row:1/-1}
.cs-fig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.45rem .6rem;background:var(--ink);color:var(--bone);font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;font-weight:700}
.cs-fig figcaption span:last-child{text-align:right}
.cs.ink .cs-fig figcaption{background:var(--bone);color:var(--ink)}
/* frise des drops */
.cs-drops{padding:0 var(--gut) clamp(1.6rem,3vw,2.6rem)}
.cs-drops-h{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;font-weight:700;letter-spacing:.08em;margin-bottom:.7rem}
.cs-drops ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid currentColor}
.cs-drops li{display:flex;flex-direction:column;gap:.25rem;padding:1rem 1.1rem;border-right:2px solid currentColor;min-width:0}
.cs-drops li:last-child{border-right:0}
.cs-drops li b{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.6rem);line-height:.9;font-variation-settings:"wdth" 80}
.cs-drops li span{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;font-weight:700}
.cs-drops li span+span{font-weight:400;opacity:.75;text-transform:none;font-family:var(--f-text);font-size:.85rem}
.cs-drops li.now{background:var(--ink);color:var(--bone)}
.cs.ink .cs-drops li.now{background:var(--bone);color:var(--ink)}
.cs-drops li.later b{opacity:.75}
.cs-drops li.later{opacity:.6;border-style:dashed}
.cs-drops-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem;align-items:center;margin-top:1.1rem}
.cs-drops-note p{font-size:.95rem;max-width:44rem}
@media (max-width:900px){
  .cs-intro{grid-template-columns:1fr}
  .cs-look{min-height:0;grid-template-rows:auto auto;aspect-ratio:auto}
  .cs-fig0{aspect-ratio:3/4}.cs-fig1,.cs-fig2{aspect-ratio:3/4}
  .cs-drops ol{grid-template-columns:1fr}
  .cs-drops li{border-right:0;border-bottom:2px solid currentColor}.cs-drops li:last-child{border-bottom:0}
  .cs-drops-note{grid-template-columns:1fr}
}
@media (max-width:560px){.cs-look{grid-template-columns:1fr 1fr}.cs-fig0{grid-column:1/-1;grid-row:auto}.cs-spec>div{grid-template-columns:7rem 1fr}}
@media (prefers-reduced-motion:reduce){.cs-fig img{transition:none}}

/* ---------------------------------------------------------------- AIR ENTRE LES SECTIONS (retour du 2026-10-09 : « c'est un peu pogné »)
   Une marge d'os entre chaque grande section, et plus d'espace entre les blocs d'une même section. */
.cs,.rs{margin-top:clamp(4rem,9vw,9rem)}
.cs-meta{padding-top:clamp(1.6rem,3vw,2.6rem)}
.cs-title{margin-top:.4rem}
.cs-intro{padding-top:clamp(2.4rem,5vw,5rem);padding-bottom:clamp(2.4rem,5vw,5rem)}
.cs-drops{padding-bottom:clamp(2.6rem,5vw,5rem)}
.cs-drops-note{margin-top:1.6rem}
.cs .rail{margin-top:clamp(1rem,2vw,2rem)}
.cs .rs-foot{padding-top:clamp(1.6rem,3vw,2.6rem);padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.brand{padding-top:clamp(2rem,4vw,4rem);padding-bottom:clamp(2rem,4vw,4rem)}

/* ---------------------------------------------------------------- MANNEQUIN 360° (lookbook)
   Vidéo sur fond blanc pur + multiply : le blanc disparaît dans l'os de la section, plus aucun cadre.
   Noir et blanc au repos, couleur + rotation au survol. */
.cs-fig.spin{background:transparent;overflow:visible}
.cs-fig.spin video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;
  mix-blend-mode:multiply;filter:grayscale(1) contrast(1.05);transition:filter .45s var(--e-out)}
.cs-fig.spin.on video{filter:none}
.cs-fig.spin:hover img{transform:none}
/* seule la silhouette est « cliquable » (classe .hit posée par home.js) */
.cs-fig.spin>a{cursor:default}
.cs-fig.spin.hit>a{cursor:pointer}
.cs-fig.spin figcaption{background:transparent;color:inherit;border-top:2px solid currentColor;padding:.5rem 0 0}
.cs.ink .cs-fig.spin figcaption{background:transparent;color:inherit}
@media (prefers-reduced-motion:reduce){.cs-fig.spin video{transition:none}}
/* .grain>* met un z-index sur .cs-intro : ça en fait un groupe de rendu à fond transparent, et le
   multiply de la vidéo n'y voyait rien (rectangle blanc). Sans z-index, la vidéo se fond dans l'os de la
   section, et le grain passe par-dessus tout le bloc de façon uniforme (aucun rectangle). */
.cs .cs-intro{z-index:auto}

/* image indisponible -> carré VX23 centré sur sable (posé par layout.js) */
img.img-fb{object-fit:contain!important;padding:22%;background:var(--sand);filter:none!important;mix-blend-mode:normal!important}

/* ---------------------------------------------------------------- 404 « signal perdu » */
.e404{padding-bottom:3rem}
.e404-tech{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:1.2rem var(--gut) 0;font-family:var(--f-mono);font-size:.75rem;font-weight:700;text-transform:uppercase}
.e404-tech .bc{width:14rem;height:2.2rem}
.e404-num{padding:0 var(--gut);font-family:var(--f-disp);font-weight:900;font-variation-settings:"wdth" 112;line-height:.8;
  font-size:clamp(8rem,31vw,30rem);display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;overflow:hidden}
/* largeur fixe par chiffre : le décodage ne fait rien bouger, et rien ne se chevauche */
.e404-num .ch{display:inline-block;width:.74em;text-align:center}
.e404-lock{display:flex;align-items:center;gap:1.1rem;padding:.9rem var(--gut) 0;font-family:var(--f-mono);font-weight:700;letter-spacing:.32em;text-transform:uppercase;font-size:clamp(.75rem,1.2vw,1rem)}
.e404-lock .rule{flex:1;height:3px;background:var(--signal)}
.e404-lock .jp{font-family:var(--f-jp);letter-spacing:.2em}
.e404-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);padding:clamp(2rem,4vw,3.5rem) var(--gut);align-items:start}
.e404-lead{font-family:var(--f-serif);font-size:clamp(1.6rem,2.8vw,2.6rem);line-height:1.15;margin-bottom:1.6rem}
.e404-cta{display:flex;flex-wrap:wrap;gap:.6rem}
.e404-label{border:2px solid var(--ink);border-left:.5rem solid var(--ink);padding:.9rem 1.1rem;font-family:var(--f-mono);font-size:.8rem;text-transform:uppercase}
.e404-label>div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--line)}
.e404-label>div:last-child{border-bottom:0}
.e404-label dt{opacity:.65;font-weight:700}
.e404-label dd{font-weight:700;word-break:break-all}
.e404-rail{padding:0 var(--gut);margin-top:clamp(2rem,5vw,4rem)}
.e404-more{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,4vw,3.4rem);border-bottom:3px solid var(--ink);padding-bottom:.3rem;margin-bottom:1.2rem}
.e404-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem}
@media (max-width:800px){.e404-body{grid-template-columns:1fr}.e404-label>div{grid-template-columns:7.5rem 1fr}}

/* contenu rendu côté serveur (robots + visiteurs sans JS) ; masqué dès que le JS est actif */
.ssr{padding:2rem var(--gut);max-width:none}
.ssr h1{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:clamp(2.2rem,6vw,5rem);line-height:.9;margin:.6rem 0 1rem}
.ssr h2{font-family:var(--f-disp);font-weight:900;text-transform:uppercase;font-size:1.6rem;margin:1.6rem 0 .6rem}
.ssr ul{padding-left:1.2rem}.ssr dt{font-family:var(--f-mono);font-weight:700;font-size:.8rem;text-transform:uppercase;margin-top:.6rem}
.ssr img{max-width:min(100%,700px);height:auto;margin:1rem 0}

/* section encre : la vidéo est déjà posée sur #0B0B0B (spin_finish --fond), aucun mode de fusion */
.cs.ink .cs-fig.spin video{mix-blend-mode:normal}