/* =========================================================
   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}
/* `overflow:hidden` est ce qui permet à la ligne de monter depuis le bas :
   la boîte masque le texte tant qu'il n'est pas remonté. Mais avec une
   interligne de .94, cette boîte est plus courte que les glyphes eux-mêmes,
   et elle rogne ce qui dépasse. Le padding l'élargit, la marge négative
   annule l'effet sur le flux — il faut donc le faire des DEUX côtés :
   en haut pour les accents, en bas pour les jambages du y, du g et du p.
   Seul le haut était compensé, d'où le « y » de « stylo » coupé net. */
.line{display:block;overflow:hidden;padding-block:.14em .18em;margin-block:-.14em -.18em}
.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.2rem,13.2vw,12.5rem);font-weight:700;line-height:.84;white-space:nowrap;
  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 whisky vu du dessus, sur son sous-verre en liège.
   Le bon pour accord qui occupait cette place est parti : il redisait en
   petit ce que le cartel dit en grand. Le verre, lui, raconte une scène —
   quelqu'un vient de poser son stylo — et le liège salue la référence,
   qui vend un sous-verre avec le même sérieux. Tout est dessiné en SVG :
   l'ombre part en bas à droite, comme celle du stylo, la lumière venant
   du haut-droit (voir le voile `.mockup__haze`). */
.mockup__glass{
  position:absolute;right:9%;top:22%;width:clamp(180px,17.5vw,280px);height:auto;overflow:visible;
  transform:rotate(-8deg);
}
.glass__shade{fill:#000;opacity:.5}
/* le reflet du liquide tourne très lentement : l'œil le perçoit sans le suivre */
.glass__ice{transform-origin:160px 160px;animation:ice-drift 26s ease-in-out infinite alternate}
.glass__glint{animation:glint 9s var(--ease) infinite alternate}
@keyframes ice-drift{from{transform:rotate(0)}to{transform:rotate(14deg)}}
@keyframes glint{from{opacity:.6}to{opacity:1}}

/* le trombone */
.mockup__clip{
  position:absolute;left:38%;top:66%;width:17px;height:48px;
  border:2.5px solid rgba(206,214,222,.75);border-radius:12px;
  transform:rotate(-24deg);
  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;
}
/* Le stylo couché en travers, la pointe vers le verre. Son angle de base
   est lu par le script dans `data-rot` : le CSS ne sert qu'au premier
   rendu. L'ombre est décalée dans le repère du stylo, donc tourné avec
   lui — (-11, 25) une fois tourné de -58° retombe en bas à droite,
   parallèle à celle du verre. */
.mockup__pen{
  position:absolute;left:50%;top:30%;width:clamp(32px,3.7vw,58px);height:auto;
  transform:rotate(-58deg);transform-origin:50% 50%;
  filter:drop-shadow(-11px 25px 22px rgba(0,0,0,.6));
  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;
}
/* Comme sur la référence : un cartel en colonne, plus haut que large. Le
   titre en haut, un filet pointillé, puis le bouton calé à droite en bas.
   C'est sa hauteur qui le fait remonter vers le milieu de l'écran : le
   pied reste aligné sur les chiffres de droite. */
.hero__card{
  flex:0 0 auto;width:clamp(250px,21vw,310px);max-width:100%;
  /* la hauteur suit l'écran, mais jamais au point de pousser le pied du
     hero sous la ligne de flottaison : 450 px, c'est la barre, le nom et
     le texte d'accroche au-dessus. */
  min-height:clamp(240px,min(46svh,100svh - 450px),440px);
  display:flex;flex-direction:column;gap:14px;padding:clamp(20px,1.9vw,28px);border-radius:12px;
  border:1px solid var(--cork);
  /* Le cartel était le seul objet beige du site — une couleur relevée sur la
     référence et reprise nulle part ailleurs. Il prend la teinte des autres
     cadres (.card, .quiz__card) : sombre, translucide, bordée de cork.
     Bénéfice second : son texte était déjà en crème clair, donc peu contrasté
     sur du beige. Le flou reste, il efface la trame du tapis. */
  background:linear-gradient(160deg,rgba(56,36,22,.74),rgba(16,9,4,.62));
  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.18rem,1.72vw,1.6rem);font-weight:600;line-height:1.12;
  text-transform:uppercase;letter-spacing:-.005em;color:#fff9f2;
}
.hero__cta{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;
  margin-top:auto;padding-top:clamp(16px,2vh,22px);border-top:1px dotted rgba(255,249,242,.5);
}
.hero__card .cta-reply{margin:0;min-height:0}

.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
   ========================================================= */
/* La mise en page de la deuxième section de la référence : un texte en
   grand à gauche, un texte en monospace à droite, sur un fond de teinte
   pierre, seul fond clair de la page avec la planche du prix. La main qui
   tenait le stylo au centre a été retirée : les deux textes se partagent
   la largeur. La teinte est une variable : si elle doit coller au pixel
   près à la référence, c'est la seule valeur à changer. */
.stage{
  --stage-bg:#d9cfc1;
  --stage-ink:var(--walnut);
  --stage-ink-62:rgba(16,9,4,.62);
  --stage-ink-16:rgba(16,9,4,.16);
  /* z-index : le stylo 3D de l'Anatomie, juste après, déborde de sa
     bande vers le haut sur téléphone ; sur ce fond clair il se voyait
     par-dessus le texte. La section passe donc devant. */
  position:relative;z-index:1;overflow:hidden;
  background:
    radial-gradient(46% 62% at 50% 64%,rgba(255,249,240,.55),transparent 72%),
    var(--stage-bg);
  color:var(--stage-ink);
  padding:clamp(72px,9vw,140px) var(--gutter);
}
.stage__inner{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  grid-template-rows:auto 1fr;column-gap:clamp(20px,5vw,96px);
}
.stage__label{grid-column:1 / -1;color:var(--stage-ink-62);margin-bottom:clamp(20px,3vw,40px)}
.stage__lede{
  grid-column:1;grid-row:2;align-self:center;margin:0;
  font-size:clamp(1.7rem,3.5vw,3.6rem);font-weight:500;line-height:1.04;letter-spacing:-.034em;
  max-width:15ch;
}
.manifeste__text w{display:inline-block;color:var(--stage-ink-16);transition:color .5s var(--ease)}
.manifeste__text w.is-lit{color:var(--stage-ink)}
.stage__side{
  grid-column:2;grid-row:2;align-self:end;justify-self:end;
  display:grid;gap:22px;max-width:32ch;
}
.stage__note{
  margin:0;font-family:var(--mono);font-size:clamp(.72rem,.86vw,.84rem);line-height:1.7;
  letter-spacing:.06em;text-transform:uppercase;color:var(--stage-ink);
}
.stage__sig{
  margin:0;padding-top:16px;border-top:1px solid var(--stage-ink-16);
  font-family:var(--mono);font-size:var(--fs-label);line-height:1.7;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stage-ink-62);
}
/* Sous 900 px, les deux colonnes s'empilent : le grand texte, puis le
   texte monospace. */
@media (max-width:900px){
  .stage__inner{grid-template-columns:1fr;grid-template-rows:none;row-gap:26px}
  .stage__label{margin-bottom:0}
  .stage__lede,.stage__side{grid-column:1;grid-row:auto}
  .stage__lede{max-width:16ch}
  .stage__side{justify-self:start;max-width:44ch}
}

/* =========================================================
   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}

/* =========================================================
   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}

/* =========================================================
   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}
.reveal-act__body b{color:var(--cream);font-weight:600}
/* Le stylo était à droite, où il serrait la colonne de texte — d'où le
   padding de 250 px qu'elle portait pour s'en écarter. Il passe à gauche,
   dans le quart de page que la composition laissait vide : le vide se
   remplit, et le texte récupère sa largeur. */
.reveal-act__pen{position:absolute;left:2%;bottom:-11%;transform:rotate(-15deg);
  width:clamp(74px,8vw,126px);height:min(60vh,620px);opacity:.3;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}
.method__head .lead{max-width:58ch}
/* trois promesses, une par ligne : le titre porte l'offre entière */
.method__title{font-size:clamp(1.9rem,4vw,3.6rem);line-height:1.02;max-width:24ch}

.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. */
/* Le bloc se lisait tassé : un portrait haut à côté d'une colonne de texte
   serrée qui s'arrêtait à mi-hauteur. Le portrait s'élargit, le texte se
   centre sur lui et chaque élément prend de l'air. */
.sign{
  display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(28px,6vw,110px);align-items:center;
  padding-top:clamp(20px,4vw,64px);
}
.sign__portrait{margin:0}
/* Le portrait ressortait comme une photo posée sur la page : blancs de
   chemise à pleine luminance sur un fond walnut. Il est baissé d'un tiers
   et réchauffé juste assez pour que ses gris tirent vers le brun du fond —
   loin de la bichromie sépia abandonnée au §15 : les tons chair restent.
   Les deux bords latéraux se dissolvent comme le bas le faisait déjà :
   l'épaule n'est plus tranchée net par le cadre de l'image. */
.sign__portrait img{
  display:block;width:100%;height:auto;
  filter:brightness(.7) contrast(1.06) sepia(.2) saturate(.92);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 80%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 80%,transparent 100%);
}
.sign__text{display:grid;gap:clamp(22px,2.6vw,36px);max-width:68ch}
.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:clamp(1.1rem,1.5vw,1.5rem);line-height:1.55;color:var(--cream-80)}
.sign__facts{
  list-style:none;margin:clamp(6px,1.4vw,18px) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,80px);
}
.sign__facts li{display:grid;gap:10px}
.sign__facts b{
  font-size:clamp(1.8rem,3.4vw,2.8rem);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:15px 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}

.formats{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.format{
  display:grid;grid-template-columns:auto minmax(0,.7fr) minmax(0,1.3fr) auto;
  gap:clamp(18px,3.4vw,60px);align-items:baseline;
  padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--line);
}
.format__idx{
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.2em;color:var(--ember);
}
.format__name{
  margin:0;font-size:clamp(1.4rem,2.6vw,2.4rem);font-weight:600;
  letter-spacing:-.025em;line-height:1.05;color:var(--cream);
}
.format__pitch{margin:0;font-size:var(--fs-lead);line-height:1.55;color:var(--cream-80);max-width:46ch}
/* 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. */
.format__price{margin:0;display:grid;gap:8px;justify-items:end;text-align:right}
.format__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;
}
.format__n em{font-style:normal;font-size:.52em;letter-spacing:-.02em}
.format__unit{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--cream-62);
}

/* ---------- 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(--ember);   /* comme les 690 et 990 € de l'offre */
}
.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,.sprint__grid{grid-template-columns:1fr;gap:16px}
  .format{grid-template-columns:auto minmax(0,1fr);gap:14px 18px}
  .format__pitch,.format__price{grid-column:1 / -1}
  .format__price{justify-items:start;text-align:left;margin-top:4px}
  .sign{grid-template-columns:1fr;gap:30px;padding-top:0}
  .sign__portrait img{max-width:320px}
}

/* =========================================================
   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}

/* =========================================================
   PLANCHES — trois pleines pages dans la fiction
   =========================================================
   La fiction enchaîne neuf fonds sombres. Les planches cassent la suite,
   chacune dans sa propre couleur — ember, noir de tirage, crème — au lieu
   de trois fois le même crème : une première version les faisait toutes
   identiques, et la répétition annulait la rupture qu'elles devaient
   produire. Aucune couleur n'entre dans la palette.

   Ce ne sont pas des sections : pas de numéro, pas de `data-bg`, et le
   fond réactif garde simplement la teinte de la section d'avant. Elles
   n'ont pas non plus de pied de page : la pagination « Pl. 01 / 03 » et
   la marque en bas de planche venaient des visuels faits pour les
   réseaux, où elles signent une image isolée. Dans la page, elles
   signaient une page… qui est déjà signée. */
.plate{
  --ink:var(--walnut);
  --ink-62:rgba(16,9,4,.62);       /* 5,6:1 sur crème */
  --ink-14:rgba(16,9,4,.14);
  --ember-ink:#b84300;             /* ember assombri : 4,8:1 sur crème */
  position:relative;z-index:1;overflow:hidden;isolation:isolate;
  background:var(--cream);color:var(--ink);
  padding:clamp(64px,7.4vw,124px) var(--gutter);
}
.plate__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(30px,4.4vw,64px)}
.plate .eyebrow{color:var(--ink-62)}
.plate .eyebrow .dot{box-shadow:none}

/* ---------- Planche 1 : le témoignage, sur ember ----------
   Le walnut sur ember fait 4,9:1 au plus sombre du dégradé : le texte
   reste donc en walnut plein, jamais en walnut atténué, et le point de
   l'étiquette passe au walnut — un point ember sur ember disparaîtrait. */
.plate--quote{
  --ink-62:var(--walnut);
  background:
    radial-gradient(70% 90% at 12% 0%,rgba(255,154,88,.55),transparent 62%),
    radial-gradient(60% 80% at 100% 100%,rgba(110,36,0,.42),transparent 66%),
    var(--ember);
}
.plate--quote .eyebrow .dot{background:var(--walnut);animation:none}
.plate__quote{margin:0;display:grid;gap:clamp(22px,3vw,40px);padding-block:clamp(8px,2.6vw,40px)}
.plate__quote p{
  margin:0;max-width:22ch;
  font-size:clamp(1.75rem,4.7vw,4.4rem);font-weight:500;line-height:1.04;letter-spacing:-.032em;
}
.plate__quote footer{
  display:flex;align-items:center;gap:clamp(14px,2vw,26px);
  font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.plate__quote footer::before{content:"";flex:none;width:clamp(34px,4.4vw,64px);height:1.5px;background:var(--ink)}

/* la poche de manteau, au trait, qui rappelle la phrase sans l'illustrer
   mot pour mot : on ne voit que le capuchon et son agrafe */
.plate__pocket{
  position:absolute;z-index:1;right:clamp(-40px,4vw,110px);top:50%;
  width:clamp(200px,24vw,360px);height:auto;transform:translateY(-46%) rotate(6deg);
  overflow:visible;pointer-events:none;
}
.plate__pocket path{stroke:var(--walnut);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.plate__pocket .pk-fabric{fill:#c94a02}   /* opaque : le corps du stylo disparaît dedans */
.plate__pocket .pk-stitch{fill:none;stroke-dasharray:5 6;opacity:.7}
.plate__pocket .pk-crease{fill:none;opacity:.4}
.plate__pocket .pk-cap,.plate__pocket .pk-clip{fill:var(--walnut)}
.plate__pocket .pk-barrel{fill:#fff9f2}
.plate__pocket .pk-line{stroke:#fff9f2;opacity:.35}

/* ---------- Planche 2 : la nomenclature, en tirage de plan ----------
   Fond noir tramé comme un calque : filets de 32 px, repères de 160 px.
   Le noir est neutre et non walnut, pour ne pas se fondre dans les
   sections voisines ; la trame achève de le distinguer. */
.plate--parts{
  --ink:var(--cream);
  --ink-62:var(--cream-62);
  --ink-14:var(--cream-12);
  --ember-ink:var(--ember);        /* 4,6:1 sur ce noir */
  background:
    radial-gradient(60% 70% at 50% 45%,rgba(220,80,0,.10),transparent 70%),
    repeating-linear-gradient(to right,rgba(255,237,215,.07) 0 1px,transparent 1px 160px),
    repeating-linear-gradient(to bottom,rgba(255,237,215,.07) 0 1px,transparent 1px 160px),
    repeating-linear-gradient(to right,rgba(255,237,215,.028) 0 1px,transparent 1px 32px),
    repeating-linear-gradient(to bottom,rgba(255,237,215,.028) 0 1px,transparent 1px 32px),
    #060504;
  background-position:center;
  border-block:1px solid var(--cream-12);
}
.plate__head{display:grid;gap:clamp(18px,2.4vw,30px)}
.parts{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  /* les filets sont le fond de la liste, vu entre les cases */
  gap:1px;background:var(--ink-14);border:1px solid var(--ink-14);
}
.part{
  background:rgba(6,5,4,.86);
  display:grid;justify-items:center;align-content:end;
  padding:clamp(22px,3vw,46px) 8px clamp(18px,2.2vw,32px);text-align:center;
}
.part svg{
  height:clamp(84px,11vw,168px);width:auto;overflow:visible;margin-bottom:clamp(12px,1.6vw,20px);
  transition:transform .8s var(--ease-out);
}
/* vue éclatée : la pièce se soulève sous le pointeur */
.part:hover svg{transform:translate3d(0,-8px,0)}
.part svg :is(path,rect,circle){stroke:var(--cream-80);stroke-width:1.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.part .f-ember{fill:var(--ember)}
.part .f-light{fill:rgba(255,237,215,.1)}
.part .f-sand{fill:#e0b371}
.part .f-walnut{fill:#1a0f07}
.part .f-none{fill:none}
.part .s-fine{stroke:var(--cream-24)}
.part .s-ink{stroke:#7a4a24;stroke-width:5px;stroke-linecap:round}
.part .f-glint{fill:#fff9f2;stroke:none;opacity:.7}
.part__idx{margin:0 0 6px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.24em;color:var(--ember-ink)}
.part__name{margin:0;font-size:clamp(.9rem,1.3vw,1.3rem);font-weight:450;letter-spacing:-.01em}
.plate__coda{margin:0;font-size:clamp(1.35rem,2.8vw,2.5rem);font-weight:400;letter-spacing:-.02em;color:var(--ink-62)}

/* ---------- Planche 3 : le prix, sur crème ----------
   La seule planche claire. Le papier a un grain de lumière, et un tampon
   d'étiquette tourne dans l'angle — un cachet de prix public, qui dit
   « prix » avant qu'on ait lu le chiffre. */
.plate--price{
  background:
    radial-gradient(80% 90% at 85% 10%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(70% 80% at 0% 100%,rgba(224,179,113,.28),transparent 66%),
    var(--cream);
}
.plate__stamp{
  position:absolute;z-index:1;right:clamp(12px,6vw,120px);top:clamp(28px,5vw,80px);
  width:clamp(120px,15vw,210px);height:auto;pointer-events:none;
  animation:stamp-turn 48s linear infinite;
}
@keyframes stamp-turn{to{transform:rotate(360deg)}}
.plate__stamp .st-ring{fill:none;stroke:var(--ember-ink);stroke-width:1.4}
.plate__stamp .st-ring--in{stroke-dasharray:2 5}
.plate__stamp .st-text{
  font-family:var(--mono);font-size:11.2px;letter-spacing:.22em;text-transform:uppercase;fill:var(--ember-ink);
}
.plate__stamp .st-star{fill:var(--ember)}
.plate__pricing{display:grid;gap:clamp(18px,2.6vw,36px);padding-block:clamp(0px,1.6vw,24px)}
.plate__price{
  margin:0;font-size:clamp(5.2rem,24vw,19rem);font-weight:500;line-height:.86;letter-spacing:-.055em;
  color:var(--ember);white-space:nowrap;
}
.plate__after{
  margin:0;max-width:34ch;
  font-size:clamp(1.2rem,2.5vw,2.3rem);font-weight:450;line-height:1.22;letter-spacing:-.02em;
}
.plate__after span{display:block;color:var(--ink-62)}

@media (max-width:1180px){
  .parts{grid-template-columns:repeat(3,1fr)}
}
/* Sur téléphone, la poche passe derrière la citation, en filigrane : à
   côté, elle écraserait une colonne déjà étroite. */
@media (max-width:720px){
  .plate__pocket{right:-70px;width:220px;opacity:.28}
  .plate__stamp{width:96px;top:22px;right:14px}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .cards,.bench__notes,.quotes__grid,.foot__top{grid-template-columns:repeat(2,1fr)}
  .faq,.config__inner{grid-template-columns:1fr}
  .faq__head{position:static}
  .hero__floor{gap:26px}
}
@media (max-width:1100px){
  .nav__links a[href="#benchmarks"]{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(2.6rem,18vw,7rem)}
  .reveal-act__body{justify-self:start}
  .reveal-act__pen{opacity:.2}
}
@media (max-width:720px){
  .cards,.bench__notes,.quotes__grid,.foot__top{grid-template-columns:1fr}
  .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 */
  /* le cartel garde sa silhouette en colonne, sans le vide qu'elle
     creuserait sur un écran de téléphone */
  .hero__card{
    width:min(100%,300px);min-height:clamp(200px,30svh,260px);
    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%}
  /* le verre descend dans l'angle bas-droit, à côté des chiffres alignés
     à gauche ; le stylo se couche sous le cartel, pointé vers lui */
  .mockup__glass{width:150px;top:auto;right:-10%;bottom:8%}
  .mockup__pen{left:30%;top:52%;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}
  .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(--stage-ink)}
  /* 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(440px,70vh,720px);
  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%}
/* Le corps est allongé d'un tiers (`data-barrel`) : un vrai stylo à bille
   est dix-neuf fois plus long que large, celui-ci ne l'était que douze. */
.pop__pen{position:relative;width:clamp(120px,14vw,190px);height:min(60vh,560px);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:50svh}
  .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;
}
/* Les deux cartes portent exactement le même fond. La carte de l'agenda
   avait un voile ember et celle du formulaire un voile brun : posées côte
   à côte sur le halo de la section, elles donnaient deux teintes qui ne
   se répondaient pas. La hiérarchie est portée par le contenu — un seul
   bouton plein de chaque côté —, pas par la couleur du fond. Le fond est
   assez dense pour que le halo ember de la section ne les teinte pas
   différemment selon leur place. */
.contact__pick,.contact__form{
  padding:clamp(24px,2.6vw,38px);border-radius:14px;
  border:1px solid rgba(220,80,0,.32);
  background:linear-gradient(160deg,rgba(40,22,10,.78),rgba(16,9,4,.72));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  display:grid;gap:16px;align-content:start;
}
.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}