/* html-lucida.css — lucida theme lucida.
 *
 * Identité : DARK-FIRST · stealth · moderne. Pas de bande étroite —
 * layout LARGE pleine largeur, marges généreuses, typo bold, beaucoup
 * d'espace négatif. Le matrix-rain (canvas #global-matrix-rain, z-index 0,
 * opacité ~0.07, vert phosphore dimmé) vit DERRIÈRE le contenu ; l'article
 * sit à z-index 1 sur un backdrop semi-opaque pour rester lisible.
 *
 * Deux palettes : dark (défaut, html.dark) et light (opt-in via la touche T
 * ou ?theme=light). Le système de variables porte l'identité ; les classes
 * structurelles lucida (.lucida-nav .door-cards .door-card .lucida-title
 * .lucida-author .theme-toggle) sont préservées telles quelles.
 *
 * Provenance : matrix-rain porté de pasqal/theater/teams-bg/matrix-rain.html
 * + intégration discrète de radience/wiki-site/theme.js (canvas global).
 */

/* ── Light palette (opt-in) — clean off-white, sobre. ─────────────── */
:root {
    --ink:        #14171c;   /* corps de texte */
    --ink-strong: #05070a;   /* titres */
    --dim:        #5c6573;   /* texte secondaire */
    --faint:      #e4e7ec;   /* hairlines, bordures */
    --surface:    #f4f5f3;   /* panneaux, code, blockquote */
    --page-bg:    #fcfcfa;
    --accent:     #1f8f3a;   /* vert sobre — lien, accent */
    --accent-2:   #2fae50;   /* hover, surlignage */
    --rain:       #009a32;   /* couleur du rain en thème clair (dimmé) */
    --backdrop:   rgba(252, 252, 250, 0.78);

    --maxw:       1180px;        /* layout large — pas de bande 680px */
    --gutter:     clamp(1.5rem, 6vw, 6rem);
    --base-size:  1.0625rem;     /* 17px nominal */

    color-scheme: light;
}

/* ── Dark palette (DEFAULT) — stealth near-black, vert phosphore. ─── */
html.dark {
    color-scheme: dark;
    --ink:        #d7dce3;
    --ink-strong: #f2f5f9;
    --dim:        #828c9a;
    --faint:      #1c2128;
    --surface:    #12151a;
    --page-bg:    #08090c;       /* near-black, légèrement bleuté */
    --accent:     #3fb950;       /* github-green sobre — lien, accent */
    --accent-2:   #56d364;       /* hover, plus clair */
    --rain:       #1f7a36;       /* vert dimmé pour le rain dark */
    --backdrop:   rgba(8, 9, 12, 0.82);
}

* { box-sizing: border-box; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--page-bg);
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "Helvetica Neue", Arial, sans-serif;
    font-size: var(--base-size);
    line-height: 1.68;
    letter-spacing: -0.003em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    z-index: 1;
}

/* ── Matrix-rain z-index discipline ───────────────────────────────────
 * #global-matrix-rain (injecté par rain.js) vit en position:fixed
 * z-index:0 derrière tout. Le contenu sit au-dessus. */
#global-matrix-rain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

/* ── Article — layout LARGE, marges généreuses, backdrop lisible ──── */
article {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: clamp(3rem, 9vh, 7rem) auto clamp(4rem, 12vh, 9rem);
    padding: clamp(2rem, 5vw, 4rem) var(--gutter);
    background: var(--backdrop);
    border: 1px solid var(--faint);
    border-radius: 14px;
    backdrop-filter: blur(7px) saturate(115%);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.55);
}
html:not(.dark) article {
    box-shadow: 0 18px 48px -28px rgba(20, 30, 50, 0.22);
}

/* ── Headings — bold moderne, tracking serré, espace négatif large ── */
h1, h2, h3, h4, h5, h6 {
    color: var(--ink-strong);
    font-weight: 750;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin: 2.4em 0 0.7em;
}
h1 {
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 820;
    letter-spacing: -0.04em;
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.02;
}
h2 {
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--faint);
}
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); color: var(--ink); }
h4 { font-size: 1.12rem; color: var(--dim); font-weight: 700; }
h5 { font-size: 1rem;   color: var(--dim); font-weight: 700; }
h6 { font-size: 0.9rem; color: var(--dim); font-weight: 700;
     text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Système H1 à 3 échelles (C-B) ────────────────────────────────────
 * Le clamp 4rem est une désinformation typographique au-dessus de 26 mots
 * (wheeler) : on le réserve à la LANDING. Trois tiers :
 *   landing (hero, défaut) ····· clamp(2.4rem, 5.4vw, 4.0rem)
 *   concept-clé (.t-cle) ······· clamp(2.0rem, 4vw, 2.8rem)   — carrefour
 *   notion (.t-notion) ········· clamp(1.6rem, 3vw, 2.2rem)   — feuille
 * On monte d'un tier en ajoutant la classe modifieur sur le <h1>. */
h1.lucida-title {
  margin-top: 0;
  margin-bottom: clamp(1.4rem, 3vh, 2.2rem);   /* air avant le sous-titre */
  font-size: clamp(2.4rem, 5.4vw, 4.0rem);     /* hook court → impact rendu */
  font-weight: 760;                            /* 820 faisait une dalle d'encre */
  line-height: 1.1;                            /* 1.02 collait les jambages */
  letter-spacing: -0.022em;                    /* −0.04em soudait les mots */
  max-width: 22ch;                             /* CORRECTIF RACINE : mesure propre, pas 1180px */
  text-wrap: balance;                          /* tue veuve + « ? » orphelin */
  color: var(--ink-strong);
}
html.dark h1.lucida-title { color: #e8edf3; }  /* coupe la halation sur near-black */

/* Tier carrefour (concept-clé) — consommé par render_concept_cle_page */
h1.lucida-title.t-cle {
  font-size: clamp(2.0rem, 4vw, 2.8rem);
  max-width: 28ch;
  margin-bottom: clamp(1.2rem, 2.4vh, 1.7rem);
}
/* Tier feuille (notion) — le plus sobre, ~26 mots de corps en moyenne */
h1.lucida-title.t-notion {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 720;
  max-width: 32ch;
  margin-bottom: clamp(1rem, 2vh, 1.4rem);
}

/* Sous-titre du hero : la question complète descend ici, registre lede */
.hero-sub {
  font-size: clamp(1.12rem, 1.6vw, 1.22rem);
  font-weight: 440;
  line-height: 1.5;
  letter-spacing: -0.006em;
  max-width: 62ch;                             /* mesure de lecture confortable */
  text-wrap: pretty;
  color: var(--ink);
  margin: 0 0 1rem;
}

/* Air en tête de hero (espace négatif réservé — la respiration de jr) */
article > .eyebrow:first-child { margin-top: clamp(0.5rem, 4vh, 3rem); }

/* ── Body text ────────────────────────────────────────────────────── */
p, ul, ol, blockquote, pre, table { margin: 0 0 1.5rem; }
p { max-width: 72ch; }
li { margin: 0.3em 0; }

p.lucida-author {
    color: var(--dim);
    font-style: normal;
    font-weight: 500;
    margin-top: -0.4rem;
    letter-spacing: 0.01em;
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}
a:hover {
    color: var(--accent-2);
    border-bottom-color: var(--accent-2);
}

strong { color: var(--ink-strong); font-weight: 700; }

/* ── Code (inline + block) — stealth monospace ────────────────────── */
code {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco,
                 "Courier New", monospace;
    font-size: 0.88em;
    color: var(--accent-2);
    background: var(--surface);
    border: 1px solid var(--faint);
    border-radius: 5px;
    padding: 0.1em 0.4em;
}
pre {
    background: var(--surface);
    border: 1px solid var(--faint);
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    padding: 1.1rem 1.3rem;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.55;
}
pre code {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--ink);
    font-size: inherit;
}

/* ── Blockquote ───────────────────────────────────────────────────── */
blockquote {
    border-left: 3px solid var(--accent);
    background: var(--surface);
    padding: 0.9rem 1.4rem;
    margin: 1.8em 0;
    color: var(--dim);
    border-radius: 0 8px 8px 0;
}
blockquote p { margin-bottom: 0.5rem; }
blockquote p:last-child { margin-bottom: 0; }

/* ── Horizontal rule ──────────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--faint);
    margin: 3.2em 0;
}

/* ── Tables ───────────────────────────────────────────────────────── */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.8em 0;
    font-size: 0.94em;
}
th {
    background: var(--surface);
    color: var(--ink-strong);
    text-align: left;
    border-bottom: 2px solid var(--accent);
    padding: 0.65rem 0.9rem;
    font-weight: 700;
}
td {
    border-bottom: 1px solid var(--faint);
    padding: 0.6rem 0.9rem;
    vertical-align: top;
}
tr:hover td { background: var(--surface); }

/* ── Images ───────────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.8em auto;
    border: 1px solid var(--faint);
    border-radius: 8px;
    background: var(--surface);
    padding: 0.4rem;
}

/* ── MathJax display ──────────────────────────────────────────────── */
.math-display { overflow-x: auto; margin: 1.8rem 0; }
mjx-container[display="true"] { margin: 1em 0 !important; }

/* ── lucida-nav — barre de liens (frontmatter), large, sobre ──────── */
.lucida-nav {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: clamp(1.5rem, 4vh, 3rem) auto -1rem;
    padding: 0 var(--gutter);
    color: var(--dim);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.lucida-nav a {
    color: var(--dim);
    text-decoration: none;
    border-bottom: none;
    margin-right: 0.5rem;
}
.lucida-nav a:hover { color: var(--accent); border-bottom: none; }
.lucida-nav-sep { color: var(--faint); margin-right: 0.5rem; }

/* ── door-cards — grille d'entrées, large, hover discret ──────────── */
section.door-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
    margin: 2.8rem 0;
}
a.door-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--faint);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 1.3rem 1.4rem 1.5rem;
    transition: transform 140ms ease, box-shadow 140ms ease,
                border-color 140ms ease;
}
a.door-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
    border-left-color: var(--accent-2);
    border-bottom: 1px solid var(--faint);
}
a.door-card h3 {
    color: var(--ink-strong);
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    line-height: 1.2;
    border: none;
    padding: 0;
}
a.door-card p {
    color: var(--dim);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
    max-width: none;
}

/* ── theme-toggle — pill fixe haut-droit, dark/light ──────────────── */
.theme-toggle {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1100;
    font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: var(--accent);
    background: var(--backdrop);
    border: 1px solid var(--faint);
    border-radius: 999px;
    padding: 7px 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: color 120ms ease, border-color 120ms ease;
}
.theme-toggle:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* ── Responsive — collapse la grille, resserre les gouttières ─────── */
@media (max-width: 880px) {
    section.door-cards { grid-template-columns: 1fr; }
    :root { --gutter: clamp(1.2rem, 6vw, 2.4rem); }
}

/* ── Reduced motion — le rain est déjà coupé côté JS ; on neutralise
 * aussi le blur coûteux pour les surfaces sensibles. */
@media (prefers-reduced-motion: reduce) {
    a.door-card { transition: none; }
    a.door-card:hover { transform: none; }
    .mm-stage .mm-chip { transition: none; transform: none; }
    .mm-chip-dot { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════
 * Rayna site chrome — sticky topbar, idea cards, reference list.
 * Layered on the lucida base above. Shared by the landing + article pages.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Sticky top bar : brand + reciprocal nav ──────────────────────── */
.site-top {
  position: sticky; top: 0; z-index: 1000;
  background: var(--backdrop);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  border-bottom: 1px solid var(--faint);
}
.site-top-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0.7rem var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem;
}
.site-brand {
  font-weight: 750; color: var(--ink-strong); letter-spacing: -0.02em;
  font-size: 0.98rem; margin-right: auto; text-decoration: none; border: none;
}
.site-brand:hover { color: var(--accent); border: none; }
.site-brand .sep { color: var(--dim); font-weight: 500; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 1.1rem; font-size: 0.86rem; }
.site-nav > a { color: var(--dim); border-bottom: none; }
.site-nav > a:hover { color: var(--accent); border-bottom: none; }

/* ── nav « ⋯ » — auditor views, CSS-only disclosure (no JS) ────────── */
.nav-more { position: relative; }
.nav-more > summary {
  cursor: pointer; list-style: none; color: var(--dim);
  font-weight: 700; letter-spacing: 0.08em; padding: 0 0.2rem;
}
.nav-more > summary::-webkit-details-marker { display: none; }
.nav-more > summary:hover { color: var(--accent); }
.nav-more-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30;
  display: flex; flex-direction: column; min-width: 9rem;
  background: var(--surface); border: 1px solid var(--faint);
  border-radius: 10px; padding: 0.4rem; box-shadow: 0 14px 32px -18px rgba(0,0,0,0.6);
}
.nav-more-menu a {
  color: var(--ink); border-bottom: none; padding: 0.4rem 0.6rem;
  border-radius: 7px; font-size: 0.86rem;
}
.nav-more-menu a:hover { color: var(--accent); background: var(--page-bg); border-bottom: none; }
@media (max-width: 600px) { .nav-more-menu { right: auto; left: 0; } }

/* ── ⌘K — affordance de recherche (accélérateur SECONDAIRE, D-2) ─────── */
.nav-search {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--surface); color: var(--dim);
  border: 1px solid var(--faint); border-radius: 8px;
  padding: 0.28rem 0.55rem; font: inherit; font-size: 0.82rem;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.nav-search:hover { color: var(--accent); border-color: var(--accent); }
.nav-search .ns-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.74rem; color: var(--dim);
  border: 1px solid var(--faint); border-radius: 5px;
  padding: 0.02rem 0.32rem; line-height: 1.4;
}
@media (max-width: 600px) { .nav-search .ns-kbd { display: none; } }

/* ── ⌘K — overlay + modal de recherche ─────────────────────────────── */
.sx-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem;
}
.sx-overlay[hidden] { display: none; }
.sx-modal {
  width: 100%; max-width: 600px;
  background: var(--page-bg); border: 1px solid var(--faint);
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  padding: 0.9rem; max-height: 76vh; display: flex; flex-direction: column;
}
.sx-input {
  width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--ink-strong);
  border: 1px solid var(--faint); border-radius: 9px;
  padding: 0.7rem 0.9rem; font: inherit; font-size: 1.05rem;
}
.sx-input:focus { outline: none; border-color: var(--accent); }
.sx-results {
  list-style: none; margin: 0.7rem 0 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.sx-results > li { margin: 0; }
.sx-results > li > a {
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.7rem;
  align-items: baseline; padding: 0.55rem 0.6rem; border-radius: 9px;
  border: none; text-decoration: none; color: var(--ink);
}
.sx-results > li > a:hover { background: var(--surface); border: none; }
.sx-badge {
  grid-row: 1 / span 3; align-self: start; margin-top: 0.15rem;
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  font-weight: 700; padding: 0.12rem 0.42rem; border-radius: 999px;
  white-space: nowrap;
}
.sx-badge.sx-notion { color: var(--dim); border: 1px solid var(--faint); }
.sx-badge.sx-concept-cle { color: var(--accent); border: 1px solid var(--accent); }
.sx-title { font-weight: 650; color: var(--ink-strong); }
.sx-def { color: var(--dim); font-size: 0.86rem; line-height: 1.45; }
.sx-parent { color: var(--dim); font-size: 0.78rem; }
.sx-empty { padding: 1rem 0.6rem; color: var(--dim); font-size: 0.9rem; }
.sx-hint {
  margin: 0.7rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--faint);
  color: var(--dim); font-size: 0.76rem; text-align: center;
}

/* ── breadcrumb — fil d'Ariane invariant (1er maillon = retour-maison) ── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem;
  font-size: 0.84rem; color: var(--dim); margin: 0 0 1.3rem;
}
.crumbs a { color: var(--dim); border-bottom: none; }
.crumbs a:hover { color: var(--accent); border-bottom: none; }
.crumbs .crumb-home { font-weight: 650; color: var(--accent); }
.crumbs .crumb-cur { color: var(--ink-strong); font-weight: 600; }
.crumb-sep { color: var(--faint); }

/* ── Eyebrow — uppercase accent kicker above the H1 ───────────────── */
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--accent); font-weight: 600; font-size: 0.8rem;
  margin: 0 0 0.8rem;
}

/* ── Lede — strong intro paragraph under the H1 ───────────────────── */
.lede {
  font-size: 1.18rem; color: var(--ink); max-width: 68ch; line-height: 1.6;
}

/* ── Idea cards — non-link concept grid (not door-cards) ──────────── */
section.idea-cards {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.3rem; margin: 2.4rem 0;
}
.idea-card {
  background: var(--surface); border: 1px solid var(--faint);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 1.2rem 1.4rem 1.3rem;
}
.idea-card h3 {
  color: var(--ink-strong); margin: 0 0 0.5rem;
  font-size: 1.12rem; line-height: 1.2; border: none; padding: 0;
}
.idea-card p { color: var(--dim); font-size: 0.95rem; line-height: 1.58; margin: 0; max-width: none; }
.idea-card p + p { margin-top: 0.6rem; }
.idea-card .ex { color: var(--accent-2); font-weight: 600; }
@media (max-width: 880px) { section.idea-cards { grid-template-columns: 1fr; } }

/* ── Reference list — numbered, clean (lucida .ref-list) ──────────── */
.ref-list { list-style: none; padding: 0; margin: 1.4rem 0; }
.ref-item {
  display: flex; gap: 0.85rem; padding: 0.6rem 0;
  border-bottom: 1px solid var(--faint); align-items: baseline;
}
.ref-num {
  flex: 0 0 1.8rem; text-align: right;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem; color: var(--dim);
}
.ref-body { display: flex; flex-direction: column; gap: 0.15rem; }
.ref-title { font-style: italic; font-size: 0.98rem; color: var(--ink-strong); line-height: 1.4; }
.ref-title a { color: var(--accent); border-bottom: none; }
.ref-title a:hover { color: var(--accent-2); border-bottom: none; }
.ref-arrow { font-style: normal; font-size: 0.78em; }
.ref-meta { font-size: 0.84rem; color: var(--dim); font-style: normal; }
.ref-tag {
  display: inline-block; font-style: normal; font-size: 0.72rem;
  font-weight: 600; color: var(--accent-2); border: 1px solid var(--faint);
  border-radius: 999px; padding: 0.02rem 0.5rem; margin-left: 0.4rem;
  vertical-align: middle;
}

/* ── Anchor offset so sticky topbar doesn't hide section headings ─── */
.anchor-offset { scroll-margin-top: 5.5rem; }

/* ── Mobile: let long identifiers wrap rather than scroll ─────────── */
@media (max-width: 700px) {
  code { overflow-wrap: anywhere; word-break: break-word; }
  td, th { overflow-wrap: anywhere; }
}

/* ════════════════════════════════════════════════════════════════════
 * NODE4 — the non-linear concept surface.
 * Subway metaphor: stations (concepts) fixed, coloured lines (axes) crossing.
 * One axis lit at a time via pure-CSS radio-tabs (no JS, works on iPhone).
 * ════════════════════════════════════════════════════════════════════ */

/* ── Concept page body ────────────────────────────────────────────── */
.concept-body {
  font-size: 1.18rem; line-height: 1.62; color: var(--ink);
  max-width: 64ch; margin: 0 0 2rem;
}
.back-carte { margin-top: 2.6rem; font-size: 0.92rem; }
.back-carte a { color: var(--dim); border-bottom: none; }
.back-carte a:hover { color: var(--accent); }

/* ── source-foot — two doors under each concept (biblio + video) ──── */
.source-foot {
  background: var(--surface); border: 1px solid var(--faint);
  border-left: 3px solid var(--accent); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin: 1.6rem 0 2.2rem;
}
.source-foot.hollow { border-left-color: var(--dim); opacity: 0.92; }
.sf-hollow { color: var(--dim); margin: 0; font-size: 0.95rem; }
.sf-group + .sf-group { margin-top: 1.2rem; }
.sf-h {
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem;
  color: var(--dim); font-weight: 700; margin: 0 0 0.7rem;
}
.sf-biblio-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-biblio {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem; color: var(--ink); background: var(--page-bg);
  border: 1px solid var(--faint); border-radius: 999px;
  padding: 0.25rem 0.7rem; border-bottom: 1px solid var(--faint);
}
a.sf-biblio:hover { color: var(--accent); border-color: var(--accent); }

/* ── video moment — thumbnail + verbatim amorce + deep-link ───────── */
.vm-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
a.video-moment {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--page-bg); border: 1px solid var(--faint);
  border-radius: 10px; overflow: hidden; color: var(--ink);
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}
a.video-moment:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 12px 26px -16px rgba(0,0,0,0.55);
}
.vm-thumb { position: relative; display: block; line-height: 0; }
.vm-thumb img { width: 100%; height: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: #000; }
.vm-play {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: 1.7rem; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7); opacity: 0.92;
}
.vm-ts {
  position: absolute; right: 6px; bottom: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.74rem;
  color: #fff; background: rgba(0,0,0,0.78); border-radius: 4px;
  padding: 0.1rem 0.35rem; line-height: 1.3;
}
.vm-text { padding: 0.6rem 0.75rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.vm-amorce { font-size: 0.86rem; line-height: 1.4; color: var(--ink); font-style: italic; }
.vm-vtitle { font-size: 0.74rem; color: var(--dim); }

/* ── parole de Thierry — citation verbatim, filet vertical, pas de cadre ──
 * Le bijou du site, allégé (C-D) : blockquote sémantique à filet gauche, la
 * citation en italique + UNE ligne d'attribution. Remontée haut dans le flux
 * de la fiche notion (kahneman). */
.parole { margin: 0.4rem 0 1.8rem; }
.cm-row { display: flex; flex-direction: column; gap: 1rem; }
.course-moment {
  margin: 0; padding: 0.1rem 0 0.1rem 1rem;
  border-left: 3px solid var(--accent);
  background: none; border-radius: 0;            /* coupe le cadre du blockquote global */
  display: flex; flex-direction: column; gap: 0.35rem;
}
.cm-amorce {
  margin: 0; font-size: 1.04rem; line-height: 1.5;
  color: var(--ink-strong); font-style: italic;
}
.cm-attr {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.74rem; letter-spacing: 0.02em; color: var(--dim);
  font-style: normal; font-variant-numeric: tabular-nums;
}

/* ── axis switch — radio tabs (no JS) ─────────────────────────────── */
.axis-switch { margin: 1.4rem 0 0.5rem; }
.axis-gloss { color: var(--dim); font-size: 0.92rem; margin: 0 0 0.8rem; }
.axis-radio { position: absolute; opacity: 0; pointer-events: none; }
.axis-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--faint); }
.axis-tab {
  cursor: pointer; padding: 0.5rem 1rem; font-size: 0.92rem; font-weight: 600;
  color: var(--dim); border: 1px solid var(--faint); border-bottom: none;
  border-radius: 9px 9px 0 0; background: var(--surface); margin-bottom: -1px;
  transition: color 120ms ease, background 120ms ease;
}
.axis-tab:hover { color: var(--accent); }
.axis-panel { display: none; }
/* radio-driven visibility + active tab — supports up to 5 axes (idx 0..4) */
#ax0:checked ~ .axis-body .axp-0,
#ax1:checked ~ .axis-body .axp-1,
#ax2:checked ~ .axis-body .axp-2,
#ax3:checked ~ .axis-body .axp-3,
#ax4:checked ~ .axis-body .axp-4 { display: block; }
#ax0:checked ~ .axis-tabs .axis-tab:nth-of-type(1),
#ax1:checked ~ .axis-tabs .axis-tab:nth-of-type(2),
#ax2:checked ~ .axis-tabs .axis-tab:nth-of-type(3),
#ax3:checked ~ .axis-tabs .axis-tab:nth-of-type(4),
#ax4:checked ~ .axis-tabs .axis-tab:nth-of-type(5) {
  color: var(--ink-strong); background: var(--page-bg);
  border-bottom: 1px solid var(--page-bg); box-shadow: inset 0 2px 0 var(--accent);
}

/* ── prev/next nommé sur le fil-du-cours (D-3) ────────────────────────
 * UN seul prev/next, discret, NOMMÉ (pas « 44/47 »), une ligne sous les
 * sources. Ordre chronologique = ordre réel, pas arbitraire. */
.course-nav {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
  margin-top: 0.8rem; font-size: 0.9rem;
}
.course-prev, .course-next { color: var(--dim); border-bottom: none; }
.course-prev:hover, .course-next:hover { color: var(--accent); }
.course-next { margin-left: auto; }

/* ── liens — chips typés, libellé léger (C-E) ─────────────────────── */
.liens { margin-top: 2rem; }
.edge-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
a.edge-chip {
  font-size: 0.88rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--faint); border-radius: 999px;
  padding: 0.3rem 0.8rem; border-bottom: 1px solid var(--faint);
}
a.edge-chip:hover { color: var(--accent); border-color: var(--accent); }
.ec-rel { color: var(--dim); font-size: 0.8rem; }
a.edge-chip:hover .ec-rel { color: var(--accent-2); }

/* ── carte page — full subway lines ───────────────────────────────── */
/* ul/li so each station is a block LINE even before theme.css applies */
ul.carte-line { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
li.carte-stop { display: block; margin: 0; }
.carte-intro { margin-bottom: 1.8rem; }
a.carte-station {
  display: flex; align-items: stretch; gap: 0.9rem; text-decoration: none;
  color: var(--ink); border-bottom: none; padding: 0.15rem 0; position: relative;
}
.cs-rail { position: relative; width: 1.4rem; flex: 0 0 1.4rem; }
.cs-rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--faint); transform: translateX(-50%);
}
.cs-rail::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 13px; height: 13px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--page-bg); transform: translate(-50%, -50%); z-index: 1;
}
.carte-line li:first-child a.carte-station .cs-rail::before { top: 50%; }
.carte-line li:last-child a.carte-station .cs-rail::before { bottom: 50%; }
a.carte-station.hollow .cs-rail::after { background: var(--page-bg); border-color: var(--dim); }
.cs-body {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.7rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--faint); flex: 1;
}
.cs-title { font-weight: 650; color: var(--ink-strong); font-size: 1.02rem; }
a.carte-station:hover .cs-title { color: var(--accent); }
.cs-meta { display: inline-flex; align-items: center; gap: 0.5rem; }
.src-dots { display: inline-flex; gap: 2px; }
.src-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.8; }
.st-no-vid {
  font-size: 0.7rem; color: var(--dim); border: 1px solid var(--faint);
  border-radius: 999px; padding: 0.02rem 0.45rem;
}

/* ── media space ──────────────────────────────────────────────────── */
.media-block { margin: 2.6rem 0; }
.media-block audio { width: 100%; margin: 0.5rem 0; }
.timeline { display: flex; flex-direction: column; gap: 1.6rem; }
.tl-video { border: 1px solid var(--faint); border-radius: 12px; overflow: hidden; background: var(--surface); }
.tl-head { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--faint); }
.tl-thumb { width: 96px; height: auto; border-radius: 6px; margin: 0; padding: 0; border: 1px solid var(--faint); background: #000; }
.tl-vtitle { font-weight: 650; color: var(--ink-strong); font-size: 0.96rem; line-height: 1.3; }
a.tl-moment {
  display: flex; gap: 0.85rem; align-items: baseline; text-decoration: none;
  color: var(--ink); border-bottom: 1px solid var(--faint); padding: 0.6rem 0.9rem;
}
a.tl-moment:last-child { border-bottom: none; }
a.tl-moment:hover { background: var(--page-bg); }
.tl-ts {
  flex: 0 0 3.2rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem; color: var(--accent); font-weight: 600;
}
.tl-text { display: flex; flex-direction: column; gap: 0.15rem; }
.tl-concept { font-weight: 600; color: var(--ink-strong); font-size: 0.92rem; }
.tl-amorce { font-size: 0.86rem; color: var(--dim); font-style: italic; }

/* ── carte mentale — link from the media space ────────────────────── */
.mm-cta { margin: 0.8rem 0 0; }
a.mm-open {
  display: inline-block; border-bottom: none; font-weight: 650;
  color: var(--page-bg); background: var(--accent);
  border-radius: 999px; padding: 0.5rem 1.1rem; font-size: 0.95rem;
}
a.mm-open:hover { background: var(--accent-2); color: var(--page-bg); }

/* ── interactive mindmap (collapsible tree) ───────────────────────── */
ul.mindmap, ul.mindmap ul { list-style: none; padding-left: 1.1rem; margin: 0.3rem 0; }
ul.mindmap > li { margin: 0.2rem 0; }
.mm-branch > details > summary {
  cursor: pointer; font-weight: 600; color: var(--ink-strong);
  padding: 0.2rem 0; list-style: none;
}
.mm-branch > details > summary::-webkit-details-marker { display: none; }
.mm-branch > details > summary::before { content: "▸ "; color: var(--accent); }
.mm-branch > details[open] > summary::before { content: "▾ "; }
.mm-leaf { color: var(--dim); font-size: 0.95rem; padding: 0.1rem 0 0.1rem 1.1rem; position: relative; }
.mm-leaf::before { content: "·"; color: var(--accent); position: absolute; left: 0.3rem; }

/* ── radial carte mentale — clickable-leaf affordance + detail chip ──────
 * Le chip est l'UNIQUE surface de révélation (jr) — plus de <title> SVG natif
 * (le carré gris retardé est mort). Sur desktop il flotte près du nœud survolé
 * (.mm-chip--floating, posé en JS) — là où va l'œil ; sur tactile / clavier il
 * reste épinglé en bas, ≥44px, second tap du geste à deux temps.
 * délib-20260620-c082 ; polish task-20260622-662c. */
.mm-svg .mm-node { outline: none; }
.mm-svg .mm-node:focus-visible circle { stroke: var(--accent-2); stroke-width: 3; }
.mm-svg .mm-node:focus-visible text { fill: var(--accent-2); }

/* Le cadre au survol : apparition INSTANTANÉE à l'entrée (.is-visible coupe
 * la transition), sortie DOUCE (l'état au repos porte la transition). Plus
 * gros, radius généreux, ombre douce, padding ample — un panneau, pas un
 * cartouche. polish W2 task-20260622-85d4. */
.mm-stage .mm-chip {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem; z-index: 3;
  display: flex; align-items: center; gap: 0.8rem;
  min-height: 56px; padding: 0.9rem 1.2rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--faint); border-left: 4px solid var(--accent);
  border-radius: 18px;
  box-shadow: 0 22px 54px -22px rgba(0, 0, 0, 0.78),
              0 2px 10px -5px rgba(0, 0, 0, 0.5);
  font-size: 1.08rem; line-height: 1.4; cursor: default;
  /* état au repos = ce vers quoi la sortie glisse (douce) */
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.mm-stage .mm-chip.is-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
  transition: none; /* l'entrée ne s'anime pas : elle est immédiate */
}
.mm-stage .mm-chip.has-door { cursor: pointer; }
.mm-stage .mm-chip[hidden] { display: none; }
/* Desktop : le cadre suit le nœud survolé (left/top posés en JS) au lieu d'être
 * épinglé en bas — il apparaît là où va l'œil. Largeur bornée → un tooltip
 * contextuel, pas une barre pleine largeur. Toujours UN SEUL cadre. */
.mm-stage .mm-chip.mm-chip--floating {
  right: auto; bottom: auto;
  max-width: min(340px, 72%);
}
.mm-chip-dot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent);
  /* la pastille glisse d'une couleur de branche à l'autre — sensation fluide */
  transition: background 200ms ease;
}
.mm-chip-text {
  flex: 1 1 auto; min-width: 0; color: var(--ink-strong); font-weight: 650;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mm-chip-open {
  flex: 0 0 auto; color: var(--accent-2); font-weight: 700;
  font-size: 0.95rem; white-space: nowrap;
}
.mm-chip-open[hidden] { display: none; }

/* ── folded documents (briefing / study-guide) ───────────────────── */
.doc-fold > summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  padding: 0.5rem 0; list-style: none;
}
.doc-fold > summary::-webkit-details-marker { display: none; }
.doc-fold > summary::before { content: "▸ "; }
.doc-fold[open] > summary::before { content: "▾ "; }
.doc-body { border-left: 2px solid var(--faint); padding-left: 1.2rem; margin-top: 0.6rem; }

/* ── Concepts clés ⊃ Notions — porte unique, accordéon, page dédiée ──── */
/* Niveau 1 : l'accordéon (concepts-cles.html). Critical CSS inline duplicates
 * the load-bearing rules; this is the full-fidelity layer. */
.cle-cards { display: flex; flex-direction: column; margin: 1.6rem 0 2rem; }
details.cle-card { border-bottom: 1px solid var(--faint); }
.cle-summary { cursor: pointer; display: flex; gap: 0.9rem; align-items: stretch; padding: 0.2rem 0; list-style: none; }
.cle-summary::-webkit-details-marker { display: none; }
.cle-rail { position: relative; width: 1.4rem; flex: 0 0 1.4rem; }
.cle-rail::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--faint); transform: translateX(-50%);
}
.cle-cards details:first-child .cle-rail::before { top: 1.1rem; }
.cle-cards details:last-child .cle-rail::before { bottom: calc(100% - 2rem); }
.cle-rail::after {
  content: ""; position: absolute; left: 50%; top: 1.1rem;
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--page-bg); transform: translateX(-50%); z-index: 1;
}
details[open] .cle-rail::after { background: var(--accent-2); }
.cle-head { flex: 1; padding: 0.7rem 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cle-title { font-weight: 700; color: var(--ink-strong); font-size: 1.12rem; }
.cle-summary:hover .cle-title { color: var(--accent); }
.cle-accroche { color: var(--dim); font-size: 0.95rem; line-height: 1.5; max-width: 60ch; }
.cle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.15rem; }
.cle-count { display: inline-flex; align-items: center; gap: 0.45rem; }
.cle-dots { display: inline-flex; gap: 3px; }
.cle-n { font-size: 0.78rem; color: var(--dim); }
.cle-toggle { font-size: 0.78rem; color: var(--accent); font-weight: 600; }
details[open] .cle-toggle { color: var(--accent-2); }
.cle-open { padding: 0.2rem 0 1.3rem 2.3rem; }
.cle-prose { color: var(--ink); line-height: 1.62; max-width: 60ch; }
.cle-prose .ex { color: var(--accent-2); font-weight: 600; }
.cle-open-notions { margin-top: 1rem; }
.cle-open-door { margin-top: 1.1rem; }
.cle-page-link { font-weight: 650; }

/* Page dédiée concept-clé : prose → notions reliées (quai) → références */
.cle-notions { margin-top: 2.2rem; }
.cle-notions-hint, .cle-refs-hint { color: var(--dim); font-size: 0.92rem; max-width: 62ch; }
.cle-refs { margin-top: 2.4rem; }

/* Le « quai » — notions reliées en composant station réutilisé (jr) */
.quai { margin-top: 1rem; }
.quai-group + .quai-group { margin-top: 1.6rem; }
.quai-group.bare + .quai-group.bare { margin-top: 0.7rem; }
.quai-glyph { color: var(--accent); font-weight: 700; }
ul.quai-line { display: flex; flex-direction: column; list-style: none; margin: 0.5rem 0 0; padding: 0; }
li.quai-stop { display: block; margin: 0; }
.quai-line a.carte-station { align-items: flex-start; }
.quai-gloss { color: var(--dim); font-size: 0.9rem; line-height: 1.5; flex-basis: 100%; }
.quai-empty { color: var(--dim); font-style: italic; max-width: 60ch; }

@media (max-width: 700px) {
  .vm-row { grid-template-columns: 1fr 1fr; }
  .course-next { margin-left: 0; }
}
@media (max-width: 640px) { .cle-open { padding-left: 1.2rem; } }

/* ── site-footer — attribution sobre, sur toutes les pages (W3 3c) ──────
 * Pas de « © », aucune organisation nommée (invariant D7). */
.site-footer { color: var(--dim); font-size: 0.9rem; line-height: 1.55; }
.site-footer .attrib { color: var(--ink); font-weight: 600; margin: 0 0 0.3rem; }
.site-footer .surface-note { margin: 0; max-width: 70ch; }

/* ── doc-cards — cartes-lien vers les pages-documents (W3 3a) ──────────── */
.doc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  margin: 1.4rem 0 0;
}
a.doc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--faint);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 1.2rem 1.3rem 1.3rem;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
a.doc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.5);
  border-left-color: var(--accent-2);
}
a.doc-card h3 {
  color: var(--ink-strong);
  margin: 0 0 0.45rem;
  font-size: 1.1rem;
  line-height: 1.2;
  border: none;
  padding: 0;
}
a.doc-card p { color: var(--dim); font-size: 0.93rem; line-height: 1.55; margin: 0; max-width: none; }
a.doc-card .doc-card-go { color: var(--accent); font-size: 0.9rem; font-weight: 600; margin-top: 0.9rem; }
a.doc-card:hover .doc-card-go { color: var(--accent-2); }

/* Grille « Accès direct » de la landing — 4 portes serrées (W3 3a-bis). */
section.door-cards.door-cards--compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin: 1.4rem 0 0;
}
@media (max-width: 1040px) {
  section.door-cards.door-cards--compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .doc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  section.door-cards.door-cards--compact { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
 * @media print — impression propre + clip Readability / Obsidian Clipper
 * (W3 3b). On retire tout le chrome (nav, rain, toggles, fil d'Ariane
 * décoratif, contrôles), on force fond blanc / texte noir, et on isole
 * l'<article> comme contenu principal extractible.
 * ════════════════════════════════════════════════════════════════════ */
@media print {
  /* Chrome décoratif & navigation — hors du document imprimé/clippé. */
  header.site-top,
  #global-matrix-rain,
  .theme-toggle,
  #theme-toggle-btn,
  .sx-overlay,
  .nav-more,
  .nav-search,
  .crumbs,
  .back-carte,
  .mm-controls,
  .mm-hint,
  .course-nav,
  noscript { display: none !important; }

  :root, html, html.dark, html.light, body {
    background: #fff !important;
    color: #111 !important;
  }
  body { margin: 0; }
  /* L'article porte un fond sombre + blur à l'écran ; à l'impression on
   * l'aplatit en blanc, sans cadre ni ombre ni filtre coûteux. */
  article {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 1.5cm !important;
    background: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Texte noir lisible partout — y compris les termes mis en exergue (spans
   * accentués, <strong>, <em>) qui en couleur deviennent illisibles sur blanc. */
  article, article * { color: #111 !important; }
  .eyebrow, .hero-sub, .cle-refs-hint, figcaption { color: #444 !important; }
  a { text-decoration: underline; }

  /* Surfaces/cartes/panneaux internes : on aplatit TOUT fond sombre (source-foot,
   * cartes, blockquotes, moments vidéo…) — sinon texte noir sur fond sombre =
   * illisible. Les images/canvas gardent leur rendu. */
  article *:not(img):not(svg):not(canvas) {
    background: transparent !important;
    box-shadow: none !important;
  }
  a.door-card, a.doc-card, .media-block, .idea-card, blockquote {
    border-color: #bbb !important;
  }

  /* Coupures de page propres. */
  h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid-page; }
  p, blockquote, li, figure, .idea-card, a.door-card, a.doc-card {
    page-break-inside: avoid; break-inside: avoid;
  }
  article > hr { border-color: #ccc; }
  .site-footer, .site-footer .attrib, .site-footer .surface-note { color: #444 !important; }

  /* L'audio n'a pas de sens à l'impression. */
  audio { display: none !important; }
}