/* Sidéral Time — socle commun à toutes les pages (02_DESIGN_SYSTEM §1 à §5). */
:root{
  --bg:#0E1230; --bg-deep:#090A20; --bg-2:#1C224E;
  --ink:#ECE7D8; --ink-soft:#A9AEC6; --ink-dim:#787D98;
  --brass:#C2A15A; --brass-hi:#D8BC77; --brass-dim:rgba(194,161,90,.45);
  --line:rgba(236,231,216,.16);
  --veil:rgba(9,10,32,.42);
  --veil-soft:linear-gradient(180deg, rgba(9,10,32,.55), rgba(9,10,32,0));
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:'Mulish', system-ui, -apple-system, sans-serif;
  --wrap:1240px; --gutter:clamp(16px, 4vw, 48px);
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:40px; --s6:64px; --s7:104px;
  --r:2px;
  --side:max(var(--gutter), env(safe-area-inset-left, 0px));
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 1.02rem/1.7 var(--sans);overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(3.2rem, 7vw, 6rem);line-height:1.02}
h2{font-size:clamp(2rem, 4vw, 2.8rem);line-height:1.1}
h3{font-size:1.5rem}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.tnum{font-variant-numeric:tabular-nums}
.eyebrow{font:500 .76rem/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--brass)}

/* Nav (§5.1) */
.nav{position:fixed;inset:0 0 auto;z-index:20;height:70px;display:flex;align-items:center;gap:var(--s5);
  padding-inline:var(--side);transition:background .4s, backdrop-filter .4s}
.nav.scrolled{background:rgba(14,18,48,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{font:500 1.55rem/1 var(--serif);text-decoration:none;color:var(--ink);white-space:nowrap}
.brand i{color:var(--brass);font-weight:400}
.links{display:flex;gap:var(--s4);margin-inline:auto}
.links a{font:400 .82rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;color:var(--ink);padding-block:6px;
  background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat;transition:background-size .3s}
.links a:hover,.links a:focus-visible{background-size:100% 1px}
/* Page courante : laiton et soulignement permanent (posé par scripts/partials.mjs). */
.links a[aria-current="page"]{color:var(--brass-hi);background-size:100% 1px}
.langs{display:flex;align-items:center;gap:6px;color:var(--ink-dim);font-size:.78rem}
.langs button{font:400 .78rem/1 var(--sans);letter-spacing:.08em;color:var(--ink-soft);background:none;border:0;padding:6px 2px;cursor:pointer}
.langs button[aria-current="true"]{color:var(--brass-hi)}
.menu-btn{display:none;width:34px;height:34px;background:none;border:0;padding:0;cursor:pointer;flex-direction:column;justify-content:center;gap:7px}
.menu-btn span{display:block;height:1px;background:var(--ink)}

/* Boutons (§5.4) */
.btn{display:inline-block;background:var(--brass);color:var(--bg-deep);font:500 .9rem/1 var(--sans);letter-spacing:.02em;
  padding:14px 26px;border-radius:var(--r);text-decoration:none;transition:background .25s}
.btn:hover,.btn:focus-visible{background:var(--brass-hi)}
.calm{color:var(--ink);text-decoration:none;font-size:.92rem;border-bottom:1px solid var(--brass);padding-bottom:2px;width:fit-content}
.calm:hover,.calm:focus-visible{color:var(--brass-hi)}
/* Sortie en fin de page (/ciel/, lot 3 ; pages de texte, lot 4e) : phrase + lien calme. */
.note-pied{color:var(--ink-soft);border-top:1px solid var(--brass-dim);padding-top:var(--s4);max-width:65ch}
.note-pied p{color:var(--ink-soft)}
.note-pied p + p{margin-top:var(--s2)}

/* Pied de page */
.foot{border-top:1px solid var(--line);padding:var(--s5) var(--side);display:grid;gap:var(--s2);
  font-size:.78rem;color:var(--ink-dim);text-align:center}
.foot a{color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line);text-decoration-thickness:1px;text-underline-offset:3px}
.foot a:hover{color:var(--brass-hi)}

/* Apparition au scroll (§6) : depuis un état visible, jamais opacity 0 au repos. */
.reveal.pending{opacity:.35;transform:translateY(10px)}
.reveal{transition:opacity .9s ease, transform .9s ease}

@media (max-width:960px){
  .links{position:fixed;inset:70px 0 auto;flex-direction:column;gap:0;padding:var(--s3) var(--side) var(--s4);
    background:rgba(14,18,48,.94);backdrop-filter:blur(10px);display:none}
  .links.open{display:flex}
  .links a{font-size:1rem;padding-block:14px;border-bottom:1px solid var(--line);background:none}
  .menu-btn{display:flex}
  .langs{margin-left:auto}
}
@media (max-width:640px){
  body{font-size:1rem;line-height:1.65}
  h1{font-size:2.6rem} h2{font-size:1.8rem} h3{font-size:1.35rem}
  .brand{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.pending{transition:none;opacity:1;transform:none}
}
/* Lot 13 : message de panne de script (garde.js), masqué dès que le témoin est posé. */
.garde{position:fixed;left:0;right:0;bottom:0;z-index:50;margin:0;padding:14px 16px;background:var(--bg-deep);border-top:1px solid var(--brass);color:var(--brass-hi);font:500 .92rem/1.45 var(--sans);text-align:center}
html[data-demarre] .garde{display:none}