/* ===========================================================================
   Mise en page et composants.
   =========================================================================== */

/* --- Gabarit -------------------------------------------------------------- */
.cadre {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e-4);
}

.section { padding-block: var(--e-7); }
.section + .section { border-top: 1px solid var(--filet); }
.section > * + * { margin-top: var(--e-5); }

/* Le rythme vertical portait sur les enfants directs de .section — or une
   section n'a presque jamais qu'un seul enfant, le .cadre. Tout ce qu'il
   contient se retrouvait donc collé : le titre « Quatre chiffres, quatre
   sources » contre sa grille de cartes, le graphique contre l'encadré qui
   le suit. .cadre.mesure garde son propre rythme, plus resserré, adapté au
   texte courant. */
.section > .cadre:not(.mesure) > * + * { margin-top: var(--e-5); }

/* Le surtitre et le titre forment une seule unité : ils restent serrés. */
.section > .cadre:not(.mesure) > .surtitre + h2 { margin-top: var(--e-2); }

/* Un encadré qui commente ce qui précède doit s'en détacher franchement,
   sans quoi il se lit comme la suite du bloc précédent. */
.section > .cadre:not(.mesure) > aside { margin-top: var(--e-7); }

.mesure { max-width: var(--largeur-texte); }

.surtitre {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-faible);
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.surtitre::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--alerte);
  flex: none;
}

/* --- En-tête -------------------------------------------------------------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--fond-carte);
  border-bottom: 2px solid var(--texte);
}
.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3) var(--e-5);
  padding-block: var(--e-3);
}
/* Le bouton de thème est plaqué au bord droit sur toutes les pages. Sans
   cette marge, il se posait juste après le dernier lien : sa position
   dépendait donc de la largeur de la navigation, et changeait dès qu'un
   libellé changeait. */
.entete__barre .bouton-theme { margin-inline-start: auto; }
.marque {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);   /* WCAG 2.5.8 */
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texte);
  margin-right: auto;
}
.nav-site {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  font-size: var(--t-sm);
}
.nav-site a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  color: var(--texte-faible);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-site a:hover { color: var(--texte); border-bottom-color: var(--texte); }

/* Bouton de thème */
.bouton-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cible);
  min-height: var(--cible);
  padding: var(--e-2);
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  cursor: pointer;
}
.bouton-theme:hover { background: var(--fond-appui); }

/* --- Héros ---------------------------------------------------------------- */
.heros { padding-block: var(--e-7) var(--e-6); }
.heros h1 { max-width: 20ch; }
.heros__chapo {
  max-width: 52ch;
  margin-top: var(--e-4);
  font-size: var(--t-md);
  color: var(--texte-faible);
}

/* --- Compteur ------------------------------------------------------------- */
/* Un élément personnalisé non déclaré est `display: inline` : ses marges
   verticales sont alors ignorées et sa largeur n'est pas contrainte. À
   déclarer pour chaque composant, sans exception. */
blrg-compteur,
blrg-graphique,
blrg-ratio,
blrg-abo { display: block; }

.compteur { margin-top: var(--e-7); }
.compteur__valeur {
  font-family: var(--mono);
  font-size: var(--t-3xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.05;
  /* Empêche le saut de largeur à chaque incrément. */
  overflow-wrap: break-word;
}
.compteur__debit {
  margin-top: var(--e-3);
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--texte-faible);
}
.compteur__actions {
  margin-top: var(--e-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
}

/* --- Cartes de chiffres --------------------------------------------------- */
.grille-chiffres {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.carte {
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  padding: var(--e-5);
  box-shadow: var(--ombre);
}
.carte--alerte {
  background: var(--alerte-fond);
  border-color: var(--alerte);
}
.carte__valeur {
  font-family: var(--mono);
  font-size: var(--t-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-block: var(--e-2);
}
.carte--alerte .carte__valeur { color: var(--alerte); }
.carte__note { font-size: var(--t-sm); color: var(--texte-faible); }

/* --- Note de source ------------------------------------------------------
   Chaque nombre affiché porte un appel de note cliquable. C'est ce qui rend
   le site défendable quand un chiffre est contesté. */
blrg-source { white-space: nowrap; }
.source-appel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;   /* WCAG 2.5.8 */
  padding: 0 4px;
  margin-left: 2px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  background: none;
  border: 1px solid var(--filet);
  border-radius: 4px;
  cursor: pointer;
  vertical-align: super;
}
.source-appel:hover { background: var(--fond-appui); }
.source-detail {
  margin-top: var(--e-3);
  padding: var(--e-4);
  background: var(--fond-appui);
  border-left: 3px solid var(--accent);
  border-radius: var(--rayon);
  font-size: var(--t-sm);
  white-space: normal;
}
/* --texte-faible sur --fond-appui donne 4,23:1 en thème sombre, sous le
   seuil AA de 4,5:1 — le même défaut que celui corrigé plus bas pour `code`.
   axe-core ne l'avait pas vu : la fiche de source vit dans un dialogue fermé
   au chargement, et un automate n'analyse pas ce qui est masqué. La
   hiérarchie est déjà portée par les capitales, la chasse fixe et
   l'interlettrage ; la couleur n'y ajoutait rien. */
.source-detail dt {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte);
  margin-top: var(--e-3);
}
.source-detail dt:first-child { margin-top: 0; }
.source-detail dd { margin: 0; }

/* Étiquette de nature : distingue visuellement un constat d'une projection. */
.nature {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
.nature--projection,
.nature--estimate,
.nature--interpolated { color: var(--alerte); }
.nature--observed { color: var(--texte-faible); }

/* --- Graphique ------------------------------------------------------------ */
.graphique {
  position: relative;
  background: var(--fond-carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
  padding: var(--e-4);
}
/* Chart.js dimensionne le canvas d'après la hauteur de son parent. Sans
   conteneur de hauteur fixe, chaque redimensionnement agrandit le canvas, qui
   agrandit le parent : le graphique gonfle jusqu'à occuper des milliers de
   pixels. C'est la raison d'être de cette enveloppe. */
.graphique__zone {
  position: relative;
  height: clamp(240px, 45vw, 420px);
}
.graphique__toile { width: 100%; height: 100%; }

/* Le tableau est l'équivalent normatif du graphique, pas un pis-aller :
   il porte les mêmes données, lisibles par tous (WCAG 1.1.1). */
.tableau-donnees {
  margin-top: var(--e-4);
  max-height: 22rem;
  overflow: auto;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.tableau-donnees table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tableau-donnees caption {
  padding: var(--e-3);
  text-align: left;
  font-size: var(--t-sm);
  color: var(--texte-faible);
}
.tableau-donnees th, .tableau-donnees td {
  padding: var(--e-2) var(--e-3);
  text-align: right;
  border-bottom: 1px solid var(--filet);
  font-variant-numeric: tabular-nums;
}
.tableau-donnees th:first-child, .tableau-donnees td:first-child { text-align: left; }
.tableau-donnees thead th {
  position: sticky;
  top: 0;
  background: var(--fond-appui);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Curseur d'année ------------------------------------------------------ */
.curseur { margin-top: var(--e-5); }
.curseur input[type="range"] {
  width: 100%;
  min-height: var(--cible);
  accent-color: var(--accent);
}
.curseur__sortie {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-3);
  font-family: var(--mono);
}
.curseur__annee { font-size: var(--t-lg); font-weight: 600; }
.ratio-figures { margin-top: var(--e-3); font-size: var(--t-lg); letter-spacing: 0.1em; }

/* --- Boutons -------------------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: var(--e-3) var(--e-5);
  border: 1px solid transparent;
  border-radius: var(--rayon);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-contraste);
}
.bouton:hover { filter: brightness(1.08); }
.bouton--secondaire {
  background: none;
  color: var(--texte);
  border-color: var(--filet);
}
.bouton--secondaire:hover { background: var(--fond-appui); filter: none; }

/* --- Visuels -------------------------------------------------------------- */
.grille-visuels {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.visuel { display: flex; flex-direction: column; gap: var(--e-2); }
.visuel__declencheur {
  padding: 0;
  background: none;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  overflow: hidden;
  cursor: zoom-in;
}
.visuel__declencheur img { width: 100%; aspect-ratio: 1075 / 1391; object-fit: cover; }

/* Visionneuse native : remplace Lightbox2, qui exigeait jQuery et ne
   s'exécutait jamais. <dialog> gère seul le focus et la touche Échap. */
.visionneuse {
  width: min(92vw, 60rem);
  max-height: 92vh;
  padding: var(--e-4);
  background: var(--fond-carte);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
}
.visionneuse::backdrop { background: rgb(0 0 0 / 0.72); }
.visionneuse img { max-height: 74vh; margin-inline: auto; object-fit: contain; }
.visionneuse__barre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--e-4);
}

/* --- Abonnement ----------------------------------------------------------- */
.abo { background: var(--fond-carte); border: 1px solid var(--filet);
       border-radius: var(--rayon-lg); padding: var(--e-5); }
.abo__champs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-4);
}
.abo__mention { margin-top: var(--e-3); }
.abo label { display: block; font-size: var(--t-sm); font-weight: 600; }
.abo input[type="email"] {
  flex: 1 1 16rem;
  min-height: var(--cible);
  padding: var(--e-3);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.abo input[type="email"][aria-invalid="true"] { border-color: var(--alerte); border-width: 2px; }
.message-erreur { margin-top: var(--e-2); color: var(--alerte); font-size: var(--t-sm); font-weight: 600; }

/* --- Pied de page --------------------------------------------------------- */
.pied {
  padding-block: var(--e-6);
  border-top: 2px solid var(--texte);
  background: var(--fond-carte);
  font-size: var(--t-sm);
}
.pied__grille {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.pied h2 { font-size: var(--t-base); margin-bottom: var(--e-2); }
.pied li + li { margin-top: var(--e-2); }
.pied a { display: inline-flex; align-items: center; min-height: 24px; }

/* --- Confort au-delà du mobile -------------------------------------------- */
@media (min-width: 48em) {
  .section { padding-block: var(--e-8); }
  .heros { padding-block: var(--e-8) var(--e-7); }
}

/* Blocs de code de la documentation de l'API. Le débordement défile dans le
   bloc et jamais dans la page : à 320 px, une commande curl est plus large que
   l'écran (WCAG 1.4.10). */
pre.carte {
  overflow-x: auto;
  padding: var(--e-4);
  font-family: var(--mono);
  font-size: var(--t-sm);
  line-height: 1.5;
}
pre.carte code { white-space: pre; }
code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 1px 4px;
  /* Couleur pleine et non héritée : dans une légende de tableau, le texte
     atténué sur le fond d'appui ne donnait que 4,23:1 en thème sombre. */
  color: var(--texte);
  background: var(--fond-appui);
  border-radius: 3px;
}
pre.carte code { background: none; padding: 0; }

/* Élément courant de la navigation.
   Marqué autrement que par la couleur (WCAG 1.4.1) : la bordure basse est
   toujours présente, seule sa couleur changerait, ce qui ne suffit pas.

   Le repère est donc un soulignement épais — une différence de forme — et
   non plus une graisse. Un texte en demi-gras est plus large que le même
   texte en normal : le lien courant s'élargissait et décalait tous les
   suivants. Comme la page courante change à chaque navigation, le décalage
   se produisait à un endroit différent d'une page à l'autre, et le menu
   paraissait bouger. Le soulignement ne modifie aucune métrique. */
.nav-site a[aria-current="page"] {
  color: var(--texte);
  border-bottom-color: var(--alerte);
  /* Barre épaisse en ombre interne plutôt qu'en bordure ou en soulignement.
     La bordure changerait la hauteur ; text-decoration ne se propage pas de
     façon fiable dans un élément inline-flex, ce que sont ces liens. Une
     ombre interne ne participe à aucun calcul de boîte : elle marque sans
     rien déplacer. */
  box-shadow: inset 0 -4px 0 var(--alerte);
}

/* Les liens en cellule de tableau ne bénéficient pas de l'exception « lien
   dans un flux de texte » : ils doivent atteindre 24 px (WCAG 2.5.8). */
.tableau-donnees a {
  display: inline-block;
  min-height: 24px;
  min-width: 24px;
  text-align: center;
  padding-block: 2px;
}

/* --- Colonne de lecture ---------------------------------------------------
   .cadre et .mesure portés par le même élément donnaient une colonne étroite
   et centrée, désalignée du reste de la page. Le conteneur garde donc sa
   largeur, et c'est son contenu qui est ramené à une largeur de lecture. */
.cadre.mesure { max-width: var(--largeur); }
.cadre.mesure > * { max-width: var(--largeur-texte); }

/* Rythme vertical du texte courant. Sans cela, un h3 colle au paragraphe
   précédent et la hiérarchie devient illisible. */
.mesure > * + * { margin-top: var(--e-4); }
.mesure > h2 { margin-top: var(--e-7); }
.mesure > h3 { margin-top: var(--e-5); }
.mesure > h2:first-child,
.mesure > h3:first-child { margin-top: 0; }
.mesure ul { padding-left: 1.25rem; list-style: disc; }
.mesure ul li + li { margin-top: var(--e-2); }

/* --- Atelier du générateur -------------------------------------------------
   Une colonne sur mobile, deux à partir de 60rem. L'aperçu passe en premier
   sur petit écran : c'est lui qu'on regarde en réglant. */
.atelier {
  display: grid;
  gap: var(--e-5);
}
.atelier__apercu { order: -1; }
.atelier__apercu > * + * { margin-top: var(--e-4); }
.atelier__reglages > * + * { margin-top: var(--e-4); }

@media (min-width: 60rem) {
  .atelier {
    grid-template-columns: minmax(18rem, 22rem) 1fr;
    align-items: start;
  }
  .atelier__apercu { order: 0; position: sticky; top: 6rem; }
}

.apercu-cadre {
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background: var(--fond-appui);
  border: 1px solid var(--filet);
  border-radius: var(--rayon-lg);
}
/* Le canvas garde ses proportions réelles et ne déborde jamais : une story
   fait 1080 × 1920, soit bien plus haut qu'un écran. */
.apercu-cadre canvas {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  height: auto;
  box-shadow: var(--ombre);
}

/* --- Champs de formulaire -------------------------------------------------- */
.champ { display: block; }
.champ > label,
.champ > legend {
  display: block;
  margin-bottom: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
}
/* Liste explicite plutôt que « input[type=text] » : les trois champs du
   simulateur sont en type="number" et n'étaient donc atteints par aucune
   règle. Ils tombaient sur le rendu natif du navigateur — sans hauteur
   minimale de 44 px, et avec un fond clair en thème sombre. Un trou dans un
   sélecteur, pas une décision. */
.champ select,
.champ input:where(
  [type="text"], [type="number"], [type="email"], [type="search"], [type="tel"]
) {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
fieldset.champ { border: 0; padding: 0; margin: 0; }
.choix {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  margin-right: var(--e-4);
  font-size: var(--t-sm);
  cursor: pointer;
}
.choix input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent); }

details.carte summary {
  cursor: pointer;
  font-weight: 600;
  min-height: var(--cible);
  display: flex;
  align-items: center;
}

/* --- Verdict --------------------------------------------------------------- */
.cartes-verdict,
.actions-verdict { margin-top: var(--e-6); }

/* --- Aperçu des widgets ----------------------------------------------------
   Le cadre reproduit un site tiers : fond neutre, largeur de lecture, pour
   qu'on voie le widget tel qu'il apparaîtra ailleurs. */
.apercu-widget {
  max-width: 42rem;
  padding: var(--e-5);
  background: var(--fond-appui);
  border: 1px dashed var(--filet);
  border-radius: var(--rayon-lg);
}
.apercu-widget iframe {
  background: var(--fond-carte);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
.apercu-widget .blrg-credit { color: var(--texte-faible); }

/* Blocs de code rendus focalisables pour le défilement au clavier : le
   contour doit rester visible (WCAG 2.4.7). */
pre.carte:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Navigation entre générations : chaque cible doit atteindre 44 px. */
/* La liste est désormais un <ul> dans un <nav> : la grille passe sur la
   liste, et les puces disparaissent. */
.nav-generations ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-generations a,
.nav-generations strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cible);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  font-family: var(--mono);
  text-decoration: none;
}
.nav-generations strong {
  background: var(--fond-appui);
  border-color: var(--texte);
}

/* --- Barres de comparaison (page rendement) ------------------------------
   Un graphique en barres construit en HTML et CSS plutôt qu'en canvas : il
   reste lisible sans JavaScript, se laisse agrandir sans perdre en netteté,
   et n'a besoin d'aucun équivalent textuel séparé puisque chaque valeur est
   déjà écrite en toutes lettres à côté de sa barre.

   Les largeurs sont dans css/rendement.css, généré depuis les données. */
.barres {
  display: grid;
  gap: var(--e-5);
  margin-block: var(--e-5);
}
.barre__libelle {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte);
  margin-bottom: var(--e-2);
}
.barre__piste {
  background: var(--fond-appui);
  border-radius: var(--rayon);
  overflow: hidden;
  /* La piste garde sa hauteur même si la part est nulle : sans cela, une
     valeur manquante ferait disparaître la ligne au lieu de la montrer vide. */
  min-height: 1.75rem;
}
.barre__part {
  display: block;
  min-height: 1.75rem;
  background: var(--accent);
  border-radius: var(--rayon);
  /* La barre est décorative : la valeur est écrite juste en dessous. */
}
.barre--forte .barre__part { background: var(--alerte); }
/* Une borne n'est pas une mesure : le tracé hachuré le signale sans recourir
   à la seule couleur (WCAG 1.4.1). */
.barre--borne .barre__part {
  background: repeating-linear-gradient(
    135deg, var(--texte-faible) 0 8px, transparent 8px 16px
  ), var(--fond-appui);
  border: 1px solid var(--texte-faible);
}
.barre__valeur {
  margin-top: var(--e-2);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--texte);
}
.barre__note {
  margin-top: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte-faible);
}

/* Comparateur de générations
   ─────────────────────────────────────────────────────────────────────────
   Trois fiches présentes dans le HTML. Sans script, elles s'affichent toutes,
   l'une sous l'autre : la page reste complète et exacte. Le composant en
   masque deux et révèle le groupe de boutons radio.

   Déclaration obligatoire : un élément personnalisé inconnu est « inline »
   par défaut, et ses marges verticales sont alors ignorées sans un mot. */
blrg-generations { display: block; }

.comparateur__choix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3) var(--e-5);
  align-items: center;
  border: 0;
  padding: 0;
  margin-block: var(--e-5);
}
.comparateur__choix legend {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texte-faible);
  padding: 0;
  margin-bottom: var(--e-3);
}
.comparateur__fiche {
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: var(--e-5);
  margin-block: var(--e-5);
  background: var(--fond-carte);
}
.comparateur__faits {
  display: grid;
  gap: var(--e-4);
  margin-block: var(--e-4) 0;
}
/* Deux colonnes dès que la place le permet ; une seule à 320 px, où deux
   colonnes provoqueraient un débordement horizontal. */
@media (min-width: 40rem) {
  .comparateur__faits { grid-template-columns: 1fr 1fr; gap: var(--e-4) var(--e-5); }
}
.comparateur__faits dt {
  font-size: var(--t-sm);
  color: var(--texte-faible);
  margin-bottom: var(--e-1);
}
.comparateur__faits dd {
  margin: 0;
  font-size: var(--t-base);
  color: var(--texte);
}
.comparateur__valeur {
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--alerte);
}
/* Une valeur non mesurée se distingue d'une valeur mesurée autrement que par
   la couleur seule : elle est en italique et dit ce qu'elle est. */
.comparateur__faits em { color: var(--texte-faible); font-style: italic; }

.liste-explication {
  display: grid;
  gap: var(--e-4);
  margin-block: var(--e-5);
  padding-left: var(--e-5);
}
.liste-explication li { color: var(--texte); }