@font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #08080a;
  --bg2: #0f0f12;
  --surface: rgba(255, 255, 255, .045);
  --surface-2: rgba(255, 255, 255, .08);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f4f4f6;
  --muted: #8e8e99;
  --accent: #8b6cff;          /* couleur d'accent unique : à changer ici pour tout le site */
  --accent-2: #b9a6ff;
  --accent-glow: rgba(139, 108, 255, .35);
  --ok: #4ade80;
  --err: #ff5a6e;
  --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r: 16px;
  --r-sm: 10px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--accent-2); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .9em 1.5em; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 600 .95rem/1 var(--body); letter-spacing: -.005em;
  color: #0a0a0c; background: #fff;
  transition: transform .15s, background .15s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(255, 255, 255, .12); }
.btn.accent { background: var(--accent); color: #fff; box-shadow: 0 8px 30px var(--accent-glow); }
.btn.accent:hover { background: #9a7fff; }
.btn.ghost { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); }
.btn.small { padding: .65em 1.1em; font-size: .88rem; }
.btn svg { width: 1.1em; height: 1.1em; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}