:root{
  --bg:#f6f7f4; --surface:#fff; --ink:#1b2a1f; --muted:#5b6b5f; --line:#dfe4dc;
  --brand:#14532d; --brand-ink:#fff; --accent:#c2410c; --focus:#1d4ed8;
  --chip:#eef2ea; --shadow:0 2px 10px rgba(20,40,25,.14);
  --top:56px; --tabs:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10150f; --surface:#182019; --ink:#e8efe6; --muted:#9db0a0; --line:#2a362b;
    --brand:#4ade80; --brand-ink:#052e16; --accent:#fb923c; --focus:#93c5fd; --chip:#223024;
    --shadow:0 2px 12px rgba(0,0,0,.5);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-text-size-adjust:100%;overflow:hidden}
h1{font-size:1.25rem;line-height:1.25;margin:.2rem 0 .4rem}
h2{font-size:1.1rem;margin:0 0 .5rem} h3{font-size:.95rem;margin:1rem 0 .3rem}
a{color:var(--brand)} button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:var(--brand-ink);padding:.5rem 1rem;z-index:99}
.skip:focus{left:0}
.nowrap{white-space:nowrap} .small{font-size:.82rem;color:var(--muted)}

/* ---- barre du haut ---- */
.top{height:var(--top);display:flex;align-items:center;gap:.75rem;padding:0 max(12px,env(safe-area-inset-left));
  background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand small{color:var(--muted);font-size:.78rem}
.dept select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.35rem .5rem;max-width:42vw}
.ghost{background:transparent;border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;cursor:pointer}
.ghost:hover{background:var(--chip)}

/* ---- disposition ---- */
.app{height:calc(100dvh - var(--top) - var(--tabs));display:grid;grid-template-columns:1fr;position:relative}
.panel,.mapwrap{grid-area:1/1;min-height:0}
.panel{overflow-y:auto;background:var(--surface);padding:12px 14px 24px;overscroll-behavior:contain}
.mapwrap{position:relative}
#map{position:absolute;inset:0}
.app[data-view="list"] .mapwrap{visibility:hidden}
.app[data-view="map"] .panel{visibility:hidden}
.tabs{height:var(--tabs);display:flex;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabs button{flex:1;border:0;background:none;font-weight:600;color:var(--muted);cursor:pointer}
.tabs button.on{color:var(--brand);box-shadow:inset 0 3px 0 var(--brand)}
@media (min-width:900px){
  :root{--tabs:0px}
  .tabs{display:none}
  .app{grid-template-columns:minmax(380px,32vw) 1fr}
  .panel{grid-area:1/1;border-right:1px solid var(--line)}
  .mapwrap{grid-area:1/2}
  .app[data-view] .mapwrap,.app[data-view] .panel{visibility:visible}
}

/* ---- panneau ---- */
.lede{margin:.2rem 0 .6rem;color:var(--muted)}
.stats{margin:.2rem 0 .8rem;font-weight:600}
.stats b{color:var(--brand)}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:.8rem}
.seg button{flex:1;padding:.5rem;border:0;background:var(--surface);cursor:pointer;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--brand);color:var(--brand-ink)}
.filters{display:grid;gap:.6rem;margin-bottom:.8rem;padding:.7rem;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.filters .row{display:flex;gap:.6rem;align-items:flex-end}
.filters label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);gap:.2rem}
.filters .grow{flex:1;min-width:0}
.filters input[type=text],.filters input:not([type]),.filters select{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.5rem .6rem;color:var(--ink);font-size:16px;width:100%}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font-size:.8rem;color:var(--muted);padding:0;margin-bottom:.25rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chips legend{width:100%}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3rem .7rem;cursor:pointer;font-size:.85rem}
.chip.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.more summary{cursor:pointer;font-weight:600;padding:.2rem 0}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .6rem;margin:.5rem 0}
.cats label,.check{flex-direction:row!important;align-items:center;color:var(--ink)!important;font-size:.85rem!important;gap:.4rem!important}
.dot{width:.8rem;height:.8rem;border-radius:3px;display:inline-block;flex:none}
.actions{justify-content:space-between}

/* ---- liste ---- */
.list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.item{display:grid;grid-template-columns:2.6rem 1fr auto;gap:.1rem .6rem;align-items:center;padding:.6rem .7rem;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);cursor:pointer;text-decoration:none;color:inherit}
.item:hover,.item.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.rank{grid-row:span 3;font-weight:800;font-size:1.05rem;color:var(--muted);text-align:center}
.item .t{font-weight:650;min-width:0;overflow:hidden;text-overflow:ellipsis}
.item .ha{font-weight:800;font-size:1.05rem;text-align:right;white-space:nowrap}
.item .sub{grid-column:2/4;color:var(--muted);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar{grid-column:2/4;display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--line)}
.bar i{display:block;height:100%}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:999px;background:var(--chip);color:var(--ink);margin-left:.3rem;vertical-align:1px}
.badge.g{background:#dcfce7;color:#14532d} .badge.o{background:#ffedd5;color:#9a3412}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge.g{background:#14532d;color:#dcfce7}:root:not([data-theme="light"]) .badge.o{background:#7c2d12;color:#ffedd5}}
.more-btn{display:block;width:100%;margin-top:.8rem;padding:.7rem;border:1px solid var(--brand);border-radius:10px;background:none;color:var(--brand);font-weight:700;cursor:pointer}
.empty{padding:1.2rem;text-align:center;color:var(--muted)}

/* ---- fiche ---- */
.back{border:0;background:none;color:var(--brand);font-weight:700;cursor:pointer;padding:.3rem 0;margin-bottom:.3rem}
.big{font-size:2rem;font-weight:800;line-height:1;color:var(--brand)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.7rem 0}
.kpi{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:.5rem .6rem}
.kpi b{display:block;font-size:1.1rem} .kpi span{font-size:.75rem;color:var(--muted)}
.stack{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--line);margin:.3rem 0}
.stack i{display:block}
.leg{display:flex;flex-wrap:wrap;gap:.2rem .9rem;font-size:.82rem;margin:.2rem 0 .5rem}
.leg span{display:inline-flex;align-items:center;gap:.3rem}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th,td{text-align:left;padding:.3rem .35rem;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.78rem} td.n,th.n{text-align:right;white-space:nowrap}
.tw{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.links{display:flex;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}
.links a,.links button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.45rem .7rem;text-decoration:none;font-weight:600;cursor:pointer;color:var(--brand);font-size:.88rem}
.note{font-size:.8rem;color:var(--muted);border-left:3px solid var(--accent);padding:.1rem .6rem;margin:.8rem 0}
.linkbtn{background:none;border:0;padding:0;color:var(--brand);text-decoration:underline;cursor:pointer;text-align:left}

#view-detail h1:focus{outline:none}
#view-detail.flash{animation:flash .9s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--brand);background:var(--chip)}100%{box-shadow:0 0 0 3px transparent;background:transparent}}
@media (prefers-reduced-motion:reduce){#view-detail.flash{animation:none}}

/* ---- carte ---- */
.maptools{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;z-index:2}
.layers,.mapbtn{background:var(--surface);border-radius:10px;box-shadow:var(--shadow)}
.layers summary{list-style:none;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;border-radius:10px}
.layers summary::-webkit-details-marker{display:none}
.layers[open] summary{border-bottom:1px solid var(--line);border-radius:10px 10px 0 0}
.layers-body{padding:.6rem .8rem;display:grid;gap:.5rem;font-size:.85rem;min-width:190px;max-width:70vw}
.layers-body label{display:flex;gap:.4rem;align-items:center}
.legend{display:grid;gap:.2rem;border-top:1px solid var(--line);padding-top:.4rem}
.legend span{display:flex;gap:.4rem;align-items:center;font-size:.78rem}
.mapbtn{width:40px;height:40px;border:0;font-size:1.4rem;cursor:pointer}
.card{position:absolute;left:10px;right:10px;bottom:12px;background:var(--surface);border-radius:14px;box-shadow:var(--shadow);padding:.7rem .9rem;z-index:2;max-width:460px}
.card h2{font-size:1rem;margin:0}
.card p{margin:.15rem 0 .5rem;color:var(--muted);font-size:.85rem}
.card .btns{display:flex;gap:.5rem}
.card .btns button{flex:1;padding:.55rem;border-radius:8px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);font-weight:700;cursor:pointer}
.card .btns button.alt{background:none;color:var(--brand)}
.maplibregl-ctrl-attrib{font-size:11px}
.noscript{padding:1rem;background:#fff3cd;color:#000;margin:0;position:fixed;bottom:0;left:0;right:0;z-index:50}

/* ---- dialogue ---- */
dialog{border:0;border-radius:16px;padding:1.2rem 1.4rem;max-width:min(640px,calc(100vw - 24px));max-height:86dvh;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog .x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:1.6rem;cursor:pointer;color:var(--muted)}
dialog li{margin:.25rem 0}
@media print{.top,.tabs,.maptools,.card,.mapwrap,#filters{display:none!important}body{overflow:visible}.app{display:block;height:auto}.panel{overflow:visible}}