:root {
  --bg: #0f172a;
  --panel: #111827;
  --panel-2: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: #334155;
  --selection: #f8fafc;
  --gauche: #16a34a;
  --centre: #f59e0b;
  --droite: #2563eb;
  --extreme-droite: #7c3aed;
  --extreme-gauche: #b91c1c;
  --divers: #64748b;
  --locale: #475569;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--text); }
body { overflow:hidden; }
.app { display:grid; grid-template-columns:430px 1fr; height:100vh; overflow:hidden; }
.sidebar { background:rgba(17,24,39,.98); border-right:1px solid var(--border); padding:20px; overflow-y:auto; overflow-x:hidden; height:100vh; }
.main { display:grid; grid-template-rows:auto 1fr; min-width:0; height:100vh; overflow:hidden; }
#map { width:100%; height:100%; min-height:0; }
h1 { font-size:1.4rem; margin:0 0 8px; }
h2 { font-size:1rem; margin:22px 0 10px; }
p { margin:0 0 10px; line-height:1.45; color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.card { background:var(--panel-2); border:1px solid var(--border); border-radius:14px; padding:12px 14px; }
.card .k { color:var(--muted); font-size:.82rem; margin-bottom:6px; }
.card .v { font-size:1.1rem; font-weight:700; }
.legend { display:flex; flex-wrap:wrap; gap:10px 14px; margin:14px 0 16px; color:var(--muted); font-size:.86rem; }
.dot { width:12px; height:12px; border-radius:999px; display:inline-block; vertical-align:middle; margin-right:6px; }
.controls { display:grid; gap:10px; }
.controls select, .controls input { width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--border); background:#0b1220; color:var(--text); outline:none; }
.table-wrap { border:1px solid var(--border); border-radius:14px; overflow:auto; background:rgba(15,23,42,.65); }
table { width:100%; border-collapse:collapse; }
thead th { position:sticky; top:0; background:#0b1220; z-index:1; }
th, td { text-align:left; padding:10px 5px; border-bottom:1px solid rgba(51,65,85,.55); vertical-align:top; font-size:.7rem; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:rgba(148,163,184,.08); }
tbody tr.is-active { background:rgba(248,250,252,.08); }
.small { font-size:.78rem; }
.muted { color:var(--muted); }
.note { color:var(--muted); font-size:.88rem; line-height:1.45; }
.topbar { padding:16px 20px; border-bottom:1px solid var(--border); background:rgba(15,23,42,.95); backdrop-filter:blur(8px); }
.topbar-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.5rem; padding:5px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(148,163,184,.12); color:#fff; }
.popup-table { width:100%; border-collapse:collapse; margin-top:10px; }
.popup-table td, .popup-table th { border-bottom:1px solid rgba(148,163,184,.2); padding:6px 0; text-align:left; font-size:.84rem; }
.popup-table td:last-child, .popup-table th:last-child { text-align:right; }
.popup-table thead th { position:static; background:transparent; }

.leaflet-popup-content-wrapper {
  max-width: 720px;
}

.leaflet-popup-content {
  margin: 14px 16px;
  width: 640px !important;
  max-width: calc(100vw - 80px);
}

.election-popup {
  width: 100%;
  min-width: 0;
}

.election-popup .popup-head,
.election-popup .popup-subhead,
.election-popup .popup-badges {
  display: block;
}

.election-popup .popup-head {
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.25;
}

.election-popup .popup-subhead {
  margin-bottom: 8px;
  color: var(--muted);
}

.election-popup .popup-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.election-popup .summary-table,
.election-popup .results-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.election-popup .summary-table td,
.election-popup .results-table th,
.election-popup .results-table td {
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  vertical-align: top;
}

.election-popup .summary-table td:first-child {
  width: 34%;
  color: var(--muted);
  padding-right: 12px;
}

.election-popup .summary-table td:last-child {
  text-align: right;
}

.election-popup .results-table th,
.election-popup .results-table td {
  padding: 8px 6px;
}

.election-popup .results-table th:nth-child(1),
.election-popup .results-table td:nth-child(1) {
  width: 38%;
}

.election-popup .results-table th:nth-child(2),
.election-popup .results-table td:nth-child(2) {
  width: 18%;
}

.election-popup .results-table th:nth-child(3),
.election-popup .results-table td:nth-child(3) {
  width: 14%;
}

.election-popup .results-table th:nth-child(4),
.election-popup .results-table td:nth-child(4) {
  width: 14%;
  text-align: right;
  white-space: nowrap;
}

.election-popup .results-table th:nth-child(5),
.election-popup .results-table td:nth-child(5) {
  width: 16%;
  text-align: right;
  white-space: nowrap;
}

.election-popup .pill {
  max-width: 100%;
  white-space: nowrap;
}

.leaflet-popup-content ::selection {
  background: transparent;
  color: inherit;
}
@media (max-width: 980px) {
  body { overflow:auto; }
  .app { grid-template-columns:1fr; grid-template-rows:auto 70vh; height:auto; min-height:100vh; }
  .sidebar, .main { height:auto; }
  .sidebar { border-right:none; border-bottom:1px solid var(--border); }
}


@media (max-width: 640px) {
  .leaflet-popup-content {
    width: calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px);
    margin: 10px 12px;
  }

  .election-popup .summary-table td:first-child {
    width: 40%;
  }

  .election-popup .results-table th,
  .election-popup .results-table td {
    font-size: .78rem;
    padding: 6px 4px;
  }
}