:root {
  --fond: #f4f5f9; --carte: #fff; --encre: #161a26; --doux: #667085; --trait: #e4e7ee;
  --accent: #2b4acb; --accent-doux: #eaf0ff; --rayon: 12px;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--encre); font-size: 14px; display: flex; flex-direction: column; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--doux); }

header { display: flex; align-items: center; gap: 20px; padding: 10px 18px; background: var(--carte);
  border-bottom: 1px solid var(--trait); z-index: 5; }
.logo { font-weight: 700; font-size: 16px; color: var(--encre); display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 20px; height: 20px; border-radius: 6px; background: conic-gradient(from 210deg, #e0566f, #f0a81c, #3b82c4, #1f2d5c, #e0566f); }
.search { position: relative; flex: 1; max-width: 640px; }
.search input { width: 100%; padding: 9px 14px; border: 1px solid var(--trait); border-radius: 10px; font-size: 14px;
  background: var(--fond); outline: none; }
.search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px var(--accent-doux); }
#suggestions { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 12px 32px rgba(20,25,50,.14);
  max-height: 420px; overflow: auto; z-index: 20; }
#suggestions li { padding: 8px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
#suggestions li:hover, #suggestions li.actif { background: var(--accent-doux); }
#suggestions small { color: var(--doux); white-space: nowrap; }
#meta { font-size: 12px; margin-left: auto; white-space: nowrap; }

main { flex: 1; display: flex; min-height: 0; }
#panel { width: 500px; min-width: 380px; overflow-y: auto; padding: 16px 18px 40px; background: var(--fond);
  border-right: 1px solid var(--trait); }
#carte-zone { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; }

#fil { font-size: 12.5px; color: var(--doux); display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
#fil span.sep { opacity: .5; }
#titre h1 { font-size: 24px; margin: 6px 0 2px; letter-spacing: -.01em; line-height: 1.15; }
#titre .niveau { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 600; }
#kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.kpi { background: var(--carte); border: 1px solid var(--trait); border-radius: 10px; padding: 9px 11px; }
.kpi b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 11.5px; color: var(--doux); }

#tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--trait); margin-bottom: 14px; position: sticky; top: -16px;
  background: var(--fond); padding-top: 6px; z-index: 3; overflow-x: auto; }
#tabs button { border: 0; background: none; padding: 8px 7px; font: inherit; font-size: 13px; color: var(--doux); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; }
#tabs button.actif { color: var(--encre); font-weight: 600; border-bottom-color: var(--accent); }

.bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 14px; margin-bottom: 12px; }
.bloc h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); font-weight: 600;
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bloc h3 small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.source { font-size: 11.5px; color: var(--doux); margin-top: 8px; }
.vide { color: var(--doux); padding: 8px 0; }
.erreur { color: #a4262c; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; margin-bottom: 4px; }
.stats div b { font-variant-numeric: tabular-nums; }
.stats div span { display: block; font-size: 11.5px; color: var(--doux); }

.res { width: 100%; border-collapse: collapse; }
.res tr { cursor: pointer; }
.res tr:hover td { background: #f7f8fc; }
.res tr.actif td { background: var(--accent-doux); }
.res td { padding: 6px 4px; border-top: 1px solid var(--trait); vertical-align: middle; }
.res td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res .nom { font-weight: 500; }
.res .nu { font-size: 11px; color: var(--doux); }
.barre { height: 6px; border-radius: 3px; background: #eef0f5; margin-top: 4px; overflow: hidden; }
.barre i { display: block; height: 100%; border-radius: 3px; }
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: none; }
.boutons { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.btn { border: 1px solid var(--trait); background: #fff; border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.btn:hover { border-color: var(--accent); }
.btn.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
select, .champ { font: inherit; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; background: #fff; max-width: 100%; }

.elu { display: flex; gap: 10px; padding: 7px 0; border-top: 1px solid var(--trait); align-items: baseline; }
.elu:first-of-type { border-top: 0; }
.elu .qui { flex: 1; min-width: 0; }
.elu .qui b { font-weight: 600; }
.elu .qui small { display: block; color: var(--doux); font-size: 12px; }
.elu .cote { font-size: 12px; color: var(--doux); text-align: right; white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 20px; color: #fff; vertical-align: 1px; margin-left: 4px; }
.plus { margin-top: 8px; }

.liste-liens { display: flex; flex-wrap: wrap; gap: 6px; }
.liste-liens a { background: var(--fond); border: 1px solid var(--trait); border-radius: 20px; padding: 3px 10px; font-size: 12.5px; color: var(--encre); }
.liste-liens a:hover { border-color: var(--accent); text-decoration: none; }
.prog { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--trait); gap: 10px; }
.prog:first-of-type { border-top: 0; }
details summary { cursor: pointer; }
table.simple { width: 100%; border-collapse: collapse; font-size: 13px; }
table.simple th { text-align: left; font-weight: 500; color: var(--doux); font-size: 12px; padding: 4px; }
table.simple td { padding: 5px 4px; border-top: 1px solid var(--trait); }
table.simple td.num, table.simple th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.simple tr.clic { cursor: pointer; }
table.simple tr.clic:hover td { background: #f7f8fc; }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filtres input { flex: 1; min-width: 140px; }
.ent { padding: 8px 0; border-top: 1px solid var(--trait); }
.ent b { font-weight: 600; }
.ent small { display: block; color: var(--doux); font-size: 12px; }
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
canvas { max-width: 100%; }

.map-ctrl { position: absolute; background: rgba(255,255,255,.96); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 10px 12px; box-shadow: 0 6px 20px rgba(20,25,50,.10); z-index: 2; font-size: 13px; }
.map-ctrl.top-left { top: 12px; left: 12px; display: flex; gap: 10px; flex-wrap: wrap; max-width: calc(100% - 220px); }
.map-ctrl.top-left label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--doux); text-transform: uppercase; letter-spacing: .05em; }
.map-ctrl.top-left select { font-size: 13px; max-width: 280px; text-transform: none; letter-spacing: 0; color: var(--encre); }
.map-ctrl.top-right { top: 12px; right: 52px; display: flex; flex-direction: column; gap: 4px; }
.map-ctrl.bottom-left { bottom: 28px; left: 12px; max-width: 340px; }
.check { display: flex; gap: 6px; align-items: center; cursor: pointer; }
#legende h4 { margin: 0 0 6px; font-size: 12.5px; }
#legende .ligne { display: flex; align-items: center; font-size: 12.5px; padding: 1px 0; }
#legende .ligne span.n { margin-left: auto; padding-left: 12px; color: var(--doux); }
#legende .degrade { height: 10px; border-radius: 5px; margin: 4px 0 2px; }
#legende .bornes { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--doux); }
#bulle { position: absolute; pointer-events: none; background: #161a26; color: #fff; padding: 6px 9px; border-radius: 8px; font-size: 12.5px;
  z-index: 4; max-width: 280px; transform: translate(12px, 12px); }
#bulle small { display: block; opacity: .8; }
#chargement { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #161a26; color: #fff; padding: 5px 12px;
  border-radius: 20px; font-size: 12px; z-index: 4; }
.maplibregl-popup-content { border-radius: 10px; font: inherit; font-size: 13px; padding: 10px 12px; }

@media (max-width: 900px) {
  main { flex-direction: column-reverse; }
  #panel { width: 100%; min-width: 0; border-right: 0; flex: 1; }
  #carte-zone { height: 44vh; flex: none; }
  #meta { display: none; }
}

.indics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.indic { border: 1px solid var(--trait); border-radius: 10px; padding: 9px 11px; }
.indic.clic { cursor: pointer; }
.indic.clic:hover { border-color: var(--accent); background: var(--accent-doux); }
.indic b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.indic span { display: block; font-size: 12.5px; }
.indic small { display: block; font-size: 11.5px; color: var(--doux); margin-top: 3px; }
.indic small em { font-style: normal; }
.rep { padding: 6px 0; }
.rep-l { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.rep-l b { font-variant-numeric: tabular-nums; }
.rep-b { position: relative; height: 8px; border-radius: 4px; background: #eef0f5; margin: 4px 0 3px; }
.rep-b i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.rep-b u { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--encre); border-radius: 1px; }
.rep-d { font-size: 11.5px; color: var(--doux); }

.cmp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-chip { display: inline-flex; align-items: center; border: 1.5px solid; border-radius: 20px; padding: 3px 10px; font-size: 13px; font-weight: 500; }
.cmp-chip button { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; margin-left: 6px; color: var(--doux); padding: 0; }
.cmp-chip button:hover { color: #a4262c; }
.cmp-sugg { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: #fff;
  border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: 0 12px 32px rgba(20,25,50,.14); max-height: 300px; overflow: auto; z-index: 20; }
.cmp-sugg li { padding: 7px 10px; border-radius: 8px; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; }
.cmp-sugg li:hover { background: var(--accent-doux); }
.cmp-sugg small { color: var(--doux); white-space: nowrap; }
.cmp-table { overflow-x: auto; }
.cmp-table th.num { white-space: normal; min-width: 78px; vertical-align: bottom; color: var(--encre); font-weight: 600; }
.cmp-table td.fort { font-weight: 700; }
.cmp-det { border-top: 1px solid var(--trait); padding: 8px 0; }
.cmp-det:first-of-type { border-top: 0; }
.cmp-det summary { font-weight: 500; }

#btn-fiche { color: var(--encre); white-space: nowrap; font-weight: 500; }
#btn-fiche:hover { text-decoration: none; }
#meta { margin-left: 0; }