/* ==========================================================================
   SOURCE · identité graphique commune à tous les numéros
   Layout : une suite de « doubles pages » pleine largeur ; texte sur une
   colonne de lecture, documents et chiffres en regard ; un seul fluo par
   numéro (--fluo), qui sert à surligner ce qui a été vérifié.
   ========================================================================== */

:root {
  /* Papier et encre */
  --paper: #f3f4f1;
  --paper-2: #e8eae5;
  --paper-3: #dde0da;
  --ink: #141a2c;
  --ink-2: #454c62;
  --ink-3: #626a80;
  --rule: #c7cbd2;
  --encre: #1f3a93;          /* bleu tampon : liens, logotype */
  --fluo: #e4ff3a;           /* le surligneur du numéro */
  --on-fluo: #141a2c;
  --cover: #141a2c;
  --on-cover: #f3f4f1;
  --on-cover-2: #b9bfd0;

  /* Verdicts (sémantiques, toujours accompagnés du mot) */
  --v-vrai: #17663f;
  --v-plutot: #3b6a1a;
  --v-nuance: #875100;
  --v-exag: #ad3f0b;
  --v-faux: #b02218;
  --v-nd: #5a6176;

  /* Données : une série = encre ; rampe ordinale validée (clair → foncé) */
  --series: #1f3a93;
  --q1: #86a3e3;
  --q2: #5a7fd2;
  --q3: #3457b5;
  --q4: #1a2f78;
  --grid: #d3d6dc;

  /* Typographie */
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1.0625rem;
  --t-lg: 1.375rem;
  --t-xl: clamp(1.75rem, 3.4vw, 2.5rem);
  --t-2xl: clamp(2.4rem, 6vw, 4.5rem);
  --t-3xl: clamp(3.1rem, 10.5vw, 8.75rem);

  --measure: 36rem;
  --gutter: clamp(16px, 4.5vw, 56px);
  --page: 1240px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #11141d;
    --paper-2: #191d29;
    --paper-3: #232838;
    --ink: #eceef3;
    --ink-2: #b6bbca;
    --ink-3: #8f95a9;
    --rule: #303648;
    --encre: #9bb0ff;
    --fluo: #dcf53b;
    --on-fluo: #11141d;
    --cover: #0a0c12;
    --on-cover: #eceef3;
    --on-cover-2: #a3a9bb;
    --v-vrai: #5fd19a;
    --v-plutot: #a5d878;
    --v-nuance: #f0b44c;
    --v-exag: #ff9466;
    --v-faux: #ff7d70;
    --v-nd: #a0a6b9;
    --series: #8ea8ff;
    --q1: #3b5bbf;
    --q2: #5f82dc;
    --q3: #8ea9f0;
    --q4: #c3d3fa;
    --grid: #2b3142;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #11141d;
  --paper-2: #191d29;
  --paper-3: #232838;
  --ink: #eceef3;
  --ink-2: #b6bbca;
  --ink-3: #8f95a9;
  --rule: #303648;
  --encre: #9bb0ff;
  --fluo: #dcf53b;
  --on-fluo: #11141d;
  --cover: #0a0c12;
  --on-cover: #eceef3;
  --on-cover-2: #a3a9bb;
  --v-vrai: #5fd19a;
  --v-plutot: #a5d878;
  --v-nuance: #f0b44c;
  --v-exag: #ff9466;
  --v-faux: #ff7d70;
  --v-nd: #a0a6b9;
  --series: #8ea8ff;
  --q1: #3b5bbf;
  --q2: #5f82dc;
  --q3: #8ea9f0;
  --q4: #c3d3fa;
  --grid: #2b3142;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-md);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--encre); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }

.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Petits textes utilitaires */
.kicker, .label, .tag, .meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.meta { color: var(--ink-3); text-transform: none; letter-spacing: 0.02em; }

/* ---------- Surligneur : la signature de SOURCE ---------- */
.hl {
  color: var(--on-fluo);
  background-image: linear-gradient(100deg, transparent 0.15em, var(--fluo) 0.2em, var(--fluo) calc(100% - 0.25em), transparent calc(100% - 0.15em));
  background-size: 100% 74%;
  background-position: 0 62%;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-inline: 0.15em;
  margin-inline: -0.15em;
}

/* ---------- En-tête du magazine ---------- */
.masthead {
  background: var(--cover);
  color: var(--on-cover);
  border-bottom: 1px solid color-mix(in srgb, var(--on-cover) 18%, transparent);
}
.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 14px;
}
.logo {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 112%;
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--on-cover);
  text-decoration: none;
}
.logo span { color: var(--fluo); }
.masthead .meta { color: var(--on-cover-2); }

/* ---------- Couverture ---------- */
.cover {
  background: var(--cover);
  color: var(--on-cover);
  overflow: hidden;
}
.cover .wrap {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(32px, 6vw, 72px) clamp(32px, 5vw, 56px);
  align-items: end;
}
.cover .kicker { color: var(--fluo); }
.cover h1 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 68%;
  font-size: var(--t-3xl);
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-block: 18px 22px;
}
.cover h1 .hl { color: var(--on-fluo); }
.cover .dek {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.45;
  max-width: 34rem;
  color: var(--on-cover);
}
.coverlines {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--on-cover) 25%, transparent);
}
.coverlines li { border-bottom: 1px solid color-mix(in srgb, var(--on-cover) 25%, transparent); }
.coverlines li:nth-child(odd) { border-right: 1px solid color-mix(in srgb, var(--on-cover) 25%, transparent); }
.coverlines a {
  display: block;
  padding: 14px 16px 14px 0;
  color: var(--on-cover);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 88%;
  font-size: 1.05rem;
  line-height: 1.25;
}
.coverlines li:nth-child(even) a { padding-left: 16px; }
.coverlines a:hover { color: var(--fluo); }
.coverlines a, .toc strong, .toc span, .figure .sub, .dek { text-wrap: pretty; }
.coverlines .label { display: block; color: var(--on-cover-2); margin-bottom: 4px; font-weight: 400; }

/* L'emploi du temps de couverture */
.timetable {
  display: grid;
  grid-template-columns: auto repeat(5, minmax(0, 1fr));
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
}
.timetable .day, .timetable .hour {
  color: var(--on-cover-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  align-self: center;
}
.timetable .day { text-align: center; padding-bottom: 2px; }
.timetable .hour { text-transform: none; letter-spacing: 0.02em; }
.timetable .hour { padding-right: 6px; text-align: right; }
.timetable .slot {
  border: 1px solid color-mix(in srgb, var(--on-cover) 35%, transparent);
  border-radius: 3px;
  min-height: 34px;
  display: grid;
  place-items: center;
  color: var(--on-cover);
}
.timetable .slot.free { border-style: solid; border-color: color-mix(in srgb, var(--on-cover) 12%, transparent); color: transparent; }
.timetable .slot.new {
  background: var(--fluo);
  border-color: var(--fluo);
  color: var(--on-fluo);
  font-weight: 600;
}
.tt-caption {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--on-cover-2);
}
.tt-count {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 70%;
  line-height: 0.9;
}
.tt-count .from { font-size: 3.4rem; color: var(--on-cover-2); text-decoration: line-through; text-decoration-thickness: 4px; }
.tt-count .arrow { font-size: 2rem; color: var(--on-cover-2); }
.tt-count .to { font-size: 4.6rem; color: var(--fluo); }
.tt-count .unit { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 500; color: var(--on-cover-2); text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Édito : le mot d'accueil, dans la voix de SOURCE ---------- */
.edito-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.edito .section-head { margin-bottom: clamp(16px, 2.4vw, 26px); }
.edito-corps { max-width: var(--measure); display: grid; gap: 0.9em; font-size: 1.12rem; line-height: 1.6; }
.edito-corps p { hyphens: auto; }
.signature { margin-top: 20px; font-style: italic; font-size: 1.1rem; }
.source-mode { border: 2px solid var(--ink); background: var(--paper-2); padding: 18px 20px 20px; display: grid; gap: 14px; }
.source-mode h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 1.6rem; line-height: 0.95; }
.source-mode ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: mode; }
.source-mode li { counter-increment: mode; position: relative; padding-left: 34px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); }
.source-mode li::before { content: counter(mode); position: absolute; left: 0; top: -0.1em; font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: 1.7rem; line-height: 1; color: var(--encre); }
.source-mode li b { display: block; font-family: var(--f-display); font-stretch: 92%; font-weight: 800; font-size: 1rem; color: var(--ink); }

/* « Ce que tout le monde se demande » : questions tendances (outils/questions.py), réponse courte et rubrique */
.questions-lecteurs { margin-top: 32px; border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 12px; max-width: 58rem; }
.questions-lecteurs h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: 1.5rem; line-height: 0.95; }
.questions-lecteurs ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 0 28px; }
.questions-lecteurs li { border-top: 1px solid var(--rule); padding: 10px 0 12px; display: grid; gap: 4px; align-content: start; }
.questions-lecteurs .q { font-family: var(--f-display); font-stretch: 92%; font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.questions-lecteurs .r { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.questions-lecteurs .voir { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
/* « Fait avec une IA » : ce que l'IA a fait, ce qui a été vérifié (rubrique Méthode) */
.limit.ia { border-color: var(--encre); }
.limit.ia .label { color: var(--encre); }

/* ---------- Sommaire ---------- */
.toc { border-bottom: 1px solid var(--rule); }
.toc .wrap { padding-block: 28px 32px; }
.toc h2 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 14px; }
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 0 28px;
  counter-reset: toc;
}
.toc li { counter-increment: toc; border-top: 1px solid var(--rule); }
.toc a {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 2px 6px;
  padding-block: 10px;
  text-decoration: none;
  color: var(--ink);
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  padding-top: 4px;
  grid-row: span 2;
}
.toc strong { font-family: var(--f-display); font-stretch: 90%; font-weight: 800; font-size: 1.02rem; line-height: 1.2; }
.toc span { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; }
.toc a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; }
/* Parties du fil conducteur : Comprendre, Vérifier, Aller plus loin */
.toc li.partie { counter-increment: none; grid-column: 1 / -1; border-top: 0; padding: 18px 0 6px; font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--encre); }
.toc li.partie:first-child { padding-top: 0; }
.toc li.partie span { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0.02em; font-family: var(--f-text); font-style: italic; font-size: var(--t-sm); margin-left: 8px; }

/* ---------- Rubriques ---------- */
.section { padding-block: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--rule); }
.section.alt { background: var(--paper-2); }
.section-head { display: grid; gap: 10px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 52rem; }
.section-head .kicker { color: var(--encre); }
.section-head h2 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 72%;
  font-size: var(--t-2xl);
  line-height: 0.92;
  text-transform: uppercase;
}
.section-head .dek { font-size: var(--t-lg); line-height: 1.4; color: var(--ink-2); font-style: italic; max-width: var(--measure); }

.prose { max-width: var(--measure); display: grid; gap: 1em; }
.prose p { hyphens: auto; }
.lead::first-letter {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 70%;
  float: left;
  font-size: 4.2em;
  line-height: 0.8;
  padding: 0.06em 0.08em 0 0;
  color: var(--encre);
}

/* Appels de source */
.ref {
  font-family: var(--f-mono);
  font-size: 0.68em;
  font-weight: 600;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  padding-inline: 0.12em;
  color: var(--encre);
}
.refs { white-space: nowrap; }
.refs .ref + .ref { padding-left: 0; }
.refs .ref + .ref::before { content: ","; color: var(--ink-3); margin-right: 0.1em; }
.ord { font-size: 0.66em; line-height: 0; position: relative; top: -0.42em; vertical-align: baseline; }

/* Types de sources */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.66rem;
  padding: 3px 7px 2px;
  border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.3;
}
.tag::before { content: ""; width: 7px; height: 7px; background: currentColor; display: inline-block; }
.tag.t-officiel { color: var(--encre); }
.tag.t-officiel::before { border-radius: 0; }
.tag.t-donnee::before { border-radius: 50%; }
.tag.t-etude::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tag.t-presse { color: var(--ink-2); }
.tag.t-presse::before { height: 2px; }
.tag.t-declaration { color: var(--ink-2); }
.tag.t-declaration::before { border-radius: 50% 50% 50% 0; }
.tag.t-donnee, .tag.t-etude { color: var(--ink); }

/* ---------- Tampon de verdict ---------- */
.stamp {
  --c: var(--v-nd);
  display: inline-grid;
  place-items: center;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--c);
  border: 3px double var(--c);
  padding: 8px 12px 7px;
  border-radius: 4px;
  transform: rotate(-4deg);
  white-space: nowrap;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='120' height='60' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stamp[data-v="vrai"] { --c: var(--v-vrai); }
.stamp[data-v="plutot"] { --c: var(--v-plutot); }
.stamp[data-v="nuance"] { --c: var(--v-nuance); }
.stamp[data-v="exagere"] { --c: var(--v-exag); }
.stamp[data-v="faux"] { --c: var(--v-faux); }
.stamp[data-v="nd"] { --c: var(--v-nd); }
.stamp.sm { font-size: 0.78rem; padding: 5px 8px 4px; border-width: 3px; transform: rotate(-3deg); }

/* ---------- Légendes de méthode ---------- */
.legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 28px 48px;
  margin-top: 36px;
}
.legend-grid h3 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 12px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legend-list li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }
.legend-list li > :first-child { justify-self: start; }

/* ---------- Chronologie ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 58rem; }
.timeline li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 4px 28px;
  padding-block: 18px;
  border-top: 1px solid var(--rule);
  position: relative;
}
.timeline time {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.15rem;
  line-height: 1.2;
}
.timeline .ev { display: grid; gap: 8px; }
.timeline .ev p { max-width: var(--measure); }
.timeline .ev .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline li.hot time { color: var(--on-fluo); }
.timeline li.hot time span { background: var(--fluo); padding: 0 0.2em; }
.timeline .phase {
  grid-column: 1 / -1;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  border-top: 2px solid var(--ink);
  padding-top: 10px;
}

/* ---------- Revendications + qui décide ---------- */
.demands { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.demand-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.demand-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 12px; padding-block: 12px; border-top: 1px solid var(--rule); }
.demand-list li::before {
  content: attr(data-n);
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--encre);
}
.demand-list strong { font-family: var(--f-display); font-stretch: 92%; font-weight: 800; font-size: 1.05rem; display: block; line-height: 1.25; }
.demand-list span { font-size: var(--t-sm); color: var(--ink-2); }
.who { display: grid; gap: 12px; }
.who h3 { font-family: var(--f-display); font-stretch: 80%; font-weight: 900; text-transform: uppercase; font-size: 1.6rem; line-height: 1; }
.power {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 16px 18px;
  display: grid;
  gap: 6px;
}
.power .label { color: var(--ink-3); }
.power h4 { font-family: var(--f-display); font-stretch: 90%; font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.power ul { margin: 0; padding-left: 1.1em; font-size: var(--t-sm); color: var(--ink-2); }
.power .demand-ids { display: flex; gap: 6px; flex-wrap: wrap; }
.power .demand-ids b {
  font-family: var(--f-mono); font-size: 0.7rem; font-weight: 600;
  background: var(--fluo); color: var(--on-fluo); padding: 2px 6px; border-radius: 2px;
}
.callout { font-size: var(--t-sm); color: var(--ink-2); border-left: 3px solid var(--encre); padding-left: 14px; }

/* ---------- Au crible : doubles pages de vérification ---------- */
.check {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px);
  padding-block: clamp(36px, 5vw, 64px);
  border-top: 2px solid var(--ink);
  align-items: start;
}
.check:first-of-type { border-top-width: 2px; }
.check.flip > .check-text { order: 2; }
.check.flip > .check-fig { order: 1; }
.check-text { display: grid; gap: 16px; min-width: 0; }
.claim-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; }
.claim {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 84%;
  font-size: var(--t-xl);
  line-height: 1.04;
  quotes: "«\00a0" "\00a0»";
}
.claim::before { content: open-quote; color: var(--ink-3); }
.claim::after { content: close-quote; color: var(--ink-3); }
.said-by { color: var(--ink-3); }
.check-fig { min-width: 0; display: grid; gap: 16px; }

.doc {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--encre);
  padding: 16px 18px 18px;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
}
.section.alt .doc { background: var(--paper); }
.doc .label { color: var(--encre); font-weight: 600; }
.doc .title { color: var(--ink); font-weight: 500; }

.briefs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 clamp(28px, 4vw, 56px); border-top: 2px solid var(--ink); }
.brief { display: grid; gap: 14px; padding-block: 28px; border-bottom: 1px solid var(--rule); align-content: start; }
.brief .claim { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }

/* ---------- Figures et graphiques ---------- */
.figure { display: grid; gap: 10px; }
.figure h3 { font-family: var(--f-display); font-stretch: 92%; font-weight: 800; font-size: 1.1rem; line-height: 1.25; }
.figure .sub { font-size: var(--t-sm); color: var(--ink-2); }
.figure figcaption, .fig-note { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; }

/* Capture d'une source (outils/capturer.py) : la page telle qu'on l'a lue, passage surligné */
.capture { margin: 0; display: grid; gap: 8px; }
.capture-frame { border: 1.5px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); }
.capture-bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--ink); background: var(--paper-2); font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capture-bar::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fluo); box-shadow: 0 0 0 1px var(--ink); }
.capture img { display: block; width: 100%; height: auto; }
.capture figcaption { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- Images (outils/images.py) ----------
   Une image entre dans un numéro parce qu'elle montre ou prouve quelque chose,
   jamais pour décorer. Toujours une légende (qui ou quoi, où, quand, ce qu'on y voit),
   un crédit avec la licence, et aucun trucage. Les images ne sont jamais recadrées
   par le CSS : l'outil les livre au bon format, pour que les repères restent en place. */
.image-cadre { position: relative; display: block; line-height: 0; }
.image-cadre img { display: block; width: 100%; height: auto; }
figure figcaption b { font-family: var(--f-display); font-stretch: 92%; font-weight: 800; color: var(--ink); }
.credit { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 0.64rem; line-height: 1.4; color: var(--ink-3); }
.credit a { color: inherit; }

/* Photo dans une colonne */
.photo { margin: 0; display: grid; gap: 8px; }
.photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
.photo figcaption { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }

/* Citation d'une image protégée (outils/images.py citer) : le texte l'analyse.
   Étiquette « Citation » sur l'image, ayant droit le long du bord, légende marquée au fluo. */
.citation .image-cadre { border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1.5px var(--ink); }
.citation .image-cadre img { border-radius: 0; }
.citation-tag {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 4px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  border-bottom-right-radius: 4px;
}
.citation-tag::before { content: "«"; color: var(--fluo); font-family: var(--f-display); font-weight: 900; font-size: 1.25em; line-height: 0.8; }
.ayant-droit {
  position: absolute;
  right: 0;
  bottom: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 8px 4px;
  background: rgb(10 12 18 / 0.66);
  color: #f3f4f1;
  font-family: var(--f-mono);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}
.citation figcaption, figcaption.citation { border-left: 3px solid var(--fluo); padding-left: 10px; }

/* Repères numérotés posés sur l'image (--x, --y en % de l'image) et leur légende */
.repere {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fluo);
  color: var(--on-fluo);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px var(--paper);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 0.85rem;
  line-height: 1;
}
.reperes-legende { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: repere; font-size: var(--t-sm); line-height: 1.4; }
.reperes-legende li { counter-increment: repere; position: relative; padding-left: 30px; min-height: 20px; }
.reperes-legende li::before {
  content: counter(repere);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fluo);
  color: var(--on-fluo);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 0.72rem;
  line-height: 1;
}

/* Grande image d'ouverture, en tête de rubrique */
.ouverture { margin: 0 0 clamp(24px, 4vw, 44px); display: grid; gap: 10px; }
.ouverture img { border-radius: 4px; }
.ouverture figcaption { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; max-width: 52rem; }

/* Page image : une image forte sur toute une page, entre deux rubriques */
.page-image { background: var(--cover); color: var(--on-cover); border-bottom: 1px solid var(--rule); }
.page-image figure { margin: 0 auto; max-width: var(--page); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; }
.page-image figcaption { padding: clamp(24px, 4vw, 48px) var(--gutter); display: grid; gap: 14px; align-content: end; }
.page-image .kicker { color: var(--fluo); }
.page-image h2 { font-family: var(--f-display); font-weight: 900; font-stretch: 72%; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 0.92; }
.page-image figcaption p { font-size: var(--t-md); line-height: 1.5; color: var(--on-cover); }
.page-image figcaption b { color: var(--on-cover); }
.page-image .reperes-legende { color: var(--on-cover); }
.page-image .credit { color: var(--on-cover-2); }
.page-image .ref { color: var(--fluo); }
.page-image .repere { box-shadow: 0 0 0 2px var(--cover); }

/* Planche : deux à quatre images numérotées, légendes regroupées */
.planche { margin: 0; display: grid; gap: 10px; }
.planche-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 6px; }
.planche-grille img { border-radius: 3px; }
.planche .numero {
  position: absolute;
  left: 6px;
  top: 6px;
  min-width: 22px;
  height: 22px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 2px;
}
.planche-legendes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: planche; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.4; }
.planche-legendes li { counter-increment: planche; position: relative; padding-left: 22px; }
.planche-legendes li::before { content: counter(planche); position: absolute; left: 0; top: 0; font-family: var(--f-display); font-weight: 900; color: var(--ink); }

/* Avant / après : côte à côte ; à l'écran, magazine.js ajoute un curseur */
.avant-apres { margin: 0; display: grid; gap: 10px; }
.aa-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; position: relative; }
.aa-images img { border-radius: 3px; }
.aa-date {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 6px 3px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.aa-images > :last-child .aa-date { background: var(--fluo); color: var(--on-fluo); }
.avant-apres figcaption { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.avant-apres.curseur .aa-images { grid-template-columns: minmax(0, 1fr); gap: 0; }
.avant-apres.curseur .aa-images > :nth-child(2) { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.avant-apres.curseur .aa-images > :nth-child(2) .aa-date { left: auto; right: 8px; }
.aa-poignee { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; transform: translateX(-50%); background: var(--fluo); box-shadow: 0 0 0 1px var(--ink); pointer-events: none; }
.aa-poignee::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--fluo); border: 2px solid var(--ink); }
.aa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.aa-curseur:focus-visible + .aa-poignee::after { outline: 3px solid var(--encre); outline-offset: 2px; }
/* Portrait dans une fiche .power */
.power.avec-portrait { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.power.avec-portrait > :not(.portrait) { grid-column: 2; }
.power.avec-portrait > .portrait { grid-column: 1; grid-row: 1 / span 4; margin: 0; }
.portrait img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 4px; border: 1.5px solid var(--ink); }

.waffle {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  max-width: 340px;
}
.waffle .cell { aspect-ratio: 1; border-radius: 2px; max-width: 100%; }
.waffle .cell:hover, .waffle .cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.key li { display: grid; grid-template-columns: 14px 3.2rem 4.8rem minmax(0, 1fr); gap: 10px; align-items: baseline; font-size: var(--t-sm); }
.key .sw { width: 14px; height: 14px; border-radius: 2px; align-self: center; }
.key .n { font-family: var(--f-display); font-weight: 800; font-stretch: 90%; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.key .amt { font-family: var(--f-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.key .what { color: var(--ink-2); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--f-mono); font-size: 11px; fill: var(--ink-3); }
.chart .val { fill: var(--ink); font-weight: 600; font-size: 12px; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; }
.chart .axis { stroke: var(--ink-3); stroke-width: 1; }
.chart .bar { fill: var(--series); }
.chart .bar:hover, .chart .bar:focus-visible { fill: color-mix(in srgb, var(--series) 78%, var(--paper)); outline: none; }
.chart .refline { stroke: var(--v-exag); stroke-width: 2; }
.chart .reflabel { fill: var(--ink); font-weight: 600; }
.chart .na { fill: var(--ink-3); font-style: italic; }

.hbars { display: grid; gap: 16px; }
.hbar { display: grid; gap: 6px; }
.hbar .lbl { font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2); }
.hbar .lbl b { color: var(--ink); font-weight: 600; }
.hbar .track { display: flex; align-items: center; gap: 10px; }
.hbar .fill {
  height: 22px;
  background: var(--series);
  border-radius: 0 4px 4px 0;
  min-width: 3px;
  flex: none;
}
.hbar .fill:hover, .hbar .fill:focus-visible { background: color-mix(in srgb, var(--series) 78%, var(--paper)); outline: none; }
.hbar .fill.hl { background: var(--fluo); box-shadow: inset 0 0 0 1.5px var(--ink); } /* barre mise en avant : "hl": true dans les données */
.hbar .v { font-family: var(--f-display); font-weight: 800; font-stretch: 90%; font-size: 1.05rem; white-space: nowrap; }

.range { display: grid; gap: 12px; }
.range-axis { position: relative; height: 18px; margin-inline: 6px; border-bottom: 1px solid var(--ink-3); }
.range-axis span { position: absolute; bottom: 4px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }
.range-axis span:first-child { transform: none; }
.range-axis span:last-child { transform: translateX(-100%); }
.range-row { display: grid; gap: 4px; }
.range-row .lbl { font-size: var(--t-sm); line-height: 1.35; color: var(--ink-2); }
.range-row .lbl b { color: var(--ink); font-weight: 600; }
.range-row .vals { font-family: var(--f-mono); font-size: 0.76rem; color: var(--ink); white-space: nowrap; }
.range-track {
  position: relative;
  height: 16px;
  margin-inline: 6px;
  background-image: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 20%);
  background-size: calc(100% + 1px) 100%;
}
.range-track .seg { position: absolute; top: 7px; height: 2px; background: var(--q1); }
.range-track .dot { position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; }
.range-track .dot.lo { background: var(--series); box-shadow: 0 0 0 2px var(--paper); }
.range-track .dot.hi { background: var(--paper); border: 2.5px solid var(--series); }
.range-track .dot:hover, .range-track .dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.range-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-2); }
.range-legend span { display: inline-flex; align-items: center; gap: 6px; }
.range-legend .key-lo::before, .range-legend .key-hi::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.range-legend .key-lo::before { background: var(--series); }
.range-legend .key-hi::before { border: 2px solid var(--series); }

/* Échelle de couverture (barres sur fond sombre) */
.cover-scale { display: grid; gap: 14px; }
.cover-scale .row { display: grid; gap: 5px; }
.cover-scale .what { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-cover-2); }
.cover-scale .what b { font-family: var(--f-display); font-weight: 800; font-stretch: 90%; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--on-cover); }
.cover-scale .bar { height: 14px; background: color-mix(in srgb, var(--on-cover) 12%, transparent); border-radius: 0 3px 3px 0; position: relative; }
.cover-scale .bar i { position: absolute; inset: 0 auto 0 0; background: var(--fluo); border-radius: 0 3px 3px 0; }
.cover-scale .ticks { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 0.62rem; color: var(--on-cover-2); }

.data-table { margin-top: 4px; }
.data-table summary { font-family: var(--f-mono); font-size: 0.72rem; color: var(--encre); cursor: pointer; text-transform: uppercase; letter-spacing: 0.08em; }
.data-table table { border-collapse: collapse; margin-top: 8px; font-size: var(--t-sm); font-variant-numeric: tabular-nums; width: 100%; }
.data-table th, .data-table td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--rule); }
.data-table th { font-family: var(--f-mono); font-size: 0.7rem; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.table-scroll { overflow-x: auto; }

/* Chiffres clés */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; border-top: 1px solid var(--ink); }
.stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 4px; padding: 14px 16px 16px 0; border-bottom: 1px solid var(--rule); align-content: start; }
.stat .label { align-self: end; }
.brief .stats .stat { border-bottom: 0; padding-bottom: 0; }
.stat .label { color: var(--ink-3); font-size: 0.66rem; }
.stat .value { font-family: var(--f-display); font-weight: 800; font-stretch: 100%; font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height: 1; letter-spacing: -0.01em; }
.stat .value small { font-size: 0.5em; font-weight: 700; margin-left: 2px; }
.stat .ctx { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35; }
.stat .delta { font-family: var(--f-mono); font-size: 0.75rem; }

/* ---------- Face à face ---------- */
.versus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.side { padding: 24px clamp(16px, 3vw, 40px) 8px 0; display: grid; gap: 0; align-content: start; }
.side + .side { padding-left: clamp(16px, 3vw, 40px); padding-right: 0; border-left: 1px solid var(--ink); }
.side h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin-bottom: 12px; }
.quote { padding-block: 18px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.quote blockquote { margin: 0; font-size: 1.28rem; line-height: 1.35; font-style: italic; font-weight: 500; quotes: "«\00a0" "\00a0»"; }
.quote blockquote::before { content: open-quote; }
.quote blockquote::after { content: close-quote; }
.quote .para { font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); }
.quote .who-said { font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-3); line-height: 1.45; }
.quote .who-said b { color: var(--ink); font-weight: 600; }
.versus-note { margin-top: 18px; font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-3); max-width: 52rem; }

/* ---------- La science ---------- */
.science { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.study {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  gap: clamp(20px, 3vw, 44px);
  padding-block: 30px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.study h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.08; }
.study .short { margin-top: 10px; font-size: 1.15rem; line-height: 1.35; font-style: italic; }
.study .body { display: grid; gap: 0.8em; font-size: 1rem; }
.evidence { display: grid; gap: 8px; }
.evidence .label { color: var(--ink-3); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.meter i { height: 10px; background: var(--paper-3); border-radius: 1px; }
.meter i.on { background: var(--encre); }
.evidence .lvl { font-family: var(--f-display); font-stretch: 90%; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.evidence .cite { font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-3); line-height: 1.5; }

/* ---------- Bon à savoir ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.fact { padding: 20px 20px 22px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 8px; align-content: start; }
.fact .big { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.2rem, 4.4vw, 3.1rem); line-height: 0.95; letter-spacing: -0.01em; }
.fact p { font-size: 0.98rem; line-height: 1.45; color: var(--ink-2); }
.tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: 36px; }
.tip-box {
  background: var(--fluo);
  color: var(--on-fluo);
  padding: 22px 22px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.tip-box .label { font-weight: 600; }
.tip-box h3 { font-family: var(--f-display); font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.tip-box p { font-size: 1rem; line-height: 1.5; }
.tip-box a { color: var(--on-fluo); }

/* ---------- Angles morts ---------- */
.unknowns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 0 48px; border-top: 2px solid var(--ink); }
.unknowns li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding-block: 18px; border-bottom: 1px solid var(--rule); }
.unknowns li::before { content: "?"; font-family: var(--f-display); font-weight: 900; font-size: 1.8rem; line-height: 1; color: var(--encre); }
.unknowns strong { display: block; font-family: var(--f-display); font-stretch: 92%; font-weight: 800; font-size: 1.05rem; line-height: 1.25; margin-bottom: 4px; }
.unknowns p { font-size: 0.98rem; color: var(--ink-2); line-height: 1.5; }

/* ---------- Méthode et sources ---------- */
.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 10px; padding-block: 12px; border-top: 1px solid var(--rule); font-size: 0.98rem; }
.steps li::before { content: counter(st); font-family: var(--f-display); font-weight: 900; font-stretch: 70%; font-size: 1.5rem; line-height: 1; color: var(--encre); }
.limit { margin-top: 20px; border: 1px solid var(--v-nuance); padding: 16px 18px; display: grid; gap: 8px; font-size: 0.95rem; }
.limit .label { color: var(--v-nuance); font-weight: 600; }
.sources { display: grid; gap: 28px; }
.sources h3 { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); margin-bottom: 8px; display: flex; gap: 10px; align-items: center; }
.sources ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sources li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: 8px; padding-block: 9px; border-top: 1px solid var(--rule); font-size: 0.9rem; line-height: 1.45; scroll-margin-top: 24px; }
.sources li:target { background: color-mix(in srgb, var(--fluo) 55%, transparent); }
.sources li .num { font-family: var(--f-mono); font-size: 0.75rem; font-weight: 600; color: var(--encre); padding-top: 2px; }
.sources li a { word-break: break-word; }
.sources .via { color: var(--ink-3); font-size: 0.82rem; }

/* ---------- Pied ---------- */
.colophon { background: var(--cover); color: var(--on-cover-2); }
.colophon .wrap { padding-block: 32px 40px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: baseline; font-family: var(--f-mono); font-size: 0.75rem; }
.colophon .logo { font-size: 1.3rem; }

/* ---------- Infobulle ---------- */
.tooltip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 10px;
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  line-height: 1.4;
  max-width: 240px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}
.tooltip b { font-family: var(--f-display); font-size: 1rem; font-weight: 800; display: block; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .cover .wrap, .demands, .check, .method, .page-image figure, .edito-grille { grid-template-columns: minmax(0, 1fr); }
  .check.flip > .check-text, .check.flip > .check-fig { order: initial; }
  .study { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (max-width: 640px) {
  .coverlines { grid-template-columns: minmax(0, 1fr); }
  .coverlines li:nth-child(odd) { border-right: 0; }
  .coverlines li:nth-child(even) a { padding-left: 0; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .side + .side { border-left: 0; border-top: 2px solid var(--ink); padding-left: 0; margin-top: 12px; }
  .side { padding-right: 0; }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .claim-head { grid-template-columns: minmax(0, 1fr); }
  .claim-head .stamp { justify-self: start; }
  .legend-list li { grid-template-columns: 128px minmax(0, 1fr); }
  .key li { grid-template-columns: 14px 2.8rem 4.4rem minmax(0, 1fr); gap: 8px; }
  .repere { width: 22px; height: 22px; font-size: 0.75rem; }
}