/*
 * Filikod - corrections de rendu posees apres la refonte.
 *
 * fk-ui.css porte la construction du site : header, mega menu de
 * bureau, FAQ, fleches, selecteur de langue. Ce fichier-ci porte les
 * corrections venues apres, une section par sujet. Il est volontairement
 * court : il se relit et se modifie d'un seul tenant, ce que
 * fk-ui.css - 500 lignes - ne permet plus sans risque.
 *
 * Il est charge apres fk-ui.css, donc apres le CSS Elementor de la
 * page : a specificite egale, les regles ecrites ici l'emportent.
 * C'est voulu, et c'est la raison pour laquelle certains selecteurs
 * repetent une classe (.e-con ou .elementor-element) sans en avoir
 * besoin : ils doivent atteindre la specificite d'Elementor, qui vise
 * ses elements avec quatre classes.
 *
 * REGLE APPRISE LE 22/08 : ne jamais viser un identifiant Elementor
 * pour du style durable. Modifier un conteneur dans l'editeur regenere
 * les identifiants de tout ce qui est deplace, et les regles tombent
 * en silence - le bloc "Quatre methodes" a repris ses fonds d'origine
 * de cette facon. Les blocs stylise portent donc des classes posees
 * dans les donnees Elementor (prefixe fkv-), et le CSS ne vise que
 * ces classes. Les identifiants restent tolerables pour le header,
 * que personne n'edite a la main.
 *
 * Sommaire
 *   1. Menu mobile - tout le site
 *   2. Verificateur de balise alt (FR, page 104) - refonte v3
 *
 * Fichier en ASCII pur, comme fk-ui.css et fk-ui.js.
 */


/* ==================================================================
   0. Largeur de contenu du site

   Sebastien, 22/08 : "la largeur de 1200 / 1080 doit passer a 1400px,
   ca fait trop tasse en colonne". Le contenu etait effectivement
   borne a 1040px, soit 40% d'un ecran de 2560.

   Deux reglages seulement comptent, le reste etait du decor :
     - le header, a min(1200px, 100% - 48px) ;
     - la largeur maximale des conteneurs boxed du kit, a 1200px.
   Les "1080px" poses sur les sections de la page ne generaient
   aucune regle CSS - elles sont en content_width full - et les
   changer n'aurait rien donne.

   Le header est duplique dans les 26 pages avec les memes
   identifiants : le corriger ici vaut pour tout le site, la ou une
   correction dans les donnees demanderait 26 publications. La largeur
   du contenu de chaque page, elle, vit dans ses propres conteneurs :
   la page 104 est passee a min(1400px, 100%), les 25 autres sont
   encore a min(1040px, 100%).
   ================================================================== */

/* Le header reste la pilule flottante de la maquette - c'est le
   parti pris de Sebastien, revalide le 22/08 apres un essai en barre
   pleine largeur qui ne lui a pas plu. Seule sa largeur suit celle du
   contenu, portee de 1200 a 1400px. */
.elementor .elementor-element.elementor-element-a100100 {
	--width: min(1400px, 100% - 48px);
}

.elementor .e-con {
	--container-max-width: 1400px;
}

@media (max-width: 1024px) {
	.elementor .e-con {
		--container-max-width: 1024px;
	}
}

@media (max-width: 767px) {
	.elementor .e-con {
		--container-max-width: 767px;
	}
}


/* ==================================================================
   1. Menu mobile

   La section 3 de fk-ui.css, qui construit le mega menu, est entiere-
   ment enfermee dans un @media (min-width: 1025px). Sous ce seuil le
   menu retombait donc sur le rendu brut d'Elementor, avec quatre
   consequences : le header montait a 169px sur trois rangees, le
   burger etait centre au lieu d'etre a droite, le panneau deroulant
   heritait de la largeur du widget - 53px, colle a droite - et les
   trois niveaux du mega menu sortaient en sous-menus flottants sans
   fond, ou le violet des liens se posait sur l'anthracite du header.

   Le header etant duplique dans chacune des 26 pages avec les memes
   identifiants, ces regles valent pour tout le site.
   ================================================================== */

@media (max-width: 1024px) {

	/* Le header ne se plie plus : logo a gauche, burger a droite.
	   Le conteneur de droite etait fige a 60% de la largeur du header,
	   trop etroit pour tenir le burger et le bouton cote a cote. */
	.elementor .elementor-element.elementor-element-a100100,
	.elementor .elementor-element.elementor-element-a100102 {
		--flex-wrap-mobile: nowrap;
		flex-wrap: nowrap;
	}

	.elementor .elementor-element.elementor-element-a100102 {
		--width: auto;
	}

	/* Elementor centre son burger avec margin:0 auto ; dans un header
	   en ligne il doit rester au bord. Ses 34x34px sont par ailleurs
	   sous les 44px recommandes pour une cible tactile. */
	.elementor .elementor-element-a100103 .elementor-menu-toggle {
		margin: 0 !important;
		width: 44px;
		height: 44px;
	}

	/* Le panneau doit s'ancrer sur le header et non sur le conteneur
	   de droite, large de 53px une fois le bouton masque : c'est lui
	   qui servait de reference de position, d'ou un panneau de 53px
	   colle au bord droit. */
	.elementor .elementor-element.elementor-element-a100100 {
		position: relative;
	}

	.elementor .elementor-element.elementor-element-a100102,
	.elementor .elementor-element.elementor-element-a100103 {
		position: static;
	}

	.elementor .elementor-element-a100103 .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto !important;
		max-width: none !important;
		min-width: 0 !important;
		margin: 12px 0 0 !important;
		padding: 10px 8px;
		border-radius: 22px;
		box-shadow: 0 24px 60px rgba(46, 49, 52, .22);
		/* Vingt entrees depassent l'ecran une fois les colonnes
		   depliees : le panneau defile de lui-meme. */
		max-height: calc(100vh - var(--fk-header-bottom, 100px) - 32px);
		overflow-y: auto;
	}

	/* Les trois colonnes du mega menu sont depliees : leur intitule
	   devient un titre de section, leurs pages restent visibles. Sans
	   cela il fallait trois taps pour atteindre une page, dans des
	   sous-menus flottants qui sortaient de l'ecran par la droite.
	   SmartMenus ouvre et ferme en posant display en style inline,
	   d'ou les !important. */
	.elementor .elementor-element-a100103 li.fk-mega-col > ul.sub-menu {
		display: block !important;
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}

	/* Intitule de colonne : un titre, pas un lien. Son href vaut "#",
	   et son chevron n'a plus rien a ouvrir. */
	.elementor .elementor-element-a100103 li.fk-mega-col > a {
		margin-top: 12px;
		color: #8A8F98 !important;
		font-size: 10.5px !important;
		font-weight: 600;
		letter-spacing: .16em;
		text-transform: uppercase;
		pointer-events: none;
	}

	.elementor .elementor-element-a100103 li.fk-mega-col > a .sub-arrow {
		display: none !important;
	}

	/* Les pages d'une colonne sont mises en retrait sous leur titre.
	   Elementor pose deja 20px sur toutes les entrees : le retrait
	   doit s'en detacher franchement pour se lire comme un niveau. */
	.elementor .elementor-element-a100103 li.fk-mega-col > ul.sub-menu > li > a {
		padding-left: 34px !important;
	}

	/* Les liens du panneau sont sur fond blanc : le violet par defaut
	   du kit, herite faute de regle, passait sur l'anthracite du
	   header des que le sous-menu n'avait pas de fond a lui. */
	.elementor .elementor-element-a100103 .elementor-nav-menu--dropdown a {
		color: #2E3134 !important;
	}

	.elementor .elementor-element-a100103 .elementor-nav-menu--dropdown ul.sub-menu {
		background: transparent !important;
	}

	/* La carte d'appel a l'action du mega menu, en version compacte. */
	.elementor .elementor-element-a100103 li.fk-mega-cta > a {
		margin: 14px 6px 6px;
		padding: 14px 18px !important;
		border-radius: 16px;
		background: #3100E4 !important;
		color: #FFFFFF !important;
		font-weight: 600;
	}
}

/* Sous 768px, le bouton du header reprend assez de place pour
   renvoyer le logo a la ligne. Le panneau deroulant porte deja la
   carte "Auditez votre site en 10 secondes", qui mene au meme
   endroit. */
@media (max-width: 767px) {
	.elementor .elementor-element.elementor-element-a100104 {
		display: none;
	}
}


/* ==================================================================
   2. Verificateur de balise alt (FR, page 104) - refonte v3

   Application du systeme v3 du referentiel (bandes de grands
   chiffres, etapes numerotees, duos texte-visuel) sur la page de
   conversion, references Finovate pour la structure et Qonto pour la
   retenue. Les visuels ajoutes (resultat d'audit, echelle du score,
   anatomie de balise) sont des widgets html autonomes : chacun
   embarque son propre style, prefixe fkv-, dans son propre bloc.

   Le layout du bloc "Quatre methodes" - nombre de colonnes, largeurs,
   gouttieres, fonds - vit desormais dans les DONNEES Elementor et non
   plus ici : l'editeur montre ainsi la meme chose que le front. Ne
   restent en CSS que les pastilles, que l'editeur ne sait pas faire.
   ================================================================== */

/* --- Fil d'Ariane : il flottait seul entre le header et le hero,
       a 61px de haut pour une ligne de 13px, avec 48px de vide
       avant la pilule. Ramene contre le header, en plus discret,
       et le hero remonte a sa suite. */
.elementor-104 .elementor-element.elementor-element-v300002.e-con {
	--padding-top: 10px;
	--padding-bottom: 0px;
}

.elementor-104 .elementor-element-v300003 {
	font-size: 12px;
}

.elementor-104 .elementor-element.elementor-element-v300008.e-con {
	--padding-top: 10px;
}

/* --- Aeration : les sections de contenu s'enchainaient a moins de
       15px. Reference Qonto : l'espace fait partie du design. Le
       padding lateral de 20px pose par Elementor n'est pas touche. */
.elementor-104 .elementor-element.elementor-element-v300012.e-con,
.elementor-104 .elementor-element.elementor-element-v300028.e-con,
.elementor-104 .elementor-element.elementor-element-v300034.e-con,
.elementor-104 .elementor-element.elementor-element-v30003a.e-con,
.elementor-104 .elementor-element.elementor-element-v30003f.e-con {
	--padding-top: 64px;
	--padding-bottom: 64px;
}

.elementor-104 .elementor-element.elementor-element-fkv1000.e-con {
	--padding-top: 34px;
	--padding-bottom: 34px;
}

@media (max-width: 767px) {
	.elementor-104 .elementor-element.elementor-element-v300012.e-con,
	.elementor-104 .elementor-element.elementor-element-v300028.e-con,
	.elementor-104 .elementor-element.elementor-element-v300034.e-con,
	.elementor-104 .elementor-element.elementor-element-v30003a.e-con,
	.elementor-104 .elementor-element.elementor-element-v30003f.e-con {
		--padding-top: 40px;
		--padding-bottom: 40px;
	}
}

/* --- Hero : le paragraphe reponse (bloc GEO) est le seul texte
       entre le H1 et l'outil, il merite un corps de lecture. */
.elementor-104 .elementor-element.elementor-element-v300007 {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	font-size: 17px;
}

/* --- Duo "A quoi sert" : la colonne du mockup portait les 10px de
       padding par defaut d'Elementor, haut et bas - le mockup etire
       faisait donc 20px de moins que la carte lavande voisine. */
.elementor-104 .elementor-element.elementor-element-v30000f.e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

/* --- Bande de chiffres du benchmark (section fkv1000).
       Les chiffres sont ecrits en dur dans des headings ;
       fk-ui.js les anime des 30px de corps. */
.elementor-104 .fkv-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	width: 100%;
	padding: 14px 0;
}

.elementor-104 .fkv-stats > .e-con {
	--padding-top: 4px;
	--padding-bottom: 4px;
	--padding-left: 18px;
	--padding-right: 18px;
	--align-items: center;
	text-align: center;
}

.elementor-104 .fkv-stats > .e-con + .e-con {
	border-left: 1px solid #F0E9DC;
}

.elementor-104 .fkv-stat .elementor-widget:not(:last-child) {
	margin-bottom: 4px;
}

.elementor-104 .fkv-stat-num .elementor-heading-title {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.05;
	color: #3100E4;
}

.elementor-104 .fkv-stat-label {
	font-size: 13.5px;
	color: #5B6167;
}

.elementor-104 .fkv-stat-label p {
	margin: 0;
}

@media (max-width: 767px) {
	.elementor-104 .fkv-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 0;
	}

	/* En deux colonnes, seul le filet central a du sens. */
	.elementor-104 .fkv-stats > .e-con + .e-con {
		border-left: none;
	}

	.elementor-104 .fkv-stats > .e-con:nth-child(even) {
		border-left: 1px solid #F0E9DC;
	}

	.elementor-104 .fkv-stat-num .elementor-heading-title {
		font-size: 33px;
	}
}

/* --- Le chapeau de la section methodes garde une longueur de ligne
       lisible : la section est elargie a 1600px pour donner de l'air
       aux cartes, mais un paragraphe de 1600px de large ne se lit
       plus. Le H2, lui, est assez court pour s'en passer. */
.elementor-104 .fkv-lede {
	max-width: 780px;
}

/* --- Quatre methodes : presentation Qonto. Le numero est un carre
       arrondi, avec de l'air sous lui - c'est tout ce que le CSS a
       encore a faire ici, le reste vit dans les donnees Elementor.
       Le selecteur ne vise que des classes : les identifiants de ce
       bloc ont deja ete regeneres une fois par l'editeur. */
.elementor-104 .fkv-method .fkv-num {
	margin-bottom: 10px;
}

.elementor-104 .fkv-method .fkv-num .elementor-heading-title {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: #F5F1FC;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: #3100E4;
}

/* La 03 est le verificateur, l'outil de cette page : carte anthracite
   et carre violet plein, seule couleur d'accent du bloc. */
.elementor-104 .fkv-method-dark .fkv-num .elementor-heading-title {
	background: #3100E4;
	color: #FFFFFF;
}

/* --- Terminologie : le paragraphe a gauche, l'anatomie de la balise
       a droite. La carte blanche v300040 est rendue transparente :
       elle enchainait une deuxieme grande masse blanche juste sous la
       carte du tableau. Le duo se pose desormais nu sur le creme, et
       le bloc anthracite du code fait le contraste. */
.elementor-104 .elementor-element.elementor-element-v300040.e-con {
	background-color: transparent;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
}

@media (min-width: 900px) {
	.elementor-104 .elementor-element.elementor-element-v300040.fkv-term {
		display: grid;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		column-gap: 44px;
		align-content: center;
	}

	.elementor-104 .fkv-term > :nth-child(-n+3) {
		grid-column: 1;
	}

	.elementor-104 .fkv-term > :nth-child(1) {
		justify-self: start;
	}

	.elementor-104 .fkv-term > :nth-child(4) {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		width: 100%;
	}
}