/* ==========================================================================
   Design tokens — Fondation Clair Bois
   Toutes les variables sont préfixées « cb- » : Divi 5 injecte ses propres
   variables CSS globales, le préfixe garantit l'absence de collision.
   ========================================================================== */

:root {
	/* --- Couleurs principales (charte Clair Bois) -------------------------- */
	--cb-color-primary: #060048;  /* Bleu Romeo — continuité, ancrage : titres, texte, fond du footer */
	--cb-color-accent: #0f69fc;   /* Bleu Noémie — vitalité, singularité : liens, méta, boutons */

	/* --- Couleurs complémentaires ------------------------------------------
	   Disponibles pour les accents éditoriaux (badges, illustrations).
	   Aucun usage défini par la maquette à ce stade. */
	--cb-color-violet: #7054f5;   /* Violet Jacqueline — dynamisme, innovation, inclusion */
	--cb-color-green: #1ddf69;    /* Vert Bilal — croissance, équilibre, confiance */
	--cb-color-yellow: #ddfc6f;   /* Jaune Georges — vitalité, optimisme, énergie */

	/* Dégradé Horizon. Orientation à valider : la planche de charte est ambiguë. */
	--cb-gradient-horizon: linear-gradient(135deg, var(--cb-color-primary), var(--cb-color-accent));

	/* --- Couleurs dérivées --------------------------------------------------
	   Neutres calculés comme teintes de --cb-color-primary, contrastes vérifiés. */
	--cb-color-text: var(--cb-color-primary);
	--cb-color-text-invert: #ffffff;
	--cb-color-text-muted: #4f4a75;        /* Texte secondaire sur fond clair — 8.2:1 sur blanc (AAA) */
	--cb-color-text-invert-muted: #b9c0d4; /* Texte secondaire sur fond Bleu Romeo (bas du footer) */
	--cb-color-background: #ffffff;
	--cb-color-surface: #ffffff;           /* Fond des cartes */
	--cb-color-surface-muted: #e9e8ee;     /* Teinte à 9% : pills de navigation + section « Autres articles » */
	--cb-color-border: #cdccda;            /* Teinte à 20% : filet sous la navigation */
	--cb-color-focus: var(--cb-color-accent);

	/* --- Typographie ------------------------------------------------------ */
	--cb-font-heading: "Atkinson Hyperlegible Next", system-ui, sans-serif;
	--cb-font-body: var(--cb-font-heading);

	/* Tailles fluides. Bornes hautes relevées sur la maquette (canvas 1920 px),
	   bornes basses définies pour rester lisibles en 375 px sans jamais descendre
	   sous 16 px pour le texte courant. */
	--cb-font-size-xs: 0.875rem;                                  /* 14px — badges */
	--cb-font-size-sm: 1rem;                                      /* 16px — méta, navigation */
	--cb-font-size-base: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);  /* 16 → 20px */
	--cb-font-size-lg: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem); /* 22 → 30px — titres de carte */
	--cb-font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);    /* 20 → 24px */
	--cb-font-size-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);       /* 24 → 32px */
	--cb-font-size-h1: clamp(2rem, 1.4rem + 2.2vw, 2.875rem);     /* 32 → 46px */

	--cb-line-height-tight: 1.2;   /* Titres */
	--cb-line-height-base: 1.55;   /* Texte courant */
	--cb-font-weight-regular: 400;
	--cb-font-weight-bold: 700;
	--cb-letter-spacing-wide: 0.08em; /* Libellés en capitales */

	/* --- Espacements ------------------------------------------------------ */
	--cb-space-xs: 0.5rem;   /* 8px */
	--cb-space-sm: 1rem;     /* 16px */
	--cb-space-md: 1.5rem;   /* 24px */
	--cb-space-lg: 3rem;     /* 48px */
	--cb-space-xl: 6rem;     /* 96px — rythme vertical entre sections */

	/* --- Mise en page ----------------------------------------------------- */
	--cb-container-width: 1400px; /* Relevé : colonne de contenu de la maquette */
	--cb-container-padding: 1.5rem;
	--cb-grid-gap: 2rem;

	/* --- Interface -------------------------------------------------------- */
	--cb-radius-sm: 4px;   /* Badges */
	--cb-radius-md: 8px;   /* Pills de navigation, boutons */
	--cb-radius-lg: 16px;  /* Cartes, images */
	--cb-shadow-card: 0 8px 24px rgba(6, 0, 72, 0.10);
	--cb-shadow-card-hover: 0 12px 32px rgba(6, 0, 72, 0.16);
	--cb-transition: 200ms ease;
	--cb-tap-target: 44px; /* Zone cliquable minimale (WCAG 2.5.5) */
}