/* ────────────────────────────── RESET & GLOBAL ────────────────────────────── */
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  margin: 0;
  display: block;
  height: 100vh;
  overflow: hidden;
  background: #1e2a38;
  color: #f0f4f8;
}

/* ────────────────────────────── SIDEBAR ────────────────────────────── */
#sidebar {
  position: fixed;
  top: 0;
  left: 80px;
  height: 100vh;
  width: 320px;
  background-color: #1e2a38;
  color: #f0f4f8;
  padding: 20px 15px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  user-select: none;
  transition: transform 0.3s ease;
  z-index: 1100;
}

#sidebar.hidden {
  transform: translateX(-100%);
}

#sidebar h1 {
  margin-bottom: 20px;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

/* ────────────────────────────── SECTIONS DANS SIDEBAR ────────────────────────────── */
.panel-section {
  background-color: #2a3b4f;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.panel-section h2 {
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  color: #a3d5ff;
  border-bottom: 1px solid #3f5773;
  padding-bottom: 8px;
}

.panel-section label,
.panel-section summary {
  font-size: 0.95rem;
  color: #e0eaf5;
}

.panel-section input {
  width: 100%;
  padding: 6px;
  background-color: #384a60;
  color: white;
  border-radius: 5px;
}

.panel-section details {
  margin-top: 10px;
}

.panel-section button {
  width: 100%;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#dashboard-link {
  display: block;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  margin-top: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 13px;
  text-decoration: none;
  text-align: center;
}

.panel-section button:hover,
#dashboard-link:hover {
  background-color: #0a5c92;
}

/* ────────────────────────────── FORMULAIRES BASE & OVERLAY LAYERS ────────────────────────────── */
#baselayers-form label.base-layer-label,
.overlay-layer-label {
  display: flex;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  color: #e0eaf5;
  margin-bottom: 8px;
  align-items: center;
  user-select: none;
}

#baselayers-form label:hover,
.overlay-layer-label:hover {
  color: #66baff;
}

.layer-hover-tooltip {
  position: fixed;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid rgba(157, 190, 225, 0.35);
  border-radius: 6px;
  background: rgba(10, 18, 30, 0.96);
  color: #f0f4f8;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  pointer-events: none;
  z-index: 1400;
}

.layer-hover-tooltip[hidden] {
  display: none;
}

body.light-mode .layer-hover-tooltip {
  border-color: rgba(40, 64, 90, 0.18);
  background: rgba(249, 252, 255, 0.98);
  color: #26384a;
  box-shadow: 0 8px 22px rgba(24, 46, 70, 0.2);
}

.overlay-layer-label.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.overlay-layer-label.disabled[data-layer-tooltip] {
  pointer-events: auto;
}

.overlay-layer-label input[type="checkbox"],
#baselayers-form input[type="radio"] {
  cursor: pointer;
  accent-color: #276AAB;
  width: 18px;
  height: 18px;
}


/* ────────────────────────────── ICONES DES CALQUES ────────────────────────────── */
.layer-icon {
  text-align: center;
  font-size: 1.3rem;
  margin-right: 8px;
  user-select: none;
}

.layer-status {
  color: #aebdca;
  font-size: 0.78rem;
  margin-left: 20px;
}

.layer-source {
  color: #6a7f93;
  font-size: 0.68rem;
  font-style: italic;
  margin: -4px 0 6px 20px;
  opacity: 0.8;
}

.layer-source a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.layer-source a:hover {
  color: #66baff;
  opacity: 1;
}

body.light-mode .layer-source {
  color: #8a9aaa;
}

.weather-legend {
  margin: 4px 0 4px 15px;
  padding: 8px;
  border-radius: 6px;
  background: rgba(14, 27, 42, 0.55);
}

.weather-legend[hidden] {
  display: none;
}

.weather-legend-title {
  margin-bottom: 5px;
  color: #d8e5f1;
  font-size: 0.72rem;
}

.weather-legend-bar,
.weather-legend-labels {
  display: flex;
  width: 100%;
}

.weather-legend-bar {
  height: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 3px;
}

.weather-legend-bar span,
.weather-legend-labels span {
  flex: 1;
}

.weather-legend-labels {
  margin-top: 3px;
  color: #aebdca;
  font-size: 0.62rem;
  text-align: center;
}

body.light-mode .layer-status,
body.light-mode .weather-legend-labels {
  color: #536273;
}

body.light-mode .weather-legend {
  background: rgba(213, 226, 238, 0.65);
}

body.light-mode .weather-legend-title {
  color: #26384a;
}

#overlay-group-weather,
#overlay-group-atmosphere,
#overlay-group-fire_danger,
#overlay-group-eumetsat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#overlay-group-weather .overlay-layer-label,
#overlay-group-atmosphere .overlay-layer-label,
#overlay-group-fire_danger .overlay-layer-label,
#overlay-group-eumetsat .overlay-layer-label {
  margin: 8px 0 4px 0;
  padding: 4px 8px;
  background: transparent;
  border-radius: 0;
  justify-content: flex-start;
  flex-direction: row;
  text-align: left;
  gap: 8px;
  font-size: 14px;
  min-height: auto;
}

#overlay-group-weather .layer-status,
#overlay-group-atmosphere .layer-status,
#overlay-group-fire_danger .layer-status,
#overlay-group-eumetsat .layer-status {
  margin: -4px 0 8px 0;
  font-size: 0.78rem;
  padding-left: 12px;
  white-space: pre-line;
}

.raster-sidebar-legend {
  padding: 8px;
  background: rgba(14, 27, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

body.light-mode .raster-sidebar-legend {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
}

.raster-legend-gradient {
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.raster-legend-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  color: #aebdca;
  font-size: 0.62rem;
}

body.light-mode .raster-legend-labels {
  color: #536273;
}

.raster-legend-scope {
  margin-top: 5px;
  color: #aebdca;
  font-size: 0.65rem;
  line-height: 1.3;
}

body.light-mode .raster-legend-scope {
  color: #536273;
}

.raster-popup {
  font-family: Arial, sans-serif;
  color: #eee;
  padding: 14px 20px 12px 14px;
  border-radius: 12px;
  background-color: #1e2a38;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2);
  min-width: 180px;
  line-height: 1.4;
}

.raster-popup strong {
  display: block;
  color: #ff6b6b;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #ff6b6b;
  font-size: 15px;
}

.raster-popup p {
  margin: 4px 0;
  font-size: 13px;
  color: #ccc;
}

body.light-mode .raster-popup {
  background-color: #f5f5f5;
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

body.light-mode .raster-popup strong {
  color: #c0392b;
  border-bottom-color: #c0392b;
}

body.light-mode .raster-popup p {
  color: #333;
}

/* ────────────────────────────── CONTENEUR DE LA CARTE ────────────────────────────── */
#map {
  flex-grow: 1;
  height: 100vh;
  width: 100vw;
  margin: 0;
  transition: none;
  position: relative;
  z-index: 1;
}

/* Curseur en croix lors de la sélection zoom région */
#map.map-cropping-active {
  cursor: crosshair !important;
}

/* ────────────────────────────── SPINNER DE CHARGEMENT ────────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid black;
  border-top: 4px solid grey;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ────────────────────────────── DETAILS & TOGGLES ────────────────────────────── */
details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 5px 0;
  user-select: none;
  color: #e0eaf5;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] summary {
  color: #66baff;
}

/* ────────────────────────────── BOUTONS FLOTTANTS SUR LA CARTE (MAP TOOLS) ────────────────────────────── */
#map-tools {
  position: absolute;
  right: 20px;
  top: 40%;
  background-color: #074A8B;
  transform: translateY(-50%);
  padding: 10px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#map-tools button {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
}

#map-tools button img {
  width: 24px;
  height: 24px;
  filter: invert(100%) brightness(200%);
  transition: transform 0.2s;
}

#map-tools button:hover img {
  transform: scale(1.2);
}

/* ────────────────────────────── BOUTON DE CHANGEMENT DE THEME ────────────────────────────── */
.theme-toggle-btn {
  margin-bottom: 20px;
  padding: 10px;
  font-size: 0.95rem;
  font-weight: bold;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.theme-toggle-btn:hover {
  background-color: #0a5c92;
}

/* ────────────────────────────── MODE CLAIR (LIGHT MODE) ────────────────────────────── */
body.light-mode {
  background: #f0f2f5;
  color: #222;
}

body.light-mode #sidebar {
  background-color: #fff;
  color: #222;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
}

body.light-mode .panel-section {
  background-color: #f5f7fa;
  color: #222;
}

body.light-mode .panel-section h2 {
  color: #004a87;
  border-bottom: 1px solid #ccc;
}

body.light-mode .panel-section label,
body.light-mode .panel-section summary {
  color: #333;
}

body.light-mode .panel-section input {
  background-color: #e6e9ef;
  color: #000;
}

body.light-mode .panel-section button,
body.light-mode .theme-toggle-btn {
  background-color: #0078d4;
}

body.light-mode .panel-section button:hover,
body.light-mode .theme-toggle-btn:hover {
  background-color: #005a9e;
}

body.light-mode #map-tools {
  background-color: #fff;
}

body.light-mode #map-tools button img {
  filter: invert(0%) brightness(0%);
}

body.light-mode #sidebar h1,
body.light-mode #baselayers-form label.base-layer-label,
body.light-mode .overlay-layer-label,
body.light-mode details summary {
  color: #222;
}

body.light-mode details[open] summary {
  color: #0078d4;
}

/* ────────────────────────────── BOUTONS DE PLAGE TEMPORALE ────────────────────────────── */
.time-range-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 0;
  margin: 10px 0;
}

.time-btn {
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}


.alerts-action-btn {
  padding: 6px 10px;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
}

.time-btn.active {
  background-color: #007BFF;
  color: white;
}


.alerts-action-btn.active {
  background-color: #007BFF;
  color: white;
}

/* ────────────────────────────── BOUTON CALENDRIER ────────────────────────────── */
#calendar-button {
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#calendar-button.active {
  background-color: #007BFF;
}

.calendar-icon {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
}

/* ────────────────────────────── BOUTONS ACTIFS MODE CLAIR (plus sombre) ────────────────────────────── */
body.light-mode .time-btn.active,
body.light-mode #calendar-button.active {
  background-color: #004f87;
  color: white;
}

/* ────────────────────────────── TEXTE DES DATES SÉLECTIONNÉES ────────────────────────────── */
#selected-dates {
  text-align: center;
  font-style: italic;
}

/* ────────────────────────────── CALENDRIER FLATPICKR ────────────────────────────── */
.flatpickr-calendar {
  position: fixed !important;
  bottom: 20px !important;
  left: 82px !important;
  top: auto !important;
  right: auto !important;
  z-index: 9999 !important;
}

/* ────────────────────────────── LABELS DES CALQUES (checkbox + icône + texte) ───────────── */
.overlay-layer-label {
  padding-left: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
  color: #f0f4f8;
  cursor: pointer;
  font-weight: 600;
  user-select: none;
}





/* Bouton show alert dans time range alert */
.alert-time-range-btn {
  cursor: pointer;
  transition: background-color 0.2s;
  user-select: none;
  color: #e0eaf5;
  font-weight: 600;
}

.alert-time-range-btn:hover {
  background-color: #276AAB;
  color: white;
}

body.light-mode .custom-divider {
  border-top: 1px solid #ccc;
}

body.light-mode .custom-section-title {
  color: #004a87;
}

body.light-mode .alert-time-range-btn {
  border-color: #0078d4;
  color: #222;
}

body.light-mode .alert-time-range-btn:hover {
  background-color: #0078d4;
  color: white;
}


/* ────────────────────────────── Legend ──────────────────────────── */

#map {
  position: relative;
}


/* Légende globale */
#map-legend {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 1000;
  padding: 12px;
  /* marge intérieure autour du texte et icônes */
  border-radius: 12px;
  /* coins arrondis */
  background: rgba(07, 74, 149, 0.6);
  /* fond par défaut (jour/nuit sera géré par body class) */
  transition: right 0.3s ease, opacity 0.3s ease;
}

/* Titre de la légende */
#map-legend h4 {
  margin: 0 0 10px 0;
  /* espace sous le titre */
  font-weight: bold;
  /* texte en gras */
  text-align: center;
  /* centré */
}

/* Items de la légende */
#map-legend .legend-item {
  display: flex;
  /* icône + texte sur la même ligne */
  align-items: center;
  /* centre verticalement icône et texte */
  gap: 8px;
  /* espace entre icône et texte */
  margin: 0 0 4px 0;
  /* espace entre chaque ligne */
  padding: 0;
  font-size: 0.85rem;
}

/* Icônes dans les items */
#map-legend .legend-item img {
  height: 20px;
  width: auto;
  /* conserve les proportions */
  object-fit: contain;
  /* évite l’étirement */
}

/* Marqueur SVG injecté (position actuelle) : même rendu que sur la carte */
#map-legend .legend-marker-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  /* aligne avec les icônes voisines */
}

#map-legend .legend-marker-icon svg {
  display: block;
  height: 26px;
  width: auto;
  /* conserve les proportions du marqueur */
}

/* Barre de séparation */
#map-legend .legend-separator {
  height: 1px;
  background-color: rgba(255, 255, 255);
  /* même couleur que le texte */
  margin: 6px 0;
  /* espace au-dessus et en dessous */
}

/* Couleurs selon mode jour/nuit */
body.light-mode #map-legend {
  background: rgba(255, 255, 255, 0.6);
}

body.dark-mode #map-legend {
  background: rgba(07, 74, 149, 0.6);
}

body.light-mode #map-legend .legend-separator {
  background: rgba(0, 0, 64);
}

body.dark-mode #map-legend .legend-separator {
  background: rgba(255, 255, 255);
}

#map-legend.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* pour éviter de cliquer dessus */
  transition: opacity 0.3s ease;
  /* petit effet smooth optionnel */
}

#map-legend .weather-legend {
  margin: 6px 0 0 0;
  padding: 0;
  background: transparent;
  min-width: 160px;
}

#map-legend .weather-legend-labels {
  display: flex;
  justify-content: space-between;
}

#map-legend .weather-legend-labels span {
  display: none;
  flex: none;
}

#map-legend .weather-legend-labels span:first-child,
#map-legend .weather-legend-labels span:last-child {
  display: block;
}

#map-legend .weather-legend-labels span:first-child {
  text-align: left;
}

#map-legend .weather-legend-labels span:last-child {
  text-align: right;
}

#map-legend .raster-legend-gradient {
  min-width: 160px;
}

#map-legend .raster-legend-labels span:nth-child(2) {
  text-align: center;
}

#map-legend .raster-legend-labels span:last-child {
  text-align: right;
}



/* ────────────────────────────── General info display ──────────────────────────── */

#map-header {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  padding: 10px 14px;
  border-radius: 6px;
  z-index: 1000;
  text-align: center;
  /* centre le texte dans la boîte */
  pointer-events: none;
  line-height: 1.2em;
  min-width: 220px;
  /* optionnel : largeur minimale */
}

#map-header .header-line1 {
  font-weight: bold;
  font-size: 1.1em;
  /* plus grande */
  margin-bottom: 6px;
}

#map-header .header-line2 {
  font-weight: normal;
  font-size: 1 em;
  /* plus petite */
}

#map-header .header-line3 {
  margin-top: 5px;
  font-weight: normal;
  font-size: 1 em;
  /* plus petite */
}

/* Mode par défaut = dark */
body.dark-mode #map-header {
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
}

/* Mode clair */
body.light-mode #map-header {
  background-color: rgba(255, 255, 255, 0.6);
  color: black;
}

#map-header.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ────────────────────────────── Zone Info Panel — Copernicus previews ──────────────────────────── */

.zp-copernicus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.zp-copernicus-preview {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 6px;
  border: 1px solid #3f5773;
  border-radius: 6px;
  background: rgba(23, 32, 44, 0.65);
  color: #d7e2ec;
  font-size: 12px;
  text-align: center;
  text-decoration: none;
}

.zp-copernicus-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background-color: #17202c;
}

.zp-copernicus-preview-title {
  font-size: 12px;
}

.zp-copernicus-color-notes {
  display: grid;
  gap: 3px;
  color: #c8d5df;
  font-size: 8px;
  line-height: 1.1;
  text-align: left;
}

.zp-copernicus-color-note {
  display: grid;
  grid-template-columns: 9px 1fr;
  gap: 4px;
  align-items: center;
}

.zp-copernicus-color-dot {
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 2px;
}

.zp-copernicus-colorbar-wrap {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 2px;
}

.zp-copernicus-colorbar {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 3px;
}

.zp-copernicus-color {
  display: block;
  flex: 1 1 0;
  height: 8px;
}

.zp-copernicus-scale-labels {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #c8d5df;
  font-size: 8px;
  line-height: 1.1;
  text-align: left;
}

.zp-copernicus-scale-labels span:last-child {
  text-align: right;
}

body.light-mode .zp-copernicus-preview {
  color: #333;
  border-color: #d1d8e0;
  background: rgba(255, 255, 255, 0.75);
}

body.light-mode .zp-copernicus-scale-labels,
body.light-mode .zp-copernicus-color-notes {
  color: #4c5965;
}

body.light-mode .zp-copernicus-color-dot {
  border-color: rgba(0, 0, 0, 0.3);
}

/* Barre flottante de logos à gauche */
#logo-sidebar {
  position: fixed;
  /* reste à gauche même en scroll */
  top: 0;
  left: 0;
  height: 100%;
  /* prend toute la hauteur */
  width: 80px;
  /* largeur de la barre */
  background-color: rgba(240, 240, 240);
  /* blanc semi-transparent */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  /* léger ombrage */
  z-index: 2000;
  /* au-dessus du reste */
  overflow-y: auto;
  /* scroll si trop de logos */
}

/* Logos à l'intérieur de la barre */
#logo-sidebar .logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#logo-sidebar .logo-container img {
  width: 50px;
  /* taille uniforme des logos */
  height: auto;
  margin: 5px 0;
}

/* ────────────────────────────── Popups Alert MapLibre ────────────────────────────── */

/* Mode par défaut = dark */
.alert-popup {
  font-family: Arial, sans-serif;
  color: #eee;
  padding: 16px 22px 14px 14px;
  /* padding intérieur */
  width: auto px;
  height: 250px;
  overflow-y: auto;
  line-height: 1.4;
  border-radius: 12px;
  background-color: #1e2a38;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2);
}

/* Supprime style par défaut MapLibre */
.maplibregl-popup-content {
  position: relative !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.maplibregl-popup {
  border-radius: 12px !important;
}

/* Titre */
.alert-popup h3 {
  color: #ff6b6b;
  margin: 0 0 8px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid #ff6b6b;
  font-size: 16px;
  text-align: center;
}

/* Texte générique */
.alert-popup p {
  margin: 5px 0;
  font-size: 14px;
  font-weight: bold;
  color: #ccc;
}

.alert-popup #open-info-panel {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background-color: #0d72b9;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}


#presence-counter {
  position: fixed;
  top: 5px;
  left: calc(80px + 320px - 5px);
  transform: translateX(-100%);
  z-index: 1200;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-family: sans-serif;
}

/* Couleurs spécifiques */
.alert-popup .district {
  color: #3498db;
}

.alert-popup .subdistrict {
  color: #9b59b6;
}

.alert-popup .province {
  color: #2980b9;
}

.alert-popup .reserved {
  color: #ff4d4d;
}

.alert-popup .protected {
  color: #ff4d4d;
}

.alert-popup .position {
  color: #2ecc71;
}

.alert-popup .confidence {
  color: #f39c12;
}

/* Barre de séparation */
.alert-popup .separator {
  border-top: 2px solid #ff6b6b;
  margin: 10px 0;
}

/* Span neutre (valeurs) */
.alert-popup span {
  font-weight: normal;
  color: #ccc;
}

.alert-popup a {
  color: #3498db;
  text-decoration: underline;
}

/* Bouton de fermeture */
.maplibregl-popup-close-button {
  position: absolute !important;
  top: 6px;
  right: 15px;
  z-index: 10;
  background: transparent;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #ccc;
}

.maplibregl-popup-close-button:hover {
  color: #ff4d4d;
}

/* ────────────────────────────── Light Mode ────────────────────────────── */
body.light-mode .alert-popup {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.light-mode .alert-popup h3 {
  color: #e74c3c;
  border-bottom: 2px solid #e74c3c;
}

body.light-mode .alert-popup p,
body.light-mode .alert-popup span {
  color: #555;
}

/* Couleurs spécifiques */
body.light-mode .alert-popup .district {
  color: #2980b9;
}

body.light-mode .alert-popup .subdistrict {
  color: #6A00FF;
}

body.light-mode .alert-popup .province {
  color: #000CFF;
}

body.light-mode .alert-popup .reserved {
  color: #FF0010;
}

body.light-mode .alert-popup .protected {
  color: #FF0010;
}

body.light-mode .alert-popup .position {
  color: #27ae60;
}

body.light-mode .alert-popup .confidence {
  color: #e67e22;
}

/* Barre de séparation */
body.light-mode .alert-popup .separator {
  border-top: 2px solid #e74c3c;
}

/* Bouton de fermeture */
body.light-mode .maplibregl-popup-close-button {
  color: #444;
}

body.light-mode .maplibregl-popup-close-button:hover {
  color: #e74c3c;
}

/* Scrollbar fine Dark Mode */
/* Scrollbar universelle pour les popups (dark par défaut) */
.alert-popup {
  overflow-y: auto;
  scrollbar-color: #555 #1e2a38;
  /* curseur / track */
}

/* Scrollbar Webkit (Chrome, Edge, Safari) */
.alert-popup::-webkit-scrollbar {
  width: 14px;
}

.alert-popup::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 7px;
}

.alert-popup::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 7px;
}

.alert-popup::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

body.light-mode .alert-popup {
  scrollbar-color: #555 #fff;
}

body.light-mode .alert-popup::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 7px;
}

body.light-mode .alert-popup::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 7px;
}

body.light-mode .alert-popup::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}



.overlay-sub {
  font-size: 0.9em;
  margin-left: 24px;
}

.overlay-sub input[type="checkbox"] {
  transform: scale(0.85);
  margin-right: 4px;
}

#zone-info-panel {
  position: fixed;
  top: 0;
  right: 0px;
  height: 100vh;
  width: 320px;
  background-color: #1e2a38;
  color: #f0f4f8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  z-index: 1200;
  transform: translateX(150%);
  transition: transform 0.3s ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
}

#zone-info-panel.open {
  transform: translateX(0);
}

.zp-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 12px 14px 4px 14px;
  flex-shrink: 0;
}

.zp-close-btn {
  background: none;
  border: 1px solid #3f5773;
  color: #8fa8c4;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.zp-close-btn:hover {
  background-color: #c0392b;
  color: #fff;
  border-color: #c0392b;
}

.zp-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 20px 14px;
  scrollbar-color: #3f5773 #1e2a38;
}

.zp-content::-webkit-scrollbar {
  width: 6px;
}

.zp-content::-webkit-scrollbar-track {
  background: #1e2a38;
}

.zp-content::-webkit-scrollbar-thumb {
  background-color: #3f5773;
  border-radius: 3px;
}

.zp-header {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 2px solid #3f5773;
}

.zp-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.zp-badge-subdistricts {
  background: #6c3483;
  color: #fff;
}

.zp-badge-districts {
  background: #1a5276;
  color: #fff;
}

.zp-badge-provinces {
  background: #0e6655;
  color: #fff;
}

.zp-badge-protected_areas {
  background: #784212;
  color: #fff;
}

.zp-badge-reserved_national_reserved_forest {
  background: #1a6633;
  color: #fff;
}

.zp-badge-forests_14_groups {
  background: #117a65;
  color: #fff;
}

.zp-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.zp-subtitle {
  margin-top: 4px;
  font-size: 0.85rem;
  color: #a3d5ff;
  font-style: italic;
}

.zp-section {
  background: #2a3b4f;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.zp-section-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #a3d5ff;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #3f5773;
}

.zp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.zp-row:last-child {
  margin-bottom: 0;
}

.zp-label {
  color: #7a9bb5;
  font-weight: 600;
  flex-shrink: 0;
  min-width: 78px;
}

.zp-value {
  text-align: right;
  color: #e0eaf5;
  word-break: break-word;
}

.zp-index-help {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
  border-bottom: 1px dotted currentColor;
  outline: none;
}

.zp-index-help::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  border-radius: 50%;
  background: #3f5773;
  color: #f0f4f8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.zp-index-tooltip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(230px, 70vw);
  z-index: 1300;
  padding: 8px 10px;
  border: 1px solid #4e6b8b;
  border-radius: 6px;
  background: #17202c;
  color: #f0f4f8;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.zp-index-help:hover .zp-index-tooltip,
.zp-index-help:focus .zp-index-tooltip,
.zp-index-help:focus-visible .zp-index-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.zp-index-percent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #1e2a38;
  color: #a3d5ff;
  font-weight: 700;
}

.zp-weather-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.zp-weather-item {
  background: #1e2a38;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.zp-wi {
  font-size: 1.3rem;
  flex-shrink: 0;
}

.zp-wv {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}

.zp-wl {
  font-size: 0.68rem;
  color: #6a8fad;
  margin-top: 2px;
}

.zp-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 0 30px;
  gap: 14px;
  color: #a3d5ff;
  font-size: 0.9rem;
}

.zp-unavail {
  color: #5a7a9a;
  font-size: 0.85rem;
  font-style: italic;
  margin: 4px 0 0;
}

.zp-footer {
  text-align: center;
  color: #3f5773;
  font-size: 0.68rem;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #2a3b4f;
}

body.light-mode #zone-info-panel {
  background-color: #fff;
  color: #222;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

body.light-mode .zp-close-btn {
  color: #555;
  border-color: #ccc;
}

body.light-mode .zp-header {
  border-bottom-color: #d0d8e4;
}

body.light-mode .zp-title {
  color: #111;
}

body.light-mode .zp-subtitle {
  color: #0078d4;
}

body.light-mode .zp-section {
  background: #f0f4fa;
}

body.light-mode .zp-section-title {
  color: #004a87;
  border-bottom-color: #d0d8e4;
}

body.light-mode .zp-label {
  color: #4a6a8a;
}

body.light-mode .zp-value {
  color: #222;
}

body.light-mode .zp-index-help::after {
  background: #d0d8e4;
  color: #004a87;
}

body.light-mode .zp-index-tooltip {
  border-color: #c0ccd8;
  background: #fff;
  color: #222;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

body.light-mode .zp-index-percent {
  background: #e2eaf5;
  color: #004a87;
}

body.light-mode .zp-weather-item {
  background: #e2eaf5;
}

body.light-mode .zp-wv {
  color: #111;
}

body.light-mode .zp-wl {
  color: #4a6a8a;
}

body.light-mode .zp-unavail {
  color: #888;
}

body.light-mode .zp-footer {
  color: #aaa;
  border-top-color: #e0e8f0;
}

body.light-mode .zp-content {
  scrollbar-color: #c0ccd8 #f0f4fa;
}

body.light-mode .zp-content::-webkit-scrollbar-track {
  background: #f0f4fa;
}

body.light-mode .zp-content::-webkit-scrollbar-thumb {
  background-color: #c0ccd8;
}