/* ============================================================
   DESIGN TOKENS & VARIABLES GLOBALES FSE CLASSPRO
   ============================================================ */
:root {
  /* Couleurs Fondamentales */
  --cp-color-primary: var(--wp--preset--color--primary, #20467B);
  --cp-color-secondary: var(--wp--preset--color--secondary, #EB7630);
  --cp-color-accent: var(--wp--preset--color--secondary, #EB7630);
  --cp-color-dark: var(--wp--preset--color--dark, #0F172A);
  --cp-color-light: var(--wp--preset--color--light, #F8FAFC);
  --cp-color-white: #FFFFFF;
  --cp-color-bg-light: #F8FAFC;
  --cp-color-border: var(--wp--preset--color--border-slate, #E2E8F0);
  --cp-color-text: var(--wp--preset--color--text-slate, #334155);
  --cp-color-muted: #475569; /* Slate 600 : WCAG AA conforme (5.67:1) */
  --cp-color-muted-dark: #94A3B8;
  --cp-focus-color: #20467B; /* Ratio 9.47:1 sur blanc (WCAG SC 1.4.11) */


  /* Tailles de texte de lecture (paragraphes) — cf. AGENTS.md §8
     --cp-text-size : taille effective des <p> d'une zone (plancher 16px garanti).
     --cp-lead-size : textes d'introduction (sous un H1 / H2) : 17px mobile → 18px PC.
     --cp-article-size : corps des articles : 17px mobile → 18px PC. */
  --cp-lead-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.125rem);
  --cp-article-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.125rem);
  --cp-meta-size: 0.875rem; /* dates, temps de lecture : 14px */
  --cp-info-size: 0.9375rem; /* fonctions, villes, coordonnées : 15px */

  /* Rayons de bordure (Border Radius) */
  --cp-radius-xs: 4px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 16px;
  --cp-radius-lg: 24px;
  --cp-radius-pill: 50px;

  /* Ombres portées (Shadows) */
  --cp-shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
  --cp-shadow-elevated: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --cp-shadow-deep: 0 20px 35px -10px rgba(15, 23, 42, 0.15);
  --cp-shadow-glass: 0 8px 32px 0 rgba(32, 70, 123, 0.12);

  /* Marges latérales (gouttière) & rythme vertical des sections
     --cp-gutter : marge gauche/droite du contenu — 20px mobile, 32px dès 641px (tablette+).
     --cp-section-space : espace haut/bas des sections — 56px mobile, 72px tablette, 88px PC. */
  --cp-gutter: 20px;
  --cp-section-space: clamp(3.5rem, 9.4vw, 5.5rem);

  /* Tailles de Conteneur */
  --cp-content-size: 800px;
  --cp-content-wide-size: 1240px;
  --cp-content-width: 1240px;
}

@media (min-width: 641px) {
  :root {
    --cp-gutter: 32px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
}
body {
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }

/* CONTENEUR UNIVERSEL ALIGNÉ SUR LE HEADER & FOOTER (1240px) */
.cp-container {
  width: min(var(--cp-content-wide-size, 1240px), calc(100% - 2 * var(--cp-gutter, 16px))) !important;
  max-width: var(--cp-content-wide-size, 1240px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}