/* =====================================================================
   RED BANANA — ÉDITION RENAISSANCE
   Editorial almanac. Tradition passée au prisme de la modernité.
   ===================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:'Canter';src:url('fonts/Canter-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Canter';src:url('fonts/Canter-Light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'Atone';src:url('fonts/Atone.otf') format('opentype');font-weight:400;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --ink:#141210;
  --ink-soft:#211E19;
  --bone:#EAE3D4;        /* parchment base */
  --bone-2:#E2DAC8;
  --paper:#F3EEE2;       /* card paper */
  --stone:#CFC7B4;
  --red:#E8544A;
  --red-deep:#C63F37;
  --red-dark:#7A1F1A;
  --banana:#F7D547;
  --oak:#B89065;
  --copper:#B27150;
  --muted:rgba(20,18,16,.56);
  --line:rgba(20,18,16,.16);
  --line-soft:rgba(20,18,16,.08);

  --f-display:'Canter',system-ui,sans-serif;
  --f-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --f-edito:'Atone',Georgia,serif;
  --f-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.19,1,.22,1);
  --pad:clamp(20px,6.7vw,120px);
  --toc-w:210px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--f-sans);
  background:var(--ink);
  color:var(--ink);
  overflow-x:hidden;
  cursor:default;
}
::selection{background:var(--red);color:var(--bone)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.no-scroll{overflow:hidden}

/* ---------- Film grain + progress ---------- */
#grain{
  position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}60%{transform:translate(-3%,2%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--red);z-index:9500;transition:width .1s linear}

/* ---------- Top nav ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px var(--pad);
  mix-blend-mode:difference;color:#fff;
  transition:padding .5s var(--ease);
}
/* Logo permanent — le logo officiel tel quel (charte RBS §03 : jamais recomposé, jamais recoloré,
   fonds validés bone/ink/rouge). Il vit HORS du header en mode difference pour garder ses couleurs. */
.brand{position:fixed;top:18px;left:var(--pad);z-index:460;display:block;line-height:0}
.brand-logo{display:block;height:68px;width:auto}
.topnav{justify-content:flex-end;gap:18px}
.topnav .nav-right{display:flex;align-items:center;gap:26px;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase}
.topnav .nav-right a{opacity:.85;transition:opacity .3s}
.topnav .nav-right a:hover{opacity:1}
.topnav .cta{border:1px solid rgba(255,255,255,.6);border-radius:100px;padding:8px 16px;letter-spacing:.12em}

/* =====================================================================
   INTRO — black masthead with construction lines
   ===================================================================== */
.intro{
  position:relative;min-height:100vh;min-height:100dvh;
  background:var(--ink);color:var(--bone);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.construction{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
.construction path,.construction line,.construction circle,.construction rect{
  stroke:rgba(234,227,212,.28);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;
}
.construction .draw{stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 3.2s var(--ease) forwards}
.construction .draw.d2{animation-delay:.25s}
.construction .draw.d3{animation-delay:.5s}
.construction .draw.d4{animation-delay:.75s}
@keyframes draw{to{stroke-dashoffset:0}}
.construction .spark{fill:var(--red);stroke:none;opacity:0;animation:spark 1s var(--ease) 1.6s forwards}
@keyframes spark{0%{opacity:0;transform:scale(0)}60%{opacity:1}100%{opacity:.9;transform:scale(1)}}

.intro-inner{position:relative;z-index:2;text-align:center;padding:0 24px;max-width:1100px}
.intro-kicker{
  font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--bone);
  opacity:0;animation:fadeUp 1s var(--ease) .3s forwards;
}
.intro-kicker b{color:var(--bone);font-weight:400}
.intro-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(58px,15vw,240px);line-height:.9;letter-spacing:-.02em;
  margin:.18em 0 .12em;
  opacity:0;animation:fadeUp 1.2s var(--ease) .5s forwards;
}
.intro-title i{font-family:var(--f-serif);font-style:italic;font-weight:500;color:inherit}
.intro-sub{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(18px,2.4vw,30px);
  color:rgba(234,227,212,.8);letter-spacing:.01em;
  opacity:0;animation:fadeUp 1.2s var(--ease) .7s forwards;
}
.intro-meta{
  margin-top:1.5em;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(234,227,212,.55);
  opacity:0;animation:fadeUp 1.2s var(--ease) .9s forwards;
}
.intro-scroll{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,227,212,.6);
  display:flex;align-items:center;gap:10px;
  opacity:0;animation:fadeUp 1s var(--ease) 1.4s forwards;
}
.intro-scroll::after{content:'';width:1px;height:34px;background:linear-gradient(var(--bone),transparent);animation:scrolldot 1.8s var(--ease) infinite}
@keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* =====================================================================
   HERO FRESCO — full bleed with editorial cover card
   ===================================================================== */
.hero{position:relative;z-index:2;min-height:100vh;min-height:100dvh;background:var(--ink);overflow:hidden;box-shadow:0 -40px 90px -30px rgba(0,0,0,.8)}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform;display:block}
.hero-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.28) 0%,rgba(20,18,16,0) 30%,rgba(20,18,16,.5) 100%)}
.hero-cover{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  width:min(358px,82vw);
  background:rgba(243,238,226,.6);
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid rgba(243,238,226,.35);
  padding:30px 30px 26px;color:var(--ink);
  box-shadow:0 30px 70px -38px rgba(0,0,0,.5);
}
.hero-cover .cov-kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--red-deep)}
.hero-cover .cov-title{
  font-family:var(--f-display);font-weight:700;font-size:clamp(34px,3.6vw,50px);line-height:.92;
  margin:12px 0 6px;letter-spacing:-.01em;
}
.hero-cover .cov-title i{font-family:var(--f-serif);font-style:italic;font-weight:500;color:inherit}
.hero-cover .cov-lede{font-family:var(--f-serif);font-size:19px;line-height:1.35;color:var(--ink-soft);margin-bottom:20px}
.cov-index{border-top:1px solid var(--line);margin-top:6px}
.cov-index a{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);
  font-size:13px;letter-spacing:.02em;transition:color .3s,padding .3s;
}
.cov-index a .rn{font-family:var(--f-serif);font-style:italic;font-size:13px;color:var(--muted)}
.cov-index a:hover{color:var(--red-deep);padding-left:8px}

/* Hero — full-bleed overlay (type directly on the painting) */
.hero-scrim{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
   linear-gradient(90deg, rgba(20,18,16,.62) 0%, rgba(20,18,16,.18) 30%, rgba(20,18,16,0) 52%),
   linear-gradient(0deg, rgba(20,18,16,.58) 0%, rgba(20,18,16,0) 34%);}
.hero-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(88px,12vh,124px) clamp(22px,4vw,60px) clamp(32px,6vh,60px);
  pointer-events:none;color:var(--bone)}
.hero-overlay > *{pointer-events:auto}
.hero-overlay .hero-kicker{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(234,227,212,.82)}
.hero-title{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,5.2vw,72px);line-height:.94;letter-spacing:-.01em;margin-top:12px;max-width:20ch;color:var(--bone);text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero-title i{font-family:var(--f-serif);font-style:italic;font-weight:500;color:inherit}
.hero-accroche{font-family:var(--f-serif);font-style:italic;font-size:clamp(16px,1.5vw,21px);line-height:1.35;color:rgba(234,227,212,.9);margin-top:18px;max-width:30ch;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.hero-index{display:flex;flex-direction:column;gap:1px;width:max-content}
.hero-index a{display:flex;align-items:baseline;gap:14px;font-family:var(--f-display);font-weight:700;
  font-size:clamp(15px,1.5vw,20px);text-transform:uppercase;letter-spacing:.02em;
  color:rgba(234,227,212,.86);text-shadow:0 1px 18px rgba(0,0,0,.55);transition:color .3s var(--ease),transform .3s var(--ease)}
.hero-index a .rn{font-family:var(--f-serif);font-style:italic;font-size:13px;width:26px;color:rgba(234,227,212,.62)}
.hero-index a:hover{color:#fff;transform:translateX(5px)}
.hero-index a:hover .rn{color:var(--red)}
@media(max-width:760px){.hero-title{font-size:clamp(30px,8vw,46px);max-width:100%}.hero-overlay{padding-top:100px}}

/* =====================================================================
   SIDEKICK-style transition — chapters stacking as layers
   ===================================================================== */
/* chapters stack: each chapter is a sticky sheet the next one slides over */
.book .chapter{position:sticky;top:0;background:var(--bone);box-shadow:none}
.book .chapter::before{display:none}
.book .vitruve{position:sticky;top:0}
/* keep the last (contact) sheet on top and let it scroll normally */
.book .colophon{position:relative;z-index:6}

/* =====================================================================
   BURN transition — (kept for reference, no longer used)
   ===================================================================== */
.burn{position:relative;height:0;z-index:5;pointer-events:none;overflow:visible}
.burn-svg{position:absolute;left:0;right:0;top:-2px;width:100%;height:150px;display:block;
  transform-origin:top center;transform:scaleY(var(--burn-scale,1));will-change:transform}
/* give the first chapter room under the charred edge */

.burn-char{fill:var(--ink)}
.burn-ember{opacity:var(--burn-glow,.95);mix-blend-mode:screen;animation:emberFlicker 2.4s ease-in-out infinite alternate}
@keyframes emberFlicker{from{opacity:calc(var(--burn-glow,.95) - .25)}to{opacity:var(--burn-glow,.95)}}
/* charred flecks drifting up */
.burn::after{content:'';position:absolute;left:0;right:0;top:-40px;height:120px;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,150,60,.85) 0 1.2px,transparent 1.6px),radial-gradient(circle,rgba(255,200,120,.7) 0 1px,transparent 1.4px);
  background-size:140px 90px,220px 130px;background-position:20px 10px,90px 40px;
  opacity:var(--burn-glow,.9);animation:emberDrift 5s linear infinite;mask-image:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
@keyframes emberDrift{from{background-position:20px 60px,90px 90px}to{background-position:40px -40px,60px -60px}}
@media(prefers-reduced-motion:reduce){.burn-ember,.burn::after{animation:none}}

/* =====================================================================
   BODY — parchment with fixed left table of contents
   ===================================================================== */
.book{position:relative;background:var(--bone);color:var(--ink)}
.book::before{content:'';position:absolute;inset:0;background:url('assets/texture-linen.svg');opacity:.5;pointer-events:none;mix-blend-mode:multiply}

.toc{
  position:fixed;left:var(--pad);top:50%;transform:translateY(-50%);z-index:120;
  width:var(--toc-w);pointer-events:auto;opacity:0;transition:opacity .6s var(--ease);
}
.toc.show{opacity:1}
.toc{padding:16px 22px 16px 18px;margin-left:-18px;border-radius:18px;background:radial-gradient(ellipse at 40% 50%,rgba(234,227,212,.86) 0%,rgba(234,227,212,.6) 55%,rgba(234,227,212,0) 78%)}
.toc.on-dark{background:radial-gradient(ellipse at 40% 50%,rgba(20,18,16,.72) 0%,rgba(20,18,16,.4) 55%,rgba(20,18,16,0) 78%)}
.toc-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.toc ul{list-style:none}
.toc li{margin:2px 0}
.toc a{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.01em;
  color:rgba(20,18,16,.35);transition:color .35s var(--ease),transform .35s var(--ease);
  text-transform:uppercase;
}
.toc a .rn{font-family:var(--f-serif);font-weight:500;font-style:italic;font-size:12px;width:26px;color:rgba(20,18,16,.3);text-transform:none}
.toc a:hover{color:var(--ink)}
.toc li.active a{color:var(--ink);transform:translateX(4px)}
.toc li.active a .rn{color:var(--red-deep)}

/* content column offset to clear the ToC on large screens */
.chapter{position:relative;padding:clamp(80px,12vh,170px) var(--pad)}
.chapter-inner{max-width:1180px;margin-left:auto;margin-right:auto}
@media(min-width:1100px){
  .chapter-inner{margin-left:calc(var(--toc-w) + 60px);margin-right:0;max-width:960px}
}

/* chapter header w/ illuminated drop cap */
.ch-marker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.ch-marker .rn{font-family:var(--f-serif);font-style:italic;font-size:22px;color:var(--red-deep)}
.ch-marker .rule{height:1px;flex:1;background:var(--line)}
.ch-marker .tag{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.ch-title{
  font-family:var(--f-serif);font-weight:500;font-size:clamp(42px,6.4vw,104px);line-height:.98;
  letter-spacing:-.01em;margin-bottom:.3em;
}
.ch-title .swash{font-style:italic;font-size:1.32em;line-height:0;color:var(--red-deep);padding-right:.02em}
.ch-title em{font-style:italic;color:var(--red-deep)}

.lede-serif{font-family:var(--f-serif);font-size:clamp(21px,2.4vw,30px);line-height:1.4;max-width:40ch;color:var(--ink-soft)}
.dropcap::first-letter{
  float:left;font-family:var(--f-serif);font-style:italic;font-weight:600;
  font-size:5.4em;line-height:.72;padding:.06em .1em 0 0;color:var(--red-deep);
}
.body-serif{font-family:var(--f-serif);font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:62ch}
.body-serif p{margin-bottom:1em}
.label-bold{font-family:var(--f-sans);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);border-radius:100px;padding:9px 16px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  transition:all .3s var(--ease);background:transparent;cursor:pointer;
}
.pill:hover{background:var(--ink);color:var(--bone);gap:12px}
.pill .arr{transition:transform .3s}
.pill:hover .arr{transform:translate(3px,-3px)}

/* drifting modern intrusions between chapters (Shopify-style floating objects) */
.drift{position:absolute;z-index:8;pointer-events:none;will-change:transform;filter:drop-shadow(0 34px 44px rgba(0,0,0,.28)) drop-shadow(0 6px 10px rgba(0,0,0,.18));opacity:.98}
.drift img{width:100%;display:block;animation:objIdle 7.5s ease-in-out infinite}
.drift--m img{animation-duration:9s}
.drift--xl{filter:drop-shadow(0 60px 90px rgba(0,0,0,.34)) drop-shadow(0 10px 18px rgba(0,0,0,.2))}
.drift--xl img{animation-duration:12s}
.drift:nth-child(odd) img{animation-delay:-3s}
@keyframes objIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(max-width:820px){.drift{display:none}.drift--s,.drift--m{display:block;width:clamp(56px,15vw,84px)!important}.drift--m{width:clamp(76px,20vw,110px)!important}}
@media(prefers-reduced-motion:reduce){.drift img{animation:none}}

/* floating "modern intrusion" objects */
.float-obj{position:absolute;pointer-events:none;z-index:3;will-change:transform;filter:drop-shadow(0 30px 50px rgba(0,0,0,.25))}
.float-obj img{width:100%}

/* Vision — le bras de marbre en fond plein écran (slot 200vh, scène épinglée 100vh) */
.chapter--vision{padding:0;min-height:175vh;min-height:175dvh}
.vision-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;
  padding:clamp(80px,12vh,150px) var(--pad) clamp(70px,10vh,120px)}
.vision-bg{position:absolute;inset:0;width:100%;height:100%;display:block;background:#CFB6A2;will-change:transform}
/* voile : lisibilité du texte à gauche, la main reste nue à droite */
.vision-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(234,227,212,.68) 0%,rgba(234,227,212,.6) 34%,rgba(234,227,212,.3) 58%,rgba(234,227,212,0) 74%),
             linear-gradient(180deg,rgba(234,227,212,.30) 0%,rgba(234,227,212,0) 20%)}
.vision-copy{position:relative;z-index:2;max-width:560px;will-change:transform}
.vision-copy .body-serif{max-width:52ch}
.vision-plate{position:absolute;right:var(--pad);bottom:22px;z-index:2;font-family:var(--f-serif);font-style:italic;font-size:14px;color:rgba(20,18,16,.55)}
@media(min-width:1100px){.vision-copy{margin-left:calc(var(--toc-w) + 60px)}}
@media(max-width:880px){
  .chapter--vision{min-height:170vh}
  .vision-stage{align-items:flex-end;padding-bottom:64px}
  .vision-veil{background:linear-gradient(180deg,rgba(234,227,212,.08) 0%,rgba(234,227,212,.02) 32%,rgba(234,227,212,.74) 44%,rgba(234,227,212,.94) 58%,rgba(234,227,212,.96) 100%)}
  .vision-copy .body-serif{font-size:17px}
  .vision-copy .dropcap::first-letter{font-size:4em}
  .vision-copy .ch-title{margin-bottom:.35em}
  .vision-copy{max-width:100%}
  .vision-plate{display:none}
}
@media(prefers-reduced-motion:reduce){.chapter--vision{min-height:auto}.vision-stage{position:relative;height:auto;min-height:100vh}}

/* Démarche — scène épinglée : la vidéo avance au scroll, les cinq mouvements se déroulent */
.chapter--demarche{padding:0;min-height:230vh;min-height:230dvh}
.book .chapter--demarche{background:transparent} /* la Vision épinglée transparaît dans la découpe du bord */
.demarche-stage::before{content:'';position:absolute;left:0;right:0;top:0;height:240px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(234,227,212,.62) 0%,rgba(234,227,212,.3) 45%,rgba(234,227,212,0) 100%)}
.book .chapter--demarche{padding-top:0}
.demarche-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:flex-start;
  padding:clamp(90px,14vh,150px) var(--pad) clamp(70px,10vh,120px)}
.demarche-bg{position:absolute;inset:0;width:100%;height:100%;display:block;background:#2A2320;will-change:transform}
/* le film reste visible : voile global très léger ; la lisibilité vient de halos locaux derrière le titre et l'étape active */
.demarche-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(234,227,212,.22) 0%,rgba(234,227,212,.12) 45%,rgba(234,227,212,0) 70%),
             linear-gradient(180deg,rgba(234,227,212,.18) 0%,rgba(234,227,212,0) 18%,rgba(234,227,212,0) 84%,rgba(234,227,212,.22) 100%)}
.demarche-copy{position:relative;z-index:2;max-width:640px;will-change:transform}
.demarche-head{position:relative;z-index:0;padding:18px 40px 22px 24px;margin:-18px -40px 6px -24px}
.demarche-head::before{content:"";position:absolute;inset:-40px -90px -40px -70px;z-index:-1;pointer-events:none;background:rgba(234,227,212,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  -webkit-mask-image:radial-gradient(ellipse at 42% 50%,#000 30%,rgba(0,0,0,.6) 55%,transparent 80%);mask-image:radial-gradient(ellipse at 42% 50%,#000 30%,rgba(0,0,0,.6) 55%,transparent 80%)}
.demarche-copy .lede-serif{margin-bottom:18px;font-size:clamp(18px,1.6vw,22px)}
.demarche-copy .ch-title{font-size:clamp(38px,5vw,76px);margin-bottom:.25em}
.demarche-copy .folio-more{margin-top:18px}
@media(min-width:1100px){.demarche-copy{margin-left:calc(var(--toc-w) + 60px)}}
/* les cinq mouvements : liste compacte, révélée pas à pas au scroll (JS : .is-past / .is-on / .is-next) */
/* les cinq mouvements : l'étape active est TRÈS grande, sur son propre halo ; les autres restent compactes */
.phases-scroll .phase{grid-template-columns:72px 1fr;gap:18px;padding:10px 24px 10px 12px;margin:0 -24px 0 -12px;border-top:1px solid rgba(20,18,16,.12);opacity:.22;will-change:opacity,transform;border-radius:18px;
  transition:padding .45s var(--ease),background .45s var(--ease)}
.phases-scroll .phase:last-child{border-bottom:1px solid rgba(20,18,16,.12)}
.phases-scroll .phase-n{font-size:clamp(26px,2.6vw,38px);line-height:1;color:var(--red-deep);transform-origin:left center;will-change:transform;transition:font-size .45s var(--ease)}
.phases-scroll .phase-b h4{font-size:clamp(14px,1.3vw,17px);margin-bottom:2px;transition:font-size .45s var(--ease),color .3s}
.phases-scroll .phase-b p{font-size:16px;line-height:1.4;max-width:52ch;max-height:0;opacity:0;overflow:hidden;will-change:max-height,opacity;transition:font-size .45s var(--ease)}
.phases-scroll .phase-b .deliv{margin-top:4px;font-size:11px;transition:font-size .45s var(--ease)}
.phases-scroll .phase{position:relative;z-index:0}
.phases-scroll .phase::before{content:"";position:absolute;inset:-26px -80px -26px -60px;z-index:-1;pointer-events:none;background:rgba(234,227,212,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease);
  -webkit-mask-image:radial-gradient(ellipse at 34% 50%,#000 30%,rgba(0,0,0,.6) 55%,transparent 80%);mask-image:radial-gradient(ellipse at 34% 50%,#000 30%,rgba(0,0,0,.6) 55%,transparent 80%)}
.phases-scroll .phase.is-on{padding:22px 28px 24px 12px;border-top-color:transparent}
.phases-scroll .phase.is-on::before{opacity:1}
.phases-scroll .phase.is-on .phase-n{font-size:clamp(56px,6.2vw,96px)}
.phases-scroll .phase.is-on .phase-b h4{font-size:clamp(30px,3.6vw,54px);color:var(--ink);margin-bottom:8px;line-height:.95}
.phases-scroll .phase.is-on .phase-b p{font-size:clamp(18px,1.55vw,22px);line-height:1.4;max-width:46ch}
.phases-scroll .phase.is-on .phase-b .deliv{font-size:13px;margin-top:8px}
.phases-scroll .phase.is-past .phase-b h4{color:rgba(20,18,16,.7)}
.phases-scroll .phase.is-past{border-top-color:transparent}
.demarche-progress{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;height:1px;background:rgba(20,18,16,.16);z-index:2}
.demarche-progress i{position:absolute;left:0;top:-1px;height:3px;width:0;background:var(--red)}
@media(max-width:880px){
  .chapter--demarche{min-height:220vh}
  .demarche-stage{align-items:flex-end;padding-bottom:56px}
  .demarche-veil{background:linear-gradient(180deg,rgba(234,227,212,.1) 0%,rgba(234,227,212,.04) 30%,rgba(234,227,212,.4) 48%,rgba(234,227,212,.55) 100%)}
  .demarche-head{padding:12px 16px;margin:0 -8px 4px;background:radial-gradient(ellipse at 40% 50%,rgba(234,227,212,.92) 0%,rgba(234,227,212,.8) 60%,rgba(234,227,212,0) 82%)}
  .phases-scroll .phase.is-on .phase-n{font-size:40px}
  .phases-scroll .phase.is-on .phase-b h4{font-size:24px}
  .phases-scroll .phase.is-on .phase-b p{font-size:15px}
  .demarche-copy{max-width:100%}
  .demarche-copy .ch-title{font-size:clamp(30px,8vw,40px)}
  .demarche-copy .lede-serif{font-size:16px}
  .phases-scroll .phase{grid-template-columns:44px 1fr;gap:12px;padding:8px 0}
  .phases-scroll .phase-b p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.chapter--demarche{min-height:auto}.demarche-stage{position:relative;height:auto;min-height:100vh}.phases-scroll .phase{opacity:1!important;transform:none!important}.phases-scroll .phase-b p{max-height:none!important;opacity:1!important}}

/* Studio — scène épinglée sombre : le double portrait des fondateurs s'anime au scroll */
.chapter--studio{padding:0;min-height:200vh;min-height:200dvh}
.book .chapter--studio{background:#141210;color:var(--bone)}
.studio-stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:center;
  padding:clamp(70px,10vh,120px) var(--pad) clamp(56px,8vh,96px)}
.studio-bg{position:absolute;inset:0;width:100%;height:100%;display:block;background:#1A1714;will-change:transform}
.studio-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,18,16,.9) 0%,rgba(20,18,16,.78) 34%,rgba(20,18,16,.32) 56%,rgba(20,18,16,0) 74%),
             linear-gradient(180deg,rgba(20,18,16,.4) 0%,rgba(20,18,16,0) 22%,rgba(20,18,16,0) 78%,rgba(20,18,16,.45) 100%)}
.studio-copy{position:relative;z-index:2;max-width:600px;will-change:transform;color:var(--bone)}
.studio-copy .ch-marker .rn{color:var(--red)}
.studio-copy .ch-marker .rule{background:rgba(234,227,212,.22)}
.studio-copy .ch-marker .tag{color:rgba(234,227,212,.6)}
.studio-copy .ch-title{color:var(--bone)}
.studio-copy .ch-title .swash{color:var(--red)}
.studio-copy .body-serif{color:rgba(234,227,212,.86);max-width:54ch}
.studio-copy .label-bold{color:var(--bone);margin-top:26px}
.studio-copy .pill{border-color:rgba(234,227,212,.45);color:var(--bone)}
.studio-copy .pill:hover{background:var(--bone);color:var(--ink)}
.studio-plate{position:absolute;right:var(--pad);bottom:22px;z-index:2;font-family:var(--f-serif);font-style:italic;font-size:14px;color:rgba(234,227,212,.6)}
@media(min-width:1100px){.studio-copy{margin-left:calc(var(--toc-w) + 60px)}}
/* sommaire lisible sur la feuille sombre */
.toc.on-dark .toc-label{color:rgba(234,227,212,.5)}
.toc.on-dark a{color:rgba(234,227,212,.42)}
.toc.on-dark a .rn{color:rgba(234,227,212,.4)}
.toc.on-dark li.active a{color:var(--bone)}
.toc.on-dark li.active a .rn{color:var(--red)}
@media(max-width:880px){
  .chapter--studio{min-height:180vh}
  .studio-stage{align-items:flex-end;padding-bottom:56px}
  .studio-veil{background:linear-gradient(180deg,rgba(20,18,16,.15) 0%,rgba(20,18,16,.05) 30%,rgba(20,18,16,.82) 48%,rgba(20,18,16,.94) 64%,rgba(20,18,16,.94) 100%)}
  .studio-copy{max-width:100%}
  .studio-copy .body-serif{font-size:16px}
  .studio-plate{display:none}
}
@media(prefers-reduced-motion:reduce){.chapter--studio{min-height:auto}.studio-stage{position:relative;height:auto;min-height:100vh}}

/* Chapitre déchiré : le papier suivant monte avec un bord arraché + débris de pixels (canvas)
   Deux modes : data-paper="#hex" (papier plein sous le bord, bande posée AU-DESSUS du chapitre)
                data-paper="none" + data-clip=".sel" (le média du chapitre est découpé par le bord ; bande DANS le chapitre) */
.book .chapter--torn{overflow:visible;box-shadow:none}
.book .chapter--torn::before{display:none}
.tear-top{position:absolute;left:0;right:0;top:-140px;width:100%;height:140px;display:block;pointer-events:none;z-index:2}
.tear-top--in{top:0;z-index:1}
.book .chapter--torn{padding-top:48px}
.hero{background:transparent} /* le panneau du logo transparaît dans la découpe */
.book .chapter--torn.chapter--demarche{padding-top:0}
.colophon.has-tear,.vitruve.has-tear{overflow:visible}
.tear-top--hero{height:96px}
.reel-pin .tear-top--in{z-index:1}
@media(max-width:820px){.tear-top{top:-110px;height:110px}.tear-top--in{top:0}}

/* stat row */
.stats{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:44px;border-top:1px solid var(--line);padding-top:26px}
.stat b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1}
.stat span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* =====================================================================
   Démarche — phases
   ===================================================================== */
.phase{display:grid;grid-template-columns:100px 1fr;gap:clamp(20px,4vw,52px);padding:38px 0;border-top:1px solid var(--line);align-items:start}
.phase:last-child{border-bottom:1px solid var(--line)}
.phase-n{font-family:var(--f-serif);font-style:italic;font-size:clamp(40px,5vw,72px);color:var(--red-deep);line-height:.9}
.phase-b h4{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px}
.phase-b p{font-family:var(--f-serif);font-size:19px;line-height:1.5;color:var(--ink-soft);max-width:60ch}
.phase-b .deliv{margin-top:12px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
@media(max-width:640px){.phase{grid-template-columns:1fr;gap:8px}}

/* =====================================================================
   Portfolio — editorial grid
   ===================================================================== */
.folio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
/* ---- Portfolio pleine largeur ---- */
.chapter--folio{padding-left:0;padding-right:0}
/* le mur est long : il défile normalement (pas épinglé) par-dessus la Démarche épinglée */
.book .chapter--folio{position:relative;top:auto}
.folio-top{padding:0 var(--pad);max-width:1180px;margin:0 auto}
@media(min-width:1100px){.folio-top{margin-left:calc(var(--toc-w) + 60px);margin-right:0;max-width:none;padding-left:0;padding-right:var(--pad)}}
.folio-lede{font-family:var(--f-serif);font-style:italic;font-size:19px;color:var(--muted);max-width:36ch}
/* bande « à la une » : défilement continu, pause au survol */
.une{position:relative;margin:10px 0 26px;overflow:hidden;padding:0}
.une-label{position:absolute;left:var(--pad);top:14px;z-index:3;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--bone);background:var(--red);padding:6px 10px}
.une-track{display:flex;gap:14px;width:max-content;will-change:transform;animation:uneScroll 70s linear infinite}
.une:hover .une-track,.une:focus-within .une-track{animation-play-state:paused}
@keyframes uneScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.une-item{position:relative;display:block;height:clamp(300px,54vh,560px);flex:none;overflow:hidden;background:var(--bone-2)}
.une-item img{height:100%;width:auto;display:block;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.96)}
.une-item:hover img{transform:scale(1.04);filter:saturate(1.05)}
.une-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;color:#fff;font-family:var(--f-serif);font-style:italic;font-size:15px;
  background:linear-gradient(180deg,rgba(20,18,16,0),rgba(20,18,16,.62));display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.une-cap b{font-family:var(--f-display);font-weight:700;font-style:normal;font-size:16px;text-transform:uppercase;letter-spacing:.02em}
/* mur d'images : 3 colonnes pleine largeur, gouttières fines, formats variés mais réguliers */
.folio-full{padding:0 clamp(12px,1.4vw,22px)}
.folio-grid--wall{columns:3;column-gap:clamp(12px,1.4vw,22px)}
.folio-grid--wall .tile{margin:0 0 clamp(12px,1.4vw,22px);border:0;background:transparent}
.folio-grid--wall .tile .ph{aspect-ratio:4/5;background:var(--bone-2)}
.folio-grid--wall .tile:nth-child(6n+2) .ph{aspect-ratio:1/1}
.folio-grid--wall .tile:nth-child(6n+3) .ph{aspect-ratio:3/4}
.folio-grid--wall .tile:nth-child(6n+4) .ph{aspect-ratio:5/4}
.folio-grid--wall .tile:nth-child(6n+5) .ph{aspect-ratio:1/1}
.folio-grid--wall .tile:nth-child(6n) .ph{aspect-ratio:4/5}
.folio-grid--wall .tile-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 2px 4px}
.folio-grid--wall .tile-cap .t{font-family:var(--f-display);font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.folio-grid--wall .tile-cap .m{font-family:var(--f-serif);font-style:italic;font-size:14px;color:var(--muted);white-space:nowrap}
.folio-grid--wall .tile-meta{display:none}
.folio-grid--wall .tile-idx{color:#fff;mix-blend-mode:normal;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media(max-width:1100px){.folio-grid--wall{columns:2}}
@media(max-width:640px){.folio-grid--wall{columns:1}.une-item{height:44vh}}
@media(prefers-reduced-motion:reduce){.une{overflow-x:auto}.une-track{animation:none}}
.folio-grid{columns:3;column-gap:clamp(14px,1.6vw,24px)}
@media(max-width:900px){.folio-grid{columns:2}}
@media(max-width:560px){.folio-grid{columns:1}}
.tile{position:relative;display:block;width:100%;overflow:hidden;background:var(--bone-2);border:1px solid var(--line);cursor:pointer;margin:0 0 clamp(14px,1.6vw,24px);break-inside:avoid;-webkit-column-break-inside:avoid}
/* boîtes à ratio fixe : la hauteur de la grille ne dépend plus du chargement des images (aucun décalage de mise en page) */
.tile .ph{overflow:hidden;line-height:0;aspect-ratio:4/3}
.tile:nth-child(3n+2) .ph{aspect-ratio:1/1}
.tile:nth-child(3n) .ph{aspect-ratio:3/4}
.tile:nth-child(5n+1) .ph{aspect-ratio:5/4}
.tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),filter .6s;filter:saturate(.94)}
.tile:hover img{transform:scale(1.05);filter:saturate(1.05)}
.tile-meta{position:absolute;left:0;right:0;bottom:0;padding:20px;color:#fff;
  background:linear-gradient(0deg,rgba(20,18,16,.82),rgba(20,18,16,.1) 70%,transparent);
  transform:translateY(6px);opacity:0;transition:all .45s var(--ease)}
.tile:hover .tile-meta{transform:translateY(0);opacity:1}
.tile-meta .t{font-family:var(--f-display);font-weight:700;font-size:19px;text-transform:uppercase;line-height:1.05}
.tile-meta .m{font-family:var(--f-serif);font-style:italic;font-size:14px;opacity:.92;margin-top:3px}
.tile-idx{position:absolute;top:14px;left:16px;z-index:2;font-family:var(--f-serif);font-style:italic;font-size:14px;color:#fff;mix-blend-mode:difference}
.folio-more{display:flex;justify-content:center;margin-top:44px}

/* =====================================================================
   Expertise strip
   ===================================================================== */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.exp-grid{grid-template-columns:1fr}}
.exp-cell{background:var(--bone);padding:30px 26px;transition:background .4s,color .4s;cursor:pointer;min-height:180px;display:flex;flex-direction:column;justify-content:space-between}
.exp-cell:hover{background:var(--ink);color:var(--bone)}
.exp-cell .rn{font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--red-deep)}
.exp-cell:hover .rn{color:var(--banana)}
.exp-cell h4{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,30px);text-transform:uppercase;line-height:1}
.exp-cell p{font-family:var(--f-serif);font-size:15px;color:var(--muted)}
.exp-cell:hover p{color:rgba(234,227,212,.75)}

/* =====================================================================
   Feature chapters (Shopify-Editions style: swash title, kicker, lede, visual)
   ===================================================================== */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding:clamp(56px,9vh,110px) 0;border-top:1px solid var(--line)}
.feat:first-of-type{margin-top:48px}
.feat--flip .feat-copy{order:2}
.feat--flip .feat-fig{order:1}
.feat-title{font-family:var(--f-serif);font-weight:500;font-size:clamp(34px,4.6vw,66px);line-height:1.02;letter-spacing:-.01em;margin-bottom:22px}
.feat-title .swash{font-style:italic;font-size:1.32em;line-height:0;color:var(--red-deep);padding-right:.02em}
.feat-kicker{font-family:var(--f-sans);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.feat-lede{font-family:var(--f-serif);font-size:clamp(19px,1.9vw,25px);line-height:1.4;color:var(--ink-soft);max-width:44ch;margin-bottom:22px}
.feat .btn-inline{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-bottom:6px;border-bottom:1px solid var(--ink);transition:color .3s var(--ease),border-color .3s var(--ease)}
.feat .btn-inline .plus{display:inline-block;transition:transform .3s var(--ease)}
.feat .btn-inline:hover{color:var(--red-deep);border-color:var(--red-deep)}
.feat .btn-inline:hover .plus{transform:rotate(45deg)}
.feat-fig{position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:0 44px 90px -44px rgba(0,0,0,.45);background:var(--bone-2)}
.feat-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;will-change:transform;filter:saturate(.96)}
.feat-fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-family:var(--f-serif);font-style:italic;font-size:14px;color:#fff;background:linear-gradient(0deg,rgba(20,18,16,.72),transparent)}
@media(max-width:820px){.feat{grid-template-columns:1fr;gap:26px}.feat--flip .feat-copy,.feat--flip .feat-fig{order:initial}}

/* =====================================================================
   Marquee
   ===================================================================== */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;background:var(--bone)}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marq 34s linear infinite}
.marquee-item{font-family:var(--f-display);font-weight:700;font-size:clamp(26px,3vw,44px);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);display:flex;align-items:center;gap:44px}
.marquee-item::after{content:'';width:12px;height:12px;border-radius:50%;background:var(--red)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Founder easter-egg portrait */
.founder{margin-top:40px;width:168px;position:relative;transition:transform .5s var(--ease)}
.founder img{width:100%;display:block;border:7px solid #b89a5e;border-image:linear-gradient(135deg,#d8b978,#8c6a3f) 1;box-shadow:0 24px 55px -20px rgba(0,0,0,.6);filter:saturate(.96)}
.founder figcaption{font-family:var(--f-serif);font-style:italic;font-size:12px;color:var(--muted);margin-top:9px;max-width:320px}
.founder:hover{transform:rotate(-1.2deg) scale(1.03)}
.founder--duo{width:min(340px,86%)}

/* =====================================================================
   Vitruve — hors-série (dark insert, product teaser)
   ===================================================================== */
.vitruve{position:relative;background:var(--ink);color:var(--bone);padding:clamp(72px,12vh,160px) var(--pad);overflow:hidden}
.vitruve::before{content:'';position:absolute;inset:0;background:radial-gradient(110% 80% at 82% 18%,rgba(247,213,71,.07),transparent 60%);pointer-events:none}
/* la révélation : vidéo pleine largeur au-dessus de la grille, lecture à l'entrée, arrêt sur le logo */
.v-reveal{position:relative;margin:0 auto clamp(40px,7vh,90px);max-width:1200px;background:#2A2622;border-radius:16px;overflow:hidden;border:1px solid rgba(226,217,200,.16)}
.v-reveal-video{width:100%;aspect-ratio:1920/1088;height:auto;display:block;background:#2A2622}
.v-reveal-replay{position:absolute;right:14px;bottom:12px;background:rgba(42,38,34,.7);color:#F3EFE6;border:1px solid rgba(243,239,230,.35);border-radius:999px;padding:7px 12px;font-family:'Archivo',var(--f-sans);font-weight:600;font-size:12px;cursor:pointer;opacity:0;transition:opacity .3s}
.v-reveal.is-done .v-reveal-replay{opacity:1}
.v-reveal-replay:hover{background:rgba(42,38,34,.9)}
@media(max-width:880px){.v-reveal{border-radius:10px;margin-bottom:34px}}
.vitruve-grid{position:relative;display:grid;grid-template-columns:.82fr 1fr;gap:clamp(30px,5vw,74px);align-items:center;max-width:1200px;margin:0 auto}
.vitruve-fig{position:relative;overflow:hidden;border:1px solid rgba(234,227,212,.18);box-shadow:0 50px 100px -40px rgba(0,0,0,.7)}
.vitruve-fig img{width:100%;display:block;will-change:transform}
.vitruve-fig .plate{position:absolute;top:14px;left:16px;font-family:var(--f-serif);font-style:italic;font-size:13px;color:rgba(20,18,16,.5)}
.vitruve-eyebrow{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--banana);display:flex;align-items:center;gap:12px}
.vitruve-eyebrow::before{content:'';width:22px;height:1px;background:var(--banana)}
.vitruve h3{font-family:var(--f-display);font-weight:700;font-size:clamp(58px,9vw,124px);line-height:.9;letter-spacing:-.01em;margin:16px 0 8px}
.vitruve .v-lede{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.4vw,31px);color:rgba(234,227,212,.92);margin-bottom:18px}
.vitruve .v-body{font-family:var(--f-serif);font-size:19px;line-height:1.55;color:rgba(234,227,212,.72);max-width:54ch;margin-bottom:24px}
.vitruve .v-feats{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid rgba(234,227,212,.16)}
.vitruve .v-feats li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(234,227,212,.12)}
.vitruve .v-feats b{font-family:var(--f-sans);font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--banana);min-width:168px}
.vitruve .v-feats span{font-family:var(--f-serif);font-size:17px;color:rgba(234,227,212,.72)}
.vitruve .v-cta{display:inline-flex;align-items:center;gap:10px;background:var(--banana);color:var(--ink);border-radius:100px;padding:15px 26px;font-family:var(--f-sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:transform .3s var(--ease),gap .3s var(--ease),background .3s}
.vitruve .v-cta:hover{transform:translateY(-2px);gap:15px;background:#ffe37a}
.vitruve .v-note{margin-top:18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(234,227,212,.5)}
@media(max-width:880px){.vitruve-grid{grid-template-columns:1fr;gap:34px}.vitruve-fig{max-width:400px;margin:0 auto}}

/* Vitruve — aligned to ITS OWN design system (ocre + violet-IA, Clash/Archivo/Lora, flat) */
/* Tokens = Annexe A de la charte graphique Vitruve v1.0 (hex exacts). Cyan et violet clair
   n'existent que dans le mark et sur le site vitrine — jamais dans l'application. */
.vitruve{--v-ocre:#B8862B;--v-ocre-dark:#9c6f21;--v-ink:#2A2622;--v-pierre:#5B7A73;--v-neutre:#F3EFE6;--v-border:#e2d9c8;--v-ia:#7C5CFC;--v-cyan:#22D3EE;--v-violet:#FF49F3;background:var(--v-ink)}
.vitruve::before{background:none}
.vitruve .vitruve-eyebrow{font-family:'Archivo',var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--v-ocre)}
.vitruve .vitruve-eyebrow::before{background:var(--v-ocre)}
.vitruve a:focus-visible,.vitruve button:focus-visible{outline:2px solid var(--v-ocre);outline-offset:2px}

/* ---- Logo Vitruve.app — charte v1.0, déclinaison "Vitrine sur fond sombre" ----
   Site vitrine/marketing = SEULE la déclinaison suffixe violet clair est autorisée.
   Ne jamais utiliser le suffixe ocre ici (réservé à l'application). Zone de
   protection = 1 hauteur de mark sur les 4 côtés ; aucune déformation du mark. */
.v-mark-bg{fill:var(--v-cyan)}
.v-mark-ring{fill:none;stroke:var(--v-ink,#2A2622);stroke-width:4}
.v-mark-dot{fill:var(--v-violet)}
.v-lockup{display:flex;align-items:center;gap:16px;margin:44px 0 48px;padding:0}
.v-mark{width:54px;height:54px;flex:none;display:block}
.v-word{font-family:'Clash Display',var(--f-display);font-weight:600;font-size:clamp(32px,4vw,46px);letter-spacing:.02em;line-height:1;color:var(--v-neutre);text-transform:uppercase}
.v-word em{font-style:normal;text-transform:none;color:var(--v-violet)}
/* figure = aperçu de l'application, composé avec les tokens de la charte (gabarit p.17 : barre latérale
   encre, contenu sur papier #f5f2ec, cartes blanches, filet #e2d9c8, ombre carte 0 1px 3px, badges teintés) */
.vitruve-fig--app{background:#34302B;border:1px solid rgba(226,217,200,.22);border-radius:16px;box-shadow:none;padding:0;overflow:hidden}
.vitruve-fig--app .plate{color:rgba(243,239,230,.6);top:auto;bottom:12px;left:16px}
.vapp{display:grid;grid-template-columns:132px 1fr;background:#f5f2ec;color:var(--v-ink);font-family:'Archivo',var(--f-sans);border-radius:12px;overflow:hidden;margin:34px 34px 44px;min-height:280px;font-size:11px;line-height:1.3;text-align:left}
.vapp-side{background:var(--v-ink);color:rgba(255,255,255,.65);padding:14px 12px;display:flex;flex-direction:column;gap:14px}
.vapp-lockup{display:flex;align-items:center;gap:6px;color:#fff;font-family:'Clash Display',var(--f-display);font-weight:600;font-size:12px;letter-spacing:.02em}
.vapp-lockup .v-mark{width:16px;height:16px}
.vapp-lockup em{font-style:normal;color:var(--v-ocre)} /* dans l'application, le suffixe est ocre (charte) */
.vapp-nav{display:flex;flex-direction:column;gap:3px}
.vapp-nav span{font-weight:700;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:999px;color:rgba(255,255,255,.65);white-space:nowrap}
.vapp-nav span.on{background:rgba(184,134,43,.18);color:var(--v-ocre)}
.vapp-credits{margin-top:auto;font-size:8.5px;font-weight:600;color:#fff;background:rgba(124,92,252,.28);border:1px solid rgba(124,92,252,.5);border-radius:999px;padding:4px 8px;align-self:flex-start}
.vapp-main{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px}
.vapp-title{font-family:'Clash Display',var(--f-display);font-weight:600;font-size:14px;color:var(--v-ink)}
.vapp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vapp-card{background:#fff;border:1px solid var(--v-border);border-radius:10px;padding:10px 11px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.vapp-eyebrow{font-weight:700;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--v-pierre);margin-bottom:6px}
.vapp-num{font-family:'Clash Display',var(--f-display);font-weight:600;font-size:17px;color:var(--v-ink);white-space:nowrap}
.vapp-wide{display:flex;flex-direction:column;gap:6px}
.vapp-list{display:flex;flex-direction:column;gap:0}
.vapp-list div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid var(--v-border);font-size:9.5px;color:var(--v-ink)}
.vapp-list div:first-child{border-top:0}
.vapp-list i{font-family:'Lora',var(--f-serif);font-style:italic;color:var(--v-pierre)}
.vapp-chain{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.vapp-chain span{font-weight:600;font-size:7.5px;letter-spacing:.02em;border-radius:999px;padding:3px 7px;background:#fff;border:1px solid var(--v-border);color:var(--v-pierre)}
.vapp-chain span.done{background:var(--v-ink);border-color:var(--v-ink);color:#fff}
.vapp-chain span.now{background:rgba(184,134,43,.14);border-color:rgba(184,134,43,.4);color:var(--v-ocre)}
.vapp-chain i{font-style:normal;color:var(--v-pierre);font-size:8px}
.vapp-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vapp-row b{font-family:'Clash Display',var(--f-display);font-weight:600;font-size:11px;color:var(--v-ink)}
.vapp-meta{font-family:'Lora',var(--f-serif);font-style:italic;font-size:9px;color:var(--v-pierre)}
.vapp-badge{font-weight:600;font-size:8px;letter-spacing:.02em;border-radius:999px;padding:3px 7px}
.vapp-badge.ok{background:rgba(63,122,82,.12);color:#3F7A52}
.vapp-badge.wait{background:rgba(184,134,43,.14);color:var(--v-ocre)}
.vapp-badge.ia{background:rgba(124,92,252,.12);color:var(--v-ia)}
.vapp-btn{margin-left:auto;background:var(--v-ia);color:#fff;font-weight:600;font-size:8.5px;border-radius:6px;padding:5px 8px;white-space:nowrap}
@media(max-width:880px){.vapp{margin:22px 22px 40px;grid-template-columns:1fr;min-height:0}.vapp-side{display:none}.vapp-kpis{grid-template-columns:1fr 1fr}.vapp-kpis .vapp-card:nth-child(3){display:none}}

.vitruve .v-lede{font-family:'Lora',var(--f-serif);font-style:italic;font-size:clamp(20px,2.1vw,27px);color:rgba(243,239,230,.92)}
.vitruve .v-body{font-family:'Lora',var(--f-serif);color:rgba(243,239,230,.78);max-width:62ch}
.vitruve .v-feats{border-top-color:rgba(243,239,230,.16)}
.vitruve .v-feats li{border-bottom-color:rgba(243,239,230,.12)}
.vitruve .v-feats b{font-family:'Archivo',var(--f-sans);font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--v-ocre)}
.vitruve .v-feats li.ia b{color:var(--v-ia)}
.vitruve .v-feats span{font-family:'Lora',var(--f-serif);color:rgba(243,239,230,.78)}
/* bouton primaire de la charte : aplat ocre, rayon 10, Archivo 600 14 px, casse de phrase, libellé encre (AA), sans ombre */
.vitruve .v-cta{font-family:'Archivo',var(--f-sans);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;
  background:var(--v-ocre);color:var(--v-ink);border-radius:10px;padding:12px 20px;box-shadow:none}
.vitruve .v-cta:hover{background:var(--v-ocre);opacity:.9;transform:none;gap:12px}
.vitruve .v-note{font-family:'Lora',var(--f-serif);font-style:italic;font-size:13px;letter-spacing:0;text-transform:none;color:rgba(243,239,230,.6)}
.vitruve .vitruve-fig .plate{font-family:'Lora',var(--f-serif);color:rgba(243,239,230,.6)}

/* =====================================================================
   Contact / footer
   ===================================================================== */
.colophon{position:relative;background:var(--ink);color:var(--bone);padding:clamp(70px,12vh,150px) var(--pad) 50px;overflow:hidden}
.colophon .big{
  font-family:var(--f-serif);font-weight:500;font-size:clamp(40px,8vw,140px);line-height:.96;letter-spacing:-.01em;
}
.colophon .big em{font-style:italic;color:var(--red)}
.colophon .big a{transition:color .3s}
.colophon .big a:hover{color:var(--red)}
/* ---- Le brief : phrase à trous + quelques champs ---- */
.brief{margin-top:64px;max-width:1120px;padding-top:44px;border-top:1px solid rgba(234,227,212,.18)}
.brief-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;margin-bottom:26px}
.brief-kicker{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.brief-lede{font-family:var(--f-serif);font-style:italic;font-size:18px;color:rgba(234,227,212,.7)}
.brief-sentence{font-family:var(--f-serif);font-size:clamp(24px,2.7vw,40px);line-height:1.65;color:rgba(234,227,212,.92);letter-spacing:.005em}
.brief-sentence > span{white-space:nowrap}
.bi{font:inherit;color:var(--bone);background:transparent;border:0;border-bottom:1.5px solid rgba(234,227,212,.42);border-radius:0;padding:0 .12em;margin:0 .05em;min-width:4ch;width:9ch;outline:0;transition:border-color .3s;line-height:1.2}
.bi::placeholder{color:rgba(234,227,212,.4);font-style:italic}
.bi:focus{border-bottom-color:var(--red)}
.bi:not(:placeholder-shown){border-bottom-color:rgba(234,227,212,.75)}
.bi--num{width:4ch;text-align:center}
.bsel{position:relative;display:inline-block;white-space:nowrap}
.bsel select{appearance:none;-webkit-appearance:none;font:inherit;color:var(--bone);background:transparent;border:0;border-bottom:1.5px solid rgba(234,227,212,.42);border-radius:0;padding:0 1.15em 0 .12em;cursor:pointer;outline:0;transition:border-color .3s;line-height:1.2;max-width:70vw}
.bsel select:focus{border-bottom-color:var(--red)}
.bsel select:invalid{color:rgba(234,227,212,.45);font-style:italic}
.bsel select option{color:#141210;background:#F3EEE2;font-style:normal;font-size:16px}
.bsel::after{content:'';position:absolute;right:.32em;top:50%;width:.36em;height:.36em;border-right:1.5px solid rgba(234,227,212,.7);border-bottom:1.5px solid rgba(234,227,212,.7);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.brief-label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,227,212,.55);margin-bottom:8px}
.brief-label i{font-style:italic;text-transform:none;letter-spacing:.02em}
.brief-msg{display:block;margin-top:34px}
.brief-msg textarea{width:100%;background:rgba(234,227,212,.04);border:1px solid rgba(234,227,212,.22);color:var(--bone);font-family:var(--f-serif);font-size:19px;line-height:1.5;padding:16px 18px;resize:vertical;border-radius:4px;outline:0;transition:border-color .3s,background .3s;min-height:120px}
.brief-msg textarea::placeholder{color:rgba(234,227,212,.38);font-style:italic}
.brief-msg textarea:focus{border-color:var(--red);background:rgba(234,227,212,.06)}
.brief-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:26px}
.brief-field input{width:100%;font-family:var(--f-serif);font-size:19px;color:var(--bone);background:transparent;border:0;border-bottom:1px solid rgba(234,227,212,.3);border-radius:0;padding:6px 0;outline:0;transition:border-color .3s}
.brief-field input::placeholder{color:rgba(234,227,212,.35);font-style:italic}
.brief-field input:focus{border-bottom-color:var(--red)}
.brief-consent{display:flex;gap:12px;align-items:flex-start;margin-top:26px;font-family:var(--f-serif);font-size:15px;color:rgba(234,227,212,.65);max-width:70ch;cursor:pointer}
.brief-consent input{margin-top:5px;accent-color:var(--red);width:15px;height:15px;flex:none}
.brief-consent a{text-decoration:underline;text-underline-offset:3px}
.brief-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.brief-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:30px}
.pill--light{border-color:rgba(234,227,212,.55);color:var(--bone);padding:12px 22px;font-size:13px}
.pill--light:hover{background:var(--bone);color:var(--ink)}
.brief-alt{font-family:var(--f-serif);font-style:italic;font-size:16px;color:rgba(234,227,212,.6)}
.brief-alt a{color:rgba(234,227,212,.9);text-decoration:underline;text-underline-offset:3px}
.brief-status{margin-top:18px;font-family:var(--f-serif);font-size:17px;color:rgba(234,227,212,.8);min-height:1.4em}
.brief-status.is-ok{color:#9BD3A5}
.brief-status.is-err{color:var(--red)}
.brief input:invalid:not(:placeholder-shown){border-bottom-color:rgba(232,84,74,.7)}
@media(max-width:820px){
  .brief-sentence{font-size:20px;line-height:1.8}
  .bi{width:8ch}
  .brief-row{grid-template-columns:1fr;gap:18px}
  .bsel select{max-width:78vw}
}
.colo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:30px;margin-top:70px;padding-top:40px;border-top:1px solid rgba(234,227,212,.18)}
.colo-col h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.colo-col a,.colo-col p{display:block;font-family:var(--f-serif);font-size:17px;color:rgba(234,227,212,.82);margin-bottom:7px;transition:color .3s}
.colo-col a:hover{color:var(--bone)}
.colo-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:50px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(234,227,212,.5)}

/* =====================================================================
   Reveal
   ===================================================================== */
.reveal{opacity:0;transform:translateY(42px) scale(.985);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---------- Responsive ---------- */
@media(max-width:1099px){.toc{display:none}}

/* burger (hidden on desktop) */
.burger{display:none;position:relative;z-index:460;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;margin-left:auto}
.burger span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),opacity .3s}
.burger span:first-child{top:17px} .burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

@media(max-width:820px){
  .topnav{padding:10px 20px;gap:10px;mix-blend-mode:normal;color:var(--bone)}
  .brand{left:20px;top:8px}
  .brand-logo{height:44px}
  /* sans blend mode sur mobile : le header passe en encre au-dessus des chapitres papier (JS .on-light) */
  .topnav.on-light{color:var(--ink)}
  .burger{display:block}
  /* full-screen overlay menu */
  .topnav .nav-right{position:fixed;inset:0;z-index:450;flex-direction:column;justify-content:center;align-items:flex-start;gap:8px;padding:110px 28px 40px;background:var(--ink);color:var(--bone);
    transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .5s var(--ease),opacity .4s var(--ease)}
  .topnav.menu-open .nav-right{transform:none;opacity:1;pointer-events:auto}
  .topnav .nav-right a{display:block!important;font-family:var(--f-display);font-weight:700;font-size:clamp(34px,10vw,52px);letter-spacing:.01em;text-transform:uppercase;line-height:1.05;opacity:1;padding:6px 0;border-bottom:1px solid rgba(234,227,212,.12);width:100%}
  .topnav .nav-right a.cta{border:0;border-radius:0;padding:6px 0;margin-top:14px;color:var(--red)}
  .topnav .nav-right a.is-active{text-decoration:none;color:var(--red)}
  body.menu-open{overflow:hidden}
  /* pages with parchment bg: nav text dark when menu closed */
  .page-portfolio .topnav,.page-project .topnav{color:var(--ink)}
  .page-project .topnav{color:#fff}
  .topnav.menu-open{color:var(--bone)}
  .topnav.menu-open .brand,.topnav.menu-open .burger{position:relative;z-index:470;color:var(--bone)}
  /* intro */
  .intro-kicker{font-size:10px;letter-spacing:.24em;padding:0 8px}
  .intro-kicker b{display:block;margin-top:6px}
  .intro-title{font-size:clamp(64px,19vw,110px)}
  .intro-sub{font-size:18px}
  .intro-meta{font-size:10px;letter-spacing:.18em;line-height:1.7}
  .intro-scroll{white-space:nowrap;font-size:10px}
  /* hero overlay clears the nav */
  .hero-overlay{padding-top:120px;padding-bottom:36px}
  .hero-index a{font-size:16px}
  /* chapters: no sticky stacking on touch, no drift objects */
  .book .chapter,.book .vitruve{position:relative;top:auto;box-shadow:none}
  .float-obj{display:none}
  .stats{gap:22px}
  .exp-grid{grid-template-columns:1fr}
  .marquee-item{font-size:24px}
  .colophon .big{font-size:clamp(34px,10vw,56px)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Accessibility ---------- */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;background:var(--ink);color:var(--bone);padding:10px 14px;font-family:var(--f-sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transition:top .2s}
.skip-link:focus{top:12px;outline:2px solid var(--red)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.tile:focus-visible .tile-meta{opacity:1;transform:none}

/* =====================================================================
   ACTES — mise en scène au scroll (Acte I explosion, Acte II logo)
   ===================================================================== */
.act{position:relative;background:var(--ink)}
.act--explode{height:250vh}
.act-sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:grid;place-items:center}

/* Acte I : tableau + déchirure pixels */
.tear-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.act-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.15) 42%,rgba(20,18,16,.72) 100%)}
/* Logotype RENaiSSANCE — charte RBS Partie II §14 : capitales incisées (Cinzel, substitut libre) crème,
   « ai » en italique calligraphique bas-de-casse (Cormorant), SEUL le point du i est rouge (Ren Red).
   Jamais de recoloration des lettres, jamais d'ombre ni de contour. */
/* Logotype RENaiSSANCE — version validée par le client : capitales Canter, « ai » italique Cormorant entièrement rouge */
.explode-title{position:relative;z-index:3;display:flex;justify-content:center;align-items:baseline;flex-wrap:nowrap;
  font-family:var(--f-display);font-weight:700;color:var(--bone);
  font-size:clamp(48px,13.5vw,220px);line-height:.9;letter-spacing:-.02em;
  text-shadow:0 4px 60px rgba(0,0,0,.55);pointer-events:none;padding:0 12px;max-width:100%}
.explode-title .l{display:inline-block;will-change:transform,opacity}
.explode-title .ai{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:.92em;letter-spacing:0;color:var(--red);padding:0 .02em}
.explode-sub{position:absolute;z-index:3;bottom:26%;left:50%;transform:translateX(-50%);
  font-family:var(--f-serif);font-style:italic;font-size:clamp(16px,2.2vw,28px);color:rgba(234,227,212,.9);
  text-align:center;white-space:nowrap;text-shadow:0 2px 24px rgba(0,0,0,.6);will-change:opacity,transform}
.act-hint{position:absolute;z-index:3;bottom:30px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:rgba(234,227,212,.65);
  display:flex;align-items:center;gap:10px;will-change:opacity}
.act-hint::after{content:'';width:1px;height:30px;background:linear-gradient(var(--bone),transparent);animation:scrolldot 1.8s var(--ease) infinite}

/* Acte II : le logo */
.logo-stage{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px;will-change:transform,opacity;opacity:0;pointer-events:none}
.big-logo{width:min(760px,84vw);margin:0 auto;filter:drop-shadow(0 30px 80px rgba(0,0,0,.6))}
.logo-line{margin-top:22px;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:rgba(234,227,212,.6);will-change:opacity}

/* =====================================================================
   LE REEL — six hashtags empilés
   ===================================================================== */
.reel{position:relative;background:var(--ink)}
.reel-item{position:relative;height:150vh}
.reel-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;display:flex;align-items:flex-end;box-shadow:0 -40px 90px -30px rgba(0,0,0,.8)}
.reel-media{position:absolute;inset:0}
.reel-media img{width:100%;height:100%;object-fit:cover;display:block;will-change:transform;transform:scale(1.08)}
.reel-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,18,16,.66) 0%,rgba(20,18,16,.10) 30%,rgba(20,18,16,.88) 100%)}
.reel-word{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--f-display);font-weight:700;font-size:clamp(72px,17vw,300px);line-height:.85;
  color:rgba(234,227,212,.94);letter-spacing:-.02em;pointer-events:none;
  text-shadow:0 6px 60px rgba(0,0,0,.45);will-change:transform;mix-blend-mode:overlay}
.reel-item--ia .reel-word{color:rgba(243,239,230,.96);mix-blend-mode:normal;top:20%}
/* #IA : fond scrubbé + dessins de Vinci en parallaxe (multiply sur le parchemin, s'effacent quand il s'assombrit) */
.reel-media--scrub{background:#2A2622}
.reel-scrub{position:absolute;inset:0;width:100%;height:100%;display:block}
.ia-sketch{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:.9;will-change:transform,opacity;filter:contrast(1.05)}
.reel-item--ia .reel-scrim{background:linear-gradient(180deg,rgba(20,18,16,.35) 0%,rgba(20,18,16,.05) 30%,rgba(20,18,16,.72) 100%)}
@media(max-width:820px){.ia-sketch{opacity:.75}.ia-sketch:nth-of-type(4){display:none}}
.reel-copy{position:relative;z-index:3;padding:0 var(--pad) clamp(48px,8vh,92px);max-width:760px;color:var(--bone)}
.reel-n{font-family:var(--f-serif);font-style:italic;font-size:14px;color:rgba(234,227,212,.7);margin-bottom:10px}
.reel-title{font-family:var(--f-serif);font-weight:500;font-size:clamp(34px,5.4vw,80px);line-height:1;letter-spacing:-.01em;margin-bottom:14px}
.reel-title em{font-style:italic;color:var(--red)}
.reel-item--ia .reel-title em{color:#B8862B}
.reel-lede{font-family:var(--f-serif);font-size:clamp(17px,1.7vw,23px);line-height:1.42;color:rgba(234,227,212,.88);max-width:52ch;margin-bottom:20px}
.reel-lede b{font-weight:600;color:#fff}
.reel-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-sans);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone);padding-bottom:6px;border-bottom:1px solid rgba(234,227,212,.55);
  transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease)}
.reel-link .plus{transition:transform .35s var(--ease)}
.reel-link:hover{color:var(--red);border-color:var(--red);gap:14px}
.reel-link:hover .plus{transform:rotate(45deg)}
.reel-item--ia .reel-link:hover{color:#B8862B;border-color:#B8862B}

@media(max-width:820px){
  .act--explode{height:220vh}
  .explode-sub{bottom:22%;font-size:15px;white-space:normal;width:86%}
  .reel-word{font-size:clamp(52px,20vw,120px);top:30%}
  .reel-copy{padding-bottom:clamp(36px,6vh,60px)}
  .reel-item{height:140vh}
  .reel-title{font-size:clamp(30px,9vw,44px)}
  .reel-lede{font-size:16px}
  .big-logo{width:86vw}
}
@media(prefers-reduced-motion:reduce){
  .act--explode{height:110vh}
  .explode-title .l{transform:none!important;opacity:1!important}
  .reel-item{height:auto}.reel-pin{position:relative}
}

/* voile de l acte I : s efface avec la dechirure */
.act-veil{transition:none;will-change:opacity}

/* ---- Bandeau cookies (RGPD) ---- */
.rb-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9600;display:flex;justify-content:center;pointer-events:none}
.rb-consent-inner{pointer-events:auto;max-width:760px;width:100%;background:var(--bone);color:var(--ink);border:1px solid rgba(20,18,16,.18);box-shadow:0 30px 80px -30px rgba(0,0,0,.45);padding:18px 20px;display:flex;flex-direction:column;gap:12px;transform:translateY(24px);opacity:0;transition:transform .5s var(--ease),opacity .4s}
.rb-consent.is-open .rb-consent-inner{transform:none;opacity:1}
.rb-consent-text b{display:block;font-family:var(--f-display);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.rb-consent-text p{font-family:var(--f-serif);font-size:16px;line-height:1.45;color:var(--ink-soft);margin:0}
.rb-consent-text a{text-decoration:underline;text-underline-offset:3px}
.rb-consent-choices{display:flex;flex-direction:column;gap:8px;padding:10px 0 2px;border-top:1px solid var(--line)}
.rb-consent-choices[hidden],.rb-consent [hidden]{display:none}
.rb-consent-choices label{display:flex;gap:10px;align-items:flex-start;font-family:var(--f-serif);font-size:15px;cursor:pointer}
.rb-consent-choices input{margin-top:4px;accent-color:var(--red)}
.rb-consent-choices i{font-style:italic;color:var(--muted)}
.rb-consent-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.rb-btn{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:100px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);cursor:pointer;transition:background .25s,color .25s}
.rb-btn:hover{background:var(--red);border-color:var(--red)}
.rb-btn--ghost{background:transparent;color:var(--ink)}
.rb-btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.rb-btn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
@media(max-width:600px){.rb-consent{left:8px;right:8px;bottom:8px}.rb-consent-actions{justify-content:stretch}.rb-btn{flex:1 1 auto;text-align:center}}
@media(prefers-reduced-motion:reduce){.rb-consent-inner{transition:none}}

/* ---- FR | EN ---- */
.lang-toggle{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid currentColor;border-radius:100px;padding:6px 10px;opacity:.85;transition:opacity .3s,background .3s,color .3s}
.lang-toggle:hover{opacity:1}
@media(max-width:820px){.topnav .nav-right a.lang-toggle{font-size:14px;width:auto;border:1px solid rgba(234,227,212,.4);border-radius:100px;padding:8px 14px;margin-top:18px}}
.lang-en-only{display:none}
html[data-lang="en"] .lang-en-only{display:block}