/* Le pupitre électoral — design system du simulateur.
 *
 * Trois règles, pas un thème :
 *   1. la couleur appartient à la donnée : le chrome vit en encre et papier,
 *      les teintes de partis sont réservées aux chiffres électoraux ;
 *   2. tout nombre est en mono tabulaire ;
 *   3. les deux thèmes sont des jetons, pas deux feuilles de style — le
 *      sombre n'est pas une inversion, c'est une seconde impression.
 */

:root{
  --papier:#F4F6F4;
  --surface:#FFFFFF;
  --encre:#101823;
  --texte:#2B3644;
  --sourdine:#5D6B7A;
  --filet:#D9DEE2;
  --filet-fort:#101823;
  --creux:#EBEFF1;
  --alerte:#9A5B00;
  --alerte-fond:#FBF3E2;
  --erreur:#8C1D26;
  --erreur-fond:#FBEAEC;
  --caq:#1E7FBF; --pcq:#7C4DBF; --pq:#27408B; --qs:#E06A1E; --plq:#C22F38;
  --cq-fond:#D5DDE3; --cq-trait:#FFFFFF;
  --disp:"New York",ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --corps:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --chiffres:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
}
@media(prefers-color-scheme:dark){:root{
  --papier:#0D1219; --surface:#151C26; --encre:#EEF2F5; --texte:#C4CDD6;
  --sourdine:#84939F; --filet:#26303C; --filet-fort:#EEF2F5; --creux:#1B2430;
  --alerte:#E0A94E; --alerte-fond:#241D0E;
  --erreur:#E8909A; --erreur-fond:#2A151A;
  --caq:#4E9FD4; --pcq:#9B77D6; --pq:#6079C6; --qs:#EE8548; --plq:#DC5560;
  --cq-fond:#2B3848; --cq-trait:#151C26;
}}
:root[data-theme="dark"]{
  --papier:#0D1219; --surface:#151C26; --encre:#EEF2F5; --texte:#C4CDD6;
  --sourdine:#84939F; --filet:#26303C; --filet-fort:#EEF2F5; --creux:#1B2430;
  --alerte:#E0A94E; --alerte-fond:#241D0E;
  --erreur:#E8909A; --erreur-fond:#2A151A;
  --caq:#4E9FD4; --pcq:#9B77D6; --pq:#6079C6; --qs:#EE8548; --plq:#DC5560;
  --cq-fond:#2B3848; --cq-trait:#151C26;
}
:root[data-theme="light"]{
  --papier:#F4F6F4; --surface:#FFFFFF; --encre:#101823; --texte:#2B3644;
  --sourdine:#5D6B7A; --filet:#D9DEE2; --filet-fort:#101823; --creux:#EBEFF1;
  --alerte:#9A5B00; --alerte-fond:#FBF3E2;
  --erreur:#8C1D26; --erreur-fond:#FBEAEC;
  --caq:#1E7FBF; --pcq:#7C4DBF; --pq:#27408B; --qs:#E06A1E; --plq:#C22F38;
  --cq-fond:#D5DDE3; --cq-trait:#FFFFFF;
}

*{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--texte);font-family:var(--corps);
 font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{max-width:1160px;margin:0 auto;padding:0 24px 80px}
a{color:inherit}
:focus-visible{outline:2px solid var(--encre);outline-offset:2px}
[hidden]{display:none!important}

/* ---- En-tête commun ---- */
.entete{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
 flex-wrap:wrap;padding:18px 0;border-bottom:1px solid var(--filet)}
.marque{font-family:var(--disp);font-size:21px;font-weight:600;color:var(--encre);
 text-decoration:none;letter-spacing:-.01em}
.marque em{font-style:italic;font-weight:500}
.entete nav{display:flex;gap:20px;align-items:baseline;font-size:14.5px}
.entete nav a{color:var(--sourdine);text-decoration:none}
.entete nav a:hover{color:var(--encre)}
.bouton-theme{font-family:var(--chiffres);font-size:12px;letter-spacing:.06em;
 background:none;border:1px solid var(--filet);color:var(--texte);padding:3px 9px;cursor:pointer}
.bouton-theme:hover{border-color:var(--encre);color:var(--encre)}

/* ---- Manchette de page ---- */
.manchette{padding:44px 0 8px}
.sur-titre{font-family:var(--chiffres);font-size:12.5px;letter-spacing:.13em;
 text-transform:uppercase;color:var(--sourdine);margin:0 0 12px}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(32px,5.5vw,54px);line-height:1.05;
 letter-spacing:-.015em;margin:0 0 14px;color:var(--encre);text-wrap:balance}
h1 em{font-style:italic;font-weight:500}
.lede{max-width:62ch;font-size:18px;line-height:1.6;margin:0;color:var(--texte)}
.lede b{color:var(--encre)}

/* ---- Sections et titres ---- */
section{margin-top:56px}
.sec-tete{border-top:2px solid var(--filet-fort);padding-top:14px;margin-bottom:20px;
 display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-tete h2{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--encre);margin:0}
.sec-tete .ou,.bloc-tete .ou{font-family:var(--chiffres);font-size:12px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--sourdine)}

/* ---- Barre des sièges ---- */
.sieges-barre{position:relative;height:52px}
.sb-piste{display:flex;height:100%;overflow:hidden}
.sb-piste .bloc{display:flex;align-items:center;justify-content:center;color:#fff;
 font-family:var(--chiffres);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;
 min-width:0;overflow:hidden;transition:flex-grow .5s cubic-bezier(.2,.7,.2,1)}
.sb-piste .bloc small{font-size:11.5px;font-weight:400;letter-spacing:.06em;margin-left:6px;opacity:.85}
.majorite{position:absolute;top:-9px;bottom:-9px;width:0;border-left:2px dashed var(--encre);pointer-events:none}
.majorite span{position:absolute;top:-20px;left:7px;font-family:var(--chiffres);font-size:11.5px;
 letter-spacing:.09em;text-transform:uppercase;color:var(--encre);white-space:nowrap}
.sb-leg{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:26px;font-family:var(--chiffres);
 font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--sourdine)}
.sb-leg b{color:var(--encre)}
.sb-leg i{display:inline-block;width:10px;height:10px;margin-right:6px}
@media(prefers-reduced-motion:reduce){.sb-piste .bloc{transition:none}}

/* ---- Cartes et formulaires ---- */
.carte{background:var(--surface);border:1px solid var(--filet);padding:22px 24px}
.carte-etroite{max-width:460px;margin:48px auto 0}
.carte h2{font-family:var(--disp);font-size:24px;font-weight:600;color:var(--encre);margin:0 0 6px}
.carte .sous{font-size:14.5px;color:var(--sourdine);margin:0 0 18px;line-height:1.6}
.champ{margin-bottom:14px}
.champ label{display:block;font-family:var(--chiffres);font-size:11.5px;letter-spacing:.1em;
 text-transform:uppercase;color:var(--sourdine);margin-bottom:5px}
.champ input,.champ select{width:100%;font-family:var(--corps);font-size:16px;color:var(--encre);
 background:var(--papier);border:1px solid var(--filet);padding:10px 12px}
.champ input:focus,.champ select:focus{outline:none;border-color:var(--encre)}
/* La case à cocher d'un formulaire : le texte est la légende, la case garde
 * sa taille — le width:100% des champs ne s'applique pas à elle. */
.champ-case{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--texte)}
.champ-case input[type=checkbox]{width:auto;margin:0;accent-color:var(--encre)}
.bouton{display:inline-block;font-family:var(--corps);font-size:15px;font-weight:600;
 background:none;border:1px solid var(--encre);color:var(--encre);padding:9px 18px;cursor:pointer;
 text-decoration:none}
.bouton:hover{background:var(--encre);color:var(--papier)}
.bouton:disabled{opacity:.5;cursor:progress}
.bouton-plein{display:inline-block;font-family:var(--corps);font-size:15px;font-weight:600;
 background:var(--encre);color:var(--papier);border:1px solid var(--encre);padding:11px 22px;
 cursor:pointer;text-decoration:none}
.bouton-plein:hover{opacity:.88}
.bouton-plein:disabled{opacity:.5;cursor:progress}
.bouton-discret{font-family:var(--corps);font-size:14px;background:none;border:none;
 color:var(--sourdine);text-decoration:underline;cursor:pointer;padding:0}

/* L'appel « S'abonner » de l'en-tête : un vrai bouton, taillé pour la nav. */
.entete nav .nav-abonner{font-size:14px;padding:8px 16px;color:var(--papier)}
.entete nav .nav-abonner:hover{color:var(--papier)}
.entete nav .nav-retour{font-weight:600}
.bouton-discret:hover{color:var(--encre)}
.separateur{display:flex;align-items:center;gap:12px;margin:20px 0;
 font-family:var(--chiffres);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sourdine)}
.separateur::before,.separateur::after{content:"";flex:1;border-top:1px solid var(--filet)}

/* ---- Messages ---- */
.message{font-size:14.5px;line-height:1.6;padding:10px 14px;margin:14px 0 0;border:1px solid var(--filet)}
.message.calme{background:var(--creux);color:var(--texte)}
.message.alerte{background:var(--alerte-fond);border-color:var(--alerte);color:var(--alerte)}
.message.erreur{background:var(--erreur-fond);border-color:var(--erreur);color:var(--erreur)}
.message b{color:inherit}

/* ---- Fiches et données ---- */
.etiquette{font-family:var(--chiffres);font-size:11.5px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--sourdine);margin:0 0 10px}
.donnee{font-family:var(--chiffres);font-variant-numeric:tabular-nums;color:var(--encre)}
.pastille{display:inline-block;font-family:var(--chiffres);font-size:11.5px;letter-spacing:.06em;
 text-transform:uppercase;border:1px solid var(--filet);color:var(--sourdine);padding:2px 8px}
.pastille.plein{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.rangee{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 padding:10px 0;border-bottom:1px solid var(--filet);font-size:15px}
.rangee:last-child{border-bottom:0}
.rangee .cle{color:var(--sourdine)}
.rangee .val{color:var(--encre);text-align:right}

/* ---- Offre d'abonnement ---- */
.paywall .prix{font-family:var(--disp);font-size:38px;font-weight:600;color:var(--encre);margin:2px 0 4px}
.paywall .prix small{font-family:var(--chiffres);font-size:13.5px;font-weight:400;color:var(--sourdine)}
.paywall ul{list-style:none;margin:0 0 18px;padding:0;font-size:14.5px}
.paywall li{padding:7px 0;border-bottom:1px solid var(--filet)}
.paywall li:last-child{border-bottom:0}
.paywall li b{color:var(--encre)}
.paywall .apres{font-family:var(--chiffres);font-size:12px;color:var(--sourdine);margin:10px 0 0;line-height:1.7}

/* ---- Cartes géographiques ---- */
.ratio{position:relative;width:100%}
.ratio svg{position:absolute;top:0;left:0;width:100%;height:100%}

/* La carte du Québec : chrome pur — la couleur reste réservée à la donnée.
 * Trois vues régionales en cartes ; les jetons --cq-* donnent aux tracés un
 * vrai contraste sur les deux thèmes (le creux sur papier était illisible en
 * clair). */
.carte-quebec{margin-top:18px;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.cq-vue.pleine{grid-column:1/-1}
.cq-vue{background:var(--surface);border:1px solid var(--filet);padding:14px 14px 8px}
.cq-vue svg{width:100%;display:block}
.cq-vue path{fill:var(--cq-fond);stroke:var(--cq-trait);stroke-width:1.4;cursor:pointer;
 transition:fill .1s ease}
.cq-vue a:hover path,.cq-vue a:focus-visible path{fill:var(--encre)}
.cq-vue a:focus-visible{outline:none}
.cq-vue.muette path{cursor:default;pointer-events:none}

/* La barre des sièges flottante : la même barre, fixée au haut de l'écran
   dès qu'on défile sous l'originale. */
.etat-flottant{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--papier);
 border-bottom:2px solid var(--encre);padding:8px 16px 6px;
 box-shadow:0 3px 12px rgba(0,0,0,.12)}
.etat-flottant .sieges-barre.compacte .sb-piste{height:30px}
.etat-flottant .sb-leg{margin-top:4px;font-size:13px}

/* L'appel IA du pied de page : une voix au-dessus des mentions légales. */
.pied .pied-appel{font-size:15px;color:var(--texte);margin:0 0 10px}
.pied .pied-appel a{color:var(--encre);font-weight:600}

/* La liste des invitations (page compte, administration). */
#i_liste table{width:100%;border-collapse:collapse;font-size:14px;margin-top:14px}
#i_liste th{font-family:var(--disp);text-align:left;font-weight:600;color:var(--encre);
 border-bottom:1.5px solid var(--encre);padding:5px 8px}
#i_liste td{padding:6px 8px;border-bottom:1px solid var(--filet)}

/* Le tableau des courses serrées (abonnés). */
.courses-tableau{overflow-x:auto}
.courses-tableau table{width:100%;border-collapse:collapse;font-size:14.5px}
.courses-tableau th{font-family:var(--disp);text-align:left;font-weight:600;color:var(--encre);
 border-bottom:1.5px solid var(--encre);padding:6px 10px;white-space:nowrap}
.courses-tableau td{padding:7px 10px;border-bottom:1px solid var(--filet);white-space:nowrap}
.courses-tableau td:last-child{text-align:right}
.courses-tableau a{color:var(--encre);font-weight:600}
.courses-tableau .cl{display:inline-block;width:10px;height:10px;border-radius:2px;
 margin-right:6px;vertical-align:baseline}
.cq-nom{font-family:var(--chiffres);font-size:12.5px;color:var(--encre);
 margin:8px 0 4px;min-height:1.4em;line-height:1.4}

/* La carte des sections : ici la couleur EST la donnée. */
.carte-sections{position:relative;margin-top:6px;background:var(--surface);
 border:1px solid var(--filet)}
.carte-sections .sv{stroke:var(--surface);stroke-width:1;cursor:pointer}
.carte-sections .sv.sel{stroke:var(--encre);stroke-width:3}
.carte-sections .sec-out{fill:none;stroke:var(--encre);stroke-width:1.9;opacity:.5;pointer-events:none}
.carte-sections .frontiere{fill:none;stroke:var(--sourdine);stroke-width:2;pointer-events:none}
.carte-sections .route{fill:none;stroke:var(--sourdine);stroke-width:1.1;opacity:.5;pointer-events:none}
.carte-sections .route.auto{stroke-width:1.8;opacity:.7}
.carte-sections .rlab{font-family:var(--chiffres);font-size:12.5px;fill:var(--sourdine);
 paint-order:stroke;stroke:var(--surface);stroke-width:2.8;pointer-events:none}
.carte-sections .slab{font-family:var(--disp);font-size:22px;font-weight:700;fill:var(--encre);
 text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:6;opacity:.55;pointer-events:none}
.carte-sections .nlab{font-family:var(--chiffres);font-size:9px;font-weight:600;fill:var(--encre);
 text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:2.4;opacity:.8;pointer-events:none}
.loupe{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:6px}
.loupe button{width:34px;height:34px;font-size:17px;font-family:var(--chiffres);
 background:var(--surface);border:1px solid var(--filet-fort);color:var(--encre);cursor:pointer}
.loupe button:hover{background:var(--encre);color:var(--papier)}

/* ---- Curseurs ---- */
.prov-curseurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 gap:10px 26px;margin-top:28px}
.curseur{margin-bottom:16px}
.c-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px}
.c-nom{font-family:var(--chiffres);font-size:13.5px;font-weight:600;color:var(--encre)}
.c-nom i{display:inline-block;width:10px;height:10px;margin-right:7px}
.c-val{font-size:12px;color:var(--sourdine)}
.curseur input[type=range]{width:100%;margin:0}
.c-somme{font-family:var(--chiffres);font-size:12px;color:var(--sourdine);margin:12px 0 0;line-height:1.6}

/* ---- Résultat projeté et fiche de section ---- */
.res-ligne{display:flex;align-items:center;gap:10px;padding:6px 0}
.res-nom{font-family:var(--chiffres);font-size:13.5px;font-weight:600;color:var(--encre);width:52px}
.res-nom i{display:inline-block;width:10px;height:10px;margin-right:6px}
.res-barre{flex:1;height:10px;background:var(--creux);overflow:hidden}
.res-barre span{display:block;height:100%}
.res-mot{font-size:14.5px;margin:12px 0 0;line-height:1.6}
.fiche-section{margin-top:18px;border-top:1px solid var(--filet);padding-top:14px}
.fiche-section .f-tete{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fiche-section h3{font-family:var(--disp);font-size:19px;font-weight:600;color:var(--encre);margin:0}
.fiche-section table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px}
.fiche-section th{font-family:var(--chiffres);font-size:11px;letter-spacing:.09em;
 text-transform:uppercase;color:var(--sourdine);text-align:right;font-weight:400;
 padding:4px 0;border-bottom:1px solid var(--filet)}
.fiche-section th:first-child,.fiche-section td:first-child{text-align:left}
.fiche-section td{padding:6px 0;border-bottom:1px solid var(--filet);text-align:right;
 font-family:var(--chiffres);font-variant-numeric:tabular-nums}
.fiche-section td .cl{display:inline-block;width:10px;height:10px;margin-right:7px}

/* ---- Explorer les circonscriptions (abonnés) ----
 * Recherche, classement par parti, courses à trois ou quatre : trois blocs
 * empilés dans une section, recalculés localement à chaque mouvement de
 * curseur — même mécanique que le reste du simulateur. */
.explorer-bloc{margin-top:32px}
.explorer-bloc:first-child{margin-top:0}
.bloc-tete{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
 flex-wrap:wrap;margin-top:18px}
.bloc-titre{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--encre);margin:0}
#explorer_suggestions{margin-top:8px}
#explorer_suggestions a{display:block;padding:7px 0;border-bottom:1px solid var(--filet);
 color:var(--encre);text-decoration:none;font-size:15px}
#explorer_suggestions a:last-child{border-bottom:0}
#explorer_suggestions a:hover,#explorer_suggestions a:focus-visible{color:var(--sourdine)}
.partis-boutons{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 14px}
.parti-bouton{display:inline-flex;align-items:center;gap:7px;font-family:var(--chiffres);
 font-size:13px;font-weight:600;background:var(--surface);border:1px solid var(--filet);
 color:var(--texte);padding:7px 14px;cursor:pointer}
.parti-bouton i{display:inline-block;width:10px;height:10px}
.parti-bouton:hover{border-color:var(--encre)}
.parti-bouton.actif{background:var(--encre);border-color:var(--encre);color:var(--papier)}

/* ---- Grilles ---- */
.deux-colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;align-items:start}

/* ---- Pied ---- */
.pied{margin-top:72px;border-top:1px solid var(--filet);padding-top:14px;
 font-family:var(--chiffres);font-size:12px;color:var(--sourdine);line-height:1.8;max-width:90ch}

/* ---- Atelier ---- */
.val.mono{font-family:var(--chiffres);font-variant-numeric:tabular-nums;font-size:13px}
.tableau-defilant{overflow-x:auto;margin-top:6px}
.tableau-registre{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.tableau-registre th{font-family:var(--chiffres);font-size:11px;letter-spacing:.09em;
 text-transform:uppercase;color:var(--sourdine);text-align:left;font-weight:400;
 padding:6px 10px 6px 0;border-bottom:1px solid var(--filet)}
.tableau-registre td{padding:8px 10px 8px 0;border-bottom:1px solid var(--filet);
 vertical-align:baseline;line-height:1.5}
.tableau-registre td.chiffre{font-family:var(--chiffres);font-variant-numeric:tabular-nums;
 text-align:right}
.tableau-registre th:nth-child(4),.tableau-registre th:nth-child(5){text-align:right}
.tableau-registre tr.retire td{color:var(--sourdine)}
.tableau-registre tr.retire b{color:var(--sourdine);text-decoration:line-through}
.bloc-parts{margin-top:16px}
.grille-parts{display:grid;grid-template-columns:repeat(5,minmax(70px,1fr));gap:10px}
.grille-parts .champ{margin-bottom:0}
.somme-bloc{font-family:var(--chiffres);font-size:12px;color:var(--sourdine);margin:6px 0 0}
details summary{cursor:pointer;font-size:14.5px;color:var(--sourdine);margin-top:14px}

/* ---- Salle d'attente (atelier) ---- */
.proposition {
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 12px 14px;
  margin-top: 12px;
}
.proposition + .proposition { margin-top: 10px; }