:root {
  --fond: #0b0f14;
  --panneau: rgba(14, 20, 28, .92);
  --trait: #1e2a38;
  --texte: #e6edf3;
  --attenue: #8b9bb0;
  --eau: #38bdf8;
  --retardant: #fb923c;
  --accent: #22d3ee;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body { display: flex; flex-direction: column; }

header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--trait);
  flex: none;
}
h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
}
.sous { margin: 3px 0 0; color: var(--attenue); font-size: 13px; }

#carte { flex: 1 1 auto; min-height: 320px; background: var(--fond); }

/* Le fond de carte est éclairci le moins possible : les trajectoires doivent
   rester lisibles, c'est elles le sujet. */
.leaflet-tile { filter: grayscale(.75) brightness(.55) contrast(1.05); }
.leaflet-container { background: var(--fond); }

#panneau {
  flex: none;
  background: var(--panneau);
  border-top: 1px solid var(--trait);
  padding: 12px 20px 14px;
  display: grid;
  gap: 10px;
}

.horloge {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}
.horloge #date { color: var(--attenue); font-size: 14px; }
.horloge #heure { font-size: 30px; font-weight: 700; letter-spacing: .02em; }

.controles { display: flex; align-items: center; gap: 12px; }

button#play {
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--trait);
  border-radius: 50%;
  background: #16202c;
  color: var(--texte);
  font-size: 15px;
  cursor: pointer;
}
button#play:hover { border-color: var(--accent); color: var(--accent); }

input#curseur {
  flex: 1 1 auto;
  accent-color: var(--accent);
  height: 4px;
  cursor: pointer;
}

select#vitesse {
  flex: none;
  background: #16202c;
  color: var(--texte);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 13px;
}

.compteurs { display: flex; gap: 26px; flex-wrap: wrap; }
.compteurs div { display: flex; align-items: baseline; gap: 7px; }
.compteurs b { font-size: 19px; font-variant-numeric: tabular-nums; }
.compteurs span { color: var(--attenue); font-size: 13px; }
.compteurs div:nth-child(2) b { color: var(--eau); }
.compteurs div:nth-child(3) b { color: var(--retardant); }

#flotte summary { cursor: pointer; color: var(--attenue); font-size: 13px; }
#liste-flotte {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 5px 16px;
  font-size: 13px;
}
#liste-flotte li { display: flex; align-items: center; gap: 8px; }
#liste-flotte i {
  width: 16px; height: 3px;
  border-radius: 2px;
  flex: none;
}
#liste-flotte .muet { color: var(--attenue); }

footer {
  flex: none;
  padding: 10px 20px 16px;
  border-top: 1px solid var(--trait);
  color: var(--attenue);
  font-size: 12px;
}
footer p { margin: 0 0 5px; }
footer a { color: var(--attenue); }
.avert { max-width: 78ch; line-height: 1.45; }
.avert strong { color: var(--texte); }

@media (max-width: 620px) {
  .horloge #heure { font-size: 25px; }
  .compteurs { gap: 16px; }
  header { padding: 11px 14px 9px; }
  #panneau, footer { padding-left: 14px; padding-right: 14px; }
}

/* ---- Mode nuit -------------------------------------------------------- */
/* La bascule n'est pas décorative : les bombardiers d'eau ne volent pas de
   nuit. Voir la carte s'assombrir et le ciel se vider explique les longues
   plages sans largage mieux qu'une légende. */
.leaflet-tile { transition: filter 1.2s ease; }
body.nuit .leaflet-tile { filter: grayscale(.9) brightness(.28) contrast(1.15); }
body.nuit { --fond: #05080c; }

.phase {
  font-size: 13px;
  color: var(--attenue);
  padding: 2px 9px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  transition: color .6s ease, border-color .6s ease;
}
body.nuit .phase { color: #a5b4fc; border-color: #312e81; }

.vent { font-size: 13px; color: var(--attenue); margin-left: auto; }
.vent b { color: var(--texte); font-weight: 600; }

.compteurs div:nth-child(4) b { color: #ef4444; }

/* ---- Mobile ----------------------------------------------------------
   Sur téléphone la carte EST le contenu : elle garde la majorité de la
   hauteur, et le panneau se réduit à l'essentiel. Les cibles tactiles sont
   portées à 44 px, en dessous desquelles on rate le bouton en marchant. */
@media (max-width: 620px) {
  .vent { margin-left: 0; width: 100%; }
  .horloge { flex-wrap: wrap; gap: 8px; align-items: center; }
  .horloge #heure { font-size: 24px; }
  .horloge #date { font-size: 12px; width: 100%; }

  header { padding: 9px 13px 7px; }
  h1 { font-size: 16px; letter-spacing: .1em; }
  .sous { font-size: 11px; }

  #carte { min-height: 44vh; }

  #panneau { padding: 10px 13px 12px; gap: 9px; }

  button#play { width: 46px; height: 46px; font-size: 16px; }
  input#curseur { height: 26px; }        /* zone de préhension, pas épaisseur du trait */
  select#vitesse { min-height: 44px; padding: 8px 10px; }

  .compteurs { gap: 12px 18px; }
  .compteurs b { font-size: 17px; }
  .compteurs span { font-size: 11px; }

  #flotte summary { padding: 6px 0; }
  #liste-flotte { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); font-size: 12px; }

  footer { padding: 9px 13px 14px; font-size: 11px; }
  .avert { line-height: 1.4; }
}

/* Le curseur natif est trop fin pour le doigt : on élargit la poignée sans
   toucher à l'apparence du rail. */
input#curseur::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0b0f14;
  cursor: pointer;
}
input#curseur::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0b0f14;
  cursor: pointer;
}

/* Écrans très étroits : on masque le libellé de vitesse, l'icône suffit. */
@media (max-width: 380px) {
  .compteurs div:nth-child(4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-tile, .phase { transition: none; }
}

/* ---- Marqueurs d'appareils -------------------------------------------- */
.avion { pointer-events: none; }
.fleche {
  position: absolute; left: -6px; top: -6px;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid var(--c);
  filter: drop-shadow(0 0 3px rgba(0,0,0,.85));
}
.etiq {
  position: absolute; left: 10px; top: -7px;
  color: var(--c);
  font-size: 10px; font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
}

/* ---- Légende sur la carte --------------------------------------------- */
#carte { position: relative; }
.legende {
  position: absolute; z-index: 500;
  top: 10px; left: 10px; right: 10px;
  max-width: 560px;
  background: rgba(6, 10, 15, .84);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 10px 13px 11px;
  pointer-events: none;
}
.lg-titre {
  font-size: 13px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 7px;
}
.lg-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 3px 18px;
  font-size: 11.5px;
  color: #cbd5e1;
}
.lg-grille span { display: flex; align-items: center; gap: 7px; }
.lg-grille em { color: var(--attenue); font-style: normal; font-size: 10.5px; }
.lg-grille i { flex: none; width: 13px; height: 13px; border-radius: 50%; }
.pt-frp   { background: linear-gradient(90deg,#fde047,#f97316,#dc2626); }
.pt-trait { border-radius: 2px !important; height: 3px !important; background: #22d3ee; }
.pt-brule { background: #120d0a; border: 1px solid #3f3f46; }
.pt-fumee { background: #e5e7eb; opacity: .55; }
.pt-eau   { background: #38bdf8; }
.pt-ret   { background: #fbbf24; }

@media (max-width: 620px) {
  .legende { top: 7px; left: 7px; right: 7px; padding: 8px 10px 9px; }
  .lg-titre { font-size: 11px; margin-bottom: 5px; }
  .lg-grille { grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 10px; }
  .lg-grille em { display: none; }   /* l'écran est trop étroit pour les gloses */
  .etiq { display: none; }           /* et pour les étiquettes d'appareils */
}

/* Fraîcheur de l'observation satellite : discret quand tout va bien, ambré
   quand la dernière vue date — c'est à ce moment que l'absence de foyer
   affiché risque d'être lue comme une absence de feu. */
.regard {
  font-size: 12px; color: var(--attenue);
  padding: 2px 9px; border: 1px solid var(--trait); border-radius: 999px;
}
.regard.vieux { color: #fbbf24; border-color: #78350f; }
.pt-vue { background: #78350f; border: 1px solid #fbbf24; }
@media (max-width: 620px) { .regard { font-size: 11px; padding: 1px 7px; } }

/* ---- Retour au direct -------------------------------------------------
   Discret tant qu'on navigue dans le passé, allumé quand on est calé sur le
   point le plus récent. Le libellé porte l'âge des données plutôt que de
   prétendre à un présent qu'on n'a pas encore. */
button#direct {
  flex: none;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: #16202c;
  color: var(--attenue);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
button#direct:hover { color: var(--texte); border-color: var(--accent); }
button#direct.actif {
  color: #fca5a5;
  border-color: #7f1d1d;
  background: #1a1113;
}
button#direct.actif::first-letter { color: #ef4444; }

@media (max-width: 620px) {
  button#direct { min-height: 44px; padding: 8px 11px; font-size: 11.5px; }
  .controles { flex-wrap: wrap; }
  input#curseur { order: 3; width: 100%; flex-basis: 100%; }
}