/* Charte graphique Teatch.io 2026 — tokens.css
   Source : Drive › Nouvelle charte graphique 2026 › 00 Charte (Sam, 29/10/2026).
   À charger EN PREMIER sur toutes les pages. Toutes les couleurs et polices
   passent par ces variables. */
:root {
  /* Prune */
  --prune-50: #F9F4FB; --prune-100: #EEE2F3; --prune-200: #DDC6E7;
  --prune-300: #C29CD3; --prune-400: #A569BF; --prune-500: #783993;
  --prune-600: #5F2876; --prune-700: #4A1D5D; --prune-800: #351244;
  --prune-900: #230B2D;
  --jaune: #FFD700;
  --coeur-projecteur: #A4559F;
  --succes: #ACD373; --erreur: #F26D7D; /* interface uniquement */

  /* Rôles */
  --texte: var(--prune-900);
  --texte-doux: #6A5A72; /* texte secondaire */
  --fond: #FFFFFF;
  --fond-doux: var(--prune-50);
  --marque: var(--prune-500);

  /* Projecteur : --x / --y = position du point important */
  --projecteur: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
    #A4559F 0%, #783993 22%, #5D2874 45%, #3A1650 72%, #230B2D 100%);

  /* Typographie */
  --font-display: 'Outfit', sans-serif; /* titres, chiffres, labels */
  --font-body: 'Plus Jakarta Sans', sans-serif; /* texte, interface */
}

/* Classe projecteur avec grain */
.projecteur {
  position: relative; overflow: hidden; color: #fff;
  background: var(--projecteur);
}
.projecteur::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.projecteur > * { position: relative; z-index: 1; }