/* Fonts self-hostées : voir assets/css/fonts.css (chargé par index.html
   en début de cascade). Plus de @import Google Fonts ici. */

/* ================================================================
   Institut Rousseau — Design tokens
   Charte « lumineuse, progressiste » (mai 2026)
   ----------------------------------------------------------------
   Palette : navy + bleu royal accent + neutres légèrement bleutés.
   Aucune touche dorée / ocre / terra (purgée).
   Les anciens noms (--gold, --cream, --terra, --ochre, --accent-rouge)
   sont conservés en alias et redirigés vers les nouveaux tokens
   pour rétro-compat (28 pages encore en cours d'harmonisation).
   ================================================================ */

:root {
  /* ---- Palette canonique (brief mai 2026) ------------------------ */

  /* Bleus identitaires */
  --color-primary: #1B2A4A;          /* navy — texte fort & accents fins, pas en aplat */
  --color-primary-deep: #0F1E3D;     /* navy plus profond — texte principal */
  --color-accent: #2D5BD7;           /* bleu royal — CTAs, liens, highlights */
  --color-accent-hover: #1E47B8;     /* hover */
  --color-accent-soft: #5B7FE5;      /* éléments secondaires */
  --color-accent-pale: #E8EFFE;      /* fonds doux, mise en avant légère */
  --color-sky: #DCE7FB;              /* bordures actives, highlights subtils */

  /* Neutres bleutés (pas de blanc clinique) */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F7F9FD;           /* fond alterné, très subtilement bleuté */
  --color-surface: #FFFFFF;          /* cartes */
  --color-text: #0F1E3D;             /* texte principal */
  --color-text-muted: #5A6B85;       /* texte secondaire */
  --color-border: #E5EAF2;           /* filets doux */
  --color-border-strong: #D1D9E6;    /* filets marqués */

  /* ---- Couleurs thématiques par pôle (pages thématiques seulement) ---- */
  /* Sur la home, les 6 cartes pôles sont uniformes en --color-accent. */
  --color-ecologie: #16a34a;
  --color-ecologie-dark: #166534;
  --color-economie: #2563eb;
  --color-economie-dark: #1e40af;
  --color-institutions: #d97706;
  --color-institutions-dark: #92400e;
  --color-social: #db2777;
  --color-social-dark: #9d174d;
  --color-international: #0ea5e9;
  --color-international-dark: #0369a1;
  --color-culture: #7c3aed;
  --color-culture-dark: #5b21b6;

  /* Publication type colors — alignés sur la palette accent */
  --color-type-note: #D1D5DB;
  --color-type-pdv: var(--color-accent-soft);
  --color-type-editorial: var(--color-accent);
  --color-type-ouvrage: #059669;

  /* ---- Alias rétro-compat (NE PAS UTILISER DANS LE NOUVEAU CODE) ---- */
  /* Tous les anciens noms historiques pointent désormais sur la nouvelle
     palette. Permet aux 28 pages CSS existantes de devenir bleues
     automatiquement sans réécriture page par page. */

  /* Anciens navy / primary */
  --navy: var(--color-primary);
  --navy-deep: var(--color-primary-deep);
  --primary-dark: var(--color-primary);

  /* Anciens accents bleus (cyan/teal/sky/blue)
     Note : l'ancien --sky valait #4A90D9 (bleu vif, utilisé pour les liens).
     On le redirige sur --color-accent et non --color-sky (qui désigne
     désormais un bleu pâle pour bordures actives). */
  --blue: var(--color-accent);
  --sky: var(--color-accent);
  --cyan: var(--color-accent);
  --teal: var(--color-accent);
  --pale: var(--color-accent-pale);
  --ice: var(--color-bg-alt);

  /* Texte */
  --ink: var(--color-text);
  --text-dark: var(--color-text);
  --body: var(--color-text-muted);
  --muted: var(--color-text-muted);
  --steel: var(--color-text-muted);
  --text-light-on-dark: #ffffff;

  /* Surfaces */
  --bg-white: var(--color-bg);
  --bg-alt: var(--color-bg-alt);
  --cream: var(--color-bg-alt);
  --white: var(--color-bg);
  --gray-light: var(--color-bg-alt);

  /* Borders */
  --border-color: var(--color-border);
  --border: var(--color-border);

  /* Dorés / ocres / terra — REDIRIGÉS sur l'accent bleu */
  --gold: var(--color-accent);
  --gold-hover: var(--color-accent-hover);
  --ochre: var(--color-accent);
  --terra: var(--color-accent);
  --terra-lt: var(--color-accent-hover);
  --accent-rouge: var(--color-accent);
  --accent-rouge-dark: var(--color-accent-hover);

  /* ---- Tokens v3 sémantiques (conservés et alignés) ------------ */
  --ink-deep: var(--color-text);
  --ink-soft: var(--color-text-muted);
  --paper: var(--color-bg);
  --paper-soft: var(--color-bg-alt);
  --primary-deep: var(--color-primary);
  --rule: var(--color-border);
  --rule-strong: var(--color-border-strong);

  /* ---- Ombres bleutées légères --------------------------------- */
  --sh-sm: 0 1px 3px rgba(45, 91, 215, .04), 0 2px 8px rgba(45, 91, 215, .03);
  --sh-md: 0 2px 4px rgba(45, 91, 215, .04), 0 8px 24px rgba(45, 91, 215, .06);
  --sh-lg: 0 4px 8px rgba(45, 91, 215, .05), 0 16px 48px rgba(45, 91, 215, .08);
  --shadow-xl: 0 8px 16px rgba(45, 91, 215, .06), 0 24px 64px rgba(45, 91, 215, .1);
  --shadow-color: rgba(45, 91, 215, .06);
  --card-bg: var(--color-surface);

  /* ---- Typographie -------------------------------------------- */
  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Spectral', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-serif: 'Spectral', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Serif 4', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-serif-v3: var(--font-serif);
  --font-sans-v3: var(--font-body);
  --font-kicker-v3: var(--font-display);

  /* ---- Spacing -------------------------------------------------- */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 5.5rem;
  --space-section: 5rem;
  --space-section-sm: 3rem;
  --space-rule: 0.5rem;

  /* ---- Layout & radius ----------------------------------------- */
  --max-width: 1200px;       /* aligné brief (resserré depuis 1280) */
  --nav-height: 80px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;         /* plafond brief : pas > 12px */

  /* ---- Transitions --------------------------------------------- */
  --ease-v3: cubic-bezier(0.4, 0, 0.2, 1);
  --transition: .25s var(--ease-v3);
  --transition-slow: .4s var(--ease-v3);
  --transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);
  --t-hover-v3: 200ms;
  --t-reveal-v3: 550ms;

  /* ---- Effects -------------------------------------------------- */
  --blur-overlay: 10px;
  --gradient-dark-overlay: linear-gradient(180deg, transparent 30%, rgba(15, 30, 61, 0.45) 100%);
  --focus-ring: 0 0 0 3px rgba(45, 91, 215, .3);
  --focus-ring-v3: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);

  /* ---- Z-index scale ------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-btt: 800;
  --z-nav: 1000;
  --z-cookie: 9000;
  --z-overlay: 10000;
  --z-skip: 10001;
}

/* ================================================================
   Dark mode
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-bg-alt: #1e293b;
    --color-surface: #1e293b;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-border-strong: #475569;
    --color-primary: #93c5fd;
    --color-primary-deep: #bfdbfe;
    --color-accent: #7ab3e8;
    --color-accent-hover: #93c5fd;
    --color-accent-soft: #60a5fa;
    --color-accent-pale: #1e293b;
    --color-sky: #1e3a5f;

    --text-light-on-dark: #ffffff;

    /* Thematic colors — lighter for dark mode readability */
    --color-ecologie: #4ade80;
    --color-ecologie-dark: #86efac;
    --color-economie: #60a5fa;
    --color-economie-dark: #93c5fd;
    --color-institutions: #fbbf24;
    --color-institutions-dark: #fcd34d;
    --color-social: #f472b6;
    --color-social-dark: #f9a8d4;
    --color-international: #38bdf8;
    --color-international-dark: #7dd3fc;
    --color-culture: #a78bfa;
    --color-culture-dark: #c4b5fd;

    --color-type-note: #94a3b8;
    --color-type-pdv: var(--color-accent-soft);
    --color-type-editorial: var(--color-accent);
    --color-type-ouvrage: #34d399;

    --sh-sm: 0 1px 3px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .12);
    --sh-md: 0 2px 4px rgba(0, 0, 0, .15), 0 8px 24px rgba(0, 0, 0, .2);
    --sh-lg: 0 4px 8px rgba(0, 0, 0, .2), 0 16px 48px rgba(0, 0, 0, .25);
    --shadow-color: rgba(0, 0, 0, 0.3);
  }
}