/* ------------------------------------------------------------------
   Filikod - feuille de style globale du site
   Chargee par mu-plugins/filikod-theme-compat.php
   Source unique : ne pas dupliquer ces regles dans le CSS des pages.
   ------------------------------------------------------------------ */

/* ==================================================================
   1. Hero des pages d'accueil (FR + EN : meme conteneur a100200)
   ================================================================== */

/* Le bloc titre / sous-titre / CTA etait cale par un padding-top fixe
   de 120px : sur un grand ecran il restait colle en haut de la
   banniere au lieu d'en occuper le centre. Il prend desormais l'espace
   libre sous le header et centre son contenu : le rendu suit la
   hauteur d'ecran au lieu d'une valeur en pixels.

   La bande de badges du bas (a100300) est en position absolute : elle
   ne prend pas de place dans le flux et recouvrait le bouton CTA. Le
   padding-bottom lui reserve sa hauteur, plus une respiration. Elle
   vaut 96px tant que les badges tiennent sur une ligne (desktop et
   tablette) et grimpe a ~280px en mobile, ou ils passent en colonne.

   Elementor pose le padding et l'alignement du conteneur via des
   variables CSS appliquees a son wrapper .e-con-inner : on redefinit
   donc les variables, pas les proprietes du conteneur externe.
   Specificite (0,3,1) pour passer devant le CSS genere par Elementor. */
body .elementor .elementor-element.elementor-element-a100200 {
	flex: 1 1 auto;
	--padding-top: 0px;
	--padding-bottom: 112px;
	--justify-content: center;
}

/* Filet de securite : centrage applique directement sur le wrapper,
   au cas ou la variable ne serait pas cablee par la version d'Elementor. */
body .elementor .elementor-element.elementor-element-a100200 > .e-con-inner {
	justify-content: center;
}

/* Mobile : les badges passent en colonne et occupent ~280px. */
@media (max-width: 767px) {
	body .elementor .elementor-element.elementor-element-a100200 {
		--padding-top: 24px;
		--padding-bottom: 300px;
	}
}

/* ==================================================================
   2. FAQ - bascule + / - des accordeons
   ================================================================== */

/* L'icone n'est plus celle d'Elementor mais un signe dessine en CSS :
   deux barres posees sur le meme centre. Il n'y a donc plus qu'un seul
   element a positionner, et plus aucun decalage possible entre l'etat
   ouvert et l'etat ferme - c'etait la cause des 5px de derive, dus a
   une marge negative qu'Elementor applique a ses svg d'icone.

   A l'ouverture, la barre verticale pivote jusqu'a se confondre avec
   l'horizontale puis s'efface : le "+" devient un "-" d'un seul geste,
   sans que rien ne se deplace. */
.elementor-widget-toggle .elementor-toggle-icon {
	position: relative;
	display: block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* Les deux icones natives ne servent plus (elles sont aria-hidden). */
.elementor-widget-toggle .elementor-toggle-icon > * {
	display: none !important;
}

.elementor-widget-toggle .elementor-toggle-icon::before,
.elementor-widget-toggle .elementor-toggle-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .82em;
	height: 2px;
	border-radius: 2px;
	background: #3100E4;
	transition: transform .25s ease, opacity .25s ease;
}

.elementor-widget-toggle .elementor-toggle-icon::before {
	transform: translate(-50%, -50%);
}

.elementor-widget-toggle .elementor-toggle-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-widget-toggle .elementor-toggle-icon::before,
	.elementor-widget-toggle .elementor-toggle-icon::after {
		transition: none;
	}
}

/* ==================================================================
   3. Mega menu "Ressources" / "Resources"
   ================================================================== */

/* L'entree parente porte la classe fk-mega, ses trois colonnes la
   classe fk-mega-col (Comprendre / Faire / Choisir en FR, Understand /
   Do / Choose en EN) et la carte de droite la classe fk-mega-cta.
   Ces classes sont posees sur les entrees du menu WordPress : le
   panneau se met a jour depuis Apparence > Menus, sans toucher aux
   26 pages.

   Choix technique : colonnes CSS (columns) plutot qu'une grille. Le
   menu d'Elementor s'appuie sur SmartMenus, qui ouvre et ferme les
   sous-menus en posant display:none / block en style inline ; forcer
   display:grid figerait le panneau ouvert en permanence. columns agit
   sur un display:block et laisse SmartMenus piloter l'ouverture. */

@media (min-width: 1025px) {

	/* Le panneau est en position fixed et centre sur la meme largeur
	   que le header : il se superpose exactement a la barre de menu
	   quelle que soit la taille d'ecran, au lieu de flotter en biais
	   sous son entree. La carte CTA occupe la place reservee a droite
	   par le padding. */
	.elementor-nav-menu li.fk-mega > ul.sub-menu {
		position: fixed !important;
		left: 50% !important;
		right: auto !important;
		top: calc(var(--fk-header-bottom, 94px) + 18px) !important;
		transform: translateX(-50%);
		width: min(1200px, calc(100vw - 48px)) !important;
		max-width: none !important;
		/* SmartMenus positionne ses sous-menus en posant des marges et
		   une largeur maximale en style inline (margin-left negatif,
		   max-width). Sur un panneau centre en position fixed, cela
		   decale tout : on remet ces valeurs a zero. */
		min-width: 0 !important;
		margin: 0 !important;
		columns: 3;
		column-gap: 34px;
		column-rule: 1px solid #EFEBF9;
		padding: 30px 322px 30px 30px !important;
		border: none !important;
		border-radius: 26px;
		background: #FFFFFF;
		box-shadow: 0 30px 70px rgba(46, 49, 52, .20);
		animation: fkMegaIn .22s ease-out;
	}

	@keyframes fkMegaIn {
		from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
		to   { opacity: 1; transform: translateX(-50%) translateY(0); }
	}

	/* Une colonne ne doit jamais etre coupee en deux. */
	.elementor-nav-menu li.fk-mega > ul.sub-menu > li.fk-mega-col {
		display: block;
		width: auto !important;
		margin: 0 0 4px;
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}

	/* Intitule de colonne : une pilule, comme sur le reste du site.
	   Ce n'est pas un lien (son URL est "#"), d'ou pointer-events. */
	.elementor-nav-menu li.fk-mega > ul.sub-menu > li.fk-mega-col > a {
		display: inline-block !important;
		margin: 0 0 12px 8px;
		padding: 5px 14px !important;
		border: 1px solid #E2DCF7;
		border-radius: 40px;
		background: #FFFFFF !important;
		color: #3100E4 !important;
		font-size: 10.5px !important;
		font-weight: 600;
		letter-spacing: .16em;
		text-transform: uppercase;
		pointer-events: none;
		cursor: default;
	}

	/* Le troisieme niveau s'affiche en permanence dans le panneau au
	   lieu de sortir en sous-menu flottant : on neutralise tout ce que
	   SmartMenus lui applique (position, opacite, ombre, largeur). */
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu {
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
	}

	/* Liens du panneau : texte sombre au repos, accent au survol. */
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a {
		display: block !important;
		padding: 9px 14px !important;
		border-radius: 12px;
		color: #2E3134 !important;
		font-size: 15px !important;
		line-height: 1.35;
		white-space: normal;
		transition: background-color .2s ease, color .2s ease, transform .2s ease;
	}

	/* Un seul et meme rendu pour toutes les mises en avant : survol,
	   focus clavier, page courante et etat actif de SmartMenus. Sans
	   cela, l'entree correspondant a la page affichee heritait du style
	   sombre du menu principal et devenait illisible sur fond blanc. */
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a {
		background: transparent !important;
	}

	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a:hover,
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a:focus,
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a.highlighted,
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a.elementor-item-active,
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li.current-menu-item > a,
	.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li.current_page_item > a {
		background: #F5F2FD !important;
		color: #3100E4 !important;
		transform: translateX(4px);
	}

	/* Carte de mise en avant, sortie du flux des colonnes. */
	.elementor-nav-menu li.fk-mega li.fk-mega-cta {
		position: absolute !important;
		top: 30px;
		right: 30px;
		bottom: 30px;
		width: 262px;
		margin: 0 !important;
	}

	/* Deux rangees : la pilule seule en haut a gauche, puis le titre
	   et la pastille flechee cote a cote, cales en bas de carte. Le
	   titre est un simple noeud texte, que la grille place d'elle-meme
	   en rangee 2 colonne 1, la pastille suivant en colonne 2. */
	.elementor-nav-menu li.fk-mega li.fk-mega-cta > a {
		display: grid !important;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto 1fr;
		column-gap: 12px;
		align-items: end;
		height: 100%;
		padding: 22px !important;
		border-radius: 18px;
		background: #3100E4;
		color: #FFFFFF !important;
		font-size: 17px !important;
		font-weight: 500;
		line-height: 1.3;
		white-space: normal;
		transition: background-color .25s ease;
	}

	/* Survol volontairement sobre : la carte ne bouge pas, seuls le
	   fond et la pastille reagissent. */
	.elementor-nav-menu li.fk-mega li.fk-mega-cta > a:hover {
		background: #2600B4;
	}

	.elementor-nav-menu li.fk-mega li.fk-mega-cta > a:hover::after {
		transform: scale(1.1);
	}

	/* Pilule du haut et pastille flechee du bas, en pur decor. */
	.elementor-nav-menu li.fk-mega li.fk-mega-cta > a::before {
		content: "GRATUIT";
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		padding: 5px 12px;
		border: 1px solid rgba(255, 255, 255, .45);
		border-radius: 40px;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: .16em;
	}

	.elementor-nav-menu li.fk-mega li.fk-mega-cta > a::after {
		content: "";
		align-self: end;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: #FFFFFF url('/wp-content/uploads/2026/07/arrow-fk-blue.svg') center / 16px no-repeat;
		transition: transform .25s ease;
	}

	/* Dans le panneau, les chevrons n'ont plus de sens : tout est
	   deplie. Celui de l'entree Ressources est en revanche conserve :
	   c'est le seul indice qu'un sous-menu existe. Il pivote a
	   l'ouverture. */
	.elementor-nav-menu li.fk-mega ul.sub-menu .sub-arrow {
		display: none !important;
	}

	/* Le caret d'Elementor tournait mal : ce triangle n'est pas
	   symetrique, son centre visuel ne coincide pas avec le centre de
	   sa boite, et la rotation donnait l'impression qu'il se deplacait.
	   On le remplace par un chevron dessine en CSS, symetrique, qui
	   pivote proprement autour de son propre centre. */
	.elementor-nav-menu li.fk-mega > a .sub-arrow {
		display: inline-block !important;
		position: relative;
		top: -1px;
		box-sizing: content-box !important;
		width: 6px;
		height: 6px;
		/* Elementor pose padding:10px et margin-block:-10px sur ses
		   chevrons : sans cette remise a zero, la boite fait 11x21px et
		   nos dimensions sont ignorees. */
		margin: 0 0 0 9px !important;
		padding: 0 !important;
		border: 0 !important;
		border-right: 2px solid currentColor !important;
		border-bottom: 2px solid currentColor !important;
		transform: rotate(45deg);
		transition: transform .25s ease;
	}

	.elementor-nav-menu li.fk-mega > a .sub-arrow svg {
		display: none !important;
	}

	.elementor-nav-menu li.fk-mega:hover > a .sub-arrow,
	.elementor-nav-menu li.fk-mega > a.highlighted .sub-arrow {
		transform: rotate(225deg);
	}

	@media (prefers-reduced-motion: reduce) {
		.elementor-nav-menu li.fk-mega > ul.sub-menu { animation: none; }
		.elementor-nav-menu li.fk-mega ul.sub-menu ul.sub-menu > li > a,
		.elementor-nav-menu li.fk-mega li.fk-mega-cta > a { transition: none; }
	}
}

/* ==================================================================
   4. Decorations retirees
   ================================================================== */

/* Les asterisques flottants ajoutes dans les heros et les blocs
   d'appel a l'action (identifiants fkd...) sont neutralises : ils
   parasitaient la lecture sans rien apporter. Les asterisques des
   cartes, eux, font partie de la maquette d'origine et sont conserves.
   Regle a supprimer le jour ou ces widgets seront retires des pages. */
.elementor [class*="elementor-element-fkd1"] {
	display: none !important;
}

/* ==================================================================
   5. Titres de page
   ==================================================================

   Un H1 unique pour tout le site sur ecran d'ordinateur. Elementor
   fixe la taille page par page ; on passe devant avec une specificite
   suffisante, sans toucher aux reglages de chaque page. Les tailles
   tablette et mobile restent celles definies dans Elementor. */
@media (min-width: 1025px) {
	body .elementor .elementor-widget-heading h1.elementor-heading-title {
		font-size: 48px;
	}
}

/* ==================================================================
   6. Selecteur de langue
   ================================================================== */

/* Le drapeau est deplace par fk-ui.js a droite du bouton d'audit.
   Il ne montre que l'autre langue : francais depuis l'anglais, et
   inversement (reglage "masquer la langue courante" de Polylang). */
.fk-lang-switch {
	display: flex;
	align-items: center;
	margin: 0 0 0 4px;
	padding: 0;
	list-style: none;
}

.fk-lang-switch > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fk-lang-switch a {
	display: block;
	padding: 4px;
	border-radius: 6px;
	line-height: 0;
	opacity: .82;
	transition: opacity .2s ease, background-color .2s ease;
}

.fk-lang-switch a:hover,
.fk-lang-switch a:focus {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

/* Polylang pose width="16" et height="11" en attributs sur le
   drapeau : on impose la taille d'affichage, sinon le navigateur
   retombe sur ces valeurs. */
.fk-lang-switch img {
	display: block;
	width: 22px !important;
	height: auto !important;
	max-width: none;
	border-radius: 3px;
}

/* Sur mobile, le drapeau reste dans le menu deroulant : le header n'a
   pas la place d'accueillir un element de plus a cote du bouton. */
@media (max-width: 1024px) {
	.fk-lang-switch {
		display: none;
	}
}

/* ==================================================================
   7. Fleches rondes des cartes
   ================================================================== */

/* Le fichier SVG dessine une fleche horizontale ; c'est une rotation
   CSS qui lui donne son orientation. Les listes de fonctionnalites la
   pivotaient de -45 degres (pointe vers le haut a droite), les cartes
   la laissaient a plat : deux sens differents pour un meme picto. On
   aligne tout le site sur le sens des listes.

   Au survol, la fleche se redresse a l'horizontale : le mouvement
   suggere le depart vers la page liee. Le !important est necessaire
   pour passer devant le CSS pose element par element dans les pages,
   qui imposait une rotation inverse. */
.elementor .fk-arrow img {
	transform: rotate(-45deg) !important;
	transition: transform .35s cubic-bezier(.2, .8, .25, 1) !important;
}

/* Le survol doit partir de la carte ou de la ligne elle-meme. Cibler
   les conteneurs de facon generique declenchait les trois fleches a
   la fois, et depuis les marges du bloc qui les regroupe : ce bloc
   est lui aussi un conteneur, et il englobe les trois cartes. On
   nomme donc explicitement les sept blocs concernes - les trois
   cartes du haut et les quatre lignes de fonctionnalites, seuls
   endroits du site ou cette fleche apparait. */
.elementor-element-b43a9b1:hover .fk-arrow img,
.elementor-element-6d9518c:hover .fk-arrow img,
.elementor-element-206a376:hover .fk-arrow img,
.elementor-element-b3002a1:hover .fk-arrow img,
.elementor-element-b3002a2:hover .fk-arrow img,
.elementor-element-b3002a3:hover .fk-arrow img,
.elementor-element-b3002a4:hover .fk-arrow img {
	transform: rotate(0deg) !important;
}

@media (prefers-reduced-motion: reduce) {
	.elementor .fk-arrow img {
		transition: none !important;
	}
}

/* ==================================================================
   8. Menu principal
   ================================================================== */

/* Taille de texte du menu portee a 15px sur ecran d'ordinateur. */
@media (min-width: 1025px) {
	/* Elementor fixe la taille par page avec une specificite de (0,4,0) :
	   on ajoute le widget au selecteur pour passer devant sans !important. */
	body .elementor .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
		font-size: 15px !important;
	}
}

/* ==================================================================
   9. Mascotte du bloc comparatif
   ==================================================================

   La mascotte est accoudee au tableau : elle doit deborder par le bas
   et passer devant lui. Le bloc d'en-tete recoit donc un z-index, et
   la marge basse negative de l'image fait remonter le tableau de
   quelques dizaines de pixels sous ses pattes. Le PNG etant detoure,
   le chevauchement se voit sans creer de rectangle blanc. */
.elementor .elementor-element-a500100 {
	position: relative;
	z-index: 2;
}

/* Elementor impose son propre espacement aux widgets : sans
   !important la marge negative est ignoree. La valeur compense les
   40px mesures entre le bas de l'image et le haut du tableau (padding
   de colonne, marge d'en-tete et gap de section) et ajoute 30px de
   chevauchement reel. */
.elementor .fk-mascotte {
	margin-bottom: -70px !important;
	pointer-events: none;
}

.elementor .fk-mascotte img {
	display: block;
	margin-left: auto;
	filter: drop-shadow(0 12px 22px rgba(46, 49, 52, .16));
}

/* Sous 1025px les colonnes s'empilent : la mascotte perdrait son
   appui sur le tableau et occuperait de la place pour rien. */
@media (max-width: 1024px) {
	.elementor .fk-mascotte {
		display: none;
	}
}