/* Vigie Dette France : design system Mickaël Brousse (tokens/colors, typography, spacing)
   Mise en page : une bande de synthèse, puis une carte pleine largeur par signal. */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/BricolageGrotesque-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-blue: #003FA3;
  --color-blue-tint: #D6E2F7;
  --color-olive: #C1C182;
  --color-olive-dark: #9A9A52;
  --color-sky: #B1C3E6;

  --bg-base: #F5F3EE;
  --bg-surface: #FFFFFF;
  --bg-inset: #EAE7E0;
  --bg-accent: var(--color-blue);
  --fg-1: #0F0F0F;
  --fg-2: #3D3D3D;
  --fg-3: #6B6B6B;
  --fg-inverse: #FFFFFF;
  --fg-accent: var(--color-blue);
  --border-subtle: #E0E0E0;
  --border-default: #A0A0A0;
  --shadow-md: 0 2px 16px rgba(0, 0, 0, 0.07);

  /* Séries (validées daltonisme, fond clair) */
  --series-1: #1A57C5;
  --series-2: #8A8A3C;
  --series-3: #5C8FD6;

  /* Niveaux de risque : ajout au design system, toujours doublés d'un libellé */
  --risk-calme: #2E7D8C;
  --risk-vigilance: #A08A1E;
  --risk-tension: #C96A12;
  --risk-crise: #B3261E;
  --band-opacity: 0.10;

  --chart-grid: #E6E3DC;
  --chart-axis: #A0A0A0;

  /* Infobulle : variante dark du design system (variante light en thème sombre) */
  --bulle-bg: #0F0F0F;
  --bulle-fg: #F0EEE9;

  --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body: 'Roboto', 'Helvetica Neue', sans-serif;

  --text-h1: clamp(32px, 3.5vw, 48px);
  --text-h2: clamp(24px, 2.5vw, 32px);
  --text-h3: 22px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 12px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --ease-standard: cubic-bezier(0.25, 0, 0, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0F0F0F; --bg-surface: #1A1A1A; --bg-inset: #111111;
    --fg-1: #F0EEE9; --fg-2: #B5B3AE; --fg-3: #8E8C87;
    --fg-accent: var(--color-sky); --color-blue-tint: #001F52;
    --border-subtle: #242424; --border-default: #383838;
    --shadow-md: 0 2px 20px rgba(0, 0, 0, 0.5);
    --series-1: #4F86E0; --series-2: #8F8F35; --series-3: #6893E0;
    --risk-calme: #4FB0C0; --risk-vigilance: #D0B640; --risk-tension: #F08A3A; --risk-crise: #F0645A;
    --band-opacity: 0.14;
    --chart-grid: #2A2A2A; --chart-axis: #606060;
    --bulle-bg: #FFFFFF; --bulle-fg: #0F0F0F;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-base: #0F0F0F; --bg-surface: #1A1A1A; --bg-inset: #111111;
  --fg-1: #F0EEE9; --fg-2: #B5B3AE; --fg-3: #8E8C87;
  --fg-accent: var(--color-sky); --color-blue-tint: #001F52;
  --border-subtle: #242424; --border-default: #383838;
  --shadow-md: 0 2px 20px rgba(0, 0, 0, 0.5);
  --series-1: #4F86E0; --series-2: #8F8F35; --series-3: #6893E0;
  --risk-calme: #4FB0C0; --risk-vigilance: #D0B640; --risk-tension: #F08A3A; --risk-crise: #F0645A;
  --band-opacity: 0.14;
  --chart-grid: #2A2A2A; --chart-axis: #606060;
  --bulle-bg: #FFFFFF; --bulle-fg: #0F0F0F;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg-accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--fg-accent); outline-offset: 2px; }

.wrap {
  max-width: 1280px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* En-tête */
.masthead { background: var(--bg-accent); color: var(--fg-inverse); }
.masthead .wrap { padding-block: var(--space-12); display: grid; gap: var(--space-4); }
.masthead-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.masthead-actions { display: flex; gap: var(--space-2); align-items: center; flex: none; }
.masthead h1 {
  font-family: var(--font-display); font-weight: 800; font-size: min(var(--text-h1), 8vw); min-width: 0;
  line-height: 1.05; letter-spacing: -0.03em; margin: 0; text-wrap: balance;
}
.verdict { font-size: clamp(18px, 2vw, 22px); max-width: 60ch; margin: 0; color: var(--fg-inverse); }
.verdict b { font-family: var(--font-display); font-weight: 700; }
.stamp { font-size: var(--text-sm); opacity: 0.85; margin: 0; display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
/* Le repère et la date des données vont ensemble : plus proches l'un de l'autre que du reste */
.reperes:not([hidden]) + .stamp { margin-top: calc(-1 * var(--space-2)); }

/* Indice Vigie dans l'en-tête */
.indice { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.indice[hidden] { display: none; }
.indice-score {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(56px, 8vw, 88px);
  line-height: 0.9; letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.indice-sur { font-size: 0.35em; font-weight: 600; letter-spacing: 0; opacity: 0.8; margin-left: 4px; }
.indice-side { display: grid; gap: var(--space-2); justify-items: start; }
.indice-nom { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); }
/* Sur le bleu de l'en-tête, les couleurs de niveau ne contrastent pas : pastille sur fond de carte */
.masthead .pill { background: var(--bg-surface); font-size: var(--text-sm); padding: 4px 12px; }
.repere { margin: 0; max-width: 70ch; font-size: var(--text-body); }
.reperes { display: grid; gap: var(--space-1); }
.reperes:not(:has(> :not([hidden]))) { display: none; }
.repere[hidden] { display: none; }

/* Bouton-icône à contour Material 3 (icône « light_mode ») : 40 px, voile d'état au survol */
.btn-icone {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none;
  background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 50%; cursor: pointer;
  transition: background-color 150ms var(--ease-standard), transform 150ms var(--ease-standard);
}
.btn-icone svg { width: 22px; height: 22px; fill: currentColor; }
.btn-icone:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn-icone:active { transform: scale(0.94); background: color-mix(in srgb, currentColor 12%, transparent); }
.btn-icone:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* Bouton de langue : même cercle, la langue proposée en lettres */
.btn-langue { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; }

/* Synthèse : sous-indices et CISS, puis les cinq signaux */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); }
.signals-summary { margin-top: calc(-1 * var(--space-6)); }

.tile {
  background: var(--bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start;
  text-decoration: none; color: inherit; border-top: 4px solid var(--level-color, var(--border-subtle));
  transition: transform 150ms var(--ease-standard);
}
.tile:hover { transform: translateY(-2px); }
.tile-name { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-2); }
.tile-value { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tile-sub { font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }

.pill {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs);
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  padding: 3px 10px; border-radius: var(--radius-pill);
  color: var(--level-color); border: 1.5px solid var(--level-color);
}
.pill::before { content: var(--level-glyph); font-size: 10px; }
[data-level="calme"] { --level-color: var(--risk-calme); --level-glyph: '●'; }
[data-level="vigilance"] { --level-color: var(--risk-vigilance); --level-glyph: '▲'; }
[data-level="tension"] { --level-color: var(--risk-tension); --level-glyph: '◆'; }
[data-level="crise"] { --level-color: var(--risk-crise); --level-glyph: '■'; }

/* Filtre de période */
.toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-block: var(--space-8) var(--space-4); }
.toolbar-label { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-2); }
.chart-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; }
.seg { display: inline-flex; background: var(--bg-inset); border-radius: var(--radius-pill); padding: 3px; }
.seg button {
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  border: 0; background: transparent; color: var(--fg-2); padding: 5px 14px; border-radius: var(--radius-pill); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--bg-surface); color: var(--fg-1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
/* Au doigt : 44px de haut au moins, sans rien changer à la souris */
@media (pointer: coarse) { .seg button { min-height: 44px; } }
/* Une étiquette et ses boutons ne se séparent jamais */
.outil { display: inline-flex; align-items: center; gap: 12px; flex-wrap: nowrap; }

/* Cartes des signaux */
.signals { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-16); }
.signal {
  background: var(--bg-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  padding: var(--space-6); display: grid; gap: var(--space-4); min-width: 0;
  scroll-margin-top: var(--space-4);
}
.signal-head { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; align-items: flex-start; }
.signal h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.03em; margin: 0; }
.signal-why { margin: 0; color: var(--fg-2); max-width: 70ch; }
.signal-now { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.signal-now .big { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.signal-now .delta { font-size: var(--text-sm); color: var(--fg-3); }
/* Chiffre du signal, puis une ligne discrète dessous (taux de l'OAT et du Bund), alignée sur lui */
.signal-mesure { display: grid; gap: var(--space-1); justify-items: end; }
.signal-taux { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.signal-taux[hidden] { display: none; }

.chart { position: relative; min-height: 220px; min-width: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--fg-3); font-family: var(--font-body); font-size: 12px; }
.chart .grid line { stroke: var(--chart-grid); }
.chart .axis path, .chart .axis line { stroke: var(--chart-axis); }
.chart .mark-label { font-family: var(--font-display); font-weight: 600; font-size: 11px; fill: var(--fg-2); paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3px; }
.chart .end-label { font-family: var(--font-display); font-weight: 600; fill: var(--fg-1); }
.chart-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-6); }
.chart-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--space-2); }

.tooltip {
  position: absolute; pointer-events: none; z-index: 2;
  background: var(--bulle-bg); color: var(--bulle-fg); border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); padding: 7px 12px; font-size: var(--text-xs);
  line-height: 1.4; min-width: 140px; max-width: 240px;
}
.tooltip .t-date { opacity: 0.7; }
.tooltip .t-row { display: flex; align-items: center; gap: 6px; }
.tooltip .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tooltip b { font-variant-numeric: tabular-nums; }

.legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--fg-2); margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend[hidden] { display: none; }
.legend .sw { width: 14px; height: 3px; border-radius: 2px; flex: none; }

.thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.thresholds li { background: var(--bg-inset); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: grid; gap: 2px; }
.thresholds .range { font-size: var(--text-sm); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.threshold-note { font-size: var(--text-sm); color: var(--fg-3); margin: 0; max-width: 80ch; }

.ratings-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.ratings-table th { font-family: var(--font-display); font-weight: 600; text-align: left; color: var(--fg-2); border-bottom: 1px solid var(--border-subtle); padding: var(--space-2); }
.ratings-table td { padding: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.table-scroll { overflow-x: auto; }
.alert { margin: 0; font-size: var(--text-sm); color: var(--fg-2); background: var(--bg-inset); border-radius: var(--radius-md); padding: var(--space-3); }

.source { font-size: var(--text-xs); color: var(--fg-3); margin: 0; }
.chart + .source, .legend + .source, .chart-pair + .source { margin: 6px 0 12px; }
.source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.source a:hover { color: var(--fg-1); }
.missing { font-size: var(--text-sm); color: var(--fg-3); }

footer { border-top: 1px solid var(--border-subtle); }
footer .wrap { padding-block: var(--space-8); font-size: var(--text-sm); color: var(--fg-3); display: grid; gap: var(--space-2); }
footer p { margin: 0; max-width: 80ch; }

#courbe-table-wrap, #auctions-table-wrap { max-height: 420px; overflow-y: auto; }

/* Infobulles : bouton « i » et bulle unique (design system : sombre, 6 px, Roboto 12 px, flèche de 5 px) */
.info {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 18px; height: 18px; padding: 0; margin-left: 6px; vertical-align: middle;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent;
  color: var(--fg-3); font: italic 700 11px/1 var(--font-display); letter-spacing: 0; cursor: help;
  transition: color 150ms var(--ease-standard);
}
.info:hover, .info[aria-describedby] { color: var(--fg-accent); }
.masthead .info { color: rgba(255, 255, 255, 0.75); }
.masthead .info:hover, .masthead .info[aria-describedby] { color: var(--fg-inverse); }
.bulle {
  position: fixed; z-index: 50; max-width: min(280px, calc(100vw - 16px)); pointer-events: none;
  background: var(--bulle-bg); color: var(--bulle-fg); padding: 7px 12px; border-radius: 6px;
  font: 500 12px/1.45 var(--font-body); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  animation: bulle 120ms ease;
}
.bulle[hidden] { display: none; }
.bulle::after {
  content: ''; position: absolute; left: var(--fleche, 50%); margin-left: -5px;
  border: 5px solid transparent;
}
.bulle[data-pos="top"]::after { top: 100%; border-top-color: var(--bulle-bg); }
.bulle[data-pos="bottom"]::after { bottom: 100%; border-bottom-color: var(--bulle-bg); }
@keyframes bulle { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bulle { animation: none; } }

.seuils-titre { margin: 0; display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-2); }
.legend-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tile-name { display: flex; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.retard[hidden] { display: none; }

/* Légende à œil : masquer ou réafficher une courbe */
.legend-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; margin: -4px 0;
  font: inherit; color: inherit; background: transparent; border: 0; border-radius: var(--radius-pill); cursor: pointer;
  transition: background 150ms var(--ease-standard), opacity 150ms var(--ease-standard);
}
.legend-btn:hover { background: var(--bg-inset); }
.legend-btn[aria-pressed="false"] { opacity: 0.5; }
.legend-btn[aria-pressed="false"] .sw { background: transparent !important; outline: 1.5px solid currentColor; }
.legend .oeil { width: 16px; height: 16px; fill: currentColor; flex: none; }
.legend .sw-dash { background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px); }

/* Description repliable sous chaque indicateur : ce qu'il mesure, calcul, sources */
.desc { font-size: var(--text-sm); color: var(--fg-2); }
.desc summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--fg-accent);
}
.desc summary::-webkit-details-marker { display: none; }
.desc summary::before {
  content: ''; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform 150ms var(--ease-standard);
}
.desc[open] summary::before { transform: rotate(45deg); }
.desc .desc-fermer, .desc[open] .desc-ouvrir { display: none; }
.desc[open] .desc-fermer { display: inline; }
/* Empilées sur mobile et dans les jauges ; sur tablette, le calcul à droite ; sur grand écran, trois colonnes */
.desc-corps { margin-top: var(--space-2); display: grid; gap: var(--space-2) var(--space-6); align-items: start; }
/* Quatre parties : une colonne sur mobile ; au-delà, deux colonnes de journal. Le texte coule de l'une à l'autre,
   une rubrique peut passer d'une colonne à l'autre : la gauche est pleine, la droite finit plus haut ou au même niveau */
@media (min-width: 700px) {
  :is(.signal, .masthead) .desc-corps { display: block; columns: 2; column-gap: var(--space-8); }
  :is(.signal, .masthead) .desc-corps > p { margin-bottom: var(--space-3); orphans: 1; widows: 1; }
}
/* Justifié, sans coupure de mots */
.desc-corps p { margin: 0; line-height: 1.55; text-align: justify; hyphens: manual; }
.desc-corps b { font-family: var(--font-display); font-weight: 600; color: var(--fg-1); }
.desc-corps a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.masthead .desc, .masthead .desc-corps b { color: var(--fg-inverse); }
.masthead .desc summary { color: var(--fg-inverse); opacity: 0.85; }
.masthead .desc-corps { opacity: 0.9; }
.periode { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.periode[hidden] { display: none; }

/* ---------- Usage de l'espace selon l'appareil ---------- */

/* Mobile : deux tuiles par ligne, chiffres un peu plus petits */
@media (max-width: 599px) {
  .signals-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signals-summary .tile-value { font-size: 26px; }
  .signals-summary .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: var(--space-3); }
  .signal { padding: var(--space-4); }
  .signal-now .big { font-size: 32px; }
  .signal h2 { font-size: 22px; }
  .signal-mesure { justify-items: start; }
  /* Le choix de la courbe d'abord, seul sur sa ligne ; le pas et la période dessous */
  .chart-tools .outil-vue { flex-basis: 100%; }
}

/* Grand écran : l'indice à droite de la phrase, la description en pleine largeur dessous */
@media (min-width: 960px) {
  .masthead .wrap {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-12);
    grid-template-areas: "top top" "verdict indice" "reperes indice" "stamp indice" "desc desc";
    align-items: start;
  }
  .masthead-top { grid-area: top; }
  .masthead .verdict { grid-area: verdict; font-size: clamp(22px, 2vw, 28px); }
  .masthead .indice { grid-area: indice; align-self: center; }
  #indice-desc { grid-area: desc; }
  .masthead .reperes { grid-area: reperes; }
  .masthead .stamp { grid-area: stamp; }
}

.detail-table .table-scroll { margin-top: var(--space-2); }
.detail-table .ratings-table { color: var(--fg-1); }
#indice-desc[hidden], .reperes[hidden], .signal[hidden] { display: none; }
.info[hidden] { display: none; }

/* Page « Méthode de calcul » : une langue affichée à la fois, formules en bloc */
html[lang="en"] [data-langue="fr"], html:not([lang="en"]) [data-langue="en"] { display: none !important; }
/* Page de lecture : une seule largeur pour le texte, les tableaux et les formules, bords alignés */
.methode .wrap { max-width: 860px; }
.methode .signal td:first-child { white-space: nowrap; }
.methode .signal p, .methode .signal li { line-height: 1.6; margin: 0; text-align: justify; hyphens: manual; }
.methode .signal { display: grid; gap: var(--space-3); }
.methode .signal h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: var(--space-2) 0 0; }
.methode .signal ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.formule {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 14px; line-height: 1.6;
  background: var(--bg-inset); color: var(--fg-1); border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4); margin: 0; overflow-x: auto; white-space: pre;
}
@media (max-width: 600px) { .formule { font-size: 12px; padding: var(--space-3); } }
.retour { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Méthode : justification des repères, repliée sous le barème */
.methode .approfondir summary { font-size: var(--text-body); }
.approfondir-corps { margin-top: var(--space-3); display: grid; gap: var(--space-3); color: var(--fg-1); font-size: var(--text-body); }