/* =========================================================================
   NEOVERSE — Design system landing
   Dark unique · accent violet de marque · or rationné · zéro em-dash
   Distillé de l'ebook (display condensé, corps mono, tracés circuit, wireframe)
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Fonds */
  --bg: #09090D;
  --surface: #101018;
  --surface-2: #17171F;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);

  /* Texte */
  --text: #F4F4F7;
  --muted: #A2A2AE;
  --faint: #84848F; /* relevé de #6C6C78 -> AA sur le fine print (audit polish) */

  /* Violet de marque (dégradé logo périwinkle -> indigo) */
  --v300: #A99BF0;
  --v400: #8A78E6;
  --v500: #6E56E0;
  --v600: #5A43C9;
  --v700: #3B2A86;
  --v900: #201741;
  --gold: #E7B15A;

  --grad: linear-gradient(100deg, #A99BF0 0%, #7D63E8 45%, #4C36A8 100%);
  --glow: 0 0 0 1px rgba(110, 86, 224, .35) inset, 0 14px 40px -12px rgba(110, 86, 224, .55);

  /* Typo — polices de l'artifact v1 */
  --font-display: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Chivo', 'Inter', system-ui, -apple-system, sans-serif;
  --font-quote: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Structure */
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --r-card: 14px;
  --r-img: 16px;
  --r-input: 10px;
  --r-panel: 22px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--v500); color: #fff; }

:focus-visible { outline: 2px solid var(--v400); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typo helpers ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: none;
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.accent { color: var(--v300); }
.gold { color: var(--gold); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }

h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

/* Section index marker (mono, façon numéro de page ebook) */
.idx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin-bottom: 22px;
}
.idx::before {
  content: "";
  width: 30px; height: 1px;
  background: linear-gradient(90deg, var(--v500), transparent);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: clamp(64px, 11vw, 128px); }
.divider { border-top: 1px solid var(--border); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--border); }
.header-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.logo img { height: 26px; width: auto; }
.header-cta { display: flex; align-items: center; gap: 18px; }
.header-cta .price-mini { font-family: var(--font-mono); font-size: 14.5px; color: var(--muted); }
@media (max-width: 640px) { .header-cta .price-mini { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; line-height: 1;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--v500); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 12px 28px -14px rgba(110,86,224,.7);
}
.btn-primary:hover {
  background: var(--v400); transform: translateY(-1px);
  box-shadow: var(--glow);
}
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { border-color: var(--v400); color: #fff; background: rgba(110,86,224,.08); }
.btn-lg { font-size: 17px; padding: 17px 32px; }
.btn-block { width: 100%; }

.cta-note { font-family: var(--font-mono); font-size: 14px; color: var(--muted); letter-spacing: .01em; }
.cta-note strong { color: var(--text); font-weight: 700; }
.microtrust {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 26px;
  font-size: 13.5px; color: var(--muted);
}
.microtrust li { display: inline-flex; align-items: center; gap: 7px; list-style: none; }
.microtrust svg { color: var(--v400); flex: none; }
.microtrust ul { display: contents; margin: 0; padding: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-top: clamp(48px, 9vw, 96px); padding-bottom: clamp(56px, 10vw, 120px); }
.hero-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Vignette radiale douce (bas/bords). Le fondu du bord DROIT du mesh est
     géré directement dans le canvas (main.js) pour un rendu fiable partout. */
  -webkit-mask-image: radial-gradient(120% 90% at 45% 30%, #000 34%, transparent 82%);
  mask-image: radial-gradient(120% 90% at 45% 30%, #000 34%, transparent 82%);
  opacity: .85;
}
.hero-glow {
  position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  right: -12vw; top: -14vw;
  background: radial-gradient(circle, rgba(110,86,224,.28), transparent 62%);
  filter: blur(10px);
}
.hero-inner { position: relative; z-index: 2; max-width: 860px; }
.hero h1 { font-size: clamp(2.3rem, 6.2vw, 4.6rem); line-height: 1.04; margin: 22px 0 0; }
.hero h1 .line2 { color: var(--muted); }
.hero-sub {
  margin-top: 26px; max-width: 60ch; font-size: clamp(16px, 2.2vw, 19px);
  color: var(--muted); line-height: 1.62;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.hero-actions .link-down { color: var(--muted); font-size: 15px; display: inline-flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--border-strong); padding-bottom: 2px; }
.hero-actions .link-down:hover { color: var(--text); border-color: var(--v400); }

/* Kicker pill (utilisé une seule fois, en hero) — Inter, casse normale (pas d'eyebrow mono) */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; letter-spacing: 0; text-transform: none;
  color: var(--v300); padding: 7px 15px 7px 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: rgba(110,86,224,.07);
}
.kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--v400); box-shadow: 0 0 10px var(--v400); }

/* ---------- Section titles ---------- */
.sec-title { font-size: clamp(1.8rem, 4.4vw, 3.1rem); line-height: 1.06; }
.sec-lead { margin-top: 20px; max-width: 60ch; color: var(--muted); font-size: clamp(16px, 2vw, 18px); }
.sec-head { max-width: 780px; }

/* ---------- Troisième voie (fond tunnel) ---------- */
.tunnel {
  position: relative; overflow: hidden;
  border-radius: 0;
}
.tunnel-bg { position: absolute; inset: 0; z-index: 0; }
.tunnel-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.tunnel-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 60%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 8%, rgba(9,9,13,.45) 55%, transparent 100%);
}
.tunnel .wrap { position: relative; z-index: 1; }
.forks { display: grid; gap: 14px; margin-top: 30px; max-width: 640px; }
.fork {
  display: flex; gap: 18px; align-items: stretch;
  padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--r-card);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}
/* Marqueur = barre d'accent fine ; le bas se fond dans la carte (gradient -> transparent) */
.fork .tag {
  flex: none; width: 2px; border-radius: 1.5px; align-self: stretch;
  background: linear-gradient(180deg, var(--v300) 0%, var(--v500) 42%, transparent 90%);
}
.fork p { color: var(--muted); }
.fork p b { color: var(--text); font-weight: 600; }
.third-way { margin-top: 30px; font-size: clamp(18px, 2.6vw, 22px); line-height: 1.5; max-width: 40ch; }
.third-way b { color: var(--v300); font-weight: 600; }

/* ---------- Mécanisme (étapes réelles, numérotées proprement) ---------- */
.steps { display: grid; gap: 2px; margin-top: 40px; border: 1px solid var(--border); border-radius: var(--r-panel); overflow: hidden; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start;
  padding: 26px clamp(20px, 3vw, 34px); background: var(--surface); position: relative;
}
.step + .step { border-top: 1px solid var(--border); }
/* Rail mécanique : un fil vertical relie trois nœuds (le mécanisme "s'enchaîne et tourne") */
.step .node { position: relative; width: 22px; display: flex; justify-content: center; padding-top: 5px; }
.step .node::before {
  content: ""; position: absolute; top: -26px; bottom: -26px; left: 50%; width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--v700), var(--v500), var(--v700)); opacity: .5;
}
.step:first-child .node::before { top: 14px; }
.step:last-child .node::before { bottom: auto; height: 14px; }
.step .dot {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--v400);
  box-shadow: 0 0 0 4px var(--surface); display: grid; place-items: center;
}
.step .dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--v300); }
.step h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.step p { margin-top: 8px; color: var(--muted); max-width: 62ch; }
.mech-foot { margin-top: 26px; color: var(--muted); max-width: 60ch; }
.mech-foot b { color: var(--text); font-weight: 600; }

/* ---------- Spectateur / Acteur ---------- */
.contrast { display: grid; gap: 18px; margin-top: 44px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .contrast { grid-template-columns: 1fr; } }
.pane { padding: 30px clamp(22px,3vw,34px); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); position: relative; }
.pane.actor { border-color: rgba(110,86,224,.4); background: linear-gradient(180deg, rgba(110,86,224,.10), rgba(110,86,224,.02)); box-shadow: var(--glow); }
.pane .lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.pane.actor .lbl { color: var(--v300); }
.pane h3 { margin-top: 14px; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.05; font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.pane p { margin-top: 14px; color: var(--muted); }
.pane p em { color: var(--text); font-style: italic; font-family: var(--font-quote); font-size: 1.12em; line-height: 1.4; }
.contrast-title { max-width: 20ch; }

/* ---------- Ce que contient (façon sommaire ebook + circuit) ---------- */
.toc-panel {
  position: relative; margin-top: 44px; border-radius: var(--r-panel);
  border: 1px solid var(--border-strong); background: linear-gradient(180deg, #0d0d15, #0a0a11);
  padding: clamp(26px, 4vw, 48px); overflow: hidden;
}
/* Bannière décorative haute : tracés circuit d'origine (non déformés), répartis harmonieusement.
   viewBox large et court -> pas d'étirement. Hauteur ~78px sur mobile (la bannière fait la marge). */
.toc-panel .circuit { display: block; width: 100%; height: clamp(78px, 20vw, 150px); z-index: 0; color: var(--v600); opacity: .34; pointer-events: none; }
.toc-panel > * { position: relative; z-index: 1; }
.toc-list { display: grid; gap: 0; }
.toc-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px dashed var(--border);
}
.toc-row:last-child { border-bottom: 0; }
.toc-row .mod { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--v300); white-space: nowrap; }
.toc-row .desc h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.toc-row .desc p { margin-top: 5px; color: var(--muted); font-size: 15px; }
.toc-row .pg { font-family: var(--font-mono); font-size: 13px; color: var(--faint); }
/* Séparateur de sous-section (modules -> annexes) : libellé + filet dégradé.
   Distinct des libellés violets "Annexe 1/2" (gris muté, non gras, filet). Pas d'eyebrow "//". */
.toc-sep { display: flex; align-items: center; gap: 14px; margin: 30px 0 12px; }
.toc-sep span { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.toc-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.bonus { margin-top: 30px; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .bonus { grid-template-columns: 1fr; } }
.bonus-item { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: rgba(255,255,255,.015); }
.bonus-item svg { color: var(--v400); flex: none; margin-top: 2px; }
.bonus-item b { font-weight: 600; }
.bonus-item span { color: var(--muted); font-size: 15px; }

/* ---------- Extrait (démonstration) ---------- */
.demo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
@media (max-width: 820px){ .demo { grid-template-columns: 1fr; } }
.demo-visual { position: relative; border-radius: var(--r-img); overflow: hidden; border: 1px solid var(--border-strong); aspect-ratio: 4/5; }
.demo-visual img { width: 100%; height: 100%; object-fit: cover; }
.demo-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(160deg, transparent 40%, rgba(9,9,13,.7)); }
.extract-form { margin-top: 26px; display: flex; gap: 10px; max-width: 460px; flex-wrap: wrap; }
.extract-form input {
  flex: 1 1 220px; min-width: 0; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-input); padding: 14px 16px; color: var(--text); font-size: 15px; font-family: inherit;
}
.extract-form input::placeholder { color: var(--faint); }
.extract-form input:focus { border-color: var(--v400); outline: none; }
.form-msg { margin-top: 12px; font-size: 14px; color: var(--v300); min-height: 1.2em; }
.form-fine { margin-top: 10px; font-size: 12.5px; color: var(--faint); max-width: 44ch; }

/* ---------- Réassurance ---------- */
.assure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 760px){ .assure { grid-template-columns: 1fr; } }
.assure-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.assure-card .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(110,86,224,.12); color: var(--v300); margin-bottom: 16px; }
.assure-card h3 { font-size: 18px; font-weight: 700; }
.assure-card p { margin-top: 8px; color: var(--muted); font-size: 15px; }
/* Icônes animées des tuiles (hybride : C1 origine · C3 sync · A3 infini) */
.assure-card .ic { overflow: hidden; }
/* C1 — point d'origine qui pulse (partir de zéro) */
.assure-card .cOrigin { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.assure-card .cTrack { position: absolute; left: 3px; right: 3px; top: 50%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--v400), rgba(169,155,240,.12)); transform: translateY(-50%); }
.assure-card .cDot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--v300); margin-left: -22px; z-index: 1; }
.assure-card .cPulse { position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--v300); transform: translate(-50%,-50%); animation: cPulse 2.4s ease-out infinite; }
@keyframes cPulse { 0% { transform: translate(-50%,-50%) scale(1); opacity: .6; } 70% { transform: translate(-50%,-50%) scale(3); opacity: 0; } 100% { opacity: 0; } }
/* C3 — anneau de synchronisation qui tourne (1 à 2 sessions) */
.assure-card .cSync { animation: cSpin 3.2s linear infinite; }
.assure-card .cSync .cArc { stroke: var(--v300); }
@keyframes cSpin { to { transform: rotate(360deg); } }
/* A3 — infini parcouru par une surbrillance (à vie, à jour) */
.assure-card .aInf { stroke-dasharray: 20 60; animation: aTrace 2.6s linear infinite; }
@keyframes aTrace { to { stroke-dashoffset: -80; } }
@media (prefers-reduced-motion: reduce) {
  .assure-card .cPulse, .assure-card .cSync, .assure-card .aInf { animation: none; }
}

/* ---------- Témoignages ---------- */
.tm-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 820px){ .tm-grid { grid-template-columns: 1fr; } }
.tm-card { padding: 26px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.tm-card p { color: var(--text); font-size: 16px; line-height: 1.55; }
.tm-card .who { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--v300); }
/* Plan B (honnête, pas de faux témoignage) */
.tm-planb {
  margin-top: 40px; border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgba(110,86,224,.08), rgba(110,86,224,.015));
  padding: clamp(30px, 5vw, 52px); max-width: 760px;
}
.tm-planb .pull { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--v300); }
.tm-planb h3 { margin-top: 16px; font-size: clamp(1.4rem, 3.2vw, 2rem); font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.tm-planb p { margin-top: 16px; color: var(--muted); max-width: 56ch; }

/* Témoignages réels + captures floutées (cartes verticales) */
.tm-proof-rows { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 28px); margin-top: clamp(48px, 7vw, 72px); }
.tm-prow {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel);
  padding: clamp(24px, 3vw, 34px);
}
/* Ordre dans la carte : nom + canal, citation, capture, paragraphe */
.tm-by { display: flex; flex-direction: column; gap: 3px; }
.tm-by .tm-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--text); }
.tm-by .tm-metaline { font-family: var(--font-mono); font-size: 12.5px; color: var(--v300); letter-spacing: .02em; }
.tm-quote { font-family: var(--font-quote); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 2.1vw, 1.85rem); line-height: 1.3; color: var(--text); margin: 18px 0 0; letter-spacing: .005em; }
.tm-quote .tm-key { font-style: italic; color: var(--text); background: linear-gradient(transparent 62%, rgba(110,86,224,.20) 0); padding: 0 .04em; }
.tm-proof { margin: 24px 0 0; }
.tm-context { color: var(--muted); font-size: 15px; margin: 20px 0 0; }

.pc { position: relative; border-radius: var(--r-img); overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pc:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: 0 0 0 1px rgba(110,86,224,.30) inset, 0 22px 54px -20px rgba(110,86,224,.55); }
.pc--phone { max-width: 260px; margin-inline: auto; border-radius: 30px; padding: 8px; background: #0c0c11; border: 1px solid var(--border-strong); }
.pc--phone .pc-screen { border-radius: 23px; overflow: hidden; position: relative; }
.pc--phone img { display: block; width: 100%; height: auto; }
.pc--phone .pc-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 96px; height: 20px; border-radius: 12px; background: #000; z-index: 2; }
.pc-cap { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.pc-cap .pc-vrf { display: inline-flex; align-items: center; gap: 5px; color: var(--v300); }
.pc-cap .pc-sep { color: var(--faint); }

/* Contrôles carrousel : masqués en desktop, révélés en mobile */
.tm-swipe { display: none; }

@media (max-width: 820px){
  /* Viewport non-scrollable : rien ne peut piéger le scroll de la page.
     touch-action: pan-y => le geste vertical va toujours à la page. */
  .tm-viewport { overflow: hidden; touch-action: pan-y; margin-top: 34px; }

  /* Rail piloté par transform (translateX en JS), pas de scroll natif */
  .tm-proof-rows {
    display: flex; flex-direction: row; gap: 14px; margin-top: 0;
    touch-action: pan-y; will-change: transform;
  }

  /* Chaque témoignage = une carte-slide */
  .tm-prow {
    flex: 0 0 86%; align-self: flex-start;
    padding: clamp(20px, 5.6vw, 26px);
    -webkit-user-select: none; user-select: none;
  }
  /* dans le carrousel, la carte reste visible (l'anim reveal ne doit pas la cacher) */
  .tm-prow.reveal, .tm-prow .reveal { opacity: 1 !important; transform: none !important; }

  .tm-quote { font-size: clamp(1.3rem, 5.2vw, 1.65rem); line-height: 1.34; margin-top: 16px; }
  .tm-context { margin-top: 18px; }
  .tm-proof { margin-top: 22px; }
  .pc--phone img { pointer-events: none; }
  .pc--phone { max-width: 222px; }
  .pc-cap { font-size: 11.5px; }

  /* Contrôles : flèches + points */
  .tm-swipe { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
  .tm-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border-radius: 50%;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    cursor: pointer; transition: transform .16s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease), background .2s var(--ease);
  }
  .tm-arrow:active { transform: scale(.94); }
  .tm-arrow:disabled { opacity: .3; cursor: default; }
  .tm-arrow:not(:disabled):hover { border-color: var(--v500); background: var(--surface-2); }
  .tm-dots { display: flex; gap: 8px; }
  .tm-dot {
    width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%;
    background: var(--faint); opacity: .5; cursor: pointer;
    transition: opacity .2s var(--ease), background .2s var(--ease), width .2s var(--ease), border-radius .2s var(--ease);
  }
  .tm-dot.is-on { background: var(--v400); opacity: 1; width: 20px; border-radius: 4px; }
}
@media (max-width: 400px){
  .pc--phone { max-width: 210px; }
  .tm-prow { flex-basis: 88%; }
}
@media (prefers-reduced-motion: reduce){
  .tm-swipe-hint svg { animation: none; }
}

/* ---------- Pour toi / pas pour toi ---------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
@media (max-width: 720px){ .fit { grid-template-columns: 1fr; } }
.fit-col { padding: 30px clamp(22px,3vw,32px); border-radius: var(--r-card); border: 1px solid var(--border); background: var(--surface); }
.fit-col.yes { border-color: rgba(110,86,224,.35); }
.fit-col h3 { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.fit-col ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.fit-col li { display: flex; gap: 12px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.fit-col li svg { flex: none; margin-top: 3px; }
.fit-col.yes li svg { color: var(--v400); }
.fit-col.no li svg { color: var(--faint); }

/* ---------- Offre finale + FAQ ---------- */
.final { position: relative; overflow: hidden; }
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.final-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, var(--bg), rgba(9,9,13,.6) 40%, var(--bg)); }
.final .wrap { position: relative; z-index: 1; }
.final h2 { font-size: clamp(1.9rem, 4.8vw, 3.3rem); line-height: 1.06; max-width: 20ch; }
.offer-card {
  margin-top: 44px; border: 1px solid var(--border-strong); border-radius: var(--r-panel);
  background: linear-gradient(180deg, #0e0e16, #0b0b12); padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 44px); align-items: center;
}
@media (max-width: 720px){ .offer-card { grid-template-columns: 1fr; } }
.offer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.offer-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }
.offer-list li svg { color: var(--v400); flex: none; margin-top: 3px; }
.offer-list li b { color: var(--text); font-weight: 600; }
.offer-buy { text-align: left; }
.price-row { display: flex; align-items: baseline; gap: 12px; }
.price-now { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; }
.price-old { font-family: var(--font-mono); color: var(--faint); text-decoration: line-through; font-size: 18px; }
.price-tag { font-family: var(--font-mono); font-size: 12px; color: var(--gold); letter-spacing: .08em; margin-top: 8px; }
.offer-buy .btn { margin-top: 22px; }
.offer-buy .cta-note { display: block; margin-top: 14px; }

/* FAQ */
.faq { margin-top: 64px; max-width: 820px; }
.faq h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 22px; }
.qa { border-top: 1px solid var(--border); }
.qa details { border-bottom: 1px solid var(--border); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex; justify-content: space-between; gap: 20px;
  font-weight: 600; font-size: 17px; color: var(--text); align-items: center;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .chev { flex: none; color: var(--v400); transition: transform .25s var(--ease); }
.qa details[open] summary .chev { transform: rotate(45deg); }
.qa .a { padding: 0 4px 24px; color: var(--muted); max-width: 68ch; line-height: 1.6; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); padding-block: 56px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; align-items: flex-start; }
.site-footer .logo img { height: 30px; opacity: .9; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.legal-note { margin-top: 26px; font-size: 12.5px; color: var(--faint); max-width: 70ch; line-height: 1.6; }
.legal-note .mono { color: var(--muted); }

/* ---------- Sticky mobile CTA ---------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--border);
  transform: translateY(120%); transition: transform .35s var(--ease);
}
.mobile-cta.show { transform: translateY(0); }
.mobile-cta .mc-price { font-family: var(--font-mono); font-size: 16.5px; font-weight: 700; }
.mobile-cta .mc-price s { color: var(--faint); margin-left: 9px; font-weight: 700; }
@media (max-width: 720px){ .mobile-cta { display: flex; } }

/* ---------- Consent banner ---------- */
.consent {
  position: fixed; z-index: 80; left: 16px; right: 16px; bottom: 16px;
  max-width: 520px; margin-inline: auto;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-card);
  padding: 20px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
}
.consent[hidden] { display: none; }
.consent p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.consent p a { color: var(--v300); text-decoration: underline; }
.consent-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.consent .btn { font-size: 14px; padding: 11px 18px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .hero-canvas { display: none; }
}

/* legal article pages */
.doc { max-width: 780px; }
.doc h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.02; margin-bottom: 8px; }
.doc .updated { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-bottom: 40px; }
.doc h2 { font-size: 20px; margin: 40px 0 12px; }
.doc h3 { font-size: 16px; margin: 24px 0 8px; color: var(--text); }
.doc p, .doc li { color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.doc ul { padding-left: 20px; }
.doc a { color: var(--v300); text-decoration: underline; }
.doc .todo { color: var(--gold); font-family: var(--font-mono); font-size: 13px; }
.back-link { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; margin-bottom: 40px; }
.back-link:hover { color: var(--text); }

/* merci page */
.thanks { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.thanks .check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 28px; background: rgba(110,86,224,.14); color: var(--v300); box-shadow: var(--glow); }
.thanks h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.02; }
.thanks p { margin-top: 20px; color: var(--muted); max-width: 46ch; margin-inline: auto; }
.thanks .thanks-actions { margin-top: 30px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.thanks .thanks-support { margin-top: 26px; font-size: 13px; color: var(--faint); }
.thanks .thanks-support a { color: var(--v300); }
/* merci — « et maintenant ? » : séquence réelle (reçois -> garde -> commence) */
.thanks-next { margin: 40px auto 0; display: grid; gap: 12px; text-align: left; max-width: 460px; }
.thanks-next .tn { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.thanks-next .tn svg { color: var(--v400); flex: none; margin-top: 2px; }
.thanks-next .tn b { font-weight: 600; color: var(--text); }
.thanks-next .tn span { display: block; }
.thanks-next .tn span small { display: block; margin-top: 3px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
/* merci — polish : text-wrap + entrée du badge de confirmation (moment de récompense) */
.thanks p, .thanks-next .tn span small { text-wrap: pretty; }
@keyframes thanksPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
.thanks .check { animation: thanksPop .5s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .thanks .check { animation: none; } }

/* =========================================================================
   POLISH — audit consolidé (typo FR · feel · conformité)
   Bloc additionnel : surcharge par ordre de cascade, ne modifie rien d'existant.
   ========================================================================= */
/* text-wrap: pretty -> supprime orphelins et rivières dans les paragraphes */
.hero-sub, .sec-lead, .fork p, .step p, .third-way, .mech-foot,
.pane p, .toc-row .desc p, .assure-card p, .tm-context, .tm-quote,
.fit-col li, .offer-list li span, .qa .a, .form-fine, .legal-note,
.bonus-item span, .consent p { text-wrap: pretty; }

/* FAQ : ouverture en fondu + survol du summary (interactivité lisible) */
.qa summary { transition: color .2s var(--ease); }
.qa summary:hover { color: var(--v300); }
.qa summary:hover .chev { color: var(--v300); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.qa details[open] .a { animation: faqIn .28s var(--ease); }

/* "Lire un extrait" : la flèche descend au survol (cohérent avec l'action) */
.hero-actions .link-down svg { transition: transform .2s var(--ease); }
.hero-actions .link-down:hover svg { transform: translateY(3px); }

/* prefers-reduced-motion : pas de saut au survol, pas d'animation d'ouverture */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn-primary:hover { transform: none; }
  .qa details[open] .a { animation: none; }
  .hero-actions .link-down:hover svg { transform: none; }
}