: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; }

/* Le titre tient sur UNE ligne : chaque pixel pris ici est pris à la carte. */
header {
  padding: 7px 20px;
  border-bottom: 1px solid var(--trait);
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.sous { margin: 0; color: var(--attenue); font-size: 12px; }
.sous .sep { opacity: .5; }

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

/* Le fond satellite est COLORÉ de jour et sombre de nuit ; `--filtre-fond`
   est recalculé en continu par app.js à partir de l'élévation du soleil.
   La valeur ci-dessous n'est qu'un repli avant le premier rendu.
   ⚠️ Le filtre ne porte que sur l'imagerie : appliqué à `.leaflet-tile` tout
   court, il délavait aussi les étiquettes de communes. */
.fond-carte .leaflet-tile {
  filter: var(--filtre-fond, saturate(1.14) brightness(.97) contrast(1.02));
}
.fond-plan .leaflet-tile { filter: var(--filtre-plan, none); }
.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;
}

/* Vitesse de relecture : posée sur la carte, coin bas gauche — à quelques
   pixels de la barre de temps qu'elle pilote, et hors de tout flux. Même
   traitement visuel que la légende, pour qu'on la lise comme une commande de
   carte et non comme un champ de formulaire perdu dans le panneau. */
select#vitesse {
  position: absolute;
  z-index: 500;
  bottom: 10px;
  left: 10px;
  background: rgba(6, 10, 15, .82);
  backdrop-filter: blur(3px);
  color: var(--texte);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
select#vitesse:hover { border-color: var(--accent); }

.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 engagée, posée sur la carte -------------------------------
   Même famille visuelle que la légende : une pastille dépliable. Elle est
   FERMÉE par défaut — vingt-quatre cases à cocher ne sont utiles qu'au moment
   où l'on cherche un appareil précis, et le reste du temps elles prenaient au
   panneau une place que la carte réclame. */
#flotte {
  position: absolute; z-index: 500;
  top: 10px; right: 10px;
  max-width: 260px;
  background: rgba(6, 10, 15, .84);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  padding: 5px 12px;
}
#flotte summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: var(--attenue);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
#flotte summary::-webkit-details-marker { display: none; }
#flotte summary::after { content: ' ▾'; font-size: 9px; }
#flotte:not([open]) summary::after { content: ' ▸'; }
#flotte summary:hover { color: var(--accent); }
/* ⚠️ La liste défile DANS la pastille. Sans plafond, trente-cinq appareils la
   font dépasser du bas de la carte, et les derniers deviennent inatteignables. */
.flotte-corps { max-height: min(52vh, 420px); overflow-y: auto; padding-right: 2px; }
.flotte-aide { margin: 7px 0 0; font-size: 10.5px; color: var(--attenue); line-height: 1.35; }
#liste-flotte {
  list-style: none;
  margin: 7px 0 2px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 12px;
  font-size: 12px;
}
#liste-flotte li { display: flex; align-items: center; gap: 8px; }
/* Le filtre par appareil : la case est la cible tactile, le libellé entier est
   cliquable. 22 px de haut au minimum — on isole un appareil parmi vingt-quatre
   en série, et rater la case oblige à tout recommencer. */
#liste-flotte label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; min-height: 22px; width: 100%;
}
#liste-flotte input { accent-color: var(--accent); flex: none; margin: 0; cursor: pointer; }
#liste-flotte label:hover { color: var(--accent); }
.flotte-actions { display: flex; gap: 8px; margin: 8px 0 2px; }
.flotte-actions button {
  background: #16202c; color: var(--attenue);
  border: 1px solid var(--trait); border-radius: 6px;
  padding: 3px 11px; font-size: 12px; cursor: pointer;
}
.flotte-actions button:hover { border-color: var(--accent); color: var(--accent); }
#liste-flotte i {
  width: 16px; height: 3px;
  border-radius: 2px;
  flex: none;
}
#liste-flotte .muet { color: var(--attenue); }

/* Une ligne, avertissement compris. Le détail des sources se déplie et
   prend alors toute la largeur, au lieu de s'entasser à droite. */
footer {
  flex: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 6px 20px 7px;
  border-top: 1px solid var(--trait);
  color: var(--attenue);
  font-size: 11.5px;
  line-height: 1.4;
}
footer p { margin: 0; }
footer a { color: var(--attenue); }
.avert { flex: 1 1 auto; min-width: 230px; }
.avert strong { color: var(--texte); font-weight: 600; }

.apropos { flex: none; margin-left: auto; }
.apropos[open] { flex: 1 1 100%; margin-left: 0; }
.apropos summary {
  cursor: pointer; list-style: none; white-space: nowrap;
  user-select: none; color: var(--attenue);
}
.apropos summary::-webkit-details-marker { display: none; }
.apropos summary::after { content: ' ▸'; font-size: 9px; }
.apropos[open] summary::after { content: ' ▾'; }
.apropos summary:hover { color: var(--texte); }
.apropos-corps { max-width: 100ch; padding: 6px 0 2px; display: grid; gap: 5px; }

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

/* ---- Mode nuit -------------------------------------------------------- */
/* Le passage du jour à la nuit n'est pas décoratif : 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.
   La transition CSS ne sert qu'aux sauts — retour au direct, saisie du
   curseur : en lecture, c'est app.js qui fait varier la lumière en continu. */
.fond-carte .leaflet-tile, .fond-plan .leaflet-tile { transition: filter 1s ease; }
.leaflet-layer { transition: opacity 1s ease; }
body.nuit { --fond: #05080c; }

.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 : tout le reste se comprime pour lui
   laisser la hauteur. Les commandes descendent à ~34 px — sous la cible
   tactile confortable de 44 px, mais la barre de temps, elle, garde toute la
   largeur : c'est le geste précis, les boutons ne sont que des interrupteurs.
   Le curseur reste plus haut que son rail pour rester saisissable. */
@media (max-width: 620px) {
  /* L'heure, la fraîcheur satellite et le vent tiennent en deux lignes
     serrées : forcés chacun sur leur ligne, ils mangeaient à eux seuls la
     moitié du panneau. */
  /* ⚠️ De la date au vent, TOUT tient sur une ligne. Chaque élément y est
     donc écrit court : date abrégée, libellés de fraîcheur en deux mots, et
     le mot « vent » retiré — « 7 km/h · E » ne se confond avec rien d'autre
     dans un bandeau qui porte déjà l'heure. Dès qu'un seul déborde, la ligne
     se dédouble et le panneau prend 23 px à la carte. */
  .vent { margin-left: 0; font-size: 12px; }
  .vent .mot { display: none; }
  .horloge { flex-wrap: wrap; gap: 5px 8px; align-items: center; }
  .horloge #heure { font-size: 22px; }
  .horloge #date { font-size: 11.5px; }
  .regard { font-size: 11px; padding: 1px 7px; }

  header { padding: 6px 13px; gap: 7px; }
  h1 { font-size: 13px; letter-spacing: .12em; }
  .sous { font-size: 10.5px; }
  .depuis { display: none; }   /* la date courante est déjà dans le panneau */

  #carte { min-height: 44vh; }

  #panneau { padding: 9px 13px 11px; gap: 8px; }

  .controles { gap: 8px; }
  button#play { width: 34px; height: 34px; font-size: 13px; }
  input#curseur { height: 22px; }        /* zone de préhension, pas épaisseur du trait */
  select#vitesse { bottom: 8px; left: 8px; min-height: 34px; font-size: 11.5px; }

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

  /* Fermée, une pastille dans le coin ; ouverte, elle prend la largeur —
     à 320 px, une colonne de 240 px chevaucherait la légende. */
  #flotte { top: 7px; right: 7px; padding: 5px 10px; max-width: none; }
  /* ⚠️ Dépliée, elle part APRÈS les boutons de zoom : collée à gauche, son
     titre et sa première ligne passaient dessous. */
  #flotte[open] { left: 48px; }
  #flotte summary { padding: 2px 0; }
  .flotte-corps { max-height: 46vh; }
  #liste-flotte { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); font-size: 12px; }

  footer { padding: 6px 13px 8px; font-size: 10.5px; gap: 3px 12px; }
  /* Seule la conclusion survit à la largeur du téléphone — c'est elle qui
     porte l'avertissement ; le préambule explicatif reste sous « sources ». */
  .avert { min-width: 0; }
  .avert-tete { display: none; }
}

/* 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;
}

/* ⚠️ Rien n'est masqué sur les écrans très étroits : le compteur de foyers
   actifs y était escamoté, alors que c'est LE chiffre du sinistre. Les
   compteurs passent à la ligne, ce qui coûte quelques pixels et ne ment pas. */

@media (prefers-reduced-motion: reduce) {
  .fond-carte .leaflet-tile, .fond-plan .leaflet-tile,
  .leaflet-layer { 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 ---------------------------------------------
   Une barre de calques, pas un mode d'emploi : les libellés tiennent en un
   mot et les explications sont passées en `title`. Repliable, parce qu'une
   fois les calques choisis la légende n'a plus rien à dire — et qu'elle
   masquait le nord de la zone de feu. */
#carte { position: relative; }
/* ⚠️ Décalée de la largeur des boutons de zoom, qui occupent le même coin :
   collée à gauche, la légende passait dessous et son titre devenait illisible. */
.legende {
  position: absolute; z-index: 500;
  top: 10px; left: 52px;
  max-width: calc(100% - 62px);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 3px 14px;
  background: rgba(6, 10, 15, .82);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  padding: 5px 12px;
  pointer-events: none;
}
.legende > summary {
  pointer-events: auto;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--attenue);
}
.legende > summary::-webkit-details-marker { display: none; }
.legende > summary::after { content: ' ▾'; font-size: 9px; }
.legende:not([open]) > summary::after { content: ' ▸'; }
.legende > summary:hover { color: var(--accent); }
.lg-grille {
  display: flex; flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 11.5px;
  color: #cbd5e1;
}
.lg-grille i { flex: none; width: 11px; height: 11px; border-radius: 50%; }
.lg-grille em { font-style: normal; color: var(--attenue); font-size: 10px; }
.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-plan  { background: #e6ead9; border: 1px solid #94a3b8; }
.pt-ret   { background: #fbbf24; }
/* Écopage : creux et pointillé — un puisage n'est pas un largage, et la
   pastille doit le dire avant qu'on lise le libellé. */
.pt-ecop  { background: transparent; border: 1.5px dashed #22d3ee; }

@media (max-width: 620px) {
  .legende { top: 7px; left: 48px; max-width: calc(100% - 56px); padding: 5px 10px; gap: 2px 10px; }
  .lg-grille { gap: 2px 10px; font-size: 10.5px; }
  /* L'indicatif reste affiché sur téléphone : sans lui on voit des flèches
     colorées sans savoir QUI largue, alors que c'est la première question. On
     le rétrécit et on le rapproche de la flèche plutôt que de le supprimer. */
  .etiq { font-size: 9px; left: 8px; top: -6px; letter-spacing: .02em; }
}

/* 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; }
@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) {
  /* Une seule rangée, trois commandes : lecture, barre de temps, live. La
     barre garde tout l'espace restant — c'est elle le geste précis, les
     boutons ne sont que des interrupteurs. */
  .controles { flex-wrap: nowrap; gap: 8px; }
  input#curseur { flex: 1 1 auto; width: auto; min-width: 100px; }
  button#direct { min-height: 32px; padding: 5px 10px; font-size: 11px; }
}

/* ---- Légende interactive ---------------------------------------------
   Les cases doivent rester cliquables alors que la légende laisse passer les
   gestes de carte : on rend la pointe aux seuls libellés. */
.legende { pointer-events: none; }
.lg-grille label {
  display: flex; align-items: center; gap: 7px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  padding: 1px 0;
}
.lg-grille label:hover { color: #fff; }
.lg-grille input[type=checkbox] {
  appearance: none;
  width: 13px; height: 13px;
  flex: none;
  border: 1px solid #475569;
  border-radius: 3px;
  background: #0b1219;
  cursor: pointer;
  position: relative;
}
.lg-grille input[type=checkbox]:checked {
  background: #22d3ee;
  border-color: #22d3ee;
}
.lg-grille input[type=checkbox]:checked::after {
  content: '';
  position: absolute; left: 3px; top: 0;
  width: 4px; height: 8px;
  border: solid #06131a;
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
@media (max-width: 620px) {
  .lg-grille label { padding: 3px 0; }   /* cible tactile */
  .lg-grille input[type=checkbox] { width: 16px; height: 16px; }
}

/* Satellite actif mais rien à signaler : ce n'est ni une alerte ni une panne,
   c'est une bonne nouvelle. Vert sobre plutôt qu'ambré. */
.regard.calme { color: #6ee7b7; border-color: #065f46; }

/* ---- Mode direct : on retire ce qui ne s'applique pas ------------------
   Le sélecteur de vitesse pilote la relecture de l'historique. En direct le
   temps suit l'horloge réelle : le laisser proposerait une action sans effet,
   ce qui est pire qu'une absence de commande.

   `display:none` est ici sans danger — et il l'est SEULEMENT parce que le
   sélecteur flotte au-dessus de la carte. Tant qu'il vivait dans la rangée
   des commandes, le retirer du flux rendait sa largeur au curseur : la
   timeline se redimensionnait au moment PRÉCIS où l'on saisissait la poignée,
   c'est-à-dire en quittant le direct, et la position sautait sous le doigt.
   Il fallait alors réserver la place — une ligne vide pendant tout le direct. */
/* ⚠️ Visible UNIQUEMENT pendant une relecture en cours : ni en direct — où le
   temps suit l'horloge — ni à l'arrêt, où changer une vitesse ne produit rien
   de visible et laisse croire à une commande sans effet. Le réglage, lui, est
   mémorisé d'une visite à l'autre. */
select#vitesse { display: none; }
body.lecture:not(.en-direct) select#vitesse { display: block; }

/* Le bouton lecture devient « quitter le direct » : il fige la carte sur
   l'instant courant et rend la main sur la timeline. */
body.en-direct button#play { opacity: .55; }
body.en-direct button#play:hover { opacity: 1; }