/* ==========================================================================
   TRADESMART ACADEMY — DESIGN SYSTEM
   ---------------------------------------------------------------------------
   Grammaire visuelle : rigueur et raffinement d'un produit technologique haut
   de gamme, appliqués à un sujet financier.

   Principes
   · Le vide est un matériau. Les respirations sont larges et assumées.
   · Une seule idée par écran, énoncée en très grand, centrée.
   · La profondeur vient du contraste des fonds, pas des bordures.
   · Le mouvement est long, continu, jamais brusque : 400 à 900 ms,
     une seule courbe d'accélération pour tout le site.
   · Deux couleurs de texte, une couleur d'accent. Le vert et le rouge
     ne disent que hausse et baisse.
   · Tous les chiffres sont tabulaires.

   Compatible avec le balisage pédagogique existant : les noms de variables
   historiques (--accent, --bg-card, --text-muted…) sont conservés.

   01. Tokens           05. Typographie       09. Outils & quiz
   02. Base             06. Contrôles         10. Parcours
   03. Mouvement        07. Surfaces          11. Palette ⌘K
   04. Chrome           08. Contenu           12. Pied, impression, responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
  color-scheme: dark;

  /* — Fonds : noirs profonds, progression très serrée -------------------- */
  --k-void:  #000000;                 /* sections cinématiques */
  --k-0:     oklch(0.155 0.006 265);  /* fond de page */
  --k-1:     oklch(0.196 0.007 265);  /* surface */
  --k-2:     oklch(0.238 0.008 265);  /* surface levée */
  --k-3:     oklch(0.285 0.009 265);  /* surface active */
  --k-pale:  oklch(0.965 0.002 265);  /* section claire, respiration */

  --hair:    oklch(1 0 0 / 0.10);
  --hair-2:  oklch(1 0 0 / 0.18);

  /* — Accent unique ------------------------------------------------------- */
  --au:     oklch(0.845 0.115 88);
  --au-hi:  oklch(0.925 0.085 92);
  --au-lo:  oklch(0.700 0.115 82);
  --au-08:  oklch(0.845 0.115 88 / 0.08);
  --au-16:  oklch(0.845 0.115 88 / 0.16);
  --au-30:  oklch(0.845 0.115 88 / 0.30);

  /* — Sémantique de marché, et rien d'autre ------------------------------- */
  --up:    oklch(0.790 0.150 155);
  --up-08: oklch(0.790 0.150 155 / 0.08);
  --up-30: oklch(0.790 0.150 155 / 0.30);
  --dn:    oklch(0.690 0.180 24);
  --dn-08: oklch(0.690 0.180 24 / 0.08);
  --dn-30: oklch(0.690 0.180 24 / 0.30);

  /* — Deux teintes de repérage, très retenues ----------------------------- */
  --info:    oklch(0.760 0.070 245);
  --info-08: oklch(0.760 0.070 245 / 0.08);
  --note:    oklch(0.775 0.055 300);
  --note-08: oklch(0.775 0.055 300 / 0.08);

  /* — Texte : deux niveaux, plus un ton effacé ---------------------------- */
  --t-hi: oklch(0.972 0.002 265);
  --t:    oklch(0.828 0.004 265);
  --t-lo: oklch(0.660 0.006 265);   /* le gris de lecture secondaire */
  /* Le ton effacé passe au blanc : sur fond sombre, ces petits textes
     (fil d'Ariane, attributions, notes de tableau) étaient illisibles. */
  --t-xl: oklch(0.972 0.002 265);
  /* L'ancien gris survit là où l'effacement porte un sens plutôt que de la
     discrétion : une icône qui s'allume au survol, un champ encore vide,
     une session de marché fermée. */
  --t-eteint: oklch(0.540 0.007 265);

  /* — Alias historiques (contrat de compatibilité) ------------------------ */
  --bg-deep: var(--k-0);
  --bg-primary: var(--k-0);
  --bg-card: var(--k-1);
  --bg-card-hover: var(--k-2);
  --bg-input: var(--k-1);
  --border: var(--hair);
  --border-light: var(--hair-2);
  --accent: var(--au);
  --accent-bright: var(--au-hi);
  --accent-glow: var(--au-16);
  --accent-soft: var(--au-08);
  --green: var(--up);   --green-dim: oklch(0.680 0.140 155); --green-soft: var(--up-08);
  --red: var(--dn);     --red-dim: oklch(0.590 0.175 24);    --red-soft: var(--dn-08);
  --blue: var(--info);  --blue-dim: oklch(0.660 0.070 245);  --blue-soft: var(--info-08);
  --purple: var(--note); --purple-soft: var(--note-08);
  --text: var(--t);
  --text-body: var(--t);
  --text-muted: var(--t-lo);
  --text-faint: var(--t-xl);
  --text-heading: var(--t-hi);

  --glass: oklch(0.155 0.006 265 / 0.72);
  --glass-solid: oklch(0.170 0.006 265 / 0.94);
  --tape: oklch(0.185 0.007 265);   /* fond des graphiques, sombre en tout thème */

  /* — Typographie --------------------------------------------------------- */
  /* SF Pro quand elle est disponible (macOS, iOS), Inter Tight sinon.       */
  --f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
  --font-display: var(--f-display);
  --font-body: var(--f-body);
  --font-mono: var(--f-mono);

  /* Échelle : le suivi se resserre à mesure que le corps grandit */
  --s--1: 0.875rem;    /* 14 */
  --s-0:  1.0625rem;   /* 17 — corps de lecture */
  --s-1:  1.3125rem;   /* 21 — chapô */
  --s-2:  clamp(1.5rem, 1.28rem + 1.05vw, 2rem);        /* 24 → 32 */
  --s-3:  clamp(2rem, 1.55rem + 2.15vw, 3.25rem);       /* 32 → 52 */
  --s-4:  clamp(2.5rem, 1.62rem + 4.2vw, 4.5rem);       /* 40 → 72 */
  --s-5:  clamp(3rem, 1.6rem + 6.6vw, 6rem);            /* 48 → 96 */

  --tr-5: -0.028em;
  --tr-4: -0.025em;
  --tr-3: -0.022em;
  --tr-2: -0.018em;
  --tr-1: -0.012em;

  /* — Géométrie ----------------------------------------------------------- */
  --r-1: 10px;
  --r-2: 18px;
  --r-3: 28px;
  --r-pill: 980px;
  --radius: var(--r-2);
  --radius-lg: var(--r-3);

  --shell: 1220px;          /* largeur maximale des grilles */
  --read: 700px;            /* largeur maximale d'un bloc de texte centré */
  --pad: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
  --bay: clamp(72px, 9vw, 132px);   /* respiration verticale d'une section */
  --nav-h: 52px;

  /* — Mouvement : une seule courbe, des durées longues -------------------- */
  --ez: cubic-bezier(0.28, 0.11, 0.32, 1);
  --ez-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ms: 400ms;
  --ms-l: 700ms;
  --transition: var(--ms) var(--ez);

  --lift: 0 4px 24px oklch(0 0 0 / 0.28);
  --lift-2: 0 18px 56px oklch(0 0 0 / 0.44);
  --shadow-sm: var(--lift);
  --shadow: var(--lift);
  --shadow-lg: var(--lift-2);
}

/* — Thème clair ------------------------------------------------------------ */
:root[data-theme="light"] {
  color-scheme: light;

  --k-void: oklch(1 0 0);
  --k-0:    oklch(1 0 0);
  --k-1:    oklch(0.972 0.002 265);
  --k-2:    oklch(0.945 0.003 265);
  --k-3:    oklch(0.912 0.004 265);
  --k-pale: oklch(0.155 0.006 265);

  --hair:   oklch(0.2 0.01 265 / 0.10);
  --hair-2: oklch(0.2 0.01 265 / 0.20);

  --au:    oklch(0.585 0.110 74);
  --au-hi: oklch(0.505 0.120 68);
  --au-lo: oklch(0.470 0.110 68);
  --au-08: oklch(0.585 0.110 74 / 0.08);
  --au-16: oklch(0.585 0.110 74 / 0.16);
  --au-30: oklch(0.585 0.110 74 / 0.30);

  --up: oklch(0.510 0.135 155); --up-08: oklch(0.510 0.135 155 / 0.08); --up-30: oklch(0.510 0.135 155 / 0.30);
  --dn: oklch(0.530 0.180 26);  --dn-08: oklch(0.530 0.180 26 / 0.08);  --dn-30: oklch(0.530 0.180 26 / 0.30);
  --info: oklch(0.470 0.090 250); --info-08: oklch(0.470 0.090 250 / 0.07);
  --note: oklch(0.465 0.075 300); --note-08: oklch(0.465 0.075 300 / 0.07);

  --t-hi: oklch(0.185 0.006 265);
  --t:    oklch(0.310 0.006 265);
  --t-lo: oklch(0.505 0.006 265);
  /* En clair, le blanc n'existe pas : gris plus dense, et demi-gras
     appliqué en fin de feuille. */
  --t-xl: oklch(0.520 0.006 265);
  --t-eteint: oklch(0.615 0.006 265);

  --glass: oklch(1 0 0 / 0.80);
  --glass-solid: oklch(1 0 0 / 0.96);

  --lift: 0 4px 24px oklch(0.3 0.02 265 / 0.08);
  --lift-2: 0 18px 56px oklch(0.3 0.02 265 / 0.14);
}

/* ==========================================================================
   02. BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: var(--s-0);
  line-height: 1.53;
  letter-spacing: var(--tr-1);
  background: var(--k-0);
  color: var(--t);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  min-height: 100svh;
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
svg { display: inline-block; }

a { color: var(--au); text-decoration: none; transition: color var(--transition), opacity var(--transition); }
a:hover { color: var(--au-hi); }

::selection { background: var(--au); color: var(--k-0); }
:focus-visible { outline: 3px solid var(--au); outline-offset: 3px; border-radius: 6px; }

* { scrollbar-width: thin; scrollbar-color: var(--hair-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--hair-2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }

.skip-link {
  position: absolute; left: 16px; top: -70px; z-index: 3000;
  background: var(--au); color: var(--k-0);
  padding: 11px 22px; border-radius: var(--r-pill); font-weight: 600; font-size: var(--s--1);
  transition: top var(--transition);
}
.skip-link:focus { top: 14px; color: var(--k-0); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-o 180ms var(--ez) both; }
::view-transition-new(root) { animation: vt-n var(--ms-l) var(--ez-out) both; }
@keyframes vt-o { to { opacity: 0; } }
@keyframes vt-n { from { opacity: 0; transform: translateY(14px); } }

/* ==========================================================================
   03. MOUVEMENT — une seule mécanique, appliquée partout
   ========================================================================== */

/* Apparition longue et continue, pilotée par le défilement quand c'est
   supporté, sinon par IntersectionObserver (assets/app.js). */
.fade-in, .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--ms-l) var(--ez-out), transform var(--ms-l) var(--ez-out);
}
.fade-in.visible, .reveal.visible { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fade-in, .reveal {
      opacity: 1; transform: none; transition: none;
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
    @keyframes rise { from { opacity: 0; transform: translateY(34px); } }

    /* Séquence cinématique : l'élément grandit et se redresse en approchant */
    .cinema {
      animation: cinema linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes cinema {
      from { opacity: 0; transform: perspective(1600px) translateY(60px) rotateX(9deg) scale(0.90); }
      to   { opacity: 1; transform: perspective(1600px) translateY(0) rotateX(0deg) scale(1); }
    }

    /* Le titre héroïque se retire en douceur quand on quitte l'écran */
    .kinetic {
      animation: recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes recede { to { opacity: 0; transform: scale(0.94) translateY(-10px); filter: blur(3px); } }

    /* Parallaxe discrète */
    .drift {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes drift { from { transform: translateY(26px); } to { transform: translateY(-26px); } }
  }
}

/* ==========================================================================
   04. CHROME
   ========================================================================== */

.read-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1200; pointer-events: none; }
.read-rail i { display: block; height: 100%; width: 0%; background: var(--au); }
@supports (animation-timeline: scroll()) {
  .read-rail i {
    width: 100%; transform: scaleX(0); transform-origin: 0 50%;
    animation: rail linear both; animation-timeline: scroll(root block);
  }
  @keyframes rail { to { transform: scaleX(1); } }
}

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1100;
  height: var(--nav-h);
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.nav.is-stuck { background: var(--glass-solid); border-bottom-color: var(--hair); }

.nav-inner {
  max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 10px; height: 100%;
}

.nav-logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: var(--tr-2); color: var(--t-hi);
  margin-right: auto; white-space: nowrap;
}
.nav-logo:hover { color: var(--t-hi); }
.nav-logo .logo-icon {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--k-2);
  transition: background var(--transition);
}
/* La marque Sextant, réduite à ses trois traits : horizon, visée, angle. Le
   trait est volontairement plus épais que dans le favicon — à cette taille,
   l'épaisseur d'origine disparaîtrait. */
.nav-logo .logo-mark { width: 16px; height: auto; display: block; color: var(--au); }
.nav-logo:hover .logo-icon { background: var(--k-3); }
.nav-logo .logo-sub {
  font-size: 0.5625rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--au);
  display: block; line-height: 1; margin-top: 3px;
}

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
  position: relative; padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 400; color: var(--t-lo);
  letter-spacing: var(--tr-1); white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover { color: var(--t-hi); }
.nav-links a.active { color: var(--t-hi); }
.nav-links a.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px;
  height: 1px; background: var(--au);
}

.nav-cta {
  margin-left: 8px;
  background: var(--au) !important; color: var(--k-0) !important;
  font-weight: 500 !important; padding: 6px 15px !important;
  border-radius: var(--r-pill);
  transition: background var(--transition), transform var(--transition) !important;
}
.nav-cta:hover { background: var(--au-hi) !important; }
.nav-cta::after { display: none !important; }

.nav-tools { display: flex; align-items: center; gap: 4px; }

.icon-btn {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center; border-radius: 50%;
  cursor: pointer; background: transparent; border: none;
  color: var(--t-lo);
  transition: color var(--transition), background var(--transition);
}
.icon-btn:hover { color: var(--t-hi); background: var(--k-2); }
.icon-btn svg { width: 15px; height: 15px; }

.cmdk-hint {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 10px 0 13px; border-radius: var(--r-pill);
  cursor: pointer; background: var(--k-1); border: none;
  color: var(--t-xl); font-family: var(--f-body); font-size: 0.8125rem;
  transition: color var(--transition), background var(--transition);
}
.cmdk-hint:hover { color: var(--t-hi); background: var(--k-2); }
.cmdk-hint kbd { font-family: var(--f-mono); font-size: 0.625rem; color: var(--t-xl); }

.nav-toggle { display: none; }

.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 1000;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--glass-solid); backdrop-filter: blur(20px);
  border: 1px solid var(--hair); color: var(--t-lo);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.94);
  transition: opacity var(--transition), visibility var(--transition),
              transform var(--transition), color var(--transition);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--au); }

/* ==========================================================================
   05. TYPOGRAPHIE & MISE EN PAGE
   ========================================================================== */

.container { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.container-narrow { max-width: var(--read); margin: 0 auto; padding: 0 var(--pad); }
.section { padding: var(--bay) 0; position: relative; }

/* Section claire : la respiration du parcours */
.section-pale { background: var(--k-pale); color: oklch(0.28 0.006 265); }
:root:not([data-theme="light"]) .section-pale .section-title,
:root:not([data-theme="light"]) .section-pale h2,
:root:not([data-theme="light"]) .section-pale h3 { color: oklch(0.16 0.006 265); }
:root:not([data-theme="light"]) .section-pale .section-subtitle,
:root:not([data-theme="light"]) .section-pale p { color: oklch(0.44 0.006 265); }

/* Section cinématique : noir absolu */
.section-void { background: var(--k-void); }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; color: var(--t-hi); }

/* Bloc d'introduction centré — la composition de référence */
.bay-head { max-width: 860px; margin: 0 auto var(--bay); text-align: center; }
.bay-head .section-subtitle { margin-inline: auto; }

.section-label {
  display: block;
  font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2);
  color: var(--au); margin-bottom: 8px;
}

.section-title {
  font-size: var(--s-3); font-weight: 600;
  letter-spacing: var(--tr-4); line-height: 1.07;
  color: var(--t-hi); margin-bottom: 18px;
  text-wrap: balance;
}
.section-subtitle {
  font-size: var(--s-1); color: var(--t-lo);
  max-width: 46ch; line-height: 1.42; letter-spacing: var(--tr-2);
  text-wrap: pretty;
}

.accent-word { color: var(--au); }
.underline-mark { position: relative; display: inline-block; }
.underline-mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em; height: 2px;
  background: var(--au); border-radius: 2px;
}

/* Lien à chevron */
.chev {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--s-0); font-weight: 400; color: var(--au);
  letter-spacing: var(--tr-1);
}
.chev::after {
  content: '›'; font-size: 1.25em; line-height: 0.8;
  transition: transform var(--transition);
}
.chev:hover::after { transform: translateX(4px); }

.page-header {
  padding-top: calc(var(--nav-h) + clamp(56px, 8vw, 104px));
  padding-bottom: clamp(36px, 5vw, 64px);
  position: relative; text-align: center;
}
.page-header .container { max-width: 900px; }
.page-header h1 {
  font-size: var(--s-4); font-weight: 600;
  letter-spacing: var(--tr-5); line-height: 1.05;
  margin-bottom: 18px; text-wrap: balance;
}
.page-header .section-subtitle { margin-inline: auto; max-width: 52ch; }

.breadcrumb {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--t-xl); margin-bottom: 22px;
}
.breadcrumb a { color: var(--t-xl); }
.breadcrumb a:hover { color: var(--au); }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb .current { color: var(--t-lo); }

/* ==========================================================================
   06. CONTRÔLES
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--r-pill);
  font-family: var(--f-body); font-size: var(--s-0); font-weight: 400;
  letter-spacing: var(--tr-1);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), transform 220ms var(--ez), opacity var(--transition);
}
.btn:active { transform: scale(0.975); }

.btn-primary { background: var(--au); color: var(--k-0); }
.btn-primary:hover { background: var(--au-hi); color: var(--k-0); }

.btn-success { background: var(--up); color: var(--k-0); }
.btn-success:hover { color: var(--k-0); filter: brightness(1.08); }

.btn-outline { background: transparent; color: var(--au); border-color: var(--au-30); }
.btn-outline:hover { background: var(--au-08); border-color: var(--au); color: var(--au-hi); }

.btn-secondary { background: var(--k-2); color: var(--t-hi); border-color: transparent; }
.btn-secondary:hover { background: var(--k-3); color: var(--t-hi); }

.btn-ghost { background: transparent; color: var(--t-lo); padding: 10px 14px; }
.btn-ghost:hover { color: var(--t-hi); background: var(--k-2); }

.btn-lg { padding: 15px 32px; font-size: var(--s-1); }
.btn-sm { padding: 9px 18px; font-size: var(--s--1); }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--r-pill);
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--tr-1);
  background: var(--k-2); border: 1px solid transparent; color: var(--t-lo);
}
.pill-gold   { background: var(--au-08); color: var(--au); }
.pill-green  { background: var(--up-08); color: var(--up); }
.pill-red    { background: var(--dn-08); color: var(--dn); }
.pill-blue   { background: var(--info-08); color: var(--info); }
.pill-violet { background: var(--note-08); color: var(--note); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 6px; }
.dot-live { background: var(--up); animation: beat 2.6s var(--ez) infinite; }
@keyframes beat { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ==========================================================================
   06 bis. JEU D'ICÔNES
   ---------------------------------------------------------------------------
   Pictogrammes tracés sur une grille de 24, trait 1,7, extrémités arrondies —
   le même langage graphique que les schémas. Rendus par masque CSS : ils
   prennent la couleur du texte environnant, restent nets à toute taille et
   ne coûtent aucune requête réseau.

   Usage :  <i class="ic ic-check" aria-hidden="true"></i>
   Teinte : ajouter .up, .dn, .au — sinon la couleur est héritée.
   ========================================================================== */

.ic {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.135em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.ic.up { background-color: var(--up); }
.ic.dn { background-color: var(--dn); }
.ic.au { background-color: var(--au); }
.ic.lo { background-color: var(--t-lo); }
.ic-lg { width: 1.35em; height: 1.35em; vertical-align: -0.28em; }

/* Correction optique : la hauteur de capitale d'un caractère vaut environ
   0,7 cadratin. Une icône à 1 em paraît donc trop grosse à côté d'un titre.
   On la réduit là où le corps est grand. */
h1 .ic, h2 .ic, h3 .ic, h4 .ic,
.section-title .ic, .track-title .ic, .page-nav-title .ic,
.accordion-header .ic, .glossary-term .ic, .quiz-question .ic {
  width: 0.78em; height: 0.78em; vertical-align: -0.04em;
}
/* Les titres de leçon montent à plus de 50 px : l'écart optique s'y creuse. */
.lesson-block h3 .ic, .page-header h1 .ic, .hero h1 .ic {
  width: 0.64em; height: 0.64em; vertical-align: 0;
}

/* Certaines valeurs de statistique ne contenaient qu'un pictogramme : il
   remplissait toute la case. On lui rend une taille de vignette. */
.stat-value > .ic:only-child,
.result-value > .ic:only-child,
.key-num-value > .ic:only-child,
.figure-v > .ic:only-child {
  width: 1.5rem; height: 1.5rem; vertical-align: -0.15rem;
  background-color: var(--au);
}

/* Dans les encarts, l'icône ouvre la ligne : un peu d'air derrière elle. */
.key-point > .ic:first-child, .danger-point > .ic:first-child,
.info-box > .ic:first-child, .example > .ic:first-child,
.checklist-icon .ic { margin-right: 0.35em; }

/* Chaque masque est un SVG au trait, encodé en URL. */
.ic-check   { -webkit-mask-image: var(--i-check);   mask-image: var(--i-check); }
.ic-cross   { -webkit-mask-image: var(--i-cross);   mask-image: var(--i-cross); }
.ic-warn    { -webkit-mask-image: var(--i-warn);    mask-image: var(--i-warn); }
.ic-alert   { -webkit-mask-image: var(--i-alert);   mask-image: var(--i-alert); }
.ic-idea    { -webkit-mask-image: var(--i-idea);    mask-image: var(--i-idea); }
.ic-star    { -webkit-mask-image: var(--i-star);    mask-image: var(--i-star); }
.ic-target  { -webkit-mask-image: var(--i-target);  mask-image: var(--i-target); }
.ic-key     { -webkit-mask-image: var(--i-key);     mask-image: var(--i-key); }
.ic-chart   { -webkit-mask-image: var(--i-chart);   mask-image: var(--i-chart); }
.ic-up      { -webkit-mask-image: var(--i-up);      mask-image: var(--i-up); }
.ic-down    { -webkit-mask-image: var(--i-down);    mask-image: var(--i-down); }
.ic-shield  { -webkit-mask-image: var(--i-shield);  mask-image: var(--i-shield); }
.ic-lock    { -webkit-mask-image: var(--i-lock);    mask-image: var(--i-lock); }
.ic-ruler   { -webkit-mask-image: var(--i-ruler);   mask-image: var(--i-ruler); }
.ic-list    { -webkit-mask-image: var(--i-list);    mask-image: var(--i-list); }
.ic-note    { -webkit-mask-image: var(--i-note);    mask-image: var(--i-note); }
.ic-flag    { -webkit-mask-image: var(--i-flag);    mask-image: var(--i-flag); }
.ic-box     { -webkit-mask-image: var(--i-box);     mask-image: var(--i-box); }
.ic-book    { -webkit-mask-image: var(--i-book);    mask-image: var(--i-book); }
.ic-search  { -webkit-mask-image: var(--i-search);  mask-image: var(--i-search); }
.ic-cpu     { -webkit-mask-image: var(--i-cpu);     mask-image: var(--i-cpu); }
.ic-phone   { -webkit-mask-image: var(--i-phone);   mask-image: var(--i-phone); }
.ic-coins   { -webkit-mask-image: var(--i-coins);   mask-image: var(--i-coins); }
.ic-bank    { -webkit-mask-image: var(--i-bank);    mask-image: var(--i-bank); }
.ic-link    { -webkit-mask-image: var(--i-link);    mask-image: var(--i-link); }
.ic-bolt    { -webkit-mask-image: var(--i-bolt);    mask-image: var(--i-bolt); }
.ic-stop    { -webkit-mask-image: var(--i-stop);    mask-image: var(--i-stop); }
.ic-flask   { -webkit-mask-image: var(--i-flask);   mask-image: var(--i-flask); }
.ic-clock   { -webkit-mask-image: var(--i-clock);   mask-image: var(--i-clock); }
.ic-scale   { -webkit-mask-image: var(--i-scale);   mask-image: var(--i-scale); }
.ic-cap     { -webkit-mask-image: var(--i-cap);     mask-image: var(--i-cap); }
.ic-btc     { -webkit-mask-image: var(--i-btc);     mask-image: var(--i-btc); }
.ic-menu    { -webkit-mask-image: var(--i-menu);    mask-image: var(--i-menu); }
.ic-close   { -webkit-mask-image: var(--i-close);   mask-image: var(--i-close); }

:root {
  --i-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E");
  --i-cross:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-warn:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4L1.9 20.6h20.2L12 3.4z'/%3E%3Cpath d='M12 9.6v4.4'/%3E%3Cpath d='M12 17.4h.01'/%3E%3C/svg%3E");
  --i-alert:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.2v5.4'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
  --i-idea:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17.5a6.5 6.5 0 1 1 5.6 0'/%3E%3Cpath d='M9.4 17.6h5.2'/%3E%3Cpath d='M10.2 20.6h3.6'/%3E%3C/svg%3E");
  --i-star:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.7l6.1-.9L12 3.2z'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='12' r='4.8'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000'/%3E%3C/svg%3E");
  --i-key:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.6' cy='16.4' r='3.9'/%3E%3Cpath d='M10.4 13.6L20 4'/%3E%3Cpath d='M17.2 6.8l2.4 2.4'/%3E%3Cpath d='M14.6 9.4l2.2 2.2'/%3E%3C/svg%3E");
  --i-chart:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 20V12M9.3 20V5.5M14.7 20v-6.5M20 20V8.5'/%3E%3C/svg%3E");
  --i-up:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17.5l6-6.5 4 3.4 5.4-8.4'/%3E%3Cpath d='M14.6 6h3.9v3.9'/%3E%3C/svg%3E");
  --i-down:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5l6 6.5 4-3.4 5.4 8.4'/%3E%3Cpath d='M14.6 18h3.9v-3.9'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8l7.6 3v5.4c0 4.6-3.1 8.4-7.6 10-4.5-1.6-7.6-5.4-7.6-10V5.8l7.6-3z'/%3E%3C/svg%3E");
  --i-lock:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='10.2' width='15.2' height='10.4' rx='2.2'/%3E%3Cpath d='M8 10.2V7.4a4 4 0 0 1 8 0v2.8'/%3E%3C/svg%3E");
  --i-ruler:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 15.2L15.2 3.4l5.4 5.4L8.8 20.6z'/%3E%3Cpath d='M7 11.6l2 2M10.2 8.4l2 2M13.4 5.2l2 2'/%3E%3C/svg%3E");
  --i-list:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11'/%3E%3Cpath d='M4.4 6.5h.01M4.4 12h.01M4.4 17.5h.01'/%3E%3C/svg%3E");
  --i-note:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.4 3.6a2.3 2.3 0 0 1 3.2 3.2L9.4 19H6.2v-3.2L18.4 3.6z'/%3E%3Cpath d='M3 21h9'/%3E%3C/svg%3E");
  --i-flag:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.4 21V3.6'/%3E%3Cpath d='M5.4 4.4h12.4l-2.4 4.2 2.4 4.2H5.4'/%3E%3C/svg%3E");
  --i-box:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'%3E%3Crect x='3.8' y='3.8' width='16.4' height='16.4' rx='3'/%3E%3C/svg%3E");
  --i-book:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.6 4.4h5.2A3.2 3.2 0 0 1 12 7.6v12a2.4 2.4 0 0 0-2.4-2.4H3.6z'/%3E%3Cpath d='M20.4 4.4h-5.2A3.2 3.2 0 0 0 12 7.6v12a2.4 2.4 0 0 1 2.4-2.4h6z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.8'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E");
  --i-cpu:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='6.4' y='6.4' width='11.2' height='11.2' rx='2.4'/%3E%3Cpath d='M9.6 2.8v3.6M14.4 2.8v3.6M9.6 17.6v3.6M14.4 17.6v3.6M2.8 9.6h3.6M2.8 14.4h3.6M17.6 9.6h3.6M17.6 14.4h3.6'/%3E%3C/svg%3E");
  --i-phone:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3.6l2.4 4.4-2 1.8a12 12 0 0 0 5.8 5.8l1.8-2 4.4 2.4v3.4a2 2 0 0 1-2.2 2A17.6 17.6 0 0 1 2.6 5.8 2 2 0 0 1 4.6 3.6z'/%3E%3C/svg%3E");
  --i-coins:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cellipse cx='12' cy='6.6' rx='7.6' ry='3'/%3E%3Cpath d='M4.4 6.6v5.2c0 1.7 3.4 3 7.6 3s7.6-1.3 7.6-3V6.6'/%3E%3Cpath d='M4.4 11.8v5.4c0 1.7 3.4 3 7.6 3s7.6-1.3 7.6-3v-5.4'/%3E%3C/svg%3E");
  --i-bank:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 9.2L12 3.6l9.2 5.6'/%3E%3Cpath d='M5.4 9.8v8.4M10 9.8v8.4M14 9.8v8.4M18.6 9.8v8.4'/%3E%3Cpath d='M3 20.4h18'/%3E%3C/svg%3E");
  --i-link:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M10 13.4a4.4 4.4 0 0 0 6.6.5l2.6-2.6a4.4 4.4 0 0 0-6.2-6.2l-1.5 1.5'/%3E%3Cpath d='M14 10.6a4.4 4.4 0 0 0-6.6-.5l-2.6 2.6a4.4 4.4 0 0 0 6.2 6.2l1.5-1.5'/%3E%3C/svg%3E");
  --i-bolt:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2.6L4.6 13.4h6.2l-.4 8 8.8-10.8h-6.2z'/%3E%3C/svg%3E");
  --i-stop:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M8.2 2.8h7.6l5.4 5.4v7.6l-5.4 5.4H8.2l-5.4-5.4V8.2z'/%3E%3Cpath d='M9 15l6-6M9 9l6 6'/%3E%3C/svg%3E");
  --i-flask:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 2.8v6.4L4 18.4a2 2 0 0 0 1.7 3h12.6a2 2 0 0 0 1.7-3l-5.4-9.2V2.8'/%3E%3Cpath d='M8.2 2.8h7.6'/%3E%3Cpath d='M6.8 15h10.4'/%3E%3C/svg%3E");
  --i-clock:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='M12 6.8V12l3.4 2'/%3E%3C/svg%3E");
  --i-scale:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4v17.2'/%3E%3Cpath d='M5 6.4h14'/%3E%3Cpath d='M7.6 20.6h8.8'/%3E%3Cpath d='M5 6.4L2 13.4a3 3 0 0 0 6 0z'/%3E%3Cpath d='M19 6.4l-3 7a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
  --i-cap:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 8.6L12 4.2l9.6 4.4L12 13z'/%3E%3Cpath d='M6.4 10.6v5.2c0 1.5 2.5 2.8 5.6 2.8s5.6-1.3 5.6-2.8v-5.2'/%3E%3Cpath d='M21.6 8.6v5.4'/%3E%3C/svg%3E");
  --i-btc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 5.6h6.4a3.4 3.4 0 0 1 0 6.8H7.4z'/%3E%3Cpath d='M7.4 12.4h7a3.4 3.4 0 0 1 0 6.8h-7z'/%3E%3Cpath d='M7.4 5.6v13.6'/%3E%3Cpath d='M10 2.6v3M14 2.6v3M10 19.2v2.2M14 19.2v2.2'/%3E%3C/svg%3E");
  --i-menu:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M3.6 7.4h16.8M3.6 16.6h16.8'/%3E%3C/svg%3E");
  --i-close:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M5.6 5.6l12.8 12.8M18.4 5.6L5.6 18.4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   07. SURFACES
   ========================================================================== */

.card, .module-card, .step-card, .diff-card, .lesson-block, .toc-block,
.glossary-item, .accordion-item, .stat-card, .calc-wrapper, .page-nav-link, .surface {
  background: var(--k-1);
  border: none;
  border-radius: var(--r-2);
  position: relative;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

/* — Modules : grande grille aérée --------------------------------------- */
.modules-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr));
  margin-top: 0;
}
.module-card {
  padding: 34px 30px 38px; display: flex; flex-direction: column;
  min-height: 236px; overflow: hidden;
}
.module-card:hover { background: var(--k-2); transform: translateY(-4px); box-shadow: var(--lift); }

.module-card .card-num {
  font-size: 0.8125rem; font-weight: 500; color: var(--au);
  letter-spacing: var(--tr-1); margin-bottom: 14px;
}
.module-card h3 {
  font-size: var(--s-2); font-weight: 600; letter-spacing: var(--tr-3);
  color: var(--t-hi); margin-bottom: 12px; line-height: 1.15;
}
.module-card p { font-size: var(--s--1); color: var(--t-lo); line-height: 1.5; flex: 1; }
.module-card .card-arrow {
  position: absolute; top: 32px; right: 30px;
  color: var(--t-eteint); font-size: 1rem; line-height: 1;
  transition: color var(--transition), transform var(--transition);
}
.module-card:hover .card-arrow { color: var(--au); transform: translateX(4px); }
.module-card .card-tag {
  align-self: flex-start; margin-top: 18px;
  font-size: 0.8125rem; color: var(--t-xl); letter-spacing: var(--tr-1);
}
.module-card .card-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent;
}
.module-card .card-progress i {
  display: block; height: 100%; width: var(--p, 0%);
  background: var(--au); transition: width var(--ms-l) var(--ez);
}
.module-card[data-done="1"] .card-progress i { background: var(--up); }
.module-card[data-done="1"] .card-arrow { color: var(--up); }

/* — Cartes libres --------------------------------------------------------- */
.cards-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: 0;
}
.card { padding: 32px 30px; }
.card:hover { background: var(--k-2); }
.card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 20px;
  background: var(--k-2);
}
.card h3 { font-size: var(--s-2); font-weight: 600; letter-spacing: var(--tr-3); margin-bottom: 10px; }
.card p { font-size: var(--s--1); color: var(--t-lo); line-height: 1.5; }

/* — Étapes ---------------------------------------------------------------- */
.steps-row {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.step-card { padding: 34px 30px; text-align: left; }
.step-card:hover { background: var(--k-2); transform: translateY(-4px); box-shadow: var(--lift); }
.step-card-num {
  display: block; width: auto; height: auto; background: none; border-radius: 0; margin: 0 0 20px;
  font-family: var(--f-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--au);
}
.step-card-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin: 0 0 18px;
  background: var(--k-2) !important;
}
.step-card h3 { font-size: var(--s-2); font-weight: 600; letter-spacing: var(--tr-3); margin-bottom: 10px; line-height: 1.15; }
.step-card p { font-size: var(--s--1); color: var(--t-lo); line-height: 1.5; margin-bottom: 16px; }
.step-card-tag {
  display: inline-block; font-size: 0.8125rem; color: var(--t-xl);
  background: none !important; padding: 0; border-radius: 0; letter-spacing: var(--tr-1);
}
.step-card-tag.blue-tag, .step-card-tag.amber-tag, .step-card-tag.green-tag { color: var(--t-xl); }

/* — Différenciateurs ------------------------------------------------------ */
.diff-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 296px), 1fr));
}
.diff-card { padding: 32px 30px; }
.diff-card:hover { background: var(--k-2); }
.diff-icon {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 18px;
  background: var(--k-2) !important; border: none !important;
}
.diff-card h3 { font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2); margin-bottom: 9px; }
.diff-card p { font-size: var(--s--1); color: var(--t-lo); line-height: 1.5; }

/* — Chiffres clés --------------------------------------------------------- */
.key-numbers {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  text-align: center;
}
.key-num-item { padding: 8px; }
.key-num-value {
  font-family: var(--f-display); font-size: var(--s-4);
  font-weight: 600; letter-spacing: var(--tr-5); line-height: 1; color: var(--t-hi);
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.key-num-label { font-size: var(--s--1); color: var(--t-lo); letter-spacing: var(--tr-1); }

/* — Avertissement --------------------------------------------------------- */
.warning-banner {
  background: var(--k-1); border: none; border-radius: var(--r-2);
  padding: 22px 26px; display: flex; align-items: flex-start; gap: 14px;
  margin: 0 auto; max-width: 900px;
}
.warning-banner .icon { font-size: 1rem; flex-shrink: 0; margin-top: 2px; }
.warning-banner p { font-size: var(--s--1); color: var(--t-lo); line-height: 1.55; }
.warning-banner strong { color: var(--dn); font-weight: 600; }

/* — Bandeau défilant ------------------------------------------------------ */
.ticker {
  overflow: hidden; padding: 16px 0; background: transparent;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display: flex; gap: 56px; width: max-content; animation: ticker 68s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.8125rem; letter-spacing: var(--tr-1);
  color: var(--t-xl); white-space: nowrap;
}
.ticker-item b { color: var(--t-lo); font-weight: 500; }
.ticker-item .up { color: var(--up); }
.ticker-item .down { color: var(--dn); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* — CTA ------------------------------------------------------------------- */
.cta-section { padding: var(--bay) 0 calc(var(--bay) * 1.15); }
.cta-box {
  position: relative; overflow: hidden; text-align: center;
  background: var(--k-1); border: none; border-radius: var(--r-3);
  padding: clamp(48px, 7vw, 92px) clamp(24px, 5vw, 64px);
}
.cta-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 90% at 50% 0%, var(--au-08), transparent 70%);
}
.cta-box > * { position: relative; }

/* ==========================================================================
   08. CONTENU PÉDAGOGIQUE
   ========================================================================== */

.module-header { margin-bottom: 44px; }
.module-content { display: grid; gap: 20px; }

.doc-layout { display: grid; gap: 56px; grid-template-columns: 214px minmax(0, 1fr); align-items: start; }
.doc-rail { position: sticky; top: calc(var(--nav-h) + 28px); }
.doc-rail-title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--t-xl); margin-bottom: 14px;
}
.doc-rail ol { list-style: none; display: grid; gap: 1px; max-height: 66svh; overflow-y: auto; padding-right: 6px; }
.doc-rail a {
  display: block; padding: 6px 12px; border-radius: 7px;
  font-size: 0.8125rem; color: var(--t-xl); line-height: 1.38;
  letter-spacing: var(--tr-1);
  transition: color var(--transition), background var(--transition);
}
.doc-rail a:hover { color: var(--t); background: var(--k-1); }
.doc-rail a.current { color: var(--au); background: var(--au-08); }
@media (min-width: 1081px) { .doc-layout .toc-block { display: none; } }

.lesson-block {
  padding: clamp(28px, 4vw, 52px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.lesson-block h3 {
  font-size: var(--s-3); font-weight: 600; letter-spacing: var(--tr-4);
  color: var(--t-hi); margin-bottom: 24px;
  display: flex; align-items: baseline; gap: 16px;
  line-height: 1.1; text-wrap: balance;
}
.lesson-number {
  width: auto; height: auto; background: none; border-radius: 0; display: inline;
  font-family: var(--f-display); font-size: 0.5em; font-weight: 500;
  color: var(--au); flex: 0 0 auto; letter-spacing: 0.02em;
}

.lesson-block p {
  margin-bottom: 18px; color: var(--t); font-size: var(--s-0);
  line-height: 1.62; max-width: 68ch; text-wrap: pretty;
}
.lesson-block h4 {
  font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2);
  color: var(--t-hi); margin: 36px 0 14px; padding: 0; border: none;
}
.lesson-block h4:first-of-type { margin-top: 22px; }
.lesson-block ul, .lesson-block ol { margin: 0 0 18px 1.2em; color: var(--t); font-size: var(--s-0); line-height: 1.62; }
.lesson-block li { margin-bottom: 8px; }
.lesson-block li::marker { color: var(--t-eteint); }
.lesson-block strong { color: var(--t-hi); font-weight: 600; }
.lesson-block em { color: var(--t-lo); font-style: italic; }
.lesson-block code {
  font-family: var(--f-mono); font-size: 0.86em;
  background: var(--k-2); padding: 2px 7px; border-radius: 6px; color: var(--au);
}

.lesson-block .lesson-done {
  position: absolute; top: 22px; right: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--r-pill); cursor: pointer;
  background: var(--k-2); border: none;
  font-family: var(--f-body); font-size: 0.8125rem; color: var(--t-xl);
  transition: color var(--transition), background var(--transition);
}
.lesson-block .lesson-done:hover { color: var(--t-hi); background: var(--k-3); }
.lesson-block.is-done { box-shadow: inset 0 0 0 1px var(--up-30); }
.lesson-block.is-done .lesson-done { color: var(--up); background: var(--up-08); }
.lesson-block.is-done .lesson-number { color: var(--up); }

/* — Chapô : ce que vous allez comprendre, et pourquoi ------------------- */
.lesson-lede {
  font-size: var(--s-1); line-height: 1.5; color: var(--t);
  letter-spacing: var(--tr-2); max-width: 62ch;
  padding-left: 18px; border-left: 2px solid var(--au);
  margin-bottom: 30px !important;
}

/* — Le cas chiffré : on montre le calcul, jamais seulement le résultat --- */
.worked {
  background: var(--k-2); border-radius: var(--r-2);
  padding: clamp(22px, 3vw, 30px); margin: 32px 0;
}
.worked-head { margin-bottom: 16px; }
.worked-kicker {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--au); letter-spacing: var(--tr-1); margin-bottom: 4px;
}
.worked-head h4 {
  margin: 0 !important; padding: 0 !important; border: none !important;
  font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2);
}
.worked > p { max-width: none; font-size: var(--s--1); color: var(--t-lo); }
.worked-grid {
  display: grid; gap: 20px; margin: 20px 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.worked-label {
  display: block; font-size: 0.8125rem; font-weight: 600; color: var(--t-xl);
  letter-spacing: 0.02em; margin-bottom: 10px;
}
.worked dl { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; margin: 0; }
.worked dt { font-size: var(--s--1); color: var(--t-lo); }
.worked dd {
  margin: 0; font-size: var(--s--1); font-weight: 600; color: var(--t-hi);
  text-align: right; font-variant-numeric: tabular-nums;
}
.worked-calc { margin: 0 0 0 1.1em !important; padding: 0; }
.worked-calc li {
  font-size: var(--s--1); color: var(--t); margin-bottom: 8px; line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.worked-calc li::marker { color: var(--au); font-weight: 600; }
.worked-result {
  border-top: 1px solid var(--hair); padding-top: 16px; margin-top: 4px;
}
.worked-result strong {
  display: block; font-family: var(--f-display);
  font-size: var(--s-2); font-weight: 600; letter-spacing: var(--tr-3);
  color: var(--au); font-variant-numeric: tabular-nums;
}

/* — Passer à l'action : la leçon ne s'arrête pas à la compréhension ------ */
.do-now {
  border: 1px solid var(--up-30); border-radius: var(--r-2);
  background: var(--up-08);
  padding: clamp(22px, 3vw, 28px); margin-top: 32px;
}
.do-kicker {
  display: block; font-size: 0.8125rem; font-weight: 600;
  color: var(--up); letter-spacing: var(--tr-1); margin-bottom: 4px;
}
.do-now h4 {
  margin: 0 0 16px !important; padding: 0 !important; border: none !important;
  font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2);
}
.do-now .step-list { margin: 0; }
.do-now .step-num { background: var(--up-08); color: var(--up); }

.table-note { font-size: 0.8125rem; color: var(--t-xl); margin: -12px 0 22px; }

.diagram-figure { margin: 32px 0; }
.diagram-figure .candle-diagram { margin: 0; }
.diagram-figure figcaption { margin-top: 14px; max-width: 72ch; }

/* — Capture de marché : une illustration tirée d'un vrai graphique -------- */
.chart-figure { margin: 32px 0; }
.chart-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-2);
  background: var(--tape);
}
.chart-figure figcaption {
  display: grid; gap: 8px; margin-top: 14px;
  max-width: 72ch;
}
.chart-caption { font-size: var(--s--1); color: var(--t-lo); line-height: 1.55; }
.chart-credit {
  font-size: 0.8125rem; color: var(--t-xl); letter-spacing: var(--tr-1);
}
.chart-credit a { color: var(--t-xl); text-decoration: underline; text-underline-offset: 2px; }
.chart-credit a:hover { color: var(--au); }

/* — Sélecteur de langue -----------------------------------------------------
   De vrais liens, pas un menu : ils fonctionnent sans script et sont
   indexables. La langue courante est un span, pas un lien — on ne propose pas
   d une page vers elle-même. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border-radius: 999px;
  background: var(--k-1, #1a1c20);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: .04em;
}
.lang-switch a, .lang-switch .lang-on {
  padding: 4px 9px; border-radius: 999px; line-height: 1;
  text-decoration: none; transition: color var(--ms, 200ms) var(--ez, ease), background-color var(--ms, 200ms) var(--ez, ease);
}
.lang-switch a { color: var(--t-lo, #9aa0a6); position: relative; }
.lang-switch a:hover { color: var(--t-hi, #f5f6f7); background: var(--k-2, #26282e); }
.lang-switch .lang-on { color: var(--k-void, #000); background: var(--au, #ebc870); }

/* La pastille est petite à dessein : elle ne doit pas peser dans la barre. Mais
   le lien lui-même ne mesurait que 34 × 19 px, sous le minimum de 24 × 24
   recommandé pour une cible tactile — visé au pouce, on le manque. La zone
   atteignable est étendue par un pseudo-élément : elle passe à 40 × 37 px sans
   qu'aucun pixel visible ne bouge, donc sans toucher à l'équilibre de la barre.
   Le débord horizontal reste à 3 px, la largeur du rembourrage de la pastille :
   il n'empiète donc pas sur le bouton voisin. */
.lang-switch a::after {
  content: ''; position: absolute; inset: -9px -3px;
}
@media (max-width: 900px) { .lang-switch { order: -1; } }

/* Marque un lien qui renvoie vers le français faute de traduction. Discret,
   mais présent : le visiteur doit savoir avant de cliquer. */
/* — Formulaires ------------------------------------------------------------
   Le champ leurre doit être invisible à l oeil et atteignable par personne,
   sans jamais être annoncé aux lecteurs d écran comme un champ à remplir. */
.tsa-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-rgpd {
  margin-top: 12px; font-size: 0.75rem; line-height: 1.5;
  color: var(--t-xl, #7a7d83);
}
.form-rgpd a { color: var(--t-lo, #9aa0a6); text-decoration: underline; text-underline-offset: 2px; }
.form-rgpd a:hover { color: var(--au, #ebc870); }

/* Un échec doit se voir. Le défaut précédent était l inverse : un succès
   affiché quoi qu il arrive. */
.form-erreur {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-1, 8px);
  font-size: 0.8125rem; line-height: 1.5;
  color: var(--dn, #f2597f);
  background: rgba(242, 89, 127, 0.10);
  border: 1px solid rgba(242, 89, 127, 0.35);
}
.form-erreur a { color: inherit; text-decoration: underline; }

.lang-fallback {
  font-size: 0.62em; font-weight: 600; letter-spacing: .04em;
  vertical-align: super; margin-left: 3px;
  color: var(--au, #ebc870); opacity: .75;
}

/* — Capture annotée : l'image porte le marché, le calque porte la lecture ---
   Le calque est un SVG en surimpression, aux mêmes proportions que l'image.
   Le texte reste donc vectoriel : net à tout zoom, sélectionnable, traduisible
   — ce qu'un PNG annoté ne permet pas. Il est marqué aria-hidden : la lecture
   du graphique appartient à la légende, qui la dit en toutes lettres. ------ */
.chart-annot { position: relative; display: block; }
.chart-annot img { display: block; }
.chart-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  border-radius: var(--r-2);
}

/* Sur écran étroit, un libellé calculé pour 2668 px devient illisible.
   On rend alors la capture défilable à sa taille utile plutôt que de la
   réduire jusqu'à l'illisible. */
/* Le lexique des sigles portés par le calque. Un débutant ne doit pas avoir
   à deviner ce que veut dire BOS, et un praticien doit retrouver le terme
   qu'il croisera partout ailleurs. */
.chart-legend {
  font-size: 0.8125rem; color: var(--t-lo); line-height: 1.6;
}
.chart-legend b {
  color: var(--au); font-weight: 600;
  font-family: var(--f-mono, inherit); letter-spacing: .01em;
}

@media (max-width: 720px) {
  .chart-annot {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .chart-annot > img { width: 720px; max-width: none; }
  .chart-layer { width: 720px; }
}

/* — Encarts --------------------------------------------------------------- */
.example, .key-point, .danger-point, .info-box, .summary-box {
  border-radius: var(--r-1); padding: 20px 24px; margin: 24px 0;
  font-size: var(--s--1); line-height: 1.58; max-width: 68ch;
  border: none; border-left: 3px solid;
}
.lesson-block .example { background: var(--k-2); border-left-color: var(--au); }
.lesson-block .example strong { color: var(--au); }
.key-point    { background: var(--up-08);   border-left-color: var(--up); }
.key-point strong { color: var(--up); }
.danger-point { background: var(--dn-08);   border-left-color: var(--dn); }
.danger-point strong { color: var(--dn); }
.info-box     { background: var(--note-08); border-left-color: var(--note); }
.info-box strong { color: var(--note); }
.summary-box  { background: var(--info-08); border-left-color: var(--info); margin-top: 28px; }
.summary-box h4 {
  color: var(--info); font-size: var(--s--1); font-weight: 600;
  letter-spacing: 0.02em; margin: 0 0 8px; padding: 0; border: none;
}
.summary-box p { font-size: var(--s--1); color: var(--t-lo); margin-bottom: 0; }

/* — Tableaux -------------------------------------------------------------- */
.data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 26px 0; font-size: var(--s--1);
  border-radius: var(--r-1); overflow: hidden;
  font-variant-numeric: tabular-nums; background: var(--k-2);
}
.data-table th {
  text-align: left; padding: 13px 18px;
  background: var(--k-3); color: var(--t-lo);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--tr-1);
}
.data-table td { padding: 13px 18px; border-top: 1px solid var(--hair); color: var(--t); }
.data-table tbody tr { transition: background var(--transition); }
.data-table tbody tr:hover td { background: var(--k-3); }
.table-scroll { overflow-x: auto; margin: 26px 0; border-radius: var(--r-1); }
.table-scroll .data-table { margin: 0; min-width: 520px; }

/* — Statistiques inline --------------------------------------------------- */
.stat-row {
  display: grid; gap: 14px; margin: 26px 0;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.stat-card { background: var(--k-2); border-radius: var(--r-1); padding: 20px 18px; text-align: left; }
.stat-card .stat-value {
  font-family: var(--f-display); font-size: var(--s-2);
  font-weight: 600; letter-spacing: var(--tr-4); color: var(--t-hi);
  display: block; margin-bottom: 5px; font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { font-size: 0.8125rem; color: var(--t-xl); letter-spacing: var(--tr-1); }

/* — Diagrammes : toujours sur fond graphique ---------------------------- */
.candle-diagram {
  display: flex; justify-content: center; align-items: center;
  gap: 36px; flex-wrap: wrap; margin: 28px 0; padding: 30px 24px;
  background: var(--tape); border: none; border-radius: var(--r-2);
  overflow-x: auto;
}
.candle-diagram svg text { font-family: var(--f-body); }
.candle-diagram .candle-label {
  text-align: center; font-size: 0.8125rem;
  color: oklch(0.66 0.006 265); margin-top: 10px; letter-spacing: var(--tr-1);
}

/* — Comparaisons ---------------------------------------------------------- */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; margin: 26px 0; }
.compare-box { background: var(--k-2); border: none; border-radius: var(--r-1); padding: 22px; }
.compare-box.green-border  { border-left: 3px solid var(--up); }
.compare-box.red-border    { border-left: 3px solid var(--dn); }
.compare-box.blue-border   { border-left: 3px solid var(--info); }
.compare-box.accent-border { border-left: 3px solid var(--au); }
.compare-box h4 { font-size: var(--s-0); font-weight: 600; margin: 0 0 8px; color: var(--t-hi); padding: 0; border: none; }
.compare-box p { font-size: var(--s--1); color: var(--t-lo); margin-bottom: 0; }
.compare-box ul { list-style: none; padding: 0; margin: 10px 0 0; }
.compare-box ul li { font-size: var(--s--1); color: var(--t-lo); padding: 4px 0 4px 18px; position: relative; margin: 0; }
.compare-box ul li::before { content: ''; position: absolute; left: 0; top: 0.7em; width: 7px; height: 2px; border-radius: 2px; background: var(--au); }

/* — Frise des sessions ---------------------------------------------------- */
.session-timeline {
  display: flex; width: 100%; height: 44px; border-radius: var(--r-1);
  overflow: hidden; margin: 24px 0; font-size: 0.75rem; font-weight: 500;
}
.session-timeline .session-block {
  display: grid; place-items: center; white-space: nowrap; padding: 0 8px;
  color: var(--t); background: var(--k-2);
}
/* Les sessions se distinguent par la densité, pas par la couleur : une teinte
   par place financière ne dirait rien de plus que son nom. Seule la fenêtre
   de recouvrement Londres–New York — le seul moment qui compte pour le
   volume — reçoit l'accent. */
.session-block.asia       { background: var(--k-2); flex: 9; }
.session-block.london     { background: var(--k-3); flex: 9; }
.session-block.ny         { background: var(--k-3); flex: 8; }
.session-block.overlap-ln { background: var(--k-3); flex: 4; }
.session-block.overlap-na { background: var(--au); color: var(--k-0); font-weight: 600; flex: 2; }
.session-block.off        { background: var(--k-1); flex: 8; color: var(--t-eteint); }

/* — Étapes numérotées ----------------------------------------------------- */
.step-list { margin: 24px 0; }
.step-list .step-item { display: flex; gap: 16px; margin-bottom: 18px; align-items: flex-start; }
.step-list .step-num {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--k-2); color: var(--au);
  display: grid; place-items: center;
  font-family: var(--f-display); font-size: 0.75rem; font-weight: 600; margin-top: 2px;
}
.step-list .step-text { font-size: var(--s-0); color: var(--t); line-height: 1.6; }
.step-list .step-text strong { color: var(--t-hi); }

/* — Points de progression ------------------------------------------------- */
.chapter-progress { display: flex; gap: 5px; margin: 28px 0 4px; flex-wrap: wrap; justify-content: center; }
.chapter-progress .prog-dot {
  width: 28px; height: 4px; border-radius: 2px;
  background: var(--hair-2); transition: background var(--ms-l) var(--ez);
}
.chapter-progress .prog-dot.active { background: var(--hair-2); }
.chapter-progress .prog-dot.seen { background: var(--au); }

/* — Sommaire -------------------------------------------------------------- */
.toc-block { padding: clamp(24px, 3.4vw, 34px); margin-bottom: 24px; }
.toc-block h3 { font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2); color: var(--t-hi); margin-bottom: 16px; }
.toc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2px; }
.toc-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 12px; border-radius: 9px;
  font-size: var(--s--1); color: var(--t-lo); letter-spacing: var(--tr-1);
  transition: color var(--transition), background var(--transition);
}
.toc-item:hover { background: var(--k-2); color: var(--t-hi); }
.toc-item .toc-num {
  width: auto; height: auto; background: none; border: none; border-radius: 0;
  font-size: 0.8125rem; color: var(--au); flex: 0 0 auto;
}

/* — Navigation précédent / suivant ---------------------------------------- */
.page-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 16px; margin-top: 72px; padding-top: 0; border-top: none;
}
.page-nav-link { padding: 24px 28px; display: flex; flex-direction: column; gap: 6px; }
.page-nav-link:hover { background: var(--k-2); }
.page-nav-link.next { text-align: right; }
.page-nav-dir { font-size: 0.8125rem; color: var(--t-xl); letter-spacing: var(--tr-1); }
.page-nav-link:hover .page-nav-dir { color: var(--au); }
.page-nav-title { font-family: var(--f-display); font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2); color: var(--t-hi); }

/* ==========================================================================
   09. OUTILS
   ========================================================================== */

.calc-wrapper { overflow: hidden; max-width: 920px; margin: 0 auto; border-radius: var(--r-3); }
.calc-header { background: var(--k-2); padding: 28px clamp(24px, 3.4vw, 36px); }
.calc-header h3 { font-size: var(--s-2); font-weight: 600; letter-spacing: var(--tr-3); color: var(--t-hi); }
.calc-header p { font-size: var(--s--1); color: var(--t-lo); margin-top: 7px; }
.calc-body { padding: clamp(24px, 3.4vw, 36px); }

.market-tabs {
  display: flex; gap: 3px; margin-bottom: 30px; flex-wrap: wrap;
  background: var(--k-2); border-radius: var(--r-pill); padding: 3px;
}
.market-tab {
  flex: 1 1 92px; padding: 9px 14px; border-radius: var(--r-pill);
  background: transparent; border: none;
  color: var(--t-lo); font-weight: 400; font-size: var(--s--1);
  cursor: pointer; font-family: var(--f-body); text-align: center;
  transition: background var(--transition), color var(--transition);
}
.market-tab:hover { color: var(--t-hi); }
.market-tab.active { background: var(--k-0); color: var(--t-hi); font-weight: 500; box-shadow: var(--lift); }

.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group.full-width { grid-column: 1 / -1; }
.form-label {
  font-size: 0.8125rem; font-weight: 500; color: var(--t-lo); letter-spacing: var(--tr-1);
  display: flex; align-items: center; gap: 7px;
}
.form-label .tooltip-trigger {
  width: 16px; height: 16px; background: var(--k-2); border: none;
  border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 0.62rem; color: var(--t-xl); cursor: help; position: relative;
}
.tooltip-trigger:hover .tooltip-text { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tooltip-text {
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--glass-solid); backdrop-filter: blur(20px);
  border: 1px solid var(--hair); border-radius: 12px; padding: 12px 15px;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: var(--tr-1);
  color: var(--t); width: 224px; line-height: 1.45; text-align: left;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 20; pointer-events: none; box-shadow: var(--lift-2);
}

.form-input, .form-select, .form-textarea {
  padding: 12px 15px; border-radius: 12px;
  background: var(--k-2); border: 1px solid transparent;
  color: var(--t-hi); font-size: var(--s-0);
  font-family: var(--f-body); width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-input:hover, .form-select:hover { background: var(--k-3); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none; border-color: var(--au); box-shadow: 0 0 0 4px var(--au-16); background: var(--k-2);
}
.form-select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%238a8a92' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;
}
.form-select option { background: var(--k-1); color: var(--t); }
.form-textarea { min-height: 118px; resize: vertical; line-height: 1.55; }

.input-with-unit { position: relative; display: flex; align-items: center; }
.input-with-unit .form-input { padding-right: 52px; }
.input-unit { position: absolute; right: 15px; font-size: 0.8125rem; color: var(--t-xl); pointer-events: none; }

.calc-results {
  margin-top: 30px; padding: 30px;
  background: var(--up-08); border: none; border-radius: var(--r-2);
}
.calc-results-title {
  font-size: 0.8125rem; font-weight: 600; color: var(--up);
  letter-spacing: 0.02em; margin-bottom: 20px;
}
.results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 24px; }
.result-item { text-align: left; }
.result-value {
  font-family: var(--f-display); font-size: var(--s-3); font-weight: 600;
  letter-spacing: var(--tr-5); color: var(--t-hi); font-variant-numeric: tabular-nums; line-height: 1;
}
.result-label { font-size: 0.8125rem; color: var(--t-lo); margin-top: 9px; letter-spacing: var(--tr-1); }

.calc-pedagogy {
  margin-top: 22px; padding: 20px 24px;
  background: var(--k-2); border: none; border-left: 3px solid var(--au);
  border-radius: var(--r-1);
  font-size: var(--s--1); color: var(--t-lo); line-height: 1.58;
}
.calc-pedagogy strong { color: var(--au); }

.risk-toggle { display: flex; gap: 3px; background: var(--k-2); border: none; border-radius: var(--r-pill); padding: 3px; width: fit-content; flex-wrap: wrap; }
.risk-toggle-btn {
  padding: 7px 15px; border-radius: var(--r-pill); border: none; background: transparent;
  color: var(--t-lo); font-family: var(--f-body); font-size: 0.8125rem;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.risk-toggle-btn.active { background: var(--k-0); color: var(--t-hi); font-weight: 500; }
.risk-toggle-btn:hover:not(.active) { color: var(--t-hi); }

/* — Quiz ------------------------------------------------------------------ */
.quiz-block { background: var(--k-2); border: none; border-radius: var(--r-2); padding: 30px; margin: 32px 0; }
.quiz-block h4 {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--au); margin: 0 0 16px; padding: 0; border: none;
}
.quiz-block .quiz-question { font-size: var(--s-1); color: var(--t-hi); margin-bottom: 18px; font-weight: 600; letter-spacing: var(--tr-2); line-height: 1.3; }
.quiz-block .quiz-options { display: grid; gap: 8px; }
.quiz-block .quiz-option {
  background: var(--k-1); border: 1px solid transparent;
  border-radius: 12px; padding: 14px 17px; font-size: var(--s--1);
  color: var(--t); cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px;
  transition: background var(--transition), border-color var(--transition), transform 220ms var(--ez);
}
.quiz-block .quiz-option:hover { background: var(--k-3); }
.quiz-block .quiz-option:active { transform: scale(0.99); }
.quiz-block .quiz-option.correct { border-color: var(--up-30); background: var(--up-08); }
.quiz-block .quiz-option.wrong { border-color: var(--dn-30); background: var(--dn-08); opacity: 0.65; }
.quiz-block .quiz-option .option-letter {
  width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%;
  background: var(--k-2); border: none;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 600; color: var(--t-xl);
}
.quiz-block .quiz-option.correct .option-letter { background: var(--up); color: var(--k-0); }
.quiz-block .quiz-option.wrong .option-letter { background: var(--dn); color: var(--k-0); }
.quiz-block .quiz-feedback {
  margin-top: 16px; padding: 15px 18px; border-radius: var(--r-1);
  font-size: var(--s--1); display: none; line-height: 1.55; border-left: 3px solid;
}
.quiz-block .quiz-feedback.show { display: block; animation: pop var(--ms) var(--ez-out) both; }
.quiz-block .quiz-feedback.success { background: var(--up-08); border-color: var(--up); color: var(--up); }
.quiz-block .quiz-feedback.error { background: var(--dn-08); border-color: var(--dn); color: var(--dn); }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } }

/* — Accordéon -------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: 2px; margin-top: 32px; }
.accordion-item { border: none; border-radius: var(--r-1); background: var(--k-1); overflow: hidden; }
.accordion-item.open { background: var(--k-2); }
.accordion-header {
  width: 100%; padding: 20px 26px; background: transparent; border: none;
  cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  font-family: var(--f-display); font-size: var(--s-1); font-weight: 600;
  letter-spacing: var(--tr-2); color: var(--t-hi);
  transition: color var(--transition);
}
.accordion-header:hover { color: var(--au); }
.accordion-arrow { font-size: 0.75rem; color: var(--t-eteint); transition: transform var(--transition), color var(--transition); }
.accordion-item.open .accordion-arrow { transform: rotate(180deg); color: var(--au); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--ms-l) var(--ez); }
.accordion-body-inner { padding: 0 26px 22px; font-size: var(--s--1); color: var(--t-lo); line-height: 1.65; }

/* — Filtres du glossaire ---------------------------------------------------- */
.glossary-filters {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px;
}
.glossary-filter {
  padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--k-2); border: 1px solid transparent;
  color: var(--t-lo); font-family: var(--f-body); font-size: 0.8125rem;
  cursor: pointer; letter-spacing: var(--tr-1);
  transition: background var(--transition), color var(--transition);
}
.glossary-filter:hover { background: var(--k-3); color: var(--t-hi); }
.glossary-filter.active { background: var(--au); color: var(--k-0); font-weight: 500; }
.glossary-grid { margin-top: 18px; }

/* — Glossaire -------------------------------------------------------------- */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 32px; }
.glossary-item { background: var(--k-1); border: none; border-radius: var(--r-1); padding: 22px; }
.glossary-item:hover { background: var(--k-2); }
.glossary-term { font-family: var(--f-display); font-weight: 600; letter-spacing: var(--tr-2); color: var(--au); font-size: var(--s-0); margin-bottom: 6px; }
.glossary-def { font-size: 0.8125rem; color: var(--t-lo); line-height: 1.5; }

/* — Checklist -------------------------------------------------------------- */
.checklist { margin-top: 26px; }
.checklist-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.checklist-item:last-child { border-bottom: none; }
.checklist-icon { color: var(--au); font-size: 0.9rem; flex-shrink: 0; margin-top: 3px; }
.checklist-text { font-size: var(--s-0); color: var(--t); line-height: 1.55; }

/* ==========================================================================
   10. PARCOURS
   ========================================================================== */

.track { display: grid; gap: 12px; }
.track-item {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 20px; align-items: start; background: var(--k-1);
  border-radius: var(--r-2); padding: 24px 26px;
  transition: background var(--transition), transform var(--transition);
}
.track-item:hover { background: var(--k-2); transform: translateX(4px); }
.track-badge {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.1rem; background: var(--k-2);
}
.track-item[data-state="done"] .track-badge { background: var(--up-08); }
.track-item[data-state="active"] .track-badge { background: var(--au-08); }
.track-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 5px; }
.track-title { font-family: var(--f-display); font-size: var(--s-1); font-weight: 600; letter-spacing: var(--tr-2); color: var(--t-hi); }
.track-desc { font-size: var(--s--1); color: var(--t-lo); line-height: 1.5; display: block; }
.track-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 0.8125rem; color: var(--t-xl); letter-spacing: var(--tr-1); }
.track-bar { display: block; height: 3px; border-radius: 3px; background: var(--hair-2); overflow: hidden; margin-top: 14px; }
.track-bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--au); transition: width var(--ms-l) var(--ez); }
.track-item[data-state="done"] .track-bar i { background: var(--up); }

.ring { --p: 0; --size: 132px; width: var(--size); height: var(--size); position: relative; flex: 0 0 var(--size); }
.ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--au) calc(var(--p) * 1%), var(--hair-2) 0);
  mask: radial-gradient(farthest-side, transparent calc(50% - 6px), #000 calc(50% - 5px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(50% - 6px), #000 calc(50% - 5px));
  transition: background 900ms var(--ez);
}
.ring-value {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font-family: var(--f-display); font-size: var(--s-2); font-weight: 600;
  letter-spacing: var(--tr-5); color: var(--t-hi); font-variant-numeric: tabular-nums;
}
.ring-value small { display: block; font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-xl); margin-top: 5px; }

.progress-panel {
  display: flex; gap: clamp(24px, 4vw, 48px); align-items: center; flex-wrap: wrap;
  background: var(--k-1); border: none; border-radius: var(--r-3);
  padding: clamp(28px, 4vw, 44px);
}

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 142px), 1fr)); gap: 12px; }
.badge-tile { background: var(--k-1); border: none; border-radius: var(--r-1); padding: 22px 16px; text-align: center; transition: background var(--transition); }
.badge-tile .badge-emoji { font-size: 1.4rem; display: block; margin-bottom: 10px; filter: grayscale(1); opacity: 0.24; transition: filter var(--transition), opacity var(--transition); }
.badge-tile .badge-name { font-size: 0.8125rem; font-weight: 600; color: var(--t-xl); display: block; letter-spacing: var(--tr-1); }
.badge-tile .badge-cond { font-size: 0.6875rem; color: var(--t-xl); opacity: 0.6; margin-top: 4px; display: block; }
.badge-tile.earned { background: var(--k-2); }
.badge-tile.earned .badge-emoji { filter: none; opacity: 1; }
.badge-tile.earned .badge-name { color: var(--au); }

/* ==========================================================================
   11. PALETTE ⌘K
   ========================================================================== */

.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 2000;
  background: oklch(0.10 0.004 265 / 0.55); backdrop-filter: blur(14px);
  display: grid; place-items: start center; padding: clamp(60px, 14vh, 140px) 16px 16px;
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
}
.cmdk-backdrop.open { opacity: 1; visibility: visible; }
.cmdk-panel {
  width: min(580px, 100%);
  background: var(--glass-solid); backdrop-filter: saturate(180%) blur(30px);
  border: 1px solid var(--hair); border-radius: var(--r-2);
  box-shadow: var(--lift-2); overflow: hidden;
  transform: translateY(-12px) scale(0.98); transition: transform var(--ms) var(--ez-out);
}
.cmdk-backdrop.open .cmdk-panel { transform: none; }
.cmdk-search { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--hair); }
.cmdk-search svg { width: 16px; height: 16px; color: var(--t-eteint); flex: 0 0 16px; }
.cmdk-search input { flex: 1; background: transparent; border: none; outline: none; font-family: var(--f-body); font-size: var(--s-0); color: var(--t-hi); letter-spacing: var(--tr-1); }
.cmdk-search input::placeholder { color: var(--t-eteint); }
.cmdk-list { max-height: min(52svh, 420px); overflow-y: auto; padding: 8px; }
.cmdk-group-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-xl); padding: 10px 12px 6px; }
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  color: var(--t); font-size: var(--s--1); width: 100%; text-align: left;
  background: transparent; border: none; font-family: var(--f-body); letter-spacing: var(--tr-1);
}
.cmdk-item .cmdk-ico { font-size: 0.95rem; width: 20px; text-align: center; flex: 0 0 20px; }
.cmdk-item .cmdk-sub { margin-left: auto; font-size: 0.75rem; color: var(--t-xl); }
.cmdk-item[aria-selected="true"], .cmdk-item:hover { background: var(--k-2); color: var(--t-hi); }
.cmdk-empty { padding: 30px; text-align: center; color: var(--t-xl); font-size: var(--s--1); }
.cmdk-foot { display: flex; gap: 16px; padding: 11px 20px; border-top: 1px solid var(--hair); font-size: 0.6875rem; color: var(--t-xl); flex-wrap: wrap; }
.cmdk-foot kbd { font-family: var(--f-mono); }

.toast-host { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2200; display: grid; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass-solid); backdrop-filter: blur(24px);
  border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 11px 22px; font-size: var(--s--1); color: var(--t-hi);
  box-shadow: var(--lift-2); animation: toast-in var(--ms) var(--ez-out) both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } }
.toast.out { animation: toast-out var(--ms) var(--ez) both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   12. PIED DE PAGE, IMPRESSION, RESPONSIVE
   ========================================================================== */

.footer { border-top: 1px solid var(--hair); padding: clamp(44px, 5vw, 64px) 0 36px; background: var(--k-0); }
.footer-grid { display: grid; gap: clamp(28px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.2fr; } }
.footer-brand { font-size: 0.8125rem; color: var(--t-xl); margin-top: 14px; line-height: 1.55; max-width: 40ch; }
.footer h4 { font-size: 0.8125rem; font-weight: 600; letter-spacing: var(--tr-1); color: var(--t-lo); margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 0.8125rem; color: var(--t-xl); width: fit-content; }
.footer-links a:hover { color: var(--t-hi); }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: var(--t-xl); flex-wrap: wrap; gap: 12px;
}
.disclaimer-footer {
  background: var(--k-1); border: none; border-radius: var(--r-1);
  padding: 22px 26px; margin-top: 40px;
  font-size: 0.75rem; color: var(--t-xl); line-height: 1.6;
}
.disclaimer-footer strong { color: var(--t-lo); font-weight: 600; }

/* ==========================================================================
   13. LISIBILITÉ DES PETITS TEXTES, THÈME CLAIR
   ==========================================================================
   En thème sombre ces textes sont passés au blanc (--t-xl). En clair le
   blanc n'existe pas : on garde un gris, plus dense, et on l'épaissit d'un
   demi-cran — même service rendu sans noircir la page. Bloc additif : le
   thème sombre n'est pas concerné, et le retirer suffit à tout annuler. */

:root[data-theme="light"] .breadcrumb,
:root[data-theme="light"] .chart-credit,
:root[data-theme="light"] .table-note,
:root[data-theme="light"] .footer-brand,
:root[data-theme="light"] .footer-links a,
:root[data-theme="light"] .footer-bottom,
:root[data-theme="light"] .disclaimer-footer,
:root[data-theme="light"] .stat-card .stat-label,
:root[data-theme="light"] .page-nav-dir,
:root[data-theme="light"] .track-meta,
:root[data-theme="light"] .form-rgpd,
:root[data-theme="light"] .input-unit,
:root[data-theme="light"] .module-card .card-tag,
:root[data-theme="light"] .step-card-tag {
  font-weight: 500;
}

/* Ceux qui étaient déjà en demi-gras montent d'un cran de plus. */
:root[data-theme="light"] .worked-label,
:root[data-theme="light"] .badge-tile .badge-name {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .fade-in, .reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 1080px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .doc-rail { display: none; }
}

@media (max-width: 1020px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    display: grid; gap: 0;
    background: var(--glass-solid); backdrop-filter: saturate(180%) blur(24px);
    border-bottom: 1px solid var(--hair);
    padding: 8px var(--pad) 20px;
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height var(--ms-l) var(--ez), opacity var(--ms) var(--ez), padding var(--ms) var(--ez);
  }
  .nav-links.open { max-height: 82svh; overflow-y: auto; opacity: 1; }
  .nav-links a { padding: 14px 6px; font-size: var(--s-1); border-radius: 0; border-bottom: 1px solid var(--hair); }
  .nav-links a.active::after { display: none; }
  .nav-cta { margin: 16px 0 0; justify-content: center; display: flex; border-bottom: none !important; }
  .nav-toggle {
    display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px;
    background: transparent; border: none; border-radius: 50%;
    color: var(--t-lo); cursor: pointer; font-size: 1rem;
    transition: color var(--transition), background var(--transition);
  }
  .nav-toggle:hover { color: var(--t-hi); background: var(--k-2); }
  .cmdk-hint { display: none; }
}

@media (max-width: 620px) {
  .compare-grid, .results-grid, .toc-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .track-item { grid-template-columns: 1fr; }
  .page-nav-link.next { text-align: left; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .candle-diagram { gap: 20px; padding: 20px 14px; }
  .session-timeline { font-size: 0.6rem; height: 38px; }
  .lesson-block h3 { flex-direction: column; gap: 6px; }
}

@media print {
  .nav, .read-rail, .to-top, .cmdk-backdrop, .hero-actions, .nav-tools,
  .doc-rail, .toast-host, .lesson-done, .ticker { display: none !important; }
  body { background: #fff; color: #111; }
  .lesson-block, .card, .toc-block { border: 1px solid #ddd; break-inside: avoid; background: #fff; }
  .section { padding: 20px 0; }
  a { color: #111; text-decoration: underline; }
  .candle-diagram { background: #1a1d26; }
}