/*
 * sentinelle-theme.css — Valeurs des thèmes (voir sentinelle-theme.js).
 *
 * Chaque `--s-NNN` est un triplet RVB pour que Tailwind puisse y appliquer une
 * opacité. Le thème est porté par l'attribut `data-theme` de <html> :
 * absent ou "sombre", "clair".
 */
@import url('https://fonts.googleapis.com/css2?family=Saira:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* Sombre : graphite légèrement chaud, sur le noir de la marque. */
  --s-50: 247 247 245;
  --s-100: 241 240 236;
  --s-200: 226 225 220;
  --s-300: 201 200 194;
  --s-400: 164 163 157;
  --s-500: 128 127 121;
  --s-600: 92 91 87;
  --s-700: 58 57 55;
  --s-800: 38 38 37;
  --s-850: 30 30 29;
  --s-900: 23 23 22;
  --s-950: 14 14 14;
  --texte: 241 240 236;
  --fond: 14 14 14;
  --carte-fond: 27 31 26;
  color-scheme: dark;
}

:root[data-theme="clair"] {
  /* Clair : l'échelle inversée. 900 (panneaux) = blanc, 950 (fond) = blanc
     cassé, 800/700 (cartes, bordures) = gris très clairs, et les gris de
     texte foncent pour rester lisibles sur blanc (400 ≈ 6,6:1, 500 ≈ 4,6:1). */
  --s-50: 14 14 14;
  --s-100: 28 28 26;
  --s-200: 46 45 42;
  --s-300: 69 68 63;
  --s-400: 92 91 87;
  --s-500: 112 111 106;
  --s-600: 185 184 178;
  --s-700: 220 219 214;
  --s-800: 236 235 231;
  --s-850: 245 245 242;
  --s-900: 255 255 255;
  --s-950: 243 243 240;
  --texte: 14 14 14;
  --fond: 243 243 240;
  --carte-fond: 226 228 222;
  color-scheme: light;
}

html, body {
  font-family: 'Saira', system-ui, sans-serif;
  background-color: rgb(var(--fond));
  color: rgb(var(--texte));
}

.leaflet-container {
  background-color: rgb(var(--carte-fond)) !important;
  font-family: 'Saira', system-ui, sans-serif;
}

/* ── Texte blanc en thème clair ───────────────────────────────────────────
   `text-white` sert à deux choses dans le code : le texte principal sur un
   panneau gris (qui doit foncer en clair) et le texte d'un bouton coloré
   (qui doit rester blanc). On fonce tout, puis on rend le blanc aux éléments
   posés sur une couleur pleine. */
:root[data-theme="clair"] .text-white,
:root[data-theme="clair"] .hover\:text-white:hover {
  color: rgb(var(--texte));
}
:root[data-theme="clair"] :is(
  [class^="bg-blue-5"], [class*=" bg-blue-5"], [class^="bg-blue-6"], [class*=" bg-blue-6"], [class^="bg-blue-7"], [class*=" bg-blue-7"], [class^="bg-blue-8"], [class*=" bg-blue-8"],
  [class^="bg-red-5"], [class*=" bg-red-5"], [class^="bg-red-6"], [class*=" bg-red-6"], [class^="bg-red-7"], [class*=" bg-red-7"], [class^="bg-red-8"], [class*=" bg-red-8"],
  [class^="bg-emerald-5"], [class*=" bg-emerald-5"], [class^="bg-emerald-6"], [class*=" bg-emerald-6"], [class^="bg-emerald-7"], [class*=" bg-emerald-7"],
  [class^="bg-green-5"], [class*=" bg-green-5"], [class^="bg-green-6"], [class*=" bg-green-6"], [class^="bg-green-7"], [class*=" bg-green-7"],
  [class^="bg-amber-5"], [class*=" bg-amber-5"], [class^="bg-amber-6"], [class*=" bg-amber-6"], [class^="bg-amber-7"], [class*=" bg-amber-7"],
  [class^="bg-orange-5"], [class*=" bg-orange-5"], [class^="bg-orange-6"], [class*=" bg-orange-6"], [class^="bg-orange-7"], [class*=" bg-orange-7"],
  [class^="bg-rose-5"], [class*=" bg-rose-5"], [class^="bg-rose-6"], [class*=" bg-rose-6"], [class^="bg-rose-7"], [class*=" bg-rose-7"],
  [class^="bg-cyan-5"], [class*=" bg-cyan-5"], [class^="bg-cyan-6"], [class*=" bg-cyan-6"], [class^="bg-cyan-7"], [class*=" bg-cyan-7"],
  [class^="bg-sky-5"], [class*=" bg-sky-5"], [class^="bg-sky-6"], [class*=" bg-sky-6"], [class^="bg-sky-7"], [class*=" bg-sky-7"],
  [class^="bg-indigo-5"], [class*=" bg-indigo-5"], [class^="bg-indigo-6"], [class*=" bg-indigo-6"], [class^="bg-indigo-7"], [class*=" bg-indigo-7"],
  [class^="bg-violet-5"], [class*=" bg-violet-5"], [class^="bg-violet-6"], [class*=" bg-violet-6"], [class^="bg-violet-7"], [class*=" bg-violet-7"],
  [class^="bg-purple-5"], [class*=" bg-purple-5"], [class^="bg-purple-6"], [class*=" bg-purple-6"], [class^="bg-purple-7"], [class*=" bg-purple-7"],
  [class^="bg-teal-5"], [class*=" bg-teal-5"], [class^="bg-teal-6"], [class*=" bg-teal-6"], [class^="bg-teal-7"], [class*=" bg-teal-7"],
  [class^="bg-black"], [class*=" bg-black"]
):is(.text-white, .hover\:text-white:hover) {
  color: #FFFFFF;
}
/* …sauf les teintes transparentes (`bg-blue-600/20`) : fond clair, texte foncé. */
:root[data-theme="clair"] [class*="/10"].text-white,
:root[data-theme="clair"] [class*="/15"].text-white,
:root[data-theme="clair"] [class*="/20"].text-white,
:root[data-theme="clair"] [class*="/30"].text-white {
  color: rgb(var(--texte));
}
/* Le texte posé sur une vidéo ou une carte satellite reste blanc. */
:root[data-theme="clair"] .sur-image .text-white,
:root[data-theme="clair"] .sur-image.text-white {
  color: #FFFFFF;
}

/* Barres de défilement accordées au thème. */
* { scrollbar-color: rgb(var(--s-700)) transparent; }

/* Valeurs mesurées : chiffres alignés. */
.font-mono { font-variant-numeric: tabular-nums; }

/* ── Carte sous les barres (accueil, poste de bureau) ─────────────────────
   Les contrôles Leaflet de la carte principale se rangent dans la partie
   visible, sous le bandeau et à droite du menu (variables posées par App). */
.carte-principale .leaflet-top { top: var(--decalage-haut, 0px); }
.carte-principale .leaflet-left { left: var(--decalage-gauche, 0px); }
.carte-principale .leaflet-right { right: var(--decalage-droite, 0px); }
.carte-principale .leaflet-top, .carte-principale .leaflet-left, .carte-principale .leaflet-right {
  transition: left 0.3s ease, right 0.3s ease;
}

/* Contrôles Leaflet (zoom, calques) aux couleurs du thème, en verre. */
.leaflet-bar, .leaflet-control-layers {
  border: 1px solid rgb(var(--s-700) / 0.7) !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25) !important;
  overflow: hidden;
}
.leaflet-bar a, .leaflet-control-layers {
  background: rgb(var(--s-950) / 0.75) !important;
  color: rgb(var(--texte)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.leaflet-bar a { width: 40px !important; height: 40px !important; line-height: 40px !important; border-bottom-color: rgb(var(--s-700) / 0.7) !important; }
.leaflet-bar a:hover { background: rgb(var(--s-800) / 0.9) !important; }
.leaflet-control-layers-toggle { width: 42px !important; height: 42px !important; }
:root:not([data-theme="clair"]) .leaflet-control-layers-toggle { filter: invert(1) brightness(1.4); }
.leaflet-control-layers-expanded { padding: 8px 10px !important; font-size: 13px; }

/* ── Étiquettes ───────────────────────────────────────────────────────────
   Les petites étiquettes en capitales espacées faisaient partie de l'air
   « générique » relevé le 22/10/2026 : elles passent en casse normale.
   Les textes réellement écrits en capitales dans les traductions (ARRÊT
   D'URGENCE…) ne sont pas touchés. Les boutons d'urgence gardent leurs
   capitales par leur propre classe (tracking-[0.04em]). */
.uppercase[class*="tracking-wide"], .uppercase.tracking-widest {
  text-transform: none;
  letter-spacing: 0.01em;
}

/* ── Texte coloré en thème clair ──────────────────────────────────────────
   Les textes de couleur (-200 à -400) sont réglés pour un fond sombre : sur
   blanc ils deviennent illisibles (ambre clair, cyan clair…). En clair, on
   passe à la nuance 700 de la même teinte. */
:root[data-theme="clair"] .text-amber-200, :root[data-theme="clair"] .text-amber-300, :root[data-theme="clair"] .text-amber-400 { color: #B45309; }
:root[data-theme="clair"] .text-yellow-200, :root[data-theme="clair"] .text-yellow-300, :root[data-theme="clair"] .text-yellow-400 { color: #A16207; }
:root[data-theme="clair"] .text-orange-200, :root[data-theme="clair"] .text-orange-300, :root[data-theme="clair"] .text-orange-400 { color: #C2410C; }
:root[data-theme="clair"] .text-emerald-200, :root[data-theme="clair"] .text-emerald-300, :root[data-theme="clair"] .text-emerald-400 { color: #047857; }
:root[data-theme="clair"] .text-green-200, :root[data-theme="clair"] .text-green-300, :root[data-theme="clair"] .text-green-400 { color: #15803D; }
:root[data-theme="clair"] .text-teal-200, :root[data-theme="clair"] .text-teal-300, :root[data-theme="clair"] .text-teal-400 { color: #0F766E; }
:root[data-theme="clair"] .text-cyan-200, :root[data-theme="clair"] .text-cyan-300, :root[data-theme="clair"] .text-cyan-400 { color: #0E7490; }
:root[data-theme="clair"] .text-sky-200, :root[data-theme="clair"] .text-sky-300, :root[data-theme="clair"] .text-sky-400 { color: #0369A1; }
:root[data-theme="clair"] .text-indigo-200, :root[data-theme="clair"] .text-indigo-300, :root[data-theme="clair"] .text-indigo-400 { color: #4338CA; }
:root[data-theme="clair"] .text-violet-200, :root[data-theme="clair"] .text-violet-300, :root[data-theme="clair"] .text-violet-400 { color: #6D28D9; }
:root[data-theme="clair"] .text-purple-200, :root[data-theme="clair"] .text-purple-300, :root[data-theme="clair"] .text-purple-400 { color: #7E22CE; }
:root[data-theme="clair"] .text-rose-200, :root[data-theme="clair"] .text-rose-300, :root[data-theme="clair"] .text-rose-400 { color: #BE123C; }
:root[data-theme="clair"] .text-pink-200, :root[data-theme="clair"] .text-pink-300, :root[data-theme="clair"] .text-pink-400 { color: #BE185D; }
:root[data-theme="clair"] .text-lime-200, :root[data-theme="clair"] .text-lime-300, :root[data-theme="clair"] .text-lime-400 { color: #4D7C0F; }
:root[data-theme="clair"] .text-fuchsia-200, :root[data-theme="clair"] .text-fuchsia-300, :root[data-theme="clair"] .text-fuchsia-400 { color: #A21CAF; }
:root[data-theme="clair"] .text-blue-200, :root[data-theme="clair"] .text-blue-300, :root[data-theme="clair"] .text-blue-400 { color: #2D5590; }
:root[data-theme="clair"] .text-red-200, :root[data-theme="clair"] .text-red-300, :root[data-theme="clair"] .text-red-400 { color: #A13341; }

/* ── Fonds teintés sombres en thème clair ────────────────────────────────
   Pastilles et encarts d'état (`bg-red-900/40`, `bg-emerald-950/30`…) :
   pensés pour un fond noir, ils font des taches sombres sur blanc. En clair,
   une teinte légère de la même couleur. */
:root[data-theme="clair"] :is([class^="bg-emerald-900"], [class*=" bg-emerald-900"], [class^="bg-emerald-950"], [class*=" bg-emerald-950"]) { background-color: rgb(16 185 129 / 0.12); }
:root[data-theme="clair"] :is([class^="border-emerald-700"], [class*=" border-emerald-700"], [class^="border-emerald-800"], [class*=" border-emerald-800"]) { border-color: rgb(16 185 129 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-green-900"], [class*=" bg-green-900"], [class^="bg-green-950"], [class*=" bg-green-950"]) { background-color: rgb(34 197 94 / 0.12); }
:root[data-theme="clair"] :is([class^="border-green-700"], [class*=" border-green-700"], [class^="border-green-800"], [class*=" border-green-800"]) { border-color: rgb(34 197 94 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-red-900"], [class*=" bg-red-900"], [class^="bg-red-950"], [class*=" bg-red-950"]) { background-color: rgb(207 73 87 / 0.12); }
:root[data-theme="clair"] :is([class^="border-red-700"], [class*=" border-red-700"], [class^="border-red-800"], [class*=" border-red-800"]) { border-color: rgb(207 73 87 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-amber-900"], [class*=" bg-amber-900"], [class^="bg-amber-950"], [class*=" bg-amber-950"]) { background-color: rgb(245 158 11 / 0.12); }
:root[data-theme="clair"] :is([class^="border-amber-700"], [class*=" border-amber-700"], [class^="border-amber-800"], [class*=" border-amber-800"]) { border-color: rgb(245 158 11 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-orange-900"], [class*=" bg-orange-900"], [class^="bg-orange-950"], [class*=" bg-orange-950"]) { background-color: rgb(249 115 22 / 0.12); }
:root[data-theme="clair"] :is([class^="border-orange-700"], [class*=" border-orange-700"], [class^="border-orange-800"], [class*=" border-orange-800"]) { border-color: rgb(249 115 22 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-yellow-900"], [class*=" bg-yellow-900"], [class^="bg-yellow-950"], [class*=" bg-yellow-950"]) { background-color: rgb(234 179 8 / 0.12); }
:root[data-theme="clair"] :is([class^="border-yellow-700"], [class*=" border-yellow-700"], [class^="border-yellow-800"], [class*=" border-yellow-800"]) { border-color: rgb(234 179 8 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-blue-900"], [class*=" bg-blue-900"], [class^="bg-blue-950"], [class*=" bg-blue-950"]) { background-color: rgb(59 107 181 / 0.12); }
:root[data-theme="clair"] :is([class^="border-blue-700"], [class*=" border-blue-700"], [class^="border-blue-800"], [class*=" border-blue-800"]) { border-color: rgb(59 107 181 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-sky-900"], [class*=" bg-sky-900"], [class^="bg-sky-950"], [class*=" bg-sky-950"]) { background-color: rgb(14 165 233 / 0.12); }
:root[data-theme="clair"] :is([class^="border-sky-700"], [class*=" border-sky-700"], [class^="border-sky-800"], [class*=" border-sky-800"]) { border-color: rgb(14 165 233 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-cyan-900"], [class*=" bg-cyan-900"], [class^="bg-cyan-950"], [class*=" bg-cyan-950"]) { background-color: rgb(6 182 212 / 0.12); }
:root[data-theme="clair"] :is([class^="border-cyan-700"], [class*=" border-cyan-700"], [class^="border-cyan-800"], [class*=" border-cyan-800"]) { border-color: rgb(6 182 212 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-violet-900"], [class*=" bg-violet-900"], [class^="bg-violet-950"], [class*=" bg-violet-950"]) { background-color: rgb(139 92 246 / 0.12); }
:root[data-theme="clair"] :is([class^="border-violet-700"], [class*=" border-violet-700"], [class^="border-violet-800"], [class*=" border-violet-800"]) { border-color: rgb(139 92 246 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-purple-900"], [class*=" bg-purple-900"], [class^="bg-purple-950"], [class*=" bg-purple-950"]) { background-color: rgb(168 85 247 / 0.12); }
:root[data-theme="clair"] :is([class^="border-purple-700"], [class*=" border-purple-700"], [class^="border-purple-800"], [class*=" border-purple-800"]) { border-color: rgb(168 85 247 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-indigo-900"], [class*=" bg-indigo-900"], [class^="bg-indigo-950"], [class*=" bg-indigo-950"]) { background-color: rgb(99 102 241 / 0.12); }
:root[data-theme="clair"] :is([class^="border-indigo-700"], [class*=" border-indigo-700"], [class^="border-indigo-800"], [class*=" border-indigo-800"]) { border-color: rgb(99 102 241 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-rose-900"], [class*=" bg-rose-900"], [class^="bg-rose-950"], [class*=" bg-rose-950"]) { background-color: rgb(244 63 94 / 0.12); }
:root[data-theme="clair"] :is([class^="border-rose-700"], [class*=" border-rose-700"], [class^="border-rose-800"], [class*=" border-rose-800"]) { border-color: rgb(244 63 94 / 0.45); }
:root[data-theme="clair"] :is([class^="bg-teal-900"], [class*=" bg-teal-900"], [class^="bg-teal-950"], [class*=" bg-teal-950"]) { background-color: rgb(20 184 166 / 0.12); }
:root[data-theme="clair"] :is([class^="border-teal-700"], [class*=" border-teal-700"], [class^="border-teal-800"], [class*=" border-teal-800"]) { border-color: rgb(20 184 166 / 0.45); }

/* Emprise au sol des bases (25/10/2026) : au zoom où elle est lisible, elle
   remplace l'épingle « maison » de l'appareil, qui la recouvrait. */
.emprises-lisibles .fleet-home-icon.a-emprise,
.emprises-lisibles .mission-home-icon.a-emprise,
.emprises-lisibles path.a-emprise { display: none; }