/* Mairies : thème clair et sombre (nord), sans ressource externe */
:root {
  --fond: #f7f8fb; --surface: #ffffff; --surface-2: #eef1f6; --texte: #2e3440; --discret: #5b6475; --bord: #d8dee9;
  --accent: #3b6ea8; --accent-doux: #e3ecf7; --ok: #4f8a3a; --alerte: #b5502e;
  --gauche: #c0392b; --ecolo: #3e8e41; --centre: #e0a020; --droite: #2f5f9e; --droite-souv: #5a4f9e; --extdroite: #2b2d42; --divers: #8a8f9c; --nc: #c4c9d4;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #2e3440; --surface: #3b4252; --surface-2: #434c5e; --texte: #eceff4; --discret: #b8c0cf; --bord: #4c566a;
    --accent: #88c0d0; --accent-doux: #3d4f63; --ok: #a3be8c; --alerte: #d08770;
    --gauche: #e06c66; --ecolo: #8fc17a; --centre: #ebcb8b; --droite: #81a1c1; --droite-souv: #b48ead; --extdroite: #9aa3b5; --divers: #a0a7b5; --nc: #5e6779;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fond: #2e3440; --surface: #3b4252; --surface-2: #434c5e; --texte: #eceff4; --discret: #b8c0cf; --bord: #4c566a;
  --accent: #88c0d0; --accent-doux: #3d4f63; --ok: #a3be8c; --alerte: #d08770;
  --gauche: #e06c66; --ecolo: #8fc17a; --centre: #ebcb8b; --droite: #81a1c1; --droite-souv: #b48ead; --extdroite: #9aa3b5; --divers: #a0a7b5; --nc: #5e6779;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .5rem; line-height: 1.2; }
h2 { font-size: 1.35rem; margin: 2rem 0 .6rem; }
h3 { font-size: 1.08rem; margin: 1.4rem 0 .4rem; }
.discret { color: var(--discret); font-size: .92rem; }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 3rem; }
.haut { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 10; }
.logo { font-weight: 700; text-decoration: none; color: var(--texte); font-size: 1.1rem; }
.haut nav { display: flex; gap: 14px; flex: 1; flex-wrap: wrap; }
.haut nav a { text-decoration: none; }
.bouton-discret { background: none; border: 1px solid var(--bord); color: var(--texte); border-radius: 6px; padding: 2px 10px; font-size: 1.1rem; cursor: pointer; }
.intro { padding: 1.5rem 0 .5rem; }
.recherche label { font-weight: 600; display: block; margin: 1rem 0 .3rem; }
.champ { position: relative; max-width: 560px; }
#q { width: 100%; font-size: 1.05rem; padding: 10px 12px; border: 1px solid var(--bord); border-radius: 8px; background: var(--surface); color: var(--texte); }
#q:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-height: 320px; overflow-y: auto; }
#suggestions li { padding: 6px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
#suggestions li[aria-selected="true"], #suggestions li:hover { background: var(--accent-doux); }
#suggestions .code { color: var(--discret); font-size: .85rem; white-space: nowrap; }
section#commune { background: var(--surface); border: 1px solid var(--bord); border-radius: 12px; padding: 16px 18px; margin-top: 1rem; }
.entete-commune { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.entete-commune h2 { margin: 0; font-size: 1.6rem; }
.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 1rem 0; }
.carte { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.carte .titre { font-size: .82rem; color: var(--discret); text-transform: uppercase; letter-spacing: .03em; }
.carte .valeur { font-size: 1.15rem; font-weight: 600; }
.pastille { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; margin-right: .3em; }
.hemicycle { display: block; width: 100%; max-width: 420px; height: auto; }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: .4rem 0; font-size: .9rem; padding: 0; list-style: none; }
.table-scroll { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.gagnante td { font-weight: 600; }
.barre { height: .55em; background: var(--accent); border-radius: 3px; display: inline-block; vertical-align: middle; }
.onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0; }
.onglets button { border: 1px solid var(--bord); background: var(--surface); color: var(--texte); border-radius: 999px; padding: 3px 12px; cursor: pointer; font: inherit; font-size: .9rem; }
.onglets button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.graphe svg { width: 100%; height: auto; display: block; }
.graphe text { fill: var(--discret); font-size: 11px; }
.filtres { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: .6rem 0; }
.filtres select { font: inherit; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); max-width: 100%; }
.repartition { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin: .4rem 0; }
.repartition span { display: block; height: 100%; }
.fichiers { list-style: none; padding: 0; display: grid; gap: 8px; }
.fichiers li { background: var(--surface); border: 1px solid var(--bord); border-radius: 8px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.fichiers a { font-weight: 600; word-break: break-all; }
.methode li { margin: .3rem 0; }
details summary { cursor: pointer; color: var(--accent); margin: .5rem 0; }
.bas { text-align: center; padding: 1.5rem 16px; color: var(--discret); border-top: 1px solid var(--bord); }
@media (max-width: 600px) {
  .haut { gap: 10px; }
  .haut nav { gap: 10px; font-size: .92rem; }
  section#commune { padding: 12px; }
  th, td { padding: 4px 5px; }
}

.barres { display: grid; gap: 8px; margin: .6rem 0; }
.ligne-barre { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; gap: 4px 10px; align-items: center; font-size: .92rem; }
.ligne-barre .piste { background: var(--surface-2); border-radius: 4px; height: 18px; overflow: hidden; }
.ligne-barre .plein { display: block; height: 100%; border-radius: 4px; }
.ligne-barre .chiffre { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ligne-barre { grid-template-columns: 1fr auto; }
  .ligne-barre .piste { grid-column: 1 / -1; grid-row: 2; }
}