/* Calque « Radar des précipitations » (radar.js, ADR 0031) : bouton de la carte, lecteur et section de légende. Rôles
   Topo de jetons.css (ADR 0029 : papier, encre, l'action à l'encre ; style.css nomme --action-doux, --action-fonce,
   --encre-2, --trait) ; la zone de la carte reste claire dans les deux thèmes. Les seules couleurs vives sont celles de la
   palette du radar (pluie et neige), sur la carte et dans son échelle. */

/* Bouton du radar, dans le groupe du haut à droite */
.ctrl-radar button {
  display: grid;
  place-items: center;
}
.ctrl-radar svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--encre-2);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ctrl-radar button[aria-pressed="true"] {
  background: var(--action-doux);
}
.ctrl-radar button[aria-pressed="true"] svg {
  stroke: var(--action-fonce);
}
.ctrl-radar button[aria-pressed="true"] .gouttes {
  stroke-width: 2.2;
}

/* Lecteur : centré en bas de la carte, au-dessus de l'échelle et des attributions */
.lecteur-radar {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(640px, calc(100% - 32px));
  padding: var(--e-s) var(--e-m) var(--e-s);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  color: var(--encre);
  font-family: var(--texte);
  font-size: var(--texte-corps-taille);
  line-height: var(--texte-corps-hauteur);
  user-select: none;
}
.lecteur-radar[hidden] {
  display: none;
}

/* Tête : le bouton (lecture, pause ou rejouer) et l'heure de l'image */
.lr-tete {
  display: flex;
  align-items: center;
  gap: var(--e-m);
  min-height: 44px;
}
.lr-lecture {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--r-plein);
  background: var(--action);
  color: var(--sur-action);
  cursor: pointer;
}
.lr-lecture svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.lr-lecture svg.trait {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lr-lecture:disabled {
  background: var(--creux);
  color: var(--encre-2);
  cursor: default;
}
.lr-lecture:focus-visible,
.lr-zone:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
}
/* L'heure sur deux lignes : « Demain 14:00 » en titre, puis l'âge ou l'avance (« prévision +40 h »). */
.lr-heure {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lr-heure strong {
  display: block;
  font-size: var(--texte-titre-taille);
  font-weight: var(--texte-titre-poids);
  line-height: 1.25;
}
.lr-heure span {
  display: block;
  overflow: hidden;
  color: var(--encre-2);
  font-size: var(--texte-corps-petit-taille);
  line-height: 1.2;
  text-overflow: ellipsis;
}
/* Une image de prévision : son avance à l'encre, en italique. */
.lecteur-radar[data-image="prevision"] .lr-heure span {
  color: var(--encre);
  font-style: italic;
}

/* Frise sur toute la largeur du lecteur : les jours en surtitre, la piste haute (mesurée foncée, prévue claire) et le gros
   pouce rond (28 px visibles, 44 px de toucher), la marque « maintenant », la graduation horaire, puis les heures. Les
   places viennent de map-style (radar.js les pose en calc(14px + (100% - 28px) × fraction) : le pouce tient entier aux
   deux bouts). */
.lr-frise {
  --maintenant: 100%;
  position: relative;
  margin-top: var(--e-xs);
}
.lr-jours,
.lr-heures {
  position: relative;
  height: 16px;
  color: var(--encre-2);
  font-size: var(--texte-mini-taille);
  line-height: 16px;
  font-weight: var(--texte-mini-poids);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lr-jour {
  position: absolute;
  top: 0;
  padding-left: 4px;
  color: var(--encre);
  font-weight: 600;
}
/* Le début d'un jour : un filet qui descend vers la piste. */
.lr-jour::before {
  position: absolute;
  top: 3px;
  left: 0;
  width: 1px;
  height: 13px;
  background: var(--trait-2);
  content: "";
}
.lr-jour:first-child::before {
  display: none;
}
.lr-jour[data-cache] {
  color: transparent;
}
/* La zone du doigt (44 px) déborde sur les jours et la graduation ; elle passe au-dessus d'eux. */
.lr-zone {
  position: relative;
  z-index: 1;
  height: 44px;
  margin: -6px 0 -14px;
  cursor: pointer;
  touch-action: none;
}
.lr-frise[data-actif="false"] .lr-zone {
  cursor: default;
}
.lr-piste {
  position: absolute;
  top: 18px;
  right: 14px;
  left: 14px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-plein);
  background: var(--creux);
  pointer-events: none;
}
/* La piste est déjà en retrait du pouce : la marque y est à sa fraction (--f-maintenant) de la largeur. */
.lr-piste-mesure {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% * var(--f-maintenant, 1));
  background: var(--encre-2);
}
.lr-piste-prevision {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(100% * var(--f-maintenant, 1));
  background: var(--trait-2);
}
.lr-frise[data-prevision="non"] .lr-piste-mesure {
  width: 100%;
}
.lr-maintenant {
  position: absolute;
  top: 10px;
  left: var(--maintenant);
  width: 2px;
  height: 24px;
  transform: translateX(-1px);
  border-radius: 1px;
  background: var(--encre);
  pointer-events: none;
}
.lr-frise[data-prevision="non"] .lr-maintenant,
.lr-frise[data-prevision="non"] .lr-piste-prevision {
  display: none;
}
.lr-pouce {
  position: absolute;
  top: 8px;
  left: 14px;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  transform: translateX(-50%);
  border: 3px solid var(--surface);
  border-radius: var(--r-plein);
  background: var(--action);
  box-shadow: var(--ombre-flottant);
  pointer-events: none;
}
/* Pendant la lecture, le pouce glisse d'une image à l'autre, au rythme des images (200 ms, 100 ms au pas de 10 min :
   --duree-image, posée par radar.js depuis map-style) ; sous le doigt, il le suit. */
.lr-frise.lr-lit .lr-pouce {
  transition: left var(--duree-image, 200ms) linear;
}
.lr-frise.lr-glisse .lr-pouce {
  transform: translateX(-50%) scale(1.08);
  transition: none;
}
.lr-frise[data-actif="false"] .lr-pouce {
  background: var(--trait-2);
  box-shadow: none;
}
.lr-graduation {
  position: relative;
  height: 6px;
}
.lr-trait {
  position: absolute;
  top: 0;
  width: 1px;
  height: 3px;
  background: var(--trait-2);
}
.lr-trait[data-niveau="repere"] {
  height: 5px;
  background: var(--encre-2);
}
.lr-trait[data-niveau="jour"] {
  width: 1.5px;
  height: 6px;
  background: var(--encre);
}
.lr-repere {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.lr-repere[data-principal] {
  color: var(--encre);
}
/* Un libellé qui ne tient pas (trop près d'un autre ou de « maintenant ») cède la place ; son trait reste. */
.lr-repere[data-cache] {
  color: transparent;
}
.lr-repere-maintenant {
  color: var(--encre);
  font-weight: 600;
}

/* Bande des alertes : indisponibilité, chargement, retard, couverture partielle */
.lr-alertes {
  margin: var(--e-xs) 0 0;
  padding: var(--e-xs) var(--e-s);
  border-radius: var(--r-s);
  background: var(--creux);
  color: var(--encre-2);
  font-size: var(--texte-corps-petit-taille);
  line-height: var(--texte-corps-petit-hauteur);
}
.lr-alertes[hidden] {
  display: none;
}
.lr-alertes[data-genre="alerte"] {
  background: var(--creux);
  color: var(--encre);
  font-weight: 600;
}
.lr-alertes[data-genre="erreur"] {
  background: var(--conteneur-erreur);
  color: var(--sur-conteneur-erreur);
  font-weight: 600;
}

/* Pied : l'échelle des intensités (pluie, puis neige au flocon) et la mention de la source, toujours visible */
.lr-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-xs) var(--e-m);
  margin-top: var(--e-xs);
  color: var(--encre-2);
  font-size: var(--texte-mini-taille);
  line-height: var(--texte-mini-hauteur);
  font-weight: var(--texte-mini-poids);
}
.lr-echelle,
.lr-neige {
  display: flex;
  align-items: center;
  gap: var(--e-s);
}
.lr-neige {
  gap: var(--e-xs);
  margin-left: var(--e-xs);
}
.lr-aplats {
  display: flex;
  width: 132px;
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-xs);
  background: var(--carte-fond);
}
.lr-aplats-neige {
  width: 72px;
  margin-left: var(--e-xxs);
}
.lr-aplats i {
  flex: 1;
}
.lr-flocon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--encre-2);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* La mention reste entière, à la ligne s'il le faut. */
.lr-source {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--e-xs);
  margin-left: auto;
  color: var(--encre);
  text-align: right;
}
.lr-source span + span::before {
  content: "· ";
}

/* Légende : une ligne par classe, en aplat translucide sur le fond de la carte, puis le flocon de la neige */
.legende-radar[hidden] {
  display: none;
}
.legende-source a {
  color: var(--action-fonce);
  text-decoration: underline;
}
.legende-corps .aplat {
  display: block;
  width: 26px;
  height: 12px;
  border-radius: 2px;
}
.legende-corps .aplat-flocon {
  display: grid;
  place-items: center;
  height: 18px;
}
.legende-corps .aplat-flocon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Téléphone : le lecteur prend toute la largeur en haut de la carte, sous la recherche ; les contrôles du haut passent
   dessous (radar.js mesure sa hauteur). La mention de la source passe sous l'échelle. */
@media (max-width: 760px) {
  .lecteur-radar {
    top: 62px;
    right: 16px;
    bottom: auto;
    left: 16px;
    width: auto;
    padding: var(--e-s);
    transform: none;
  }
  .lr-tete {
    gap: var(--e-s);
  }
  .lr-aplats {
    width: 72px;
  }
  .lr-aplats-neige {
    width: 44px;
  }
  .lr-source {
    flex-basis: 100%;
  }
  .radar-actif .maplibregl-ctrl-top-left,
  .radar-actif .maplibregl-ctrl-top-right {
    top: calc(60px + var(--hauteur-lecteur-radar, 160px));
  }
  body.traceur-actif .lecteur-radar {
    top: 118px;
  }
  body.traceur-actif .radar-actif .maplibregl-ctrl-top-left,
  body.traceur-actif .radar-actif .maplibregl-ctrl-top-right {
    top: calc(116px + var(--hauteur-lecteur-radar, 160px));
  }
}