/*
Theme Name:   Facility Project Theme
Theme URI:    https://facility-project.com
Description:  Thème du site Facility Project. Thème enfant de Hello Elementor : il accueille le CSS et les fonctions spécifiques au site, à l'abri des mises à jour du thème parent.
Author:       Agence La Pieuvre
Author URI:   https://agence-la-pieuvre.com
Template:     hello-elementor
Version:      1.0.0
Text Domain:  facility-project-theme
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ------------------------------------------------------------------
   CSS personnalisé du site Facility Project.

   Les styles globaux (couleurs, typographies, boutons) se règlent
   dans Elementor > Réglages du site, pas ici.
   Ce fichier est réservé aux cas qu'Elementor ne couvre pas.
------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Sauts de ligne forces.

   Ajouter la classe fp-saut-desktop a une balise <br> dans un titre
   pour que le saut s'applique sur grand ecran uniquement. En mobile,
   le texte se replace tout seul.
   Exemple : Premiere ligne<br class="fp-saut-desktop">Deuxieme ligne
------------------------------------------------------------------ */
@media (max-width: 767px) {
	br.fp-saut-desktop {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Widget Icone : l'icone s'affiche en ligne, ce qui reserve sous elle
   un espace vide (celui reserve aux jambages des lettres). Resultat :
   le bouton parait remonte par rapport a ses voisins dans une rangee
   centree verticalement. On neutralise cet espace.
------------------------------------------------------------------ */
.elementor-widget-icon .elementor-icon-wrapper {
	line-height: 0;
}

/* ------------------------------------------------------------------
   Page Solution : systeme d'onglets des fonctionnalites.

   Les onglets sont a gauche et restent colles au defilement. La
   couleur de l'onglet actif change selon l'onglet (cyan, violet,
   bleu) comme dans la maquette. Classe a poser sur la section :
   fp-onglets
------------------------------------------------------------------ */
.fp-onglets .e-n-tabs {
	align-items: flex-start;
}

.fp-onglets .e-n-tabs-heading {
	position: sticky;
	top: calc(96px + var(--fp-entete) + var(--wp-admin--admin-bar--height, 0px));
}

.fp-onglets .e-n-tab-title {
	background-color: #F3F5F7;
	border: none;
	border-radius: 8px;
	padding: 10px 16px;
	min-height: 42px;
	justify-content: flex-start;
	gap: 10px;
}

.fp-onglets .e-n-tab-title-text {
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	color: #8894A3;
}

.fp-onglets .e-n-tab-title .e-n-tab-icon {
	margin-left: auto;
}

.fp-onglets .e-n-tab-icon svg {
	width: 18px;
	height: 18px;
}

.fp-onglets .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
	color: #0B1016;
}

.fp-onglets .e-n-tab-title[data-tab-index="1"][aria-selected="true"] {
	background-color: #D2F7FF;
}

.fp-onglets .e-n-tab-title[data-tab-index="1"][aria-selected="true"] .e-n-tab-icon svg {
	fill: #002B34;
}

.fp-onglets .e-n-tab-title[data-tab-index="2"][aria-selected="true"] {
	background-color: #EFE0FC;
}

.fp-onglets .e-n-tab-title[data-tab-index="2"][aria-selected="true"] .e-n-tab-icon svg {
	fill: #210B34;
}

.fp-onglets .e-n-tab-title[data-tab-index="3"][aria-selected="true"] {
	background-color: #F1F3FE;
}

.fp-onglets .e-n-tab-title[data-tab-index="3"][aria-selected="true"] .e-n-tab-icon svg {
	fill: #0F1743;
}

@media (max-width: 1279px) {
	.fp-onglets .e-n-tabs-heading {
		position: static;
	}
}

/* ------------------------------------------------------------------
   Page Solution : accordeon des questions frequentes.
   Maquette Figma 2001:1163 (question ouverte) et 2001:1169 (liste) :
   bloc de 804 px, questions fermees sur 24 px de haut avec 32 px
   au-dessus et au-dessous d'un filet pleine largeur sans arrondi,
   question ouverte sur fond #F1F3FE arrondi 15 px, texte a 28 px.
   Classe a poser sur la section : fp-faq

   Fluidite : le script Elementor anime la hauteur de l'item entre
   la hauteur du titre et titre + contenu (offsetHeight, donc sans
   les marges ni les bordures de l'item). Pour eviter les sauts,
   rien ne doit changer de hauteur a l'ouverture en dehors de ces
   deux boites :
   - le titre garde exactement la meme place ouvert ou ferme
     (padding 32 px, pas de transform : Emilie ne veut aucun
     mouvement du texte de la question, meme d'un pixel) ;
   - le filet est un pseudo-element absolu de l'item (hors flux) ;
   - l'ecart titre/texte est obtenu par une marge negative sur le
     widget texte, a l'interieur du conteneur de contenu ;
   - le padding bas est celui du conteneur de contenu (reglage
     content_padding du widget), donc compris dans sa hauteur.
------------------------------------------------------------------ */
.fp-faq .e-n-accordion-item {
	padding: 0 24px; /* identique ouvert ou ferme : le texte ne bouge pas (la maquette a 28 px ouvert, ecarte pour eviter le decalage) */
	border-radius: 15px;
	transition: background-color .4s ease;
}


.fp-faq .e-n-accordion-item::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: #D4DAE2;
	transition: opacity .2s ease;
}


.fp-faq .e-n-accordion-item[open]::after,
.fp-faq .e-n-accordion-item:last-child::after {
	opacity: 0;
}


.fp-faq .e-n-accordion-item[open] {
	background-color: #F1F3FE;
}


.fp-faq .e-n-accordion-item-title {
	padding: 32px 0;
	margin: 0 !important;
	border: 0 !important; /* le widget impose son propre border-style */
	border-radius: 0;
	background: transparent !important; /* le fond ouvert est porte par l'item, pas par le titre */
	cursor: pointer;
}


.fp-faq .e-n-accordion-item:last-child > .e-n-accordion-item-title {
	padding-bottom: 0;
}


.fp-faq .e-n-accordion-item-title-text {
	font-family: 'PP Mori', sans-serif;
	font-size: 19px;
	font-weight: 500;
	line-height: 24px;
	color: #0B1016;
}


.fp-faq .e-n-accordion-item > .e-con {
	padding: 0 0 28px;
	border: 0;
	background: transparent;
}


.fp-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor {
	max-width: 588px;
	margin-top: -23px; /* titre 32 + 24 + 32 = 88, texte a 65 px du haut de l'item, 9 px sous la question */
}


.fp-faq .e-n-accordion-item:last-child > .e-con .elementor-widget-text-editor {
	margin-top: 9px; /* dernier item : titre sans padding bas (56 px) */
}


.fp-faq .e-n-accordion-item .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Menu mobile : hauteur reelle de l'ecran.

   Probleme : 100vh sur mobile correspond a l'ecran barre de navigation
   du navigateur MASQUEE. Tant que cette barre est affichee, le bas du
   menu (le bouton "Reservez une demo") passe dessous et devient
   invisible. L'unite dvh suit la hauteur reellement visible.

   Les !important sont necessaires : ils ecrasent la variable posee par
   Elementor sur le conteneur, dont le selecteur est plus specifique.

   Classes posees dans le popup : fp-menu-mobile (conteneur general),
   fp-menu-haut (logo + liens), fp-menu-bas (Connexion + boutons).
------------------------------------------------------------------ */
@supports (height: 100dvh) {
	.fp-menu-mobile {
		--min-height: 100dvh !important;
		max-height: 100dvh;
	}

	#elementor-popup-modal-329 .dialog-widget-content,
	#elementor-popup-modal-329 .dialog-message {
		height: 100dvh;
		max-height: 100dvh;
	}
}

/* Les liens defilent si l'ecran est vraiment trop court. La barre du
   haut et les boutons du bas restent toujours visibles. */
.fp-menu-mobile > .fp-menu-haut {
	flex: 1 1 auto;
	min-height: 0;
}

.fp-menu-haut > .elementor-widget-nav-menu {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* Marge basse supplementaire pour les telephones a encoche ou a barre
   gestuelle, pour que le dernier bouton ne colle jamais au bord. */
.fp-menu-mobile > .fp-menu-bas {
	flex: 0 0 auto;
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

/* Ecrans courts : on resserre les liens pour que tout tienne sans
   defilement. Les seuils portent sur la hauteur visible. */
@media (max-width: 767px) and (max-height: 720px) {
	.fp-menu-haut .elementor-nav-menu .elementor-item {
		font-size: 22px !important;
		padding-top: 5px !important;
		padding-bottom: 5px !important;
	}
}

@media (max-width: 767px) and (max-height: 620px) {
	.fp-menu-haut .elementor-nav-menu .elementor-item {
		font-size: 20px !important;
		padding-top: 3px !important;
		padding-bottom: 3px !important;
	}

	.fp-menu-mobile > .fp-menu-bas {
		padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
	}
}

/* ------------------------------------------------------------------
   Menu mobile : pas de defilement horizontal.

   Deux causes possibles, traitees toutes les deux :
   1. overflow-y: auto sur la zone des liens force le navigateur a
      passer aussi overflow-x a auto. Il faut le remettre a hidden
      explicitement, sinon une barre horizontale peut apparaitre.
   2. rien dans le menu ne doit depasser la largeur de l'ecran.
------------------------------------------------------------------ */
.fp-menu-haut > .elementor-widget-nav-menu {
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

.fp-menu-mobile,
.fp-menu-mobile > .fp-menu-haut,
.fp-menu-mobile > .fp-menu-bas,
.fp-menu-mobile .elementor-nav-menu,
.fp-menu-mobile .elementor-nav-menu li,
.fp-menu-mobile .elementor-nav-menu a {
	max-width: 100%;
}

.fp-menu-mobile .elementor-nav-menu a {
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Menu mobile : pleine largeur sans utiliser vw.

   La largeur reglee dans Elementor s'applique a .dialog-message, qui
   est un enfant de .dialog-widget-content. Ce conteneur a une largeur
   par defaut plus etroite : regler 100% ne suffit donc pas, il faut
   aussi etendre le conteneur parent. On evite volontairement 100vw,
   qui compte la barre de defilement et provoque un debordement
   horizontal de quelques pixels.
------------------------------------------------------------------ */
#elementor-popup-modal-329 .dialog-widget-content {
	width: 100%;
	max-width: 100%;
}

#elementor-popup-modal-329 .dialog-message {
	max-width: 100%;
}

/* ---------------------------------------------------------------
   Page Solution - visuel du hero
   Le fichier exporte de Figma contient deja son ombre portee,
   son cadre et ses angles arrondis : il porte 29 px de marge
   transparente a gauche et a droite, 13 px en haut.
   On leve donc le max-width pour que la carte fasse bien 1216 px
   de large et que l ombre deborde de la zone de contenu.
   Ne pas rajouter d ombre Elementor par-dessus.
   --------------------------------------------------------------- */
.fp-visuel-hero { max-width: none !important; }


/* ------------------------------------------------------------------
   Page Solution : tableau comparatif « Pourquoi choisir ».
   Maquette Figma 2001:1343 : les filets entre les lignes ne font pas
   toute la largeur. Colonne de gauche : 247 px a partir du texte.
   Colonne Facility Project : 122 px centres, #A9C7E8. Les quatre
   colonnes de droite partagent un seul filet de 525 px centre, avec
   un filet aussi sous la ligne d'en-tete. Pas de filet sous la
   derniere ligne. Classe a poser sur le conteneur des lignes :
   fp-comparatif (les bordures des lignes sont retirees du widget).
------------------------------------------------------------------ */
@media (width > 1279px) {
	.fp-comparatif > .e-con::after,
	.fp-comparatif > .e-con > .e-con::after {
		content: '';
		position: absolute;
		bottom: 0;
		height: 1px;
		background-color: #E7EBF0;
		pointer-events: none;
	}

	/* filet des quatre colonnes de droite, en-tete comprise. z-index : les
	   cellules heritent de --z-index: 1 et passeraient devant le filet */
	.fp-comparatif > .e-con::after {
		right: 28px;
		width: 525px;
		z-index: 2;
	}

	/* colonne de gauche */
	.fp-comparatif > .e-con > .e-con:nth-child(1)::after {
		left: 35px;
		width: 247px;
	}

	/* colonne Facility Project */
	.fp-comparatif > .e-con > .e-con:nth-child(2)::after {
		left: 18px;
		width: 122px;
		background-color: #A9C7E8;
	}

	/* pas de filet gauche ni bleu sous l'en-tete, aucun sous la derniere ligne */
	.fp-comparatif > .e-con:first-child > .e-con::after,
	.fp-comparatif > .e-con:last-child::after,
	.fp-comparatif > .e-con:last-child > .e-con::after,
	.fp-comparatif > .e-con > .e-con:nth-child(n+3)::after {
		content: none;
	}
}

@media (max-width: 1279px) {
	.fp-comparatif > .e-con:not(:last-child) {
		border-bottom: 1px solid #E7EBF0;
	}
}

/* ------------------------------------------------------------------
   Page Solution : carrousel des vues (sc00025) en ecran large.
   Les reglages du widget (diapos par vue, decalage lateral) ne sont
   pas responsives au-dela du mode ordinateur : a 1920 px les cartes
   passaient de 391 a 550 px et les visuels (364x395) etaient rognes.
   On fixe le decalage lateral pour que la zone centrale fasse
   toujours 1216 px, donc trois cartes de 392 px comme en 1440 ; les
   cartes voisines restent visibles dans les marges.
------------------------------------------------------------------ */
@media (min-width: 1850px) {
	.elementor-475 .elementor-element.elementor-element-sc00025.fp-defilement-continu { /* meme specificite que le CSS du widget, plus la classe */
		--e-n-carousel-swiper-offset-size: calc((100% - 1216px) / 2);
	}
}

/* ------------------------------------------------------------------
   Page Solution : version mobile et tablette (jusqu'a 1024 px).
------------------------------------------------------------------ */
@media (max-width: 1279px) {
	/* Carrousel des vues : une carte visible (~78 %), la suivante
	   depasse a droite. Le decalage lateral du widget (112 px) n'est
	   pas responsive, on le remplace par un padding asymetrique. */
	.elementor-475 .elementor-element.elementor-element-sc00025.fp-defilement-continu .e-n-carousel.offset-both {
		padding-inline-start: 16px;
		padding-inline-end: 72px;
	}

	/* FAQ : rythme plus serre (titre 24 px au-dessus et au-dessous,
	   16 px de retrait), memes invariants de hauteur pour l'animation */
	.fp-faq .e-n-accordion-item {
		padding: 0 16px;
	}

	.fp-faq .e-n-accordion-item-title {
		padding: 24px 0;
	}

	.fp-faq .e-n-accordion-item-title-text {
		font-size: 17px;
	}

	.fp-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor {
		margin-top: -14px; /* 24 px de padding bas du titre - 10 px d'ecart */
	}

	.fp-faq .e-n-accordion-item:last-child > .e-con .elementor-widget-text-editor {
		margin-top: 10px;
	}

	/* Onglets des fonctionnalites : barre en haut, defilable au doigt.
	   La barre doit etre bornee a la largeur de la section, sinon elle
	   s'etire a la largeur de ses onglets et rien ne defile. Le
	   defilement horizontal est voulu ici, limite a la barre. */
	.fp-onglets .e-n-tabs-heading {
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-bottom: 8px;
		padding-bottom: 4px;
	}

	.fp-onglets .e-n-tabs-heading::-webkit-scrollbar {
		display: none;
	}

	.fp-onglets .e-n-tab-title {
		white-space: nowrap;
	}
}

/* ===== Cas client : gabarit Single (Theme Builder, modele 1175) =====
   Les contenus viennent des champs ACF (groupe Cas client). Ici uniquement ce
   qu Elementor ne sait pas regler : formes retournees, texture tournee, puces,
   mode de fusion Densite couleur +, logo a hauteur fixe. */
.cs-hero { overflow:hidden; --overflow:hidden; isolation:isolate; }
/* formes d habillage : Elementor plafonne tout widget a 100 % de son conteneur, ce qui ecrase les formes sur mobile */
.elementor.elementor .e-con.cs-hero > .elementor-widget-image, .elementor.elementor .e-con.cs-cta > .elementor-widget-image { max-width:none; }
.cs-f1 img { width:100%; height:auto; max-width:none; display:block; transform:scaleX(-1); }
.cs-f2 img { width:100%; height:auto; max-width:none; display:block; transform:scaleX(-1); }
.cs-f3 img { width:100%; height:auto; max-width:none; display:block; }
/* texture tournee de 90 deg (opacite 20 % dans la maquette), calee sur la largeur de la fenetre */
.cs-texture { left:50% !important; right:auto !important; top:50% !important; bottom:auto !important;
  width:667px !important; transform:translate(-50%,-50%) rotate(90deg); opacity:.2; pointer-events:none; }
.cs-texture img { width:667px; height:100vw; min-height:1440px; max-width:none; display:block; object-fit:cover; object-position:center; }
/* boite logo blanche : le logo du client est cale sur 24 px de haut, largeur libre */
.cs-logo img { height:24px; width:auto; max-width:160px; display:block; }
.cs-chapo, .cs-chapo p { font-weight:480 !important; }
.cs-chapo p { margin:0; }
/* textures des cartes bleues et violettes : Densite couleur + (absent de la liste d Elementor) */
.cs-densite { --overlay-mix-blend-mode:color-burn; }
/* corps du recit (champ WYSIWYG) : paragraphes et listes a puces violettes 8 px */
.cs-corps p { margin:0 0 1em; }
.cs-corps p:last-child { margin-bottom:0; }
.cs-corps ul, .cs-liste-bilan ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.cs-corps ul { gap:14px; margin-bottom:1em; } /* 20 -> 14 (-30 %), demande du 8 oct. */
.cs-corps ul:last-child { margin-bottom:0; }
.cs-corps li, .cs-liste-bilan li { position:relative; margin:0; }
.cs-corps li { padding-left:20px; }
.cs-corps li::before, .cs-liste-bilan li::before { content:''; position:absolute; left:0; width:8px; height:8px; border-radius:50%; background:#9841E3; }
.cs-corps li::before { top:calc(0.85em - 4px); }
.cs-liste-bilan ul { gap:20px; } /* 28 -> 20 (-30 %), demande du 8 oct. */
.cs-liste-bilan li { padding-left:24px; }
.cs-liste-bilan li::before { top:calc(0.7em - 4px); }
.cs-secteur a { color:inherit; text-decoration:none; }
.cs-btn-lire .elementor-button-icon svg { width:10px; height:10px; display:block; }
.cs-btn-lire .elementor-button-icon svg path { stroke:currentColor; }
.cs-photo img { width:495px; max-width:100%; height:458px; object-fit:cover; border-radius:20px; display:block; }
@media (max-width: 1279px){ .cs-photo img { width:100%; height:auto; } }
.cs-photo .elementor-shortcode, .cs-portrait .elementor-shortcode, .cs-logo .elementor-shortcode, .cl-logo .elementor-shortcode { line-height:0; }
.cs-portrait img { width:51px; height:51px; object-fit:cover; border-radius:50%; display:block; background:#1C3092; }
.cs-cta { overflow:hidden; --overflow:hidden; isolation:isolate; }
.cs-cf97 img { width:100%; height:auto; max-width:none; display:block; transform:scaleX(-1); }
.cs-cf98 img { width:100%; height:auto; max-width:none; display:block; }

/* ===== Cas clients : grille (page 863), modeles de carte 1178 et de resultat 1179 ===== */
/* logo du client dans la zone grise : 168 px de large, hauteur libre */
.cl-logo img { width:168px; max-width:100%; height:auto; display:block; }
/* la carte entiere est un lien : pas de soulignement ni de changement de couleur */
.cl-carte, .cl-carte:hover, .cr-item, .cr-item:hover { text-decoration:none; }
.cl-carte .elementor-heading-title { color:inherit; }
/* champ de recherche : liseret #D4DAE2 comme la maquette, liste de resultats bordee */
.cc-recherche .e-search-input { border-color:#D4DAE2; }
.cc-recherche .e-search-input:focus { border-color:#D4DAE2; outline:none; box-shadow:none; }
/* la liste de resultats n a de cadre que lorsqu elle contient quelque chose (sinon un filet de 2 px restait visible) */
.cc-recherche .e-search-results-container:has(.e-search-results > *) { border:1px solid #E7EBF0; box-shadow:0 16px 16px rgba(12,12,13,.05); }
.cc-recherche .e-search-results-container:not(:has(.e-search-results > *)) { display:none; }
/* bouton Reinitialiser les filtres : simple lien texte, aucun fond ni ombre */
.cc-reset .elementor-button { background:transparent; box-shadow:none; padding:0; }
.cc-reset .elementor-button:hover, .cc-reset .elementor-button:focus { background:transparent; text-decoration:underline; }

/* Bandeau CTA cas client : la texture est un calque pose par-dessus les formes (comme dans la maquette), en Eclaircir */
.cs-cta-texture { height:100% !important; mix-blend-mode:lighten; pointer-events:none; }
.cs-cta-texture .elementor-widget-container, .cs-cta-texture img { width:100%; height:100%; object-fit:cover; display:block; }


/* ===== Filtre de taxonomie en menu déroulant à cases (classe fp-filtre-deroulant, script js/filtre-deroulant.js) =====
   Tant que le script n'a pas habillé le widget, la liste est masquée (pas de flash au chargement) ;
   si le script ne se charge pas, elle réapparaît au bout de 3 s en cartouches standard. */
.fp-filtre-deroulant:not(.est-deroulant) .e-filter { visibility:hidden; animation:fp-filtre-secours 0s 3s forwards; }
@keyframes fp-filtre-secours { to { visibility:visible; } }
.elementor-widget-taxonomy-filter.est-deroulant { position:relative; }
.fp-filtre-bouton { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; height:52px; margin:0; padding:0 16px 0 20px;
  background:#FFFFFF; border:1px solid #D4DAE2; border-radius:12px; box-shadow:none;
  font-family:Inter, sans-serif; font-size:16px; font-weight:500; line-height:1.22; letter-spacing:-0.32px; color:#4A5668;
  text-align:left; cursor:pointer; transition:border-color .2s ease; }
.fp-filtre-bouton:hover, .fp-filtre-bouton:focus, .fp-filtre-bouton[aria-expanded="true"] { background:#FFFFFF; color:#4A5668; border-color:#D4DAE2; }
.fp-filtre-bouton:focus-visible { outline:2px solid #4A5668; outline-offset:2px; }
.fp-filtre-libelle { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.fp-filtre-bouton svg { flex:0 0 21px; transition:transform .2s ease; }
.fp-filtre-bouton[aria-expanded="true"] svg { transform:rotate(180deg); }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter { display:none; position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:30;
  flex-direction:column; flex-wrap:nowrap; gap:0; max-height:320px; overflow-y:auto; margin:0; padding:8px;
  background:#FFFFFF; border:1px solid #D4DAE2; border-radius:12px; box-shadow:0 16px 16px rgba(12,12,13,.05); }
.elementor-widget-taxonomy-filter.est-deroulant.est-ouvert .e-filter { display:flex; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item[data-filter="__all"] { display:none; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item { display:flex; align-items:flex-start; justify-content:flex-start; gap:12px; width:100%; flex:0 0 auto; margin:0; padding:10px 12px;
  background:transparent; border:0; border-radius:8px; box-shadow:none;
  font-family:Inter, sans-serif; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:0; color:#4A5668;
  text-align:left; white-space:normal; cursor:pointer; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item:hover,
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item:focus { background:#FFFFFF; color:#4A5668; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item[aria-pressed="true"] { background:#FFFFFF; color:#4A5668; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item[aria-pressed="true"]:hover { background:#FFFFFF; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item:focus-visible { outline:2px solid #4A5668; outline-offset:-2px; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item::before { content:''; flex:0 0 20px; width:20px; height:20px; box-sizing:border-box;
  border:1.5px solid #4A5668; border-radius:4px; background:#FFFFFF center / 12px no-repeat;
  margin-top:1.2px; /* case calee sur la 1re ligne quand le libelle passe sur 2 lignes (ligne 22,4 px, case 20 px) */ }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item[aria-pressed="true"]::before { background-color:#4A5668; border-color:#4A5668;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* Le kit Elementor et le thème Hello colorent tous les boutons (fond bleu, survol bleu, focus rose) :
   on reprend la main avec une spécificité supérieure, à tous les états. */
.elementor-widget-taxonomy-filter.est-deroulant .fp-filtre-bouton,
.elementor-widget-taxonomy-filter.est-deroulant .fp-filtre-bouton:hover,
.elementor-widget-taxonomy-filter.est-deroulant .fp-filtre-bouton:focus,
.elementor-widget-taxonomy-filter.est-deroulant .fp-filtre-bouton:active,
.elementor-widget-taxonomy-filter.est-deroulant .fp-filtre-bouton[aria-expanded="true"] { background:#FFFFFF; color:#4A5668; border:1px solid #D4DAE2; box-shadow:none; }
.elementor-widget-taxonomy-filter.est-deroulant .e-filter-item:active { background:#FFFFFF; color:#4A5668; }


/* ===== Tarifs (page 1225, maquette 2143:2065) ===== */
/* texture du hero en Densite couleur + (absent de la liste d Elementor) */
.tf-densite { --overlay-mix-blend-mode:color-burn; }

/* Interrupteur Mensuel / Annuel : widget Onglets natif habille en interrupteur (maquette 2143:2434) */
.elementor-widget-n-tabs.tf-bascule > .e-n-tabs > .e-n-tabs-heading { width:fit-content; margin-inline:auto; padding:4px; background:#FFFFFF; border-radius:13px; gap:0; flex-wrap:nowrap; }

.elementor-widget-n-tabs.tf-bascule > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title { flex:0 0 113px; width:113px; height:37px; padding:0; justify-content:center; transition:background-color .25s ease, color .25s ease; }

/* Annuel est le 1er onglet (ouvert par defaut) mais s affiche a droite comme dans la maquette */
.elementor-widget-n-tabs.tf-bascule > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title:first-child { order:2; }

/* lien souligne Toutes les fonctionnalites dans les listes des offres */
.tf-liste .elementor-icon-list-text a { display:inline; color:#2B4EDE; text-decoration:underline; text-underline-position:from-font; }

.tf-liste .elementor-icon-list-text a:hover { color:#1C3092; }

/* mention associations */
.tf-mention p { margin:0; }

.tf-mention a { color:#2B4EDE; font-weight:500; }

.tf-mention a:hover { color:#1C3092; }

/* Tarifs, cartes fonctionnalites : pastille calee sur la hauteur des capitales du titre (Elementor n a pas de decalage d icone pour la Boite d icone) */
.tf-fonc .elementor-icon-box-icon { margin-top:6px; }

/* Tarifs, bandeau Besoin d aide : contexte d empilement propre pour que la forme violette (z-index -1) passe sous la texture, comme dans la maquette */
.tf-aide { isolation:isolate; }

/* mots en gras de la liste : Semibold de la maquette */
.tf-aide-liste strong { font-weight:600; }

/* Tarifs, cartes Pourquoi Facility Project : la ligne Mais est en Medium dans la maquette */
.tf-compare strong { font-weight:500; }

/* Tarifs, carte bleue Essayez : les formes debordent de la carte (rognees par elle), Elementor les limite sinon a 100 % */
.elementor.elementor .e-con.tf-cta > .elementor-widget-image { max-width:none; }

/* Tarifs, FAQ (maquette 2143:2068 / 2143:2074) : reprend .fp-faq de la page Solution.
   Reponses sur 645 px (588 sur Solution) ; liens soulignes en bleu accent.
   Derniere question sur 2 lignes dans la maquette (bloc 426 px, interligne 1.4 = 26.6 px) :
   padding haut 25.7 px pour garder le haut des capitales a 32 px du filet. */
.tf-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor { max-width:645px; }
.tf-faq .elementor-widget-text-editor a { color:#2B4EDE; text-decoration:underline; text-underline-offset:2px; }
.tf-faq .e-n-accordion-item:last-child .e-n-accordion-item-title-text { max-width:426px; line-height:26.6px; }
.tf-faq .e-n-accordion-item:last-child > .e-n-accordion-item-title { padding-top:25.7px; }
.tf-faq .e-n-accordion-item:last-child > .e-con .elementor-widget-text-editor { margin-top:9.7px; }

/* tf-faq-ecarts : maquette Tarifs, 24 px entre la question et la reponse, 31 px sous la reponse (question ouverte) */
.tf-faq .e-n-accordion-item > .e-con { padding-bottom:23.6px; }
.tf-faq .e-n-accordion-item:not(:last-child) > .e-con .elementor-widget-text-editor { margin-top:-21px; }

/* ------------------------------------------------------------------
   Page Solution : Creez / Gagnez du temps / Avancez les projets en
   3 blocs empiles (maquette 2001:430, remplace le widget Onglets le
   5 oct.). Un seul menu a gauche (sbm0001), colle tout le long des
   3 blocs ; clic = ancre vers le bloc.

   Onglet actif SANS JavaScript : animations liees au defilement.
   Chaque bloc publie une frise de defilement (--fp-bloc-N) mesuree
   sur une ligne de 1 px a 120 px du haut de l'ecran (view-timeline-
   inset) ; l'onglet N prend sa couleur active, son texte fonce et sa
   fleche tant que son bloc couvre cette ligne. Navigateurs sans
   support (Firefox) : menu neutre, liens fonctionnels.
   Les couleurs actives sont ici (Elementor ne gere que l'etat normal
   et le survol) : Creez #D2F7FF, Gagnez #EFE0FC, Avancez #F1F3FE.
   Tablette/mobile : menu masque, pastille en tete de chaque bloc.
------------------------------------------------------------------ */
/* Arrivee par ancre : haut du bloc au niveau du menu colle (96 px). WordPress ajoute deja
   la barre d'admin en scroll-padding sur html quand on est connecte, on la retire ici. */
.fp-onglet-bloc { scroll-margin-top: calc(96px + var(--fp-entete)) !important; } /* aligne sur le menu colle (96 px sous la barre de navigation collante) ; !important car Elementor pose 66 px en ligne */
.fp-onglet-lien .elementor-heading-title { transition: color .2s ease; }
.fp-onglet-lien:hover .elementor-heading-title { color: #1A222E; }
.fp-onglet-fleche { opacity: 0; }

@media (width > 1279px) {
	.fp-onglet-menu { position: sticky; top: calc(96px + var(--fp-entete) + var(--wp-admin--admin-bar--height, 0px)); }
}

@supports (animation-timeline: view()) {
	@media (width > 1279px) {
		.fp-onglets { timeline-scope: --fp-bloc-1, --fp-bloc-2, --fp-bloc-3; }
		#onglet-creez, #onglet-gagnez, #onglet-avancez { view-timeline-axis: block; view-timeline-inset: calc(120px + var(--fp-entete, 0px) + var(--wp-admin--admin-bar--height, 0px)) calc(100% - 121px - var(--fp-entete, 0px) - var(--wp-admin--admin-bar--height, 0px)); /* ligne d activation descendue de la hauteur du menu collant (21 oct.) */ }
		#onglet-creez { view-timeline-name: --fp-bloc-1; }
		#onglet-gagnez { view-timeline-name: --fp-bloc-2; }
		#onglet-avancez { view-timeline-name: --fp-bloc-3; }

		.fp-onglet-lien,
		.fp-onglet-lien .elementor-heading-title,
		.fp-onglet-lien .fp-onglet-fleche {
			animation-duration: auto;
			animation-timing-function: linear;
			animation-fill-mode: none;
			animation-range: cover 0% cover 100%;
		}
		.fp-onglet-lien .elementor-heading-title { animation-name: fp-onglet-texte; }
		.fp-onglet-lien .fp-onglet-fleche { animation-name: fp-onglet-fleche; }
		.fp-onglet-lien-1 { animation-name: fp-onglet-1; }
		.fp-onglet-lien-2 { animation-name: fp-onglet-2; }
		.fp-onglet-lien-3 { animation-name: fp-onglet-3; }
		.fp-onglet-lien-1, .fp-onglet-lien-1 .elementor-heading-title, .fp-onglet-lien-1 .fp-onglet-fleche { animation-timeline: --fp-bloc-1; }
		.fp-onglet-lien-2, .fp-onglet-lien-2 .elementor-heading-title, .fp-onglet-lien-2 .fp-onglet-fleche { animation-timeline: --fp-bloc-2; }
		.fp-onglet-lien-3, .fp-onglet-lien-3 .elementor-heading-title, .fp-onglet-lien-3 .fp-onglet-fleche { animation-timeline: --fp-bloc-3; }
	}
}
@keyframes fp-onglet-1 { from, to { background-color: #D2F7FF; } }
@keyframes fp-onglet-2 { from, to { background-color: #EFE0FC; } }
@keyframes fp-onglet-3 { from, to { background-color: #F1F3FE; } }
@keyframes fp-onglet-texte { from, to { color: #1A222E; } }
@keyframes fp-onglet-fleche { from, to { opacity: 1; } }

/* Solution, titres des 3 blocs Creez / Gagnez / Avancez : PP Mori Regular en tablette/mobile
   (maquette mobile 2179:4867). Elementor ne permet pas une graisse differente par appareil. */
.fp-titre-onglet .elementor-heading-title { font-weight: 500; }
@media (max-width: 1279px) {
	.fp-titre-onglet .elementor-heading-title { font-weight: 400; }
}

/* Widgets volontairement plus larges que leur conteneur (formes decoratives, visuel du hero mobile Solution) :
   Elementor borne tout widget a 100 % de son conteneur, ce qui retrecit ces elements en mobile. */
.elementor.elementor .e-con > .elementor-widget.fp-sans-max,
.elementor.elementor .e-con > .e-con-inner > .elementor-widget.fp-sans-max { max-width: none; }

/* ===== Tarifs, version tablette/mobile (maquette 402 px 2143:2605) ===== */
@media (max-width: 1279px) {
	/* interrupteur Mensuel / Annuel a l echelle de la maquette mobile */
	.elementor-widget-n-tabs.tf-bascule > .e-n-tabs > .e-n-tabs-heading { padding:3.22px; border-radius:10.47px; }
	.elementor-widget-n-tabs.tf-bascule > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title { flex:0 0 91.04px; width:91.04px; height:29.81px; }
	/* graisse Regular des titres mobiles (la graisse n est pas reglable par appareil dans Elementor) */
	.tf-mobile-400 .elementor-heading-title { font-weight:400 !important; }
	/* pastilles des fonctionnalites calees sur les capitales (13,66 px) */
	.tf-fonc-m .elementor-icon-box-icon { margin-top:5.12px; }
	/* photo Besoin d aide remise dans le flux, sous le texte */
	.elementor-1225 .elementor-element.tf-flux-mobile { position:static !important; }
	/* FAQ : la derniere question reprend le rythme mobile de .fp-faq */
	.tf-faq .e-n-accordion-item:last-child .e-n-accordion-item-title-text { max-width:none; line-height:inherit; }
	.tf-faq .e-n-accordion-item:last-child > .e-n-accordion-item-title { padding-top:24px; }
	.tf-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor, .tf-faq .e-n-accordion-item:not(:last-child) > .e-con .elementor-widget-text-editor, .tf-faq .e-n-accordion-item:last-child > .e-con .elementor-widget-text-editor { margin-top:-14px; }
}

/* Tarifs tablette/mobile : les retours a la ligne forces des listes Besoin d aide et des cartes Pourquoi ne valent que pour l ordinateur */
@media (max-width: 1279px) {
	.elementor-1225 .tf-aide-liste br, .elementor-1225 .elementor-element-tf05g br { display:none; }
}

/* Pictos des atouts (onglets Creez / Gagnez / Avancez) : l'image etait posee
   sur la ligne de texte (25,5 px), donc 2 px trop bas dans son cadre de 34 px.
   Classe fp-picto sur les widgets image. */
.fp-picto img { display: block; }

/* ------------------------------------------------------------------
   Filtres et recherche de grille (js/filtre-deroulant.js) : pastilles
   des filtres actifs et nombre de résultats. Maquette Centre de
   connaissances 2143:4313 : pastilles #E7EBF0, rayon 6, 35 px de haut,
   12 px de marge intérieure, croix 10 px #4A5668, texte Inter 15 #1A222E.
   Les pastilles remplacent « Aucun filtre sélectionné » et s'alignent
   sur le bord de la barre de filtres (annule le retrait de la ligne).
------------------------------------------------------------------ */
.fp-filtre-etat .fp-pastilles {
	display: none;
}
.fp-filtre-etat.a-des-filtres .elementor-heading-title {
	display: none;
}
.fp-filtre-etat.a-des-filtres .fp-pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 5px; /* haut des pastilles 3 px au-dessus du texte de Reinitialiser (maquette) */
	margin-left: calc(-1 * var(--padding-left, 0px));
}
button.fp-pastille {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 35px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 6px;
	background: #E7EBF0;
	color: #1A222E;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s;
}
button.fp-pastille:hover,
button.fp-pastille:focus-visible {
	background: #D4DAE2;
	color: #1A222E;
}
button.fp-pastille svg {
	flex: none;
	color: #4A5668;
}
body:not(.elementor-editor-active) .fp-filtre-total:not(.est-visible) {
	display: none;
}

/* ------------------------------------------------------------------
   Centre de connaissances : cartes (modèle de boucle 2143:4060),
   étiquettes de thématique (maquette TAGS 2143:4346) et ligne d'infos.
------------------------------------------------------------------ */
.fp-tag {
	display: inline-block;
	padding: 8px;
	border-radius: 6px;
	font-family: "PP Mori", sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 9px;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}
.fp-tag--violet { background: #EFE0FC; color: #511883; }
.fp-tag--cyan { background: #D2F7FF; color: #00788F; }
.fp-tag--bleu { background: #C7CFFA; color: #0F1743; }
.fp-tag--orange { background: #FFDFD6; color: #4B1201; }
.fp-tag--vert { background: #D5F8F1; color: #0E5746; }
.fp-tag--bleu-gris { background: #C8E4EF; color: #112E3C; }
.fp-tag--jaune { background: #FCE4B6; color: #473102; }
.fp-infos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: #303B4A;
}
.fp-infos-format { font-weight: 500; }
.fp-infos-point {
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: currentColor;
}
.kl-carte, .kl-carte:hover { text-decoration: none; }
.kl-carte .elementor-heading-title { color: inherit; }
.kl-shortcode .elementor-shortcode { line-height: 0; }
/* titre et extrait : 3 lignes au plus ; le titre réserve toujours 3 lignes
   pour que l'extrait et les infos restent alignés d'une carte à l'autre */
.kl-titre .elementor-heading-title,
.kl-extrait .elementor-heading-title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kl-titre .elementor-heading-title { min-height: 4.2em; }
.kl-image img { display: block; }
/* les infos se calent en bas de la carte (hauteur fixe de la maquette) */
.kl-infos { margin-top: auto; }

/* Centre de connaissances, tablette/mobile : les colonnes de la grille peuvent retrecir sous la
   largeur de leur contenu (sinon une etiquette longue elargissait la carte au-dela de l'ecran),
   etiquettes sur deux lignes si besoin, titre sans reserve de 3 lignes en une colonne. */
.kc-grille .elementor-loop-container { grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr)); }
@media (max-width: 1279px) {
	.fp-tag { white-space: normal; line-height: 1.22; padding: 4.07px 8px; }
}
@media (max-width: 767px) {
	.kl-titre .elementor-heading-title { min-height: 0; }
}

/* ===== Services et formations (page, maquette 2234:5769) ===== */
/* Hero : formes, texture en Densite couleur + 15 % (au-dessus des formes), photo detouree par la forme de la maquette.
   Sur ordinateur, tout est place depuis le centre de la page (comme le cadre grand ecran 2234:6991). */
.sf-hero { isolation:isolate; }
.sf-texture { top:0 !important; left:0 !important; width:100% !important; height:100%; mix-blend-mode:color-burn; opacity:.15; pointer-events:none; }
.sf-texture .elementor-widget-container { height:100%; }
.sf-texture img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.sf-forme img { display:block; width:100%; height:auto; max-width:none; }
.sf-photo-masque img { display:block; width:816.03px; height:567.3px; max-width:none; object-fit:cover;
  -webkit-mask:url("/wp-content/uploads/2026/10/services-hero-masque-photo.svg?v=2") center / 100% 100% no-repeat;
  mask:url("/wp-content/uploads/2026/10/services-hero-masque-photo.svg?v=2") center / 100% 100% no-repeat; }
/* fleche du bouton : carre blanc de 30 px (maquette) */
.sf-fleche-30 .elementor-button-icon svg { width:30px; height:30px; }
/* tablette et mobile : la photo passe sous le texte, calee a droite et coupee en bas comme sur ordinateur ;
   les formes gardent leur place par rapport a la photo (proportions de la maquette 1440) */
@media (max-width: 1279px) {
  .sf-hero { --sf-w: min(calc(100vw - 48px), 640px); }
  .sf-hero-texte { order:1; }
  .sf-photo-masque { order:2; position:relative !important; left:auto !important; top:auto !important; align-self:flex-end;
    width:var(--sf-w) !important; margin:40px 0 calc(var(--sf-w) * -0.03885) 0 !important; }
  .sf-photo-masque img { width:100%; height:auto; aspect-ratio:816.03 / 567.3; }
  .sf-forme { top:auto !important; left:auto !important; }
  .sf-forme-1 { width:calc(var(--sf-w) * 1.08077) !important; right:calc(24px - var(--sf-w) * 0.27831) !important; bottom:calc(var(--sf-w) * 0.38205) !important; }
  .sf-forme-2 { width:calc(var(--sf-w) * 0.6945) !important; right:calc(24px + var(--sf-w) * 0.50026) !important; bottom:calc(var(--sf-w) * -0.07123) !important; }
}
@media (max-width:767px) {
  /* mobile : la photo est decalee a droite et coupee hors champ (18 % de sa largeur), comme sur ordinateur ; les formes suivent */
  .sf-hero { --sf-w: calc((100vw - 32px) * 1.2); --sf-r: calc(var(--sf-w) * -0.3); }
  .sf-photo-masque { max-width:none !important; margin-top:32px !important; margin-right:calc(var(--sf-r) - 16px) !important; }
  .sf-forme-1 { right:calc(var(--sf-r) - var(--sf-w) * 0.27831 + 70px) !important; } /* forme claire decalee a gauche pour rester visible derriere la photo */
  .sf-forme-2 { right:calc(var(--sf-r) + var(--sf-w) * 0.50026) !important; }
}

/* ===== Services et formations : 2. Démarrer en autonomie (maquette 2234:6073) ===== */
.sf-autonomie { isolation:isolate; }
.sf2-forme img, .sf2-dash img { display:block; width:100%; height:auto; max-width:none; }
@media (max-width: 1279px) {
  .sf-autonomie { --sf2-d: min(calc((100vw - 48px) * 1.25), 949.5px); }
  .sf2-texte { order:1; }
  .sf2-dash { order:2; position:relative !important; left:auto !important; top:auto !important; align-self:flex-start; flex-shrink:0; width:var(--sf2-d) !important; max-width:none !important; margin:40px 0 calc(var(--sf2-d) * -0.15845) calc(var(--sf2-d) * 0.15) !important; }
  .sf2-forme { top:auto !important; left:calc(24px + var(--sf2-d) * 0.05111) !important; bottom:calc(var(--sf2-d) * 0.16916) !important; width:calc(var(--sf2-d) * 0.52449) !important; }
}
@media (max-width:767px) {
  .sf-autonomie { --sf2-d: calc((100vw - 32px) * 1.25); }
  .sf2-dash { margin-top:32px !important; }
  .sf2-forme { left:calc(16px + var(--sf2-d) * 0.05111) !important; }
}

/* ===== Centre de connaissances, mobile (≤ 767) : chaque carte prend sa hauteur,
   espace fixe entre l'extrait et les infos (desktop 36,8 × 20/28 = 26) ===== */
@media (max-width:767px) {
  body .elementor-1310 .elementor-element.elementor-element-kc04grd .elementor-loop-container { grid-auto-rows: auto; }
  .kl-carte .kl-infos { margin-top: 26px; }
}


/* Cas client : filets au-dessus du recit et du bilan limites a la largeur du contenu (8 oct.) */
.cs-filet::after { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:min(var(--content-width, 1216px), calc(100% - var(--padding-left, 0px) - var(--padding-right, 0px))); height:1px; background:#E7EBF0; pointer-events:none; }

/* ===== Services et formations : 3. Choisissez l'accompagnement (maquette 2234:5926) ===== */
.sf3-lien a { padding-right:24px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M7.125 14.25L11.875 9.5L7.125 4.75' fill='none' stroke='%232B4EDE' stroke-width='1.58333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 19px 19px; }
.sf3-illu img { display:block; width:100%; height:auto; }
@media (max-width: 1279px) {
  .sf3-carte br { display:none; }
  .sf3-carte > .sf3-illu { position:static !important; order:2; width:160px !important; margin-top:16px; }
  .sf3-carte > .e-con:last-child { order:3; }
}
@media (max-width:767px) {
  .sf3-carte > .sf3-illu { width:128px !important; }
}

/* ===== Services et formations : 4. Nos services d'accompagnement (maquette 2234:5771) ===== */
.sf4-acc .e-n-accordion-item { background:#fff; border:1px solid transparent; border-radius:15px; overflow:hidden; }
.sf4-acc .e-n-accordion-item[open] { border-color:#A9C1D6; }
.sf4-acc .e-n-accordion-item > .e-n-accordion-item-title { border:0; border-radius:0; align-items:flex-start; }
.sf4-acc .e-n-accordion-item > .e-con { border:0; }
.sf4-acc .e-n-accordion-item-title-text { color:inherit; display:grid; grid-template-columns:30px 1fr; column-gap:10px; align-items:start; }
.sf4-acc .sf4-ico { box-sizing:border-box; display:block; width:30px; height:30px; max-width:none; padding:4px; margin-top:-1.1px; background:#fff; border:1px solid #E7EBF0; border-radius:8px; box-shadow:0 16px 16px -8px rgba(12,12,13,.1), 0 4px 4px -4px rgba(12,12,13,.05); }
.sf4-acc .sf4-offres { grid-column:1 / -1; display:block; margin:7.25px 0 -8.75px; font-family:"Inter", sans-serif; font-weight:500; font-size:18px; line-height:1.7; letter-spacing:0; color:#677486; }
.sf4-acc .e-n-accordion-item-title-icon { margin-top:0.4px; }
.sf4-acc .e-n-accordion-item-title-icon svg { width:27px; height:27px; fill:none !important; }
.sf4-txt p { margin:0; }
.sf4-txt p + p { margin-top:12px; }
@media (max-width: 1279px) {
  .sf4-acc .e-n-accordion-item-title-text br { display:none; }
}
@media (max-width:767px) {
  .sf4-acc .sf4-offres { font-size:16px; margin:6px 0 -7.78px; }
}

/* ===== Services et formations : 5. Besoin d'un coup de main (maquette 2234:6317, copie du bandeau cas client cg0cta) ===== */
@media (max-width:767px) { .sf5-titre br { display:none; } }

/* ===== Cas d'usage (page, maquette 2143:3009) : 1. Hero ===== */
.cu-hero { isolation:isolate; }
.cu-hero { overflow:hidden; }
.cu-texture { max-width:none !important; top:0 !important; left:min(0px, calc(50% - 720px)) !important; width:max(1800px, 100%) !important; height:100%; mix-blend-mode:color-burn; opacity:.36; pointer-events:none; }
.cu-texture .elementor-widget-container { height:100%; }
.cu-texture img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:left top; }
@media (max-width: 1279px) { .cu-texture { left:auto !important; right:0 !important; width:1800px !important; } .cu-texture img { object-position:right bottom; } }
.cu-forme img { display:block; width:100%; height:auto; max-width:none; }
.cu-photo-masque img { display:block; width:100%; height:auto; max-width:none; aspect-ratio:817.613 / 422.53; object-fit:cover;
  -webkit-mask:url("/wp-content/uploads/2026/10/cas-usage-hero-masque-photo.svg") center / 100% 100% no-repeat; mask:url("/wp-content/uploads/2026/10/cas-usage-hero-masque-photo.svg") center / 100% 100% no-repeat; }
@media (max-width: 1279px) {
  .cu-hero { --cu-w: min(calc(100vw - 48px), 640px); }
  .cu-hero-texte { order:1; }
  .cu-photo-masque { order:2; position:relative !important; left:auto !important; top:auto !important; align-self:flex-end; width:var(--cu-w) !important; margin:40px 0 calc(var(--cu-w) * 0.069) 0 !important; }
  .cu-forme { top:auto !important; left:auto !important; }
  .cu-forme-1 { width:calc(var(--cu-w) * 0.9628) !important; right:calc(24px + var(--cu-w) * 0.1326) !important; bottom:calc(var(--cu-w) * -0.0541) !important; }
  .cu-forme-2 { width:calc(var(--cu-w) * 0.6325) !important; right:calc(24px - var(--cu-w) * 0.0422) !important; bottom:calc(var(--cu-w) * 0.4573) !important; }
}
@media (max-width:767px) {
  /* mobile : photo decalee a droite et coupee hors champ (30 % de sa largeur), formes recalees avec elle, descendue pour ne pas toucher les boutons */
  .cu-hero { --cu-w: calc((100vw - 32px) * 1.2); --cu-r: calc(var(--cu-w) * -0.3); }
  .cu-photo-masque { max-width:none !important; margin-top:112px !important; margin-right:calc(var(--cu-r) - 16px) !important; }
  .cu-forme-1 { right:calc(var(--cu-r) + var(--cu-w) * 0.1326) !important; }
  .cu-forme-2 { right:calc(var(--cu-r) - var(--cu-w) * 0.0422) !important; }
}

/* ===== Vignettes cas client : photo (champ cc_photo) comme les cartes du Centre de connaissances : pleine largeur, 205 px de haut, arrondi 10 px ===== */
.cl-carte .cl-logo { width:100%; }
.cl-carte .cl-logo img { width:100%; height:205px; max-width:none; object-fit:cover; object-position:center; border-radius:10px; }

/* ===== Grille cas client : couleur de l'etiquette secteur (classe secteur-<slug> ajoutee par WordPress sur chaque vignette) ===== */
.e-loop-item.secteur-medico-social .elementor-element.cl-chip { --cl-fond:#F1F3FE; --cl-texte:#2B4EDE; }
.e-loop-item.secteur-mutuelle-et-assurance .elementor-element.cl-chip { --cl-fond:#F2FDFF; --cl-texte:#009FBD; }
.e-loop-item.secteur-banque .elementor-element.cl-chip { --cl-fond:#F4FDFA; --cl-texte:#10BBA9; }
.e-loop-item.secteur-industrie .elementor-element.cl-chip { --cl-fond:#F0F2F5; --cl-texte:#666F8E; }
.e-loop-item.secteur-conseil .elementor-element.cl-chip { --cl-fond:#F8F5FC; --cl-texte:#9841E3; }
.e-loop-item .elementor-element.cl-chip { background-color:var(--cl-fond, #EFE0FC) !important; }
.e-loop-item .elementor-element.cl-chip .elementor-heading-title { color:var(--cl-texte, #511883) !important; }

/* ===== Cas clients, mobile (<= 767) : chaque carte prend sa hauteur, comme le Centre de connaissances ===== */
@media (max-width:767px) {
  body .elementor-863 .elementor-element.elementor-element-cc04grd .elementor-loop-container { grid-auto-rows: auto; }
}

/* ===== Services et formations : 6. Nos formations (maquette 2234:6691) ===== */
.sf6-illu img { display:block; width:100%; height:auto; max-width:none; }
.elementor.elementor .e-con.sf6-carte > .elementor-widget-image { max-width:none; }
@media (max-width: 1279px) {
  .sf6-carte .sf6-illu-gauche { position:static !important; order:10; align-self:flex-end; margin-top:24px; }
}

/* ===== Services et formations : 7. Fiches formation et autres formations (maquette 2234:6437 a 2234:6398) ===== */
.elementor.elementor .e-con.sf7-carte > .elementor-widget-image { max-width:none; }
.sf7-photo img { display:block; width:100%; height:auto; max-width:none; }
.sf7-autres-photo img { display:block; width:100%; height:420px; max-width:none; object-fit:cover; object-position:center top; }
.sf7-picto img { display:block; width:24px; height:24px; }
.sf7-txt p { margin:0; }
.sf7-txt p + p { margin-top:27.2px; }
.sf7-tarifs p + p { margin-top:0; }
.sf7-liste ul { list-style:none; margin:0; padding:0; }
.sf7-liste li { position:relative; padding-left:16px; }
.sf7-liste li + li { margin-top:4px; }
.sf7-liste li::before { content:""; position:absolute; left:0; top:10.6px; width:6px; height:6px; border-radius:50%; background:#2B4EDE; }
@media (max-width: 1279px) {
  .sf7-carte .sf7-photo { position:static !important; order:-1; width:100% !important; margin-bottom:24px !important; }
  .sf7-carte .sf7-photo img { height:200px; object-fit:cover; border-radius:15px; }
  .sf7-txt p + p { margin-top:16px; }
}

/* ===== Services et formations : 9. Pourquoi se faire accompagner (maquette 2234:5896) ===== */
.sf9-ico img { box-sizing:border-box; display:block; width:35px; height:35px; padding:5.5px; background:#fff; border:1.17px solid #E7EBF0; border-radius:9.33px; box-shadow:0 16px 16px -8px rgba(12,12,13,.1), 0 4px 4px -4px rgba(12,12,13,.05); }
@media (max-width: 1279px) { .sf9-carte br { display:none; } }

/* ===== Services et formations : 10. Vos questions fréquentes (maquette 2234:6341) : reprend .fp-faq et les écarts de la FAQ Tarifs, sans les règles propres à sa dernière question ===== */
.sf-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor { max-width:693px; margin-top:-21px; }
.sf-faq .elementor-widget-text-editor a { color:#2B4EDE; text-decoration:underline; text-underline-offset:2px; }
.sf-faq .e-n-accordion-item > .e-con { padding-bottom:23.6px; }
@media (max-width: 1279px) { .sf-faq .e-n-accordion-item > .e-con .elementor-widget-text-editor { margin-top:-14px; } }

/* ===== Bouton « Retour en haut » (maquette 2317:524) : rond 64 px #C7CFFA, flèche 32 px #203DBB, 48 px du bord droit ; fixe en bas à droite, visible après un écran de défilement ===== */
.fp-retour-haut { position:fixed; right:48px; bottom:48px; z-index:990; display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%; background:#C7CFFA; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, background-color .2s ease, visibility 0s linear .25s; }
.fp-retour-haut.est-visible { opacity:1; visibility:visible; transform:none; transition:opacity .25s ease, transform .25s ease, background-color .2s ease; }
.fp-retour-haut svg { width:32px; height:32px; display:block; }
.fp-retour-haut:hover, .fp-retour-haut:focus-visible { background:#B6C1F8; }
.fp-retour-haut:focus-visible { outline:2px solid #203DBB; outline-offset:3px; }
@media (max-width:767px) { .fp-retour-haut { right:16px; bottom:16px; width:48px; height:48px; } .fp-retour-haut svg { width:24px; height:24px; } }
@media (prefers-reduced-motion: reduce) { .fp-retour-haut { transition:none; transform:none; } }

/* Boutons avec fleche 30 px (Services) : texte centre verticalement sur l'icone (retour du 12 oct.) */
.sf-fleche-30 .elementor-button-content-wrapper { align-items:center; }
/* Ancres de la section 3 vers les services (accordeons) et les fiches formation : marge de defilement, barre d'admin comprise */
.sf4-acc .e-n-accordion-item, .elementor-element-sf07c1, .elementor-element-sf07c2, .elementor-element-sf07c3, .elementor-element-sf07c4 { scroll-margin-top: calc(40px + var(--fp-entete)) !important; } /* 40 px sous la barre de navigation collante ; !important car Elementor pose 66 px en ligne */

/* ===== Services et formations, version mobile (maquettes 2234:8099 section 3 et 2234:8130 fiches formation) ===== */
@media (max-width:767px) {
	/* section 3 : filet sous le titre, illustration centree, carte claire autour des liens seulement */
	.sf-accompagnement .elementor-element-sf03t .elementor-heading-title { position:relative; padding-bottom:28px; } /* 35 px visuels : la boite de texte CSS a 7 px de blanc sous les lettres */
	.sf-accompagnement .elementor-element-sf03t .elementor-heading-title::after { content:''; position:absolute; left:50%; bottom:0; width:calc(100% - 70px); max-width:305px; height:1px; background:#D4DAE2; transform:translateX(-50%); }
	.sf3-carte { overflow:visible !important; }
	.sf3-carte > .sf3-illu { order:0; width:117px !important; margin:0; align-self:center; }
	.sf3-carte > .e-con:last-child { order:3; background:#F5F8FD; border-radius:15px; } /* la couleur de fond d'Elementor n'est pas responsive */
	.sf3-carte { background:transparent !important; }
	/* section 6 : le grand diplome deborde en haut a droite de la carte (le fichier a des marges transparentes : 12 % en haut, 17 % a droite) */
	.sf6-carte .sf6-illu-grande { top:-71px !important; left:auto !important; right:-12px !important; width:170px !important; }
	/* fiches formation : bandes pleine largeur, photo en tete sans arrondi */
	.sf7-carte .sf7-photo { width:calc(100% + 40px) !important; margin:0 -20px 26px !important; } /* 34 px visuels jusqu'aux capitales du titre */
	.sf7-carte .sf7-photo img { height:156px; border-radius:0; }
	.sf7-carte.sf7-autres .sf7-autres-photo { width:calc(100% + 40px) !important; margin:0 -20px 24px; }
}
/* accordeons mobiles des fiches (<= 1024) : chevron 23 px, contenu sans bordure */
.sf7-acc .e-n-accordion-item-title-icon { flex:0 0 23px; }
.sf7-acc .e-n-accordion-item-title-icon svg { width:23px; height:23px; }
.sf7-acc .e-n-accordion-item > .e-con .sf7-txt p + p { margin-top:16px; }
.sf7-acc details[open] > summary { border-radius:15px 15px 0 0 !important; }

/* ===== Cas d'usage (page, maquette 2143:3035) : 2. Des projets differents ===== */
.cu2-illu img { display:block; margin:0 auto; }
@media (max-width: 1279px) { .cu-projets .elementor-element-cu02p br { display:none; } }

/* ===== Cas d'usage (page) : 3. Cartes secteur (maquette 2143:3115 et suivantes) ===== */
.cu3-carte { isolation:isolate; }
.cu3-photo img { display:block; width:100%; height:auto; }
.cu3-ico img { display:block; }
.cu3-lien a { display:inline-block; padding-right:26px; background:url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.771484%206.77148H12.7715M6.77148%2012.7715L12.7715%206.77148L6.77148%200.771484%22%20stroke%3D%22%232B4EDE%22%20stroke-width%3D%221.54286%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat right center / 14px 14px; }
.cu3-onglet { height:76px; overflow:hidden; max-width:none !important; }
.cu3-onglet img { display:block; width:156px; max-width:none; margin-top:-17.5px; }
.cu3-resah img { display:block; width:100%; height:auto; }
@media (max-width:767px) { .cu3-onglet, .cu3-resah { display:none; } }

/* ===== Cas d'usage (page) : 4. Benefices et suite (bandeau, solution francaise, temoignage) ===== */
.cu-benefices, .cu-bandeau { isolation:isolate; }
.cu4-forme, .cu4-bandeau-forme { max-width:none !important; }
.cu5-coche img { display:block; }
.cu6-guillemets img, .cu6-avatar img { display:block; }
.cu6-avatar img { border-radius:50%; }
@media (min-width:768px) and (max-width: 1279px) { .cu-benefices .elementor-element-cu04d1, .cu-benefices .elementor-element-cu04d2, .cu-benefices .elementor-element-cu04d3 { flex:1 1 0; min-width:0; } }

/* ===== Cas d'usage (page) : cartes secteur en mobile (maquette 2143:3361) : sans photo, titre avec chevron, pas de filet entre les rangees ===== */
@media (max-width:767px) {
  .cu3-carte { border:0 !important; }
  .cu-secteurs .elementor-element-cu03r2, .cu-secteurs .elementor-element-cu03r3, .cu-secteurs .elementor-element-cu03r4 { border-top:0 !important; }
  .cu3-carte .cu3-entete { width:100%; padding-right:44px; position:relative; }
  .cu3-carte .cu3-entete::after { content:''; position:absolute; right:-5px; top:50%; width:24px; height:24px; margin-top:-12px; background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%20stroke%3D%22%230B1016%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat center / 24px 24px; transform:rotate(180deg); }
  .cu3-carte .cu3-entete > .e-con { box-shadow:0 16px 16px -8px rgba(12,12,13,.1), 0 4px 4px -4px rgba(12,12,13,.05); }
}

/* ===== Cas d'usage : cartes secteur repliees en mobile (classe est-ferme posee par js/cartes-secteur.js) ===== */
@media (max-width:767px) {
  .cu3-carte .cu3-entete { cursor:pointer; }
  .cu3-carte.est-ferme .cu3-entete ~ * { display:none !important; }
  .cu3-carte.est-ferme .cu3-entete::after { transform:rotate(0deg); }
  .cu3-carte.est-ferme > .e-con { padding-bottom:27.4px !important; }
}

/* ===== Cas d'usage (page) : cartes secteur en mobile, entete sur une ligne (icone + titre), le titre passe a la ligne dans sa boite ===== */
@media (max-width:767px) {
  .cu3-carte .cu3-entete { flex-wrap:nowrap !important; padding-right:36px; }
  .cu3-carte .cu3-entete > .elementor-widget-heading { flex:1 1 auto; min-width:0; }
}

/* ===== Trous entre points d'arret (zoom navigateur : largeur fractionnaire, ex. 1279,5 px) =====
   Elementor ecrit max-width:1279px / min-width:1280px (idem 767/768 et 1849/1850) : entre les deux, aucune regle ne s'applique
   et les elements jumeaux (menu ordinateur + hamburgers) s'affichent ensemble. On applique ici la regle du palier superieur. */
@media (width > 767px) and (width < 768px) { .elementor .elementor-hidden-tablet { display:none; } }
@media (width > 1279px) and (width < 1280px) {
  .elementor .elementor-hidden-desktop { display:none; }
  .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle, .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown { display:none; }
}
@media (width > 1849px) and (width < 1850px) { .elementor .elementor-hidden-desktop { display:none; } }

/* ===== Page Contact (maquette 2385:985) ===== */
.ct-contact .ct-forme img { display:block; width:100%; height:auto; max-width:none; }
.ct-contact .ct-avatar img { display:block; border-radius:50%; }
@media (max-width: 1279px) { .ct-contact .ct-citation br { display:none; } }

/* ===== Page Contact : formulaire (maquette 2385:985) : ombre des champs et texte d'acceptation ===== */
.ct-contact .elementor-widget-form .elementor-field-textual { box-shadow: 0 1.5px 2px rgba(0,0,0,.05); }
.ct-contact .elementor-widget-form .elementor-field-type-acceptance label { color:#677486 !important; font-family:'Inter', sans-serif !important; font-size:13px !important; line-height:1.6 !important; font-weight:400 !important; }
.ct-contact .elementor-widget-form .elementor-field-type-acceptance label a { color:#1A222E; text-decoration:underline; }


/* ===== Page Mentions legales (maquette 2415:2122) ===== */
.ml-hero .ml-forme { max-width:none !important; }
.ml-hero .ml-forme img { display:block; width:100%; height:auto; max-width:none; }
/* texture au-dessus des formes, en densite couleur + a 15 % (rendu Figma) */
.ml-hero .ml-texture { inset:0 !important; width:100% !important; height:100% !important; pointer-events:none; }
.ml-hero .ml-texture img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; mix-blend-mode:color-burn; opacity:.15; }
.ml-texte :is(p, ul, ol) { margin:0; }
.ml-texte :is(p, ul, ol) + :is(p, ul, ol) { margin-top:1.5em; }
.ml-texte :is(ul, ol) { padding-left:28px; }
.ml-texte li + li { margin-top:0; }

/* ===== Page legale (Gutenberg) : contenu du modele Elementor Page legale ===== */
.ml-legal { counter-reset: ml-article; }
.ml-legal :is(p, ul, ol) { max-width:705px; }
.ml-legal :is(h2, h3) { margin:0; font-family:"PP Mori", sans-serif; font-weight:500; letter-spacing:-0.02em; color:#070A1D; }
/* H2 = numero bleu automatique + titre, filet de 705 px dessous */
.ml-legal h2 { counter-increment: ml-article; display:table; width:100%; font-size:30px; line-height:1.25; margin-top:44.75px; padding-bottom:12.75px;
  background:linear-gradient(#D6E3DD, #D6E3DD) left bottom / min(705px, 100%) 1px no-repeat; }
.ml-legal h2::before { content:counter(ml-article); display:table-cell; width:1px; padding-right:20px; white-space:nowrap; color:#2B4EDE; }
.ml-legal > :first-child, .ml-legal .elementor-widget-container > :first-child { margin-top:0; }
.ml-legal h2 + * { margin-top:21.1px; }
.ml-legal h3 { font-size:20px; line-height:1.3; margin-top:32px; }
.ml-legal h3 + * { margin-top:12px; }
.ml-legal a { color:#2B4EDE; text-decoration:underline; text-underline-offset:2px; }
/* tablette et mobile : texte et filet sur toute la largeur (comme la version Elementor) */
@media (max-width: 1279px) { .ml-legal :is(p, ul, ol) { max-width:none; } .ml-legal h2 { background-size:100% 1px; } }
@media (max-width: 767px) { .ml-legal h2 { font-size:24px; margin-top:36px; } .ml-legal h2::before { padding-right:14px; } }


/* ===== Menu haut collant (barre de navigation des deux en-tetes, reglage Elementor « Epingle : haut ») =====
   --fp-entete = hauteur de la barre collante (66 px ordinateur, 64 px tablette et mobile). Les elements colles du site
   sont decales de cette hauteur. Les ancres sont decalees par le reglage « Decalage de l'ancre » de la barre dans Elementor : 68 px (hauteur de la barre blanche en mobile,
   la plus haute ; Elementor applique la meme valeur sur tous les ecrans). */
:root { --fp-entete: 68px; } /* tablette et mobile : barre de 68 px dans les deux en-tetes (logo bleu recale le 21 oct.) */
@media (width > 1279px) { :root { --fp-entete: 66px; } } /* ordinateur : barre de 65 px + filet de 1 px */
/* Les cibles d'ancre recoivent d'Elementor un scroll-margin-top en ligne egal au « Decalage de l'ancre » de la barre collante (68 px) : rien a ajouter ici. */