/* ---- Police embarquée (aucun CDN) ------------------------------------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/vendor/fonts/sora-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/vendor/fonts/sora-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/vendor/fonts/sora-latin-800-normal.woff2') format('woff2');
}

/* ---- Thèmes ----------------------------------------------------------- */
:root {
  --font: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

html[data-theme='dark'] {
  --bg: #070b16;
  --text: #ffffff;
  --subtitle: #94a6c9;
  --accent: #3de2b0;
  --scrim: radial-gradient(62% 44% at 50% 50%, rgba(0,0,0,.50) 0%, rgba(0,0,0,.22) 46%, rgba(0,0,0,0) 76%);
  --text-shadow: 0 2px 16px rgba(0,0,0,.9), 0 0 70px rgba(0,0,0,.6);
}

html[data-theme='light'] {
  --bg: #eef2f8;
  --text: #0a1426;
  --subtitle: #51607a;
  --accent: #0a9e7a;
  --scrim: radial-gradient(62% 44% at 50% 50%, rgba(238,242,248,.55) 0%, rgba(238,242,248,.25) 46%, rgba(238,242,248,0) 76%);
  --text-shadow: 0 1px 14px rgba(255,255,255,.9), 0 0 50px rgba(255,255,255,.6);
}

/* ---- Base ------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--scrim);
  pointer-events: none;
}

/* ---- Contenu ---------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  gap: clamp(0.75rem, 2vh, 1.75rem);
}

.message {
  margin-top: auto;
  margin-bottom: auto;
  font-weight: 800;
  line-height: 0.8;
  letter-spacing: -0.02em;
  word-spacing: 10px;
  font-size: clamp(2.75rem, 9vw, 13rem);
  text-shadow: var(--text-shadow);
  text-wrap: balance;
  max-width: 18ch;
}

.subtitle {
  margin: 0;
  font-weight: 400;
  line-height: 1.25;
  color: var(--subtitle);
  font-size: clamp(1.1rem, 3.2vw, 2.6rem);
  text-shadow: var(--text-shadow);
  text-wrap: balance;
  max-width: 32ch;
}

.subtitle[hidden] { display: none; }