/* ==========================================================================
   ARMOS — Formation « Maîtriser l'analyse quantitative du mémoire »
   Feuille de style unique.

   Concept de mise en page : un cahier de méthode académique. Bandeau bleu nuit,
   colonnes de lecture étroites (≈ 70 caractères), sorties SPSS/SmartPLS
   reproduites comme dans le Viewer, filets fins et accent or réservé aux
   éléments qui comptent (appels à l'action, « à retenir », progression).

   Sommaire
   1. Jetons de conception (couleurs, typographie, espacements) + mode sombre
   2. Base et typographie
   3. En-tête, navigation, pied de page
   4. Composants génériques (boutons, cartes, badges, encadrés)
   5. Pages de module (sommaire latéral, sorties SPSS, étapes)
   6. Quiz, examen, certificat
   7. Outils (arbre de décision, calculatrice, glossaire)
   8. Tableau de bord
   9. Utilitaires, animations, impression
   ========================================================================== */

/* 1. Jetons ---------------------------------------------------------------- */
:root {
  /* Palette de référence : #FFF7ED #E5E7EB #D4D4D4 #FFF085 #53EAFD #FF6467 #27272A.
     Les teintes de texte sont assombries quand le contraste AA l'exige. */
  --cream: #FFF7ED; --mist: #E5E7EB; --stone: #D4D4D4; --yellow: #FFF085; --cyan: #53EAFD; --coral: #FF6467; --zinc: #27272A;
  --bg: #FFF7ED;            /* crème */
  --surface: #ffffff;
  --surface-2: #F4F1EC;     /* crème grisée (mélange #FFF7ED / #E5E7EB) */
  --ink: #27272A;
  --ink-soft: #52525B;      /* 7,1:1 sur le crème */
  --line: #E5E7EB;
  --line-strong: #D4D4D4;
  --navy: #27272A;          /* bandeaux sombres (zinc) */
  --navy-2: #3F3F46;
  --on-navy: #FFF7ED;
  --on-navy-soft: #D4D4D4;
  --accent: #B42318;        /* corail assombri pour le texte (6,1:1) */
  --accent-fill: #FFF085;   /* jaune surligneur : boutons principaux, repères */
  --accent-soft: #FFFAC7;
  --ok: #166534;  --ok-soft: #DCFCE7;
  --warn: #92400E; --warn-soft: #FEF3C7;
  --bad: #B42318;  --bad-soft: #FFE4E4;
  --info: #0E7490; --info-soft: #DDF9FE;  /* cyan assombri pour les liens */
  --focus: #0E7490;
  --shadow: 0 1px 2px rgba(39, 39, 42, .06), 0 6px 24px rgba(39, 39, 42, .06);

  /* Typographie */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --fs-xs: .8125rem;  --fs-sm: .9063rem; --fs-base: 1.0625rem; --fs-md: 1.25rem;
  --fs-lg: 1.625rem;  --fs-xl: 2.125rem; --fs-2xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  /* Espacements et formes */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4.5rem;
  --radius: 10px; --radius-sm: 6px;
  --measure: 70ch;
  --container: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #27272A; --surface: #303034; --surface-2: #3A3A3F; --ink: #FFF7ED; --ink-soft: #D4D4D4;
    --line: #45454C; --line-strong: #5C5C64; --navy: #1E1E21; --navy-2: #3F3F46; --on-navy: #FFF7ED; --on-navy-soft: #D4D4D4;
    --accent: #FF8F92; --accent-fill: #FFF085; --accent-soft: #3B381F;
    --ok: #6EE7A0; --ok-soft: #14301F; --warn: #FCD34D; --warn-soft: #3A2E10;
    --bad: #FF8F92; --bad-soft: #3D1A1B; --info: #53EAFD; --info-soft: #11343A; --focus: #53EAFD;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #27272A; --surface: #303034; --surface-2: #3A3A3F; --ink: #FFF7ED; --ink-soft: #D4D4D4;
    --line: #45454C; --line-strong: #5C5C64; --navy: #1E1E21; --navy-2: #3F3F46; --on-navy: #FFF7ED; --on-navy-soft: #D4D4D4;
    --accent: #FF8F92; --accent-fill: #FFF085; --accent-soft: #3B381F;
    --ok: #6EE7A0; --ok-soft: #14301F; --warn: #FCD34D; --warn-soft: #3A2E10;
    --bad: #FF8F92; --bad-soft: #3D1A1B; --info: #53EAFD; --info-soft: #11343A; --focus: #53EAFD;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.65;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; text-wrap: balance; margin: 0 0 var(--space-4); font-weight: 600; }
h1 { font-size: var(--fs-2xl); letter-spacing: -.01em; }
h2 { font-size: var(--fs-xl); margin-top: var(--space-7); }
h3 { font-size: var(--fs-lg); margin-top: var(--space-6); }
h4 { font-size: var(--fs-md); margin-top: var(--space-5); font-family: var(--font-body); font-weight: 700; }
p, ul, ol, dl { margin: 0 0 var(--space-4); }
li + li { margin-top: .3rem; }
a { color: var(--info); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
small { font-size: var(--fs-sm); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
code, kbd { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
::selection { background: var(--accent-fill); color: var(--navy); }

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

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--accent-fill); color: #27272A; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: var(--space-2); }

.container {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .container { padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); } }
.prose { max-width: var(--measure); }
.lead { font-size: var(--fs-md); color: var(--ink-soft); line-height: 1.55; }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); font-weight: 500;
  color: var(--accent); margin-bottom: var(--space-2);
}
.muted { color: var(--ink-soft); }
.tabnum { font-variant-numeric: tabular-nums; }

/* 3. En-tête ------------------------------------------------------------------ */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--navy); }
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--navy); color: var(--on-navy); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.site-header .container { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--on-navy); text-decoration: none; margin-right: auto; min-width: 0; }
.brand-mark { width: 36px; height: 36px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .02em; }
.brand-text span { font-size: var(--fs-xs); color: var(--on-navy-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); align-items: center; }
.main-nav li + li { margin-top: 0; }
.main-nav a {
  display: block; color: var(--on-navy-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 600;
  padding: .5rem .6rem; border-radius: var(--radius-sm); white-space: nowrap;
}
.main-nav a:hover { color: var(--on-navy); background: rgba(255, 255, 255, .07); }
.main-nav a[aria-current="page"] { color: var(--on-navy); box-shadow: inset 0 -2px 0 var(--accent-fill); border-radius: 0; }
.header-actions { display: flex; gap: var(--space-2); align-items: center; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: transparent; color: var(--on-navy); border: 1px solid rgba(255, 255, 255, .18); cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .08); }
.icon-btn svg { width: 20px; height: 20px; }
.nav-toggle { display: none; }
.header-progress { height: 3px; background: rgba(255, 255, 255, .08); }
.header-progress span { display: block; height: 100%; width: 0; background: var(--accent-fill); transition: width .6s ease; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; }
  .main-nav { position: fixed; inset: calc(64px + env(safe-area-inset-top, 0px)) 0 auto 0; background: var(--navy); border-top: 1px solid rgba(255, 255, 255, .08);
    padding: var(--space-3) max(16px, env(safe-area-inset-right, 0px)) var(--space-5) max(16px, env(safe-area-inset-left, 0px)); display: none; max-height: calc(100vh - 64px); overflow-y: auto; }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; }
  .main-nav a { padding: .8rem .75rem; font-size: var(--fs-base); }
  .main-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent-fill); }
}
@media (max-width: 420px) { .brand-text span { display: none; } }

.site-footer { background: var(--navy); color: var(--on-navy-soft); margin-top: var(--space-8); font-size: var(--fs-sm); }
.site-footer .container { padding-block: var(--space-7) var(--space-6); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.5fr repeat(4, 1fr); }
.site-footer h2 { font-family: var(--font-body); font-size: var(--fs-xs);  color: var(--on-navy); margin: 0 0 var(--space-3); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--on-navy-soft); text-decoration: none; }
.site-footer a:hover { color: var(--on-navy); text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: var(--space-6); padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* 4. Composants ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px;
  padding: .65rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent;
  font: 700 var(--fs-sm)/1.2 var(--font-body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-primary { background: var(--accent-fill); color: #27272A; box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.btn-primary:hover { background: #FFE94D; }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink-soft); }
.btn-navy { background: var(--navy); color: var(--on-navy); }
.btn-ghost-light { background: transparent; color: var(--on-navy); border-color: rgba(255, 255, 255, .35); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .08); }
.btn-danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); min-width: 0; }
.card h3 { margin-top: 0; font-size: var(--fs-md); }
.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.4;
}
.badge svg { width: 13px; height: 13px; }
.badge-ok { color: var(--ok); background: var(--ok-soft); }
.badge-warn { color: var(--warn); background: var(--warn-soft); }
.badge-bad { color: var(--bad); background: var(--bad-soft); }
.badge-info { color: var(--info); background: var(--info-soft); }
.badge-muted { color: var(--ink-soft); background: var(--surface-2); }
.badge-accent { color: var(--accent); background: var(--accent-soft); }

.icon { width: 1.1em; height: 1.1em; vertical-align: -.17em; flex: none; }

/* Encadrés pédagogiques */
.callout {
  border: 1px solid var(--line); border-left-width: 4px; background: var(--surface); border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; max-width: var(--measure);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { display: flex; gap: .5rem; align-items: center; font-weight: 800; font-size: var(--fs-sm);  margin-bottom: var(--space-2); }
.callout-title svg { width: 18px; height: 18px; }
.callout.retenir { border-left-color: var(--accent-fill); background: var(--accent-soft); }
.callout.retenir .callout-title { color: var(--accent); }
.callout.erreur { border-left-color: var(--bad); }
.callout.erreur .callout-title { color: var(--bad); }
.callout.astuce { border-left-color: var(--info); }
.callout.astuce .callout-title { color: var(--info); }
.callout.apa { border-left-color: var(--ok); background: var(--surface); }
.callout.apa .callout-title { color: var(--ok); }
.callout.apa blockquote { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.6; }
.callout.apa blockquote p { margin-bottom: var(--space-3); }

.menu-path {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; font-family: var(--font-mono); font-size: .85em;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .15rem .5rem; line-height: 1.6;
}
.menu-path .sep { color: var(--accent); font-weight: 700; }

.steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--measure); }
.steps > li { counter-increment: step; position: relative; padding: 0 0 var(--space-4) 3rem; margin: 0; border-left: 1px solid var(--line); margin-left: 1rem; }
.steps > li:last-child { border-left-color: transparent; }
.steps > li::before {
  content: counter(step); position: absolute; left: -1rem; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: var(--on-navy); font-weight: 700; font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .steps > li::before { background: var(--accent-fill); color: #27272A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .steps > li::before { background: var(--accent-fill); color: #27272A; } }

.check-list { list-style: none; padding: 0; }
.check-list li { position: relative; padding-left: 1.8rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: .55rem;
  border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg);
}

/* Tableaux génériques et tableaux de seuils */
.table-wrap { overflow-x: auto; margin: var(--space-4) 0 var(--space-5); -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap:focus-visible { outline-offset: 4px; }
table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); background: var(--surface); }
table.data caption { text-align: left; font-weight: 700; padding: 0 0 var(--space-2); color: var(--ink); caption-side: top; }
table.data th, table.data td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.data thead th { background: var(--surface-2); font-size: var(--fs-xs);  color: var(--ink-soft); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 5. Pages de module ------------------------------------------------------------ */
.page-hero { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.page-hero .container { padding-block: var(--space-7) var(--space-7); position: relative; z-index: 1; }
.page-hero h1 { color: var(--on-navy); max-width: 22ch; }
.page-hero .lead { color: var(--on-navy-soft); max-width: 62ch; }
.page-hero .eyebrow { color: var(--accent-fill); }
.page-hero::after {
  /* trame discrète : grille d'échelle de Likert (5 points) */
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: radial-gradient(circle, #fff 1.2px, transparent 1.6px); background-size: 28px 28px;
  mask-image: linear-gradient(90deg, transparent 30%, #000 100%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); color: var(--on-navy-soft); font-size: var(--fs-sm); }
.hero-meta span { display: inline-flex; align-items: center; gap: .4rem; }
.hero-meta svg { width: 16px; height: 16px; color: var(--accent-fill); }
.breadcrumb { font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin-right: .4rem; color: var(--on-navy-soft); }
.breadcrumb a { color: var(--on-navy-soft); }

.module-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-7); padding-top: var(--space-6); }
.module-toc { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; font-size: var(--fs-sm); padding-bottom: var(--space-5); }
.module-toc h2 { font-family: var(--font-body); font-size: var(--fs-xs);  color: var(--ink-soft); margin: 0 0 var(--space-3); }
.module-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
.module-toc li { margin: 0; }
.module-toc a { display: block; padding: .35rem .9rem; color: var(--ink-soft); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.module-toc a:hover { color: var(--ink); }
.module-toc a.is-active { color: var(--ink); border-left-color: var(--accent-fill); font-weight: 700; }
.module-content { min-width: 0; }
.module-content > section { scroll-margin-top: 90px; }
.module-content > section > h2:first-child { margin-top: var(--space-7); }
.module-content > section:first-child > h2:first-child { margin-top: 0; }
.module-content p, .module-content ul, .module-content ol { max-width: var(--measure); }
.section-num { font-family: var(--font-display); font-style: italic; font-size: .7em; color: var(--accent); margin-right: .5rem; vertical-align: .25em; font-weight: 500; }
@media (max-width: 980px) {
  .module-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .module-toc { position: static; max-height: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-5); }
  .module-toc ol { columns: 2; column-gap: var(--space-5); border: 0; }
  .module-toc a { border: 0; padding: .25rem 0; }
}
@media (max-width: 520px) { .module-toc ol { columns: 1; } }

.objectives { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); max-width: var(--measure); }
.objectives ul { margin: 0; }

.locked-banner { display: flex; gap: var(--space-4); align-items: flex-start; background: var(--warn-soft); border: 1px solid var(--warn); color: var(--ink); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); }
.locked-banner svg { width: 24px; height: 24px; color: var(--warn); flex: none; margin-top: .15rem; }
.locked-banner p { margin: 0; }

/* Sorties SPSS reproduites (style « Viewer ») */
.spss {
  background: #ffffff; color: #1a1a1a; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-3); margin: var(--space-5) 0; max-width: 100%;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 13px; line-height: 1.35;
}
.spss-label { display: flex; align-items: center; gap: .5rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700;  color: #59627a; margin-bottom: var(--space-2); }
.spss-label .dot { width: 8px; height: 8px; border-radius: 50%; background: #c8102e; }
.spss-label.is-pls .dot { background: #1d5aa0; }
.spss-label.is-process .dot { background: #2f7d32; }
.spss .table-wrap { margin: 0; }
.spss table { border-collapse: collapse; margin: 0 auto; background: #fff; color: #1a1a1a; min-width: 260px; }
.spss caption { font-weight: 700; font-size: 14px; padding: 4px 0 8px; text-align: center; color: #1a1a1a; }
.spss th, .spss td { padding: 4px 9px; border: 1px solid #c9cdd4; white-space: nowrap; }
.spss thead th { background: #fff; font-weight: 400; text-align: center; vertical-align: bottom; }
.spss tbody th { text-align: left; font-weight: 400; background: #fff; }
.spss td { text-align: right; font-variant-numeric: tabular-nums; }
.spss td.txt { text-align: left; }
.spss tr.sep td, .spss tr.sep th { border-top: 2px solid #8b93a3; }
.spss .hl { background: #fff4cc; box-shadow: inset 0 0 0 2px #d4a441; font-weight: 700; }
.spss .note { font-size: 11.5px; color: #4a4a4a; margin: 6px auto 0; max-width: 70ch; text-align: left; white-space: normal; }
.spss-read { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--ink); background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); }
.spss-read p { margin: 0 0 .4rem; }
.spss-read > :last-child { margin-bottom: 0; }
.spss-read strong { color: var(--ink); }
/* La sortie SPSS reste blanche en mode sombre, comme dans le logiciel ; on adoucit seulement la bordure. */
:root[data-theme="dark"] .spss { border-color: #33476e; }

pre.syntax {
  background: var(--navy); color: #e6ebf4; border-radius: var(--radius-sm); padding: var(--space-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.6; max-width: 100%;
}
pre.syntax .c { color: #93a3c0; font-style: italic; }

/* Modèle conceptuel (SVG) */
.figure { margin: var(--space-5) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.figure figcaption { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: var(--space-3); }
.figure svg { display: block; width: 100%; height: auto; }
.svg-node { fill: var(--surface-2); stroke: var(--navy-2); stroke-width: 1.5; }
:root[data-theme="dark"] .svg-node { stroke: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .svg-node { stroke: var(--accent); } }
.svg-node-accent { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.8; }
.svg-text { fill: var(--ink); font-family: var(--font-body); font-size: 15px; font-weight: 700; }
.svg-sub { fill: var(--ink-soft); font-family: var(--font-body); font-size: 12px; }
.svg-arrow { stroke: var(--ink-soft); stroke-width: 1.8; fill: none; }
.svg-arrow-dash { stroke: var(--ink-soft); stroke-width: 1.6; fill: none; stroke-dasharray: 6 5; }
.svg-label { fill: var(--accent); font-family: var(--font-mono); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.svg-label-ns { fill: var(--bad); font-family: var(--font-mono); font-size: 13px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.svg-arrowhead { fill: var(--ink-soft); }
.svg-axis { stroke: var(--line-strong); stroke-width: 1; }
.svg-grid { stroke: var(--line); stroke-width: 1; }
.svg-bar { fill: var(--info); opacity: .75; }
.svg-curve { stroke: var(--accent); stroke-width: 2.5; fill: none; }
.svg-dot { fill: var(--info); opacity: .6; }
.svg-tick { fill: var(--ink-soft); font-family: var(--font-body); font-size: 11px; }

/* Solutions masquées */
details.solution { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); margin: var(--space-4) 0; max-width: var(--measure); }
details.solution summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--info); list-style: none; display: flex; align-items: center; gap: .5rem; }
details.solution summary::-webkit-details-marker { display: none; }
details.solution summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid currentColor; font-size: .95rem; line-height: 1; }
details.solution[open] summary::before { content: "–"; }
details.solution > div { padding: 0 var(--space-4) var(--space-4); }
details.solution > div > :last-child { margin-bottom: 0; }

.exercise { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-5); margin: var(--space-5) 0; max-width: calc(var(--measure) + 3rem); background: var(--surface); }
.exercise h4 { margin-top: 0; display: flex; gap: .5rem; align-items: center; }

.module-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-7); }
.module-nav a { display: block; padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); }
.module-nav a:hover { border-color: var(--accent-fill); }
.module-nav small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }
.module-nav .next { text-align: right; grid-column: 2; }
@media (max-width: 600px) { .module-nav { grid-template-columns: 1fr; } .module-nav .next { grid-column: auto; } }

.katex-display { overflow-x: auto; overflow-y: hidden; padding: var(--space-2) 0; }
.formula .katex-display { overflow: visible; }
.formula { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; max-width: var(--measure); overflow-x: auto; }
.formula p { font-size: var(--fs-sm); color: var(--ink-soft); margin: var(--space-2) 0 0; }

/* 6. Quiz ---------------------------------------------------------------- */
.quiz { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); max-width: calc(var(--measure) + 4rem); }
.quiz-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-4); }
.quiz-head p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.q { border: 0; border-top: 1px solid var(--line); padding: var(--space-5) 0 var(--space-4); margin: 0; min-width: 0; }
.q legend { font-weight: 700; padding: 0; margin-bottom: var(--space-3); display: flex; gap: .6rem; float: left; width: 100%; }
.q legend + * { clear: both; }
.q-num { flex: none; font-family: var(--font-display); font-size: 1.15em; color: var(--accent); font-weight: 700; }
.q-options { display: grid; gap: var(--space-2); clear: both; }
.q-option { display: flex; gap: .7rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; background: var(--bg); transition: border-color .15s; }
.q-option:hover { border-color: var(--line-strong); }
.q-option input { margin-top: .3rem; accent-color: var(--navy-2); width: 1.05rem; height: 1.05rem; flex: none; }
.q-option:has(input:checked) { border-color: var(--info); background: var(--info-soft); }
.q-option.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.q-option.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.q-feedback { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--fs-sm); background: var(--surface-2); }
.q-feedback.ok { border-left: 4px solid var(--ok); }
.q-feedback.ko { border-left: 4px solid var(--bad); }
.q-feedback strong:first-child { display: block; margin-bottom: .2rem; }
.q-output { margin: 0 0 var(--space-3); }
.quiz-result { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); }
.quiz-result h3 { margin-top: 0; }
.score-big { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; }
.quiz-lock { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink-soft); }

/* Examen */
.exam-bar { position: sticky; top: calc(67px + env(safe-area-inset-top, 0px)); z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; box-shadow: var(--shadow); margin-bottom: var(--space-5); }
.exam-bar .bar { flex: 1 1 200px; }
.exam-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft);  }

/* Certificat */
.cert-preview { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); }
.cert-preview canvas { display: block; width: 100%; height: auto; border-radius: 4px; box-shadow: var(--shadow); background: #fff; }
.form-row { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); max-width: 520px; }
.form-row label { font-weight: 700; font-size: var(--fs-sm); }
.input, .select, textarea.input {
  width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .7rem .85rem; min-height: 46px;
}
.input:focus-visible, .select:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.help { font-size: var(--fs-sm); color: var(--ink-soft); }
.field-error { color: var(--bad); font-size: var(--fs-sm); font-weight: 600; }

/* 7. Outils ---------------------------------------------------------------- */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tool-head { background: var(--navy); color: var(--on-navy); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); align-items: center; }
.tool-head h2 { color: var(--on-navy); margin: 0; font-size: var(--fs-md); }
.tool-head svg { width: 24px; height: 24px; color: var(--accent-fill); flex: none; }
.tool-body { padding: var(--space-5); }
.tree-trail { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: var(--space-4); font-size: var(--fs-sm); list-style: none; padding: 0; }
.tree-trail li { margin: 0; background: var(--surface-2); border-radius: 999px; padding: .2rem .7rem; color: var(--ink-soft); }
.tree-question { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--space-2); }
.tree-options { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-top: var(--space-4); }
.tree-option { text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4); cursor: pointer; font: inherit; color: var(--ink); display: grid; gap: .25rem; }
.tree-option:hover { border-color: var(--accent-fill); }
.tree-option strong { font-size: var(--fs-base); }
.tree-option span { font-size: var(--fs-sm); color: var(--ink-soft); }
.tree-result { border-left: 4px solid var(--accent-fill); padding-left: var(--space-4); }
.tree-result h3 { margin-top: 0; }
.calc-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; align-items: end; }
@media (max-width: 640px) { .calc-grid { grid-template-columns: 1fr; } }
.calc-out { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.calc-out .verdict { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.calc-out .verdict strong { font-size: var(--fs-md); font-family: var(--font-display); }
.scale-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: var(--space-3) 0 var(--space-1); position: relative; }
.scale-bar span { flex: 1; }
.scale-marker { position: relative; height: 0; }
.scale-marker i { position: absolute; top: -18px; width: 3px; height: 16px; background: var(--ink); transform: translateX(-50%); border-radius: 2px; }

.memo-card { display: flex; flex-direction: column; gap: var(--space-3); }
.memo-card .btn { align-self: flex-start; margin-top: auto; }
.memo-card ul { margin: 0; font-size: var(--fs-sm); }

.search-box { position: relative; max-width: 560px; }
.search-box svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-soft); pointer-events: none; }
.search-box .input { padding-left: 2.8rem; font-size: var(--fs-base); }
.letter-nav { display: flex; flex-wrap: wrap; gap: .3rem; margin: var(--space-4) 0; }
.letter-nav button { font: 700 var(--fs-sm) var(--font-body); width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.letter-nav button[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.letter-nav button:disabled { opacity: .35; cursor: default; }
.gloss-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.gloss-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); }
.gloss-item dt { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.gloss-item dt .en { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; font-style: italic; }
.gloss-item dd { margin: .4rem 0 0; }
.gloss-item dd .rel { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .3rem; }
mark { background: var(--accent-soft); color: inherit; padding: 0 .1em; border-radius: 2px; box-shadow: inset 0 -2px 0 var(--accent-fill); }

/* 8. Tableau de bord ---------------------------------------------------------- */
.progress { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress > span { display: block; height: 100%; background: var(--cyan); border-radius: inherit; width: 0; transition: width .8s cubic-bezier(.2, .7, .2, 1); }
.ring { --p: 0; width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--accent-fill) calc(var(--p) * 1%), var(--surface-2) 0); }
.ring > div { width: 112px; height: 112px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }
.ring strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ring small { display: block; font-size: var(--fs-xs); color: var(--ink-soft); }
.dash-summary { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; }
.stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); flex: 1; min-width: 0; }
.stat-list div { border-left: 2px solid var(--line); padding-left: var(--space-4); }
.stat-list dt { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }
.stat-list dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.module-rows { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.module-row { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin: 0; }
.module-row.is-locked { border-style: dashed; background: var(--surface-2); }
.module-row .num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.module-row h3 { font-size: var(--fs-base); font-family: var(--font-body); margin: 0 0 .2rem; }
.module-row h3 a { color: var(--ink); text-decoration: none; }
.module-row h3 a:hover { text-decoration: underline; }
.module-row .meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--fs-sm); color: var(--ink-soft); align-items: center; }
.module-row .side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
@media (max-width: 640px) { .module-row { grid-template-columns: 2.2rem minmax(0, 1fr); } .module-row .side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }

/* Accueil */
.home-hero { background: var(--navy); color: var(--on-navy); position: relative; overflow: hidden; }
.home-hero .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-7); align-items: center; padding-block: var(--space-8); }
.home-hero h1 { color: var(--on-navy); font-size: clamp(2.3rem, 1.5rem + 3vw, 3.9rem); line-height: 1.08; }
.home-hero h1 em { font-style: italic; color: var(--accent-fill); }
.home-hero .lead { color: var(--on-navy-soft); }
.hero-card { background: #ffffff; color: #1a1a1a; border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); transform: rotate(-1.2deg); font-family: Arial, sans-serif; font-size: 12.5px; }
.hero-card .spss { border: 0; margin: 0; padding: 0; }
.hero-card .stamp { display: inline-flex; gap: .4rem; align-items: center; margin-top: var(--space-3); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 800;  color: #1d7348; border: 2px solid #1d7348; padding: .25rem .6rem; border-radius: 4px; transform: rotate(-3deg); }
@media (max-width: 900px) { .home-hero .container { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-7); } .hero-card { transform: none; } }
.section { padding-block: var(--space-8) 0; }
.section-head { max-width: 760px; margin-bottom: var(--space-6); }
.section-head h2 { margin-top: 0; }
.problem-list { counter-reset: pb; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); list-style: none; padding: 0; }
.problem-list li { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); }
.problem-list li strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); margin-bottom: .4rem; }
.pipeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.pipeline > div { padding: var(--space-4); border-right: 1px solid var(--line); min-width: 0; }
.pipeline > div:last-child { border-right: 0; }
.pipeline span { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--accent); font-weight: 700; }
.pipeline strong { display: block; font-size: var(--fs-sm); margin-top: .25rem; }
.pipeline p { font-size: var(--fs-xs); color: var(--ink-soft); margin: .3rem 0 0; }
.module-card { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.module-card:hover { border-color: var(--accent-fill); transform: translateY(-2px); }
.module-card .num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); color: var(--accent); }
.module-card h3 { font-size: var(--fs-md); margin: 0; }
.module-card p { font-size: var(--fs-sm); color: var(--ink-soft); margin: 0; }
.module-card .meta { margin-top: auto; padding-top: var(--space-3); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--ink-soft); gap: var(--space-2); flex-wrap: wrap; }
.testimonial { display: flex; flex-direction: column; gap: var(--space-3); }
.testimonial blockquote { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.55; }
.testimonial figcaption { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: auto; }
.example-flag { font-size: var(--fs-xs); font-weight: 700;  color: var(--warn); }
.faq details { border-bottom: 1px solid var(--line); max-width: 860px; }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: 700; font-size: var(--fs-base); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); color: var(--accent); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: var(--space-4); max-width: var(--measure); color: var(--ink-soft); }
.cta-band { background: var(--navy); color: var(--on-navy); border-radius: var(--radius); padding: var(--space-7) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.cta-band h2 { color: var(--on-navy); margin: 0; font-size: var(--fs-xl); }
.cta-band p { color: var(--on-navy-soft); margin: .5rem 0 0; }

/* Bibliographie */
.biblio { list-style: none; padding: 0; max-width: 820px; }
.biblio li { padding-left: 2rem; text-indent: -2rem; margin-bottom: var(--space-3); }

/* 9. Utilitaires ---------------------------------------------------------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mt-0 { margin-top: 0 !important; }
.mt-6 { margin-top: var(--space-6); }
.stack > * + * { margin-top: var(--space-4); }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.toast { position: fixed; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: var(--on-navy); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); box-shadow: var(--shadow); opacity: 0; transition: .3s; z-index: 80; pointer-events: none; max-width: calc(100% - 32px); }
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

.reveal { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { transform: translateY(10px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header, .site-footer, .module-toc, .module-nav, .header-actions, .btn, .skip-link, .quiz, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-hero { background: #fff; color: #000; }
  .page-hero h1, .page-hero .lead { color: #000; }
  .module-layout { display: block; }
  .card, .callout, .spss { box-shadow: none; break-inside: avoid; }
  details.solution > div { display: block; }
  a { color: #000; }
}
.hero-card .spss th { white-space: normal; max-width: 16ch; }

/* ==========================================================================
   10. Refonte « parcours de leçons » (inspirée des plateformes de cours en ligne)
   - pages de leçon : en-tête clair, capsule vidéo en premier, parcours à gauche
   - accueil : capsule de bienvenue en tête, chemin vertical des modules
   ========================================================================== */

/* En-tête clair des leçons : la vidéo, pas le bandeau, porte la page */
.page-hero.lesson-hero { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.page-hero.lesson-hero::after { display: none; }
.page-hero.lesson-hero .container { padding-block: var(--space-5) var(--space-5); }
.page-hero.lesson-hero h1 { color: var(--ink); font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); max-width: 26ch; }
.page-hero.lesson-hero .lead { color: var(--ink-soft); font-size: var(--fs-base); }
.page-hero.lesson-hero .eyebrow { color: var(--accent); }
.page-hero.lesson-hero .breadcrumb a { color: var(--ink-soft); }
.page-hero.lesson-hero .breadcrumb li + li::before { color: var(--line-strong); }
.page-hero.lesson-hero .hero-meta { color: var(--ink-soft); margin-top: var(--space-3); }
.page-hero.lesson-hero .hero-meta svg { color: var(--accent); }

/* Capsule vidéo : cadre 16:9 façon studio */
.capsule { max-width: 880px; }
.capsule-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: #27272A; box-shadow: 0 1px 2px rgba(39, 39, 42, .08), 0 18px 40px -18px rgba(39, 39, 42, .45); }
.capsule-frame video, .capsule-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #27272A; }
.capsule-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5); text-align: center; color: #eef2f9;
  background: radial-gradient(120% 90% at 20% 15%, #3F3F46 0%, #27272A 60%), #27272A; }
.capsule-empty::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(212, 164, 65, .35); border-radius: 8px; pointer-events: none; }
.capsule-empty > div { max-width: 46ch; position: relative; }
.capsule-empty p { color: #b9c3d8; margin: 0; font-size: var(--fs-sm); }
.capsule-empty .capsule-empty-title { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); color: #fff; line-height: 1.2; margin: var(--space-3) 0 var(--space-2); }
.capsule-badge { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-xs); font-weight: 700; color: #27272A; background: #FFF085; padding: .25rem .7rem; border-radius: 999px; }
.capsule-badge svg { width: 14px; height: 14px; }
.capsule-meta { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; margin-top: var(--space-3); }
.capsule-title { font-family: var(--font-display); font-size: var(--fs-md); margin: 0; }
.capsule-sub { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.capsule-transcript { margin-top: var(--space-3); border-top: 1px solid var(--line); max-width: var(--measure); }
.capsule-transcript summary { cursor: pointer; padding: var(--space-3) 0; font-weight: 700; color: var(--info); }
.capsule-transcript > div { padding-bottom: var(--space-3); color: var(--ink-soft); }
.capsule-transcript p { margin: 0 0 var(--space-3); }
@media (max-width: 600px) { .capsule-frame { border-radius: 10px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px)) + 4px); } }

/* Parcours complet dans la colonne de gauche */
.course-outline { margin-bottom: var(--space-5); }
.course-outline h2 { font-family: var(--font-body); font-size: var(--fs-xs); color: var(--ink-soft); margin: 0 0 var(--space-2); font-weight: 700; }
.course-outline ol { list-style: none; padding: 0; margin: 0; border: 0; }
.course-outline li { margin: 0; }
.course-outline a { display: grid; grid-template-columns: 1.4rem 1fr; gap: .5rem; align-items: start; padding: .35rem .4rem; border-radius: 6px; color: var(--ink-soft); text-decoration: none; border: 0; margin: 0; line-height: 1.35; }
.course-outline a:hover { background: var(--surface-2); color: var(--ink); }
.course-outline a[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.course-outline .st { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; border: 1.5px solid var(--line-strong); color: var(--ink-soft); margin-top: .05rem; }
.course-outline .st.done { background: var(--ok); border-color: var(--ok); color: #fff; }
.course-outline .st.done svg { width: 12px; height: 12px; }
.course-outline .st.locked svg { width: 11px; height: 11px; }
@media (max-width: 980px) { .course-outline { display: none; } }

/* Accueil : capsule de bienvenue dans le hero */
.hero-capsule .capsule-meta { color: var(--on-navy); }
.hero-capsule .capsule-title { color: var(--on-navy); }
.hero-capsule .capsule-sub { color: var(--on-navy-soft); }
.hero-capsule .capsule-transcript { border-top-color: rgba(255, 255, 255, .15); }
.hero-capsule .capsule-transcript summary { color: var(--accent-fill); }
.hero-capsule .capsule-transcript > div { color: var(--on-navy-soft); }

/* Accueil : chemin vertical des modules (les modules sont une vraie séquence) */
.path { list-style: none; padding: 0; margin: 0; position: relative; max-width: 860px; }
.path::before { content: ""; position: absolute; left: 1.45rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line); }
.path li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; padding: var(--space-4) 0; margin: 0; }
.path .node { position: relative; z-index: 1; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-strong); font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.path li.done .node { background: var(--ok); border-color: var(--ok); color: #fff; }
.path li.current .node { border-color: var(--accent-fill); box-shadow: 0 0 0 5px var(--accent-soft); }
.path h3 { margin: .35rem 0 .2rem; font-size: var(--fs-md); }
.path h3 a { color: var(--ink); text-decoration: none; }
.path h3 a:hover { text-decoration: underline; }
.path p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 62ch; }
.path .side { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; padding-top: .45rem; font-size: var(--fs-sm); color: var(--ink-soft); white-space: nowrap; }
@media (max-width: 640px) { .path li { grid-template-columns: 3rem minmax(0, 1fr); } .path .side { grid-column: 2; flex-direction: row; align-items: center; padding-top: 0; } }

/* Page des scripts de tournage */
.script-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: var(--space-5); }
.script-card h3 { margin-top: 0; }
.script-card .plan { font-size: var(--fs-sm); color: var(--ink-soft); border-left: 3px solid var(--accent-fill); padding-left: var(--space-3); }
.script-card .words { font-size: var(--fs-sm); color: var(--ink-soft); }

/* 11. Labo SPSS (simulateur) ----------------------------------------------
   La fenêtre du logiciel reste claire dans les deux thèmes, comme une capture
   d'écran de SPSS ; le panneau des missions suit le thème du site. */
.btn-sm { padding: .42rem .85rem; font-size: var(--fs-sm); }
.sim-shell { max-width: 1440px; margin: var(--space-6) auto 0; padding-inline: max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: var(--space-5); }

/* Missions */
.labo-missions { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); }
.labo-missions:focus { outline: none; }
.lm-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; }
.lm-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.lm-title { margin: .2rem 0 0; font-size: var(--fs-lg); }
.lm-title:focus { outline: none; }
.lm-score { text-align: center; line-height: 1; color: var(--ink-soft); font-size: var(--fs-sm); flex: none; }
.lm-score strong { font-family: var(--font-display); font-size: 2.2rem; color: var(--ink); }
.lm-score span { display: block; font-size: var(--fs-xs); margin-top: .25rem; }
.lm-nav { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: var(--space-4) 0; }
.lm-step { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; display: inline-grid; place-items: center; font-size: var(--fs-sm); }
.lm-step svg { width: 18px; height: 18px; }
.lm-step.half { border: 2px solid var(--accent-fill); }
.lm-step.done { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.lm-step[aria-current="step"] { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--focus); }
.lm-intro { max-width: var(--measure); margin-bottom: var(--space-4); }
.lm-cols { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.lm-h { font-family: var(--font-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 var(--space-2); }
.lm-steps { margin: 0 0 var(--space-3); padding-left: 1.3rem; }
.lm-steps li { margin-bottom: .35rem; }
.lm-status { display: flex; gap: .4rem; align-items: center; font-size: var(--fs-sm); color: var(--ink-soft); }
.lm-status svg { width: 18px; height: 18px; }
.lm-status.ok { color: var(--ok); font-weight: 700; }
.lm-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.lm-q legend { font-weight: 700; margin-bottom: var(--space-2); padding: 0; }
.lm-q[disabled] { opacity: .55; }
.lm-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); margin: 0 0 .45rem; cursor: pointer; background: var(--surface); }
.lm-opt:hover { border-color: var(--line-strong); }
.lm-opt input { margin-top: .3rem; accent-color: var(--navy-2); }
.lm-feedback { margin-top: var(--space-3); }
.lm-ok, .lm-bad { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.lm-ok { border-left-color: var(--ok); background: var(--ok-soft); }
.lm-bad { border-left-color: var(--warn); background: var(--warn-soft); }
.lm-ok p, .lm-bad p { margin: 0; }
.lm-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.lm-reset { margin-left: auto; }
.lm-end { margin-top: var(--space-4); }

/* Fenêtre du logiciel */
.sim { --sim-line: #c3c9d3; background: #f3f4f6; color: #1a1a1a; border: 1px solid #9aa3b2; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(39, 39, 42, .14);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 13px; line-height: 1.35; min-width: 0; }
.sim a { color: #1d5aa0; }
.sim :focus-visible { outline: 2px solid #1d5aa0; outline-offset: 1px; }
.sim-titlebar { display: flex; gap: 10px; align-items: center; background: #dfe3ea; padding: 7px 12px; font-size: 12px; color: #2b3240; border-bottom: 1px solid var(--sim-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-titlebar > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.sim-dots { display: inline-flex; gap: 5px; flex: none; }
.sim-dots i { width: 10px; height: 10px; border-radius: 50%; background: #c8102e; display: block; }
.sim-dots i + i { background: #d4a441; }
.sim-dots i + i + i { background: #2f7d32; }
.sim-menubar { display: flex; flex-wrap: wrap; background: #fafafa; border-bottom: 1px solid var(--sim-line); padding: 0 4px; position: relative; z-index: 20; }
.sim-menu { position: relative; }
.sim-top { background: none; border: 0; padding: 7px 10px; font: inherit; color: #1a1a1a; cursor: pointer; border-radius: 3px; }
.sim-top:hover, .sim-top[aria-expanded="true"] { background: #dbe6f5; }
.sim-menubar ul { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #9aa3b2; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); list-style: none; margin: 0; padding: 4px 0; z-index: 30; }
.sim-menu.open > ul, .sim-menubar li.open > ul { display: block; }
.sim-menubar li { position: relative; margin: 0; }
.sim-menubar li ul { top: -5px; left: 100%; }
.sim-menubar li.sep { height: 1px; background: #dde1e7; margin: 4px 0; }
.sim-menubar ul [role="menuitem"] { display: flex; justify-content: space-between; gap: 12px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 16px; font: inherit; color: #1a1a1a; cursor: pointer; white-space: nowrap; }
.sim-menubar ul [role="menuitem"]:hover, .sim-menubar ul [role="menuitem"]:focus, .sim-menubar ul [role="menuitem"][aria-expanded="true"] { background: #dbe6f5; outline: none; }
.sim-menubar ul [role="menuitem"][aria-disabled="true"] { color: #636b78; font-style: italic; }
.sim-toolbar { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 6px 10px; background: #f7f7f8; border-bottom: 1px solid var(--sim-line); }
.sim-toggle { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.sim-btn { background: #fff; color: #1a1a1a; border: 1px solid #a9b0bc; border-radius: 3px; padding: 4px 12px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
.sim-btn:hover { background: #eef3fb; border-color: #6f7c90; }
.sim-btn.primary { background: #1f5fa8; border-color: #174a85; color: #fff; }
.sim-btn.primary:hover { background: #174a85; }
.sim-tabs { display: flex; gap: 2px; padding: 4px 8px 0; background: #e6e9ee; border-bottom: 1px solid var(--sim-line); overflow-x: auto; }
.sim-tab { background: #d5dae2; border: 1px solid var(--sim-line); border-bottom: 0; border-radius: 4px 4px 0 0; padding: 5px 14px; font: inherit; color: #2b3240; cursor: pointer; white-space: nowrap; }
.sim-tab[aria-selected="true"] { background: #fff; color: #1a1a1a; font-weight: 600; position: relative; top: 1px; }
.sim-scroll { height: min(62vh, 520px); overflow: auto; background: #fff; }
.sim-grid { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sim-grid th, .sim-grid td { border-right: 1px solid #dde1e7; border-bottom: 1px solid #dde1e7; padding: 3px 8px; white-space: nowrap; }
.sim-grid thead th { position: sticky; top: 0; z-index: 2; background: #eef0f4; font-weight: 600; text-align: center; min-width: 64px; }
.sim-grid td { text-align: right; min-width: 64px; cursor: cell; }
.sim-grid .rn { position: sticky; left: 0; z-index: 1; background: #eef0f4; color: #4a5160; font-weight: 400; text-align: right; min-width: 44px; }
.sim-grid thead .rn { z-index: 3; }
.sim-grid tr.sel td { background: #d6e5fa; }
.sim-grid tr.sel .rn { background: #b9d1f3; color: #1a1a1a; }
.sim-grid td.miss::after { content: ","; color: #4a5160; }
.sim-edit { width: 70px; font: inherit; text-align: right; padding: 1px 3px; border: 1px solid #1f5fa8; }
.sim-vars td { text-align: left; }
.sim-vars td.clip { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.sim-cell-input { font: inherit; border: 1px solid transparent; background: transparent; padding: 2px 3px; width: 100%; min-width: 160px; color: #1a1a1a; }
select.sim-cell-input { min-width: 100px; }
.sim-cell-input:hover, .sim-cell-input:focus { border-color: #8f98a8; background: #fff; }
.sim-statusbar { padding: 5px 10px; background: #e6e9ee; border-top: 1px solid var(--sim-line); font-size: 12px; color: #2b3240; min-height: 26px; }

/* Visualiseur */
.sim-viewer { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.sim-outline-wrap { background: #f7f7f8; border-right: 1px solid var(--sim-line); height: min(62vh, 520px); overflow: auto; padding: 8px 10px; font-size: 12px; }
.sim-outline-wrap p { margin: 0 0 4px; font-weight: 700; }
.sim-outline-wrap ol { margin: 0; padding-left: 1.2rem; }
.sim-outline-wrap li { margin: 2px 0; }
.sim-output { padding: 12px 18px 24px; }
.sim-empty { color: #4a5160; margin: 40px auto; text-align: center; }
.sim-out { border-bottom: 1px dashed #c3c9d3; padding-bottom: 14px; margin-bottom: 16px; }
.sim-out:focus { outline: none; }
.sim-out h3 { font-family: inherit; font-size: 15px; margin: 6px 0 8px; color: #1a1a1a; }
.sim-syntax { font-family: var(--font-mono); font-size: 11.5px; background: #f6f7f9; border: 1px solid #dde1e7; padding: 8px 10px; margin: 0 0 8px; white-space: pre-wrap; color: #2b3240; }
.sim .spss.sim-spss { margin: 10px 0; padding: 4px 0; border: 0; box-shadow: none; overflow-x: auto; }
.sim .spss.sim-spss .table-wrap { overflow-x: auto; }
.sim .spss caption sup, .sim .spss td sup { font-size: 9px; }
.sim-help { display: flex; gap: 8px; align-items: flex-start; background: #eef4fc; border-left: 3px solid #1f5fa8; padding: 8px 12px; margin: 8px 0 0; color: #1a1a1a; max-width: 90ch; }
.sim-help svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #1f5fa8; }
.sim-process { font-family: Consolas, "Courier New", var(--font-mono); font-size: 12px; line-height: 1.35; background: #fff; border: 1px solid #dde1e7; padding: 10px 12px; margin: 0; overflow-x: auto; white-space: pre; color: #1a1a1a; }
.sim-chart-wrap { overflow-x: auto; }
.sim-chart { width: 100%; max-width: 560px; height: auto; display: block; background: #fff; border: 1px solid #dde1e7; }
.sim-chart text { font-size: 11px; fill: #1a1a1a; font-family: Arial, sans-serif; }
.sim-chart text.t { font-size: 13px; font-weight: 700; }
.sim-chart .bar { fill: #9fb7d6; stroke: #3a5a87; stroke-width: .8; }
.sim-chart .curve { fill: none; stroke: #1a1a1a; stroke-width: 1.6; }
.sim-chart .ax { stroke: #555; }
.sim-chart .pt { fill: #3a5a87; fill-opacity: .7; }

/* Boîtes de dialogue */
.sim-dialog { width: min(780px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid #8f98a8; border-radius: 6px; background: #f3f4f6; color: #1a1a1a; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; font-size: 13px; }
.sim-dialog::backdrop { background: rgba(39, 39, 42, .45); }
.sim-dlg { display: flex; flex-direction: column; max-height: calc(100vh - 26px); }
.sim-dlg-title { background: #dfe3ea; padding: 8px 14px; font-weight: 700; border-bottom: 1px solid #c3c9d3; }
.sim-dlg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 16px; padding: 14px; overflow: auto; }
.sim-dlg-body label { font-weight: 600; display: block; margin-bottom: 3px; }
.sim-src select, .sim-tlist { width: 100%; font: inherit; border: 1px solid #a9b0bc; background: #fff; color: #1a1a1a; }
.sim-src select { min-height: 280px; }
.sim-targets { display: grid; gap: 10px; align-content: start; }
.sim-target { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.sim-move { width: 32px; height: 32px; border: 1px solid #a9b0bc; border-radius: 3px; background: #fff; color: #1f5fa8; cursor: pointer; font-size: 15px; }
.sim-move:hover { background: #eef3fb; }
.sim-opts { grid-column: 1 / -1; display: grid; gap: 6px; border-top: 1px solid #dde1e7; padding-top: 10px; }
.sim-opts:empty { display: none; }
.sim-check { display: flex !important; gap: 7px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
.sim-check input { margin-top: 2px; }
.sim-field { display: flex !important; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-weight: 600; }
.sim-field input, .sim-field select, .sim-field textarea { font: inherit; border: 1px solid #a9b0bc; background: #fff; color: #1a1a1a; padding: 3px 6px; border-radius: 2px; min-width: 0; flex: 1 1 160px; }
.sim-area textarea { flex-basis: 100%; font-family: var(--font-mono); font-size: 12.5px; }
.sim-note { margin: 2px 0; color: #3b4352; font-size: 12px; }
.sim-dlg-error { color: #a3141f; margin: 0; padding: 0 14px; font-weight: 600; min-height: 0; }
.sim-dlg-error:not(:empty) { padding-bottom: 8px; }
.sim-dlg-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 10px 14px; border-top: 1px solid #c3c9d3; background: #eceef2; }
.sim-dlg-btns .sim-btn { min-width: 86px; text-align: center; }

@media (max-width: 720px) {
  .sim-viewer { grid-template-columns: 1fr; }
  .sim-outline-wrap { display: none; }
  .sim-dlg-body { grid-template-columns: 1fr; }
  .sim-src select { min-height: 160px; }
  .sim-menubar li ul { position: static; box-shadow: none; border: 0; border-left: 2px solid #dbe6f5; margin-left: 10px; min-width: 0; }
  .sim-menubar ul { min-width: 230px; }
  .lm-head { flex-direction: column; }
  .lm-reset { margin-left: 0; }
}
@media print { .sim-shell, .labo-missions { display: none; } }
.labo-band { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; justify-content: space-between; border-left: 4px solid var(--accent-fill); }
.labo-band > div:first-child { flex: 1 1 420px; min-width: 0; }
.labo-band p { margin-bottom: 0; max-width: 70ch; }

/* 12. Identité 2026 : barre haute, deux espaces, palette ---------------------
   Repère de la marque : le jaune « surligneur » (#FFF085) marque ce qui compte,
   le cyan (#53EAFD) mesure la progression, le corail (#FF6467) célèbre. */
.topbar { background: var(--yellow); color: var(--zinc); font-size: var(--fs-xs); position: relative; z-index: 51; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 38px; }
.topbar-title { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-links { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; flex: none; }
.topbar-links li + li { margin-top: 0; }
.topbar-links a { display: inline-flex; align-items: center; gap: .35rem; color: var(--zinc); text-decoration: none; font-weight: 700; padding: .35rem .55rem; border-radius: 6px; }
.topbar-links a:hover { background: rgba(39, 39, 42, .08); }
.topbar-links a:focus-visible { outline: 2px solid var(--zinc); outline-offset: 1px; }
.topbar-links .social { width: 32px; height: 32px; justify-content: center; padding: 0; border-radius: 50%; }
.topbar-links .social svg { width: 18px; height: 18px; }
.topbar-links .topbar-cta { background: var(--zinc); color: var(--cream); margin-left: .25rem; }
.topbar-links .topbar-cta:hover { background: #3F3F46; }
.topbar-links .topbar-cta svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .topbar-title { display: none; } .topbar .container { justify-content: flex-end; } }

.site-header > .container { flex-wrap: wrap; column-gap: var(--space-4); }
.part-switch { display: inline-flex; background: rgba(255, 247, 237, .08); border: 1px solid rgba(255, 247, 237, .16); border-radius: 999px; padding: 3px; gap: 2px; }
.part-switch a { color: var(--on-navy-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 700; padding: .4rem .9rem; border-radius: 999px; white-space: nowrap; }
.part-switch a:hover { color: var(--on-navy); }
.part-switch a[aria-current="true"] { background: var(--cyan); color: var(--zinc); }
.part-cours .part-switch a[aria-current="true"] { background: var(--coral); color: var(--zinc); }
@media (min-width: 861px) {
  .main-nav { order: 10; flex-basis: 100%; border-top: 1px solid rgba(255, 247, 237, .1); margin-top: .35rem; }
  .main-nav ul { flex-wrap: wrap; }
  .main-nav a { padding: .55rem .7rem; }
}
@media (max-width: 860px) { .part-switch { order: 10; flex-basis: 100%; margin: 0 0 .6rem; justify-content: stretch; } .part-switch a { flex: 1; text-align: center; } }
.main-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent-fill); }
.part-cours .main-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--coral); }
.page-hero .eyebrow, .home-hero .eyebrow { color: var(--yellow); }

/* Surligneur : la marque visuelle du site (un seul geste, au chargement du titre) */
.hl-mark { background-image: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 .08em; color: inherit; }
.page-hero .hl-mark, .home-hero .hl-mark, .portal-hero .hl-mark { background-image: linear-gradient(transparent 62%, rgba(255, 240, 133, .38) 62%, rgba(255, 240, 133, .38) 94%, transparent 94%); }
@media (prefers-reduced-motion: no-preference) {
  .hl-anim { animation: hl-swipe .9s .25s cubic-bezier(.3, .7, .2, 1) both; }
  @keyframes hl-swipe { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
}

/* Barres qui glissent : remplissage animé à l'apparition */
.bar { height: 12px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.bar > i { display: block; height: 100%; width: 0; background: var(--cyan); border-radius: inherit; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.bar.is-coral > i { background: var(--coral); }
.bar.is-yellow > i { background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(39, 39, 42, .15); }
@media (prefers-reduced-motion: reduce) { .bar > i { transition: none; } }

/* 13. Portail et espace des cours ------------------------------------------ */
.btn-secondary { color: var(--ink); }
.bar-legend { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-soft); margin: .4rem 0 0; font-weight: 600; }
.page-hero .bar-legend, .portal-hero .bar-legend { color: var(--on-navy-soft); }
.page-hero .bar { background: rgba(255, 247, 237, .12); border-color: rgba(255, 247, 237, .2); }

.portal-hero { background: var(--navy); color: var(--on-navy); }
.portal-hero .container { padding-block: var(--space-8) var(--space-7); }
.portal-hero h1 { color: var(--on-navy); font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); line-height: 1.04; max-width: 17ch; letter-spacing: -.02em; }
.portal-hero .lead { color: var(--on-navy-soft); max-width: 60ch; font-size: var(--fs-md); }
.portal-resume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid rgba(255, 247, 237, .2); border-radius: var(--radius); max-width: 760px; }
.portal-resume p { margin: 0; color: var(--on-navy); }
.portal-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-5); margin-top: calc(-1 * var(--space-6)); position: relative; padding-top: 0; }
.space-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow); border-top: 8px solid var(--coral); }
.space-card.space-quanti { border-top-color: var(--cyan); }
.space-card h2 { margin: 0; font-size: var(--fs-xl); }
.space-card p { margin: 0; }
.space-card .btn-row { margin-top: auto; padding-top: var(--space-3); }
.space-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--coral); color: var(--zinc); }
.space-quanti .space-ic { background: var(--cyan); }
.space-ic svg { width: 26px; height: 26px; }

.slider-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-4); margin-bottom: var(--space-4); }
.slider-btns { display: flex; gap: var(--space-2); }
.slider-btn { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.slider-btn:hover { background: var(--surface-2); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 300px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px var(--space-4); scrollbar-width: thin; overscroll-behavior-x: contain; }
.slider-track > * { scroll-snap-align: start; }
.slider-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.course-card { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5); text-decoration: none; color: var(--ink); position: relative; overflow: hidden; transition: transform .15s, border-color .15s; min-width: 0; }
.course-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--card-accent, var(--cyan)); }
.course-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.course-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.accent-cyan { --card-accent: var(--cyan); } .accent-coral { --card-accent: var(--coral); } .accent-yellow { --card-accent: var(--yellow); }
.course-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--card-accent); color: var(--zinc); margin-top: .3rem; }
.course-ic svg { width: 22px; height: 22px; }
.course-meta { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.course-card h3 { margin: 0; font-size: 1.22rem; line-height: 1.25; }
.course-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); flex: 1; }
.course-foot { display: flex; justify-content: space-between; font-size: var(--fs-xs); font-weight: 700; margin-top: .4rem; }
.course-status { color: var(--ink-soft); }
.course-status.is-done { color: var(--ok); }
.course-card .bar { height: 8px; }
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: var(--space-4); }
.sem-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-5); }
.sem-bar { flex: 0 1 380px; min-width: 220px; }

.how-steps { list-style: none; counter-reset: how; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); }
.how-steps li { counter-increment: how; margin: 0; padding: var(--space-5); border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: .4rem; }
.how-steps li::before { content: counter(how); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--yellow); color: var(--zinc); }
.how-steps span { color: var(--ink-soft); font-size: var(--fs-sm); }

.resume-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius); background: rgba(255, 247, 237, .07); border: 1px solid rgba(255, 247, 237, .18); max-width: 780px; }
.resume-card > div { flex: 1 1 260px; }
.resume-card p { margin: 0; color: var(--on-navy-soft); }
.resume-card strong { color: var(--on-navy); }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5); display: grid; gap: .45rem; align-content: start; }
.tile strong { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; }
.tile small { color: var(--ink-soft); font-size: var(--fs-sm); }
.tile-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--zinc); flex: none; }
.tile-ic svg { width: 21px; height: 21px; }
.is-yellow.tile-ic { background: var(--yellow); } .is-coral.tile-ic { background: var(--coral); } .is-cyan.tile-ic { background: var(--cyan); }
.dash-h { font-size: var(--fs-md); font-family: var(--font-body); }
.achievements { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.ach { margin: 0 !important; display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--ink-soft); }
.ach strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.ach small { display: block; font-size: var(--fs-xs); }
.ach-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.ach-ic svg { width: 19px; height: 19px; }
.ach.got { border-style: solid; border-color: var(--line); background: var(--surface); }
.ach.got .ach-ic { background: var(--yellow); color: var(--zinc); }

/* Page d'un module */
.course-hero .course-chip { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 800; background: var(--card-accent); color: var(--zinc); padding: .3rem .75rem; border-radius: 999px; margin-bottom: var(--space-3); }
.course-chip svg { width: 15px; height: 15px; }
.course-hero h1 { max-width: 24ch; }
.course-hero-progress { max-width: 560px; margin-top: var(--space-5); }
.done-flag { display: inline-flex; gap: .4rem; align-items: center; margin: .6rem 0 0; font-weight: 800; color: var(--yellow); }
.done-flag svg { width: 18px; height: 18px; }
.course-tabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h, 64px)); z-index: 30; background: var(--bg); border-bottom: 1px solid var(--line); }
.course-tabs ul { list-style: none; display: flex; gap: .2rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.course-tabs li + li { margin: 0; }
.course-tabs a { display: block; padding: .75rem .9rem; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.course-tabs a:hover { color: var(--ink); box-shadow: inset 0 -3px 0 var(--coral); }
.course-intro { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.intro-text > p:first-child { font-size: var(--fs-md); line-height: 1.55; }
.intro-side { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5); }
.side-h { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 800; margin: 0 0 var(--space-3); }
.side-h + ul, .intro-side ul { font-size: var(--fs-sm); }
.intro-side .side-h:not(:first-child) { margin-top: var(--space-4); }
@media (max-width: 860px) { .course-intro { grid-template-columns: 1fr; } }

.deck { scroll-margin-top: 8rem; }
.deck-nav { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.deck-dots { list-style: none; display: flex; gap: .4rem; padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; }
.deck-dots li { margin: 0; flex: 1 1 0; min-width: 0; }
.deck-dot { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .55rem .6rem .6rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; text-align: left; font: inherit; position: relative; overflow: hidden; }
.deck-dot span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-xs); background: var(--surface-2); color: var(--ink); }
.deck-dot span svg { width: 15px; height: 15px; }
.deck-dot em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deck-dot.is-read span { background: var(--cyan); color: var(--zinc); }
.deck-dot[aria-current="step"] { border-color: var(--zinc); color: var(--ink); box-shadow: inset 0 -4px 0 var(--yellow); }
:root[data-theme="dark"] .deck-dot[aria-current="step"] { border-color: var(--cream); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .deck-dot[aria-current="step"] { border-color: var(--cream); } }
@media (max-width: 720px) { .deck-dot em { display: none; } .deck-dot { align-items: center; padding: .45rem; } }
.deck-arrows { display: flex; align-items: center; gap: var(--space-2); }
.deck-btn { color: var(--ink); background: var(--surface); border-color: var(--line-strong); }
.deck-btn:disabled { opacity: .35; cursor: default; }
.deck-pos { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-soft); min-width: 9ch; text-align: center; }
.deck-view { overflow: hidden; overflow: clip; border-radius: 20px; transition: height .35s ease; }
.deck-track { display: flex; align-items: flex-start; transition: transform .45s cubic-bezier(.3, .7, .2, 1); touch-action: pan-y; }
.deck-slide { flex: 0 0 100%; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .deck-track, .deck-view { transition: none; } }
.slide-inner { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: clamp(1.25rem, 1rem + 2vw, 2.75rem); }
.slide-kicker { font-size: var(--fs-xs); font-weight: 800; color: var(--accent); margin: 0 0 .4rem; }
.slide-inner h2 { margin: 0 0 var(--space-3); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem); }
.slide-inner h2:focus { outline: none; }
.slide-summary { font-size: var(--fs-md); color: var(--ink-soft); max-width: var(--measure); }
.course-prose h3 { font-size: var(--fs-md); margin-top: var(--space-5); }
.course-prose h4 { font-size: var(--fs-base); }
.course-prose table, .ex-card table, .case-card table { border-collapse: collapse; margin: var(--space-3) 0 var(--space-4); font-size: var(--fs-sm); width: 100%; display: block; overflow-x: auto; }
.course-prose th, .course-prose td, .ex-card th, .ex-card td, .case-card th, .case-card td { border: 1px solid var(--line-strong); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.course-prose thead th, .ex-card thead th, .case-card thead th { background: var(--surface-2); }
table.journal td:nth-child(4), table.journal td:nth-child(5) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.course-prose caption, .ex-card caption, .case-card caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: .3rem; }
.course-body .note, .course-body .warn { border-radius: 12px; padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; max-width: var(--measure); }
.course-body .note { background: var(--info-soft); border-left: 4px solid var(--cyan); }
.course-body .warn { background: var(--bad-soft); border-left: 4px solid var(--coral); }
.course-body .note > :last-child, .course-body .warn > :last-child { margin-bottom: 0; }
.example-box, .keypoints { border-radius: 16px; padding: var(--space-4) var(--space-5); margin-top: var(--space-5); max-width: 860px; }
.example-box { background: var(--surface-2); }
.keypoints { background: var(--accent-soft); border: 1px solid var(--yellow); }
:root[data-theme="dark"] .keypoints { border-color: #6b6532; }
.example-box h3, .keypoints h3 { display: flex; gap: .5rem; align-items: center; font-family: var(--font-body); font-size: var(--fs-base); font-weight: 800; margin: 0 0 var(--space-3); }
.example-box h3 svg, .keypoints h3 svg { width: 18px; height: 18px; flex: none; }
.keypoints ul { margin-bottom: 0; }
.slide-foot { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }

.ex-card, .case-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: var(--space-5); }
.ex-card header { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ex-card h3, .case-card h3 { margin: 0; font-size: var(--fs-md); flex: 1 1 260px; }
.case-card h3 { display: flex; gap: .5rem; align-items: center; margin-bottom: var(--space-3); }
.case-card h3 svg { width: 20px; height: 20px; color: var(--accent); }
.case-card h4 { font-size: var(--fs-sm); margin: var(--space-3) 0 var(--space-2); }
.lvl { display: inline-flex; gap: 3px; }
.lvl i { width: 8px; height: 18px; border-radius: 3px; background: var(--line-strong); }
.lvl-1 i:nth-child(-n+1), .lvl-2 i:nth-child(-n+2), .lvl-3 i:nth-child(-n+3) { background: var(--coral); }
.lvl-txt { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.hint, .solution { margin-top: var(--space-3); border-radius: 12px; border: 1px solid var(--line); }
.hint summary, .solution summary { cursor: pointer; padding: .6rem .9rem; font-weight: 700; font-size: var(--fs-sm); }
.solution summary { background: var(--surface-2); border-radius: 12px; }
.hint[open] > :not(summary), .solution[open] > :not(summary) { padding: .2rem 1rem .6rem; }
.solution[open] { border-color: var(--cyan); }
.done-toggle { display: inline-flex; gap: .5rem; align-items: center; margin-top: var(--space-4); font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.done-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--zinc); }

.cq { border: 1px solid var(--line); border-radius: 16px; padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-3); background: var(--surface); min-width: 0; }
.cq legend { font-weight: 700; padding: 0; float: left; width: 100%; margin-bottom: var(--space-3); display: flex; gap: .6rem; }
.cq-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--zinc); font-size: var(--fs-xs); font-weight: 800; }
.cq .q-option { clear: both; }
.cq.is-ok { border-color: var(--ok); }
.cq.is-ko { border-color: var(--coral); }
.cq-fb { margin: var(--space-3) 0 0; font-size: var(--fs-sm); clear: both; }
.cq-error { color: var(--bad); font-weight: 700; min-height: 0; margin: 0; }
.cq-score { margin-top: var(--space-4); max-width: 520px; display: grid; gap: .5rem; }
.course-gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); }
.course-gloss div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: var(--space-4); }
.course-gloss dt { font-weight: 800; margin-bottom: .3rem; }
.course-gloss dd { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.refs li { font-size: var(--fs-sm); }

.xp-toast { position: fixed; left: 50%; bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 24px); opacity: 0; transition: .3s; z-index: 90; background: var(--zinc); color: var(--cream); border: 2px solid var(--yellow); padding: .6rem 1rem; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); display: flex; gap: .5rem; align-items: center; pointer-events: none; max-width: calc(100% - 32px); }
.xp-toast svg { width: 18px; height: 18px; color: var(--yellow); flex: none; }
.xp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 95; }
.portal-resume[hidden] { display: none; }
.ach > span:last-child { min-width: 0; }
.ach small { overflow-wrap: anywhere; }
@media (min-width: 821px) and (max-width: 1100px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* 14. Design futuriste --------------------------------------------------------
   Typographie géométrique (Sora / Manrope), bandeaux sombres avec une grille
   en perspective et des halos cyan et corail, cartes vitrées à liseré lumineux.
   Une seule animation d'ambiance : la grille qui défile lentement dans les
   bandeaux (désactivée si l'utilisateur réduit les animations). */
:root { --font-display: "Sora", "Manrope", system-ui, sans-serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --glass: rgba(255, 255, 255, .72); --glass-line: rgba(39, 39, 42, .1); --glow-c: rgba(83, 234, 253, .55); --glow-r: rgba(255, 100, 103, .45); --radius: 18px; }
:root[data-theme="dark"] { --glass: rgba(255, 247, 237, .045); --glass-line: rgba(255, 247, 237, .12); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(255, 247, 237, .045); --glass-line: rgba(255, 247, 237, .12); } }
body { background-color: var(--bg); background-image: radial-gradient(circle at 1px 1px, rgba(39, 39, 42, .07) 1px, transparent 0); background-size: 26px 26px; background-attachment: fixed; }
:root[data-theme="dark"] body { background-image: radial-gradient(circle at 1px 1px, rgba(255, 247, 237, .06) 1px, transparent 0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-image: radial-gradient(circle at 1px 1px, rgba(255, 247, 237, .06) 1px, transparent 0); } }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
h4 { font-family: var(--font-display); }
.eyebrow { font-family: var(--font-body); font-style: normal; font-weight: 800; font-size: var(--fs-sm); letter-spacing: .01em; }
.lead { font-weight: 500; }

/* Bandeaux sombres */
.page-hero, .home-hero, .portal-hero, .site-footer { background: radial-gradient(60% 80% at 85% 10%, rgba(83, 234, 253, .16), transparent 60%), radial-gradient(50% 70% at 10% 100%, rgba(255, 100, 103, .14), transparent 60%), #1C1C1F; position: relative; overflow: hidden; isolation: isolate; }
.page-hero::after, .home-hero::after, .portal-hero::after {
  content: ""; position: absolute; left: -25%; right: -25%; bottom: -35%; height: 75%; z-index: -1; pointer-events: none; opacity: 1;
  background-image: linear-gradient(rgba(83, 234, 253, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(83, 234, 253, .22) 1px, transparent 1px);
  background-size: 56px 56px; transform: perspective(520px) rotateX(64deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
@media (prefers-reduced-motion: no-preference) {
  .page-hero::after, .home-hero::after, .portal-hero::after { animation: grid-run 14s linear infinite; }
  @keyframes grid-run { from { background-position: 0 0, 0 0; } to { background-position: 0 56px, 0 0; } }
}
.page-hero .container, .home-hero .container, .portal-hero .container { position: relative; z-index: 1; }
.site-header { background: rgba(28, 28, 31, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(83, 234, 253, .18); }
.main-nav a { border-radius: 999px; }
.main-nav a[aria-current="page"] { box-shadow: none; background: rgba(255, 240, 133, .12); color: var(--yellow); }
.part-cours .main-nav a[aria-current="page"] { box-shadow: none; background: rgba(255, 100, 103, .14); color: #FF9496; }
.part-switch a[aria-current="true"] { box-shadow: 0 0 18px -2px var(--glow-c); }
.part-cours .part-switch a[aria-current="true"] { box-shadow: 0 0 18px -2px var(--glow-r); }
.part-quali .part-switch a[aria-current="true"] { background: var(--yellow); box-shadow: 0 0 18px -2px rgba(255, 240, 133, .6); }
.part-quali .main-nav a[aria-current="page"] { background: rgba(255, 240, 133, .12); color: var(--yellow); }
.site-footer { border-top: 1px solid rgba(83, 234, 253, .18); }

/* Boutons */
.btn { border-radius: 999px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.005em; }
.btn-primary { background: var(--yellow); color: var(--zinc); box-shadow: 0 0 0 1px rgba(39, 39, 42, .12), 0 10px 26px -12px rgba(255, 240, 133, .95); }
.btn-primary:hover { background: #FFF6A8; box-shadow: 0 0 0 1px rgba(39, 39, 42, .12), 0 12px 30px -10px rgba(255, 240, 133, 1); }
.btn-secondary { background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(8px); }
.btn-secondary:hover { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan) inset; }
.btn-ghost-light { border-color: rgba(83, 234, 253, .45); }
.btn-ghost-light:hover { background: rgba(83, 234, 253, .1); }

/* Surfaces vitrées */
.card, .course-card, .space-card, .tile, .ex-card, .case-card, .slide-inner, .intro-side, .how-steps li, .tool-card, .cq, .course-gloss div, .labo-missions, .module-nav a, .script-card, .deck-dot, .ach.got, .tool, .quiz, .spss-read {
  background: var(--glass); border-color: var(--glass-line); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.course-card, .space-card, .tool-card, .module-nav a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.course-card:hover, .tool-card:hover, .module-nav a:hover { transform: translateY(-3px); border-color: rgba(83, 234, 253, .7); box-shadow: 0 0 0 1px rgba(83, 234, 253, .35), 0 18px 40px -18px var(--glow-c); }
.course-card.accent-coral:hover { border-color: rgba(255, 100, 103, .7); box-shadow: 0 0 0 1px rgba(255, 100, 103, .3), 0 18px 40px -18px var(--glow-r); }
.course-card::before { height: 4px; box-shadow: 0 0 16px var(--card-accent); }
.space-card { border-top-width: 1px; position: relative; overflow: hidden; }
.space-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--coral); box-shadow: 0 0 22px var(--coral); }
.space-card.space-quanti::before { background: var(--cyan); box-shadow: 0 0 22px var(--cyan); }
.space-card.space-quali::before { background: var(--yellow); box-shadow: 0 0 22px var(--yellow); }
.space-quali .space-ic { background: var(--yellow); }
.bar > i { background: linear-gradient(90deg, var(--cyan), #9DF4FF); box-shadow: 0 0 12px rgba(83, 234, 253, .7); }
.bar.is-coral > i { background: linear-gradient(90deg, var(--coral), #FF9C9E); box-shadow: 0 0 12px rgba(255, 100, 103, .6); }
.bar.is-yellow > i { background: linear-gradient(90deg, #FFE94D, var(--yellow)); box-shadow: 0 0 12px rgba(255, 240, 133, .7); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Portail : trois espaces */
.portal-hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.6rem); max-width: 19ch; line-height: 1.02; letter-spacing: -.035em; }
.portal-kicker { display: inline-flex; gap: .5rem; align-items: center; color: var(--cyan); font-weight: 700; font-size: var(--fs-sm); border: 1px solid rgba(83, 234, 253, .35); border-radius: 999px; padding: .35rem .85rem; margin-bottom: var(--space-4); background: rgba(83, 234, 253, .06); }
.portal-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.portal-cta { margin-top: var(--space-5); }
.portal-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.portal-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); color: var(--on-navy-soft); font-size: var(--fs-sm); }
.portal-stats strong { display: block; font-family: var(--font-display); font-size: 1.8rem; color: var(--on-navy); letter-spacing: -.02em; }

/* Espace qualitatif : vue d'ensemble */
.quali-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .quali-case { grid-template-columns: 1fr; } }
.quali-flow { list-style: none; counter-reset: qf; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); }
.quali-flow li { counter-increment: qf; margin: 0; padding: var(--space-4); border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); display: grid; gap: .25rem; }
.quali-flow li::before { content: counter(qf); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--fs-xs); background: var(--yellow); color: var(--zinc); }
.quali-flow span { font-size: var(--fs-sm); color: var(--ink-soft); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.tool-card { display: grid; gap: .4rem; align-content: start; padding: var(--space-5); border-radius: 16px; border: 1px solid var(--glass-line); text-decoration: none; color: var(--ink); }
.tool-card strong { font-family: var(--font-display); font-size: 1.1rem; }
.tool-card span { color: var(--ink-soft); font-size: var(--fs-sm); }
.tool-card em { font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--accent); }

/* 15. Inscription, attestation ------------------------------------------------ */
.topbar-reg { gap: .35rem; }
.topbar-reg svg { width: 15px; height: 15px; }
main.is-gated { filter: blur(6px); pointer-events: none; user-select: none; max-height: 100vh; overflow: hidden; }
.reg-dialog, .att-dialog, .ql-dialog { border: 1px solid var(--glass-line); border-radius: 22px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(83, 234, 253, .25); }
.reg-dialog { width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 24px); }
.reg-dialog::backdrop, .att-dialog::backdrop, .ql-dialog::backdrop { background: rgba(20, 20, 23, .62); backdrop-filter: blur(6px); }
.reg-form { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); display: grid; gap: var(--space-4); }
.reg-head { display: flex; gap: var(--space-4); align-items: flex-start; }
.reg-head h2 { margin: 0 0 .3rem; font-size: var(--fs-lg); }
.reg-head p { margin: 0; color: var(--ink-soft); }
.reg-ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--cyan); color: var(--zinc); box-shadow: 0 0 22px -4px var(--glow-c); }
.reg-ic svg { width: 24px; height: 24px; }
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3) var(--space-4); }
.reg-row { display: grid; gap: .3rem; min-width: 0; }
.reg-row label, .reg-spaces legend { font-weight: 700; font-size: var(--fs-sm); }
.reg-spaces { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.reg-spaces legend { margin-bottom: .3rem; width: 100%; }
.reg-spaces label { font-weight: 500; display: inline-flex; gap: .4rem; align-items: center; }
.reg-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.reg-consent input { margin-top: .25rem; }
.reg-error { color: var(--bad); font-weight: 700; margin: 0; }
.reg-error:empty { display: none; }
.reg-ok { display: flex; gap: .5rem; align-items: center; padding: .8rem 1rem; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.reg-ok svg { width: 20px; height: 20px; flex: none; }
.reg-fallback { padding: .9rem 1rem; border-radius: 14px; background: var(--warn-soft); }
.reg-fallback p { margin: 0 0 .6rem; }

.att-dialog { width: min(1040px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: var(--space-4); background: var(--surface-2); }
.att-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-bottom: var(--space-3); }
.attestation { aspect-ratio: 297 / 210; width: 100%; background: #FFF7ED; color: #27272A; border-radius: 6px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 4.5% 7% 3.5%; font-family: "Manrope", system-ui, sans-serif; container-type: inline-size;
  background-image: radial-gradient(circle at 1px 1px, rgba(39, 39, 42, .08) 1px, transparent 0); background-size: 18px 18px; box-shadow: inset 0 0 0 10px #27272A, inset 0 0 0 12px #53EAFD; }
.att-band { position: absolute; inset: 0 0 auto; height: 7.5%; background: #27272A; display: flex; align-items: center; justify-content: space-between; padding: 0 4.5%; color: #FFF7ED; font-size: 1.5cqi; font-weight: 700; }
.att-org { font-family: "Sora", sans-serif; letter-spacing: .12em; color: #FFF085; }
.att-kicker { margin: 7% 0 1.5%; font-family: "Sora", sans-serif; font-weight: 800; font-size: 4.2cqi; letter-spacing: -.02em; }
.att-lead { margin: .4% 0; font-size: 1.7cqi; color: #52525B; }
.att-name { margin: .8% 0 1.6%; font-family: "Sora", sans-serif; font-size: 3.8cqi; font-weight: 700; border-bottom: .35cqi solid #FFF085; padding: 0 2% .4%; }
.att-title { margin: 1% 0; font-family: "Sora", sans-serif; font-size: 2.6cqi; font-weight: 700; max-width: 80%; }
.att-detail { margin: .6% 0 0; font-size: 1.5cqi; color: #52525B; }
.att-foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 3%; align-items: end; text-align: left; }
.att-foot strong { display: block; font-size: 1.6cqi; }
.att-label { display: block; font-size: 1.15cqi; color: #52525B; }
.att-sign { text-align: center; border-top: .15cqi solid #27272A; padding-top: .8%; }
.att-signature { display: block; font-family: "Pinyon Script", cursive; font-size: 3.8cqi; line-height: 1.1; color: #27272A; }
.att-note { margin: 2% 0 0; font-size: 1.05cqi; color: #71717A; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  body.printing-att > *:not(#attestation-dialog) { display: none !important; }
  body.printing-att { background: none !important; }
  body.printing-att #attestation-dialog { position: static; display: block; border: 0; box-shadow: none; padding: 0; margin: 0; width: 100%; max-width: none; max-height: none; background: none; }
  body.printing-att .att-actions { display: none; }
  body.printing-att .attestation { width: 297mm; height: 210mm; aspect-ratio: auto; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* 16. Labo qualitatif -------------------------------------------------------- */
.qlab { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .35); backdrop-filter: blur(12px); min-width: 0; }
.ql-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding: .7rem 1rem; background: #1C1C1F; color: var(--cream); border-bottom: 1px solid rgba(83, 234, 253, .25); }
.ql-brand { display: inline-flex; gap: .45rem; align-items: center; font-family: var(--font-display); font-weight: 700; color: var(--yellow); }
.ql-brand svg { width: 18px; height: 18px; }
.ql-menu-l { display: inline-flex; gap: .4rem; align-items: center; font-size: var(--fs-sm); font-weight: 600; }
.ql-menu-l select { font: inherit; background: #27272A; color: var(--cream); border: 1px solid rgba(255, 247, 237, .25); border-radius: 999px; padding: .3rem .7rem; }
.ql-tabs { display: flex; gap: .25rem; overflow-x: auto; flex: 1 1 100%; scrollbar-width: thin; }
.ql-tab { flex: none; background: transparent; color: #D4D4D4; border: 1px solid transparent; border-radius: 999px; padding: .35rem .8rem; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.ql-tab:hover { color: var(--cream); border-color: rgba(255, 247, 237, .2); }
.ql-tab[aria-selected="true"] { background: var(--cyan); color: var(--zinc); box-shadow: 0 0 16px -3px var(--glow-c); }
.ql-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 260px; min-height: 560px; }
.ql-sources, .ql-codes-panel { padding: .8rem; overflow: auto; max-height: 72vh; font-size: var(--fs-sm); }
.ql-sources { border-right: 1px solid var(--glass-line); }
.ql-codes-panel { border-left: 1px solid var(--glass-line); }
.ql-h { display: flex; justify-content: space-between; font-family: var(--font-display); font-weight: 700; margin: 0 0 .6rem; }
.ql-h span { color: var(--ink-soft); font-weight: 600; font-family: var(--font-body); font-size: var(--fs-xs); }
.ql-sources ul, .ql-codes { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.ql-sources li + li, .ql-codes li + li { margin: 0; }
.ql-src { width: 100%; text-align: left; display: grid; gap: .1rem; padding: .55rem .65rem; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.ql-src span { font-size: var(--fs-xs); color: var(--ink-soft); }
.ql-src small { font-size: .72rem; color: var(--ink-soft); }
.ql-src:hover { border-color: var(--glass-line); }
.ql-src.on { border-color: var(--cyan); background: var(--info-soft); }
.ql-center { min-width: 0; display: flex; flex-direction: column; }
.ql-doc, .ql-view { padding: 1rem 1.2rem; overflow: auto; max-height: 72vh; flex: 1; }
.ql-doc-head h3 { margin: 0 0 .2rem; font-size: var(--fs-md); }
.ql-doc-head p { margin: 0 0 1rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.ql-par { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: .6rem; padding: .55rem 0; border-top: 1px dashed var(--glass-line); }
.ql-who { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: .75rem; background: var(--surface-2); color: var(--ink-soft); }
.ql-par.is-r .ql-who { background: var(--cyan); color: var(--zinc); }
.ql-par.is-i .ql-txt { color: var(--ink-soft); font-style: italic; }
.ql-txt { margin: 0; line-height: 1.7; }
.ql-mark { background: color-mix(in srgb, var(--mk) 38%, transparent); color: inherit; border-bottom: 2px solid var(--mk); border-radius: 3px; padding: 0 1px; }
.ql-mark.multi { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(39, 39, 42, .1) 6px 9px); }
.ql-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ql-chip { display: inline-flex; gap: .3rem; align-items: center; font: inherit; font-size: .74rem; font-weight: 700; border-radius: 999px; padding: .12rem .55rem; border: 1px solid var(--mk); background: color-mix(in srgb, var(--mk) 22%, transparent); color: var(--ink); cursor: pointer; }
.ql-codepar { margin-top: .35rem; display: inline-flex; gap: .3rem; align-items: center; font: inherit; font-size: .74rem; font-weight: 700; color: var(--info); background: none; border: 0; padding: .1rem 0; cursor: pointer; opacity: .75; }
.ql-codepar svg { width: 13px; height: 13px; }
.ql-par:hover .ql-codepar, .ql-codepar:focus-visible { opacity: 1; }
.ql-code-tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .7rem; }
.ql-mini { display: inline-flex; gap: .3rem; align-items: center; font: inherit; font-size: .76rem; font-weight: 700; border: 1px solid var(--glass-line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: .3rem .65rem; cursor: pointer; }
.ql-mini svg { width: 13px; height: 13px; }
.ql-mini:hover { border-color: var(--cyan); }
.ql-theme { margin-bottom: .8rem; }
.ql-theme-name { display: flex; gap: .35rem; align-items: center; font-weight: 800; font-size: .78rem; color: var(--ink-soft); margin: 0 0 .35rem; }
.ql-theme-name svg { width: 13px; height: 13px; }
.ql-code { width: 100%; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: .5rem; align-items: center; text-align: left; padding: .4rem .55rem; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--ink); font: inherit; font-size: .84rem; cursor: pointer; }
.ql-code i { width: 12px; height: 12px; border-radius: 4px; background: var(--mk); box-shadow: 0 0 8px var(--mk); }
.ql-code small { font-weight: 800; color: var(--ink-soft); }
.ql-code:hover, .ql-code.on { border-color: var(--mk); background: color-mix(in srgb, var(--mk) 14%, transparent); }
.qlab.has-sel .ql-code { border-color: color-mix(in srgb, var(--mk) 60%, transparent); }
.ql-empty, .ql-tip, .ql-help { color: var(--ink-soft); font-size: var(--fs-sm); }
.ql-tip { border-top: 1px dashed var(--glass-line); padding-top: .6rem; margin-top: .6rem; }
.ql-status { padding: .45rem 1rem; font-size: var(--fs-xs); color: #D4D4D4; background: #1C1C1F; border-top: 1px solid rgba(83, 234, 253, .2); }
.ql-vt { margin: 0 0 .7rem; font-size: var(--fs-md); }
.ql-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: 1rem; }
.ql-f { display: grid; gap: .25rem; font-size: var(--fs-sm); font-weight: 700; margin-bottom: .7rem; }
.ql-f.inline { margin: 0; }
.ql-f input, .ql-f select, .ql-f textarea, #ql-memo { font: inherit; font-weight: 500; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); }
.ql-tablewrap { overflow-x: auto; margin: .6rem 0 1rem; }
.ql-table { border-collapse: collapse; font-size: var(--fs-sm); min-width: 100%; }
.ql-table th, .ql-table td { border: 1px solid var(--glass-line); padding: .35rem .55rem; text-align: left; white-space: nowrap; }
.ql-table td { text-align: right; font-variant-numeric: tabular-nums; }
.ql-table thead th { background: var(--surface-2); }
.ql-table.matrix td { text-align: center; }
.ql-heat { display: inline-grid; place-items: center; min-width: 2rem; padding: .1rem .3rem; border-radius: 6px; font-weight: 800; background: rgba(83, 234, 253, calc(.15 + var(--h) * .7)); color: var(--zinc); }
.ql-zero { color: var(--ink-soft); opacity: .6; }
.ql-bars { display: grid; gap: .35rem; margin-bottom: 1rem; }
.ql-barrow { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 2.5rem; gap: .6rem; align-items: center; font-size: var(--fs-sm); }
.ql-barrow span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ql-barbg { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ql-barbg i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #9DF4FF); }
.ql-cloud { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: baseline; padding: 1rem; border-radius: 14px; background: var(--surface-2); margin-bottom: 1rem; line-height: 1.2; font-family: var(--font-display); font-weight: 700; }
.ql-cloud span:nth-child(3n) { color: var(--accent); } .ql-cloud span:nth-child(3n+1) { color: var(--info); }
.ql-quote { margin: 0 0 .7rem; padding: .6rem .9rem; border-left: 3px solid var(--cyan); background: var(--surface-2); border-radius: 0 12px 12px 0; }
.ql-quote p { margin: 0 0 .3rem; }
.ql-quote footer { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }
.ql-def { padding: .6rem .8rem; border-radius: 12px; background: var(--accent-soft); font-size: var(--fs-sm); }
.ql-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin: .4rem 0 .6rem; }
.ql-kpi div { padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--surface); display: grid; gap: .15rem; }
.ql-kpi span, .ql-kpi small { font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 700; }
.ql-kpi strong { font-family: var(--font-display); font-size: 1.6rem; }
.ql-chart-wrap { overflow-x: auto; }
.ql-chart { width: 100%; max-width: 560px; height: auto; display: block; }
.ql-chart text { font-size: 11px; fill: var(--ink-soft); }
.ql-line { fill: none; stroke: var(--info); stroke-width: 2.5; }
.ql-dot { fill: var(--coral); }
.ql-dialog { width: min(560px, calc(100vw - 24px)); }
.ql-dlg { padding: 1.4rem; }
.ql-dlg h3 { margin: 0 0 1rem; }
.ql-dlg-err { color: var(--bad); font-weight: 700; margin: 0 0 .6rem; }
.ql-dlg-err:empty { display: none; }
.ql-q { font-style: italic; color: var(--ink-soft); }
.ql-pick { display: grid; gap: .3rem; max-height: 46vh; overflow: auto; }
.ql-pick label { display: flex; gap: .5rem; align-items: center; padding: .35rem .55rem; border-radius: 10px; border-left: 4px solid var(--mk); background: var(--surface-2); font-size: var(--fs-sm); cursor: pointer; }
@media (max-width: 1000px) { .ql-body { grid-template-columns: 1fr; } .ql-sources, .ql-codes-panel { border: 0; border-bottom: 1px solid var(--glass-line); max-height: none; }
  .ql-sources ul { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; } .ql-codes-panel { order: -1; } .ql-doc, .ql-view { max-height: none; } }

/* Leçons de l'analyse quantitative : bandeau sombre futuriste, vidéo cerclée de néon */
.page-hero.lesson-hero { background: radial-gradient(60% 80% at 85% 10%, rgba(83, 234, 253, .16), transparent 60%), radial-gradient(50% 70% at 10% 100%, rgba(255, 100, 103, .12), transparent 60%), #1C1C1F; color: var(--on-navy); border-bottom: 1px solid rgba(83, 234, 253, .2); }
.page-hero.lesson-hero::after { display: block; }
.page-hero.lesson-hero h1 { color: var(--on-navy); }
.page-hero.lesson-hero .lead, .page-hero.lesson-hero .hero-meta { color: var(--on-navy-soft); }
.page-hero.lesson-hero .eyebrow { color: var(--yellow); }
.page-hero.lesson-hero .hero-meta svg { color: var(--cyan); }
.page-hero.lesson-hero .breadcrumb a { color: var(--on-navy-soft); }
.page-hero.lesson-hero .breadcrumb li + li::before { color: var(--on-navy-soft); }
.page-hero.lesson-hero .breadcrumb [aria-current] { color: var(--on-navy); }
.page-hero.lesson-hero .capsule-title { color: var(--on-navy); }
.page-hero.lesson-hero .capsule-sub, .page-hero.lesson-hero .capsule-transcript summary, .page-hero.lesson-hero .capsule-transcript > div { color: var(--on-navy-soft); }
.page-hero.lesson-hero .badge { background: rgba(255, 247, 237, .08); color: var(--on-navy); }
.capsule-frame { border-radius: 18px; box-shadow: 0 0 0 1px rgba(83, 234, 253, .45), 0 0 40px -8px rgba(83, 234, 253, .45), 0 24px 60px -24px rgba(0, 0, 0, .6); }
.capsule-empty::before { border-color: rgba(83, 234, 253, .35); }
.portal-stats > div { display: grid; gap: .1rem; }
.portal-stats dt, .portal-stats dd { margin: 0; }
.site-footer .btn-primary, .site-footer .btn-primary:hover { color: var(--zinc); text-decoration: none; }
.page-hero .hl-mark, .home-hero .hl-mark, .portal-hero .hl-mark { background-image: linear-gradient(transparent 90%, var(--cyan) 90%, var(--cyan) 97%, transparent 97%); filter: drop-shadow(0 0 6px rgba(83, 234, 253, .45)); }
.accent-coral .hl-mark { background-image: linear-gradient(transparent 90%, var(--coral) 90%, var(--coral) 97%, transparent 97%) !important; filter: drop-shadow(0 0 6px rgba(255, 100, 103, .45)); }
.accent-yellow .hl-mark { background-image: linear-gradient(transparent 90%, var(--yellow) 90%, var(--yellow) 97%, transparent 97%) !important; filter: none; }
.ps-short, .ps-mid { display: none; }
@media (min-width: 861px) and (max-width: 1180px) { .ps-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ps-mid { display: inline; } .brand-text span { display: none; } }
@media (max-width: 860px) { .ps-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .ps-short { display: inline; } .part-switch a { padding: .45rem .5rem; } }

/* 17. Comptes : avatar, menu, connexion, page « Mon compte », préférences ---- */
.footer-grid { grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)); }
@media (min-width: 821px) and (max-width: 1180px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-grid > :first-child { grid-column: 1 / -1; } }
:root[data-fs="lg"] { font-size: 112.5%; }
:root[data-fs="xl"] { font-size: 125%; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.acct-slot { display: flex; gap: .2rem; align-items: center; }
.topbar-link { display: inline-flex; gap: .35rem; align-items: center; font: inherit; font-weight: 700; color: var(--zinc); background: none; border: 0; padding: .35rem .55rem; border-radius: 6px; cursor: pointer; }
.topbar-link svg { width: 15px; height: 15px; }
.topbar-link:hover { background: rgba(39, 39, 42, .08); }
.topbar-link.strong { background: var(--zinc); color: var(--cream); }
.avatar { display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; flex: none; font-family: var(--font-display); font-weight: 700; color: var(--zinc); background: linear-gradient(135deg, var(--cyan), var(--yellow)); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 26px; height: 26px; font-size: .7rem; }
.avatar.md { width: 40px; height: 40px; font-size: .9rem; }
.avatar.lg { width: 96px; height: 96px; font-size: 1.8rem; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--cyan); }
.avatar.xl { width: 112px; height: 112px; font-size: 2.2rem; box-shadow: 0 0 0 3px #1C1C1F, 0 0 0 5px var(--cyan), 0 0 30px -4px var(--glow-c); }
.acct { position: relative; }
.acct-btn { display: inline-flex; gap: .45rem; align-items: center; font: inherit; font-weight: 700; color: var(--zinc); background: rgba(39, 39, 42, .06); border: 1px solid rgba(39, 39, 42, .15); border-radius: 999px; padding: .15rem .6rem .15rem .2rem; cursor: pointer; }
.acct-btn:hover { background: rgba(39, 39, 42, .12); }
.acct-btn .caret { font-size: .7rem; }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 270px; list-style: none; margin: 0; padding: .4rem; border-radius: 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--glass-line); box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(83, 234, 253, .2); font-size: var(--fs-sm); }
.acct-menu li + li { margin: 0; }
.acct-menu a, .acct-menu button { display: flex; gap: .6rem; align-items: center; width: 100%; padding: .55rem .7rem; border-radius: 10px; color: var(--ink); text-decoration: none; font: inherit; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; }
.acct-menu a:hover, .acct-menu button:hover, .acct-menu a:focus-visible, .acct-menu button:focus-visible { background: var(--surface-2); }
.acct-menu svg { width: 17px; height: 17px; color: var(--ink-soft); }
.acct-menu .acct-warn { color: var(--warn); }
.acct-id { display: flex; gap: .7rem; align-items: center; padding: .6rem .7rem .8rem; border-bottom: 1px solid var(--line); margin-bottom: .3rem; }
.acct-id small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); overflow-wrap: anywhere; }
@media (max-width: 640px) { .acct-btn span:not(.avatar):not(.caret), .topbar-link span { display: none; } .topbar-link.strong span { display: inline; } }
.reg-wrap { padding: clamp(1.25rem, 1rem + 2vw, 2.25rem); display: grid; gap: var(--space-4); }
.reg-wrap .reg-form { padding: 0; }
.reg-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); gap: 4px; justify-self: start; }
.reg-tabs button { font: inherit; font-weight: 700; border: 0; background: none; color: var(--ink-soft); padding: .45rem 1rem; border-radius: 999px; cursor: pointer; }
.reg-tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--glass-line), 0 0 14px -4px var(--glow-c); }
.reg-hint { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); }
.linkbtn { font: inherit; color: var(--info); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.reg-forgot { padding: .8rem 1rem; border-radius: 14px; background: var(--surface-2); font-size: var(--fs-sm); }
.reg-forgot p { margin: 0 0 .6rem; }
.acct-hero { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.acct-hero h1 { margin: 0 0 .3rem; }
.acct-hero .lead { margin: 0; }
.acct-meta { color: var(--on-navy-soft); font-size: var(--fs-sm); margin: .4rem 0 0; overflow-wrap: anywhere; }
.acct-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6); align-items: start; }
.acct-nav { position: sticky; top: calc(var(--header-h, 110px) + 1rem); }
.acct-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .2rem; }
.acct-nav li + li { margin: 0; }
.acct-nav a { display: block; padding: .5rem .8rem; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
.acct-nav a:hover { background: var(--glass); box-shadow: 0 0 0 1px var(--glass-line); }
.acct-main { display: grid; gap: var(--space-5); min-width: 0; }
.acct-card { background: var(--glass); border: 1px solid var(--glass-line); border-radius: 20px; padding: clamp(1.1rem, .9rem + 1.5vw, 1.8rem); backdrop-filter: blur(12px); scroll-margin-top: 9rem; }
.acct-card h2 { margin: 0 0 var(--space-4); font-size: var(--fs-lg); }
.acct-form { margin-top: var(--space-4); }
.acct-form .full { grid-column: 1 / -1; }
.photo-row { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.form-msg { font-size: var(--fs-sm); font-weight: 700; }
.form-msg.ok { color: var(--ok); } .form-msg.ko { color: var(--bad); }
.pref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-4); }
.pref-grid fieldset { border: 1px solid var(--glass-line); border-radius: 14px; padding: .8rem 1rem; margin: 0; display: grid; gap: .35rem; }
.pref-grid legend { font-weight: 800; padding: 0 .3rem; }
.pref-grid label { display: flex; gap: .5rem; align-items: center; }
.att-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.att-list li { display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--surface); margin: 0; flex-wrap: wrap; }
.att-list li > div { flex: 1 1 220px; min-width: 0; }
.att-list small { display: block; color: var(--ink-soft); font-size: var(--fs-xs); }
.att-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--yellow); color: var(--zinc); flex: none; }
.att-ic svg { width: 19px; height: 19px; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); }
.prog-tile { display: grid; gap: .4rem; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--surface); }
.prog-tile span { font-size: var(--fs-sm); color: var(--ink-soft); }
.prog-tile .bar > i { width: var(--w); }
@media (max-width: 860px) { .acct-layout { grid-template-columns: 1fr; } .acct-nav { position: static; } .acct-nav ul { display: flex; flex-wrap: wrap; } }

/* 18. Méthodologie : bibliothèque de modèles et atelier ---------------------- */
.lib-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--space-6) 0 var(--space-5); }
.lib-tabs button, .tool-tabs a { font: inherit; font-weight: 700; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); cursor: pointer; text-decoration: none; }
.lib-tabs button[aria-selected="true"] { background: var(--zinc); color: var(--cream); border-color: var(--zinc); box-shadow: 0 0 16px -4px var(--glow-c); }
:root[data-theme="dark"] .lib-tabs button[aria-selected="true"] { background: var(--cyan); color: var(--zinc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lib-tabs button[aria-selected="true"] { background: var(--cyan); color: var(--zinc); } }
.lib-root:focus { outline: none; }
.lib-grid, .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); }
.lib-card { display: grid; gap: .5rem; align-content: start; padding: var(--space-5); border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.lib-card:hover { transform: translateY(-3px); border-color: rgba(83, 234, 253, .7); box-shadow: 0 18px 40px -18px var(--glow-c); }
.lib-card h2 { margin: 0; font-size: 1.2rem; }
.lib-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.lib-type { font-size: var(--fs-xs); font-weight: 800; color: var(--accent); margin: 0; }
.lib-meta { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-soft); }
.reader-bar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: var(--space-4); position: sticky; top: calc(var(--header-h, 110px) + 4px); z-index: 20; padding: .5rem; border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--glass-line); }
.anno-toggle { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; font-size: var(--fs-sm); }
.reader { background: var(--surface); border: 1px solid var(--glass-line); border-radius: 20px; padding: clamp(1.2rem, 1rem + 2.5vw, 3rem); }
.paper-head { border-bottom: 1px solid var(--line); padding-bottom: var(--space-5); margin-bottom: var(--space-5); max-width: 860px; }
.paper-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin: .3rem 0 .6rem; }
.paper-auth, .paper-journal { margin: 0; color: var(--ink-soft); font-weight: 600; }
.paper-journal { font-style: italic; font-weight: 500; }
.paper-abs { margin-top: var(--space-4); padding: var(--space-4); border-radius: 14px; background: var(--surface-2); }
.paper-abs h2 { font-size: var(--fs-base); margin: 0 0 .4rem; }
.paper-abs p:last-child { margin: 0; }
.rd-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px dashed var(--line); }
.reader.no-notes .rd-sec { grid-template-columns: minmax(0, 1fr); }
.reader.no-notes .anno { display: none; }
.rd-text { max-width: 74ch; min-width: 0; }
.rd-text h2 { font-size: var(--fs-md); margin: 0 0 .6rem; }
.rd-text table { border-collapse: collapse; font-size: var(--fs-sm); display: block; overflow-x: auto; margin: .6rem 0 1rem; }
.rd-text th, .rd-text td { border: 1px solid var(--line-strong); padding: .35rem .55rem; text-align: left; }
.rd-text thead th { background: var(--surface-2); }
.rd-text caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: .3rem; }
.anno { align-self: start; position: sticky; top: calc(var(--header-h, 110px) + 70px); padding: .8rem 1rem; border-radius: 14px; background: var(--accent-soft); border: 1px solid var(--yellow); font-size: var(--fs-sm); }
:root[data-theme="dark"] .anno { border-color: #6b6532; }
.anno-h { display: flex; gap: .4rem; align-items: center; font-weight: 800; margin: 0 0 .4rem; }
.anno-h svg { width: 16px; height: 16px; }
.anno ul { margin: 0; padding-left: 1.1rem; }
.toc { padding-left: 1.2rem; }
.toc > li { margin: .4rem 0; }
.toc > li > span { font-weight: 700; }
.toc em { float: right; font-style: normal; color: var(--ink-soft); font-size: var(--fs-sm); }
.toc ul { font-size: var(--fs-sm); color: var(--ink-soft); }
@media (max-width: 900px) { .rd-sec { grid-template-columns: 1fr; } .anno { position: static; } .reader-bar { border-radius: 18px; } }
.readings section { margin-bottom: var(--space-5); }
.readings h2 { font-size: var(--fs-md); }
.reading-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.reading-list li { margin: 0; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--glass-line); background: var(--glass); }
.reading-list .ref { font-weight: 700; margin: 0 0 .25rem; }
.reading-list p:last-child { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.tpl-card { display: grid; gap: .6rem; align-content: start; padding: var(--space-5); border-radius: 18px; border: 1px solid var(--glass-line); background: var(--glass); min-width: 0; }
.tpl-card h2 { margin: 0; font-size: 1.15rem; }
.tpl-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.tpl-pre { margin: 0; max-height: 240px; overflow: auto; white-space: pre-wrap; font-family: var(--font-mono); font-size: .78rem; padding: .8rem; border-radius: 12px; background: var(--surface-2); color: var(--ink); }
.tool-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: var(--space-6) 0 var(--space-4); }
.tool-tabs a:hover { border-color: var(--cyan); }
#atelier-root { display: grid; gap: var(--space-5); padding-bottom: var(--space-6); }
.tool-card2 { padding: clamp(1.1rem, .9rem + 1.5vw, 2rem); border-radius: 20px; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(12px); scroll-margin-top: 9rem; display: grid; gap: var(--space-4); min-width: 0; }
.tool-card2 h2 { margin: 0; }
.tool-intro { margin: 0; color: var(--ink-soft); max-width: 75ch; }
.tool-card2 .reg-row.full { grid-column: 1 / -1; }
.tool-out:empty { display: none; }
.tool-out { padding: var(--space-4) var(--space-5); border-radius: 16px; background: var(--surface); border: 1px solid var(--glass-line); }
.tool-out h3 { font-size: var(--fs-base); margin: var(--space-3) 0 .3rem; }
.tool-out h3:first-child { margin-top: 0; }
.tool-out table { border-collapse: collapse; font-size: var(--fs-sm); width: 100%; display: block; overflow-x: auto; }
.tool-out th, .tool-out td { border: 1px solid var(--line-strong); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.chk-auto { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; }
.chk-auto li { margin: 0; padding: .5rem .8rem; border-radius: 10px; font-size: var(--fs-sm); }
.chk-auto .ok { background: var(--ok-soft); color: var(--ok); font-weight: 700; }
.chk-auto .ko { background: var(--warn-soft); }
.hyp-diagram { overflow-x: auto; margin-bottom: var(--space-3); }
.hyp-svg { width: 100%; max-width: 620px; height: auto; }
.hyp-svg text { font-size: 12px; fill: var(--ink); font-family: var(--font-body); font-weight: 700; }
.hyp-box { fill: var(--surface-2); stroke: var(--cyan); stroke-width: 1.5; }
.hyp-line { stroke: var(--ink-soft); stroke-width: 1.6; }
.hyp-line.dash { stroke-dasharray: 5 4; stroke: var(--accent); }
.hyp-head { fill: var(--ink-soft); }
.apa-preview { padding: .9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line-strong); }
.apa-ref { margin: 0 0 .3rem; padding-left: 2em; text-indent: -2em; }
.apa-biblio li { display: flex; gap: .8rem; justify-content: space-between; align-items: baseline; padding-left: 0; }
.apa-biblio li span { padding-left: 2em; text-indent: -2em; }
.plan-list { padding-left: 1.4rem; }
.plan-list li.part { list-style: none; margin-left: -1.4rem; font-weight: 800; margin-top: .8rem; }
.plan-list em { color: var(--ink-soft); font-style: normal; font-size: var(--fs-sm); }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line-strong); }
.timeline li { position: relative; margin: 0; padding: .45rem 0 .45rem 1.2rem; display: grid; grid-template-columns: 8.5rem 1fr; gap: .8rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .85rem; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); }
.timeline li.past { color: var(--ink-soft); }
.timeline li.past::before { background: var(--ok); border-color: var(--ok); }
.timeline li.next::before { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.timeline time { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .timeline li { grid-template-columns: 1fr; gap: 0; } }
.warn-txt { color: var(--warn); font-weight: 700; }
.ok-txt { color: var(--ok); font-weight: 700; }
.chk-head { display: grid; gap: .4rem; max-width: 420px; }
.chk-group { border: 1px solid var(--glass-line); border-radius: 14px; padding: .8rem 1rem; margin: var(--space-3) 0 0; display: grid; gap: .45rem; }
.chk-group legend { font-weight: 800; padding: 0 .3rem; }
.chk-group label { display: flex; gap: .6rem; align-items: flex-start; }
.chk-group input { margin-top: .3rem; }
.space-card.space-metho::before { background: #A78BFA; box-shadow: 0 0 22px #A78BFA; }
.space-metho .space-ic { background: #C4B5FD; }
.part-metho .part-switch a[aria-current="true"] { background: #C4B5FD; color: var(--zinc); box-shadow: 0 0 18px -2px rgba(167, 139, 250, .7); }
.part-metho .main-nav a[aria-current="page"] { background: rgba(196, 181, 253, .14); color: #D8CCFF; }
.portal-split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.reader-bar { background: var(--surface); backdrop-filter: none; box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }

/* 19. Contribution et statistiques ------------------------------------------ */
.topbar-links .topbar-don { color: #9F1D22; }
.topbar-links .topbar-don svg { width: 15px; height: 15px; color: var(--coral); }
@media (max-width: 640px) { .topbar-don span { display: none; } }
.don-dialog { width: min(560px, calc(100vw - 24px)); border: 1px solid var(--glass-line); border-radius: 22px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 100, 103, .3); }
.don-dialog::backdrop { background: rgba(20, 20, 23, .55); backdrop-filter: blur(4px); }
.don-wrap { padding: clamp(1.3rem, 1rem + 2vw, 2.2rem); display: grid; gap: var(--space-3); }
.don-wrap h2 { margin: 0; font-size: var(--fs-lg); }
.don-wrap p { margin: 0; color: var(--ink-soft); }
.don-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--coral); color: var(--zinc); box-shadow: 0 0 26px -4px var(--glow-r); }
.don-ic svg { width: 26px; height: 26px; }
.don-more { align-items: center; }
.don-uses { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.don-uses > div { margin: 0; padding: var(--space-5); border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); display: grid; gap: .4rem; }
.don-uses span { color: var(--ink-soft); font-size: var(--fs-sm); }
.adm-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--glass-line); background: var(--glass); margin-bottom: .7rem; }
.adm-row > div { flex: 1 1 300px; min-width: 0; }
.adm-row p { margin: .2rem 0 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.adm-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.adm-row.ok .adm-dot { background: var(--ok-soft); color: var(--ok); }
.adm-row.todo .adm-dot { background: var(--warn-soft); color: var(--warn); }
.adm-dot svg { width: 18px; height: 18px; }

/* 20. Avis et satisfaction ---------------------------------------------------- */
.stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.star { position: relative; display: inline-block; width: 1em; height: 1em; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(127, 127, 140, .35); }
.star::after { content: ""; position: absolute; inset: 0; width: var(--f); overflow: hidden; background: #FFC93C; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") left / 1em 1em no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.8 5.9 6.4.8-4.7 4.4 1.2 6.3L12 17.1l-5.7 3.1 1.2-6.3-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") left / 1em 1em no-repeat; }
.stars.sm { font-size: .9rem; } .stars.md { font-size: 1.3rem; } .stars.lg { font-size: 1.7rem; }
.avis-badge { display: inline-flex; gap: .35rem; align-items: center; font-size: var(--fs-sm); }
.avis-badge strong { font-weight: 800; }
.avis-badge small { color: var(--ink-soft); }
.page-hero .avis-badge small, .portal-hero .avis-badge small { color: var(--on-navy-soft); }
.avis-badge.is-new { font-weight: 700; color: var(--accent); }
.page-hero .avis-badge.is-new { color: var(--yellow); }
.avis-badge.is-new svg { width: 14px; height: 14px; }
.hero-meta [data-avis-badge] { display: inline-flex; }
.course-card .avis-badge { margin-top: -.2rem; }

.portal-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 980px) { .portal-grid { grid-template-columns: 1fr; } }
.avis-hero { margin: -.4rem 0 var(--space-4); }
.avis-hero-in { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; color: var(--on-navy-soft); }
.avis-hero-in p { margin: 0; }
.avis-hero-in strong { color: var(--on-navy); }
.linkbtn.on-dark { color: var(--cyan); }
.avis-panel { align-self: start; display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border-radius: 22px; background: rgba(255, 247, 237, .06); border: 1px solid rgba(83, 234, 253, .28); backdrop-filter: blur(12px); color: var(--on-navy); box-shadow: 0 0 40px -18px var(--glow-c); }
.avis-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: center; }
.avis-panel-t { margin: 0; display: inline-flex; gap: .45rem; align-items: center; font-family: var(--font-display); font-weight: 700; }
.avis-panel-t svg { width: 18px; height: 18px; color: var(--cyan); }
.avis-empty p { margin: 0 0 .8rem; color: var(--on-navy-soft); }
.avis-empty strong { color: var(--on-navy); }
.avis-quote { margin: 0; display: grid; gap: .5rem; min-height: 150px; }
.avis-quote blockquote { margin: 0; }
.avis-quote p { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.avis-quote figcaption { color: var(--on-navy-soft); font-size: var(--fs-sm); }
.avis-quote figcaption strong { color: var(--on-navy); }
.avis-quote figcaption small { display: block; font-size: var(--fs-xs); }
.avis-nav { display: flex; gap: .5rem; align-items: center; margin-top: .4rem; }
.avis-nav .icon-btn { width: 34px; height: 34px; }
.avis-pos { font-size: var(--fs-xs); color: var(--on-navy-soft); min-width: 3.5rem; text-align: center; }
.avis-panel .linkbtn { color: var(--cyan); justify-self: start; }

.avis-sec { border-top: 1px solid var(--line); margin-top: var(--space-6); }
.avis-sec, .avis-d-in { display: grid; gap: var(--space-3); }
.avis-h { margin: 0; font-size: var(--fs-lg); }
.avis-summary { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; padding: var(--space-4); border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-line); max-width: 640px; }
.avis-score { display: grid; justify-items: center; gap: .2rem; }
.avis-score strong { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.avis-score small { color: var(--ink-soft); }
.avis-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; flex: 1 1 220px; }
.avis-hist li { display: grid; grid-template-columns: 2.4rem 1fr 2rem; gap: .5rem; align-items: center; margin: 0; font-size: var(--fs-sm); }
.avis-hist li span:first-child { display: inline-flex; gap: .2rem; align-items: center; }
.avis-hist svg { width: 12px; height: 12px; fill: #FFC93C; }
.avis-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.avis-bar i { display: block; height: 100%; background: #FFC93C; border-radius: inherit; }
.avis-first { display: flex; gap: .4rem; align-items: center; color: var(--ink-soft); margin: 0; }
.avis-first svg { width: 16px; height: 16px; color: #E0A800; }
.avis-form { display: grid; gap: var(--space-3); max-width: 640px; padding: var(--space-5); border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); }
.rate, .reco { border: 0; padding: 0; margin: 0; }
.rate legend, .reco legend { font-weight: 800; margin-bottom: .3rem; padding: 0; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { cursor: pointer; width: 40px; height: 40px; padding: 3px; border-radius: 10px; }
.rate-stars label svg { width: 100%; height: 100%; fill: rgba(127, 127, 140, .3); transition: fill .12s, transform .12s; }
.rate-stars label:hover svg, .rate-stars label:hover ~ label svg, .rate-stars input:checked ~ label svg { fill: #FFC93C; }
.rate-stars label:hover svg { transform: scale(1.12); }
.rate-stars input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; }
.rate-label { display: inline-block; margin-left: .7rem; font-weight: 700; color: var(--ink-soft); vertical-align: middle; }
.reco { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.reco legend { width: 100%; }
.reco label { display: inline-flex; gap: .35rem; align-items: center; }
.avis-text { display: grid; gap: .3rem; font-weight: 700; }
.avis-text textarea { font: inherit; font-weight: 400; padding: .6rem .75rem; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); resize: vertical; }
.avis-pub { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); }
.avis-pub input { margin-top: .25rem; }
.avis-err { color: var(--bad); font-weight: 700; margin: 0; }
.avis-err:empty { display: none; }
.avis-done { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding: var(--space-4); border-radius: 16px; background: var(--ok-soft); max-width: 640px; }
.avis-done > div { flex: 1 1 220px; }
.avis-done p { margin: .1rem 0 0; color: var(--ink-soft); }
.avis-thanks { display: flex; gap: .4rem; align-items: center; color: var(--ok); font-weight: 700; margin: 0; }
.avis-thanks svg { width: 18px; height: 18px; }
.avis-dialog { width: min(680px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 1px solid var(--glass-line); border-radius: 22px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 201, 60, .35); }
.avis-dialog::backdrop { background: rgba(20, 20, 23, .55); backdrop-filter: blur(4px); }
.avis-d-in { padding: clamp(1.2rem, 1rem + 2vw, 2rem); position: relative; }
.avis-close { position: absolute; top: .8rem; right: .8rem; color: var(--ink); border-color: var(--line); }
.avis-dialog .avis-form { padding: 0; border: 0; background: none; backdrop-filter: none; }
.includes { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: .45rem; font-size: var(--fs-sm); }
.includes li { display: flex; gap: .55rem; align-items: center; margin: 0; }
.includes svg { width: 17px; height: 17px; color: var(--info); flex: none; }
.faq-list { display: grid; gap: .6rem; max-width: 900px; }
.faq-list details { border: 1px solid var(--glass-line); background: var(--glass); border-radius: 14px; padding: 0; }
.faq-list summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; font-family: var(--font-display); }
.faq-list details p { margin: 0; padding: 0 1.1rem 1rem; color: var(--ink-soft); }

/* 21. Recherche globale ------------------------------------------------------- */
.search-btn svg { width: 19px; height: 19px; }
.srch-dialog { width: min(720px, calc(100vw - 24px)); margin-top: 8vh; padding: 0; border: 1px solid var(--glass-line); border-radius: 20px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5), 0 0 0 1px rgba(83, 234, 253, .35); }
.srch-dialog::backdrop { background: rgba(20, 20, 23, .55); backdrop-filter: blur(4px); }
.srch-box { display: grid; max-height: 76vh; }
.srch-bar { display: flex; gap: .7rem; align-items: center; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line); }
.srch-bar svg { width: 20px; height: 20px; color: var(--info); flex: none; }
.srch-bar input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; border: 0; background: none; color: var(--ink); outline: none; }
kbd { font-family: var(--font-body); font-size: .72rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft); }
.srch-count { margin: 0; padding: .4rem 1.1rem 0; font-size: var(--fs-xs); color: var(--ink-soft); min-height: 1.2rem; }
.srch-list { list-style: none; margin: 0; padding: .4rem; overflow: auto; }
.srch-list li { margin: 0; }
.srch-list a { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .7rem; border-radius: 12px; color: var(--ink); text-decoration: none; }
.srch-list [aria-selected="true"] a, .srch-list a:hover { background: var(--info-soft); }
.srch-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.srch-ic svg { width: 16px; height: 16px; }
.srch-txt { display: grid; gap: .1rem; min-width: 0; }
.srch-txt small { color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 600; }
.srch-txt em { font-style: normal; color: var(--ink-soft); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srch-list mark { background: rgba(255, 240, 133, .7); color: inherit; border-radius: 3px; padding: 0 1px; }
.srch-hint, .srch-none { padding: .8rem; color: var(--ink-soft); font-size: var(--fs-sm); }
.srch-hint button { font: inherit; font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); border-radius: 999px; padding: .2rem .7rem; margin: .2rem .15rem; cursor: pointer; }
.srch-foot { margin: 0; padding: .6rem 1.1rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-soft); }
@media (max-width: 560px) { .srch-foot, .srch-bar kbd { display: none; } }
.att-actions .btn svg { width: 17px; height: 17px; }
.pub-form { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); } .pub-form .full { grid-column: 1 / -1; }

/* ==========================================================================
   22. Langues (FR / EN / عربي), bouton « Reprendre », lecture de droite à gauche
   ========================================================================== */
.topbar-left { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.lang-switch { display: inline-flex; flex: none; padding: 2px; gap: 2px; border-radius: 8px; background: rgba(39, 39, 42, .1); }
.lang-switch button { font: inherit; font-weight: 800; font-size: .72rem; letter-spacing: .03em; min-width: 30px; height: 26px; padding: 0 .45rem; border: 0; border-radius: 6px; background: transparent; color: var(--zinc); cursor: pointer; }
.lang-switch button[lang="ar"] { font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif; font-size: .85rem; }
.lang-switch button:hover { background: rgba(39, 39, 42, .1); }
.lang-switch button[aria-pressed="true"] { background: var(--zinc); color: var(--cream); }
.lang-switch button:focus-visible { outline: 2px solid var(--zinc); outline-offset: 1px; }
.resume-slot { flex: none; min-width: 0; }
.topbar-resume { display: inline-flex; align-items: center; gap: .35rem; color: var(--zinc); text-decoration: none; font-weight: 700; padding: .3rem .6rem; border-radius: 6px; background: rgba(39, 39, 42, .1); max-width: 36ch; white-space: nowrap; }
.topbar-resume:hover { background: rgba(39, 39, 42, .18); }
.topbar-resume:focus-visible { outline: 2px solid var(--zinc); outline-offset: 1px; }
.topbar-resume svg { width: 14px; height: 14px; flex: none; }
.topbar-resume .rs-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-resume .rs-l::after { content: " :"; }
@media (max-width: 1100px) { .topbar-title { display: none; } }
@media (max-width: 640px) {
  .topbar .container { flex-wrap: wrap; justify-content: space-between; row-gap: 0; padding-block: 4px; }
  .topbar-left { flex: none; }
  .topbar-links { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
  .topbar-links a, .topbar-link { padding-inline: .4rem; }
  .topbar-resume { max-width: 52vw; }
}
.lang-note { background: var(--zinc); color: var(--cream); font-size: var(--fs-xs); }
.lang-note.warn { background: #7A2E10; }
.lang-note .container { display: flex; align-items: center; gap: var(--space-3); padding-block: .45rem; flex-wrap: wrap; }
.lang-note p { margin: 0; flex: 1 1 260px; }
.lang-note .linkbtn { color: var(--yellow); font-weight: 700; }
.lang-note .icon-btn { width: 28px; height: 28px; color: var(--cream); border-color: rgba(255, 247, 237, .3); background: transparent; font-size: 1.1rem; line-height: 1; }
/* Google Traduction : on masque sa barre et ses infobulles, la barre de langues du site suffit */
body > .skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, #gt-el { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }
/* Arabe : police lisible et sens de lecture */
html[lang="ar"] body, html[lang="ar"] button, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea { font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .brand-text span { font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; letter-spacing: 0; }
html[lang="ar"] body { line-height: 1.75; }
[dir="rtl"] .deck-track { direction: ltr; }
[dir="rtl"] .deck-track > * { direction: rtl; }
[dir="rtl"] .sim, [dir="rtl"] pre, [dir="rtl"] code, [dir="rtl"] .math, [dir="rtl"] .katex, [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"] { direction: ltr; }
[dir="rtl"] .breadcrumb li + li::before { transform: scaleX(-1); }
[dir="rtl"] .topbar-links .topbar-cta { margin-left: 0; margin-right: .25rem; }
@media (max-width: 430px) { .topbar-links .tb-about { display: none; } }

/* ==========================================================================
   23. Barres du haut centrées et en-tête clair (vert #DCFCE7, indigo #E0E7FF, rose #FFE4E6)
   ========================================================================== */
.topbar .container { justify-content: center; column-gap: var(--space-6); }
.lang-switch button[aria-pressed="true"] { background: #DCFCE7; color: var(--zinc); box-shadow: inset 0 0 0 1px rgba(39, 39, 42, .25); }
.topbar-links .topbar-cta { background: #E0E7FF; color: var(--zinc); box-shadow: inset 0 0 0 1px rgba(39, 39, 42, .2); }
.topbar-links .topbar-cta:hover { background: #D1DAFF; }
.topbar-link.strong { background: #FFE4E6; color: var(--zinc); box-shadow: inset 0 0 0 1px rgba(39, 39, 42, .2); }
.topbar-link.strong:hover { background: #FFD5D9; }
.site-header { background: linear-gradient(90deg, #DCFCE7 0%, #E0E7FF 50%, #FFE4E6 100%); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid rgba(39, 39, 42, .12); color: var(--zinc); }
.site-header .brand { color: var(--zinc); }
.site-header .brand-text span { color: #52525B; }
.site-header .part-switch { background: rgba(255, 255, 255, .55); border-color: rgba(39, 39, 42, .14); }
.site-header .part-switch a { color: #3F3F46; }
.site-header .part-switch a:hover { color: var(--zinc); background: rgba(255, 255, 255, .7); }
.site-header .part-switch a[aria-current="true"] { box-shadow: 0 1px 3px rgba(39, 39, 42, .2); }
.site-header .main-nav a { color: #3F3F46; }
.site-header .main-nav a:hover { color: var(--zinc); background: rgba(255, 255, 255, .6); }
.site-header .main-nav a[aria-current="page"], .part-cours .main-nav a[aria-current="page"], .part-quali .main-nav a[aria-current="page"], .part-metho .main-nav a[aria-current="page"] { background: #FFFFFF; color: var(--zinc); box-shadow: 0 1px 3px rgba(39, 39, 42, .18); }
.site-header .icon-btn { color: var(--zinc); border-color: rgba(39, 39, 42, .2); background: rgba(255, 255, 255, .45); }
.site-header .icon-btn:hover { background: rgba(255, 255, 255, .8); }
.header-progress { background: rgba(39, 39, 42, .08); }
@media (min-width: 861px) {
  .site-header > .container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
  .site-header .brand { justify-self: start; margin-right: 0; }
  .site-header .brand-text span { display: none; }
  .site-header .part-switch { justify-self: center; grid-column: 2; }
  .site-header .header-actions { justify-self: end; grid-column: 3; }
  .site-header .main-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; border-top-color: rgba(39, 39, 42, .1); }
  .site-header .main-nav ul { justify-content: center; }
}
@media (max-width: 860px) {
  .main-nav { background: #F5F7FF; border-top-color: rgba(39, 39, 42, .1); }
  .site-header .part-switch { justify-content: center; }
}
/* Logo sur fond clair : contour et courbe foncés */
.site-header .brand-mark rect { stroke: #0E7490; }
.site-header .brand-mark path:first-of-type { stroke: var(--zinc); }
.site-header .brand-mark path:last-of-type { stroke: #CA8A04; }
/* Encadré « Pour approfondir » en fin de chapitre */
.further { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px dashed var(--line, rgba(39, 39, 42, .2)); }
.further h3 { margin: 0 0 .4rem; font-size: var(--fs-sm); display: flex; align-items: center; gap: .4rem; }
.further ul { margin: 0; font-size: var(--fs-sm); }
/* Logo sur deux lignes : « AMSO FEG » / « Kelaâ des Sraghna » */
.brand-text .brand-sub { font-style: normal; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #52525B; white-space: nowrap; line-height: 1.1; }
.site-header .brand-text strong { font-size: 1.05rem; white-space: nowrap; }
.footer-grid .brand-sub { display: none; }