/* =======================
   Layout de base
   ======================= */
html, body{
  height:100%;
  margin:0;
  font-family:system-ui, Arial, sans-serif;
}
#map{ position:absolute; inset:0; }
#map canvas{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}

/* =======================
   Swipe : ligne + poignée
   ======================= */
#divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:28px; transform:translateX(-50%);
  background:transparent; z-index:1001;
  cursor:col-resize; touch-action:none;
}
#divider::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:2px; transform:translateX(-1px);
  background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 12px rgba(0,0,0,.28);
  pointer-events:none;
}
#handle{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:56px; height:56px; border-radius:50%;
  background:radial-gradient(120% 120% at 30% 30%, #66b1ff, #2b6be9);
  border:3px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.25), inset 0 0 0 2px rgba(0,0,0,.15);
  z-index:1002; cursor:col-resize; touch-action:none;
}
#handle::before, #handle::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:0; height:0; border-top:8px solid transparent; border-bottom:8px solid transparent;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.2));
}
#handle::before{ left:12px;  border-right:12px solid #fff; }
#handle::after { right:12px; border-left:12px solid #fff; }

/* =======================
   Statut
   ======================= */
.status{
  position:absolute; top:10px; right:10px; z-index:1003;
  background:rgba(0,0,0,.6); color:#fff; padding:6px 10px;
  border-radius:8px; font-size:12px;
}

/* =======================
   Barre d’onglets (verticale)
   ======================= */
#rubriques{
  position:absolute; top:12px; left:12px; z-index:10040;
  display:flex; flex-direction:column; gap:8px;
}
#rubriques > .item{
  appearance:none; cursor:pointer; padding:6px 10px;
  border-radius:10px; font-weight:700;
  border:1px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.95); color:#1a1a1a;
  transition:background .15s, color .15s, border-color .15s;
}
#rubriques > .item.active,
#rubriques > .item[aria-pressed="true"]{
  background:#2b6be9; color:#fff; border-color:#1b4dc0;
}
#rubriques > .item:focus-visible{ outline:2px solid #2b6be9; outline-offset:2px; }
#rubriques .item[hidden]{ display:none !important; }

/* OpenLayers controls au-dessus de la carte si besoin */
.ol-control{ z-index:1000; }

/* =======================
   Panneau Stats (repliable)
   ======================= */
#statsPanel[hidden]{ display:none !important; }
#statsPanel{
  position:absolute; left:12px; bottom:12px; z-index:10050;
  width:min(560px, calc(100vw - 24px)); max-height:min(70vh, 640px);
  overflow:auto; padding:12px 12px 14px; border-radius:12px;
  background:rgba(255,255,255,0.96); backdrop-filter:blur(4px);
  box-shadow:0 12px 32px rgba(0,0,0,.25); color:#111;
}
#statsPanel .stats-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;
}
#statsPanel .stats-header h3{ margin:0; font-size:16px; font-weight:800; }
#statsClose{
  appearance:none; border:none; width:32px; height:32px; border-radius:8px;
  font-size:16px; line-height:32px; cursor:pointer; background:#efefef;
}
#statsClose:hover{ background:#e4e4e4; }
#statsPanel .stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:920px){ #statsPanel .stats-grid{ grid-template-columns:1fr; } }
#statsPie{ display:block; width:100%; height:auto; }

/* Tableau stats */
.stats-table table{ width:100%; border-collapse:collapse; font-size:13px; }
.stats-table thead th{
  text-align:center; font-weight:700; padding:8px 6px; background:#e7e7e7; border:1px solid #cfcfcf;
}
.stats-table tbody td{
  padding:8px 6px; border:1px solid #e1e1e1; text-align:center; background:#fff;
}
.stats-table tbody tr.total td{ background:#f0f0f0; font-weight:700; }
.stats-table tbody tr.row-healthy   { background:linear-gradient(0deg, rgba(40,160,60,.12), rgba(40,160,60,.08)); }
.stats-table tbody tr.row-unhealthy { background:linear-gradient(0deg, rgba(220,30,30,.12), rgba(220,30,30,.08)); }
.stats-table tbody tr.row-total     { background:#f3f3f3; font-weight:700; }
.stats-table tbody tr td:first-child{ text-align:left; }
.stats-table .row-bar{ display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:8px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }
.stats-table .row-bar--total{ background:#888; }

/* =======================
   Tooltip carte
   ======================= */
.map-tooltip[hidden]{ display:none !important; }
.map-tooltip{
  position:absolute; z-index:10060; pointer-events:none;
  transform:translate(-50%, calc(-100% - 10px));
  background:rgba(20,20,20,.92); color:#fff; padding:6px 10px; border-radius:8px; font-size:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.28); white-space:nowrap;
}
.map-tooltip::after{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(20,20,20,.92);
}

/* =======================
   Légende densité (bas-gauche)
   ======================= */
.legend.density-legend{
  position:absolute; left:12px; right:auto; bottom:12px; z-index:10060;
  background:rgba(255,255,255,0.96); border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.22);
  padding:10px 12px; font-size:12px; color:#111; backdrop-filter:blur(3px);
}
.legend .legend-title{ font-weight:800; margin-bottom:6px; }
.legend .legend-row{ display:flex; align-items:center; gap:8px; line-height:1.4; }
.legend .swatch{ width:14px; height:14px; border-radius:3px; box-shadow:0 0 0 1px rgba(0,0,0,.15) inset; }
.legend.density-legend{ pointer-events:auto; }

/* =======================
   Panneau densité (rétractable)
   ======================= */
/* ===== Panneau densité : état normal (tu l’as déjà) ===== */
.panel.density-panel{
  position:absolute;
  left:12px;
  bottom: calc(12px + 116px);
  z-index:10061;
  background: rgba(255,255,255,0.97);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.22);
  width:min(640px, calc(100vw - 24px));
  max-height:45vh;
  overflow:auto;
  padding:10px 12px;
  font-size:12px;
  color:#111;
  backdrop-filter:blur(3px);
}

.panel[hidden]{ display:none !important; }

.panel .panel-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px;
}

/* Bouton +/− selon aria-expanded */
#densityToggle{
  appearance:none; border:1px solid #ccc; border-radius:8px; background:#f5f5f5;
  padding:2px 8px; cursor:pointer; font-weight:700; width:28px; height:24px;
}
#densityToggle[aria-expanded="false"]::after{ content:"+"; }
#densityToggle[aria-expanded="true"]::after { content:"—"; }

/* ===== ÉTAT REPLIÉ : devient une petite “pill” ===== */
.panel.density-panel.is-collapsed{
  width: auto;                 /* ne prend plus toute la largeur dispos */
  max-width: 60vw;             /* limite dans les petits écrans */
  padding: 8px 12px;           /* un peu plus compact */
  overflow: visible;           /* pas de scroll quand replié */
}
.panel.density-panel.is-collapsed .panel-body{
  display: none !important;    /* corps totalement caché */
}
.panel.density-panel.is-collapsed .panel-header{
  margin: 0;                   /* en-tête plus serrée */
}
/* ====== Tableau récap DENSITÉ (look d'origine) ====== */
.density-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}
.density-table thead th{
  text-align: center;
  font-weight: 700;
  padding: 8px 6px;
  background: #e9e9e9;
  border: 1px solid #cfcfcf;
  white-space: nowrap;
}
.density-table tbody td{
  padding: 8px 6px;
  border: 1px solid #e1e1e1;
  text-align: center;
  background: #fff;
}
.density-table tbody tr:nth-child(even) td{
  background: #fafafa; /* légère zébrure */
}
.density-table tfoot td{
  padding: 8px 6px;
  border: 1px solid #e1e1e1;
  background: #f7f7f7;
  font-weight: 700;
  text-align: center;
}
.density-table tbody td:first-child,
.density-table tfoot td:first-child{
  text-align: left;
}

/* petit carré couleur devant le label de quantile (si tu l'utilises) */
.density-table .swatch{
  display:inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
}

/* Quand le panneau est replié, on garde le header propre et compact */
.panel.density-panel.is-collapsed{
  width: auto;
  max-width: 60vw;
  padding: 6px 10px;
}
.panel.density-panel.is-collapsed .panel-header{
  gap: 6px;
  margin: 0;
}