/* Fooko — Design tokens (site vitrine). Système visuel issu de la maquette Todjom.
   Voir docs/PLAN-INTEGRATION-MAQUETTE.md §1. Source unique de vérité (mappée sur le Kit Elementor). */
:root {
	/* ── Marque CBC Todjom ────────────────────────────────────────────────
	   Trois couleurs relevées sur le logo : bleu roi #0257AD, rouge #D81417,
	   marron #250906. Les surfaces sombres en sont dérivées (teinte 210°,
	   celle du bleu), pour que le logo se pose sur sa propre famille.

	   RÈGLE DURE — le rouge et le bleu ne se touchent jamais pour du texte
	   ou une icône : #D81417 sur #0257AD = 1,36:1. Dans le logo ils sont
	   toujours séparés par du blanc ; l'interface applique la même règle.
	   Sur fond sombre, l'accent passe par --fk-accent-on-dark (éclairci). */

	/* Surfaces sombres — dérivées du bleu du logo */
	--fk-navy: #0257ad;          /* Primaire — LE bleu du logo. Blanc 7,1:1 (AAA) */
	--fk-navy-2: #024c97;        /* Bande stats, événements — blanc 8,5:1 */
	--fk-navy-3: #0264c7;        /* Carte au survol, panneau formulaire — blanc 5,8:1 */
	--fk-navy-footer: #211f2c;   /* Pied de page — encre profonde, blanc 16,2:1 */

	/* Encre profonde — surface des sections d'échange (contact) et du pied de page.
	   Contrairement au bleu de marque, elle laisse le rouge du logo redevenir
	   lisible en texte : 4,6:1, contre 2,5:1 sur le bleu. */
	--fk-deep: #211f2c;          /* Blanc 16,2:1 */
	--fk-deep-2: #2a2739;        /* Panneau interne (formulaire) — blanc 14,0:1 */

	/* Bleu du logo (secondaire / interaction) */
	--fk-blue: #0257ad;          /* Emphase italique, CTA adhésion, flèches — blanc 7,1:1 */
	--fk-blue-600: #0366cc;      /* Survol CTA bleu */

	/* Rouge du logo (accent) — sur fond CLAIR ; voir --fk-accent-on-dark sinon */
	--fk-accent: #d81417;        /* Accent principal, boutons, hairlines — cream 4,8:1 */
	--fk-accent-ink: #b11013;    /* Eyebrow / petit texte sur fond clair — cream 6,6:1 */
	--fk-accent-600: #c61013;    /* Survol bouton — assombri : le blanc y garde 6,0:1 */
	--fk-accent-on-dark: #ffdcdc;/* Accent sur surface bleue — 5,6:1. Un rouge lisible n’existe
	                                pas sur ce fond (2,5:1) ; le logo écrit blanc sur son anneau. */
	--fk-accent-faint: #d65153;  /* Grands chiffres « étapes » — blanc 4,1:1 */
	--fk-accent-border: #e2888a; /* Bordure (bouton galerie) */
	--fk-badge-ink: #f7d4d4;     /* Texte badge catégorie (blog) */

	/* Filet contextuel — anneaux, tirets d'eyebrow, soulignements, hairlines.
	   Le rouge du logo ne s'accorde pas au bleu de marque (2,5:1, et l'œil le
	   lit comme une dissonance) : sur les surfaces bleues, les filets passent
	   au blanc, comme dans le logo où le blanc sépare toujours les deux
	   couleurs. Valeur par défaut = fond clair. */
	--fk-rule: var(--fk-accent);        /* filet plein */
	--fk-rule-soft: rgba(216, 20, 23, .5); /* filet atténué (anneaux) */

	/* Neutres clairs */
	--fk-bg: #f7f6f2;            /* Fond de page (cream) */
	--fk-surface: #ffffff;       /* Sections blanches */
	--fk-cream: #f7f6f2;
	--fk-border: #e7e4db;        /* Bordures de cartes */
	--fk-border-2: #ece9e1;      /* Séparateurs de sections */
	--fk-border-3: #e2e7ee;      /* Bordures images / froides */

	/* Texte sur fond clair — encre marron du logo (silhouette), 17,3:1 sur cream */
	--fk-text: #250906;          /* Titres & texte principal */
	--fk-text-2: #5c4f4c;        /* Paragraphes — 7,4:1 */
	--fk-text-3: #6c6260;        /* Légendes / dates — cream 5,5:1 · blanc 5,9:1 */
	--fk-text-soft: #4a3d3a;     /* Corps « à propos » */

	/* Texte sur navy */
	--fk-on-dark: #dde6ee;       /* Secondaire sur bleu — 5,6:1 · tient aussi sur le bleu clair (4,6:1) */
	--fk-on-dark-2: #dde7f3;     /* Liens nav sur navy */
	--fk-on-dark-3: #d5e1ee;     /* Accroche héros — 5,3:1 */
	--fk-on-dark-soft: #cfdbe8;  /* Topbar — 5,0:1 */
	--fk-on-dark-faint: #c4d3e2; /* Copyright footer — 4,7:1 */

	/* États */
	--fk-success: #1d9e75;
	--fk-warning: #ba7517;
	--fk-danger: #c2410c;
	--fk-info: #0257ad;

	/* Typo — Spectral (serif, titres) + Manrope (sans, corps) */
	--fk-font-heading: 'Spectral', Georgia, 'Times New Roman', serif;
	--fk-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Rayons — petits, distinctifs (cf. maquette) */
	--fk-radius-xs: 2px;         /* Boutons, badges */
	--fk-radius-sm: 3px;         /* Cartes */
	--fk-radius: 4px;            /* Cartes / formulaires */
	--fk-radius-lg: 6px;         /* Vignettes galerie */

	/* Ombres */
	--fk-shadow-sm: 0 1px 3px rgba(7, 33, 60, .06);
	--fk-shadow: 0 12px 30px -18px rgba(7, 33, 60, .55);
	--fk-shadow-lg: 0 24px 50px -18px rgba(7, 33, 60, .6);

	/* Espacement (base 8px) */
	--fk-space-xs: .5rem;
	--fk-space-sm: 1rem;
	--fk-space-md: 1.5rem;
	--fk-space-lg: 2rem;
	--fk-space-xl: 3rem;
	--fk-section-pad: 96px;      /* Padding vertical de section (desktop) */

	/* Transitions */
	--fk-transition: .25s cubic-bezier(.16, .84, .44, 1);

	/* Layout */
	--fk-container: 1240px;

	/* Letterspacing signature (eyebrow) */
	--fk-eyebrow-tracking: 0.26em;
}

/* Surfaces bleues : filets blancs et accent typographique blanc. */
.fk-header,
.fk-menu,
.fk-bg-navy,
.fk-bg-navy2,
.fk-card--dark,
.fk-article__hero,
.fk-donpage__hero,
.fk-way--primary,
.fk-form-panel {
	--fk-rule: rgba(255, 255, 255, .85);
	--fk-rule-soft: rgba(255, 255, 255, .45);
	--fk-accent-on-dark: #ffffff;
}

body {
	font-family: var(--fk-font-body);
	color: var(--fk-text);
	background: var(--fk-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--fk-font-heading);
	letter-spacing: -0.01em;
	color: var(--fk-text);
}
::selection {
	background: var(--fk-blue);
	color: #fff;
}