/* ============================================================
   Le Vrai Vote — feuille de style (refonte)
   Remplace web/styles.css. Restyle toutes les pages existantes.
   Polices Spectral + Libre Franklin chargées sans bloquer le rendu
   (voir theme.js) ; repli élégant sur les polices système sinon.
   Mode sombre : automatique (préférence système) + bascule
   manuelle via theme.js (html[data-theme="dark"|"light"]).
   L'information n'est jamais portée par la seule couleur (RGAA).
   ============================================================ */

:root {
  --encre:#211f1b; --encre-douce:#5c574c; --fond:#f6f4ef; --carte:#ffffff;
  --lisere:#e4dfd5; --faint:#efece4; --mute:#8a8474;
  --accent:#1f3a52; --accent-texte:#ffffff; --lien:#1f3a52;
  --b-pour-bg:#e9f4ec;  --b-pour-fg:#14532d;
  --b-contre-bg:#fef2f2; --b-contre-fg:#7f1d1d;
  --b-abst-bg:#fefce8;  --b-abst-fg:#713f12;
  --b-nonvot-bg:#eff6ff; --b-nonvot-fg:#1e3a5f;
  --b-absent-bg:#f4f4f5; --b-absent-fg:#3f3f46;
  --b-neutre-bg:#eef0f2; --b-neutre-fg:#55606b;
  --cov-couvert:#1f6b3b; --cov-couvert-bg:#e9f4ec;
  --cov-partiel:#8a5a12; --cov-partiel-bg:#faf0dd;
  --cov-hors:#55606b;    --cov-hors-bg:#eceef1;
  --panneau:#1b1a14;
}

/* Mode sombre automatique (suit le système), sauf choix explicite "clair" */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre:#ece8dd; --encre-douce:#a9a394; --fond:#14140f; --carte:#201f18;
    --lisere:#33322a; --faint:#1b1a14; --mute:#8f8a7c;
    --accent:#6f9fc7; --accent-texte:#0f2033; --lien:#8fb6d8;
    --b-pour-bg:rgba(31,107,59,.24);  --b-pour-fg:#7fce9a;
    --b-contre-bg:rgba(127,29,29,.32); --b-contre-fg:#f0a0a0;
    --b-abst-bg:rgba(113,63,18,.32);  --b-abst-fg:#e5c07b;
    --b-nonvot-bg:rgba(30,58,95,.38); --b-nonvot-fg:#9cc0e8;
    --b-absent-bg:rgba(120,120,130,.24); --b-absent-fg:#c7c7cf;
    --b-neutre-bg:rgba(255,255,255,.08); --b-neutre-fg:#b9b3a5;
    --cov-couvert:#7fce9a; --cov-couvert-bg:rgba(31,107,59,.24);
    --cov-partiel:#e5b567; --cov-partiel-bg:rgba(138,90,18,.30);
    --cov-hors:#b9b3a5;    --cov-hors-bg:rgba(255,255,255,.08);
  }
}

/* Mode sombre manuel (bascule theme.js) — prioritaire */
:root[data-theme="dark"] {
  --encre:#ece8dd; --encre-douce:#a9a394; --fond:#14140f; --carte:#201f18;
  --lisere:#33322a; --faint:#1b1a14; --mute:#8f8a7c;
  --accent:#6f9fc7; --accent-texte:#0f2033; --lien:#8fb6d8;
  --b-pour-bg:rgba(31,107,59,.24);  --b-pour-fg:#7fce9a;
  --b-contre-bg:rgba(127,29,29,.32); --b-contre-fg:#f0a0a0;
  --b-abst-bg:rgba(113,63,18,.32);  --b-abst-fg:#e5c07b;
  --b-nonvot-bg:rgba(30,58,95,.38); --b-nonvot-fg:#9cc0e8;
  --b-absent-bg:rgba(120,120,130,.24); --b-absent-fg:#c7c7cf;
  --b-neutre-bg:rgba(255,255,255,.08); --b-neutre-fg:#b9b3a5;
  --cov-couvert:#7fce9a; --cov-couvert-bg:rgba(31,107,59,.24);
  --cov-partiel:#e5b567; --cov-partiel-bg:rgba(138,90,18,.30);
  --cov-hors:#b9b3a5;    --cov-hors-bg:rgba(255,255,255,.08);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Libre Franklin', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color:var(--encre); background:var(--fond); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s, color .25s;
}
main { max-width:60rem; margin:0 auto; padding:0 1.4rem 3rem; }
a { color:var(--lien); }
a:hover { color:var(--accent); }

h1 { font-family:'Spectral', Georgia, serif; font-weight:700; font-size:clamp(1.9rem,4vw,2.7rem);
  letter-spacing:-0.02em; line-height:1.1; margin:1.6rem 0 0.6rem; text-wrap:balance; }
h2 { font-family:'Spectral', Georgia, serif; font-weight:600; font-size:1.45rem;
  letter-spacing:-0.01em; margin:2.4rem 0 0.6rem; }
h3 { font-family:'Spectral', Georgia, serif; font-weight:600; font-size:1.15rem; margin:1.4rem 0 0.5rem; }

/* Bandeau version de travail */
.bandeau-travail {
  background:var(--faint); color:var(--mute); padding:0.5rem 1rem;
  font-size:0.82rem; text-align:center; border-bottom:1px solid var(--lisere);
}

/* Navigation */
.entete-nav {
  display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 1.4rem;
  max-width:60rem; margin:0 auto; padding:0.85rem 1.4rem;
  border-bottom:1px solid var(--lisere);
  position:sticky; top:0; z-index:20; background:var(--fond);
}
.marque { font-family:'Spectral', Georgia, serif; font-weight:700; font-size:1.3rem;
  letter-spacing:-0.01em; color:var(--encre); text-decoration:none;
  display:flex; align-items:center; gap:0.45rem; }
.marque-logo { display:block; flex:none; }
.entete-nav nav { display:flex; flex-wrap:wrap; align-items:center; gap:0.2rem 0.35rem; margin-left:auto; }
.entete-nav nav a { text-decoration:none; color:var(--encre-douce); font-size:0.92rem;
  padding:0.35rem 0.6rem; border-radius:7px; }
.entete-nav nav a:hover { background:var(--faint); color:var(--encre); }
.entete-nav nav a[aria-current="page"] { color:var(--accent); font-weight:600; }

/* Bouton bascule thème (injecté par theme.js) */
.bascule-theme {
  cursor:pointer; font-family:inherit; font-size:0.85rem;
  background:var(--carte); color:var(--encre);
  border:1px solid var(--lisere); border-radius:8px; padding:0.35rem 0.6rem; margin-left:0.4rem;
}
.bascule-theme:hover { border-color:var(--accent); color:var(--accent); }

/* Accueil */
.hero { padding-top:2rem; }
.hero h1 { font-size:clamp(2.2rem,5.2vw,3.6rem); max-width:16ch; }
.hero p { color:var(--encre-douce); max-width:56ch; font-size:1.08rem; }
.chiffres { font-size:0.92rem; color:var(--encre-douce); }
.acces { display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:0.4rem; }
.bouton {
  display:inline-block; background:var(--accent); color:var(--accent-texte);
  text-decoration:none; padding:0.6rem 1.2rem; border-radius:9px; font-weight:600;
}
.bouton:hover { filter:brightness(1.1); color:var(--accent-texte); }
.bouton-second { background:var(--carte); color:var(--accent); border:1.5px solid var(--lisere); }
.bouton-second:hover { border-color:var(--accent); }

/* Cartes (candidats, thèmes) */
.grille-cartes { display:grid; gap:0.7rem; margin:1rem 0 1.6rem;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
.carte-candidat {
  background:var(--carte); border:1px solid var(--lisere); border-radius:13px;
  padding:1rem 1.1rem; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.carte-candidat:hover { border-color:var(--accent); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.carte-candidat h3 { margin:0 0 0.2rem; font-size:1.12rem; }
.carte-candidat h3 a { text-decoration:none; color:var(--encre); }
.carte-candidat h3 a:hover { color:var(--accent); }
.detail { color:var(--encre-douce); font-size:0.85rem; margin:0.15rem 0; }

/* Couverture (état de disponibilité) */
.couverture { font-size:0.8rem; margin:0.5rem 0 0; font-weight:600;
  display:inline-block; padding:0.16rem 0.6rem; border-radius:999px; }
.couverture-couvert { color:var(--cov-couvert); background:var(--cov-couvert-bg); }
.couverture-partiel { color:var(--cov-partiel); background:var(--cov-partiel-bg); }
.couverture-hors    { color:var(--cov-hors);    background:var(--cov-hors-bg); font-weight:600; }

/* Encadré méthode / note */
.note-methode {
  font-size:0.9rem; color:var(--encre-douce); background:var(--carte);
  border:1px solid var(--lisere); border-radius:10px; padding:0.75rem 0.95rem;
}

/* Fiche candidat */
.fil { font-size:0.9rem; margin-top:1.2rem; }
.fil a { color:var(--accent); font-weight:600; text-decoration:none; }
.mandats { list-style:none; padding:0; margin:0; font-size:0.92rem; }
.mandats li { border-left:3px solid var(--lisere); padding:0.2rem 0 0.2rem 0.7rem; margin:0.35rem 0; }
.mandats .dates { color:var(--encre-douce); }

/* Badges de position — libellé toujours écrit en toutes lettres */
.badges { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.6rem 0; }
.badge {
  display:inline-block; border-radius:999px; padding:0.16rem 0.7rem;
  font-size:0.82rem; font-weight:600; white-space:nowrap;
}
.badge-pour       { color:var(--b-pour-fg);   background:var(--b-pour-bg); }
.badge-contre     { color:var(--b-contre-fg); background:var(--b-contre-bg); }
.badge-abstention { color:var(--b-abst-fg);   background:var(--b-abst-bg); }
.badge-nonvotant  { color:var(--b-nonvot-fg); background:var(--b-nonvot-bg); }
.badge-absent     { color:var(--b-absent-fg); background:var(--b-absent-bg); }
.badge-neutre     { color:var(--b-neutre-fg); background:var(--b-neutre-bg); }

/* Nom du candidat en couleur + gras à côté du badge — seulement pour/contre :
   ce sont les deux positions personnelles nettes, à distinguer d'un coup d'œil
   du décompte des partis affiché plus bas. */
.groupes-etat a.lien-pour   { color:var(--b-pour-fg);   font-weight:700; }
.groupes-etat a.lien-contre { color:var(--b-contre-fg); font-weight:700; }

/* Recherche */
#recherche {
  width:100%; max-width:28rem; padding:0.6rem 0.85rem;
  border:1.5px solid var(--lisere); border-radius:10px; font-size:1rem;
  font-family:inherit; background:var(--carte); color:var(--encre);
}

/* Comparateur */
.comparateur { display:flex; flex-wrap:wrap; gap:1.2rem; margin:1.2rem 0; }
.comparateur label { display:flex; flex-direction:column; gap:0.3rem;
  font-size:0.88rem; color:var(--encre-douce); }
.comparateur select {
  padding:0.5rem 0.7rem; border:1px solid var(--lisere); border-radius:8px;
  font-size:1rem; background:var(--carte); color:var(--encre); min-width:16rem; font-family:inherit;
}
.cmp-slot { position:relative; }
.cmp-retirer { position:absolute; top:0; right:0; background:none; border:none; cursor:pointer;
  color:var(--mute); font-size:1.1rem; line-height:1; padding:.1rem .3rem; }
.cmp-retirer:hover { color:var(--b-contre-fg); }
.bouton-lien { background:none; border:none; cursor:pointer; color:var(--accent); font-family:inherit;
  font-size:.88rem; font-weight:600; padding:.2rem 0; text-decoration:underline; }
.bouton-lien:hover { opacity:.8; }

/* Comparaison à 3 candidats ou plus : regroupement par position, sans colonnes. */
.cmp-multi-positions { list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.4rem; font-size:.92rem; }
.cmp-multi-positions li { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; }
.cmp-multi-nom { font-weight:600; }

.resultat-comparaison {
  background:var(--carte); border:1px solid var(--lisere); border-radius:14px;
  padding:1.3rem 1.5rem; margin-top:1rem;
}
.grand-chiffre { font-family:'Spectral', Georgia, serif; font-size:3rem; font-weight:700;
  margin:0.2rem 0; letter-spacing:-0.02em; color:var(--accent); }

.methode-liste { padding-left:1.2rem; }
.methode-liste li { margin:0.55rem 0; color:var(--encre-douce); }
.methode-liste strong { color:var(--encre); }

/* Votes clés */
.votes-cles { list-style:none; padding:0; margin:0.7rem 0 1.6rem; display:grid; gap:0.7rem; }
.vote-cle {
  background:var(--carte); border:1px solid var(--lisere); border-radius:12px;
  padding:0.9rem 1.05rem;
}
.vote-cle-page { margin:1.1rem 0; padding:1.3rem 1.4rem; }
.vote-cle-page h2 { margin-top:0.2rem; font-size:1.2rem; }
.vote-tete { display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.vote-tete strong { font-family:'Spectral', Georgia, serif; font-weight:600; font-size:1.02rem; }
.vote-resume { font-size:0.92rem; color:var(--encre-douce); margin:0.5rem 0 0.2rem; }
.vote-resume a { white-space:nowrap; }
.vote-contexte { font-size:0.85rem; color:var(--mute); font-style:italic; margin:0.4rem 0 0; }
.groupes-etat { list-style:none; padding:0; margin:0.7rem 0 0; font-size:0.92rem; display:grid; gap:0.45rem; }
.groupes-etat li { margin:0; }
.divergence { border-left:4px solid var(--accent); }

/* Nuances */
.titre-nuances { font-size:0.85rem; font-weight:600; color:var(--encre-douce); margin:0.8rem 0 0.2rem; }
.nuances { list-style:none; padding:0.6rem 0.9rem; margin:0; font-size:0.85rem;
  color:var(--encre-douce); background:var(--faint); border-radius:10px; }
.nuances li { margin:0.35rem 0; }
.nuances strong { color:var(--encre); }
.vote-nuance { font-size:0.85rem; color:var(--encre-douce); background:var(--faint);
  border-radius:10px; padding:0.45rem 0.7rem; margin:0.35rem 0; }

/* Pied de page */
.pied {
  margin-top:3.5rem; padding:1.6rem 1.4rem 2.4rem;
  border-top:1px solid var(--lisere); font-size:0.82rem;
  color:var(--encre-douce); text-align:center; background:var(--faint);
}
.pied a { color:var(--accent); }

/* ============================================================
   Page d'accueil (refonte) — classes dédiées
   ============================================================ */
.hero-eyebrow { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.75rem;
  font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:2rem 0 1.1rem; }
.hero-eyebrow i { width:26px; height:1px; background:var(--accent); display:inline-block; font-style:normal; }
.hero-lead { font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--encre-douce); max-width:56ch; }
.hero-lead strong { color:var(--encre); font-weight:600; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem;
  margin-top:2.4rem; border-top:1px solid var(--lisere); padding-top:1.6rem; }
.stat-num { font-family:'Spectral',Georgia,serif; font-weight:700; font-size:2rem; line-height:1; }
.stat-num.accent { color:var(--accent); }
.stat-lbl { font-size:0.85rem; color:var(--encre-douce); margin-top:0.35rem; }

.bloc { padding:2.8rem 0 0.4rem; }
.bloc h2 { margin:0 0 0.5rem; }
.bloc .intro { color:var(--encre-douce); max-width:60ch; margin:0 0 1.6rem; }

.steps, .principes { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.step { background:var(--carte); border:1px solid var(--lisere); border-radius:14px; padding:1.5rem 1.4rem; }
.step-num { font-family:'Spectral',Georgia,serif; font-weight:700; color:var(--accent-texte);
  background:var(--accent); width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.step h3 { margin:0 0 0.5rem; }
.step p { margin:0; color:var(--encre-douce); font-size:0.95rem; }

.principe { border-left:3px solid var(--accent); background:var(--carte); border-radius:0 12px 12px 0; padding:1.2rem 1.3rem; }
.principe-num { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.principe h3 { margin:0 0 0.4rem; font-size:1.15rem; }
.principe p { margin:0; color:var(--encre-douce); font-size:0.92rem; }

.etats-panel { background:var(--panneau); color:#f3efe4; border-radius:18px; padding:2.2rem 1.9rem; margin-top:1rem; }
.etats-panel h2 { color:#fff; margin:0 0 0.6rem; }
.etats-panel > p { color:#c9c3b6; max-width:64ch; font-size:0.98rem; margin:0; }
.etats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.1rem; margin-top:1.4rem; }
.etat-item { background:rgba(255,255,255,0.05); border-radius:12px; padding:1.2rem; }
.etat-item p { margin:0; font-size:0.9rem; color:#d9d4c8; }
.etat-item .pastille { margin-bottom:0.8rem; }

.pastille { display:inline-block; font-size:0.75rem; font-weight:600; padding:0.16rem 0.62rem; border-radius:999px; }
.pastille-ok { background:var(--cov-couvert-bg); color:var(--cov-couvert); }
.pastille-partiel { background:var(--cov-partiel-bg); color:var(--cov-partiel); }
.pastille-decl { background:var(--cov-hors-bg); color:var(--cov-hors); }
.etats-panel .pastille-ok { background:#e9f4ec; color:#1f6b3b; }
.etats-panel .pastille-partiel { background:#faf0dd; color:#8a5a12; }
.etats-panel .pastille-decl { background:#eceef1; color:#4f5966; }

.sous-titre { font-weight:700; font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--encre-douce); margin:1.6rem 0 0.9rem; }

.cand-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:0.8rem; margin:1rem 0 1.6rem; }
.cand-carte { display:flex; gap:0.9rem; align-items:flex-start; background:var(--carte);
  border:1px solid var(--lisere); border-radius:13px; padding:1rem 1.1rem;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.cand-carte:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.cand-avatar { flex:0 0 auto; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--faint);
  color:var(--accent); font-family:'Spectral',Georgia,serif; font-weight:700; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center; }
.cand-nom { font-family:'Spectral',Georgia,serif; font-weight:600; font-size:1.12rem; line-height:1.2; margin:0; }
.cand-nom a { text-decoration:none; color:var(--encre); }
.cand-nom a:hover { color:var(--accent); }
.cand-parti { font-size:0.85rem; color:var(--encre-douce); margin:0.15rem 0 0.55rem; }
.cand-note { font-size:0.8rem; color:var(--mute); margin-top:0.5rem; }

/* Positions des groupes parlementaires (ajout post-refonte, mêmes variables) */
.ligne-groupe { font-size:0.86rem; color:var(--encre-douce); margin:0.4rem 0 0.1rem; }
.ligne-groupe-absente { font-style:italic; color:var(--mute); }
.decompte-groupe { font-size:0.8rem; color:var(--mute); white-space:nowrap; }
.groupes-votes { margin:0.7rem 0 0; font-size:0.9rem; }
.groupes-votes summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:0.88rem; }
.groupes-votes ul { list-style:none; padding:0.55rem 0 0; margin:0; display:grid; gap:0.4rem; }
/* Justification sourcée d'un groupe : « pourquoi » du parti, en note discrète. */
/* Justification de groupe : même encadré gris que la nuance personnelle,
   pour que toutes les justifications se voient de la même façon. */
.groupe-justif { font-size:0.83rem; color:var(--encre-douce); background:var(--faint);
  border-radius:10px; padding:0.45rem 0.7rem; margin:0.35rem 0;
  border-left:3px solid var(--accent); line-height:1.45; }
.groupe-justif a { white-space:nowrap; }

/* Sens du vote : ce que « pour » et « contre » signifient concrètement.
   Deux blocs côte à côte (empilés sur mobile). Le mot Pour/Contre porte le
   sens (couleur = renfort, jamais information seule — RGAA). */
.sens-vote { display:flex; flex-wrap:wrap; gap:0.4rem; margin:0.55rem 0 0;
  font-size:0.84rem; line-height:1.4; }
.sens-part { flex:1 1 15rem; background:var(--faint); border-radius:9px;
  padding:0.4rem 0.65rem; border-left:3px solid var(--lisere); color:var(--encre-douce); }
.sens-p { border-left-color:var(--b-pour-fg); }
.sens-c { border-left-color:var(--b-contre-fg); }
.sens-mot { font-weight:700; letter-spacing:0.01em; }
.sens-p .sens-mot { color:var(--b-pour-fg); }
.sens-c .sens-mot { color:var(--b-contre-fg); }

/* Résultat officiel du scrutin + nuances plus visibles */
.chip-resultat { display:inline-block; border-radius:999px; padding:0.14rem 0.65rem;
  font-size:0.78rem; font-weight:600; background:var(--faint); color:var(--encre-douce);
  border:1px solid var(--lisere); white-space:nowrap; }
.resultat-ligne { margin:0.15rem 0 0.3rem; }
.vote-nuance { border-left:3px solid var(--accent); }
.nuances { border-left:3px solid var(--accent); }

/* Noms complets des groupes : autoriser le retour à la ligne dans les puces */
.badge-groupe { white-space:normal; text-align:left; line-height:1.35; }

/* Portraits des candidats */
.cand-photo { object-fit:cover; border:1px solid var(--lisere); }
.carte-tete { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.2rem; }
.carte-tete h3 { margin:0; }
.fiche-tete { display:flex; align-items:center; gap:1rem; margin-top:1rem; }
.fiche-tete .cand-avatar { width:4.5rem; height:4.5rem; font-size:1.4rem; }
.fiche-tete h1 { margin:0 0 0.2rem; }
.credits-photos { font-size:0.82rem; }

/* Barre d'actions de la fiche : changer de candidat / lancer une comparaison */
.fiche-actions { display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; align-items:end;
  margin:1rem 0 1.4rem; padding:.85rem 1rem; background:var(--faint);
  border:1px solid var(--lisere); border-radius:12px; }
.fiche-action { display:flex; flex-direction:column; gap:.3rem;
  font-size:.82rem; font-weight:600; color:var(--encre-douce); }
.fiche-action select { padding:.5rem .65rem; border:1px solid var(--lisere); border-radius:8px;
  font-size:.95rem; background:var(--carte); color:var(--encre); font-family:inherit; min-width:14rem; }
@media (max-width:520px){
  .fiche-action { width:100%; }
  .fiche-action select { min-width:0; width:100%; }
}

/* Sommaire de la fiche candidat : accès direct à chaque section (ex. Programme)
   sans avoir à scroller pour découvrir qu'elle existe. */
.sommaire-fiche { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.2rem; }
.sommaire-fiche a { font-size:.82rem; font-weight:600; color:var(--encre-douce);
  background:var(--carte); border:1.5px solid var(--lisere); border-radius:999px;
  padding:.32rem .8rem; text-decoration:none; }
.sommaire-fiche a:hover, .sommaire-fiche a:focus-visible { border-color:var(--accent); color:var(--accent); }
#votes-cles, #positions-an, #positions-senat, #solennels, #mandats, #programme { scroll-margin-top:6rem; }

/* Ligne « Au Sénat » (équivalent d'un vote clé dans l'autre chambre) */
.ligne-senat { font-size:0.88rem; color:var(--encre-douce); margin:0.35rem 0;
  padding-left:0.6rem; border-left:3px solid var(--lisere); }

/* Parlement européen : distinguer le VOTE PERSONNEL (badge plein) de la
   POSITION DU PARTI/délégation (badge en contour). L'info n'est jamais codée
   par la seule couleur (RGAA) : le texte du chip et les rubans restent explicites. */
.badge-contour { background:transparent; border:1.5px solid currentColor; }
/* Mention de la chambre (Assemblée, Sénat, Parlement européen, Congrès) —
   affichée sur chaque carte de vote pour lever toute ambiguïté. */
.provenance, .provenance-pe { display:inline-block; font-size:0.7rem; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--encre-douce);
  background:var(--faint); border:1px solid var(--lisere); border-radius:999px;
  padding:0.06rem 0.5rem; vertical-align:middle; white-space:nowrap; }
/* Léger repère de couleur par chambre (le texte reste l'information — RGAA). */
.provenance-pe { border-color:#9cc0e8; }
.provenance-senat { border-color:#e5b567; }
.provenance-congres { border-color:#b58fd8; }
.mention-absente { font-style:italic; color:var(--mute); font-size:0.9rem; }
.ligne-pe { font-size:0.86rem; color:var(--encre-douce); margin:0.4rem 0 0.1rem;
  padding-left:0.6rem; border-left:3px solid var(--lisere); }

/* ============================================================
   Refonte lisibilité des votes clés (24/07/2026)
   Une carte = un bandeau de position (dominant, à gauche) + un corps
   démoté. La couleur pleine ne sert qu'au vote personnel ; parti et
   Sénat en badges de contour ; résultat en texte gris fin.
   ============================================================ */
.votes-cles { list-style:none; padding:0; margin:.7rem 0 1.6rem; display:grid; gap:.6rem; }
.vote-carte {
  background:var(--carte); border:1px solid var(--lisere); border-radius:12px;
  display:grid; grid-template-columns:108px 1fr; overflow:hidden; margin:0 0 .6rem;
}
.vote-carte-theme { margin:1rem 0; }

/* Bandeau de position (rail) */
.ap-rail {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; padding:.7rem .45rem; text-align:center;
}
.ap-rail .pos { font-weight:700; font-size:.95rem; letter-spacing:.01em; line-height:1.15; }
.ap-rail .mini { font-size:.63rem; text-transform:uppercase; letter-spacing:.07em; opacity:.8; }
.ap-rail .pos-res { font-weight:600; font-size:.82rem; line-height:1.2; font-variant-numeric:tabular-nums; }
.rail-pour   { background:var(--b-pour-bg);   color:var(--b-pour-fg);   box-shadow:inset 4px 0 0 var(--b-pour-fg); }
.rail-contre { background:var(--b-contre-bg); color:var(--b-contre-fg); box-shadow:inset 4px 0 0 var(--b-contre-fg); }
.rail-abst   { background:var(--b-abst-bg);   color:var(--b-abst-fg);   box-shadow:inset 4px 0 0 var(--b-abst-fg); }
.rail-absent { background:var(--b-absent-bg); color:var(--b-absent-fg); box-shadow:inset 4px 0 0 var(--b-absent-fg); }
.rail-neutre { background:var(--faint);       color:var(--encre-douce); box-shadow:inset 4px 0 0 var(--lisere); }

/* Bannière « position du parti » (PE, quand la personne n'a pas siégé) :
   teinte douce vert/rouge pour ne pas être manquée, mais distincte d'un vote
   personnel — label « Parti » + « n'y siégeait pas » en gris. */
.rail-parti-pour   { background:var(--b-pour-bg);   box-shadow:inset 4px 0 0 var(--lisere); }
.rail-parti-contre { background:var(--b-contre-bg); box-shadow:inset 4px 0 0 var(--lisere); }
.rail-parti-abst   { background:var(--b-abst-bg);   box-shadow:inset 4px 0 0 var(--lisere); }
.ap-rail .pos-parti { font-size:.6rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; opacity:.85; }
.rail-parti-pour   .pos-parti, .rail-parti-pour   .pos { color:var(--b-pour-fg); }
.rail-parti-contre .pos-parti, .rail-parti-contre .pos { color:var(--b-contre-fg); }
.rail-parti-abst   .pos-parti, .rail-parti-abst   .pos { color:var(--b-abst-fg); }
.rail-parti-pour .mini, .rail-parti-contre .mini, .rail-parti-abst .mini {
  color:var(--encre-douce); text-transform:none; letter-spacing:0; opacity:.85; }

/* Corps de la carte */
.ap-corps { padding:.75rem .95rem; min-width:0; }
.ap-titre { font-family:'Spectral',Georgia,serif; font-weight:600; font-size:1.05rem; margin:0; line-height:1.25; }
.ap-meta  { font-size:.78rem; color:var(--mute); margin:.15rem 0 0; font-variant-numeric:tabular-nums; }
.ap-resume { font-size:.88rem; color:var(--encre-douce); margin:.5rem 0 0; }
.ap-resume a { color:var(--accent); white-space:nowrap; }

/* Lignes secondaires (parti, Sénat) : démotées, badges en contour */
.ligne-groupe, .ligne-senat { font-size:.82rem; color:var(--encre-douce); margin:.4rem 0 0;
  padding-left:.55rem; border-left:2px solid var(--lisere); }
.ligne-groupe .badge, .ligne-senat .badge { background:transparent; border:1.5px solid currentColor; font-size:.76rem; }
.ligne-groupe-absente { font-style:italic; color:var(--mute); }

/* Positions groupées (page thème) : le cœur de la page, restent nettes */
.groupes-etat { list-style:none; padding:0; margin:.6rem 0 0; display:grid; gap:.4rem; font-size:.92rem; }
.groupes-votes { margin:.5rem 0 0; font-size:.82rem; }
.groupes-votes summary { cursor:pointer; color:var(--accent); font-weight:600; }

@media (max-width:460px){
  .vote-carte { grid-template-columns:84px 1fr; }
  .ap-rail .pos { font-size:.85rem; }
}

/* Filtres par thème (fiche candidat) — barre collante sous la navigation */
.filtres-themes { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1.2rem;
  position:sticky; top:3.4rem; z-index:10; background:var(--fond); padding:.5rem 0; }
.filtre-chip { cursor:pointer; font-family:inherit; font-size:.82rem; font-weight:600;
  color:var(--encre-douce); background:var(--carte); border:1.5px solid var(--lisere);
  border-radius:999px; padding:.32rem .8rem; transition:background .12s, color .12s, border-color .12s; }
.filtre-chip:hover { border-color:var(--accent); color:var(--accent); }
.filtre-chip.actif { background:var(--accent); color:var(--accent-texte); border-color:var(--accent); }
.filtre-chip:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-bloc h3 { scroll-margin-top:6rem; }

/* Sous-filtre à l'intérieur d'un thème qui a plusieurs sous-catégories
   (ex. Écologie et agriculture : Climat, Élevage, Incendies…) — même style
   que le filtre de thème mais plus discret (pas sticky, puces plus petites). */
.filtres-souscat { display:none; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 1rem; }
.filtres-souscat .filtre-chip { font-size:.78rem; padding:.26rem .65rem; }
/* Affiché seulement quand ce thème précis est sélectionné dans le filtre
   principal (pas en vue « Tous les thèmes », où ce serait un bruit inutile
   au milieu de tous les autres thèmes affichés). */
.theme-bloc.filtre-actif .filtres-souscat,
.cmp-theme.filtre-actif .filtres-souscat { display:flex; }

/* Votes clés repliés (candidats jamais parlementaires) */
.votes-replies { margin:.4rem 0 1rem; }
.votes-replies > summary { cursor:pointer; color:var(--accent); font-weight:600; font-size:.9rem;
  padding:.3rem 0; }
.votes-replies[open] > summary { margin-bottom:.6rem; }

/* ============================================================
   Comparateur thématique (refonte) : 2 modes, par thème
   ============================================================ */
.mode-compare { display:inline-flex; gap:.3rem; margin:.4rem 0 .2rem; background:var(--faint);
  border:1px solid var(--lisere); border-radius:999px; padding:.25rem; }
.mode-compare button { cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:600;
  color:var(--encre-douce); background:transparent; border:0; border-radius:999px; padding:.35rem .9rem; }
.mode-compare button.actif { background:var(--accent); color:var(--accent-texte); }
.mode-compare button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Puces de filtre par thème dans le comparateur (réutilise .filtres-themes).
   L'attribut hidden doit primer sur le display:flex hérité de .filtres-themes. */
.filtres-cmp[hidden] { display:none; }

.cmp-theme { margin:1.8rem 0 0; }
.cmp-theme h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem;
  border-bottom:2px solid var(--lisere); padding-bottom:.3rem; }
.cmp-compte { font-family:system-ui; font-size:.82rem; font-weight:600; color:var(--encre-douce); }
.cmp-compte strong { color:var(--accent); font-weight:700; }

.cmp-vote { background:var(--carte); border:1px solid var(--lisere); border-radius:12px;
  padding:.75rem .95rem; margin:.6rem 0; border-left:4px solid var(--lisere); }
.cmp-vote.diverge { border-left-color:var(--b-contre-fg); }
.cmp-vote.accord  { border-left-color:var(--b-pour-fg); }
.cmp-vote.incomp  { opacity:.72; }
.cmp-titre { font-family:'Spectral',Georgia,serif; font-weight:600; font-size:1rem; }
.cmp-chambre { font-family:system-ui; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--mute); }
.cmp-cols { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:.6rem; margin:.55rem 0 0; }
.cmp-col { display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; min-width:0; }
.cmp-cols .cmp-col:last-child { align-items:flex-end; text-align:right; }
.qui { font-size:.75rem; font-weight:700; color:var(--encre-douce); text-transform:uppercase; letter-spacing:.04em; }
.cmp-vs { font-size:1.1rem; font-weight:700; color:var(--mute); align-self:center; }
.cmp-vote.diverge .cmp-vs { color:var(--b-contre-fg); }
.cmp-vote.accord .cmp-vs  { color:var(--b-pour-fg); }
.cmp-nuance { font-size:.78rem; color:var(--encre-douce); margin:.15rem 0 0; font-style:italic; }
.cmp-desc { margin:.5rem 0 0; font-size:.85rem; }
.cmp-desc summary { cursor:pointer; color:var(--accent); font-weight:600; }
.cmp-desc p { color:var(--encre-douce); margin:.4rem 0 0; }
@media (max-width:520px){ .cmp-cols { grid-template-columns:1fr; } .cmp-cols .cmp-col:last-child { align-items:flex-start; text-align:left; } .cmp-vs { display:none; } }

/* ============================================================
   Comparateur — refonte « bannieres » (26/07/2026)
   Chaque vote : titre + description toujours visible + une banniere
   coloree par candidat (couleur = position) -> accord/divergence lus
   d'un coup d'oeil. Meme langage visuel que les fiches.
   ============================================================ */
.cmp-vote { background:var(--carte); border:1px solid var(--lisere); border-radius:14px;
  padding:1rem 1.1rem; margin:.7rem 0; border-top:4px solid var(--lisere); }
.cmp-vote.diverge { border-top-color:var(--b-contre-fg); }
.cmp-vote.accord  { border-top-color:var(--b-pour-fg); }
.cmp-vote.incomp  { opacity:.78; }
.cmp-tete { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem 1rem; }
.cmp-titre { font-family:'Spectral',Georgia,serif; font-weight:600; font-size:1.08rem; }
.cmp-chambre { font-family:system-ui; font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--mute); white-space:nowrap; }
.cmp-desc-texte { font-size:.88rem; color:var(--encre-douce); margin:.45rem 0 .8rem; }

.cmp-bannieres { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.cmp-ban { border-radius:10px; padding:.6rem .8rem; display:flex; flex-direction:column; gap:.15rem;
  box-shadow:inset 5px 0 0 rgba(0,0,0,.14); }
.cmp-ban-qui { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }
.cmp-ban-pos { font-family:'Spectral',Georgia,serif; font-weight:700; font-size:1.15rem; line-height:1.1; }
/* Étiquette « position du parti » quand le vote personnel n'existe pas. */
.cmp-ban-tag { display:inline-block; margin-left:.4rem; padding:.05rem .4rem; border-radius:999px;
  font-size:.62rem; font-weight:700; text-transform:none; letter-spacing:0;
  border:1px solid currentColor; opacity:.9; vertical-align:middle; }
.cmp-ban.rail-pour   { background:var(--b-pour-bg);   color:var(--b-pour-fg); }
.cmp-ban.rail-contre { background:var(--b-contre-bg); color:var(--b-contre-fg); }
.cmp-ban.rail-abst   { background:var(--b-abst-bg);   color:var(--b-abst-fg); }
.cmp-ban.rail-neutre { background:var(--faint);       color:var(--encre-douce); box-shadow:inset 5px 0 0 var(--lisere); }

.cmp-marque { display:inline-block; margin-top:.6rem; font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:.12rem .6rem; border-radius:999px; }
.cmp-marque.diverge { color:var(--b-contre-fg); background:var(--b-contre-bg); }
.cmp-marque.accord  { color:var(--b-pour-fg);  background:var(--b-pour-bg); }
.cmp-nuance { font-size:.8rem; color:var(--encre-douce); margin:.5rem 0 0; font-style:italic;
  padding-left:.55rem; border-left:2px solid var(--lisere); }
.cmp-nuance strong { font-style:normal; color:var(--encre); }
@media (max-width:520px){ .cmp-bannieres { grid-template-columns:1fr; } }

/* ============================================================
   Confort mobile (≤640px) — CLAUDE.md « mobile-first, ~380px »
   Objectif : une bonne vue d'ensemble, compacte et lisible — pas de
   texte surdimensionné ni de scroll à outrance. Bloc additif placé en
   fin de feuille : il prime sans modifier les règles ci-dessus.
   On n'agit que sur l'espace, la densité et le tactile ; l'information
   n'est jamais portée par la seule couleur (RGAA).
   ============================================================ */
@media (max-width:640px){
  /* Marges d'écran : un peu plus de largeur utile pour lire */
  main { padding-left:1rem; padding-right:1rem; }

  /* Rythme vertical resserré : moins de scroll, meilleure vue d'ensemble */
  h1 { margin:1rem 0 .5rem; }
  h2 { margin:1.6rem 0 .5rem; }
  h3 { margin:1.1rem 0 .4rem; }
  .hero { padding-top:1rem; }
  .hero h1 { font-size:2rem; }
  .bloc { padding-top:1.8rem; }
  .stats { margin-top:1.6rem; padding-top:1.2rem; }
  .grand-chiffre { font-size:2.4rem; }

  /* Grilles en une colonne : supprime tout débordement horizontal <300px */
  .grille-cartes, .cand-grille, .steps, .principes, .etats-grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:repeat(2,1fr); }   /* chiffres-clés : 2 par ligne */

  /* Cartes plus compactes + descriptions un poil plus denses */
  .vote-cle, .cmp-vote, .step, .carte-candidat, .cand-carte { padding:.8rem .9rem; }
  .ap-corps { padding:.65rem .8rem; }
  .ap-resume, .vote-resume, .cmp-desc-texte { line-height:1.45; }
  .etats-panel { padding:1.5rem 1.15rem; }
  .resultat-comparaison { padding:1.1rem 1.15rem; }
  .vote-cle-page { padding:1.1rem; }

  /* Cibles tactiles ≥44px (iOS/Android) sans grossir le texte */
  .entete-nav nav a, .filtre-chip, .mode-compare button, .bascule-theme,
  .votes-replies > summary, .groupes-votes summary, .cmp-desc summary {
    min-height:44px; display:inline-flex; align-items:center;
  }
  .entete-nav nav a, .filtre-chip { padding-top:.5rem; padding-bottom:.5rem; }

  /* Une seule barre collante : les filtres de thème passent en statique
     (sinon ils chevauchent la nav qui s'enroule sur petit écran) */
  .filtres-themes { position:static; top:auto; }

  /* Comparateur : sélecteurs pleine largeur, faciles à toucher */
  .comparateur { flex-direction:column; gap:.8rem; }
  .comparateur label { width:100%; }
  .comparateur select { min-width:0; width:100%; }

  /* Liens de source : retour à la ligne plutôt que débordement dans les
     colonnes étroites des cartes de vote */
  .ap-resume a, .vote-resume a { white-space:normal; }
  .ap-corps, .cmp-vote, .vote-cle { overflow-wrap:break-word; }
}

/* Médias fluides (toutes tailles) — filet anti-débordement */
img, svg, table { max-width:100%; }

/* ============================================================
   Fiche candidat sur mobile (≤640px) : rail de position en bandeau
   HAUT (rend toute la largeur au texte) + cartes de vote REPLIABLES.
   .collapsible/.open sont posées par theme.js ; sans JS tout reste
   déplié (aucune information cachée — RGAA / honnêteté).
   ============================================================ */
@media (max-width:640px){
  /* Rail = bandeau horizontal en tête de carte au lieu d'une colonne */
  .vote-carte{ display:block; }
  .ap-rail{ flex-direction:row; align-items:center; justify-content:flex-start;
    gap:.55rem; padding:.5rem .9rem; box-shadow:none; text-align:left; }
  .ap-rail .pos{ font-size:.92rem; }
  .ap-rail .mini, .ap-rail .pos-parti, .ap-rail .pos-res{ font-size:.7rem; }

  /* Carte repliée : rail + titre + résultat seulement ; le reste au tap */
  .vote-carte.collapsible{ cursor:pointer; }
  .vote-carte.collapsible:not(.open) > .ap-corps > :not(.ap-titre):not(.ap-meta){ display:none; }
  .vote-carte.collapsible > .ap-corps > .ap-titre::after{
    content:" ›  voir le détail"; color:var(--accent); font-weight:600;
    font-size:.78rem; font-family:'Libre Franklin', system-ui, sans-serif; letter-spacing:0; }
  .vote-carte.collapsible.open > .ap-corps > .ap-titre::after{ content:" ⌄  replier"; }
  .vote-carte.collapsible:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
}

/* ============================================================
   Comparateur : description repliée par défaut (toutes tailles).
   Visible = titre + bannières pour/contre ; le reste (sens du vote,
   description, justifications) se déplie au clic. <details> natif.
   ============================================================ */
.cmp-det{ margin:.6rem 0 0; }
.cmp-det > summary{ cursor:pointer; color:var(--accent); font-weight:600;
  font-size:.85rem; list-style:none; display:inline-flex; align-items:center; padding:.15rem 0; }
.cmp-det > summary::-webkit-details-marker{ display:none; }
.cmp-det > summary::before{ content:"▸"; margin-right:.4rem; font-size:.8em; }
.cmp-det[open] > summary::before{ content:"▾"; }
.cmp-det > summary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.cmp-det > *:not(summary){ margin-top:.5rem; }
/* Sur ordinateur : tout est visible, pas de menu déroulant (le repli
   ne sert que sur téléphone). On masque le résumé-bouton et on force
   l'affichage du contenu même quand le <details> est fermé. */
@media (min-width:641px){
  /* Desktop : les <details> sont ouverts par JS (attribut open) → toute
     la description reste visible ; on masque juste le résumé-bouton. */
  .cmp-det > summary{ display:none; }
}

/* ============================================================
   En-tête mobile (≤640px) : ligne 1 = marque + bascule thème ;
   ligne 2 = les 4 liens de menu répartis proprement (fini le
   retour à la ligne bancal).
   ============================================================ */
@media (max-width:640px){
  .entete-nav{ padding:.5rem .9rem; gap:.35rem .5rem; align-items:center; }
  .marque{ order:1; font-size:1.1rem; }
  .bascule-theme{ order:2; margin-left:auto; }
  .entete-nav nav{ order:3; width:100%; margin-left:0;
    justify-content:space-between; gap:.1rem; flex-wrap:nowrap; }
  .entete-nav nav a{ padding:.5rem .3rem; font-size:.88rem; }
}

/* ============================================================
   Thème Budget : axes de lecture + barre de posture.
   L'information est portée par le texte (comptes chiffrés) ; la
   jauge colorée n'est qu'un renfort visuel (RGAA).
   ============================================================ */
.axe-intro{ margin:.2rem 0 1.1rem; }
.axe-bloc{ margin:0 0 1.6rem; }
.axe-bloc + .axe-bloc{ border-top:1px solid var(--lisere); padding-top:1.3rem; }
.axe-titre{ font-family:'Spectral',Georgia,serif; font-size:1.08rem; margin:0 0 .15rem; color:var(--encre); }
.axe-question{ margin:0 0 .75rem; color:var(--encre-douce); font-style:italic; }

.posture{ background:var(--faint); border:1px solid var(--lisere); border-radius:10px;
  padding:.7rem .85rem; margin:0 0 .95rem; }
.posture-vide{ background:var(--faint); border:1px dashed var(--lisere); border-radius:10px;
  padding:.6rem .85rem; margin:0 0 .95rem; color:var(--mute); font-size:.9rem; }
.posture-resume{ margin:0 0 .5rem; display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  align-items:baseline; font-size:.92rem; }
.posture-lab{ white-space:nowrap; }
.posture-lab strong{ font-variant-numeric:tabular-nums; }
.posture-lab-oui{ color:var(--b-pour-fg); }
.posture-lab-non{ color:var(--b-contre-fg); }
.posture-lab-abst{ color:var(--b-abst-fg); }
.posture-total{ color:var(--mute); font-size:.82rem; margin-left:auto; }
.posture-jauge{ display:flex; height:12px; border-radius:6px; overflow:hidden;
  background:var(--b-neutre-bg); }
.posture-jauge span{ display:block; height:100%; }
.jauge-oui{ background:var(--b-pour-fg); }
.jauge-non{ background:var(--b-contre-fg); }
.jauge-abst{ background:var(--b-abst-fg); }

.cmp-axe{ margin:0 0 1.5rem; }
.cmp-posture-paire{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin:.2rem 0 .95rem; }
.cmp-posture{ background:var(--faint); border:1px solid var(--lisere); border-radius:10px; padding:.6rem .7rem; }
.cmp-posture-qui{ font-weight:600; margin:0 0 .4rem; font-size:.9rem; }
.cmp-posture-vide{ display:flex; flex-direction:column; gap:.2rem; }
.posture-none{ color:var(--mute); font-size:.85rem; }
@media (max-width:520px){ .cmp-posture-paire{ grid-template-columns:1fr; } }

/* ============================================================
   Communauté : ampoule « m'a aidé à décider » + classement
   ============================================================ */
.lvv-bulb {
  display:inline-flex; align-items:center; gap:.35rem; margin:.5rem 0 0;
  font:inherit; font-size:.8rem; cursor:pointer;
  background:var(--faint); color:var(--encre-douce);
  border:1px solid var(--lisere); border-radius:999px; padding:.2rem .6rem;
  transition:background .15s, border-color .15s, color .15s;
}
.lvv-bulb:hover { border-color:var(--accent); color:var(--accent); }
.lvv-bulb .lvv-ico { filter:grayscale(1) opacity(.7); transition:filter .15s; }
.lvv-bulb .lvv-n { font-weight:700; font-variant-numeric:tabular-nums; }
.lvv-bulb.has-count .lvv-n::before { content:"· "; color:var(--mute); font-weight:400; }
.lvv-bulb.voted { background:var(--b-abst-bg); color:var(--b-abst-fg); border-color:transparent; }
.lvv-bulb.voted .lvv-ico { filter:none; }
.lvv-bulb.lvv-soon { opacity:.7; cursor:default; }
.lvv-flash { position:absolute; margin-left:.4rem; background:var(--panneau); color:#fff;
  font-size:.72rem; padding:.15rem .5rem; border-radius:6px; white-space:nowrap; }

.lvv-classement { margin-top:.6rem; }
.lvv-vide { color:var(--encre-douce); font-size:.92rem; }
.lvv-rang { list-style:none; counter-reset:lvv; padding:0; margin:0; display:grid; gap:.7rem; }
.lvv-rang li { counter-increment:lvv; background:var(--carte); border:1px solid var(--lisere);
  border-radius:11px; padding:.6rem .8rem .7rem; }
.lvv-rang-tete { display:flex; align-items:baseline; gap:.6rem; }
.lvv-rang-titre { font-weight:600; }
.lvv-rang-titre::before { content:counter(lvv) ". "; color:var(--mute); font-weight:700; }
.lvv-rang-n { margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); white-space:nowrap; }
.lvv-rang-theme { font-size:.8rem; color:var(--encre-douce); margin:.1rem 0 .4rem; }
.lvv-jauge { height:6px; background:var(--faint); border-radius:999px; overflow:hidden; }
.lvv-jauge span { display:block; height:100%; background:var(--accent); border-radius:999px; }

/* Page Communauté */
.communaute-intro { max-width:60ch; color:var(--encre-douce); }
.communaute-bloc { margin-top:2rem; }
.communaute-sous { color:var(--encre-douce); font-size:.92rem; max-width:60ch; margin:.2rem 0 .8rem; }
.communaute-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:.6rem 0 .8rem; }
.communaute-note { color:var(--encre-douce); font-size:.88rem; max-width:60ch; }

/* Aperçu « top votes » sur la page d'accueil */
.accueil-top { margin:1.6rem 0; }
.accueil-top:empty { display:none; }
.accueil-top-tete { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.accueil-top-tete h2 { margin:0; }
.accueil-top-lien { font-size:.9rem; white-space:nowrap; }
.lvv-rang-accueil li { padding:.5rem .7rem .6rem; }
@media (min-width:640px) { .lvv-rang-accueil { grid-template-columns:1fr 1fr; } }

/* Ligne de classement cliquable → page détail du vote */
.lvv-rang-lien { display:block; text-decoration:none; color:inherit; }
.lvv-rang-lien:hover .lvv-rang-titre, .lvv-rang-lien:focus-visible .lvv-rang-titre { color:var(--accent); text-decoration:underline; }

/* Page détail d'un vote (/votes/{slug}/) */
.vote-detail { max-width:72ch; }
.vote-detail-prov { font-size:.85rem; color:var(--encre-douce); margin:0 0 .2rem; }
.vote-detail-res { margin:.5rem 0 0; }
.vote-detail h2 { margin-top:1.9rem; }
.groupes-liste-detail { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.6rem; }
.groupes-liste-detail > li { background:var(--carte); border:1px solid var(--lisere); border-radius:10px; padding:.55rem .7rem; }