/* Atlas électoral — feuille de style unique.
   Thème clair assumé : les teintes des blocs politiques ne franchissent les seuils
   de séparation daltonisme que sur fond clair (validé, cf. README). */

:root{
  --paper:#eef1f4; --sheet:#fbfcfd; --sheet-2:#f3f6f9; --sheet-3:#e7edf3;
  --ink:#0f1418; --ink-2:#4e5862; --ink-3:#87919b;
  --rule:#d9e0e7; --rule-2:#c2ccd6;
  --ghost:#e3e9ef; --ghost-line:#ccd5de;
  --focus:#2a78d6;

  --s1:#cde2fb; --s2:#b7d3f6; --s3:#86b6ef; --s4:#5598e7;
  --s5:#2a78d6; --s6:#1c5cab; --s7:#104281;

  --f-head:"Bitter",Georgia,"Times New Roman",serif;
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
     font-family:var(--f-ui); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
a{color:var(--ink-2)}
a:hover{color:var(--focus)}

.wrap{max-width:1280px; margin:0 auto; padding:24px 22px 64px; display:flex; flex-direction:column; gap:20px}

/* ---------- en-tête ---------- */
.top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 30px; justify-content:space-between;
     border-bottom:2px solid var(--ink); padding-bottom:14px}
.eyebrow{font-family:var(--f-num); font-size:10.5px; font-weight:500; letter-spacing:.13em;
         text-transform:uppercase; color:var(--ink-3); margin:0 0 5px}
.eyebrow a{color:var(--ink-3); text-decoration:none}
.eyebrow a:hover{color:var(--focus)}
h1{font-family:var(--f-head); font-weight:600; font-size:clamp(24px,3.2vw,34px); line-height:1.1;
   margin:0; text-wrap:balance; letter-spacing:-.015em}
.sub{margin:7px 0 0; color:var(--ink-2); max-width:64ch; font-size:14.5px}
.stats{display:flex; gap:24px; flex-shrink:0; flex-wrap:wrap}
.stat{display:flex; flex-direction:column; gap:1px}
.stat .v{font-family:var(--f-num); font-size:25px; font-weight:600; letter-spacing:-.02em; line-height:1.05}
.stat .l{font-size:11px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase}

/* ---------- blocs de surface ---------- */
.card{background:var(--sheet); border:1px solid var(--rule); border-radius:4px}
.card > h2, .cardhead h2{font-family:var(--f-head); font-size:16px; font-weight:600; margin:0; letter-spacing:-.01em}
.cardhead{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:13px 16px 0}
.cardhead .src{font-family:var(--f-num); font-size:10px; color:var(--ink-3); letter-spacing:.05em}

/* ---------- barre de contrôles ---------- */
.controls{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px 20px; padding:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field > label,.glabel{font-family:var(--f-num); font-size:10px; font-weight:500;
      letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
select{font-family:var(--f-ui); font-size:14px; color:var(--ink); background:var(--sheet-2);
       border:1px solid var(--rule-2); border-radius:3px; padding:7px 8px; width:100%}
select:hover{border-color:var(--ink-3)}
optgroup{font-style:normal; font-weight:600}

.chips{display:flex; flex-wrap:wrap; gap:5px}
.chip{font-family:var(--f-ui); font-size:12.5px; padding:4px 9px; border-radius:11px; cursor:pointer;
      background:var(--sheet-2); color:var(--ink-2); border:1px solid var(--rule-2); transition:.14s}
.chip:hover{background:var(--sheet-3)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--sheet); border-color:var(--ink)}

input[type=range]{width:100%; accent-color:var(--s5); margin:1px 0}
.rrow{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-3); gap:8px}
.rrow b{font-family:var(--f-num); font-weight:500; color:var(--ink-2)}
.refnote{font-size:11.5px; line-height:1.4; color:var(--ink-3); margin:2px 0 0}
.refnote b{color:var(--ink-2); font-weight:600}
.refnote code{font-family:var(--f-num); font-size:10.5px; color:#8a5a00}
.checks{display:flex; flex-wrap:wrap; gap:6px 14px}
.checks label{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2); cursor:pointer}
.checks input{accent-color:var(--s5); width:14px; height:14px; margin:0}

/* ---------- frise chronologique ---------- */
.timeline{padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px}
.tlhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.play{display:flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
      border-radius:50%; border:1px solid var(--ink); background:var(--ink); color:var(--sheet);
      cursor:pointer; font-size:13px; transition:.14s}
.play:hover{background:var(--sheet); color:var(--ink)}
.tlnow{display:flex; flex-direction:column; gap:0; min-width:0}
.tlnow b{font-family:var(--f-head); font-size:16px; font-weight:600; letter-spacing:-.01em}
.tlnow span{font-family:var(--f-num); font-size:11px; color:var(--ink-3); letter-spacing:.05em}
.tlspeed{margin-left:auto; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3)}
.tlspeed select{width:auto; padding:4px 6px; font-size:12.5px}

.track{position:relative; height:46px; margin-top:2px}
.track .axis{position:absolute; left:0; right:0; top:22px; height:1px; background:var(--rule-2)}
.tick{position:absolute; top:12px; width:5px; height:20px; padding:0; border:0;
      appearance:none; -webkit-appearance:none; border-radius:2px;
      background:var(--rule-2); cursor:pointer;
      transition:background .14s,height .14s,top .14s,width .14s}
.tick:hover{background:var(--ink-3)}
.tick.on{background:var(--ink); height:34px; top:5px; width:7px}
.tick .lbl{position:absolute; top:-13px; left:50%; transform:translateX(-50%);
           font-family:var(--f-num); font-size:9.5px; color:var(--ink-3); white-space:nowrap; pointer-events:none}
.tick.on .lbl{color:var(--ink); font-weight:600}
.yearrow{display:flex; justify-content:space-between; font-family:var(--f-num); font-size:10px;
         color:var(--ink-3); border-top:1px solid var(--rule); padding-top:6px}

/* ---------- carte ---------- */
.mapbody{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 176px;
         align-items:start; column-gap:4px}
.mapsvg{position:relative; grid-column:1}
.mapbody > .encarts{grid-column:1 / -1}
svg.map{display:block; width:100%; height:auto}

/* Les formes sont mises à l'échelle par transform : sans vector-effect,
   l'épaisseur du trait suivrait le facteur et Paris se retrouverait cerné
   d'un trait énorme, la Lozère d'un trait invisible. */
.dep-fill{stroke:var(--sheet); stroke-width:.6; vector-effect:non-scaling-stroke;
          transition:transform .45s cubic-bezier(.4,0,.2,1), fill .25s}
.dep-ghost{fill:var(--ghost); stroke:var(--ghost-line); stroke-width:.5;
           vector-effect:non-scaling-stroke; pointer-events:none}
.dep-hit{fill:transparent; cursor:pointer}
g.dep.on .dep-fill{stroke:var(--ink); stroke-width:1.4; vector-effect:non-scaling-stroke}
.dep-lab{font-family:var(--f-num); font-size:5.4px; font-weight:500; fill:var(--ink);
         text-anchor:middle; pointer-events:none; paint-order:stroke;
         stroke:rgba(255,255,255,.85); stroke-width:1.4px; vector-effect:non-scaling-stroke}
.idf-frame{fill:none; stroke:var(--ink-3); stroke-width:.7; stroke-dasharray:3 2.5}
.idf-tag{font-family:var(--f-num); font-size:7px; fill:var(--ink-3); letter-spacing:.06em}

/* ---------- encarts ---------- */
.encarts{display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 22px;
         padding:2px 16px 12px; overflow-x:auto}
.inset{flex:0 0 auto; min-width:0}
.inset svg{display:block; width:100%; height:auto}
.inset .cap{display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; padding:0 0 2px 2px}
.inset .cap > *{min-width:0}
.inset .cap b{font-family:var(--f-head); font-size:12px; font-weight:600}
.inset .cap em{font-family:var(--f-num); font-style:normal; font-size:9.5px;
               color:var(--ink-3); letter-spacing:.04em}
/* un carré n'est pas un territoire : le trait tireté le dit */
.om .sansgeo .dep-fill{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 2}
.om-lab{font-family:var(--f-num); font-size:8px; fill:var(--ink-2);
        text-anchor:middle; pointer-events:none}
g.dep.on .om-lab{fill:var(--ink); font-weight:600}

/* ---------- panneau de lecture ---------- */
.readout{position:absolute; bottom:12px; left:12px; width:206px; background:var(--sheet);
         border:1px solid var(--rule-2); border-radius:4px; padding:11px 12px;
         box-shadow:0 6px 20px rgba(15,20,24,.09)}
.readout .rn{font-family:var(--f-head); font-size:14.5px; font-weight:600; margin:0; line-height:1.25}
.readout .rn a{text-decoration:none; color:inherit}
.readout .rn a:hover{color:var(--focus); text-decoration:underline}
.readout .rc{font-family:var(--f-num); font-size:10px; color:var(--ink-3); letter-spacing:.05em}
.readout .rv{font-family:var(--f-num); font-size:23px; font-weight:600; letter-spacing:-.02em; margin:7px 0 1px}
.readout .rl{font-size:11px; color:var(--ink-2); line-height:1.35; margin:0}
.bars{display:flex; gap:2px; margin:10px 0 5px; height:9px}
.bars i{display:block; border-radius:1px}
.blegend{display:flex; flex-wrap:wrap; gap:2px 8px; font-size:10px; color:var(--ink-2)}
.blegend span{display:flex; align-items:center; gap:3px}
.blegend b{width:7px; height:7px; border-radius:1px; display:block}
.blegend em{font-family:var(--f-num); font-style:normal; color:var(--ink-3)}

/* ---------- légende ---------- */
.mapbody > .legend{padding:16px 16px 12px 0; display:flex; flex-direction:column; gap:12px}
.legend .titre{font-family:var(--f-num); font-size:9.5px; letter-spacing:.11em;
               text-transform:uppercase; color:var(--ink-3)}
.scale{display:flex; flex-direction:column; gap:0}
.scale .row{display:grid; grid-template-columns:20px 1fr auto; align-items:center;
            gap:8px; padding:1px 0}
.scale .sw{width:20px; height:15px; border-radius:2px; border:1px solid rgba(15,20,24,.14)}
.scale .tk{font-family:var(--f-num); font-size:10.5px; color:var(--ink-2);
           font-variant-numeric:tabular-nums; white-space:nowrap}
.scale .ct{font-family:var(--f-num); font-size:9.5px; color:var(--ink-3); text-align:right}
.cats{display:flex; flex-direction:column; gap:5px}
.cats .c{display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:8px;
         font-size:12px; color:var(--ink-2)}
.cats .c b{width:20px; height:15px; border-radius:2px; border:1px solid rgba(15,20,24,.14); display:block}
.cats .c em{font-family:var(--f-num); font-style:normal; font-size:9.5px; color:var(--ink-3)}
.legnote{font-size:10.5px; color:var(--ink-3); line-height:1.45; margin:0;
         border-top:1px solid var(--rule); padding-top:10px}

/* ---------- tableaux ---------- */
details.tbl summary{cursor:pointer; padding:12px 16px; font-family:var(--f-num); font-size:10.5px;
      letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); list-style:none}
details.tbl summary::-webkit-details-marker{display:none}
details.tbl summary::before{content:"▸ "; color:var(--ink-3)}
details.tbl[open] summary::before{content:"▾ "}
.tblwrap{overflow-x:auto; border-top:1px solid var(--rule); max-height:520px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:6px 11px; text-align:right; white-space:nowrap; border-bottom:1px solid var(--rule)}
th:first-child,td:first-child,th.l,td.l{text-align:left}
thead th{position:sticky; top:0; background:var(--sheet-2); font-family:var(--f-num); font-weight:500;
         font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2);
         border-bottom:1px solid var(--rule-2); z-index:1}
tbody td{font-family:var(--f-num); font-variant-numeric:tabular-nums; color:var(--ink-2)}
tbody td.l{font-family:var(--f-ui); color:var(--ink)}
tbody tr:hover{background:var(--sheet-2)}
.alerte{color:#8a5a00; cursor:help; font-size:11px; margin-left:4px}
.pill{display:inline-block; padding:1px 6px; border-radius:2px; font-family:var(--f-num); font-size:10.5px; color:#fff}

/* ---------- barres de résultat (pages détail) ---------- */
.results{display:flex; flex-direction:column; gap:7px; padding:14px 16px 16px}
.res{display:grid; grid-template-columns:minmax(120px,190px) 1fr 62px; align-items:center; gap:11px}
.res .n{font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.res .n em{font-family:var(--f-num); font-style:normal; font-size:10.5px; color:var(--ink-3); margin-left:5px}
.res .track2{background:var(--sheet-2); border-radius:2px; height:15px; overflow:hidden}
.res .track2 i{display:block; height:100%; border-radius:2px}
.res .p{font-family:var(--f-num); font-size:13px; text-align:right; font-variant-numeric:tabular-nums}

/* ---------- graphique d'historique ---------- */
.hist{padding:8px 16px 16px}
.hist svg{display:block; width:100%; height:auto; overflow:visible}
.hist .gl{stroke:var(--rule); stroke-width:1}
.hist .ax{font-family:var(--f-num); font-size:9.5px; fill:var(--ink-3)}
.hist .ln{fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.hist .dot{stroke:var(--sheet); stroke-width:1.5}

.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:940px){.grid2{grid-template-columns:1fr}
  .mapbody{grid-template-columns:1fr}
  .mapbody > .legend{grid-column:1; grid-row:auto; padding:12px 16px;
                     border-top:1px solid var(--rule)}
  .cats{flex-direction:row; flex-wrap:wrap; gap:7px 15px}
  .cats .c{display:flex}
  .readout{position:static; width:auto; margin:10px 16px}}

footer{font-size:12px; color:var(--ink-3); line-height:1.6; border-top:1px solid var(--rule); padding-top:14px}
footer p{margin:0 0 6px; max-width:80ch}
footer b{color:var(--ink-2); font-weight:600}
.warn{font-family:var(--f-num); font-size:10.5px; color:#8a5a00; background:#fdf3dc;
      border:1px solid #f0dca6; border-radius:3px; padding:2px 7px; display:inline-block}