/* ==========================================================================
   Pages vitrines des apps (« app stories ») — /apps/<slug>
   Chargée uniquement sur ces pages (cf. templates/app_story.html).
   S'appuie sur la charte de style.css (tokens, boutons, section-head, FAQ) ;
   la couleur d'accent de l'app arrive par --app-accent (attribut style du
   <main>, valeur du catalogue appcatalog.PROJECTS).
   Design retenu après panel de juges (3 variantes comparées en captures) :
   hero scindé baigné d'un wash d'accent très léger, fondu long — la couleur
   vit surtout dans les cartes et la maquette, jamais en aplat.
   ========================================================================== */

.story {
  --wash: color-mix(in oklab, var(--app-accent) 5%, var(--bg));
  --wash-strong: color-mix(in oklab, var(--app-accent) 9%, var(--bg));
  --accent-ink: color-mix(in oklab, var(--app-accent) 72%, var(--fg));
  padding-top: 96px;
  overflow-x: clip;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
/* Le wash remonte SOUS la topbar (marge négative compensée) : pas de couture
   crème au-dessus, et le fondu descend assez bas pour mourir derrière la
   rangée de chiffres — jamais de frontière visible. */
.story-hero {
  margin-top: -96px;
  padding: 152px 32px 84px;
  background:
    radial-gradient(100% 80% at 82% 0%, var(--wash-strong) 0%, transparent 62%),
    linear-gradient(180deg, var(--wash) 0%, transparent 94%);
}
.story-hero-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: 40px 64px;
  align-items: center;
}
.story-eyebrow-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px;
}
.story-flag {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-soft);
  background: var(--card);
}
.story-flag--pro {
  border-color: color-mix(in oklab, var(--app-accent) 45%, transparent);
  color: var(--accent-ink);
  background: color-mix(in oklab, var(--app-accent) 10%, var(--card));
}
.story-flag--perso { border-style: dashed; }

.story-title {
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(37px, 5.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.story-app-row {
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.story-app-badge {
  width: 52px; height: 52px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px;
  border-radius: 15px;
  color: #fff;
  background:
    radial-gradient(120% 120% at 20% 15%, color-mix(in oklab, var(--app-accent) 82%, #fff) 0%, var(--app-accent) 58%, color-mix(in oklab, var(--app-accent) 72%, #000) 100%);
  box-shadow:
    0 10px 24px -10px color-mix(in oklab, var(--app-accent) 55%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.story-app-badge svg { width: 100%; height: 100%; }
.story-app-name {
  font-size: clamp(21px, 2.6vw, 27px);
  letter-spacing: -0.02em;
  color: var(--accent-ink);
}
.story-title-line { display: block; text-wrap: balance; }

.story-lead {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.story-cta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px;
  margin-top: 30px;
}
/* Réassurance sous le CTA : c'est le principal lève-frein (« sans carte
   bancaire ») — lisible, pas une micro-mention grise. */
.story-cta-sub {
  margin: 14px 0 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-soft);
}

/* Visuel : maquette produit + halo d'accent */
.story-hero-visual { position: relative; min-width: 0; }
.story-glow {
  position: absolute; inset: -12% -10%;
  background: radial-gradient(58% 58% at 55% 42%,
    color-mix(in oklab, var(--app-accent) 26%, transparent) 0%,
    transparent 70%);
  filter: blur(4px);
  pointer-events: none;
}

/* ── Maquettes produit (pur CSS, données fictives) ───────────────────── */
/* Les libellés secondaires des maquettes tiraient `--muted-2` : mesuré de
   4,08 à 4,30:1 en thème sombre, sous le seuil AA. Ces maquettes sont
   décoratives (`aria-hidden`), mais elles se lisent : c'est même leur seule
   raison d'être, montrer à quoi l'app ressemble. `--muted-3` est le jeton AA
   du dépôt, et c'est celui vers lequel la passe de contraste du même lot a
   déplacé `.muted`, `.link-muted` et les étiquettes de section. */
.appmock {
  position: relative;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: var(--card);
  box-shadow:
    0 30px 70px -30px rgba(0, 0, 0, 0.35),
    0 6px 18px -8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  font-family: var(--font-body);
  /* Jamais hérité d'un parent centré : une liste produit est alignée à gauche. */
  text-align: left;
  transform: rotate(-1.2deg) translateY(-4px);
}
.appmock-chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
}
.appmock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.appmock-url {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.05em;
  color: var(--muted-3);
  background: var(--paper-2);
  border-radius: 6px;
  padding: 3px 10px;
}

/* — Prosp'Up : Mode Focus — */
.appmock--prospup .appmock-body {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
}
.appmock-side {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 10px;
  border-right: 1px solid var(--line-soft);
  background: var(--paper);
}
.appmock-logo {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg);
  padding: 2px 8px 10px;
}
.appmock-nav {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 500;
  color: var(--muted-3);
  padding: 6px 8px;
  border-radius: 7px;
}
/* Pastille façon icône : densifie la sidebar sans embarquer 4 SVG de plus. */
.appmock-nav::before {
  content: "";
  width: 6px; height: 6px; flex: none;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.55;
}
.appmock-nav.is-active {
  color: var(--accent-ink);
  background: color-mix(in oklab, var(--app-accent) 12%, transparent);
  font-weight: 600;
}
.appmock-main { padding: 14px 16px 16px; }
.appmock-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.appmock-h1 {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 700; letter-spacing: -0.02em;
}
.appmock-streak {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid color-mix(in oklab, var(--app-accent) 40%, transparent);
  border-radius: 999px;
  padding: 3px 9px;
}
.appmock-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--bg);
  margin-bottom: 7px;
}
.appmock-ava {
  width: 28px; height: 28px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--a, var(--app-accent));
}
.appmock-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.appmock-who b { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.appmock-who i {
  font-style: normal; font-size: 10.5px; color: var(--muted-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.appmock-chip {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-soft);
}
.appmock-chip--warm {
  color: oklch(0.5 0.16 45);
  border-color: oklch(0.72 0.12 45 / 0.6);
  background: oklch(0.72 0.12 45 / 0.1);
}
.appmock-chip--ok {
  color: oklch(0.46 0.13 155);
  border-color: oklch(0.7 0.12 155 / 0.6);
  background: oklch(0.7 0.12 155 / 0.1);
}
.appmock-kpis { display: flex; gap: 8px; margin-top: 12px; }
.appmock-kpi {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--paper);
}
.appmock-kpi b {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.appmock-kpi b em { font-style: normal; font-size: 11px; color: var(--muted-3); }
.appmock-kpi i { font-style: normal; font-size: 10px; color: var(--muted-3); }
.appmock-bar {
  height: 5px; border-radius: 999px; margin-top: 5px;
  background: var(--paper-2);
  overflow: hidden; display: block;
}
/* Hauteur explicite (pas 100 %) : un pourcentage sur un span dans un
   conteneur flex colonne se résout à 0 — la barre paraissait vide. */
.appmock-bar span { display: block; height: 5px; border-radius: 999px; background: var(--app-accent); }

/* — MarieNour : grille de widgets — */
.appmock--marienour { transform: rotate(1.2deg) translateY(-4px); }
.appmock-chrome--soft { background: color-mix(in oklab, var(--app-accent) 6%, var(--paper)); }
.appmock-atelier {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
  padding: 14px;
  background: color-mix(in oklab, var(--app-accent) 4%, var(--bg));
}
.appmock-widget {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
  background: var(--card);
  padding: 12px 13px;
}
.appmock-wt {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-3);
}
.appmock-check {
  position: relative;
  font-size: 12px; color: var(--fg-soft);
  padding-left: 22px;
}
.appmock-check::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 13px; height: 13px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4.5px;
}
.appmock-check.is-done { color: var(--muted-3); text-decoration: line-through; }
.appmock-check.is-done::before {
  border-color: var(--app-accent);
  background:
    linear-gradient(0deg, transparent, transparent),
    var(--app-accent);
}
.appmock-check.is-done::after {
  content: "";
  position: absolute; left: 3.5px; top: 5.5px;
  width: 6px; height: 3.5px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}
.appmock-ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.appmock-ph {
  aspect-ratio: 1;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--p1), var(--p2));
}
.appmock-widget--recipe b {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.appmock-widget--recipe i { font-style: normal; font-size: 11px; color: var(--muted-3); }
.appmock-feed { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.appmock-feed .appmock-ava { width: 24px; height: 24px; font-size: 10px; }
.appmock-feed b { font-weight: 600; }
.appmock-feed i { font-style: normal; color: var(--muted-3); }
.appmock-widget--trip { grid-column: 1 / -1; }
.appmock-trip { display: flex; align-items: baseline; gap: 9px; }
.appmock-trip b {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.appmock-trip i { font-style: normal; font-size: 11px; color: var(--muted-3); }

/* — Concours Prospection : le classement live — */
/* Aucune règle propre : la maquette reprend mot pour mot le vocabulaire de
   Prosp'Up (chrome, rangées, avatars, pastilles, bandeau de chiffres). Une
   ligne de classement et une ligne de prospect ont la même anatomie ; en
   redessiner une seconde ferait diverger deux composants identiques. */

/* — Site Commerce : la vitrine et les directions de design — */
.appmock--commerce { transform: rotate(1.1deg) translateY(-4px); }
.appmock-vitrine {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px;
  background: color-mix(in oklab, var(--app-accent) 4%, var(--bg));
}
.appmock-vitrine-band {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 16px 18px;
  border-radius: 12px;
  background: linear-gradient(140deg,
    color-mix(in oklab, var(--app-accent) 26%, var(--card)),
    color-mix(in oklab, var(--app-accent) 8%, var(--card)));
}
.appmock-vitrine-band b {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--fg);
}
.appmock-vitrine-band i { font-style: normal; font-size: 11px; color: var(--muted-3); }
.appmock-vitrine-cta {
  align-self: flex-start;
  font-size: 11px; font-weight: 600;
  color: #fff;
  background: var(--app-accent);
  border-radius: 999px;
  padding: 7px 15px;
}
/* La rangée de directions : c'est LE geste de l'app, donc elle est montrée
   plutôt que racontée. Les pastilles sont des aplats, jamais du texte : la
   règle de contraste ne s'y applique pas, et l'active se distingue par un
   anneau, pas par une nuance (un seul signal visuel, lisible en noir et
   blanc comme en daltonisme). */
.appmock-designs {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
}
.appmock-designs .appmock-wt { margin-right: 3px; }
.appmock-swatch {
  width: 18px; height: 18px; flex: none;
  border-radius: 6px;
  background: var(--s);
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.appmock-swatch.is-active {
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--app-accent);
}

/* — Sudoku : une grille en cours, et l'indice qui nomme la technique — */
.appmock--sudoku { transform: rotate(1.1deg) translateY(-4px); }
/* La grille est bornée : à la largeur pleine de la colonne du hero, ses cases
   font 60 px et la maquette dépasse 700 px de haut, soit près du double des
   quatre autres. Une maquette de hero évoque, elle ne se joue pas. */
.appmock-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  padding: 3px;
  max-width: 306px;
  margin: 4px auto 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--line);
}
.appmock-cell {
  aspect-ratio: 1;
  box-sizing: border-box;
  display: grid; place-items: center;
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted-3);
}
.appmock-cell.is-fixed { color: var(--fg); font-weight: 600; }
/* Les traits de bloc, sans lesquels ce n'est pas un sudoku mais un damier :
   une bordure sur les colonnes 4 et 7, et sur les rangées 4 et 7. En bordure
   et non en ombre interne : une ombre de 1 px posée dans une cellule de 32 px
   ne se voit pas à l'écran (mesuré). */
.appmock-cell:nth-child(3n+1):not(:nth-child(9n+1)) {
  border-left: 2px solid var(--line-strong);
}
.appmock-cell:nth-child(n+28):nth-child(-n+36),
.appmock-cell:nth-child(n+55):nth-child(-n+63) {
  border-top: 2px solid var(--line-strong);
}
.appmock-cell.is-hint {
  background: color-mix(in oklab, var(--app-accent) 18%, var(--card));
  color: var(--fg);
  font-weight: 700;
}
.appmock-hint {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--app-accent);
  border-radius: 11px;
  background: var(--paper);
}
.appmock-hint b {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.appmock-hint i { font-style: normal; font-size: 11px; color: var(--muted-3); }

/* Une story sans maquette produit : une colonne, pas une moitié d'écran vide.
   La largeur de lecture reste bornée, sinon le chapô part sur toute la page. */
.story-hero-inner.is-solo { grid-template-columns: minmax(0, 1fr); }
.story-hero-inner.is-solo .story-hero-copy { max-width: 780px; }

/* ── Bandeau chiffres ───────────────────────────────────────────────── */
/* Cartes blanches à bordure neutre (la parcimonie de la charte : l'accent ne
   vit que dans le chiffre), remontées sur la fin du fondu du hero pour
   effacer toute couture wash → crème. */
.story-stats {
  position: relative;
  max-width: 1080px;
  margin: -44px auto 0;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.story-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.18);
}
.story-stat-value {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700; letter-spacing: -0.03em;
  color: var(--accent-ink);
}
.story-stat-label { font-size: 13.5px; color: var(--muted); line-height: 1.4; }

/* ── Sections génériques ────────────────────────────────────────────── */
.story-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 84px 32px;
}

/* Fonctionnalités : grille bento */
.story-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.story-feature {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  transition: transform 220ms var(--ease-standard),
              box-shadow 220ms var(--ease-standard),
              border-color 220ms ease;
}
.story-feature:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--app-accent) 35%, var(--line));
  box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--app-accent) 30%, rgba(0, 0, 0, 0.25));
}
.story-feature-ico {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: var(--accent-ink);
  background: color-mix(in oklab, var(--app-accent) 11%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--app-accent) 22%, var(--line));
}
.story-feature-body { display: flex; flex-direction: column; gap: 8px; }
.story-feature h3 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
}
.story-feature p {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

/* Comment ça marche : 3 étapes */
.story-steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 28px;
  counter-reset: none;
}
.story-step { position: relative; padding-top: 14px; }
.story-step-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em;
  color: var(--accent-ink);
  margin-bottom: 12px;
}
.story-step-num::after {
  content: "";
  display: block;
  width: 44px; height: 2px;
  margin-top: 10px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--app-accent) 55%, transparent);
}
.story-step h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
}
.story-step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Sous le capot : panneau encre */
.story-build { padding-top: 40px; padding-bottom: 40px; }
.story-build-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 36px 56px;
  align-items: center;
  padding: 52px 52px;
  border-radius: 26px;
  background:
    radial-gradient(90% 130% at 100% 0%, color-mix(in oklab, var(--app-accent) 22%, transparent) 0%, transparent 55%),
    #131312;
  color: #f5f4f1;
  overflow: hidden;
}
.story-build-copy .hero-eyebrow { color: color-mix(in oklab, var(--app-accent) 65%, #fff); }
.story-build-copy .section-title { color: #f5f4f1; font-size: clamp(26px, 3.6vw, 40px); }
.story-build-copy p {
  margin: 18px 0 0;
  font-size: 15.5px; line-height: 1.6;
  color: rgba(245, 244, 241, 0.78);
  text-wrap: pretty;
}
.story-build-chips {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.story-build-chips li {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(245, 244, 241, 0.16);
  background: rgba(245, 244, 241, 0.05);
  color: rgba(245, 244, 241, 0.86);
}

/* Offres */
.story-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.story-plan {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
}
.story-plan--featured {
  border-color: color-mix(in oklab, var(--app-accent) 55%, var(--line));
  box-shadow: 0 22px 50px -24px color-mix(in oklab, var(--app-accent) 40%, rgba(0, 0, 0, 0.3));
  position: relative;
}
.story-plan-badge {
  position: absolute; top: -11px; right: 18px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  color: #fff;
  background: var(--app-accent);
  box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--app-accent) 70%, transparent);
}
.story-plan-cta { margin-top: 4px; width: 100%; }
.story-plan h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-3);
}
.story-plan--featured h3 { color: var(--accent-ink); }
.story-plan-price { display: flex; align-items: baseline; gap: 8px; }
.story-plan-price strong {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 700; letter-spacing: -0.03em;
}
.story-plan-price span { font-size: 13px; color: var(--muted-3); }
.story-plan ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  flex: 1;
}
.story-plan li {
  position: relative;
  padding-left: 20px;
  font-size: 14px; line-height: 1.45;
  color: var(--fg-soft);
}
.story-plan li::before {
  content: "";
  position: absolute; left: 2px; top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--app-accent) 70%, transparent);
}
.story-plan-note {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--muted-3);
}

/* CTA intermédiaire (mi-page) : sur une page longue, un abandon de scroll
   doit toujours retrouver un bouton d'inscription à portée. */
.story-midcta {
  display: flex; justify-content: center;
  margin-top: 40px;
}

/* FAQ : réutilise .faq-list / .faq-item de style.css */
.story-faq { padding-top: 60px; }

/* ── CTA final ──────────────────────────────────────────────────────── */
.story-final {
  max-width: 760px;
  margin: 0 auto;
  padding: 90px 32px 34px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.story-final-glyph {
  width: 58px; height: 58px;
  padding: 13px;
  display: inline-flex;
  border-radius: 17px;
  color: #fff;
  background:
    radial-gradient(120% 120% at 20% 15%, color-mix(in oklab, var(--app-accent) 82%, #fff) 0%, var(--app-accent) 58%, color-mix(in oklab, var(--app-accent) 72%, #000) 100%);
  box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--app-accent) 55%, transparent);
}
.story-final-glyph svg { width: 100%; height: 100%; }
.story-final h2 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 600; letter-spacing: -0.035em; line-height: 1.02;
}
.story-final p { margin: 0 0 10px; font-size: 15px; color: var(--muted); }

/* Note « projet perso » (apps labo) : assumée, mais loin du CTA du hero —
   elle vit en bas de page, juste avant le pont vers l'activité principale. */
.story-perso-note {
  max-width: 560px;
  margin: 0 auto 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-3);
}

/* Pont vers l'activité principale : volontairement discret (de simples
   liens) — il ne concurrence jamais le CTA d'inscription juste au-dessus. */
.story-bridge {
  max-width: 1080px;
  margin: 46px auto 0;
  padding: 26px 32px 96px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.story-bridge > p {
  margin: 0 auto 12px;
  font-size: 14px; line-height: 1.55;
  color: var(--muted);
  max-width: 620px;
}
.story-bridge strong { color: var(--fg); }
.story-bridge-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 24px;
}

/* ── Dark mode ──────────────────────────────────────────────────────── */
[data-theme="dark"] .story-app-badge,
[data-theme="dark"] .story-final-glyph {
  box-shadow:
    0 10px 26px -10px color-mix(in oklab, var(--app-accent) 45%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
[data-theme="dark"] .story-accent-ink { color: color-mix(in oklab, var(--app-accent) 70%, #fff); }
[data-theme="dark"] .story {
  --accent-ink: color-mix(in oklab, var(--app-accent) 68%, #fff);
}
[data-theme="dark"] .appmock {
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, 0.7),
    0 6px 18px -8px rgba(0, 0, 0, 0.4);
}
/* Panneau « Sous le capot » en sombre : surface élevée + halo d'accent plus
   marqué, sinon il se fond dans le fond de page et la page perd son temps
   fort de contraste. */
[data-theme="dark"] .story-build-inner {
  background:
    radial-gradient(90% 130% at 100% 0%, color-mix(in oklab, var(--app-accent) 30%, transparent) 0%, transparent 58%),
    #21211f;
  border: 1px solid var(--line-strong);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .story-stat { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .appmock-chip--warm { color: oklch(0.78 0.12 45); }
[data-theme="dark"] .appmock-chip--ok { color: oklch(0.78 0.12 155); }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .story-hero { padding-top: 132px; padding-bottom: 72px; }
  .story-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .story-hero-visual { max-width: 620px; }
  .story-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .story-steps { grid-template-columns: 1fr; gap: 30px; }
  .story-build-inner { grid-template-columns: 1fr; padding: 40px 34px; }
  .story-plan-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .story { padding-top: 84px; }
  .story-hero { margin-top: -84px; padding: 116px 20px 64px; }
  .story-section { padding: 64px 20px; }
  .story-stats { grid-template-columns: 1fr; padding: 0 20px; margin-top: -32px; }
  .story-feature-grid { grid-template-columns: 1fr; }
  .story-cta-row .btn-lg { width: 100%; justify-content: center; }
  .story-build-inner { padding: 32px 24px; }
  .story-build-chips { grid-template-columns: 1fr; }
  .story-final { padding: 70px 20px 24px; }
  .story-bridge { padding: 20px 20px 72px; }
  .appmock { transform: none !important; }
  .appmock--prospup .appmock-body { grid-template-columns: 1fr; }
  .appmock-side {
    flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--line-soft);
    padding: 10px 12px; gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Le rail de navigation de la maquette dépasse de 80 px : sans fondu, la
       dernière entrée était tranchée net contre le bord du cadre et la
       maquette avait l'air d'une capture ratée (même procédé que la nav de
       l'admin et les compteurs de la console). */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .appmock-side::-webkit-scrollbar { display: none; }
  .appmock-logo { padding: 0 6px 0 0; white-space: nowrap; }
  .appmock-nav { white-space: nowrap; }
  .appmock-atelier { grid-template-columns: 1fr; }
  /* La maquette produit n'est pas qu'un décor : elle sert à comprendre à quoi
     ressemble l'app. Ses étiquettes mono en capitales tombaient à 9 px, donc
     à un aplat de gris au bout du bras. */
  .appmock-streak,
  .appmock-chip,
  .appmock-wt { font-size: 10.5px; }
}

/* Motion réduite : pas de rotation décorative */
@media (prefers-reduced-motion: reduce) {
  .appmock, .appmock--marienour { transform: none; }
  .story-feature { transition: none; }
}