/* ═══════════════════════════════════════════════════════════════════════════
   Rapports CyberAzimut : la présentation des éditions servies
   (/rapports/<serie>/<annee>, /en/reports/<serie-en>/<annee>).
   ═══════════════════════════════════════════════════════════════════════════

   QUI POSSÈDE QUOI
   Le <body> d'une édition vient de cyberazimut-docs
   (MARKETING/rapports/<serie>/<annee>/{fr,en}.html) et est recopié par
   MARKETING/rapports/sync-landing.mjs. La source porte sa propre <style>, dans
   SON <head> : elle ne sert qu'à l'aperçu autonome (artefact claude.ai) et
   n'est JAMAIS copiée ici. La présentation servie est ce fichier, et lui seul.
   Conséquence : une correction de mise en page se fait ICI, une fois, pour
   toutes les éditions et les deux langues ; une correction de texte se fait
   dans la source, puis synchro.

   LE CONTRAT AVEC LE BALISAGE
   Le corps de la source utilise des classes (.mast, .keyfig, .verdicts, .fig-*,
   .chip…) et, en attributs `style=""`, des variables (--s1…--s4, --seq1…3,
   --ink-2, --ink-3, --surface…). Ces noms sont repris tels quels plus bas : ils
   sont l'interface entre le texte et sa présentation. Les renommer ici casse
   les figures sans erreur.

   COULEURS : celles du SITE (décision de JF, 2026-09-23 : « beaucoup trop
   blanc, suis les couleurs du site »). Fond bleu nuit, texte clair, orange de
   marque en accent, cartes sur les surfaces surélevées, filets discrets : les
   jetons de packages/brand/tokens.css, dans le rôle que la landing leur donne
   (--ca-background, --ca-card, --ca-foreground, --ca-muted-foreground,
   --ca-border, --ca-accent-text). Ils sont RECOPIÉS ci-dessous, parce que
   cette page ne passe pas par Vite ; src/rapports.test.js vérifie qu'ils n'en
   dérivent pas. Seules la palette des figures et les couleurs de statut sont
   propres au rapport : ce sont des couleurs de données (voir plus bas).

   L'IMPRESSION reste en clair (@media print, en bas) : encre sur papier, avec
   la palette claire validée pour fond blanc.

   POLICES : Geist et Geist Mono, auto-hébergées par la landing (public/fonts/).
   Aucune requête de police ne sort de l'origine ; la source, elle, chargeait
   IBM Plex depuis Google Fonts, et ce chargement n'arrive jamais ici. */

@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/GeistMono-Variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Jetons de marque (copie de packages/brand/tokens.css) ── */
  --cz-navy:        #0A192F;
  --cz-slate:       #1B253B;
  --cz-slate-2:     #232E45;
  --cz-orange:      #F58220;
  --cz-orange-hot:  #FF9A3F;
  --cz-orange-deep: #D86E11;
  --cz-stone:       #5A6478;
  --cz-white:       #FFFFFF;
  --cz-fog:         #E7ECF3;
  --cz-line:        #2A3651;
  --cz-line-2:      #34405C;
  --ca-foreground:         #E9EEF6;
  --ca-muted-foreground:   #8893AA;
  --ca-sidebar-foreground: #B7C0D1;

  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── Le contrat avec le balisage de la source, en sombre ──
     Contrastes mesurés (WCAG) : --ink 13,1:1 sur --surface ; --ink-2 8,4:1 ;
     --ink-3 5,7:1 sur le fond et 4,95:1 sur --surface (les légendes en
     10,5 px restent AA) — mais 4,4:1 seulement sur --surface-2, d'où les
     en-têtes de tableau en --ink-2 plus bas ; --accent 8,3:1 sur le fond. */
  --ground:      var(--cz-navy);
  --surface:     var(--cz-slate);
  --surface-2:   var(--cz-slate-2);
  --ink:         var(--ca-foreground);
  --ink-2:       var(--ca-sidebar-foreground);
  --ink-3:       var(--ca-muted-foreground);
  --rule:        var(--cz-line);
  --rule-strong: var(--cz-line-2);
  --grid:        var(--cz-line);
  --accent:      var(--cz-orange-hot);
  --shadow:      0 1px 2px rgb(0 0 0 / 0.25), 0 10px 28px -14px rgb(0 0 0 / 0.55);
  --measure:     68ch;
  --logo-ink:    var(--ca-foreground);
  --logo-facet:  var(--cz-orange);
  /* Texte des pastilles « Attaque » et « Erreur » sur leur teinte à 14 % :
     6,0:1 l'un et l'autre. */
  --rp-att-texte: var(--cz-orange-hot);
  --rp-err-texte: #8DBBF5;

  /* ── Palette catégorielle des figures, fond sombre ──
     Validée le 2026-09-23 : validate_palette.js --mode dark --surface #1B253B
     (la surface des figures), TOUTES les paires puisque les quatre courbes de
     la figure 2 se croisent. Bande de clarté, chroma, daltonisme (pire paire
     ΔE 11,1 en deutéranopie), vision normale (pire paire ΔE 15,8), contraste
     3:1 contre la surface : tout PASSE.
       s1 orange de marque foncé  s2 bleu  s3 sarcelle  s4 violet
     L'orange vif de marque (#F58220) sort de la bande de clarté sur sombre
     (L 0,72) : --cz-orange-deep, sa variante, y reste. Aucune couleur n'est
     rouge, verte ni ambre : ces teintes sont celles des statuts ci-dessous.
     L'ancienne palette de la source (#D9660F, #1F6FB2, #159B62, #8E3FB0)
     ÉCHOUAIT déjà sur fond clair (bleu et violet confondus en
     deutéranopie, ΔE 0,6). Changer une valeur = relancer le validateur. */
  --s1: var(--cz-orange-deep);
  --s2: #5597E9;
  --s3: #2C9A88;
  --s4: #8654CC;

  /* Rampe ordinale (figure 5, trois exercices), une seule teinte, du sombre au
     clair : clarté monotone, écarts visibles, extrémité la plus proche du
     fond à 3,1:1 contre la surface (--ordinal --mode dark : PASSE). */
  --seq1: #B0590F;
  --seq2: #E08225;
  --seq3: #F9B877;

  /* ── Statuts du tableau des causes : ▲ hausse, ▼ baisse, ● stable ──
     Toujours avec leur icône : le rouge et le vert ne se distinguent pas pour
     un daltonien, l'icône le fait. Texte AA sur leur teinte à 13 % (4,7:1 à
     6,4:1). Le rouge tire vers le rose pour rester à ΔE 15,5 de l'orange
     de --s1, le vert vers le jaune pour s'écarter de la sarcelle de --s3,
     l'ambre vers le jaune pour s'écarter de l'orange. */
  --st-crit: #FF7597;
  --st-good: #8BCB5B;
  --st-neut: #E8C547;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* ═══ La page : colonne gauche + document ═════════════════════════════════
   .rp-page, .rp-col et .rp-main n'existent PAS dans la copie de public/ : ils
   sont injectés au build par scripts/prerender.mjs dans dist/, et en
   développement par le même code, servi par le plugin de vite.config.js
   (scripts/colonne-rapport.mjs). Le serveur de dev montre donc la même page
   que la production. */
.rp-page {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 56px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}
.rp-main { min-width: 0; }
.rp-main .wrap { max-width: none; margin: 0; padding: 0; }

/* La colonne suit la lecture : elle colle sous l'en-tête du site (dont la
   hauteur est mesurée par edition.js dans --rp-tete) et défile seule si le
   sommaire est plus haut que l'écran. */
.rp-col {
  position: sticky;
  top: var(--rp-tete, 52px);
  align-self: start;
  max-height: calc(100vh - var(--rp-tete, 52px));
  overflow-y: auto;
  padding: 34px 0 28px;
  font-size: 14px;
  line-height: 1.45;
  scrollbar-width: thin;
}
.rp-col-in { display: flex; flex-direction: column; gap: 26px; }

.rp-col-serie { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.rp-col-libelle {
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
}
.rp-col-nom { font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.rp-col-serie:hover .rp-col-nom { color: var(--accent); }

.rp-col-titre {
  margin: 0 0 10px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}

.rp-eds-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-ed { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.rp-ed-annee {
  display: inline-block; min-width: 54px;
  padding: 5px 10px; border-radius: 6px;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink); text-decoration: none;
}
a.rp-ed-annee:hover { background: var(--surface-2); }
/* L'édition ouverte : la pastille orange pleine du site (celle de son bouton
   d'essai), texte navy. */
.rp-ed-courante .rp-ed-annee {
  background: var(--cz-orange); color: var(--cz-navy);
}
/* À paraître : grisée, pas un lien (un <span>, pas un <a> désactivé). */
.rp-ed-avenir .rp-ed-annee { color: var(--ink-3); opacity: 0.75; padding-left: 10px; }
.rp-ed-note { font-size: 12.5px; color: var(--ink-3); }

/* Le sélecteur d'année ne sert que sur téléphone, et seulement avec
   JavaScript (edition.js pose .rp-js) : sans lui, la liste reste. */
.rp-eds-choix { display: none; }

.rp-som summary { list-style: none; cursor: default; }
.rp-som summary::-webkit-details-marker { display: none; }
.rp-som-liste { list-style: none; margin: 0; padding: 0; }
.rp-som-liste li { margin: 0; }
.rp-som-liste a {
  display: grid; grid-template-columns: 26px 1fr; gap: 4px;
  padding: 7px 0 7px 12px;
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid var(--rule);
  transition: color 140ms ease, border-color 140ms ease;
}
.rp-som-liste a:hover { color: var(--ink); border-left-color: var(--rule-strong); }
.rp-som-n { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); padding-top: 2px; }
/* La section en cours (edition.js, IntersectionObserver), pas le dernier lien
   cliqué : la molette la déplace aussi. */
.rp-som-liste a[aria-current="true"] {
  color: var(--ink); font-weight: 600;
  border-left: 3px solid var(--cz-orange); padding-left: 11px;
}
.rp-som-liste a[aria-current="true"] .rp-som-n { color: var(--accent); }

.rp-col-lien {
  align-self: flex-start;
  font-size: 13.5px; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
}
.rp-col-lien:hover { color: var(--accent); }

.rp-col a:focus-visible, .rp-col select:focus-visible, .rp-col summary:focus-visible {
  outline: 2px solid var(--cz-orange); outline-offset: 2px; border-radius: 4px;
}

/* La progression : un filet orange en haut de la fenêtre, comme sur les
   livres blancs. Décoratif, il répète ce que dit la barre de défilement. */
.rp-progres {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  pointer-events: none;
}
.rp-progres span {
  display: block; height: 100%; width: 0;
  background: var(--cz-orange); will-change: width;
}

/* Le sommaire intégré au document fait double emploi avec la colonne à
   l'écran ; il reste dans le HTML (robots, lecteurs sans colonne) et
   réapparaît à l'impression, où la colonne n'existe pas. */
.rp-page .toc { display: none; }

/* La signature de marque s'emploie une seule fois par écran : l'en-tête du
   site (chrome.js) la porte déjà, collant en haut de chaque écran. Celle du
   bandeau et celle du pied du rapport sont donc masquées à l'écran, sans
   condition (elles restent dans la source pour l'aperçu autonome, et
   reviennent à l'impression, où l'en-tête du site n'existe pas). La ligne
   « Bilan annuel · Première édition · … » reste. */
@media screen {
  .mast .brand, .wrap > footer .sigline { display: none; }
}

/* ═══ Le document (classes de la source) ═══════════════════════════════════ */

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

h1, h2, h3, h4, .sans { font-family: var(--sans); }
.mono, .eyebrow, .fignum, .src, .num, table { font-family: var(--mono); }
.num, td.n, th.n { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}

/* ---------- bandeau ---------- */
.mast { border-bottom: 2px solid var(--ink); padding-block: 38px 24px; }
.mast-top { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.logo { display: block; height: 20px; width: calc(20px * 640 / 70); min-width: 0; }
.logo .lt { fill: var(--logo-ink); }
.logo .fc { fill: var(--logo-facet); }
.brand { display: flex; align-items: center; }
.mast-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-2); letter-spacing: 0.01em; }
h1 {
  font-size: clamp(34px, 5.6vw, 60px); line-height: 1.04; font-weight: 700;
  letter-spacing: -0.035em; margin: 0 0 16px; text-wrap: balance;
}
h1 .yr { color: var(--accent); }
.standfirst {
  font-size: clamp(18px, 2.1vw, 21px); line-height: 1.5; color: var(--ink-2);
  max-width: 58ch; margin: 0 0 4px;
}

/* ---------- chiffres clés ---------- */
.keyfig {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-block: 1px solid var(--rule); margin-block: 0 44px;
}
.keyfig > div { padding: 22px 20px 20px; border-left: 1px solid var(--rule); }
.keyfig > div:first-child { border-left: 0; padding-left: 0; }
.kf-n {
  font-family: var(--sans); font-size: clamp(28px, 3.8vw, 40px); font-weight: 650;
  letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
}
.kf-n.up { color: var(--accent); }
.kf-l { font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-2); margin-top: 10px; }

/* ---------- sommaire intégré (visible à l'impression seulement, voir plus haut) ---------- */
.toc { background: var(--surface-2); border: 1px solid var(--rule); padding: 22px 24px; margin-block: 0 48px; }
.toc ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px; }
.toc li { display: flex; gap: 12px; align-items: baseline; padding: 5px 0; border-bottom: 1px dotted var(--rule-strong); }
.toc a { color: var(--ink); text-decoration: none; font-size: 14.5px; }
.toc .tn { font-family: var(--mono); font-size: 11px; color: var(--ink-3); min-width: 20px; }

/* ---------- sections ---------- */
section { padding-block: 8px 56px; scroll-margin-top: calc(var(--rp-tete, 52px) + 18px); }
.sec-head { display: flex; gap: 16px; align-items: baseline; border-top: 1px solid var(--ink); padding-top: 14px; margin-bottom: 24px; }
.sec-n { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.06em; }
h2 { font-size: clamp(24px, 3.1vw, 32px); font-weight: 650; letter-spacing: -0.025em; line-height: 1.16; margin: 0; text-wrap: balance; }
h3 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; margin: 40px 0 12px; text-wrap: balance; max-width: var(--measure); }
h4 { font-size: 15px; font-weight: 650; margin: 26px 0 6px; }
p { margin: 0 0 18px; max-width: var(--measure); }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 60ch; letter-spacing: -0.01em; }
.lede strong { font-weight: 650; box-shadow: inset 0 -0.42em 0 color-mix(in srgb, var(--cz-orange) 22%, transparent); }
ul, ol { max-width: var(--measure); padding-left: 22px; margin: 0 0 18px; }
li { margin-bottom: 8px; }
strong { font-weight: 650; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
a:hover { color: var(--accent); }
sup a { text-decoration: none; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent); padding: 0 1px; }
a:focus-visible { outline: 2px solid var(--cz-orange); outline-offset: 2px; border-radius: 2px; }

/* ---------- figures ---------- */
figure { margin: 32px 0 36px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 8px; overflow: hidden; }
.fig-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--rule); }
.fignum { font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.fig-title { font-family: var(--sans); font-size: 17px; font-weight: 650; margin: 6px 0 0; letter-spacing: -0.01em; line-height: 1.35; }
.fig-sub { font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin: 5px 0 0; line-height: 1.5; }
.fig-body { padding: 18px 14px 6px; overflow-x: auto; }
figure svg { display: block; width: 100%; height: auto; min-width: 440px; }
figcaption { padding: 11px 20px 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--ink-3); line-height: 1.55; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 2px 20px 16px; }
.lg { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 13px; color: var(--ink-2); }
.sw { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.ax { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-3); }
.axlab { font-family: var(--sans); font-size: 12px; fill: var(--ink-2); }
.val { font-family: var(--mono); font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.valsm { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-2); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.baseline { stroke: var(--rule-strong); stroke-width: 1; }
.hit { fill: transparent; }
[data-tip] { cursor: default; }

details.data { border-top: 1px solid var(--rule); padding: 0 20px; }
details.data summary { font-family: var(--sans); font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 11px 0; list-style: none; }
details.data summary::-webkit-details-marker { display: none; }
details.data summary::before { content: "+ "; color: var(--accent); font-weight: 600; }
details.data[open] summary::before { content: "– "; }
details.data summary:focus-visible { outline: 2px solid var(--cz-orange); outline-offset: 2px; }
details.data table { margin-bottom: 16px; }

/* ---------- tableaux ---------- */
.tw { overflow-x: auto; margin: 26px 0 30px; border: 1px solid var(--rule); background: var(--surface); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 520px; line-height: 1.5; }
th, td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--rule); }
/* --ink-2 et pas --ink-3 : sur --surface-2, --ink-3 tombe à 4,4:1. */
thead th {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--rule-strong);
}
td.n, th.n { text-align: right; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
td.name { font-family: var(--sans); font-size: 13.5px; }

.pill {
  display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.pill.att { background: color-mix(in srgb, var(--s1) 14%, transparent); color: var(--rp-att-texte); }
.pill.err { background: color-mix(in srgb, var(--s2) 14%, transparent); color: var(--rp-err-texte); }
.pill.mix { background: var(--surface-2); color: var(--ink-2); }

/* ---------- méthode ---------- */
/* Tableau des bases de calcul (révision du 2026-09-23) : l'exercice ne se
   coupe pas en « 2022- / 2023 », et l'explication, qui est une phrase, se lit
   en police de texte plutôt qu'en chasse fixe. */
.method .tw td.name { white-space: nowrap; }
.method .tw td:last-child { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }
.method { background: var(--surface); border: 1px solid var(--rule); padding: 28px 28px 14px; box-shadow: var(--shadow); border-radius: 8px; }
.method p, .method ul { max-width: 64ch; }
.limits { list-style: none; padding: 0; counter-reset: lim; max-width: 66ch; }
.limits li { counter-increment: lim; padding: 14px 0 14px 44px; position: relative; border-top: 1px solid var(--rule); margin: 0; }
.limits li:first-child { border-top: 0; }
.limits li::before {
  content: counter(lim, decimal-leading-zero); position: absolute; left: 0; top: 15px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent);
}
.limits b { font-family: var(--sans); font-size: 15px; font-weight: 650; display: block; margin-bottom: 2px; }
.limits span { font-size: 15px; color: var(--ink-2); line-height: 1.55; }

/* ---------- encadrés ---------- */
.callout {
  border-left: 3px solid var(--cz-orange); background: var(--surface);
  padding: 20px 24px; margin: 30px 0; box-shadow: var(--shadow); border-radius: 0 8px 8px 0;
}
.callout p { margin: 0; max-width: 62ch; }
.callout p + p { margin-top: 12px; }
.callout .eyebrow { margin-bottom: 8px; color: var(--accent); }

.verdicts { list-style: none; padding: 0; margin: 28px 0 8px; max-width: none; }
/* Colonne des chiffres à largeur FIXE : chaque <li> est sa propre grille, et
   en `auto` le texte de chaque verdict commençait à une abscisse différente
   selon la longueur du chiffre (583, ×2,1, 3 sur 10…). */
.verdicts li {
  display: grid; grid-template-columns: 200px 1fr; gap: 0 24px; align-items: start;
  border-top: 1px solid var(--rule); padding: 22px 0; margin: 0;
}
.verdicts li:last-child { border-bottom: 1px solid var(--rule); }
.vn {
  font-family: var(--sans); font-size: clamp(26px, 3.4vw, 34px); font-weight: 650;
  letter-spacing: -0.035em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums;
  min-width: 132px; max-width: 200px;
}
.vn small {
  display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 8px; line-height: 1.45;
}
.vt { font-size: 16.5px; line-height: 1.62; }
.vt b { font-family: var(--sans); font-weight: 650; font-size: 17px; display: block; margin-bottom: 4px; color: var(--ink); }
.vt span { color: var(--ink-2); }

/* ---------- fiches d'action ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 30px 0 8px; }
.card { background: var(--surface); border: 1px solid var(--rule); padding: 22px; box-shadow: var(--shadow); border-radius: 8px; }
.card h4 { margin-top: 0; font-size: 15.5px; line-height: 1.4; }
.card ol { padding-left: 18px; margin-bottom: 0; font-size: 15px; }
.card li { color: var(--ink-2); }
.card li b { color: var(--ink); font-family: var(--sans); font-weight: 650; }
.card .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 10px; }

/* ---------- notes et pied du rapport ---------- */
.notes { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 16px; }
.notes ol { font-family: var(--sans); font-size: 13px; color: var(--ink-2); line-height: 1.55; padding-left: 26px; max-width: 74ch; }
.notes li { margin-bottom: 7px; }
.notes a { overflow-wrap: anywhere; }
/* `.wrap > footer`, pas `footer` : le pied du SITE (chrome.js) est aussi un
   <footer>, et hériterait sinon du filet et des marges du rapport. */
.wrap > footer { border-top: 2px solid var(--ink); padding-block: 30px 56px; margin-top: 20px; }
.wrap > footer p { font-size: 15px; color: var(--ink-2); max-width: 62ch; }
.sigline { margin-bottom: 16px; }
.sigline .logo { height: 22px; width: calc(22px * 640 / 70); }
.contact { font-family: var(--mono); font-size: 13px; color: var(--ink); user-select: all; }

/* ---------- pastilles de statut et courbes miniatures ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.5;
}
.chip.crit { color: var(--st-crit); background: color-mix(in srgb, var(--st-crit) 13%, transparent); }
.chip.good { color: var(--st-good); background: color-mix(in srgb, var(--st-good) 13%, transparent); }
.chip.neut { color: var(--st-neut); background: color-mix(in srgb, var(--st-neut) 13%, transparent); }
.spark { display: block; width: 84px; height: 24px; min-width: 0; }
table.causes td { vertical-align: middle; }

/* ---------- tableau des incidents publics ---------- */
table.incidents { min-width: 680px; }
table.incidents td { vertical-align: top; font-family: var(--sans); font-size: 13px; line-height: 1.5; }
table.incidents td.mono { white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
table.incidents td.name { font-weight: 600; min-width: 150px; }
table.incidents .sec { display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--ink-3); letter-spacing: 0.02em; margin-top: 3px; }
table.incidents .src { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); margin-top: 5px; }
table.incidents .src a { color: var(--ink-3); }
table.incidents td:last-child { font-weight: 500; color: var(--ink); min-width: 160px; }

/* Cas hors de la période des données : mention en petites capitales sous
   la date, couleur d'accent (8,3:1 sur la surface). */
table.incidents .hors {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent); white-space: normal;
}

/* ---------- grille de lecture (section 04, révision du 2026-09-23) ----------
   Ce que le registre mesure / l'interprétation proposée / les autres
   scénarios / ce que d'autres sources décrivent / ce qu'on ne peut pas
   conclure. Deux colonnes ; les blocs 1, 4 et 5 sur toute la largeur. Les
   filets sont le fond --rule qui apparaît entre les blocs (gap de 1 px). */
.lecture {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
  margin: 10px 0 30px;
}
.lect-bloc { background: var(--surface); padding: 18px 20px; }
.lect-bloc:first-child, .lect-bloc:nth-child(4), .lect-bloc:last-child { grid-column: 1 / -1; }
.lect-t {
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 8px;
}
.lect-bloc p:not(.lect-t) { margin: 0; font-size: 15.5px; line-height: 1.6; max-width: none; }
@media (max-width: 760px) {
  .lecture { grid-template-columns: 1fr; }
}

/* ---------- infobulle des figures (infobulle.js) ---------- */
.rp-tip {
  position: fixed; z-index: 70; pointer-events: none; opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  max-width: min(320px, calc(100vw - 24px));
  background: var(--cz-slate-2); color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 7px 10px; border-radius: 6px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.45;
  box-shadow: 0 8px 22px -8px rgb(0 0 0 / 0.6);
  transition: opacity 90ms ease;
}
.rp-tip.on { opacity: 1; }

/* ═══ Tablette et téléphone ════════════════════════════════════════════════
   Sous 1100 px, la colonne n'a plus la place d'être à côté du texte. Elle
   devient une barre collée sous l'en-tête du site : l'année à gauche (un
   sélecteur), le sommaire repliable à droite. */
@media screen and (max-width: 1099px) {
  .rp-page { display: block; padding: 0 20px; }
  .rp-col {
    top: var(--rp-tete, 45px);
    z-index: 40;
    max-height: none; overflow: visible;
    margin: 0 -20px; padding: 8px 20px;
    background: color-mix(in srgb, var(--ground) 94%, transparent);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    font-size: 14px;
  }
  .rp-col-in { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .rp-col-serie, .rp-col-lien { display: none; }
  .rp-eds .rp-col-titre { display: none; }
  .rp-eds-liste { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .rp-ed-note { display: none; }

  .rp-js .rp-eds-liste { display: none; }
  .rp-js .rp-eds-choix { display: inline-flex; align-items: center; gap: 8px; }
  .rp-eds-choix-l {
    font-size: 11px; font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  }
  /* Étroit : l'année et le bouton du sommaire doivent tenir sur UNE ligne à
     360 px, sans quoi la barre collée mange deux lignes d'écran. */
  .rp-eds-choix select {
    width: 96px;
    font: 600 14px/1.2 var(--mono); color: var(--ink);
    background: var(--surface); border: 1px solid var(--rule-strong); border-radius: 6px;
    padding: 6px 8px 6px 10px; min-height: 36px;
  }

  .rp-som { margin-left: auto; position: relative; }
  .rp-som summary.rp-col-titre {
    display: inline-flex; align-items: center; gap: 8px; margin: 0;
    min-height: 36px; padding: 6px 12px; border: 1px solid var(--rule-strong); border-radius: 6px;
    background: var(--surface); color: var(--ink); cursor: pointer;
    font-size: 12px; letter-spacing: 0.1em;
  }
  .rp-som summary.rp-col-titre::after {
    content: ""; width: 7px; height: 7px; margin-top: -3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); transition: transform 140ms ease;
  }
  .rp-som[open] summary.rp-col-titre::after { transform: rotate(-135deg); margin-top: 3px; }
  .rp-som-liste {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: min(340px, calc(100vw - 40px));
    max-height: 62vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
    box-shadow: 0 16px 36px -12px rgb(0 0 0 / 0.6);
    padding: 8px 12px 8px 4px;
  }

  section { scroll-margin-top: calc(var(--rp-tete, 45px) + 72px); }
  .mast { padding-block: 26px 20px; }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .keyfig { grid-template-columns: repeat(2, 1fr); }
  .keyfig > div { border-left: 1px solid var(--rule); padding-left: 16px; }
  .keyfig > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .keyfig > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .toc ol { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .verdicts li { grid-template-columns: 1fr; gap: 10px; }
  .vn { min-width: 0; max-width: none; }
  .method { padding: 20px 18px 8px; }
  .lede { font-size: 18.5px; }
  .fig-head, figcaption { padding-inline: 16px; }
  .legend { padding-inline: 16px; }
  .fig-body { padding-inline: 8px; }
  /* Sur téléphone, une figure tient dans la largeur plutôt que de déborder à
     droite (avec 440 px minimum, la figure 2 perdait ses étiquettes de fin de
     courbe hors écran). Les étiquettes d'axe et de valeur grossissent un peu
     pour compenser la réduction ; les tailles sont en unités du viewBox, et
     restent sous celles qui feraient déborder le texte le plus long de chaque
     figure (« Soins de santé et assistance sociale », « 62,8 % Attaque »).
     Les valeurs exactes restent dans « Voir les données » et sur le tableau. */
  figure svg { min-width: 0; }
  .ax { font-size: 13px; }
  .axlab { font-size: 13.5px; }
  .valsm { font-size: 12.5px; }
}

/* ═══ Tableaux en fiches sur téléphone (retour de JF, 2026-09-24) ═══════════
   Sous 640 px, un tableau large se lisait en défilant à droite. Chaque ligne
   devient une fiche : la première cellule en titre, les autres en paires
   « EN-TÊTE ……… valeur ». L'en-tête vient de data-label, posé sur chaque
   cellule par la source (script du maître français avant le gel,
   etiquettes.py pour l'anglais). Les colonnes de texte (classe `long`)
   passent sous leur étiquette, alignées à gauche. Le <thead> reste lisible
   des lecteurs d'écran, masqué à l'œil. */
@media screen and (max-width: 640px) {
  .tw { overflow: visible; border: 0; background: none; border-radius: 0; margin: 18px 0 24px; }
  .tw table, details.data table { min-width: 0; font-size: 13px; }
  .tw thead, details.data thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tw tbody, .tw tr, .tw td, details.data tbody, details.data tr, details.data td { display: block; }
  .tw tr, details.data tr {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 8px;
    padding: 10px 14px 8px; margin: 0 0 10px;
  }
  .tw td, details.data td { border: 0; padding: 4px 0; text-align: right; overflow: hidden; }
  .tw td[data-label]::before, details.data td[data-label]::before {
    content: attr(data-label); float: left; margin-right: 14px;
    font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-2); line-height: 2;
  }
  .tw td:first-child, details.data td:first-child {
    text-align: left; font-family: var(--sans); font-size: 15px; font-weight: 650;
    padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); white-space: normal;
  }
  .tw td:first-child::before, details.data td:first-child::before { content: none; }
  .tw td.long, details.data td.long { text-align: left; }
  /* Même spécificité que la règle d'étiquette flottante ci-dessus, et placée
     après : sinon le tableau des bases (dans « Détails de méthode ») gardait
     l'étiquette à gauche et le texte en habillage. */
  .tw td.long::before, details.data td.long[data-label]::before { float: none; display: block; line-height: 1.6; margin-bottom: 2px; }
  .tw td .spark { margin-left: auto; }
  .method .tw td.name { white-space: normal; }
  table.incidents td.mono { white-space: normal; }
  table.incidents td.name, table.incidents td:last-child { min-width: 0; }
  tbody tr:hover { background: var(--surface); }
}

/* ═══ Impression ═══════════════════════════════════════════════════════════
   Pas de PDF versionné : la page HTML est la version officielle, le
   navigateur l'imprime. La colonne, la barre et l'infobulle disparaissent ;
   le sommaire intégré et la signature du rapport reviennent. */
@media print {
  /* Encre sur papier : la palette claire, validée elle aussi le 2026-09-23
     (validate_palette.js --mode light --surface #FFFFFF, toutes paires :
     daltonisme ΔE 9,9, vision normale ΔE 16,1, contraste 3:1, tout PASSE ;
     rampe ordinale --mode light : PASSE). Texte orange en variante foncée
     (5,0:1 sur blanc), comme les livres blancs. */
  :root {
    color-scheme: light;
    --ground: var(--cz-white);
    --surface: var(--cz-white);
    --surface-2: color-mix(in srgb, var(--cz-fog) 70%, var(--cz-white));
    --ink: var(--cz-navy);
    --ink-2: var(--cz-stone);
    --ink-3: #636C7E;
    --rule: color-mix(in srgb, var(--cz-navy) 12%, var(--cz-white));
    --rule-strong: color-mix(in srgb, var(--cz-navy) 28%, var(--cz-white));
    --grid: color-mix(in srgb, var(--cz-navy) 7%, var(--cz-white));
    --accent: #A94F06;
    --logo-ink: var(--cz-navy);
    --rp-att-texte: #A94F06;
    --rp-err-texte: #1A5E98;
    --s1: var(--cz-orange-deep);
    --s2: #1F6FB2;
    --s3: #907AE9;
    --s4: #7B3577;
    --seq1: #EAA262;
    --seq2: #D0741C;
    --seq3: #9A4A08;
    --st-crit: #B3302A;
    --st-good: #177A40;
    --st-neut: #735216;
  }
  body { background: var(--cz-white); color: var(--cz-navy); font-size: 11pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rp-col, .rp-progres, .rp-tip { display: none !important; }
  .rp-page { display: block; max-width: none; padding: 0; }
  .rp-page .toc { display: block; }
  .mast .brand, .wrap > footer .sigline { display: block; }
  .wrap { max-width: none; padding-inline: 0; }
  figure, .card, .callout, .method, .tw, .keyfig, .verdicts li, .limits li, .lecture { break-inside: avoid; page-break-inside: avoid; }
  #recommandations, #methode { break-before: page; page-break-before: always; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  figure svg { min-width: 0; }
  table { min-width: 0; font-size: 9pt; }
  a { text-decoration: none; color: inherit; }
  figure, .card, .callout, .method { box-shadow: none; }
  .toc { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
