/* ============================================================
   WOLFILMZ — THEME V6 « SHOWROOM »
   Redesign 2026-08 — grammaire mesurée (docs/RECETTE_MOTIONVFX.md)
   × identité charbon WOLFILMZ. UNE source de vérité, tout en vars.
   Accent : silver par défaut — se change en UNE ligne (--accent).
   ============================================================ */

:root{
  /* murs */
  --bg:#060606;
  --wall:#0C0C0E;
  --card:#141416;
  --card-2:#1C1C1F;
  --seam:#232326;

  /* texte — le « mélange de fonts » = 1 famille, 2 tons */
  --txt:#F2F3F2;
  --txt-2:#9A9C9A;

  /* accent (décision reportée — silver en attendant) */
  --accent:#B1B7B4;
  --accent-hi:#C6CCC9;
  --accent-ink:#060606;

  /* rayons — hiérarchie stricte */
  --r-hero:32px;
  --r-card:16px;
  --r-el:12px;
  --r-btn:8px;
  --r-pill:999px;

  /* motion — la grammaire des vitesses */
  --t-fast:.18s;                                /* micro-feedback boutons   */
  --t-med:.5s;                                  /* hover cartes             */
  --t-rev:.8s;                                  /* reveals au scroll        */
  --e-std:cubic-bezier(.4,0,.2,1);
  --e-soft:cubic-bezier(.1,.1,.2,1);            /* atterrissage long        */
  --e-rev:cubic-bezier(.22,.04,.16,1);          /* grands reveals           */

  /* verre — liseré interne, jamais d'ombre portée */
  --glass-line:rgba(255,255,255,.14);
  --glass-in:inset .5px .5px .5px rgba(255,255,255,.20),
             inset -.5px -.5px .5px rgba(255,255,255,.08);
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));

  /* rythme */
  --gutter:clamp(16px,2.2vw,28px);
  --font:'Inter Tight',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
@media (max-width:768px){
  :root{ --r-hero:20px; }
}

/* ---------- socle ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:var(--accent-ink); }

/* ---------- typo : 1 famille, 2 tons, contraste par graisse ---------- */
.h-xl{ font-size:clamp(44px,6.2vw,80px); font-weight:700; line-height:1.02; letter-spacing:-.04em; margin:0; }
.h-lg{ font-size:clamp(32px,3.8vw,52px); font-weight:700; line-height:1.06; letter-spacing:-.03em; margin:0; }
.h-md{ font-size:clamp(24px,2.6vw,37px); font-weight:700; line-height:1.12; margin:0; }
.h-xl .dim,.h-lg .dim,.h-md .dim{ color:var(--txt-2); font-weight:400; }
.tagline{
  font-size:13px; font-weight:600; text-transform:uppercase;
  letter-spacing:.16em; color:var(--txt-2); margin:0 0 14px;
}
.lead{ font-size:clamp(16px,1.4vw,20px); color:var(--txt-2); font-weight:400; margin:0; max-width:36em; }

/* ---------- boutons : fond qui change + liseré verre, jamais de scale ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border:0; border-radius:var(--r-pill);
  font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer;
  background:var(--card-2); color:var(--txt);
  box-shadow:var(--glass-in);
  transition:background-color var(--t-fast) var(--e-std), box-shadow var(--t-fast) var(--e-std);
}
.btn:hover{ background:#2A2A2E; }
.btn--accent{ background:var(--accent); color:var(--accent-ink); box-shadow:none; }
.btn--accent:hover{ background:var(--accent-hi); }
.btn--ghost{ background:transparent; box-shadow:inset 0 0 0 1px var(--glass-line); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); }
:where(a,button):focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(177,183,180,.35); }

/* ---------- nav : verre dépoli ---------- */
.nav6{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  background:rgba(6,6,6,.55);
  -webkit-backdrop-filter:blur(30px) saturate(1.4); backdrop-filter:blur(30px) saturate(1.4);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav6-brand{ display:flex; align-items:center; gap:12px; }
.nav6-brand img{ height:26px; width:auto; }
.nav6-brand span{ font-weight:700; letter-spacing:.08em; font-size:15px; }
.nav6-links{ display:flex; gap:26px; font-size:14px; font-weight:500; color:var(--txt-2); }
.nav6-links a{ transition:color var(--t-fast) var(--e-std); }
.nav6-links a:hover{ color:var(--txt); }
@media (max-width:900px){ .nav6-links{ display:none; } }

/* ---------- reveals au scroll ---------- */
.rv{
  opacity:0; transform:translateY(50px);
  transition:opacity var(--t-rev) var(--e-rev) var(--d,0s),
             transform var(--t-rev) var(--e-rev) var(--d,0s);
}
.rv--soft{ transform:translateY(12px); transition-duration:var(--t-med),var(--t-med); }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rv,.rv--soft{ opacity:1; transform:none; transition:none; }
}

/* ============================================================
   01 · HERO — vidéo plein cadre arrondie, zéro lecteur
   ============================================================ */
.hero6{ padding:76px var(--gutter) 0; }
.hero6-stage{
  position:relative; overflow:hidden;
  border-radius:var(--r-hero);
  height:min(calc(100svh - 94px),980px); min-height:520px;
  background:var(--card);
  transform:translateZ(0); /* force le clip du radius pendant les fades */
}
.hero6-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.1s var(--e-soft);
  pointer-events:none;
}
.hero6-slide.is-live{ opacity:1; }
.hero6-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.10) 0%,rgba(6,6,6,0) 35%,rgba(6,6,6,.62) 100%);
}
.hero6-content{
  position:absolute; inset:auto 0 0 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:32px;
  padding:clamp(24px,4vw,56px);
}
.hero6-copy{ max-width:640px; }
.hero6-copy .lead{ margin-top:18px; }
.hero6-tabs{ display:flex; align-items:center; gap:8px; margin-top:26px; }
.hero6-tab{
  width:8px; height:8px; padding:0; border:0; cursor:pointer;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.30);
  transition:width var(--t-med) var(--e-std), background-color var(--t-med) var(--e-std);
}
.hero6-tab:hover{ background:rgba(255,255,255,.6); }
.hero6-tab.is-live{ width:28px; background:var(--txt); }
.hero6-credit{
  position:absolute; top:clamp(20px,3vw,36px); right:clamp(20px,3vw,36px);
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  padding:8px 14px; border-radius:var(--r-pill);
  background:rgba(6,6,6,.35);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.hero6-panel{
  flex:0 0 auto; width:min(300px,100%);
  padding:26px 26px 22px;
  border-radius:var(--r-card);
  background:rgba(12,12,14,.55);
  -webkit-backdrop-filter:blur(24px) saturate(1.3); backdrop-filter:blur(24px) saturate(1.3);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in);
}
.hero6-panel h3{ margin:0 0 6px; font-size:20px; font-weight:700; }
.hero6-panel p{ margin:0 0 18px; font-size:14px; color:var(--txt-2); }
.hero6-panel .btn{ width:100%; justify-content:center; }
.hero6-status{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-2); margin-bottom:14px;
}
.hero6-status i{
  width:7px; height:7px; border-radius:50%; background:#8FCB9B;
  box-shadow:0 0 8px rgba(143,203,155,.8); animation:pulse6 2.4s infinite;
}
@keyframes pulse6{ 50%{ opacity:.4; } }
@media (max-width:900px){
  .hero6-content{ flex-direction:column; align-items:flex-start; }
  .hero6-panel{ width:100%; padding:16px 18px 14px; }
  .hero6-panel h3{ font-size:16px; margin-bottom:4px; }
  .hero6-panel p{ font-size:12.5px; margin-bottom:12px; }
  .hero6-panel .btn{ padding:11px 20px; font-size:14px; }
  .hero6-status{ margin-bottom:8px; }
  .hero6-credit{ display:none; }
}

/* ============================================================
   Grammaire de section réutilisable (cartes 32px sur fond noir)
   ============================================================ */
.sec6{ margin:18px var(--gutter); }
.sec6-card{
  border-radius:var(--r-hero);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  padding:clamp(28px,4vw,64px);
  overflow:hidden;
}
/* média arrondi dont l'IMAGE zoome au hover — le geste signature */
.media6{
  position:relative; overflow:hidden;
  border-radius:var(--r-el);
  background:var(--card);
  transform:translateZ(0);
}
.media6 img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-med) var(--e-std);
}
.media6:hover img{ transform:scale(1.06); }
.media6--tall{ aspect-ratio:3/4; }
.media6--wide{ aspect-ratio:16/10; }

/* ---------- ON STAGE : bande défilante de photos live ---------- */
.live6{ overflow:hidden; margin:clamp(48px,7vw,110px) 0 0; }
.live6-track{
  display:flex; gap:14px; width:max-content;
  animation:live6move 48s linear infinite;
}
.live6:hover .live6-track{ animation-play-state:paused; }
.live6 img{
  height:clamp(200px,28vw,340px); width:auto;
  border-radius:var(--r-el);
}
@keyframes live6move{ to{ transform:translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion:reduce){ .live6-track{ animation:none; } }

/* ---------- THE ROAD : carrousel du parcours (texte à côté, photo bornée) ---------- */
.roadc6{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:center;
  transition:opacity .35s var(--e-soft), transform .35s var(--e-soft);
}
.roadc6.is-out{ opacity:0; transform:translateY(10px); }
.roadc6-img{
  height:clamp(340px,46vh,500px);
  border-radius:var(--r-card);
}
.roadc6-img img{ width:100%; height:100%; object-fit:cover; }
.road6-num{
  display:block; margin-bottom:10px;
  font-size:clamp(38px,4.5vw,60px); font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22);
}
.roadc6-txt h3{ margin:0 0 12px; font-size:clamp(22px,2.4vw,32px); font-weight:700; }
.roadc6-txt p{ margin:0; font-size:16px; line-height:1.65; color:var(--txt-2); max-width:34em; }
.roadc6-ctrl{ display:flex; align-items:center; gap:16px; margin-top:28px; }
.roadc6-bars{ display:flex; gap:6px; }
.roadc6-bar{
  width:26px; height:3px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.15); cursor:pointer; border:0; padding:0;
  transition:background-color var(--t-med) var(--e-std);
}
.roadc6-bar.is-live{ background:var(--accent); }
@media (max-width:900px){
  .roadc6{ grid-template-columns:1fr; }
  .roadc6-img{ order:-1; height:min(52vw,340px); }
}

/* ---------- section 02 · the three crafts ---------- */
.crafts6-head{ max-width:720px; margin-bottom:clamp(26px,3.5vw,44px); }
.crafts6-head .lead{ margin-top:16px; }
.crafts6-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.craft6{
  display:block;
  border-radius:var(--r-card);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
  transition:transform var(--t-med) var(--e-std), background-color var(--t-med) var(--e-std);
}
.craft6:hover{ transform:scale(1.02); background:var(--card-2); }
.craft6 .media6{ border-radius:0; aspect-ratio:16/10; }
.craft6-body{ padding:24px 26px 28px; }
.craft6-kicker{
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-2); margin:0 0 10px;
}
.craft6-body h3{ margin:0 0 8px; font-size:22px; font-weight:700; }
.craft6-body p{ margin:0 0 18px; font-size:15px; line-height:1.55; color:var(--txt-2); }
.link6{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600; color:var(--txt);
}
.link6 i{
  font-style:normal;
  transition:transform var(--t-fast) var(--e-std);
}
.craft6:hover .link6 i, .link6:hover i{ transform:translateX(.4rem); }
@media (max-width:900px){
  .crafts6-grid{ grid-template-columns:1fr; }
}

/* ---------- section GSP « the full circle » ---------- */
.gsp6-grid{
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
.gsp6-copy .lead{ margin-top:20px; }
.gsp6-main{ border-radius:var(--r-card); aspect-ratio:4/5; }
.gsp6-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; margin-top:clamp(20px,2.5vw,32px);
}
.gsp6-row .media6{ aspect-ratio:4/3; }
@media (max-width:900px){
  .gsp6-grid{ grid-template-columns:1fr; }
  .gsp6-main{ aspect-ratio:16/11; }
  .gsp6-row{ grid-template-columns:repeat(3,1fr); gap:10px; }
}

/* ---------- section 04 · le showcase à onglets ---------- */
.show6-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(22px,3vw,36px);
}
.show6-head .lead{ margin-top:16px; }
.show6-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(20px,2.5vw,30px); }
.show6-tab{
  border:0; cursor:pointer;
  padding:11px 20px; border-radius:var(--r-pill);
  font-family:var(--font); font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--txt-2); background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  transition:background-color var(--t-med) var(--e-std), color var(--t-med) var(--e-std), box-shadow var(--t-med) var(--e-std);
}
.show6-tab:hover{ color:var(--txt); background:var(--card-2); }
.show6-tab.is-live{ background:var(--txt); color:var(--bg); box-shadow:none; }
.show6-panel{
  display:grid; grid-template-columns:1.55fr 1fr;
  gap:clamp(24px,3.5vw,48px); align-items:center;
  opacity:1; transform:none;
  transition:opacity var(--t-med) var(--e-soft), transform var(--t-med) var(--e-soft);
}
.show6-panel.is-out{ opacity:0; transform:translateY(12px); }
.show6-media{
  position:relative; overflow:hidden;
  border-radius:var(--r-hero);
  aspect-ratio:16/9; background:var(--card);
  transform:translateZ(0);
}
.show6-media img,.show6-media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-med) var(--e-std);
}
.show6-media:hover img{ transform:scale(1.05); }
.show6-caption .tagline{ margin-bottom:10px; }
.show6-caption h3{ margin:0 0 12px; font-size:clamp(24px,2.4vw,34px); font-weight:700; line-height:1.1; }
.show6-caption p{ margin:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--txt-2); max-width:30em; }
@media (max-width:900px){
  .show6-head{ flex-direction:column; align-items:flex-start; }
  .show6-panel{ grid-template-columns:1fr; }
}

/* ---------- section 05 · la méthode (scroll épinglé) ---------- */
.meth6{ position:relative; height:340vh; margin:clamp(48px,7vw,110px) var(--gutter) 18px; }
.meth6-sticky{
  position:sticky; top:88px;
  height:calc(100svh - 106px); min-height:480px;
  border-radius:var(--r-hero);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.meth6-step{
  position:absolute; inset:0;
  display:flex; align-items:center; gap:clamp(24px,4vw,64px);
  padding:clamp(28px,5vw,80px);
  opacity:0; transform:translateY(26px);
  transition:opacity var(--t-med) var(--e-soft), transform var(--t-med) var(--e-soft);
  pointer-events:none;
}
.meth6-step.is-live{ opacity:1; transform:none; }
.meth6-num{
  flex:0 0 auto;
  font-size:clamp(72px,10vw,150px); font-weight:800; line-height:1;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.20);
}
.meth6-step h3{ margin:0 0 14px; font-size:clamp(26px,3vw,44px); font-weight:700; line-height:1.08; }
.meth6-step .lead{ max-width:32em; }
.meth6-bars{
  position:absolute; left:clamp(28px,5vw,80px); bottom:clamp(24px,3vw,44px);
  display:flex; gap:8px;
}
.meth6-bar{
  width:36px; height:3px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.15);
  transition:background-color var(--t-med) var(--e-std);
}
.meth6-bar.is-live{ background:var(--accent); }
.meth6-tag{
  position:absolute; top:clamp(24px,3vw,44px); left:clamp(28px,5vw,80px);
}
@media (max-width:900px){
  .meth6-step{ flex-direction:column; align-items:flex-start; justify-content:center; gap:18px; }
}

/* ---------- section 06 · espace client ---------- */
.regie6-grid{
  display:grid; grid-template-columns:1.15fr 1fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
.regie6-grid .media6{ border-radius:var(--r-card); aspect-ratio:16/11; }
.regie6-list{ margin:26px 0 30px; display:grid; gap:0; }
.regie6-item{
  display:flex; gap:16px; align-items:baseline;
  padding:16px 0; border-bottom:1px solid var(--seam);
}
.regie6-item:first-child{ border-top:1px solid var(--seam); }
.regie6-item b{ font-size:16px; font-weight:600; white-space:nowrap; }
.regie6-item span{ font-size:14.5px; color:var(--txt-2); }
@media (max-width:900px){ .regie6-grid{ grid-template-columns:1fr; } }

/* ---------- section 07 · reels ---------- */
.reels6-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; margin-bottom:clamp(20px,2.5vw,30px);
}
.reels6-nav{ display:flex; gap:8px; }
.reels6-btn{
  width:44px; height:44px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  font-size:18px; color:var(--txt);
  background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:background-color var(--t-fast) var(--e-std);
}
.reels6-btn:hover{ background:var(--card-2); }
.reels6-row{
  display:flex; gap:14px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter) 6px;
}
.reels6-row::-webkit-scrollbar{ display:none; }
.reel6{
  position:relative; flex:0 0 auto;
  width:min(56vw,240px); aspect-ratio:9/16;
  border-radius:var(--r-card); overflow:hidden;
  background:var(--card); scroll-snap-align:start;
  transform:translateZ(0);
}
.reel6 img,.reel6 video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.reel6-cap{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:36px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(6,6,6,.78));
  pointer-events:none;
}
.reel6-cap b{ display:block; font-size:13.5px; font-weight:600; line-height:1.25; }
.reel6-cap span{ font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ---------- section 08 · FAQ ---------- */
.faq6{ max-width:860px; }
.faq6-item{ border-bottom:1px solid var(--seam); }
.faq6-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 0; border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--font); font-size:17px; font-weight:600; color:var(--txt);
}
.faq6-q i{
  font-style:normal; color:var(--txt-2);
  transition:transform var(--t-med) var(--e-std);
}
.faq6-item.is-open .faq6-q i{ transform:rotate(45deg); }
.faq6-a{
  height:0; overflow:hidden;
  transition:height .35s var(--e-soft);
}
.faq6-a p{ margin:0; padding:0 0 20px; font-size:15.5px; line-height:1.6; color:var(--txt-2); max-width:44em; }

/* ---------- section 09 · CTA final ---------- */
.cta6-card{
  border-radius:var(--r-hero);
  background:linear-gradient(180deg,var(--wall),var(--card));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  text-align:center;
  padding:clamp(56px,9vw,120px) clamp(24px,5vw,64px);
}
.cta6-card .tagline{ justify-content:center; }
.cta6-card h2{ margin:0 auto; max-width:14em; }
.cta6-card .lead{ margin:18px auto 32px; max-width:32em; }
.cta6-btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   Gabarit FICHE PROJET (case study) — modèle fiche produit
   ============================================================ */
.cs6-hero{ padding:76px var(--gutter) 0; }
.cs6-stage{
  position:relative; overflow:hidden;
  border-radius:40px;
  height:min(calc(100svh - 94px),900px); min-height:480px;
  background:var(--card);
  transform:translateZ(0);
}
.cs6-stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  animation:cs6kb 16s var(--e-std) infinite alternate;
}
@keyframes cs6kb{ from{ transform:scale(1); } to{ transform:scale(1.08); } }
@media (prefers-reduced-motion:reduce){ .cs6-stage img{ animation:none; } }
.cs6-stage::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,6,6,.18),rgba(6,6,6,.05) 40%,rgba(6,6,6,.55));
}
.cs6-title{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--gutter);
}
.cs6-title h1{
  margin:10px 0 0;
  font-size:clamp(40px,7vw,96px); font-weight:800;
  letter-spacing:-.04em; line-height:1;
  text-shadow:0 2px 30px rgba(6,6,6,.45);
}
.cs6-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:2; font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}

/* le film — poster cliquable → lecteur */
.cs6-film{
  position:relative; overflow:hidden;
  border-radius:var(--r-hero);
  aspect-ratio:16/9; background:var(--card);
  cursor:pointer; transform:translateZ(0);
}
.cs6-film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-med) var(--e-std); }
.cs6-film:hover img{ transform:scale(1.03); }
.cs6-film iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.cs6-play{
  position:absolute; inset:0; z-index:2;
  display:grid; place-items:center;
}
.cs6-play i{
  width:84px; height:84px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(6,6,6,.5);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform var(--t-med) var(--e-std), background-color var(--t-med) var(--e-std);
}
.cs6-film:hover .cs6-play i{ transform:scale(1.08); background:rgba(6,6,6,.68); }
.cs6-play svg{ margin-left:5px; }

/* l'histoire + les facts */
.cs6-story{
  display:grid; grid-template-columns:1.5fr 1fr;
  gap:clamp(28px,4vw,64px); align-items:start;
}
.cs6-facts{ border-top:1px solid var(--seam); }
.cs6-fact{
  display:flex; justify-content:space-between; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--seam);
  font-size:14.5px;
}
.cs6-fact b{ font-weight:600; }
.cs6-fact span{ color:var(--txt-2); text-align:right; }
@media (max-width:900px){ .cs6-story{ grid-template-columns:1fr; } }

/* projets suivants */
.cs6-next{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cs6-next a{ display:block; }
.cs6-next .media6{ aspect-ratio:16/10; border-radius:var(--r-card); }
.cs6-next b{ display:block; margin-top:12px; font-size:16px; font-weight:600; }
.cs6-next span{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-2); }
@media (max-width:900px){ .cs6-next{ grid-template-columns:1fr; } }

/* barre sticky « book » — l'équivalent de leur barre d'achat */
.cs6-bar{
  position:fixed; left:50%; bottom:18px; z-index:120;
  transform:translate(-50%,90px);
  display:flex; align-items:center; gap:20px;
  padding:10px 10px 10px 24px;
  border-radius:var(--r-pill);
  background:rgba(12,12,14,.72);
  -webkit-backdrop-filter:blur(28px) saturate(1.4); backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--glass-line), var(--glass-in);
  transition:transform var(--t-med) var(--e-soft), opacity var(--t-med) var(--e-soft);
  opacity:0; pointer-events:none;
  max-width:calc(100vw - 32px);
}
.cs6-bar.is-on{ transform:translate(-50%,0); opacity:1; pointer-events:auto; }
.cs6-bar span{ font-size:14px; font-weight:600; white-space:nowrap; }
@media (max-width:600px){ .cs6-bar span{ display:none; } .cs6-bar{ padding-left:10px; } }

/* ---------- footer ---------- */
.footer6{
  margin:clamp(48px,7vw,100px) var(--gutter) 0;
  border-top:1px solid var(--seam);
  padding:40px 0 34px;
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px; flex-wrap:wrap;
}
.footer6-brand{ display:flex; align-items:center; gap:12px; }
.footer6-brand img{ height:30px; }
.footer6-brand b{ font-weight:700; letter-spacing:.08em; font-size:15px; }
.footer6-brand span{ display:block; font-size:12.5px; color:var(--txt-2); }
.footer6-links{ display:flex; gap:24px; flex-wrap:wrap; font-size:14px; font-weight:500; color:var(--txt-2); }
.footer6-links a:hover{ color:var(--txt); }
.footer6-bottom{
  margin:0 var(--gutter); padding:18px 0 26px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-2);
}

/* ---------- stubs des sections à venir ---------- */
.stub6{
  margin:18px var(--gutter);
  padding:34px clamp(24px,3vw,48px);
  border-radius:var(--r-hero);
  background:var(--wall);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
}
.stub6 b{ font-size:clamp(20px,2.2vw,30px); font-weight:700; }
.stub6 span{ font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-2); white-space:nowrap; }

/* ---------- mode ?slots=1 : codes en surimpression ---------- */
.slot-tag{
  position:absolute; z-index:90; top:10px; left:10px;
  font-size:11px; font-weight:700; letter-spacing:.1em;
  padding:4px 10px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink);
  pointer-events:none;
}