/* ═══════════════════════════════════════════════════════════════════════
   pilot-zones.css — Pilotage · etape 1, moitie LISTE + bascule liste/carte.

   Tout est scope sous #stats2-root (specificite 1,0,x) : aucune regle
   globale, aucun `*`, rien qui puisse repeindre une autre page. Le reset
   `.pp-scope *` de prospection.css:50 ne s'applique pas ici (la page
   Pilotage n'est pas sous .pp-scope — verifie) et perdrait de toute facon
   contre un id.

   Tokens repris de statistiques.css : --border --surface --text --text-dim
   --muted --bg --s2 --s3 --accent --green --radius --radius-lg.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Bascule liste / carte ────────────────────────────────────────── */
#stats2-root .s2-zonetoggle{
  display:flex; align-items:center; gap:2px; padding:3px; margin-bottom:12px;
  background:var(--s2); border:1px solid var(--border); border-radius:var(--radius,4px);
  width:max-content;
}
#stats2-root .s2-zonetoggle button{
  font:inherit; font-size:12px; font-weight:600; padding:5px 14px; border:0;
  background:transparent; color:var(--text-dim); border-radius:3px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
#stats2-root .s2-zonetoggle button.on{ background:var(--text); color:var(--bg); }
#stats2-root .s2-zonetoggle button:not(.on):hover{ background:var(--surface); color:var(--text); }
#stats2-root .s2-zonetoggle svg{ width:14px; height:14px; }

/* ─── Panneau liste ────────────────────────────────────────────────── */
#stats2-root .s2-zonelist{
  height:480px; display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:var(--radius-lg,8px);
  background:var(--surface); overflow:hidden;
}
#stats2-root .pz{ display:flex; flex-direction:column; height:100%; min-height:0; }

#stats2-root .pz-search{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--border); flex-shrink:0;
}
#stats2-root .pz-search svg{ width:16px; height:16px; color:var(--muted); flex-shrink:0; }
#stats2-root .pz-search input{
  flex:1; min-width:0; font:inherit; font-size:13px; color:var(--text);
  background:transparent; border:0; outline:none; padding:2px 0;
}
#stats2-root .pz-search input::placeholder{ color:var(--muted); }
#stats2-root .pz-clear{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  padding:2px; display:grid; place-items:center; border-radius:3px; flex-shrink:0;
}
#stats2-root .pz-clear:hover{ color:var(--text); background:var(--s2); }
#stats2-root .pz-clear svg{ width:14px; height:14px; }

#stats2-root .pz-count{
  padding:7px 12px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); background:var(--s2);
  border-bottom:1px solid var(--border); flex-shrink:0;
}
#stats2-root .pz-list{ flex:1; min-height:0; overflow-y:auto; }
#stats2-root .pz-empty{ padding:24px 14px; text-align:center; font-size:12.5px; color:var(--muted); }
#stats2-root .pz-note{
  padding:8px 12px; font-size:11px; color:var(--muted);
  border-top:1px solid var(--border); background:var(--s2); flex-shrink:0;
}

/* ─── Ligne de quartier ────────────────────────────────────────────── */
#stats2-root .pz-row{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  font:inherit; padding:8px 12px; border:0; border-bottom:1px solid var(--border);
  background:transparent; color:var(--text); cursor:pointer;
}
#stats2-root .pz-row:hover:not(:disabled){ background:var(--s2); }
#stats2-root .pz-row.on{ background:color-mix(in srgb,var(--accent) 8%,transparent); }
#stats2-root .pz-row.on:hover{ background:color-mix(in srgb,var(--accent) 13%,transparent); }
#stats2-root .pz-row.sub{ padding-left:34px; }
#stats2-root .pz-row.off{ cursor:not-allowed; opacity:.45; }
#stats2-root .pz-lbl{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
#stats2-root .pz-nom{
  font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#stats2-root .pz-meta{
  font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#stats2-root .pz-lock{ color:var(--muted); display:grid; place-items:center; flex-shrink:0; }
#stats2-root .pz-lock svg{ width:13px; height:13px; }

/* ─── Case a cocher (partagee ligne + groupe) ──────────────────────── */
#stats2-root .pz-box{
  width:17px; height:17px; flex-shrink:0; border-radius:4px;
  border:1.5px solid var(--border-hi,var(--border)); background:var(--bg);
  display:grid; place-items:center; color:var(--bg); padding:0;
}
#stats2-root .pz-box svg{ width:12px; height:12px; }
#stats2-root .pz-row.on .pz-box,
#stats2-root .pz-grp-box.all,
#stats2-root .pz-grp-box.part{ background:var(--accent); border-color:var(--accent); color:#fff; }
#stats2-root button.pz-box{ cursor:pointer; }
#stats2-root button.pz-box:disabled{ cursor:not-allowed; opacity:.4; }

/* ─── Groupe arrondissement ────────────────────────────────────────── */
#stats2-root .pz-grp{ border-bottom:1px solid var(--border); }
#stats2-root .pz-grp-head{ display:flex; align-items:center; gap:10px; padding:8px 12px; }
#stats2-root .pz-grp-head:hover{ background:var(--s2); }
#stats2-root .pz-grp-lbl{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; text-align:left;
  font:inherit; border:0; background:transparent; color:var(--text); cursor:pointer; padding:0;
}
#stats2-root .pz-grp-lbl .pz-meta{ margin-left:auto; flex-shrink:0; }
#stats2-root .pz-chev{ color:var(--muted); display:grid; place-items:center; flex-shrink:0; transition:transform .16s ease; }
#stats2-root .pz-chev svg{ width:14px; height:14px; }
#stats2-root .pz-grp.open .pz-chev{ transform:rotate(90deg); }
#stats2-root .pz-grp-body{ background:var(--s2); }
#stats2-root .pz-grp-body .pz-row:last-child{ border-bottom:0; }

@media (prefers-reduced-motion:reduce){
  #stats2-root .pz-chev{ transition:none; }
}

/* Sous 760px la meta de groupe passerait sous le libelle : on la masque
   plutot que de la laisser casser la ligne (jamais de chiffre orphelin). */
@media (max-width:760px){
  #stats2-root .pz-grp-lbl{ flex-wrap:wrap; gap:2px 10px; }
  #stats2-root .pz-grp-lbl .pz-meta{ margin-left:0; flex-basis:100%; }
  #stats2-root .s2-zonelist{ height:420px; }
}