/* Onglet « Zones & carte » de l'Espace Comité : puces de niveau, carte Leaflet (fond OpenStreetMap), tableau
   d'affectation. Palette des zones (démo ZPAL, élargie à six teintes, distinctes de l'orange de la veille). */
:root {
  --zc-1: #0A5BD3; --zc-2: #2E9E63; --zc-3: #8E5BC4; --zc-4: #A63D40; --zc-5: #0E7C86; --zc-6: #B83280;
  --zc-encre: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zc-1: #6CA8FF; --zc-2: #5CCB8F; --zc-3: #B794E6; --zc-4: #E58A8C; --zc-5: #4FC1CB; --zc-6: #E57AB8;
    --zc-encre: #111113;
  }
}
:root[data-theme="dark"] {
  --zc-1: #6CA8FF; --zc-2: #5CCB8F; --zc-3: #B794E6; --zc-4: #E58A8C; --zc-5: #4FC1CB; --zc-6: #E57AB8;
  --zc-encre: #111113;
}

.zones-onglet .zones-niveaux { margin: 8px 0 14px; }
.zones-grille { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
.zones-carte-colonne, .zones-table-colonne { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.zones-carte-colonne .note { margin: 0; }

.carte-zones { position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.carte-zones .carte-repli { margin: 0; padding: 14px 16px; }
.carte-zones.carte-active .carte-repli { display: none; }
.carte-leaflet { height: 440px; width: 100%; background: var(--bg); }
.carte-alerte { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 1000; margin: 0; padding: 8px 12px;
  font-size: 12.5px; font-weight: 600; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: 8px; }
.carte-alerte[hidden] { display: none; }

/* Leaflet aux couleurs de la charte (contrôles, infobulles, attribution) ; tuiles assombries en mode sombre. */
.carte-zones .leaflet-container { font: 12px var(--body); background: var(--bg); }
.carte-zones .leaflet-bar a { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); }
.carte-zones .leaflet-control-attribution { background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--muted); }
.carte-zones .leaflet-control-attribution a { color: var(--accent); }
.carte-zones .leaflet-tooltip { background: var(--surface); color: var(--ink); border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .carte-zones .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
}
:root[data-theme="dark"] .carte-zones .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }

.zc-marqueur { display: flex !important; align-items: center; justify-content: center; border-radius: 50%;
  border: 2px solid var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .35); color: var(--zc-encre);
  font: 700 11px var(--body); }
.zc-marqueur.zc-sous-veille { outline: 2px dashed var(--warn); outline-offset: 2px; }
.zc-voisin { display: flex !important; align-items: center; justify-content: center; transform-origin: center; }
.zc-voisin span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--warn); color: #FFFFFF; border: 2px solid var(--surface); border-radius: 4px;
  transform: rotate(45deg); font: 700 10px var(--body); box-shadow: 0 1px 3px rgb(0 0 0 / .35); }
.leaflet-interactive.zc-veille, path.zc-veille { stroke: var(--warn); fill: none; }

/* Pastilles de zone : fond de la teinte, texte contrasté. */
.zc-1 { --zc: var(--zc-1); } .zc-2 { --zc: var(--zc-2); } .zc-3 { --zc: var(--zc-3); }
.zc-4 { --zc: var(--zc-4); } .zc-5 { --zc: var(--zc-5); } .zc-6 { --zc: var(--zc-6); }
.zc-marqueur { background: var(--zc); }
.pill.zc-pill { color: var(--zc); background: color-mix(in srgb, var(--zc) 15%, transparent); }
.zc-pastille { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--zc); flex: none; }
.zc-texte-1 { color: var(--zc-1); } .zc-texte-2 { color: var(--zc-2); } .zc-texte-3 { color: var(--zc-3); }
.zc-texte-4 { color: var(--zc-4); } .zc-texte-5 { color: var(--zc-5); } .zc-texte-6 { color: var(--zc-6); }

.zones-creation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px dashed var(--accent-line); border-radius: 10px; }
.zones-creation .note { margin: 0; flex-basis: 100%; }
.zones-creation-form { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin: 0; }
.zones-creation-form b { font-size: 13px; white-space: nowrap; }
.zones-creation-form input[type="text"] { flex: 1 1 14em; max-width: 320px; }
.zones-voisins, .zones-legende { align-items: center; }

table.zones td { vertical-align: middle; }
table.zones .zones-numero { font-weight: 700; }
table.zones .zones-club { display: block; font-weight: 600; }
table.zones .zones-commune { display: block; font-size: 12px; margin: 0; }
.zones-form { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.zones-form select { width: auto; min-width: 150px; padding: 5px 8px; font-size: 12.5px; }
.zones-form input[type="number"] { width: 64px; padding: 5px 6px; }
.zones-form .case { align-items: center; font-size: 12.5px; white-space: nowrap; }
.zones-form .case input { margin-top: 0; }
td.zones-zone, td.zones-fenetre { white-space: nowrap; }
td.zones-zone .zones-form, td.zones-fenetre .zones-form { flex-wrap: nowrap; }

@media (max-width: 900px) {
  .zones-grille { grid-template-columns: minmax(0, 1fr); }
  .carte-leaflet { height: 340px; }
}
.zones-voisins .pill, .zones-creation .pill, .zones-legende .pill { white-space: normal; }