*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── Fond étoilé global ──────────────────────────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,100,160,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 80%, rgba(100,0,180,.10) 0%, transparent 50%),
    radial-gradient(ellipse 30% 40% at 10% 60%, rgba(0,60,120,.12) 0%, transparent 50%),
    var(--bg);
  pointer-events: none;
}

/* ─── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: var(--panel); }
::-webkit-scrollbar-thumb         { background: rgba(100,180,255,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: rgba(100,180,255,.35); }

/* ─── Typographie ──────────────────────────────────────── */
h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
p  { color: var(--text-soft); line-height: 1.6; }
a  { color: var(--accent); text-decoration: none; }

/* ─── Sélection ──────────────────────────────────────── */
::selection { background: rgba(0,207,255,.25); color: var(--text); }