/* Charte du site Sky Dominion : page d'accueil et pages légales.
   Jetons repris du design system de l'app (docs/phase-4-design-system.md). */
:root{
  /* Nuit de briefing : ardoise, ambre de l'écusson du jeu, orange des
     réacteurs, vert des indicateurs. Un seul thème, sombre, comme le jeu. */
  --paper:#0D1015; --paper-2:#131820; --sheet:#19202A; --ink:#EEF1F5; --ink-2:#B9C2CE; --muted:#8C97A6;
  --line:#232B37; --line-2:#334054;
  --terra:#F2B23A; --terra-ink:#F5C15A; --terra-wash:#2A2213; --rose:#F07C24;
  --sage:#62D6A2; --sage-wash:#11281F; --honey:#F2B23A; --honey-wash:#2A2213;
  --night:#080A0E;
  --shadow:none; --shadow-lg:0 30px 60px -30px rgba(0,0,0,.8);
  --serif:'Black Ops One','Impact',system-ui,sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --wrap:1180px; --gut:clamp(16px,4vw,40px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--terra-wash);color:var(--ink)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:6px}
html[lang="fr"] [data-lang="en"],html[lang="en"] [data-lang="fr"]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em}
.kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink)}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:.01em;margin:0;color:var(--ink)}
h2{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.04}
h2 em,h1 em{font-style:normal;color:var(--terra)}
p{margin:0}
.lede{font-size:clamp(1.05rem,1.4vw,1.2rem);color:var(--ink-2);max-width:34em}

/* ── Header ── */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.brand img{width:34px;height:33px}
.brand span{font-family:var(--serif);font-size:1.2rem;letter-spacing:.04em}
.nav{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;font-size:.94rem;color:var(--ink-2);transition:color .2s}
.nav a:hover{color:var(--terra-ink)}
.lang{display:flex;border:1px solid var(--line-2);border-radius:999px;padding:3px}
.lang button{all:unset;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;padding:5px 9px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.94rem;border-radius:999px;padding:11px 18px;transition:transform .2s,background .2s,color .2s}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--terra);color:#16110A}
.top .btn{padding:9px 16px;font-size:.88rem}
@media (max-width:900px){.nav{display:none}}
@media (max-width:520px){.top .btn{display:none}.top .wrap{gap:14px}}


/* Pied de page */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:56px 0 34px;font-size:.92rem;color:var(--ink-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.foot-grid h4{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot-grid a{text-decoration:none}
.foot-grid a:hover{color:var(--terra-ink);text-decoration:underline}
.foot-brand p{max-width:26em;margin-top:12px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2);color:var(--muted)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* ── Défilement fluide (Lenis 1.3, styles recommandés) ── */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}

/* ── Bouton de retour en haut ── */
.to-top{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:30;width:48px;height:48px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:var(--ink);color:var(--paper);box-shadow:var(--shadow);opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1),background .2s}
.to-top svg{width:20px;height:20px;transition:transform .25s}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--terra-ink);color:#fff}
.to-top:hover svg{transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid var(--terra);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s}.to-top,.to-top.is-visible{transform:none}}

/* ── Menu burger (900 px et moins) ── */
.burger{display:none;position:relative;flex:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;padding:0}
.burger span{position:absolute;left:13px;width:16px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .2s}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger:hover{border-color:var(--terra);color:var(--terra-ink)}
@media (max-width:900px){.burger{display:block}}
/* Pendant le menu : on bloque le défilement sur la racine seulement. Le
   bloquer aussi sur body faisait de body un conteneur de défilement :
   l'en-tête collant (et la croix de fermeture) sortait alors de l'écran
   quand on ouvrait le menu plus bas dans la page. L'en-tête est en plus
   épinglé en haut tant que le menu est ouvert. */
html.menu-open{overflow:hidden}
html.menu-open .top{position:fixed;left:0;right:0;top:0;background:var(--paper);border-bottom-color:var(--line)}
html.menu-open .to-top{opacity:0;pointer-events:none}
.menu-panel{position:fixed;left:0;right:0;top:68px;bottom:0;z-index:19;background:var(--paper);padding:20px var(--gut) calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(-10px);transition:opacity .3s cubic-bezier(.2,.7,.2,1),transform .3s cubic-bezier(.2,.7,.2,1)}
.menu-panel.is-open{opacity:1;transform:none}
.menu-panel[hidden]{display:none}
.menu-links{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.menu-links li{border-bottom:1px solid var(--line)}
.menu-links a{display:flex;align-items:baseline;gap:16px;padding:18px 2px;text-decoration:none;color:var(--ink);font-family:var(--serif);font-size:clamp(1.5rem,6vw,2rem);line-height:1.1;letter-spacing:.02em;transition:color .2s,padding .25s}
.menu-links a:hover{color:var(--terra-ink);padding-left:8px}
.menu-links .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--terra-ink);transform:translateY(-.35em)}
.menu-play{margin-top:26px;justify-content:center;padding:15px 18px;font-size:1rem}
.menu-legal{margin-top:auto;padding-top:30px;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.9rem;color:var(--ink-2)}
.menu-legal-title{flex-basis:100%;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.menu-legal a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
@media (prefers-reduced-motion:reduce){.menu-panel,.burger span{transition:none}}
@media (min-width:901px){.menu-panel{display:none!important}}

/* ── En-tête stable : chaque libellé garde la largeur du plus long de ses
   deux langues ; la langue cachée garde sa place sans s'afficher. Sans cela,
   « Le carnet » / « Health record » faisait bouger tout l'en-tête. ── */
.top .nav a,.top .btn{display:inline-grid;justify-items:center;align-items:center}
.top .nav a > [data-lang],.top .btn > [data-lang]{grid-area:1/1}
html[lang="fr"] .top .nav a > [data-lang="en"],html[lang="en"] .top .nav a > [data-lang="fr"],
html[lang="fr"] .top .btn > [data-lang="en"],html[lang="en"] .top .btn > [data-lang="fr"]{display:inline!important;visibility:hidden}
/* …sans annuler le masquage du bouton Télécharger sur téléphone. */
@media (max-width:520px){.top .btn{display:none}}