/* ============================================
   OXALIS — Design Tokens   
   ============================================ */
 
  :root {
    /* ── Couleurs ── */
  /* ── Couleurs Oxalis — OKLch (perceptuellement uniformes) ── */
  --color-primary:    oklch(42.6% 0.0826 227.7deg);  /* #015772 */
  --color-contrast:   oklch(25.8% 0.0458 224.5deg);  /* #032834 */
  --color-secondary:  oklch(63.9% 0.1076 179.7deg);  /* #25a18e */
  --color-accent-1:   oklch(67.2% 0.1682  29.5deg);  /* #eb6655 */
  --color-accent-2:   oklch(74.1% 0.1795 129.4deg);  /* #86c02f */
  --color-accent-3:   oklch(87.6% 0.1705 102.0deg);  /* #edd934 */
  --color-accent-4:   oklch(63.9% 0.1076 179.7deg);  /* #25a18e */
  --color-white:      oklch(100%  0      none);       /* #ffffff */
  --color-cards:      oklch(95.5% 0.0054  95.1deg);  /* #f1f0ec */

  --cassiopeia-color-primary: var(--color-primary);
  --cassiopeia-color-link:var(--color-contrast);
  --link-color:var(--color-contrast);
  --link-color-rgb:34,79,170;
  --cassiopeia-color-hover:#424077;
  --link-hover-color:#424077;
  --link-hover-color-rgb:66,  64,  119;
  
    /* ── Typographie ── */
    --font-heading: 'Bricolage Grotesque', sans-serif;
    --font-body:    'Inter', sans-serif;
  
    --text-infographie-infos : 1.5rem;  /* 24px */
    --text-infographie-nombre : 3.875rem; /* 62px */
    
    --text-h1-size:   clamp(2.5rem, 2.09rem + 2.05vw, 3.375rem); /* 40px→54px fluide */
    --text-h1-lh:     1;
    --text-h1-weight: 800;
  
    --text-h2-size:   2.25rem;    /* 36px */
    --text-h2-lh:     1.11;
    --text-h2-weight: 800;

    --text-h3-size:   1.375rem;    /* 22px */
    --text-h3-lh:     1.27;       
    --text-h3-weight: 800;
  
    --text-body-size: 1.125rem;   /* 18px */
    --text-body-lh:   1.44;
    --text-body-weight: 400;
    
    --text-card-title : 1.625rem ; /* 26px */
    --text-card-description : 1.25rem ;
    --text-cta-size: 1.25rem;    /* 20px — bouton d'action */

    --text-nav-size:  0.9375rem;  /* 15px */
    --text-nav-weight: 800;
  
    --text-small-size: 0.875rem;  /* 14px */
  
    /* ── Espacements ── */
    --space-xs:   0.5rem;    /* 8px */
    --space-sm:   1rem;      /* 16px */
    --space-md:   1.5rem;    /* 24px */
    --space-lg:   2rem;      /* 32px */
    --space-xl:   clamp(1rem, 0.43rem + 3.2vw, 3rem);   /* 16px→48px fluide */
    --space-2xl:  clamp(1rem, -0.25rem + 5.3vw, 4rem);   /* 16px→64px fluide */
    --space-3xl:  clamp(1rem, -1.1rem + 8.85vw, 6rem);  /* 16px→96px fluide */
    --space-4xl:  clamp(1rem, -1.5rem + 10.6vw, 7rem);  /* 16px→112px fluide */
  
    /* ── Rayons ── */
    --radius-sm:  0.5rem;    /* 8px */
    --radius-md:  0.75rem;   /* 12px */
    --radius-lg:  1.5rem;    /* 24px */
    --radius-pill: 1rem;     /* 16px */
  
    /* ── Ombres ── */
    --shadow-card: 0 4px 15px 0 rgba(0, 35, 46, 0.12);
    --shadow:      0 4px 39px 0 rgba(1, 26, 33, 0.12);
  
    /* ── Layout ── */

    --pad-wrapper: min(50px, 6vw);
    --pad-header: var(--pad-wrapper);
    --container-pad: var(--pad-wrapper);
    --pad-paragraph : 80ch ;
    --pad-paragraph-xl : 60ch ;

    /* Padding inline des zones de contenu post-héro (catégorie blog, article default) */
    --page-content-pad: var(--space-xl);

    --card-border-width : 0 ;
    --border-width : 0 ;

}