/* NextWeb v3 — design system complet. Pôle créatif de la maison NeXTapps.
   ADN de famille : charbon bleuté, UN néon azur, Space Grotesk + Inter,
   profondeur par HALOS (jamais d'ombre portée classique), CTA en pilule.
   MACHINE CONVENTION : couleurs literales (≤1 hop var()), paires --x/--on-x
   contrastées AA, tout le reste n'utilise QUE ces tokens. */

/* ---- voix typographiques (famille) ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* palette — paires (--x / --on-x). Fond famille charbon bleuté. */
  --surface:          hsl(222 22% 7%);     /* fond principal          */
  --on-surface:       hsl(210 24% 94%);    /* encre off-white         */
  --surface-alt:      hsl(221 20% 11%);    /* panneaux / cartes       */
  --on-surface-alt:   hsl(210 22% 93%);
  --surface-sunken:   hsl(223 26% 5%);     /* creux / bandes profondes */
  --on-surface-sunken:hsl(210 20% 90%);

  /* néon UNIQUE — azur électrique (le #00A8F0 du logo NX familial) */
  --brand:            hsl(199 100% 48%);
  --on-brand:         hsl(222 45% 6%);     /* encre foncée sur l'azur (AA) */

  --muted:            hsl(213 16% 64%);    /* texte secondaire sur --surface */
  --border:           hsl(206 30% 82% / 0.12);   /* filets hairline  */
  --border-glow:      hsl(199 100% 48% / 0.35);  /* filets lumineux  */
  --surface-veil:     hsl(222 24% 8% / 0.82);     /* nav-morph condensée */

  /* type — Space Grotesk display, Inter corps */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --text-sm:   clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --text-lg:   clamp(1.2rem, 1.12rem + 0.4vw, 1.5rem);
  --text-xl:   clamp(1.56rem, 1.4rem + 0.7vw, 2.1rem);
  --text-2xl:  clamp(1.95rem, 1.7rem + 1.2vw, 2.9rem);
  --text-hero: clamp(2.9rem, 1.4rem + 6.6vw, 6.2rem);
  --leading-body: 1.55;
  --leading-tight: 1.04;
  --tracking-over: 0.24em;   /* surtitres en petites capitales espacées */

  /* spacing — 8pt scale */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* shape — pilule pour les CTA */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* profondeur par HALOS azur (rayons 8/14/22) — pas d'ombre portée classique */
  --glow-sm: 0 0 8px hsl(199 100% 48% / 0.35);
  --glow:    0 0 14px hsl(199 100% 48% / 0.42);
  --glow-lg: 0 0 22px hsl(199 100% 48% / 0.5);
  /* halo diffus derrière les grands blocs / hero */
  --glow-ambient: radial-gradient(60% 60% at 50% 40%,
                    hsl(199 100% 48% / 0.14), transparent 70%);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 240ms;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700;
             line-height: var(--leading-tight); letter-spacing: -0.03em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px;
                 border-radius: 2px; }
.accent { color: var(--brand); }
/* bascule bilingue FR/EN — les deux langues vivent dans le HTML (Loi 96 :
   le FR est le défaut, jamais l'après-coup), JS ne fait que flipper [lang] */
html[lang="en"] .lang-fr { display: none; }
html:not([lang="en"]) .lang-en { display: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}