/* Accueil : le hero est l'instrument (100svh), puis trois blocs. */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--bg-deep);isolation:isolate}

/* La scène garde le ratio de l'image et la recadre comme object-fit:cover avec
   un ancrage vertical à 60 % (§4). La Lune et les annotations, dessinées dans le
   même viewBox, suivent donc exactement le paysage. */
.stage{position:absolute;z-index:-2;left:50%;top:60%;width:max(100%, calc(100svh * 1672 / 941));
  aspect-ratio:1672/941;transform:translate(-50%,-60%) translateY(var(--parallax, 0px))}
.stage img{display:block;width:100%;height:100%}
.stage svg.sky{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sky.portrait{display:none}

/* Voiles : 28 % haut (titre, nav), 18 % bas (CTA). */
.hero::before,.hero::after{content:"";position:absolute;inset-inline:0;z-index:-1;pointer-events:none}
.hero::before{top:0;height:28%;background:var(--veil-soft)}
.hero::after{bottom:0;height:18%;background:linear-gradient(0deg, rgba(9,10,32,.62), rgba(9,10,32,0))}

/* Cormorant a des chiffres elzéviriens par défaut : « 11° » s'y lit « I I° ».
   Toute valeur astronomique passe en chiffres alignés. */
.ann .v,.readings b,.tnum{font-variant-numeric:lining-nums tabular-nums}

/* Annotations célestes (§5.2) */
.ann{font-family:var(--serif)}
.ann text{paint-order:stroke;stroke:rgba(9,10,32,.4);stroke-width:4px;stroke-linejoin:round}
.ann .k{font:500 12px var(--sans);letter-spacing:.16em;fill:var(--brass-hi)}
.ann .v{font-size:28px;fill:var(--ink)}
.ann .s{font-size:18px;fill:var(--ink-soft);font-style:italic}
.ann line{stroke:var(--brass);stroke-width:.8;opacity:.8}
.ann .dot{fill:var(--brass-hi)}

/* Voile derrière un bloc de texte sur image (--veil), diffus, sans bord. */
.hero-head,.hero-foot{position:absolute;inset-inline:0;display:grid;justify-items:center;gap:var(--s3);
  padding-inline:var(--side);text-align:center}
.hero-head::before,.hero-foot::before{content:"";position:absolute;inset:-12% 8%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, var(--veil), rgba(9,10,32,0))}
/* Desktop : bloc titre à gauche sous la nav (Lune au-dessus du soleil, maquette 00), la Voie lactée reste libre à droite. */
.hero-head{top:calc(70px + 9svh);right:auto;width:min(620px, 100%);justify-items:start;text-align:left;gap:var(--s4)}
.hero-head h1{text-shadow:0 0 28px rgba(9,10,32,.45)}
.subtitle{max-width:36ch;font:400 clamp(1.2rem, 1.9vw, 1.5rem)/1.4 var(--serif);color:var(--ink);text-wrap:balance;
  text-shadow:0 0 18px rgba(9,10,32,.7)}

.hero-foot{bottom:max(var(--s4), env(safe-area-inset-bottom, 0px))}
.quote{margin:0;display:grid;justify-items:center;gap:6px}
.quote blockquote{margin:0}
.quote p{font:italic 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.35 var(--serif);color:var(--ink);white-space:nowrap;
  text-shadow:0 0 14px rgba(9,10,32,.9)}
.quote figcaption{font:500 .72rem/1.2 var(--sans);letter-spacing:.1em;color:var(--brass-hi);text-shadow:0 0 10px rgba(9,10,32,.9)}
.dataline{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;font-size:.78rem;color:var(--ink-soft);
  text-shadow:0 0 10px rgba(9,10,32,.9)}
.dataline [title]{cursor:help}
/* Lot 9, lot 17 : le lieu demande la position du navigateur sur place (sans JS : lien vers /ciel/). Discret, souligné au survol. */
.dataline .lieu{color:inherit;text-decoration:none;text-underline-offset:3px}
.dataline .lieu:hover,.dataline .lieu:focus-visible{text-decoration:underline}
.demo{font:500 .68rem/1 var(--sans);letter-spacing:.16em;color:var(--brass-hi);border:1px solid var(--brass-dim);
  padding:4px 7px;border-radius:var(--r);text-shadow:none}
.demo[hidden],.panne[hidden],.geo-msg[hidden],#lieuSuite[hidden]{display:none}
/* Pas de Lune sans phase réelle (lot 6) : ni sans JS, ni pendant une panne de /api/sky. */
.sky .moon{opacity:0;transition:opacity .6s ease}
[data-sky="live"] .sky .moon,[data-sky="demo"] .sky .moon{opacity:1}
.panne{flex-basis:100%;order:-1;color:var(--brass-hi)}
/* Lot 17 : refus ou échec de la position demandée depuis l'accueil, sous la ligne, renvoi vers /ciel/. */
.geo-msg{flex-basis:100%;color:var(--brass-hi)}
.geo-msg a{color:inherit;text-underline-offset:3px}

/* Équivalent texte : caché à l'œil sur grand écran, annotations visibles sur téléphone. */
.readings{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}

/* Trois blocs */
.blocks{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--side);display:grid;
  grid-template-columns:repeat(3, 1fr);gap:var(--s6)}
.blocks article{display:grid;align-content:start;gap:var(--s3);border-top:1px solid var(--brass-dim);padding-top:var(--s4)}
.blocks p{color:var(--ink-soft);max-width:65ch}

@media (max-width:960px){
  .blocks{grid-template-columns:1fr;gap:var(--s5);max-width:720px}
}
/* Téléphone : recomposition. Le haut du ciel portrait est le seul fond sombre et
   calme ; les annotations s'y posent à droite de la Lune (comme 05_lune-vraie,
   portrait), le titre dessous, le reste sur le bassin. */
@media (max-width:640px){
  .stage{aspect-ratio:941/1672;width:max(100%, calc(100svh * 941 / 1672))}
  .sky.landscape{display:none}
  .sky.portrait{display:block}
  .hero-head{top:calc(70px + 26svh);width:auto;right:0;gap:var(--s2)}
  .hero-head::before{inset:-20% -4% -10%}
  .subtitle{font-size:1.12rem}
  .readings{width:auto;height:auto;overflow:visible;clip-path:none;left:42%;right:var(--side);top:calc(70px + 4svh);
    display:grid;gap:10px}
  .readings div{display:grid;grid-template-columns:16px auto;column-gap:8px}
  .readings div::before{content:"";grid-row:1 / 3;width:16px;height:1px;background:var(--brass);opacity:.8;margin-top:.5em}
  .readings dt,.readings dd{grid-column:2}
  .readings dt{font:500 .68rem/1.2 var(--sans);letter-spacing:.16em;color:var(--brass-hi)}
  .readings dd{margin:0;display:grid;text-shadow:0 0 10px rgba(9,10,32,.9)}
  .readings b{font:400 1.2rem/1.2 var(--serif);color:var(--ink)}
  .readings span{font:italic 400 .9rem/1.3 var(--serif);color:var(--ink-soft)}
  .hero-foot{gap:var(--s3)}
  .hero-foot::before{inset:-6% -6% -4%}
  .quote p{white-space:normal;font-size:1.2rem}
  .quote p span{display:block}
  .dataline{gap:2px 14px;font-size:.74rem}
  .blocks{padding-block:var(--s6)}
}
@media (prefers-reduced-motion:reduce){.sky .moon{transition:none}}