/* Fooko — Chrome (en-tête + pied de page). Fidèle à la maquette Todjom.
   Couleurs/typo/rayons dérivés de tokens.css (aucune valeur de marque en dur). */

/* Ancres : s'arrêtent sous le header collant + défilement doux. */
html { scroll-behavior: smooth; scroll-padding-top: 116px; }
@media (max-width: 760px) { html { scroll-padding-top: 80px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.fk-container {
	max-width: var(--fk-container);
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
}

/* ============================ EN-TÊTE ============================ */
.fk-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(2, 87, 173, 0.90); /* navy translucide */
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Topbar */
.fk-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	color: var(--fk-on-dark-soft);
	font-size: 12.5px;
	letter-spacing: 0.02em;
}
.fk-topbar__loc { display: inline-flex; align-items: center; gap: 7px; }
.fk-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--fk-rule); display: inline-block; }
.fk-topbar__meta { display: flex; align-items: center; gap: 18px; }
.fk-topbar__meta a { color: var(--fk-on-dark-soft); transition: color var(--fk-transition); }
.fk-topbar__meta a:hover { color: #fff; }
.fk-topbar__sep { opacity: .4; }

/* Barre principale */
.fk-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Marque */
.fk-brand { display: flex; align-items: center; gap: 13px; }
.fk-brand__mono {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1.5px solid var(--fk-rule);
	display: flex; align-items: center; justify-content: center;
	color: #fff; font-family: var(--fk-font-heading); font-weight: 600; font-size: 20px;
}
.fk-brand__text { display: flex; flex-direction: column; line-height: 1; }
.fk-brand__name { font-family: var(--fk-font-heading); font-size: 22px; font-weight: 600; color: #fff; letter-spacing: 0.02em; }
.fk-brand__sub { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fk-accent-on-dark); margin-top: 4px; }
/* Pastille blanche du logo : les fonds de marque sont sombres et un logo coloré y
   perdrait son contraste. Le blanc reprend la séparation que le logo applique
   lui-même entre ses deux couleurs. */
.fk-brand__mark {
	width: 42px; height: 42px; flex: none; border-radius: 50%;
	background: #fff; padding: 3px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.fk-brand__logo { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Navigation */
.fk-nav__list { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.fk-nav__list a {
	color: var(--fk-on-dark-2); font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
	padding: 6px 0; border-bottom: 1.5px solid transparent; transition: color var(--fk-transition), border-color var(--fk-transition);
}
.fk-nav__list a:hover,
.fk-nav__list .current-menu-item > a { color: #fff; border-bottom-color: var(--fk-rule); }

/* Actions */
.fk-actions { display: flex; align-items: center; gap: 14px; }
.fk-actions__member { display: inline-flex; align-items: center; gap: 7px; color: var(--fk-on-dark-2); font-size: 13.5px; font-weight: 600; transition: color var(--fk-transition); }
.fk-actions__member:hover { color: #fff; }
.fk-actions__ring { width: 7px; height: 7px; border: 1.5px solid var(--fk-rule); border-radius: 50%; display: inline-block; }

/* Boutons */
.fk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--fk-font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em;
	border-radius: var(--fk-radius-xs); transition: background var(--fk-transition), border-color var(--fk-transition), color var(--fk-transition); cursor: pointer;
}
/* Garde-fou, à garder AVANT les variantes : le reset d'Elementor applique
   `a:hover { color: #333366 }` à tout lien. Une variante qui ne redéclare pas sa
   couleur au survol voyait donc son libellé virer au bleu-violet sombre, illisible
   sur rouge comme sur navy. On rétablit le blanc par défaut ; les variantes qui
   veulent autre chose le redéclarent plus bas (même spécificité, l'ordre tranche). */
.fk-btn:hover,
.fk-btn:focus-visible { color: #fff; }

/* Inversion au survol — même logique que .fk-cta-outline sur fond clair : le contour
   se remplit. Les trois emplacements du bouton sont sur navy (en-tête ×2, héros
   « Faire un don ») : navy sur blanc tient à 7,1:1. */
.fk-btn--ghost { padding: 10px 18px; border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; background: transparent; }
.fk-btn--ghost:hover,
.fk-btn--ghost:focus-visible { background: #fff; border-color: #fff; color: var(--fk-navy); }
.fk-btn--ghost:focus-visible { outline: 2px solid var(--fk-rule); outline-offset: 2px; }

/* Icônes du sprite (inc/icons.php) : le dessin hérite de la couleur du contexte. */
.fk-icon { display: block; flex: 0 0 auto; }

.fk-btn--gold { padding: 10px 20px; background: var(--fk-accent); color: #fff; font-weight: 700; border: 1px solid var(--fk-accent); }
/* Le blanc est redit ici plutôt que laissé au garde-fou : la variante reste lisible
   seule, et ne dépend pas de l'ordre des règles. Blanc sur --fk-accent-600 : 6,0:1. */
.fk-btn--gold:hover,
.fk-btn--gold:focus-visible { background: var(--fk-accent-600); border-color: var(--fk-accent-600); color: #fff; }
.fk-btn--gold:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Burger (icône 3 lignes animée) */
.fk-burger {
	display: none; align-items: center; justify-content: center;
	width: 46px; height: 46px; background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--fk-radius-xs);
	cursor: pointer; line-height: 0; padding: 0;
	transition: border-color var(--fk-transition);
}
.fk-burger:hover, .fk-burger[aria-expanded="true"] { border-color: var(--fk-rule); }
.fk-burger:focus-visible { outline: 2px solid var(--fk-rule); outline-offset: 2px; }
.fk-burger__box { position: relative; width: 22px; height: 14px; }
.fk-burger__line, .fk-burger__line::before, .fk-burger__line::after {
	position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: #fff;
}
.fk-burger__line { top: 50%; transform: translateY(-50%); transition: width .25s; }
.fk-burger__line::before { content: ""; top: -7px; transition: top .2s .2s, transform .25s; }
.fk-burger__line::after  { content: ""; top: 7px;  width: 15px; transition: top .2s .2s, width .25s, transform .25s; }
.fk-burger:hover .fk-burger__line::after { width: 22px; }

/* Menu plein écran new-gen */
.fk-menu {
	position: fixed; inset: 0; z-index: 200; display: none; flex-direction: column;
	background: radial-gradient(130% 90% at 85% -10%, #0264c7 0%, #0257ad 52%);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .45s cubic-bezier(.16,.84,.44,1), transform .45s cubic-bezier(.16,.84,.44,1), visibility .45s;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.fk-menu.is-open { opacity: 1; visibility: visible; transform: none; }
body.fk-menu-open { overflow: hidden; }

.fk-menu__head { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.fk-menu__close { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,0.28); border-radius: var(--fk-radius-xs); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--fk-transition); padding: 0; }
.fk-menu__close:hover { border-color: var(--fk-rule); }
.fk-menu__close-box { position: relative; width: 20px; height: 20px; }
.fk-menu__close-line::before, .fk-menu__close-line::after { content: ""; position: absolute; top: 50%; left: 0; width: 20px; height: 2px; border-radius: 2px; background: #fff; }
.fk-menu__close-line::before { transform: translateY(-50%) rotate(45deg); }
.fk-menu__close-line::after  { transform: translateY(-50%) rotate(-45deg); }
.fk-menu__close:hover .fk-menu__close-line::before, .fk-menu__close:hover .fk-menu__close-line::after { background: var(--fk-accent); }

.fk-menu__nav { flex: 1 1 auto; display: flex; align-items: center; padding-top: 14px; padding-bottom: 14px; }
.fk-mnav { list-style: none; margin: 0; padding: 0; width: 100%; counter-reset: fkm; }
.fk-mnav li { counter-increment: fkm; border-bottom: 1px solid rgba(255,255,255,0.08); opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s cubic-bezier(.16,.84,.44,1); }
.fk-mnav li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.fk-menu.is-open .fk-mnav li { opacity: 1; transform: none; }
.fk-menu.is-open .fk-mnav li:nth-child(1) { transition-delay: .12s; }
.fk-menu.is-open .fk-mnav li:nth-child(2) { transition-delay: .18s; }
.fk-menu.is-open .fk-mnav li:nth-child(3) { transition-delay: .24s; }
.fk-menu.is-open .fk-mnav li:nth-child(4) { transition-delay: .30s; }
.fk-menu.is-open .fk-mnav li:nth-child(5) { transition-delay: .36s; }
.fk-menu.is-open .fk-mnav li:nth-child(6) { transition-delay: .42s; }
.fk-menu.is-open .fk-mnav li:nth-child(7) { transition-delay: .48s; }
.fk-mnav a { display: flex; align-items: baseline; gap: 18px; padding: 17px 4px; font-family: var(--fk-font-heading); font-size: clamp(26px, 8vw, 34px); font-weight: 500; color: #fff; letter-spacing: -0.01em; line-height: 1.05; transition: color .25s, padding-left .25s; }
.fk-mnav a::before { content: counter(fkm, decimal-leading-zero); font-family: var(--fk-font-body); font-size: 12px; font-weight: 600; color: var(--fk-accent-on-dark); letter-spacing: 0.1em; transform: translateY(-2px); }
.fk-mnav a:hover, .fk-mnav .current-menu-item > a { color: var(--fk-accent-on-dark); padding-left: 12px; }

.fk-menu__foot { display: flex; flex-direction: column; gap: 20px; padding-top: 22px; padding-bottom: 30px; }
.fk-menu__member { display: inline-flex; align-items: center; gap: 8px; color: var(--fk-on-dark-2); font-size: 14px; font-weight: 600; align-self: flex-start; }
.fk-menu__member:hover { color: #fff; }
.fk-menu__ctas { display: flex; gap: 12px; }
.fk-menu__ctas .fk-btn { flex: 1; padding: 15px 12px; font-size: 14.5px; white-space: nowrap; }
.fk-menu__contact { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: var(--fk-on-dark-faint); font-size: 13px; }
.fk-menu__contact a { color: var(--fk-on-dark); }
.fk-menu__contact a:hover { color: var(--fk-accent-on-dark); }

@media (prefers-reduced-motion: reduce) {
	.fk-menu, .fk-mnav li { transition: none !important; }
}

/* ============================ PIED DE PAGE ============================ */
.fk-footer { position: relative; overflow: hidden; background: var(--fk-navy-footer); color: var(--fk-on-dark); }
/* Texture ndop (tissu royal bamiléké) en filigrane — héritage CBC TODJOM, au seuil de perception. */
.fk-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/textures/ndop.png) repeat;
	background-size: 440px auto;
	opacity: 0.06;
	mix-blend-mode: screen;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 100%);
	pointer-events: none;
	z-index: 0;
}
.fk-footer__inner { position: relative; z-index: 1; padding-top: 64px; }
.fk-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; padding-bottom: 52px; }
.fk-footer__brand { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.fk-footer__brand .fk-brand__mono { width: 40px; height: 40px; font-size: 18px; }
.fk-footer__brand .fk-brand__mark { width: 40px; height: 40px; }
.fk-footer__brand .fk-brand__name { font-size: 21px; }
.fk-footer__brandcol { max-width: 340px; }
.fk-footer__blurb { font-size: 14.5px; line-height: 1.7; margin: 0 0 24px; }
.fk-socials { display: flex; gap: 12px; }
.fk-socials__link { width: 38px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fk-on-dark-2); font-size: 14px; transition: color var(--fk-transition), border-color var(--fk-transition); }
.fk-socials__link:hover { border-color: var(--fk-rule); color: var(--fk-accent-on-dark); }
.fk-footer__title { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 20px; }
.fk-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fk-footer__links a { font-size: 14.5px; color: var(--fk-on-dark); transition: color var(--fk-transition); }
.fk-footer__links a:hover { color: #fff; }
.fk-footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 24px 0; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: 13px; color: var(--fk-on-dark-faint); }
.fk-footer__legal-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 15px; }
/* Signature du studio : présente, jamais bruyante — séparée par une puce fine. */
.fk-footer__credit { position: relative; padding-left: 15px; }
.fk-footer__credit::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.45; transform: translateY(-50%); }
.fk-footer__credit a { color: var(--fk-on-dark-soft); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.22); text-underline-offset: 3px; transition: color var(--fk-transition), text-decoration-color var(--fk-transition); }
.fk-footer__credit a:hover { color: var(--fk-accent-on-dark); text-decoration-color: currentColor; }
.fk-footer__legal-links { display: flex; gap: 24px; }
.fk-footer__legal-links a { color: var(--fk-on-dark-faint); transition: color var(--fk-transition); }
.fk-footer__legal-links a:hover { color: var(--fk-accent-on-dark); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 980px) {
	.fk-nav, .fk-actions { display: none !important; }
	.fk-burger { display: inline-flex; }
	.fk-menu { display: flex; }
	.fk-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (min-width: 981px) {
	.fk-menu { display: none !important; }
}
@media (max-width: 760px) {
	.fk-topbar { display: none; }
	.fk-container { padding-left: 24px; padding-right: 24px; }

	/* Pied de page mobile-first : compact, lisible, texture au chuchotement. */
	.fk-footer__inner { padding-top: 44px; }
	/* Marque pleine largeur, puis les deux listes côte à côte pour exploiter l'espace. */
	.fk-footer__grid { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 32px; padding-bottom: 36px; }
	.fk-footer__brandcol { grid-column: 1 / -1; max-width: none; }
	.fk-footer__brand { margin-bottom: 18px; }
	.fk-footer__blurb { font-size: 14px; margin-bottom: 20px; }
	.fk-footer__title { margin-bottom: 16px; }
	.fk-footer__links { gap: 14px; }
	.fk-footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0; }
	.fk-footer__legal-copy { flex-direction: column; align-items: flex-start; gap: 8px; }
	.fk-footer__credit { padding-left: 0; }
	.fk-footer__credit::before { display: none; }
	/* La texture, plus fine et plus discrète sur petit écran. */
	.fk-footer::before {
		background-size: 300px auto;
		opacity: 0.04;
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 100%);
	}
}
@media (max-width: 480px) {
	.fk-container { padding-left: 18px; padding-right: 18px; }
	.fk-header__bar { padding-top: 13px; padding-bottom: 13px; }
	.fk-brand__mono { width: 38px; height: 38px; font-size: 18px; }
	.fk-brand__name { font-size: 19px; }
	.fk-footer__inner { padding-top: 38px; }
	.fk-footer__grid { gap: 28px; }
}