/**
 * SkyAtlas — Design system « app » v3 (partagé)
 * Chargé en plus de tokens.css. Porté depuis la maquette validée
 * (public/preview/skyatlas.css + SkyAtlas - Identité.html).
 *
 * Contient : la lune croissant corrigée (.sa-moon), le diptyque
 * jour/nuit (.sa-dip*), la barre d'onglets (.app-tabbar) et le
 * header app (.app-hdr). Aucune dépendance React.
 */

/* Toute classe posant display: flex/grid l'emporte sur le display:none que le
   navigateur attache à [hidden] : sans ceci, un bloc masqué en attendant sa
   donnée (verdict du soir, lien ville) s'affichait vide. */
[hidden] { display: none !important; }

:root {
  /* tokens complémentaires non présents dans tokens.css */
  --c-border-strong: rgba(255, 255, 255, 0.14);
  --c-golden-soft:   rgba(255, 176, 32, 0.18);
  --score-good: #6fcf97;
  --score-mid:  #f0a890;
  --score-bad:  #c08070;
}

/* ============================================================
   LA LUNE — croissant graphique chaud (technique deux cercles)
   --ms = diamètre · --mlit = fraction éclairée (0..1).
   Seul le croissant est peint ; la face sombre reste transparente
   → le ciel passe au travers, jamais de boule noire.
   ============================================================ */
.sa-moon{position:relative;width:var(--ms,34px);height:var(--ms,34px);border-radius:50%;flex:none;
  --mrad:calc(var(--ms,34px) / 2);
  --shift:calc(var(--mrad) * var(--mlit,0.18) * 2);
  filter:drop-shadow(0 0 calc(var(--ms,34px)*0.30) rgba(255,214,130,0.55))
         drop-shadow(0 0 calc(var(--ms,34px)*0.85) rgba(255,184,80,0.22));}
.sa-moon .mb{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 86% 46%, #fffdf6 0%, #fdeac9 40%, #f3d6a0 72%, #e7bf86 100%);
  -webkit-mask:
    radial-gradient(circle var(--mrad) at 50% 50%, #000 0 99.4%, transparent 100%),
    radial-gradient(circle var(--mrad) at calc(50% - var(--shift)) 50%, #000 0 99.4%, transparent 100%);
  -webkit-mask-composite:source-out;
  mask:
    radial-gradient(circle var(--mrad) at 50% 50%, #000 0 99.4%, transparent 100%),
    radial-gradient(circle var(--mrad) at calc(50% - var(--shift)) 50%, #000 0 99.4%, transparent 100%);
  mask-composite:subtract;}
.sa-moon .mb::before,.sa-moon .mb::after{display:none;}
/* lumière cendrée (earthshine) — orbe chaud très faible, jamais noir */
.sa-moon .ms{position:absolute;inset:0;border-radius:50%;opacity:0.13;
  background:radial-gradient(circle at 40% 48%, #7a68b0 0%, #342a60 60%, transparent 100%);
  -webkit-mask:radial-gradient(circle var(--mrad) at 50% 50%, #000 0 99.4%, transparent 100%);
          mask:radial-gradient(circle var(--mrad) at 50% 50%, #000 0 99.4%, transparent 100%);}
/* liseré doré sur le limbe éclairé (extérieur droit) */
.sa-moon .mr{position:absolute;inset:0;border-radius:50%;box-shadow:inset -1.4px 0 2.6px rgba(255,206,128,0.9);
  -webkit-mask:radial-gradient(circle at 122% 50%, #000 0 34%, transparent 52%);
          mask:radial-gradient(circle at 122% 50%, #000 0 34%, transparent 52%);}

/* ============================================================
   DIPTYQUE jour & nuit (piste 04 validée) — deux actes :
   l'heure dorée (hero jour) + le croissant cendré (hero nuit).
   ============================================================ */
.sa-dip{display:flex;flex-direction:column;gap:16px;}
.sa-dip-panel{position:relative;border-radius:16px;overflow:hidden;padding:22px 22px 20px;box-shadow:0 12px 34px rgba(10,8,28,0.5);}
.sa-dip-panel.day{background:linear-gradient(162deg,rgba(36,28,58,0.72) 0%,rgba(92,46,72,0.62) 48%,rgba(168,98,42,0.55) 100%);border:1px solid rgba(255,176,32,0.34);box-shadow:0 0 0 1px rgba(255,176,32,0.06),0 12px 34px rgba(10,8,28,0.5);}
.sa-dip-panel.night{background:linear-gradient(162deg,rgba(28,26,58,0.78) 0%,rgba(44,38,86,0.66) 55%,rgba(30,30,72,0.6) 100%);border:1px solid rgba(160,180,240,0.18);}
.sa-dip-panel .sa-moon{position:absolute;right:20px;top:18px;}
.sa-dip-lbl{display:block;font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.11em;text-transform:uppercase;color:rgba(228,240,255,0.66);margin-bottom:14px;}
.sa-dip-hero{display:flex;flex-direction:column;}
.sa-dip-kicker{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:22px;line-height:1.1;color:#ffce7a;margin-bottom:4px;}
.sa-dip-panel.night .sa-dip-kicker{color:#c8d4f0;}
.sa-dip-big{font-family:var(--font-mono);font-weight:500;font-size:56px;letter-spacing:-0.03em;line-height:1;color:rgba(232,244,255,0.98);font-variant-numeric:tabular-nums;}
.sa-dip-big .pct{font-size:30px;color:rgba(232,244,255,0.7);margin-left:2px;}
.sa-dip-sub{font-family:var(--font-mono);font-size:13px;letter-spacing:0.04em;color:rgba(200,222,248,0.78);margin-top:12px;}
.sa-dip-mini{display:flex;gap:22px;margin-top:14px;}
.sa-dip-mini span{font-family:var(--font-mono);font-size:12px;letter-spacing:0.06em;color:rgba(176,200,232,0.55);white-space:nowrap;}

/* ============================================================
   HEADER app — wordmark ✦SkyAtlas · ville · action globe
   ============================================================ */
.app-hdr{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:13px 20px;background:rgba(0,0,8,0.78);backdrop-filter:var(--blur-bg);
  -webkit-backdrop-filter:var(--blur-bg);border-bottom:1px solid var(--c-border);box-shadow:var(--elev-glass);}
.app-mast{display:flex;flex-direction:column;gap:5px;min-width:0;line-height:1;text-decoration:none;}
.app-wordmark{font-family:var(--font-display);font-style:italic;font-size:22px;font-weight:500;letter-spacing:-0.01em;
  color:var(--c-text-primary);text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.app-wordmark .star{font-style:normal;color:var(--c-golden);font-size:0.66em;}
.app-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(176,200,232,0.5);}
.app-hdr-spacer{flex:1;}
.app-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--c-border-strong);background:transparent;color:var(--c-text-secondary);
  text-decoration:none;cursor:pointer;}
.app-iconbtn:hover{color:var(--c-text-primary);border-color:var(--c-border-strong);}
.app-loc{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border-radius:999px;
  border:1px solid var(--c-border-strong);background:transparent;color:var(--c-text-primary);
  font-family:var(--font-sans);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;}
.app-loc .dot{width:8px;height:8px;border-radius:50%;background:var(--c-golden);box-shadow:0 0 9px var(--c-golden-glow);flex:none;}
.app-loc .chev{display:inline-flex;color:var(--c-text-muted);}

/* ============================================================
   BARRE D'ONGLETS — 4 logos validés (Identité.html, navNew)
   Ce soir · Carte · Spots · Le monde
   ============================================================ */
.app-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);
  gap:2px;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:rgba(4,8,24,0.82);backdrop-filter:var(--blur-bg);-webkit-backdrop-filter:var(--blur-bg);
  border-top:1px solid var(--c-border);box-shadow:var(--elev-glass);}
.app-tab{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 4px;
  color:var(--c-text-muted);font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.03em;
  text-decoration:none;background:none;border:0;cursor:pointer;}
.app-tab svg{width:25px;height:25px;}
.app-tab.on{color:var(--c-golden);}
.app-tab:hover{color:var(--c-text-secondary);}
.app-tab.on:hover{color:var(--c-golden);}
/* dégager le contenu derrière la barre fixe */
.app-has-tabbar{padding-bottom:78px;}

/* ============================================================
   HOME app-mobile (parcours fusion porté en Twig) — colonne
   centrée, masthead + ligne d'édition, hero, sections, colophon.
   ============================================================ */
.ha{max-width:720px;margin:0 auto;padding:0 22px 120px;position:relative;z-index:1;}

/* masthead + ligne d'édition */
.ha-hdr{display:flex;align-items:center;gap:12px;padding:13px 0 12px;}
.ha-mast{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ha-wm{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:22px;letter-spacing:-0.01em;line-height:1;color:var(--c-text-primary);text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
.ha-wm .star{font-style:normal;color:var(--c-golden);font-size:0.66em;}
.ha-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(176,200,232,0.5);}
.ha-sp{flex:1;}
.ha-iconbtn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--c-border-strong);color:var(--c-text-secondary);}
.ha-loc{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 15px;border:1px solid var(--c-border-strong);border-radius:999px;color:var(--c-text-primary);font:500 14px var(--font-sans);text-decoration:none;}
.ha-loc .dot{width:8px;height:8px;border-radius:50%;background:var(--c-golden);box-shadow:0 0 9px var(--c-golden-glow);}
.ha-loc .chev{color:var(--c-text-muted);display:flex;}
/* Barre d'état, pas ours de magazine : un seul filet (deux filets encadrant une
   ligne, c'est la mise en page d'un titre de presse) et un interlettrage normal. */
.ha-issue{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,0.09);font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.02em;color:rgba(176,200,232,0.62);}
.ha-issue .r{display:inline-flex;align-items:center;gap:8px;color:var(--c-text-secondary);}

/* hero */
.ha-hero{padding:14px 0 4px;}
.sa-eyebrow{margin:0 0 11px;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:15px;letter-spacing:0.01em;color:var(--c-text-secondary);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;}
.sa-eyebrow .tick{width:6px;height:6px;border-radius:50%;background:var(--c-golden);box-shadow:0 0 8px var(--c-golden-glow);}
.sa-display{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(38px,10.5vw,52px);line-height:1.04;letter-spacing:-0.012em;color:var(--c-text-primary);text-wrap:balance;}
.sa-display em{font-style:italic;color:var(--c-golden);}

/* verdict du soir (hero) — score + libellé éditorial côte à côte (maquette handoff) */
.ha-verdict{display:flex;align-items:flex-end;gap:20px;margin:30px 0 0;}
.ha-verdict-num{display:flex;align-items:flex-start;gap:3px;line-height:.78;flex:none;}
.ha-verdict-num .n{font-family:var(--font-mono);font-weight:600;font-size:84px;line-height:.78;letter-spacing:-0.045em;font-variant-numeric:tabular-nums;color:var(--c-golden);}
.ha-verdict-num .t{font-family:var(--font-mono);font-weight:400;font-size:22px;color:var(--c-text-muted);padding-top:0.28em;}
.ha-verdict-side{flex:1;min-width:0;padding-bottom:6px;}
.ha-verdict-label{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:22px;line-height:1.25;letter-spacing:-0.01em;color:#ffce7a;text-wrap:pretty;}
.ha-verdict-cap{margin-top:8px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-text-muted);}
.sa-scoreblock{display:flex;align-items:flex-end;gap:2px;margin:16px 0 2px;line-height:0.84;}
.sa-score{font-family:var(--font-mono);font-weight:500;font-size:96px;line-height:0.82;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--c-golden);text-shadow:0 0 60px var(--c-golden-glow);}
.sa-score.is-good{color:var(--score-good);}
.sa-score.is-mid{color:var(--score-mid);}
.sa-score.is-bad{color:var(--score-bad);}
.sa-score-total{font-family:var(--font-mono);font-weight:400;font-size:28px;color:var(--c-text-muted);letter-spacing:-0.02em;padding-bottom:0.16em;}
/* Chapô en Inter : le titre reste en serif, et c'est ce contraste qui hiérarchise.
   Tout en serif, le hero se lisait comme un article de revue. */
.sa-verdict-text{margin:15px 0 0;font:400 16.5px/1.55 var(--font-sans);color:var(--c-text-secondary);max-width:44ch;text-wrap:pretty;}
.sa-countdown{margin:30px 0 0;display:inline-flex;align-items:center;gap:11px;max-width:100%;padding:9px 16px;background:var(--c-golden-dim);border:1px solid rgba(255,176,32,0.28);border-radius:999px;white-space:nowrap;}
.sa-countdown .d{width:6px;height:6px;border-radius:50%;background:var(--c-golden);box-shadow:0 0 7px var(--c-golden-glow);flex:none;}
.sa-countdown .ph{font:600 11px var(--font-sans);letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,206,122,0.72);}
.sa-countdown .bar{width:1px;height:13px;background:rgba(255,176,32,0.26);flex:none;}
.sa-countdown .ct{font-family:var(--font-mono);font-weight:500;font-size:13.5px;font-variant-numeric:tabular-nums;letter-spacing:0.01em;color:#ffce7a;}
/* Verdict du soir dans le hero : mêmes paliers 75/50 que partout (Scale.php). */
.sa-countdown .ct.is-good{color:var(--score-good);}
.sa-countdown .ct.is-mid{color:var(--score-mid);}
.sa-countdown .ct.is-bad{color:var(--score-bad);}
/* Une fois la position connue, l'accroche n'invite plus : elle dit de quel ciel
   parle la page. C'est la réponse à « est-ce que ça parle de moi ? », elle se
   lit donc d'un coup d'œil. Le libellé tient dans un seul enfant, sinon le
   gap:10px du flex écarte chaque mot ; nowrap saute, sinon « Villefranche-de-
   Rouergue » déborde de l'écran. */
.sa-eyebrow.is-here{font-size:18px;line-height:1.3;white-space:normal;margin-bottom:14px;align-items:baseline;}
.sa-eyebrow.is-here .tick{align-self:center;flex:none;}
.sa-eyebrow.is-here strong{font-size:23px;font-weight:400;font-style:normal;letter-spacing:-0.012em;color:var(--c-text-primary);}
.sa-eyebrow strong{font-weight:400;font-style:normal;color:var(--c-text-primary);}
.sa-privacy{margin:12px 0 0;display:inline-flex;align-items:center;gap:8px;font:400 12.5px/1.4 var(--font-sans);color:var(--c-text-muted);}
.sa-privacy svg{flex:none;opacity:0.85;}

/* section heads + CTA */
/* flex-wrap : .sa-sec-meta est nowrap — un libellé long (« toutes les dix
   minutes, quatre distances », page monument) débordait de 43 px du viewport
   mobile au lieu de passer sous le titre (mesuré au tour du 2026-08-03). */
.sa-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:0 0 18px;}
.sa-sec-title{margin:0;font:600 22px/1.2 var(--font-sans);letter-spacing:-0.01em;color:var(--c-text-primary);}
.sa-sec-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(176,200,232,0.6);white-space:nowrap;}
.sa-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:50px;padding:14px 17px;border:1px solid var(--c-border-strong);border-radius:var(--r-md);color:var(--c-text-primary);text-decoration:none;font:500 14px var(--font-sans);}
.sa-cta .ar{display:flex;color:var(--c-golden);}
/* Bouton d'app : label et flèche centrés ensemble. La flèche dans son carré
   détaché, collée au bord droit, était une grammaire de CTA de landing web. */
.sa-cta.solid{position:relative;overflow:hidden;justify-content:center;min-height:54px;padding:0 20px;background:var(--c-golden);border:1px solid #ffc24d;border-radius:12px;color:#1d1305;font-weight:600;box-shadow:0 6px 22px rgba(150,95,8,0.20);}
.sa-cta .cta-label{font:600 16px var(--font-sans);letter-spacing:-0.01em;}
.sa-cta .cta-end{display:inline-flex;align-items:center;gap:11px;flex:none;}
.sa-cta .cta-time{font-family:var(--font-mono);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums;color:rgba(29,19,5,0.62);}
.sa-cta .cta-arrow{display:inline-flex;align-items:center;justify-content:center;color:#1d1305;opacity:0.72;}
/* Second choix du hero : un lien, pas un bouton. Deux boutons pleine largeur
   empilés donnaient deux actions de même poids, donc aucune hiérarchie. */
.sa-hero-alt{display:flex;width:fit-content;align-items:center;gap:6px;margin-top:12px;min-height:44px;color:var(--c-text-secondary);text-decoration:none;font:500 14px var(--font-sans);}
.sa-hero-alt:hover{color:var(--c-text-primary);}
.sa-hero-alt .loc-ico{color:var(--c-text-muted);display:flex;}
.sa-cta .shimmer{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:12px;}
.sa-cta .shimmer::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.42) 50%,transparent 100%);transform:translateX(-160%);animation:saShimmer 4.6s ease-in-out infinite;}
@keyframes saShimmer{0%{transform:translateX(-160%)}60%,100%{transform:translateX(360%)}}
.sa-cta.center{justify-content:center;gap:11px;}
.sa-cta .loc-ico{display:flex;color:var(--c-text-muted);}

/* forecast strip */
.sa-forecast{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
.sa-fc{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px 12px;background:rgba(14,18,38,0.6);border:1px solid rgba(255,255,255,0.07);border-radius:13px;text-decoration:none;}
.sa-fc .fd{font:500 11px var(--font-mono);letter-spacing:0.06em;color:rgba(176,200,232,0.6);}
.sa-fc .fs{font:500 26px var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1;color:#f0a890;}
.sa-fc .ft{font:400 9px var(--font-mono);color:rgba(176,200,232,0.35);}
.sa-fc.peak{background:rgba(255,176,32,0.10);border-color:rgba(255,176,32,0.45);box-shadow:0 0 22px rgba(255,176,32,0.10);}
.sa-fc.peak .fd{color:rgba(255,206,122,0.85);}
.sa-fc.peak .fs{color:#ffce7a;}
.sa-fc.peak .ft{color:rgba(255,206,122,0.5);}

/* verticals (maillage SEO, version app) */
.ha-verts{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ha-vert{display:flex;flex-direction:column;padding:20px 20px 18px;background:rgba(10,13,30,0.66);border:1px solid rgba(255,255,255,0.07);border-radius:16px;text-decoration:none;}
.ha-vert .acc{width:30px;height:3px;border-radius:2px;margin-bottom:16px;}
.ha-vert h3{margin:0 0 10px;font-family:var(--font-display);font-weight:400;font-size:23px;line-height:1.05;color:rgba(232,244,255,0.96);}
.ha-vert h3 em{font-style:italic;}
.ha-vert p{margin:0 0 16px;font:400 14px/1.5 var(--font-sans);color:rgba(176,200,232,0.72);}
.ha-vert .lk{margin-top:auto;font:500 14px var(--font-sans);color:var(--c-golden);}

/* world band (ailleurs sur la terre) */
.ha-band{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ha-bandcard{position:relative;border-radius:16px;overflow:hidden;min-height:158px;display:flex;flex-direction:column;justify-content:space-between;padding:16px 16px 15px;text-decoration:none;border:1px solid var(--c-border-strong);box-shadow:0 12px 30px rgba(10,12,32,0.45);}
.ha-bandcard .cc{font:600 11px var(--font-mono);letter-spacing:0.1em;color:rgba(228,240,255,0.78);}
.ha-bandcard .live{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--font-mono);letter-spacing:0.1em;color:#fff;}
.ha-bandcard .live .d{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;}
.ha-bandcard .bc-foot{display:flex;flex-direction:column;}
.ha-bandcard .nm{font-family:var(--font-display);font-size:26px;color:#fff;line-height:1.05;}
.ha-bandcard .rw{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:8px;font:400 13px var(--font-mono);color:rgba(255,255,255,0.82);}

/* colophon */
.sa-colophon{margin-top:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,0.10);text-align:center;display:flex;flex-direction:column;align-items:center;}
.sa-colophon .star{color:var(--c-golden);font-size:22px;line-height:1;margin-bottom:14px;}
.sa-colophon .sig{margin:0 0 20px;font-family:var(--font-display);font-style:italic;font-size:23px;letter-spacing:-0.01em;color:rgba(228,240,255,0.92);}
/* La note technique passe en dernier et en plus petit : c'est une mention de
   bas de page, pas un rang de navigation. Elle était au même poids que les
   liens, donc à traverser pour atteindre « Confidentialité ». */
.sa-colophon .fine{margin:24px auto 0;font-family:var(--font-sans);font-size:13px;color:rgba(176,200,232,0.5);max-width:52ch;line-height:1.6;}
/* max-width : sans elle, 7 liens centrés bouclaient en 6 + 1, et le lien
   orphelin au centre avait l'air d'un accident. */
.ha-footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;max-width:30rem;}
.ha-footlinks.secondary{margin-top:14px;}
.ha-footlinks a{font:400 15px var(--font-sans);color:rgba(200,222,248,0.8);text-decoration:none;padding:0;}
.ha-footlinks.secondary a{font-size:13.5px;color:rgba(176,200,232,0.55);}
.ha-footlinks a:hover{color:var(--c-golden);}

.sa-mt-m{margin-top:24px;}
.sa-mt-l{margin-top:46px;}

/* ============================================================
   PAGE VILLE (golden-hour & verticaux frères) — app v3
   ============================================================ */
.ha-breadcrumb{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-text-muted);padding:18px 0 0;display:flex;gap:8px;flex-wrap:wrap;}
.ha-h1{margin:6px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(40px,11vw,60px);line-height:1.02;letter-spacing:-0.012em;color:var(--c-text-primary);text-wrap:balance;}
.ha-h1 em{font-style:italic;color:var(--c-golden);}
.ha-lede{margin:14px 0 0;font-family:var(--font-display);font-style:italic;font-weight:400;font-size:17px;line-height:1.4;color:var(--c-text-secondary);max-width:54ch;text-wrap:pretty;}
.ha-citscore{display:flex;align-items:flex-end;gap:2px;margin:12px 0 0;line-height:0.84;}
.ha-citscore .n{font-family:var(--font-mono);font-weight:500;font-size:64px;line-height:0.82;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;color:var(--c-golden);}
.ha-citscore .n.is-good{color:var(--score-good);}
.ha-citscore .n.is-mid{color:var(--score-mid);}
.ha-citscore .n.is-bad{color:var(--score-bad);}
.ha-citscore .t{font-family:var(--font-mono);font-size:18px;color:var(--c-text-muted);padding-bottom:0.2em;}

/* heures clés */
.hk{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:520px){.hk{grid-template-columns:repeat(4,1fr);}}
.hk-card{background:rgba(10,13,30,0.6);border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;gap:7px;}
.hk-card.accent{background:var(--c-golden-dim);border-color:rgba(255,176,32,0.34);}
.hk-card dt{font-family:var(--font-mono);font-weight:600;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--c-text-muted);}
.hk-card.accent dt{color:rgba(255,206,122,0.7);}
.hk-card dd{margin:0;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;color:var(--c-text-primary);}
.hk-card dd small{font-family:var(--font-mono);font-size:11px;color:var(--c-text-muted);}
.hk-card.accent dd{color:var(--c-golden);}

/* orientation */
.orient{display:flex;flex-wrap:wrap;gap:10px;}
.orient .o{flex:1;min-width:160px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:14px;box-shadow:var(--elev-card);}
.orient .o dt{font-family:var(--font-sans);font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--c-text-muted);}
.orient .o dd{margin:6px 0 0;font-family:var(--font-display);font-style:italic;font-size:18px;color:var(--c-text-primary);}
.orient .o dd .az{font-family:var(--font-mono);font-style:normal;font-size:13px;color:var(--c-text-muted);margin-left:6px;}

/* viewpoints (liste app) */
.ha-vps{display:flex;flex-direction:column;gap:11px;}
.ha-vp{display:grid;grid-template-columns:1fr auto;gap:5px 14px;align-items:center;padding:13px 15px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);text-decoration:none;box-shadow:var(--elev-card);}
.ha-vp .nm{grid-column:1;font:600 15px var(--font-sans);color:var(--c-text-primary);}
.ha-vp .mt{grid-column:1;font:400 12px var(--font-mono);color:var(--c-text-muted);}
.ha-vp .sc{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--font-mono);font-weight:500;font-size:28px;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;color:var(--c-golden);}
.ha-vp .sc.is-good{color:var(--score-good);}
.ha-vp .sc.is-mid{color:var(--score-mid);}
.ha-vp .sc.is-bad{color:var(--score-bad);}

/* contexte local (prose unique par ville) */
.ha-prose p{margin:0 0 12px;font-family:var(--font-sans);font-size:14.5px;line-height:1.75;color:var(--c-text-secondary);max-width:62ch;text-wrap:pretty;}
.ha-prose p:last-child{margin-bottom:0;}

/* faq (contenu visible = schema FAQPage) */
.ha-faq details{border:1px solid var(--c-border);border-radius:12px;background:rgba(10,13,30,0.5);margin-bottom:8px;overflow:hidden;}
.ha-faq details[open]{border-color:rgba(255,176,32,0.22);}
.ha-faq summary{padding:16px 18px;cursor:pointer;font:500 15px var(--font-sans);color:rgba(228,240,255,0.9);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.ha-faq summary::-webkit-details-marker{display:none;}
.ha-faq summary::after{content:"+";font-family:var(--font-mono);font-size:22px;font-weight:400;line-height:1;color:var(--c-text-muted);flex:none;transition:transform .3s ease,color .3s ease;}
.ha-faq details[open] summary::after{transform:rotate(45deg);color:var(--c-golden);}
.ha-faq .answer{margin:0;padding:0 18px 16px;font:400 14px/1.7 var(--font-sans);color:var(--c-text-secondary);}

/* liens internes (maillage SEO) */
.ha-links{display:flex;flex-direction:column;gap:14px;}
.ha-links .grp{display:flex;flex-direction:column;gap:8px;}
.ha-links .cap{font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--c-text-muted);}
.ha-links .pills{display:flex;flex-wrap:wrap;gap:8px;}
.ha-links a{padding:7px 13px;border:1px solid var(--c-border-strong);border-radius:999px;font:500 12.5px var(--font-sans);color:var(--c-text-secondary);text-decoration:none;}
.ha-links a:hover{border-color:var(--c-golden);color:var(--c-golden);}

/* ============================================================
   VERTICAUX FRÈRES — accent par vertical (pages ville app v3)
   La nav (header/tabbar) reste dorée ; seul le contenu .ha est teinté.
   ============================================================ */
.ha-sunrise{--c-golden:#f0a890;--c-golden-dim:rgba(240,168,144,0.14);--c-golden-glow:rgba(240,168,144,0.30);}
.ha-sunrise .hk-card.accent{border-color:rgba(240,168,144,0.45);}
.ha-moon{--c-golden:#c8d4f0;--c-golden-dim:rgba(200,212,240,0.14);--c-golden-glow:rgba(200,212,240,0.30);}
.ha-moon .hk-card.accent{border-color:rgba(200,212,240,0.45);}
.ha-twilight{--c-golden:#8ab4f8;--c-golden-dim:rgba(138,180,248,0.14);--c-golden-glow:rgba(138,180,248,0.30);}
.ha-twilight .hk-card.accent{border-color:rgba(138,180,248,0.45);}

/* lune décroissante — miroir du croissant (le limbe éclairé passe à gauche) */
.sa-moon.wane{transform:scaleX(-1);}

/* hero lune (page ville moon) */
.ha-moonhero{display:flex;align-items:center;gap:24px;margin:20px 0 0;}
.ha-moonhero .ph{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:23px;line-height:1.15;color:var(--c-text-primary);}
.ha-moonhero .ag{font:400 11.5px var(--font-mono);color:var(--c-text-muted);margin-top:7px;}

/* calendrier lunaire du mois (page ville moon) */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;}
.mcal-day{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 3px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--elev-card);}
.mcal-day.today{border-color:rgba(200,212,240,0.55);background:rgba(200,212,240,0.10);}
.mcal-day .d{font:500 10px var(--font-mono);color:var(--c-text-muted);font-variant-numeric:tabular-nums;}
.mcal-day.today .d{color:var(--c-golden);}
.mcal-day .sa-moon{filter:none;}
.mcal-day .il{font:400 9px var(--font-mono);color:var(--c-text-muted);}
@media(max-width:430px){.mcal{gap:4px;}.mcal-day .il{display:none;}}

/* les trois crépuscules (page ville twilight) */
.twi{display:flex;flex-direction:column;gap:11px;}
.twi-phase{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:15px 17px;box-shadow:var(--elev-card);}
.twi-phase .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px;}
.twi-phase .nm{font:600 13px var(--font-sans);letter-spacing:0.05em;text-transform:uppercase;color:var(--c-text-primary);}
.twi-phase .ang{font:400 11px var(--font-mono);color:var(--c-text-muted);}
.twi-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;}
.twi-row .lb{font:400 13px var(--font-sans);color:var(--c-text-secondary);}
.twi-row .tm{font:500 17px var(--font-mono);font-variant-numeric:tabular-nums;color:var(--c-text-primary);}
.twi-row .tm em{font-style:normal;font-size:10.5px;color:var(--c-text-muted);margin-left:5px;}

/* ============================================================
   LISTE DES SPOTS — cartes .sa-spot (maquette « 2 · Liste des
   spots », portée depuis preview/skyatlas.css)
   ============================================================ */
.sa-spots-cap{display:flex;align-items:center;gap:8px;margin:0 0 12px;font:500 11px var(--font-mono);letter-spacing:0.03em;color:rgba(176,200,232,0.55);}
.sa-spots-cap .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-golden);box-shadow:0 0 8px var(--c-golden-glow);}
.sa-spots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.sa-spot{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:13px;
  color:var(--c-text-primary);text-decoration:none;
  transition:background-color 200ms ease,border-color 200ms ease;
}
.sa-spot:hover{background:rgba(255,176,32,0.07);border-color:rgba(255,176,32,0.28);}
.sa-thumb{
  flex:none;width:44px;height:44px;border-radius:34%;
  display:flex;align-items:center;justify-content:center;color:#1d1305;
}
.sa-thumb.is-good{background:#ffb020;}
.sa-thumb.is-mid{background:#e8a878;}
.sa-thumb.is-bad{background:#c98a72;}
.sa-thumb-type{display:flex;align-items:center;justify-content:center;}
.sa-thumb-type-svg{width:23px;height:23px;}
.sa-spot-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sa-spot-name{font:500 15px var(--font-sans);color:rgba(228,240,255,0.95);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sa-spot-meta{font:500 12px var(--font-mono);color:rgba(176,200,232,0.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sa-spot-meta .m{color:rgba(176,200,232,0.35);margin:0 5px;}
.sa-spot-score{flex:none;font-family:var(--font-mono);font-weight:600;font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-0.02em;line-height:1;}
.sa-spot-score.is-good{color:#ffce7a;}
.sa-spot-score.is-mid{color:#e8a878;}
.sa-spot-score.is-bad{color:#c98a72;}
.sa-spot-chev{flex:none;display:inline-flex;color:rgba(176,200,232,0.45);}

/* ============================================================
   HUBS pays & monde (app v3) — liste de villes, filtre pays
   ============================================================ */
.ha-citylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:2px 18px;}
.ha-citylist a{font:400 14px var(--font-sans);color:var(--c-text-secondary);text-decoration:none;padding:7px 0;border-bottom:1px dotted var(--c-border);display:block;}
.ha-citylist a:hover{color:var(--c-golden);}
.ha-search{display:flex;align-items:center;gap:10px;padding:11px 16px;border:1px solid var(--c-border-strong);border-radius:999px;background:var(--c-surface);}
.ha-search:focus-within{border-color:var(--c-golden);}
.ha-search input{flex:1;background:none;border:0;outline:none;color:var(--c-text-primary);font:400 14px var(--font-sans);}
.ha-search input::placeholder{color:var(--c-text-muted);}
.ha-countries{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;border-top:1px solid var(--c-border);}
.ha-country{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 2px;border-bottom:1px solid var(--c-border);color:var(--c-text-secondary);text-decoration:none;}
.ha-country:hover{color:var(--c-golden);}
.ha-country .nm{font:400 14.5px var(--font-sans);}
.ha-country .ct{font:400 11px var(--font-mono);color:var(--c-text-muted);font-variant-numeric:tabular-nums;}
.ha-country.hidden{display:none;}

/* 404 app */
.err-app{min-height:70dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 18px 100px;text-align:center;position:relative;z-index:1;}
.err-num{font-family:var(--font-mono);font-weight:500;font-size:clamp(90px,24vw,150px);line-height:0.9;letter-spacing:-0.05em;color:var(--c-golden);margin:0 0 18px;font-variant-numeric:tabular-nums;text-shadow:0 0 60px var(--c-golden-glow);}
.err-msg{font-family:var(--font-display);font-style:italic;font-size:19px;line-height:1.4;color:var(--c-text-secondary);margin:0 0 32px;max-width:34ch;text-wrap:pretty;}
.err-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}

/* ============================================================
   ÉTATS INTERACTIFS (audit taste-skill) — les cartes-liens .ha-*
   et .sa-* étaient inertes (ni hover, ni focus clavier visible).
   Pattern repris de ce-soir.css/spot.css : lift + bord doré +
   anneau de focus. L'accent suit --c-golden (donc le vertical).
   prefers-reduced-motion neutralise déjà les transitions (tokens.css).
   ============================================================ */
.sa-cta,.ha-vert,.ha-vp,.sa-fc,.ha-bandcard{
  transition:border-color 160ms ease,transform 160ms ease,box-shadow 160ms ease;}
.sa-cta:hover,.ha-vert:hover,.ha-vp:hover,.sa-fc:hover,.ha-bandcard:hover{
  border-color:var(--c-golden-glow);transform:translateY(-1px);box-shadow:var(--elev-card-hover);}
.sa-cta:active,.ha-vert:active,.ha-vp:active,.sa-fc:active,.ha-bandcard:active{
  transform:translateY(0) scale(0.99);}
.ha-iconbtn,.ha-loc,.app-loc{transition:color 160ms ease,border-color 160ms ease;}
.ha-iconbtn:hover{color:var(--c-text-primary);border-color:var(--c-border-strong);}
.ha-loc:hover,.app-loc:hover{border-color:var(--c-golden);}
.sa-cta:focus-visible,.ha-vert:focus-visible,.ha-vp:focus-visible,.sa-fc:focus-visible,
.ha-bandcard:focus-visible,.sa-spot:focus-visible,.ha-iconbtn:focus-visible,
.ha-loc:focus-visible,.app-loc:focus-visible{
  outline:2px solid var(--c-golden);outline-offset:2px;}

/* ============================================================
   VERDICT /100 — halo à la couleur de la valeur (currentColor)
   + le geste signature : le score se pose au montage.
   App.css est chargé sur toutes les pages app → bloc partagé.
   ============================================================ */
.ha-citscore .n,.cs-verdict-number,.sp-score-number{
  text-shadow:0 0 55px currentColor, 0 0 18px currentColor;}
@media (prefers-reduced-motion: no-preference){
  .ha-citscore .n,.cs-verdict-number,.sp-score-number{animation:score-bloom .45s ease-out both;}
}
@keyframes score-bloom{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ============================================================
   LE CIEL CE SOIR — décomposition de la prévision de beauté
   Barres honnêtes (cirrus / stratus / visibilité / humidité),
   hydratées depuis /api/v1/verdict. Cf. SunsetScorer::breakdown.
   ============================================================ */
.sp-sky{margin-top:28px;}
.sa-breakdown{display:flex;flex-direction:column;gap:11px;
  background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:0 4px 20px rgba(0,0,0,0.30);padding:15px 16px;}
.sa-bd-row{display:grid;grid-template-columns:1fr auto;gap:7px 12px;align-items:baseline;}
.sa-bd-label{font:500 13px var(--font-sans);color:var(--c-text-primary);}
.sa-bd-val{font:500 12px var(--font-mono);color:var(--c-text-secondary);
  font-variant-numeric:tabular-nums;text-align:right;}
.sa-bd-bar{grid-column:1/-1;height:5px;border-radius:3px;
  background:rgba(255,255,255,0.07);overflow:hidden;}
.sa-bd-bar i{display:block;height:100%;border-radius:3px;width:0;}
.sa-bd-bar i.is-good{background:var(--score-good);}
.sa-bd-bar i.is-mid{background:var(--score-mid);}
.sa-bd-bar i.is-bad{background:var(--score-bad);}
.sp-sky-source{margin-top:9px;font:400 12px var(--font-sans);color:var(--c-text-muted);}
.sp-sky-source:empty{display:none;}
@media (prefers-reduced-motion: no-preference){
  .sa-bd-bar i{transition:width .5s cubic-bezier(.22,1,.36,1);}
}

/* ============================================================
   FILTRES SPOTS — chips de filtre sur la liste des points de vue
   (viewpoints-hub). Affichés seulement si JS actif. Cibles ≥44px.
   ============================================================ */
.sa-filters{display:flex;gap:8px;overflow-x:auto;padding:4px 0;margin-top:16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.sa-filters::-webkit-scrollbar{display:none;}
.sa-chip{flex:none;display:inline-flex;align-items:center;gap:6px;
  padding:0 15px;min-height:44px;border:1px solid var(--c-border-strong);
  border-radius:999px;background:transparent;font:500 13px var(--font-sans);
  color:var(--c-text-secondary);cursor:pointer;white-space:nowrap;
  transition:color 160ms ease,border-color 160ms ease,background 160ms ease;}
.sa-chip:hover{border-color:var(--c-golden);}
.sa-chip.on{background:var(--c-golden-soft);border-color:var(--c-golden);color:var(--c-golden);}
.sa-chip .cv{font-family:var(--font-mono);color:var(--c-text-muted);}
.sa-chip.on .cv{color:var(--c-golden);}
.sa-chip:focus-visible{outline:2px solid var(--c-golden);outline-offset:2px;}
.sa-vp-empty{margin-top:18px;padding:22px 16px;text-align:center;
  font:400 14px var(--font-sans);color:var(--c-text-muted);
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);}