/* Le ciel du jour : hero 65 vh, puis cinq blocs en chips et tableaux (02 §5.3). */
.hero{position:relative;height:65svh;min-height:420px;overflow:hidden;background:var(--bg-deep);isolation:isolate}
/* Ancrage vertical réglable (60 % au §4). Sur cette page (Ben, 29/10) : 10 % sur desktop,
   40 % sur téléphone, pour que la Lune de l'image 02 reste visible sous la nav. */
.stage{--ancre:10%;position:absolute;z-index:-2;left:50%;top:var(--ancre);width:max(100%, calc(65svh * 1672 / 941));
  aspect-ratio:1672/941;transform:translate(-50%, calc(var(--ancre) * -1)) 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}
.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);font-variant-numeric:lining-nums tabular-nums}
.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)}
.portrait .ann .k{font-size:17px}.portrait .ann .v{font-size:40px}.portrait .ann .s{font-size:26px}
.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:30%;background:linear-gradient(0deg, var(--bg), rgba(14,18,48,0))}

/* Aligné sur la colonne .wrap des sections. */
.hero-head{position:absolute;inset-inline:0;bottom:var(--s5);display:grid;gap:var(--s3);
  padding-inline:max(var(--side), calc((100% - var(--wrap)) / 2 + var(--side)))}
.hero-head h1{text-shadow:0 0 28px rgba(9,10,32,.5)}
.lead{max-width:56ch;color:var(--ink);text-shadow:0 0 14px rgba(9,10,32,.9)}

/* L'annotation LUNE est dessinée dans la scène (SVG) ; .ann-html en est l'équivalent texte, caché à l'œil. */

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--side)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* Lieu */
.lieu{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding-block:var(--s4);border-bottom:1px solid var(--line)}
.lieu b{font:500 1.3rem/1 var(--serif)}
.lieu form{display:flex;gap:var(--s2);align-items:center}
.lieu input{background:var(--bg-2);border:1px solid var(--line);color:var(--ink);font:300 .92rem var(--sans);padding:8px 12px;border-radius:var(--r);width:12rem}
.lieu input:focus{border-color:var(--brass);outline:none}
.calm-btn{background:none;border:0;border-bottom:1px solid var(--brass);color:var(--ink);font:300 .88rem var(--sans);padding:2px 0;cursor:pointer}
.calm-btn:hover,.calm-btn:focus-visible{color:var(--brass-hi)}
.villes{flex-basis:100%;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.villes button{background:none;border:0;color:var(--ink-soft);font:300 .88rem var(--sans);text-align:left;cursor:pointer;padding:4px 0}
.villes button:hover,.villes button:focus-visible{color:var(--brass-hi)}
.etat{flex-basis:100%;margin:0;color:var(--brass-hi);font-size:.86rem}

/* Sections */
.sections{display:grid;gap:var(--s6);padding-block:var(--s6) var(--s7)}
.sections section{display:grid;gap:var(--s4)}
.sections h2{font-size:clamp(1.7rem, 3vw, 2.2rem)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s3)}
.chip{border:1px solid var(--line);padding:10px 14px;display:grid;gap:4px;min-width:9rem;align-content:start}
.chip .k{font:500 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.chip .v{font:400 1.3rem/1.25 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.chip .s{font-size:.82rem;color:var(--ink-soft)}
.chip.vide .v{display:block;width:4rem;height:1px;margin-block:.65em;background:var(--brass-dim)}

.table-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.grahas{width:100%;border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}
.grahas th{font:500 .72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);text-align:left;padding:12px 14px 10px 0;white-space:nowrap}
.grahas td{padding:12px 14px 12px 0;border-top:1px solid var(--line);white-space:nowrap}
.grahas td:first-child,.grahas td:nth-child(2),.grahas td:nth-child(4){font:400 1.15rem/1.2 var(--serif)}
.grahas tr.lagna td{color:var(--brass-hi)}
.grahas td.vide::after{content:"";display:inline-block;width:2.5rem;height:1px;background:var(--brass-dim);vertical-align:middle}

/* Le ciel : diamant nord-indien + table (§5.2 : traits laiton 0.8 px, pas de fond). */
/* Bascule des noms (lot 4a bis) : l'option active porte le soulignement laiton et le laiton clair,
   l'inactive reste en ivoire simple ; ni bouton plein ni glissière. */
.bascule{margin:0 0 var(--s4);color:var(--ink-soft);font:300 .92rem var(--sans)}
.bascule button{background:none;border:0;border-bottom:1px solid transparent;color:var(--ink);font:inherit;padding:2px 0;margin:0 .1em;cursor:pointer}
.bascule button:hover{color:var(--brass-hi)}
.bascule button[aria-pressed="true"]{color:var(--brass-hi);border-bottom-color:var(--brass);cursor:default}
.bascule button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.bascule #nomsSep{margin:0 .35em;color:var(--brass)}
.ciel-grille{display:grid;grid-template-columns:minmax(280px, 420px) 1fr;gap:var(--s6);align-items:start}
.diamant{width:100%;height:auto;display:block;overflow:visible}
.diamant .traits *{fill:none;stroke:var(--brass);stroke-width:.8;opacity:.8;vector-effect:non-scaling-stroke}
.diamant .signes text{font:300 11px var(--sans);fill:var(--ink-dim);text-anchor:middle;dominant-baseline:middle}
.diamant .noms text{font:400 16px var(--serif);fill:var(--ink);text-anchor:middle;dominant-baseline:middle}
.diamant .noms text.lagna{fill:var(--brass-hi);font-style:italic}

/* Lot du 01/11 : mots du lexique (vāra, tithi, nakṣatra, graha) et leur définition sous le bloc. */
button.chip{font:inherit;color:inherit;background:none;text-align:left;cursor:pointer}
button.chip:hover,button.chip:focus-visible{border-color:var(--brass-dim)}
button.chip[aria-expanded="true"]{border-color:var(--brass)}
button.chip .v{text-decoration:underline dotted 1px var(--brass-dim);text-underline-offset:4px}
.grahas button.mot{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline dotted 1px var(--brass-dim);text-underline-offset:4px}
/* Lot 22 : le trait plein est réservé à la rétrogradation, partout sur la page ; pointillé = définition. */
.grahas .retro,.grahas button.mot.retro{text-decoration:underline solid 1px currentColor;text-underline-offset:4px}
.diamant .noms line.retro{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.diamant-fig{margin:0}
.diamant-fig .legende{margin-top:var(--s3);font:300 .82rem/1.4 var(--sans);color:var(--ink-dim);text-align:center}
.grahas button.mot:hover,.grahas button.mot[aria-expanded="true"]{color:var(--brass-hi);text-decoration-color:var(--brass)}
.chip.mot:focus-visible,.grahas button.mot:focus-visible,.mythe .calm-btn:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.lexique{max-width:65ch;border-left:1px solid var(--brass);padding:2px 0 2px var(--s3)}
.lexique p{margin:0;color:var(--ink-soft)}
.lexique p+p{margin-top:.6em}
/* Lot 19 : notation du tithi hors soulignement ; carré des deux mois en corps réduit. */
.chip .notation{display:inline-block;text-decoration:none}
.chip.deux .v{font-size:1rem;line-height:1.45}
.lexique .lex-nom{font:400 1.2rem/1.3 var(--serif);color:var(--ink);margin-right:.35em}

/* Qui tient le jour · Le visage du mois : deux colonnes, empilées sous 960 px. */
.mythe[hidden],.recit[hidden],.mythe .calm-btn[hidden]{display:none}
.mythe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);align-items:start}
.mythe .col{display:grid;gap:var(--s3);justify-items:start;min-width:0}
.sections .mythe h2.eyebrow{font:500 .76rem/1.5 var(--sans);margin:0}
.mythe .nom{margin:0;font:500 clamp(1.35rem, 2.4vw, 1.5rem)/1.25 var(--serif);color:var(--ink)}
.mythe .ligne{margin:-8px 0 0;font:italic 400 1.15rem/1.4 var(--serif);color:var(--ink-soft)}
.recit{display:grid;gap:var(--s3);max-width:65ch}
.recit p{margin:0}
/* Fiche de l'Āditya : texte d'adityasTable.js intact, sans ses titres ; la majuscule est typographique. */
.fiche p:not(.source)::first-letter{text-transform:uppercase}
/* Source de l'histoire : légende du DS (Mulish 300, .78rem, .76rem sous 640 px), repliée avec le récit. */
.recit p.source{font:300 .78rem/1.5 var(--sans);color:var(--ink-dim);overflow-wrap:break-word}

@media (max-width:640px){
  .stage{--ancre:40%;aspect-ratio:941/1672;width:max(100%, calc(65svh * 941 / 1672))}
  .sky.landscape{display:none}
  .sky.portrait{display:block}
  .hero::after{height:62%}
  .hero{height:auto;min-height:65svh;display:grid;align-content:end;gap:var(--s4);padding:calc(70px + var(--s5)) var(--side) var(--s4)}
  .hero-head{position:static;padding:0}
  .lieu input{width:100%}
  .grahas th,.grahas td{padding-right:10px}
  .grahas th{letter-spacing:.08em}
  .grahas td:first-child,.grahas td:nth-child(2),.grahas td:nth-child(4){font-size:1rem}
  .grahas td{font-size:.9rem}
  .grahas td:nth-child(4){white-space:normal}
  .lieu form{flex:1 1 100%}
  .recit p.source{font-size:.76rem}
}
@media (max-width:960px){
  .mythe{grid-template-columns:1fr;gap:var(--s5)}
  .ciel-grille{grid-template-columns:1fr;gap:var(--s5)}
  .diamant,.diamant-fig .legende{max-width:420px;margin-inline:auto}
}