/* =========================================================
   /storytelling/ — Méga Template Storytelling

   Cette page vient d'une maquette faite par Antoine dans Claude
   Design, exportée en composant React. Le visuel est de lui et doit
   être respecté : les valeurs ci-dessous sont celles de l'export,
   reprises telles quelles.

   Ce qui a été changé en l'intégrant, et pourquoi :

   - Les classes sont préfixées `st-`. L'export en définissait une,
     `.btn`, qui existe déjà dans ds.css — le préfixe écarte la
     collision d'aujourd'hui et celles de demain.
   - Les 170 couleurs écrites en dur dans l'export sont devenues des
     références aux canaux de ds.css. Elles venaient toutes de la
     palette d'Antoine : la maquette a été faite sur ses tokens.
   - Les @font-face de l'export ont été retirés : ds.css sert déjà
     les mêmes quatre fontes, et les familles pointent désormais sur
     --font-impact / --font-core / --font-functional.

   ⚠️ Cette page ne suit PAS le design system de /ddc2/ et /ptc/.
   C'est délibéré : Antoine voulait repartir sur autre chose. Elle a
   ses propres portées (.st-sl clair, .st-sd sombre, .st-sm bordeaux),
   ses angles arrondis, ses boutons en pilule et ses ombres portées.
   Ne pas l'« harmoniser » avec le reste sans le lui demander.

   ⚠️ Velvet y est RÉACTIVÉ comme couleur d'action sur fond clair,
   alors que la charte le dit dormant (p. 23). C'est un choix de la
   maquette, pas un oubli.
   ========================================================= */

:root {
  /* Seule couleur de la maquette absente de ds.css. Même forme que
     les autres : un triplet, dont tout le reste dérive. */
  --rgb-blanc: 255 255 255;
}

/* La planche des 54 pages floutees : 1350x1272 px decoupes en 9x6 par
   background-size: 900% 600%, soit une vignette de 150x212 par page.
   Chemin relatif a CE fichier — donc ../assets/, pas ./assets/ comme
   dans l'export, ou le CSS etait inline dans la page. */

/* Le fond de page, que l'export posait sur <body>. */
body.st-page { background: rgb(var(--rgb-bordeaux-abyss)); }

.st-sl{--bg:rgb(var(--rgb-parchment));--ink:rgb(var(--rgb-bordeaux-medium));--text:rgb(var(--rgb-cacao));--muted:rgb(var(--rgb-chocolat));--rule:rgb(var(--rgb-stone));--surface:rgb(var(--rgb-blanc));--action:rgb(var(--rgb-bordeaux-velvet));--on-action:rgb(var(--rgb-parchment));--accent:rgb(var(--rgb-bordeaux-deep-rose));--on-accent:rgb(var(--rgb-parchment));--soft:rgb(var(--rgb-bordeaux-deep-rose) / .08)}
.st-sd{--bg:rgb(var(--rgb-bordeaux-abyss));--ink:rgb(var(--rgb-parchment));--text:rgb(var(--rgb-parchment) / .8);--muted:rgb(var(--rgb-parchment) / .62);--rule:rgb(var(--rgb-parchment) / .14);--surface:rgb(var(--rgb-bordeaux-dark));--action:rgb(var(--rgb-porcelaine));--on-action:rgb(var(--rgb-bordeaux-abyss));--accent:rgb(var(--rgb-faience));--on-accent:rgb(var(--rgb-bordeaux-abyss));--soft:rgb(var(--rgb-faience) / .1)}
.st-sm{--bg:rgb(var(--rgb-bordeaux-medium));--ink:rgb(var(--rgb-parchment));--text:rgb(var(--rgb-parchment) / .82);--muted:rgb(var(--rgb-parchment) / .64);--rule:rgb(var(--rgb-parchment) / .16);--surface:rgb(var(--rgb-bordeaux-abyss) / .4);--action:rgb(var(--rgb-porcelaine));--on-action:rgb(var(--rgb-bordeaux-abyss));--accent:rgb(var(--rgb-faience));--on-accent:rgb(var(--rgb-bordeaux-abyss));--soft:rgb(var(--rgb-faience) / .12)}
.st-sec{background:var(--bg);color:var(--text);padding:76px 20px;font-family:var(--font-functional)}
.st-wrap{max-width:1080px;margin:0 auto}
.st-col{display:flex;flex-direction:column}
.st-h1{margin:0;font-family:var(--font-impact);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(46px,12vw,104px);line-height:.9;color:var(--ink);text-wrap:balance}
.st-h2{margin:0;font-family:var(--font-impact);font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(38px,9vw,72px);line-height:.92;color:var(--ink);text-wrap:balance}
.st-h3{margin:0;font-family:var(--font-core);font-weight:400;letter-spacing:-.03em;font-size:26px;line-height:1.15;color:var(--ink)}
.st-voice{margin:0;font-family:var(--font-core);font-weight:400;letter-spacing:-.03em;font-size:clamp(23px,5.8vw,30px);line-height:1.22;color:var(--ink)}
.st-voice em,.st-h3 em{font-style:italic;color:var(--accent)}
..body strong{color:var(--ink);font-weight:600}
.st-small{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.st-eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;box-sizing:border-box;border-radius:100px;background:var(--action);color:var(--on-action);font:600 17px/1.2 var(--font-functional);text-decoration:none;text-align:center}
.st-btn:hover{color:var(--on-action);filter:brightness(1.06)}
.st-btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.st-card{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px;box-sizing:border-box}
.st-tk{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;margin-top:1px}
.st-no{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rule);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px;box-sizing:border-box}
.st-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.st-list li{display:flex;gap:12px;font-size:16px;line-height:1.5}
.st-g2,.st-g3{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.st-split{display:grid;gap:44px;grid-template-columns:minmax(0,1fr);align-items:center}
.st-ph{border:1.5px dashed var(--rule);border-radius:18px;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;box-sizing:border-box;font-size:13px;color:var(--muted);background:var(--soft)}
.st-stat b{display:block;font-family:var(--font-impact);font-weight:400;font-size:clamp(40px,10vw,56px);line-height:1;color:var(--ink);letter-spacing:.01em}
.st-stat span{display:block;margin-top:6px;font-size:14px;line-height:1.4;color:var(--muted)}
.st-mobilebar{display:flex}
/* En-tete collant. Il vit HORS du heros : celui-ci porte un
   overflow:hidden, qui aurait neutralise le position:sticky. */
.st-topbar{position:sticky;top:0;z-index:30;background:rgb(var(--rgb-bordeaux-abyss) / 0.94);border-bottom:1px solid rgb(var(--rgb-parchment) / 0.14);backdrop-filter:blur(8px)}
.st-topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px}
/* Le bouton d'achat du haut ne sert qu'au desktop : en dessous de
   900 px, c'est la barre basse qui le porte, plus proche du pouce.
   Deux boutons colles aux deux bords mangeraient 140 px d'ecran. */
.st-topbar__achat{display:none}
@media (min-width:900px){.st-topbar__achat{display:flex;align-items:center;gap:14px}}
@keyframes st-wall-l{from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
@keyframes st-wall-r{from{transform:translateX(-50%)}
to{transform:translateX(0)}
}
.st-wall{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.st-wall-l{animation:st-wall-l 80s linear infinite}
.st-wall-r{animation:st-wall-r 80s linear infinite}
.st-pg{flex:0 0 auto;width:112px;height:158px;border-radius:4px;background-image:url('../assets/storytelling-pages.jpg');background-size:900% 600%;box-shadow:0 12px 24px -12px rgb(var(--rgb-bordeaux-abyss) / .9);pointer-events:none}
.st-seg{padding:7px 8px;border-radius:4px;display:flex;flex-direction:column;gap:6px}
.st-seg i{display:block;height:6px;border-radius:3px}
@media (prefers-reduced-motion: reduce){.st-wall-l,.st-wall-r{animation:none}
}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
details[open] .st-faq-ico{transform:rotate(45deg)}
@media (min-width:900px){
 .st-sec{padding:120px 40px}
.st-g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.st-g3{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.st-split{grid-template-columns:repeat(2,minmax(0,1fr));gap:72px}
.st-mobilebar{display:none}
.st-pg{width:136px;height:192px}
}