/* =============================================================================
   Clowns de la République — feuille de style
   Refonte 2026-09-13. Direction « éditorial d'enquête ».

   RÈGLES DE FOND — ce ne sont pas des choix esthétiques, ne pas les casser :
   1. Le bleu est la MAGNITUDE NEUTRE (discipline, participation, cohésion). Une rampe
      à un seul ton, jamais vert/rouge : voter avec son groupe n'est ni bien ni mal.
      La piste d'une jauge est un bleu clair de la même rampe, jamais un gris générique.
   2. La palette de STATUT (vert/orange/rouge) est réservée aux positions de vote
      (pour/abstention/contre) et aux issues d'une confrontation
      (confirmé/à nuancer/contredit).
   3. EXCEPTION UNIQUE ET DÉCLARÉE : .meter-fill.severity (score de classement) est rouge,
      parce que ce score est un agrégat pondéré — donc déjà une interprétation, pas une
      mesure. Aucune autre magnitude ne prend le rouge.
   4. .badge.structurel reste BLEU : une résolution art. 34-1 est un fait juridique établi
      par règle automatique, pas un jugement de contenu. Ne jamais lui donner la couleur
      de .slop / .concret, qui sont des appréciations.
   5. Aucune information n'est portée par la couleur seule : tout badge, toute jauge,
      toute pastille porte un libellé texte ou un chiffre.
   6. Ne jamais poser `display` avec !important sur [data-statut] : cela gèlerait
      le filtre de traçabilité (static/filters.js pilote display en JS).

   CONTRASTE : #898781 (ancien --text-muted) mesurait 3,41:1 sur le fond de page et
   échouait le seuil AA de 4,5:1 alors qu'il porte de l'information (libellés de chiffres,
   axes de graphiques). Corrigé en #6e6c66 (5,04:1). Même correction sur le TEXTE des
   badges de statut posés sur fond teinté ; les fonds gardent les teintes d'origine.
   ============================================================================= */

/* ---------- Polices auto-hébergées (aucun appel à un tiers) ---------- */
@font-face { font-family: "Spectral"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fonts/spectral-400.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 600; font-style: normal; font-display: swap;
             src: url("fonts/spectral-600.woff2") format("woff2"); }
@font-face { font-family: "Spectral"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("fonts/spectral-700.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fonts/plexsans-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("fonts/plexsans-500.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
             src: url("fonts/plexsans-600.woff2") format("woff2"); }
@font-face { font-family: "Plex Sans"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("fonts/plexsans-700.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
             src: url("fonts/plexmono-500.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Surfaces et texte */
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f3f2ee;
  --topbar-bg: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #6e6c66;
  --gridline: #e1e0d9;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.18);

  /* Magnitude neutre */
  --accent: #2a78d6;
  --accent-strong: #184f95;
  --accent-track: #cde2fb;

  /* Statut — fond teinté + texte conforme AA */
  --status-good: #0ca30c;
  --status-good-ink: #0a7a0a;
  --status-warning: #c98500;
  --status-warning-ink: #8a5a00;
  --status-critical: #d03b3b;
  --status-critical-ink: #b32c2c;
  --status-critical-track: #f7dede;

  /* Typographie */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-ui: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Rythme */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --page-max: 1200px;
  --gutter: 1.75rem;
  --tap: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --topbar-bg: #161615;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #a3a199;
    --gridline: #2c2c2a;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.22);
    --accent: #3987e5;
    --accent-strong: #86b6ef;
    --accent-track: #1b3a5f;
    --status-good: #0ca30c;
    --status-good-ink: #3fc93f;
    --status-warning: #d99b1f;
    --status-warning-ink: #e8b552;
    --status-critical: #e66767;
    --status-critical-ink: #f08b8b;
    --status-critical-track: #3a1f1f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--page);
  color: var(--text-primary);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

/* ---------- Typographie ---------- */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 2.85rem); font-weight: 700; line-height: 1.1; margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); font-weight: 600; line-height: 1.2;
     margin: 2.9rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gridline); }
h3 { font-size: 1.2rem; font-weight: 600; margin: 1.9rem 0 0.7rem; }

.display { font-family: var(--font-display); }
.subtitle { color: var(--text-secondary); margin: 0 0 1.9rem; max-width: 68ch; font-size: 1.08rem; }
.small { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.eyebrow { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
           color: var(--text-muted); }
.num, table, .meter-value, .stat-tile .value { font-variant-numeric: tabular-nums; }
.mono, code, .formule { font-family: var(--font-mono); font-size: 0.88em; }

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- Barre de navigation ----------
   4 entrées au lieu de 10. Les menus s'ouvrent au CLIC (details/summary), plus au survol :
   au doigt, un survol n'existe pas — 5 fiches de profil sur 6 étaient inatteignables. */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border);
          box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04); position: sticky; top: 0; z-index: 40; }
.topbar-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
                min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { font-family: var(--font-display); color: var(--text-primary); text-decoration: none;
         font-weight: 700; font-size: 1.4rem; letter-spacing: -0.022em; line-height: 1.1;
         display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0; }
.brand:hover { text-decoration: none; }
.brand .brand-mark { width: 9px; height: 26px; border-radius: 2px; background: var(--accent-strong);
                     flex-shrink: 0; }

.topbar nav { display: flex; align-items: center; gap: 0.2rem; }
.topbar nav > a, .nav-dropdown > summary {
  color: var(--text-secondary); text-decoration: none; font-size: 0.97rem; font-weight: 500;
  padding: 0.62rem 0.9rem; border-radius: 8px; display: inline-flex; align-items: center; gap: 0.4rem;
  cursor: pointer; white-space: nowrap;
}
.topbar nav > a:hover, .nav-dropdown > summary:hover { color: var(--text-primary); background: var(--surface-2);
                                                       text-decoration: none; }
.topbar nav a.active, .nav-dropdown[open] > summary,
.nav-dropdown.active > summary { color: var(--accent-strong); background: var(--accent-track); font-weight: 600; }

/* Menu déroulant — <details> : ouverture au clic, fonctionne sans JS et au doigt */
.nav-dropdown { position: relative; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary .chev { transition: transform 0.15s ease; }
.nav-dropdown[open] > summary .chev { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0.4rem;
  min-width: 264px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); z-index: 50;
  display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto;
}
.nav-dropdown-menu a { display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.7rem;
                       border-radius: var(--radius-sm); white-space: nowrap; color: var(--text-secondary);
                       font-size: 0.95rem; font-weight: 500; }
.nav-dropdown-menu a:hover { background: var(--surface-2); color: var(--text-primary); text-decoration: none; }
.nav-dropdown-menu .menu-label { padding: 0.55rem 0.7rem 0.3rem; }

/* Bouton hamburger — masqué au-dessus du point de rupture */
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; width: var(--tap); height: var(--tap); margin-right: -0.6rem;
              align-items: center; justify-content: center; cursor: pointer; border-radius: 8px;
              color: var(--text-primary); }
.nav-burger:hover { background: var(--surface-2); }
.nav-close { display: none; }

/* ---------- Mise en page ---------- */
.content { max-width: var(--page-max); margin: 0 auto; padding: 2.4rem var(--gutter) 4rem; }
.content-wide { max-width: 1360px; }
.stack { display: flex; flex-direction: column; }

/* ---------- Tuiles de chiffres ----------
   Une tuile cliquable mène au sous-ensemble qui justifie le chiffre : c'est la garantie
   de traçabilité du site, pas un raccourci de navigation. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.9rem;
            margin-bottom: 0.5rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
             padding: 1.1rem 1.3rem; }
.stat-tile .value { font-size: 1.85rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15;
                    font-family: var(--font-ui); }
.stat-tile .label { color: var(--text-muted); font-size: 0.86rem; margin-top: 0.25rem; line-height: 1.35; }
.stat-tile a { color: inherit; text-decoration: none; display: block; }
.stat-tile a:hover .value { text-decoration: underline; text-decoration-color: var(--accent);
                            text-underline-offset: 3px; }
.stat-tile.is-linked { border-color: var(--border-strong); }

/* Bandeau de chiffres en filet, pour l'accueil */
.figure-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem;
                border-top: 1px solid var(--gridline); border-bottom: 1px solid var(--gridline);
                padding: 1.8rem 0; margin: 2.4rem 0 0; }
.figure-strip .value { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 600;
                       letter-spacing: -0.02em; line-height: 1.1; }
.figure-strip .label { color: var(--text-muted); font-size: 0.86rem; margin-top: 0.2rem; }

/* ---------- Cartes et encarts ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
        padding: 1.6rem 1.75rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }
.notice { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
          border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--text-secondary);
          font-size: 0.95rem; line-height: 1.55; margin: 1.2rem 0; }
.notice strong { color: var(--text-primary); }

/* ---------- Jauges de magnitude ----------
   Rampe bleue à un ton. La piste est un bleu clair de la même rampe, jamais un gris. */
.meter { display: flex; align-items: center; gap: 0.6rem; min-width: 120px; }
.meter-track { flex: 1; background: var(--accent-track); border-radius: 4px; height: 8px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 4px; background: var(--accent); }
/* EXCEPTION DÉCLARÉE — voir l'en-tête : agrégat pondéré, pas une mesure. */
.meter-fill.severity { background: var(--status-critical); }
.meter-track.severity { background: var(--status-critical-track); }
.meter-value { font-size: 0.84rem; color: var(--text-secondary); min-width: 3.8em; text-align: right; }

/* ---------- Badges ----------
   Jamais de couleur seule : chaque badge porte son libellé. */
.badge { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.18rem 0.6rem;
         border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.5;
         border: 1px solid transparent; }
.badge svg { flex-shrink: 0; }

/* Positions de vote */
.badge.pour        { background: color-mix(in srgb, var(--status-good) 13%, var(--surface));     color: var(--status-good-ink); }
.badge.contre      { background: color-mix(in srgb, var(--status-critical) 13%, var(--surface)); color: var(--status-critical-ink); }
.badge.abstention  { background: color-mix(in srgb, var(--status-warning) 15%, var(--surface));  color: var(--status-warning-ink); }
/* CORRECTIF : profils_depute.py produit la valeur « non_votant », qui n'avait aucun style —
   le badge s'affichait sans fond ni couleur. Neutre, car ne pas voter n'est pas une position. */
.badge.non_votant  { background: var(--surface-2); color: var(--text-secondary); border-color: var(--gridline); }
.badge.absent      { background: var(--surface-2); color: var(--text-secondary); border-color: var(--gridline); }

/* Issues d'une confrontation parole / vote */
.badge.coherent       { background: color-mix(in srgb, var(--status-good) 13%, var(--surface));     color: var(--status-good-ink); }
.badge.contradictoire { background: color-mix(in srgb, var(--status-critical) 13%, var(--surface)); color: var(--status-critical-ink); }
.badge.nuance         { background: color-mix(in srgb, var(--status-warning) 15%, var(--surface));  color: var(--status-warning-ink); }

/* Appréciations « promesse sans levier » — même niveau de preuve que ci-dessus, donc même famille */
.badge.slop    { background: color-mix(in srgb, var(--status-critical) 13%, var(--surface)); color: var(--status-critical-ink); }
.badge.concret { background: color-mix(in srgb, var(--status-good) 13%, var(--surface));     color: var(--status-good-ink); }
/* FAIT JURIDIQUE, pas une appréciation : reste sur le bleu neutre. Ne jamais le passer en rouge. */
.badge.structurel { background: var(--accent-track); color: var(--accent-strong); }

/* ---------- Identité des groupes et des personnes ---------- */
.group-chip { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
              min-width: 2.9em; height: 1.65rem; padding: 0 0.55rem; border-radius: var(--radius-sm);
              color: #ffffff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
              margin-right: 0.45rem; vertical-align: middle; white-space: nowrap; }
.group-chip .group-logo { height: 1rem; width: auto; display: block; }
/* Le logo d'un parti est une marque : il n'apparaît qu'en illustration d'une fiche, jamais
   comme seul porteur d'identité. Le sigle textuel reste systématiquement présent. */
.party-logo { height: 34px; width: auto; max-width: 150px; object-fit: contain; }
.party-logo-lg { height: 54px; width: auto; max-width: 220px; object-fit: contain; }

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
          background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; display: block; }
.avatar-lg { width: 96px; height: 96px; }
.avatar-sm { width: 32px; height: 32px; }
/* Repli quand la photo manque : initiales. Une page ne casse jamais pour une image absente. */
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center;
                   font-family: var(--font-ui); font-weight: 600; color: var(--text-secondary);
                   background: var(--surface-2); font-size: 0.9rem; letter-spacing: 0.02em; }
.avatar-lg.avatar-fallback { font-size: 1.9rem; }
.avatar-sm.avatar-fallback { font-size: 0.72rem; }
.person { display: inline-flex; align-items: center; gap: 0.6rem; }
.person-name { font-weight: 500; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
              background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.75rem 0.95rem; font-size: 0.95rem; vertical-align: middle; }
th { color: var(--text-muted); font-weight: 700; font-size: 0.74rem; text-transform: uppercase;
     letter-spacing: 0.05em; border-bottom: 1px solid var(--gridline); cursor: default;
     white-space: nowrap; position: sticky; top: 0; background: var(--surface); z-index: 1; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--text-primary); }
tbody tr { border-bottom: 1px solid var(--gridline); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
td.nowrap, th.nowrap { white-space: nowrap; }

/* ---------- Filtres de traçabilité ----------
   L'habillage change, le contrat data-filter de static/filters.js est inchangé.
   Aucune règle `display` ici : c'est le JS qui pilote l'affichage des lignes. */
/* Le conteneur porte data-filter-group ; les boutons à l'intérieur sont les pastilles. */
.scrutin-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem;
                  margin: 1.3rem 0 1.1rem; }
.scrutin-filter .filter-legend { font-size: 0.9rem; color: var(--text-muted); margin-right: 0.2rem; }
.scrutin-filter button { padding: 0.5rem 0.95rem; font-size: 0.92rem; font-weight: 500;
                  border-radius: 999px; background: var(--surface); color: var(--text-secondary);
                  border: 1px solid var(--border-strong); cursor: pointer; font-family: inherit;
                  min-height: 38px; }
.scrutin-filter button:hover { color: var(--text-primary); background: var(--surface-2); }
.scrutin-filter button.active { background: var(--text-primary); color: var(--page);
                  border-color: var(--text-primary); font-weight: 600; }

/* ---------- Icônes ----------
   Jeu SVG au trait, grille 24, épaisseur 1,7 pour les icônes et 2,4 pour les pictogrammes
   de badge. Plus aucun émoji comme système d'icônes : rendu incohérent d'un système à
   l'autre, et registre en tension avec la rigueur revendiquée. */
.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.17em; }
.icon-lg { width: 1.7rem; height: 1.7rem; flex-shrink: 0; }
.icon-tile { width: 2.2rem; height: 2.2rem; border-radius: 9px; background: var(--accent-track);
             color: var(--accent-strong); display: inline-flex; align-items: center;
             justify-content: center; flex-shrink: 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
       min-height: var(--tap); padding: 0.75rem 1.4rem; border-radius: 10px; font-size: 1rem;
       font-weight: 600; font-family: inherit; cursor: pointer; border: 1px solid transparent;
       text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent-strong); color: #ffffff; }
.btn-primary:hover { background: var(--accent); }
.btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.8rem; }

/* ---------- Accueil ---------- */
.hero { padding: 3.4rem 0 0; }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 2.6rem; align-items: start; }
.hero h1 { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.028em;
           text-wrap: balance; margin: 1.1rem 0 0; }
.hero-lede { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--text-secondary);
             max-width: 32em; margin: 1.6rem 0 0; }
.principle { display: flex; gap: 0.95rem; align-items: flex-start; }
.principle + .principle { margin-top: 1.25rem; }
.principle-title { font-weight: 600; font-size: 1.02rem; }
.principle-text { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; }

.lecture-card { display: block; background: var(--surface); border: 1px solid var(--border);
                border-radius: var(--radius-lg); padding: 1.5rem 1.4rem; color: inherit; height: 100%; }
.lecture-card:hover { text-decoration: none; border-color: var(--border-strong);
                      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.lecture-card .lecture-title { font-size: 1.15rem; font-weight: 600; margin-top: 1rem; }
.lecture-card p { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--text-secondary); }
.lecture-card .lecture-count { margin-top: 1.1rem; font-size: 0.86rem; font-weight: 600;
                               color: var(--accent-strong); }

.limit-row { display: flex; gap: 1.3rem; align-items: baseline; padding: 1.2rem 0;
             border-bottom: 1px solid var(--gridline); }
.limit-row:last-child { border-bottom: none; }
.limit-row .limit-figure { flex: 0 0 3.4rem; font-size: 1.9rem; font-weight: 600; letter-spacing: -0.02em; }
.limit-row .limit-title { font-weight: 600; font-size: 1.02rem; }
.limit-row .limit-text { font-size: 0.97rem; color: var(--text-secondary); line-height: 1.5; margin-top: 0.15rem; }

/* ---------- Fil d'Ariane et en-tête de fiche ---------- */
.breadcrumb { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.breadcrumb a { color: var(--text-muted); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
             flex-wrap: wrap; }
.page-head-id { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }

/* ---------- Confrontation parole / vote ---------- */
.confrontation { background: var(--surface); border: 1px solid var(--border);
                 border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1.1rem; }
.confrontation-body { display: grid; grid-template-columns: 1fr 1fr; }
.confrontation-said { padding: 1.5rem 1.7rem; border-right: 1px solid var(--gridline); }
.confrontation-voted { padding: 1.5rem 1.7rem; }
.confrontation-verdict { border-top: 1px solid var(--gridline); background: var(--surface-2);
                         padding: 1.2rem 1.7rem; display: flex; gap: 1.1rem; align-items: flex-start;
                         flex-wrap: wrap; }
.confrontation-verdict .verdict-text { flex: 1 1 22rem; font-size: 0.97rem; line-height: 1.55;
                                       color: var(--text-secondary); }

.citation { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.45;
            color: var(--text-primary); margin: 0; font-weight: 400; }
.extrait { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; color: var(--text-secondary);
           border-left: 3px solid var(--gridline); padding-left: 0.9rem; margin: 0.7rem 0; }
.meta { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
.vs { font-weight: 700; color: var(--text-muted); text-align: center; padding: 0.4rem 0; }
.declaration-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
                    padding: 1.15rem 1.3rem; margin-bottom: 0.9rem; }
.contradiction-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.classification-block { background: var(--surface-2); border-radius: var(--radius); padding: 1rem 1.15rem;
                        margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.55; }

/* ---------- Profils ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; }
.profile-card { display: block; background: var(--surface); border: 1px solid var(--border);
                border-top: 3px solid var(--profile-color, var(--accent)); border-radius: var(--radius-lg);
                padding: 1.3rem 1.35rem; color: inherit; }
.profile-card:hover { text-decoration: none; border-color: var(--border-strong);
                      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); }
.profile-card-head { display: flex; align-items: center; gap: 0.6rem; font-size: 1.08rem; }
.profile-card-list { list-style: none; padding: 0; margin: 0.9rem 0 0; font-size: 0.92rem; }
.profile-card-list li { padding: 0.3rem 0; border-top: 1px solid var(--gridline); }
.profile-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.6rem;
                 border-radius: 999px; font-size: 0.8rem; font-weight: 600;
                 background: var(--surface-2); color: var(--text-secondary);
                 border: 1px solid var(--gridline); }
.profile-header { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.2rem 0 1.8rem; }
.profile-tabs a { padding: 0.5rem 0.9rem; border-radius: 999px; font-size: 0.92rem; font-weight: 500;
                  background: var(--surface); border: 1px solid var(--border-strong);
                  color: var(--text-secondary); min-height: 38px; display: inline-flex; align-items: center; }
.profile-tabs a:hover { background: var(--surface-2); text-decoration: none; }
.profile-tabs a.active { background: var(--accent-track); color: var(--accent-strong);
                         border-color: var(--accent-track); font-weight: 600; }

/* ---------- Récapitulatifs et scrutins ---------- */
.recap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.recap-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
              padding: 1.2rem 1.3rem; }
.recap-card-head { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; margin-bottom: 0.7rem; }
.recap-list { list-style: none; padding: 0; margin: 0; font-size: 0.93rem; }
.recap-list li { padding: 0.35rem 0; border-top: 1px solid var(--gridline); }

.scrutin-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
                padding: 1.15rem 1.3rem; margin-bottom: 0.8rem; }
.scrutin-title { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.scrutin-meta { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.3rem; }

/* ---------- Méthodologie ---------- */
.methodo-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
                 padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
.formule { display: block; background: var(--surface-2); border-radius: var(--radius-sm);
           padding: 0.7rem 0.9rem; margin: 0.6rem 0; overflow-x: auto; white-space: pre-wrap;
           font-size: 0.86rem; color: var(--text-primary); }
.item { padding: 0.6rem 0; border-top: 1px solid var(--gridline); }

/* ---------- Graphiques (SVG produits par charts.py) ----------
   Les couleurs viennent des variables, jamais codées en dur : c'est ce qui fait
   fonctionner le mode sombre sur les graphiques. */
.chart-grid-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.1rem; }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
              padding: 1.2rem 1.3rem; }
.chart-card .chart-note { margin-top: 0.6rem; }
/* Sur petit écran on fait défiler le graphique plutôt que d'écraser ses étiquettes à 5 px. */
.chart-scroll { overflow-x: auto; }
.chart { width: 100%; height: auto; display: block; }
.chart-bar { fill: var(--accent); }
.chart-line { stroke: var(--accent); fill: none; stroke-width: 2; }
.chart-area { fill: var(--accent-track); }
.chart-dot { fill: var(--accent-strong); }
.chart-axis { stroke: var(--gridline); }
.chart-grid { stroke: var(--gridline); }
.chart-label, .chart-axis-title { fill: var(--text-secondary); font-family: var(--font-ui); font-size: 12px; }
.chart-tick { fill: var(--text-muted); font-family: var(--font-ui); font-size: 11px; }
/* La variabilité n'est pas « la donnée » : une erreur reste discrète, jamais en accent. */
.chart-error { fill: var(--text-muted); font-family: var(--font-ui); font-size: 13px; }

/* ---------- Pied de page ---------- */
.footer { border-top: 1px solid var(--gridline); background: var(--surface-2); margin-top: 4rem; }
.footer-inner { max-width: var(--page-max); margin: 0 auto; padding: 2.6rem var(--gutter); }
.footer-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 2.4rem; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.6rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.94rem; }
.footer-col a { color: var(--text-secondary); }
.footer-legal { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--gridline);
                font-size: 0.87rem; color: var(--text-muted); line-height: 1.55; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =============================================================================
   ADAPTATION MOBILE
   Le site n'est pas « rétréci » : sous 980 px la navigation change de nature (rideau
   plein écran ouvert au clic) et sous 720 px les tableaux deviennent des cartes —
   aucun défilement horizontal, aucune cellule illisible.
   ============================================================================= */

@media (max-width: 980px) {
  .nav-burger { display: inline-flex; }

  .topbar nav {
    position: fixed; inset: 0; background: var(--page);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0.15rem; padding: 1rem 1.1rem 3rem; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.22s ease; z-index: 100;
  }
  .nav-toggle:checked ~ .topbar-inner nav { transform: none; }

  .nav-close { display: inline-flex; align-self: flex-end; width: var(--tap); height: var(--tap);
               align-items: center; justify-content: center; cursor: pointer; border-radius: 8px;
               color: var(--text-primary); margin-bottom: 0.6rem; }
  .nav-close:hover { background: var(--surface-2); }

  .topbar nav > a, .nav-dropdown > summary {
    min-height: var(--tap); padding: 0.85rem 1rem; font-size: 1.06rem;
    border-bottom: 1px solid var(--gridline); border-radius: 0; justify-content: space-between;
  }
  .nav-dropdown-menu {
    position: static; box-shadow: none; border: none; border-left: 2px solid var(--accent-track);
    border-radius: 0; margin: 0.3rem 0 0.6rem 0.9rem; min-width: 0; max-height: none; padding: 0;
  }
  .nav-dropdown-menu a { min-height: 44px; font-size: 1rem; }
}

@media (max-width: 880px) {
  .hero { padding-top: 2.2rem; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .confrontation-body { grid-template-columns: 1fr; }
  .confrontation-said { border-right: none; border-bottom: 1px solid var(--gridline); }
  .contradiction-pair { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .page-head { flex-direction: column; gap: 1.2rem; }
  .page-head > .btn { align-self: stretch; }
}

@media (max-width: 720px) {
  /* --- Tableaux en cartes : une ligne = une carte, chaque cellule porte son intitulé --- */
  .table-wrap.cards { border: none; background: transparent; overflow: visible; border-radius: 0; }
  .table-wrap.cards table, .table-wrap.cards tbody,
  .table-wrap.cards tr, .table-wrap.cards td { display: block; width: 100%; }
  .table-wrap.cards thead { display: none; }
  .table-wrap.cards tbody tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    margin-bottom: 0.75rem; padding: 0.35rem 0;
  }
  .table-wrap.cards tbody tr:hover { background: var(--surface); }
  .table-wrap.cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.42rem 1rem; border: none; font-size: 0.95rem;
  }
  .table-wrap.cards td::before {
    content: attr(data-label); flex: 0 0 auto; font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted);
  }
  /* La première cellule est le titre de la carte : pas d'intitulé, pleine largeur. */
  .table-wrap.cards td.cell-title { display: block; padding: 0.75rem 1rem 0.5rem; font-size: 1.02rem; }
  .table-wrap.cards td.cell-title::before { content: none; }
  .table-wrap.cards td:not([data-label])::before { content: none; }
  .table-wrap.cards .meter { min-width: 0; width: 58%; }
  .table-wrap.cards .meter-value { min-width: 3.4em; }

  /* Les graphiques défilent au lieu de se tasser */
  .chart-scroll .chart { min-width: 520px; }

  h2 { margin-top: 2.2rem; }
  .card, .confrontation-said, .confrontation-voted, .confrontation-verdict { padding-left: 1.15rem;
                                                                            padding-right: 1.15rem; }
  .figure-strip { gap: 1.1rem; padding: 1.3rem 0; }
  .limit-row { gap: 0.9rem; }
  .limit-row .limit-figure { flex-basis: 2.6rem; font-size: 1.5rem; }
}

@media (max-width: 520px) {
  :root { --gutter: 1.1rem; }
  body { font-size: 16.5px; }
  .content { padding-top: 1.8rem; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .stat-tile { padding: 0.9rem 1rem; }
  .stat-tile .value { font-size: 1.45rem; }
  .figure-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row .btn { flex: 1 1 100%; }
  .citation { font-size: 1.1rem; }
  .brand { font-size: 1.15rem; }
  .profile-tabs { gap: 0.3rem; }
}

/* Respect de la préférence système : pas d'animation si l'utilisateur n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Encart d'explication en tête de page ----------
   Un chiffre affiché sans dire ce qu'il mesure n'est pas de la transparence. Chaque page
   porte une phrase qui dit ce qu'on regarde, et un lien vers l'endroit EXACT de la
   méthodologie où la formule est écrite. */
.notice.explication { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 1.8rem;
                      max-width: 78ch; }
.explication-icone { color: var(--accent-strong); flex-shrink: 0; margin-top: 0.15rem; }
.explication-icone .icon { width: 1.25rem; height: 1.25rem; }
.explication-lien { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.4rem;
                    font-weight: 600; white-space: nowrap; }
.voir-tout { margin: 1rem 0 0; }
.voir-tout a { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600;
               min-height: 44px; }
/* Une ancre visée depuis un lien profond ne doit pas passer sous la barre collante. */
[id] { scroll-margin-top: 88px; }