/* EPSO Turbo — page de vente.
   Reprend les tokens du design system de l'app (crème / bleu / Poppins) mais
   en mise en page large : ici on est sur un site, pas sur l'écran 430px. */

:root {
  --bg: #EDE9E1;
  --surface: #F6F4EF;
  --card: #ffffff;
  --card-alt: #FAF8F3;

  --text: #1C2438;
  --text-muted: #6B7385;
  --text-light: #9A9384;

  --accent: #2F6BFF;
  --accent-dark: #1E52D8;
  --accent-light: #EAF0FF;

  --purple: #7A5AF8;
  --purple-light: #F0ECFF;

  --success: #12B76A;
  --success-light: #E7F8EF;
  --streak: #FF7A3D;
  --streak-text: #EA6A34;
  --streak-light: #FFF0E8;

  --border: #ECE7DE;
  --border-strong: #E0DBD1;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 6px 18px rgba(28, 36, 56, .05);
  --shadow-md: 0 10px 30px rgba(28, 36, 56, .07);
  --shadow-lg: 0 24px 60px rgba(28, 36, 56, .10);
  --shadow-accent: 0 14px 28px rgba(47, 107, 255, .28);

  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { color: var(--accent-dark); }
::selection { background: var(--accent-light); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 0;
  border-radius: var(--r-md);
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(47, 107, 255, .34);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--card); color: var(--text); border-color: var(--text-light); }
.btn-lg { padding: 19px 40px; font-size: 17px; }
.btn-block { width: 100%; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(237, 233, 225, .86);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--text); letter-spacing: -.01em; }
.brand:hover { color: var(--text); }
.brand-mark {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--accent);
  color: #fff; font-size: 17px;
  box-shadow: 0 6px 14px rgba(47, 107, 255, .3);
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--text-muted); font-size: 15px; font-weight: 500; }
.nav-links a:hover { color: var(--text); }
.nav .btn { padding: 11px 20px; font-size: 15px; white-space: nowrap; }

/* Sélecteur de langue + bouton d'achat sur une même ligne. Sans cette règle,
   .nav-right reste un bloc : ses deux enfants s'empilent verticalement et le
   second dépasse de l'en-tête, dont la hauteur est fixe. */
.nav-right { display: flex; align-items: center; gap: 12px; flex: none; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 64px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 13px; font-weight: 700;
  margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.lede { font-size: 18px; color: var(--text-muted); max-width: 33em; margin-bottom: 30px; }
.lede-list {
  list-style: none;
  max-width: 33em;
  margin-bottom: 30px;
  display: grid;
  gap: 12px;
  counter-reset: lede;
}
.lede-list li {
  counter-increment: lede;
  position: relative;
  padding-left: 40px;
  font-size: 18px; font-weight: 600;
  line-height: 1.35;
  color: var(--text);
}
.lede-list li::before {
  content: counter(lede);
  position: absolute;
  left: 0; top: -1px;
  width: 26px; height: 26px;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--text-light); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Compte à rebours ---------- */
.countdown {
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: 22px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--streak-light);
  border: 1px solid #FFD9C4;
  color: #B44A18;
  font-size: 14px; font-weight: 600;
}
.countdown b { font-size: 17px; font-weight: 800; }

/* ---------- Maquette téléphone ---------- */
.phone {
  width: 300px;
  margin: 0 auto;
  border-radius: 38px;
  background: #1C2438;
  padding: 10px;
  box-shadow: var(--shadow-lg);
}
.phone-screen {
  border-radius: 30px;
  background: var(--surface);
  padding: 20px 16px;
  min-height: 520px;
  display: flex; flex-direction: column; gap: 14px;
}
.phone-shot {
  display: block; width: 100%; height: auto;
  border-radius: 30px;
}
.mock-top { display: flex; justify-content: space-between; align-items: center; }
.mock-streak {
  background: var(--streak-light); color: var(--streak-text, #EA6A34);
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
}
.mock-day { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.mock-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-sm);
}
.mock-caption { font-size: 10px; color: var(--text-light); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.mock-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.mock-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 4px 5px; border-bottom: 1px solid var(--border); }
.mock-table td { padding: 4px 5px; border-bottom: 1px solid var(--card-alt); }
.mock-q { font-size: 13px; font-weight: 600; line-height: 1.45; }
.mock-opt {
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 9px; background: var(--card);
}
.mock-opt .k {
  width: 20px; height: 20px; flex: none; border-radius: 6px;
  background: var(--card-alt); color: var(--text-muted);
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
}
.mock-opt.ok { border-color: var(--success); background: var(--success-light); }
.mock-opt.ok .k { background: var(--success); color: #fff; }
.mock-correction {
  background: var(--accent-light); border-radius: var(--r-sm);
  padding: 11px 13px; font-size: 11.5px; color: var(--accent-dark); font-weight: 600; line-height: 1.5;
}

/* ---------- Bandeau chiffres ---------- */
.stats { padding: 10px 0 66px; }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px 22px; box-shadow: var(--shadow-sm);
}
.stat { text-align: center; }
.stat-n { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--accent); line-height: 1.1; }
.stat-l { font-size: 13.5px; color: var(--text-muted); font-weight: 500; margin-top: 4px; }

/* ---------- Sections ---------- */
.section { padding: 74px 0; }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-head { max-width: 40em; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { font-size: 13px; font-weight: 700; color: var(--purple); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 12px; }
.h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin-bottom: 14px; }
.sub { font-size: 17px; color: var(--text-muted); }

/* ---------- La méthode extraite des manuels ---------- */
.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.method {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
.method:nth-child(2) { border-left-color: var(--streak); }
.method:nth-child(3) { border-left-color: var(--purple); }
.method-ico { font-size: 27px; margin-bottom: 14px; }
.method h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.method p { font-size: 14.5px; color: var(--text-muted); }

/* ---------- Programme ---------- */
.phases { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.phase {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 30px; box-shadow: var(--shadow-sm);
}
.phase-tag {
  display: inline-block; padding: 6px 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; margin-bottom: 14px;
}
.phase-1 .phase-tag { background: var(--accent-light); color: var(--accent-dark); }
.phase-2 .phase-tag { background: var(--purple-light); color: var(--purple); }
.phase h3 { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin-bottom: 6px; }
.phase > p { font-size: 14.5px; color: var(--text-muted); margin-bottom: 20px; }
.weeks { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.weeks li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14.5px; font-weight: 500;
  padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--card-alt); border: 1px solid var(--border);
}
.weeks .n {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
}
.phase-1 .weeks .n { color: var(--accent); }
.phase-2 .weeks .n { color: var(--purple); }

/* ---------- Fonctionnalités ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feat-ico {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; font-size: 21px;
  background: var(--accent-light); margin-bottom: 16px;
}
.feat:nth-child(3n+2) .feat-ico { background: var(--purple-light); }
.feat:nth-child(3n) .feat-ico { background: var(--streak-light); }
.feat h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: -.01em; }
.feat p { font-size: 14.5px; color: var(--text-muted); }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: s; }
.step { text-align: center; padding: 0 10px; }
.step-n {
  width: 52px; height: 52px; margin: 0 auto 16px;
  border-radius: 16px; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 21px; font-weight: 800;
  box-shadow: var(--shadow-accent);
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 7px; }
.step p { font-size: 14.5px; color: var(--text-muted); }

/* ---------- Prix ---------- */
.price-card {
  max-width: 480px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 40px 34px;
  box-shadow: var(--shadow-lg); text-align: center;
  position: relative; overflow: hidden;
}
.price-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
}
.price-badge {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--streak-light); color: #B44A18;
  font-size: 12.5px; font-weight: 700; margin-bottom: 18px;
}
.price-amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-bottom: 6px; }
.price-amount .n { font-size: 62px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price-amount .c { font-size: 27px; font-weight: 700; color: var(--text-muted); }
.price-once { font-size: 14.5px; color: var(--text-muted); margin-bottom: 26px; }
.price-list { list-style: none; text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.price-list li { display: flex; gap: 11px; font-size: 15px; align-items: flex-start; }
.price-list .tick {
  width: 21px; height: 21px; flex: none; margin-top: 2px;
  border-radius: 50%; background: var(--success-light); color: var(--success);
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.price-fine { margin-top: 16px; font-size: 13px; color: var(--text-light); }

/* Langue du contenu, juste au-dessus du bouton d'achat. Assez visible pour
   qu'on ne puisse pas dire qu'on ne l'a pas vue, assez sobre pour ne pas
   ressembler à une alerte d'erreur. */
.price-lang {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #9A3412;
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}
.price-lang b { font-weight: 700; }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 19px 22px; font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 21px; color: var(--text-light); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq .a { padding: 17px 22px 21px; font-size: 15px; color: var(--text-muted); }
.faq .a p + p { margin-top: 10px; }

/* ---------- Appel final ---------- */
.final { text-align: center; padding: 84px 0; }
.final .h2 { max-width: 18em; margin-inline: auto; }
.final .sub { max-width: 34em; margin: 0 auto 32px; }

/* ---------- Pied de page ---------- */
.footer {
  background: var(--card); border-top: 1px solid var(--border);
  padding: 40px 0 30px; font-size: 14px; color: var(--text-muted);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { color: var(--text-muted); font-weight: 500; }
.footer-links a:hover { color: var(--accent); }
.footer-legal { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-light); }

/* ---------- Pages légales ---------- */
.legal { max-width: 780px; padding-top: 58px; padding-bottom: 76px; }
.legal h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.legal-date { font-size: 14px; color: var(--text-light); margin-bottom: 34px; }
.legal h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  margin: 38px 0 12px; padding-top: 22px; border-top: 1px solid var(--border);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p { font-size: 15.5px; color: var(--text-muted); margin-bottom: 12px; }
.legal p b, .legal li b { color: var(--text); }
.legal ul { margin: 0 0 14px 22px; }
.legal li { font-size: 15.5px; color: var(--text-muted); margin-bottom: 9px; }
.legal-back { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 15px; }

.todo {
  background: #FFF7ED; border: 1px solid #FED7AA; color: #9A3412;
  border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 34px;
  font-size: 14.5px; line-height: 1.6;
}
.todo b { display: block; margin-bottom: 6px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 52px 0 44px; }
  .lede { max-width: none; }
  .lede-list { max-width: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .feat-grid, .steps, .method-grid { grid-template-columns: 1fr; }
  .phases { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .section { padding: 56px 0; }
}

@media (max-width: 480px) {
  .wrap { padding: 0 18px; }
  /* Les boutons pleine largeur, SAUF celui de l'en-tête : il partage sa ligne
     avec le sélecteur de langue et ferait déborder la barre. */
  .btn:not(.nav-cta) { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; }

  /* Place comptée dans la barre : on compacte le bouton et on réduit le
     sélecteur à son drapeau, qui suffit à se repérer. */
  .nav .btn { padding: 10px 14px; font-size: 13.5px; }
  .nav-right { gap: 8px; }
  .lang-switch > summary { padding: 7px 9px; }
  .lang-switch > summary > span { display: none; }
  .phone { width: 100%; max-width: 300px; }
  .price-card { padding: 32px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PAGES GUIDES (/en/…)
   Colonne de lecture étroite : ces pages se lisent, elles ne se survolent
   pas. Tout ce qui suit ne sert qu'aux guides — la page de vente n'en
   charge rien de plus qu'un peu de CSS mort.
   ════════════════════════════════════════════════════════════════════════ */

/* ---------- Sélecteur de langue ---------- */
/* Neuf langues tiennent mal en enfilade dans un en-tête, surtout sur
   téléphone : on replie en menu. <details> plutôt qu'un menu JavaScript —
   ça s'ouvre sans script, et les neuf versions restent de vrais liens,
   donc explorables par les moteurs. */
.lang-switch { position: relative; }

.lang-switch > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 11px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .15s ease, color .15s ease;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::after {
  content: '▾'; font-size: 10px; color: var(--text-light); letter-spacing: 0;
}
.lang-switch > summary:hover { border-color: var(--accent); color: var(--accent); }
.lang-switch[open] > summary { border-color: var(--accent); color: var(--accent); }

.flag {
  display: block; flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(28, 36, 56, .10);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 190px;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  font-size: 14px; font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--card-alt); color: var(--text); }
.lang-menu a.is-active { background: var(--accent-light); color: var(--accent-dark); font-weight: 700; }

@media (max-width: 900px) {
  /* Le menu déborderait de l'écran s'il restait ancré au bouton. */
  .lang-menu { right: -8px; }
}

/* ---------- Bandeau « contenu en français » ----------
   ⚠️ À SUPPRIMER une fois les 186 questions traduites en anglais (voir
   README, section SEO). Tant qu'il est là, la page ne promet rien de faux. */
.lang-warn {
  background: #FFF7ED; border-bottom: 1px solid #FED7AA; color: #9A3412;
  font-size: 13.5px; font-weight: 500; text-align: center; padding: 10px 18px;
}
.lang-warn b { font-weight: 700; }

/* ---------- Fil d'Ariane ---------- */
.crumb { font-size: 13px; color: var(--text-light); padding-top: 26px; }
.crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumb a { color: var(--text-muted); font-weight: 500; }
.crumb a:hover { color: var(--accent); }
.crumb li + li::before { content: '›'; margin-right: 8px; color: var(--border-strong); }

/* ---------- Corps d'article ---------- */
.guide { max-width: 760px; padding-bottom: 20px; }
.guide-head { padding: 18px 0 26px; }
.guide h1 {
  font-size: clamp(30px, 4.4vw, 44px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.14; margin-bottom: 16px;
}
.guide-meta { font-size: 13.5px; color: var(--text-light); display: flex; flex-wrap: wrap; gap: 6px 16px; }
.guide-lede { font-size: 18.5px; color: var(--text-muted); margin: 18px 0 0; }

.guide h2 {
  font-size: clamp(23px, 3vw, 29px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.22; margin: 52px 0 14px; scroll-margin-top: 84px;
}
.guide h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: 30px 0 10px; }
.guide p { font-size: 16.5px; color: var(--text-muted); margin-bottom: 15px; }
.guide p b, .guide li b, .guide td b { color: var(--text); font-weight: 700; }
.guide ul, .guide ol { margin: 0 0 18px 22px; }
.guide li { font-size: 16.5px; color: var(--text-muted); margin-bottom: 10px; }
.guide hr { border: 0; border-top: 1px solid var(--border); margin: 46px 0; }

/* ---------- Sommaire ---------- */
.toc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px 26px; margin: 30px 0 10px;
  box-shadow: var(--shadow-sm);
}
.toc-t { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-light); margin-bottom: 12px; }
.toc ol { list-style: none; margin: 0; counter-reset: toc; columns: 2; column-gap: 30px; }
.toc li { counter-increment: toc; font-size: 15px; margin-bottom: 9px; break-inside: avoid; }
.toc li::before { content: counter(toc) '. '; color: var(--text-light); font-weight: 700; }
.toc a { color: var(--text-muted); font-weight: 500; }
.toc a:hover { color: var(--accent); }

/* ---------- Encadrés ---------- */
.note {
  border-radius: var(--r-md); padding: 18px 22px; margin: 24px 0;
  font-size: 15.5px; line-height: 1.6;
  background: var(--accent-light); color: var(--accent-dark);
  border-left: 4px solid var(--accent);
}
.note b { display: block; margin-bottom: 5px; color: inherit; }
.note.warn { background: var(--streak-light); color: #9A3412; border-left-color: var(--streak); }
.note.ok { background: var(--success-light); color: #07683C; border-left-color: var(--success); }
.note p { color: inherit; font-size: inherit; margin: 0 0 8px; }
.note p:last-child { margin-bottom: 0; }
.note a { color: inherit; text-decoration: underline; }

/* ---------- Tableau de données ---------- */
.data-wrap { overflow-x: auto; margin: 0 0 16px; }
.data {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.data caption {
  caption-side: top; text-align: left; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-light);
  padding-bottom: 8px;
}
.data th, .data td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--border); }
.data th:first-child, .data td:first-child { text-align: left; }
.data thead th { font-weight: 700; color: var(--text); background: var(--card-alt); font-size: 14px; }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody td { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Question d'exemple ---------- */
.qbox {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px; margin: 26px 0;
  box-shadow: var(--shadow-sm);
}
.qbox-tag {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--purple-light); color: var(--purple);
  font-size: 12px; font-weight: 700; margin-bottom: 14px;
}
.qbox .q { font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 16px; line-height: 1.45; }
.opts { list-style: none; margin: 0 0 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.opts li {
  display: flex; align-items: center; gap: 10px; margin: 0;
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 14px; font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--card-alt);
}
.opts .k {
  width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}

.sol { border-top: 1px solid var(--border); padding-top: 4px; }
.sol summary {
  cursor: pointer; list-style: none; padding: 14px 0 4px;
  font-weight: 700; font-size: 15px; color: var(--accent);
  display: flex; align-items: center; gap: 8px;
}
.sol summary::-webkit-details-marker { display: none; }
.sol summary::before { content: '▸'; transition: transform .15s ease; }
.sol[open] summary::before { transform: rotate(90deg); }
.sol .body { padding: 6px 0 4px; }
.sol .body p, .sol .body li { font-size: 15.5px; }
.sol .body ol { margin-left: 20px; }
.sol .ans {
  display: inline-block; margin-bottom: 12px; padding: 6px 14px; border-radius: 999px;
  background: var(--success-light); color: #07683C; font-size: 14px; font-weight: 700;
}
.calc {
  display: block; background: var(--card-alt); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 12px 15px; margin: 10px 0;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 14.5px; color: var(--text); overflow-x: auto; white-space: nowrap;
}

/* ---------- Séries de figures (raisonnement abstrait) ---------- */
.figs { margin: 20px 0 6px; }
.figs-t { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: 10px; }
.fig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fig {
  width: 82px; height: 82px; flex: none;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--r-sm); padding: 6px; position: relative;
}
.fig svg { width: 100%; height: 100%; display: block; }
.fig-n {
  position: absolute; top: -8px; left: -8px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--text); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 800;
}
.fig.ask { border-style: dashed; border-color: var(--accent); background: var(--accent-light); }
.fig.ask::after {
  content: '?'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: var(--accent);
}
.fig.pick .fig-n { background: var(--accent); }
.fig.good { border-color: var(--success); background: var(--success-light); }
.fig.good .fig-n { background: var(--success); }
.fig-sep { color: var(--border-strong); font-size: 22px; font-weight: 700; padding: 0 2px; }

.fseq { stroke: #1C2438; fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.fseq .fill { fill: #1C2438; stroke: none; }
.fseq .half { fill: #2F6BFF; stroke: none; }
.fseq .open { fill: #fff; }

/* ---------- Familles de patterns ---------- */
.pat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 24px 0; }
.pat {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px; box-shadow: var(--shadow-sm);
}
.pat h3 { margin: 0 0 6px; font-size: 16px; }
.pat p { font-size: 14.5px; margin: 0; }
.pat .pat-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; background: var(--accent-light); color: var(--accent-dark);
  font-size: 12px; font-weight: 800; margin-bottom: 10px;
}

/* ---------- Appel à l'action intégré ---------- */
.cta-box {
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg); padding: 28px 30px; margin: 40px 0;
  box-shadow: var(--shadow-sm);
}
.cta-box h2 { margin-top: 0 !important; font-size: 22px !important; }
.cta-box p { margin-bottom: 18px; }
.cta-box .btn { padding: 14px 26px; font-size: 15.5px; }
.cta-fine { font-size: 13.5px; color: var(--text-light); margin: 12px 0 0 !important; }

/* ---------- Pages voisines ---------- */
.next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0 0; }
.next {
  display: block; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px 22px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.next:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.next .k { font-size: 12px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; }
.next .t { font-size: 16.5px; font-weight: 700; color: var(--text); margin-top: 5px; line-height: 1.35; }

@media (max-width: 700px) {
  .toc ol { columns: 1; }
  .next-grid { grid-template-columns: 1fr; }
  .guide h2 { margin-top: 40px; }
  .qbox { padding: 20px 18px; }
  .fig { width: 68px; height: 68px; }
}

/* ════════════════════════════════════════════════════════════════════════
   RÉPONSE DIRECTE ET TABLEAU DE FAITS

   Ces deux blocs servent autant les assistants (ChatGPT, Perplexity, AI
   Overviews) que les lecteurs pressés. Un moteur génératif cite ce qu'il peut
   extraire d'un seul tenant : un paragraphe qui répond entièrement à la
   question sans dépendre de la phrase précédente, et un tableau clé → valeur.
   D'où une réponse courte en tête d'article, avant le développement.
   ════════════════════════════════════════════════════════════════════════ */

.answer {
  background: var(--card); border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-lg); padding: 24px 28px; margin: 26px 0 8px;
  box-shadow: var(--shadow-sm);
}
.answer-t {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--accent); margin-bottom: 10px;
}
.answer p { font-size: 17.5px; color: var(--text); line-height: 1.6; margin-bottom: 12px; }
.answer p:last-child { margin-bottom: 0; }
.answer p b { font-weight: 700; }

.facts { margin: 26px 0; }
.facts table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.facts caption {
  caption-side: top; text-align: left;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-light); padding-bottom: 10px;
}
.facts th, .facts td {
  padding: 11px 16px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border); background: var(--card);
}
.facts th { font-weight: 700; color: var(--text); width: 38%; }
.facts td { color: var(--text-muted); }
.facts tr:first-child th { border-top-left-radius: var(--r-sm); }
.facts tr:first-child td { border-top-right-radius: var(--r-sm); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts table { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }

/* ---------- Tableau comparatif ---------- */
.cmp-wrap { overflow-x: auto; margin: 24px 0; }
.cmp {
  width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px;
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden;
}
.cmp th, .cmp td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border); }
.cmp thead th { background: var(--card-alt); font-weight: 700; font-size: 14px; color: var(--text); }
.cmp tbody th { font-weight: 700; color: var(--text); background: var(--card); }
.cmp tbody td { color: var(--text-muted); background: var(--card); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp .yes { color: var(--success); font-weight: 700; }
.cmp .no { color: var(--text-light); font-weight: 700; }

@media (max-width: 700px) {
  .answer { padding: 20px 18px; }
  .answer p { font-size: 16.5px; }
  .facts th { width: 44%; }
}