/* Les caméras du direct, dans la page.
 *
 * WHY rien n'est chargé avant le clic : une caméra est un flux, et le charger d'office
 * ferait sortir l'adresse IP de chaque visiteur vers le domaine de diffusion, qu'il
 * regarde ou non. La vignette et son bouton tiennent la même place, sans rien demander
 * à personne.
 *
 * WHY les couleurs viennent des variables du thème et ne sont jamais écrites ici : la
 * charte du site se règle dans Avada, et un bloc qui pose ses propres teintes cesse de
 * suivre le jour où elle change.
 */

.ojbt-cam-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.ojbt-cam {
  border: 1px solid var(--awb-color3);
  border-radius: 10px;
  overflow: hidden;
  background: var(--awb-custom_color_3, var(--awb-color1));
  display: flex;
  flex-direction: column;
}

.ojbt-cam__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--awb-color3);
}

.ojbt-cam__nom { font-weight: 700; }

.ojbt-cam__etat {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.ojbt-cam[data-etat="direct"] .ojbt-cam__etat { color: var(--awb-custom_color_2, var(--awb-color4)); }
.ojbt-cam[data-etat="arret"]  .ojbt-cam__etat { opacity: 0.7; }

/* WHY une proportion fixe : sans elle, la vignette n'occupe aucune hauteur avant le clic,
 * la page se réagence au moment où la vidéo apparaît, et le visiteur perd sa place. */
/* WHY ce fond n'est plus pris à la charte : la couleur qu'il y prenait est claire, et la
 * vignette apparaissait comme un rectangle blanc au milieu d'une page sombre. Un cadre qui
 * attend une vidéo doit être sombre, pour ne pas éblouir quand elle arrive, et c'est une
 * propriété de ce qu'il porte plutôt qu'une couleur de marque. */
.ojbt-cam__cadre {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 14, 28, 0.92);
}

.ojbt-cam__cadre video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.ojbt-cam__voir {
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--awb-color1, #fff);
  min-height: 44px;
}
.ojbt-cam__voir:hover,
.ojbt-cam__voir:focus-visible { background: rgba(255, 255, 255, 0.12); }

.ojbt-cam__pied {
  padding: 0.65rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.45;
  opacity: 0.85;
}

.ojbt-cam__erreur { padding: 0.9rem; font-size: 0.82rem; }

@media (prefers-reduced-motion: reduce) {
  .ojbt-cam__voir { transition: none; }
}

/* --------------------------------------------------------------------------
 * La phase du ciel, au-dessus du verdict météo.
 * ----------------------------------------------------------------------- */

.ojbt-direct__phase {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.35rem;
  opacity: 0.9;
}

/* WHY ces teintes-là sont écrites ici, contrairement à la règle du haut de ce
 * fichier : elles ne décrivent pas la marque du site, elles décrivent le ciel.
 * Rattachées à la charte, le crépuscule changerait de couleur le jour où la
 * charte change, et la légende qui les nomme cesserait de vouloir dire quelque
 * chose. Ce sont des couleurs de sujet, pas des couleurs d'habillage. */
.ojbt-direct__pastille-phase {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.ojbt-direct__phase[data-phase="jour"]         .ojbt-direct__pastille-phase { background: #dbeafe; }
.ojbt-direct__phase[data-phase="civil"]        .ojbt-direct__pastille-phase { background: #9dc0e6; }
.ojbt-direct__phase[data-phase="nautique"]     .ojbt-direct__pastille-phase { background: #5e86b8; }
.ojbt-direct__phase[data-phase="astronomique"] .ojbt-direct__pastille-phase { background: #375a88; }
.ojbt-direct__phase[data-phase="nuit"]         .ojbt-direct__pastille-phase { background: #1c2c4c; }

/* --------------------------------------------------------------------------
 * Le bandeau « où en est le ciel ».
 * ----------------------------------------------------------------------- */

.ojbt-ciel { margin: 1.5rem 0 0; }

.ojbt-ciel__phase {
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.ojbt-ciel__heure-rendu {
  font-size: 0.86rem;
  opacity: 0.75;
  font-weight: 400;
}

.ojbt-ciel__sens {
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  max-width: 42em;
}

/* WHY une hauteur fixe et `preserveAspectRatio="none"` : le bandeau est une frise de
 * temps, pas un dessin. L'étirement horizontal ne ment pas sur une bande ni sur une
 * courbe, puisque seul l'axe du temps s'allonge. Il ment sur un caractère, et c'est
 * pourquoi ce dessin n'en porte plus aucun : les heures, le repère de l'instant et les
 * traits de graduation vivent en HTML au-dessus de lui. */
.ojbt-ciel__cadre {
  position: relative;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  border: 1px solid var(--awb-color3);
  border-bottom: none;
  line-height: 0;
  touch-action: pan-y;
}

.ojbt-ciel__fig {
  display: block;
  width: 100%;
  height: 96px;
}

/* WHY les traits de graduation en HTML plutôt que dans le dessin : un trait d'un pixel
 * dans un dessin étiré cesse de faire un pixel, et il devient soit invisible, soit une
 * barre épaisse selon la largeur de l'écran. */
.ojbt-ciel__traits { position: absolute; inset: 0; pointer-events: none; }
.ojbt-ciel__traits i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.ojbt-ciel__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #ff5f5f;
  pointer-events: none;
}

.ojbt-ciel__guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

.ojbt-ciel__point {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(8, 14, 28, 0.7);
}
.ojbt-ciel__point--soleil { background: #f5b942; }
.ojbt-ciel__point--lune   { background: #c9d6e8; }

/* WHY l'infobulle suit le curseur plutôt que de se poser dans un coin : à cette largeur,
 * un coin peut être à six cents pixels du point qu'on interroge, et l'œil fait l'aller
 * retour à chaque déplacement. */
/* WHY cette infobulle porte elle aussi ses couleurs en propre, et pour la même raison : elle
 * se pose au-dessus d'un dessin dont la teinte va du bleu très clair au presque noir selon
 * l'heure, et aucune couleur de charte ne tient sur les deux. */
.ojbt-ciel__bulle {
  position: absolute;
  top: 8px;
  z-index: 2;
  pointer-events: none;
  background: rgba(6, 11, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: #eef3fb;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.ojbt-ciel__bulle b { font-variant-numeric: tabular-nums; color: #ffffff; }
.ojbt-ciel__bulle .ojbt-ciel__bulle-heure {
  opacity: 0.75;
  display: block;
  margin-bottom: 0.15rem;
}

/* WHY l'axe des heures est un bandeau à part, sous le dessin : c'est ce qui permet aux
 * chiffres de garder leur forme quelle que soit la largeur de l'écran. */
.ojbt-ciel__axe {
  position: relative;
  height: 26px;
  border: 1px solid var(--awb-color3);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: rgba(255, 255, 255, 0.03);
}

.ojbt-ciel__grad {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  white-space: nowrap;
}
.ojbt-ciel__grad--debut { transform: none; }
.ojbt-ciel__grad--fin   { transform: translateX(-100%); }

/* WHY cette règle survit au bandeau qui ne l'emploie plus : la figure d'observabilité
 * garde ses libellés dans le dessin, parce qu'elle n'est pas étirée de la même façon. */
.ojbt-ciel__heure {
  fill: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-family: inherit;
}

.ojbt-ciel__legende {
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem 1.1rem;
}

.ojbt-ciel__legende li {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.55rem;
  align-items: center;
  margin: 0;
}

.ojbt-ciel__legende i {
  grid-row: 1 / 3;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.ojbt-ciel__nom   { font-weight: 700; font-size: 0.88rem; line-height: 1.3; }
.ojbt-ciel__seuil { font-size: 0.76rem; opacity: 0.72; line-height: 1.3; }

.ojbt-ciel__reperes {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--awb-color3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem 1.4rem;
}

.ojbt-ciel__reperes li {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}
.ojbt-ciel__reperes span { font-size: 0.78rem; opacity: 0.75; }
.ojbt-ciel__reperes b    { font-size: 1.22rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ojbt-ciel__reperes em   { font-size: 0.78rem; opacity: 0.7; font-style: normal; }

/* --------------------------------------------------------------------------
 * Les prochaines heures.
 * ----------------------------------------------------------------------- */

.ojbt-prevision { margin-top: 0.5rem; }

.ojbt-prevision__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ojbt-prevision__table th,
.ojbt-prevision__table td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--awb-color3);
}

.ojbt-prevision__table thead th {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  font-weight: 700;
}

.ojbt-prevision__table tbody th {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.ojbt-prevision__source {
  font-size: 0.78rem;
  opacity: 0.8;
  margin-top: 0.6rem;
}

@media (max-width: 480px) {
  .ojbt-prevision__table th,
  .ojbt-prevision__table td { padding: 0.5rem 0.4rem; font-size: 0.86rem; }
}

/* WHY la mention « prévu » est portée par chaque ligne et non par le bloc : une liste
 * se lit ligne à ligne, et une mention posée en pied ne suit pas la ligne qu'on lit. */
.ojbt-direct__prevu {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.68;
  margin-left: 0.3rem;
}

/* WHY une seconde liste de légende, séparée de celle des phases : une bande est un
 * intervalle de temps, un tracé est une courbe de hauteur. Les mêler dans une seule liste
 * ferait croire que la Lune est une phase du ciel. */
.ojbt-ciel__legende--traces {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--awb-color3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ojbt-ciel__legende--traces i { border-radius: 50%; }

/* --------------------------------------------------------------------------
 * Toutes les mesures de la station.
 * ----------------------------------------------------------------------- */

.ojbt-meteo { margin-top: 0.5rem; }

.ojbt-meteo__famille { margin-bottom: 1.4rem; }

.ojbt-meteo__famille h4 {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--awb-color3);
}

.ojbt-meteo__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem 1.4rem;
  margin: 0;
}

.ojbt-meteo__case { margin: 0; }

.ojbt-meteo__case dt {
  font-size: 0.78rem;
  opacity: 0.75;
  line-height: 1.3;
  margin-bottom: 0.1rem;
}

.ojbt-meteo__case dd {
  margin: 0;
  font-size: 1.32rem;
  line-height: 1.15;
  font-weight: 700;
  /* WHY des chiffres à chasse fixe : ces valeurs se rafraîchissent toutes les minutes, et
   * sans cela chaque changement de chiffre décale la ligne entière, ce qui attire l'œil
   * sur un mouvement qui ne veut rien dire. */
  font-variant-numeric: tabular-nums;
}

.ojbt-meteo__unite {
  font-size: 0.74rem;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 0.22rem;
}

.ojbt-meteo__fraicheur {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 0.4rem;
}

/* WHY la carte du tout-ciel garde la forme des autres caméras : elle en est une, et lui
 * donner une autre forme ferait croire à un autre genre d'objet. Seule sa teinte d'état
 * change, pour qu'on voie d'un coup d'œil qu'elle ne diffuse pas. */
.ojbt-cam--allsky .ojbt-cam__etat { opacity: 0.75; font-style: italic; }

/* WHY ce cadre-ci porte sa propre teinte et son propre texte : les deux autres cartes
 * attendent une vidéo, donc leur cadre est sombre pour ne pas éblouir quand elle arrive.
 * Celle-ci ne montre que du texte, et ce texte se lisait en gris pâle sur clair. Mesuré
 * sur une capture du rendu : il était illisible. */
.ojbt-cam--allsky .ojbt-cam__cadre {
  aspect-ratio: 16 / 7;
  background: var(--awb-custom_color_3, rgba(255, 255, 255, 0.04));
  padding: 1rem;
}

.ojbt-cam--allsky .ojbt-cam__erreur {
  text-align: center;
  max-width: 30em;
  line-height: 1.55;
  font-size: 0.86rem;
  opacity: 1;
  color: inherit;
}

/* --------------------------------------------------------------------------
 * La carte du ciel.
 * ----------------------------------------------------------------------- */

.ojbt-carte { margin-top: 0.5rem; }

/* WHY une hauteur imposée et une proportion : le planétarium mesure son conteneur au
 * montage, et un conteneur sans hauteur lui en fait déduire zéro. La carte se dessinait
 * alors sur une bande d'un pixel, sans erreur ni message. */
/* WHY une hauteur en pixels et non une proportion : le planétarium mesure son conteneur au
 * montage, par sa hauteur calculée, et il y écrit ensuite la sienne en dur. Une proportion
 * qui n'est pas encore résolue au moment de cette mesure lui fait lire une hauteur
 * effondrée, et il dessine alors une bande de cent cinquante pixels, définitivement,
 * puisqu'il ne remesure pas. Mesuré sur une capture du rendu.
 *
 * WHY cinq cent vingt et non davantage : à pleine largeur, quatre tiers donneraient plus de
 * mille pixels de haut, soit une page entière pour une seule carte. */
.ojbt-carte__toile {
  width: 100%;
  height: 520px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--awb-color3);
  background: rgba(8, 14, 28, 1);
}

.ojbt-carte__aide {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: 0.5rem;
}

@media (max-width: 600px) {
  .ojbt-carte__toile { height: 380px; }
}

/* WHY l'aperçu garde la place de la carte avant le clic : sans hauteur, la page se
 * réagence au moment où le planétarium apparaît, et le lecteur perd sa place. C'est la même
 * règle que pour les vignettes de caméra. */
.ojbt-carte--apercu .ojbt-carte__toile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
}

.ojbt-carte__ouvrir {
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--awb-color1, #fff);
  min-height: 44px;
}
.ojbt-carte__ouvrir:hover,
.ojbt-carte__ouvrir:focus-visible { background: rgba(255, 255, 255, 0.12); }

/* --------------------------------------------------------------------------
 * L'observabilité d'une cible.
 * ----------------------------------------------------------------------- */

.ojbt-obs { margin-top: 0.5rem; }

.ojbt-obs__formulaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.8rem 1.1rem;
  align-items: end;
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--awb-color3);
}

.ojbt-obs__champ { margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.ojbt-obs__champ label {
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}

.ojbt-obs__champ input {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--awb-color3);
  background: var(--awb-custom_color_3, rgba(255, 255, 255, 0.04));
  color: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.ojbt-obs__champ button {
  min-height: 44px;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ojbt-obs__champ button:hover,
.ojbt-obs__champ button:focus-visible { background: rgba(255, 255, 255, 0.12); }

.ojbt-obs__cible { font-size: 1.16rem; margin-bottom: 0.7rem; }
.ojbt-obs__coord { font-size: 0.82rem; opacity: 0.75; font-variant-numeric: tabular-nums; }
.ojbt-obs__lieu  { font-size: 0.82rem; opacity: 0.75; }

.ojbt-obs__fig {
  display: block;
  width: 100%;
  height: 182px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--awb-color3);
}

/* WHY le verdict est une phrase et non une pastille : « observable 4h20 cette nuit » se
 * lit et se retient, là où une couleur demande une légende. */
.ojbt-obs__verdict {
  font-size: 1.04rem;
  font-weight: 700;
  margin-top: 0.9rem;
}
.ojbt-obs__verdict--oui { color: #7ee0a8; }
.ojbt-obs__verdict--non { color: #ff8f8f; }

.ojbt-obs__vide { font-size: 0.94rem; opacity: 0.8; }
.ojbt-obs__reperes { border-top: none; padding-top: 0.6rem; }

/* --------------------------------------------------------------------------
 * Le respirer entre les parties.
 *
 * WHY cet espacement est posé sur les blocs et non dans le générateur de pages : ces blocs
 * sont des raccourcis, et le constructeur de pages ne connaît que la boîte qui les
 * contient. Sans cela, le tableau d'une partie touche le titre de la suivante, et l'œil ne
 * voit plus où l'une finit.
 * ----------------------------------------------------------------------- */

.ojbt-direct,
.ojbt-ciel,
.ojbt-prevision,
.ojbt-meteo,
.ojbt-carte,
.ojbt-obs {
  margin-bottom: 2.6rem;
}

.ojbt-direct + .fusion-title,
.ojbt-ciel + .fusion-title,
.ojbt-prevision + .fusion-title,
.ojbt-meteo + .fusion-title,
.ojbt-carte + .fusion-title,
.ojbt-obs + .fusion-title { margin-top: 0.8rem; }

/* --------------------------------------------------------------------------
 * Les meilleures cibles de la nuit.
 * ----------------------------------------------------------------------- */

.ojbt-obs__palmares {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ojbt-obs__palmares caption {
  text-align: left;
  font-size: 0.78rem;
  opacity: 0.78;
  padding-bottom: 0.7rem;
  line-height: 1.5;
}

.ojbt-obs__palmares th,
.ojbt-obs__palmares td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--awb-color3);
  vertical-align: baseline;
}

.ojbt-obs__palmares thead th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  font-weight: 700;
}

.ojbt-obs__palmares tbody th { font-weight: 700; white-space: nowrap; }
.ojbt-obs__palmares tbody th a { text-decoration: none; border-bottom: 1px solid currentColor; }
.ojbt-obs__palmares td { font-variant-numeric: tabular-nums; }

/* WHY la ligne gênée par la Lune s'efface plutôt que de rougir : elle reste observable, et
 * la rougir la ferait lire comme impossible. Un objet diffus sous une Lune proche ne donne
 * rien, mais une étoile double, si. */
.ojbt-obs__palmares tr[data-lune="genee"] { opacity: 0.62; }

.ojbt-obs__retour { margin-top: 1rem; font-size: 0.88rem; }

@media (max-width: 560px) {
  .ojbt-obs__palmares th,
  .ojbt-obs__palmares td { padding: 0.5rem 0.35rem; font-size: 0.84rem; }
  /* WHY la colonne des heures disparaît la première sur un écran étroit : la durée de la
   * fenêtre, juste à côté, porte déjà la même information sous une forme plus courte. */
  .ojbt-obs__palmares tr > *:nth-child(3) { display: none; }
}

/* WHY la figure d'observabilité partage le cadre du bandeau du ciel : ce sont deux frises
 * de temps, étirées de la même façon, et leur donner deux habillages les ferait diverger au
 * premier réglage. Seule leur hauteur diffère. */
.ojbt-obs__cadre .ojbt-obs__fig { display: block; width: 100%; height: 150px; }

.ojbt-obs__now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.ojbt-obs__seuil {
  position: absolute;
  left: 8px;
  transform: translateY(-115%);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  color: #ff8f8f;
  line-height: 1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * L'historique des mesures.
 * ----------------------------------------------------------------------- */

.ojbt-meteo__plages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.4rem;
}

.ojbt-meteo__plages a {
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--awb-color3);
  text-decoration: none;
  opacity: 0.8;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.ojbt-meteo__plages a[aria-current="true"] {
  opacity: 1;
  font-weight: 700;
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.08);
}

/* WHY la courbe prend la couleur du texte : elle accompagne une valeur, elle ne la
 * concurrence pas. Une teinte propre en ferait un second objet à déchiffrer sous chacune
 * des dix-huit mesures. */
.ojbt-meteo__trace {
  position: relative;
  margin-top: 0.3rem;
  color: var(--awb-custom_color_2, #6aa9e0);
  line-height: 0;
}

.ojbt-meteo__courbe {
  display: block;
  width: 100%;
  height: 30px;
  opacity: 0.85;
  cursor: crosshair;
}

/* WHY la lecture au survol s'écrit par-dessus la courbe et non à côté : la case fait cent
 * soixante pixels de large, et une infobulle posée à l'extérieur sortirait de la grille. */
/* WHY les deux couleurs sont écrites et non prises à la charte : mesuré sur le rendu, la
 * teinte de texte qu'elle fournit ici est sombre, et la lecture apparaissait en gris foncé
 * sur un fond sombre, donc illisible. Une étiquette qui se pose par-dessus un dessin doit
 * porter son propre contraste, puisqu'elle ne sait pas sur quoi elle tombe. */
.ojbt-meteo__lu {
  position: absolute;
  top: -2px;
  right: 0;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  background: rgba(6, 11, 22, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #eef3fb;
  white-space: nowrap;
  pointer-events: none;
}

.ojbt-meteo__frise { margin-top: 1rem; }

.ojbt-meteo__frise summary {
  cursor: pointer;
  font-size: 0.78rem;
  opacity: 0.8;
  padding: 0.3rem 0;
  min-height: 34px;
  display: flex;
  align-items: center;
}
.ojbt-meteo__frise summary:hover { opacity: 1; }

.ojbt-meteo__cadre { border-radius: 8px 8px 0 0; margin-top: 0.4rem; cursor: crosshair; }
.ojbt-meteo__fig { display: block; width: 100%; height: 120px; }

.ojbt-meteo__legende {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.45rem 1.1rem;
}

.ojbt-meteo__legende li {
  display: grid;
  grid-template-columns: 12px 1fr;
  column-gap: 0.5rem;
  align-items: center;
  margin: 0;
  font-size: 0.78rem;
}
.ojbt-meteo__legende i {
  grid-row: 1 / 3;
  width: 12px;
  height: 3px;
  border-radius: 2px;
}
.ojbt-meteo__legende span { font-weight: 600; line-height: 1.3; }
.ojbt-meteo__legende em { font-style: normal; opacity: 0.7; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
 * Les widgets repris de meteoblue.
 * ----------------------------------------------------------------------- */

.ojbt-meteoblue { margin-bottom: 2.2rem; }

.ojbt-meteoblue__quoi {
  font-size: 0.94rem;
  line-height: 1.55;
  max-width: 42em;
  margin-bottom: 0.7rem;
}

/* WHY un fond clair sous ce cadre-ci, contrairement à tout le reste de la page : le widget
 * est servi par un tiers, sur fond blanc, et nous ne pouvons pas le repeindre. Lui donner un
 * cadre sombre ferait une bande claire cernée de noir, plus voyante que le contenu. */
.ojbt-meteoblue iframe {
  display: block;
  width: 100%;
  border: 1px solid var(--awb-color3);
  border-radius: 8px;
  background: #ffffff;
}

.ojbt-meteoblue__source {
  font-size: 0.76rem;
  opacity: 0.75;
  margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
 * La vue annuelle d'une cible.
 * ----------------------------------------------------------------------- */

.ojbt-annee__titre {
  font-size: 0.78rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.78;
  margin: 1.8rem 0 0.4rem;
}

.ojbt-annee__quoi { font-size: 0.88rem; opacity: 0.85; margin-bottom: 0.6rem; max-width: 44em; }
.ojbt-annee__cadre { border-radius: 8px 8px 0 0; }
.ojbt-annee__fig { display: block; width: 100%; height: 96px; }
.ojbt-annee__lu { font-size: 0.86rem; margin-top: 0.6rem; font-weight: 600; }