/* meteoservice : page d'accueil. Palette clair / sombre (maquette + captures de Laurent, 2026-10-03). */
/* Montserrat (police de tout le site, hébergée ici : licence SIL OFL), variable de 400 à 800. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/montserrat-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/fonts/montserrat-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --rayon: 3px;               /* rayon des coins de tous les rectangles */
  color-scheme: light;
  --marine: #015181;        /* barre de navigation, pied de page, jour et moment sélectionnés */
  --vif: #00a1fe;           /* accents, focus, jour souligné */
  --soleil: #ffd400;        /* soleil du logo */
  --fond: #eef2f8;          /* bleu glacé */
  --texte: #14213d;         /* encre */
  --carte: #ffffff;
  --bord: #d5deeb;
  --discret: #5d6b82;
  --bouton-texte: #0b3a5c;
  --bandeau-texte: #bfe3ff;
  --zone-carte: #dbe7f5;
  --r0: #e8edf4;            /* niveau nul des cartes de risque */
  --piste: #e8edf4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; --fond:#071a26; --texte:#e8f3fb; --carte:#0e2738; --bord:#1f3b50; --discret:#9db4c6; --bouton-texte:#e8f3fb; --zone-carte:#0b2132; --r0:#1b3347; --piste:#1b3347; }
}
:root[data-theme="dark"] { --r0:#1b3347; --piste:#1b3347; color-scheme: dark; --fond:#071a26; --texte:#e8f3fb; --carte:#0e2738; --bord:#1f3b50; --discret:#9db4c6; --bouton-texte:#e8f3fb; --zone-carte:#0b2132; }

* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); min-height: 100vh; display: flex; flex-direction: column; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--vif); outline-offset: 2px; }

header { background: var(--marine); }
.nav { max-width: 1240px; margin: 0 auto; padding: 0 20px; min-height: 84px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; position: relative; }
.logo-lien { display: flex; align-items: center; gap: 10px; margin-right: 8px; text-decoration: none; color: #fff; }
.logo-disque { width: 54px; height: 54px; border-radius: 50%; box-shadow: 0 0 0 3px var(--vif); flex: none; display: block; }
.marque { font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1; white-space: nowrap; }
.marque b { color: var(--vif); font-weight: 600; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; flex: 1; }
.menu a { color: var(--bandeau-texte); text-decoration: none; font-size: 16px; padding: 10px 2px; }
.menu a:hover { color: #fff; }
.theme { margin-left: auto; white-space: nowrap; min-height: 44px; padding: 0 14px; border-radius: var(--rayon); border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--bandeau-texte); }
.theme:hover { color: #fff; border-color: var(--vif); }
.burger { display: none; margin-left: auto; min-width: 48px; min-height: 48px; border-radius: var(--rayon); border: 1px solid rgba(255,255,255,.55); background: transparent; color: var(--bandeau-texte); align-items: center; justify-content: center; }
.burger[aria-expanded="true"] { border-color: var(--soleil); color: #fff; }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 20px 40px; display: flex; flex-direction: column; gap: 24px; flex: 1; }
.panneau { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
h2 { margin: 0; font-size: 22px; font-weight: 700; }
.discret { color: var(--discret); font-size: 16px; }

.jours { display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: 6px; }
.moments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; max-width: 520px; }
.choix { border: 1px solid var(--bord); background: var(--carte); color: var(--bouton-texte); border-radius: var(--rayon); }
.choix:hover:not(:disabled) { border-color: var(--vif); }
.choix[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.choix:disabled { opacity: .4; cursor: default; }
.jour { min-height: 48px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.jour .abr { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.jour .num { font-size: 19px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.moment { min-height: 44px; font-size: 15px; font-weight: 600; }

.zone-carte { background: var(--zone-carte); border-radius: var(--rayon); padding: 12px 8px; }
.rangee1 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.colonne { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.h-petit { font-size: 20px; }
.petit { font-size: 15px; margin-top: 2px; }
.classement { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.classement li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.classement a { color: var(--texte); text-decoration: none; font-weight: 500; }
.classement a:hover { color: var(--vif); text-decoration: underline; }
.classement .val { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--marine); white-space: nowrap; }
:root[data-theme="dark"] .classement .val { color: var(--vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .classement .val { color: var(--vif); } }
.liste { margin-left: 8px; min-height: 40px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--carte); color: var(--texte); padding: 0 8px; font: inherit; }
.accent { color: var(--marine); }
:root[data-theme="dark"] .accent { color: var(--vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .accent { color: var(--vif); } }
.regions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.reg { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.reg h3 { margin: 0; font-size: 18px; }
.reg .carte-reg { position: relative; cursor: pointer; border-radius: var(--rayon); overflow: hidden; background: var(--zone-carte); }
.reg img { display: block; width: 100%; height: auto; }
.reg .etat { font-size: 14px; color: var(--discret); min-height: 20px; }
.reg .etat b { color: var(--texte); }
.carte-lien { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.carte-lien:hover .carte-reg, .carte-lien:focus-visible .carte-reg { outline: 2px solid var(--vif); outline-offset: 2px; }
.reg .carte-plus { font-size: 13px; font-weight: 600; align-self: flex-start; }
.reg .echelle { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--discret); }
.reg .echelle span { display: inline-flex; align-items: center; gap: 4px; }
.reg .echelle i { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--bord); display: inline-block; }
.defile { overflow-x: auto; }
.lf-ligne { display: flex; gap: 10px; align-items: baseline; }
.lf-ligne > b { flex: none; width: 52px; color: var(--texte); font-size: 13px; }
.lf-niveaux { display: flex; gap: 3px; }
.lf-niveaux i { width: 22px; height: 12px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.legendes { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-top: 8px; border-top: 1px solid var(--bord); }
.legendes .lg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--discret); }
.legendes .lg b { color: var(--texte); }
.legendes .lg i { width: 14px; height: 14px; border-radius: 2px; display: inline-block; margin-right: 2px; }

@media (max-width: 960px) { .rangee1 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .nav { min-height: 72px; padding: 8px 20px; }
  .burger { display: inline-flex; }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .menu.ouvert { display: flex; }
  .menu a { padding: 14px 4px; font-size: 18px; border-top: 1px solid rgba(255,255,255,.12); }
  .theme { margin: 10px 0 0; align-self: flex-start; }
  main { padding: 16px 16px 32px; }
  .panneau { padding: 16px; }
  .zone-carte { padding: 6px 0; }
}
.vide { padding: 40px 10px; text-align: center; color: var(--discret); }

footer { background: var(--marine); color: var(--bandeau-texte); }
footer div { max-width: 1240px; margin: 0 auto; padding: 22px 20px; font-size: 15px; text-align: center; }

.carre { width: 16px; height: 16px; border-radius: var(--rayon); flex: none; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.reg .carte-reg img { display: block; margin: 0 auto; }

/* ---- Carte de France (Leaflet) ---- */
.carte { position: relative; width: 100%; max-width: 700px; margin: 0 auto; aspect-ratio: 1.03; border-radius: var(--rayon); overflow: hidden; }
.carte.leaflet-container { font: inherit; background: #78c7ff; }
.mk-wrap { background: none; border: 0; }
.leaflet-container .mk { color: #14213d; }
.mk { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 100%; text-decoration: none; color: #14213d; }
.mk span { flex: none; }
.mk b { margin-top: 3px; font-size: 14px; line-height: 1; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.mk:hover b, .mk:focus-visible b { color: #00508a; }
.mk:focus-visible { outline: 2px solid var(--vif); outline-offset: -2px; border-radius: var(--rayon); }
@media (max-width: 700px) { .mk b { font-size: 13px; margin-top: 1px; } .carte { aspect-ratio: 0.95; } }
.vent-marq { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; pointer-events: auto; }
.fl-svg { display: block; flex: none; overflow: visible; margin-top: 4px; }
.vent-marq b { font-size: 14px; line-height: 1; margin-top: 3px; color: #14213d; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.vent-marq em { font-style: normal; font-size: 10px; color: #780000; }
.fleches { display: flex; gap: 6px; }
.fleche { width: 44px; min-height: 44px; border-radius: var(--rayon); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.fleche:disabled { opacity: .35; cursor: default; }

/* ---- Cartes de risque en SVG ---- */
.reg .carte-reg { padding: 6px; }
.reg .carte-reg svg { display: block; width: 100%; height: auto; max-height: 300px; margin: 0 auto; }
.reg .carte-reg path.zone { stroke: #5d6b82; stroke-width: 0.012; stroke-linejoin: round; }
.entete-droite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---- Page « Cartes » ---- */
.types { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.choix-type { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--bouton-texte); cursor: pointer; }
.choix-type:has(input:checked) { background: var(--marine); border-color: var(--marine); color: #fff; }
.choix-type:has(input:focus-visible) { outline: 2px solid var(--vif); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.carte-large { max-width: 900px; aspect-ratio: 1.15; }
.echelle { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; color: var(--discret); }
.echelle span { display: inline-flex; align-items: center; gap: 5px; }
.echelle i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--bord); display: inline-block; }
.leaflet-container { background: #78c7ff; }

/* Flèches de jour au-dessus des cartes de risque (ordinateur et téléphone) */


/* Page « Cartes » : légende à droite, titre et date dans la carte */
.carte-et-legende { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; align-items: start; }
.carte-et-legende .carte-large { max-width: none; aspect-ratio: 1.1; }
.legende { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.legende b { font-size: 15px; margin-bottom: 2px; }
.ligne-legende { display: flex; align-items: center; gap: 8px; color: var(--discret); }
.ligne-legende i { width: 22px; height: 14px; border-radius: 3px; border: 1px solid var(--bord); flex: none; }
.etiquette-carte { background: rgba(255, 255, 255, .88); color: #14213d; border-radius: var(--rayon); padding: 6px 10px; font-weight: 700; font-size: 15px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
@media (max-width: 860px) { .carte-et-legende { grid-template-columns: minmax(0, 1fr); } .legende { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; } .legende b { width: 100%; } .etiquette-carte { font-size: 13px; padding: 4px 8px; } }

/* ---- Page de prévisions d'une ville ---- */
.fil { font-size: 14px; color: var(--discret); }
.fil a { color: var(--discret); }
.v-entete h1 { margin: 0; font-size: 30px; }
.v-entete p { margin: 0; }
.v-haut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.v-haut .panneau { min-width: 0; }
.v-faits { display: flex; flex-direction: column; gap: 12px; }
.v-fait { display: flex; gap: 12px; align-items: center; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 14px; text-decoration: none; color: var(--texte); }
.v-fait:hover { border-color: var(--vif); }
.v-fait-texte { display: flex; flex-direction: column; min-width: 0; font-size: 14px; color: var(--discret); }
.v-fait-texte b { color: var(--texte); font-size: 15px; }
.v-fait-texte em { font-style: normal; font-weight: 700; color: var(--marine); font-size: 16px; }
:root[data-theme="dark"] .v-fait-texte em { color: var(--vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v-fait-texte em { color: var(--vif); } }
.defile { overflow-x: auto; }
.v-jours { display: grid; grid-template-columns: repeat(12, minmax(84px, 1fr)); gap: 5px; }
.v-jour { color: #14213d; }
.v-jour .v-desc { color: #2a3552; }
.v-jour { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 8px 2px; border: 1px solid rgba(20, 33, 61, .18); border-radius: var(--rayon); text-decoration: none; }
.v-jour:hover { border-color: var(--vif); }
.v-jour-nom { font-weight: 700; text-transform: capitalize; font-size: 14px; white-space: nowrap; }
.v-desc { font-size: 13px; color: var(--discret); line-height: 1.2; min-height: 2.4em; }
.v-temps { display: inline-flex; align-items: center; gap: 2px; font-size: 17px; }
.v-temps .mini-30 { transform: scale(.8); margin: -4px -2px; }
.froid { color: #1a73c8; }
:root[data-theme="dark"] .froid { color: #6cb4ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .froid { color: #6cb4ff; } }
.v-vent, .v-vent2 { font-size: 13px; color: var(--discret); display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.v-vent .mini-30 { transform: scale(.7); margin: -6px; }
.v-risques { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.v-pastille { font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: var(--rayon); background: var(--r0); color: var(--texte); }
.v-pluie { background: #cfe0fb; color: #143d96; }
.v-orage { background: #ffe600; color: #4a3300; }
.v-neige { background: #e6defa; color: #4c2fa3; }
.v-soleil { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 15px; color: var(--discret); }
.v-soleil > span { display: inline-flex; align-items: center; }
.v-soleil .mini-30 { transform: scale(.8); margin: -4px -2px -4px -4px; }
.v-tranches { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.v-tranche { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 0 0 8px; overflow: hidden; border-radius: var(--rayon); border: 1px solid rgba(20, 33, 61, .18); }
.v-heure { font-weight: 700; font-size: 14px; }
.v-temp { font-size: 20px; }
.fl-vent { display: inline-block; width: 1em; text-align: center; }
.fl-vent::before { content: "↑"; display: inline-block; font-weight: 700; }
.v-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.v-liens a { color: var(--texte); }
@media (max-width: 960px) { .v-haut { grid-template-columns: minmax(0, 1fr); } .v-faits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-tranches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v-faits { grid-template-columns: minmax(0, 1fr); } .v-tranches { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v-entete h1 { font-size: 24px; } }
.ds0::before { transform: rotate(180deg); }
.ds1::before { transform: rotate(202.5deg); }
.ds2::before { transform: rotate(225deg); }
.ds3::before { transform: rotate(247.5deg); }
.ds4::before { transform: rotate(270deg); }
.ds5::before { transform: rotate(292.5deg); }
.ds6::before { transform: rotate(315deg); }
.ds7::before { transform: rotate(337.5deg); }
.ds8::before { transform: rotate(360deg); }
.ds9::before { transform: rotate(382.5deg); }
.ds10::before { transform: rotate(405deg); }
.ds11::before { transform: rotate(427.5deg); }
.ds12::before { transform: rotate(450deg); }
.ds13::before { transform: rotate(472.5deg); }
.ds14::before { transform: rotate(495deg); }
.ds15::before { transform: rotate(517.5deg); }

/* Fonds de ciel derrière les pictogrammes (previsions.css de l'ancien site) */
.ciel-super_jour { background-image: linear-gradient(to bottom, #beccff 10%, #dce3ff 90%); }
.ciel-jour { background-image: linear-gradient(to bottom, #8691ff 10%, #dce3ff 90%); }
.ciel-nuit { background-image: linear-gradient(to bottom, #395fd2 0%, #7584ff 100%); }
.ciel-sombre { background-image: linear-gradient(to bottom, #a7b1e6 20%, #a0a9dc 90%); }
.ciel-demi_sombre { background-image: linear-gradient(to bottom, #a0aaef 10%, #cbd2ee 90%); }
/* Niveau de vent : couleurs de l'ancien site */
.v-niveau { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--rayon); border: 1px solid rgba(0,0,0,.12); color: #14213d; }
.v-rafales { font-size: 12px; color: var(--discret); }
.v-temps { gap: 8px; }
/* Texte lisible sur les fonds de ciel */

/* Prévisions d'une ville : blocs de température et de vent colorés sur toute la largeur de la case */
.v-bloc { display: block; padding: 3px 6px; border-radius: var(--rayon); font-weight: 700; text-align: center; }
.v-temps { display: flex; flex-direction: column; gap: 3px; width: 100%; align-items: stretch; }
.v-temps .v-bloc { font-size: 16px; }
.v-temp.v-bloc { align-self: stretch; font-size: 20px; }
.v-niveau { display: block; align-self: stretch; text-align: center; border-radius: var(--rayon); padding: 3px 4px; font-size: 13px; }
.v-vent2 { align-self: stretch; justify-content: center; padding: 3px 4px; border-radius: var(--rayon); color: #14213d; font-size: 13px; }
.v-soleil .v-niveau { display: inline-block; align-self: auto; }
.fl-grand { font-size: 1.5em; line-height: 1; vertical-align: middle; }
/* Heure du détail : zone de couleur fixe, première couleur de la palette du site (bleu marine, identique en clair et en sombre) */
.v-heure { align-self: stretch; background: var(--marine); color: #fff; padding: 3px 4px; border-radius: var(--rayon); }
.v-tranche { color: #14213d; }
.v-tranche .v-desc { color: #2a3552; }
.ciel-nuit, .ciel-nuit .v-desc, .ciel-nuit .v-heure { color: #fff; }
.v-fait .mini-30 { flex: none; }
.v-jours .v-jour-nom { font-size: 13px; }
.v-jours .v-desc { font-size: 11px; }
.v-jours .v-temps .v-bloc { font-size: 14px; padding: 2px 2px; }
.v-jours .v-niveau { font-size: 11px; padding: 3px 1px; }
.v-jour { min-width: 0; }

/* Graphiques des prévisions d'une ville (SVG écrits par le programme) */
.v-graphes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; min-width: 0; }
.v-graphes .panneau { padding: 12px 14px; gap: 6px; }
.h-petit { font-size: 16px; }
.graphe { width: 100%; height: auto; display: block; }
.graphe .g-grille { stroke: var(--bord); stroke-width: 1; }
.graphe .g-txt { fill: var(--discret); font-size: 12px; }
.graphe .g-val { fill: var(--texte); font-size: 12px; font-weight: 700; }
.graphe .g-unite { text-anchor: start; }
.graphe .g-courbe { fill: none; stroke-width: 2; }
.graphe .g-tmax { stroke: #e8421e; }
.graphe .g-tmin { stroke: #1a73c8; }
.graphe circle.g-tmax { fill: #e8421e; stroke: none; }
.graphe circle.g-tmin { fill: #1a73c8; stroke: none; }
.graphe .g-vent-moy { fill: #4f6f8f; }
.graphe .g-pluie { fill: #2a6bd6; }
.graphe .g-nuages { fill: #9aa4b2; }
.graphe .g-barre { stroke: rgba(20, 33, 61, .35); stroke-width: .5; }
@media (max-width: 960px) { .v-graphes { grid-template-columns: minmax(0, 1fr); } }
.graphe .g-jour { font-size: 11.5px; }

/* Tranche de 3 h : l'heure occupe toute la largeur, collée en haut et sur les côtés ; température en léger (300), 1 pt de moins */
.v-tranche .v-heure { align-self: stretch; margin: 0; border-radius: 0; padding: 4px 0; }
.v-tranche .v-desc { padding: 0 6px; }
.v-tranche .v-temp, .v-tranche .v-vent2 { margin: 0 6px; }
.v-tranche .v-temp.v-bloc { font-weight: 300; font-size: 18.7px; }

/* Recherche d'une ville dans la barre de navigation */
.recherche { position: relative; margin-left: auto; }
.recherche input { width: 215px; min-height: 40px; padding: 0 12px; border-radius: var(--rayon); border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.12); color: #fff; font: inherit; }
.recherche input::placeholder { color: var(--bandeau-texte); opacity: .85; }
.recherche input:focus { background: #fff; color: #14213d; outline: 2px solid var(--vif); }
.recherche-liste { position: absolute; right: 0; top: 46px; z-index: 1000; width: 300px; max-width: 90vw; margin: 0; padding: 4px 0; list-style: none; background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.recherche-liste li a { display: block; padding: 8px 12px; color: var(--texte); text-decoration: none; }
.recherche-liste li a:hover, .recherche-liste li[aria-selected="true"] a { background: var(--marine); color: #fff; }
.recherche-liste .vide { padding: 8px 12px; color: var(--discret); }
.theme { margin-left: 0; }
@media (max-width: 700px) { .recherche { margin-left: 0; margin-top: 10px; } .recherche input { width: 100%; } .recherche-liste { width: 100%; left: 0; right: auto; } }

/* Tranche de 3 h : police réduite de 1 pt (1,33 px) et rectangle de la température sans marge verticale */
.v-tranche .v-heure { font-size: 12.7px; }
.v-tranche .v-desc { font-size: 11.7px; }
.v-tranche .v-vent2 { font-size: 11.7px; }
.v-tranche .v-temp.v-bloc { font-size: 17.4px; padding-top: 0; padding-bottom: 0; line-height: 1.3; }

/* Page d'une ville sur téléphone : tranches de 3 h en lignes, statistiques repliées en bas de page */
.v-stats-bouton { display: none; }
/* Les statistiques sont en bas de page, sous le détail de 3 h des 12 jours (ordinateur et téléphone) */
.v-stats-zone { order: 50; }
.v-voisines { order: 60; }
@media (max-width: 700px) {
  .v-stats-bouton { display: block; width: 100%; min-height: 48px; font-weight: 600; }
  .v-stats-zone .v-haut { display: none; margin-top: 16px; }
  .v-stats-zone.ouvert .v-haut { display: grid; }

  .v-tranches { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .v-tranche { flex-direction: row; align-items: stretch; gap: 8px; padding: 0 8px 0 0; }
  .v-tranche .v-heure { flex: none; width: 62px; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0; }
  .v-tranche .v-desc { display: none; }
  .v-tranche .picto-63 { flex: none; align-self: center; margin: 4px 0; }
  .v-tranche .v-temp.v-bloc { flex: none; align-self: center; margin: 0; min-width: 58px; font-size: 17.4px; }
  .v-tranche .v-vent2 { flex: 1; align-self: center; margin: 0; }
}
@media (max-width: 700px) { .v-tranche .v-vent2 { flex-wrap: nowrap; white-space: nowrap; } }

/* Défilement doux vers le détail d'un jour (sauf si l'utilisateur a demandé moins d'animations) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
section[id^="jour-"] { scroll-margin-top: 12px; }

/* Téléphone : le vent en colonne à droite de la ligne (vitesse au-dessus, flèche et direction dessous) ;
   pas de fond pour un vent faible ou modéré, la vitesse seule prend la couleur du vent à partir de « Fort » */
@media (max-width: 700px) {
  .v-tranche .v-vent2 { flex: none; flex-direction: column; align-items: center; gap: 2px; min-width: 76px; padding: 0; background: none; }
  .v-tranche .v-vit { display: block; padding: 2px 6px; border-radius: var(--rayon); white-space: nowrap; }
  .v-tranche .v-dir { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
}

/* Prévisions de 3 h (ordinateur et téléphone) : seul le fond de la vitesse prend la couleur du vent, à partir de « Fort »
   (couleurs de l'ancien site) ; la direction n'a pas de fond. Pas de marge inutile sous le vent. */
.v-tranche .v-vent2 { background: none; gap: 6px; margin-top: auto; }
.v-tranche .v-vit { padding: 1px 6px; border-radius: var(--rayon); white-space: nowrap; }
.v-tranche .v-dir { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.v-tranche { padding-bottom: 6px; }
.v-tranche .v-desc { min-height: 2.4em; }
.v-tranche .v-temp.v-bloc { margin-top: auto; }
.ciel-nuit .v-vent2 { color: #fff; }
@media (max-width: 700px) { .v-tranche { padding-bottom: 0; } .v-tranche .v-vent2 { margin-top: 0; } .v-tranche .v-temp.v-bloc { margin-top: 0; } }
.v-jours .v-temps { margin-top: auto; }
.v-jour { padding-bottom: 6px; }

/* Page « Cartes » : flèches de jour dans la carte (bas à gauche) */
.fleches-carte { margin: 0 0 14px 10px; }
.fleches-carte .fleche { width: 48px; min-height: 48px; font-size: 26px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
@media (max-width: 700px) { .carte-et-legende .carte-large { aspect-ratio: 0.9; } .etiquette-carte { font-size: 12px; padding: 3px 6px; } }
.fleches-initiales { display: none; }
.leaflet-control .fleches-initiales, .fleches-carte .fleches-initiales { display: flex; }

/* Liste des 12 jours : le niveau de vent n'a de couleur qu'à partir de « Fort » (couleurs de l'ancien site) */

/* ---- Niveaux de vent (rafales) : une seule définition des couleurs ----
   Faible < 35 km/h et Modéré < 60 : pas de couleur ; Fort < 80 : jaune ; Très fort < 100 : orange ; Tempête : rouge ;
   plus de 120 km/h : violet. Décidé par Laurent le 2026-10-04. */
:root { --vent-fort: yellow; --vent-tres-fort: orange; --vent-tempete: red; --vent-violent: #8e1b8e; }
.niveau-fort { background: var(--vent-fort); }
.niveau-tres_fort { background: var(--vent-tres-fort); }
.niveau-tempete { background: var(--vent-tempete); color: #fff; }
.niveau-violent { background: var(--vent-violent); color: #fff; }
/* Liste des 12 jours : le niveau a un fond seulement à partir de « Fort » */
.v-jours .niveau-faible, .v-jours .niveau-modere { background: none; border-color: transparent; }
/* Prévisions de 3 h : seule la vitesse est colorée */
.v-tranche .v-vent2 { background: none; color: inherit; }
.v-tranche .niveau-fort .v-vit { background: var(--vent-fort); color: #14213d; }
.v-tranche .niveau-tres_fort .v-vit { background: var(--vent-tres-fort); color: #14213d; }
.v-tranche .niveau-tempete .v-vit { background: var(--vent-tempete); color: #fff; }
.v-tranche .niveau-violent .v-vit { background: var(--vent-violent); color: #fff; }
/* Histogramme du vent */
.graphe .f-faible, .graphe .f-modere { fill: #b7c7d8; }
.graphe .f-fort { fill: var(--vent-fort); }
.graphe .f-tres_fort { fill: var(--vent-tres-fort); }
.graphe .f-tempete { fill: var(--vent-tempete); }
.graphe .f-violent { fill: var(--vent-violent); }
.v-droite { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.choix-region-zone { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Type de carte (sous la carte de l'accueil) et petits symboles des cartes de vent, de nuages et de températures. */
.modes-carte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.modes-carte .mode { min-height: 40px; padding: 0 12px; font: inherit; cursor: pointer; }
.mk-vent { justify-content: center; }
.mk-vent .fl-svg { margin-top: 2px; }
.mk-vent b { margin-top: 1px; font-size: 13px; }
.mk-temp { align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; border: 1px solid rgba(20, 33, 61, .55); border-radius: 6px; }
.mk-temp:hover, .mk-temp:focus-visible { filter: brightness(1.08); }

/* Retour à la France entière sur la carte zoomée d'une région. */
.retour-france { min-height: 36px; padding: 0 12px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.leaflet-interactive { cursor: pointer; }
.lg-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 10px; }
#legende-carte .lg { flex-wrap: wrap; }

/* Pied de page et suricates qui guettent par-dessus la carte de l'accueil (décoratif, masqué sur téléphone). */
.logo-pied { height: 28px; width: auto; vertical-align: middle; margin-right: 10px; }
.panneau-carte { position: relative; }
.guet { position: absolute; right: 34px; top: -62px; width: 84px; height: 62px; overflow: hidden; pointer-events: none; }
.guet img { display: block; width: 84px; height: auto; }
@media (max-width: 700px) { .guet { display: none; } .marque { font-size: 21px; } .logo-disque { width: 44px; height: 44px; } }
.rangee1 { margin-top: 56px; }
@media (max-width: 700px) { .rangee1 { margin-top: 0; } }

/* Vent des tranches de 3 h : vitesse et direction sur une seule ligne quand la carte est assez large (Montserrat est plus large que
   l'ancienne police), l'une au-dessus de l'autre sinon, toujours de la même façon pour que toutes les cartes restent alignées. */
.v-tranche .v-vent2 { flex-wrap: nowrap; gap: 4px; }
.v-tranche .v-vit { padding: 1px 4px; }
.v-tranche .v-vent2 { font-size: 11px; }
@media (min-width: 701px) and (max-width: 1240px) {
  .v-tranche .v-vent2 { flex-direction: column; gap: 2px; }
}

/* Barre de navigation : le menu se replie derrière le bouton sous 1260 px (le logo et Montserrat prennent plus de place qu'avant ;
   sinon les liens passent sur plusieurs lignes). Mêmes règles que sur téléphone, sans toucher aux marges de la page. */
@media (min-width: 701px) and (max-width: 1260px) {
  .nav { min-height: 72px; padding: 8px 20px; }
  .burger { display: inline-flex; }
  .menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .menu.ouvert { display: flex; }
  .menu a { padding: 14px 4px; font-size: 18px; border-top: 1px solid rgba(255,255,255,.12); }
  .theme { margin: 10px 0 0; align-self: flex-start; }
  .recherche { margin-left: 0; margin-top: 10px; }
  .recherche input { width: 100%; }
  .recherche-liste { width: 100%; left: 0; right: auto; }
}

/* Les régions : le titre (dont la date change de longueur), les flèches d'échéance et le choix de région sont posés sur une grille
   à trois colonnes, pour que les flèches restent EXACTEMENT au même endroit quel que soit le jour affiché (ordinateur). */
.entete-regions { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px 16px; }
.entete-regions .choix-region-zone { justify-self: end; }
@media (max-width: 700px) { .entete-regions { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; } }

/* Courbe de la température moyenne nationale (accueil). */
.tendance { overflow-x: auto; }
.tendance svg { display: block; width: 100%; min-width: 640px; height: auto; }
.tend-grille { stroke: var(--bord); stroke-width: 1; }
.tend-axe { fill: var(--discret); font-size: 12px; }
.tend-jour { fill: var(--texte); font-size: 12px; font-weight: 600; }
.tend-bande { fill: var(--vif); opacity: .16; }
.tend-ligne { fill: none; stroke: var(--marine); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
:root[data-theme="dark"] .tend-ligne { stroke: var(--vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tend-ligne { stroke: var(--vif); } }
.tend-point { fill: var(--carte); stroke: var(--marine); stroke-width: 2.5; }
:root[data-theme="dark"] .tend-point { stroke: var(--vif); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tend-point { stroke: var(--vif); } }
.tend-normale { fill: none; stroke: #d62828; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.tend-ecart { font-size: 12px; font-weight: 700; text-anchor: middle; fill: var(--texte); }
.tend-chaud { fill: #d62828; }
.tend-froid { fill: #0b57d0; }
:root[data-theme="dark"] .tend-froid { fill: #6aa5ff; }
:root[data-theme="dark"] .tend-chaud { fill: #ff6b6b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tend-froid { fill: #6aa5ff; } :root:not([data-theme="light"]) .tend-chaud { fill: #ff6b6b; } }
.tend-val { fill: var(--texte); font-size: 12px; font-weight: 700; text-anchor: middle; }

/* Carte des pictogrammes : température la plus fraîche en bleu, la plus chaude en rouge. */
.mk b.tmin { color: #0b57d0; font-weight: 800; }
.mk b.tmax { color: #d00000; font-weight: 800; }

/* Téléphone : textes des graphiques plus grands (ils étaient réduits avec le dessin, donc illisibles). Les graphiques de la page d'une
   ville gardent une largeur minimale (leur dessin est agrandi, la zone défile si besoin) ; la courbe de l'accueil est dessinée à
   l'échelle 1 et défile aussi. */
@media (max-width: 700px) {
  .v-graphes .panneau { overflow-x: auto; }
  .graphe { min-width: 520px; }
  .tend-axe, .tend-jour, .tend-val, .tend-ecart { font-size: 14px; }
}

/* ---- Observations de la station (/observations/) ---- */
.obs-haut { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.obs-haut .obs-resume { grid-column: 1; grid-row: 1; }
.obs-haut .obs-actuel { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) { .obs-haut { grid-template-columns: 1fr; } .obs-haut .obs-actuel, .obs-haut .obs-resume { grid-column: 1; grid-row: auto; } .obs-haut .obs-actuel { order: -1; } }
/* Panneau « Actuellement » : fond dégradé, grosse température, petites tuiles */
.obs-actuel { color: #fff; gap: 12px; }
.obs-actuel:not([class*="ciel-"]) { background: linear-gradient(160deg, #015181 0%, #0a78b8 100%); border-color: #015181; } /* sans pictogramme : bleu par défaut ; sinon le fond de ciel des prévisions (.ciel-*) */
.obs-actuel h2 { font-size: 19px; line-height: 1.25; }
.obs-fraicheur { font-size: 13px; opacity: .85; }
.obs-actuel-contenu { display: flex; flex-direction: column; gap: 12px; }
.obs-principal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obs-picto-zone { flex: 1; min-width: 150px; height: 140px; display: flex; align-items: center; justify-content: center; }
.obs-picto-zone .obs-picto { flex: none; transform: scale(2.5); transform-origin: center; } /* 2,5 fois la taille de départ (60 px) */
.obs-principal .obs-sous-grosse { flex-basis: 100%; white-space: pre-line; }
.obs-grosse { font-size: 56px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.obs-grosse small { font-size: 22px; font-weight: 600; margin-left: 2px; opacity: .85; }
.obs-sous-grosse { font-size: 14px; opacity: .92; line-height: 1.35; }
.obs-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.obs-tuile { background: rgba(255,255,255,.13); border-radius: var(--rayon); padding: 8px 10px; min-width: 0; }
.obs-tuile h3 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; opacity: .85; }
.obs-val { margin: 2px 0 0; font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.obs-val small { font-size: 12px; font-weight: 500; opacity: .85; }
.obs-sub { margin: 1px 0 0; font-size: 12px; opacity: .88; display: flex; align-items: center; gap: 4px; }
.obs-fleche { display: inline-block; width: 22px; height: 22px; flex: none; }
.obs-tend { display: inline-block; width: 24px; height: 24px; flex: none; transition: transform .2s; }
.obs-tend svg { width: 100%; height: 100%; display: block; }
.obs-tend.monte { color: #ffd166; } .obs-tend.baisse { color: #9fd3ff; } .obs-tend.stable { color: rgba(255,255,255,.75); }
.obs-resume .obs-tableau-zone { flex: 1; }
.obs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.obs-nav .choix:not(.fleche) { min-height: 44px; padding: 0 14px; font-weight: 600; }
.obs-date { min-height: 44px; padding: 0 10px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); font: inherit; }
.obs-message { margin: 0; padding: 10px 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.obs-graphiques { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.obs-graphique { min-width: 0; }
.obs-graphique h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.obs-graphique .uplot, .obs-graphique .u-wrap { max-width: 100%; }
.obs-graphique .u-legend { font: 13px/1.3 "Montserrat", system-ui, sans-serif; color: var(--texte); text-align: left; }
.obs-graphique .u-legend .u-marker { border-radius: 2px; }
.obs-vide { color: var(--discret); padding: 40px 0; text-align: center; }
/* Boutons des mois et des jours */
.obs-boutons { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.obs-boutons .choix { flex: none; min-height: 44px; padding: 0 12px; font-weight: 600; }
.obs-boutons-mois .choix { text-transform: capitalize; }
.obs-boutons-mois .choix.courant:not([aria-pressed="true"]) { border-color: var(--vif); box-shadow: inset 0 -3px 0 var(--vif); }
.obs-boutons-jours .choix { min-width: 46px; padding: 2px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.obs-boutons-jours .abr { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.obs-boutons-jours .num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.obs-sous-titre { margin: 8px 0 0; font-size: 17px; font-weight: 700; }
.obs-tableau-zone { overflow-x: auto; }
.obs-defilant { max-height: 480px; overflow: auto; border: 1px solid var(--bord); border-radius: var(--rayon); }
.obs-tableau { border-collapse: collapse; width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; text-align: center; }
.obs-tableau th, .obs-tableau td { border: 1px solid var(--bord); padding: 4px 6px; white-space: nowrap; }
.obs-tableau thead th { background: var(--marine); color: #fff; font-weight: 600; line-height: 1.15; position: sticky; top: 0; z-index: 1; }
.obs-tableau thead th small { display: block; font-size: 10.5px; font-weight: 400; opacity: .8; }
.obs-tableau tbody th { text-align: left; font-weight: 600; background: var(--fond); }
.obs-tableau tbody tr:nth-child(even) td:not([style]) { background: var(--fond); }
.obs-tableau tfoot td, .obs-tableau tfoot th { font-weight: 700; background: var(--fond); }
.obs-tableau a { color: var(--vif); font-weight: 600; text-decoration: none; }
.obs-tableau a:hover { text-decoration: underline; }
.obs-tableau td small { font-size: 11px; opacity: .75; }
.obs-bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px 24px; font-size: 15px; }
.obs-bilan p { margin: 0; }
.obs-boutons-annees .choix { min-height: 40px; }
.obs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.obs-stat { border: 1px solid var(--bord); border-left: 4px solid var(--vif); border-radius: var(--rayon); background: var(--fond); padding: 8px 12px; }
.obs-stat h4 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--discret); }
.obs-stat .v { margin: 2px 0 0; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.obs-stat .v small { font-size: 13px; font-weight: 500; color: var(--discret); margin-left: 3px; }
.obs-stat .d { margin: 0; font-size: 13px; color: var(--discret); }
.obs-stats[hidden], .obs-message[hidden] { display: none; }
.obs-resume .obs-tableau th, .obs-resume .obs-tableau td { white-space: normal; }
.obs-faits { margin: 10px 0 0; font-size: 14px; color: var(--discret); line-height: 1.6; }
.obs-faits b { color: var(--texte); font-weight: 600; }
@media (max-width: 600px) { .obs-tableau { font-size: 13px; } .obs-tableau th, .obs-tableau td { padding: 3px 4px; } }
.obs-resume .obs-tableau { font-size: 15px; }
.obs-resume .obs-tableau th, .obs-resume .obs-tableau td { padding: 13px 10px; }
.obs-resume .obs-tableau thead th { padding: 9px 10px; }
.obs-zoom { display: flex; flex-wrap: wrap; gap: 6px; }
.obs-zoom .choix { min-height: 44px; padding: 0 14px; font-weight: 600; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.obs-zoom .choix small { font-size: 11px; font-weight: 400; opacity: .8; }
.obs-zoom .choix:disabled { opacity: .4; cursor: default; }
.obs-plage-bouton { margin-left: auto; }
.obs-plage { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.obs-plage[hidden] { display: none; }
.obs-plage-raccourcis, .obs-plage-champs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.obs-plage .choix { min-height: 40px; padding: 0 12px; font-weight: 600; }
.obs-plage input { min-height: 40px; padding: 0 8px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--carte); color: var(--texte); font: inherit; }
.obs-plage label { display: inline-flex; align-items: center; gap: 6px; }
.obs-station { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.obs-station .choix { min-height: 36px; padding: 0 12px; font-weight: 600; font-size: 14px; }
/* Résumé de la journée : fond « zone de carte » de la palette du site (--zone-carte, bleu clair ; bleu nuit en mode sombre), éclairci à 40 %, pour le distinguer
   de la carte « Actuellement » (ciel) et des graphiques (--carte). Seules les cellules, translucides, ajoutent un voile blanc. */
:root { --resume-cellule: rgba(255,255,255,.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --resume-cellule: rgba(255,255,255,.06); } }
:root[data-theme="dark"] { --resume-cellule: rgba(255,255,255,.06); }
.obs-resume { background: color-mix(in srgb, var(--marine) 88%, #fff 12%); border-color: var(--marine); color: #fff; } /* même fond que le champ de recherche : 12 % de blanc sur le bleu marine */
.obs-resume h2, .obs-resume .discret, .obs-resume .obs-station, .obs-resume .obs-station .discret, .obs-resume .obs-faits, .obs-resume .obs-faits b { color: #fff; }
.obs-resume .obs-faits { opacity: .95; }
.obs-resume .choix[aria-pressed="true"] { background: #fff; color: var(--marine); border-color: #fff; }
.obs-resume .obs-tableau tbody th, .obs-resume .obs-tableau tbody tr:nth-child(even) td:not([style]), .obs-resume .obs-tableau tbody td:not([style]) { background: rgba(255,255,255,.94); color: var(--texte-clair, #14213d); }
.obs-resume .obs-tableau th, .obs-resume .obs-tableau td { border-color: rgba(1,81,129,.35); }
.obs-resume .obs-tableau thead th { background: var(--marine); }
.obs-resume .choix:not([aria-pressed="true"]) { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.obs-resume .choix:not([aria-pressed="true"]):hover { border-color: #fff; }
@media (max-width: 440px) { .obs-picto-zone { min-width: 105px; height: 110px; } .obs-picto-zone .obs-picto { transform: scale(1.8); } .obs-grosse { font-size: 50px; } }
/* « Actuellement » : fond de ciel des prévisions (.ciel-*). Texte sombre sur les ciels de jour (comme les prévisions), blanc la nuit. */
.obs-actuel[class*="ciel-"] { border-color: rgba(20,33,61,.18); }
.obs-actuel.ciel-nuit { border-color: #395fd2; }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) { color: #14213d; }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) .obs-tuile { background: rgba(255,255,255,.45); }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) .obs-tend.monte { color: #b34700; }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) .obs-tend.baisse { color: #1c5cb0; }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) .obs-tend.stable { color: #3a4a6b; }
.obs-actuel[class*="ciel-"]:not(.ciel-nuit) .obs-fleche path { stroke: #3b4a6b; }
/* Tableaux : première colonne (heure, jour, mois) figée à gauche quand on fait défiler vers la droite (téléphone). Fonds opaques pour que
   les colonnes qui passent dessous ne se voient pas ; le liseré de droite remplace la bordure, que « border-collapse » fait disparaître. */
.obs-tableau tbody th, .obs-tableau tfoot th, .obs-tableau thead th:first-child { position: sticky; left: 0; box-shadow: 1px 0 0 var(--bord); }
.obs-tableau tbody th, .obs-tableau tfoot th { z-index: 2; }
.obs-tableau thead th:first-child { z-index: 4; box-shadow: 1px 0 0 rgba(255,255,255,.35); } /* au-dessus des autres en-têtes, qui restent collés en haut */
.obs-resume .obs-tableau tbody tr:nth-child(n) th { background: #f4f8fb; color: #14213d; } /* colonne figée du résumé : fond clair et texte sombre sur toutes les lignes, en clair comme en sombre */
.obs-tableau tbody tr:nth-child(even) th { background: color-mix(in srgb, var(--fond) 70%, var(--carte)); }
/* Marque meteoservice : monogramme « ms » (soleil jaune) sur disque blanc en haut à gauche, comme l'ancien site ; le grand logo, discret, en filigrane sur toutes les cartes. */
.logo-disque { background: #fff; padding: 5px; object-fit: contain; }
.leaflet-container::after { content: ""; position: absolute; right: 12px; top: 14px; width: 190px; height: 24px; background: url(/logo-meteoservice.png) no-repeat right center / contain; opacity: .3; z-index: 450; pointer-events: none; }
@media (max-width: 700px) { .leaflet-container::after { width: 120px; height: 16px; top: 12px; } }
/* Page « Cartes » : le haut à droite porte déjà l'étiquette de la date, le filigrane passe en bas à droite (la mer, sans repères). */
.leaflet-container.carte-large::after { top: auto; bottom: 16px; width: 240px; height: 30px; }
@media (max-width: 700px) { .leaflet-container.carte-large::after { bottom: 12px; width: 140px; height: 18px; } }
/* Page « Radar pluie » : commandes d'animation au-dessus de la carte ; mer et fond clairs pour que la pluie (bleus, verts) ressorte. */
.radar-commandes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Lecture et réglette dans la carte, en haut, sur un bandeau clair (radar.js les y place) ; la date et la disquette juste dessous.
   Couleurs fixes : la carte reste claire en thème sombre. */
.carte-radar .leaflet-top { top: var(--bande, 0px); }
.carte-radar .radar-commandes { position: absolute; left: 0; right: 0; top: 0; z-index: 800; margin: 0; padding: 8px 10px 0;
  background: rgba(255, 255, 255, .82); color: #14213d; }
.carte-radar .radar-commandes .choix { background: #fff; color: #14213d; border-color: #c5ced8; }
.carte-radar .radar-commandes .fleche { width: 36px; min-height: 36px; font-size: 20px; }
.carte-radar .radar-lecture { min-height: 36px; padding: 0 12px; }
.carte-radar .radar-graduations i { background: #5f6b77; }
.carte-radar .radar-graduations button { color: #4a5764; }
.carte-et-legende .carte-radar { aspect-ratio: 1; } /* un peu plus haute : la France tient sous le bandeau */
@media (max-width: 700px) { .carte-et-legende .carte-radar { aspect-ratio: .8; } .carte-radar .radar-commandes { padding: 6px 8px 0; gap: 6px; } }
.radar-reglette { position: relative; flex: 1 1 200px; min-width: 140px; padding-bottom: 22px; }
.radar-reglette input[type=range] { width: 100%; margin: 0; accent-color: #1e64e6; }
/* Graduations sous la réglette : un trait par image disponible, les heures rondes plus longues et nommées (cliquables).
   Position : le centre du curseur va de 8 px à (largeur − 8 px). */
.radar-graduations { position: absolute; left: 0; right: 0; top: 22px; height: 20px; }
.radar-graduations i { position: absolute; top: 0; width: 1px; height: 5px; background: var(--discret); opacity: .6; }
.radar-graduations i.heure { height: 9px; opacity: 1; }
.radar-graduations button { position: absolute; top: 9px; transform: translateX(-50%); background: none; border: 0; padding: 0 2px; font: inherit;
  font-size: 11px; color: var(--discret); cursor: pointer; font-variant-numeric: tabular-nums; }
.radar-graduations button:hover { color: inherit; text-decoration: underline; }
.radar-lecture { min-height: 44px; padding: 0 16px; font-weight: 600; }
.radar-heure { font-weight: 700; font-size: 18px; min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.radar-options { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 15px; }
.radar-options label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.radar-options input { width: 18px; height: 18px; accent-color: #1e64e6; }
.radar-options input:disabled + * , .radar-options label:has(input:disabled) { opacity: .5; cursor: default; }
.radar-bulle { position: absolute; z-index: 700; pointer-events: none; background: rgba(255,255,255,.94); color: #14213d; font-weight: 700; font-size: 14px;
  padding: 4px 8px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.3); white-space: nowrap; transform: translate(12px, -50%); }
.radar-periode { min-height: 36px; padding: 0 8px; font: inherit; }
/* Commandes dans la carte : disquette (enregistrer l'image) en haut à droite, source en bas à gauche. */
.radar-disquette { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: #fff; color: #14213d;
  border: 2px solid rgba(0,0,0,.2); border-radius: 4px; background-clip: padding-box; cursor: pointer; }
.radar-disquette:hover { background-color: #f4f4f4; }
/* Source : centrée en bas de la carte, à gauche sur téléphone. */
.radar-source { position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 800; pointer-events: none; color: #14213d; font-size: 12px;
  font-weight: 600; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.carte-radar .etiquette-carte { font-size: 17px; padding: 6px 12px; background: rgba(255, 255, 255, .72); }
@media (max-width: 700px) { .carte-radar .etiquette-carte { font-size: 12px; padding: 3px 7px; } }
/* Page Radar : filigrane centré, de la largeur de la carte, plus discret (il est repris dans l'image téléchargée). */
.leaflet-container.carte-radar::after { left: 5%; right: 5%; top: 50%; bottom: auto; width: auto; height: auto; aspect-ratio: 404 / 51;
  transform: translateY(-50%); background-size: contain; background-position: center; opacity: .12; }
@media (max-width: 700px) { .radar-source { left: 8px; transform: none; } }