/* ============================================================
   FONDATION RZB — Design tokens (v5)
   Couleurs ÉCHANTILLONNÉES du logo réel (cf. Obsidian Gotchas).
   Fond blanc, navy ancre, rouge CTA, vert "racine",
   ronde multicolore = 5 communes à sens.
   Typo : Ojuju (display) + Hanken Grotesk (texte). Mono/Fraunces/Inter BANNIS.
   ============================================================ */
:root {
  /* — Neutres clairs & aérés — */
  --white: #ffffff;
  --paper: #f6f8fe;        /* fond alterné, bleu très clair */
  --paper-2: #eef2fb;
  --ink: #0e1733;          /* texte principal (navy sombre) */
  --ink-soft: #45506e;     /* texte secondaire */
  --line: #e2e8f5;         /* filets / bordures */

  /* — Marque (logo) — */
  --navy: #001878;         /* ancre marque */
  --navy-700: #0a2196;
  --red: #d8001e;          /* CTA / accent fort */
  --red-700: #b00018;
  --root: #189030;         /* "la vie prend racine" */

  /* — Les 5 communes (couleur à sens) — */
  --abobo: #f4b81d;        /* enfance / refuge — jaune-soleil */
  --yamoussoukro: #1464b4; /* éducation — bleu profond */
  --bouake: #dc148c;       /* autonomisation des femmes — magenta */
  --korhogo: #189030;      /* santé — vert */
  --daloa: #e8551b;        /* culture / jeunesse — orange */

  /* — Typo — */
  --font-display: "Ojuju", "Hanken Grotesk", system-ui, sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --fw-text: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* échelle fluide (clamp maîtrisé, pas partout) */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.75rem, 1.5rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.3rem, 1.85rem + 2.2vw, 3.6rem);
  --step-4:  clamp(3rem, 2.1rem + 4.4vw, 5.6rem);
  --step-5:  clamp(3.6rem, 2.2rem + 7vw, 8rem);

  /* — Espacement (base 8) — */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem;
  --container: 1200px;
  --container-wide: 1400px;

  /* — Rayons / ombres — */
  --r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-xl: 40px; --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(14,23,51,.06);
  --shadow-md: 0 12px 32px rgba(14,23,51,.10);
  --shadow-lg: 0 30px 70px rgba(14,23,51,.16);
  --shadow-color: 0 18px 40px rgba(0,24,120,.18);

  /* — Motion — */
  --dur-fast: .2s; --dur: .45s; --dur-slow: .8s;
  --ease: cubic-bezier(.22,1,.36,1);      /* expo-out doux */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}