/* =================================================================
   BASE — Reset, polices locales, éléments fondamentaux
   Chargé sur TOUTES les pages après tokens.css
================================================================= */

/* ─────────────────────────────────────────
   @FONT-FACE — Polices locales
   Fichiers attendus dans /fonts/<NomPolice>/
───────────────────────────────────────── */

@font-face {
  font-family: 'Raw Pixel';
  src: url('../fonts/RawPixel-Bold/RawPixel-Bold.woff2') format('woff2'),
       url('../fonts/RawPixel-Bold/RawPixel-Bold.woff')  format('woff'),
       url('../fonts/RawPixel-Bold/RawPixel-Bold.ttf')   format('truetype'),
       url('../fonts/RawPixel-Bold/RawPixel-Bold.otf')   format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raw Pixel';
  src: url('../fonts/RawPixel/RawPixel.woff2') format('woff2'),
       url('../fonts/RawPixel/RawPixel.woff')  format('woff'),
       url('../fonts/RawPixel/RawPixel.ttf')   format('truetype'),
       url('../fonts/RawPixel/RawPixel.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Raw Pixel';
  src: url('../fonts/RawPixel-BoldItalic/RawPixel-BoldItalic.woff2') format('woff2'),
       url('../fonts/RawPixel-BoldItalic/RawPixel-BoldItalic.woff')  format('woff'),
       url('../fonts/RawPixel-BoldItalic/RawPixel-BoldItalic.ttf')   format('truetype'),
       url('../fonts/RawPixel-BoldItalic/RawPixel-BoldItalic.otf')   format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raw Pixel';
  src: url('../fonts/RawPixel-Italic/RawPixel-Italic.woff2') format('woff2'),
       url('../fonts/RawPixel-Italic/RawPixel-Italic.woff')  format('woff'),
       url('../fonts/RawPixel-Italic/RawPixel-Italic.ttf')   format('truetype'),
       url('../fonts/RawPixel-Italic/RawPixel-Italic.otf')   format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'VCR OSD Mono';
  src: url('../fonts/VCROSDMono/VCROSDMono.woff2') format('woff2'),
       url('../fonts/VCROSDMono/VCROSDMono.woff')  format('woff'),
       url('../fonts/VCROSDMono/VCROSDMono.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

/* ─────────────────────────────────────────
   HTML / BODY
───────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  overflow-x: clip; /* clip (pas hidden) → ne crée pas de scroll container → position:sticky fonctionne */
  background: var(--purple-900);
  font-family: var(--font-body);
  color: var(--text-on-dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────
   CONTAINER
   Centrage + padding latéral responsive.
   Utiliser sur le div de contenu des sections :
   <div class="container"> ... </div>
   Le padding vient de --space-15 (tokens.css)
   qui est surchargé aux breakpoints.
───────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-15);
}

/* ─────────────────────────────────────────
   SECTION
   Padding vertical par défaut pour les sections
   de contenu (hors hero / logos qui gèrent les leurs).
   Optionnel — à ajouter en complément de la
   classe sémantique ex: <section class="concept section">
───────────────────────────────────────── */
.section {
  padding-block: var(--space-8);
}

/* ─────────────────────────────────────────
   REDUCED MOTION
   Désactive animations et transitions si
   l'utilisateur a activé cette préférence OS.
   Compatible avec hero-entrance.js et parallax.js
   qui lisent aussi window.matchMedia().
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}