/* Thème Nocturne : la vitrine reprend la direction artistique du simulateur Val-d'Ondine.
   Chargé après les feuilles du kit et site.css, il remplace leurs jetons et leurs formes.
   Couleurs relevées dans output/val-ondine-nocturne/src/nocturne.css et styles.css. */
:root{
  --void:#11161c;            --void-rgb:17,22,28;
  --panel:#171d23ee;
  --graphite:#171d23;
  --topbar:#171c22;
  --rim:#454f59;
  --signal:#e4bc84;          --signal-rgb:228,188,132;   /* sable du jeu : accent unique */
  --ice:#f2f4f6;             --ice-rgb:242,244,246;
  --mute:#b3bcc3;
  --faint:#5d6873;
  --warn:#e5bc79;            --warn-rgb:229,188,121;
  --crit:#ff9681;            --crit-rgb:255,150,129;
  --sim:#bfc9d0;             --sim-rgb:191,201,208;
  --line:#2c3640;
  --line-strong:#454f59;
  --line-dash:#2c3640;
  --f-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--void);
  color:var(--ice);
  font-family:var(--f-sans);
  line-height:1.6;
}
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #86c9fc;outline-offset:4px}

/* En-tête et pied : la barre du jeu. */
.site-header{max-width:none;min-height:72px;background:var(--topbar);border-bottom:1px solid #3a4854;padding-block:14px}
.brand-mark{border:1px solid var(--signal);border-radius:7px;clip-path:none;color:var(--signal)}
.brand-text{font-weight:700;letter-spacing:.01em}
.brand-text>span{font-family:var(--f-data);color:var(--mute)}
.primary-nav a,.language-switch a{font-size:12px;letter-spacing:.06em;font-weight:600;color:var(--mute)}
.primary-nav a:hover,.language-switch a:hover{color:var(--ice)}
.primary-nav a[aria-current=page]{color:var(--signal);border-bottom-color:var(--signal)}
.language-switch{border-left-color:#3a4854}
.site-footer{max-width:none;background:var(--topbar);border-top:1px solid #3a4854}
.site-footer a{color:var(--mute);font-size:13px}
.site-footer a:hover{color:var(--ice)}
.site-footer p{color:var(--mute);font-size:13px}
.footer-name{font-weight:600}

/* Typographie : Chakra Petch pour les titres, sans-serif pour le texte, libellés en capitales sable. */
.eyebrow{font-family:var(--f-sans);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--signal)}
h1,h2,h3{color:var(--ice)}

/* Accueil : écran « Take command » du jeu. */
.home-intro{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}
.intro-copy h1{font-size:clamp(48px,5.4vw,92px);letter-spacing:-.03em;margin-bottom:30px}
.intro-copy>p.hero-lead{font-size:clamp(16px,1.2vw,19px);line-height:1.7;color:#dbe1df;max-width:40ch;padding-top:22px;border-top:1px solid #8f825d}
.intro-copy .status-note{color:var(--mute);font-size:12px!important}
.status-note>span{color:var(--signal)}
.hero-actions{gap:18px 28px;margin-top:34px}
.button{min-height:50px;padding:13px 26px;border:0;border-radius:3px;background:var(--signal);color:#11161c;font-family:var(--f-sans);font-size:15px;font-weight:700;letter-spacing:0}
.button>span{font-size:20px}
.button.hud-action,.hud-chip{clip-path:none}
.button:hover{background:#ecca99;color:#11161c}
.button.hud-action:focus-visible{outline:2px solid #86c9fc;outline-offset:4px;box-shadow:none}
.text-link{font-size:14px;color:var(--mute)}
.text-link:hover{color:var(--ice)}

.sim-capture{min-width:0;margin:0}
.sim-frame{position:relative;overflow:hidden;border:1px solid var(--rim);border-radius:8px;background:var(--graphite);box-shadow:0 24px 60px #000a}
.sim-frame img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.sim-capture figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;padding:12px 2px 0;font-size:12px;line-height:1.5;color:var(--mute)}
.sim-capture figcaption strong{font-weight:600;color:var(--ice)}
.sim-tag{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border:1px solid var(--rim);border-radius:999px;font-family:var(--f-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sim)}

/* Trois idées : les panneaux graphite du jeu. */
.section-head{border-top-color:var(--line)}
.learning-grid{gap:18px}
.learning-grid article{padding:24px 24px 26px;border:1px solid var(--line);border-radius:7px;background:var(--graphite)}
.learning-grid article::before{display:none}
.learning-grid .step-number{font-size:18px;color:var(--signal)}
.learning-grid h3{font-size:24px}
.learning-grid p{font-size:14.5px;line-height:1.75;color:var(--mute)}

/* Pages de contenu. */
.page-index a{font-family:var(--f-sans);font-size:13px}
.page-index a::before{color:var(--signal)}
.page-intro>p:not(.eyebrow):not(.page-index){font-size:17px;line-height:1.75;color:#dbe1df}
.prose p,.prose li{font-size:15px;line-height:1.8;color:var(--mute)}
.prose a{color:var(--signal)}
.home-notes p,.home-notes li{font-size:14.5px}
.placeholder{border-color:var(--signal);border-radius:4px;color:var(--ice)}

@media(max-width:1120px){.home-intro{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}}
@media(max-width:900px){.home-intro{grid-template-columns:minmax(0,1fr);gap:36px}.intro-copy>p.hero-lead{max-width:60ch}}
@media(max-width:480px){.intro-copy>p.hero-lead{font-size:16px}.button{font-size:14px;padding:12px 20px}.learning-grid article{padding:18px}.prose p,.prose li{font-size:14.5px}}
@media(forced-colors:active){.sim-frame,.learning-grid article,.button{border:1px solid CanvasText}}