/* Fooko — Classes pour la composition Elementor (page Accueil), maquette Todjom.
   100 % widgets natifs : ces classes (champ « Classes CSS ») portent la fidélité.
   NB : `!important` est utilisé volontairement pour neutraliser les défauts du Kit/
   framework Elementor (couleurs de titre, largeurs de conteneur non émises par le
   contrôle natif). Cas documenté — cf. docs/PLAN-INTEGRATION-MAQUETTE.md. */

/* ===================== Grille flex maîtrisée ===================== */
.fk-row { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; row-gap: 28px; width: 100%; }
.fk-row--center { align-items: center; }
.fk-row--bottom { align-items: flex-end; }
.fk-row--start { align-items: flex-start; }
.fk-w-23 { flex: 0 0 23%; max-width: 23%; }
.fk-w-31 { flex: 0 0 31%; max-width: 31%; }
.fk-w-34 { flex: 0 0 34%; max-width: 34%; }
.fk-w-42 { flex: 0 0 42%; max-width: 42%; }
.fk-w-46 { flex: 0 0 46%; max-width: 46%; }
.fk-w-48 { flex: 0 0 48%; max-width: 48%; }
.fk-w-54 { flex: 0 0 54%; max-width: 54%; }
.fk-w-60 { flex: 0 0 60%; max-width: 60%; }
.fk-stat-cell { flex: 0 0 24.5%; max-width: 24.5%; }
.fk-hero-col { width: 100%; max-width: 760px; }
.fk-flex1 { flex: 1 1 0; min-width: 0; }
.fk-fixed-num { flex: 0 0 34px; max-width: 34px; }
.fk-event-daycol { flex: 0 0 62px; max-width: 62px; }
@media (max-width: 980px) {
	.fk-w-23, .fk-w-31, .fk-w-34, .fk-w-42, .fk-w-46, .fk-w-48, .fk-w-54, .fk-w-60 { flex-basis: 100%; max-width: 100%; }
	.fk-stat-cell { flex-basis: 50%; max-width: 50%; }
}

/* ===================== Gabarit conteneur (1240 + gouttière 32, comme la maquette) ===================== */
.elementor-element.fk-wrap { width: 100%; max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
@media (max-width: 760px) { .elementor-element.fk-wrap { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 480px) { .elementor-element.fk-wrap { padding-left: 18px; padding-right: 18px; } }

/* ===================== Sections : fonds ===================== */
.fk-bg-navy   { background-color: var(--fk-navy) !important; }
.fk-bg-navy2  { background-color: var(--fk-navy-2) !important; }
.fk-bg-cream  { background-color: var(--fk-cream) !important; }
.fk-bg-white  { background-color: var(--fk-surface) !important; }
/* Surface marron : redéfinit localement les tokens contextuels, car le rouge du
   logo redevient lisible sur ce fond (5,4:1) alors qu'il ne l'est pas sur le bleu. */
.fk-bg-deep, .fk-bg-brown {
	background-color: var(--fk-deep) !important;
	/* Sur l'encre profonde, le rouge du logo tient (4,6:1) : les filets le gardent. */
	--fk-rule: #f15053;
	--fk-rule-soft: rgba(241, 80, 83, .55);
	/* Tout ce qui, à l'intérieur, se peignait sur le bleu suit cette surface :
	   panneau du formulaire (--fk-navy-3), champs de saisie (--fk-navy). */
	--fk-navy: var(--fk-deep-2);
	--fk-navy-3: #333047;
	--fk-accent-on-dark: #f15053;   /* le rouge du logo redevient lisible ici (4,6:1) */
}
.fk-border-top { border-top: 1px solid var(--fk-border-2) !important; }

/* Étoffe ndop en filigrane sur une section sombre — même texture et même logique
   qu'au pied de page (voir chrome.css), mais un cran plus présente : le navy des
   sections est bien plus clair que l'encre du pied de page, la trame s'y voit moins.
   Le blanc du motif éclaircit le fond de 7,5 % au plus : le blanc du texte reste
   au-dessus de 6:1, bien au-delà du seuil AA.
   Les deux sélecteurs d'accueil accrochent l'effet sur la page déjà publiée, en
   attendant qu'elle soit régénérée avec la classe (voir tools/build-accueil.php) :
   — `#services` : la section Services, par son ancre ;
   — l'Agenda n'a pas d'ancre et partage `fk-bg-navy2` avec la bande de statistiques,
     d'où le `:has()` sur sa grille, qui ne désigne qu'elle. */
.fk-ndop,
#services,
.fk-bg-navy2:has(.fk-evgrid) { position: relative; overflow: hidden; }
.fk-ndop::after,
#services::after,
.fk-bg-navy2:has(.fk-evgrid)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(../img/textures/ndop.png) repeat;
	/* 300px, pas les 440px du pied de page : à grande échelle les motifs se lisent
	   un par un et concurrencent le titre ; resserrés, ils redeviennent une étoffe. */
	background-size: 300px auto;
	opacity: .075;
	mix-blend-mode: screen;
	/* Fondu au raccord de la section précédente : la trame s'installe au lieu de trancher. */
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
	pointer-events: none;
	z-index: 0;
}
.fk-ndop > *,
#services > *,
.fk-bg-navy2:has(.fk-evgrid) > * { position: relative; z-index: 1; }

/* ===================== Héros (slider 2 images, fidèle maquette) ===================== */
.fk-hero { position: relative; }
.fk-hero > .e-con { position: relative; z-index: 2; }
.fk-hero .fk-herobgw { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; }
.fk-hero .fk-herobgw .elementor-widget-container { position: absolute; inset: 0; }
.fk-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.fk-hero-bg .fk-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition: opacity 1.1s ease; animation: fkken 24s ease-in-out infinite alternate; }
.fk-hero-bg .fk-hero-img.is-active { opacity: 1; }
.fk-hero-grad1 { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,18,34,0.92) 0%, rgba(8,18,34,0.66) 42%, rgba(8,18,34,0.3) 72%, rgba(8,18,34,0.2) 100%); }
.fk-hero-grad2 { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,18,34,0.45) 0%, rgba(8,18,34,0) 35%); }
.fk-hero-ctrl { position: absolute; right: 32px; bottom: 34px; z-index: 6; display: flex; align-items: center; gap: 14px; }
.fk-hero-dots { display: flex; gap: 8px; margin-right: 4px; }
.fk-dot-btn { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.45); transition: background .3s; }
.fk-dot-btn.is-on { background: var(--fk-rule); }
.fk-hero-prev, .fk-hero-next { width: 48px; height: 48px; border: 1px solid rgba(255,255,255,0.4); background: rgba(8,18,34,0.35); backdrop-filter: blur(6px); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; font-size: 22px; line-height: 0; transition: background .25s, color .25s, border-color .25s; }
.fk-hero-prev:hover, .fk-hero-next:hover { background: var(--fk-accent); color: #fff; border-color: var(--fk-rule); }
@keyframes fkken { 0% { transform: scale(1.06) translate(0,0); } 100% { transform: scale(1.16) translate(-1.5%,-1.5%); } }

/* ===================== Marquees (galerie + partenaires, fidèle maquette) ===================== */
.fk-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.fk-marquee__track { display: flex; gap: 18px; width: max-content; animation: fkscroll 55s linear infinite; }
.fk-marquee__track--rev { animation: fkscrollrev 67s linear infinite; }
.fk-marquee:hover .fk-marquee__track { animation-play-state: paused; }
.fk-gcard { position: relative; flex: 0 0 auto; height: 230px; border-radius: 6px; overflow: hidden; background: #0257ad; box-shadow: 0 12px 30px -18px rgba(2,87,173,0.55); }
.fk-gcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-gcard__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 18px 16px; background: linear-gradient(0deg, rgba(8,18,34,0.9) 0%, rgba(8,18,34,0) 100%); display: flex; align-items: center; gap: 9px; }
.fk-gcard__label .line { width: 18px; height: 1px; background: var(--fk-accent); flex: 0 0 auto; }
.fk-gcard__label .txt { color: #fff; font-size: 13px; font-weight: 600; }
.fk-gallerycta { text-align: center; margin-top: 34px; }
.fk-gallerybtn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 26px; background: var(--fk-surface); color: var(--fk-text); border: 1px solid var(--fk-accent-border); border-radius: var(--fk-radius-xs); font-size: 14px; font-weight: 600; transition: background var(--fk-transition), color var(--fk-transition), border-color var(--fk-transition); }
.fk-gallerybtn:hover { background: var(--fk-blue); color: #fff; border-color: var(--fk-blue); }
.fk-gallerybtn span { transition: transform var(--fk-transition); }
.fk-gallerybtn:hover span { transform: translateX(4px); }
@keyframes fkscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes fkscrollrev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.fk-pmarquee { position: relative; overflow: hidden; border: 1px solid #ececec; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.fk-pmarquee__track { display: flex; align-items: center; gap: 1px; width: max-content; background: #ececec; animation: fkscroll 38s linear infinite; }
.fk-pmarquee:hover .fk-pmarquee__track { animation-play-state: paused; }
.fk-pcell { flex: 0 0 auto; width: 230px; height: 130px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 26px; }
.fk-pcell img { max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0.92; transition: opacity .35s, transform .35s; }
.fk-pcell img:hover { opacity: 1; transform: scale(1.06); }
/* Partenaire sans logo : nom en toutes lettres, traité comme un cartouche typographique. */
.fk-pcell--word { text-align: center; }
.fk-pcell--word span { font-family: var(--fk-font-heading); font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--fk-text-2); letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) {
	.fk-marquee__track, .fk-pmarquee__track, .fk-hero-bg .fk-hero-img { animation: none !important; }
}

/* ===================== Eyebrow signature ===================== */
.fk-eyebrow.elementor-widget-heading { display: inline-flex; align-items: center; gap: 10px; }
.fk-eyebrow .elementor-heading-title { color: var(--fk-accent-ink) !important; font-family: var(--fk-font-body) !important; font-size: 12.5px; letter-spacing: var(--fk-eyebrow-tracking); text-transform: uppercase; font-weight: 600 !important; }
.fk-eyebrow .elementor-widget-container { display: inline; }
.fk-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--fk-rule); display: inline-block; }
.fk-eyebrow--center::after { content: ""; width: 32px; height: 1px; background: var(--fk-accent); display: inline-block; }
.fk-eyebrow--on-dark .elementor-heading-title { color: var(--fk-accent-on-dark) !important; }

/* ===================== Titres display (Spectral) ===================== */
.fk-display .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-weight: 500 !important; line-height: 1.12; letter-spacing: -0.01em; }
.fk-h1 .elementor-heading-title { font-size: 72px; line-height: 1.06; color: #fff !important; }
.fk-h2 .elementor-heading-title { font-size: 44px; }
.fk-on-dark .elementor-heading-title, .fk-on-dark .elementor-widget-container { color: #fff !important; }

/* ===================== Textes ===================== */
.fk-hero-lead .elementor-widget-container, .fk-hero-lead p { color: var(--fk-on-dark-3) !important; font-size: 19px !important; line-height: 1.7 !important; margin: 0; }
.fk-muted-dark .elementor-widget-container, .fk-muted-dark p { color: var(--fk-on-dark) !important; font-size: 16px !important; line-height: 1.75 !important; margin: 0; }
.fk-body .elementor-widget-container, .fk-body p { color: var(--fk-text-2); font-size: 16px !important; line-height: 1.7 !important; margin: 0; }
.fk-body--about .elementor-widget-container, .fk-body--about p { color: var(--fk-text-soft); font-size: 16.5px !important; line-height: 1.8 !important; }
.fk-lead .elementor-widget-container, .fk-lead p { font-family: var(--fk-font-heading) !important; font-weight: 400 !important; font-size: 32px !important; line-height: 1.5 !important; color: var(--fk-text); }
.fk-lead em, .fk-lead p em { font-style: italic; color: var(--fk-blue) !important; }

/* ===================== Boutons (widget Bouton) ===================== */
.fk-cta-gold .elementor-button { background: var(--fk-accent) !important; color: #fff !important; border-radius: var(--fk-radius-xs); font-weight: 700 !important; font-size: 15px; letter-spacing: 0.02em; padding: 16px 30px; transition: background var(--fk-transition); }
.fk-cta-gold .elementor-button:hover { background: var(--fk-accent-600) !important; }
.fk-cta-blue .elementor-button { background: var(--fk-blue) !important; color: #fff !important; border-radius: var(--fk-radius-xs); font-weight: 700 !important; font-size: 15px; padding: 16px 34px; }
.fk-cta-blue .elementor-button:hover { background: var(--fk-blue-600) !important; }
.fk-cta-ghost .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.32) !important; border-radius: var(--fk-radius-xs); font-weight: 600 !important; font-size: 15px; padding: 16px 30px; }
.fk-cta-ghost .elementor-button:hover { border-color: #fff !important; background: transparent !important; }
.fk-cta-outline .elementor-button { background: var(--fk-surface) !important; color: var(--fk-text) !important; border: 1px solid var(--fk-accent-border) !important; border-radius: var(--fk-radius-xs); font-weight: 600; }
.fk-cta-outline .elementor-button:hover { background: var(--fk-blue) !important; color: #fff !important; border-color: var(--fk-blue) !important; }
.fk-linkgold .elementor-button { background: transparent !important; color: var(--fk-accent-ink) !important; padding: 0 0 6px !important; border: 0 !important; border-bottom: 1px solid var(--fk-rule) !important; border-radius: 0 !important; font-weight: 600; font-size: 14.5px; fill: var(--fk-accent-ink); }
.fk-linkgold .elementor-button:hover { background: transparent !important; color: var(--fk-accent) !important; }
.fk-linkgold--on-dark .elementor-button { color: var(--fk-accent-on-dark) !important; }

/* ===================== Bande stats (Compteur) ===================== */
.fk-stat .elementor-counter-number-wrapper,
.fk-stat .elementor-counter-number-wrapper .elementor-counter-number,
.fk-stat .elementor-counter-number-wrapper > * { font-family: var(--fk-font-heading) !important; font-size: 44px; font-weight: 600; color: #fff !important; line-height: 1; }
.fk-stat .elementor-counter-title { margin-top: 10px; color: var(--fk-on-dark) !important; font-size: 13.5px; letter-spacing: 0.04em; font-weight: 400; }
.fk-stat { border-right: 1px solid rgba(255,255,255,0.08); padding: 38px 28px; text-align: left; }

/* ===================== Grille services à filets (maquette) ===================== */
.elementor-element.fk-svcgrid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); width: 100%; }
.fk-svcgrid .fk-card--dark { border-radius: 0; height: 100%; }
@media (max-width: 980px) { .elementor-element.fk-svcgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .elementor-element.fk-svcgrid { grid-template-columns: 1fr; } }

/* ===================== Cartes numérotées ===================== */
.fk-card { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius-sm); padding: 40px 32px; height: 100%; transition: background var(--fk-transition); }
.fk-card--dark { background: var(--fk-navy); border: 0; }
.fk-card--dark:hover { background: var(--fk-navy-3); }
.fk-num-ring .elementor-heading-title { width: 46px; height: 46px; border: 1px solid var(--fk-rule-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fk-accent) !important; font-family: var(--fk-font-heading) !important; font-size: 18px; font-weight: 600; }
.fk-num-big .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-size: 56px; font-weight: 300; color: var(--fk-accent-faint) !important; line-height: 1; }
.fk-card-h .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-weight: 600 !important; font-size: 22px; color: var(--fk-text); }
.fk-card--dark .fk-card-h .elementor-heading-title { color: #fff; }
.fk-card-p .elementor-widget-container, .fk-card-p p { color: var(--fk-text-2); font-size: 14.5px !important; line-height: 1.7 !important; margin: 0; }
.fk-card--dark .fk-card-p .elementor-widget-container, .fk-card--dark .fk-card-p p { color: var(--fk-on-dark); }

/* ===================== Valeurs « à propos » ===================== */
.fk-value-num.elementor-widget-heading { flex: 0 0 34px; }
.fk-value-num .elementor-heading-title { width: 34px; height: 34px; border: 1px solid var(--fk-accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fk-accent-ink) !important; font-family: var(--fk-font-heading) !important; font-weight: 600; font-size: 15px; }
.fk-value-h .elementor-heading-title { font-weight: 700; font-size: 15.5px; color: var(--fk-text); font-family: var(--fk-font-body) !important; }

/* ===================== À propos : badge année ===================== */
.fk-overlap { position: relative; }
.fk-year-badge { position: absolute; left: 0; bottom: 28px; background: var(--fk-accent); padding: 18px 24px; border-radius: 0 2px 2px 0; z-index: 2; }
.fk-year-badge .elementor-widget-container { display: block; }
.fk-year-badge .fk-year { font-family: var(--fk-font-heading); font-size: 30px; font-weight: 700; line-height: 1; color: #fff; display: block; }
.fk-year-badge .fk-year-label { font-size: 12px; letter-spacing: 0.06em; margin-top: 6px; color: #f8fafc; display: block; }
.fk-img-portrait img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--fk-radius-sm); width: 100%; display: block; }

/* ===================== Conseil ===================== */
.fk-board-name .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-weight: 600; font-size: 18px; color: var(--fk-text); }
.fk-board-role .elementor-widget-container { color: var(--fk-accent-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }

/* ===================== Événements ===================== */
.fk-event { border-top: 1px solid rgba(255,255,255,0.1); padding: 20px 0; }
.fk-event-day .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-size: 26px; font-weight: 600; color: #fff !important; line-height: 1; }
.fk-event-month .elementor-widget-container { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fk-accent-on-dark) !important; }
.fk-event-title .elementor-heading-title { font-weight: 700; font-size: 16px; color: #fff !important; font-family: var(--fk-font-body) !important; }
.fk-event-place .elementor-widget-container { color: var(--fk-on-dark) !important; font-size: 13.5px; }

/* ===================== Galerie / Partenaires (carrousel) ===================== */
.fk-partners .elementor-image-carousel img { max-height: 64px; width: auto !important; margin: 0 auto; filter: grayscale(1); opacity: 0.85; transition: filter var(--fk-transition), opacity var(--fk-transition), transform var(--fk-transition); }
.fk-partners .elementor-image-carousel img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.06); }
.fk-gallery .elementor-image-carousel img { height: 230px; object-fit: cover; border-radius: var(--fk-radius-lg); }

/* ===================== Carte blog ===================== */
.fk-blog-card { background: var(--fk-surface); border: 1px solid var(--fk-border); border-radius: var(--fk-radius); overflow: hidden; height: 100%; transition: transform var(--fk-transition), box-shadow var(--fk-transition); }
.fk-blog-card:hover { transform: translateY(-6px); box-shadow: var(--fk-shadow); }
.fk-blog-badge { display: inline-block; background: rgba(2,87,173,0.86); color: var(--fk-badge-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: var(--fk-radius-xs); }
.fk-blog-date .elementor-widget-container { color: var(--fk-text-3); font-size: 12.5px; letter-spacing: 0.04em; }
.fk-blog-h .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--fk-text); }
.fk-blog-p .elementor-widget-container, .fk-blog-p p { color: var(--fk-text-2); font-size: 14.5px !important; line-height: 1.7 !important; margin: 0; }
.fk-blog-more .elementor-widget-container { color: var(--fk-accent-ink); font-size: 13.5px; font-weight: 700; }

/* ===================== Contact ===================== */
/* Markup Elementor « optimisé » : les widgets n'ont pas de .elementor-widget-container.
   Le picto est un widget HTML (SVG inline, plus d'emoji), le libellé un text-editor :
   on cible donc les classes directement. SVG hérite l'or via currentColor. */
.fk-contact-icon { flex: 0 0 42px; width: 42px; height: 42px; box-sizing: border-box; padding: 0; border: 1px solid var(--fk-rule-soft); border-radius: 50%; color: var(--fk-accent); display: flex; align-items: center; justify-content: center; }
.fk-contact-icon svg { width: 19px; height: 19px; display: block; }
.fk-contact-label, .fk-contact-label > * { color: var(--fk-on-dark-2) !important; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.35; }
.fk-contact-val, .fk-contact-val .elementor-heading-title { color: #fff !important; font-size: 16px; font-weight: 600; font-family: var(--fk-font-body) !important; }
.fk-form-panel { background: var(--fk-navy-3); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--fk-radius); padding: 40px; }
.fk-form-note .elementor-widget-container { color: var(--fk-on-dark) !important; font-size: 14px; line-height: 1.7; }
.fk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fk-form .fk-field { display: flex; flex-direction: column; gap: 8px; }
.fk-form .fk-field--full { grid-column: 1 / -1; }
.fk-form label { color: var(--fk-on-dark); font-size: 12.5px; letter-spacing: 0.04em; }
.fk-form input, .fk-form textarea { background: var(--fk-navy); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--fk-radius-xs); padding: 13px 14px; color: #fff; font-family: var(--fk-font-body); font-size: 14px; outline: none; }
.fk-form input::placeholder, .fk-form textarea::placeholder { color: var(--fk-text-3); }
.fk-form textarea { resize: vertical; }
.fk-form .fk-submit { grid-column: 1 / -1; margin-top: 4px; padding: 15px; background: var(--fk-accent); color: #fff; border: none; border-radius: var(--fk-radius-xs); font-family: var(--fk-font-body); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; transition: background var(--fk-transition); }
.fk-form .fk-submit:hover { background: var(--fk-accent-600); }

/* Bandeau stats : bordure gauche (cf. maquette) */
.fk-statband { border-left: 1px solid rgba(255,255,255,0.08); }

/* ===================== Centrage ===================== */
.fk-center { text-align: center; }
.fk-center.fk-row, .fk-center > .e-con-inner { justify-content: center; }

/* ===================== Typo responsive (titres / lead) ===================== */
@media (max-width: 1180px) {
	.fk-h2 .elementor-heading-title { font-size: 38px; }
}
@media (max-width: 760px) {
	.fk-h1 .elementor-heading-title { font-size: 38px; line-height: 1.1; }
	.fk-h2 .elementor-heading-title { font-size: 31px; line-height: 1.18; }
	.fk-lead, .fk-lead .elementor-widget-container { font-size: 23px; }
	.fk-hero-lead .elementor-widget-container { font-size: 17px; }
}
@media (max-width: 480px) {
	.fk-h1 .elementor-heading-title { font-size: 32px; }
	.fk-h2 .elementor-heading-title { font-size: 26px; }
}

/* ===================== Rails (Conseil + Blog) + Événements — fidèles maquette ===================== */
.fk-rail { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; }
.fk-rail::-webkit-scrollbar { display: none; }
/* Anneau bleu plein : le filet crème d'origine (1,5:1 sur blanc) ne se voyait pas. */
.fk-arrow { width: 48px; height: 48px; border: 1.5px solid var(--fk-blue); background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fk-blue); line-height: 0; transition: background .25s, color .25s, border-color .25s, box-shadow .25s, opacity .25s; padding: 0; }
.fk-arrow svg { display: block; width: 20px; height: 20px; }
.fk-arrow:hover { background: var(--fk-blue); color: #fff; border-color: var(--fk-blue); }
.fk-arrow:focus-visible { outline: 2px solid var(--fk-accent); outline-offset: 3px; }
.fk-arrow[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Conseil — flèches posées sur les côtés, à hauteur des portraits. Placées dans un
   entête au-dessus du rail, l'en-tête collant (110 px) les recouvrait à mi-défilement. */
.fk-railstage { position: relative; }
.fk-railstage .fk-arrow--side { position: absolute; top: 38%; transform: translateY(-50%); z-index: 3; box-shadow: 0 10px 26px -12px rgba(2,87,173,.55); }
.fk-arrow--prev { left: -24px; }
.fk-arrow--next { right: -24px; }
/* Au-delà de 1400 px, la marge du conteneur laisse la place de les sortir des portraits. */
@media (min-width: 1400px) {
	.fk-arrow--prev { left: -60px; }
	.fk-arrow--next { right: -60px; }
}

/* Conseil — carte */
.fk-bcard { flex: 0 0 calc((100% - 72px) / 4); min-width: 230px; scroll-snap-align: start; }
.fk-bcard__ph { position: relative; aspect-ratio: 4/5; border-radius: 3px; overflow: hidden; background: repeating-linear-gradient(135deg,#e9ebf0 0 12px,#f1f3f7 12px 24px); border: 1px solid #e4e6ec; margin-bottom: 18px; }
.fk-bcard__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.fk-bcard__ph .fk-bcard__phlabel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--fk-font-body); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fk-text-3); }
.fk-bcard__name { font-family: var(--fk-font-heading); font-weight: 600; font-size: 18px; color: var(--fk-text); margin: 0 0 4px; }
.fk-bcard__role { color: var(--fk-accent-ink); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; }

/* Blog — entête + rail + carte */
.fk-bloghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 54px; }
.fk-bloghead__left { max-width: 560px; }
.fk-bloghead__actions { display: flex; align-items: center; gap: 16px; }
.fk-bloghead__link { color: var(--fk-accent-ink); font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--fk-rule); }
.fk-bloghead__arrows { display: flex; gap: 10px; }
.fk-rail--blog { gap: 30px; }
.fk-acard { flex: 0 0 calc((100% - 60px) / 3); min-width: 300px; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fk-border); border-radius: 4px; overflow: hidden; transition: transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s; text-decoration: none; }
.fk-acard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(2,87,173,0.35); }
.fk-acard__imgwrap { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--fk-navy); }
.fk-acard__imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fk-acard__badge { position: absolute; top: 14px; left: 14px; background: rgba(2,87,173,0.86); color: var(--fk-badge-ink); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 11px; border-radius: 2px; }
.fk-acard__body { padding: 26px 26px 30px; display: flex; flex-direction: column; flex: 1; }
.fk-acard__date { color: var(--fk-text-3); font-size: 12.5px; letter-spacing: 0.04em; margin-bottom: 12px; }
.fk-acard__title { font-family: var(--fk-font-heading); font-weight: 600; font-size: 21px; line-height: 1.3; color: var(--fk-text); margin: 0 0 12px; }
.fk-acard__excerpt { color: var(--fk-text-2); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; }
.fk-acard__more { margin-top: auto; color: var(--fk-accent-ink); font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }

/* Événements */
/* Colonnes calées l'une sur l'autre : le texte occupe toute la hauteur de la rangée
   pour que le bouton, poussé en bas, retombe sur l'arête basse de l'image quel que
   soit le nombre d'événements listés (centrer la colonne le faisait flotter). */
.fk-evgrid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: stretch; }
.fk-evimg { position: relative; aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; background: #0b1830; border: 1px solid rgba(255,255,255,0.1); width: 100%; align-self: start; }
.fk-evtext { display: flex; flex-direction: column; }
.fk-evimg__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(30px) brightness(0.72); transform: scale(1.2); }
.fk-evimg__fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fk-eyebrow-h { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.fk-eyebrow-h .l { width: 32px; height: 1px; background: var(--fk-rule); display: inline-block; }
.fk-eyebrow-h .t { color: var(--fk-accent-on-dark); font-size: 12.5px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 600; }
.fk-ev-h2 { font-family: var(--fk-font-heading); font-weight: 500; font-size: 40px; line-height: 1.14; color: #fff; margin: 0 0 22px; letter-spacing: -0.01em; }
.fk-ev-text { color: var(--fk-on-dark); font-size: 16px; line-height: 1.75; margin: 0 0 32px; }
.fk-evlist { display: flex; flex-direction: column; }
.fk-evrow { display: flex; align-items: center; gap: 22px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); text-decoration: none; transition: opacity .2s; }
.fk-evrow:hover { opacity: .85; }
.fk-evrow__date { flex-shrink: 0; text-align: center; width: 62px; }
.fk-evrow__day { font-family: var(--fk-font-heading); font-size: 26px; font-weight: 600; color: #fff; line-height: 1; }
.fk-evrow__month { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fk-accent-on-dark); margin-top: 4px; }
.fk-evrow__main { flex: 1; }
.fk-evrow__title { font-weight: 700; font-size: 16px; color: #fff; margin-bottom: 4px; }
.fk-evrow__place { color: var(--fk-on-dark); font-size: 13.5px; }
.fk-evrow__arrow { color: var(--fk-accent-on-dark); font-size: 18px; }
/* La liste se ferme par un filet, comme elle s'ouvre : la pile de dates reste cadrée. */
.fk-evlist { border-bottom: 1px solid rgba(255,255,255,0.1); }
/* Agenda vide : même filet que les lignes, ton de la copie sur navy. */
.fk-evempty { color: var(--fk-on-dark); font-size: 15px; line-height: 1.7; margin: 0; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1); }
/* `auto` colle le bouton au bas de la colonne ; le retrait garantit un écart mini
   avec la liste quand il n'y a pas de hauteur libre (mobile, agenda bien rempli). */
.fk-evcta { margin-top: auto; padding-top: 30px; }
.fk-evcta .fk-btn { padding: 14px 26px; font-size: 14.5px; }

@media (max-width: 980px) {
	.fk-evgrid { grid-template-columns: 1fr; gap: 40px; }
	.fk-bcard { flex-basis: calc((100% - 24px) / 2); }
	.fk-acard { flex-basis: calc((100% - 30px) / 2); }
}
/* Sous 1180 px la marge du conteneur ne suffit plus : les flèches viennent
   chevaucher le bord des portraits plutôt que déborder hors de l'écran. */
@media (max-width: 1180px) {
	.fk-arrow--prev { left: -8px; }
	.fk-arrow--next { right: -8px; }
}
@media (max-width: 620px) {
	.fk-bcard { flex-basis: 74vw; }
	.fk-acard { flex-basis: 82vw; min-width: 260px; }
	.fk-railstage .fk-arrow--side { width: 42px; height: 42px; }
	.fk-arrow--prev { left: 2px; }
	.fk-arrow--next { right: 2px; }
}

/* Intro centrée + titres en HTML (rails) */
.fk-intro-c { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.fk-eyebrow-h--center { justify-content: center; }
.fk-eyebrow-h--ink .t { color: var(--fk-accent-ink); }
.fk-h2-html { font-family: var(--fk-font-heading); font-weight: 500; font-size: 44px; line-height: 1.12; color: var(--fk-text); margin: 0; letter-spacing: -0.01em; }
.fk-h2-html--center { text-align: center; }
@media (max-width: 1180px) { .fk-h2-html { font-size: 38px; } .fk-ev-h2 { font-size: 36px; } }
@media (max-width: 760px) { .fk-h2-html { font-size: 31px; } .fk-ev-h2 { font-size: 30px; } .fk-bloghead { margin-bottom: 32px; } }
@media (max-width: 480px) { .fk-h2-html { font-size: 26px; } }

/* ===================== Services (HTML, fidèle maquette) ===================== */
.fk-svchead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 54px; }
.fk-svchead__left { max-width: 560px; }
.fk-svchead__link { color: var(--fk-accent-on-dark); font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--fk-rule); white-space: nowrap; text-decoration: none; }
.fk-h2-html--ondark { color: #fff; }
.fk-svcgrid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.08); }
.fk-svccard { background: #0257ad; padding: 40px 34px; transition: background .25s; }
.fk-svccard:hover { background: #0264c7; }
.fk-svccard__num { width: 46px; height: 46px; border: 1px solid var(--fk-rule-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--fk-accent-on-dark); font-family: var(--fk-font-heading); font-size: 18px; font-weight: 600; margin-bottom: 26px; }
.fk-svccard__title { font-family: var(--fk-font-heading); font-weight: 600; font-size: 22px; color: #fff; margin: 0 0 14px; }
.fk-svccard__desc { color: var(--fk-on-dark); font-size: 14.5px; line-height: 1.7; margin: 0; }

/* ===================== Adhésion (HTML, fidèle maquette) ===================== */
.fk-intro-c__lead { color: var(--fk-text-2); font-size: 16px; line-height: 1.7; margin: 16px 0 0; }
.fk-stepgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fk-stepcard { background: #fff; border: 1px solid #e7e4db; border-radius: 3px; padding: 40px 32px; position: relative; }
.fk-stepcard__num { font-family: var(--fk-font-heading); font-size: 56px; font-weight: 300; color: var(--fk-accent-faint); line-height: 1; margin-bottom: 18px; }
.fk-stepcard__title { font-family: var(--fk-font-heading); font-weight: 600; font-size: 21px; color: var(--fk-text); margin: 0 0 12px; }
.fk-stepcard__desc { color: var(--fk-text-2); font-size: 14.5px; line-height: 1.7; margin: 0; }
.fk-stepcta { text-align: center; margin-top: 48px; }
.fk-stepcta a { display: inline-flex; align-items: center; gap: 10px; padding: 16px 34px; background: var(--fk-blue); color: #fff; border-radius: 2px; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; transition: background .25s; }
.fk-stepcta a:hover { background: var(--fk-blue-600); }
@media (max-width: 980px) { .fk-svcgrid2 { grid-template-columns: repeat(2, 1fr); } .fk-stepgrid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fk-svcgrid2 { grid-template-columns: 1fr; } .fk-svchead { margin-bottom: 32px; } }

/* ===================== Bande stats (HTML statique, fidèle maquette : gauche) ===================== */
.fk-statband2 { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid rgba(255,255,255,0.08); }
.fk-statcell { padding: 38px 28px; border-right: 1px solid rgba(255,255,255,0.08); text-align: left; }
.fk-statcell__num { font-family: var(--fk-font-heading); font-size: 44px; font-weight: 600; color: #fff; line-height: 1; }
.fk-statcell__label { margin-top: 10px; color: var(--fk-on-dark); font-size: 13.5px; letter-spacing: 0.04em; }
@media (max-width: 980px) {
	.fk-statband2 { grid-template-columns: repeat(2, 1fr); }
	.fk-statcell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* Bande stats en widgets Elementor natifs (grille + Titres) */
.elementor-element.fk-statband2 { display: grid !important; gap: 0 !important; grid-template-columns: repeat(4, 1fr); padding: 0 !important; }
@media (max-width: 980px) {
	.elementor-element.fk-statband2 { grid-template-columns: repeat(2, 1fr); }
	.elementor-element.fk-statcell:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}
.elementor-element.fk-statcell { padding: 46px 28px 42px; }

/* ── Médaillon ───────────────────────────────────────────────────────────────
   Le logo est une rondelle : un anneau blanc qui tient une figure et sépare
   toujours le bleu du rouge. Chaque chiffre reprend cette forme — l'icône est
   posée dans un anneau au filet fin. C'est le seul ornement de la bande.
   Teinte accent-sur-fond-sombre : le rouge du logo est illisible sur son bleu. */
.fk-staticon { line-height: 0; margin-bottom: 18px; color: var(--fk-accent-on-dark); }
.fk-staticon > * {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .28);
	display: flex; align-items: center; justify-content: center;
}
/* Qualificatif du chiffre : italique Spectral, l'idiome d'emphase déjà en place sur
   le site (« la plus *innovante* »). « près de 400 » dit l'approximation, là où le
   signe ≈ la maquille. */
.fk-statpre { font-family: var(--fk-font-heading); font-style: italic; font-weight: 400; font-size: 17px; color: var(--fk-on-dark); margin-right: 8px; }
.fk-statsuf { font-size: 21px; font-weight: 500; color: var(--fk-on-dark); }
@media (max-width: 620px) {
	.elementor-element.fk-statcell { padding: 32px 20px 28px; }
	.fk-staticon { margin-bottom: 15px; }
	.fk-staticon > * { width: 38px; height: 38px; }
	.fk-statnum .elementor-heading-title { font-size: 29px; }
	.fk-statpre { font-size: 14.5px; margin-right: 6px; }
	.fk-statsuf { font-size: 17px; }
}
.fk-statnum .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-size: 36px; font-weight: 600 !important; color: #fff !important; line-height: 1; }
/* Micro-capitales : ces quatre lignes sont des entrées de registre, pas des accroches. */
.fk-statlabel .elementor-heading-title { font-family: var(--fk-font-body) !important; font-size: 11.5px; font-weight: 600 !important; color: var(--fk-on-dark) !important; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; }

/* Adhésion en widgets Elementor natifs (grille + Titres/Texte + Bouton) */
.elementor-element.fk-stepgrid { display: grid !important; width: 100%; gap: 24px !important; grid-template-columns: repeat(3, 1fr); padding: 0 !important; }
@media (max-width: 980px) { .elementor-element.fk-stepgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .elementor-element.fk-stepgrid { grid-template-columns: 1fr; } }
.elementor-element.fk-stepcard { padding: 40px 32px; }
.fk-stepnum .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-size: 56px; font-weight: 300 !important; color: var(--fk-accent-faint) !important; line-height: 1; margin: 0 0 18px; }
.fk-steptitle .elementor-heading-title { font-family: var(--fk-font-heading) !important; font-weight: 600 !important; font-size: 21px; color: var(--fk-text); margin: 0 0 12px; }
.fk-stepdesc .elementor-widget-container, .fk-stepdesc p { color: var(--fk-text-2); font-size: 14.5px !important; line-height: 1.7 !important; margin: 0; }
.elementor-element.fk-intro620 { max-width: 620px; margin-left: auto; margin-right: auto; }
.fk-intro-lead .elementor-widget-container { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ===================== Responsive — correctifs ===================== */
/* Formulaire contact : 1 colonne sous 980px (champs Prénom/Nom pleine largeur) */
@media (max-width: 980px) { .fk-form { grid-template-columns: 1fr; } }
/* Boutons du héros : pleine largeur, empilés sous 760px (fidèle maquette) */
@media (max-width: 760px) {
	.fk-hero-ctas { flex-direction: column !important; align-items: stretch !important; }
	.fk-hero-ctas .elementor-widget-button, .fk-hero-ctas .elementor-button-wrapper { width: 100%; }
	.fk-hero-ctas .elementor-button { width: 100%; justify-content: center; }
}

/* ===================== Héros — responsive fin ===================== */
@media (max-width: 760px) {
	.elementor-element.fk-hero { min-height: 86vh !important; }
	.fk-hero-ctrl { right: 16px; bottom: 18px; gap: 10px; }
	.fk-hero-prev, .fk-hero-next { width: 42px; height: 42px; font-size: 20px; }
	.fk-hero-grad2 { background: linear-gradient(0deg, rgba(8,18,34,0.62) 0%, rgba(8,18,34,0) 42%); }
}
@media (max-width: 480px) {
	.elementor-element.fk-hero { min-height: 88vh !important; }
	.fk-hero-lead .elementor-widget-container { font-size: 16px !important; line-height: 1.6 !important; }
	.fk-hero-dots { display: none; }
	.fk-hero-ctrl { bottom: 14px; right: 14px; }
}

/* ===================== Apparitions au scroll (esprit Framer Motion) ===================== */
html.fk-anim .fk-hero-col,
html.fk-anim .fk-center,
html.fk-anim .fk-intro-c,
html.fk-anim .fk-svchead,
html.fk-anim .fk-bloghead,
html.fk-anim .fk-row,
html.fk-anim .fk-evimg,
html.fk-anim .fk-evtext,
html.fk-anim .fk-lead,
html.fk-anim .fk-cta-blue,
html.fk-anim .fk-cta-outline,
html.fk-anim .fk-statcell,
html.fk-anim .fk-svccard,
html.fk-anim .fk-stepcard,
html.fk-anim .fk-rail > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.16, .84, .44, 1), transform .8s cubic-bezier(.16, .84, .44, 1);
	will-change: opacity, transform;
}
html.fk-anim .is-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
	html .fk-hero-col, html .fk-center, html .fk-intro-c, html .fk-svchead, html .fk-bloghead,
	html .fk-row, html .fk-evimg, html .fk-evtext, html .fk-lead, html .fk-statcell,
	html .fk-svccard, html .fk-stepcard, html .fk-rail > * { opacity: 1 !important; transform: none !important; }
}

/* ===================== À propos — valeurs (HTML fidèle maquette) ===================== */
.fk-values { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.fk-value { display: flex; gap: 16px; align-items: flex-start; }
.fk-value__num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--fk-rule); color: var(--fk-accent-ink); display: flex; align-items: center; justify-content: center; font-family: var(--fk-font-heading); font-weight: 600; font-size: 15px; }
.fk-value__title { font-weight: 700; font-size: 15.5px; color: var(--fk-text); margin-bottom: 3px; }
.fk-value__desc { color: var(--fk-text-2); font-size: 14.5px; line-height: 1.6; }