.meteo-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  min-height: 0;
  overflow: hidden;
}

.meteo-mode-group {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4vw;
}

.meteo-mode-btn {
  flex: 0 0 auto;
  width: 3.4vh;
  height: 3.4vh;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 1.7vh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, transform 0.12s ease, background 0.12s ease;
}

.meteo-mode-btn:hover,
.meteo-mode-btn:focus-visible {
  border-color: var(--color-accent);
  transform: scale(1.08);
}

.meteo-mode-btn.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.meteo-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5vh;
  min-height: 0;
}

.meteo-view[hidden] {
  display: none;
}

.meteo-day {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.meteo-day-label {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  text-transform: capitalize;
  margin-bottom: 0.6vh;
}

.meteo-day-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6vw;
}

.meteo-day-label-row .meteo-day-label {
  margin-bottom: 0;
}

.meteo-day-nav-group {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4vw;
  margin-bottom: 0.6vh;
}

.meteo-day-nav {
  flex: 0 0 auto;
  width: 3vh;
  height: 3vh;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  font-size: 1.6vh;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s ease, transform 0.12s ease, opacity 0.12s ease;
}

.meteo-day-nav:hover,
.meteo-day-nav:focus-visible {
  border-color: var(--color-accent);
  transform: scale(1.08);
}

.meteo-day-nav.is-boundary {
  opacity: 0.35;
}

.meteo-hours {
  flex: 1 1 auto;
  display: flex;
  gap: 0.8vw;
  overflow-x: auto;
}

/* flex:0 0 auto plutôt que 1 1 0 (qui étire/compresse chaque tuile selon le
   nombre d'éléments de la rangée) : "Aujourd'hui" en affiche ~8, "Demain" 24
   d'un coup (défilement horizontal voulu, voir meteo.js) — sans quoi les deux
   rangées de la même vue n'ont pas des tuiles de la même taille. Repris en
   plein écran (voir plus bas) avec une largeur plus généreuse : la contrainte
   de place n'y est plus la même que dans un quadrant. */
.meteo-hour {
  flex: 0 0 auto;
  width: 4vw;
  background: var(--color-surface-raised);
  border-radius: 8px;
  padding: 0.8vh 0.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vh;
}

.meteo-hour-time {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.meteo-hour-icon {
  font-size: 2.6vh;
  line-height: 1;
}

.meteo-hour-temp {
  font-weight: 700;
}

.meteo-hour-precip {
  font-size: var(--font-size-small);
  color: #5aa9ff;
}

.meteo-days {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  min-height: 0;
  overflow-y: auto;
}

.meteo-day-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.meteo-day-row-head {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.meteo-day-row-label {
  flex: 0 0 18%;
  text-transform: capitalize;
  font-size: var(--font-size-small);
}

.meteo-day-row-periods {
  flex: 1 1 auto;
  display: flex;
  gap: 0.8vw;
}

.meteo-day-row-head .meteo-day-row-periods {
  text-align: center;
}

.meteo-day-row-head .meteo-period-label {
  flex: 1 1 0;
}

.meteo-period {
  flex: 1 1 0;
  background: var(--color-surface-raised);
  border-radius: 8px;
  padding: 0.6vh 0.4vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2vh;
}

.meteo-period-icon {
  font-size: 2.6vh;
  line-height: 1;
}

.meteo-period-temp {
  font-weight: 700;
}

/* Plein écran (desktop/TV uniquement, voir COMPACT_QUERY dans fullscreen.js
   et son seuil dupliqué ici) : la contrainte de place d'un quadrant ne tient
   plus, une tuile plus généreuse profite du surcroît d'espace. Repli neutre
   sous ce seuil, non par choix mais par construction — sur téléphone, le
   plein écran natif de fullscreen.js contourne cette mise en page CSS. */
@media (min-width: 821px) {
  .widget.is-fullscreen .meteo-hour {
    width: 6vw;
  }

  .widget.is-fullscreen .meteo-hour-icon {
    font-size: var(--font-size-large);
  }
}

/* Téléphone (voir base.css, COMPACT_QUERY) : sans quadrant à remplir en
   hauteur, .meteo-hours n'a plus besoin d'étirer ses tuiles (stretch, la
   valeur par défaut) jusqu'à occuper tout l'espace vertical restant — chacune
   retrouve la hauteur de son propre contenu (heure, icône, température, %).
   .meteo-body/.meteo-view/.meteo-day passent eux aussi de flex:1 1 (auto|0) à
   flex:0 0 auto : avec .widget désormais en hauteur "auto" (voir base.css),
   un flex-basis de 0 sur .meteo-day s'effondre à zéro plutôt que de se
   dimensionner sur son contenu (chaîne de conteneurs flex imbriqués sans
   hauteur explicite nulle part — un classique du modèle flexbox). */
@media (max-width: 820px) {
  .meteo-body,
  .meteo-view,
  .meteo-day {
    flex: 0 0 auto;
  }

  .meteo-hours {
    align-items: flex-start;
    gap: 0.4vw;
  }

  /* Largeur en px plutôt qu'en vw, exceptionnellement : un vw dépend de la
     largeur de l'écran, qui varie bien plus d'un téléphone à l'autre (~375 à
     430px) que d'une TV à l'autre pour un rendu à taille de doigt prévisible —
     contrairement au reste du dashboard, pensé pour une lecture à distance. */
  .meteo-hour {
    width: 46px;
    padding: 0.6vh 0.2vw;
  }

  .meteo-hour-icon,
  .meteo-period-icon {
    font-size: 2.4vh;
  }

  .meteo-period {
    padding: 0.5vh 0.2vw;
  }
}