/* Meud : page « Météo » (meteo.html). Couleurs : jetons de app.css (--pluie, --vig-*). */
.meteo-page h1 { margin-bottom: 8px; }
.meteo-page h2 { font-size: 17px; margin: 0 0 6px; }
.meteo.vert { border-left-color: var(--ok-texte); }

.maintenant { margin: 8px 0 4px; }
.ou-titre { margin: 0; font-weight: 650; color: var(--doux); font-size: 15px; }
.maintenant-ligne { display: flex; align-items: center; gap: 12px; margin: 2px 0; }
.maintenant-ico { font-size: 44px; line-height: 1; }
.maintenant-temp { font-size: 52px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.maintenant-texte { font-size: 16px; line-height: 1.3; }
.maintenant-texte strong { display: block; font-size: 18px; }
.maintenant-texte span { color: var(--doux); }
.maintenant-detail { margin: 4px 0 0; font-size: 15px; color: var(--doux); }

.carte-meteo { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--bord); }
.pluie-phrase { margin: 0 0 4px; font-size: 16px; }

/* Graphe de pluie : bâtons fins à la couleur de la pluie, axes discrets */
.pluie-graphe { position: relative; }
.pluie-graphe svg { display: block; width: 100%; height: auto; overflow: visible; }
.pluie-graphe .baton { fill: var(--pluie); }
.pluie-graphe .axe { stroke: var(--bord); stroke-width: 1; }
.pluie-graphe .repere { stroke: var(--bord); stroke-width: 1; stroke-dasharray: 3 3; }
.pluie-graphe .repere-texte, .pluie-graphe .axe-texte { fill: var(--doux); font-size: 10px; font-family: inherit; }
.pluie-graphe .cible { fill: transparent; cursor: pointer; outline: none; }
.pluie-graphe .cible:hover, .pluie-graphe .cible:focus-visible { fill: var(--texte); fill-opacity: .06; }
.pluie-graphe .bulle { position: absolute; top: -6px; transform: translateX(-50%); padding: 4px 8px; border-radius: 8px; background: var(--texte); color: var(--fond); font-size: 13px; white-space: nowrap; pointer-events: none; }
.legende-pluie { margin: 2px 0 0; font-size: 13px; }

/* 24 heures : bande qui défile */
.heures { display: flex; gap: 2px; list-style: none; margin: 0 -14px; padding: 2px 14px 6px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.heure { flex: 0 0 60px; display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; scroll-snap-align: start; font-variant-numeric: tabular-nums; }
.heure:first-child { background: var(--accent-doux); }
.heure-h { font-size: 13px; color: var(--doux); }
.heure-ico { font-size: 24px; line-height: 1.2; }
.heure-temp { font-size: 17px; }
.heure-pluie { font-size: 12px; color: var(--pluie); font-weight: 650; }
.heure-pluie.vide { color: var(--doux); font-weight: normal; }
.heure-vent { font-size: 11px; color: var(--doux); }

/* 7 jours : plage des températures sur une échelle commune */
.jours-meteo { list-style: none; margin: 0; padding: 0; }
.jour-meteo { display: grid; grid-template-columns: 104px 30px 34px 1fr 34px; grid-template-areas: "nom ico min barre max" ". . detail detail detail"; align-items: center; column-gap: 6px; padding: 8px 0; font-variant-numeric: tabular-nums; }
.jour-meteo + .jour-meteo { border-top: 1px solid var(--bord); }
.jour-nom { grid-area: nom; font-weight: 650; }
.jour-ico { grid-area: ico; font-size: 22px; text-align: center; }
.jour-min { grid-area: min; text-align: right; color: var(--doux); }
.jour-max { grid-area: max; font-weight: 650; }
.jour-barre { grid-area: barre; position: relative; height: 6px; border-radius: 3px; background: var(--bord); }
.jour-plage { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }
.jour-detail { grid-area: detail; font-size: 13px; color: var(--doux); }
.jour-meteo.relais { opacity: .6; }
.jour-meteo.relais .jour-plage { background: var(--doux); }