/* feuxgironde.fr — refonte.
 *
 * Écrit mobile d'abord, littéralement : les règles de base valent pour un
 * téléphone, et les media queries n'ajoutent que ce qu'un grand écran permet.
 * Quatre visiteurs sur cinq arrivent sur un téléphone ; les traiter en cas
 * particulier d'un affichage de bureau, c'était traiter la majorité en exception.
 *
 * La barre latérale devient un tiroir plein écran, les cartes de synthèse
 * défilent horizontalement, et la ligne de temps garde toute la largeur.
 */

:root {
  --fond: #f6f7f9;
  --fond-carte: #fff;
  --bord: #e3e7ec;
  --bord-fort: #cfd6de;
  --encre: #131922;
  --encre-douce: #5a6675;
  --encre-faible: #8b95a3;
  --accent: #e8590c;
  --accent-doux: #fff2e8;
  --feu: #e03a10;
  --ombre: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.07);
  --ombre-forte: 0 2px 4px rgba(16, 24, 40, 0.06), 0 16px 40px rgba(16, 24, 40, 0.14);
  --r: 14px;
  --r-petit: 9px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* Encoche et coins arrondis sur les côtés. Ils ne valent zéro que sur les
     appareils sans encoche : sur un iPhone tenu à l'horizontale, ce sont une
     quarantaine de pixels de chaque côté, et la page est déclarée
     `viewport-fit=cover`, donc elle s'étend dessous. Seul le bas était pris en
     compte : à l'horizontale, le bord gauche de la carte, la légende et le
     bouton d'ouverture passaient sous l'encoche. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --rail: 260px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0d1117;
    --fond-carte: #151b24;
    --bord: #232c38;
    --bord-fort: #313c4b;
    --encre: #eef2f7;
    --encre-douce: #a3aebd;
    --encre-faible: #75808f;
    --accent: #ff7a3d;
    --accent-doux: #2a1a12;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
    --ombre-forte: 0 2px 4px rgba(0, 0, 0, 0.5), 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

* { box-sizing: border-box; }

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

.hidden { display: none !important; }

button, select, input, textarea { font: inherit; color: inherit; }

/* Champs de saisie : jamais en dessous de 16 px.
 *
 * En dessous de ce seuil, Safari sur iPhone agrandit toute la page au moment où
 * le champ prend le focus — et ne la remet pas comme elle était ensuite. Taper
 * le nom de sa commune faisait donc sauter la carte hors de l'écran, et il
 * fallait pincer pour la retrouver. Les champs héritaient des 15 px du corps de
 * page : un pixel en dessous du seuil suffisait à déclencher le zoom.
 *
 * La règle ne vise que les champs de saisie. Les cases à cocher et les curseurs
 * ne sont pas concernés, et les boutons non plus : seul le focus d'un champ
 * éditable déclenche ce comportement. */
input:not([type="checkbox"]):not([type="range"]):not([type="radio"]),
select,
textarea {
  font-size: 16px;
}

button {
  cursor: pointer;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-petit);
  background: var(--fond-carte);
  /* 44 px : le minimum pour un doigt. Rien d'actionnable ne descend en dessous. */
  min-height: 44px;
  padding: 0 14px;
}
button:hover { border-color: var(--encre-faible); }

.icone {
  min-height: 40px;
  width: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--encre-douce);
  font-size: 17px;
  line-height: 1;
}
.icone:hover { color: var(--encre); border: 0; }

.btn-primaire {
  width: 100%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  min-height: 48px;
}

/* Le même bouton rendu en lien : l'encadré des nouveautés propose d'aller à la
   rétrospective, ce qui est une navigation et non une action. Un <a> le dit au
   navigateur comme aux lecteurs d'écran, et permet l'ouverture dans un onglet. */
a.btn-primaire {
  display: grid;
  place-items: center;
  border-radius: var(--r-petit);
  text-decoration: none;
}

/* Seconde issue de l'encadré. Discrète, mais de la même taille : un jour de feu,
   quelqu'un qui veut la carte tout de suite ne doit pas avoir à viser petit. */
.btn-second {
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-petit);
  background: transparent;
  color: var(--encre-douce);
  font-weight: 500;
  cursor: pointer;
}

.btn-second:hover { border-color: var(--accent); color: var(--accent); }

/* Le même bouton rendu en lien : l'encadré propose d'aller à la rétrospective,
   ce qui est une navigation et non une action. */
a.btn-second {
  display: grid;
  place-items: center;
  text-decoration: none;
}

/* ------------------------------------------------------------------ coque --- */

.coque {
  display: grid;
  grid-template-columns: 1fr;
  /* La rangée doit être DÉCLARÉE, et bornée à zéro en minimum.
   *
   * Sans cette ligne, la grille n'a qu'une rangée implicite, donc `auto` : elle
   * grandit avec son contenu au lieu d'être tenue par la hauteur de l'écran.
   * `.scene`, qui demande `height: 100 %`, calcule alors son pourcentage contre
   * une rangée elle-même dimensionnée par son contenu. Le raisonnement tourne en
   * rond, le navigateur retombe sur `auto`, et la grille de `.scene` cesse de se
   * contraindre : sa ligne `1fr` prend la taille qu'elle veut et la ligne de
   * temps sort de l'écran par le bas.
   *
   * Mesuré sur un cadre de 1440 × 800 : `.scene` faisait 1 153 px et la barre
   * d'animation se trouvait à 1 143 px, soit 343 px sous le bord. Le défaut ne
   * se voyait pas sur un écran haut, où le total tenait par hasard, et il
   * disparaissait en dézoomant — ce qui rallonge la page en pixels CSS.
   *
   * `minmax(0, 1fr)` et non `1fr` : le minimum implicite d'une piste `1fr` est
   * `auto`, ce qui suffirait à laisser le contenu repousser la rangée. */
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
}

/* -------------------------------------------------------- barre latérale --- */

#rail {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  /* Le tiroir couvre tout l'écran : sans ces marges, son titre et son bouton de
     fermeture passaient sous l'encoche à l'horizontale. */
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  /* Fermée par défaut sur téléphone : la carte doit occuper tout l'écran. */
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  overscroll-behavior: contain;
}
#rail.ouvert { transform: none; }

.rail-tete {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--bord);
}
.rail-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--accent-doux);
  font-size: 17px;
}
.rail-titre { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rail-titre b { font-size: 15px; letter-spacing: -0.01em; }
.rail-titre em { color: var(--encre-faible); font-size: 11px; font-style: normal; }

.rail-corps { flex: 1; overflow-y: auto; padding: 10px 10px 4px; }

.rail-section {
  margin: 16px 6px 7px;
  color: var(--encre-faible);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rail-corps > .rail-section:first-of-type { margin-top: 10px; }

.rail-onglet,
.bascule {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-petit);
  background: none;
  text-align: left;
  font-size: 14.5px;
}
.rail-onglet span,
.bascule span { width: 20px; flex: none; text-align: center; font-size: 15px; }
.rail-onglet:hover,
.bascule:hover { background: var(--fond); border: 0; }
.rail-onglet.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }

.bascule { cursor: pointer; }
.bascule input {
  order: 3;
  margin: 0 0 0 auto;
  width: 19px;
  height: 19px;
  flex: none;
  accent-color: var(--accent);
}
.bascule b {
  order: 2;
  color: var(--encre-faible);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rail-champ { padding: 8px 10px 4px; }
.rail-champ label { display: block; color: var(--encre-douce); font-size: 12.5px; margin-bottom: 5px; }
.rail-champ em { display: block; margin-top: 4px; color: var(--encre-faible); font-size: 11.5px; font-style: normal; }
.rail-champ select,
.rail-champ input[type="range"] { width: 100%; }
.rail-champ select {
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-petit);
  background: var(--fond-carte);
}
.rail-champ input[type="range"] { min-height: 34px; accent-color: var(--accent); }

.rail-pied { padding: 12px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--bord); }
.provenance { margin: 0; padding: 0; list-style: none; }
.provenance li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  font-size: 12px;
}
.provenance span { color: var(--encre-faible); }
.provenance b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rail-note { margin: 10px 0 0; color: var(--encre-faible); font-size: 11px; line-height: 1.45; }

/* -------------------------------------------------------------- la scène --- */

/* Sur téléphone, la scène défile verticalement et la carte reçoit une hauteur
   franche. Répartie en grille sur la hauteur de l'écran, elle se faisait écraser
   à 200 pixels par le bandeau, la ligne de temps et les fiches : on ne voyait
   plus le sujet. Mieux vaut une carte généreuse et un défilement pour le reste,
   comme sur n'importe quelle application de cartographie. */
/* Trois rangées seulement : bandeau, carte, ligne de temps. Les fiches de
   synthèse ont rejoint le panneau de droite — elles occupaient une quatrième
   rangée de 120 pixels, prise sur la carte, qui est le sujet. */
.scene {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  /* `min-height: auto` est la valeur par défaut d'un élément de grille, et elle
     l'empêche de rétrécir sous la taille de son contenu. Posé explicitement à
     zéro, c'est la carte qui cède la place — c'est bien elle qui doit céder,
     puisqu'elle reste utilisable plus petite alors qu'une ligne de temps hors
     écran ne sert plus à rien. */
  min-height: 0;
  height: 100%;
  overflow: hidden;
  /* Chaque bande est clouée à sa ligne.
     Sans cela, masquer une bande décale toutes les suivantes : en cachant l'âge
     du satellite sur les écrans bas, la carte tombait sur une ligne `auto` et se
     réduisait à deux pixels, tandis que la ligne de temps héritait du `1fr` et
     occupait 849 pixels. Exactement l'inverse du but recherché. */
  gap: 8px;
  /* Les marges latérales absorbent l'encoche : tout ce qui est posé sur la
     carte — légende, bandeau de message, ligne de temps — suit sans avoir à
     être repositionné un par un. */
  padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l));
}

/* Trois bandes, plus quatre : l'âge du dernier passage satellite est passé dans
   le menu. Il prenait une pleine largeur au-dessus de la carte pour une phrase
   qu'on lit une fois, et sur un téléphone c'était autant de carte en moins. */
#situation { grid-row: 1; }
.zone-carte { grid-row: 2; }
#temps { grid-row: 3; }

/* Âge du dernier passage satellite. Sur sa propre ligne, sous le bandeau : la
   fraîcheur globale du site et celle des foyers n'ont rien à voir, et les
   confondre laisse croire qu'un feu tout juste allumé serait déjà visible. */
#satellite {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--bord);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-petit);
  background: var(--accent-doux);
}
#satellite span { font-size: 13px; flex: none; }
#satellite p { margin: 0; flex: 1; min-width: 0; color: var(--encre-douce); font-size: 11.5px; line-height: 1.35; }
#satellite b { color: var(--encre); font-weight: 650; }

/* --------------------------------------------------- bandeau de situation --- */

/* Bandeau resserré : la phrase gagne en taille, le reste perd en hauteur.
   L'étiquette « situation actuelle » a disparu — elle ne disait rien que le
   contenu ne dise déjà, et coûtait une ligne. */
#situation {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 4px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre);
}
.menu { font-size: 20px; }

.sit-etiquette {
  margin: 0;
  color: var(--encre-faible);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.sit-phrase { min-width: 0; }
.sit-marque {
  margin: 0 0 1px;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--encre-douce);
}
.tld { color: var(--accent); }

/* La phrase la plus importante de la page. Elle doit se lire d'un coup d'œil, à
   bout de bras, sur un téléphone en plein soleil : d'où la taille, le poids, et
   la direction détachée en couleur. */
/* Une seule ligne, toujours. Sur deux lignes la phrase perdait son évidence, et
   le bandeau grandissait d'autant. Elle est tronquée plutôt que repliée : la
   direction est en tête de phrase, c'est le mot qui doit rester. */
.sit-titre {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sit-titre b {
  color: var(--accent);
  /* Un soupçon plus grand que le reste de la phrase : c'est le mot qu'on cherche. */
  font-size: 1.06em;
  white-space: nowrap;
}
/* Deux lignes au maximum sur téléphone : la mise en garde sur la variabilité du
   vent doit être là, mais pas au prix de la moitié de la carte. Le détail complet
   reste dans le panneau « Communes concernées ». */
.sit-sous {
  margin: 1px 0 0;
  color: var(--encre-douce);
  font-size: 12px;
  line-height: 1.3;
  /* Une seule ligne : la mise en garde sur la variabilité du vent doit être là,
     mais le bandeau ne doit pas grandir. Le détail complet est dans le panneau
     « Communes concernées ». */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Communes concernées : masquées sur téléphone dans le bandeau, elles ont leur
   propre panneau. Les empiler ici rendrait le bandeau illisible. */
.sit-communes { display: none; }

/* Accès aux données, posé sur la carte en bas à droite. Dans l'en-tête, avec son
   libellé et sa seconde ligne, il prenait la largeur dont la phrase principale
   avait besoin — et cette phrase est la raison d'être de la page. */
.badge-donnees {
  position: absolute;
  right: 10px;
  /* Au-dessus du bandeau d'attribution de Leaflet, qui occupe le bas à droite :
     recouvrir la mention d'OpenStreetMap n'est pas une option. Quand un message
     est publié, il occupe ce bas d'écran et le badge monte au-dessus de lui :
     sur un téléphone les deux se chevauchaient, et c'est le message qui compte.
     Le décalage est posé en JS (placerAnnonce), parce qu'il dépend de la hauteur
     réelle du texte replié. */
  bottom: 26px;
  transition: bottom 0.18s ease;
  z-index: 815;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  min-height: 44px;
  padding: 6px 13px;
  border-radius: var(--r-petit);
  box-shadow: var(--ombre-forte);
  white-space: nowrap;
}
/* Filet de sécurité, indépendant du calcul JS (placerAnnonce) : dès qu'un
   message est affiché, le badge remonte de toute façon. Sur un téléphone le
   bandeau tient sur trois lignes, et les deux se recouvraient. Le message
   prime — c'est lui qui peut dire de partir. */
.zone-carte:has(#annonce:not(.hidden)) .badge-donnees { bottom: 150px; }

.badge-donnees b { font-size: 13px; font-weight: 600; }
.badge-donnees em { color: var(--encre-faible); font-size: 10.5px; font-style: normal; }

/* ------------------------------------------------------------- la carte --- */

.zone-carte {
  position: relative;
  min-height: 0;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--fond-carte);
  box-shadow: var(--ombre);
}
#carte { position: absolute; inset: 0; background: var(--fond); }

/* Décalé sous les commandes de zoom de la carte, qui occupent le coin haut
   gauche sur environ soixante-dix pixels. À dix pixels du haut, la pastille des
   foyers actifs passait derrière elles et se lisait « oyers actifs » ; le bouton
   de plein écran, lui, disparaissait complètement. */
.carte-hg {
  position: absolute;
  top: 78px;
  left: 10px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Bouton posé sur la carte, rond et discret, à la taille d'un pouce.
   Masqué au-dessus de 900 px : sur un ordinateur la carte occupe déjà presque
   tout l'écran, et un plein écran n'y gagnerait qu'une centaine de pixels pour
   faire disparaître des repères utiles. */
.carte-btn-rond {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: color-mix(in srgb, var(--fond-carte) 94%, transparent);
  box-shadow: var(--ombre);
  font-size: 17px;
  line-height: 1;
  color: var(--encre-douce);
  cursor: pointer;
}

.carte-btn-rond:hover { color: var(--accent); border-color: var(--accent); }
.carte-btn-rond[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); }

@media (max-width: 900px) {
  .carte-btn-rond { display: grid; }
}

/* ------------------------------------------------------------ plein écran --- */
/*
 * Tout ce qui n'est pas la carte se retire ou se réduit. Le principe : sur un
 * téléphone, quelqu'un qui regarde un feu veut voir le feu, pas les commandes
 * qui servent à le regarder. On ne garde que le strict nécessaire pour sortir
 * et pour déplacer l'heure.
 */
body.plein-carte #situation,
body.plein-carte #leg-carte,
body.plein-carte .temps-tete,
body.plein-carte #maintenant,
body.plein-carte .temps-graduations,
body.plein-carte .carte-hd { display: none !important; }

body.plein-carte .scene {
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
}

body.plein-carte .zone-carte { grid-row: 1; }
body.plein-carte #temps { grid-row: 2; }

/* La ligne de temps devient un ruban : le bouton de lecture rapetisse, le
   curseur reste pleine largeur — c'est lui qu'on manipule —, et le libellé
   « animation du panache » disparaît puisqu'il n'apprend plus rien à ce
   stade. */
body.plein-carte #temps {
  grid-template-columns: auto 1fr;
  grid-template-areas: 'jouer piste';
  gap: 8px;
  padding: 6px 10px calc(6px + var(--safe-b));
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--fond-carte) 92%, transparent);
  backdrop-filter: blur(6px);
}

body.plein-carte #temps .rond {
  width: 34px;
  height: 34px;
  min-height: 34px;
  font-size: 13px;
}

body.plein-carte #curseur { min-height: 22px; }

/* Le bouton de sortie prend la place des commandes de zoom, en haut à gauche,
   et devient le seul élément d'interface visible par-dessus la carte. */
/* En plein écran, le padding de la scène disparaît : les commandes de zoom
   remontent, et le bouton de sortie les suit. */
body.plein-carte .carte-hg { top: 76px; }
/* Sélecteur Simplifié / Expert. Absent en dessous de 900 px : les réglages
   qu'il révèle vivent dans le tiroir latéral, replié sur téléphone — appuyer
   sur « Expert » ne produisait donc rien de visible, et un bouton qui ne fait
   rien apprend au visiteur que l'outil est cassé. Les réglages eux-mêmes
   restent atteignables en ouvrant le tiroir. Le passage à `flex` est dans la
   media query de fin de fichier. */
.carte-hd {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 500;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

/* Masquée sur téléphone : le nombre de foyers est déjà dans la barre latérale, et
   sur 430 pixels cette pastille chevauchait les commandes de zoom pour répéter une
   information secondaire. Elle réapparaît sur grand écran, où la place existe
   (voir la media query en fin de fichier). */
.pastille {
  display: none;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--feu);
  color: #fff;
  box-shadow: var(--ombre-forte);
}
.pastille b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pastille span { font-size: 11.5px; opacity: 0.92; }

.segmente {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--fond-carte);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre);
}
.segmente button {
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--encre-douce);
  font-size: 13px;
}
.segmente button.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.segmente.petit button { min-height: 32px; padding: 0 10px; font-size: 12px; }
/* Dans le rail, le sélecteur occupe la largeur : ses deux boutons portent des
   libellés de longueurs très différentes, et centrés ils dansaient d'un état à
   l'autre. */
.rail-segmente { margin: 0 0 6px; }
.rail-segmente button { flex: 1; }

.carte-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 999px;
  box-shadow: var(--ombre);
}

/* La légende vit désormais dans le panneau de droite, sous les fiches, et non
   plus en surimpression de la carte : elle y masquait le coin qu'elle prétendait
   expliquer. */
#legende {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
}
.leg-titre { margin: 0 0 9px; font-size: 13px; font-weight: 650; }
.leg-sous {
  margin: 12px 0 6px;
  color: var(--encre-faible);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.leg-sous em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
#legende ul { margin: 0; padding: 0; list-style: none; }
#legende li { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 12.5px; }
.leg-note { margin: 12px 0 0; color: var(--encre-faible); font-size: 11px; line-height: 1.45; }

.puce { width: 13px; height: 13px; flex: none; border-radius: 4px; }
/* Le pictogramme lui-même en guise de puce : aucune pastille de couleur ne peut
   représenter une flamme, et c'est justement le symbole qu'il faut relier à la
   carte. Le halo est celui de la carte, en plus discret. */
.puce-flamme {
  width: auto;
  height: auto;
  border-radius: 0;
  font-size: 13px;
  line-height: 1;
  font-style: normal;
  filter: drop-shadow(0 0 3px rgba(255, 90, 20, 0.35));
}
/* Ronde comme les repères posés sur la carte : la forme aide autant que la
   couleur à faire le lien entre la légende et ce qu'on voit. */
.puce.ronde { border-radius: 50%; border: 1.5px solid var(--fond-carte); box-shadow: 0 0 0 1px var(--bord-fort); }
.puce.feu-principal { border-radius: 50%; background: var(--feu); box-shadow: 0 0 0 3px rgba(224, 58, 16, 0.25); }
.puce.feu-actif { border-radius: 50%; background: #ff6a2b; }
.puce.feu-recent { border-radius: 50%; background: #ffa869; }
/* Point chaud de la surveillance continue. Anneau tireté et creux, comme sur la
   carte : la forme dit « contour incertain » avant même qu'on lise le texte. */
.puce.point-chaud {
  border-radius: 50%;
  background: none;
  border: 2px dashed #ff6a1f;
}
.puce.fleche { background: none; border-radius: 0; position: relative; }
.puce.fleche::after {
  content: "→";
  position: absolute;
  inset: -3px 0 0;
  color: var(--encre-douce);
  font-size: 14px;
  line-height: 1;
}

/* Source de la pluie affichée. En bas à gauche, au-dessus des commandes de zoom
   plutôt qu'à côté : c'est une légende, elle doit être près de la carte sans
   gêner un geste. */
#pluie-source {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 810;
  margin: 0;
  padding: 6px 10px;
  border: 1px solid var(--bord);
  border-radius: 999px;
  background: var(--fond-carte);
  box-shadow: var(--ombre);
  color: var(--encre-douce);
  font-size: 11.5px;
  white-space: nowrap;
  /* La place du badge de données est réservée à droite : les deux vivent en bas
     de la carte et ne doivent pas se recouvrir. */
  max-width: calc(100% - 190px);
  overflow: hidden;
  text-overflow: ellipsis;
}
#pluie-source b { color: var(--encre); }

#toast {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 860;
  transform: translateX(-50%);
  max-width: calc(100% - 28px);
  padding: 10px 14px;
  border-radius: var(--r-petit);
  background: rgba(19, 25, 34, 0.94);
  color: #fff;
  font-size: 13px;
  box-shadow: var(--ombre-forte);
}

#annonce {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  /* Devant le badge de données et la ligne de temps : un message de la
     préfecture ne se lit pas à moitié caché. Relevé au-dessus des fiches en
     même temps qu'elles : elles sont passées devant le mobilier de la carte,
     et le message doit rester devant elles. */
  z-index: 850;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto;
  padding: 11px 8px 11px 14px;
  border: 1px solid #f0b429;
  border-left-width: 4px;
  border-radius: var(--r-petit);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
.annonce-corps { flex: 1; min-width: 0; font-size: 13.5px; }
#annonce-heure { display: block; margin-top: 3px; color: var(--encre-faible); font-size: 11.5px; font-style: normal; }

#maj {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 790;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  border: 0;
  font-size: 13px;
  box-shadow: var(--ombre-forte);
}

/* Étiquettes posées sur la carte : arrivée estimée, nom du foyer. */
.etq { background: none; border: 0; }
.etq-boite {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  padding: 6px 9px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--encre);
  pointer-events: none;
}
.etq-boite u { display: block; text-decoration: none; color: var(--encre-faible); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.etq-boite b { font-size: 13px; font-weight: 650; }
.etq-boite i { font-style: normal; color: var(--encre-douce); }
.etq-foyer { background: var(--feu); border-color: var(--feu); color: #fff; }
.etq-foyer u,
.etq-foyer i { color: rgba(255, 255, 255, 0.82); }

/* Valeur de l'indice de qualité de l'air, posée sur le champ. Le liseré prend la
   couleur de la classe : on relie ainsi le chiffre à la teinte qui l'entoure. */
.valeur-air {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: block;
  white-space: nowrap;
  padding: 3px 9px 4px;
  border: 1px solid var(--bord);
  border-left: 4px solid var(--c, #999);
  border-radius: 9px;
  background: var(--fond-carte);
  box-shadow: var(--ombre);
  /* Cliquable : la pastille donne un chiffre, le détail derrière dit lequel des
     polluants le dégrade — sur un feu, c'est PM2,5 qui compte pour la santé. */
  cursor: pointer;
}
.valeur-air:hover { border-color: var(--bord-fort); }
/* Pastille posée par le visiteur là où il a touché : plus marquée que les trois
   pastilles automatiques, pour qu'on reconnaisse la sienne au premier coup d'œil. */
.valeur-air.posee {
  border-color: var(--c, #999);
  border-left-width: 4px;
  box-shadow: var(--ombre-forte);
}
.valeur-air.posee u::after { content: ' · votre point'; color: var(--accent); }
/* Le sujet écrit au-dessus du chiffre : « 68 » seul ne dit pas de quoi il parle,
   et un nombre sans unité sur une carte de crise s'interprète au hasard. */
.valeur-air u {
  display: block;
  text-decoration: none;
  color: var(--encre-faible);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.va-ligne { display: flex; align-items: baseline; gap: 5px; }
.valeur-air b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.valeur-air i { color: var(--encre-douce); font-size: 10.5px; font-style: normal; }

/* Repère de commune concernée. Une pastille, rien de plus : le détail vient au
   survol ou au toucher. Les cadres permanents recouvraient la carte. */
/* Le conteneur est nettement plus grand que la pastille visible : c'est la
   surface qu'un pouce doit pouvoir viser. Ses dimensions viennent de l'icône
   Leaflet, qui les pose en style inline — inutile de les répéter ici. */
.repere-hote {
  background: none;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.repere {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c, #f5820b);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease;
}
.repere-hote:hover .repere { transform: scale(1.35); }

/* Ordre de superposition des fiches — celles qui s'ouvrent quand on touche la
   carte.
 *
 * Elles étaient à 770-778, sous tout le mobilier permanent de la carte : le
 * bouton « Ma commune » (790), la source de la pluie (810), le badge de données
 * (815). Or sur téléphone « Ma commune » passe en haut à DROITE, exactement où
 * les fiches posent leur croix de fermeture. La fiche s'ouvrait donc avec sa
 * croix dessous, impossible à toucher : il fallait deviner qu'on pouvait la
 * fermer autrement, ou vivre avec.
 *
 * Le principe qui règle la question : ce qu'on vient d'ouvrir soi-même passe
 * devant ce qui est là en permanence. Une fiche est éphémère et se ferme ; un
 * bouton de commande, non. Restent au-dessus des fiches, et c'est voulu : le
 * message publié aux visiteurs, les messages de confirmation, le tiroir et les
 * fenêtres modales.
 *
 * Fiche de commune, ancrée en bas à droite : les commandes de zoom occupent le
 * coin bas gauche et passent par-dessus quoi qu'on fasse. */
#fiche-commune {
  position: absolute;
  right: 10px;
  /* Au-dessus du badge de données, qui occupe le coin. */
  bottom: 84px;
  z-index: 830;
  width: min(300px, calc(100% - 74px));
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#fc-fermer { position: absolute; top: 5px; right: 5px; }

/* Fiche de qualité de l'air. Même coin et même forme que la fiche commune :
   deux fiches d'aspect différent au même endroit se liraient comme deux outils
   différents alors que c'est le même geste — toucher pour en savoir plus. */
#fiche-air {
  position: absolute;
  right: 10px;
  bottom: 84px;
  z-index: 832;
  width: min(300px, calc(100% - 74px));
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#fa-fermer { position: absolute; top: 5px; right: 5px; }
.fa-lieu { margin: 0 26px 2px 0; font-size: 15.5px; font-weight: 650; }
.fa-quand { margin: 0 0 8px; color: var(--encre-faible); font-size: 12px; }
.fa-indice { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.fa-indice b { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.fa-indice > span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; }
.fa-indice i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fa-polluants { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid var(--bord); }
.fa-polluants li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 2px 0; }
.fa-polluants span { color: var(--encre-douce); }
.fa-polluants b { font-variant-numeric: tabular-nums; font-weight: 600; }
.fa-note { margin: 8px 0 0; color: var(--encre-douce); font-size: 11.5px; line-height: 1.45; }
.lien-discret {
  margin-top: 9px;
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  color: var(--encre-faible);
  font-size: 12px;
  text-decoration: underline;
}
.lien-discret:hover { color: var(--accent); }
.fc-nom { margin: 0 26px 3px 0; font-size: 15.5px; font-weight: 650; }
.fc-quand { margin: 0; color: var(--accent); font-size: 13.5px; font-weight: 600; }
.fc-etat { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font-size: 13px; }
.fc-etat i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.fc-detail { margin: 3px 0 0; color: var(--encre-douce); font-size: 12px; }
.fc-note {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--bord);
  color: var(--encre-faible);
  font-size: 11px;
  line-height: 1.45;
}
.fc-note strong { color: var(--encre-douce); }

/* ---------------------------------------------------------- ligne de temps --- */

#temps {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "tete tete tete" "jouer piste maint";
  align-items: center;
  gap: 8px 8px;
  padding: 10px 12px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre);
}
.temps-tete { grid-area: tete; display: flex; align-items: baseline; gap: 10px; }

/* Passage vers la rétrospective, posé au bout de la ligne de temps.
   Volontairement discret : c'est une invitation à regarder en arrière, pas une
   commande de crise. Elle ne doit rien prendre à ce qui brûle maintenant. */
.lien-retro {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 4px;
  border: 1px solid var(--bord-fort);
  border-radius: 999px;
  color: var(--encre-douce);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
}

.lien-retro:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-doux);
}

.lien-retro span[aria-hidden] { font-size: 13px; }
.lien-retro .lr-court { display: none; }

/* Sous 900 px, la phrase entière pousse l'heure hors du cadre : on garde le
   sens, on perd les mots superflus. */
@media (max-width: 900px) {
  .lien-retro .lr-long { display: none; }
  .lien-retro .lr-court { display: inline; }
}

/* Le rail est une navigation : son lien vers la rétrospective doit se comporter
   comme les boutons d'onglet qui l'entourent, sans soulignement de lien. */
a.rail-onglet { text-decoration: none; color: inherit; }
.temps-tete b { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
#jouer { grid-area: jouer; }
.temps-piste { grid-area: piste; min-width: 0; }
#maintenant { grid-area: maint; }

.rond {
  width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
}

#curseur { width: 100%; min-height: 34px; accent-color: var(--accent); }
.temps-graduations {
  display: flex;
  justify-content: space-between;
  margin-top: -2px;
  color: var(--encre-faible);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
/* Sous 420 px, les repères se chevauchent et deviennent illisibles : l'heure
   exacte est de toute façon écrite en clair au-dessus du curseur. */
@media (max-width: 420px) {
  .temps-graduations { display: none; }
  #maintenant { padding: 0 10px; font-size: 12px; }
}

/* ------------------------------------------------------ cartes de synthèse --- */

/* Dans le panneau de droite, les fiches s'empilent : elles y ont toute la
   hauteur qu'il faut, et il n'y a plus de raison de les faire défiler
   horizontalement comme lorsqu'elles étaient sous la carte. */
#fiches {
  display: grid;
  gap: 8px;
}

.fiche {
  padding: 10px 12px;
  border: 1px solid var(--bord);
  border-radius: var(--r-petit);
  background: var(--fond);
}
.fiche-tete {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  color: var(--encre-faible);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.fiche-valeur { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.fiche-detail { margin: 2px 0 0; color: var(--encre-douce); font-size: 12px; line-height: 1.4; }
.fiche-note { margin: 4px 0 0; color: var(--encre-faible); font-size: 11px; }
.courbe { display: block; width: 100%; height: 34px; margin-top: 6px; overflow: visible; }

.liens { margin: 7px 0 0; padding: 0; list-style: none; }
.liens li { padding: 2px 0; }
.liens a { color: var(--accent); font-size: 12.5px; }

/* ----------------------------------------------------- tiroir d'informations --- */

#tiroir {
  position: fixed;
  inset: auto 0 0;
  z-index: 950;
  max-height: 82vh;
  /* Même raison que le tiroir latéral : ancré aux deux bords, il passait sous
     l'encoche à l'horizontale. */
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--bord);
  border-radius: var(--r) var(--r) 0 0;
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#tiroir header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 8px 10px 16px;
  border-bottom: 1px solid var(--bord);
}
#tiroir h2 { margin: 0; font-size: 15.5px; font-weight: 650; }
.tiroir-actions { display: flex; align-items: center; gap: 2px; }
.tiroir-actions .icone { font-size: 19px; }
#tiroir-corps { overflow-y: auto; padding: 12px 16px calc(16px + var(--safe-b)); }
.tiroir-fraicheur { margin: 0 0 10px; color: var(--encre-faible); font-size: 11.5px; }
.tiroir-fraicheur b { color: var(--encre-douce); font-variant-numeric: tabular-nums; }

.liste-communes { margin: 0; padding: 0; list-style: none; }
.liste-communes li {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 9px 0;
  border-top: 1px solid var(--bord);
}
.liste-communes li:first-child { border-top: 0; }
.lc-puce { width: 11px; height: 11px; border-radius: 50%; }
.lc-nom { font-size: 14px; font-weight: 600; }
.lc-heure { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-detail { grid-column: 2 / -1; color: var(--encre-douce); font-size: 12px; }
/* Historique des survols. Même grammaire que la liste des communes — une ligne,
   une heure alignée, un détail en seconde ligne — pour que le tiroir garde une
   seule façon de présenter une liste. */
.liste-passages { margin: 10px 0 0; padding: 0; list-style: none; }
.lp-jour {
  margin-top: 12px;
  padding-bottom: 4px;
  color: var(--encre-faible);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp-jour:first-child { margin-top: 0; }
.lp-ligne {
  display: grid;
  /* L'heure d'abord et à largeur fixe : c'est la colonne qu'on balaie du regard
     pour se repérer, et elle ne doit pas danser d'une ligne à l'autre. */
  grid-template-columns: 46px 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 0;
  border-top: 1px solid var(--bord);
}
.lp-heure {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--encre-douce);
}
.lp-nom { font-size: 14px; font-weight: 600; }
.lp-compte { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-detail {
  grid-column: 2 / -1;
  color: var(--encre-faible);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
/* Les publications de contours ne sont pas des observations de chaleur : un
   liseré ambre les distingue sans les sortir de la chronologie, qui est
   précisément ce qu'on veut lire d'un seul tenant. */
.lp-effis { border-left: 2px solid #b36a3a; padding-left: 8px; margin-left: -10px; }
.lp-effis .lp-nom { color: #d08a55; }

.tiroir-note { margin: 14px 0 0; color: var(--encre-faible); font-size: 11.5px; line-height: 1.5; }
.tiroir-note strong { color: var(--encre-douce); }

/* ------------------------------------------------------------------ modale --- */

.modal-fond {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 14, 20, 0.6);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.modal {
  width: min(520px, 100%);
  /* Bornée à la hauteur de l'écran, quoi qu'on y mette. Une fenêtre plus haute
     que l'écran est une fenêtre dont on ne voit jamais le bouton de fermeture,
     et sur un téléphone tenu à l'horizontale cela arrive vite. */
  max-height: min(86vh, 820px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
.modal h2 { margin: 0 0 12px; font-size: 19px; }
.modal p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.modal-cle {
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  background: var(--accent-doux);
}
.modal-signature { color: var(--encre-faible); font-size: 13px; }

/* Fiche « Comment ça marche ». Plus longue que les autres fenêtres : elle
   explique, elle ne prévient pas. Elle défile donc dans sa propre boîte plutôt
   que de pousser la page, et reste bornée à la hauteur de l'écran — sur un
   téléphone, une fenêtre plus haute que l'écran est une fenêtre dont on ne voit
   jamais le bouton de fermeture. */
.modal-long {
  width: min(560px, 100%);
  max-height: min(84vh, 780px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal-long h3 {
  margin: 20px 0 8px;
  font-size: 14.5px;
  color: var(--accent);
  letter-spacing: -0.005em;
}
.modal-long h3:first-of-type { margin-top: 14px; }

/* Les deux ou trois phrases qui, si elles ne sont pas lues, laissent le
   visiteur avec une idée fausse de ce qu'il regarde. */
.me-cle {
  padding: 11px 13px;
  border-left: 3px solid var(--feu);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  background: color-mix(in srgb, var(--feu) 7%, transparent);
}

.me-liste { margin: 0 0 14px; padding-left: 18px; }
.me-liste li { margin-bottom: 7px; font-size: 13.5px; line-height: 1.5; color: var(--encre-douce); }
.me-liste b { color: var(--encre); font-weight: 650; }

/* ------------------------------------------------- objets posés sur la carte --- */

/* Réimpression des noms de lieux et des routes par-dessus les couches de
   données, via le filtre défini dans v2.html. */
.tuiles-etiquettes { filter: url(#encre-carte); }

/* Étiquettes sur photo aérienne. Le halo sombre n'est pas décoratif : une
   ortho-photo porte aussi bien des forêts noires que des champs de sable et des
   toitures blanches, et un texte blanc sans détourage devient illisible sur la
   moitié claire de l'image. Deux ombres serrées font le tour du glyphe. */
.tuiles-etiquettes-claires {
  filter: url(#encre-claire)
    drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
    drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
}

/* Le radar est désaturé : son nuancier est fait pour une carte de pluie, où il
   est le seul sujet. Ici, il ne doit pas reprendre aux foyers l'attention qui
   leur revient. */
.tuiles-radar { filter: saturate(0.55) brightness(0.95); }

.map-emoji {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 7px rgba(255, 70, 0, 0.55));
  cursor: pointer;
  transition: transform 0.12s ease;
}
.map-emoji:hover { transform: scale(1.2); }
/* Foyer vu récemment mais pas au dernier passage du satellite.
 *
 * Il était à 45 % d'opacité et 40 % de désaturation, et il perdait au passage le
 * halo qui le décolle du fond. Résultat : un feu qui brûle peut-être encore
 * s'effaçait presque, et par-dessus le champ de qualité de l'air en rouge ou en
 * violet il disparaissait pour de bon — le jour même où l'on cherche les foyers.
 *
 * Le malentendu était de fond, pas seulement de contraste. Pâle se lit
 * « faible », « en train de s'éteindre ». Or la pâleur ne dit rien de l'état du
 * feu : elle dit qu'AUCUN SATELLITE N'EST REPASSÉ DEPUIS. Le feu peut être
 * maîtrisé comme il peut être en pleine reprise, personne n'en sait rien. Le
 * pictogramme doit donc rester franchement visible ; c'est la TAILLE, réduite de
 * 22 %, qui porte la distinction, pas l'effacement. */
/* Fiche d'un moyen aérien : même coin et même forme que les fiches de foyer,
   pour que le geste soit le même. */
#fiche-avion {
  position: absolute;
  right: 10px;
  bottom: 84px;
  z-index: 836;
  width: min(300px, calc(100% - 74px));
  max-height: calc(100% - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#fav-fermer { position: absolute; top: 5px; right: 5px; }
#fav-indicatif { font-variant-numeric: tabular-nums; }

/* Moyens aériens. Un liseré sombre et un halo froid les distinguent nettement
   des flammes : ce sont les seuls objets observés de la carte, pas calculés. */
.map-avion {
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: #22d3ee;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 6px rgba(34, 211, 238, 0.7));
  cursor: pointer;
}
/* Au sol — en rechargement — l'appareil compte moins : il est là sans agir. */
.map-avion.au-sol { color: #94a3b8; opacity: 0.7; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
/* Position datant de plus d'une minute : l'appareil est là, mais plus tout à
   fait là. L'estompe le dit sans qu'on ait à lire l'infobulle. */
.map-avion.ancienne { opacity: 0.45; }

.map-emoji.pale {
  opacity: 0.75;
  filter: grayscale(0.15) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 5px rgba(255, 120, 40, 0.4));
}

/* Leaflet place ses commandes et son copyright à un z-index de 1000, ce qui les
   faisait passer par-dessus le panneau de droite : la mention OpenStreetMap
   restait au premier plan, posée sur les données. On les ramène au-dessus de la
   carte mais sous les panneaux de l'interface. */
.leaflet-top,
.leaflet-bottom { z-index: 800 !important; }

/* Toile du champ de qualité de l'air. Elle vit dans un plan Leaflet intercalé
   entre les tuiles et les formes, d'où l'absence de z-index ici : c'est le plan
   qui décide. */
.air-toile {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Toile de l'animation du vent. Elle est posée par-dessus la carte et le panache
   — c'est ce qui donne l'impression de l'air poussant la fumée — mais reste sous
   les repères et les boutons, et ne prend aucun clic. */
.vent-toile {
  position: absolute;
  inset: 0;
  z-index: 430;
  pointer-events: none;
}

/* Les commandes de zoom de Leaflet, alignées sur le reste de l'interface. */
.leaflet-control-zoom a {
  border-radius: var(--r-petit) !important;
  color: var(--encre) !important;
  background: var(--fond-carte) !important;
  border-color: var(--bord-fort) !important;
}
.leaflet-bar { border: 0 !important; box-shadow: var(--ombre) !important; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.75) !important;
  font-size: 10px !important;
}
@media (prefers-color-scheme: dark) {
  .leaflet-control-attribution {
    background: rgba(13, 17, 23, 0.75) !important;
    color: var(--encre-faible) !important;
  }
  .leaflet-control-attribution a { color: var(--encre-douce) !important; }
}

/* Mode simplifié : les réglages fins disparaissent. C'est le défaut, et la
   raison est simple — l'ouverture latérale d'un panache n'intéresse personne
   quand on cherche à savoir si la fumée arrive chez soi. */
body:not(.expert) .expert-seul { display: none; }

@media (prefers-reduced-motion: reduce) {
  #rail { transition: none; }
}

/* ------------------------------------------------------------ écrans bas ---
 *
 * Signalé par une utilisatrice sur MacBook : la ligne de temps — celle qui
 * commande l'animation du panache — passait sous le bas de l'écran, et rien ne
 * permettait d'y accéder puisque la page ne défile jamais.
 *
 * Un MacBook 13 pouces affiche 900 px de haut, dont Safari retire sa barre
 * d'outils, sa barre de favoris et sa barre d'onglets : on descend couramment
 * sous 700 px utiles, là où un PC en 1920×1080 en garde plus de 900. D'où un
 * défaut qui ne se voyait que sur Mac, sans être un défaut de Safari.
 *
 * Le cadre consomme 249 px : bandeau 84, âge du satellite 34, ligne de temps
 * 81, écarts et marges 50. On en rend une partie, par paliers, en commençant
 * par ce qui se retrouve ailleurs dans l'interface. */
@media (max-height: 780px) {
  .scene { gap: 8px; padding: 8px; }
  #situation { padding: 6px 12px 6px 14px; }
  .sit-titre { font-size: 18px; }
  /* La phrase longue disparaît, le titre reste : il porte déjà la direction du
     panache, qui est l'information principale du bandeau. */
  .sit-sous { display: none; }
}

@media (max-height: 660px) {
  /* Cette règle masquait l'âge du dernier passage satellite pour rendre sa
     bande à la carte. Elle n'a plus lieu d'être : le bandeau vit désormais dans
     le menu, où il ne coûte rien à la hauteur disponible. */
  #temps { padding: 8px 12px; gap: 6px 10px; }
  .rond { width: 38px; min-height: 38px; }
  #curseur { min-height: 28px; }

  /* Les graduations horaires étaient supprimées ici, et c'était le mauvais
     arbitrage. Sur un écran bas, la ligne de temps est justement ce qui reste
     utile quand la carte rétrécit : sans « Maintenant », « +3 h », « +6 h », le
     curseur ne renseigne plus sur ce qu'on déplace. C'est la carte qui doit
     céder la place, pas la seule commande qui donne du sens au curseur.
     Elles sont donc gardées, simplement resserrées. */
  .temps-graduations { font-size: 9px; margin-top: -3px; }
}

/* ------------------------------------------------------- à partir du bureau --- */

@media (min-width: 900px) {
  .coque { grid-template-columns: var(--rail) minmax(0, 1fr); }

  #rail {
    position: relative;
    inset: auto;
    transform: none;
    border-right: 1px solid var(--bord);
  }
  #rail-fermer,
  #rail-ouvrir { display: none; }

  .scene { gap: 10px; padding: 10px; }

  .pastille:not(.hidden) { display: flex; }

  /* Le sélecteur Simplifié / Expert n'apparaît qu'ici : c'est à partir de cette
     largeur que la barre latérale est dépliée en permanence, donc que le mode
     expert change quelque chose de visible à l'écran. */
  .carte-hd { display: flex; }

  /* La phrase reçoit une largeur plancher. Ce sont les pastilles de communes qui
     cèdent la place quand l'écran manque, jamais l'inverse : une commune de moins
     se remplace par le panneau, une phrase tronquée ne se remplace par rien. */
  #situation {
    grid-template-columns: minmax(340px, 1fr) minmax(0, auto) auto;
    gap: 16px;
    padding: 9px 12px 9px 16px;
  }
  .sit-titre { font-size: 22px; }
  .sit-sous { -webkit-line-clamp: 2; }
  .sit-communes { min-width: 0; overflow: hidden; }

  /* Les communes concernées reviennent dans le bandeau : à cette largeur elles
     tiennent, et c'est l'information que l'on vient chercher en premier. */
  .sit-communes {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--bord);
  }
  .sit-communes li { padding: 0 16px; border-right: 1px solid var(--bord); }
  .sit-communes li:last-child { border-right: 0; }
  .sc-nom { display: block; font-size: 13px; font-weight: 600; }
  .sc-etat { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; }
  .sc-etat i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .sc-quand { display: block; margin-top: 1px; color: var(--encre-faible); font-size: 11px; }

  #temps {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas: "tete jouer piste maint";
    gap: 14px;
    padding: 12px 16px;
  }
  .temps-tete { flex-direction: column; align-items: flex-start; gap: 1px; }

  /* Le panneau devient une colonne à droite : sur un grand écran, une feuille
     venant du bas recouvrirait la carte pour rien. */
  #tiroir {
    inset: 10px 10px 10px auto;
    width: 352px;
    max-height: none;
    border-radius: var(--r);
  }
}

@media (min-width: 1280px) {
  :root { --rail: 276px; }
  .sit-titre { font-size: 22px; }
}

/* ------------------------------------------- vulgarisation (essai V3) --- */

/* Légende posée sur la carte, présente à toutes les largeurs.
   Elle était dans la barre latérale, donc invisible sur téléphone — et c'est
   précisément sur téléphone que les gens lisent cette carte. Sans elle, les
   trois opacités de foyer et la bande grise ne veulent rien dire. */
#leg-carte {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 760;
  max-width: min(268px, calc(100% - 20px));
  border: 1px solid var(--bord);
  border-radius: var(--r-petit);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
  overflow: hidden;
}
#leg-carte-plier {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}
#leg-carte-plier span { font-size: 13px; }
#leg-carte-corps {
  list-style: none;
  margin: 0;
  padding: 2px 10px 8px;
}
/* La flamme se pose comme les autres puces, à la même largeur, pour que les
   libellés restent alignés. */
.lc-flamme {
  width: 14px;
  flex: none;
  font-size: 12px;
  line-height: 1;
  font-style: normal;
  text-align: center;
  filter: drop-shadow(0 0 3px rgba(255, 90, 20, 0.4));
}

#leg-carte-corps li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--encre-douce);
}
#leg-carte-corps b { color: var(--encre); font-weight: 600; }
#leg-carte.plie #leg-carte-corps { display: none; }

/* Les pastilles de la légende reprennent exactement les teintes et les
   opacités du dessin : une légende approximative ne sert à rien. */
.lc-feu {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
}
.lc-actif { background: rgba(255, 59, 31, 0.34); border: 1.5px solid #ff3b1f; }
.lc-recent { background: rgba(255, 140, 66, 0.22); border: 1.5px solid #ff8c42; }
.lc-ancien { background: rgba(139, 133, 120, 0.13); border: 1.5px solid #8b8578; }
/* Point chaud de la surveillance continue. Anneau tireté et creux, exactement
   comme sur la carte : la forme dit « contour incertain » avant qu'on lise le
   texte, et elle ne peut pas être confondue avec un foyer plein. */
.lc-chaud {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  background: none;
  border: 2px dashed #ff6a1f;
}
/* Rond, comme les foyers, parce que c'est bien un repère de carte — et non une
   bande, réservée à la fumée qui, elle, s'étire. Les couleurs sont exactement
   celles du polygone dessiné sur la carte : une légende qui approxime la teinte
   qu'elle explique ne sert à rien. */
.lc-brule {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  background: rgba(43, 26, 16, 0.52);
  border: 1.5px solid #b36a3a;
}
.lc-fumee {
  width: 22px;
  height: 11px;
  flex: none;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(126, 134, 145, 0.25), rgba(33, 38, 46, 0.72));
}

/* Explication des particules. */
.mp-bloc { margin: 0 0 12px; font-size: 14px; line-height: 1.55; }
.mp-bloc b { color: var(--accent); font-size: 15px; }
.mp-note { margin: 0 0 10px; color: var(--encre-douce); font-size: 12.5px; line-height: 1.5; }

/* Fiche d'un foyer. Même coin et même forme que les autres fiches : c'est le
   même geste — toucher pour comprendre. */
#fiche-foyer {
  position: absolute;
  right: 10px;
  bottom: 84px;
  z-index: 834;
  width: min(300px, calc(100% - 74px));
  padding: 12px 14px;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#ff-fermer { position: absolute; top: 5px; right: 5px; }
.ff-etat { display: flex; align-items: center; gap: 8px; margin: 0 26px 2px 0; font-size: 15px; font-weight: 650; }
.ff-etat i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ff-quand { margin: 0 0 8px; color: var(--encre-faible); font-size: 12px; }
.ff-lignes { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--bord); }
.ff-lignes li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 12.5px; }
.ff-lignes span { color: var(--encre-douce); }
.ff-lignes b { font-weight: 600; }
.ff-fumee {
  margin: 9px 0 0;
  padding: 7px 9px;
  border-radius: var(--r-petit);
  background: var(--fond);
  font-size: 12.5px;
  line-height: 1.45;
}
.ff-note { margin: 8px 0 0; color: var(--encre-douce); font-size: 11.5px; line-height: 1.45; }

/* Sur téléphone, la légende doit tenir sans mordre sur le badge de données ni
   couvrir la carte : 268 px sur un écran de 390 px, c'était les deux à la fois. */
@media (max-width: 620px) {
  #leg-carte { max-width: 196px; }
  #leg-carte-plier { min-height: 30px; font-size: 11px; padding: 0 8px; }
  #leg-carte-corps { padding: 1px 8px 6px; }
  #leg-carte-corps li { font-size: 10.5px; gap: 6px; }
  .lc-feu { width: 12px; height: 12px; }
  .lc-brule { width: 12px; height: 12px; }
  .lc-fumee { width: 18px; height: 9px; }
}

/* Étiquette accrochée du côté où il y a de la place, au lieu d'être centrée et
   coupée par le bord de la carte. */
.etq-boite.etq-a-gauche { transform: translate(-12px, -100%); }
.etq-boite.etq-a-droite { transform: translate(calc(-100% + 12px), -100%); }

/* Onglets de la fiche « ici ».
   Hauteur fixe : le panneau ne doit pas sauter quand on passe d'un onglet à
   l'autre, sinon la carte se réorganise sous le doigt. */
.fa-onglets { margin: 8px 0 0; align-self: flex-start; flex: none; }
/* Seule zone qui défile. `min-height: 0` est indispensable : sans lui, un enfant
   flexible refuse de rétrécir sous la taille de son contenu et déborde. */
/* Seule zone qui défile.
   Le plancher de hauteur sert à figer la fiche : sans lui, passer de « Fumée »
   à « Air » la faisait grandir de 66 px, et la carte se réorganisait sous le
   doigt au moment même où l'on change d'onglet. Il est exprimé en `min()` pour
   qu'un écran très bas — un téléphone à l'horizontale — le réduise au lieu de
   faire déborder la fiche. */
/* Seule zone qui défile, et elle prend tout ce que la fiche lui laisse.
   `min-height: 0` est indispensable : sans lui, un enfant flexible refuse de
   rétrécir sous la taille de son contenu et ferait déborder la fiche. */
.fa-vues {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.fa-vue { padding-top: 2px; }

/* Synthèse des heures à venir, en tête de la fiche « ici ».
   Volontairement compacte : deux ou trois lignes, jamais un paragraphe. Le
   liseré de gauche prend la couleur de ce qui est annoncé — vert quand il n'y a
   rien, ce qui est le cas le plus fréquent et doit se voir en un coup d'œil. */
.ici-synthese {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-left: 3px solid var(--syn, #22c55e);
  border-radius: 0 var(--r-petit) var(--r-petit) 0;
  background: var(--fond);
}
.syn-fumee {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.syn-fumee i {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--syn, #22c55e);
}
.syn-air { margin: 4px 0 0 16px; font-size: 12.5px; color: var(--encre-douce); line-height: 1.35; }
/* La recommandation sanitaire est citée, pas formulée par le site : elle est
   donc mise à distance typographiquement, comme une citation. */
.syn-conseil {
  margin: 5px 0 0 16px;
  padding-top: 5px;
  border-top: 1px solid var(--bord);
  font-size: 11.5px;
  color: var(--encre-faible);
  line-height: 1.4;
}
.syn-conseil:empty, .syn-air:empty { display: none; }

/* Sur téléphone, l'onglet ouvert par défaut doit tenir SANS défilement : c'est
   la réponse à la question posée, et un panneau qu'il faut faire défiler pour
   finir une phrase se lit à moitié. Quelques dixièmes de pixel sur chaque
   ligne suffisent à la faire entrer. */
@media (max-width: 620px) {
  .ici-synthese { padding: 7px 9px; }
  .syn-fumee { font-size: 13px; line-height: 1.35; }
  .syn-air { font-size: 12px; }
  .syn-conseil { font-size: 11px; }

  /* Le cadre de la fiche — titre, onglets, avertissement — mangeait 43 % de sa
     hauteur, si bien que l'indice de l'air chiffré tombait sous la ligne de
     flottaison. Chaque pixel repris ici est un pixel rendu au contenu. */
  .fa-onglets { margin-top: 6px; padding: 2px; }
  .fa-onglets button { min-height: 30px; padding: 0 12px; }
  #fiche-air .fa-lieu { margin-bottom: 0; }
  .ici-avert { margin-top: 6px; font-size: 10px; line-height: 1.35; }
  #vue-maintenant .ici-bloc { margin-top: 8px; padding-top: 7px; }
}

/* Fiche « ici » : deux questions, deux blocs. */
.ici-bloc { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--bord); }
.ici-titre {
  margin: 0 0 5px;
  color: var(--encre-faible);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ici-titre em { font-style: normal; color: var(--accent); }
.ici-reponse { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 650; }
.ici-reponse i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ici-pourquoi { margin: 4px 0 0; color: var(--encre-douce); font-size: 11.5px; line-height: 1.45; }
.ici-heures { margin: 9px 0 0; color: var(--encre-faible); font-size: 11px; line-height: 1.45; }
.ici-avert { margin: 7px 0 0; color: var(--encre-douce); font-size: 11px; line-height: 1.4; }

/* Recherche de commune, posée en haut à gauche de la carte. */
#ou-suis-je { position: absolute; left: 10px; top: 10px; z-index: 790; }

/* Le champ de recherche ouvert repasse devant les fiches. Elles sont désormais
   au-dessus du mobilier de la carte, ce qui est le bon défaut ; mais tant qu'on
   est en train de taper le nom de sa commune, c'est ce champ qui compte. */
#ou-suis-je:has(#osj-boite:not(.hidden)) { z-index: 840; }
#osj-ouvrir {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--fond-carte);
  box-shadow: var(--ombre);
  font-size: 12.5px;
  font-weight: 600;
}
#osj-boite {
  margin-top: 6px;
  width: min(240px, calc(100vw - 40px));
  padding: 8px;
  border: 1px solid var(--bord);
  border-radius: var(--r-petit);
  background: var(--fond-carte);
  box-shadow: var(--ombre-forte);
}
#osj-champ {
  width: 100%;
  /* 44 px : la cible tactile recommandée. À 38, le champ se rate au doigt sur
     un écran de téléphone tenu d'une main. */
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-petit);
  background: var(--fond);
}
#osj-liste { list-style: none; margin: 6px 0 0; padding: 0; max-height: 190px; overflow-y: auto; }
#osj-liste li { padding: 0; }
#osj-liste button {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-petit);
  background: none;
  text-align: left;
  font-size: 13px;
}
#osj-liste button:hover { background: var(--fond); }
#osj-liste em { color: var(--encre-faible); font-size: 11px; font-style: normal; }
#osj-vide { padding: 6px 8px; color: var(--encre-faible); font-size: 12px; }

/* La fiche « ici » répond à deux questions et porte les avertissements : elle
   est devenue haute. Sur un téléphone elle couvrait toute la carte, donc on ne
   voyait plus ce dont elle parle. Elle est bornée et défile à l'intérieur. */
/* La hauteur est bornée pour que le haut de la fiche reste SOUS le bouton
 * « Ma commune », qui occupe le coin haut droit sur téléphone.
 *
 * À 104 px, le sommet de la fiche montait jusqu'à 20 px du haut, c'est-à-dire
 * en plein sur ce bouton. Les deux se recouvraient, et l'ordre d'empilement ne
 * pouvait pas les départager : devant, la fiche masquait le bouton ; derrière,
 * le bouton masquait la croix de fermeture. On déplaçait le problème au lieu de
 * le résoudre. En les faisant ne plus se toucher, la question ne se pose plus.
 *
 * 150 px = 10 (marge haute) + 36 (hauteur du bouton) + 20 (respiration) + 84
 * (l'ancrage bas de la fiche). */
#fiche-air {
  /* Hauteur FIXE, et non un simple plafond.
     Elle est fixe pour deux raisons : la fiche garde exactement la même taille
     d'un onglet à l'autre, et le contenu récupère tout l'espace disponible au
     lieu de s'arrêter à la hauteur du plus court. C'est ce qui réduit le
     défilement intérieur. Le `min()` la borne sur un grand écran et la laisse
     rétrécir sur un téléphone à l'horizontale, où 100 % vaut peu. */
  height: min(430px, calc(100% - 150px));
  /* La fiche elle-même ne défile plus : c'est le contenu de l'onglet qui défile,
     et lui seul. Faire défiler la fiche entière emportait le titre, les onglets
     et l'avertissement hors de vue — sur un panneau posé sur une carte, on ne
     lisait plus que ce qui restait, sans savoir qu'il y avait autre chose. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (max-width: 620px) {
  #fiche-air { padding: 10px 12px; }
  .fa-lieu { font-size: 14.5px; }
  .ici-reponse { font-size: 13.5px; }
  .fa-indice b { font-size: 22px; }
  .fa-polluants li { font-size: 11.5px; }
  .fa-note, .ici-avert, .ici-heures { font-size: 10.5px; }
  .ici-bloc { margin-top: 8px; padding-top: 7px; }
}

/* Repère du point choisi : il dit « c'est ici », rien de plus. Le chiffre et
   son classement sont dans la fiche — les deux au même endroit se recouvraient. */
.point-choisi {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--c, #999);
  border: 2.5px solid var(--fond-carte);
  box-shadow: 0 0 0 1.5px var(--c, #999), var(--ombre-forte);
  cursor: pointer;
}
.point-choisi:hover { transform: translate(-50%, -50%) scale(1.15); }

/* « Ma commune » : à droite sur téléphone — le pouce y est déjà, et le coin
   gauche porte les commandes de zoom — centré sur grand écran, où c'est la
   première chose à faire et où le centre est le regard naturel. */
#ou-suis-je { left: auto; right: 10px; }
#osj-boite { margin-left: auto; }

@media (min-width: 900px) {
  #ou-suis-je {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #osj-boite { margin: 6px auto 0; }
}

/* Nouveautés. */
.nv-mot { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; }
/* Le remerciement se détache du reste : ce n'est pas une information sur
   l'outil, c'est un mot adressé. */
.nv-merci {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--bord);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--encre-douce);
}
.nv-merci strong { color: var(--encre); }
/* Le « merci à tous » clôt le mot : sans trait au-dessus et un peu plus haut,
   il se lisait comme un paragraphe de plus au lieu d'une fin de phrase. */
.nv-fort {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
  color: var(--encre);
  font-weight: 600;
}
.nv-liste { margin: 0 0 12px; padding-left: 20px; }
.nv-liste li { margin-bottom: 8px; font-size: 13.5px; line-height: 1.5; color: var(--encre-douce); }
.nv-liste b { color: var(--encre); }
.nv-note { margin: 0 0 14px; color: var(--encre-douce); font-size: 12px; line-height: 1.5; }