/* =========================================================================
   Petite Lueur — application styles.
   Tokens first, then base, then components. One file until a section earns its
   own. All colors in oklch(); derive variants with color-mix(). Modern CSS only
   (no vendor prefixes, no fallbacks for non-evergreen browsers).
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */

:root {
    /* Surfaces & ink — warm paper, soft ink; never pure white or black. */
    --paper: oklch(98.5% 0.009 85);
    --paper-sunk: oklch(96.2% 0.013 83);
    --ink: oklch(26% 0.015 64);
    --ink-soft: oklch(46% 0.013 64);
    --ink-faint: oklch(62% 0.011 66);
    --line: oklch(89% 0.012 82);

    /* The lueur — the warm signature light, spent sparingly. */
    --lueur: oklch(80% 0.135 76);
    --lueur-deep: oklch(67% 0.150 58);
    --lueur-glow: oklch(86% 0.160 82);

    /* Data series — told apart by warm/cool, never by judgement. */
    --data-warm: oklch(64% 0.075 54);
    --data-cool: oklch(62% 0.045 242);

    /* Type — placeholder stacks; self-hosted faces TBD. */
    --font-serif: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --measure: 64ch;
    --radius: 0.625rem;
}

/* --- Base --------------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.65;
}

h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --- Landing ------------------------------------------------------------ */

.hero {
    min-height: 100svh;
    max-width: var(--measure);
    margin-inline: auto;
    padding: clamp(1.5rem, 5vw, 4rem);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 3rem;
}

.hero__brand {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wordmark {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6em;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* The mark is a small light given a body (radial) and a halo (glow). */
.mark {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, var(--lueur-glow), var(--lueur) 52%, var(--lueur-deep));
    box-shadow:
        0 0 0.9em -0.05em var(--lueur),
        0 0 2.2em -0.1em color-mix(in oklch, var(--lueur) 55%, transparent);
    animation: lueur-breathe 4.5s ease-in-out infinite;
}

@keyframes lueur-breathe {
    0%, 100% {
        box-shadow:
            0 0 0.7em -0.05em var(--lueur),
            0 0 1.6em -0.1em color-mix(in oklch, var(--lueur) 45%, transparent);
    }
    50% {
        box-shadow:
            0 0 1.1em -0.05em var(--lueur),
            0 0 2.8em -0.1em color-mix(in oklch, var(--lueur) 60%, transparent);
    }
}

.tagline {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
    font-weight: 500;
    line-height: 1.25;
}

.intro {
    margin: 0;
    max-width: 50ch;
    color: var(--ink-soft);
}

/* --- Lueur (scrollytelling) --------------------------------------------- */

.lueur {
    max-width: 46rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.lueur__head {
    margin: clamp(1.25rem, 3vh, 2.5rem) 0 1.75rem;
}

.lueur__eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.lueur__date {
    margin-left: 0.15em;
    font-weight: 500;
    color: var(--ink-faint);
}

.lueur__question {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem);
    line-height: 1.1;
}

.lueur__chapter {
    margin: 0.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.term--actif { color: color-mix(in oklch, var(--data-cool) 72%, var(--ink)); font-weight: 600; }
.term--retraite { color: color-mix(in oklch, var(--data-warm) 72%, var(--ink)); font-weight: 600; }

.lueur__hint {
    margin: 1rem 0 0;
    color: var(--ink-soft);
}

.lueur__article {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lueur__article p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.55;
}

.lueur__list {
    margin: 0;
    padding-left: 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.5;
}

.lueur__list li::marker { color: var(--ink-faint); }

.lueur__src {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ink-faint);
}

.lueur__src a { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }

.lueur__figure {
    margin: 1rem 0;
}

.chart { aspect-ratio: 720 / 440; }

.chart__svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart__line {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.chart__line--depenses { stroke: var(--data-warm); }
.chart__line--ressources { stroke: var(--data-cool); }

.chart__area {
    fill: color-mix(in oklch, var(--lueur) 22%, transparent);
}

.chart__grid { stroke: var(--line); stroke-width: 1; }

.chart__label {
    fill: var(--ink-faint);
    font-family: var(--font-sans);
    font-size: 13px;
}

.chart__label--x { text-anchor: middle; }

.chart-fallback {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.chart-fallback caption {
    margin-bottom: 0.5rem;
    text-align: left;
    color: var(--ink-soft);
}

.chart-fallback th,
.chart-fallback td {
    padding: 0.35rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--line);
}

.chart-fallback th[scope="row"] { text-align: left; }

.lueur__source,
.lueur__article .lueur__source {
    margin: 0.75rem 0 0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--ink-faint);
}

/* Centered like a caption under the centered viz (not the longer expert one). */
.lueur__article .lueur__source { text-align: center; }

.lueur__source a { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }

/* Small document icon appended to PDF source links. */
.source-pdf {
    display: inline-block;
    width: 0.8em;
    height: 0.9em;
    margin-left: 0.2em;
    vertical-align: -0.12em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.lueur__outro {
    margin: 3rem 0 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-serif);
    color: var(--ink-soft);
}

.lueur__outro p { margin: 0; }

/* --- Lueur · intro (the fear, then the subject) ------------------------- */

.lueur__intro {
    margin: 0 0 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.intro-fear,
.intro-subject {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.intro__lead {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
    line-height: 1.3;
}

.intro-subject p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
    line-height: 1.5;
}

.intro-fear__poll {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.isotype {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 0.3rem;
    width: 100%;
    max-width: 24rem;
}

/* Demoted to a small accent beside the figure it supports — context, not hero. */
.isotype--compact {
    max-width: 11rem;
    gap: 0.18rem;
}

.figure {
    width: 100%;
    aspect-ratio: 12 / 24;
    fill: color-mix(in oklch, var(--ink) 12%, transparent);
}

.figure--on {
    fill: var(--data-warm);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.isotype--shown .figure--on {
    opacity: 1;
    transform: none;
}

.isotype__caption {
    margin: 0;
    flex: 1 1 16rem;
    color: var(--ink-soft);
}

.isotype__caption strong {
    color: var(--ink);
    font-size: 1.4em;
}

.isotype__src {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.isotype__caption a,
.quote figcaption a {
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.intro-fear__quotes {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quote {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid color-mix(in oklch, var(--lueur) 55%, var(--line));
}

.quote blockquote {
    margin: 0 0 0.35rem;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
    line-height: 1.4;
}

.quote figcaption {
    font-size: 0.85rem;
    color: var(--ink-faint);
}

.quote cite {
    font-style: normal;
    font-weight: 600;
    color: var(--ink-soft);
}

/* --- Répartition (the flow: wages → State gate → pensions) -------------- */

.repartition { margin: 1rem 0 0.25rem; }

.repartition__stage { aspect-ratio: 720 / 230; }

.repartition__svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Same silhouette, told apart by a warm/cool neutral — never a judgement hue. */
.repartition__figure { fill: color-mix(in oklch, var(--ink) 22%, transparent); }
.repartition__figure--actif { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.repartition__figure--retraite { fill: color-mix(in oklch, var(--data-warm) 80%, var(--paper)); }

.repartition__roof,
.repartition__wall { fill: color-mix(in oklch, var(--ink) 11%, var(--paper)); }
.repartition__column { fill: color-mix(in oklch, var(--ink) 17%, var(--paper)); }

.repartition__label {
    fill: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    text-anchor: middle;
}

.repartition__label--state {
    fill: var(--ink-faint);
    font-weight: 400;
}

.repartition__euro {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

/* Cotisations go in cool (the actifs' tone), pensions come out warm (the retraités'). */
.repartition__part--in .repartition__euro { fill: color-mix(in oklch, var(--data-cool) 80%, var(--ink)); }
.repartition__part--in .repartition__halo { fill: color-mix(in oklch, var(--data-cool) 30%, transparent); }
.repartition__part--out .repartition__euro { fill: color-mix(in oklch, var(--data-warm) 78%, var(--ink)); }
.repartition__part--out .repartition__halo { fill: color-mix(in oklch, var(--data-warm) 30%, transparent); }

/* --- Lueur · scenes ----------------------------------------------------- */

.scene {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Scene: tampon — a zoom inside the State; a buffer, not a hoard. */
.tampon { margin: 0.5rem 0; }

.tampon__stage { aspect-ratio: 720 / 300; }

.tampon__svg {
    display: block;
    width: 100%;
    height: auto;
}

.tampon__wall { fill: color-mix(in oklch, var(--ink) 11%, var(--paper)); }
.tampon__column { fill: color-mix(in oklch, var(--ink) 16%, var(--paper)); }

.tampon__pipes path {
    fill: none;
    stroke: color-mix(in oklch, var(--ink) 16%, var(--paper));
    stroke-width: 11;
    stroke-linecap: round;
}

.tampon__tank {
    fill: none;
    stroke: var(--ink-faint);
    stroke-width: 2;
}

.tampon__fluid { fill: color-mix(in oklch, var(--lueur) 30%, var(--paper)); }

.tampon__label {
    fill: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 13px;
    text-anchor: middle;
}

.tampon__label--strong { font-weight: 600; }

.tampon__amount {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    text-anchor: middle;
    dominant-baseline: central;
}

.tampon__amount--in { fill: color-mix(in oklch, var(--data-cool) 82%, var(--ink)); }
.tampon__amount--out { fill: color-mix(in oklch, var(--data-warm) 80%, var(--ink)); }

/* Scene: for 100 retirees, how many actifs — a crowd that shrinks across years. */
.ratio { margin: 0.5rem 0; }

.ratio__stage {
    aspect-ratio: 720 / 250;
    touch-action: none;
    cursor: ew-resize;
}

.ratio__svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
}

.ratio__figure { transition: opacity 0.4s ease; }
.ratio__figure--actif { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.ratio__figure--retraite { fill: color-mix(in oklch, var(--data-warm) 80%, var(--paper)); }

.ratio__count {
    font-family: var(--font-sans);
    font-size: 38px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ratio__count--actif { fill: color-mix(in oklch, var(--data-cool) 72%, var(--ink)); }
.ratio__count--retraite { fill: color-mix(in oklch, var(--data-warm) 72%, var(--ink)); }

.ratio__numlabel {
    fill: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 13px;
}

.ratio__track { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.ratio__tick line { stroke: var(--ink-faint); stroke-width: 1.5; }
.ratio__tick text { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }

.ratio__year { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.ratio__handle circle { fill: var(--lueur); stroke: var(--paper); stroke-width: 2; }

.ratio__fallback { margin-top: 0.5rem; }

/* Scene: une autre mesure — pension spending as a share of GDP, ~stable. */
.pib { margin: 0.5rem 0; }

.pib__stage { aspect-ratio: 720 / 420; }

.pib__svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
}

.pib__ground { stroke: var(--line); stroke-width: 1.5; }
.pib__bar-rest { fill: color-mix(in oklch, var(--ink) 11%, var(--paper)); }
.pib__bar-pension { fill: color-mix(in oklch, var(--data-warm) 78%, var(--paper)); }

.pib__pct { fill: color-mix(in oklch, var(--data-warm) 72%, var(--ink)); font-family: var(--font-sans); font-size: 54px; font-weight: 700; }
.pib__pctlabel { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 15px; }
.pib__bartitle { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.pib__val { fill: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

.pib__track { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.pib__tick line { stroke: var(--ink-faint); stroke-width: 1.5; }
.pib__tick text { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }
.pib__year { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.pib__handle circle { fill: var(--lueur); stroke: var(--paper); stroke-width: 2; }

.pib__fallback { margin-top: 0.5rem; }

/* Scene: d'où vient le trou — spending stable, resources eroding, the gap is the deficit. */
.deficit { margin: 0.5rem 0; }

.deficit__stage { aspect-ratio: 720 / 520; }

.deficit__svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
}

.deficit__stand { fill: color-mix(in oklch, var(--ink) 14%, var(--paper)); }
.deficit__base { stroke: color-mix(in oklch, var(--ink) 22%, var(--paper)); stroke-width: 3; stroke-linecap: round; }
.deficit__beam { stroke: var(--ink-soft); stroke-width: 7; stroke-linecap: round; }
.deficit__pivot { fill: var(--ink-soft); }
.deficit__hanger { stroke: var(--ink-faint); stroke-width: 1.5; }
.deficit__tray { stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; }
.deficit__cot { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.deficit__impots { fill: color-mix(in oklch, var(--data-cool) 42%, var(--paper)); }
.deficit__etat { fill: color-mix(in oklch, var(--ink) 28%, var(--paper)); }
.deficit__pens { fill: color-mix(in oklch, var(--data-warm) 78%, var(--paper)); }
.deficit__panlabel { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }

.deficit__zoomhead { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }
.deficit__zoomtrack { fill: color-mix(in oklch, var(--ink) 9%, var(--paper)); }
.deficit__zoomlabel { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; }
.deficit__zoomval { fill: var(--ink); font-family: var(--font-sans); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.deficit__pct { fill: color-mix(in oklch, var(--lueur-deep) 88%, var(--ink)); font-family: var(--font-sans); font-size: 54px; font-weight: 700; }
.deficit__pctlabel { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 15px; }

.deficit__track { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.deficit__tick line { stroke: var(--ink-faint); stroke-width: 1.5; }
.deficit__tick text { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }
.deficit__year { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.deficit__handle circle { fill: var(--lueur); stroke: var(--paper); stroke-width: 2; }

.deficit__calc {
    max-width: 20rem;
    margin: 0.25rem auto 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.deficit__calc p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.2rem 0;
}

.deficit__calc-key { color: var(--ink-faint); }
.deficit__calc-val { font-variant-numeric: tabular-nums; }

.deficit__calc-result {
    margin-top: 0.35rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--line);
    font-weight: 700;
    color: color-mix(in oklch, var(--lueur-deep) 88%, var(--ink));
}

.deficit__calc-result .deficit__calc-key { color: inherit; }

.deficit__fallback { margin-top: 0.5rem; }

/* Scene: ce qui rentre — the funding mix, contributions vs the State's small block. */
.composition { margin: 0.5rem 0; }

.composition__stage { aspect-ratio: 720 / 210; }

.composition__svg { display: block; width: 100%; height: auto; }

.composition__seg--cotisations { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.composition__seg--impots { fill: color-mix(in oklch, var(--data-cool) 42%, var(--paper)); }
.composition__seg--etat { fill: color-mix(in oklch, var(--ink) 30%, var(--paper)); }

.composition__share { fill: var(--paper); font-family: var(--font-sans); font-size: 18px; font-weight: 700; }
.composition__name { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
.composition__value { fill: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.composition__fallback { margin-top: 0.5rem; }

/* Scene: age pyramid — the bulge crossing the retirement line. */
.pyramide { margin: 0.5rem 0; }

.pyramide__stage {
    aspect-ratio: 720 / 380;
    touch-action: none;
    cursor: ew-resize;
}

.pyramide__svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    user-select: none;
}

/* Three honest zones: young (neutral), working-age (cool), retired (warm). */
.pyramide__bar { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.pyramide__bar--young { fill: color-mix(in oklch, var(--ink) 17%, var(--paper)); }
.pyramide__bar--old { fill: color-mix(in oklch, var(--data-warm) 80%, var(--paper)); }

.pyramide__age {
    fill: var(--ink-faint);
    font-family: var(--font-sans);
    font-size: 11px;
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 3px;
    stroke-linejoin: round;
}

/* Proportion bar: actifs vs retraités, the warm segment creeping over the cool. */
.pyramide__seg--actif { fill: color-mix(in oklch, var(--data-cool) 78%, var(--paper)); }
.pyramide__seg--old { fill: color-mix(in oklch, var(--data-warm) 80%, var(--paper)); }
.pyramide__pct { fill: var(--ink); font-family: var(--font-sans); font-size: 13px; font-weight: 700; }

.pyramide__line { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 5 4; }
.pyramide__line-label { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.pyramide__side { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }

.pyramide__track { stroke: var(--line); stroke-width: 2; stroke-linecap: round; }
.pyramide__tick { stroke: var(--ink-faint); stroke-width: 1.5; }
.pyramide__tick-label { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }
.pyramide__year { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.pyramide__handle circle { fill: var(--lueur); stroke: var(--paper); stroke-width: 2; }

.pyramide__fallback { margin-top: 0.5rem; }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.data-table caption {
    margin-bottom: 0.5rem;
    text-align: left;
    color: var(--ink-soft);
}

.data-table th,
.data-table td {
    padding: 0.35rem 0.5rem;
    text-align: right;
    border-bottom: 1px solid var(--line);
}

.data-table thead th { color: var(--ink-soft); }
.data-table th[scope="row"] { text-align: left; }

/* --- Notions (dig-deeper: inline cue → card → full page) ---------------- */

.notion { position: relative; }

.notion__cue {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: help;
    text-decoration: underline dotted color-mix(in oklch, var(--lueur-deep) 60%, var(--line));
    text-underline-offset: 0.2em;
}

.notion__cue:hover,
.notion__cue[aria-expanded="true"] { text-decoration-color: var(--lueur-deep); }

.notion__cue:focus-visible {
    outline: 2px solid var(--lueur-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

.notion__card {
    position: absolute;
    left: 0;
    top: calc(100% + 0.4rem);
    z-index: 5;
    width: min(22rem, 80vw);
    padding: 0.85rem 1rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 0.5rem 1.5rem -0.5rem color-mix(in oklch, var(--ink) 30%, transparent);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
}

.notion__short { display: block; }

.notion__more {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: color-mix(in oklch, var(--lueur-deep) 85%, var(--ink));
}

.notion__cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--ink-faint);
}

.notion__cite a { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }

/* --- Notion page (L2) --------------------------------------------------- */

.notion-page {
    max-width: 40rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.notion-page__kicker {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.notion-page__term {
    margin: 0 0 1.5rem;
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem);
}

.notion-page__body p {
    margin: 0 0 1.1rem;
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    line-height: 1.6;
}

.notion-page__sources {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.notion-page__sources-title {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.notion-page__sources ul { margin: 0; padding-left: 1.1rem; }
.notion-page__sources li { margin-bottom: 0.4rem; }
.notion-page__sources a { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }

.notion-page__nature {
    margin-left: 0.4rem;
    padding: 0.05rem 0.45rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    font-size: 0.72rem;
    color: var(--ink-faint);
}

/* --- Expert mode (the classic chart, opt-in at the foot) ---------------- */

.expert {
    margin: 0 0 4rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}

.expert__summary {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.expert__body { margin-top: 1.5rem; }

/* --- Navigation chrome (breadcrumb, backlinks, home listing) ------------ */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--ink-faint);
}

.crumbs__home {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
    color: var(--ink-soft);
    text-decoration: none;
}

.crumbs__home:hover { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }

/* A small lit point, echoing the home wordmark mark (no animation here). */
.crumbs__mark {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, var(--lueur-glow), var(--lueur) 52%, var(--lueur-deep));
    box-shadow: 0 0 0.5em -0.05em color-mix(in oklch, var(--lueur) 55%, transparent);
}

.crumbs__sep { color: var(--ink-faint); }
.crumbs__link { color: var(--ink-soft); text-decoration: none; }
.crumbs__link:hover { color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink)); }
.crumbs__current { color: var(--ink-faint); }

.notion-page__backlinks {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}

.notion-page__backlinks-title {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.notion-page__backlinks ul,
.lueurs-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.notion-page__backlink,
.lueurs-list__item {
    display: block;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-sunk);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.notion-page__backlink:hover,
.lueurs-list__item:hover {
    border-color: color-mix(in oklch, var(--lueur) 55%, var(--line));
}

.notion-page__backlink-topic,
.lueurs-list__topic {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
}

.notion-page__backlink-title,
.lueurs-list__title {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--ink);
}

.lueurs-list { align-self: end; }

/* --- Sommaire (table of contents: mobile bar, desktop rail) ------------- */

.lueur-shell .toc { display: none; }
.lueur-shell.toc--ready .toc { display: block; }

/* Mobile-first: a sticky, collapsible bar at the top of the page. */
.toc {
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 0.5rem;
    background: color-mix(in oklch, var(--paper) 88%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
}

.toc__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem clamp(1.5rem, 4vw, 3rem);
    border: 0;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in oklch, var(--lueur-deep) 80%, var(--ink));
    cursor: pointer;
}

.toc__toggle::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.toc--open .toc__toggle::after { transform: rotate(-135deg); }

.toc__list {
    display: none;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0;
    padding: 0 clamp(1.5rem, 4vw, 3rem) 0.75rem;
    list-style: none;
}

.toc--open .toc__list { display: flex; }

.toc__link {
    display: block;
    padding: 0.4rem 0;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-decoration: none;
}

.toc__link.is-current {
    color: color-mix(in oklch, var(--lueur-deep) 85%, var(--ink));
    font-weight: 600;
}

.lueur__chapter,
.lueur__head { scroll-margin-top: 4rem; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* Desktop: a sticky rail in the left margin; the toggle and bar chrome drop away. */
@media (min-width: 76rem) {
    .lueur-shell.toc--ready {
        display: grid;
        grid-template-columns: 13rem minmax(0, 46rem);
        justify-content: center;
        gap: 2.5rem;
        align-items: start;
    }

    .toc {
        position: sticky;
        top: 2.5rem;
        margin: 0;
        background: none;
        backdrop-filter: none;
        border: 0;
    }

    .toc__toggle { display: none; }

    .toc__list {
        display: flex;
        padding: 0;
        border-left: 1px solid var(--line);
    }

    .toc__link {
        margin-left: -1px;
        padding: 0.35rem 0 0.35rem 1rem;
        border-left: 2px solid transparent;
        font-size: 0.85rem;
    }

    .toc__link.is-current { border-left-color: var(--lueur); }
}