/* Codexe, variables de la charte (source : charte/CHARTE.md) */

@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/manrope-variable.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* Couleurs de marque. Site passé en clair le 14 octobre 2026 (demande de Loïck : « le noir est trop sombre ») :
     les noms restent, les valeurs s'inversent (--noir est le fond, --blanc l'encre), même palette que la refonte claire.
     Le texte posé sur le violet reste blanc (#FFFFFF écrit en dur). Ancienne palette sombre : historique git. */
  --noir: #F7F5FE;            /* fond de page : lavande très pâle */
  --blanc: #12101A;           /* encre : texte, lettres du logo */
  --violet: #7B3DFF;          /* accent principal : interactif, important, E partagé, dino */
  --violet-clair: #5A22D6;    /* violet lisible en petit texte sur le fond clair (7,4:1) */
  --violet-sombre: #5A26D6;   /* état appuyé des boutons violets */

  /* Neutres (dérivés, pour textes secondaires et surfaces) */
  --gris-texte: #4F4B66;      /* texte secondaire sur le fond clair (contraste AA) */
  --gris-ligne: #DCD6F0;      /* bordures, séparateurs */
  --surface-1: #EDE8FD;       /* bandeaux et panneaux */
  --surface-2: #FFFFFF;       /* cartes, touches */

  /* Lumière */
  --glow-violet: 0 0 24px rgba(123, 61, 255, 0.55);
  --glow-violet-fort: 0 0 12px rgba(123, 61, 255, 0.9), 0 0 48px rgba(123, 61, 255, 0.45);
  --halo-souris: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(123, 61, 255, 0.18), transparent 60%);

  /* Typographie */
  --font-titre: "Chakra Petch", system-ui, sans-serif;
  --font-texte: "Manrope", system-ui, sans-serif;
  --font-pixel: "Silkscreen", ui-monospace, monospace;

  --fs-display: clamp(2.75rem, 6vw + 1rem, 6rem);
  --fs-h1: clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
  --fs-h3: 1.375rem;
  --fs-texte: 1.0625rem;
  --fs-petit: 0.875rem;
  --fs-pixel: 0.75rem;

  /* Grille : rapport case / gouttière du logo = 5 / 1 */
  --px: 4px;                  /* pixel de base de l'univers pixel (icônes, sprites, bordures) */
  --gouttiere: 24px;          /* desktop ; 16px sur mobile */
  --largeur-max: 1280px;
  --espace-1: 8px;
  --espace-2: 16px;
  --espace-3: 24px;
  --espace-4: 40px;
  --espace-5: 64px;
  --espace-6: 120px;          /* écart entre sections */

  /* Formes : univers carré, pas d'arrondis */
  --rayon: 0;

  /* Mouvement */
  --duree-rapide: 120ms;
  --duree: 240ms;
  --duree-lente: 600ms;
  --courbe: cubic-bezier(0.2, 0.8, 0.2, 1);
  --courbe-pas: steps(6, end); /* animations « pixel » par paliers */
}

@media (max-width: 720px) {
  :root { --gouttiere: 16px; --espace-6: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-rapide: 0ms; --duree: 0ms; --duree-lente: 0ms; }
}