/* ============================================================
   L'École du Patrimoine — design system « éditorial patrimonial »
   Papier ivoire, encre profonde, vert cyprès, filet laiton.
   Fraunces (display) · Source Serif 4 (texte) · Spline Sans Mono (données)
   ============================================================ */

:root {
  --paper: #f6f2e8;
  --paper-2: #efe9da;
  --paper-3: #e7dfcc;
  --ink: #1c211c;
  --ink-soft: #4a524a;
  /* --ink-faint NE PORTE PLUS DE TEXTE depuis le 20/07/2026, et c'est désormais une règle,
     plus un constat. Il plafonne à 3,2–3,7:1 sur les papiers clairs — sous le seuil AA de
     4,5:1 — ce que trois commentaires de ce fichier notaient déjà en le contournant au cas
     par cas. Les 17 textes qui l'employaient encore (légendes, méta, comptes, labels
     d'ouverture) sont passés à --ink-soft. Il ne reste ici que pour le NON-texte : le motif
     hachuré de la pyramide. La hiérarchie corps/méta repose maintenant sur la taille, pas
     sur la pâleur — ce qui est de toute façon la bonne façon de la coder.
     Même bascule côté doré : les 8 petits textes en --brass sont passés à --brass-ink
     (défini dans fiches.css, concaténé au build), qui porte 5,2–5,9:1 sur les fonds clairs.
     --brass reste pour les bordures, les fonds, et les glyphes larges ou décoratifs. */
  --ink-faint: #7c837a;
  --cypres: #1e4d3b;
  --cypres-soft: #2f6a52;
  --cypres-wash: #dde7de;
  --brass: #a5771f;
  --brass-soft: #c29a45;
  --alert: #8a4b22;
  --verify-bg: #f2e2c0;
  --verify-ink: #7a5410;
  --line: #cfc6ae;
  --line-strong: #2a302a;
  --card: #fbf8f0;
  --shadow: 0 1px 2px rgba(28, 33, 28, .06), 0 10px 28px -14px rgba(28, 33, 28, .25);
  --shadow-lift: 0 2px 4px rgba(28, 33, 28, .08), 0 18px 44px -16px rgba(28, 33, 28, .32);
  --radius: 4px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace;
  --w-content: 76rem;
  --w-read: 46rem;
}

:root[data-theme="dark"] {
  --paper: #141a16;
  --paper-2: #19211c;
  --paper-3: #1f2922;
  --ink: #ece7d9;
  --ink-soft: #b8b4a4;
  --ink-faint: #8a887b;
  --cypres: #8fc3a8;
  --cypres-soft: #6ea88c;
  --cypres-wash: #1d2f26;
  --brass: #d3a94f;
  --brass-soft: #b28a3a;
  --alert: #d08a5a;
  --verify-bg: #3a2f16;
  --verify-ink: #e5c273;
  --line: #33413a;
  --line-strong: #d9d4c4;
  --card: #182019;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px -14px rgba(0, 0, 0, .6);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 20px 48px -16px rgba(0, 0, 0, .7);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* grain de papier */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header.site-head, footer.site-foot { position: relative; z-index: 1; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 560; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--cypres); text-decoration-color: color-mix(in srgb, var(--cypres) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--cypres-soft); }
code { font-family: var(--font-mono); font-size: .86em; background: var(--paper-2); padding: .1em .35em; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
::selection { background: color-mix(in srgb, var(--brass) 30%, transparent); }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 99; }
.skip:focus { left: .5rem; top: .5rem; }

/* ---------- bandeau prototype : RETIRÉ le 20/07/2026 ----------
   `.proto-band` était une bande pleine largeur, encre sur papier, en capitales, posée AVANT
   l'en-tête sur chacune des quarante pages. Son texte a rejoint le pied de page et
   « mentions.html » (cf. `layout()` dans templates.ts) ; ses règles sont supprimées plutôt
   que laissées en dormance — une classe morte finit toujours par être réutilisée de travers.
   La règle `@media print` qui la masquait est partie avec elle. */

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; gap: 1.5rem;
  max-width: var(--w-content); margin: 0 auto; padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-mark { font-size: 1.5rem; color: var(--cypres); transform: translateY(-1px); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text strong { font-family: var(--font-display); font-size: 1.12rem; font-weight: 620; }
.brand-text em { font-style: italic; font-size: .8rem; color: var(--ink-soft); }
.site-nav { margin-left: auto; display: flex; gap: 1.4rem; }
.site-nav a {
  font-family: var(--font-mono); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--cypres); border-bottom-color: var(--brass); }
.theme-toggle {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; width: 3.4rem; height: 1.9rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; padding: 0 .5rem; font-size: .8rem;
}
.theme-toggle:hover { border-color: var(--brass); }
:root:not([data-theme="dark"]) .tt-moon { opacity: .35; }
:root[data-theme="dark"] .tt-sun { opacity: .35; }

/* ---------- layout sections ---------- */
main { max-width: var(--w-content); margin: 0 auto; padding: 0 1.5rem 4rem; }
.section { padding: 3.5rem 0 1rem; }
.section-alt {
  background: var(--paper-2); border-block: 1px solid var(--line);
  margin: 3rem -1.5rem 0; padding: 3rem 1.5rem 2.5rem;
}
.section-head { max-width: 44rem; margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.section-head p { color: var(--ink-soft); }
.section-more { margin-top: 1.5rem; }

/* ---------- hero ----------
   RESSERRÉ le 20/07/2026 pour que le chemin de départ tienne dans le premier écran. Le titre
   perdait 1,2 rem de hauteur en pure ostentation (4,6 rem de plafond, soit ~74 px, sur deux
   lignes) et le bloc démarrait 4,5 rem plus bas que nécessaire. Mesuré à 1280 × 800 : l'ancien
   hero + trois étapes dépassait la ligne de flottaison ; celui-ci s'arrête au-dessus. */
.hero { padding: 2.6rem 0 2rem; }
.hero-kicker {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: .9rem;
}
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 480; max-width: 20ch; }
.hero-em { font-style: italic; font-weight: 620; color: var(--cypres); }
.hero-sub { max-width: 44rem; font-size: 1.06rem; color: var(--ink-soft); margin-top: .9rem; }
/* `.hero-cta` (le couple « Découvrir le parcours » / « Voir la leçon pilote ») est supprimé
   avec son markup : le chemin de départ EST l'appel à l'action, et deux boutons génériques
   au-dessus faisaient trois choses à trancher en cinq secondes au lieu d'une. */
.btn {
  display: inline-block; text-decoration: none; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .84rem; letter-spacing: .03em;
  padding: .78rem 1.35rem; border: 1px solid var(--line-strong); transition: transform .18s ease, box-shadow .18s ease, background .18s;
}
.btn-primary { background: var(--cypres); border-color: var(--cypres); color: #f6f2e8; }
.btn-primary:hover { background: var(--cypres-soft); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-ghost { color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--brass); color: var(--cypres); transform: translateY(-1px); }
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin: 0 0 2rem;
}
.hero-stats div { background: var(--card); padding: 1.1rem 1.2rem; }
.hero-stats dt { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--cypres); }
.hero-stats dd { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-soft); }

/* ---------- le chemin de départ ----------
   L'OBJET LE PLUS IMPORTANT DE L'ACCUEIL, ET LE SEUL QUI DOIVE ÊTRE VU SANS DÉFILER.
   D'où trois contraintes qui expliquent chaque valeur ci-dessous : il tient sur UNE rangée au
   delà de 860 px (trois étapes lues d'un coup d'œil, pas trois écrans de défilement) ; le
   hero au-dessus a été raccourci (padding et taille du titre) pour lui laisser la place ; et
   il est encadré, sur fond de carte, pour se détacher du texte de promesse qui le précède.
   L'ancien couple de boutons `.hero-cta` est supprimé : deux appels à l'action génériques
   au-dessus d'un chemin nommé, c'est trois choses à trancher au lieu d'une. */
.depart {
  margin: 1.6rem 0 0; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow); padding: 1.3rem 1.4rem 1.1rem;
  scroll-margin-top: 1.5rem; /* « themes.html » renvoie ici par ancre */
}
.depart-h { font-size: 1.35rem; margin: 0 0 .25rem; }
.depart-h::after { content: " ↓"; color: var(--brass); font-size: .8em; }
.depart-sub { font-size: .92rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: 52rem; }
.depart-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.depart-list li { background: var(--paper); }
.depart-list a {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: .95rem 1.05rem 1rem; text-decoration: none; color: var(--ink);
  transition: background .18s ease;
}
.depart-list a:hover { background: var(--cypres-wash); }
.depart-n {
  font-family: var(--font-display); font-style: italic; font-weight: 640;
  font-size: 1.5rem; line-height: 1; color: var(--brass-ink);
}
.depart-t { font-family: var(--font-display); font-size: 1.04rem; font-weight: 580; line-height: 1.2; }
.depart-list a:hover .depart-t { color: var(--cypres); }
.depart-d { font-size: .86rem; line-height: 1.45; color: var(--ink-soft); }
.depart-more { font-size: .88rem; color: var(--ink-soft); margin: .9rem 0 0; }

@media (max-width: 860px) {
  .depart-list { grid-template-columns: 1fr; }
  /* En colonne, le numéro reprend sa place naturelle : devant le titre, sur la même ligne. */
  .depart-list a { display: grid; grid-template-columns: 1.9rem 1fr; column-gap: .4rem; }
  .depart-n { grid-row: span 2; font-size: 1.35rem; padding-top: .1rem; }
}

/* ---------- pyramide ---------- */
.pyramid { margin: 0; }
.pyramid svg { width: 100%; height: auto; display: block; }
.pyramid figcaption { font-size: .88rem; color: var(--ink-soft); max-width: 46rem; margin-top: .8rem; }
.py-link { cursor: pointer; text-decoration: none; }
.py-stage {
  fill: var(--card); stroke: var(--line-strong); stroke-width: 1.4;
  transition: transform .22s cubic-bezier(.2,.7,.3,1.2), fill .22s;
}
.py-stage.s0 { fill: color-mix(in srgb, var(--cypres) 7%, var(--card)); }
.py-stage.s1 { fill: color-mix(in srgb, var(--cypres) 13%, var(--card)); }
.py-stage.s2, .py-stage.s3 { fill: color-mix(in srgb, var(--cypres) 20%, var(--card)); }
.py-stage.s4 { fill: color-mix(in srgb, var(--brass) 22%, var(--card)); }
.py-link:hover .py-stage { transform: translateY(-5px); fill: color-mix(in srgb, var(--brass) 30%, var(--card)); }
.py-tip { stroke: var(--line-strong); stroke-width: 1.2; opacity: .8; }
.py-hatch { stroke: var(--ink-faint); stroke-width: 1; }
.py-slab { fill: var(--paper-3); stroke: var(--line); stroke-width: 1; transition: fill .2s; }
.py-base:hover .py-slab { fill: color-mix(in srgb, var(--brass) 18%, var(--paper-3)); }
.py-base-t { font-family: var(--font-mono); font-size: 13.5px; fill: var(--ink-soft); }
/* LES DEUX RÔLES ONT ÉCHANGÉ LEUR PLACE le 20/07/2026, et les noms de classe disent enfin ce
   qu'ils portent. `.py-code` tenait le référentiel de production (« BLOC 0 · FONDATIONS ») en
   tête de chaque étage, en mono et en capitales : c'était le texte le plus visible de la page
   d'accueil. Le nom du thème passe devant, en display, à l'encre pleine ; ce que le thème
   recouvre le suit, en second. `.py-code` est donc renommée `.py-sub` — la garder aurait été
   garder un nom qui ment. */
.py-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; fill: var(--ink); letter-spacing: -.005em; }
.py-sub { font-family: var(--font-body); font-size: 13px; fill: var(--ink-soft); font-style: italic; }
.py-pillar { fill: var(--paper-2); stroke: var(--line-strong); stroke-width: 1.2; transition: fill .2s; }
.py-link:hover .py-pillar { fill: color-mix(in srgb, var(--cypres) 16%, var(--paper-2)); }
/* Interlettrage aligné sur celui du ruban (.1em) : depuis le passage des piliers en casse
   normale (cf. templates.ts), les deux étiquettes mono forment une même famille visuelle.
   Le .14em, pensé pour des capitales, ouvrait trop le texte une fois en casse normale. */
.py-pillar-t { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; fill: var(--ink-soft); }
.py-ribbon { stroke: var(--brass); stroke-width: 2; stroke-dasharray: 6 5; }
.py-ribbon-head { fill: var(--brass); }
/* --brass-ink comme les autres petits textes dorés : en `fill` et non en `color`, ce libellé
   avait échappé au balayage par sélecteur — c'est le rendu mesuré qui l'a rattrapé, à 3,57:1
   sur le papier clair (20/07/2026). La pointe de flèche du ruban, elle, reste en --brass :
   c'est un ornement, pas du texte. */
.py-ribbon-t { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; fill: var(--brass-ink); }
.py-link:hover .py-ribbon-t { text-decoration: underline; }

/* ---------- démarche (steps) ---------- */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.2rem;
  counter-reset: step;
}
.steps li { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--cypres); padding: 1.2rem 1.2rem 1rem; box-shadow: var(--shadow); }
.step-n { font-family: var(--font-display); font-size: 2rem; color: var(--brass); font-weight: 600; font-style: italic; display: block; }
.steps h3 { font-size: 1.12rem; margin: .3rem 0 .4rem; }
.steps p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

/* ---------- blocs grid ---------- */
.bloc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: 1.1rem; }
.bloc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.3rem 1.1rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: .45rem; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bloc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--brass); }
/* `.bloc-code` (la pastille « BLOC 2 » en tête de chaque tuile de thème, et sa variante
   `.big` en tête des pages de thème) est SUPPRIMÉE le 20/07/2026 : le code de production
   n'est plus un texte de lecture. Il reste au curriculum, dans les URLs, dans les ancres,
   et en fin de ligne sur « parcours.html », qui est la vue de référence. */
.bloc-card h3 { font-size: 1.3rem; margin: 0; }
.bloc-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; flex: 1; }
.bloc-count { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); }

/* ---------- sélection par thème ---------- */
.theme-card { gap: .5rem; }
.theme-counts {
  display: flex; flex-wrap: wrap; gap: .1rem .85rem;
  font-family: var(--font-mono); font-size: .74rem; line-height: 1.5;
}
.tc-fiches { color: var(--brass-ink); font-weight: 600; }
/* --ink-faint plafonne à 3,67:1 sur la carte en thème clair : trop pâle pour du
   11,8 px. La hiérarchie tient par la couleur laiton et la graisse du compteur
   voisin, pas par l'effacement de celui-ci. */
.tc-mods { color: var(--ink-soft); }
/* Un thème sans fiche reste pleinement lisible : le pointillé dit l'attente, il ne
   délave pas le contenu. Griser un état vide reviendrait à le rendre illisible pour
   signaler qu'il est incomplet — deux torts pour un. */
.theme-card.est-vide { border-style: dashed; }
.tc-vide { color: var(--ink-soft); font-weight: 400; font-style: italic; }

/* ---------- preuve ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.proof { border-left: 3px solid var(--brass); padding: .2rem 0 .2rem 1.1rem; }
.proof h3 { font-size: 1.15rem; }
.proof p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* ---------- pages ---------- */
.page-head { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); max-width: 24ch; }
.page-head > p { max-width: 46rem; color: var(--ink-soft); }
/* `--ink-soft` et non `--ink-faint` : ce dernier plafonne à 3,5:1 sur le papier clair, et le
   fil d'Ariane est du 11,8 px en capitales — la casse rend déjà la lecture plus coûteuse, un
   contraste sous le seuil l'achevait. Constaté et corrigé le 20/07/2026, en même temps que la
   réécriture des fils (qui portaient « BLOC 2 · M2.4 » et portent maintenant les noms). */
.crumbs { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.4rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--cypres); }

/* parcours */
.parcours-bloc { padding: 1.8rem 0; border-bottom: 1px solid var(--line); }
.parcours-bloc header { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.parcours-bloc h2 { font-size: 1.5rem; margin: 0; }
.parcours-bloc h2 a { color: var(--ink); text-decoration: none; }
.parcours-bloc h2 a:hover { color: var(--cypres); }
.parcours-intent { color: var(--ink-soft); font-size: .95rem; max-width: 52rem; }
.parcours-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.parcours-mod a {
  display: flex; align-items: center; gap: .9rem; padding: .55rem .6rem; text-decoration: none; color: var(--ink);
  border-radius: var(--radius);
}
.parcours-mod a:hover { background: var(--paper-2); }
.parcours-title { flex: 1; }
/* Le repère interne est passé en FIN de ligne le 20/07/2026 (il ouvrait chacune des quarante
   lignes, en cyprès gras). Il reste parfaitement lisible — c'est ce qui permet de rapprocher
   une page de son dossier de sources — mais il a cessé d'être le premier caractère que l'œil
   rencontre. Plus de `min-width` : il ne cale plus une colonne, il termine une ligne. */
   rencontre. Plus de `min-width` : il ne cale plus une colonne, il termine une ligne.
   Pas `--ink-faint` malgré l'envie de l'effacer : il plafonne à 3,5:1 sur le papier clair,
   sous le seuil, pour du 11,8 px. La discrétion vient de la place et de la casse, jamais
   d'un contraste insuffisant. */
.mod-code { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); letter-spacing: .04em; }

/* badges statut */
.badge {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px; white-space: nowrap; border: 1px solid;
}
.st-pilote { color: #fff; background: var(--cypres); border-color: var(--cypres); }
:root[data-theme="dark"] .st-pilote { color: #10251b; }
.st-matiere { color: var(--cypres); background: var(--cypres-wash); border-color: color-mix(in srgb, var(--cypres) 35%, transparent); }
/* Le seul badge encore affiché hors de « parcours.html », donc le seul qui doive tenir seul :
   `--ink-faint` sur fond transparent tombait à 3,5:1 pour du 10,6 px. C'est celui qui annonce
   qu'il n'y a rien derrière un lien — il ne peut pas être le moins lisible des trois. */
.st-programme { color: var(--ink-soft); background: transparent; border-color: var(--line); }

/* cartes modules */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
.mod-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.2rem 1rem; text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.mod-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--brass); }
.mod-top { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.mod-card h3 { font-size: 1.16rem; margin: 0; }
.mod-card p { font-size: .89rem; color: var(--ink-soft); margin: 0; flex: 1; }
.mod-go { font-family: var(--font-mono); font-size: .74rem; color: var(--brass-ink); }
.mod-card:hover .arrow { padding-left: .3rem; transition: padding .2s; }
.fiches-h { font-size: 1.2rem; color: var(--ink-soft); margin: 2rem 0 1rem; }
/* Une leçon qui n'est pas écrite : le pointillé dit l'attente sans délaver le texte. Même
   parti pris que `.theme-card.est-vide` — griser un état vide, ce serait le rendre illisible
   pour signaler qu'il est incomplet, deux torts pour un. */
.mod-card.est-avenir { border-style: dashed; box-shadow: none; }
.mod-card.est-avenir:hover { box-shadow: var(--shadow); }

/* ---------- page module ---------- */
.module { max-width: var(--w-read); margin: 0 auto; }
.module-head { position: relative; }
/* `.folio` — le gros « M2.4 » italique laiton en tête de chaque leçon — est SUPPRIMÉ le
   20/07/2026. C'était un bel objet typographique au service d'un identifiant d'auteur : le
   plus gros caractère de la page après le titre, pour la seule information dont le lecteur
   n'a aucun usage. Le badge de statut reste, seul, dans `.module-id`. */
.module-id { display: flex; align-items: center; gap: 1rem; margin-bottom: .6rem; }
.module-obj { font-size: 1.08rem; }
.module-note {
  font-size: .92rem; color: var(--alert); border-left: 3px solid var(--alert);
  padding-left: .9rem; background: color-mix(in srgb, var(--alert) 6%, transparent);
}

/* ---------- la note de provenance (pied de leçon) ----------
   REMPLACE `.status-strip`, qui ouvrait chaque page de leçon sur son propre statut de
   fabrication. Repliée, en pied de page, dans le ton du reste du pied : elle attend celui qui
   se demande d'où sort ce qu'il vient de lire, au lieu de se présenter à celui qui n'a encore
   rien lu. `<details>` natif — clavier natif, et ouvert à l'impression (cf. `@media print`). */
.provenance {
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--paper-2); margin-bottom: 1.2rem;
}
.provenance > summary {
  cursor: pointer; padding: .6rem .9rem; list-style: none; position: relative; padding-right: 2.2rem;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-soft);
}
.provenance > summary::-webkit-details-marker { display: none; }
.provenance > summary::after {
  content: "+"; position: absolute; right: .9rem; top: .45rem;
  font-family: var(--font-mono); font-size: 1rem; color: var(--brass-ink); transition: transform .2s;
}
.provenance[open] > summary::after { transform: rotate(45deg); }
.provenance[open] > summary { color: var(--ink); }
.prov-corps { padding: 0 .9rem .3rem; }
.prov-corps p { font-size: .86rem; color: var(--ink-soft); margin: 0 0 .7rem; }

/* ---------- une leçon qui n'est pas encore écrite ---------- */
.pas-ecrit {
  font-size: 1.02rem; color: var(--ink); background: var(--paper-2);
  border-left: 4px solid var(--brass); border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.2rem; margin: 0 0 2rem;
}
.sec-voisines .sec-intro { color: var(--ink-soft); font-size: .95rem; }
.sec-more { font-family: var(--font-mono); font-size: .8rem; margin: .2rem 0 0; }
.method-note { max-width: 50rem; color: var(--ink-soft); }
.corpus { background: var(--cypres-wash); border: 1px solid color-mix(in srgb, var(--cypres) 25%, transparent); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 2rem; }
.corpus-h { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cypres); margin: 0 0 .5rem; }
.corpus-list { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.corpus-list li { padding: .28rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--cypres) 20%, transparent); }
.corpus-list li:last-child { border-bottom: 0; }
.chip-ep { font-family: var(--font-mono); font-size: .76rem; color: var(--cypres); font-weight: 600; margin-right: .4rem; }
.chip-t { font-style: italic; color: var(--ink-soft); }

.mod-sec { margin: 2.6rem 0; }
.mod-sec h2 { font-size: 1.45rem; display: flex; align-items: center; gap: .6rem; border-bottom: 2px solid var(--line); padding-bottom: .5rem; }
.sec-ic {
  font-family: var(--font-mono); font-style: normal; font-size: .95rem; color: var(--brass);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent); border-radius: 50%;
  width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.mod-sec ol { padding-left: 1.3rem; }
.mod-sec ol li { margin-bottom: .55rem; }
.mod-sec ul { padding-left: 1.2rem; }
.mod-sec ul li { margin-bottom: .45rem; }
.sec-idees ol li::marker, .sec-pieges ol li::marker { color: var(--alert); font-weight: 600; }
.sec-essentiel ol { counter-reset: ess; list-style: none; padding-left: 0; }
.sec-essentiel ol li { counter-increment: ess; position: relative; padding-left: 2.4rem; margin-bottom: .7rem; }
.sec-essentiel ol li::before {
  content: counter(ess, decimal-leading-zero);
  position: absolute; left: 0; top: .05rem;
  font-family: var(--font-mono); font-size: .78rem; color: var(--brass-ink); font-weight: 600;
}
.sec-sources ul { list-style: none; padding: 0; }
.sec-sources li { font-size: .88rem; padding: .3rem 0; border-bottom: 1px dotted var(--line); }
.sec-programme p { color: var(--ink-soft); }

/* tableaux */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
thead th {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  text-align: left; color: var(--ink-soft); background: var(--paper-2);
  padding: .6rem .8rem; border-bottom: 2px solid var(--line-strong);
}
tbody td { padding: .55rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
tbody td:nth-child(2) { font-family: var(--font-mono); font-size: .82rem; color: var(--cypres); font-weight: 500; white-space: nowrap; }

/* badge à vérifier */
mark.verify {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  background: var(--verify-bg); color: var(--verify-ink); border: 1px dashed color-mix(in srgb, var(--verify-ink) 50%, transparent);
  padding: .12rem .4rem; border-radius: 3px; cursor: help; white-space: nowrap;
}

/* FAQ accordéons */
details.faq { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; background: var(--card); }
details.faq summary {
  cursor: pointer; padding: .75rem 1rem; font-weight: 600; list-style: none; position: relative; padding-right: 2.4rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; position: absolute; right: 1rem; top: .6rem;
  font-family: var(--font-mono); font-size: 1.1rem; color: var(--brass); transition: transform .2s;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq > p { padding: 0 1rem .85rem; margin: 0; color: var(--ink-soft); }

blockquote { border-left: 3px solid var(--brass); margin: 1.2rem 0; padding: .2rem 0 .2rem 1.1rem; color: var(--ink-soft); font-style: italic; }

.module-foot { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.2rem; font-size: .84rem; color: var(--ink-soft); }
.module-nav a { font-family: var(--font-mono); font-size: .8rem; text-decoration: none; }

/* ---------- quiz : ouverture en clair, rappels repliés ---------- */
/* Le bloc replié réutilise `details.faq` ci-dessus ; `.quiz-item` ne fait que le distinguer
   — la FAQ répond à une question spontanée, le quiz teste un rappel après lecture. */
.quiz-item summary { padding-left: 1rem; }
.quiz-item .quiz-n {
  display: inline-block; min-width: 1.35rem; margin-right: .35rem;
  font-family: var(--font-mono); font-size: .82rem; color: var(--brass-ink); font-weight: 700;
}
.quiz-item > p { border-left: 3px solid var(--cypres); margin-left: 1rem; }
.sec-rappel .sec-intro { color: var(--ink-soft); font-size: .95rem; }

/* ---------- la question insérée dans le fil ----------
   Le troisième mécanisme de question du site, et il porte sa propre classe pour la même
   raison que `.quiz-item` : même composant visuel, travail différent. Celle-ci interrompt la
   lecture juste après la section qui donne de quoi répondre — la question d'ouverture ne
   porte que sur ce qu'elle vise (g = 0,54) et ne fait rien sur le reste du module (g = 0,04),
   St Hilaire, Chan & Ahn 2024. Le cyprès en bordure la distingue du laiton des rappels de
   fin : on ne la confond pas avec « le module est terminé, testez-vous ». */
.question-inseree { border-left: 3px solid var(--cypres); margin: 1.6rem 0; }
.question-inseree > summary { font-weight: 500; }
.qi-k {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cypres); display: block; margin-bottom: .15rem; font-weight: 600;
}
.question-inseree > p { border-top: 1px dotted var(--line); padding-top: .7rem; }

/* L'ouverture s'affiche EN CLAIR : son rôle est d'orienter l'attention avant la lecture,
   la replier la viderait de son sens (St Hilaire et al. 2024). */
.quiz-ouverture {
  margin: 1.2rem 0 0; padding: .9rem 1.2rem;
  background: var(--paper-2); border: 1px solid var(--line);
  border-left: 4px solid var(--brass); border-radius: var(--radius);
}
.qo-h {
  margin: 0 0 .35rem; font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.qo-q { margin: 0; font-weight: 600; font-size: 1.02rem; }
.qo-a { margin: .45rem 0 0; font-size: .86rem; color: var(--ink-soft); font-style: italic; }

/* ---------- pilote : éclairages & quiz ---------- */
.sec-lesson h1 { font-size: 1.9rem; }
.sec-lesson h2 { font-size: 1.35rem; border-bottom: 0; display: block; margin-top: 1.8rem; }
.sec-lesson blockquote { font-size: 1.05rem; }
.sec-intro { color: var(--ink-soft); font-size: .95rem; }
.eclairage {
  margin: 0 0 1.4rem; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--cypres); border-radius: var(--radius); padding: 1.1rem 1.3rem; box-shadow: var(--shadow);
}
.ecl-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: .6rem; }
.ecl-n { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; color: var(--brass); font-weight: 620; }
.ecl-notion { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cypres); }
.eclairage blockquote { margin: 0 0 .8rem; border-left: 0; padding: 0; font-size: .97rem; color: var(--ink); }
.eclairage blockquote::before { content: "« "; color: var(--brass); font-weight: 700; }
.eclairage blockquote::after { content: " »"; color: var(--brass); font-weight: 700; }

/* ---------- sommaire « Dans cette leçon » ---------- */
.toc { max-width: var(--w-read, 46rem); margin: 1.2rem auto; padding: 1rem 1.3rem; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius, 4px); }
.toc-h { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.toc li { color: var(--ink-soft); }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover { color: var(--cypres); }
.toc a.is-active { color: var(--cypres); font-weight: 600; }

/* ---------- schémas conceptuels (insérés dans les sections de la leçon) ---------- */
.diagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; }
.diagram { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, 4px); padding: 1.1rem 1.2rem 1.2rem; box-shadow: var(--shadow); }
.diagram-title { font-family: var(--font-display); font-weight: 560; color: var(--cypres); font-size: 1.02rem; margin: 0 0 .7rem; }
.diagram-svg { display: block; width: 100%; height: auto; margin: 0 0 .6rem; }
.diagram-cap { margin: 0; font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }
.diagram-inline { margin: 1.7rem 0; }
.sec-lesson .diagram-title { margin: 0 0 .7rem; }
.sec-lesson .diagram-cap { margin: 0; }

/* ---------- tout le corpus sur ce sujet ---------- */
.corpus-list { list-style: none; margin: 0; padding: 0; }
.corpus-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; padding: .55rem .1rem; border-bottom: 1px solid var(--line); }
.corpus-item:last-child { border-bottom: 0; }
.corpus-line { display: flex; align-items: baseline; gap: .5rem; flex: 1 1 20rem; min-width: 0; }
.corpus-pod { font-family: var(--font-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brass-ink); border: 1px solid var(--brass-soft); border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; flex: none; }
.corpus-title { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
a.corpus-title:hover { color: var(--cypres); border-bottom-color: var(--cypres-soft); }
.corpus-meta { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); white-space: nowrap; }
.corpus-more { margin: .9rem 0 0; font-size: .84rem; color: var(--ink-soft); font-style: italic; }
.ecl-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; font-size: .82rem; color: var(--ink-soft); border-top: 1px dotted var(--line); padding-top: .6rem; }
.ecl-who { font-weight: 700; color: var(--ink); }
.ecl-ep { font-style: italic; }
.ecl-time { font-family: var(--font-mono); font-size: .74rem; color: var(--cypres); }
.ecl-listen { font-family: var(--font-mono); font-size: .74rem; }
.ecl-partner {
  flex-basis: 100%; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--brass-ink);
}

/* Le QCM à boutons colorés (`.quiz-q`, `.quiz-choices`, `.quiz-choice`, `.quiz-expl`) a été
   retiré le 20/07/2026 avec le JavaScript qui l'animait : un seul mécanisme de quiz sur le
   site, le `<details>` natif. Cf. `.quiz-item` plus haut. */

/* ---------- démarche page ---------- */
.demarche-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.fact { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--brass); padding: 1.2rem 1.3rem; box-shadow: var(--shadow); }
.fact strong { font-family: var(--font-display); font-size: 2.3rem; font-weight: 620; color: var(--cypres); display: block; }
.fact p { font-size: .92rem; color: var(--ink-soft); margin: .4rem 0 0; }
.fact-src { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: .5rem; }
.demarche-note { max-width: 52rem; color: var(--ink-soft); }

/* ---------- méthode ---------- */
.method-steps { list-style: none; margin: 0; padding: 0; max-width: 50rem; }
.method-steps li { border-left: 3px solid var(--cypres); padding: .2rem 0 .8rem 1.4rem; margin-bottom: 1.6rem; }
.method-steps h3 { font-size: 1.25rem; }
.method-steps p { color: var(--ink-soft); margin: 0; }
.notlist { max-width: 46rem; padding-left: 1.2rem; }
.notlist li { margin-bottom: .5rem; color: var(--ink-soft); }
.legal { max-width: 48rem; }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal p { color: var(--ink-soft); font-size: .95rem; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line-strong); background: var(--paper-2); margin-top: 3rem; }
/* `--ink-soft` et non `--ink-faint` (3,5:1 sur le papier clair, sous le seuil pour du 13 px).
   Le pied porte maintenant le statut du prototype et quatre entrées de navigation : c'est
   devenu du contenu qu'on doit pouvoir lire, plus une signature qu'on doit pouvoir ignorer. */
.foot-grid {
  max-width: var(--w-content); margin: 0 auto; padding: 2.2rem 1.5rem 2.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem;
  font-size: .82rem; color: var(--ink-soft);
}
.foot-brand { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.foot-h { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem; }
.foot-grid a { color: var(--ink-soft); }
/* Les quatre surfaces sorties de la nav principale atterrissent ici. Une entrée de moins en
   haut ne doit jamais faire une page orpheline en bas — c'est la contrepartie non négociable
   de la coupe du 20/07/2026. */
.foot-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.foot-nav a { text-decoration: none; border-bottom: 1px solid transparent; }
.foot-nav a:hover { color: var(--cypres); border-bottom-color: var(--brass); }

/* ---------- reveals ----------
   `(scripting: enabled)` AJOUTÉ LE 20/07/2026, ET C'EST UNE CORRECTION, PAS UN RAFFINEMENT.
   Cette règle masque du contenu (`opacity: 0`) en attendant qu'app.js le révèle. Sans le
   script — fichier bloqué, erreur de syntaxe, JavaScript coupé — la quasi-totalité du site
   restait invisible : cartes de leçons, blocs du parcours, éclairages, pyramide. Une page
   blanche, sans message d'erreur, sur un site dont tout le propos est de pouvoir être vérifié.
   La condition échoue proprement dans les deux sens : un moteur qui ignore `scripting`
   invalide la requête entière et n'applique donc aucun masquage. Le pire cas est une page
   sans animation ; il n'y a plus de pire cas où elle est vide. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.65,.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  .hero .reveal { transition-delay: calc(var(--d, 0) * 90ms); }
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .site-head { flex-wrap: wrap; gap: .8rem; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; margin-left: 0; gap: .6rem; }
  .hero { padding-top: 2.5rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .py-name { font-size: 19px; }
  .py-sub { font-size: 15px; }
  .py-base-t { font-size: 16px; }
}

/* ============================================================
   Couche « finitions éditoriales » — craft layer
   ============================================================ */

/* --- rendu texte : lignes équilibrées, veuves évitées --- */
h1, h2, h3, .hero h1, .section-head h2 { text-wrap: balance; }
.hero-sub, .module-obj, .parcours-intent, .section-head p, .bloc-card p, .mod-card p, .proof p { text-wrap: pretty; }

/* --- accessibilité clavier : anneaux de focus nets --- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.py-link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.py-link:focus-visible .py-stage,
.py-link:focus-visible .py-pillar,
.py-link:focus-visible .py-slab { outline: 2px solid var(--brass); }
:focus:not(:focus-visible) { outline: none; }

/* --- atmosphère du hero : halo cyprès diffus + filet laiton signature --- */
.home .hero { position: relative; }
.home .hero::before {
  content: "";
  position: absolute; z-index: -1;
  inset: -8% -20% auto -20%; height: 120%;
  background:
    radial-gradient(60% 55% at 22% 30%, color-mix(in srgb, var(--cypres) 12%, transparent), transparent 70%),
    radial-gradient(50% 50% at 88% 12%, color-mix(in srgb, var(--brass) 10%, transparent), transparent 72%);
  pointer-events: none;
}
.hero-kicker { position: relative; padding-left: 3.2rem; }
.hero-kicker::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 2.6rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass)); transform: translateY(-50%);
}

/* --- ornement de section : filet + losange (rappel de la marque ◬) --- */
.section-head { position: relative; }
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: "◇"; font-size: .7em; color: var(--brass); vertical-align: middle;
  margin-left: .6rem; opacity: .8;
}

/* --- leçon pilote : chapô éditorial + lettrine --- */
.sec-lesson > blockquote:first-of-type {
  border-left: 0; padding: 0; margin: .4rem 0 1.8rem;
  font-family: var(--font-display); font-style: italic; font-weight: 380;
  font-size: clamp(1.2rem, 2.3vw, 1.55rem); line-height: 1.4; color: var(--ink-soft);
  max-width: 40ch;
}
.sec-lesson > blockquote:first-of-type::before,
.sec-lesson > blockquote:first-of-type::after { content: none; }
.sec-lesson > p:first-of-type::first-letter {
  font-family: var(--font-display); font-weight: 620;
  float: left; font-size: 3.6em; line-height: .78; padding: .05em .12em 0 0;
  color: var(--cypres);
}

/* --- éclairages : filet numéroté façon marginalia --- */
.eclairage { position: relative; }
.eclairage::before {
  content: ""; position: absolute; left: -1px; top: 1.1rem; bottom: 1.1rem; width: 4px;
  background: linear-gradient(var(--cypres), color-mix(in srgb, var(--cypres) 30%, transparent));
  border-radius: 4px;
}

/* --- liens de contenu : souligné animé --- */
.legal a, .module-foot a, .prov-corps a, .sec-sources a, .demarche-note a, .foot-grid a {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s ease;
  text-decoration: none;
}
.legal a:hover, .module-foot a:hover, .prov-corps a:hover, .sec-sources a:hover, .demarche-note a:hover, .foot-grid a:hover {
  background-size: 100% 1px;
}

/* --- carte module : liseré laiton qui se révèle au survol --- */
.mod-card, .bloc-card { position: relative; overflow: hidden; }
.mod-card::after, .bloc-card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px;
  background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.mod-card:hover::after, .bloc-card:hover::after { transform: scaleX(1); }

/* --- impression : leçon lisible sur papier --- */
@media print {
  .site-nav, .theme-toggle, .site-foot, .mod-go, .brand-mark { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  body::before { display: none; }
  main { max-width: none; }
  .module { max-width: none; }
  a { color: #000; text-decoration: underline; }
  .eclairage, .mod-card, .bloc-card, .quiz-item, .quiz-ouverture, .question-inseree, .provenance { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .mod-sec { break-inside: avoid-page; }
  mark.verify { border: 1px solid #999; background: none; color: #000; }

  /* TOUT `<details>` S'IMPRIME OUVERT — et c'est la correction d'un défaut en production.
     La règle précédente masquait `.quiz-choices` à l'impression, pendant que l'explication
     restait `hidden` faute de clic : le lecteur qui imprimait la leçon pilote obtenait des
     questions SANS choix NI réponse. Le rappel actif est perdu sur papier — la réponse est
     visible d'emblée — et c'est un arbitrage assumé : une page qui semble cassée est pire.

     Deux écritures, parce que les navigateurs ne cachent pas le contenu replié de la même
     façon. Chrome moderne passe par le pseudo-élément `::details-content` (content-visibility) ;
     les moteurs plus anciens masquent les enfants en clair. Aucune des deux ne suffit seule. */
  details::details-content { content-visibility: visible !important; display: block !important; }
  details:not([open]) > :not(summary) { display: block !important; }
  details.faq > p { padding-bottom: .85rem; }
  details.faq summary::after,
  .provenance > summary::after { content: none; }
  /* Sur papier, la note de provenance est imprimée ouverte comme tout `<details>` : le lecteur
     qui archive une leçon emporte avec elle son statut et l'état de sa vérification. C'est
     précisément ce que le bandeau d'en-tête assurait — au prix de l'imposer à l'écran. */
}

/* ============================================================
   Couche « visuels » — enrichissement pédagogique
   ============================================================ */

.viz-src { font-size: .78rem; color: var(--ink-soft); margin: .7rem 0 0; font-style: italic; }
.viz-src strong { color: var(--alert); font-style: normal; }

/* --- En bref : tuiles de synthèse en tête de module --- */
.enbref { margin: 0 0 2rem; }
.enbref-h {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-ink); margin: 0 0 .6rem;
}
.enbref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tile { background: var(--card); padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; }
.tile-v { font-family: var(--font-display); font-size: 1.55rem; font-weight: 620; color: var(--cypres); line-height: 1.05; }
.tile-l { font-size: .82rem; color: var(--ink-soft); }
.tile-h { font-size: .74rem; color: var(--ink-soft); line-height: 1.35; }
/* succession programmée : le chiffre de demain, annoncé sur celui d'aujourd'hui */
.tile-next {
  font-family: var(--font-mono); font-size: .68rem; line-height: 1.35;
  color: var(--brass-ink); margin-top: .15rem;
}
/* la source n'est pas décorative : c'est la promesse du site, elle est toujours là */
.tile-src {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .02em;
  color: var(--ink-soft); margin-top: auto; padding-top: .45rem;
}
.pfu-exceptions {
  font-size: .86rem; line-height: 1.55; margin: .9rem 0 0;
  padding: .7rem .9rem; border-left: 2px solid var(--brass);
  background: var(--paper-2); border-radius: 0 var(--radius) var(--radius) 0;
}

/* --- Exemple concret --- */
.exemple { margin: 2rem 0; background: var(--cypres-wash); border: 1px solid color-mix(in srgb, var(--cypres) 25%, transparent); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.exemple figcaption { font-family: var(--font-display); font-size: 1.15rem; font-weight: 560; margin-bottom: .5rem; }
.ex-badge { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; background: var(--cypres); color: #fff; padding: .2rem .5rem; border-radius: 999px; vertical-align: middle; margin-right: .4rem; }
:root[data-theme="dark"] .ex-badge { color: #10251b; }
.ex-intro { font-size: .95rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.ex-list { list-style: none; margin: 0 0 .8rem; padding: 0; }
.ex-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--cypres) 22%, transparent); }
.ex-list li:last-child { border-bottom: 0; }
.ex-k { color: var(--ink-soft); font-size: .92rem; }
.ex-v { font-family: var(--font-mono); font-size: .95rem; color: var(--ink); white-space: nowrap; }
.ex-strong .ex-k, .ex-strong .ex-v { font-weight: 700; color: var(--cypres); }
.ex-strong .ex-v { font-size: 1.1rem; }
.ex-chute { font-size: .95rem; margin: 0; }
/* --ink-soft, pas --ink-faint : sur le fond cypres-wash de la boîte, ce dernier tombait à
   3,08:1 (mesuré 20/07/2026). Ses deux voisines de la même boîte, `.ex-intro` et `.ex-k`,
   sont déjà en --ink-soft — la note s'aligne sur elles, et passe à 6,4:1. */
.ex-note { font-size: .76rem; color: var(--ink-soft); font-style: italic; margin: .6rem 0 0; }

/* --- Barre-repère --- */
.meter { margin: 1.4rem 0; }
.meter-row { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.meter-l { font-size: .86rem; color: var(--ink-soft); }
.meter-track { height: 10px; background: var(--paper-3); border-radius: 999px; overflow: hidden; }
.meter-fill { display: block; height: 100%; border-radius: 999px; }
.meter-fill.tone-cypres { background: var(--cypres); }
.meter-fill.tone-brass { background: var(--brass); }
.meter-fill.tone-alert { background: var(--alert); }
.meter-v { font-family: var(--font-mono); font-size: .84rem; color: var(--ink); }
.meter figcaption { font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }

/* --- Comparateur PFU --- */
.pfu { margin: 2rem 0; text-align: center; }
.pfu figcaption { font-family: var(--font-display); font-size: 1.15rem; text-align: left; margin-bottom: 1.2rem; }
.pfu-bars { display: flex; align-items: flex-end; justify-content: center; gap: 1.5rem; min-height: 180px; }
.pfu-col { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pfu-stack { display: flex; flex-direction: column-reverse; width: 92px; border-radius: 4px 4px 0 0; overflow: hidden; }
.pfu-ir { background: var(--ink-soft); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .72rem; }
.pfu-ps { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .72rem; color: #fff; }
/* Fond fixe #6b726a (et non --ink-faint) : le texte est un « % » BLANC, et sur --ink-faint
   il tombait à 3,90:1 en clair, 3,57 en sombre (mesuré 20/07/2026). #6b726a porte le blanc à
   4,95:1. Couleur figée dans les deux thèmes à dessein : c'est un segment de DONNÉES, pas du
   chrome — sa teinte gris-vert le distingue du doré de tone-brass sans dépendre du thème. */
.pfu-ps.tone-muted { background: #6b726a; }
/* Même traitement que son voisin, et pour la même raison : le blanc sur --brass ne donnait
   que 3,99:1 en clair. #7d5a15 est le doré foncé DÉJÀ dans la palette (--brass-ink clair) —
   il porte le blanc à 6,28:1, avec de la marge, là où un texte foncé sur le doré d'origine
   n'aurait donné que 4,47 à 4,51. L'override sombre qui vivait ici disparaît AVEC le fond
   variable : un texte foncé sur ce fond foncé serait illisible. Fond figé, texte blanc,
   une seule règle pour les deux thèmes. */
.pfu-ps.tone-brass { background: #7d5a15; }
.pfu-total { font-family: var(--font-display); font-size: 1.5rem; font-weight: 620; color: var(--cypres); }
.pfu-label { font-size: .78rem; color: var(--ink-soft); white-space: pre-line; max-width: 12rem; }
.pfu-arrow { font-size: 1.6rem; color: var(--brass); align-self: center; }
.pfu-legend { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 1.2rem; font-size: .8rem; color: var(--ink-soft); }
.pfu-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
.sw-ir { background: var(--ink-soft); }
.sw-ps { background: var(--brass); }

/* --- Démembrement --- */
.dem { margin: 2rem 0; }
.dem figcaption { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .5rem; }
.dem-legend { display: flex; gap: 1.2rem; font-size: .8rem; color: var(--ink-soft); margin-bottom: .9rem; }
.dem-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; vertical-align: middle; margin-right: .3rem; }
.sw-u { background: var(--cypres); }
.sw-np { background: var(--brass-soft); }
.dem-grid { display: flex; flex-direction: column; gap: .4rem; }
.dem-row { display: grid; grid-template-columns: 5rem 1fr; align-items: center; gap: .8rem; }
.dem-age { font-family: var(--font-mono); font-size: .78rem; color: var(--ink-soft); text-align: right; }
.dem-bar { display: flex; height: 22px; border-radius: 3px; overflow: hidden; }
.dem-u { background: var(--cypres); color: #fff; font-family: var(--font-mono); font-size: .68rem; display: flex; align-items: center; justify-content: center; }
:root[data-theme="dark"] .dem-u { color: #10251b; }
.dem-np { background: var(--brass-soft); color: var(--ink); font-family: var(--font-mono); font-size: .68rem; display: flex; align-items: center; justify-content: center; }
/* Miroir de l'override sombre de `.dem-u` (ligne au-dessus), qui manquait ici : en sombre,
   --ink devient crème (#ece7d9) et tombait à 2,58:1 sur le brass-soft du segment
   nue-propriété — le plus mauvais contraste du site (mesuré 20/07/2026). #201603 le porte
   à 5,6:1. C'est un segment de données coloré, comme dem-u : même parade que son jumeau. */
:root[data-theme="dark"] .dem-np { color: #201603; }

/* --- Effet de levier (SVG) --- */
.lever { margin: 2rem 0; }
.lever figcaption { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .5rem; }
.lever svg { width: 100%; height: auto; }
.lever rect { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.3; }
.lever .lv-credit { fill: color-mix(in srgb, var(--cypres) 14%, var(--card)); }
.lever .lv-bien { fill: color-mix(in srgb, var(--cypres) 22%, var(--card)); }
.lever .lv-loyer { fill: color-mix(in srgb, var(--brass) 20%, var(--card)); }
.lever .lv-t { fill: var(--ink); font-family: var(--font-display); font-size: 15px; font-weight: 560; text-anchor: middle; }
/* `fill` sur un <text> SVG EST sa couleur de texte : 11 px en --ink-faint tombait sous le
   seuil comme les autres légendes. Basculé avec elles le 20/07/2026. */
.lever .lv-s { fill: var(--ink-soft); font-family: var(--font-body); font-size: 11px; text-anchor: middle; }
.lever .lv-arrow { stroke: var(--brass); stroke-width: 2; fill: none; }
.lever marker path { fill: var(--brass); stroke: none; }

/* --- Frise réglementaire --- */
.timeline { margin: 1rem 0; }
.timeline figcaption { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 1.2rem; }
.tl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; position: relative; }
.tl-list::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: var(--line); }
.tl-item { position: relative; padding: 1.4rem .6rem 0 0; display: flex; flex-direction: column; gap: .1rem; }
.tl-dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--brass); border: 3px solid var(--paper); }
.tl-date { font-family: var(--font-mono); font-size: .78rem; color: var(--cypres); font-weight: 600; }
.tl-title { font-family: var(--font-display); font-size: 1rem; font-weight: 560; }
.tl-sub { font-size: .82rem; color: var(--ink-soft); }

/* --- Simulateur intérêts composés --- */
.sim { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.6rem 1.3rem; box-shadow: var(--shadow); }
.sim-head h3 { font-size: 1.5rem; margin-bottom: .3rem; }
.sim-head p { color: var(--ink-soft); font-size: .95rem; max-width: 44rem; }
.sim-body { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 1.8rem; margin-top: 1.4rem; align-items: start; }
.sim-controls { display: flex; flex-direction: column; gap: 1.1rem; }
.sim-field { display: flex; flex-direction: column; gap: .35rem; }
.sim-flabel { font-size: .88rem; color: var(--ink-soft); }
.sim-control { display: flex; align-items: center; gap: .8rem; }
.sim-control input[type="range"] { flex: 1; accent-color: var(--cypres); height: 4px; }
.sim-control output { font-family: var(--font-mono); font-size: .85rem; color: var(--cypres); font-weight: 600; min-width: 5rem; text-align: right; }
.sim-viz { display: flex; flex-direction: column; gap: 1rem; }
.sim-chart { width: 100%; height: 200px; background: linear-gradient(var(--paper-2), transparent); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.sim-area-total { fill: color-mix(in srgb, var(--cypres) 22%, transparent); }
.sim-area-versed { fill: color-mix(in srgb, var(--brass) 26%, transparent); }
.sim-line { stroke: var(--cypres); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.sim-out-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sim-out-tile { background: var(--card); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.sim-out-tile.tile-gain { background: var(--cypres-wash); }
.sim-out-v { font-family: var(--font-display); font-size: 1.3rem; font-weight: 620; color: var(--ink); }
.tile-gain .sim-out-v { color: var(--cypres); }
.sim-out-l { font-size: .76rem; color: var(--ink-soft); }
.outils-soon { color: var(--ink-soft); max-width: 46rem; }

@media (max-width: 720px) {
  .sim-body { grid-template-columns: 1fr; }
  .pfu-bars { gap: .8rem; }
  .pfu-label { font-size: .7rem; }
  .tl-list { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   GLOSSAIRE
   Trois surfaces, un seul contenu — cf. `glossaire-marquage.ts`.
   ============================================================ */

/* --- 1. le mot marqué dans la phrase --- */

/* Volontairement PAS l'apparence d'un lien : le site en porte de vrais, vers la matière
   et vers les sources, et deux affordances identiques pour deux gestes différents feraient
   cliquer au hasard. Le pointillé sous le mot est la convention ancienne de la définition ;
   `cursor: help` la confirme avant même le survol du texte. */
.gloss {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--brass);
  cursor: help;
}
.gloss:hover, .gloss:focus-visible {
  border-bottom-style: solid;
  background: var(--cypres-wash);
}

/* --- 2. le papier --- */

/* LA règle qui fait tenir la promesse. Sur papier il n'y a ni survol ni lien : la définition
   doit être écrite. `attr(title)` la reprend de l'attribut déjà présent — le contenu n'existe
   donc qu'UNE fois dans la page, et ne peut pas diverger de lui-même. */
@media print {
  .gloss { border-bottom: 0; color: inherit; text-decoration: none; }
  .gloss::after {
    content: " (" attr(title) ")";
    font-style: italic;
    font-size: .9em;
    color: #333;
  }
}

/* --- 3. la page glossaire --- */

.glo-sommaire {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 2.6rem; padding: 0 0 1.6rem;
  border-bottom: 1px solid var(--line);
}
.glo-chip {
  font-family: var(--font-mono); font-size: .76rem;
  padding: .3rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-soft); text-decoration: none; background: var(--card);
}
.glo-chip:hover { color: var(--cypres); border-color: var(--cypres); }

.glo-liste { display: flex; flex-direction: column; gap: 2.2rem; }
.glo-entree { scroll-margin-top: 5rem; padding-left: 1rem; border-left: 2px solid var(--line); }
.glo-entree h2 {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 620;
  color: var(--cypres); margin: 0 0 .5rem;
}
.glo-def { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.glo-ex {
  margin: .7rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft);
  padding: .6rem .85rem; background: var(--paper-2); border-radius: var(--radius);
}
.glo-exl {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-ink); display: block; margin-bottom: .2rem;
}

/* Les renvois : une définition sans eux est un cul-de-sac — on comprend le mot,
   on ne retrouve pas la phrase où il servait. */
.glo-ou { margin: .9rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.glo-groupe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.glo-gt {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); flex: 0 0 auto; min-width: 8.5rem;
}
.glo-liens { display: flex; flex-wrap: wrap; gap: .35rem; }
.glo-liens a {
  font-size: .82rem; text-decoration: none; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .18rem .5rem;
  display: inline-flex; align-items: baseline; gap: .35rem;
}
.glo-liens a:hover { color: var(--cypres); border-color: var(--cypres); background: var(--card); }
.glo-code { font-family: var(--font-mono); font-size: .7rem; color: var(--brass-ink); }
.glo-vide { font-size: .86rem; color: var(--alert); font-style: italic; margin: .9rem 0 0; }

@media (max-width: 640px) {
  .glo-gt { min-width: 100%; }
}

/* ============================================================
   FICHES RÉCAP — page A4 (impression + PDF LinkedIn) et carrousel 4:5
   Concaténé à site.css au build.

   Le même artefact sert le téléchargement, l'impression et le post « document »
   LinkedIn : c'est le format le plus engageant mesuré sur cette plateforme
   (document natif 7,00 % d'engagement contre 5,30 % pour une image — Socialinsider).
   ============================================================ */

/* Laiton « encré » — le --brass du site (#a5771f) plafonne à 3,76:1 sur fond ivoire,
   sous le seuil WCAG AA de 4,5:1 pour du petit texte. Les fiches étant imprimées et
   diffusées, elles utilisent une déclinaison plus sombre partout où le laiton porte
   du texte de petite taille. En thème sombre, le --brass d'origine passe déjà.
   Définie au niveau racine et non plus sur les seules classes de fiches : les schémas
   des pages module portent du petit texte laiton eux aussi, et une variable confinée
   aurait laissé ces textes sans valeur — donc sans couleur définie. */
:root { --brass-ink: #7d5a15; }
:root[data-theme="dark"] { --brass-ink: var(--brass); }

/* ---- appel depuis la page module ---- */
.fiche-cta {
  display: block; margin: 0 0 2rem; padding: 1.1rem 1.3rem;
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  border-radius: var(--radius); background: var(--card);
  text-decoration: none; color: var(--ink); transition: border-color .18s, transform .18s;
}
.fiche-cta:hover { border-color: var(--brass); transform: translateY(-1px); }
.fc-k {
  display: block; font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: .3rem;
}
.fc-q { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.fc-go { display: block; margin-top: .45rem; font-size: .84rem; color: var(--cypres); }

/* ---- barres d'actions ---- */
.fiche-bar, .carrousel-bar { max-width: var(--w-content); margin: 0 auto; padding: 1.4rem 0 .6rem; }
.fiche-actions, .carrousel-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.fa-group { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fa-group .fa-btn { border: 0; border-radius: 0; }
.fa-group .fa-btn[aria-pressed="true"] { background: var(--cypres); color: var(--paper); }
.fa-btn {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .03em;
  padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.fa-btn:hover { border-color: var(--brass); color: var(--ink); }
.fa-primary { background: var(--cypres); color: var(--paper); border-color: var(--cypres); }
.fa-primary:hover { background: var(--cypres-soft); color: var(--paper); }
.fa-mini { padding: .28rem .6rem; font-size: .68rem; }
.fiche-hint { max-width: 52rem; font-size: .82rem; color: var(--ink-soft); margin: .5rem 0 1.5rem; }

/* ---- la fiche A4 ---- */
.fiche-page { max-width: var(--w-content); margin: 0 auto; }
.fiche {
  max-width: 196mm; margin: 0 auto 4rem; padding: 15mm 16mm;
  background: var(--card); border: 1px solid var(--line); border-radius: 2px; box-shadow: var(--shadow);
}
.fr-head {
  display: flex; gap: 1.5rem; align-items: flex-start;
  border-bottom: 2px solid var(--ink); padding-bottom: 1rem; margin-bottom: 1.6rem;
}
.fr-head-l { flex: 1; }
.fr-serie {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brass-ink); margin: 0 0 .5rem;
}
.fiche h1 { font-size: 1.85rem; line-height: 1.15; margin: 0 0 .4rem; }
.fr-accroche { font-style: italic; font-size: 1.02rem; color: var(--cypres); margin: 0; }
.fr-brand { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-soft); text-align: right; margin: 0; white-space: nowrap; }
.fr-brand-m { color: var(--cypres); font-size: 1rem; }

.fiche h2 {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass-ink); margin: 0 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
}

/* schéma repris du carrousel, en tête d'A4 : le lecteur voit avant de lire */
.fr-schema { margin: 0 0 1.6rem; break-inside: avoid; }
.fr-schema svg { display: block; width: 100%; height: auto; }
.fr-schema figcaption { font-size: .72rem; color: var(--ink-soft); line-height: 1.45; margin-top: .4rem; font-style: italic; }
.fiche section { margin-bottom: 1.5rem; break-inside: avoid; }

.fr-regles ol { list-style: none; margin: 0; padding: 0; }
.fr-regles li { display: flex; gap: .8rem; margin-bottom: .75rem; line-height: 1.5; break-inside: avoid; }
.fr-num {
  flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--cypres); color: var(--paper);
  font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; margin-top: .1rem;
}

.fr-rep-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.fr-rep { background: var(--card); padding: .7rem .85rem; display: flex; flex-direction: column; gap: .1rem; }
.fr-rep-v { font-family: var(--font-display); font-size: 1.35rem; font-weight: 640; color: var(--cypres); line-height: 1.1; }
.fr-rep-l { font-size: .82rem; line-height: 1.35; }
.fr-rep-p { font-size: .72rem; color: var(--ink-soft); line-height: 1.35; }
.fr-next { font-family: var(--font-mono); font-size: .68rem; color: var(--brass-ink); }
.fr-rep-s { font-family: var(--font-mono); font-size: .62rem; color: var(--ink-soft); margin-top: auto; padding-top: .35rem; }
.fr-rep-s a { color: var(--ink-soft); }

.fr-idee { border-left: 3px solid var(--brass); padding-left: 1rem; }
.fr-idee-c { font-style: italic; color: var(--ink-soft); margin: 0 0 .35rem; }
.fr-idee-r { margin: 0; }

.fr-pieges ul { margin: 0; padding-left: 1.1rem; }
.fr-pieges li { margin-bottom: .45rem; line-height: 1.5; }

/* ---- renvois croisés : le ciment du corpus ----
   Le libellé de nature est une pastille, le motif une ligne en dessous : sans le
   motif, un renvoi n'est qu'un « voir aussi » que personne ne suit. */
.fr-renvois { margin-bottom: 1.5rem; break-inside: avoid; }
.fr-renvois ul { list-style: none; margin: 0; padding: 0; }
.fr-renvois li { margin-bottom: .75rem; break-inside: avoid; }
.fr-renvoi-l { display: block; text-decoration: none; color: var(--ink); }
.fr-renvoi-l:hover .fr-renvoi-q { color: var(--cypres); }
.fr-renvoi-n {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: .12rem .5rem; margin-right: .5rem; vertical-align: .1em;
}
.fr-renvoi-q { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.fr-renvoi-m { display: block; font-size: .8rem; color: var(--ink-soft); line-height: 1.45; margin-top: .2rem; }
.fr-renvois-avant { border-left: 3px solid var(--brass); padding-left: 1rem; }

.fr-foot { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1.8rem; }
.fr-foot p { font-size: .7rem; line-height: 1.45; color: var(--ink-soft); margin: 0 0 .35rem; }
.fr-validite { font-family: var(--font-mono); color: var(--cypres) !important; }
.fr-url { font-family: var(--font-mono); }

/* ---- index des fiches : sommaire des thèmes ----
   Sept thèmes tiennent sur une ligne ou deux : le lecteur voit la carte du
   domaine avant de plonger, et peut sauter directement à sa question. */
.fiche-sommaire {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 3rem; padding: 1rem 0 0; border-top: 1px solid var(--line);
}
.fs-lien {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink); text-decoration: none;
  transition: border-color .18s, transform .18s;
}
.fs-lien:hover { border-color: var(--brass); transform: translateY(-1px); color: var(--ink); }
.fs-num {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: var(--cypres); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.fs-t { font-size: .88rem; }
.fs-n { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); }

/* ---- index des fiches : un bloc par thème ---- */
.fiche-theme { margin-bottom: 3.2rem; scroll-margin-top: 1.5rem; }
.ft-head { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.2rem; }
.ft-num {
  flex: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 620;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--cypres); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.ft-head h2 { font-size: 1.5rem; margin: 0 0 .2rem; }
.ft-head p { font-size: .92rem; color: var(--ink-soft); margin: 0; }

.fiche-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.1rem; margin-bottom: 0; }
.fiche-card {
  display: block; padding: 1.3rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color .18s, transform .18s;
}
.fiche-card:hover { border-color: var(--brass); transform: translateY(-2px); }
.fk-num { font-family: var(--font-mono); font-size: .72rem; color: var(--brass-ink); letter-spacing: .08em; }
.fiche-card h3 { font-size: 1.12rem; line-height: 1.25; margin: .4rem 0 .5rem; }
.fk-acc { font-style: italic; font-size: .9rem; color: var(--cypres); margin: 0 0 .7rem; }
.fk-meta { font-family: var(--font-mono); font-size: .68rem; color: var(--ink-soft); margin: 0; }
.fiche-note {
  max-width: 46rem; padding: 1.4rem 1.6rem; background: var(--paper-2);
  border-left: 3px solid var(--cypres); border-radius: 0 var(--radius) var(--radius) 0;
}
.fiche-note h2 { font-size: 1.1rem; margin-bottom: .6rem; }
.fiche-note-d { font-size: .82rem; color: var(--ink-soft); margin-bottom: 0; }

/* ---- carrousel ---- */
.slides { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.6rem; margin: 2rem 0 3rem; }
.slide { margin: 0; }
.slide-box { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.slide-box svg { display: block; width: 100%; height: auto; }
.slide figcaption {
  display: flex; align-items: center; gap: .4rem; margin-top: .5rem;
  font-family: var(--font-mono); font-size: .7rem; color: var(--ink-soft);
}
.slide figcaption span { margin-right: auto; }
.legende { max-width: 48rem; }
.legende textarea {
  width: 100%; font-family: var(--font-mono); font-size: .78rem; line-height: 1.5;
  padding: .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink); resize: vertical; margin-bottom: .7rem;
}

/* ============================================================
   IMPRESSION — en clair ET en sombre
   Le sombre exige print-color-adjust: exact ; certains navigateurs demandent
   en plus d'activer « Graphiques d'arrière-plan » dans leur boîte d'impression.
   ============================================================ */

@page { size: A4; margin: 13mm; }

@media print {
  .no-print { display: none !important; }
  body.is-fiche main, body.is-carrousel main { max-width: none; padding: 0; }
  body.is-fiche .fiche {
    max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
  }
  body.is-fiche .fiche section { break-inside: avoid; }
  body.is-fiche .fr-head { break-after: avoid; }

  /* --- clair : défaut, économe en encre --- */
  body.is-fiche[data-print="light"] .fr-rep-s,
  body.is-fiche[data-print="light"] .fr-rep-s a { color: #444 !important; }

  /* --- sombre --- */
  body.is-fiche[data-print="dark"] {
    background: #141a16 !important; color: #ece7d9 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.is-fiche[data-print="dark"] .fiche,
  body.is-fiche[data-print="dark"] .fr-rep,
  body.is-fiche[data-print="dark"] .fr-rep-grid { background: #141a16 !important; }
  body.is-fiche[data-print="dark"] h1,
  body.is-fiche[data-print="dark"] .fr-rep-l,
  body.is-fiche[data-print="dark"] .fr-idee-r,
  body.is-fiche[data-print="dark"] .fr-pieges li,
  body.is-fiche[data-print="dark"] .fr-regles li { color: #ece7d9 !important; }
  body.is-fiche[data-print="dark"] .fiche h2,
  body.is-fiche[data-print="dark"] .fr-serie,
  body.is-fiche[data-print="dark"] .fr-next { color: #d3a94f !important; }
  body.is-fiche[data-print="dark"] .fr-accroche,
  body.is-fiche[data-print="dark"] .fr-rep-v,
  body.is-fiche[data-print="dark"] .fr-validite { color: #8fc3a8 !important; }
  /* contraste : sur fond sombre, les tons « faint » du site tombent sous 4,5:1 */
  body.is-fiche[data-print="dark"] .fr-rep-p,
  body.is-fiche[data-print="dark"] .fr-idee-c,
  body.is-fiche[data-print="dark"] .fr-brand,
  body.is-fiche[data-print="dark"] .fr-foot p,
  body.is-fiche[data-print="dark"] .fr-rep-s,
  body.is-fiche[data-print="dark"] .fr-rep-s a { color: #b8b4a4 !important; }
  body.is-fiche[data-print="dark"] .fr-renvoi-q,
  body.is-fiche[data-print="dark"] .fr-renvoi-l { color: #ece7d9 !important; }
  body.is-fiche[data-print="dark"] .fr-renvoi-n { color: #d3a94f !important; border-color: #33413a !important; }
  body.is-fiche[data-print="dark"] .fr-renvoi-m { color: #b8b4a4 !important; }
  body.is-fiche[data-print="dark"] .fr-renvois-avant { border-left-color: #d3a94f !important; }
  body.is-fiche[data-print="dark"] .fr-num { background: #8fc3a8 !important; color: #141a16 !important; }
  body.is-fiche[data-print="dark"] .fr-head { border-color: #ece7d9 !important; }
  body.is-fiche[data-print="dark"] .fiche h2,
  body.is-fiche[data-print="dark"] .fr-foot,
  body.is-fiche[data-print="dark"] .fr-rep-grid { border-color: #33413a !important; }
  body.is-fiche[data-print="dark"] .fr-idee { border-left-color: #d3a94f !important; }

  /* --- carrousel : une vue par page, à sa taille native --- */
  body.is-carrousel .page-head, body.is-carrousel .legende { display: none !important; }
  body.is-carrousel .slides { display: block; margin: 0; }
  body.is-carrousel .slide { break-after: page; margin: 0; }
  body.is-carrousel .slide:last-child { break-after: auto; }
  body.is-carrousel .slide figcaption { display: none !important; }
  body.is-carrousel .slide-box { border: 0; border-radius: 0; box-shadow: none; }
  body.is-carrousel .slide-box svg { width: 1080px; height: 1350px; }
}

.dl-warn { font-size: .72rem; color: var(--alert); margin: .4rem 0 0; line-height: 1.4; }