/* =========================================================
   POLICES — hébergées avec le site (SIL Open Font License 1.1)
   Aucune requête vers un service tiers : voir assets/fonts/LICENSE-*.txt
   ========================================================= */
@font-face{
  font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;
  src:url('../fonts/figtree-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Figtree';font-style:normal;font-display:swap;font-weight:300 900;
  src:url('../fonts/figtree-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Figtree';font-style:italic;font-display:swap;font-weight:300 900;
  src:url('../fonts/figtree-latin-wght-italic.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400 700;
  src:url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:400 700;
  src:url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* =========================================================
   JULIEN-1 — Design system
   Palette : Walnut Shadow / Warm Cream / Bark Brown / Ember
   ========================================================= */

:root{
  /* Couleurs de base */
  --walnut:#100904;          /* fond principal  */
  --cream:#ffedd7;           /* texte           */
  --bark:#382416;            /* surface         */
  --cork:#40372e;            /* bordure         */
  --ember:#dc5000;           /* accent          */
  --olive:#6e6a4f;           /* accent secondaire */
  --teal:#37e0c8;           /* accent des fausses interfaces */
  --deep:#0a0502;            /* fond profond    */

  /* Dérivés */
  --cream-80:rgba(255,237,215,.80);
  --cream-62:rgba(255,237,215,.62);
  --cream-56:rgba(255,237,215,.56);  /* étiquettes : 5,1:1 sur bark, le fond le plus clair — AA */
  --cream-24:rgba(255,237,215,.24);
  --cream-12:rgba(255,237,215,.12);
  --cream-06:rgba(255,237,215,.06);
  --line:rgba(255,237,215,.14);

  /* Fond animé (transition entre sections) */
  --bg:var(--walnut);
  --bg-2:#1a0f07;
  --glow:rgba(220,80,0,.18);

  /* Typo */
  --sans:"Figtree","Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-display:clamp(2.35rem,5.1vw,5.9rem);
  --fs-h2:clamp(1.95rem,4.3vw,3.9rem);
  --fs-h3:clamp(1.25rem,1.9vw,1.75rem);
  --fs-lead:clamp(1.02rem,1.22vw,1.32rem);
  --fs-body:clamp(.95rem,1.02vw,1.06rem);
  --fs-label:clamp(.64rem,.72vw,.72rem);

  /* Rythme */
  --gutter:clamp(20px,4.6vw,86px);
  --maxw:1560px;
  --sec-y:clamp(88px,13vw,210px);
  --r:14px;

  /* Courbes */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Amplitude du mouvement. Dans la fiction, le mouvement séduit : il a le
     droit d'être ample et de faire attendre, c'est le sujet de la page.
     Après la Divulgation, ces mêmes variables sont divisées — le
     vocabulaire ne change pas, seule l'amplitude. Voir le bloc
     « RÉGIME RÉEL » plus bas. */
  --rise:26px;        /* de combien monte une apparition */
  --rise-dur:.95s;    /* en combien de temps */
  --line-dur:1.05s;   /* les lignes de titre qui se relèvent */
  --line-tilt:3deg;   /* leur inclinaison de départ */
  --line-step:.08s;   /* le pas de leur cascade */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html:not(.no-smooth){scroll-behavior:smooth}

body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.26;
  color:var(--cream);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color 1.1s var(--ease);
}

/* Voile de dégradé global, réagit à la section courante */
body::before{
  content:"";position:fixed;inset:-20vh -10vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 52vh at 78% 6%,var(--glow),transparent 62%),
    radial-gradient(70vw 60vh at 12% 92%,rgba(110,106,79,.16),transparent 66%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 46%,var(--bg) 100%);
  transition:background 1.2s var(--ease),opacity .8s var(--ease);
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ember);color:#fff}

/* ---------- Grain ---------- */
.grain{
  position:fixed;inset:-150%;z-index:9998;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  17%{transform:translate(-3%,-4%)}
  33%{transform:translate(4%,-2%)}
  50%{transform:translate(-2%,3%)}
  67%{transform:translate(3%,4%)}
  83%{transform:translate(-4%,1%)}
}

/* ---------- Curseur ---------- */
.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .4s}
.cursor.is-on{opacity:1}
.cursor__dot,.cursor__ring{position:absolute;border-radius:50%;transform:translate(-50%,-50%)}
.cursor__dot{width:6px;height:6px;background:var(--cream)}
.cursor__ring{width:34px;height:34px;border:1px solid var(--cream-56);transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .35s}
.cursor.is-hot .cursor__ring{width:62px;height:62px;border-color:var(--cream)}

/* ---------- Barre de progression ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;background:transparent}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),#ff9350);box-shadow:0 0 18px rgba(220,80,0,.7)}

/* ---------- Écran de chargement ---------- */
.boot{position:fixed;inset:0;z-index:9990;background:var(--walnut);display:grid;place-items:center;transition:opacity .9s var(--ease),visibility .9s}
.boot.is-done{opacity:0;visibility:hidden}
.boot__inner{display:grid;gap:18px;justify-items:center;text-align:center}
.boot__mark{font-size:clamp(2.4rem,7vw,5rem);font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:.9;
  background:linear-gradient(100deg,var(--cream-24) 0%,var(--cream) 42%,var(--cream-24) 84%);
  background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 2.1s linear infinite}
@keyframes sheen{to{background-position:-280% 0}}
.boot__meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56)}
.boot__meta i{font-style:normal;color:var(--ember)}

/* ---------- Typographie ---------- */
.display{
  font-size:var(--fs-display);font-weight:500;line-height:.94;letter-spacing:-.035em;
  text-transform:uppercase;margin:0;
}
.heading{
  font-size:var(--fs-h2);font-weight:500;line-height:.96;letter-spacing:-.025em;
  text-transform:uppercase;margin:0;
}
.lead{font-size:var(--fs-lead);line-height:1.34;color:var(--cream-80);margin:0;max-width:56ch;font-weight:380}
.lead--center{margin-inline:auto;text-align:center}
.section-label,.eyebrow{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream-56);margin:0;font-weight:400;
}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--cream-62)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ember);box-shadow:0 0 12px var(--ember);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ---------- Registre « voix » ----------
   Casse normale, plus gros, plus gras. Réservé aux titres où quelqu'un
   parle : l'accroche, et tout ce qui suit la divulgation. Les capitales
   restent la voix « fiche produit » de la parodie. */
.display.voice,.heading.voice,.pop__title{
  text-transform:none;font-weight:650;line-height:.99;letter-spacing:-.034em;
}
.display.voice{font-size:clamp(2.45rem,6.6vw,6.6rem)}
.heading.voice{font-size:clamp(2.05rem,5.1vw,4.7rem)}

/* ---------- Boutons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:16px 30px;border-radius:999px;border:1px solid transparent;
  background:var(--cream);color:var(--walnut);
  font-size:.86rem;font-weight:600;letter-spacing:.01em;
  overflow:hidden;isolation:isolate;will-change:transform;
  transition:transform .5s var(--ease-out),color .45s var(--ease),border-color .45s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
  background:linear-gradient(120deg,var(--ember),#ff9350);
  transform:translateY(101%);transition:transform .55s var(--ease-out);
}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn--ghost{background:transparent;color:var(--cream);border-color:var(--cream-24)}
.btn--ghost:hover{border-color:transparent;color:#fff}
.btn--sm{padding:11px 20px;font-size:.78rem}
.btn--lg{padding:20px 40px;font-size:.95rem}

/* ---------- Apparitions ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,var(--rise),0);transition:opacity var(--rise-dur) var(--ease-out),transform var(--rise-dur) var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.line{display:block;overflow:hidden;padding-top:.14em;margin-top:-.14em}
.line > i{display:block;font-style:inherit;transform:translate3d(0,110%,0) rotate(var(--line-tilt));transition:transform var(--line-dur) var(--ease-out)}
.is-in .line > i,.line.is-in > i{transform:none}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:9000;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px var(--gutter);
  transition:transform .6s var(--ease),background-color .6s var(--ease),backdrop-filter .6s,border-color .6s,padding .6s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(16,9,4,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);padding-block:13px;
}
.nav.is-hidden{transform:translateY(-102%)}
/* Le logo porte le même lettrage que le titre du hero : graisse 700 et
   approche négative. Le serrage est un cran plus doux que les -.045em du
   hero — à 1,25 rem les jambages se toucheraient, alors qu'à 13 rem ils
   respirent encore. Même dessin, corrigé optiquement. */
.nav__brand{display:inline-flex;align-items:flex-start;gap:2px}
.nav__word{font-size:1.25rem;font-weight:700;letter-spacing:-.032em;text-transform:uppercase;line-height:1}
.nav__reg{font-size:.5rem;color:var(--ember);line-height:1;margin-top:2px}
.nav__links{display:flex;gap:clamp(14px,2vw,34px)}
.nav__links a{
  position:relative;font-size:.8rem;color:var(--cream-62);letter-spacing:.02em;
  padding-block:6px;transition:color .4s var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ember);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.nav__links a:hover{color:var(--cream)}
/* La section qu'on est en train de lire s'allume dans la barre. Le trait
   se déploie depuis la gauche, là où le survol le déploie depuis la
   droite : les deux gestes ne se confondent pas. */
.nav__links a.is-current{color:var(--cream)}
.nav__links a.is-current::after{transform:scaleX(1);transform-origin:left}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__burger{display:none;width:40px;height:40px;place-items:center;gap:6px}
.nav__burger i{display:block;width:20px;height:1.5px;background:var(--cream);transition:transform .45s var(--ease),opacity .3s}
.nav__burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:8900;background:var(--walnut);
  display:grid;align-content:center;gap:6px;padding:0 var(--gutter);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu a{font-size:clamp(2rem,9vw,3.4rem);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.08;
  opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s}
.menu.is-open a{opacity:1;transform:none}
.menu a:hover{color:var(--ember)}
.menu.is-open a:nth-child(1){transition-delay:.16s}
.menu.is-open a:nth-child(2){transition-delay:.22s}
.menu.is-open a:nth-child(3){transition-delay:.28s}
.menu.is-open a:nth-child(4){transition-delay:.34s}
.menu.is-open a:nth-child(5){transition-delay:.40s}
.menu.is-open a:nth-child(6){transition-delay:.46s}

/* =========================================================
   LE STYLO (SVG)
   ========================================================= */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.pen{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 40px 70px rgba(0,0,0,.7))}
.pen .pen__cap{filter:drop-shadow(0 0 22px rgba(220,80,0,.35))}
.pen .pen__tip{filter:drop-shadow(0 0 14px rgba(247,220,174,.28))}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;padding:clamp(96px,12vh,140px) var(--gutter) clamp(24px,3.4vh,46px);
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,4vh,60px);overflow:hidden;
}
.hero__glow{
  position:absolute;top:-34vh;left:50%;transform:translateX(-50%);
  width:min(120vw,1500px);aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(220,80,0,.26) 0%,rgba(220,80,0,.07) 34%,transparent 62%);
  animation:breathe 9s var(--ease) infinite;
}
@keyframes breathe{0%,100%{opacity:.8;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.09)}}

/* ---------- bloc haut : statut, nom, argumentaire ---------- */
.hero__top{
  position:relative;z-index:3;max-width:var(--maxw);width:100%;margin-inline:auto;
  display:grid;justify-items:center;gap:clamp(10px,1.6vw,20px);text-align:center;
}
.hero__wordmark{
  margin:0;font-size:clamp(3.6rem,14.6vw,13.5rem);font-weight:700;line-height:.84;
  letter-spacing:-.045em;text-transform:uppercase;color:var(--cream);
  text-shadow:0 18px 60px rgba(0,0,0,.45);
}
.hero__lead{max-width:42ch;text-align:center;text-shadow:0 2px 20px rgba(16,9,4,.9),0 0 40px rgba(16,9,4,.7)}

/* ---------- scène d'atelier ---------- */
.mockup{
  position:absolute;left:0;right:0;bottom:0;height:min(78%,800px);z-index:1;pointer-events:none;
  overflow:hidden;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 100%);
}
.mockup__desk{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(93deg,rgba(60,32,12,.11) 0 3px,transparent 3px 22px),
    linear-gradient(112deg,#78502c 0%,#b8874f 34%,#cf9d63 56%,#9c6c3e 78%,#6a4526 100%);
}
.mockup__mat{
  position:absolute;left:-3%;right:-7%;top:5%;bottom:20%;
  transform:rotate(1.9deg);border-radius:14px;overflow:hidden;
  background:linear-gradient(165deg,#3c4a35,#2b3527 58%,#222b20);
  box-shadow:0 30px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
}
.mockup__grid{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right,rgba(226,236,214,.075) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(to bottom,rgba(226,236,214,.075) 0 1px,transparent 1px 30px),
    repeating-linear-gradient(to right,rgba(226,236,214,.16) 0 1px,transparent 1px 150px),
    repeating-linear-gradient(to bottom,rgba(226,236,214,.16) 0 1px,transparent 1px 150px);
  background-position:22px 18px;
}
.mockup__rule{
  position:absolute;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.06em;color:rgba(226,236,214,.34);
}
.mockup__rule--y{left:10px;top:9%;bottom:14%;flex-direction:column;align-items:flex-start}
.mockup__rule--y span{transform:rotate(-90deg)}
.mockup__rule--x{left:6%;right:10%;bottom:9px;align-items:flex-end}

/* le bon de commande glissé sous le stylo */
.mockup__paper{
  position:absolute;left:48%;bottom:4%;width:clamp(160px,15.5vw,244px);aspect-ratio:1/1.3;
  transform:rotate(-7deg);border-radius:3px;
  background:linear-gradient(158deg,#f4e9d6,#ddcfb6 62%,#c7b89d);
  box-shadow:0 22px 44px rgba(0,0,0,.5),0 2px 0 rgba(255,255,255,.22) inset;
  display:grid;align-content:start;gap:10px;padding:26px 24px;
}
.mockup__paper-head{height:10px;width:46%;border-radius:2px;background:rgba(40,28,16,.62)}
.mockup__paper-line{height:5px;border-radius:2px;background:rgba(40,28,16,.2)}
.mockup__paper-line--short{width:58%}
.mockup__paper-sign{
  margin-top:30px;font-family:var(--mono);font-size:.5rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(40,28,16,.5);
}
.mockup__paper-rule{height:1px;background:rgba(40,28,16,.38)}

/* le trombone */
.mockup__clip{
  position:absolute;right:24%;bottom:30%;width:17px;height:48px;
  border:2.5px solid rgba(206,214,222,.75);border-radius:12px;
  transform:rotate(31deg);
  box-shadow:0 5px 12px rgba(0,0,0,.5);
}
.mockup__clip::after{
  content:"";position:absolute;left:4px;top:8px;right:4px;bottom:-9px;
  border:2.5px solid rgba(206,214,222,.55);border-radius:10px;border-top-color:transparent;
}
.mockup__pen{
  position:absolute;left:50%;bottom:6%;width:clamp(28px,2.72vw,43px);height:auto;
  transform:rotate(20deg);transform-origin:50% 50%;
  filter:drop-shadow(14px 26px 24px rgba(0,0,0,.62));
  will-change:transform;
}
.mockup__haze{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(118deg,rgba(16,9,4,.5) 0%,rgba(16,9,4,.16) 38%,rgba(16,9,4,0) 62%),
    radial-gradient(86% 72% at 58% 40%,transparent,rgba(16,9,4,.32) 92%),
    linear-gradient(180deg,rgba(16,9,4,.72),rgba(16,9,4,.2) 22%,transparent 38%),
    linear-gradient(0deg,rgba(16,9,4,.42),rgba(16,9,4,.12) 12%,transparent 26%);
}

/* ---------- cartel translucide et pied du hero ---------- */
.hero__floor{
  position:relative;z-index:4;max-width:var(--maxw);width:100%;margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,48px);justify-content:space-between;align-items:flex-end;
}
.hero__card{
  flex:1 1 380px;max-width:min(520px,100%);
  display:grid;gap:14px;padding:clamp(20px,2.2vw,30px);border-radius:12px;
  border:1px solid rgba(255,237,215,.2);
  /* Voile clair relevé au pixel sur la référence : il éclaircit le fond au lieu
     de l'assombrir, et le flou efface la trame du tapis. */
  background:rgba(181,150,113,.64);
  backdrop-filter:blur(26px) saturate(104%);-webkit-backdrop-filter:blur(26px) saturate(104%);
  box-shadow:0 26px 60px rgba(0,0,0,.3);
}
/* Le titre reprend le poids que portait la ligne de crédit supprimée :
   un cartel affiche d'abord le nom de l'objet, pas la notice. */
.hero__claim{
  margin:0;font-size:clamp(1.02rem,1.5vw,1.3rem);font-weight:600;line-height:1.28;
  text-transform:uppercase;letter-spacing:.005em;color:#fff9f2;max-width:26ch;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}

.hero__meta{display:grid;gap:clamp(14px,2vw,26px);justify-items:end;text-align:right}
.hero__stats{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,auto);gap:clamp(14px,2.2vw,40px);
}
.hero__stats li{display:grid;gap:5px;justify-items:end}
.hero__stats b{font-size:clamp(1.2rem,2.4vw,2.1rem);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hero__stats span{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-56)}
.hero__meta .scroll-cue{margin-top:0}

/* Réponse du bouton « Précommander » — il ne mène nulle part, il répond */
.cta-reply{
  margin:-6px 0 0;min-height:1.4em;max-width:44ch;
  font-size:.92rem;line-height:1.4;color:var(--cream-62);
  display:flex;align-items:flex-start;gap:10px;
  opacity:0;transform:translateY(6px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);
}
.cta-reply.is-in{opacity:1;transform:none}
.cta-reply::before{
  content:"";flex:none;width:6px;height:6px;margin-top:.5em;border-radius:50%;
  background:var(--ember);box-shadow:0 0 10px var(--ember);
}
.cta-reply:empty::before{display:none}

/* =========================================================
   TICKER
   ========================================================= */
.ticker{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  padding-block:18px;background:rgba(56,36,22,.28);backdrop-filter:blur(6px);
  /* les deux bouts se dissolvent au lieu d'être tranchés net par le bord */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{display:flex;align-items:center;gap:34px;width:max-content;animation:slide var(--ticker-dur,34s) linear infinite}
.ticker__track span{font-size:clamp(.9rem,1.6vw,1.35rem);font-weight:500;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ticker__track em{color:var(--ember);font-style:normal;font-size:.8rem}
@keyframes slide{to{transform:translateX(-50%)}}
/* Le défilement s'arrête sous le pointeur et sous le clavier. Ce n'est pas
   la commande de pause explicite qu'exige le critère WCAG 2.2.2 pour un
   mouvement de plus de cinq secondes : c'est le compromis retenu pour une
   bande décorative, dont le contenu est répété et ne porte rien qu'on ne
   retrouve ailleurs. Mouvement réduit : elle ne bouge pas du tout. */
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track{animation-play-state:paused}

/* Le même bandeau de l'autre côté de la Divulgation, en sourdine : plus
   lent, plus petit, et le losange perd l'ember. Ce ne sont plus des
   caractéristiques inventées, ce sont les quatre sujets réels — ils
   n'ont pas à clignoter. */
.ticker--reel{
  --ticker-dur:58s;
  background:rgba(56,36,22,.16);border-block-color:var(--cream-12);
  padding-block:15px;
}
.ticker--reel .ticker__track{gap:30px}
.ticker--reel .ticker__track span{
  font-size:clamp(.8rem,1.15vw,1rem);font-weight:500;
  letter-spacing:.14em;color:var(--cream-62);
}
.ticker--reel .ticker__track em{color:var(--olive);font-size:.7rem}

/* =========================================================
   MANIFESTE
   ========================================================= */
.manifeste{padding:var(--sec-y) var(--gutter);max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(34px,5vw,74px)}
.manifeste__text{
  margin:0;font-size:clamp(1.5rem,4.1vw,3.35rem);font-weight:400;line-height:1.14;letter-spacing:-.022em;
  max-width:24ch;
}
.manifeste__text w{display:inline-block;color:var(--cream-12);transition:color .5s var(--ease)}
.manifeste__text w.is-lit{color:var(--cream)}
.manifeste__sig{display:flex;align-items:center;gap:22px;border-top:1px solid var(--line);padding-top:26px}
.pen--mini{width:26px;height:150px;flex:none;transform:rotate(38deg);filter:none;opacity:.85}
.manifeste__sig p{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-56);max-width:40ch}

/* =========================================================
   ANATOMIE (sticky)
   ========================================================= */
.anatomy{position:relative;overflow-x:clip;max-width:var(--maxw);margin-inline:auto;padding:0 var(--gutter) var(--sec-y);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:start}
.anatomy__sticky{align-self:stretch;position:relative}
.anatomy__stage{position:sticky;top:0;height:100svh;width:100%;display:grid;place-items:center}
.anatomy__stage .pen3d{width:clamp(150px,18vw,270px);height:min(82vh,860px)}
.anatomy__halo{position:absolute;left:50%;top:50%;z-index:-1;
  width:min(92vw,720px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(220,80,0,.22),transparent 64%);filter:blur(10px);
  transition:background .8s var(--ease)}
.pen--anatomy{transition:transform 1.1s var(--ease-out)}

/* ---------- Calque de plan d'atelier ----------
   Un objet à trente centimes présenté avec l'appareil d'un plan coté :
   c'est le registre de toute la fiction, transposé en dessin. Le calque
   se pose par-dessus le stylo sans l'occulter — il n'intercepte ni le
   pointeur ni les lecteurs d'écran. */
.draft{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(80vw,340px);height:min(78vh,700px);
  pointer-events:none;z-index:2;
}
/* Piège : le calque se centre par un transform, et `[data-reveal].is-in`
   pose `transform:none` — le cadre partirait en bas à droite au moment
   précis où il devient visible. La règle ci-dessous repasse devant.
   Le centrage reste porté par `.draft` lui-même : si `data-reveal`
   disparaissait un jour du balisage, le cadre resterait en place. Le
   calque n'a donc que le fondu, sans la montée des autres blocs — un plan
   se révèle, il ne glisse pas. */
.draft[data-reveal].is-in{transform:translate(-50%,-50%)}
.draft__grid{width:100%;height:100%;overflow:visible}
.draft__grid path,.draft__grid rect{vector-effect:non-scaling-stroke}
.draft__corner,.draft__ticks,.draft__dim,.draft__cross{
  fill:none;stroke:var(--cream-24);stroke-width:1;
}
.draft__corner{stroke:var(--cream-24);stroke-width:1.4}
.draft__dim{stroke-dasharray:3 4}  /* tirets de dessin, pas d'animation */
.draft__cross{stroke:var(--ember);opacity:.72}
.draft__nodes rect{fill:var(--ember);stroke:none}

/* Les traits se tirent au premier passage. Chaque tracé porte
   `pathLength="1"` : sa longueur réelle, somme de sous-chemins disjoints
   et difficile à deviner, est alors normalisée à 1, et un dasharray de 1
   l'escamote exactement — ni segment oublié, ni motif qui se répète.
   Une valeur devinée « assez grande » ne marche pas : plus courte que le
   chemin, elle en laisse des morceaux visibles. */
.draft__corner{stroke-dasharray:1;stroke-dashoffset:1}
.draft__ticks{stroke-dasharray:1;stroke-dashoffset:1}
.draft__cross{stroke-dasharray:1;stroke-dashoffset:1}
.draft.is-in .draft__corner{stroke-dashoffset:0;transition:stroke-dashoffset 1.5s var(--ease-out) .15s}
.draft.is-in .draft__ticks{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ease-out) .5s}
.draft.is-in .draft__cross{stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease-out) .9s}
.draft__nodes{opacity:0;transition:opacity .5s var(--ease) 1.1s}
.draft.is-in .draft__nodes{opacity:1}

/* La cote de l'étape courante, sous le cadre. Elle se change en fondu :
   une valeur qui se substitue à une autre, pas une valeur qui arrive. */
.draft__cote{
  position:absolute;left:0;right:0;bottom:-6px;margin:0;text-align:center;
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56);
  transition:opacity .28s var(--ease);
}
.draft__cote.is-swapping{opacity:0}

/* ---------- Capsule d'intitulé ----------
   Une pastille posée sur le plan, qui respire. Le flottement est lent et
   de faible amplitude : sous le seuil où l'œil le suit consciemment, mais
   assez pour que le cadre n'ait pas l'air d'une image fixe. */
.capsule{
  position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  margin:0;display:inline-flex;align-items:center;gap:11px;
  padding:9px 18px 9px 10px;border-radius:999px;white-space:nowrap;
  background:rgba(56,36,22,.5);border:1px solid var(--cream-12);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  font-family:var(--mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cream-80);
  animation:capsule-float 7s var(--ease) infinite;
}
.capsule__mark{
  width:22px;height:22px;flex:none;
  padding:3px;border-radius:50%;background:rgba(220,80,0,.14);
}
.capsule__mark polygon{fill:none;stroke:var(--ember);stroke-width:1.4}
.capsule__mark circle{fill:var(--ember)}
@keyframes capsule-float{
  0%,100%{transform:translate(-50%,0)}
  50%    {transform:translate(-50%,-7px)}
}

/* Sous 900 px, l'Anatomie passe en une colonne : la scène du stylo devient
   une bande fixe en haut de l'écran (56svh), et les étapes défilent
   dessous. Le cadre coté reste donc parfaitement à sa place — il ne se
   superpose à aucun paragraphe. Il suit simplement la bande.

   Version précédente : `display:none` sous 980 px, au motif que « la
   colonne du stylo passe derrière le texte ». C'était une supposition, et
   elle était fausse. Résultat : tout ce travail était invisible sur le
   seul écran où le site est réellement lu. */
@media (max-width:900px){
  .draft{width:min(64vw,250px);height:46svh}
  /* le texte de la capsule est long : il se resserre plutôt que de
     déborder de l'écran ou de passer à la ligne */
  .capsule{
    top:-13px;padding:7px 13px 7px 8px;gap:8px;
    font-size:.56rem;letter-spacing:.08em;
  }
  .capsule__mark{width:18px;height:18px}
  .draft__cote{bottom:-4px;letter-spacing:.16em}
}
.anatomy__steps{display:grid;gap:clamp(60px,12vh,150px);padding-block:clamp(70px,16vh,190px) clamp(160px,54vh,540px)}
.anatomy__head{display:grid;gap:18px}
.step{display:grid;gap:14px;max-width:44ch;opacity:.34;transition:opacity .7s var(--ease)}
.step.is-active{opacity:1}
.step__idx{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.24em;color:var(--ember)}
.step h3{margin:0;font-size:var(--fs-h3);font-weight:500;text-transform:uppercase;letter-spacing:-.015em;line-height:1.02}
.step p{margin:0;color:var(--cream-62);line-height:1.5}
.step__spec{display:flex;gap:34px;margin:6px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.step__spec dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-56);margin-bottom:5px}
.step__spec dd{margin:0;font-size:.9rem;font-weight:500}

/* =========================================================
   EN-TÊTES DE SECTION
   ========================================================= */
.sec-head{display:grid;gap:18px;justify-items:center;text-align:center;max-width:var(--maxw);margin:0 auto clamp(40px,6vw,82px)}
.sec-head--left{justify-items:start;text-align:left;margin:0}

/* =========================================================
   CAPACITÉS — 3 colonnes, gouttières généreuses
   ========================================================= */
.caps{padding:var(--sec-y) var(--gutter)}
.cards{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,40px)}
.card{
  position:relative;padding:clamp(26px,2.6vw,44px);border-radius:var(--r);
  border:1px solid var(--cork);background:linear-gradient(160deg,rgba(56,36,22,.62),rgba(16,9,4,.34));
  display:grid;gap:14px;align-content:start;overflow:hidden;
  transition:border-color .55s var(--ease),transform .7s var(--ease-out),background .55s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s var(--ease);
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%),rgba(220,80,0,.20),transparent 70%);
}
.card:hover{border-color:rgba(220,80,0,.55);transform:translateY(-6px)}
.card:hover::after{opacity:1}
.card__num{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--ember)}
.card h3{margin:6px 0 0;font-size:var(--fs-h3);font-weight:500;text-transform:uppercase;letter-spacing:-.015em;line-height:1.04}
.card p{margin:0;color:var(--cream-62);line-height:1.5}

/* =========================================================
   CONFIGURATEUR
   ========================================================= */
.config{padding:var(--sec-y) var(--gutter)}
.config__inner{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,90px);align-items:center}
.switch{position:relative;display:inline-flex;padding:5px;border:1px solid var(--cork);border-radius:999px;background:rgba(16,9,4,.5);margin-top:8px}
.switch__btn{position:relative;z-index:2;padding:11px 22px;border-radius:999px;font-size:.78rem;font-weight:500;color:var(--cream-62);transition:color .45s var(--ease)}
.switch__btn.is-active{color:var(--walnut)}
.switch__pill{position:absolute;z-index:1;top:5px;left:5px;height:calc(100% - 10px);border-radius:999px;background:var(--cream);
  transition:transform .6s var(--ease-out),width .6s var(--ease-out)}
.config__panel{position:relative;border:1px solid var(--cork);border-radius:var(--r);padding:clamp(26px,3vw,46px);
  background:linear-gradient(150deg,rgba(56,36,22,.58),rgba(10,5,2,.5));min-height:330px;overflow:hidden}
.config__panel::before{content:"";position:absolute;inset:auto auto -40% -20%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(220,80,0,.22),transparent 68%);transition:transform .9s var(--ease)}
.config.is-open .config__panel::before{transform:translate(58%,-24%)}
.config__state{display:grid;gap:14px;animation:fadeUp .7s var(--ease-out) both}
.config__state[hidden]{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.config__state h3{margin:0;font-size:var(--fs-h3);font-weight:500;text-transform:uppercase;letter-spacing:-.015em}
.config__state p{margin:0;color:var(--cream-62);line-height:1.5;max-width:46ch}
.kv{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0}
.kv li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.kv span{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-56)}
.kv b{font-size:.95rem;font-weight:500;font-variant-numeric:tabular-nums}

/* =========================================================
   BENCHMARKS
   ========================================================= */
.bench{padding:var(--sec-y) var(--gutter)}
.bench__grid{max-width:1180px;margin:0 auto clamp(46px,6vw,86px);display:grid;gap:4px}
.bench__row{display:grid;grid-template-columns:minmax(150px,1.1fr) 3fr auto;align-items:center;gap:clamp(14px,2.4vw,34px);
  padding:16px 0;border-bottom:1px solid var(--line)}
.bench__name{margin:0;font-size:.92rem;font-weight:500}
.bench__name em{font-style:normal;color:var(--ember);font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase}
.bar{height:8px;border-radius:999px;background:var(--cream-06);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,rgba(220,80,0,.45),var(--ember));
  transition:width 1.5s var(--ease-out)}
.bench__row:first-child .bar i{background:linear-gradient(90deg,var(--ember),#ffb066)}
.bench__val{font-family:var(--mono);font-size:.82rem;color:var(--cream-62);font-variant-numeric:tabular-nums;min-width:48px;text-align:right}
.bench__notes{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,40px)}
.note{padding:clamp(22px,2.2vw,34px);border:1px solid var(--cork);border-radius:var(--r);background:rgba(56,36,22,.3);display:grid;gap:8px;align-content:start}
.note__k{margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56)}
.note__v{margin:0;font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:500;letter-spacing:-.035em;line-height:1}
.note p:last-child{margin:6px 0 0;color:var(--cream-62);font-size:.9rem;line-height:1.5}

/* =========================================================
   MODÈLE
   ========================================================= */
.model{padding:var(--sec-y) var(--gutter);max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.model__head{display:grid;gap:20px;position:sticky;top:110px}
.model__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.model__table{display:grid;gap:0;border-top:1px solid var(--line)}
.model__tr{display:grid;grid-template-columns:1.25fr .6fr .6fr 1.3fr;gap:16px;padding:19px 0;border-bottom:1px solid var(--line);
  font-size:.88rem;align-items:center;transition:background .4s var(--ease),padding-inline .4s var(--ease)}
.model__tr:not(.model__tr--head):hover{background:rgba(255,237,215,.04);padding-inline:12px}
.model__tr--head span{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56)}
.model__tr span:first-child{font-family:var(--mono);font-size:.82rem;color:var(--cream)}
.model__tr span:last-child{color:var(--cream-62)}

/* =========================================================
   RECHERCHE
   ========================================================= */
.research{padding:var(--sec-y) var(--gutter)}
.research__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px)}
.research__col{display:grid;gap:22px;align-content:start}
.research__meta{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:0}
.research__meta li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.research__meta span{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-56)}
.research__meta b{font-size:.9rem;font-weight:500}
.code{position:relative;margin:0;border:1px solid var(--cork);border-radius:var(--r);background:rgba(10,5,2,.62);overflow:hidden}
.code figcaption{padding:12px 18px;border-bottom:1px solid var(--cork);font-family:var(--mono);font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56)}
.code pre{margin:0;padding:22px 18px;overflow-x:auto}
.code code{font-family:var(--mono);font-size:.76rem;line-height:1.7;color:var(--cream-80);white-space:pre}
.code__copy{position:absolute;top:8px;right:10px;padding:7px 13px;border-radius:999px;border:1px solid var(--cork);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-62);
  transition:color .4s,border-color .4s,background .4s}
.code__copy:hover{color:var(--walnut);background:var(--cream);border-color:var(--cream)}
.research__files{display:grid;gap:0;border-top:1px solid var(--line)}
.research__files div{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:.86rem}
.research__files span{font-family:var(--mono);color:var(--cream-80)}
.research__files b{font-weight:400;color:var(--cream-56);font-family:var(--mono);font-size:.78rem}

/* =========================================================
   TÉMOIGNAGES
   ========================================================= */
.quotes{padding:var(--sec-y) var(--gutter)}
.quotes__grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,40px)}
.quote{margin:0;padding:clamp(26px,2.6vw,42px);border:1px solid var(--cork);border-radius:var(--r);
  background:linear-gradient(165deg,rgba(56,36,22,.5),rgba(16,9,4,.3));display:grid;gap:26px;align-content:space-between;
  transition:transform .7s var(--ease-out),border-color .5s}
.quote:hover{transform:translateY(-6px);border-color:rgba(220,80,0,.45)}
.quote p{margin:0;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.42;color:var(--cream-80)}
.quote footer{display:grid;gap:3px;padding-top:20px;border-top:1px solid var(--line)}
.quote b{font-size:.9rem;font-weight:600}
.quote span{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-56)}

/* Monogrammes des vrais témoignages. Pas de photographie : le seul visage
   du site est celui de Julien, et un portrait de banque sous un nom réel
   annulerait le travail fait pour rendre ces témoignages vérifiables.
   Les cinq teintes sont toutes prises dans le vocabulaire existant. */
#temoignages .quote footer{display:flex;align-items:center;gap:14px}
#temoignages .quote__who{display:grid;gap:3px;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
/* `.quote span` porte le style monospace des fonctions ; sa spécificité
   (0,1,1) l'emporterait sur `.mono` seul. Les règles sont donc scopées. */
.quote .mono{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--sans);font-size:.92rem;font-weight:600;
  letter-spacing:.01em;text-transform:none;
}
.quote .mono--1{background:var(--ember);color:#190b03}
.quote .mono--2{background:#b5926f;color:#190b03}
.quote .mono--3{background:#5f5c45;color:#fffaf2}
.quote .mono--4{background:#8e3000;color:#ffedd7}
.quote .mono--5{background:#e0b371;color:#190b03}

/* =========================================================
   TARIFS
   ========================================================= */
.pricing{padding:var(--sec-y) var(--gutter)}
.plans{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,34px);align-items:stretch}
.plan{position:relative;padding:clamp(28px,2.8vw,46px);border:1px solid var(--cork);border-radius:var(--r);
  background:rgba(16,9,4,.4);display:grid;gap:12px;align-content:start;transition:transform .7s var(--ease-out),border-color .5s}
.plan:hover{transform:translateY(-6px);border-color:var(--cream-24)}
.plan--feature{border-color:rgba(220,80,0,.55);background:linear-gradient(170deg,rgba(220,80,0,.14),rgba(16,9,4,.5))}
.plan__badge{position:absolute;top:-11px;left:clamp(28px,2.8vw,46px);padding:5px 13px;border-radius:999px;background:var(--ember);color:#fff;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;margin:0}
.plan__name{margin:0;font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56)}
.plan__price{margin:4px 0 0;font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.04em;line-height:1}
.plan__price em{font-style:normal;font-size:.42em;color:var(--cream-56);margin-left:2px}
.plan__sub{margin:0;color:var(--cream-62);font-size:.92rem}
.plan ul{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:11px}
.plan li{position:relative;padding-left:20px;font-size:.9rem;color:var(--cream-80)}
.plan li::before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:50%;background:var(--ember);opacity:.85}
.plan .btn{justify-self:start}

/* =========================================================
   FAQ
   ========================================================= */
.faq{padding:var(--sec-y) var(--gutter);max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,90px);align-items:start}
.faq__head{display:grid;gap:18px;position:sticky;top:110px}
.faq__list{display:grid;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 0;font-size:clamp(1rem,1.5vw,1.28rem);font-weight:500;letter-spacing:-.012em;transition:color .4s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--ember)}
.qa summary i{position:relative;flex:none;width:16px;height:16px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;inset:50% 0 auto 0;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa[open] summary{color:var(--ember)}
.qa__body{padding:0 0 26px;animation:fadeUp .55s var(--ease-out) both}
.qa__body p{margin:0;color:var(--cream-62);line-height:1.55;max-width:58ch}

/* =========================================================
   DIVULGATION — le basculement
   ========================================================= */
.reveal-act{position:relative;padding:clamp(120px,20vh,240px) var(--gutter);overflow-x:clip}
.reveal-act::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90vw 70vh at 50% 42%,rgba(220,80,0,.30),transparent 64%),
    linear-gradient(180deg,transparent,rgba(220,80,0,.07) 40%,transparent);
}
.reveal-act__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(26px,4vw,52px)}
.reveal-act__title{max-width:16ch}
.reveal-act__body{display:grid;gap:20px;max-width:54ch;justify-self:end;
  /* le stylo décoratif est incliné : sa pointe balaie loin vers la gauche.
     La colonne de texte se tient à distance plutôt que de passer dessous. */
  padding-right:clamp(0px,14vw,250px)}
.reveal-act__body b{color:var(--cream);font-weight:600}
.reveal-act__pen{position:absolute;top:50%;right:-3%;transform:translateY(-50%) rotate(24deg);
  width:clamp(80px,9vw,140px);height:min(80vh,820px);opacity:.34;z-index:1;pointer-events:none}

/* =========================================================
   RÉGIME RÉEL — après la Divulgation
   =========================================================
   La frontière du site n'est pas qu'une frontière de contenu, c'en est
   une de mouvement. Avant, le mouvement séduit : il est ample, il fait
   attendre, il met en scène — c'est exactement ce que la page dénonce en
   le pratiquant. Après, il accompagne : même vocabulaire, amplitude
   divisée par deux, aucune inclinaison. Il guide l'œil sans jamais
   retarder l'accès à une information.

   Ce que la règle du projet interdit après la bascule reste interdit et
   n'est pas affaire d'animation : rien ne se cache. Pas d'accordéon, pas
   de carrousel, pas de survol qui révèle. Les prix, l'offre et les
   retours sont montrés d'un coup.

   `#revelation ~ *` couvre toutes les sections suivantes et le pied de
   page, sans un attribut à poser dans le HTML : ils sont tous frères
   dans <main>. La Divulgation elle-même garde l'amplitude pleine — elle
   est le sommet de la mise en scène, pas sa sortie. */
#revelation ~ *{
  --rise:12px;
  --rise-dur:.55s;
  --line-dur:.62s;
  --line-tilt:0deg;
  --line-step:.035s;
}

/* Après la bascule : plus lent, plus sourd, et la pastille perd l'ember.
   Ce bandeau-là énumère une offre réelle, il n'a pas à clignoter. */

/* =========================================================
   L'ÉPREUVE — quiz de vente
   ========================================================= */
.quiz{padding:var(--sec-y) var(--gutter)}
.quiz .sec-head em{font-style:italic;color:var(--cream)}
.quiz__card{
  position:relative;max-width:980px;margin-inline:auto;overflow:hidden;
  border:1px solid var(--cork);border-radius:var(--r);
  background:linear-gradient(160deg,rgba(56,36,22,.55),rgba(10,5,2,.62));
  padding:clamp(24px,3vw,52px);
}
.quiz__card::after{
  content:"";position:absolute;inset:auto -30% -55% auto;width:62%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(220,80,0,.16),transparent 68%);
}
.quiz__bar{position:absolute;top:0;left:0;right:0;height:2px;background:var(--cream-06)}
.quiz__bar i{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--ember),#ff9350);
  transition:width .6s var(--ease-out)}
.quiz__meta{position:relative;z-index:2;display:flex;justify-content:space-between;gap:16px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56);
  padding-bottom:clamp(20px,2.4vw,32px)}
.quiz__meta b{color:var(--ember);font-weight:400}
.quiz__stage{position:relative;z-index:2;min-height:clamp(330px,38vh,400px)}

.q{display:grid;gap:clamp(18px,2.2vw,26px);animation:fadeUp .6s var(--ease-out) both}
.q[hidden]{display:none}
.q__title{margin:0;font-size:clamp(1.18rem,2.1vw,1.72rem);font-weight:500;line-height:1.18;letter-spacing:-.018em;max-width:34ch}
.q__opts{display:grid;gap:9px}
.opt{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;
  padding:15px 18px;border:1px solid var(--cork);border-radius:10px;
  background:rgba(16,9,4,.42);color:var(--cream-80);font-size:.95rem;line-height:1.36;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease),transform .5s var(--ease-out);
}
.opt i{
  flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;
  border:1px solid var(--cream-24);font-family:var(--mono);font-size:.68rem;font-style:normal;color:var(--cream-62);
  transition:border-color .4s,background .4s,color .4s;
}
.opt:hover:not(:disabled){border-color:rgba(220,80,0,.55);color:var(--cream);transform:translateX(4px)}
.opt:hover:not(:disabled) i{border-color:var(--ember);color:var(--ember)}
.opt:disabled{cursor:default;opacity:.34}
.opt.is-picked{border-color:var(--cream);background:rgba(255,237,215,.08);color:var(--cream);opacity:1;transform:none}
.opt.is-picked i{background:var(--ember);border-color:var(--ember);color:#fff}

.quiz__nav{position:relative;z-index:2;padding-top:clamp(14px,1.8vw,22px)}
.quiz__back{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream-56);transition:color .35s}
.quiz__back:hover{color:var(--ember)}

.quiz__result{position:relative;z-index:2;display:grid;gap:16px;animation:fadeUp .7s var(--ease-out) both}
.quiz__result[hidden]{display:none}
.quiz__scorelabel{margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56)}
.quiz__score{margin:0;display:flex;align-items:baseline;gap:10px;line-height:1}
.quiz__score b{font-size:clamp(3rem,7vw,5.2rem);font-weight:500;letter-spacing:-.045em;color:var(--ember);font-variant-numeric:tabular-nums}
.quiz__score em{font-style:normal;font-size:clamp(1rem,1.6vw,1.35rem);color:var(--cream-56)}
.quiz__meter{display:flex;gap:4px;margin:2px 0 6px}
.quiz__meter i{flex:1;height:7px;border-radius:2px;background:var(--cream-06);transition:background .5s var(--ease)}
.quiz__meter i.is-on{background:linear-gradient(90deg,rgba(220,80,0,.7),var(--ember))}
.quiz__verdict{margin:4px 0 0;font-size:var(--fs-h2);font-weight:500;line-height:.96;letter-spacing:-.025em;text-transform:uppercase;max-width:18ch}
.quiz__msg{max-width:60ch}
.quiz__recap{display:grid;gap:0;margin-top:clamp(10px,1.6vw,20px);border-top:1px solid var(--line)}
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:14px 16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line)}
.rec__mark{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-family:var(--mono);font-size:.6rem;
  border:1px solid var(--cream-24);color:var(--cream-56);align-self:start}
.rec__mark.is-good{border-color:var(--ember);color:var(--ember)}
.rec__k{margin:0;font-size:.95rem;font-weight:500}
.rec__pts{font-family:var(--mono);font-size:.68rem;color:var(--cream-56);white-space:nowrap}
.rec__why{grid-column:2 / -1;margin:6px 0 0;font-size:.89rem;line-height:1.52;color:var(--cream-62);max-width:64ch}
.rec__why b{color:var(--cream);font-weight:600}
.quiz__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(12px,1.8vw,22px)}
.quiz__wink{margin:4px 0 0;font-family:var(--mono);font-size:.64rem;line-height:1.7;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-56);max-width:56ch}

@media (max-width:720px){
  .quiz__stage{min-height:0}
  .opt{padding:13px 14px;gap:12px;font-size:.9rem}
  .rec{grid-template-columns:auto 1fr}
  .rec__pts{grid-column:2;justify-self:start}
}

/* =========================================================
   JULIEN — l'offre réelle
   ========================================================= */
/* =========================================================
   APRÈS LA BASCULE — LA MÉTHODE ET L'OFFRE
   Règle de forme : dans la fiction tout se déplie (accordéon,
   carrousel, cartes au survol) ; ici tout est montré d'un coup.
   Des filets, des colonnes, aucun objet à manipuler.
   ========================================================= */
.method{padding:var(--sec-y) var(--gutter)}
.method__inner{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(34px,5vw,70px)}
.method__head{display:grid;gap:20px;max-width:58ch}

.pillars{margin:0;display:grid;gap:0}
.pillar{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(20px,4vw,70px);padding:clamp(24px,3vw,40px) 0;
  border-top:1px solid var(--line);
}
.pillar:last-child{border-bottom:1px solid var(--line)}
.pillar dt{
  font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:600;line-height:1.16;
  letter-spacing:-.015em;color:var(--cream);
}
.pillar dd{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--cream-62);max-width:62ch}
.pillar dd b{color:var(--cream)}

/* Le seul visage du site, et la seule photographie. Tout le reste est
   fabriqué — le stylo, l'atelier, le papier. Elle arrive après la
   Divulgation : c'est là que le site cesse d'être une construction. */
.sign{
  display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;
}
.sign__portrait{margin:0}
.sign__portrait img{display:block;width:100%;height:auto}
.sign__text{display:grid;gap:18px;max-width:70ch}
.sign__who{
  margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ember);
}
.sign__what{margin:0;font-size:var(--fs-lead);line-height:1.6;color:var(--cream-80)}
.sign__facts{
  list-style:none;margin:6px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);
}
.sign__facts li{display:grid;gap:6px}
.sign__facts b{
  font-size:clamp(1.4rem,2.6vw,2rem);font-weight:500;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ember);
}
.sign__facts span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-56);
}

/* le parcours : trois noms qui se vérifient en dix secondes */
.sign__path{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:0}
.sign__path li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:11px 0;border-top:1px solid var(--line);
}
.sign__path li:last-child{border-bottom:1px solid var(--line)}
.sign__path b{font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.sign__path span{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--cream-56);
}

/* les modalités pratiques : une ligne, pas une section. Le point précède
   chaque mention, ce qui reste correct quand la ligne se replie. */
.terms{
  margin:0;display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,44px);
  padding-top:clamp(18px,2.4vw,30px);border-top:1px solid var(--line);
}
.terms span{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-62);
}
.terms span::before{
  content:"";width:4px;height:4px;border-radius:50%;background:var(--ember);flex:none;
}

/* ---------- les deux formats ---------- */
.sell{padding:var(--sec-y) var(--gutter)}
.sell__inner{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(30px,4vw,56px)}
.sell__head{display:grid;gap:20px;max-width:58ch}

.band{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);
  gap:clamp(20px,4vw,70px);padding:clamp(26px,3.2vw,44px) 0;
  border-top:1px solid var(--line);
}
.band:last-of-type{border-bottom:1px solid var(--line)}
.band__id{display:grid;gap:8px;align-content:start}
.band__name{
  margin:0;font-size:clamp(1.15rem,1.9vw,1.7rem);font-weight:600;
  letter-spacing:-.02em;line-height:1.1;color:var(--cream);
}
.band__time{
  margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-56);
}
/* le montant et sa devise tiennent sur une seule ligne : en grille, un nœud
   de texte et un <em> deviendraient deux éléments, donc deux lignes. */
.band__price{margin:14px 0 0;display:grid;gap:5px;justify-items:start}
.band__n{
  font-size:clamp(2rem,4vw,3.2rem);font-weight:500;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ember);white-space:nowrap;
}
.band__n em{font-style:normal;font-size:.52em;letter-spacing:-.02em}
.band__unit{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-56);
}
.band__body{display:grid;gap:18px;align-content:start}
.band__pitch{margin:0;font-size:var(--fs-lead);line-height:1.58;color:var(--cream-80);max-width:56ch}
.band__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;max-width:60ch}
.band__list li{
  position:relative;padding-left:22px;font-size:.96rem;line-height:1.5;color:var(--cream-62);
}
.band__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:1px;background:var(--ember);
}

/* ---------- le catalogue des sujets ---------- */
.topics{display:grid;gap:16px;padding-top:6px}
.topics__label{
  margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-56);
}
.topics ul{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px clamp(18px,2.6vw,38px);
}
.topics li{
  font-size:clamp(1rem,1.5vw,1.28rem);font-weight:500;letter-spacing:-.012em;color:var(--cream-80);
}
.topics li{
  padding-bottom:7px;border-bottom:1px solid var(--line);
}
.topics__note{margin:0;font-size:.94rem;color:var(--cream-56)}

/* ---------- la porte séparée : Sprint Site ---------- */
.sprint{position:relative;padding:clamp(80px,12vw,150px) var(--gutter);overflow-x:clip}
.sprint::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(80vw 60vh at 22% 40%,rgba(220,80,0,.24),transparent 66%);
}
.sprint__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;display:grid;gap:24px}
/* pas de retour à la ligne forcé : sur un téléphone étroit, une ligne
   imposée dépasse la fenêtre. La mesure se fait en caractères. */
.sprint__inner h2{max-width:21ch}
.sprint__inner .lead{max-width:64ch}
.sprint__grid{
  margin-top:clamp(16px,2.4vw,34px);display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(26px,4vw,70px);align-items:start;
}
.sprint__list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sprint__list li{
  position:relative;padding-left:24px;font-size:1rem;line-height:1.5;color:var(--cream-80);
}
.sprint__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--cream-56);
}
.sprint__price{
  display:grid;gap:8px;justify-items:start;
  padding:clamp(22px,2.6vw,34px);border:1px solid rgba(255,237,215,.22);border-radius:12px;
  background:rgba(16,9,4,.26);
}
.sprint__amount{
  margin:0;font-size:clamp(2.4rem,5vw,4rem);font-weight:500;letter-spacing:-.045em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--cream);
}
.sprint__amount em{font-style:normal;font-size:.48em}
.sprint__unit{
  margin:0 0 10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-62);
}

@media (max-width:900px){
  .pillar,.band,.sprint__grid{grid-template-columns:1fr;gap:16px}
  .sign{grid-template-columns:1fr;gap:26px}
  .sign__portrait img{max-width:300px}
  .band__price{margin-top:6px}
}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{position:relative;padding:clamp(100px,16vh,190px) var(--gutter);text-align:center;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(70vw 60vh at 50% 60%,rgba(220,80,0,.26),transparent 66%)}
.cta__inner{position:relative;z-index:2;max-width:1180px;margin-inline:auto;display:grid;gap:26px;justify-items:center}
.cta .lead{text-align:center}
.cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.foot{padding:clamp(60px,8vw,110px) var(--gutter) 30px;border-top:1px solid var(--line)}
.foot__top{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,90px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,50px)}
.foot__col{display:grid;gap:11px;align-content:start}
.foot__label{margin:0 0 6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56)}
.foot__col a{font-size:.92rem;color:var(--cream-62);width:fit-content;transition:color .35s,transform .45s var(--ease)}
.foot__col a:hover{color:var(--ember);transform:translateX(4px)}
.foot__mark{max-width:var(--maxw);margin-inline:auto;overflow:hidden;line-height:.84;padding-bottom:.04em}
.foot__mark span{display:block;font-size:clamp(4rem,19.5vw,17rem);font-weight:600;letter-spacing:-.04em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--cream-24),rgba(255,237,215,.03));
  -webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap;text-align:center}
.foot__bottom{max-width:var(--maxw);margin:clamp(24px,3vw,44px) auto 0;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:baseline}
.foot__bottom p{margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-56)}
.foot__disclaimer{max-width:62ch;text-align:right}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .cards,.bench__notes,.quotes__grid,.plans,.foot__top{grid-template-columns:repeat(2,1fr)}
  .plan--feature{grid-column:span 2}
  .model,.research__grid,.faq,.config__inner{grid-template-columns:1fr}
  .model__head,.faq__head{position:static}
  .hero__floor{gap:26px}
}
@media (max-width:1100px){
  .nav__links a[href="#benchmarks"],.nav__links a[href="#recherche"]{display:none}
}
@media (max-width:900px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:grid}
  .anatomy{grid-template-columns:1fr}
  .anatomy__stage{height:56svh;top:62px}
  .anatomy__stage .pen3d{height:50svh}
  .anatomy__steps{padding-block:40px;gap:70px}
  .step{opacity:1}
  .hero__wordmark{font-size:clamp(3.4rem,19vw,7rem)}
  .reveal-act__body{justify-self:start}
  .reveal-act__pen{opacity:.2}
}
@media (max-width:720px){
  .cards,.bench__notes,.quotes__grid,.plans,.foot__top{grid-template-columns:1fr}
  .plan--feature{grid-column:auto}
  .hero{padding-top:clamp(84px,11vh,120px)}
  .hero__top{gap:8px}
  .hero__lead{font-size:.94rem;line-height:1.36;max-width:36ch}
  /* le cartel devient opaque : la feuille ne doit plus transparaître derrière le texte */
  .hero__card{
    max-width:100%;
    background:rgba(181,150,113,.64);
    backdrop-filter:blur(22px) saturate(104%);-webkit-backdrop-filter:blur(22px) saturate(104%);
  }
  .hero__claim{font-size:.95rem}
  .hero__cta .btn{padding:13px 18px;font-size:.8rem}
  .hero__meta{justify-items:start;text-align:left;width:100%;gap:12px}
  .hero__stats{grid-template-columns:1fr;gap:7px;width:100%}
  .hero__stats li{display:flex;align-items:baseline;gap:10px;justify-items:start}
  .hero__stats b{font-size:1.12rem;min-width:5.2ch}
  /* la nature morte se replie dans le coin, simplement entrevue */
  .mockup{height:min(70%,580px)}
  .mockup__mat{left:-6%;right:-10%;top:4%;bottom:11%}
  .mockup__paper{width:124px;left:auto;right:0;bottom:2%;padding:15px 13px;gap:6px}
  .mockup__paper-head{height:7px}
  .mockup__paper-line{height:3px}
  .mockup__paper-sign{margin-top:15px;font-size:.4rem}
  .mockup__paper-rule{margin-top:2px}
  .mockup__pen{left:auto;right:4.5%;bottom:4%;width:26px}
  .mockup__clip,.mockup__rule{display:none}
  .bench__row{grid-template-columns:1fr auto;row-gap:10px}
  .bench__row .bar{grid-column:1 / -1;order:3}
  .model__tr{grid-template-columns:1fr auto;row-gap:4px}
  .model__tr span:nth-child(3){display:none}
  .model__tr--head{display:none}
  .foot__bottom{flex-direction:column}
  .foot__disclaimer{text-align:left}
  .cursor{display:none}
  .switch{width:100%}
  .switch__btn{flex:1}
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
  .line > i{transform:none}
  .grain{display:none}
  .manifeste__text w{color:var(--cream)}
  /* le plan est tracé d'emblée : rien ne se tire sous les yeux */
  .draft__corner,.draft__ticks,.draft__cross{stroke-dashoffset:0}
  .draft__nodes{opacity:1}
  .capsule{animation:none;transform:translateX(-50%)}
  /* le bandeau s'arrête sur sa première liste ; la copie de bouclage,
     qui ne sert qu'à la couture, disparaît */
  /* le bandeau s'immobilise sur sa première liste ; la seconde ne sert
     qu'à la couture de la boucle et déborde hors du cadre */
  .ticker__track{animation:none;transform:none}
}

/* ---------- Décalage des lignes de titre ----------
   Le pas est une variable pour que le régime réel puisse resserrer la
   cascade sans réécrire les cinq règles. À .08s, les valeurs calculées
   sont celles d'origine : .02 / .10 / .18 / .26 / .34 s. */
.line:nth-child(1) > i{transition-delay:calc(var(--line-step) * .25)}
.line:nth-child(2) > i{transition-delay:calc(var(--line-step) * 1.25)}
.line:nth-child(3) > i{transition-delay:calc(var(--line-step) * 2.25)}
.line:nth-child(4) > i{transition-delay:calc(var(--line-step) * 3.25)}
.line:nth-child(5) > i{transition-delay:calc(var(--line-step) * 4.25)}
.line:nth-child(6) > i{transition-delay:.42s}
.line .w{display:inline}

/* ---------- Entrée après chargement ---------- */
.hero__glow{opacity:0;transition:opacity 1.4s var(--ease)}
body.is-ready .hero__glow{opacity:1}

/* =========================================================
   PAGES LÉGALES
   ========================================================= */
.legal{padding:calc(92px + var(--gutter)) var(--gutter) var(--sec-y);max-width:var(--maxw);margin-inline:auto}
.legal__head{display:grid;gap:18px;padding-bottom:clamp(34px,4.6vw,66px);border-bottom:1px solid var(--line);margin-bottom:clamp(30px,4vw,60px)}
.legal__head .display{font-size:clamp(2rem,4.6vw,4.4rem);max-width:20ch}
.legal__date{margin:0;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-56)}
.legal__grid{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:clamp(30px,5vw,80px);align-items:start}
.toc{position:sticky;top:104px;display:grid;gap:9px;align-content:start;min-width:0}
.toc p{margin:0 0 6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56)}
.toc a{font-size:.88rem;color:var(--cream-62);line-height:1.34;transition:color .35s,transform .4s var(--ease)}
.toc a:hover{color:var(--ember);transform:translateX(3px)}
.legal__body{display:grid;gap:clamp(30px,3.4vw,48px);max-width:78ch;min-width:0}
.art{display:grid;gap:13px;scroll-margin-top:110px;min-width:0}
.art h2{margin:0;font-size:clamp(1.12rem,1.8vw,1.5rem);font-weight:500;text-transform:uppercase;letter-spacing:-.015em;line-height:1.1}
.art h2 i{font-style:normal;color:var(--ember);font-family:var(--mono);font-size:.68em;margin-right:12px;letter-spacing:.1em}
.art h3{margin:8px 0 0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.art p,.art li{margin:0;color:var(--cream-80);line-height:1.62;font-size:.97rem}
.art ul,.art ol{margin:0;padding-left:20px;display:grid;gap:8px}
.art li::marker{color:var(--ember)}
.art b{color:var(--cream);font-weight:600}
.art a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.art table{width:100%;max-width:100%;border-collapse:collapse;margin-top:4px;table-layout:fixed}
.art th,.art td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top;overflow-wrap:break-word}
.art th{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-56);font-weight:400}
.art td:first-child{color:var(--cream)}
.note-box{padding:20px 22px;border:1px solid rgba(220,80,0,.4);border-left-width:3px;border-radius:8px;
  background:rgba(220,80,0,.07);display:grid;gap:8px}
.note-box p{font-size:.92rem;color:var(--cream-80)}
.note-box > b:first-child{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.note-box p b{display:inline;font-family:inherit;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--cream);font-weight:600}

/* champs à compléter — volontairement impossibles à manquer */
.tbd{display:inline;padding:1px 7px;border-radius:4px;background:rgba(220,80,0,.22);
  border:1px dashed rgba(220,80,0,.65);color:#ffb98a;font-family:var(--mono);font-size:.82em;letter-spacing:.04em;
  white-space:normal;overflow-wrap:anywhere;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tbd--block{display:block;padding:14px 16px;line-height:1.6}

.legal__back{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cream-56);transition:color .35s}
.legal__back:hover{color:var(--ember)}
.foot__legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.foot__legal a{font-size:.84rem;color:var(--cream-56);transition:color .35s}
.foot__legal a:hover{color:var(--ember)}

@media (max-width:1180px){
  .legal__grid{grid-template-columns:1fr}
  .toc{position:static;border-bottom:1px solid var(--line);padding-bottom:24px}
}
@media (max-width:720px){
  .art table,.art tbody,.art tr,.art td{display:block;width:100%}
  .art thead{display:none}
  .art tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .art td{border:0;padding:2px 0}
  .art td:first-child{font-weight:600}
  .tbd{white-space:normal}
}

/* =========================================================
   STYLO 3D — prisme hexagonal en CSS, piloté au défilement
   ========================================================= */
.pen3d{position:relative;width:100%;height:100%;perspective:1150px;perspective-origin:50% 44%}
.pen3d__rot{position:absolute;left:0;top:0;right:0;bottom:0;transform-style:preserve-3d;will-change:transform}
.p-face{position:absolute;left:50%;top:50%;transform-style:preserve-3d;--l:.5}

/* corps translucide : l'opacité suit l'éclairage calculé */
.p-barrel{
  --f:.5;
  background:rgba(255,237,215,calc(.03 + var(--f) * .54 + var(--l) * .17));
  box-shadow:inset 0 0 16px rgba(255,237,215,calc(var(--f) * .3));
}
/* capuchon et culot : couleur de base + voile sombre selon l'angle */
.p-cap{
  background-color:#dc5000;
  background-image:linear-gradient(rgba(0,0,0,calc((1 - var(--l)) * .8)),rgba(0,0,0,calc((1 - var(--l)) * .8)));
  backface-visibility:hidden;
}
.p-clip{
  background-color:#c94800;
  background-image:linear-gradient(rgba(0,0,0,calc((1 - var(--l)) * .72)),rgba(0,0,0,calc((1 - var(--l)) * .72)));
  border-radius:6px 6px 3px 3px;
}
.p-ink{
  background-color:#17233c;
  background-image:linear-gradient(rgba(0,0,0,calc((1 - var(--l)) * .62)),rgba(0,0,0,calc((1 - var(--l)) * .62)));
}
.p-tip{
  background-color:#d9ab62;
  background-image:linear-gradient(rgba(0,0,0,calc((1 - var(--l)) * .82)),rgba(0,0,0,calc((1 - var(--l)) * .82)));
  backface-visibility:hidden;
}
.p-disc{
  background-color:#b93f00;
  background-image:linear-gradient(rgba(0,0,0,calc((1 - var(--l)) * .55)),rgba(0,0,0,calc((1 - var(--l)) * .55)));
}
.p-ball{
  position:absolute;left:50%;top:50%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fffaf0,#e8cb9b 46%,#7d5a24);
}
.pen3d__glow{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:150%;aspect-ratio:1;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(220,80,0,.24),transparent 62%);
  filter:blur(6px);
}

/* =========================================================
   FORMAT — planche graphique pop (cadre pointillé + interface)
   ========================================================= */
.pop{padding:var(--sec-y) var(--gutter);overflow-x:clip}
.pop__inner{position:relative;max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(18px,2.4vw,30px)}
.pop__kicker{
  margin:0;font-size:clamp(.92rem,1.5vw,1.25rem);font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--cream-56);
}
/* casse normale et grand corps — la signature typographique de la référence */
.pop__title{
  margin:0;font-size:clamp(2.3rem,7.4vw,6.2rem);
  color:var(--cream);opacity:.2;transition:opacity .35s linear;max-width:16ch;
}
.pop__title sup{font-size:.42em;color:var(--ember);top:-.5em;margin-left:.06em}

.pop__frame{
  position:relative;margin-top:clamp(14px,2.4vw,30px);
  border:1px dashed rgba(255,237,215,.28);border-radius:4px;
  min-height:clamp(380px,56vh,620px);
  display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 50%,rgba(220,80,0,.10),transparent 70%);
}
.pop__corner{position:absolute;width:9px;height:9px;border:1px solid var(--cream-56)}
.pop__corner--tl{top:-1px;left:-1px;border-right:0;border-bottom:0}
.pop__corner--tr{top:-1px;right:-1px;border-left:0;border-bottom:0}
.pop__corner--bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.pop__corner--br{bottom:-1px;right:-1px;border-left:0;border-top:0}
.pop__dot{position:absolute;top:18px;right:20px;width:9px;height:9px;border-radius:50%;background:var(--cream);
  animation:pulse 2.6s var(--ease) infinite}
.pop__ring{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(74%,520px);aspect-ratio:1;border:1px dashed rgba(255,237,215,.2);border-radius:50%;
  animation:spin 46s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.pop__tick{position:absolute;left:50%;width:1px;height:16px;background:var(--cream-56)}
.pop__tick--t{top:8%}
.pop__tick--b{bottom:8%}
.pop__pen{position:relative;width:clamp(120px,14vw,190px);height:min(46vh,430px);z-index:2}

/* fausse interface — second accent, franchement pop */
.hud{
  position:absolute;z-index:3;right:clamp(12px,6%,64px);top:52%;width:min(300px,76%);
  display:grid;gap:9px;padding:16px 18px;border-radius:12px;
  border:1px solid var(--teal);background:rgba(10,30,28,.78);backdrop-filter:blur(8px);
  box-shadow:0 0 34px rgba(55,224,200,.18);
  animation:hudIn .9s var(--ease-out) both;
}
@keyframes hudIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.hud__row{display:flex;flex-wrap:wrap;gap:7px}
.hud__chip{
  padding:4px 10px;border-radius:999px;border:1px solid rgba(55,224,200,.5);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--teal);
}
.hud__src{margin:2px 0 0;font-family:var(--mono);font-size:.55rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(55,224,200,.65)}
.hud__msg{margin:0;font-size:.92rem;line-height:1.34;font-weight:600;color:#dffaf4}
.hud__btn{
  justify-self:end;padding:7px 16px;border-radius:999px;background:var(--teal);color:#062b26;
  font-size:.78rem;font-weight:700;
}

.pop__foot{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-end;margin-top:8px}
.pop__note{margin:0;max-width:52ch;color:var(--cream-62);line-height:1.5;font-size:.95rem}
.footnote{
  margin:0;text-align:right;max-width:32ch;padding-top:10px;border-top:1px dashed rgba(255,237,215,.28);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-56);
}
.footnote span{color:var(--ember)}

.scroll-cue{
  justify-self:end;display:inline-flex;align-items:center;gap:14px;margin-top:6px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-56);
  transition:color .35s;
}
.scroll-cue:hover{color:var(--cream)}
.scroll-cue i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px dashed rgba(255,237,215,.42);
}
.scroll-cue i::after{
  content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-1px) rotate(45deg);animation:nudge 2.2s var(--ease) infinite;
}
@keyframes nudge{0%,100%{transform:translateY(-2px) rotate(45deg)}50%{transform:translateY(2px) rotate(45deg)}}

@media (max-width:820px){
  .pop__frame{min-height:0;padding:30px 16px 22px;grid-auto-flow:row;gap:18px}
  .pop__pen{height:38vh}
  .hud{position:relative;right:auto;top:auto;width:100%}
  .pop__ring{width:min(96%,360px)}
  .footnote{text-align:left}
  .scroll-cue{justify-self:start}
}

/* =========================================================
   CARROUSEL — témoignages faisables à la main comme au clavier
   ========================================================= */
.carousel{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(18px,2.4vw,30px)}
.carousel__viewport{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  scroll-snap-type:x mandatory;cursor:grab;
  -webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.carousel__viewport.is-dragging *{pointer-events:none}
.carousel__track{display:flex;gap:clamp(14px,2vw,28px);width:max-content;padding-block:4px}
.carousel .quote{
  flex:0 0 clamp(272px,30vw,400px);scroll-snap-align:center;
  transition:transform .7s var(--ease-out),border-color .5s,opacity .6s var(--ease);
}
.carousel__bar{display:flex;align-items:center;justify-content:space-between;gap:20px}
.carousel__dots{display:flex;gap:8px}
.carousel__dots button{
  width:28px;height:3px;border-radius:999px;background:var(--cream-12);
  transition:background .4s var(--ease),width .4s var(--ease);
}
.carousel__dots button.is-on{background:var(--ember);width:44px}
.carousel__nav{display:flex;gap:10px}
.carousel__arrow{
  position:relative;width:44px;height:44px;border-radius:50%;
  border:1px dashed rgba(255,237,215,.34);transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.carousel__arrow::after{
  content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;
  border-left:1.5px solid var(--cream-62);border-bottom:1.5px solid var(--cream-62);
  transform:translateX(2px) rotate(45deg);transition:border-color .4s;
}
.carousel__arrow--next::after{transform:translateX(-2px) rotate(-135deg)}
.carousel__arrow:hover{border-color:var(--ember);background:rgba(220,80,0,.12)}
.carousel__arrow:hover::after{border-color:var(--cream)}
.carousel__arrow:disabled{opacity:.3;cursor:default}
.carousel__arrow:disabled:hover{border-color:rgba(255,237,215,.34);background:none}

/* =========================================================
   CONTACT — les deux chemins : l'agenda, ou le formulaire
   ========================================================= */
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,42px);
  width:100%;max-width:1100px;margin-top:clamp(20px,3vw,40px);text-align:left;
}
.contact__pick,.contact__form{
  padding:clamp(24px,2.6vw,38px);border-radius:14px;
  border:1px solid var(--cork);background:linear-gradient(160deg,rgba(56,36,22,.5),rgba(16,9,4,.34));
  display:grid;gap:16px;align-content:start;
}
.contact__pick{border-color:rgba(220,80,0,.45);background:linear-gradient(160deg,rgba(220,80,0,.15),rgba(16,9,4,.4))}
.contact__tag{
  margin:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cream-56);
}
.contact__h{margin:0;font-size:clamp(1.3rem,2.1vw,1.8rem);font-weight:600;line-height:1.14;letter-spacing:-.02em}
.contact__points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contact__points li{position:relative;padding-left:20px;color:var(--cream-80);font-size:.94rem;line-height:1.45}
.contact__points li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--ember)}
.contact__pick .btn{justify-self:start;margin-top:4px}
.contact__note{margin:0;font-family:var(--mono);font-size:.58rem;line-height:1.7;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-56)}

.contact__form form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-62)}
.field label i{font-style:normal;color:var(--cream-56)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:9px;
  border:1px solid var(--cork);background:rgba(16,9,4,.55);color:var(--cream);
  font-family:var(--sans);font-size:.95rem;line-height:1.4;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.field textarea{resize:vertical;min-height:96px}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cream-62) 50%),linear-gradient(135deg,var(--cream-62) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.field select option{background:#1a0f07;color:var(--cream)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--ember);background:rgba(16,9,4,.75);
  box-shadow:0 0 0 3px rgba(220,80,0,.18);
}
.field input::placeholder,.field textarea::placeholder{color:var(--cream-24)}
.contact__form .btn{justify-self:start;margin-top:4px}
.contact__rgpd{margin:2px 0 0;font-size:.82rem;line-height:1.5;color:var(--cream-56)}
.contact__rgpd a{color:var(--cream-62);text-decoration:underline;text-underline-offset:3px}
.contact__rgpd a:hover{color:var(--ember)}
/* pot de miel : invisible pour l'humain, tentant pour le robot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){
  .contact{grid-template-columns:1fr}
}

/* ---------- page de remerciement ---------- */
.merci{min-height:100svh;display:grid;place-items:center;padding:var(--gutter);text-align:center}
.merci__inner{display:grid;gap:22px;justify-items:center;max-width:56ch}
.merci__mark{font-size:clamp(2.6rem,9vw,6rem);font-weight:700;letter-spacing:-.04em;text-transform:uppercase;line-height:.9;margin:0}
.merci__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}