:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #333333;
  --topbar-bg: rgba(255, 255, 255, 0.9);
}

:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #f0f0f0;
  --topbar-bg: rgba(0, 0, 0, 0.8);
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.top-bar {
  background: var(--topbar-bg);
  color: var(--text-color);
}

/* Thème sombre pour Leaflet */
.leaflet-container {
  background: var(--bg-color);
}

/* Modale thème sombre */
:root[data-theme="dark"] .modal {
  background: #2d2d2d;
  color: var(--text-color);
}

:root[data-theme="dark"] .modal-header {
  border-bottom-color: #444;
}

:root[data-theme="dark"] .onglets {
  background: #3a3a3a;
  border-bottom-color: #444;
}

:root[data-theme="dark"] .tab {
  color: var(--text-color);
}

:root[data-theme="dark"] .tab:hover {
  background: #444;
}

:root[data-theme="dark"] .tab.active {
  background: #2d2d2d;
}

/* Sélecteur de fuseau horaire thème sombre */
:root[data-theme="dark"] .timezone-selector {
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-color);
}

:root[data-theme="dark"] .timezone-selector select {
  background: #3a3a3a;
  color: var(--text-color);
  border-color: #555;
}

:root[data-theme="dark"] .timezone-selector #selected-time {
  color: var(--text-color);
}

/* Top bar thème sombre */
:root[data-theme="dark"] .top-bar {
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-color);
}