/* ============================================================
   Design tokens — vitrine Mon Encyclopédie 3D
   Couleurs échantillonnées sur la maquette juin 2026
   (maquette_mon_encyclopedie_3d_3000px_large.png), alignées
   sur la palette de l'app (CLAUDE.md §8).
   ============================================================ */

/* Polices auto-hébergées (RGPD : 0 CDN) — mêmes fichiers que l'app */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/assets/fonts/fredoka.woff2) format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url(/assets/fonts/nunito.woff2) format('woff2');
}

:root {
  /* --- Palette --- */
  --color-navy-900: #060A23;   /* fond cosmique hero / header */
  --color-navy-800: #081030;   /* footer */
  --color-ink: #1A1F4B;        /* titres et textes sur fond clair */
  --color-page: #F1F3F9;       /* fond des sections claires */
  --color-white: #FFFFFF;
  --color-cream: #F5EBD6;
  --color-gold: #FCC920;       /* boutons or */
  --color-gold-deep: #F8A000;  /* étincelles, dégradé or */
  --color-neon: #3BD4FF;       /* anneaux des badges « 0 » */
  --color-muted: #B9C0D8;      /* liens footer */

  /* --- Dégradés --- */
  --grad-gold: linear-gradient(180deg, #FFD84A 0%, #F89800 100%);
  --grad-blue: linear-gradient(180deg, #7CC4FF 0%, #1E6BFF 58%, #0A49E8 100%);
  --grad-btn: linear-gradient(180deg, #FFD43A 0%, #F8B70D 100%);

  /* --- Typographie --- */
  --font-title: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, sans-serif;

  /* --- Layout --- */
  --container: 1240px;
  --header-w: 1408px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* --- Effets --- */
  --shadow-card: 0 12px 32px rgba(10, 14, 42, .10);
  --shadow-header: 0 10px 34px rgba(0, 0, 0, .38);
  --shadow-gold: 0 8px 22px rgba(248, 165, 0, .38);
  --easing-out: cubic-bezier(.22, .61, .36, 1);
  --dur: .25s;
}