/* ═══════════════════════════════════════════════════════════════════════
   RADAR PARLEMENTAIRE — système visuel
   Encre & papier. Un accent indigo, un signal ocre, rien d'autre.
   Aucune couleur ne désigne un groupe politique : la couleur porte une
   grandeur ou une emphase, l'identité passe par le texte.

   LA MARQUE. Le logo apporte trois couleurs — un bleu d'encre, le bleu et le
   rouge du drapeau. Elles sont déclarées ici pour être nommées, et elles ne
   servent qu'à la marque : le favicon, le logo du pied de page. Aucune mesure,
   aucune bande, aucune case de matrice ne les emploie. Un lecteur qui verrait
   du bleu et du rouge sur un graphique de ce site aurait raison de croire
   qu'ils désignent des camps — c'est précisément pourquoi ils n'y entrent pas.
   L'emblème de l'en-tête est d'ailleurs monochrome : il suit `--encre`.

   La typographie de l'en-tête reprend celle du logo : « RADAR » en chasse fixe
   très espacée, « parlementaire » en romain italique.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --papier:       #F5F4EF;
  --papier-creux: #EBE9E1;
  --papier-haut:  #FBFAF7;
  --encre:        #191A1C;
  --encre-2:      #5E5F5C;
  --encre-3:      #8C8D88;
  --trait:        #DBD9D0;
  --trait-fort:   #C4C2B7;
  --accent:       #33327A;
  --accent-vif:   #5250C0;
  --accent-voile: #33327A1F;
  --signal:       #8A6B12;
  --signal-voile: #8A6B121F;

  /* Réservées à la marque. Voir l'avertissement en tête de fichier. */
  --marque:        #0A1F44;
  --drapeau-bleu:  #0044BB;
  --drapeau-rouge: #E4002B;

  --serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", ui-sans-serif, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "Roboto Mono", monospace;

  --cadre: 1140px;
  --lecture: 63ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:       #131416;
    --papier-creux: #1B1D20;
    --papier-haut:  #1F2126;
    --encre:        #EDEBE4;
    --encre-2:      #9E9F99;
    --encre-3:      #74756F;
    --trait:        #2C2E32;
    --trait-fort:   #3E4045;
    --accent:       #9C99F0;
    --accent-vif:   #B4B1FF;
    --accent-voile: #9C99F026;
    --signal:       #D9B348;
    --signal-voile: #D9B34826;
  }
}
:root[data-theme="dark"] {
  --papier:       #131416;
  --papier-creux: #1B1D20;
  --papier-haut:  #1F2126;
  --encre:        #EDEBE4;
  --encre-2:      #9E9F99;
  --encre-3:      #74756F;
  --trait:        #2C2E32;
  --trait-fort:   #3E4045;
  --accent:       #9C99F0;
  --accent-vif:   #B4B1FF;
  --accent-voile: #9C99F026;
  --signal:       #D9B348;
  --signal-voile: #D9B34826;
}
:root[data-theme="light"] {
  --papier:       #F5F4EF;
  --papier-creux: #EBE9E1;
  --papier-haut:  #FBFAF7;
  --encre:        #191A1C;
  --encre-2:      #5E5F5C;
  --encre-3:      #8C8D88;
  --trait:        #DBD9D0;
  --trait-fort:   #C4C2B7;
  --accent:       #33327A;
  --accent-vif:   #5250C0;
  --accent-voile: #33327A1F;
  --signal:       #8A6B12;
  --signal-voile: #8A6B121F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── ossature ──────────────────────────────────────────────────────── */

.cadre { max-width: var(--cadre); margin: 0 auto; padding: 0 32px; }
.lecture { max-width: var(--lecture); }

/* Marqueur de section : mono, capitales, très espacé.
   Il porte toujours une information — jamais un numéro décoratif. */
.jalon {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--encre-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
.jalon::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait);
}

/* La provenance d'un chiffre est toujours en mono : c'est la signature
   du site. Mono = vérifiable, dénombrable, opposable. */
.provenance {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--encre-2);
  letter-spacing: -0.01em;
}
.provenance b { color: var(--encre); font-weight: 600; }

a { color: inherit; text-decoration-color: var(--trait-fort); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-vif); outline-offset: 3px; border-radius: 2px; }

/* ── en-tête ───────────────────────────────────────────────────────── */

.entete {
  border-bottom: 1px solid var(--trait);
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.entete .cadre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 108px;
}
.marque { display: flex; align-items: center; text-decoration: none; }
/* Le verrou complet dans l'en-tête, à 196 px de large. La hauteur de la barre
   suit : le logo fait 0,484 fois sa largeur, soit 95 px, et une barre de 96 px
   ne lui laissait pas de quoi respirer — 108 px lui donnent six pixels de marge
   au-dessus et en dessous.
   Le verrou n'est un verrou que tant qu'on lit ses quatre étages. Sous 165 px,
   la barre tricolore et la signature « Ce que fait votre député » se referment
   en deux filets gris et il ne reste qu'un mot-marque : c'est le plancher, et
   il commande les tailles ci-dessous plutôt que l'inverse.
   La source fait 929 px de large : l'agrandissement ne coûte aucune netteté,
   y compris sur écran à haute densité. */
.marque .verrou { display: block; width: 196px; height: auto; }
/* Sous 720 px le menu disparaît de l'en-tête et la barre du bas prend le
   relais : la marque n'a plus de voisin à égaler. Elle descend à 168 px — le
   plancher de lisibilité de la signature — et la barre à 92 px, pour ne pas
   manger la hauteur d'écran d'un téléphone. */
@media (max-width: 720px) {
  .entete .cadre { height: 92px; }
  .marque .verrou { width: 168px; }
}
/* Il n'y a plus de palier en dessous. L'ancien en-tête cachait le mot
   « parlementaire » sous 380 px parce que l'emblème et deux mots composés en
   HTML débordaient ; le verrou seul, à 168 px dans un cadre qui en offre 340,
   tient sans rien sacrifier. */
.menu { display: flex; gap: 26px; font-size: 14.5px; }
.menu a { text-decoration: none; color: var(--encre-2); padding: 4px 0; border-bottom: 1.5px solid transparent; }
.menu a:hover { color: var(--encre); }
/* Le menu ne se resserre plus sur tablette. Il le faisait parce que la marque
   d'alors — emblème découpé plus « RADAR parlementaire » recomposé en HTML —
   tenait 300 px et poussait « Les députés » et « Qui vote avec qui » à la
   ligne. Le verrou en fait 196 : à 721 px, la plus étroite largeur où ce menu
   s'affiche encore, la barre offre 681 px pour 636 de contenu. Rien ne casse,
   et quatre libellés à 14,5 px valent mieux que quatre à 13,5. */
.menu a[aria-current] { color: var(--encre); border-bottom-color: var(--accent); }
@media (max-width: 720px) { .menu { display: none; } }

/* ── navigation mobile ─────────────────────────────────────────────────
   Le menu de l'en-tête disparaît sous 720 px : cette barre le remplace, au
   lieu de laisser le lecteur sans chemin. Quatre destinations, quatre verbes —
   ce que la page permet de faire, pas comment elle s'appelle.
   ──────────────────────────────────────────────────────────────────────── */

.menu-mobile { display: none; }

@media (max-width: 720px) {
  .menu-mobile {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: fixed; inset: auto 0 0 0; z-index: 60;
    background: color-mix(in srgb, var(--papier) 92%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    border-top: 1px solid var(--trait);
    /* La barre système d'iOS mange les derniers pixels : sans cette réserve,
       le dernier onglet est à moitié sous le trait de l'accueil. */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .menu-mobile a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 9px 4px 8px; text-decoration: none; color: var(--encre-2);
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
    text-transform: uppercase;
    border-top: 2px solid transparent;
  }
  .menu-mobile a svg { width: 21px; height: 21px; }
  .menu-mobile a[aria-current] { color: var(--accent); border-top-color: var(--accent); }

  /* Le pied de page doit pouvoir être atteint : sans cette réserve, ses
     dernières lignes restent définitivement sous la barre. */
  .pied { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body { padding-bottom: 62px; }
}

/* ── titre de fiche ────────────────────────────────────────────────── */

.chapeau { padding-block: 72px 0; }
.fil {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 22px;
}
h1 {
  font-family: var(--serif);
  font-size: clamp(2.9rem, 7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.sous-titre-fiche {
  margin: 20px 0 0;
  font-size: 17px;
  color: var(--encre-2);
  max-width: 60ch;
}
.sous-titre-fiche b { color: var(--encre); font-weight: 600; }

.etat {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--encre-2);
  border: 1px solid var(--trait-fort); border-radius: 999px;
  padding: 4px 11px; margin-left: 4px;
  vertical-align: 3px;
}
.etat::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* ── la thèse ──────────────────────────────────────────────────────── */

.these {
  margin: 56px 0 0;
  padding: 40px 0 44px;
  border-top: 2px solid var(--encre);
  border-bottom: 1px solid var(--trait);
}
.these p {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.9vw, 2.05rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}
.these p + p { margin-top: 22px; max-width: 34ch; color: var(--encre-2); font-size: clamp(1.15rem, 2vw, 1.4rem); }
.these em { font-style: normal; box-shadow: inset 0 -0.42em 0 var(--accent-voile); }
@media (min-width: 900px) {
  .these { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .these p + p { margin-top: 8px; }
}

/* ── renvoi vers le socle pédagogique (fiches) ─────────────────────── */

/* Le socle vit sur l'accueil, pas sur les 577 fiches. Cette bande y renvoie
   sans occuper la place d'une mesure : un lecteur qui connaît l'Assemblée doit
   pouvoir la traverser des yeux, celui qui la découvre doit la voir. D'où le
   registre discret — une seule ligne, pas d'encadré, pas de titre. */
.renvoi-socle {
  padding-block: 20px 22px;
  border-bottom: 1px solid var(--trait);
}
.renvoi-socle p {
  max-width: var(--lecture);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--encre-2);
}
.renvoi-socle a {
  color: var(--encre);
  text-decoration-color: var(--trait-fort);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.renvoi-socle a:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ── encart pédagogique ────────────────────────────────────────────── */

/* Le parcours d'un texte : une liste numérotée qui doit se lire comme une
   suite d'étapes, pas comme une énumération. Le numéro est en chasse fixe,
   comme tous les repères dénombrables du site. */
.parcours {
  max-width: var(--lecture);
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}
.parcours li {
  counter-increment: etape;
  position: relative;
  padding-left: 34px;
  margin-bottom: 14px;
  color: var(--encre-2);
  line-height: 1.7;
}
.parcours li::before {
  content: counter(etape);
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--trait-fort);
  border-radius: 50%;
  width: 21px; height: 21px;
  display: grid; place-items: center;
}
.parcours li b { color: var(--encre); }

.socle {
  padding-block: 40px 48px;
  border-bottom: 1px solid var(--trait);
}
.socle h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.6rem; letter-spacing: -0.015em;
  margin: 18px 0 8px;
}
.socle > .lecture > p { margin: 0 0 26px; color: var(--encre-2); }
.missions {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 3px;
  overflow: hidden;
}
.mission { background: var(--papier); padding: 22px 24px 26px; }
.mission h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px; font-weight: 600;
}
.mission p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.mission p b { color: var(--encre); font-weight: 600; }

/* ── bloc chiffre ──────────────────────────────────────────────────── */

.mesure { padding-block: 56px; border-bottom: 1px solid var(--trait); }
.mesure-tete { display: grid; gap: 28px; align-items: end; margin: 26px 0 34px; }
@media (min-width: 860px) {
  .mesure-tete { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 56px; }
}
.valeur {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 9vw, 5.4rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.valeur .unite { font-size: 0.34em; letter-spacing: 0; color: var(--encre-2); font-family: var(--sans); font-weight: 400; }
/* Le tiret d'une mesure absente n'a ni le poids ni l'encre d'un chiffre : il
   ne dit pas « zéro », il dit « rien à calculer ici ». */
.valeur-absente { color: var(--encre-3); }
.valeur-note { margin-top: 12px; }
.enclair { font-size: 18px; line-height: 1.55; margin: 0; max-width: 46ch; }
.enclair b { font-weight: 600; }
.enclair + .enclair { margin-top: 14px; color: var(--encre-2); font-size: 16.5px; }

/* ── la bande des 577 ──────────────────────────────────────────────── */

.bande { position: relative; margin: 0 0 26px; padding: 30px 0 20px; }
.bande-svg { display: block; width: 100%; height: 56px; shape-rendering: crispEdges; }
/* Chaque barre est peu opaque : là où les députés se serrent, les barres se
   recouvrent et le gris s'accumule. La densité se lit sans légende. */
.bande-ticks > rect { fill: var(--encre-2); opacity: 0.5; }
.bande-ticks { opacity: 0; transition: opacity 900ms ease; }
.vu .bande-ticks { opacity: 1; }
.bande-ic { fill: var(--accent-voile); stroke: none; }
.bande-sujet { fill: var(--accent); }
.bande-mediane { stroke: var(--encre); stroke-width: 1; stroke-dasharray: 2 3; }
.bande-axe { stroke: var(--trait-fort); stroke-width: 1; }

/* Les étiquettes sont en HTML, pas en SVG : le tracé s'étire en largeur
   (preserveAspectRatio="none"), le texte ne doit surtout pas suivre. */
.etiq {
  position: absolute;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0; transition: opacity 500ms ease 650ms;
}
.vu .etiq { opacity: 1; }
.etiq-sujet { top: 0; color: var(--accent); font-weight: 600; }
.etiq-mediane { bottom: 0; color: var(--encre-3); }
.etiq[data-ancre="debut"] { transform: none; }
.etiq[data-ancre="fin"] { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) {
  .bande-ticks, .etiq { transition: none; opacity: 1; }
}

.legende-bande {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--encre-3); text-transform: uppercase;
  padding-top: 10px; border-top: 1px solid var(--trait);
}
.legende-bande i { font-style: normal; color: var(--encre-2); }

/* ── l'activité en un coup d'œil ───────────────────────────────────── */

.bilan { padding-block: 8px 44px; border-bottom: 1px solid var(--trait); }
.bilan .tableau-defile { margin-top: 20px; }
.bilan .provenance { margin-top: 14px; max-width: 78ch; line-height: 1.55; }
/* La somme n'est pas une mesure de plus : elle se lit comme un total de
   colonne, filet au-dessus et encre secondaire, pas comme une quatrième
   ligne de même rang. */
.tableau-groupes tr.somme td { border-top: 1px solid var(--trait-fort); color: var(--encre-2); }
.tableau-groupes tr.somme td b { color: var(--encre-2); }

/* ── le relevé des votes ───────────────────────────────────────────────
   La pièce justificative de la fiche : une ligne par vote qui engage. Elle
   est écrite dans la page par le générateur — le filtre masque, il ne
   fabrique pas —, et elle doit donc rester lisible feuille de style éteinte.

   Aucune couleur ne distingue « pour » de « contre ». La tentation du vert et
   du rouge est exactement celle que ce site refuse ailleurs : une couleur qui
   porte un jugement sur un vote. La position se lit au mot, l'absence de
   suffrage à l'encre secondaire — une intensité, pas un camp.
   ────────────────────────────────────────────────────────────────────── */

.filtres { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 4px; }
.filtres button {
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid var(--trait-fort); border-radius: 3px; background: none;
  padding: 7px 11px; cursor: pointer; color: var(--encre-2);
  font-family: var(--sans); font-size: 13px;
}
.filtres button:hover { color: var(--encre); border-color: var(--encre-3); }
.filtres button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--papier-haut);
}
.filtres .compte { font-size: 11.5px; font-variant-numeric: tabular-nums; opacity: 0.75; }

/* Le balisage d'une ligne est nu — `<time>`, `<p>`, `<small>`, `<b>` — et tout
   se style par sélecteur d'élément : 245 lignes × 577 fiches font payer très
   cher chaque attribut de classe. */
.journal { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--trait); }
.journal > li {
  display: grid; gap: 4px 18px; padding: 13px 0;
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 820px) {
  .journal > li { grid-template-columns: 122px minmax(0, 1fr) 158px; align-items: baseline; }
  .journal > li > b { text-align: right; }
}
.journal time {
  font-family: var(--mono); font-size: 11.5px; color: var(--encre-3);
  letter-spacing: 0.03em; white-space: nowrap;
}
.journal > li > p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.journal small {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--encre-3);
}
.journal > li > b {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.09em;
  text-transform: uppercase; font-weight: 600; color: var(--encre);
}
/* Ne pas avoir voté n'est pas une position : ces trois états s'effacent d'un
   cran plutôt que de s'afficher avec la même autorité qu'un suffrage. */
.journal > li.absent > b,
.journal > li.empeche > b,
.journal > li.hors_mandat > b { color: var(--encre-3); font-weight: 400; }

.journal small i {
  font-style: normal; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 2px;
  background: var(--accent-voile); color: var(--accent);
}
.journal small i.hors { background: none; border: 1px solid var(--trait-fort); color: var(--encre-2); }

/* Le filtre : huit sélecteurs plutôt qu'une ligne de JavaScript qui masquerait
   élément par élément. La liste complète reste dans le document. */
.journal[data-filtre] > li { display: none; }
.journal[data-filtre="pour"] > li.pour,
.journal[data-filtre="contre"] > li.contre,
.journal[data-filtre="abstention"] > li.abstention,
.journal[data-filtre="absent"] > li.absent,
.journal[data-filtre="empeche"] > li.empeche,
.journal[data-filtre="hors_mandat"] > li.hors_mandat,
.journal[data-filtre="delegue"] > li.delegue,
.journal[data-filtre="ecart"] > li.ecart { display: grid; }

/* ── ce qui a été proposé : la ventilation des sorts ────────────────── */

.sorts {
  display: grid; gap: 1px; margin: 30px 0 10px;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  background: var(--trait); border: 1px solid var(--trait);
  border-radius: 3px; overflow: hidden;
}
.sort { background: var(--papier); padding: 15px 17px; }
.sort-n { display: block; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sort-nom {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--encre-3);
}
/* Un amendement non examiné n'est pas un échec : il ne s'affiche pas avec le
   même poids que les cinq sorts que l'Assemblée a réellement prononcés. */
.sort-attente .sort-n { color: var(--encre-3); font-weight: 400; }

/* ── le piège (repliable) ──────────────────────────────────────────── */

.piege {
  margin-top: 26px;
  border-left: 2px solid var(--signal);
  background: var(--signal-voile);
  border-radius: 0 3px 3px 0;
}
.piege > summary {
  cursor: pointer; list-style: none;
  padding: 13px 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--signal); font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.piege > summary::-webkit-details-marker { display: none; }
.piege > summary::before {
  content: "+"; font-size: 15px; line-height: 1; width: 12px;
}
.piege[open] > summary::before { content: "–"; }
.piege .dedans { padding: 0 18px 18px 40px; max-width: 66ch; }
.piege p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.62; color: var(--encre-2); }
.piege p:last-child { margin-bottom: 0; }
.piege b { color: var(--encre); font-weight: 600; }

/* ── l'écart : deux colonnes ───────────────────────────────────────── */

.ecart { padding-block: 56px; border-bottom: 1px solid var(--trait); }
.duo {
  display: grid; gap: 1px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  background: var(--trait); border: 1px solid var(--trait); border-radius: 3px; overflow: hidden;
}
.colonne { background: var(--papier); padding: 26px 26px 24px; }
.colonne > h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  margin: 0 0 4px; color: var(--encre-2); font-weight: 600;
}
.colonne > .assiette { font-family: var(--mono); font-size: 11px; color: var(--encre-3); margin: 0 0 20px; letter-spacing: 0.04em; }
.rang { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--trait); }
.rang:last-of-type { border-bottom: 0; }
.rang .nom { flex: 1; min-width: 0; font-size: 15.5px; }
/* Un voisin dont le mandat est terminé n'a pas de fiche : il garde son nom,
   sans lien ni soulignement, et se distingue par l'encre secondaire. */
.rang .nom.ancien { color: var(--encre-2); cursor: default; }
.rang .grp { font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); letter-spacing: 0.06em; }
.rang .tx { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; font-weight: 600; }
.rang .n { font-family: var(--mono); font-size: 10.5px; color: var(--encre-3); min-width: 62px; text-align: right; }
.rang.souligne { background: var(--accent-voile); margin: 0 -26px; padding-left: 26px; padding-right: 26px; }

.verdict-ecart {
  margin-top: 30px; padding: 26px 28px;
  border: 1px solid var(--encre); border-radius: 3px;
}
.verdict-ecart p { margin: 0; font-family: var(--serif); font-size: 1.32rem; line-height: 1.42; letter-spacing: -0.01em; max-width: 52ch; }
.verdict-ecart p + p { margin-top: 14px; font-family: var(--sans); font-size: 16px; color: var(--encre-2); line-height: 1.6; }

/* ── étiquette contre mesure ───────────────────────────────────────── */

.confrontation {
  display: grid; gap: 22px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
}
.face { padding: 22px 24px 24px; border: 1px solid var(--trait); border-radius: 3px; background: var(--papier-haut); }
.face.mesuree { border-color: var(--accent); }
.face h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; margin: 0 0 14px; color: var(--encre-3); font-weight: 600; }
.face.mesuree h3 { color: var(--accent); }
.face .dit { font-family: var(--serif); font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.015em; margin: 0 0 12px; }
.face .parce { margin: 0; font-size: 15px; color: var(--encre-2); line-height: 1.6; }

/* ── la note méthodologique ────────────────────────────────────────────
   Un lien vers un PDF de dix-huit pages, sur la page qui promet la
   vérifiabilité, n'est pas une annexe : c'est la pièce que le lecteur
   sceptique est venu chercher. Il a donc la forme d'un objet qu'on emporte,
   pas d'un lien de plus dans un paragraphe.
   ──────────────────────────────────────────────────────────────────────── */

.note-pdf {
  display: flex; gap: 20px; align-items: flex-start;
  margin: 4px 0 26px; padding: 22px 24px;
  border: 1px solid var(--trait-fort); border-radius: 3px;
  background: var(--papier-haut);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}
.note-pdf:hover { border-color: var(--accent); background: var(--accent-voile); }
.note-pdf-icone {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 58px;
  border: 1.5px solid var(--accent); border-radius: 2px;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--accent);
}
.note-pdf-texte { display: block; }
.note-pdf-texte b { display: block; font-size: 17px; margin-bottom: 5px; }
.note-pdf-texte > span { display: block; color: var(--encre-2); font-size: 14.5px; line-height: 1.55; }
.note-pdf-meta {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--encre-3); margin-top: 9px;
}
@media (max-width: 560px) {
  .note-pdf { flex-direction: column; gap: 14px; }
}

/* ── pied ──────────────────────────────────────────────────────────── */

.pied { padding-block: 48px 72px; }
.pied .grille { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
/* Le logo complet reprend en pied ce que l'en-tête a posé, à 236 px : à 108 px
   il s'excusait d'être là, entre deux colonnes de texte qui le dominaient. Il
   est en couleurs et loin de tout graphique, donc sans risque d'être lu comme
   une mesure. */
.pied-logo { display: block; width: min(236px, 100%); height: auto; }


/* ── la marque suit le thème, par deux fichiers ─────────────────────────────
   Le logo existe en deux versions dessinées : encre foncée pour le papier
   clair, encre claire pour le papier sombre. C'est mieux qu'un filtre — la
   version précédente éclaircissait le bleu d'encre au `brightness`, ce qui
   délavait aussi le drapeau.
   Trois blocs, comme partout ailleurs : la préférence système, puis les deux
   valeurs de `data-theme`, pour que le bouton du lecteur l'emporte dans les
   deux sens. La version masquée l'est en `display: none`, donc invisible aussi
   des lecteurs d'écran — sans quoi le nom de la marque serait annoncé deux
   fois. */
.marque .verrou.sombre, .pied-logo.sombre { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque .verrou.clair,
  :root:not([data-theme="light"]) .pied-logo.clair { display: none; }
  :root:not([data-theme="light"]) .marque .verrou.sombre { display: block; }
  :root:not([data-theme="light"]) .pied-logo.sombre { display: block; }
}
:root[data-theme="dark"] .marque .verrou.clair,
:root[data-theme="dark"] .pied-logo.clair { display: none; }
:root[data-theme="dark"] .marque .verrou.sombre { display: block; }
:root[data-theme="dark"] .pied-logo.sombre { display: block; }

:root[data-theme="light"] .marque .verrou.clair { display: block; }
:root[data-theme="light"] .pied-logo.clair { display: block; }
:root[data-theme="light"] .marque .verrou.sombre,
:root[data-theme="light"] .pied-logo.sombre { display: none; }
.pied h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--encre-3); margin: 0 0 10px; font-weight: 600; }
.pied p, .pied li { font-size: 14.5px; color: var(--encre-2); margin: 0 0 7px; line-height: 1.6; }
.pied ul { list-style: none; padding: 0; margin: 0; }

.filet-fin { height: 1px; background: var(--trait); }

.saut { height: 0; }
@media (max-width: 640px) {
  .cadre { padding: 0 20px; }
  .chapeau { padding-block-start: 44px; }
  .rang .n { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCUEIL
   ═══════════════════════════════════════════════════════════════════════ */

.manifeste { padding-block: 88px 0; }
.manifeste h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  max-width: 17ch;
}
.manifeste .appui {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: var(--encre-2);
  max-width: 44ch;
  margin: 26px 0 0;
  text-wrap: pretty;
}
.manifeste .appui em { font-style: normal; color: var(--encre); box-shadow: inset 0 -0.42em 0 var(--accent-voile); }

/* La recherche en tête d'accueil. Elle est le premier geste possible sur le
   site, avant toute explication : on vient y chercher quelqu'un. */
.chercher-tete { margin-top: 34px; max-width: 780px; }
.chercher-tete .compteur { padding-top: 20px; }
.chercher-tete .compteur[hidden] { display: none; }
.chercher-tete .annuaire:empty { display: none; }
.deborde {
  margin: 16px 0 0; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--encre-2);
}
.deborde[hidden] { display: none; }
.deborde b { color: var(--encre); }

/* Le périmètre, en mono : c'est une provenance, pas un argument de vente. */
.perimetre {
  display: flex; flex-wrap: wrap; gap: 0;
  margin: 44px 0 0;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}
.perimetre > div {
  flex: 1 1 150px;
  padding: 18px 20px 20px 0;
}
.perimetre dt {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 6px;
}
.perimetre dd {
  margin: 0; font-family: var(--serif); font-size: 1.75rem;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1;
}
.perimetre dd small { font-family: var(--sans); font-size: 12.5px; color: var(--encre-2); letter-spacing: 0; display: block; margin-top: 7px; line-height: 1.45; }

/* Les trois règles : la promesse du site, en clair. */
.regles { padding-block: 56px; border-bottom: 1px solid var(--trait); }
.regle {
  display: grid; gap: 6px 28px; padding: 24px 0;
  border-top: 1px solid var(--trait);
}
.regle:first-of-type { border-top: 0; }
@media (min-width: 800px) { .regle { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); } }
.regle h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.32rem;
  letter-spacing: -0.015em; margin: 0; text-wrap: balance;
}
.regle p { margin: 0; color: var(--encre-2); font-size: 16px; line-height: 1.62; max-width: 58ch; }
.regle p b { color: var(--encre); font-weight: 600; }

/* Ce que le site ne mesure pas : bloc d'honnêteté, encadré comme un piège. */
.limites { padding-block: 56px; border-bottom: 1px solid var(--trait); }
.limites ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 3px; overflow: hidden; }
.limites li { background: var(--papier); padding: 18px 22px; font-size: 15.5px; color: var(--encre-2); line-height: 1.6; }
.limites li b { color: var(--encre); font-weight: 600; }

/* Tableau des groupes : dense, tabulaire, sans couleur d'identité. */
.tableau-groupes { width: 100%; border-collapse: collapse; margin-top: 26px; font-variant-numeric: tabular-nums; }
.tableau-groupes th {
  text-align: right; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3); font-weight: 600;
  padding: 0 0 10px 16px; border-bottom: 1px solid var(--trait-fort); white-space: nowrap;
}
.tableau-groupes th:first-child, .tableau-groupes td:first-child { text-align: left; padding-left: 0; }
.tableau-groupes td { text-align: right; padding: 11px 0 11px 16px; border-bottom: 1px solid var(--trait); font-size: 14.5px; }
.tableau-groupes .sigle { font-weight: 600; font-size: 15px; }
.tableau-groupes .plein { font-size: 12.5px; color: var(--encre-2); display: block; margin-top: 2px; }
.tableau-groupes .mono { font-family: var(--mono); font-size: 13px; }
@media (max-width: 720px) { .tableau-groupes .repliable { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   ANNUAIRE ET RECHERCHE
   ═══════════════════════════════════════════════════════════════════════ */

.chercher { padding-block: 30px 0; }
.champ {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--trait-fort); border-radius: 3px;
  background: var(--papier-haut);
  padding: 0 16px;
  transition: border-color 140ms ease;
}
.champ:focus-within { border-color: var(--accent); }
.champ svg { flex: none; opacity: 0.45; }
.champ input {
  flex: 1; min-width: 0;
  font-family: var(--serif); font-size: 1.32rem; letter-spacing: -0.01em;
  background: none; border: 0; color: var(--encre);
  padding: 15px 0; outline: none;
}
.champ input::placeholder { color: var(--encre-3); }
.champ .effacer {
  flex: none; background: none; border: 0; cursor: pointer; color: var(--encre-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 4px;
}
.champ .effacer:hover { color: var(--encre); }
.champ .effacer[hidden] { display: none; }

.exemples {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
}
.exemples span { color: var(--encre-3); text-transform: uppercase; padding: 5px 0; }
.exemples button {
  background: none; border: 1px solid var(--trait); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; color: var(--encre-2);
  font: inherit; letter-spacing: 0.04em;
}
.exemples button:hover { border-color: var(--accent); color: var(--encre); }

.compteur {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3);
  padding: 22px 0 12px; border-bottom: 1px solid var(--trait);
}
.compteur b { color: var(--encre); font-weight: 600; }

.annuaire { list-style: none; padding: 0; margin: 0; }
.annuaire li { border-bottom: 1px solid var(--trait); }
.annuaire a {
  display: grid; gap: 2px 20px; align-items: baseline;
  padding: 15px 4px 15px 0; text-decoration: none;
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (min-width: 780px) {
  .annuaire a { grid-template-columns: minmax(0, 1fr) 190px 96px 120px; }
}
.annuaire a:hover { background: var(--papier-creux); }
.annuaire a:hover .an-nom { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.an-nom { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -0.012em; }
.an-lieu { font-size: 14px; color: var(--encre-2); }
.an-grp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--encre-2); }

/* Les trois signaux. Chacun porte son libellé : un nombre nu dans une liste se
   lit comme une note, alors qu'il ne dit rien sans savoir ce qu'il compte.
   Le dénominateur, lui, reste sur la fiche — il n'entre pas dans une ligne. */
.an-chiffres { display: flex; gap: 18px; justify-content: flex-end; }
.an-mesure { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.an-mesure b {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; color: var(--encre);
}
.an-mesure i {
  font-family: var(--mono); font-style: normal; font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--encre-3);
  white-space: nowrap;
}
@media (min-width: 780px) {
  .annuaire a { grid-template-columns: minmax(0, 1fr) 170px 90px 250px; }
}
@media (max-width: 779px) {
  .an-lieu, .an-grp { grid-column: 1; font-size: 13px; }
  .an-chiffres { grid-row: 1 / span 2; grid-column: 2; gap: 12px; }
  .an-mesure i { font-size: 9px; }
}
@media (max-width: 520px) {
  /* Trois mesures ne tiennent pas à côté d'un nom sur un téléphone : la
     dernière passe sous les deux autres plutôt que de compresser le nom. */
  .an-chiffres { grid-row: auto; grid-column: 1; justify-content: flex-start; gap: 20px; }
  .an-mesure { align-items: flex-start; }
}
.annuaire mark { background: var(--accent-voile); color: inherit; border-radius: 2px; padding: 0 1px; }

.rien { padding: 40px 0; color: var(--encre-2); }
.rien b { color: var(--encre); }

/* ═══════════════════════════════════════════════════════════════════════
   ÉLÉMENTS PARTAGÉS
   ═══════════════════════════════════════════════════════════════════════ */

.bouton {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--encre); border-radius: 3px;
  padding: 12px 20px; text-decoration: none;
  font-size: 15px; font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}
.bouton:hover { background: var(--encre); color: var(--papier); }
.bouton.discret { border-color: var(--trait-fort); }
.bouton.discret:hover { background: none; border-color: var(--accent); color: var(--encre); }

.section-titre {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.15rem); letter-spacing: -0.02em;
  margin: 18px 0 10px; text-wrap: balance;
}
.section-intro { margin: 0; color: var(--encre-2); max-width: 62ch; }

.fraicheur {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3);
  padding-top: 22px; margin-top: 40px; border-top: 1px solid var(--trait);
}


/* ═══════════════════════════════════════════════════════════════════════
   LA MATRICE DES ACCORDS
   Une seule rampe, du papier creux vers l'accent : elle porte une grandeur
   (le taux d'accord) et jamais une identité de groupe.
   ═══════════════════════════════════════════════════════════════════════ */

.carte-outils {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px 22px;
  margin-bottom: 22px;
}
.bascules { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 3px; }
.bascules button {
  font-family: var(--sans); font-size: 14px; color: var(--encre-2);
  background: none; border: 0; padding: 9px 16px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.bascules button + button { border-left: 1px solid var(--trait-fort); }
.bascules button:hover { color: var(--encre); }
.bascules button[aria-pressed="true"] { background: var(--accent); color: var(--papier-haut); }
.carte-etat { flex: 1 1 22ch; margin: 0; max-width: 56ch; }

/* ── comparer deux députés ─────────────────────────────────────────────
   Le tableau n'était explorable qu'au survol : ces deux champs sont l'autre
   chemin vers la même mesure — celui du clavier, du tactile, et de qui sait
   déjà quelle paire il cherche.
   ────────────────────────────────────────────────────────────────────── */

.carte-duo {
  display: grid; gap: 16px 24px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 720px;
}
.carte-choix { position: relative; }
.carte-choix .jalon { margin-bottom: 8px; }
.champ-mince input { font-size: 1.05rem; padding: 10px 0; }

.carte-suggestions {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--papier-haut);
  border: 1px solid var(--trait-fort); border-radius: 3px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.09);
  max-height: 17rem; overflow-y: auto;
}
.carte-suggestions[hidden] { display: none; }
.carte-suggestions li {
  padding: 8px 14px; cursor: pointer; font-size: 15px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.carte-suggestions li:hover,
.carte-suggestions li:focus { background: var(--accent-voile); outline: none; }
.carte-suggestions .grp {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--encre-3); flex: none;
}

.carte-scene { display: grid; gap: 30px; align-items: start; }
@media (min-width: 900px) { .carte-scene { grid-template-columns: minmax(0, 1fr) 22rem; } }

/* Sur un téléphone, viser une case de 574ᵉ de largeur n'a pas de sens : la
   lecture passe *au-dessus* du tableau, et ce sont les deux champs qui
   deviennent l'outil principal. Le tableau reste — c'est le sujet de la
   page — mais il redevient ce qu'il est à cette taille : une forme. */
@media (max-width: 899px) {
  .carte-scene { display: flex; flex-direction: column; }
  .carte-lecture { order: -1; min-height: 0; }
}

.carte-toile { position: relative; line-height: 0; }
.carte-toile canvas {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;                 /* une case = un carré net */
  border: 1px solid var(--trait);
  background: var(--papier-creux);
  cursor: crosshair;
}
/* Le viseur : deux filets fins, parce qu'à cette densité le curseur seul ne
   permet pas de savoir quelle case on lit. */
.carte-viseur { position: absolute; inset: 0; pointer-events: none; }
.carte-viseur::before, .carte-viseur::after {
  content: ""; position: absolute; background: var(--accent-vif); opacity: 0.55;
}
.carte-viseur::before { left: 0; right: 0; top: 0; height: 1px; }
.carte-viseur::after { top: 0; bottom: 0; left: 0; width: 1px; }

.carte-lecture {
  border-top: 2px solid var(--encre); padding-top: 16px; min-height: 12rem;
}
.carte-invite { margin: 0; color: var(--encre-3); font-size: 15px; }
.carte-nom {
  font-family: var(--serif); font-size: 19px; line-height: 1.3; margin: 0 0 2px;
}
.carte-nom .grp {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--encre-3); margin-left: 7px;
}
.carte-nom-b { color: var(--encre-2); }
.carte-taux {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.03em; margin: 14px 0 4px;
}
.carte-denominateur { margin: 0; }

/* La paire épinglée le dit, et dit comment la lâcher : un état qui persiste
   sans s'annoncer se lit comme une panne. */
.carte-epingle {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 0;
}
.carte-epingle[hidden] { display: none; }
.etiquette-epingle {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px;
}
.lien-nu {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--encre-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.lien-nu:hover { color: var(--encre); }

/* La toile est un contrôle : le focus clavier doit s'y voir. */
.carte-toile canvas:focus-visible {
  outline: 2px solid var(--accent-vif); outline-offset: 2px;
}

.carte-echelle {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 26px; font-size: 12px; color: var(--encre-2);
}
/* La rampe reprend exactement les bornes peintes par carte.js : un indigo très
   pâle — jamais le gris du papier, réservé à l'absence de mesure. */
.carte-echelle .rampe {
  flex: 0 1 220px; height: 10px; border: 1px solid var(--trait);
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 12%, var(--papier-creux)), var(--accent));
}
.carte-cle { display: inline-flex; align-items: center; gap: 7px; }
.pastille-absent {
  width: 11px; height: 11px; background: var(--trait);
  border: 1px solid var(--trait-fort); display: inline-block;
}

/* La matrice des groupes : lisible d'un coup d'œil, contrairement aux 574. */
.tableau-defile { overflow-x: auto; margin-top: 8px; }
.matrice-groupes { border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
.matrice-groupes caption {
  caption-side: bottom; text-align: left; padding-top: 14px; max-width: 70ch;
}
.matrice-groupes th, .matrice-groupes td {
  padding: 7px 9px; text-align: center; white-space: nowrap;
  border: 1px solid var(--papier);
}
.matrice-groupes thead th { font-weight: 600; color: var(--encre-2); }
.matrice-groupes tbody th { text-align: left; font-weight: 600; }
.matrice-groupes tbody th .effectif {
  font-weight: 400; color: var(--encre-3); margin-left: 8px;
}
.matrice-groupes td.soi { outline: 1px solid var(--trait-fort); outline-offset: -1px; }

/* Les deux conventions sont écrites dans la page ; la bascule choisit celle
   qu'on lit. Rien n'est recalculé, rien n'est demandé au réseau. */
.matrice-groupes .agregee { display: none; }
.matrice-groupes.vue-agregee .par-paires { display: none; }
.matrice-groupes.vue-agregee .agregee { display: inline; }
.bascules-convention { margin: 6px 0 14px; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* La teinte d'une case porte son taux, calculé côté Python et passé en `--t`.
   Aucune valeur n'est écrite ici : ce fichier ne connaît aucun chiffre. */
.matrice-groupes td[style*="--t"] {
  background: color-mix(in srgb, var(--accent) calc(12% + var(--t) * 88%), var(--papier-creux));
}
.matrice-groupes td.fonce { color: var(--papier-haut); }


/* ═══════════════════════════════════════════════════════════════════════
   PAGE MÉTHODE
   Une page de définitions : la provenance en mono sous chaque titre, et
   la définition elle-même en prose. Pas de grand chiffre, pas de bande.
   ═══════════════════════════════════════════════════════════════════════ */

/* `.lecture h3` porte une définition, pas une décoration : la ligne de
   provenance qui le suit en `--mono` est le dénominateur de la mesure. */
.lecture h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.015em;
  margin: 44px 0 6px; padding-top: 22px; border-top: 1px solid var(--trait);
}
.lecture h3 + .provenance {
  margin: 0 0 16px; color: var(--encre-3); font-size: 12.5px; line-height: 1.5;
}

/* Même dispositif visuel que `.limites ul`, sans hériter de son conteneur :
   `.limites` est une classe de *section* et porte `padding-block` + bordure. */
.liste-limites {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 1px; background: var(--trait);
  border: 1px solid var(--trait); border-radius: 3px; overflow: hidden;
  counter-reset: limite;
}
.liste-limites li {
  background: var(--papier); padding: 18px 22px 18px 52px; position: relative;
  font-size: 15.5px; color: var(--encre-2); line-height: 1.6;
}
.liste-limites li::before {
  counter-increment: limite; content: counter(limite);
  position: absolute; left: 22px; top: 18px;
  font-family: var(--mono); font-size: 12px; color: var(--encre-3);
}
.liste-limites li b { color: var(--encre); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   REGISTRE DES CORRECTIONS
   Une correction se lit comme une fiche d'incident, pas comme un billet : on
   y vient pour savoir si un chiffre qu'on a cité a bougé, et de combien. La
   date et l'avant/après sont donc les deux seuls éléments mis en avant.
   ═══════════════════════════════════════════════════════════════════════ */

.registre { list-style: none; padding: 0; margin: 8px 0 0; }
.correction {
  border-top: 1px solid var(--trait);
  padding: 30px 0 34px; max-width: var(--lecture);
}
.correction:last-child { border-bottom: 1px solid var(--trait); }
.correction-tete {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px;
  margin-bottom: 16px;
}
.correction-date { font-size: 12.5px; color: var(--encre-3); }
.correction-tete h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.32rem;
  letter-spacing: -0.015em; margin: 0; flex-basis: 100%;
}
/* La nature de la correction, en trois valeurs. C'est une étiquette de tri, pas
   un jugement : elle reste en gris, jamais en signal — un registre dont les
   entrées s'allument en ocre se lirait comme une liste d'alertes. */
.etiq-portee {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--encre-2); font-weight: 600;
  border: 1px solid var(--trait-fort); border-radius: 2px; padding: 2px 7px;
}
.correction p { font-size: 15.5px; line-height: 1.65; color: var(--encre-2); margin: 0 0 11px; }
.correction p b { color: var(--encre); font-weight: 600; }
/* L'avant/après est le seul passage que quelqu'un de pressé doit lire. */
.correction-effet {
  background: var(--papier-creux); border-left: 2px solid var(--accent);
  padding: 13px 17px; border-radius: 0 3px 3px 0; margin: 14px 0 12px !important;
}
.correction .provenance { margin-top: 12px; }
.correction .provenance a { color: var(--encre-2); }

/* ═══════════════════════════════════════════════════════════════════════
   INDEX PAR DÉPARTEMENT
   Le seul chemin vers les 577 fiches qui existe sans JavaScript. Il se
   parcourt à l'œil : deux colonnes de noms, le numéro de circonscription en
   chasse fixe pour qu'il ne se confonde pas avec le nom.
   ═══════════════════════════════════════════════════════════════════════ */

.index-departements {
  margin-top: 30px;
  columns: 260px 4; column-gap: 34px;
}
.index-dep { break-inside: avoid; margin: 0 0 26px; }
.index-dep h3 {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.04em; margin: 0 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--trait);
}
.index-dep h3 .mono { color: var(--encre-3); font-size: 11.5px; margin-right: 6px; }
.index-dep ul { list-style: none; padding: 0; margin: 0; }
.index-dep li { margin: 0 0 3px; }
.index-dep a {
  display: flex; justify-content: space-between; gap: 10px;
  text-decoration: none; color: var(--encre-2); font-size: 14px;
  line-height: 1.45; padding: 2px 0;
}
.index-dep a:hover { color: var(--accent-vif); }
.index-dep .circo { color: var(--encre-3); font-size: 11px; flex: none; }

/* ═══════════════════════════════════════════════════════════════════════
   CITER
   ═══════════════════════════════════════════════════════════════════════ */

.citation-texte {
  font-family: var(--serif); font-size: 16.5px; line-height: 1.62;
  color: var(--encre); background: var(--papier-creux);
  border-left: 2px solid var(--trait-fort);
  padding: 16px 20px; border-radius: 0 3px 3px 0; margin: 0 0 26px;
}
.citation-bib {
  background: var(--papier-creux); border: 1px solid var(--trait);
  border-radius: 3px; padding: 18px 20px; margin: 0 0 14px;
  overflow-x: auto;
}
.citation-bib code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.62;
  color: var(--encre-2); white-space: pre;
}

/* Une liste de définitions courtes, sans le décor numéroté de `.liste-limites`. */
.liste-nette { list-style: none; padding: 0; margin: 20px 0 24px; }
.liste-nette li {
  font-size: 15.5px; line-height: 1.62; color: var(--encre-2);
  padding: 9px 0 9px 16px; border-left: 1px solid var(--trait);
  margin-bottom: 2px;
}
.liste-nette li b { color: var(--encre); font-weight: 600; }
.correction code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--papier-creux); border: 1px solid var(--trait);
  border-radius: 2px; padding: 1px 5px; color: var(--encre);
}
.correction-effet code { background: var(--papier); }

/* ═══════════════════════════════════════════════════════════════════════
   LA MAXIME — page « Qui édite ce site », et nulle part ailleurs
   ═══════════════════════════════════════════════════════════════════════ */

/* Composée en serif, la voix du site, et à la taille d'un titre de section :
   c'est une adresse au lecteur, pas un exergue décoratif qu'on saute.
   En romain et non en italique — l'italique en ferait une citation, or ces
   trois lignes ne sont empruntées à personne ; c'est la source en dessous
   qui est citée, et elle porte ses guillemets.
   Alignée à gauche comme tout le site. Une maxime centrée aurait l'air d'un
   fronton, et le site ne se donne pas d'autorité qu'il n'a pas.
   Aucun `text-wrap: balance` : les coupes sont écrites en `<br>` parce
   qu'elles font partie du texte, et le navigateur n'a pas à les recomposer.
   La ligne la plus longue tient dans les 63 caractères de la colonne de
   lecture au-delà de 700 px ; en dessous elle se replie, et une maxime qui
   se replie reste une maxime. */
/* Le sélecteur est lourd à dessein : `.socle > .lecture > p` pose déjà
   `color: var(--encre-2)` et une marge de 26 px sur tous les paragraphes de
   cette page. Une classe seule perdait contre lui, et la maxime sortait dans
   le gris des paragraphes ordinaires — la seule phrase de la page qui doit
   être en pleine encre était la seule à ne pas l'être. */
.socle > .lecture > p.maxime {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.62rem);
  line-height: 1.5; letter-spacing: -0.01em;
  color: var(--encre);
  margin: 0 0 18px; padding-left: 20px;
  border-left: 2px solid var(--trait-fort);
}
/* La référence se tient à sa place : mono, encre pâle, comme toute provenance
   du site. Le texte de 1789 n'est pas convoqué pour donner de l'autorité à la
   maxime — il est donné pour qu'on aille le lire. */
.socle > .lecture > p.maxime-source {
  margin: 0; max-width: 62ch; font-size: 12.5px; line-height: 1.62;
}