/**
 * Outils documentaires : lois, atelier, comparateur, intégrité.
 *
 * Prolonge portail.css sans le modifier, et reprend ses jetons. La direction
 * graphique est celle du portail : fond blanc, gris neutres, petits tags, traits
 * fins, aucune ombre, aucune bordure verticale épaisse.
 */

/* ---------- Statut de preuve ----------
 * Le statut est la pièce d'interface la plus importante de ces outils : c'est
 * lui qui empêche de confondre une règle en vigueur, un effet annoncé et une
 * donnée manquante. Il reste petit et neutre — un tag, pas une alarme.
 */
.statut {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-12);
  line-height: 1;
  padding: var(--e-1) var(--e-2);
  border: 1px solid var(--trait);
  border-radius: var(--r-pilule);
  color: var(--texte-doux);
  white-space: nowrap;
}
.statut::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--trait-forte);
  flex: none;
}
.statut--texte_en_vigueur::before { background: var(--texte); }
.statut--texte_projet::before { background: var(--trait-forte); }
.statut--evaluation_publique::before { background: var(--accent); }
.statut--declaration_promoteur { color: var(--attention); border-color: var(--attention); }
.statut--declaration_promoteur::before { background: var(--attention); }
.statut--objection { color: var(--attention); border-color: var(--attention); }
.statut--objection::before { background: var(--attention); }
.statut--hypothese_scenario::before { background: var(--accent); }
.statut--donnee_absente { color: var(--erreur); border-color: var(--erreur); }
.statut--donnee_absente::before { background: var(--erreur); }

/* ---------- Barre d'outil ---------- */
.outil__barre {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: center;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--trait);
}
.outil__barre .champ { max-width: 320px; }
.outil__barre .tag { max-width: 100%; white-space: normal; text-align: left; }
.outil__compte { font-size: var(--t-15); color: var(--texte-doux); }
.outil__retour {
  font-size: var(--t-15);
  color: var(--accent);
  text-decoration: none;
  display: inline-flex;
  gap: var(--e-1);
  align-items: center;
}
.outil__retour:hover { text-decoration: underline; }

/* Accès direct : des liens d'ancre au premier écran, pour atteindre le résultat
   sans lire d'abord tout le dossier. De petits liens fins, dans la charte. */
.acces-direct { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-1); }
.acces-direct__lien {
  font-size: var(--t-13);
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  padding: var(--e-1) var(--e-2);
}
.acces-direct__lien:hover { border-color: var(--trait-forte); background: var(--survol); }
/* Une ancre ne doit pas cacher son titre sous l'en-tête. */
[id] { scroll-margin-top: var(--e-4); }

/* ---------- Fiche ---------- */
.fiche__entete { display: grid; gap: var(--e-2); padding-block: var(--e-6) var(--e-2); }
.fiche__titre { font-size: clamp(var(--t-21), 2.4vw, var(--t-27)); letter-spacing: -0.01em; }
.fiche__resume { color: var(--texte-doux); font-size: var(--t-17); max-width: 64ch; }
/* Lien vers un dossier thématique qui reprend la fiche (lot 11B.1). */
.fiche__dossier { font-size: var(--t-15); }
.fiche__dossier a { display: inline-flex; min-height: 32px; align-items: center; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

.bloc {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-2);
}
.bloc__titre { font-size: var(--t-17); }
.bloc__texte { color: var(--texte-doux); font-size: var(--t-15); }
.bloc__haut { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; justify-content: space-between; }

.grille-blocs { display: grid; gap: var(--pile-m); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ---------- Vue des relations ---------- */
.relations { display: grid; gap: var(--pile-m); }
.relations__groupes { display: grid; gap: var(--e-3); }
.relations__groupe { display: grid; gap: var(--e-2); }
.relations__intitule {
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-tenu);
}
.relations__pieces { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Une pièce sélectionnable. Le bouton reste un tag : petit, fin, sans ombre. */
.piece {
  font: inherit;
  font-size: var(--t-15);
  text-align: start;
  cursor: pointer;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  padding: var(--e-2) var(--e-2);
  max-width: 100%;
}
.piece:hover { border-color: var(--trait-forte); }
.piece[aria-pressed="true"] { border-color: var(--texte); font-weight: 600; }
.piece--liee { border-color: var(--accent); color: var(--accent-sombre); }
.piece--eteinte { color: var(--texte-tenu); }

.explication {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-2);
}
.explication__vide { color: var(--texte-tenu); font-size: var(--t-15); }
.relation-ligne { display: grid; gap: var(--e-1); padding-block: var(--e-2); border-top: 1px solid var(--trait); }
.relation-ligne:first-of-type { border-top: none; padding-top: 0; }
.relation-ligne__chemin { font-size: var(--t-15); color: var(--texte); }
.relation-ligne__type {
  font-size: var(--t-12);
  color: var(--texte-tenu);
  text-transform: lowercase;
}
.relation-ligne__explication { font-size: var(--t-15); color: var(--texte-doux); }

/* Période du fait décrit, distincte de la date de consultation de la source.
   Petite, neutre, au-dessus du texte : elle qualifie ce qui suit. */
.periode {
  font-size: var(--t-12);
  color: var(--texte-tenu);
  display: block;
}
.cellule__haut { display: flex; flex-wrap: wrap; gap: var(--e-1); align-items: center; }

/* ---------- Sources ---------- */
.sources { display: grid; gap: var(--e-2); }
.source {
  display: grid;
  gap: var(--e-1);
  padding-block: var(--e-2);
  border-top: 1px solid var(--trait);
  font-size: var(--t-15);
}
.source:first-child { border-top: none; padding-top: 0; }
.source__titre { color: var(--texte); text-decoration: none; }
.source__titre:hover { color: var(--accent-sombre); text-decoration: underline; }
.source__meta { color: var(--texte-tenu); font-size: var(--t-13); }
.source__passage { color: var(--texte-doux); font-size: var(--t-13); }
.source__alerte { color: var(--erreur); font-size: var(--t-13); }

/* Annonce de changement : lue par les technologies d'assistance, discrète à
   l'écran. Elle ne déplace pas le lecteur, elle l'informe. */
.annonce {
  font-size: var(--t-13);
  color: var(--texte-doux);
  min-height: 1.2em;
}

/* ---------- Atelier ---------- */
.atelier__choix { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.comparaison { display: grid; gap: var(--pile-m); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.colonne-regle { display: grid; gap: var(--e-2); }
.colonne-regle__titre { font-size: var(--t-17); }

/* Le tableau de comparaison défile plutôt que de s'écraser : à 390 px, quatre
   colonnes réduites deviennent illisibles. Le conteneur est focalisable, pour
   que le défilement soit atteignable au clavier. */
.cas-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--t-15); }
.cas-table th, .cas-table td {
  text-align: start;
  padding: var(--e-2) var(--e-2);
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.cas-table th { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-tenu); font-weight: 600; }
.defilable { overflow-x: auto; }
.defilable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.verdict { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-13); white-space: nowrap; }
.verdict::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--trait-forte); }
.verdict--conforme::before { background: var(--texte); }
.verdict--refuse { color: var(--erreur); }
.verdict--refuse::before { background: var(--erreur); }
.ligne--change { background: var(--survol); }
.marque-change { font-size: var(--t-12); color: var(--accent-sombre); }

.condition { display: grid; gap: var(--e-1); padding-block: var(--e-2); border-top: 1px solid var(--trait); font-size: var(--t-15); }
.condition:first-child { border-top: none; padding-top: 0; }
.condition__etat { font-size: var(--t-12); color: var(--texte-tenu); }
.condition__etat--echec { color: var(--erreur); }

.boucle { display: grid; gap: 0; }
.boucle__etape { display: grid; gap: var(--e-1); padding-block: var(--e-3); border-top: 1px solid var(--trait); }
.boucle__etape:first-child { border-top: none; padding-top: 0; }
.boucle__intitule { font-size: var(--t-12); text-transform: uppercase; letter-spacing: 0.06em; color: var(--texte-tenu); }
.boucle__texte { font-size: var(--t-15); color: var(--texte-doux); }

/* ---------- Comparateur (7B) et intégrité (7C) ---------- */
.comparateur { display: grid; gap: var(--pile-m); }
.comparateur__table { width: 100%; border-collapse: collapse; font-size: var(--t-15); }
.comparateur__table th, .comparateur__table td {
  text-align: start;
  padding: var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
  min-width: 200px;
}
.comparateur__table thead th { font-size: var(--t-13); color: var(--texte); font-weight: 600; }
.comparateur__table th[scope="row"] {
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-tenu);
  font-weight: 600;
  min-width: 160px;
}
.cellule { display: grid; gap: var(--e-1); }
.cellule__texte { color: var(--texte-doux); }
.cellule__inconnu { color: var(--texte-tenu); font-style: italic; }

.constat { display: grid; gap: var(--e-1); padding-block: var(--e-3); border-top: 1px solid var(--trait); }
.constat:first-child { border-top: none; padding-top: 0; }
.constat__titre { font-size: var(--t-15); }
.constat__cause { font-size: var(--t-15); color: var(--texte-doux); }
.constat--traite .constat__titre { color: var(--texte-doux); }
.constat--ouvert .constat__titre { color: var(--erreur); }
/* Un texte de risque qui décrit la situation d'avant la configuration : il reste
   lisible, mais ne doit pas se lire comme la description actuelle. */
.constat__initial { color: var(--texte-tenu); }

.bascule { display: flex; align-items: flex-start; gap: var(--e-2); padding-block: var(--e-3); border-top: 1px solid var(--trait); }
.bascule:first-of-type { border-top: none; }
.bascule__corps { display: grid; gap: var(--e-1); }
.bascule__titre { font-size: var(--t-15); }
.bascule__texte { font-size: var(--t-13); color: var(--texte-doux); }
.bascule input { margin-top: var(--e-1); flex: none; }

/* ---------- Résultats par cas, par dimension, par constat ----------
 * Sur un petit écran, un tableau se lit en déplaçant la page horizontalement, et
 * l'on perd de vue l'objet dont on lit le résultat. Les cartes gardent l'objet
 * et ses résultats ensemble. Le tableau reste sur ordinateur, où il sert
 * réellement la comparaison ; les deux ne sont jamais affichés en même temps,
 * pour ne pas faire lire deux fois la même chose.
 */
.par-cas { display: grid; gap: var(--pile-m); }
.par-cas__carte {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-3);
  display: grid;
  gap: var(--e-2);
}
.par-cas__carte--change { background: var(--survol); }
.par-cas__titre { font-size: var(--t-17); }
.par-cas__verdicts { display: grid; gap: var(--e-2); }
.par-cas__verdict { display: grid; gap: var(--e-1); padding-top: var(--e-2); border-top: 1px solid var(--trait); }
.par-cas__intitule {
  font-size: var(--t-12);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texte-tenu);
}

.sur-ordinateur { display: block; }
@media (max-width: 760px) { .sur-ordinateur { display: none; } }
@media (min-width: 761px) { .par-cas { display: none; } }

.mention-fiction { margin-top: var(--e-1); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  .outil__barre { align-items: stretch; flex-direction: column; }
  /* `.champ` porte `flex: 1 1 220px`. En colonne, l'axe principal devient
     vertical : sans ce retrait, le champ de recherche s'étire en hauteur. */
  .outil__barre .champ { max-width: none; flex: none; }
  .outil__barre .a-droite { margin-inline-start: 0; }
  .comparaison { grid-template-columns: 1fr; }
  .fiche__titre { font-size: var(--t-21); }
}

/* ---------- Responsables publics (8A) ----------
 * Des cartes à traits fins, sans relief. Une position se lit d'abord par son
 * libellé écrit ; aucune couleur ne code « pour » ou « contre », pour ne pas
 * suggérer un bon ou un mauvais vote. Seule la forme distingue une position
 * exprimée d'une position non exprimée (trait pointillé).
 */
.responsables-grille {
  display: grid;
  gap: var(--pile-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.personne-carte {
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  padding: var(--e-4);
  display: grid;
  gap: var(--e-1);
  align-content: start;
  min-width: 0;
}
.personne-carte__nom { font-size: var(--t-17); }
.personne-carte__lien { color: var(--texte); text-decoration: none; }
.personne-carte__lien:hover { color: var(--accent-sombre); text-decoration: underline; }
.personne-carte__mandat { font-size: var(--t-15); color: var(--texte-doux); }
.personne-carte__groupe { font-size: var(--t-15); color: var(--texte-doux); }

.liens-carte {
  list-style: none;
  margin: var(--e-1) 0 0;
  padding: var(--e-2) 0 0;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-4);
  font-size: var(--t-15);
}

.espace-haut-l { margin-top: var(--pile-l); }
.liste-rangs { margin: 0; padding-left: var(--e-6); display: grid; gap: var(--e-1); font-size: var(--t-15); }
.liste-rangs li { color: var(--texte); }

.position {
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  padding: var(--e-2) var(--e-3);
  display: grid;
  gap: var(--e-1);
}
.position--non-exprimee { border-style: dashed; border-color: var(--trait-forte); }
.position__libelle { font-size: var(--t-17); font-weight: 600; color: var(--texte); }
.position__explication { font-size: var(--t-13); color: var(--texte-doux); }
.position__faits { margin: var(--e-1) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-1); font-size: var(--t-13); color: var(--texte-doux); }

.comparaison-positions {
  display: grid;
  gap: var(--pile-m);
  margin-top: var(--pile-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
}
.rappel-objet { font-size: var(--t-15); color: var(--texte-doux); margin-top: var(--e-2); }
.encart__suite { display: block; margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }

.citation { margin: 0; display: grid; gap: var(--e-1); padding-block: var(--e-2); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.citation__texte { margin: 0; font-size: var(--t-15); color: var(--texte); }
.citation__attribution { font-size: var(--t-13); color: var(--texte-tenu); }

.chrono { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: 0; }
.chrono__entree { border-top: 1px solid var(--trait); }
.chrono__entree:last-child { border-bottom: 1px solid var(--trait); }
.chrono__resume {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  align-items: baseline;
  padding-block: var(--e-2);
  cursor: pointer;
  font-size: var(--t-15);
}
.chrono__date { font-size: var(--t-13); color: var(--texte-tenu); min-width: 9.5em; }
.chrono__type { font-size: var(--t-12); }
.chrono__titre { flex: 1 1 16em; min-width: 0; color: var(--texte); }
.chrono__corps { display: grid; gap: var(--e-2); padding: 0 0 var(--e-3); }

@media (max-width: 640px) {
  .chrono__date { min-width: 0; }
  .personne-carte { padding: var(--e-3); }
}
/* Les mentions de cet outil portent parfois un groupe et une fonction : elles
   reviennent à la ligne plutôt que d'élargir la page sur mobile. */
#outil-responsables .mention { white-space: normal; max-width: 100%; }
#outil-responsables .tag { white-space: normal; text-align: start; max-width: 100%; }

/* ---------- Comparer les partis (10A) ----------
 * Même règle que les responsables publics : une position se lit par son libellé
 * écrit, jamais par une couleur « pour » ou « contre ». Les résultats sont des
 * comptes et des bornes, pas un classement. */
.comparer__couverture { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); max-width: 76ch; }
.comparer__methode { margin-top: var(--pile-m); }
.comparer__methode .bloc__titre { margin-top: var(--e-3); }
.comparer__barre { display: grid; gap: var(--e-1); }
.comparer__grille { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-8); align-items: start; margin-top: var(--pile-m); }
.comparer__principal { min-width: 0; display: grid; gap: var(--pile-m); }
.comparer__aside { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; padding: var(--e-1) var(--e-1) var(--e-1) var(--e-1); }
.comparer__liste { display: grid; gap: var(--e-8); }
.comparer__theme { display: grid; gap: var(--e-3); }
.comparer__theme-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); border-bottom: 1px solid var(--trait); padding-bottom: var(--e-2); }
.comparer__theme-entete .section__titre { font-size: var(--t-21); }
.comparer__priorite { white-space: normal; }
.comparer__proposition { border: 1px solid var(--trait); border-radius: var(--r-l); padding: var(--e-4); display: grid; gap: var(--e-3); }
.comparer__proposition:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.comparer__proposition-titre { font-size: var(--t-17); line-height: 1.35; }
.comparer__precision { font-size: var(--t-13); color: var(--texte-tenu); }
.comparer__positions { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.position-cellule { display: grid; gap: var(--e-1); align-content: start; padding: var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-m); min-width: 0; }
.position-cellule__organisation { font-weight: 600; font-size: var(--t-15); }
.position-cellule__passage { font-size: var(--t-15); color: var(--texte-doux); overflow-wrap: anywhere; }
.position-cellule__reference { font-size: var(--t-12); color: var(--texte-tenu); }
.position-cellule__lien { font-size: var(--t-13); }
.position-tag { justify-self: start; display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-12); line-height: 1.3; padding: var(--e-1) var(--e-2); border: 1px solid var(--trait-forte); border-radius: var(--r-pilule); color: var(--texte); background: var(--fond); }
.position-tag--favorable, .position-tag--opposee { font-weight: 600; }
.position-tag--non_documentee { color: var(--texte-tenu); border-style: dashed; }
.comparer__repartition { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }
.comparer__repartition strong { color: var(--texte); font-weight: 600; }
.comparer__avis { border: 0; border-top: 1px solid var(--trait); margin: 0; padding: var(--e-3) 0 0; min-width: 0; }
.comparer__avis legend { font-size: var(--t-13); font-weight: 600; color: var(--texte-doux); padding: 0; margin-bottom: var(--e-2); float: left; width: 100%; }
.comparer__choix-liste { clear: both; display: flex; flex-wrap: wrap; gap: var(--e-2); }
.comparer__choix { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 38px; padding: var(--e-1) var(--e-3); border: 1px solid var(--controle); border-radius: var(--r-pilule); font-size: var(--t-15); cursor: pointer; }
.comparer__choix:has(input:checked) { border-color: var(--action); color: var(--action); background: var(--teinte); font-weight: 600; }
.comparer__choix input { margin: 0; accent-color: var(--action); }
.comparer__resultats { display: grid; gap: var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-l); padding: var(--e-4); }
.comparer__resultats .section__titre { font-size: var(--t-21); }
.comparer__resultats .section__titre:focus { outline: none; }
.comparer__resultats .section__titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.comparer__confidentialite { font-size: var(--t-13); color: var(--texte-doux); }
.comparer__perimetre, .discret-outil { font-size: var(--t-13); color: var(--texte-doux); overflow-wrap: anywhere; }
.comparer__verdict { font-size: var(--t-15); }
.comparer__resultat { display: grid; gap: var(--e-1); padding-top: var(--e-3); border-top: 1px solid var(--trait); }
.comparer__resultat-titre { font-size: var(--t-15); }
.comparer__comptes { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-3); font-size: var(--t-15); }
.comparer__jauge { display: flex; height: 8px; border-radius: var(--r-pilule); overflow: hidden; background: var(--teinte); }
.comparer__jauge span { flex: 0 1 0; min-width: 0; }
.comparer__jauge-accord { background: var(--action); }
.comparer__jauge-desaccord { background: var(--anthracite); }
.comparer__jauge-indetermine { background: repeating-linear-gradient(135deg, var(--trait-forte) 0 3px, transparent 3px 6px); }
.comparer__bornes { font-size: var(--t-13); color: var(--texte-doux); }
.comparer__composition-liste { margin: var(--e-2) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-2); font-size: var(--t-13); color: var(--texte-doux); }
.comparer__issue { font-weight: 600; color: var(--texte); }
.comparer__composition-liste ul { margin: var(--e-1) 0 0; padding-left: var(--e-4); display: grid; gap: var(--e-1); }
.comparer__composition-theme { list-style: none; margin-left: -18px; }
.comparer__composition-titre { color: var(--texte); }
.comparer__aller-resultats { display: none; }
.comparer__detail { display: grid; gap: var(--e-1); max-width: 820px; }
.comparer__citation { margin: 0; padding: var(--e-3) var(--e-4); background: var(--teinte); border-radius: var(--r-m); font-size: var(--t-17); line-height: 1.6; }
.bouton--lien { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
@media (max-width: 960px) {
  .comparer__grille { grid-template-columns: 1fr; gap: var(--e-6); }
  .comparer__aside { position: static; max-height: none; overflow: visible; padding: 0; }
  /* Sur écran étroit, un raccourci reste au bas de l'écran pour rejoindre les résultats. */
  .comparer__aller-resultats { display: inline-flex; position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); margin-top: var(--e-4); z-index: 5; background: var(--fond); }
  .comparer__aller-resultats--inutile { visibility: hidden; }
}
@media (max-width: 640px) {
  .comparer__proposition, .comparer__resultats { padding: var(--e-3); }
}

/* ---------- Promesses et engagements (10B) ----------
   Les états ne sont jamais portés par la seule couleur : chaque pastille écrit
   son état en toutes lettres, et la menthe reste décorative ailleurs. */
.promesses__avertissement { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); max-width: 76ch; }
.promesses__methode { margin-top: var(--pile-m); }
.promesses__methode .bloc__titre { margin-top: var(--e-3); }
.promesses__barre { display: grid; gap: var(--e-1); }
.promesses__recherche { display: grid; gap: var(--e-2); padding-block: var(--e-3); border-bottom: 1px solid var(--trait); }
.promesses__recherche-ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.promesses__recherche .champ { max-width: 420px; flex: 1 1 240px; }
.promesses__liste { display: grid; gap: var(--e-3); margin-top: var(--pile-m); }
.promesse-carte { display: grid; gap: var(--e-2); }
.promesse-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.promesse-carte__citation { font-size: var(--t-15); color: var(--texte-doux); }
.promesse-carte__justification { font-size: var(--t-15); }
.promesse-etat {
  display: inline-flex; align-items: center; padding: var(--e-1) var(--e-2); border-radius: var(--r-pilule, 999px);
  border: 1px solid var(--trait-forte); font-size: var(--t-12); font-weight: 600; color: var(--texte);
}
.promesse-etat--realise { background: var(--anthracite); border-color: var(--anthracite); color: #fff; }
.promesse-etat--partiellement_realise { background: var(--teinte); border-color: var(--action); color: var(--action); }
.promesse-etat--engage { border-color: var(--action); color: var(--action); }
.promesse-etat--annonce { border-color: var(--trait-forte); color: var(--texte-doux); }
.promesse-etat--abandonne { border-style: dashed; border-color: var(--anthracite); }
.promesse-etat--non_evaluable { border-style: dotted; color: var(--texte-tenu); }
.promesses__fiche { display: grid; gap: var(--e-1); max-width: 820px; }
.promesses__justification { margin-top: var(--e-3); font-size: var(--t-17); line-height: 1.6; }
.promesses__echeance, .promesses__preuve { margin-top: var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }
.promesses__echeance strong, .promesses__preuve strong { color: var(--texte); }
.promesses__citation { margin: 0; padding: var(--e-3) var(--e-4); background: var(--teinte); border-radius: var(--r-m); font-size: var(--t-17); line-height: 1.6; }
.promesses__pourquoi { margin-top: var(--pile-m); }
.promesses__pourquoi-corps { display: grid; gap: var(--e-3); margin-top: var(--e-2); }
.criteres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.critere { font-size: var(--t-15); padding-left: var(--e-3); border-left: 1px solid var(--trait); }
.critere__marque { font-weight: 600; }
.critere--true .critere__marque { color: var(--action); }
.critere--false .critere__marque { color: var(--texte); }
.critere--null .critere__marque { color: var(--texte-tenu); }
.promesses__identifiant { font-family: var(--police-apparat); font-size: var(--t-13); background: var(--teinte); padding: var(--e-1) var(--e-1); border-radius: var(--r-s); }
.chronologie { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.chronologie__pas { display: grid; gap: var(--e-1); padding-left: var(--e-3); border-left: 1px solid var(--trait); }
.chronologie__entete { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; font-size: var(--t-13); }
.chronologie__titre { font-size: var(--t-15); font-weight: 600; }
.chronologie__citation { margin: var(--e-1) 0; padding: var(--e-2) var(--e-3); background: var(--teinte); border-radius: var(--r-m); font-size: var(--t-15); line-height: 1.55; }
.chronologie__etablit, .chronologie__reserve { font-size: var(--t-15); color: var(--texte-doux); }
.chronologie__etablit strong, .chronologie__reserve strong { color: var(--texte); }
.chronologie .source__meta { display: block; }
@media (max-width: 640px) {
  .promesse-carte, .promesses__pourquoi-corps { padding: 0; }
  .chronologie__citation { padding: var(--e-2) var(--e-2); }
}

/* ---------- Budgets publics (10C) ----------
   Barres de comparaison sobres : la longueur aide à comparer, la valeur exacte
   reste écrite à côté. Aucune couleur ne qualifie une dépense. */
.budgets__totaux { margin-top: var(--pile-m); display: grid; gap: var(--e-2); max-width: 76ch; }
.budgets__total-principal { border: 1px solid var(--trait); border-radius: var(--r-l); padding: var(--e-4) var(--e-4); display: grid; gap: var(--e-1); }
.budgets__total-intitule { font-size: var(--t-13); color: var(--texte-doux); }
/* Un montant est un relevé : il se lit dans l'apparat de preuve, en chasse fixe. */
/*
 * L'apparat en chasse fixe sert à aligner des colonnes de chiffres, pas à faire un titre.
 * Rendu à 34 px, « 436,67 Md€ » donnait à la virgule la chasse pleine d'un caractère et
 * décrochait l'unité. Le montant reprend la police du texte, avec des chiffres tabulaires.
 */
.budgets__total-montant { font-family: var(--police); font-variant-numeric: tabular-nums; font-size: var(--t-44); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.budgets__rapprochement { font-size: var(--t-13); color: var(--texte-doux); }
.budgets__methode { margin-top: var(--pile-m); }
.budgets__methode .bloc__titre { margin-top: var(--e-3); }
.budgets__barre { display: grid; gap: var(--e-1); }
.budgets__recherche { display: grid; gap: var(--e-2); padding-block: var(--e-3); border-bottom: 1px solid var(--trait); }
.budgets__recherche-ligne { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }
.budgets__recherche .champ { max-width: 420px; flex: 1 1 240px; }
/* ---------- La liste des missions : un tableau, non trente-trois cartes ----------
 *
 * **Défaut D1 du registre.** Chaque mission était une carte bordée de 1 022 px de
 * large portant une barre de progression sur toute la largeur : 7 229 px sur
 * ordinateur, 10 182 px à 390 px, mesurés sur `polideo.fr` le 5 octobre 2026 pour
 * ce qui est un tableau de deux colonnes de chiffres.
 *
 * Colonnes fixes, filet de séparation, montants en chasse tabulaire alignés à
 * droite. La longueur n'occupe plus la largeur de la page mais une colonne
 * bornée : un poste à 1 % du périmètre ne se lit pas mieux sur un rail de mille
 * pixels que sur un rail de cent-quarante, et le rail de mille obligeait à
 * trente-trois cadres pour tenir.
 *
 * `.carte` reste : la ligne garde sa surface cliquable et la règle d'empilement
 * qui a corrigé D5. Son cadre, son arrondi et son fond sont neutralisés ici — un
 * filet suffit à séparer deux lignes, et trente-trois cadres ne distinguaient
 * plus rien.
 */
.budgets__liste { display: grid; margin-top: var(--e-2); }
.budget-carte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 6ch minmax(0, 140px) max-content;
  align-items: center;
  column-gap: var(--e-3);
  row-gap: var(--e-1);
  padding: var(--e-2) 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  background: transparent;
}
.budget-carte:hover { border-color: var(--trait); background: var(--teinte); }
.budget-carte:last-child { border-bottom: 0; }
.budget-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.budget-carte__objet { display: grid; gap: 2px; min-width: 0; }
.budget-carte .carte__titre { font-size: var(--t-17); letter-spacing: 0; line-height: 1.3; }
.budget-carte .carte__meta { font-size: var(--t-12); }
.budget-carte__montant { font-size: var(--t-17); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.budget-carte__part { font-size: var(--t-15); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; color: var(--texte-doux); }
.budget-carte__part--sans-objet { color: var(--texte-tenu); }
.budget-carte__actions { display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: flex-end; }
.budget-carte__actions .tag { font-size: var(--t-12); padding: 2px var(--e-2); min-height: 0; }
/* Le poste tenu hors du sous-total : pas de longueur, et la raison à sa place. */
.budget-carte__sans-longueur { font-size: var(--t-12); font-style: italic; }
.budget-carte--hors-perimetre { background: var(--teinte); padding-inline: var(--e-2); }

/* L'en-tête de colonnes, et la notice d'échelle qui dit ce que la longueur vaut. */
.budget-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content 6ch minmax(0, 140px) max-content;
  column-gap: var(--e-3);
  align-items: end;
  padding-bottom: var(--e-1);
  border-bottom: 1px solid var(--trait-forte);
  font-size: var(--t-12);
  color: var(--texte-tenu);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.budget-colonnes__montant, .budget-colonnes__part { text-align: right; }
.budget-echelle { margin-top: var(--e-2); }

.budget-barre { display: block; height: 8px; border-radius: var(--r-pilule); background: var(--teinte); overflow: hidden; }
.budget-carte--hors-perimetre .budget-barre { background: transparent; }
.budget-barre__remplissage { display: block; height: 100%; background: var(--action); border-radius: inherit; }
.budget-lectures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--e-2); margin-top: var(--e-4); }
.budget-lecture { border: 1px solid var(--trait); border-radius: var(--r-m); padding: var(--e-3) var(--e-3); display: grid; gap: var(--e-1); min-width: 0; }
.budget-lecture__intitule { font-size: var(--t-13); color: var(--texte-doux); }
.budget-lecture__montant { font-size: var(--t-21); font-variant-numeric: tabular-nums; }
.budget-lecture--consommes { background: var(--teinte); border-color: transparent; }
.budget-ecarts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--e-3); margin-top: var(--e-1); }
.budget-ecart { border-left: 1px solid var(--trait); padding-left: var(--e-3); display: grid; gap: var(--e-1); }
.budget-ecart__titre { font-size: var(--t-15); font-weight: 600; }
.budget-ecart__valeur { font-size: var(--t-15); font-variant-numeric: tabular-nums; }
.budget-passage { margin-top: var(--pile-m); }
.budget-passage__corps { display: grid; gap: var(--e-2); margin-top: var(--e-2); }
.budget-fil { font-size: var(--t-13); color: var(--texte-doux); margin-top: var(--e-2); }
.budget-fil a { color: var(--accent); }
.budget-annees__montants { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); font-variant-numeric: tabular-nums; }
.budget-annees__variation { margin-top: var(--e-2); font-size: var(--t-15); }
.budgets__comparaison { margin-top: var(--pile-m); display: grid; gap: var(--e-2); }
.budgets__comparaison .tableau { width: 100%; border-collapse: collapse; font-size: var(--t-15); }
.budgets__comparaison th, .budgets__comparaison td { text-align: left; padding: var(--e-2) var(--e-2); border-bottom: 1px solid var(--trait); }
.budgets__comparaison td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.budgets__comparaison .tableau__total th, .budgets__comparaison .tableau__total td { font-weight: 700; border-bottom: 0; }
.budgets__explications { margin-top: var(--pile-l, 40px); }
.budgets__fiche { display: grid; gap: var(--e-1); max-width: 820px; }
.budgets__resume { margin-top: var(--e-3); font-size: var(--t-17); line-height: 1.6; max-width: 76ch; }
.budgets__identifiant { font-family: var(--police-apparat); font-size: var(--t-13); background: var(--teinte); padding: var(--e-1) var(--e-1); border-radius: var(--r-s); }
.budget-pieces { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.budget-piece { display: grid; gap: var(--e-1); padding-left: var(--e-3); border-left: 1px solid var(--trait); }
.budget-piece__entete { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; font-size: var(--t-13); }
.budget-piece__titre { font-size: var(--t-15); font-weight: 600; }
.budget-piece__citation { margin: var(--e-1) 0; padding: var(--e-2) var(--e-3); background: var(--teinte); border-radius: var(--r-m); font-size: var(--t-15); line-height: 1.55; }
.budget-piece__etablit, .budget-piece__reserve { font-size: var(--t-15); color: var(--texte-doux); }
.budget-piece__etablit strong, .budget-piece__reserve strong { color: var(--texte); }
/* ---------- Au téléphone : deux lignes, et la colonne de longueur tombe ----------
 * Cinq colonnes ne tiennent pas dans 390 px sans rogner un nom de mission. On
 * garde ce qui se lit — le nom, le montant, la part — et la longueur passe sous
 * eux, pleine largeur de la ligne mais sur deux lignes et non sur six.
 * L'en-tête de colonnes disparaît : trois mots de légende pour deux chiffres
 * coûteraient plus de hauteur qu'ils n'en expliquent.
 */
@media (max-width: 760px) {
  .budget-colonnes { display: none; }
  /*
   * Deux lignes, et pas trois. Le nom prend toute la largeur — « Administration
   * générale et territoriale de l'État » rogné sur 280 px ne se lit pas —, puis
   * les trois chiffres et la commande tiennent sur une seule rangée. Le nombre
   * de programmes sort de la ligne : il est dans la fiche, et il coûtait ici une
   * ligne de texte par mission, soit une trentaine d'écrans de téléphone pour
   * trente-trois nombres que personne ne compare dans cette vue.
   */
  .budget-carte {
    grid-template-columns: max-content 6ch minmax(0, 1fr) max-content;
    grid-template-areas:
      "objet   objet objet objet"
      "montant part  barre actions";
    row-gap: 2px;
    padding: var(--e-2) 0;
  }
  .budget-carte__objet { grid-area: objet; }
  .budget-carte__montant { grid-area: montant; text-align: left; }
  .budget-carte__part { grid-area: part; }
  .budget-carte .budget-barre { grid-area: barre; align-self: center; }
  .budget-carte__sans-longueur { grid-area: barre; }
  .budget-carte__actions { grid-area: actions; justify-content: flex-end; }
  .budget-carte .carte__meta { display: none; }
}

@media (max-width: 640px) {
  .budget-lecture { padding: var(--e-2) var(--e-3); }
}

/* Comparabilité annuelle : le statut est écrit, jamais déduit d'un intitulé. */
.budget-comparabilite { margin-top: var(--e-2); padding: var(--e-3) var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-m); display: grid; gap: var(--e-1); }
.budget-comparabilite--rupture { background: var(--teinte); border-color: transparent; }
.budget-comparabilite__titre { font-size: var(--t-15); font-weight: 600; }
.budget-comparabilite__texte { font-size: var(--t-15); color: var(--texte-doux); }
.budgets__groupe { margin-top: var(--pile-m); font-size: var(--t-21); }
.budgets__couverture { display: grid; gap: var(--e-2); }

/* ---------- Panneau « cette source, ici » (lot 27) ---------- */
.panneau-source { margin: 0 0 var(--e-4); padding: var(--e-4) var(--e-4); border: 1px solid var(--trait-forte); border-radius: var(--r-m); background: var(--blanc); }
.panneau-source:focus { outline: 2px solid var(--accent); outline-offset: 3px; }
.panneau-source__surtitre { margin: 0 0 var(--e-1); font-size: var(--t-12); letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-tenu); }
.panneau-source__titre { margin: 0 0 var(--e-2); font-size: var(--t-21); line-height: 1.3; overflow-wrap: anywhere; }
.panneau-source__compte { margin: var(--e-3) 0 var(--e-2); font-size: var(--t-15); color: var(--texte-doux); }
.panneau-source__usages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.panneau-source__usage { display: grid; gap: var(--e-1); padding-left: var(--e-3); border-left: 2px solid var(--trait); font-size: var(--t-15); min-width: 0; overflow-wrap: anywhere; }
.panneau-source__type { font-size: var(--t-12); letter-spacing: 0.02em; text-transform: uppercase; color: var(--texte-tenu); }
.panneau-source__libelle { font-weight: 600; }
.panneau-source__detail { color: var(--texte-doux); font-size: var(--t-13); }
.panneau-source__sans-adresse { color: var(--texte-tenu); font-size: var(--t-13); }
.panneau-source__aller { justify-self: start; font-size: var(--t-15); }
.panneau-source__liens { margin: var(--e-3) 0 0; font-size: var(--t-15); }
@media (max-width: 480px) { .panneau-source { padding: var(--e-3) var(--e-3); } }
.panneau-source__meta { margin: 0 0 var(--e-1); font-size: var(--t-13); color: var(--texte-tenu); overflow-wrap: anywhere; }
.panneau-source__passage { margin: 0 0 var(--e-1); font-size: var(--t-13); color: var(--texte-doux); }
.panneau-source__alerte { margin: 0 0 var(--e-1); font-size: var(--t-13); color: var(--alerte, #a12); }
.fiche__separation { margin: var(--e-2) 0 var(--e-1); font-size: var(--t-15); color: var(--texte-doux); }

/*
 * P17 — un bloc de texte préformaté : l'aperçu de la question préparée, et le
 * modèle qui montre son plan.
 *
 * Il porte des adresses longues, qui doivent se couper plutôt que déborder sur
 * un écran de 390 px. La règle vit **ici et non dans un attribut `style`** :
 * la politique de sécurité du site servi est `style-src 'self'` sans
 * `'unsafe-inline'`, et le navigateur ignore alors purement et simplement tout
 * style en ligne. Une règle écrite en ligne passe en local, où la copie est
 * servie sans cette politique, et disparaît en production — c'est exactement ce
 * qui est arrivé à la première candidate de ce lot.
 */
.texte-preformate {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- L'amorce servie des huit outils (P3) ----------
 *
 * Le HTML de `budgets`, `promesses`, `responsables`, `lois`, `atelier`,
 * `comparer`, `alternatives` et `integrite` ne portait ni titre ni contenu :
 * tout arrivait après JavaScript, et sans lui la page était vide. Ces règles
 * habillent ce que le serveur rend désormais avant tout script — le titre,
 * l'introduction, le premier chiffre — et **réservent la place** du résultat,
 * pour que son arrivée ne décale pas ce que le lecteur est en train de lire.
 *
 * L'amorce reprend l'apparence de l'ouverture que le script compose ensuite :
 * la substitution doit se voir le moins possible. Elle n'est pas masquée quand
 * le script s'exécute — elle est remplacée, par `replaceChildren`, et ce qui
 * la remplace lui ressemble.
 */
.amorce__chiffre { margin-top: var(--pile-m); display: grid; gap: var(--e-1); max-width: 76ch; border: 1px solid var(--trait); border-radius: var(--r-l); padding: var(--e-4); }
.amorce__intitule { font-size: var(--t-13); color: var(--texte-doux); }
.amorce__valeur { font-family: var(--police); font-variant-numeric: tabular-nums; font-size: var(--t-44); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.amorce__precision { font-size: var(--t-13); color: var(--texte-doux); }
.amorce__noscript { margin-top: var(--e-4); max-width: 76ch; }
.amorce__donnees { margin-top: var(--e-2); }

/*
 * La place réservée au résultat.
 *
 * Sans elle, l'arrivée de l'outil pousse d'un coup tout ce qui le suit — le
 * bloc « Comprendre les mots », le pied — et un lecteur déjà en train de lire
 * perd sa ligne. La hauteur est celle d'un premier écran de résultat, pas celle
 * de l'outil entier : réserver dix mille pixels pour une liste qui en fait
 * deux mille laisserait un trou, ce qui est le défaut inverse.
 *
 * Elle disparaît dès que le script a rendu quelque chose : `#outil-…:not(:empty)`
 * ne peut pas la viser, puisqu'elle est **dans** ce conteneur et le remplissage
 * la remplace. C'est donc le remplacement lui-même qui l'emporte, et cette
 * règle ne sert qu'avant lui.
 */
.amorce__place { min-height: 60vh; }
@media (prefers-reduced-motion: no-preference) { .amorce__place { min-height: 60vh; } }

/* ---------- L'annuaire : un index replié, et une page par territoire (P2) ----------
 *
 * `deputes.html` portait 1,5 Mo de HTML et 21 747 éléments — 678 fiches
 * complètes, trente-deux éléments chacune, pour 364 555 px de haut à 1440 px.
 * L'index n'en garde que ce qui sert à retrouver quelqu'un ; le détail est sur
 * la page du territoire, qui est aussi son adresse partageable.
 *
 * Les 107 territoires sont des blocs repliés. Un bloc fermé n'est pas rendu, mais
 * **ses entrées restent dans le document** : c'est ce qui permet à la recherche
 * de continuer à les filtrer et au téléchargement d'une sélection de continuer à
 * les emporter, sans qu'aucune ligne pèse sur la hauteur de la page.
 *
 * Ces sections-ci n'ont pas l'espacement d'une section de lecture : cent-sept
 * fois quarante pixels de marge font quatre mille pixels de vide, et c'est le
 * défaut que l'on vient de corriger qui reviendrait par la marge.
 */
.section--index { padding-block: 0; }
.section--index + .section--index { margin-top: 0; }
.annuaire-territoire { border-bottom: 1px solid var(--trait); }
.annuaire-territoire__titre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3);
  padding: var(--e-2) 0; cursor: pointer; list-style: none;
}
.annuaire-territoire__titre::-webkit-details-marker { display: none; }
.annuaire-territoire__titre::before { content: "+"; width: 1em; flex: none; color: var(--texte-tenu); font-variant-numeric: tabular-nums; }
.annuaire-territoire[open] .annuaire-territoire__titre::before { content: "−"; }
.annuaire-territoire__titre:hover { color: var(--accent-sombre); }
.annuaire-territoire__titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.annuaire-territoire__nom { font-size: var(--t-17); font-weight: 650; }
.annuaire-territoire__compte { font-size: var(--t-13); color: var(--texte-doux); }
.annuaire-index { display: grid; padding: 0 0 var(--e-3) 1.6em; }
.annuaire-index .piece-fiche {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: baseline; column-gap: var(--e-3);
  padding: var(--e-1) 0; border-bottom: 1px solid var(--trait);
}
.annuaire-index .piece-fiche:last-child { border-bottom: 0; }
.annuaire-ligne__nom { font-size: var(--t-15); font-weight: 600; }
.annuaire-ligne__nom a { color: inherit; }
.annuaire-ligne__details { font-size: var(--t-13); color: var(--texte-doux); }
@media (max-width: 700px) {
  .annuaire-index .piece-fiche { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .annuaire-index { padding-left: 1em; }
}
.annuaire-territoire__resume { font-size: var(--t-13); color: var(--texte-doux); padding: 0 0 var(--e-1) 1.6em; }