/* Rétrospective.
 *
 * Feuille autonome, et non un ajout à v3.css : cette page n'a ni tiroir, ni
 * fiches, ni panneau latéral, et hériter de deux mille lignes écrites pour une
 * autre mise en scène ne rendrait service à personne. Les variables de couleur,
 * elles, sont recopiées à l'identique — c'est le même site, il doit se
 * reconnaître d'une page à l'autre.
 */

: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);
  --r: 14px;
  --r-petit: 9px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

@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);
  }
}

* { 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%;
}

body {
  display: flex;
  flex-direction: column;
  padding-left: var(--safe-l);
  padding-right: var(--safe-r);
}

button, select, input { font: inherit; color: inherit; }
.hidden { display: none !important; }

/* --- en-tête ------------------------------------------------------------- */

.barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--fond-carte);
  border-bottom: 1px solid var(--bord);
  flex: 0 0 auto;
}

.titre h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.titre p {
  margin: 1px 0 0;
  font-size: 12.5px;
  color: var(--encre-douce);
}

.retour {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--bord-fort);
  border-radius: 999px;
  font-size: 13px;
  text-decoration: none;
  color: var(--encre-douce);
  white-space: nowrap;
}

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

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

.scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

#carte {
  position: absolute;
  inset: 0;
  background: var(--fond);
}

.tuiles-etiquettes { filter: url(#encre-carte); }

/* Le pictogramme de foyer. Repris de la carte de suivi : même halo, donc même
   lisibilité sur un fond de qualité de l'air chargé. */
.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));
}

/* Foyer dont la détection date de plusieurs heures. Il pâlit et rapetisse, mais
   ne disparaît pas d'un coup : c'est toute la lisibilité de l'animation. */
.map-emoji.pale {
  opacity: 0.7;
  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));
}

/* Indice de qualité de l'air posé sur une commune. Le liseré prend la couleur de
   la classe : on relie ainsi le chiffre à la teinte qui l'entoure, et le champ
   coloré cesse d'être un dégradé qu'on ne sait pas lire. */
.etq { background: none; border: 0; }

.indice-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: color-mix(in srgb, var(--fond-carte) 94%, transparent);
  box-shadow: var(--ombre);
  pointer-events: none;
}

/* Le nom de la commune au-dessus du chiffre : « 84 » seul ne dit ni de quoi il
   parle ni où, et un nombre sans repère sur une carte s'interprète au hasard. */
.indice-air u {
  display: block;
  text-decoration: none;
  color: var(--encre-faible);
  font-size: 8.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ia-ligne { display: flex; align-items: baseline; gap: 5px; }
.indice-air b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.indice-air i { color: var(--encre-douce); font-size: 10.5px; font-style: normal; }

/* Leaflet place ses commandes à un z-index de 1000 : elles passeraient
   par-dessus le cartouche et la légende. */
.leaflet-top,
.leaflet-bottom { z-index: 500 !important; }

/* --- cartouche et légende ------------------------------------------------ */

/* Cartouche centré en haut de la carte, sur toutes les tailles d'écran.
   Accroché au coin gauche, il se lisait comme une étiquette collée là faute de
   mieux, et son contenu partait en drapeau. Centré, c'est un bandeau : la date
   et les compteurs sont l'horloge de l'animation, ils méritent l'axe de la
   carte. La place perdue à gauche et à droite n'en est pas — c'est du bord de
   cadre, où il n'y a rien à lire. */
.cartouche {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 10px 16px;
  text-align: center;
  background: color-mix(in srgb, var(--fond-carte) 92%, transparent);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.horodate {
  /* Chiffres à chasse fixe : sans cela, l'heure sautille latéralement à chaque
     pas de temps et l'œil ne peut plus la lire pendant l'animation. */
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.chiffres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--encre-douce);
}

.chiffres strong {
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}

.legende {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 600;
  width: 232px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--fond-carte) 92%, transparent);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  box-shadow: var(--ombre);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.l-titre {
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--encre-douce);
}

.l-echelle {
  height: 9px;
  margin: 6px 0 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff3b1f, #ff8c42, #8b8578);
}

.l-bornes {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--encre-faible);
}

.l-note {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--encre-douce);
}

.ch-court { display: none; }

@media (max-width: 720px) {
  /* La légende explique la rémanence : utile, mais pas au prix du tiers de
     l'écran d'un téléphone. Elle reste sur grand écran. */
  .legende { display: none; }

  /* Le centrage vient de la règle de base ; il ne reste ici qu'à resserrer. */
  .cartouche {
    top: 8px;
    max-width: calc(100vw - 16px);
    padding: 7px 12px;
  }
  .horodate { font-size: 14px; }
  .chiffres { gap: 2px 10px; margin-top: 2px; font-size: 11.5px; }

  /* Libellés courts. Trois lignes de cartouche posées sur la carte, c'était le
     commentaire qui recouvrait le sujet. */
  .ch-long { display: none; }
  .ch-court { display: inline; }

  /* L'état passe à la ligne plutôt que de serrer les cases à cocher. */
  .couches { gap: 6px 12px; }
  .couches .etat { flex-basis: 100%; margin-left: 0; font-size: 11px; }
}

/* --- commandes ----------------------------------------------------------- */

.commandes {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 14px calc(11px + var(--safe-b));
  background: var(--fond-carte);
  border-top: 1px solid var(--bord);
}

.rangee {
  display: flex;
  align-items: center;
  gap: 9px;
}

#recadrer {
  padding: 4px 11px;
  background: transparent;
  border: 1px solid var(--bord-fort);
  border-radius: 999px;
  font-size: 12.5px;
  cursor: pointer;
}

#recadrer:hover { border-color: var(--accent); color: var(--accent); }

.jouer {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
}

.jouer:hover { filter: brightness(1.08); }

#curseur {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}

#vitesse {
  flex: 0 0 auto;
  padding: 6px 8px;
  background: transparent;
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-petit);
}

.couches {
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--encre-douce);
}

.couches label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.couches .etat {
  margin-left: auto;
  font-size: 12px;
  color: var(--encre-faible);
}

/* --- message ------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(150px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 900;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 15px;
  background: var(--encre);
  color: var(--fond);
  border-radius: var(--r-petit);
  font-size: 13.5px;
  box-shadow: var(--ombre);
}