/* Feuille de style de Météo Climat France.
 *
 * POURQUOI ELLE EST SORTIE DU DOCUMENT — elle y pesait 93 ko, soit 62 % du
 * poids de chaque page servie, et elle était retéléchargée à CHAQUE navigation.
 * Le site compte désormais dix familles d'adresses et l'on passe volontiers de
 * la météo d'une commune à son climat, puis à un article : c'est quatre-vingt
 * treize kilo-octets identiques, quatre fois de suite.
 *
 * En fichier séparé, elle est mise en cache une fois pour toutes — l'en-tête la
 * déclare immuable — et les navigations suivantes ne la redemandent plus. Le
 * coût est un aller-retour au tout premier chargement, que le préchargement de
 * connexion et la déclaration en tête de document réduisent à presque rien.
 *
 * Le nom est STABLE, et non empreinté. Une empreinte permettrait un cache d'un
 * an, mais le service worker doit précharger cette feuille — sans elle, la
 * coquille hors ligne s'affiche sans mise en forme — et il ne peut pas deviner
 * un nom qui change à chaque publication. Le régime retenu est donc celui déjà
 * appliqué aux scripts : revalidation à chaque visite, et une réponse 304 de
 * quelques centaines d'octets quand rien n'a bougé.
 */

:root {
  /* --- Nimbus Professional -------------------------------------------------
     Palette du système de conception livré. Les NOMS de variables sont
     inchangés : tout le site les utilise déjà, et les renommer aurait touché
     des centaines de déclarations pour un résultat identique. Seules les
     VALEURS changent — c'est ce qui permet de reposer la peau sans toucher au
     contenu ni à la structure.

     Ancrage : navy profond (#1B2D4B) pour la marque et le texte fort, bleu
     atmosphérique (#3D6089) pour l'interactif, orange (#FF9A00) réservé aux
     alertes et à rien d'autre. */
  --fond: #f2f2f2;              /* canevas, distinct des cartes */
  --carte: #ffffff;             /* surface des cartes */
  --carte-2: #f3f3f3;           /* surface secondaire, puces, en-têtes */
  --bord: #e2e2e2;
  --bord-fort: #c5c6ce;         /* outline-variant */
  --encre: #1a1c1c;             /* on-surface */
  --encre-2: #44474e;           /* on-surface-variant */
  --encre-3: #63656d;           /* outline */
  --accent: #3d6089;            /* bleu atmosphérique — actions secondaires */
  --accent-encre: #ffffff;
  --marine: #1b2d4b;            /* navy profond — marque, blocs pleins */
  --soleil: #ff9a00;            /* réservé aux alertes et à la mise en garde */
  --eau: #3d6089;
  --alerte: #ba1a1a;            /* error */
  /* Traits du météogramme.
     Trois teintes seulement, toutes distinguables en vision dichromate : un
     brique pour la chaleur, un vert profond pour le vent, un bleu pour l eau.
     Elles ne servent QUE là — les réutiliser ailleurs ferait perdre au
     graphique sa clé de lecture. */
  --temp-trait: #c2410c;
  --vent-trait: #15803d;
  --pluie-trait: #2668b8;
  /* Profondeur par couches tonales plutôt que par ombres appuyées : une seule
     ombre très diffuse, à 4 % d'opacité, comme le prescrit le système. */
  --ombre: 0 4px 40px rgba(4,24,53,.06);
  --r: 16px;                    /* grands conteneurs */
  --r-sm: 8px;                  /* champs, boutons, petites cartes */
  --t: 150ms cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}:root[data-theme='sombre'] {
  --fond: #0f172a;              /* surface-dark : navy-charbon */
  --carte: #1e293b;
  --carte-2: #24334a;
  --bord: #334155;
  --bord-fort: #475569;
  --encre: #f1f1f1;             /* inverse-on-surface */
  --encre-2: #cbd5e1;
  --encre-3: #94a3b8;
  --accent: #b5c7ed;            /* inverse-primary : lisible sur navy */
  --accent-encre: #041835;      /* on-primary inversé */
  --marine: #d7e3ff;            /* la marque s'éclaircit au lieu de disparaître */
  --soleil: #ffb86d;            /* tertiary-fixed-dim */
  --eau: #a6c9f8;
  --alerte: #ffb4ab;            /* on-error en thème sombre */
  /* Sur fond navy, les trois teintes du météogramme sont remontées en clarté :
     le brique et le vert profond du thème clair y tombent sous le contraste
     minimal et la courbe disparaît dans le fond. */
  --temp-trait: #ff9a62;
  --vent-trait: #6fd08c;
  --pluie-trait: #7db6f0;
  --ombre: 0 4px 40px rgba(0,0,0,.35);
  color-scheme: dark;
}
/* Thème « Système ».
   Le bloc est répété plutôt que factorisé, et c'est délibéré : la seule façon
   de l'éviter serait de résoudre la préférence en JavaScript avant le premier
   rendu, donc par un script en ligne — que la politique de sécurité du site
   interdit (`script-src 'self'`). Résolu par la feuille de style, le bon thème
   est actif dès le premier pixel, sans requête ni scintillement. */
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
  --fond: #0f172a;              /* surface-dark : navy-charbon */
  --carte: #1e293b;
  --carte-2: #24334a;
  --bord: #334155;
  --bord-fort: #475569;
  --encre: #f1f1f1;             /* inverse-on-surface */
  --encre-2: #cbd5e1;
  --encre-3: #94a3b8;
  --accent: #b5c7ed;            /* inverse-primary : lisible sur navy */
  --accent-encre: #041835;      /* on-primary inversé */
  --marine: #d7e3ff;            /* la marque s'éclaircit au lieu de disparaître */
  --soleil: #ffb86d;            /* tertiary-fixed-dim */
  --eau: #a6c9f8;
  --alerte: #ffb4ab;            /* on-error en thème sombre */
  /* Sur fond navy, les trois teintes du météogramme sont remontées en clarté :
     le brique et le vert profond du thème clair y tombent sous le contraste
     minimal et la courbe disparaît dans le fond. */
  --temp-trait: #ff9a62;
  --vent-trait: #6fd08c;
  --pluie-trait: #7db6f0;
  --ombre: 0 4px 40px rgba(0,0,0,.35);
  color-scheme: dark;
}
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--fond); color: var(--encre);
  font-family: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
.tab { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.liens-pied { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; }
.liens-pied a { color: var(--encre-3); font-size: 12px; }
.signature-pied { margin: 10px 0 0; font-size: 12px; color: var(--encre-3); }
.signature-pied a { color: var(--accent); font-weight: 600; }
button { font: inherit; }
/* `display` posé par une classe l'emporte sur l'attribut `hidden`, qui n'a que
   la spécificité d'une règle de la feuille par défaut du navigateur. Sans cette
   ligne, la recherche de l'en-tête s'affichait dès l'accueil. */
[hidden] { display: none !important; }

/* --- En-tête -------------------------------------------------------------- */
.entete {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--carte); border-bottom: 1px solid var(--bord);
  position: sticky; top: 0; z-index: 40;
}
.marque { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.marque svg { color: var(--soleil); flex: none; }
/* `flex-wrap` : la barre porte désormais quatre commandes (épingler, partager,
   thème, réglages). Sans repli, la dernière sortait de l'écran sur téléphone. */
.entete .recherche-mini { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px;
  background: var(--carte-2); color: var(--encre-2);
  border: 1px solid var(--bord); border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: background var(--t), color var(--t);
}
.btn:hover { background: var(--bord); color: var(--encre); }
.btn-primaire { background: var(--accent); color: var(--accent-encre); border-color: transparent; }
.btn-primaire:hover { background: var(--accent); filter: brightness(1.1); color: var(--accent-encre); }

/* --- Recherche ------------------------------------------------------------ */
.champ-cp { position: relative; display: flex; gap: 8px; }
.champ-cp input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px 0 46px;
  background: var(--carte); color: var(--encre);
  border: 2px solid var(--bord-fort); border-radius: 10px;
  font: inherit; font-size: 17px; font-variant-numeric: tabular-nums;
}
.champ-cp input:focus { outline: none; border-color: var(--accent); }
.champ-cp .loupe { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--encre-3); pointer-events: none; }
.champ-cp button { min-height: 52px; padding: 0 22px; font-size: 16px; }
.entete .champ-cp input { height: 44px; font-size: 15px; padding-left: 40px; }
.entete .champ-cp .loupe { left: 13px; }
.entete .champ-cp button { min-height: 44px; padding: 0 16px; font-size: 14px; }
.entete .champ-cp { width: min(360px, 46vw); }

.suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--carte); border: 1px solid var(--bord-fort);
  border-radius: 10px; box-shadow: var(--ombre); overflow: hidden; display: none;
}
.suggestions.ouvert { display: block; }
.suggestions button {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  width: 100%; min-height: 52px; padding: 8px 16px;
  background: none; border: none; color: var(--encre); text-align: left; cursor: pointer;
}
.suggestions button:hover, .suggestions button[aria-selected='true'] { background: var(--carte-2); }
.suggestions .meta { font-size: 13px; color: var(--encre-3); }

/* --- Accueil -------------------------------------------------------------- */
.accueil {
  flex: 1; display: grid; place-items: center; padding: 40px 20px;
}
.accueil-boite { width: min(560px, 100%); text-align: center; }
.accueil h1 { margin: 0 0 10px; font-size: clamp(26px, 4.6vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.accueil p { margin: 0 0 26px; color: var(--encre-2); font-size: 16px; }
.accueil .champ-cp { text-align: left; }
.accueil .exemples { margin-top: 16px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; align-items: center; }
.accueil .exemples span { font-size: 13px; color: var(--encre-3); }
.accueil .exemples button {
  min-height: 36px; padding: 0 12px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: 999px; color: var(--encre-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.accueil .exemples button:hover { border-color: var(--accent); color: var(--accent); }
.erreur { margin-top: 14px; padding: 11px 14px; border-radius: 8px; background: var(--carte); border-left: 4px solid var(--alerte); color: var(--encre-2); font-size: 14px; text-align: left; }

.evitement {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  padding: 10px 16px; background: var(--accent); color: var(--accent-encre);
  border-radius: 8px; font-weight: 700; text-decoration: none;
}
.evitement:focus { left: 8px; }

.sans-js, .hors-ligne {
  margin: 0; padding: 12px 20px; background: var(--soleil); color: #1a1206;
  font-size: 14px; font-weight: 600; text-align: center;
}
.hors-ligne { background: var(--alerte); color: #fff; }

.revenir {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  background: var(--carte); border-color: var(--bord-fort); box-shadow: var(--ombre);
}

.squelette {
  background: linear-gradient(90deg, var(--carte-2) 25%, var(--bord) 37%, var(--carte-2) 63%);
  background-size: 400% 100%; border-radius: 6px;
  animation: chatoie 1.4s ease-in-out infinite;
}
@keyframes chatoie { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* Une animation ramenée à 1 ms scintille encore : on la supprime. */
@media (prefers-reduced-motion: reduce) { .squelette { animation: none; } }

.erreur-bloc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; }
.erreur-bloc p { margin: 0; color: var(--encre-2); font-size: 14px; }

/* Recherche principale — au-dessus de la carte, c'est le point d'entrée */
.recherche-principale { padding: 18px 20px 16px; }
.r-libelle {
  display: block; margin-bottom: 10px;
  font-size: 17px; font-weight: 800; letter-spacing: -.015em;
}
.recherche-principale .champ-cp { max-width: 620px; }
.r-aide { margin: 10px 0 0; font-size: 13px; color: var(--encre-3); }

/* Aide et avis sur la carte */
.aide-carte {
  position: absolute; left: 12px; top: 12px; z-index: 5; margin: 0;
  padding: 7px 12px; border-radius: 999px;
  background: var(--carte); border: 1px solid var(--bord-fort); box-shadow: var(--ombre);
  font-size: 12.5px; font-weight: 600; color: var(--encre-2); pointer-events: none;
}
.avis-zoom {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 6; margin: 0;
  padding: 9px 13px; border-radius: 9px;
  background: var(--carte); border-left: 3px solid var(--soleil); box-shadow: var(--ombre);
  font-size: 12.5px; color: var(--encre-2); max-width: 46ch; pointer-events: none;
}

/* Réglages */
.reglages-boite { position: relative; }
.reglages {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 232px;
  background: var(--carte); border: 1px solid var(--bord-fort); border-radius: 10px;
  box-shadow: var(--ombre); padding: 6px;
}
.reglages fieldset { border: none; margin: 0; padding: 8px 8px 10px; }
.reglages fieldset + fieldset { border-top: 1px solid var(--bord); }
.reglages legend {
  padding: 0; font-size: 11px; font-weight: 800; color: var(--encre-3);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.reglages label {
  display: flex; align-items: center; gap: 9px; min-height: 34px;
  font-size: 14px; cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.reglages label:hover { background: var(--carte-2); }
.reglages input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* Équivalent textuel de la carte */
.desc-carte { border-top: 1px solid var(--bord); }
.desc-carte summary {
  padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--encre-2);
}
.desc-carte summary:hover { background: var(--carte-2); }
.desc-carte > div { padding: 0 16px 16px; font-size: 14px; color: var(--encre-2); line-height: 1.65; max-width: 78ch; }

.invite { margin: 0; padding: 14px 18px; background: var(--carte); border: 1px dashed var(--bord-fort); border-radius: var(--r); color: var(--encre-2); font-size: 14px; }
#bloc-commune { display: flex; flex-direction: column; gap: 20px; }

/* --- Résultat ------------------------------------------------------------- */
.resultat { flex: 1; display: none; padding: 20px; gap: 20px; flex-direction: column; max-width: 1400px; width: 100%; margin: 0 auto; }
.resultat.actif { display: flex; }

.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--r); box-shadow: var(--ombre); }
.bloc-tete { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px 0; }
.bloc-tete h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.bloc-tete .note { font-size: 13px; color: var(--encre-3); margin-left: auto; }

/* Conditions du moment */
.maintenant { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 20px 22px; }
.maintenant .lieu h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.maintenant .lieu .sous { color: var(--encre-3); font-size: 14px; margin-top: 2px; }
.maintenant .temp { display: flex; align-items: flex-start; gap: 4px; }
.maintenant .temp .n { font-size: 68px; font-weight: 800; line-height: .95; letter-spacing: -.04em; }
.maintenant .temp .u { font-size: 26px; font-weight: 700; color: var(--encre-2); margin-top: 6px; }
.maintenant .desc { font-size: 16px; font-weight: 600; }
.maintenant .desc .ress { display: block; font-size: 14px; font-weight: 500; color: var(--encre-3); margin-top: 2px; }
.maintenant .chiffres { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 24px; font-size: 14px; }
.maintenant .chiffres dt { color: var(--encre-3); }
.maintenant .chiffres dd { margin: 0; font-weight: 700; text-align: right; }
.maintenant .chiffres .bft { display: block; font-weight: 500; font-size: 12px; color: var(--encre-3); }
.maintenant .nowcast {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--carte-2); border-left: 3px solid var(--accent);
  font-size: 14px; font-weight: 600; color: var(--encre-2); max-width: 42ch;
}
.maintenant .maj { margin: 8px 0 0; font-size: 12px; color: var(--encre-3); }

/* Prévision heure par heure */
.heures { overflow-x: auto; scrollbar-width: thin; padding: 14px 18px 18px; }
.heures-piste { display: flex; gap: 4px; min-width: min-content; }
.hcase {
  flex: none; width: 74px; padding: 12px 6px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--carte-2); border: 1px solid transparent; text-align: center;
}
.hcase.maintenant-h { border-color: var(--accent); background: var(--carte); box-shadow: inset 0 0 0 1px var(--accent); }
.hcase.nuit { background: var(--fond); }
.hcase .h { font-size: 13px; font-weight: 700; color: var(--encre-2); }
.hcase .ic { width: 32px; height: 32px; }
.hcase .t { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.hcase .pl { font-size: 12px; color: var(--eau); font-weight: 700; min-height: 17px; }
/* La phrase de synthèse passe avant les chiffres : c'est elle qu'on lit. */
.synthese {
  margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; font-weight: 600;
  color: var(--encre); max-width: 46ch;
}

.hcase .ve { font-size: 12px; color: var(--encre-3); display: inline-flex; align-items: center; gap: 3px; justify-content: center; }
.fleche-vent { flex: none; opacity: .75; }

/* Barre de probabilité de pluie : la hauteur se compare d'un coup d'œil d'une
   heure à l'autre, ce qu'une suite de pourcentages ne permet pas. */
.pl { position: relative; }
.pl-barre {
  position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  width: 16px; height: 14px; border-radius: 2px;
  background: linear-gradient(to top, var(--eau) var(--p), transparent var(--p));
  opacity: .55;
}

/* Rafale, nébulosité et UV : trois lignes ajoutées à la frise, sur des données
   déjà téléchargées. Chacune réserve sa hauteur même vide, sinon les cases se
   décalent verticalement d'une heure à l'autre et la frise ondule. */
.hcase .raf, .hcase .neb, .hcase .uv { min-height: 16px; font-size: 11.5px; font-weight: 700; }
.hcase .raf { color: var(--encre-3); }
.hcase .raf-forte { color: var(--alerte); }

/* La nébulosité se lit d'abord à la pastille, remplie à proportion, et
   seulement ensuite au chiffre : c'est une couverture, pas une note. */
.hcase .neb { color: var(--encre-3); display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.neb-j {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--bord-fort);
  background: linear-gradient(to top, var(--encre-3) var(--part), transparent var(--part));
}

/* UV : l'échelle standard OMS, aux couleurs conventionnelles. Le chiffre reste
   écrit — la couleur seule ne se lit pas en vision dichromate. */
.hcase .uv { border-radius: 999px; padding: 1px 7px; line-height: 1.35; }
.uv-modere { background: #f8e08e; color: #3a2c00; }
.uv-fort { background: #f5a623; color: #2b1900; }
.uv-tresfort { background: #e2574c; color: #fff; }
.uv-extreme { background: #8f4bab; color: #fff; }

/* Repère de lever ou de coucher, intercalé dans la frise. */
.hcase.astre { background: none; border-style: dashed; min-width: 62px; }
.hcase.astre .astre-nom { font-size: 11px; color: var(--encre-3); font-weight: 700; }
.jour-sep { flex: none; width: 1px; background: var(--bord); margin: 4px 6px; }
.jour-titre {
  flex: none; width: 40px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--encre-3); text-transform: uppercase; letter-spacing: .06em;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* Jours — quarts de journée, horaire au dépliage */
.jours { display: flex; flex-direction: column; padding: 6px; }
.jour { border-bottom: 1px solid var(--bord); }
.jour:last-child { border-bottom: none; }
.jour > summary {
  display: grid; grid-template-columns: 130px 34px 1fr auto 22px; gap: 12px;
  align-items: center; padding: 12px; border-radius: 9px; cursor: pointer; list-style: none;
}
.jour > summary::-webkit-details-marker { display: none; }
.jour > summary::after { content: '⌄'; font-size: 17px; color: var(--encre-3); text-align: center; transition: transform var(--t); }
.jour[open] > summary::after { transform: rotate(180deg); }
.jour > summary:hover { background: var(--carte-2); }
.jour .j-nom { font-weight: 700; }
.jour .j-date { display: block; font-size: 13px; color: var(--encre-3); font-weight: 400; }
/* `min-width: 0` : une colonne `1fr` de grille ne descend PAS sous la largeur
   de son contenu tant qu'on ne l'y autorise pas. Sans cette ligne, la mention
   de probabilité ajoutée au résumé du jour poussait la ligne entière au-delà
   de l'écran sur téléphone. */
.jour .j-res { font-size: 13px; color: var(--encre-3); min-width: 0; overflow-wrap: anywhere; }
.jour .nuance { opacity: .75; font-size: 12px; }
.jour .j-t { text-align: right; font-weight: 700; font-size: 15px; white-space: nowrap; }
.jour .j-t .mn { color: var(--encre-3); margin-right: 10px; font-weight: 600; }

.quarts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px 12px 14px; }
.q { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 10px; background: var(--carte-2); text-align: center; }
.q-vide { opacity: .5; }
.q-nom { font-size: 12px; font-weight: 700; color: var(--encre-3); text-transform: uppercase; letter-spacing: .04em; }
.q-t { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.q-pl { font-size: 12px; color: var(--eau); font-weight: 700; }
.q-ve { font-size: 12px; color: var(--encre-3); }
.q-tiret { font-size: 20px; color: var(--encre-3); }

/* Bascule tableau / graphique */
.bascule { display: flex; gap: 2px; padding: 0 12px 10px; }
.bascule button {
  min-height: 38px; padding: 0 16px;
  background: var(--carte-2); border: 1px solid var(--bord);
  color: var(--encre-3); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background var(--t), color var(--t);
}
.bascule button:first-child { border-radius: 8px 0 0 8px; }
.bascule button:last-child { border-radius: 0 8px 8px 0; border-left: none; }
.bascule button:hover { color: var(--encre); }
.bascule button[aria-pressed='true'] { background: var(--accent); color: var(--accent-encre); border-color: transparent; }

/* Météogramme : trois bandes sur un axe de temps commun */
.meteogramme { width: 100%; height: auto; display: block; min-width: 620px; }
.meteogramme .g-grille { stroke: var(--bord); stroke-width: 1; }
.meteogramme .g-base { stroke: var(--bord-fort); stroke-width: 1; }
.meteogramme .g-zero { stroke: var(--encre-3); stroke-width: 1; stroke-dasharray: 3 3; }
.meteogramme .g-aire { fill: url(#grad-t); }
.meteogramme .g-temp { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.meteogramme .g-ressenti { fill: none; stroke: var(--encre-3); stroke-width: 1.6; stroke-dasharray: 4 3; }
.meteogramme .g-proba { fill: none; stroke: var(--eau); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: .85; }
.meteogramme .g-vent { fill: none; stroke: var(--encre-2); stroke-width: 2.2; stroke-linejoin: round; }
.meteogramme .g-raf { fill: none; stroke: var(--soleil); stroke-width: 1.8; stroke-dasharray: 5 3; }
.meteogramme .g-pt { fill: var(--carte); stroke-width: 2.5; }
.meteogramme .g-pt.g-haut { stroke: var(--soleil); }
.meteogramme .g-pt.g-bas { stroke: var(--eau); }
.meteogramme .g-val { font-size: 12px; font-weight: 800; fill: var(--encre); font-variant-numeric: tabular-nums; }
.meteogramme .g-titre { font-size: 11px; font-weight: 800; fill: var(--encre-3); text-transform: uppercase; letter-spacing: .05em; }
.meteogramme .g-heure, .meteogramme .g-lab { font-size: 11px; fill: var(--encre-3); font-variant-numeric: tabular-nums; }

/* Légende : chaque série porte son trait, pas seulement sa couleur. */
.g-legende { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; font-size: 12px; color: var(--encre-3); }
.g-legende span { display: inline-flex; align-items: center; gap: 6px; }
.g-legende span::before { content: ''; width: 18px; height: 0; border-top-width: 2.4px; border-top-style: solid; }
.g-legende .c-temp::before { border-color: var(--accent); }
.g-legende .c-ressenti::before { border-color: var(--encre-3); border-top-style: dashed; }
.g-legende .c-pluie::before { border-color: var(--eau); border-top-width: 8px; }
.g-legende .c-proba::before { border-color: var(--eau); border-top-style: dotted; }
.g-legende .c-vent::before { border-color: var(--encre-2); }
.g-legende .c-raf::before { border-color: var(--soleil); border-top-style: dashed; }

.detail-heures { padding: 0 12px 14px; overflow-x: auto; }
table.th { width: 100%; border-collapse: collapse; font-size: 13px; }
table.th th { text-align: right; padding: 7px 10px; border-bottom: 1px solid var(--bord-fort); font-size: 11.5px; font-weight: 700; color: var(--encre-3); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
table.th th:first-child, table.th td:first-child, table.th th:nth-child(2), table.th td:nth-child(2) { text-align: left; }
table.th td { padding: 6px 10px; border-bottom: 1px solid var(--bord); text-align: right; white-space: nowrap; }
table.th tbody tr:hover { background: var(--carte-2); }
table.th td .lib { margin-left: 7px; color: var(--encre-3); font-size: 12.5px; }
table.th td .ic { vertical-align: middle; }
table.th .bft-min { display: block; font-size: 11px; color: var(--encre-3); font-weight: 400; }
.vide-h { color: var(--encre-3); font-size: 13px; padding: 8px 0; }

/* Onglets de couches */
.onglets { display: flex; gap: 2px; padding: 10px 14px 0; overflow-x: auto; scrollbar-width: none; }
.onglets::-webkit-scrollbar { display: none; }
.onglets button {
  min-height: 44px; padding: 0 16px; white-space: nowrap;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--encre-3); font-size: 14px; font-weight: 700; cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected='true'] { color: var(--accent); border-bottom-color: var(--accent); }
/* Le radar est séparé des cinq paramètres de prévision : il relève de
   l'observation, pas du modèle. Le trait vertical le dit sans un mot. */
.onglet-obs { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--bord); }

/* --- Prévisions : en-tête, segmenté, flèches ------------------------------ */
.prev-tete {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 16px 18px 12px;
}
.prev-id h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.prev-icone { width: 24px; height: 24px; flex: none; }
.prev-lieu { margin: 3px 0 0 33px; font-size: 13px; font-weight: 600; color: var(--encre-3); letter-spacing: .01em; }
.prev-cmd { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.segments { display: flex; border: 1px solid var(--bord-fort); border-radius: 8px; overflow: hidden; }
.segments button {
  min-height: 44px; padding: 0 16px; background: var(--carte);
  border: none; color: var(--encre-2); font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background var(--t), color var(--t);
}
.segments button + button { border-left: 1px solid var(--bord-fort); }
.segments button:hover { background: var(--carte-2); color: var(--encre); }
.segments button[aria-selected='true'] { background: var(--accent); color: var(--accent-encre); }

.prev-fleches { display: flex; gap: 6px; }
.rond-nav {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--bord); background: var(--carte-2);
  color: var(--encre-2); cursor: pointer; transition: background var(--t), color var(--t);
}
.rond-nav svg { width: 18px; height: 18px; }
.rond-nav:hover:not(:disabled) { background: var(--bord); color: var(--encre); }
.rond-nav-plein { background: var(--accent); border-color: transparent; color: var(--accent-encre); }
.rond-nav-plein:hover:not(:disabled) { background: var(--accent); filter: brightness(1.1); color: var(--accent-encre); }
/* Une flèche en butée reste VISIBLE et annoncée désactivée : la faire
   disparaître déplacerait l'autre sous le doigt au moment du clic. */
.rond-nav:disabled { opacity: .4; cursor: default; }
.prev-note { margin: 0; padding: 0 18px 14px; font-size: 12.5px; color: var(--encre-3); }
.prev-tete .prev-note { padding: 4px 0 0; }

/* Sur téléphone, le segmenté et les flèches font 400 px à eux seuls : posés
   sur la même ligne que le titre, ils poussaient la page entière au-delà de
   l'écran. Ils passent dessous, sur toute la largeur, et les intitulés
   s'autorisent deux lignes plutôt que de déborder. */
@media (max-width: 860px) {
  .prev-tete { flex-direction: column; align-items: stretch; gap: 12px; }
  .prev-cmd { margin-left: 0; }
  .segments { flex: 1; min-width: 0; }
  .segments button { flex: 1; padding: 0 10px; white-space: normal; line-height: 1.25; }
  .rond-nav { width: 44px; height: 44px; }
}

/* Journée visée par les flèches : un liseré, pas un fond, pour ne pas
   concurrencer la journée dépliée. */
.jour.jour-vise > summary { box-shadow: inset 3px 0 0 var(--accent); }
.hcase.jour-vise { outline: 2px solid var(--accent); outline-offset: -2px; }

/* --- Précipitations au quart d'heure -------------------------------------- */
.nowcast { padding: 0 18px 18px; }
.nowcast-vide {
  padding: 22px 16px; border-radius: 10px; background: var(--carte-2);
  border: 1px dashed var(--bord-fort); text-align: center;
  font-size: 14.5px; font-weight: 600; color: var(--encre-2);
}
.nowcast svg { display: block; width: 100%; height: auto; }
.nc-grille { stroke: var(--bord); stroke-width: 1; }
.nc-palier { stroke: var(--bord-fort); stroke-width: 1; stroke-dasharray: 2 3; }
.nc-lab { font-size: 10.5px; fill: var(--encre-3); }
.nc-heure { font-size: 10px; fill: var(--encre-3); font-variant-numeric: tabular-nums; }
.nc-barre { fill: var(--eau); }
.nc-maintenant { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 3; }
.pastille-direct {
  margin-left: 6px; padding: 1px 5px; border-radius: 4px; font-size: 9px;
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--alerte, #c0392b); color: #fff; vertical-align: 1px;
}
.temps-carte .lecture { font-size: 13px; }
.temps-carte .lecture[aria-pressed='true'] { background: var(--accent); color: var(--carte); border-color: var(--accent); }
.raccourcis { margin: 0; padding: 0 16px 14px; font-size: 11.5px; color: var(--encre-3); }
.raccourcis kbd {
  display: inline-block; padding: 1px 5px; border: 1px solid var(--bord);
  border-bottom-width: 2px; border-radius: 4px; background: var(--carte);
  font: 600 10.5px/1.5 ui-monospace, 'Segoe UI Mono', monospace; color: var(--encre-2);
}
/* Les raccourcis ne servent qu'au clavier et à la souris : sur écran tactile
   ils occupent de la place sans rien offrir. */
@media (pointer: coarse) { .raccourcis { display: none; } }

/* Contour de focus renforcé : le contour par défaut du navigateur disparaît
   sur les fonds colorés de la carte et sur les boutons sombres. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.st:focus-visible { outline: 3px solid #0f1c28; outline-offset: 2px; z-index: 10; }

/* Impression : la carte interactive et les commandes n'ont aucun sens sur
   papier ; le tableau horaire, si. */
@media print {
  .entete, .onglets, .carte-bloc, .temps-carte, .raccourcis, .ancres,
  .recherche-principale, .liens-pied, .desc-carte, .bande-resume,
  .villes, .rail, .rail-bascule, .barre-bas { display: none !important; }
  body { background: #fff; color: #000; padding-left: 0; }
  .bloc { break-inside: avoid; border: 1px solid #999; box-shadow: none; }
  .heures-piste { flex-wrap: wrap; }
  /* Sur papier, un volet replié est une information perdue : la fiche
     imprimée doit porter tout ce que l'écran savait montrer — c'est
     précisément l'usage au champ, hors réseau. */
  details:not(.jour-lointain) > div, details.pulve > *, details.agri-liste > * { display: revert !important; }
  .pulve, .agri-liste, .faq { border-color: #999; }
  a[href]::after { content: ' (' attr(href) ')'; font-size: 10px; color: #555; }
  .faq > summary::after, .pulve > summary::after, .agri-liste > summary::after { content: ''; }
}

/* Carte */
/* La France est presque carrée : dans un conteneur large et bas, la caler en
   hauteur fait déborder la largeur sur toute l'Europe. Une hauteur généreuse
   rapproche le rapport du conteneur de celui du pays. */
.carte-bloc {
  position: relative; overflow: hidden; border-top: 1px solid var(--bord);
  height: clamp(420px, 68vh, 820px);
}
#carte { position: absolute; inset: 0; }
/* Le canevas de particules se superpose à la carte sans l'intercepter :
   les clics doivent atteindre les marqueurs de station en dessous. */
#particules { position: absolute; inset: 0; pointer-events: none; z-index: 3; display: none; }
#particules.actif { display: block; }
.etat-carte {
  position: absolute; inset: 0; z-index: 6; display: grid; place-items: center;
  background: color-mix(in srgb, var(--fond) 78%, transparent);
  color: var(--encre-2); font-size: 14px; text-align: center; padding: 20px;
}

/* Curseur temporel de la carte */
.temps-carte { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; border-top: 1px solid var(--bord); }
.nav-h { min-width: 44px; justify-content: center; font-size: 18px; font-weight: 700; }
.temps-carte .piste { flex: 1; min-width: 0; }
/* `flex-wrap` et `min-width: 0` : l'étiquette de temps porte une date en
   toutes lettres — « dimanche 2 août à 7 h 00 » — qui, sur un écran étroit,
   poussait la piste au-delà du bloc. */
.piste-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; flex-wrap: wrap; }
.piste-haut strong { font-size: 15px; min-width: 0; }
.piste-haut span { font-size: 13px; color: var(--encre-3); }
.temps-carte input[type=range] {
  width: 100%; height: 26px; margin: 0; -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.temps-carte input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent) var(--av,0%), var(--bord) var(--av,0%));
}
.temps-carte input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%;
  background: var(--carte); border: 3px solid var(--accent);
}
.temps-carte input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--bord); }
.temps-carte input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--carte); border: 3px solid var(--accent); }
.piste-jours { display: flex; font-size: 11px; color: var(--encre-3); margin-top: 2px; }
.piste-jours span { border-left: 1px solid var(--bord); padding-left: 5px; overflow: hidden; white-space: nowrap; }
.piste-jours span:first-child { border-left: none; padding-left: 0; }
.legende {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: var(--carte); border: 1px solid var(--bord-fort); border-radius: 9px;
  padding: 9px 11px; box-shadow: var(--ombre);
}
.legende .t { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--encre-3); margin-bottom: 6px; }
.legende .b { width: 190px; height: 9px; border-radius: 5px; border: 1px solid var(--bord); }
.legende .g { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--encre-2); }
/* Hauteur portée de 21 à 24 px : sous 24×24, le critère WCAG 2.2 « Taille de
   cible (minimum) » n'est pas tenu, et sur écran tactile ces pastilles se
   ratent réellement — elles sont posées sur une carte que l'on fait glisser. */
.st {
  min-width: 34px; height: 24px; padding: 0 5px; display: grid; place-items: center;
  border: 1px solid rgba(0,0,0,.28); border-radius: 4px;
  font: 700 12px/1 'Segoe UI', system-ui, sans-serif; font-variant-numeric: tabular-nums;
  cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.st:hover { transform: scale(1.15); z-index: 9; }
/* Pastille portant un pictogramme de ciel plutôt qu'un nombre : sur la couche
   « Nuages », « 47 % » ne se représente pas, un dessin si. */
.st-picto { padding: 0 3px; min-width: 26px; }
.st-picto svg { width: 18px; height: 18px; display: block; }
.maplibregl-popup-content { background: var(--carte); color: var(--encre); border: 1px solid var(--bord-fort); border-radius: 9px; padding: 12px 14px; font-family: inherit; }
.pop-n { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.pop-g { display: grid; grid-template-columns: auto auto; gap: 3px 16px; font-size: 13px; }
.pop-g span:nth-child(odd) { color: var(--encre-3); }
.pop-g span:nth-child(even) { text-align: right; font-weight: 700; }

/* Chargement */
.chargement { display: flex; align-items: center; gap: 10px; padding: 22px; color: var(--encre-3); font-size: 14px; }
.rond { width: 17px; height: 17px; border: 2.5px solid var(--bord); border-top-color: var(--accent); border-radius: 50%; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* Pied — attribution discrète mais présente : c'est une condition de licence */
.pied { padding: 10px 20px 14px; font-size: 12px; color: var(--encre-3); border-top: 1px solid var(--bord); background: var(--carte); }
.pied a { color: var(--encre-3); }
.sources summary { cursor: pointer; list-style: none; padding: 4px 0; }
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after { content: ' ⌄'; opacity: .6; }
.sources[open] summary::after { content: ' ⌃'; }
.sources ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.7; }

/* --- Méga-menu ---------------------------------------------------------
   Le site n'est plus une page unique : météo, Lune, et d'autres rubriques du
   ciel à venir. La navigation doit pouvoir grandir sans se réécrire. */
.entete { position: relative; }

/* --- Bouton de thème ------------------------------------------------------ */
.btn-theme svg { width: 16px; height: 16px; flex: none; }
/* Le bouton montre la destination, pas l'état courant : en clair il propose le
   sombre, et réciproquement. Une seule des deux icônes est donc visible, et le
   basculement se fait par le sélecteur de thème — sans JavaScript. */
.btn-theme .th-clair { display: none; }
.btn-theme .th-sombre { display: block; }
:root[data-theme='sombre'] .btn-theme .th-clair { display: block; }
:root[data-theme='sombre'] .btn-theme .th-sombre { display: none; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .btn-theme .th-clair { display: block; }
  :root[data-theme='auto'] .btn-theme .th-sombre { display: none; }
}
@media (max-width: 1100px) {
  .th-mot { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; }
  .btn-theme { padding: 0 12px; }
}

/* Attribution de la carte : repliée en pastille, dépliable au clic */
.maplibregl-ctrl-attrib.maplibregl-compact { min-height: 24px; }
.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner { display: none; }

/* --- Recherche : effacement, position, lieux mémorisés -------------------- */
/* Bouton d'effacement posé dans le flux, et non en surimpression du champ :
   au-dessus du texte il masquait la fin des noms longs, et sa cible tombait
   sous les 24 px exigés par le critère WCAG 2.2 « Taille de cible ». */
.champ-cp .effacer {
  flex: none; width: 44px; padding: 0; justify-content: center;
  font-size: 20px; line-height: 1;
}
.r-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.r-actions .r-aide { margin: 0; }
.r-touche { color: var(--encre-3); }
.r-touche kbd {
  display: inline-block; padding: 0 4px; border: 1px solid var(--bord);
  border-bottom-width: 2px; border-radius: 4px; background: var(--carte);
  font: 600 11px/1.6 ui-monospace, 'Segoe UI Mono', monospace;
}
@media (pointer: coarse) { .r-touche { display: none; } }

.lieux-memorises { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.lieux-groupe { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lieux-titre {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--encre-3); margin-right: 2px;
}
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 12px; border-radius: 999px;
  background: var(--carte); border: 1px solid var(--bord); color: var(--encre-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.puce:hover { border-color: var(--accent); color: var(--accent); }
.puce.favori { border-color: var(--bord-fort); }
.puce.favori::before { content: '★'; color: var(--soleil); }
.puce-cp { font-size: 11.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }

/* --- Fil d'Ariane et ancres ---------------------------------------------- */
.fil { padding: 10px 20px 0; max-width: 1400px; width: 100%; margin: 0 auto; }
.fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; font-size: 13px; }
.fil li + li::before { content: '›'; margin-right: 8px; color: var(--encre-3); }
.fil a { color: var(--encre-3); }
.fil [aria-current='page'] { color: var(--encre-2); font-weight: 600; }

/* Rubriques de la commune : une barre de PAGES, pas d'ancres.
   Collante sous l'en-tête, parce qu'on change de rubrique en cours de lecture
   et qu'il serait absurde de remonter pour cela. */
.rubriques {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 68px; z-index: 20;
  padding: 10px 2px; background: var(--fond);
}
.rubriques::-webkit-scrollbar { display: none; }
.rubriques a {
  flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 15px;
  border-radius: 999px; background: var(--carte); border: 1px solid var(--bord);
  color: var(--encre-2); text-decoration: none; font-size: 13.5px; font-weight: 700;
  white-space: nowrap; transition: border-color var(--t), color var(--t);
}
.rubriques a:hover { border-color: var(--accent); color: var(--accent); }
/* La page courante est un état, pas un lien : elle est pleine et non cliquable
   au regard, ce qui évite le clic qui ne fait rien. */
.rubriques a[aria-current='page'] {
  background: var(--marine); border-color: var(--marine); color: var(--fond);
}
:root[data-theme='sombre'] .rubriques a[aria-current='page'] { color: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .rubriques a[aria-current='page'] { color: #0f172a; }
}

/* --- Météo agricole ------------------------------------------------------ */
.agricole { display: flex; flex-direction: column; gap: 16px; padding: 14px 18px 18px; }

.signalements { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sig {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 13px; border-radius: 9px; background: var(--carte-2);
  border-left: 3px solid var(--bord-fort); font-size: 14px;
}
.sig strong { font-size: 13.5px; }
.sig span { color: var(--encre-2); font-size: 13.5px; }
.sig-alerte { border-left-color: var(--alerte); }
.sig-attention { border-left-color: var(--soleil); }
.sig-info { border-left-color: var(--accent); }

.ind-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; }
.ind {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 13px; border-radius: 10px; background: var(--carte-2);
  border: 1px solid var(--bord);
}
.ind-t { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-3); }
.ind-v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.ind-d { font-size: 12px; color: var(--encre-3); line-height: 1.4; }
.ind-choix { display: inline-flex; gap: 3px; align-items: center; }
.ind .mini {
  min-width: 26px; min-height: 24px; padding: 0 6px; border-radius: 5px;
  background: var(--carte); border: 1px solid var(--bord); color: var(--encre-3);
  font-size: 11.5px; font-weight: 800; cursor: pointer;
}
.ind .mini[aria-pressed='true'] { background: var(--accent); color: var(--accent-encre); border-color: transparent; }

/* Conditions de pulvérisation et listes agricoles */
.pulve, .agri-liste { border: 1px solid var(--bord); border-radius: 10px; background: var(--carte-2); }
.pulve > summary, .agri-liste > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; font-weight: 800; font-size: 14px; list-style: none;
}
.pulve > summary::-webkit-details-marker, .agri-liste > summary::-webkit-details-marker { display: none; }
.pulve > summary::after, .agri-liste > summary::after { content: '⌄'; font-size: 17px; color: var(--encre-3); }
.pulve[open] > summary::after, .agri-liste[open] > summary::after { content: '⌃'; }
.pulve-compte { font-size: 12.5px; font-weight: 600; color: var(--encre-3); }
.pulve-ref { margin: 0; padding: 0 14px 8px; font-size: 12px; color: var(--encre-3); max-width: 78ch; }

/* Position par rapport au seuil réglementaire : un repère de FORME autant que
   de couleur — un daltonien ne distingue pas deux pastilles rouge et verte. */
.pv-marque {
  display: inline-block; width: 9px; height: 9px; margin-right: 6px;
  border: 1.5px solid var(--encre-3); vertical-align: 0;
}
.pv-sous .pv-marque { background: var(--eau); border-color: var(--eau); border-radius: 50%; }
.pv-au-dessus .pv-marque { background: var(--alerte); border-color: var(--alerte); border-radius: 0; transform: rotate(45deg); }
.pv-inconnu .pv-marque { background: none; border-style: dashed; border-radius: 50%; }
.pv-au-dessus td:first-child { font-weight: 700; }

.agri-liste ul { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; gap: 7px; }
.agri-liste li { font-size: 13.5px; color: var(--encre-2); line-height: 1.5; }
.agri-liste li.gel-negatif { color: var(--encre); }
.agri-vide {
  padding: 12px 14px; border-radius: 10px; background: var(--carte-2);
  border: 1px dashed var(--bord-fort); font-size: 13.5px; color: var(--encre-3);
}
.mention-reg {
  margin: 0; padding: 12px 14px; border-radius: 9px;
  background: var(--carte-2); border-left: 3px solid var(--encre-3);
  font-size: 12.5px; color: var(--encre-2); line-height: 1.6; max-width: 80ch;
}

/* Tendance au-delà de sept jours : la nuance visuelle double le mot. */
.jour-lointain > summary { opacity: .82; }

/* --- Météogramme Météo-France ---------------------------------------------
   Trois bandes, un seul axe de temps. La hiérarchie visuelle est portée par
   l'épaisseur et l'opacité, pas par la couleur seule : la rafale est un
   pointillé, le vent moyen un trait plein, et les deux restent distinguables
   pour un œil qui ne sépare pas le rouge du vert. */
.mg-lecture { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; color: var(--encre); line-height: 1.5; }
/* Le graphique déborde plutôt que de se comprimer : sous 640 px, quarante-huit
   heures écrasées sur 300 px ne se lisent plus. On défile, on ne devine pas. */
.mg-cadre { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.mg-graphe { display: block; width: 100%; min-width: 620px; height: auto; }

.mg-nuit { fill: var(--encre); opacity: .055; }
.mg-grille { stroke: var(--bord); stroke-width: 1; opacity: .7; }
.mg-reg { stroke: var(--bord); stroke-width: 1; opacity: .45; }
.mg-jour { stroke: var(--encre-3); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: .8; }
.mg-heure, .mg-lab { font-size: 11px; fill: var(--encre-3); }
.mg-jourlab { font-size: 12px; font-weight: 700; fill: var(--encre-2); }
.mg-unite { font-size: 11px; font-weight: 700; fill: var(--encre-3); }

.mg-aire { fill: var(--temp-trait, #c2410c); opacity: .1; stroke: none; }
.mg-temp { fill: none; stroke: var(--temp-trait, #c2410c); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.mg-vent { fill: none; stroke: var(--vent-trait, #15803d); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mg-rafales { fill: none; stroke: var(--vent-trait, #15803d); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .75; stroke-linecap: round; }
.mg-barre { fill: var(--pluie-trait, #2668b8); opacity: .85; }

.mg-legende { list-style: none; margin: 12px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mg-legende li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--encre-2); }
.mg-cle { flex: none; width: 18px; height: 3px; border-radius: 2px; }
.mg-cle-temp { background: var(--temp-trait, #c2410c); height: 3px; }
.mg-cle-vent { background: var(--vent-trait, #15803d); }
.mg-cle-raf {
  background: none; height: 0;
  border-top: 3px dashed var(--vent-trait, #15803d); opacity: .8;
}
.mg-cle-pluie { background: var(--pluie-trait, #2668b8); height: 10px; width: 10px; border-radius: 2px; }

/* --- Alertes -------------------------------------------------------------- */
.alertes { display: flex; flex-direction: column; gap: 10px; }
.alertes-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.al {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 15px; border-radius: var(--r);
  background: var(--carte); border: 1px solid var(--bord); box-shadow: var(--ombre);
  border-left-width: 5px;
}
/* Deux niveaux seulement, et jamais les couleurs du dispositif officiel
   (jaune, orange, rouge) : le vocabulaire de la vigilance reste à Météo-France. */
.al-notable { border-left-color: var(--accent); }
.al-fort { border-left-color: var(--alerte); }
.al-pic { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 2px; transform: rotate(45deg); }
.al-notable .al-pic { background: var(--accent); }
.al-fort .al-pic { background: var(--alerte); }
.al-corps strong { display: block; font-size: 15px; font-weight: 800; }
.al-corps span { display: block; font-size: 13.5px; color: var(--encre-2); margin-top: 2px; line-height: 1.45; }
.al-cadre {
  margin: 0; padding: 11px 14px; border-radius: 9px;
  background: var(--carte-2); border: 1px dashed var(--bord-fort);
  font-size: 12.5px; color: var(--encre-2); line-height: 1.55; max-width: 84ch;
}
.al-cadre a { color: var(--accent); font-weight: 600; }

/* --- Climatologie --------------------------------------------------------- */
.anomalie { display: flex; align-items: center; gap: 15px; padding: 14px 16px; border-radius: 11px; border: 1px solid var(--bord); }
.an-chiffre { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.an-mot strong { display: block; font-size: 16px; font-weight: 800; text-transform: capitalize; }
.an-mot span { display: block; font-size: 13px; color: var(--encre-3); margin-top: 2px; }
/* Le fond nomme l'écart, mais le texte le dit aussi : une pastille colorée
   seule ne se lit pas en niveaux de gris ni pour un daltonien. */
.an-normale { background: var(--carte-2); }
.an-chaud { background: color-mix(in srgb, var(--soleil) 14%, var(--carte-2)); }
.an-chaud-fort { background: color-mix(in srgb, var(--alerte) 18%, var(--carte-2)); }
.an-froid { background: color-mix(in srgb, var(--eau) 14%, var(--carte-2)); }
.an-froid-fort { background: color-mix(in srgb, var(--eau) 26%, var(--carte-2)); }

.decennies ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.decennies li { display: grid; grid-template-columns: 92px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.dec-an { font-weight: 700; font-variant-numeric: tabular-nums; }
.dec-jauge { height: 9px; border-radius: 5px; background: var(--carte-2); border: 1px solid var(--bord); overflow: hidden; }
.dec-jauge span { display: block; height: 100%; background: linear-gradient(90deg, var(--eau), var(--soleil)); }
.dec-v { font-variant-numeric: tabular-nums; font-weight: 700; }
.dec-note { margin: 9px 0 0; font-size: 12.5px; color: var(--encre-3); max-width: 78ch; }

/* --- Webcams -------------------------------------------------------------- */
.wc-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.wc-carte { border: 1px solid var(--bord); border-radius: 10px; overflow: hidden; background: var(--carte-2); }
.wc-carte a { display: block; text-decoration: none; color: inherit; }
.wc-carte a:hover { background: var(--bord); }
/* Rapport 16/9 réservé d'avance : les images arrivent d'un tiers, à des tailles
   qu'on ne connaît pas, et sans cette réserve la page sautait à chaque
   arrivée. */
.wc-vue { display: block; aspect-ratio: 16 / 9; background: var(--bord); }
.wc-vue img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wc-titre { display: block; padding: 8px 10px 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.wc-lieu { display: block; padding: 2px 10px 0; font-size: 12px; color: var(--encre-3); }
.wc-maj { display: block; padding: 2px 10px 9px; font-size: 11.5px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
/* Attribution imposée par les conditions d'utilisation, « à la taille et à la
   couleur du texte courant du site ». Elle ne doit donc PAS être rapetissée ni
   grisée comme une mention de bas de page. */
/* 16 px : la taille du corps de texte du site. Les conditions d'utilisation de
   l'API Webcams imposent l'attribution « à la taille et à la couleur du texte
   courant » — elle doit donc suivre tout changement de la typographie, et un
   test échoue si elle décroche. */
.wc-attrib { margin: 12px 0 0; font-size: 16px; color: var(--encre); }
.wc-attrib a { color: var(--accent); }

/* --- Qualité de l'air ----------------------------------------------------- */
.aqi-tete { display: flex; align-items: center; gap: 14px; }
.aqi-pastille {
  flex: none; width: 62px; height: 62px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 25px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0,0,0,.14);
}
.aqi-mot strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.015em; }
.aqi-mot span { display: block; font-size: 13px; color: var(--encre-3); margin-top: 2px; }

.pollens ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.pollens li { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
.po-nom { font-weight: 700; }
.po-jauge { height: 7px; border-radius: 4px; background: var(--carte-2); border: 1px solid var(--bord); overflow: hidden; }
.po-jauge span { display: block; height: 100%; background: var(--soleil); }
.po-v { font-size: 12.5px; color: var(--encre-3); white-space: nowrap; }
@media (max-width: 640px) {
  .pollens li { grid-template-columns: 1fr auto; }
  .po-jauge { grid-column: 1 / -1; }
}

/* Titre et introduction d'une page de carte (/cartes/<couche>).
   Rendus par le serveur : sans eux, la page ne contient pas un mot sur la
   couche affichée tant que le script n'a pas tourné. */
.carte-titre {
  margin: 4px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.2; color: var(--encre);
}
.carte-intro {
  margin: 0 0 14px; max-width: 80ch;
  font-size: 15px; line-height: 1.6; color: var(--encre-2);
}
@media (max-width: 640px) { .carte-titre { font-size: 21px; } }

/* Rubrique sans donnée sur ce lieu : une phrase, jamais une page blanche. */
.vide-rubrique {
  margin: 0; padding: 16px 18px; border-radius: 10px;
  background: var(--carte-2); border-left: 3px solid var(--bord-fort);
  font-size: 15px; line-height: 1.6; color: var(--encre-2); max-width: 80ch;
}

/* --- Bascule entre les deux pôles ----------------------------------------- */
.poles { display: flex; gap: 4px; margin-right: auto; }
.poles a {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 15px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; text-decoration: none;
  color: var(--encre-2); border: 1px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.poles a svg { width: 18px; height: 18px; }
.poles a:hover { background: var(--carte-2); color: var(--encre); }
.poles a[aria-current='page'] {
  background: var(--marine); color: var(--fond); border-color: var(--marine);
}
:root[data-theme='sombre'] .poles a[aria-current='page'] { color: #0f172a; }
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] .poles a[aria-current='page'] { color: #0f172a; }
}
@media (max-width: 560px) {
  .poles a { padding: 0 11px; font-size: 13.5px; }
  .poles a svg { display: none; }
}

/* ===========================================================================
   PÔLE CLIMAT
   Vocabulaire visuel volontairement plus sobre que celui de la météo : pas de
   pictogramme, pas de couleur d'accent, des tableaux denses et des figures.
   Ce n'est pas une préférence esthétique — la météo se consulte en trois
   secondes debout, la climatologie se lit assis.
   =========================================================================== */
.cl-corps { display: flex; flex-direction: column; gap: 18px; padding: 14px 18px 20px; }
.cl-titre { margin: 0 0 8px; font-size: 27px; font-weight: 800; letter-spacing: -.015em; }
.cl-chapo { margin: 0; font-size: 16px; line-height: 1.6; color: var(--encre); max-width: 72ch; }
.cl-chapo strong { font-weight: 800; }
.cl-h3 {
  margin: 8px 0 -4px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--encre-3);
}
.cl-note { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--encre-2); max-width: 78ch; }
.cl-vide { margin: 0; font-size: 14.5px; color: var(--encre-3); }
.cl-aide { margin: 0; font-size: 14.5px; color: var(--encre-2); }
.cl-liste { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); }
.cl-liste strong { color: var(--encre); }

/* Figures. Elles débordent plutôt que de se comprimer : soixante-quinze années
   écrasées sur 320 px ne se lisent plus. */
.cl-figure { margin: 0; }
.cl-graphe, .cl-bandes { display: block; width: 100%; height: auto; }
.cl-bandes { height: 92px; border-radius: 6px; }
.cl-figure figcaption {
  margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--encre-2); max-width: 78ch;
}
.cl-reg { stroke: var(--bord); stroke-width: 1; opacity: .55; }
.cl-lab, .cl-mois { font-size: 11px; fill: var(--encre-3); }
.cl-lab-d { text-anchor: start; }
.cl-unite { font-size: 11px; font-weight: 700; fill: var(--encre-3); }

.cl-omb-pluie { fill: var(--pluie-trait, #2668b8); opacity: .78; }
.cl-omb-temp { fill: none; stroke: var(--temp-trait, #c2410c); stroke-width: 2.4; stroke-linejoin: round; }
.cl-omb-pt { fill: var(--temp-trait, #c2410c); }

.cl-courbe { fill: none; stroke: var(--encre-3); stroke-width: 1.4; opacity: .55; }
.cl-pt { fill: var(--encre-3); opacity: .6; }
.cl-lisse { fill: none; stroke: var(--temp-trait, #c2410c); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.cl-tendance { stroke: var(--encre); stroke-width: 1.6; stroke-dasharray: 6 4; opacity: .8; }
.cl-barre { fill: var(--encre-3); opacity: .6; }
.cl-barre-chaud { fill: var(--temp-trait, #c2410c); opacity: .8; }
.cl-barre-gel { fill: var(--pluie-trait, #2668b8); opacity: .75; }
.cl-barre-eau { fill: var(--pluie-trait, #2668b8); opacity: .7; }

.cl-env { stroke: none; }
.cl-env-max { fill: var(--temp-trait, #c2410c); opacity: .16; }
.cl-env-min { fill: var(--pluie-trait, #2668b8); opacity: .16; }
.cl-ligne-max { fill: none; stroke: var(--temp-trait, #c2410c); stroke-width: 2; }
.cl-ligne-min { fill: none; stroke: var(--pluie-trait, #2668b8); stroke-width: 2; }

/* Tableaux denses : c'est la forme que réclame une climatologie, et elle doit
   pouvoir défiler seule sans que la page parte de travers. */
.cl-tableau { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cl-tableau table { min-width: 560px; width: 100%; }
.cl-indices th[scope='row'] { line-height: 1.35; }
.cl-quoi { display: block; font-size: 11.5px; font-weight: 500; color: var(--encre-3); }
.cl-quand { display: block; font-size: 11px; font-weight: 500; color: var(--encre-3); }
.cl-ecart { font-weight: 800; }
.cl-sig { color: var(--temp-trait, #c2410c); font-weight: 700; font-size: 12.5px; }
.cl-nonsig { color: var(--encre-3); font-size: 12.5px; }
.cl-sev { border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
.cl-sev-modérée { background: #f8e08e; color: #3a2c00; }
.cl-sev-sévère { background: #f5a623; color: #2b1900; }
.cl-sev-extrême { background: #b3261e; color: #fff; }

.ind-fort .ind-v { color: var(--temp-trait, #c2410c); }
.ind-chaud .ind-v { color: var(--temp-trait, #c2410c); }
.ind-froid .ind-v { color: var(--pluie-trait, #2668b8); }

/* Köppen : le seul bloc du pôle qui s'autorise une mise en avant, parce qu'un
   changement de classe est le fait le plus lisible que produise la page. */
.cl-koppen {
  border: 1px solid var(--bord); border-radius: 12px; padding: 16px 18px;
  background: var(--carte-2);
}
.cl-koppen-change { border-color: var(--temp-trait, #c2410c); border-width: 2px; }
.cl-koppen-t {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--encre-3); margin-bottom: 12px;
}
.cl-koppen-p { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cl-koppen-p > span { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--encre-2); }
.cl-koppen-p em { font-style: normal; font-size: 11.5px; color: var(--encre-3); font-weight: 700; }
.cl-koppen-p strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.cl-fleche { font-size: 24px; color: var(--encre-3); }
.cl-koppen-n { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--encre-2); max-width: 78ch; }

.cl-passerelle {
  margin: 0; padding: 14px 18px; border-radius: 12px;
  background: var(--carte-2); border: 1px solid var(--bord);
  font-size: 14.5px; color: var(--encre-2);
}
@media (max-width: 640px) {
  .cl-titre { font-size: 22px; }
  .cl-koppen-p strong { font-size: 21px; }
}

/* ===========================================================================
   RUBRIQUE « COMPRENDRE »
   Typographie de lecture longue : une seule colonne étroite, un interlignage
   généreux, aucune distraction latérale. C'est le seul endroit du site où l'on
   reste plus de trente secondes.
   =========================================================================== */
.art-h1 { margin: 8px 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.art-chapo-page { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--encre-2); max-width: 62ch; }
.art-chapo-page strong { color: var(--encre); font-weight: 800; }
.art-meta { margin: 0; font-size: 13px; color: var(--encre-3); font-weight: 600; }
.art-intro { padding: 22px 24px; }
.art-article { padding: 24px 26px 30px; }

.art-cat {
  display: inline-block; border-radius: 999px; padding: 3px 11px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.art-cat-distinguer { background: #1b2d4b; color: #fff; }
.art-cat-prevoir { background: #2668b8; color: #fff; }
.art-cat-mesurer { background: #15803d; color: #fff; }
.art-cat-comprendre { background: #c2410c; color: #fff; }
.art-cat-terrain { background: #7c5a12; color: #fff; }

/* Le corps de l'article. La largeur est bornée en CARACTÈRES et non en pixels :
   c'est le nombre de signes par ligne qui décide du confort de lecture, autour
   de 65, et il ne dépend pas de la taille de l'écran. */
.art-corps { margin-top: 20px; max-width: 66ch; font-size: 16.5px; line-height: 1.75; color: var(--encre); }
.art-corps p { margin: 0 0 18px; }
.art-corps h2 {
  margin: 32px 0 12px; font-size: 20px; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.3; color: var(--encre);
}
.art-corps ul, .art-corps ol { margin: 0 0 18px; padding-left: 22px; }
.art-corps li { margin-bottom: 9px; }
.art-corps strong { font-weight: 800; }
.art-corps abbr { text-decoration: underline dotted; cursor: help; }

/* L'encadré porte le point à retenir. Un article de vulgarisation sans point
   saillant se lit et ne laisse rien. */
.art-encadre {
  margin: 22px 0; padding: 16px 20px; border-radius: 12px;
  background: var(--carte-2); border-left: 4px solid var(--marine);
}
.art-encadre p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.65; color: var(--encre-2); }
.art-encadre p:last-child { margin-bottom: 0; }

/* Blocs vivants : la théorie sur les données du lecteur. */
.art-vivant {
  margin: 24px 0; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--carte-2);
}
.art-vivant-tete { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 12px; }
.art-vivant-t { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--encre-3); }
.art-vivant-l { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.art-vivant-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--encre-2); }
.art-vivant-vide { margin: 0; font-size: 14px; line-height: 1.6; color: var(--encre-3); }
.art-vivant-attente { font-size: 14px; color: var(--encre-3); padding: 10px 0; }
.art-lien { font-weight: 700; color: var(--accent); }
.art-graphe, .art-bandes { display: block; width: 100%; height: auto; }
.art-bandes { height: 76px; border-radius: 6px; }
.art-reg { stroke: var(--bord); stroke-width: 1; opacity: .5; }
.art-lab { font-size: 11px; fill: var(--encre-3); }
.art-courbe { fill: none; stroke: var(--temp-trait, #c2410c); stroke-width: 2; }
.art-barre { fill: var(--pluie-trait, #2668b8); opacity: .75; }
.art-tableau { overflow-x: auto; }
.art-tableau table { min-width: 420px; width: 100%; }

/* Sommaire. */
.art-liste { list-style: none; margin: 0; padding: 14px 18px 18px; display: grid; gap: 10px; }
.art-vignette a {
  display: grid; gap: 6px; justify-items: start;
  padding: 15px 17px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--carte);
  text-decoration: none; transition: border-color var(--t), background var(--t);
}
.art-vignette a:hover { border-color: var(--accent); background: var(--carte-2); }
.art-vignette .art-titre { font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--encre); letter-spacing: -.01em; }
.art-vignette .art-chapo { font-size: 14px; line-height: 1.55; color: var(--encre-2); }
.art-vignette .art-meta { font-size: 12px; }
@media (min-width: 900px) {
  .art-liste { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .art-h1 { font-size: 23px; }
  .art-article { padding: 18px 18px 24px; }
  .art-corps { font-size: 16px; }
}

/* ===========================================================================
   LOT VISUEL ET TECHNIQUE
   Chaque règle répond à un défaut constaté, pas à une préférence.
   =========================================================================== */

/* 1. Rendu différé du hors-écran.
   Le document sert désormais jusqu'à douze blocs. Le navigateur en calculait la
   mise en page entière au premier rendu, y compris pour ce qui est à trois
   écrans plus bas. `contain-intrinsic-size` réserve la hauteur estimée, sans
   quoi la barre de défilement sauterait à chaque bloc atteint. */
@supports (content-visibility: auto) {
  .bloc.editorial, #sec-climat, #sec-webcams, #sec-marine, #sec-montagne,
  #sec-agricole, #cl-normales, #cl-records, #cl-indices, #cl-eau {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
  }
}

/* 2. Zones tactiles des liens de pied de page.
   Mesurées à 20 px de haut : sous le seuil de 24 px de la WCAG 2.2, et bien
   sous les 44 px que visent les référentiels tactiles. Elles se touchaient à côté. */
.liens-pied a, .attribution a, .bandeau-legal a {
  display: inline-block; min-height: 24px; padding: 6px 2px;
}

/* 3. Un seul style de focus, partout.
   Trois déclarations concurrentes cohabitaient, dont deux invisibles sur fond
   sombre. Au clavier, on perdait le curseur en traversant la page. */
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Le focus posé par le programme après un saut d'ancre ne doit pas dessiner de
   cadre : il sert au lecteur d'écran, pas à l'œil. */
:where(h1, h2, h3, section, div)[tabindex='-1']:focus { outline: none; }

/* 4. Mouvement réduit — respecté aussi par les figures du pôle climat, qui
   n'existaient pas quand la règle a été écrite. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* 5. Impression.
   Une fiche climat s'imprime — c'est même l'usage d'un agriculteur ou d'un
   bureau d'études. Sortaient à l'impression : la barre latérale, la bascule de
   pôles, la carte en canevas (vide sur papier) et les commandes. */
@media print {
  .rail, .rail-bascule, .poles, .rubriques, .barre-bas, .recherche-principale,
  #sec-carte, .temps-carte, .raccourcis, .bande-resume, .reglages-boite,
  .btn-theme, .cl-passerelle, .art-vivant-attente { display: none !important; }
  body { background: #fff; color: #000; }
  .bloc { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
  .cl-figure, .art-encadre, table { break-inside: avoid; }
  /* Une adresse imprimée sans son URL est un cul-de-sac. */
  .art-corps a[href^='/']::after, .cl-corps a[href^='/']::after {
    content: ' (meteo-climat-france.vercel.app' attr(href) ')';
    font-size: 11px; color: #555;
  }
}

/* 6. Ascenseur des tableaux denses.
   Un tableau qui déborde sans que rien ne le dise passe pour tronqué. L'ombre
   portée sur le bord droit signale qu'il reste du contenu. */
.cl-tableau, .art-tableau, .mg-cadre {
  scrollbar-width: thin;
  background:
    linear-gradient(to right, var(--carte) 30%, transparent),
    linear-gradient(to left, var(--carte) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.14), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.14), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

/* 7. Chiffres tabulaires partout où l'on compare une colonne.
   Sans cela, les unités ne s'alignent pas d'une ligne à l'autre et l'œil ne
   peut plus balayer une colonne verticalement. */
.tab, table td, table th, .ind-v, .art-vivant table td {
  font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1;
}

/* 8. Survol de ligne dans les tableaux longs.
   Douze mois ou soixante-quinze années : sans repère, l'œil saute de ligne. */
.cl-tableau tbody tr:hover, .art-tableau tbody tr:hover { background: var(--carte-2); }

/* 9. Ancre atteinte : le titre visé ne doit pas se coller sous l'en-tête
   collante, qui le recouvrait. */
:target { scroll-margin-top: 84px; }

/* 10. Sélection de texte lisible dans les deux thèmes. */
::selection { background: var(--accent); color: var(--accent-encre); }

/* ===========================================================================
   LOT SUIVANT — ce que les tableaux denses et la carte réclamaient
   =========================================================================== */

/* En-têtes collantes dans les tableaux longs.
   Douze mois passent encore ; soixante-quinze années, non — on arrive au bas du
   tableau sans plus savoir quelle colonne on lit. Le fond est opaque : une
   en-tête translucide laisserait défiler les chiffres au travers. */
.cl-tableau table thead th, .art-tableau table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--carte-2);
  box-shadow: inset 0 -1px 0 var(--bord-fort);
}
/* La première colonne porte le libellé de la ligne : elle reste, elle aussi,
   sinon un défilement horizontal fait perdre de quoi parle la valeur lue. */
.cl-tableau table tbody th[scope='row'], .art-tableau table tbody th[scope='row'] {
  position: sticky; left: 0; z-index: 1;
  background: var(--carte);
  box-shadow: inset -1px 0 0 var(--bord);
}
.cl-tableau table thead th:first-child, .art-tableau table thead th:first-child { z-index: 3; }

/* Pastilles de station : 24 px de haut au minimum.
   Mesurées à 18 px, sous le seuil de la WCAG 2.2 pour une cible. Ce sont des
   boutons — ils ouvrent la météo du lieu — et non de simples étiquettes. */
.st { min-height: 24px; display: inline-flex; align-items: center; }
.st-picto { min-height: 24px; min-width: 26px; }

/* Repère du mois courant dans les tableaux mensuels : sans lui, on compte les
   lignes depuis janvier pour se situer. */
.cl-tableau tr[data-mois-courant] { background: var(--carte-2); }
.cl-tableau tr[data-mois-courant] th[scope='row']::after {
  content: ' • ce mois-ci'; font-size: 11px; font-weight: 700; color: var(--accent);
}

/* Bouton d'export : discret, mais présent partout où une série est affichée. */
.cl-export {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--bord); background: var(--carte);
  color: var(--encre-2); font-size: 13.5px; font-weight: 700; cursor: pointer;
  transition: border-color var(--t), color var(--t);
}
.cl-export:hover { border-color: var(--accent); color: var(--accent); }
.cl-export svg { width: 15px; height: 15px; }

/* Glossaire : un terme défini se signale, et sa définition s'ouvre sur place.
   Un lien vers une page de glossaire ferait perdre le fil de la lecture. */
.gloss {
  border-bottom: 1px dashed var(--encre-3); cursor: help;
  text-decoration: none; color: inherit;
}
.gloss-boite {
  position: absolute; z-index: 90; max-width: 330px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--carte); border: 1px solid var(--bord-fort);
  box-shadow: 0 6px 28px rgba(0,0,0,.22);
  font-size: 13.5px; line-height: 1.55; color: var(--encre-2);
}
.gloss-boite strong { display: block; margin-bottom: 5px; color: var(--encre); font-size: 14px; }

@media print {
  .cl-export, .gloss-boite { display: none !important; }
  .gloss { border-bottom: none; }
}

/* --- Détail horaire, en colonnes -------------------------------------------
   Une colonne par heure, une ligne par grandeur. L'œil suit alors la
   température ou la pluie sur toute la journée d'un seul mouvement, ce qu'un
   tableau vertical de vingt-quatre lignes interdit. */
.th-horizontal { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.th-heures { border-collapse: separate; border-spacing: 0; min-width: max-content; }
.th-heures th, .th-heures td {
  padding: 7px 10px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--bord);
}
/* La colonne des intitulés reste visible pendant le défilement : sans elle, on
   ne sait plus quelle grandeur on lit dès la sixième heure. */
.th-heures th[scope='row'] {
  position: sticky; left: 0; z-index: 2;
  background: var(--carte); text-align: left; font-size: 12.5px; font-weight: 700;
  color: var(--encre-2); box-shadow: inset -1px 0 0 var(--bord);
  min-width: 104px;
}
.th-heures thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--carte-2); font-size: 12.5px; font-weight: 700; color: var(--encre-2);
}
.th-heures thead th:first-child { z-index: 4; background: var(--carte-2); }
.th-unite { display: block; font-size: 11px; font-weight: 500; color: var(--encre-3); }
.th-maintenant { color: var(--accent) !important; }
.th-l-temp td { font-size: 16px; }
.th-l-ciel td { padding-top: 9px; padding-bottom: 5px; }
.th-ciel svg { display: block; margin: 0 auto; }
.th-pluie { color: var(--eau); }
.th-proba { display: block; font-size: 11px; color: var(--encre-3); font-weight: 600; }
.th-rien { color: var(--encre-3); }
.th-raf-forte { color: var(--alerte); font-weight: 800; }
.th-uv { border-radius: 999px; padding: 1px 7px; font-size: 12px; font-weight: 800; }
.th-uv-bas { background: #f8e08e; color: #3a2c00; }
.th-uv-moyen { background: #f5a623; color: #2b1900; }
.th-uv-fort { background: #e2574c; color: #fff; }
.th-aide { margin: 8px 0 0; font-size: 12.5px; color: var(--encre-3); }
@media (max-width: 640px) { .th-heures th[scope='row'] { min-width: 88px; font-size: 12px; } }
@media print { .th-horizontal { overflow: visible; } .th-aide { display: none; } }

/* --- Tableau synoptique à dix jours ----------------------------------------
   Même grammaire que le tableau horaire : intitulés en colonne fixe, une ligne
   par grandeur. La différence avec les tableaux du même genre tient là : ils
   répètent le libellé dans chacune des dix cellules et consacrent le tiers de
   leur surface à se redire. */
.jours-synoptique {
  margin: 14px 18px 4px; border: 1px solid var(--bord); border-radius: 12px;
  background: var(--carte-2);
}
.jours-synoptique > summary {
  padding: 13px 16px; cursor: pointer; font-size: 14px; font-weight: 700;
  color: var(--encre-2); border-radius: 12px;
}
.jours-synoptique > summary:hover { color: var(--encre); }
.jours-synoptique[open] > summary { border-bottom: 1px solid var(--bord); }
.jours-synoptique .th-horizontal, .jours-synoptique .th-aide { padding: 0 16px 14px; }
.jours-synoptique .th-aide { padding-top: 10px; }

.tj-jours th[scope='col'] { line-height: 1.3; min-width: 92px; }
.tj-date { display: block; font-size: 11px; font-weight: 500; color: var(--encre-3); }
/* Au-delà du septième jour, seule la tendance a une valeur : la colonne le dit
   plutôt que de laisser croire à une prévision de même qualité. */
.tj-tendance {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--encre-3);
}
.tj-max { font-size: 17px; }
.tj-min { color: var(--encre-3); }
.tj-soleil { font-size: 12px; line-height: 1.4; color: var(--encre-2); }
.tj-deficit { color: var(--temp-trait, #c2410c); font-weight: 700; }
.tj-excedent { color: var(--pluie-trait, #2668b8); font-weight: 700; }

/* Intertitre de famille : on consulte ces grandeurs par groupes — ciel, eau,
   vent, air, agronomie — et jamais dans le désordre. */
.tj-famille th {
  position: sticky; left: 0; z-index: 2;
  background: var(--carte-2) !important; text-align: left !important;
  font-size: 11px !important; font-weight: 800 !important; letter-spacing: .06em;
  text-transform: uppercase; color: var(--encre-3) !important;
  padding-top: 14px !important; box-shadow: none !important;
}

/* Qualité de l'air dans le tableau synoptique : pastille + chiffre, jamais la
   couleur seule — un indice qui ne se lit qu'à la teinte est illisible pour un
   œil sur douze. */
.tj-air { border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: 800; }
.tj-air-bon { background: #9fd68a; color: #14320a; }
.tj-air-moyen { background: #f8e08e; color: #3a2c00; }
.tj-air-degrade { background: #f5a623; color: #2b1900; }
.tj-air-mauvais { background: #e2574c; color: #fff; }
.tj-air-tresmauvais { background: #8f4bab; color: #fff; }

/* --- Vigilance officielle ---------------------------------------------------
   Le bloc est sobre et NE REPREND AUCUNE couleur du dispositif national — ni
   vert, ni jaune, ni orange, ni rouge. Les emprunter ferait passer un lien pour
   un niveau de vigilance, ce qui est exactement l'erreur à ne pas commettre. */
.vigilance {
  border: 1px solid var(--bord-fort); border-radius: var(--r);
  background: var(--carte); padding: 16px 18px; display: grid; gap: 12px;
}
.vig-tete { display: flex; align-items: center; gap: 9px; }
.vig-tete svg { width: 20px; height: 20px; color: var(--encre-2); }
.vig-tete span {
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-2);
}
.vig-texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--encre-2); max-width: 78ch; }
.vig-liens { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.vig-lien {
  display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--bord); background: var(--carte-2);
  text-decoration: none; transition: border-color var(--t), background var(--t);
}
.vig-lien:hover { border-color: var(--accent); background: var(--carte); }
.vig-quoi { font-size: 14.5px; font-weight: 800; color: var(--encre); }
.vig-ou { font-size: 12px; color: var(--encre-3); }
/* Une flèche discrète dit que le lien SORT du site — ces pages ne sont pas les
   nôtres, et le visiteur doit le savoir avant de cliquer. */
.vig-quoi::after { content: ' ↗'; font-weight: 500; color: var(--encre-3); }
.vig-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--encre-3); max-width: 78ch; }
@media print { .vigilance { break-inside: avoid; } }

/* --- Contenu éditorial --------------------------------------------------- */
.editorial { padding: 18px 22px 22px; }
.editorial h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; letter-spacing: -.015em; }
.ed-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ed-grille h3 { margin: 0 0 5px; font-size: 14.5px; font-weight: 800; }
.ed-grille p { margin: 0; font-size: 14px; color: var(--encre-2); line-height: 1.62; }
.encart-legal {
  margin: 18px 0 0; padding: 13px 15px; border-radius: 9px;
  background: var(--carte-2); border-left: 3px solid var(--alerte);
  font-size: 13px; color: var(--encre-2); line-height: 1.6; max-width: 80ch;
}
.faq { border-bottom: 1px solid var(--bord); }
.faq:last-of-type { border-bottom: none; }
.faq > summary {
  padding: 12px 0; cursor: pointer; font-size: 14.5px; font-weight: 700;
  list-style: none; display: flex; justify-content: space-between; gap: 12px;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after { content: '＋'; color: var(--encre-3); font-weight: 400; }
.faq[open] > summary::after { content: '－'; }
.faq p { margin: 0 0 14px; font-size: 14px; color: var(--encre-2); line-height: 1.65; max-width: 78ch; }
.villes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px 14px; }
.villes a { display: block; padding: 6px 0; font-size: 14px; color: var(--accent); }
.ed-suite { margin: 14px 0 0; font-size: 13.5px; color: var(--encre-3); max-width: 78ch; }

/* --- Bande de résumé fixe ------------------------------------------------ */
.bande-resume {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: none; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: var(--carte); border-top: 1px solid var(--bord-fort);
  box-shadow: 0 -2px 12px rgba(15,28,40,.12);
}
.bande-resume.visible { display: flex; }
.br-lieu { font-weight: 800; font-size: 14.5px; }
.br-t { font-weight: 800; font-size: 16px; }
.br-d { font-size: 13px; color: var(--encre-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-haut { min-height: 36px; padding: 0 12px; font-size: 12.5px; }
/* La bande fixe recouvrirait le pied de page : on lui réserve sa hauteur. */
body:has(.bande-resume.visible) .pied { padding-bottom: 72px; }
@media (min-width: 861px) { .bande-resume { display: none !important; } }

@media (max-width: 860px) {
  .ind-grille { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .rubriques { top: 60px; }
  .maintenant { grid-template-columns: 1fr; gap: 14px; }
  .maintenant .chiffres { grid-template-columns: repeat(2, 1fr); }
  .entete .recherche-mini { width: 100%; margin-left: 0; }
  .entete .champ-cp { width: 100%; }
  .carte-bloc { height: clamp(300px, 52vh, 460px); }
  .aide-carte { font-size: 11.5px; padding: 6px 10px; }
  .jour > summary { grid-template-columns: 100px 30px 1fr auto 20px; gap: 8px; }
  .quarts { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* --- Barre latérale de rubriques ----------------------------------------- */
:root { --rail: 244px; }
.rail {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: var(--rail);
  background: var(--carte); border-right: 1px solid var(--bord);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 64px 10px 20px;
}
.rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rail a {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px; padding: 0 12px; border-radius: 9px;
  color: var(--encre-2); text-decoration: none;
  font-size: 14px; font-weight: 600; line-height: 1.25;
  transition: background var(--t), color var(--t);
}
.rail a svg { flex: none; width: 19px; height: 19px; opacity: .85; }
.rail a:hover { background: var(--carte-2); color: var(--encre); }
.rail a[aria-current='page'] { background: var(--carte-2); color: var(--accent); }
.rail a[aria-current='page'] svg { opacity: 1; }

/* Trois groupes intitulés plutôt qu'une liste de quinze liens d'affilée.
   « Ma commune », « Cartes de France », « Le site » : sans ces intitulés, rien
   ne disait qu'une moitié des liens dépend du lieu consulté et l'autre pas. */
.rail-titre {
  margin: 18px 0 6px; padding: 0 12px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-3);
}
.rail-titre:first-of-type { margin-top: 0; }
/* Tant qu'aucune commune n'est connue, les rubriques de lieu mènent à la
   recherche : elles restent visibles — elles disent ce que le site sait faire —
   mais s'annoncent comme un détour, et non comme une page prête. */
.rail a[data-rubrique][data-sans-lieu='1'] { opacity: .62; }

.rail-bascule {
  position: fixed; top: 10px; left: 10px; z-index: 80;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  background: var(--carte); border: 1px solid var(--bord); color: var(--encre-2);
}
.rail-bascule svg { width: 21px; height: 21px; }
.rail-bascule:hover { background: var(--carte-2); color: var(--encre); }

.rail-voile { position: fixed; inset: 0; z-index: 65; background: rgba(8,14,20,.5); border: 0; }

/* Au-dessus de 1180 px la barre reste ouverte : la place existe, et une
   navigation qu'il faut déplier à chaque fois n'est plus une navigation. */
@media (min-width: 1181px) {
  body { padding-left: var(--rail); }
  .rail-bascule, .rail-voile { display: none !important; }
  .entete { padding-left: 20px; }
}
/* En dessous, elle devient un tiroir : la largeur d'écran ne permet pas de la
   garder ouverte sans amputer le contenu. */
@media (max-width: 1180px) {
  .rail { transform: translateX(-100%); transition: transform var(--t); box-shadow: var(--ombre); }
  .rail.ouvert { transform: none; }
  .entete { padding-left: 64px; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* --- Nimbus Professional : formes, élévation, composants ------------------
   Le système prescrit un langage de formes « arrondi niveau 2 » : 8 px pour
   les champs et les boutons, 16 px pour les grands conteneurs, pilule pour les
   puces de filtre. La profondeur passe par des couches tonales et une ombre
   très diffuse, pas par des ombres marquées. */

/* Le bloc « Maintenant » devient la carte pleine du système : navy profond,
   température en très gros, à l'image de la maquette. C'est le seul bloc à
   inverser ses couleurs — c'est ce qui en fait le point focal. */
#sec-maintenant {
  background: var(--marine);
  border-color: transparent;
  color: #fff;
}
:root[data-theme='sombre'] #sec-maintenant,
:root[data-theme='auto'] #sec-maintenant { background: #16233c; }
@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] #sec-maintenant { background: var(--marine); }
}
/* Sélecteurs alignés sur la nouvelle structure du héros : les anciens
   visaient `.temp` et `.desc`, remplacés par `.mt-temp` et `.mt-desc`. Laisser
   des règles qui ne visent plus rien, c'est préparer la prochaine surprise. */
#sec-maintenant .mt-tete h2,
#sec-maintenant .mt-temp .n, #sec-maintenant .mt-temp .u,
#sec-maintenant .mt-desc, #sec-maintenant .mt-extremes,
#sec-maintenant .chiffres dd { color: #fff; }
#sec-maintenant .mt-tete .sous, #sec-maintenant .maj,
#sec-maintenant .chiffres dt, #sec-maintenant .mt-ress,
#sec-maintenant .chiffres .bft { color: #b5c7ed; }
#sec-maintenant .synthese { color: #eaf1ff; }
#sec-maintenant .nowcast {
  background: rgba(255,255,255,.09); border-left-color: var(--soleil); color: #eaf1ff;
}
/* Température en 72 px extra-gras : la hiérarchie « agressive pour les
   données » que demande le système. */

/* Puces de filtre en pilule, comme les « chips » du système. */
.segments { border-radius: 999px; overflow: hidden; border-color: var(--bord-fort); }
.segments button { font-weight: 700; }
.segments button[aria-selected='true'] { background: var(--marine); color: #fff; }
:root[data-theme='sombre'] .segments button[aria-selected='true'],
:root[data-theme='auto'] .segments button[aria-selected='true'] {
  background: var(--accent); color: var(--accent-encre);
}
@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] .segments button[aria-selected='true'] { background: var(--marine); color: #fff; }
}
.onglets button[aria-selected='true'] { color: var(--marine); border-bottom-color: var(--soleil); }
:root[data-theme='sombre'] .onglets button[aria-selected='true'] { color: var(--accent); }

/* Champs, boutons : 8 px, et 48 px de haut au minimum sur mobile. */
.btn, .champ-cp input, .champ-cp button { border-radius: var(--r-sm); }
.btn-primaire { background: var(--marine); }
:root[data-theme='sombre'] .btn-primaire,
:root[data-theme='auto'] .btn-primaire { background: var(--accent); color: var(--accent-encre); }
@media (prefers-color-scheme: light) {
  :root[data-theme='auto'] .btn-primaire { background: var(--marine); color: #fff; }
}
/* Barre de recherche en pilule, comme le prescrit le système. */
.recherche-principale .champ-cp input { border-radius: 999px; padding-left: 46px; }
.recherche-principale .champ-cp .btn-primaire { border-radius: 999px; padding: 0 26px; }

/* Bandeau d'alerte : pleine largeur, orange vif, texte blanc — le seul
   emploi autorisé de l'orange par le système. */
.al-fort {
  background: var(--soleil); border-color: transparent; border-left-color: #b36c00;
  color: #241400;
}
.al-fort .al-corps strong, .al-fort .al-corps span { color: #241400; }
.al-fort .al-pic { background: #241400; }

/* Cartes : 16 px et ombre unique très diffuse. */
.bloc { border-radius: var(--r); }
.ind { background: var(--carte); }
.agricole .ind { border-color: var(--bord); }

/* Étiquettes en capitales espacées, comme le veut le système. */
.ind-t, .lieux-titre, .legende .t, .q-nom {
  text-transform: uppercase; letter-spacing: .05em; font-weight: 800; font-size: 12px;
}

/* Tableaux : lignes sans bordure, séparateurs discrets. */
table.th td { border-bottom-color: color-mix(in srgb, var(--encre) 8%, transparent); }
table.th th { border-bottom-color: var(--bord-fort); }

/* --- Barre d'onglets du bas (téléphone) ----------------------------------- */
.barre-bas { display: none; }
@media (max-width: 860px) {
  .barre-bas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: var(--carte); border-top: 1px solid var(--bord);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 24px rgba(4,24,53,.10);
  }
  .barre-bas a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-height: 56px; text-decoration: none;
    color: var(--encre-3); font-size: 11.5px; font-weight: 700;
  }
  .barre-bas a svg { width: 22px; height: 22px; }
  .barre-bas a[aria-current='true'] { color: var(--accent); }
  .barre-bas a[aria-current='true'] svg { stroke-width: 2.4; }

  /* La barre d'ancres et la bande de résumé cèdent la place : elles faisaient
     double emploi et coûtaient une centaine de pixels en haut d'écran. */
  .rubriques { display: none; }
  .bande-resume { display: none !important; }
  /* Le contenu ne doit pas finir sous la barre. */
  .pied { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  /* L'en-tête cesse d'être collant.
     Il mesure 161 px une fois replié — marque, épinglage, partage, thème,
     réglages —, soit avec la barre du bas plus du quart de la hauteur d'un
     téléphone occupée en permanence. La navigation persistante est désormais
     assurée par la barre du bas et par le bouton de menu, qui reste fixe :
     l'en-tête peut défiler avec le contenu, et il revient d'un geste vers le
     haut. */
  .entete { position: static; }

  /* Cibles tactiles : le site s'impose 44 px partout ailleurs, ces deux-là
     étaient restées à 34 et 38. */
  .puce { min-height: 44px; padding: 0 14px; }
  .rond-nav { width: 46px; height: 46px; }
  .fil ol { font-size: 14px; }
  .fil a { display: inline-block; padding: 6px 0; }
  /* Les deux boutons de base des degrés-jours restaient à 26 × 24. */
  .ind .mini { min-width: 34px; min-height: 32px; }
  /* Le bouton de menu doit rester au-dessus du contenu qui défile. */
  .rail-bascule { box-shadow: var(--ombre); }
  /* Liens du pied à 18 px de haut : sous les 24 px du critère WCAG 2.2
     « Taille de cible (minimum) ». Le remplissage vertical les y amène sans
     changer la mise en page. */
  .liens-pied a, .sources summary, .sources a { display: inline-block; padding: 7px 0; }
  /* Commandes de zoom de la carte, fournies par la bibliothèque à 29 px. */
  .maplibregl-ctrl button { width: 34px !important; height: 34px !important; }
  /* Les liens d'attribution de la carte restent EN LIGNE, volontairement.
     « IGN » ne mesure que 21 px de large, mais le critère WCAG 2.2 « Taille de
     cible (minimum) » exempte explicitement les cibles situées dans une phrase
     et contraintes par l'interligne du texte qui les entoure — ce qui est
     exactement le cas de cette ligne d'attribution. Les passer en bloc pour
     les élargir les ferait au contraire SORTIR de l'exemption. */
}

/* --- Grammaire visuelle de la maquette ------------------------------------
   Le tour précédent avait posé la PALETTE sans la GRAMMAIRE : les blocs
   restaient pleine largeur, séparés par un filet, et le bloc principal gardait
   sa grille à trois colonnes. La maquette est une pile de cartes détachées,
   avec un héros navy centré. C'est ce que ces règles appliquent. */

/* Cartes détachées : marge latérale, grand rayon, ombre douce. */
.resultat { padding: 16px; gap: 16px; }
.bloc { border-radius: 20px; border: 1px solid var(--bord); box-shadow: var(--ombre); }

/* --- Le héros ------------------------------------------------------------- */
#sec-maintenant { border-radius: 26px; border: none; box-shadow: 0 10px 40px rgba(4,24,53,.18); }
#sec-maintenant .maintenant {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; padding: 30px 22px 24px;
}
.mt-tete h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mt-tete .sous { margin: 3px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mt-icone { margin: 14px 0 2px; }
.mt-icone .ic { width: 96px; height: 96px; }
/* 72 px extra-gras : la maquette en fait le point focal absolu. */
.mt-temp { display: flex; align-items: flex-start; gap: 2px; }
.mt-temp .n { font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.mt-temp .u { font-size: 26px; font-weight: 700; margin-top: 8px; }
.mt-desc { margin: 2px 0 0; font-size: 19px; font-weight: 600; }

/* Pastille translucide des extrêmes — la forme signature de la maquette. */
.mt-extremes {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  margin: 16px 0 0; padding: 9px 22px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  font-size: 15px; font-weight: 700;
}
.mt-ress { font-weight: 500; opacity: .85; }

#sec-maintenant .synthese { margin: 20px 0 0; max-width: 46ch; font-size: 16px; }
#sec-maintenant .nowcast {
  margin: 12px 0 0; max-width: 46ch; border-left: none; border-radius: 12px;
  background: rgba(255,255,255,.10); padding: 11px 15px; text-align: center;
}

/* Détail chiffré : une grille de pastilles translucides, pas une liste. */
#sec-maintenant .chiffres {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px; margin: 18px 0 0; width: 100%; text-align: left;
}
#sec-maintenant .chiffres > div {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 10px 13px;
}
#sec-maintenant .chiffres dt {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
#sec-maintenant .chiffres dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; text-align: left; }
#sec-maintenant .chiffres .bft { display: block; font-size: 11.5px; font-weight: 500; }
#sec-maintenant .maj { margin: 16px 0 0; font-size: 12px; }

/* --- Bandeau d'alerte, à la manière de la maquette ------------------------- */
.alertes { padding: 0 16px; }
.al {
  border-radius: 16px; border: none; border-left: none;
  background: var(--carte); box-shadow: var(--ombre);
}
.al-fort { background: var(--soleil); }
.al-fort .al-corps strong { text-transform: uppercase; letter-spacing: .06em; }

/* --- Titres de section ---------------------------------------------------- */
.bloc-tete h2, .prev-id h2 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }

/* --- Cases horaires et quarts : cartes, pas cellules ---------------------- */
.hcase { border-radius: 14px; background: var(--carte-2); border: 1px solid transparent; }
.hcase.maintenant-h { background: var(--marine); color: #fff; box-shadow: none; border-color: transparent; }
:root[data-theme='sombre'] .hcase.maintenant-h { background: var(--accent); color: var(--accent-encre); }
.hcase.maintenant-h .h, .hcase.maintenant-h .ve { color: inherit; opacity: .85; }
.q { border-radius: 14px; }
.ind { border-radius: 14px; }

/* --- Rendu paresseux des rubriques hors écran ------------------------------
   La page porte onze rubriques, dont la plupart s'ouvrent sous la ligne de
   flottaison : la météo agricole à elle seule dépasse trois mille caractères
   répartis sur des dizaines de blocs. Le navigateur les met en page ET les
   peint toutes au premier rendu, alors qu'aucune n'est visible.

   `content-visibility: auto` lui permet d'en différer la mise en page jusqu'à
   l'approche de la fenêtre. `contain-intrinsic-size` donne une hauteur
   présumée : sans elle, la barre de défilement sauterait à chaque rubrique
   révélée — le remède serait pire que le mal.

   CIBLAGE ÉTROIT — les rubriques de la fiche, et elles seules. Un sélecteur
   plus large attrapait aussi le bloc de recherche et sa zone de message
   d'erreur, tous deux au-dessus de la ligne de flottaison : différer ce que
   l'on voit d'emblée ne gagne rien et risque tout. La rubrique carte reste
   dehors pour la même raison, et pour une autre — MapLibre mesure son
   conteneur, et une taille présumée lui ferait calculer un cadrage faux.
   « Maintenant » aussi : c'est le premier bloc lu, et le seul rendu par le
   serveur pour les robots sans script. */
#bloc-commune > section:not(#sec-maintenant) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* À l'impression, rien n'est « hors écran » : une rubrique encore ignorée
   sortirait en page blanche haute de 600 px. La feuille d'impression du site
   n'aurait servi qu'à produire du vide. */
@media print {
  main section { content-visibility: visible !important; contain-intrinsic-size: auto !important; }
}

/* --- Contraste renforcé ----------------------------------------------------
   Demandé par le système d'exploitation, pas par nous : bordures affirmées et
   texte secondaire ramené sur l'encre principale. Les gris de confort — encre-3
   sur fond clair — passent tout juste le seuil AA ; ce réglage existe pour les
   personnes que « tout juste » ne sert pas. */
@media (prefers-contrast: more) {
  :root { --bord: var(--encre-3); --bord-fort: var(--encre); --encre-3: var(--encre-2); }
  .bloc { border-width: 2px; }
  a { text-decoration-thickness: from-font; }
}

/* --- Mode contrasté de Windows --------------------------------------------
   En contraste forcé, le système impose ses propres couleurs et IGNORE les
   nôtres. Ce qui ne tenait que par une couleur de fond — l'heure courante dans
   la frise, la puce de couche active — devient alors indiscernable du reste.
   On rétablit la distinction par une bordure, que le mode contrasté respecte,
   et par `Highlight`, la couleur de sélection choisie par l'utilisateur. */
@media (forced-colors: active) {
  .hcase.maintenant-h,
  .puce[aria-pressed='true'],
  .rail a[aria-current='page'] {
    border: 2px solid Highlight;
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .bloc, .hcase, .q, .ind { border: 1px solid CanvasText; }
  /* Les aplats de la carte et des légendes portent l'information par la
     couleur seule : les préserver est ici la seule option juste. */
  .leg-barre, #carte, .maplibregl-canvas { forced-color-adjust: none; }
}

/* --- Coupures de texte -----------------------------------------------------
   `balance` répartit un titre court sur ses lignes au lieu d'y laisser un mot
   seul ; `pretty` fait de même pour les fins de paragraphe. Les deux sont
   ignorés par les navigateurs qui ne les connaissent pas. */
h1, h2, h3, .bloc-tete h2, .prev-id h2 { text-wrap: balance; }
p, .synthese, .r-aide, .nuance { text-wrap: pretty; }

/* Un nom de commune long — « Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson »
   est le plus long de France — débordait de son en-tête sur écran étroit. */
.lieu h2, .pin-nom { overflow-wrap: anywhere; }

/* --- Cibles d'ancre sous l'en-tête collant --------------------------------
   L'en-tête est `sticky; top: 0` et haut de 68 px : une navigation vers
   `#sec-agricole`, depuis la barre latérale ou depuis un lien partagé, amenait
   le haut de la rubrique EXACTEMENT dessous. Le titre disparaissait, et l'on
   atterrissait au milieu d'un paragraphe sans savoir où. */
main section, .bloc[id], h2[id], h3[id] { scroll-margin-top: 84px; }

/* Et la même correction pour le défilement au clavier : `:target` marque
   brièvement la rubrique atteinte, sans quoi rien ne signale l'arrivée. */
@media (prefers-reduced-motion: no-preference) {
  main section:target { animation: cible-vue 1.4s ease-out; }
  @keyframes cible-vue {
    from { box-shadow: 0 0 0 3px var(--accent); }
    to { box-shadow: 0 0 0 3px transparent; }
  }
}