/* Hello World (anciennement Bonjour) — page d'accueil, disposition « Colonne affinée » (maquette 1a).
   Photo du jour plein écran, sans dégradé global : la lisibilité vient du
   verre dépoli sous chaque module. Sur une photo claire (mesure de la
   luminance par le serveur, voir Luminance), les classes palier-N,
   etroit-N et bords-N foncent le verre par paliers. Aucun style en
   ligne (CSP) : les positions calculées passent par le CSSOM. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bord: rgba(255, 255, 255, .12);
  --texte: #fff;
  /* Textes secondaires : .88 et .8 (au lieu de .76 et .58), 4,5:1 mesuré
     sur le verre de chaque palier (revue de contraste du 2026-10-20). */
  --texte-doux: rgba(255, 255, 255, .88);
  --texte-pale: rgba(255, 255, 255, .8);
  --accent: #d9e8a6;
  --soleil: #f3e3a0;
  --froid: #8fc3ee;
  --survol: rgba(255, 255, 255, .12);
  --survol-fort: rgba(255, 255, 255, .22);
  --filet: rgba(255, 255, 255, .35);
  --champ: rgba(255, 255, 255, .94);
  --champ-texte: #1c2016;
  --champ-pale: #5d6352;
  --voile: rgba(8, 10, 6, .28);
  --gout-g: max(16px, env(safe-area-inset-left, 0px));
  --gout-d: max(16px, env(safe-area-inset-right, 0px));
  /* Vigilance : codes RVB officiels de Météo-France (descriptif technique
     de la vigilance, champ risk_color) ; texte foncé sur le jaune et
     l'orange, blanc sur le rouge (contraste AA). */
  --vigi-jaune: #f9ff00;
  --vigi-orange: #f7a401;
  --vigi-rouge: #e71919;
  --vigi-texte: #1b1b14;
}

/* Verre par paliers (Luminance, revue de contraste du 2026-10-20).
   --p : palier sous les modules (0 à 4) ; --pb : palier des bords (logo,
   pilule des actions, boutons ronds et bulle). Palier 0 : le verre de la
   maquette (.22) ; chaque palier ajoute .115 (.68 au palier 4, neige ou
   brouillard), sans jamais assombrir la photo elle-même. Les fonds
   blancs translucides des petits éléments (pastille, tuiles, onglet actif)
   s'effacent en même temps : sur une photo claire, ils éclaircissaient le
   verre sous le texte. Déclarées sur body : chaque palier n'y change que
   --p ou --pb. */
body {
  --p: 0;
  --pb: 0;
  --verre: rgb(18 22 14 / calc(.22 + var(--p) * .115));
  --verre-fort: rgb(18 22 14 / calc(.5 + var(--p) * .05));
  --verre-menu: rgb(18 22 14 / calc(.42 + var(--p) * .065));
  --verre-petit: rgb(18 22 14 / calc(.22 + var(--pb) * .115));
  --teinte: rgb(255 255 255 / calc(.1 - var(--p) * .018));
  --teinte-forte: rgb(255 255 255 / calc(.14 - var(--p) * .02));
  --ombre-texte: 0 1px 16px rgb(0 0 0 / calc(.25 + var(--p) * .05));
  /* Logo, posé sans verre : halo sombre serré au-delà du palier 0. */
  --ombre-bord: 0 0 1px rgb(0 0 0 / calc(var(--pb) * .2)), 0 0 5px rgb(0 0 0 / calc(var(--pb) * .13)), 0 1px 16px rgb(0 0 0 / calc(.25 + var(--pb) * .06));
}
body.palier-1 { --p: 1; }
body.palier-2 { --p: 2; }
body.palier-3 { --p: 3; }
body.palier-4 { --p: 4; }
body.bords-1 { --pb: 1; }
body.bords-2 { --pb: 2; }
body.bords-3 { --pb: 3; }
body.bords-4 { --pb: 4; }
/* Écrans étroits : modules empilés sur la bande centrale de la photo, qui
   donne aussi le palier du haut (logo, actions) et du bas. */
@media (max-width: 899px) {
  body.etroit-0 { --p: 0; --pb: 0; }
  body.etroit-1 { --p: 1; --pb: 1; }
  body.etroit-2 { --p: 2; --pb: 2; }
  body.etroit-3 { --p: 3; --pb: 3; }
  body.etroit-4 { --p: 4; --pb: 4; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: #3b2c26;
  color: var(--texte);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
/* Focus : anneau clair doublé d'un anneau sombre, visible sur une photo
   claire comme sur le verre sombre. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 2px rgba(18, 22, 14, .8); border-radius: 8px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.icone-meteo .astre { color: var(--soleil); stroke: var(--soleil); }
.icone-meteo .eclair { stroke: var(--soleil); }
.vh, .visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
[hidden] { display: none !important; }

.lien-evitement {
  position: absolute; left: 16px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 999px;
  background: #fff; color: var(--champ-texte); font-weight: 700; text-decoration: none;
}
.lien-evitement:focus { top: 12px; }
.sans-script { position: relative; z-index: 2; margin: 160px 32px; max-width: 480px; font-size: 18px; text-shadow: var(--ombre-texte); }

/* ---------- fond ---------- */
.fond {
  --flou: 0px;
  --lum: 1;
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #3b2c26;
}
.fond.floute { inset: -40px; }
.fond-image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: blur(var(--flou)) brightness(var(--lum)); opacity: 0; transition: opacity .4s;
}
.fond.image-chargee .fond-image { opacity: 1; }
/* Nouvelle image du jour, page restée ouverte (fond.js, fondreVers) :
   posée au-dessus de l'ancienne, invisible le temps du chargement, puis
   fondu enchaîné d'une seconde (instantané avec prefers-reduced-motion). */
.fond.image-chargee .fond-suivant .fond-image { opacity: 0; transition: opacity 1s ease; }
.fond.image-chargee .fond-suivant.fondu .fond-image { opacity: 1; }
.fond.sans-image { background: #3b2c26 linear-gradient(160deg, #5a4436, #2a211c); }
/* Fond plus doux le soir (soir.js) : voile noir d'opacité --soir (0 à .4)
   au-dessus de la photo, en plus de la luminosité choisie (filtre). Fondu de
   2 s quand le soir avance ; instantané au premier affichage et en aperçu. */
.fond { --soir: 0; }
.fond::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--soir); pointer-events: none; }
.fond.soir-anime::after { transition: opacity 2s linear; }

/* ---------- verre dépoli ---------- */
.verre {
  background: var(--verre);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid var(--bord);
  text-shadow: var(--ombre-texte);
}
.verre-fort {
  background: var(--verre-fort);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  backdrop-filter: blur(28px) saturate(1.15);
  border: 1px solid var(--bord);
  text-shadow: var(--ombre-texte);
}

/* ---------- structure ---------- */
.scene { position: relative; z-index: 1; min-height: max(100vh, 780px); }
.logo {
  position: absolute; left: 32px; top: 28px; display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 26px; letter-spacing: -.02em; text-decoration: none; text-shadow: var(--ombre-bord);
}
/* Marque « Soleil levant » (SVG à traits currentColor, blanc sur la photo). */
.logo-marque {
  width: 34px; height: 34px; flex: none; color: #fff; overflow: visible;
  filter: drop-shadow(0 0 1px rgb(0 0 0 / calc(var(--pb) * .2))) drop-shadow(0 1px 6px rgb(0 0 0 / calc(.28 + var(--pb) * .08)));
}
/* Petits éléments de verre posés sur les bords de la photo. */
.actions.verre, .rond.verre, .bulle.verre { background: var(--verre-petit); }
.actions { position: absolute; right: 32px; top: 26px; display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.bouton-ic {
  width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; opacity: .9;
  transition: opacity .15s, background-color .15s;
}
.bouton-ic:hover, .bouton-ic[aria-expanded="true"] { opacity: 1; background: var(--survol); }
.bouton-ic:focus-visible { opacity: 1; }

/* ---------- colonne gauche ---------- */
.col-g { position: absolute; left: 32px; top: 166px; width: min(518px, calc(100vw - 368px - 96px)); padding: 24px; border-radius: 28px; }
.ligne-date { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; }
.date { font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.pastille {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 8px; border-radius: 999px;
  background: var(--teinte); border: 1px solid rgba(255, 255, 255, .14); font-size: 14px;
  transition: background-color .15s; margin-left: auto; text-align: left;
}
.pastille:hover { background: var(--survol-fort); }
.pastille .ic { width: 20px; height: 20px; color: var(--soleil); }
.pastille b { font-weight: 700; font-size: 15px; }
/* Lieu et ciel en blanc plein : la pastille est souvent sur le haut, le plus clair, de la photo. */
.pastille span { color: var(--texte); }
.horloge {
  font-size: 124px; font-weight: 700; letter-spacing: -.04em; line-height: .98; margin: 6px 0 2px -4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.horloge small { font-size: .3em; font-weight: 600; letter-spacing: 0; margin-left: .18em; color: var(--texte-doux); }
.horloge small:empty { display: none; }
.salut { font-size: 30px; font-weight: 500; letter-spacing: -.01em; margin: 0 0 22px; line-height: 1.2; }
.salut:empty { display: none; }
.recherche { position: relative; margin: 0 0 22px; }
.recherche .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--champ-pale); pointer-events: none; }
.recherche input {
  width: 100%; height: 54px; border-radius: 999px; border: 0; background: var(--champ); color: var(--champ-texte);
  padding: 0 22px 0 52px; font-size: 16px; text-shadow: none; box-shadow: 0 6px 26px rgba(0, 0, 0, .14);
}
.recherche input::placeholder { color: var(--champ-pale); }
.recherche-secours {
  position: absolute; left: 22px; right: 22px; top: calc(100% + 4px); margin: 0; font-size: 12.5px; font-weight: 500; color: var(--texte-doux);
}
.recherche-secours a { color: var(--accent); font-weight: 600; }
.recherche input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.recherche input::-webkit-search-cancel-button { cursor: pointer; }
#raccourcis:focus { outline: none; }

/* raccourcis */
.groupes { display: flex; align-items: center; gap: 4px; margin: 0 0 10px; font-size: 13px; min-height: 28px; }
.groupes .onglets { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.groupes [role="tab"] { padding: 3px 10px; border-radius: 999px; color: var(--texte-doux); font-weight: 600; transition: background-color .15s, color .15s; }
.groupes [role="tab"]:hover { color: #fff; background: var(--survol); }
/* Groupe actif : pastille blanche, texte foncé (lisible sur toute photo). */
.groupes [role="tab"][aria-selected="true"] { color: var(--champ-texte); background: #fff; text-shadow: none; }
.groupes .modif { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--texte-pale); flex: none; }
.groupes .modif.seul { margin-left: auto; }
.groupes .modif:hover, .groupes .modif[aria-pressed="true"] { color: #fff; background: var(--survol); }
.groupes .modif .ic { width: 16px; height: 16px; }
.tuiles { display: flex; flex-wrap: wrap; gap: 12px 11px; list-style: none; margin: 0; padding: 0; }
.tuile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 56px;
  text-decoration: none; font-size: 12.5px; color: var(--texte-doux);
}
.tuile-ic {
  position: relative; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: var(--teinte-forte); border: 1px solid rgba(255, 255, 255, .16);
  font-weight: 700; font-size: 19px; color: #fff; transition: background-color .15s, transform .15s;
}
.tuile-ic img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; position: absolute; opacity: 0; }
.tuile-ic.avec-image img { position: static; opacity: 1; }
.tuile-ic.avec-image .initiale { display: none; }
.tuile:hover .tuile-ic { background: var(--survol-fort); }
.tuile:hover { color: #fff; }
.tuile-nom { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tuile.ajout .tuile-ic { background: transparent; border: 1.5px dashed rgba(255, 255, 255, .5); }
.tuile.ajout:hover .tuile-ic { background: var(--survol); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 32px; height: 32px; }
/* Aperçu d'un dossier : initiales blanches sur pastilles sombres. */
.mini span { display: grid; place-items: center; border-radius: 5px; background: rgba(18, 22, 14, .34); font-size: 9px; font-weight: 700; line-height: 1; }
.edition .tuile:not(.ajout) .tuile-ic { outline: 1.5px dashed rgba(255, 255, 255, .45); outline-offset: 2px; }
.edition-note { font-size: 12px; color: var(--texte-pale); margin: 10px 0 0; }
/* Glisser-déposer (glisser.js) : tuile fantôme sous le pointeur, barre de
   l'emplacement d'insertion, dossier ou onglet visé surligné. Pas de
   sélection de texte ni de menu d'appui long sur les tuiles et les onglets. */
.tuile, .groupes [role="tab"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.deplacable { cursor: grab; }
body.glissement, body.glissement * { cursor: grabbing !important; }
.glisse { opacity: .35; }
.fantome {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; opacity: .92;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); text-shadow: var(--ombre-texte);
}
.fantome .tuile, .fantome [role="tab"] { color: #fff; }
.fantome .tuile-ic { transform: scale(1.08); background: var(--survol-fort); }
.fantome [role="tab"] { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; color: var(--champ-texte); text-shadow: none; }
.marque-insertion {
  position: fixed; left: 0; top: 0; z-index: 69; width: 4px; border-radius: 2px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 0 1px rgba(18, 22, 14, .55);
}
.cible-dossier .tuile-ic { outline: 2px solid var(--accent); outline-offset: 3px; background: var(--survol-fort); }
.groupes [role="tab"].cible-onglet { outline: 2px dashed var(--accent); outline-offset: 2px; color: #fff; background: var(--survol-fort); }

/* ---------- colonne droite ---------- */
.col-d { position: absolute; right: 32px; top: 276px; width: 368px; padding: 20px 22px 16px; border-radius: 24px; }
.titre-col { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.titre-col h2 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.titre-col span { font-size: 12px; color: var(--texte-doux); }
.une { list-style: none; margin: 0; padding: 0; }
.une li + li { border-top: 1px solid var(--filet); }
.une a { display: block; padding: 12px 0; text-decoration: none; border-radius: 10px; }
.une a:hover .une-titre, .liste-actu a:hover .une-titre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.une .vide { padding: 12px 0; color: var(--texte-doux); font-size: 14px; }
.meta { display: block; font-size: 12px; color: var(--texte-doux); margin-bottom: 3px; }
.une-titre { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
/* Colonne « À la une » : titres limités à 3 lignes, pour que la colonne ne
   descende jamais sur le bouton globe (titres de presse parfois très longs). */
.une .une-titre { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
/* Quatre titres : la colonne part de la même hauteur que la colonne gauche
   (y 166) pour gagner de la place au-dessus du bouton globe. Sur les écrans
   bas, titres sur 2 lignes, puis trois titres seulement. */
@media (min-width: 900px) {
  .col-d { top: 166px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .une .une-titre { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (min-width: 900px) and (max-height: 620px) {
  .une li:nth-child(n+4) { display: none; }
}
.voir-plus {
  display: flex; align-items: center; gap: 6px; margin: 4px -8px 0 auto; padding: 6px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.voir-plus:hover { background: var(--survol); }
.voir-plus .ic { width: 16px; height: 16px; }

/* ---------- coins bas ---------- */
.pied { position: absolute; left: 32px; right: 32px; bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.pied > * { pointer-events: auto; }
.pied > [hidden] + .globe-zone { margin-left: auto; }
.rond { width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; transition: background-color .15s; text-decoration: none; }
/* Survol et bulle ouverte : le verre des bords reste dessous, éclairci d'un
   voile blanc (un fond blanc seul rendait l'icône invisible sur une photo claire). */
.rond:hover, .rond[aria-expanded="true"] { background: var(--verre-petit); box-shadow: inset 0 0 0 42px rgb(255 255 255 / calc(.18 - var(--pb) * .03)); }
.rond[aria-expanded="true"]:focus-visible { box-shadow: 0 0 0 2px rgba(18, 22, 14, .8), inset 0 0 0 42px rgb(255 255 255 / calc(.18 - var(--pb) * .03)); }
.info-zone { position: relative; }
.info-zone.sans-image { visibility: hidden; }
.bulle {
  position: absolute; left: 0; bottom: 54px; width: 300px; padding: 14px 16px; border-radius: 18px; font-size: 13px;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.info-zone:hover .bulle, .info-zone:focus-within .bulle, .bulle.ouverte { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.bulle strong { display: block; font-size: 15px; margin-bottom: 4px; }
.bulle p { margin: 0; color: var(--texte-doux); }
.bulle a { color: var(--accent); font-weight: 600; font-size: 12px; display: inline-block; margin-top: 8px; }
/* Lien vers la galerie (/images), sur sa propre ligne. */
.bulle a.bulle-galerie { display: block; width: fit-content; }
/* Météo ou titres servis par le service worker, faute de réseau. */
.hors-ligne { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soleil); }
.pastille .hors-ligne { color: var(--soleil); }
.une .vide.hors-ligne { padding: 6px 0 0; border-top: 0; color: var(--soleil); }
.globe-zone { position: relative; }

/* ---------- couches (popup, tiroirs, menus) ---------- */
.voile { position: fixed; inset: 0; z-index: 20; background: var(--voile); opacity: 0; visibility: hidden; transition: opacity .22s, visibility 0s .22s; }
.voile.ouvert { opacity: 1; visibility: visible; transition: opacity .22s; }
.voile.leger { background: rgba(8, 10, 6, .12); }
.couche { z-index: 30; visibility: hidden; opacity: 0; pointer-events: none; }
.couche.ouvert { visibility: visible; opacity: 1; pointer-events: auto; }
.entete-couche { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fermer { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); flex: none; }
.fermer:hover { background: var(--survol-fort); }
.outils-pop { display: flex; gap: 6px; }

/* popup météo */
.meteo {
  position: fixed; left: 32px; top: 60px; width: min(560px, calc(100vw - var(--gout-g) - var(--gout-d)));
  max-height: calc(100vh - 76px); overflow: auto; border-radius: 28px; padding: 20px 24px 16px;
  transform: translateY(8px) scale(.985); transform-origin: top left;
  transition: opacity .22s, transform .22s, visibility 0s .22s;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.meteo.ouvert { transform: none; transition: opacity .22s, transform .22s; }
.m-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.m-lieu { font-size: 13px; font-weight: 600; color: var(--texte-doux); letter-spacing: .02em; }
.m-temp { display: flex; align-items: center; gap: 14px; }
.m-temp b { font-size: 72px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.m-temp .ic { width: 52px; height: 52px; color: var(--soleil); stroke-width: 1.6; }
.m-cond { font-size: 18px; font-weight: 600; }
.m-sous { font-size: 13px; color: var(--texte-doux); margin-top: 2px; }
.m-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 0; }
.m-carte { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 10px 12px; min-width: 0; }
.m-carte .ic { width: 18px; height: 18px; color: var(--texte-doux); margin-bottom: 6px; }
.m-carte small { display: block; font-size: 11.5px; color: var(--texte-pale); font-weight: 600; letter-spacing: .02em; }
.m-carte b { display: block; font-size: 17px; font-weight: 700; margin-top: 1px; }
.m-carte span { display: block; font-size: 11.5px; color: var(--texte-doux); }
.m-titre { font-size: 12px; font-weight: 800; letter-spacing: .12em; margin: 14px 0 6px; color: var(--texte-doux); text-transform: uppercase; }
.m-heures { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; text-align: center; }
.m-heures > div { padding: 6px 0; border-radius: 14px; background: rgba(255, 255, 255, .06); }
.m-heures small { display: block; font-size: 12px; color: var(--texte-doux); }
.m-heures .ic { margin: 6px auto; width: 22px; height: 22px; }
.m-heures b { font-size: 15px; }
.m-jours { list-style: none; margin: 0; padding: 0; }
.m-jours li { display: grid; grid-template-columns: 56px 28px 38px 1fr 38px; align-items: center; gap: 10px; padding: 4px 0; font-size: 14px; }
.m-jours li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
.m-jours .j { font-weight: 600; }
.m-jours .min { color: var(--texte-doux); text-align: right; }
.m-jours .max { font-weight: 700; }
.m-jours .ic { width: 20px; height: 20px; }
.amp { position: relative; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.amp-in { position: absolute; top: 0; bottom: 0; border-radius: 999px; overflow: hidden; }
.amp-in i { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, var(--froid), var(--soleil)); }
.m-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12px; color: var(--texte-pale); }
.m-pied .ic { width: 14px; height: 14px; }
.m-pied .lieu { display: flex; align-items: center; gap: 5px; }
.m-pied a, .attribution { color: var(--texte-pale); }
.lien-btn { color: var(--accent); font-weight: 600; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.m-pied .lien-btn { margin-left: auto; }

/* vigilance Météo-France : la couleur s'accompagne toujours de son texte */
.vigi { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 5px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.vigi .ic.vigi-ic, .pastille .vigi .ic.vigi-ic { width: 14px; height: 14px; color: currentColor; stroke-width: 2.4; }
.vigi.vigi-jaune { background: var(--vigi-jaune); color: var(--vigi-texte); }
.vigi.vigi-orange { background: var(--vigi-orange); color: var(--vigi-texte); }
.vigi.vigi-rouge { background: var(--vigi-rouge); color: #fff; }
.pastille .vigi .vigi-txt { color: inherit; }
.m-vigi { margin: 14px 0 0; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); border-left: 5px solid; font-size: 13px; }
.m-vigi.vigi-jaune { border-left-color: var(--vigi-jaune); }
.m-vigi.vigi-orange { border-left-color: var(--vigi-orange); }
.m-vigi.vigi-rouge { border-left-color: var(--vigi-rouge); }
.m-vigi .vigi { font-size: 13px; padding: 3px 10px 3px 7px; }
.vigi-liste { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vigi-liste li { display: inline-flex; align-items: center; gap: 6px; }
.vigi-point { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.vigi-point.vigi-jaune { background: var(--vigi-jaune); }
.vigi-point.vigi-orange { background: var(--vigi-orange); }
.vigi-point.vigi-rouge { background: var(--vigi-rouge); }
.vigi-demain { margin: 8px 0 0; font-weight: 600; }
.vigi-pied { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: 12px; color: var(--texte-pale); }
.vigi-pied a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* tiroirs latéraux */
.tiroir {
  position: fixed; top: 12px; bottom: 12px; right: 12px; width: min(420px, calc(100vw - 24px));
  border-radius: 24px; display: flex; flex-direction: column;
  /* clip et non hidden : un focus() ou scrollIntoView() dans le corps ne doit
     jamais faire défiler le tiroir lui-même (l'en-tête sortait par le haut). */
  overflow: hidden; overflow: clip;
  transform: translateX(calc(100% + 24px)); opacity: 1;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1), visibility 0s .32s;
}
.tiroir.ouvert { transform: none; transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.tiroir .entete-couche { flex: none; padding: 18px 18px 10px 22px; }
.tiroir h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.tiroir-corps { flex: 1; overflow: auto; padding: 0 22px 22px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.tiroir-corps:focus-visible { outline-offset: -2px; }
.sources { display: flex; gap: 4px; padding: 0 18px 12px 22px; flex-wrap: wrap; }
.sources [role="tab"] { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texte-doux); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.sources [role="tab"]:hover { background: var(--survol); color: #fff; }
/* Onglet actif : pastille blanche, texte foncé (comme les segments). */
.sources [role="tab"][aria-selected="true"] { background: #fff; color: var(--champ-texte); border-color: #fff; text-shadow: none; }
.liste-actu { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.liste-actu li + li { border-top: 1px solid rgba(255, 255, 255, .18); }
.liste-actu a { display: grid; grid-template-columns: 24px 1fr; gap: 4px; padding: 12px 0; text-decoration: none; }
.liste-actu a::before { counter-increment: n; content: counter(n); font-size: 12px; font-weight: 800; color: var(--texte-pale); padding-top: 1px; }
.liste-actu .une-titre { font-size: 15px; }
.note { font-size: 12px; color: var(--texte-pale); margin: 14px 0 0; }
.vide { padding: 20px 0; color: var(--texte-doux); font-size: 14px; margin: 0; }
.source-pied { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); }
.lien-source { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
.lien-source:hover { text-decoration: underline; text-underline-offset: 3px; }
.lien-source .ic { width: 14px; height: 14px; }

/* panneau réglages */
.reglages section { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.reglages section:first-child { border-top: 0; padding-top: 4px; }
/* Bas du tiroir : liens vers les pages légales. */
.pied-legal { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; }
.pied-legal a { color: var(--texte-doux); text-decoration: underline; text-underline-offset: 3px; }
.reglages h3 { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--texte-doux); text-transform: uppercase; }
.champ { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; font-size: 13px; font-weight: 600; position: relative; }
.champ:last-child { margin-bottom: 0; }
.aide { font-size: 12px; font-weight: 500; color: var(--texte-pale); }
.saisie {
  height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .1);
  padding: 0 12px; font-size: 14px; font-weight: 500; text-shadow: none; width: 100%; min-width: 0;
}
/* Texte indicatif : 4,5:1 comme un texte (.5 auparavant). */
.saisie::placeholder { color: rgba(255, 255, 255, .8); }
select.saisie {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat;
}
select.saisie option, select.saisie optgroup { color: #1c2016; background: #fff; }
.saisie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.segments { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); align-self: flex-start; }
.segments label { position: relative; cursor: pointer; }
.segments input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segments span { display: block; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--texte-doux); }
/* Choix actif : pastille blanche, texte foncé (le blanc translucide
   éclaircissait le fond sous un texte blanc). */
.segments input:checked + span { background: #fff; color: var(--champ-texte); text-shadow: none; }
.segments input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.rangee { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; font-size: 14px; }
.rangee:last-child { margin-bottom: 0; }
.inter {
  appearance: none; -webkit-appearance: none; width: 40px; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .22); position: relative; cursor: pointer; flex: none; margin: 0; transition: background-color .15s;
}
.inter::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: #fff;
  transition: transform .15s; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.inter:checked { background: #8fae4a; border-color: #a9c662; }
.inter:checked::after { transform: translateX(16px); }
.inter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grille-mod { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.grille-mod .rangee { margin: 0; }
.duo { display: flex; gap: 8px; }
.duo .saisie { flex: 1; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background-color .15s; text-decoration: none; align-self: flex-start;
}
.bouton:hover { background: var(--survol-fort); }
.bouton .ic { width: 16px; height: 16px; }
.bouton.plein { background: #fff; color: #1c2016; border-color: #fff; text-shadow: none; }
.bouton.plein:hover { background: #eef3dc; }
.boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.curseur { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin: 0 0 10px; font-size: 14px; }
.curseur output { font-size: 13px; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.curseur input { grid-column: 1 / -1; width: 100%; accent-color: #d9e8a6; }
.flux { list-style: none; margin: 0 0 8px; padding: 0; }
.flux li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; font-weight: 500; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.flux li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flux li small { color: var(--texte-pale); }
.mini-btn { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--texte-doux); flex: none; }
.mini-btn:hover { background: var(--survol); color: #fff; }
.mini-btn .ic { width: 16px; height: 16px; }
.fichier { position: relative; overflow: hidden; }
.fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fichier:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.retour { font-size: 12.5px; font-weight: 500; color: var(--accent); margin: 8px 0 0; min-height: 1em; }
.retour kbd, .note kbd {
  font: inherit; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
}
.aide-accueil { margin: 12px 0 0; font-size: 13px; }
.aide-accueil summary { cursor: pointer; font-weight: 600; color: var(--texte-doux); padding: 4px 0; }
.aide-accueil summary:hover { color: #fff; }
.aide-accueil summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.aide-accueil[open] summary { margin-bottom: 8px; }
.aide-accueil .champ { margin-bottom: 0; }
.etapes { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-weight: 500; color: var(--texte-doux); }
.etapes .champ { margin: 8px 0 0; font-size: 12.5px; }
.bloc-extension { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.bloc-extension h4 { margin: 0; font-size: 13.5px; font-weight: 700; }
.bloc-extension > .note { margin: 4px 0 0; }
.extension { margin: 12px 0 0; }
.extension .note { margin: 6px 0 8px; }
.extension .mention { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--accent); vertical-align: middle; }
.villes {
  list-style: none; margin: 0; padding: 4px; position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  max-height: 260px; overflow: auto; border-radius: 14px; background: rgba(28, 32, 22, .96); border: 1px solid rgba(255, 255, 255, .18);
}
.champ-ville .villes { top: 66px; }
.villes li { padding: 8px 10px; border-radius: 10px; cursor: pointer; font-weight: 500; }
.villes li[aria-selected="true"], .villes li:hover { background: var(--survol-fort); }
.ville-lieu { color: var(--texte-pale); font-size: 12px; }

/* menus et petits panneaux */
.menu {
  position: fixed; border-radius: 18px; padding: 6px; min-width: 220px; background: var(--verre-menu);
  transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.menu.ouvert { transform: none; transition: opacity .15s, transform .15s; }
.menu form { margin: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; text-align: left; text-decoration: none; }
.menu-item:hover { background: var(--survol-fort); }
.menu-item .ic { width: 18px; height: 18px; color: var(--texte-doux); }
.menu-tete { padding: 8px 12px 6px; font-size: 12px; color: var(--texte-pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px; }
.pop {
  position: fixed; border-radius: 20px; padding: 14px; background: var(--verre-menu); width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 24px); overflow: auto; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.pop.ouvert { transform: none; transition: opacity .15s, transform .15s; }
.pop h3 { margin: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.pop .tuiles { margin-top: 12px; }
.pop form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.pop .champ { margin: 0; }
.pop .retour:empty { display: none; }
.pop .actions-form { display: flex; gap: 8px; justify-content: flex-end; }
.pop .note { margin: 10px 0 0; }

/* aperçu de l'import des favoris (boîte de dialogue native) */
dialog.dialogue {
  color: var(--texte); border-radius: 24px; padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  display: none; flex-direction: column;
}
dialog.dialogue[open] { display: flex; }
dialog.dialogue::backdrop { background: rgba(8, 10, 6, .4); }
.dialogue .entete-couche { padding: 16px 16px 8px 22px; }
.dialogue-titre { margin: 0; font-size: 18px; font-weight: 800; }
.dialogue-corps { overflow: auto; padding: 0 22px 10px; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 22px 18px; border-top: 1px solid rgba(255, 255, 255, .12); }
.apercu-actions { display: flex; gap: 14px; margin: 10px 0; }
.apercu-import, .apercu-import ul { list-style: none; margin: 0; padding: 0; }
.apercu-import ul { padding-left: 26px; }
.apercu-groupe { padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.coche { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; line-height: 1.35; padding: 3px 0; }
.coche input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #8fae4a; flex: none; }

/* message discret (dom.js, notifier) */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 10px); opacity: 0; visibility: hidden;
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(18, 22, 14, .72);
  -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
  transition: opacity .2s, transform .2s, visibility 0s .2s; max-width: calc(100vw - 32px); text-align: center;
}
.toast.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .2s, transform .2s; }

/* ---------- mode zen (zen.js) ----------
   body.zen : tout s'efface en fondu, sans bouger (visibility : plus de
   focus ni de lecture), sauf la photo, le bouton zen et ce qui est gardé
   (zen-horloge, zen-date). Bouton « i » : transparent, mais atteignable au
   clavier et visible au focus ou au survol. Instantané avec
   prefers-reduced-motion (règle générale plus bas) et à l'ouverture d'un
   onglet en mode zen (zen-instant). */
.logo, .col-g > *, .ligne-date > *, .col-d, .pied > * {
  transition: opacity .45s ease, visibility 0s linear 0s;
}
.actions .bouton-ic { transition: opacity .45s ease, background-color .15s, visibility 0s linear 0s; }
.col-g, .actions { transition: background-color .45s ease, border-color .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease; }
body.zen .logo, body.zen .col-d, body.zen .globe-zone, body.zen .actions > :not(.bouton-zen),
body.zen .col-g > :not(.horloge):not(.ligne-date), body.zen .ligne-date > :not(.date),
body.zen:not(.zen-horloge) .col-g > .horloge, body.zen:not(.zen-date) .col-g > .ligne-date {
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
body.zen .lien-evitement { visibility: hidden; }
/* Plus de verre : seuls l'heure et la date restent, posées sur la photo. */
body.zen .col-g, body.zen .actions {
  background-color: transparent; border-color: transparent;
  -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1);
}
body.zen .info-zone { opacity: 0; }
body.zen .info-zone:hover, body.zen .info-zone:focus-within { opacity: 1; }
/* Bouton zen : seul dans son coin, sur un petit verre, discret jusqu'au survol. */
body.zen .bouton-zen {
  opacity: .7; background: var(--verre-petit); border: 1px solid var(--bord);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
}
body.zen .bouton-zen:hover, body.zen .bouton-zen:focus-visible { opacity: 1; }
.bouton-zen[aria-pressed="true"] .ic { color: var(--accent); }
body.zen-instant *, body.zen-instant *::before, body.zen-instant *::after { transition: none !important; }

/* ---------- messages, pluie, rubriques, nouveautés (2026-10-21) ----------
   Bandeau des messages (messages.js) : dans la bande du haut, entre le
   logo et la pilule des actions, décalé vers la droite ; jamais sur la
   colonne gauche (qui commence à y 166) ni au milieu de la photo. Hauteur
   bornée, défilement au-delà. Écran étroit : dans le flux, sous le haut. */
.bandeau {
  position: absolute; top: 22px; left: max(300px, calc(50% - 120px)); right: 210px; max-width: 600px; margin-left: auto; margin-right: auto;
  max-height: 132px; overflow: auto; display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px 10px 14px; border-radius: 18px;
  font-size: 13.5px; line-height: 1.4; z-index: 2;
}
.bandeau.important { border-color: rgba(243, 227, 160, .55); box-shadow: inset 4px 0 0 var(--soleil); }
.bandeau-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--texte-doux); }
.bandeau.important .bandeau-ic { color: var(--soleil); }
.bandeau-corps { flex: 1; min-width: 0; }
.bandeau-niveau { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soleil); }
.bandeau-texte { margin: 0; overflow-wrap: anywhere; }
.bandeau-lien { display: inline-block; margin-top: 2px; color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.bandeau-lu {
  flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); white-space: nowrap;
}
.bandeau-lu:hover { background: var(--survol-fort); }
.bandeau-lu .ic { width: 15px; height: 15px; }

/* Alerte pluie dans la pastille météo, et ligne des 2 heures dans la popup. */
.pastille .pluie-alerte { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: rgba(143, 195, 238, .24); font-size: 12px; font-weight: 700; }
.pastille .pluie-alerte .ic.pluie-ic { width: 14px; height: 14px; color: var(--froid); }
.m-pluie { margin: 14px 0 0; }
.m-pluie .m-titre { margin-top: 0; }
.pluie-resume { margin: 0 0 8px; font-weight: 600; }
.pluie-barres { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; align-items: end; height: 44px; padding: 0 2px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
.pluie-col { height: 100%; display: flex; align-items: flex-end; }
.pluie-q { display: block; width: 100%; height: 0; min-height: 2px; border-radius: 4px 4px 0 0; background: rgba(255, 255, 255, .22); }
.pluie-q.mouille { background: var(--froid); }
.pluie-reperes { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11.5px; color: var(--texte-pale); }
.m-pluie .note { margin-top: 6px; }

/* Rubriques de Google News : cases du tiroir des réglages, sous-onglets du tiroir des actualités. */
.groupe-coches { margin: 0; padding: 0; border: 0; min-width: 0; }
.groupe-coches legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 600; }
.grille-coches { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.grille-coches .coche { font-size: 13.5px; font-weight: 500; }
.sources.rubriques { padding: 0 0 10px; margin: 0 0 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.sources.rubriques [role="tab"] { padding: 4px 10px; font-size: 12.5px; }

/* Point « nouveau » du bouton Réglages et mention du lien « Nouveautés ». */
.bouton-ic.nouveau { position: relative; }
.bouton-ic.nouveau::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--soleil); box-shadow: 0 0 0 2px rgba(18, 22, 14, .75);
}
.pied-legal .mention-nouveau { color: var(--soleil); font-weight: 700; }

@media (max-width: 899px) {
  .bandeau { position: static; max-width: none; max-height: none; margin: 0; }
}
@media (max-width: 420px) {
  .grille-coches { grid-template-columns: 1fr; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) and (min-width: 900px) {
  .horloge { font-size: 108px; }
}
@media (max-width: 899px) {
  .scene { min-height: 100vh; display: flex; flex-direction: column; gap: 16px; padding: 18px var(--gout-d) 24px var(--gout-g); }
  .logo, .actions, .col-g, .col-d, .pied { position: static; transform: none; width: auto; }
  .haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .col-g { padding: 20px; border-radius: 24px; }
  .col-d { border-radius: 22px; }
  .horloge { font-size: clamp(68px, 22vw, 124px); }
  .salut { font-size: clamp(22px, 6.5vw, 30px); }
  .ligne-date { flex-wrap: wrap; }
  .pied { margin-top: auto; padding-top: 8px; }
  .bulle { width: min(300px, calc(100vw - 32px)); }
  .meteo { left: var(--gout-g); top: 16px; max-height: calc(100vh - 32px); padding: 18px; }
  .m-cartes { grid-template-columns: repeat(2, 1fr); }
  .m-heures { grid-template-columns: repeat(3, 1fr); }
  .m-temp b { font-size: 60px; }
}
@media (min-width: 900px) { .haut { display: contents; } }
@media (max-width: 420px) {
  .m-jours li { grid-template-columns: 44px 22px 32px 1fr 32px; gap: 7px; font-size: 13px; }
  .tuiles { gap: 10px 8px; }
  .grille-mod { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
}