/* ============================================================
   DIRECTED BY WOLF — V3 « EURO » (2026-07-21)
   Couche posée PAR-DESSUS theme/home-noir/feed/atelier/home2.
   1. Display = Euro Technic Ext (charte logo : grands formats
      = Euro Technic, petites tailles = Inter). Uppercase, large.
   2. Le mot-accent des titres passe du serif italique à
      l'outline Euro (comme le wordmark) + lueur LED.
   3. Carrousel maison (.wcar) — verre = interface (LOI 3),
      progression = rail LED (LOI 1).
   4. Polish liquid glass : fallback transparence, arêtes.
   Tout est réversible : retirer v3.css + motion.js = retour v2.
   ============================================================ */

/* ---------- 1 · DISPLAY EURO ----------
   Grands formats = Euro Technic Ext (comme le wordmark), uppercase.
   Titres de section = Euro Technic Bold (moins étendu).
   En dessous de ~24px (cartes, rows) : Inter — conforme charte logo. */
.fhero h1,.phero h1{
  font-family:var(--euro-ext);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,2.4vw + 15px,58px);line-height:1.08;letter-spacing:.012em;
  text-wrap:balance}
.hsec{
  font-family:var(--euro);font-weight:700;text-transform:uppercase;
  font-size:clamp(21px,14px + 1.5vw,34px);line-height:1.14;letter-spacing:.02em}
.at-t{
  font-family:var(--euro);font-weight:700;text-transform:uppercase;
  font-size:clamp(20px,14px + 1.2vw,30px);line-height:1.16;letter-spacing:.02em}
.foot2__cta h2{
  font-family:var(--euro-ext);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,15px + 2.3vw,50px);line-height:1.12;letter-spacing:.012em;
  text-wrap:balance}

/* le mot-accent : outline Euro (le wordmark parle) + lueur LED */
.fhero h1 .serif-em,.phero h1 .serif-em,.hsec .serif-em,.foot2__cta h2 .serif-em{
  font-family:var(--euro-out);font-style:normal;font-weight:800;
  font-size:1em;line-height:inherit;letter-spacing:inherit;
  color:var(--led-hot);
  filter:drop-shadow(0 0 18px rgba(201,207,204,.38))}

/* respiration : l'uppercase extended a besoin d'air */
.fhero--home{padding-top:96px}
.fhero h1{margin-bottom:18px}
.fhero p,.phero p{font-size:15.5px;letter-spacing:.002em}

/* sections home : respiration v3 (tokens, plus jamais de valeurs libres) */
.hsvc{margin:var(--s10) 0}
.hloc{margin:var(--s10) 0}
.habout{margin:var(--s10) 0 var(--s9)}

/* rails LED de la home — la lumière appartient aux structures (LOI 1) */
main .rail{margin:var(--s8) 0 0}

/* ---------- 1b · DEMO REEL — strip cinémascope réel ----------
   Remplace la boîte dashed « COMING SOON ». Le film au montage :
   vrai still, timecode, pastille REC — langage dossier (LOI 4). */
.dreel{margin:38px 0 0}
.dreel .box{position:relative;display:block;max-width:1080px;margin:0 auto;aspect-ratio:21/9;
  border-radius:var(--r-l);overflow:hidden;background:#0A0A0C;
  border:1px solid var(--seam);
  box-shadow:0 60px 130px -60px rgba(0,0,0,.95),0 30px 110px -40px rgba(177,183,180,.10),
    inset 0 1px 0 rgba(255,255,255,.05)}
.dreel .box img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;
  filter:saturate(.85) contrast(1.04) brightness(.72)}
.dreel .box::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 130% at 50% 118%,rgba(177,183,180,.14) 0%,rgba(177,183,180,0) 55%),
    linear-gradient(180deg,rgba(255,255,255,.05) 0%,transparent 12%),
    linear-gradient(180deg,rgba(5,5,5,.32) 0%,rgba(5,5,5,.10) 40%,rgba(5,5,5,.55) 100%)}
.dreel .tc{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--mono);
  font-size:10px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.5)}
.dreel .rt{position:absolute;top:14px;right:16px;z-index:2;display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.5)}
.dreel .rt i{width:6px;height:6px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 10px rgba(177,183,180,.9);animation:v3blink 1.6s ease-in-out infinite}
@keyframes v3blink{0%,100%{opacity:1}50%{opacity:.25}}
.dreel .sig{position:absolute;left:16px;bottom:13px;z-index:2;text-align:left}
.dreel .sig .kk{display:block;font-family:var(--mono);font-size:9.5px;
  letter-spacing:var(--ls-2);color:rgba(239,241,240,.55);margin-bottom:5px}
.dreel .sig .vv{display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:19px;letter-spacing:0;color:var(--bone)}
.dreel .fmt{position:absolute;right:16px;bottom:13px;z-index:2;font-family:var(--mono);
  font-size:9.5px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.38)}
@media (prefers-reduced-motion:reduce){.dreel .rt i{animation:none}}

/* vitrine de l'Atelier : 6 services sur UNE rangée desktop */
.svc-grid{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
/* chaque slot garde la hauteur de SON ratio (le 9/16 n'étire plus la rangée) */
.at-grid{align-items:start}

/* ---------- 1c · SLOTS de l'Atelier : pegboard, plus de dashed ---------- */
.slot{border:1px solid var(--seam);
  background-color:var(--coal-1);background-image:
  radial-gradient(circle,rgba(0,0,0,.85) 1.5px,transparent 2px),
  radial-gradient(circle,rgba(255,255,255,.028) 1.5px,transparent 2px);
  background-size:22px 22px,22px 22px;background-position:0 0,0 1px}

/* ---------- 2 · CARROUSEL .wcar — verre + rail LED ---------- */
.wcar{position:relative}
.wcar__track{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 6px;
  scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;
  cursor:grab;overscroll-behavior-x:contain}
.wcar__track::-webkit-scrollbar{display:none}
.wcar__track.drag{cursor:grabbing;scroll-snap-type:none}
.wcar__track>*{flex:0 0 auto;scroll-snap-align:start}

/* flèches : pastilles de verre (LOI 3 — le verre est ce qu'on touche) */
.wcar__nav{display:flex;gap:10px}
.wcar__btn{width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--bone);
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  box-shadow:var(--glass-hl),0 10px 30px -16px rgba(0,0,0,.8);
  transition:border-color .3s var(--ease),color .3s var(--ease),
    background-color .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.wcar__btn:hover{border-color:rgba(201,207,204,.5);color:var(--led-hot)}
.wcar__btn:active{transform:scale(.94)}
.wcar__btn[disabled]{opacity:.32;pointer-events:none}
.wcar__btn svg{display:block}

/* pied du carrousel : rail LED (LOI 1) + flèches de verre */
.wcar__foot{display:flex;align-items:center;gap:20px;margin-top:18px}
.wcar__rail{position:relative;flex:1;height:2px;border-radius:2px;
  background:rgba(255,255,255,.07);overflow:hidden}
.wcar__rail i{position:absolute;top:0;bottom:0;left:0;width:18%;border-radius:2px;
  background:linear-gradient(90deg,var(--led-deep),var(--led-hot));
  box-shadow:0 0 8px rgba(201,207,204,.7);
  transform:translateX(0);will-change:transform}

/* variante home — les 4 espaces studio en grandes cartes */
.wcar--spaces .sp-card{width:min(460px,76vw)}

/* ---------- 3 · POLISH VERRE ---------- */
/* pillnav & nav sur les tokens verre officiels + arête spéculaire */
.pillnav{background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
          backdrop-filter:blur(var(--glass-blur)) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),
  inset 0 -1px 0 rgba(255,255,255,.03),0 12px 32px -20px rgba(0,0,0,.8)}
/* bouton close de la lightbox : même verre que le reste de l'interface */
.lbx .x{background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
          backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:var(--glass-hl)}
/* si l'OS demande moins de transparence : surfaces pleines */
@media (prefers-reduced-transparency:reduce){
  .pillnav,.nav2.scrolled,.tabbar,.wcar__btn,.lbx,.lbx .x{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .pillnav,.wcar__btn,.lbx .x{background:rgba(16,17,19,.96)}
  .nav2.scrolled{background:rgba(8,9,11,.97)}
  .tabbar{background:rgba(10,10,12,.97)}
}
/* navigateurs sans backdrop-filter : fonds opaques */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .lgx,.pillnav,.fchip,.tabbar,.editbar,.wcar__btn{background:rgba(14,14,16,.94)}
  .lbx{background:rgba(3,3,3,.97)}
}

/* ---------- 3b · CONTACT (page migrée en noir v3) ----------
   Le formulaire est une interface : le verre s'y pose (LOI 3). */
.csec{max-width:880px;margin:26px auto 0;padding-bottom:var(--s8)}
.cform{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.cf{display:flex;flex-direction:column;gap:9px}
.cf.full{grid-column:1/-1}
.cf label{font-family:var(--mono);font-size:9.5px;letter-spacing:var(--ls-2);color:var(--stone)}
.cf input,.cf textarea{
  font-family:var(--body);font-size:15px;color:var(--bone);
  padding:14px 16px;border-radius:var(--r-s);outline:none;resize:vertical;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  box-shadow:var(--glass-hl);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cf input::placeholder,.cf textarea::placeholder{color:rgba(151,156,154,.65)}
.cf input:focus-visible,.cf textarea:focus-visible{outline:none;
  border-color:rgba(201,207,204,.55);
  box-shadow:var(--glass-hl),0 0 0 3px rgba(201,207,204,.12)}
.cchips{display:flex;flex-wrap:wrap;gap:9px}
.cchip{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-2);color:var(--stone);
  cursor:pointer;padding:10px 18px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);
  transition:color .25s var(--ease),border-color .25s var(--ease),background-color .25s var(--ease)}
.cchip:hover{color:var(--bone);border-color:rgba(201,207,204,.4)}
.cchip.on{color:var(--led-hot);border-color:rgba(177,183,180,.45);background:rgba(177,183,180,.08)}
.cf-send{align-items:flex-start;margin-top:6px}
.cform-done{text-align:center;padding:34px 10px;gap:12px}
.cform-done h3{font-family:var(--euro);font-weight:700;text-transform:uppercase;
  font-size:24px;letter-spacing:.02em;color:var(--bone)}
.cform-done p{max-width:52ch;margin:0 auto;font-size:14.5px;line-height:1.65;color:var(--stone)}
@media (max-width:640px){
  .cform{grid-template-columns:1fr;gap:18px}
  .csec{margin-top:10px;padding-bottom:var(--s7)}
}

/* ---------- 4 · GSAP prend la main sur l'entrée du hero ----------
   motion.js pose data-motion="on" sur <html> AVANT le premier paint
   (script sync) ; sans GSAP / reduced-motion / qc, rien ne se cache. */
html[data-motion="on"] .fhero .eyebrow2,
html[data-motion="on"] .fhero h1,
html[data-motion="on"] .fhero p,
html[data-motion="on"] .fhero form,
html[data-motion="on"] .dreel .box{opacity:0}

/* découpe en mots (motion.js) — chaque mot monte dans son masque ;
   la montée finie (.w-done), les masques s'ouvrent : le glow du
   mot-accent n'est plus rogné */
.w-m{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.07em;margin-bottom:-.07em}
.w-w{display:inline-block;will-change:transform}
.w-done .w-m{overflow:visible}
/* la montée des mots finie, on libère les couches GPU retenues */
.w-done .w-m .w-w{will-change:auto}

/* quand GSAP pilote les rangées du marquee, la transition CSS se tait */
html[data-motion="on"] .mqrow.rv{opacity:1;transition:none}

/* ---------- PRÉLOADER v3 — le wordmark entre, le rail se trace ---------- */
.v3pre{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;
  background:
    radial-gradient(560px 320px at 50% 52%,rgba(177,183,180,.05) 0%,transparent 70%),
    #060606}
.v3pre .wm{font-family:var(--euro-ext);font-weight:800;text-transform:uppercase;
  font-size:clamp(17px,2.4vw,26px);letter-spacing:.06em;color:var(--bone)}
.v3pre .ln{width:min(340px,70vw);height:2px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.08)}
.v3pre .ln i{display:block;height:100%;transform-origin:left center;
  background:linear-gradient(90deg,var(--led-deep),var(--led-hot));
  box-shadow:0 0 10px rgba(201,207,204,.8)}
.v3pre .tag{font-family:var(--mono);font-size:9px;letter-spacing:var(--ls-3);
  color:var(--stone)}

/* ============================================================
   PAGES V3 — STORE · ACADEMY · JOURNAL · CASE STUDY
   Même grammaire que le feed : mur mat, verre = interface,
   lumière fixée aux structures, langage dossier (LOI 1-4).
   ============================================================ */

/* ---------- STORE — les packs, en strips de LUT procéduraux ---------- */
.stgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 0}
.stcard{position:relative;border-radius:var(--r-m);overflow:hidden;
  background:var(--coal-2);border:1px solid var(--seam);
  box-shadow:var(--shadow-card);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.stcard:hover{transform:translateY(-3px);border-color:rgba(201,207,204,.35);
  box-shadow:var(--shadow-card),0 0 60px -26px rgba(177,183,180,.35)}
.stcard.featured{grid-column:1/-1}
.stv{position:relative;aspect-ratio:21/9;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;
  border-bottom:1px solid var(--seam);overflow:hidden;
  background:
    radial-gradient(80% 130% at 50% 118%,rgba(177,183,180,.12) 0%,transparent 60%),
    var(--coal-1)}
.stcard.featured .stv{aspect-ratio:21/5}
.stv .lut{width:min(64%,300px)} /* strips .lut : recette home-noir */
.stv .scode{position:absolute;top:12px;left:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:var(--ls-2);color:var(--led)}
.stv .cat{position:absolute;top:12px;right:14px;font-family:var(--mono);font-size:9px;
  letter-spacing:var(--ls-2);color:rgba(239,241,240,.4)}
.st-b{padding:16px 18px 18px}
.st-b b{display:block;font-family:var(--sans);font-weight:650;font-size:18px;
  letter-spacing:-.01em;color:var(--bone);margin-bottom:6px}
.st-b p{font-size:13.5px;line-height:1.55;color:var(--stone);margin:0 0 12px}
.st-b .serial{display:block}

/* ---------- ACADEMY — l'index des cours, en dossier ---------- */
.ac-lead{display:flex;align-items:center;gap:30px;margin:30px 0 6px}
.ac-lead .leader{flex:0 0 auto}
.ac-lead p{max-width:52ch;font-size:14.5px;line-height:1.7;color:var(--stone)}
.ac-lead p b{color:var(--bone);font-weight:500}
.acrows{border-top:1px solid var(--seam);margin-top:26px}
.acrow{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;
  padding:24px 6px;border-bottom:1px solid var(--seam);
  transition:background-color .3s var(--ease)}
.acrow:hover{background:linear-gradient(90deg,rgba(177,183,180,.04),transparent 60%)}
.acrow .num{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-1);
  color:var(--led);font-variant-numeric:tabular-nums}
.acrow .tx b{display:block;font-family:var(--sans);font-weight:650;
  font-size:clamp(18px,1.6vw,22px);letter-spacing:-.015em;color:var(--bone)}
.acrow .tx span{display:block;margin-top:6px;font-size:13.5px;line-height:1.55;
  color:var(--stone);max-width:56ch}
.ac-meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ac-meta .chip{font-family:var(--mono);font-size:9px;letter-spacing:var(--ls-2);
  color:var(--stone);padding:5px 12px;border-radius:999px;border:1px solid var(--seam);
  background:rgba(255,255,255,.02);white-space:nowrap}

/* ---------- JOURNAL — les entrées, en registre ---------- */
.jrnrows{border-top:1px solid var(--seam);margin-top:30px}
.jrnrow{display:grid;grid-template-columns:74px 1fr auto;align-items:baseline;gap:18px;
  padding:22px 6px;border-bottom:1px solid var(--seam)}
.jrnrow .code{font-family:var(--mono);font-size:10px;letter-spacing:var(--ls-1);
  color:var(--stone);font-variant-numeric:tabular-nums}
.jrnrow .tx b{display:block;font-family:var(--sans);font-weight:640;
  font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;color:var(--bone)}
.jrnrow .tx span{display:block;margin-top:5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:var(--ls-2);color:var(--stone);text-transform:uppercase}
.jrn-st{font-family:var(--mono);font-size:9px;letter-spacing:var(--ls-2);
  color:rgba(239,241,240,.4);white-space:nowrap}

/* ---------- CASE STUDY — template dossier ---------- */
.cshero{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:21/9;
  margin:30px 0 0;background:#0A0A0C;border:1px solid var(--seam);
  box-shadow:0 60px 130px -60px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.cshero img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.04) brightness(.72)}
.cshero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,5,.25) 0%,rgba(5,5,5,0) 35%,rgba(5,5,5,.5) 100%)}
.cshero .fr{position:absolute;top:13px;left:16px;z-index:2;font-family:var(--mono);
  font-size:10px;letter-spacing:var(--ls-2);color:rgba(239,241,240,.55)}
.cshero .yr{position:absolute;top:13px;right:16px;z-index:2;font-family:var(--mono);
  font-size:10px;letter-spacing:var(--ls-1);color:rgba(239,241,240,.45)}
.cs-meta{display:flex;flex-wrap:wrap;gap:12px 26px;margin:22px 0 0}
.cs-body{max-width:68ch;margin:26px 0 0}
.cs-body p{font-size:15.5px;line-height:1.8;color:var(--stone)}
.cs-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px 0 0}

/* ---------- responsive pages v3 ---------- */
@media (max-width:1024px){
  .stgrid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .stgrid{grid-template-columns:1fr}
  .stcard.featured .stv{aspect-ratio:21/9}
  .ac-lead{flex-direction:column;align-items:flex-start;gap:18px}
  .acrow{grid-template-columns:1fr;gap:10px}
  .acrow .num{display:none}
  .ac-meta{flex-direction:row;align-items:center;justify-content:flex-start}
  .jrnrow{grid-template-columns:1fr;gap:8px}
  .jrnrow .code,.jrn-st{display:none}
  .cs-slots{grid-template-columns:1fr}
  .cshero{aspect-ratio:16/9}
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .fhero--home{padding-top:52px}
  .fhero h1,.phero h1{font-size:clamp(22px,7vw,28px);line-height:1.16}
  .hsec{font-size:19px}
  .at-t{font-size:18px}
  .foot2__cta h2{font-size:23px}
  .hsvc,.hloc{margin:var(--s7) 0}
  .habout{margin:var(--s7) 0 var(--s6)}
  main .rail{margin:var(--s6) 0 0}
  .dreel .tc,.dreel .fmt{display:none}
  .dreel .sig .vv{font-size:15px}
  .dreel .box{aspect-ratio:16/9;border-radius:var(--r-m)}
  .wcar--spaces .sp-card{width:82vw}
  .wcar__btn{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  html[data-motion="on"] .fhero .eyebrow2,
  html[data-motion="on"] .fhero h1,
  html[data-motion="on"] .fhero p,
  html[data-motion="on"] .fhero form,
  html[data-motion="on"] .dreel .box{opacity:1}
}

/* ---------- BRAND HERO — loup métal + plaque lettrage source (Brand File V2.0), centrés ---------- */
.brandhero{display:flex;flex-direction:column;align-items:center;padding:72px 24px 0}
.brandhero .bh-wolf{width:min(300px,56vw);height:auto;display:block}
.brandhero .bh-plate{width:min(980px,92vw);height:auto;display:block;margin-top:6px}
html[data-motion="on"] .brandhero img{opacity:0}
@media (max-width:760px){.brandhero{padding-top:56px}.brandhero .bh-wolf{width:min(220px,58vw)}}