/* Nimbus — feuille de style.

   Registre : un instrument, pas une affiche. Fond profond, cartes posees
   dessus, une seule couleur d'accent, et de la place donnee a ce qu'on vient
   chercher — la carte et la reponse « va-t-il pleuvoir ». Les chiffres sont
   tous en chasse fixe pour les colonnes, parce qu'une colonne de nombres qui
   danse est illisible. */

:root {
  --fond: #f2f5f9;
  --carte: #ffffff;
  --creux: #e6ebf2;
  --trait: #d2dae5;
  --encre: #101720;
  --douce: #58677a;
  --accent: #0e7c8c;
  --accent-pale: #d8eef1;
  --pluie: #2f7fd0;
  --sec: #46946a;
  --alerte: #c4623a;
  --ombre: 0 1px 2px rgba(16,23,32,.05), 0 6px 22px rgba(16,23,32,.06);
  --r: 16px;
  --marge: clamp(14px, 3.5vw, 26px);
  --chiffres: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono",
              "Roboto Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fond: #0c1119; --carte: #151d27; --creux: #1c2531; --trait: #273343;
    --encre: #e9eef5; --douce: #8ea0b4; --accent: #4fc4d2;
    --accent-pale: #10303a; --pluie: #59a8e8; --sec: #62c08d; --alerte: #e8895e;
    --ombre: 0 1px 2px rgba(0,0,0,.34), 0 8px 26px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"] {
  --fond: #0c1119; --carte: #151d27; --creux: #1c2531; --trait: #273343;
  --encre: #e9eef5; --douce: #8ea0b4; --accent: #4fc4d2;
  --accent-pale: #10303a; --pluie: #59a8e8; --sec: #62c08d; --alerte: #e8895e;
  --ombre: 0 1px 2px rgba(0,0,0,.34), 0 8px 26px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }

/* ⚠ INDISPENSABLE, et a garder en tete de feuille.
   L'attribut `hidden` n'est qu'un `display: none` pose par la feuille du
   navigateur, de priorite minimale : la moindre declaration `display` dans
   NOTRE feuille le neutralise. `.carte-charge { display: grid }` rendait
   ainsi le rond de chargement PERMANENT, et `.verdict { display: flex }`
   affichait un bandeau vide. Constate le 16/08/2026. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2 { margin: 0; text-wrap: balance; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ⚠ NE PAS styler l'interieur des icones depuis ici.
   Les icones sont clonees par `<use>`, qui les place dans un arbre fantome
   que les selecteurs CSS de ce document NE TRAVERSENT PAS. Seules les
   proprietes HERITEES (fill, stroke, color, opacity) y entrent. Une regle
   `.icone circle { fill: currentColor }` reste donc sans effet, et le nuage
   ressort en cercles CONTOURES empiles -- defaut constate le 16/08/2026.
   Le remplissage et les traits sont portes par des attributs dans le SVG,
   ou ils fonctionnent des deux cotes de la frontiere. Ici on ne fixe que la
   taille et la couleur, qui s'heritent. */
svg use { pointer-events: none; }
.icone-geante { width: 84px; height: 84px; flex: none; color: var(--encre); }
.icone { width: 34px; height: 34px; }
.pale { color: var(--douce); opacity: .55; }

/* ---------------------------------------------------------------- entete */
.entete {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px var(--marge);
  background: color-mix(in srgb, var(--carte) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 30;
}
.marque {
  display: flex; align-items: center; gap: 9px; text-decoration: none;
  color: inherit; font-weight: 600; letter-spacing: .01em;
}
.logo { width: 28px; height: 28px; fill: none; stroke: var(--accent);
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo .trait { stroke: var(--douce); }

.recherche { position: relative; display: flex; gap: 8px; flex: 1 1 240px;
             max-width: 520px; margin-left: auto; }
.recherche input {
  flex: 1; min-width: 0; padding: 10px 15px; font: inherit; color: var(--encre);
  background: var(--creux); border: 1px solid transparent; border-radius: 999px;
}
.recherche input::placeholder { color: var(--douce); }
.recherche input:focus-visible, .recherche button:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.recherche button {
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--creux); border: 1px solid transparent; border-radius: 50%;
  cursor: pointer; color: var(--douce);
}
.recherche button:hover { color: var(--accent); }
.recherche button svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.recherche button .creux { opacity: .45; }

.suggestions {
  position: absolute; top: calc(100% + 6px); left: 0; right: 52px; z-index: 40;
  margin: 0; padding: 6px; list-style: none; background: var(--carte);
  border: 1px solid var(--trait); border-radius: 12px; box-shadow: var(--ombre);
  max-height: 320px; overflow-y: auto;
}
.suggestions li {
  padding: 9px 12px; border-radius: 9px; cursor: pointer; display: flex;
  justify-content: space-between; gap: 12px; align-items: baseline;
}
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--accent-pale); }
.suggestions .infos { color: var(--douce); font: .8rem/1 var(--chiffres); }

/* ----------------------------------------------------------------- corps */
main { max-width: 1120px; margin: 0 auto; padding: var(--marge); }
.bloc { margin-bottom: 22px; }
.titre-rang {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
}
.titre-rang h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--douce);
}

/* ------------------------------------------------------------------ hero */
.hero {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre);
  padding: 22px var(--marge); margin-bottom: 14px;
}
.hero-principal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.1; }
.condition { margin: 2px 0 0; color: var(--douce); font-size: 1rem; }
.temp-ligne { margin: 6px 0 0; display: flex; align-items: baseline; gap: 3px; }
.temp { font: 250 clamp(3.2rem, 11vw, 4.4rem)/1 var(--chiffres);
        letter-spacing: -.04em; }
.deg { font-size: 1.6rem; color: var(--douce); }
.ressenti { margin-left: 12px; color: var(--douce); font-size: .92rem; }

.faits {
  margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--trait);
  display: grid; gap: 14px 20px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
}
.faits div { display: flex; flex-direction: column; gap: 2px; }
.faits dt { font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
            color: var(--douce); }
.faits dd { margin: 0; font: 1.02rem/1.3 var(--chiffres); }
.precision { margin: 14px 0 0; color: var(--douce); font-size: .76rem; }

/* --------------------------------------------------------------- verdict */
.verdict {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--carte); border: 1px solid var(--trait);
  border-left: 4px solid var(--sec);
  border-radius: var(--r); box-shadow: var(--ombre);
  padding: 16px var(--marge); margin-bottom: 22px;
}
.verdict[data-pluie="oui"] { border-left-color: var(--pluie); }
.verdict[data-pluie="fort"] { border-left-color: var(--alerte); }
.verdict-texte { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; }
.pastille { width: 10px; height: 10px; border-radius: 50%; flex: none;
            background: var(--sec); }
.verdict[data-pluie="oui"] .pastille { background: var(--pluie); }
.verdict[data-pluie="fort"] .pastille { background: var(--alerte); }
.verdict p { margin: 0; font-size: 1.02rem; }
.verdict strong { font-weight: 600; }

/* Douze barres = les douze prochaines heures. Une barre vide reste VISIBLE
   (fond creux) : « il ne pleut pas » doit se lire, pas s'inferer d'un vide. */
.mini-pluie { display: flex; gap: 3px; align-items: flex-end; height: 40px;
              flex: 1 1 200px; }
.mini-pluie span { flex: 1; background: var(--creux); border-radius: 2px;
                   position: relative; height: 100%; }
.mini-pluie span i { position: absolute; bottom: 0; left: 0; right: 0;
                     background: var(--pluie); border-radius: 2px; display: block; }

/* ----------------------------------------------------------------- carte */
.couches { display: flex; gap: 6px; flex-wrap: wrap; }
.couches button {
  padding: 6px 13px; font: inherit; font-size: .82rem; cursor: pointer;
  color: var(--douce); background: var(--creux);
  border: 1px solid transparent; border-radius: 999px;
}
.couches button[aria-selected="true"] {
  background: var(--accent-pale); color: var(--accent); border-color: var(--accent);
  font-weight: 600;
}
.carte-cadre {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--r); box-shadow: var(--ombre); overflow: hidden;
}
.carte { position: relative; width: 100%; background: #0d1620; }
.carte img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; image-rendering: auto;
}
#c-fond { position: relative; }         /* c'est lui qui donne la hauteur */
#c-donnees { opacity: .92; }
#c-contours { opacity: .55; }
.epingle {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2.5px solid #fff; background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0,0,0,.45); pointer-events: none;
}
.carte-charge {
  position: absolute; inset: 0; background: rgba(13,22,32,.35);
  display: grid; place-items: center;
}
.carte-charge::after {
  content: ""; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: tourne .8s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

.commandes { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.rond {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer; color: var(--encre);
  background: var(--carte); border: 1px solid var(--trait);
}
.rond:hover { color: var(--accent); border-color: var(--accent); }
.rond svg { width: 20px; height: 20px; fill: none; stroke: currentColor;
            stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rond svg path { fill: currentColor; }
#jouer[data-actif="oui"] svg path { fill: none; }
input[type=range] { flex: 1; accent-color: var(--accent); min-width: 0; }
.etiquette-heure { font: .88rem/1 var(--chiffres); color: var(--douce);
                   white-space: nowrap; min-width: 8.5ch; text-align: right; }

.legende { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           margin-top: 12px; color: var(--douce); }
.legende .quoi { font-size: .8rem; white-space: nowrap; }
.legende .quoi b { font-weight: 600; color: var(--encre); }
.legende .echelle { flex: 1 1 240px; min-width: 180px; position: relative;
                    padding-bottom: 15px; }
.barre-legende { display: block; height: 10px; border-radius: 5px; }
.legende .tics { position: absolute; inset: auto 0 0 0; height: 14px; display: block; }
.legende .tic {
  position: absolute; top: 0; transform: translateX(-50%);
  font: .68rem/1.4 var(--chiffres); white-space: nowrap;
}
.legende .tic::before {
  content: ""; position: absolute; top: -4px; left: 50%; width: 1px;
  height: 3px; background: var(--trait);
}

/* ------------------------------------------------------ heure par heure */
.rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px;
        scroll-snap-type: x proximity; }
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--trait); border-radius: 4px; }
.heure {
  flex: none; width: 86px; scroll-snap-align: start; text-align: center;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: 13px; padding: 11px 8px 10px;
}
.heure.nuit { background: var(--creux); }
.heure.maintenant { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-pale); }
.heure .q { font: .74rem/1 var(--chiffres); color: var(--douce); }
.heure .icone { margin: 7px auto 5px; display: block; }
.heure .t { font: 1.18rem/1 var(--chiffres); }
.heure .mm { font: .74rem/1.5 var(--chiffres); color: var(--pluie); min-height: 1.5em; }
.heure .mm.rien { color: var(--douce); opacity: .5; }
.heure .vt { font: .72rem/1.4 var(--chiffres); color: var(--douce); }

/* ------------------------------------------------------------- les jours */
.jours { display: grid; gap: 8px; }
.jour {
  display: grid; grid-template-columns: 5.4rem 34px 1fr auto; gap: 12px;
  align-items: center; background: var(--carte); border: 1px solid var(--trait);
  border-radius: 13px; padding: 11px 16px;
}
.jour .nom { font-weight: 500; text-transform: capitalize; }
.jour .icone { width: 28px; height: 28px; }
.jour .barre { height: 6px; border-radius: 3px; background: var(--creux);
               position: relative; }
.jour .barre span { position: absolute; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #5b9bd5, #d98247); }
.jour .bornes { font: .95rem/1 var(--chiffres); white-space: nowrap; }
.jour .bornes .mn { color: var(--douce); }
.jour .bornes .pl { color: var(--pluie); }

/* --------------------------------------------------------------- divers */
.accueil { text-align: center; padding: 7vh 0 5vh; }
.accueil .icone-geante { width: 110px; height: 110px; margin-bottom: 14px; }
.accueil h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); margin-bottom: 10px; }
.accueil p { color: var(--douce); max-width: 46ch; margin: 0 auto; }

.message { padding: 12px 16px; border-radius: 11px; background: var(--accent-pale);
           border: 1px solid var(--trait); }
.message[data-ton="erreur"] { background: color-mix(in srgb, var(--alerte) 15%, transparent); }

.pied { max-width: 1120px; margin: 0 auto; padding: 20px var(--marge) 40px;
        border-top: 1px solid var(--trait); color: var(--douce); font-size: .78rem; }
.pied p { margin: 0 0 6px; }
.pied a { color: var(--accent); }
.installer {
  margin-top: 10px; padding: 9px 16px; font: inherit; font-size: .82rem;
  color: var(--encre); background: var(--carte); border: 1px solid var(--trait);
  border-radius: 999px; cursor: pointer;
}
.installer:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 620px) {
  .hero-principal { gap: 14px; }
  .icone-geante { width: 66px; height: 66px; }
  .jour { grid-template-columns: 4.2rem 26px 1fr auto; gap: 9px; padding: 10px 12px; }
  .etiquette-heure { min-width: 7ch; }
}
@media (prefers-reduced-motion: reduce) {
  *, ::after { animation: none !important; transition: none !important; }
}