/**
 * Theme iXnov - styles residuels.
 *
 * Les tokens (couleurs, typo, espacements, layout) vivent dans theme.json.
 * Ce fichier ne porte que ce qu'un attribut de bloc ne sait pas exprimer :
 * pseudo-elements, etats :hover/:focus, decor, positionnement, responsive.
 *
 * Les valeurs par defaut posees ici restent "cedantes" : des qu'un choix est
 * fait en admin, WordPress ajoute .has-background (ou equivalent) et la regle
 * du theme se desengage.
 */

:root {
	--ixnov-header-h: 88px;
	--ixnov-rayon-bouton: 12px;
	--ixnov-rayon-carte: 14px;
	--ixnov-transition: 0.22s ease;
	--ixnov-sortie: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Icones Material Symbols
   ========================================================================== */

/*
 * Un paragraphe dont la famille est "Icones" affiche le glyphe correspondant
 * au nom saisi (ligature). Le client change d'icone en tapant un autre nom.
 *
 * La police est un sous-ensemble de Material Symbols Outlined : seuls les
 * glyphes ci-dessous y sont presents, tout autre nom s'affichera en clair.
 *
 *   arrow_forward   arrow_outward   call        check
 *   desktop_windows extension       groups      handshake
 *   lightbulb       location_on     memory      monitoring
 *   shield          trending_up     verified    wifi
 *
 * Pour en ajouter un, regenerer la police depuis l'API Google Fonts, qui
 * sous-ensemble a la demande - en lui passant la liste complete, pas seulement
 * le nouveau nom :
 *
 *   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
 *     :opsz,wght,FILL,GRAD@20..48,300..500,0..1,0&icon_names=arrow_forward,...
 *
 * puis telecharger le .woff2 designe par le @font-face rendu (avec un
 * navigateur moderne en en-tete, sans quoi Google sert une police statique).
 *
 * Deposer le fichier sous un NOUVEAU nom - le chiffre final incremente,
 * assets/fonts/material-symbols-outlined-subset-2.woff2 pour la version
 * actuelle - et mettre a jour theme.json. Contrairement a main.css et
 * theme.js, que functions.php versionne par leur date de modification, les
 * polices de theme.json sont servies sous une URL fixe : un visiteur deja venu
 * garderait l'ancienne en cache et verrait les nouveaux noms en clair.
 */
.has-icones-font-family {
	line-height: 1;
	font-variation-settings: "wght" 400;
	font-weight: normal;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Focus
   ========================================================================== */

/*
 * theme.json ne sait exprimer que :focus, qui se declenche aussi au clic et au
 * toucher : a l'ouverture du menu mobile, le core donne le focus a la premiere
 * entree et un cadre turquoise s'affichait autour d'elle sans raison visible.
 * On retire l'anneau quand le navigateur juge qu'il n'a pas lieu d'etre, ce qui
 * le conserve integralement pour la navigation au clavier.
 */
:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Ossature de page
   ========================================================================== */

/*
 * Le core espace les blocs de premier niveau du blockGap racine (24px) : entre
 * l'en-tete et le contenu, entre chaque bande pleine largeur, et avant le pied
 * de page. Ces bandes portent deja leur propre rythme vertical (leur padding de
 * section) ; la gouttiere n'y ajoute qu'un liseré de fond parasite des que deux
 * sections voisines n'ont pas la meme couleur. On la retire de l'ossature.
 *
 * Le blockGap reste actif partout ailleurs : c'est lui qui espace les
 * paragraphes et les blocs a l'interieur d'une section.
 */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/*
 * Deux classes ici aussi : la regle du core (":root :where(.is-layout-constrained)
 * > *", 0-1-0) est imprimee apres la feuille du theme et gagnerait a egalite.
 *
 * .wp-block-post-content et non .entry-content : les deux classes vont ensemble
 * au front, mais l'editeur ne pose "entry-content" que lorsqu'il rend le modele
 * complet. Le contenu seul, lui, n'a que .wp-block-post-content - et les bandes
 * pleine largeur y reprenaient la gouttiere de 24px du core.
 */
.wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* ==========================================================================
   En-tete
   ========================================================================== */

/*
 * Le rendu FSE enveloppe l'en-tete dans un .wp-block-template-part dont la
 * hauteur est exactement celle du header : position:sticky y serait inoperant.
 * display:contents retire ce wrapper du flux de mise en page.
 */
.wp-site-blocks > .wp-block-template-part:first-child {
	display: contents;
}

.header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color var(--ixnov-transition), box-shadow var(--ixnov-transition), border-color var(--ixnov-transition);
	border-bottom: 1px solid transparent;
}

.header:not(.has-background) {
	background-color: transparent;
}

.header.is-stuck:not(.has-background) {
	background-color: rgba(255, 255, 255, 0.96);
	border-bottom-color: var(--wp--preset--color--bordure);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
}

/*
 * backdrop-filter sur .header ferait de lui un containing block pour les
 * descendants position:fixed - le panneau mobile resterait piege dedans.
 * On deporte donc le flou sur un pseudo-element.
 */
.header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	backdrop-filter: blur(8px);
	transition: opacity var(--ixnov-transition);
}

.header.is-stuck::before {
	opacity: 1;
}

.header-inner {
	min-height: var(--ixnov-header-h);
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-inline: var(--wp--preset--spacing--40);
}

/*
 * Le lien du logo est un inline : la line-box qu'il genere ajoute un
 * descender sous l'image, la figure devient plus haute que le visuel et le
 * logo se retrouve cale trop haut malgre le centrage flex du header-inner.
 * Passer figure et lien en flex fait epouser la hauteur reelle de l'image.
 */
.header-logo,
.header-logo a {
	display: flex;
	align-items: center;
}

.header-logo {
	flex: none;
	margin: 0;
}

.header-logo img {
	display: block;
	height: 46px;
	width: auto;

	/* La largeur suit la hauteur a chaque image : le logo reste proportionne. */
	transition: height var(--ixnov-transition), transform var(--ixnov-transition);

	/* Reduction ancree a gauche : le logo reste aligne sur la gouttiere. */
	transform-origin: left center;
}

.header-logo a:hover img,
.header-logo a:focus-visible img {
	transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
	.header-logo img {
		transition: none;
	}
}

.header-cta {
	flex: none;
}

/*
 * Le design colle la CTA a la derniere entree du menu : les deux forment un
 * meme groupe, le selecteur de langue reste cale a droite. Avec le seul
 * space-between du bloc, l'espace libre etait reparti entre chacun des quatre
 * enfants et la CTA se retrouvait aussi loin du menu que le logo. Les marges
 * auto absorbent cet espace libre avant que justify-content ne le distribue :
 * il ne reste plus qu'un ecart de blockGap entre le menu et la CTA, et le
 * reste se partage a parts egales avant le menu et avant la langue.
 */
.header-inner > .ixnov-nav,
.header-inner > .selecteur-langue {
	margin-inline-start: auto;
}

/* Selecteur de langue ----------------------------------------------------- */

/*
 * Repris du design : la langue courante en noir et demi-gras, les autres en
 * gris, separees par un filet vertical de 1px.
 */
.selecteur-langue {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
}

.selecteur-langue__actif {
	color: var(--wp--preset--color--texte);
	font-weight: 500;
}

/*
 * Gris propre au filet, plus soutenu que la couleur de bordure de la palette :
 * a 1px de large, --bordure disparaitrait a l'ecran.
 */
.selecteur-langue__filet {
	width: 1px;
	height: 12px;
	background-color: #d5dada;
}

.selecteur-langue__lien {
	color: inherit;
	text-decoration: none;
	transition: color var(--ixnov-transition);
}

.selecteur-langue__lien:hover,
.selecteur-langue__lien:focus {
	color: var(--wp--preset--color--primaire);
}

/* Navigation principale --------------------------------------------------- */

.ixnov-nav .wp-block-navigation-item__content {
	position: relative;
	padding: 8px 2px;
	color: var(--wp--preset--color--texte);
	background-image: linear-gradient(var(--wp--preset--color--primaire), var(--wp--preset--color--primaire));
	background-repeat: no-repeat;
	background-position: center 100%;
	background-size: 0% 2px;
	transition: background-size var(--ixnov-sortie), color var(--ixnov-transition);
}

.ixnov-nav .wp-block-navigation-item__content:hover,
.ixnov-nav .current-menu-item > .wp-block-navigation-item__content,
.ixnov-nav .current-menu-parent > .wp-block-navigation-item__content,
.ixnov-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primaire);
	background-size: 100% 2px;
}

/* Panneau mobile ---------------------------------------------------------- */

/*
 * Le panneau est monte des le chargement, a sa taille definitive, et attend
 * hors ecran a droite. L'ouverture ne fait que le ramener a sa place : rien
 * n'est construit au moment du clic, et la fermeture le renvoie d'ou il vient.
 *
 * C'est pour cela qu'on ne masque pas le conteneur en display:none - une boite
 * non rendue n'a ni hauteur ni largeur, et il n'y aurait aucun etat de depart a
 * partir duquel une transition pourrait jouer. visibility:hidden le retire du
 * clic, du parcours clavier et de l'arbre d'accessibilite, tout en le laissant
 * construit.
 *
 * Le core bascule sur l'overlay a 600px ; le design le veut a 1024px, d'ou le
 * point de rupture. Le comportement du bloc lui-meme (piege de focus, aria,
 * fermeture au clic exterieur) reste entierement gere par le core.
 */
@media (max-width: 1024px) {
	.header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/*
	 * La CTA est rendue par le serveur dans .header-inner, puis deplacee dans le
	 * panneau par le script. Sans cette regle elle s'affichait dans l'en-tete au
	 * chargement, puis disparaissait des l'execution du script : un clignotement
	 * visible a chaque rechargement. On la masque tant qu'elle est dans
	 * l'en-tete ; une fois deplacee, le selecteur ne s'applique plus et elle
	 * reapparait dans le panneau, sans dependre du moment ou le script s'execute.
	 */
	.header-inner > .header-cta {
		display: none;
	}

	/*
	 * Le selecteur suit le meme chemin que la CTA : le script le deplace dans le
	 * panneau, on le masque donc tant qu'il est dans l'en-tete pour eviter le
	 * meme clignotement au chargement.
	 */
	.header-inner > .selecteur-langue {
		display: none;
	}

	/* Dans le panneau, il ferme la colonne sous la CTA, centre. */
	.wp-block-navigation__responsive-container-content > .selecteur-langue {
		justify-content: center;
		margin-block-start: 18px;
	}

	/*
	 * Selecteur volontairement long : le core impose au conteneur ferme
	 * "position:relative; display:block" au-dessus de 600px avec quatre classes,
	 * et le repeint en blanc a l'ouverture avec cinq. Il faut cette force pour
	 * reprendre la main sur les deux etats.
	 */
	.header .ixnov-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;

		/*
		 * dvh et non inset:0 ni 100vh : sur mobile, ces deux dernieres valeurs
		 * se calent sur la vue barre d'adresse masquee. Le panneau depassait
		 * donc le bas de l'ecran tant que la barre etait affichee, et la CTA de
		 * contact, collee en bas, tombait sous le pli - il fallait faire defiler
		 * pour l'atteindre. dvh suit la hauteur reellement visible : le bas du
		 * panneau reste le bas de l'ecran, barre affichee ou non.
		 */
		height: 100vh;
		height: 100dvh;

		z-index: 200;
		display: flex;
		flex-direction: column;
		padding: 0;
		visibility: hidden;
		background-color: rgba(0, 0, 0, 0.45);
		animation: none;

		/*
		 * overflow:clip et non hidden : hidden creerait une boite defilable que
		 * la mise au focus du premier lien - faite par le core a l'ouverture -
		 * ferait defiler pour rattraper le panneau encore hors ecran. Ce
		 * defilement annulait la translation et donnait l'illusion d'un
		 * mouvement inverse. clip ne cree aucune boite defilable.
		 */
		overflow: clip;

		/* A la fermeture, le voile ne disparait qu'une fois le panneau sorti. */
		transition: visibility 0s linear 0.35s;
	}

	.header .ixnov-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		visibility: visible;
		transition: visibility 0s;
	}

	/*
	 * Le panneau occupe tout l'ecran. Le retrait lateral reprend celui de
	 * .header-inner : les entrees s'alignent sur le logo. Le retrait haut vaut
	 * la hauteur de l'en-tete, pour que le contenu commence sous la ligne ou se
	 * trouvait le bouton.
	 */
	.header .ixnov-nav .wp-block-navigation__responsive-dialog {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;

		/*
		 * Explicite : avec inset:0, la taille vient des decalages et s'applique
		 * a la boite de contenu. En content-box, les 72px de retrait haut
		 * s'ajouteraient a la hauteur de la vue et repousseraient la CTA hors
		 * de l'ecran.
		 */
		box-sizing: border-box;

		/*
		 * Le panneau ne defile pas lui-meme : sinon, sur une vue courte
		 * (telephone en paysage), la CTA de contact - derniere de la colonne -
		 * passait sous le pli et il fallait faire defiler pour la trouver.
		 * C'est la liste des entrees qui defile, la CTA reste posee en bas.
		 */
		overflow: hidden;
		padding: var(--ixnov-header-h) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
		background-color: var(--wp--preset--color--blanc);
		transform: translateX(100%);
		transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.header .ixnov-nav .is-menu-open .wp-block-navigation__responsive-dialog {
		transform: translateX(0);
	}

	/*
	 * Les entrees se posent une par une derriere le panneau : chacune part de
	 * 16px a droite et rejoint sa place. Le decalage demarre a 0,12s - le
	 * panneau a alors parcouru l'essentiel de sa course - puis avance de 0,05s
	 * par rang, la CTA fermant la marche.
	 *
	 * Le rang est porte par --ixnov-rang plutot que par une regle complete par
	 * entree : une seule declaration de transition, et le menu peut grandir sans
	 * qu'on y revienne.
	 *
	 * A la fermeture, aucun delai n'est applique : tout repart d'un bloc avec le
	 * panneau, sans trainee.
	 */
	.header .ixnov-nav .wp-block-navigation-item,
	.header .ixnov-nav .wp-block-navigation__responsive-container-content > .selecteur-langue,
	.header .ixnov-nav .wp-block-navigation__responsive-container-content > .header-cta {
		--ixnov-rang: 0;
		opacity: 0;
		transform: translateX(16px);
		transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.header .ixnov-nav .is-menu-open .wp-block-navigation-item,
	.header .ixnov-nav .is-menu-open .wp-block-navigation__responsive-container-content > .selecteur-langue,
	.header .ixnov-nav .is-menu-open .wp-block-navigation__responsive-container-content > .header-cta {
		opacity: 1;
		transform: none;
		transition-delay: calc(0.12s + var(--ixnov-rang) * 0.05s);
	}

	.header .ixnov-nav .is-menu-open .wp-block-navigation-item:nth-child(2) { --ixnov-rang: 1; }
	.header .ixnov-nav .is-menu-open .wp-block-navigation-item:nth-child(3) { --ixnov-rang: 2; }
	.header .ixnov-nav .is-menu-open .wp-block-navigation-item:nth-child(4) { --ixnov-rang: 3; }
	.header .ixnov-nav .is-menu-open .wp-block-navigation-item:nth-child(5) { --ixnov-rang: 4; }
	.header .ixnov-nav .is-menu-open .wp-block-navigation-item:nth-child(n + 6) { --ixnov-rang: 5; }

	/* La CTA puis le selecteur ferment la marche, quel que soit le nombre d'entrees. */
	.header .ixnov-nav .is-menu-open .wp-block-navigation__responsive-container-content > .header-cta {
		--ixnov-rang: 6;
	}

	.header .ixnov-nav .is-menu-open .wp-block-navigation__responsive-container-content > .selecteur-langue {
		--ixnov-rang: 7;
	}

	/*
	 * La croix se cale a l'emplacement exact du bouton burger : le menu s'ouvre
	 * sans que le point de repere du visiteur se deplace.
	 */
	.header .ixnov-nav .wp-block-navigation__responsive-container-close {
		top: calc((var(--ixnov-header-h) - 24px) / 2);
		right: var(--wp--preset--spacing--40);
		padding: 0;
	}
}

.header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--texte);
}

/* Ouverture instantanee pour qui a demande a reduire les animations. */
@media (prefers-reduced-motion: reduce) {
	.header .ixnov-nav .wp-block-navigation__responsive-dialog,
	.header .ixnov-nav .wp-block-navigation-item,
	.header .ixnov-nav .wp-block-navigation__responsive-container-content > .header-cta {
		transition: none;
	}
}

.header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1;
	flex-direction: column;

	/* Sans min-height, un element flex refuse de devenir plus court que son
	   contenu et la zone defilante ne se declenche jamais. */
	min-height: 0;
	align-items: stretch;
	padding-top: 32px;
}

.header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	gap: 0;
	width: 100%;
}

.header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

.header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 0;
	background-image: none;
}

/*
 * La CTA vit hors du bloc navigation dans le DOM ; le script la deplace dans
 * le panneau sous le breakpoint. On la colle en bas, pleine largeur.
 */
.header .wp-block-navigation__responsive-container-content > .header-cta {
	margin-top: auto;
	width: 100%;
}

.header .wp-block-navigation__responsive-container-content > .header-cta .wp-block-button,
.header .wp-block-navigation__responsive-container-content > .header-cta .wp-block-button__link {
	width: 100%;
	justify-content: center;
}

/* ==========================================================================
   Styles de blocs
   ========================================================================== */

/* Surtitre : pastille turquoise + libelle capitales ------------------------ */

.is-style-surtitre {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-end: 0;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

/*
 * Taille par defaut, qui cede des qu'une taille est choisie en admin :
 * WordPress ajoute alors une classe has-*-font-size et cette regle se retire.
 */
.is-style-surtitre:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--petit);
}

.is-style-surtitre::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: currentColor;
}

/* Point final turquoise sur les titres ------------------------------------ */

.is-style-point-final::after {
	content: ".";
	color: var(--wp--preset--color--primaire);
}

/* Texte d'intro ----------------------------------------------------------- */

.is-style-lead {
	max-width: 46ch;
	line-height: 1.7;
}

/* Etiquette (pilule) ------------------------------------------------------ */

.is-style-etiquette {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--wp--preset--color--primaire);
	background-color: color-mix(in srgb, var(--wp--preset--color--primaire) 8%, transparent);
}

.is-style-etiquette:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--micro);
}

/* Lien flechee ------------------------------------------------------------ */

.is-style-lien-fleche,
.wp-block-read-more.is-style-fleche {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--wp--preset--color--primaire);
	text-decoration: none;
}

.is-style-lien-fleche:not([class*="-font-size"]),
.wp-block-read-more.is-style-fleche:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--compact);
}

.is-style-lien-fleche::after,
.wp-block-read-more.is-style-fleche::after {
	content: "arrow_outward";
	font-family: var(--wp--preset--font-family--icones);
	font-size: 1em;
	line-height: 1;
	transition: transform var(--ixnov-transition);
}

.is-style-lien-fleche:hover::after,
.wp-block-read-more.is-style-fleche:hover::after {
	transform: translate(2px, -2px);
}

/* Listes cochees et a puces ------------------------------------------------ */

/*
 * Deux variantes de liste du design. core/list n'expose pas de gouttiere entre
 * ses entrees - "blockGap" ne fait pas partie de ses supports : c'est le style
 * de bloc qui la porte, en passant la liste en colonne flex.
 */
.is-style-liste-check,
.is-style-liste-points {
	display: flex;
	flex-direction: column;
	padding: 0;
	list-style: none;
}

.is-style-liste-check {
	gap: 18px;
}

.is-style-liste-points {
	gap: 12px;
}

.is-style-liste-check > li,
.is-style-liste-points > li {
	display: flex;
	align-items: flex-start;
}

.is-style-liste-check > li {
	gap: 16px;
}

.is-style-liste-points > li {
	gap: 10px;
}

/*
 * La coche est un glyphe de la police d'icones, pas une image : elle suit donc
 * la couleur et - en em - la taille du texte de la liste, quelle que soit celle
 * choisie en admin. font-variation-settings est repose ici : la police est
 * variable, et le pseudo-element heriterait sinon de la graisse de la liste,
 * qui epaissirait le trait de la coche.
 */
.is-style-liste-check > li::before {
	content: "check";
	flex: none;
	margin-block-start: 0.14em;
	font-family: var(--wp--preset--font-family--icones);
	font-size: 1.15em;
	font-variation-settings: "wght" 400;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1;
	color: var(--wp--preset--color--primaire);
}

/* La puce se cale sur la premiere ligne du texte, pas sur le haut de sa boite. */
.is-style-liste-points > li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-block-start: 0.5em;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primaire);
}

/* Boutons ----------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: background-color var(--ixnov-transition), color var(--ixnov-transition), border-color var(--ixnov-transition), transform 0.15s ease;
}

.wp-block-button__link:active {
	transform: scale(0.98);
}

.is-style-fleche > .wp-block-button__link::after,
.is-style-contour-fleche > .wp-block-button__link::after {
	content: "arrow_forward";
	font-family: var(--wp--preset--font-family--icones);
	font-size: 1.2em;
	line-height: 1;
}

/*
 * Le design donne aux boutons a bordure un rembourrage plus serre que celui de
 * theme.json (reserve aux boutons pleins) : 14/28 pour les contours, 15/30 pour
 * le bouton doux, de facon que leur hauteur totale, bordure comprise, retombe
 * sur celle des boutons pleins.
 */
.is-style-contour > .wp-block-button__link,
.is-style-contour-fleche > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--texte);
	background-color: transparent;
	color: var(--wp--preset--color--texte);
	padding: 14px 28px;
}

.is-style-contour > .wp-block-button__link:hover,
.is-style-contour > .wp-block-button__link:focus,
.is-style-contour-fleche > .wp-block-button__link:hover,
.is-style-contour-fleche > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--texte);
	color: var(--wp--preset--color--blanc);
}

.is-style-doux > .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--bordure);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	padding: 15px 30px;
}

.is-style-doux > .wp-block-button__link:hover,
.is-style-doux > .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--texte);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
}

/* Medaillon rond ---------------------------------------------------------- */

.is-style-rond img {
	border-radius: 50%;
	object-fit: cover;
	aspect-ratio: 1;
	width: 100%;
	height: auto;
}

/* Bulle ronde ------------------------------------------------------------- */

.is-style-bulle {
	container-type: inline-size;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 50%;
}

.is-style-bulle > * {
	margin: 0;
	font-size: 35cqw;
}

/* Chiffre cle ------------------------------------------------------------- */

/*
 * Les quatre traits turquoise ont la meme longueur dans le design : la carte
 * occupe toute la hauteur de sa colonne, c'est le libelle le plus long qui la
 * fixe. L'interligne de 1,7 herite de theme.json gonflerait ces libelles de
 * 5,5px par ligne, d'ou l'interligne propre au bloc.
 */
.is-style-chiffre-cle {
	height: 100%;
	border-left: 2px solid var(--wp--preset--color--primaire);
	padding-left: var(--wp--preset--spacing--40);
	line-height: 1.3334;
}

/* Encart flottant --------------------------------------------------------- */

/*
 * L'encart est un composant fige du design : c'est le style de bloc qui porte
 * sa mise en page, pas des attributs. Une disposition flex posee en attribut
 * ferait emettre au core un "align-items" et un "gap" plus specifiques que
 * cette feuille, et l'alignement sur la ligne de base - que l'editeur ne sait
 * de toute facon pas exprimer - serait impossible a reprendre.
 *
 * margin-block-start est remis a zero : l'encart etant en position absolue, la
 * gouttiere que le core pose entre freres ne ferait que le decaler vers le bas.
 */
.is-style-encart-flottant {
	position: absolute;
	left: -24px;
	top: 36px;
	z-index: 2;
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-block-start: 0;
	padding: 20px 26px;
	box-shadow: var(--wp--preset--shadow--encart);
}

.is-style-encart-flottant > * {
	margin-block: 0;
}

/*
 * Le libelle passe sur deux lignes sous l'effet de sa largeur maximale, comme
 * dans le design - aucun retour a la ligne n'est ecrit dans le contenu.
 *
 * :not(:first-child) et non :last-child : des qu'un conteneur est selectionne,
 * l'editeur lui ajoute un bouton d'insertion en dernier enfant, et :last-child
 * designerait ce bouton au lieu du libelle. L'encart n'ayant que deux enfants,
 * les deux formes selectionnent le meme element au front.
 */
.is-style-encart-flottant > :not(:first-child) {
	max-width: 130px;
}

/* Carte generique --------------------------------------------------------- */

.is-style-carte {
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	padding: var(--wp--preset--spacing--40);
	transition: box-shadow var(--ixnov-transition), transform var(--ixnov-transition);
}

.is-style-carte:not(.has-background) {
	background-color: var(--wp--preset--color--blanc);
}

.is-style-carte:hover {
	box-shadow: var(--wp--preset--shadow--carte);
	transform: translateY(-3px);
}

/* Carte filiale ----------------------------------------------------------- */

.is-style-carte-filiale {
	position: relative;
	overflow: hidden;
	height: 100%;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	padding: 30px 28px 26px;
	transition: box-shadow var(--ixnov-transition), transform var(--ixnov-transition);
}

.is-style-carte-filiale::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background-color: var(--ixnov-filiale-couleur, var(--wp--preset--color--primaire));
}

.is-style-carte-filiale:hover {
	box-shadow: var(--wp--preset--shadow--carte);
	transform: translateY(-3px);
}

/*
 * Carte entierement cliquable, comme dans la maquette ou la carte est un <a>.
 *
 * Plutot que d'empiler plusieurs liens (logo, titre, description), on etire le
 * seul lien existant - celui du logo - sur toute la surface via un pseudo
 * element. Un seul lien reste dans l'arbre d'accessibilite, nomme par le texte
 * alternatif du logo, et le clic fonctionne partout sur la carte.
 */
.is-style-carte-filiale {
	cursor: pointer;
}

/*
 * Le core pose position:relative sur .wp-block-post-featured-image. Sans ce
 * retour a static, le pseudo element se calerait sur la figure et ne couvrirait
 * que la bande du logo au lieu de la carte entiere.
 */
.is-style-carte-filiale .carte-filiale-logo {
	position: static;
}

.is-style-carte-filiale .carte-filiale-logo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Le lien etire etant invisible, on porte l'anneau de focus sur la carte. */
.is-style-carte-filiale:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 3px;
}

.is-style-carte-filiale .carte-filiale-logo a:focus-visible {
	outline: none;
}

.carte-filiale-logo img {
	object-fit: contain;
	object-position: left center;
	width: auto;
	max-width: 100%;
}

/* Filigrane symbole ------------------------------------------------------- */

.is-style-filigrane {
	position: relative;
	overflow: hidden;
}

.is-style-filigrane::after {
	content: "";
	position: absolute;
	right: -160px;
	bottom: -220px;
	width: 900px;
	height: 636px;
	pointer-events: none;
	opacity: 0.05;
	background-color: currentColor;
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

/* Document en texte suivi ------------------------------------------------- */

/*
 * Mentions legales, politique de confidentialite : des pages sans visuel, faites
 * de paragraphes enchaines. Les 1200px du contenu y donneraient des lignes de
 * 160 caracteres, illisibles pour ce type de lecture ; le style les ramene a
 * une largeur de colonne.
 */
.is-style-document {
	max-width: 46rem;
}

/*
 * Le layout "constrained" centre tout enfant plus etroit que son conteneur : le
 * document se retrouverait au milieu des 1200px alors que le titre de la page,
 * lui, part de la gauche. On aligne les deux.
 *
 * Seul endroit du theme ou !important se justifie : le core pose ces deux
 * marges en !important dans sa feuille de layout, aucune specificite ne peut
 * donc les reprendre.
 */
.site-main .is-style-document {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Le chapeau reprend le style d'intro du site, mais sans sa laisse de 46ch :
 * dans un document il fait bloc avec le texte qui suit.
 */
.is-style-document .is-style-lead {
	max-width: none;
}

/*
 * Le blockGap du groupe (1.125rem) espace les paragraphes ; les titres, eux,
 * ouvrent une section et prennent l'air au-dessus. Marge en cascade et non en
 * gouttiere : la regle cede des qu'une marge est choisie en admin.
 */
.is-style-document :is(h2, h3):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Gris de lecture par defaut, cedant : des qu'une couleur est choisie en admin,
 * WordPress ajoute .has-text-color et la regle se retire.
 */
.is-style-document :is(p, li):not(.has-text-color) {
	color: var(--wp--preset--color--texte-doux);
}

/* Les puces turquoise se resserrent dans un texte suivi. */
.is-style-document .is-style-liste-points {
	gap: 8px;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	background-image: var(--wp--preset--gradient--halo-primaire);
}

/*
 * Le hero remonte sous l'en-tete sticky, comme dans le design : son fond et son
 * halo demarrent en haut de page, l'en-tete flotte par-dessus. Le padding haut
 * du bloc (100px, pose en attribut) contient deja la hauteur de l'en-tete.
 *
 * Deux classes sont necessaires : le core imprime apres la feuille du theme une
 * regle ":root :where(.is-layout-constrained) > *" qui pose un margin-block-start
 * et qui, a specificite egale (0-1-0), l'emporterait sur un simple .hero.
 */
.entry-content > .hero {
	margin-block-start: calc(-1 * var(--ixnov-header-h));
}

.hero::after {
	content: "";
	position: absolute;
	right: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: 1120px;
	height: 792px;
	pointer-events: none;
	opacity: 0.06;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.hero > * {
	position: relative;
	z-index: 1;
}

/* Largeur de mesure propre au hero (46ch ailleurs). */
.hero .is-style-lead {
	max-width: 460px;
}

/* Composition de medaillons ----------------------------------------------- */

/*
 * Les 8 medaillons sont positionnes en pourcentages d'une boite de reference de
 * 688x600 : la boite doit donc garder cette largeur, et non remplir la colonne
 * de 784px du design - ou la grappe grossirait de 14%. Elle reste calee a
 * gauche, comme dans le mockup, qui laisse 96px de vide a droite.
 */
.hero-visuel {
	position: relative;
	aspect-ratio: 688 / 600;
	width: 688px;
	max-width: 100%;
}

.hero-visuel > * {
	position: absolute;
	margin: 0;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.hero-visuel > *:nth-child(1) { left: 16%;   top: 4.7%;  width: 35.5%; z-index: 1; }
.hero-visuel > *:nth-child(2) { left: 48%;   top: 32.7%; width: 22.1%; z-index: 2; }
.hero-visuel > *:nth-child(3) { left: 72.7%; top: 4.3%;  width: 18%;   z-index: 3; }
.hero-visuel > *:nth-child(4) { left: 24.4%; top: 41.3%; width: 14.5%; z-index: 3; }
.hero-visuel > *:nth-child(5) { left: 80.8%; top: 37.7%; width: 10.5%; z-index: 5; }
.hero-visuel > *:nth-child(6) { left: 46.8%; top: 66%;   width: 11.6%; z-index: 4; }
.hero-visuel > *:nth-child(7) { left: 18.9%; top: 66%;   width: 23.8%; z-index: 2; }
.hero-visuel > *:nth-child(8) { left: 61.9%; top: 52%;   width: 38.1%; z-index: 1; }

/*
 * Le design distingue deux profondeurs d'ombre selon la taille du medaillon :
 * les deux grands (1er et 8e) portent une ombre plus large que les moyens.
 */
.hero-visuel .is-style-rond img {
	box-shadow: 0 20px 44px rgba(0, 60, 60, 0.16);
}

.hero-visuel > *:nth-child(1) img,
.hero-visuel > *:nth-child(8) img {
	box-shadow: var(--wp--preset--shadow--flottant);
}

/* Chaque bulle porte une ombre teintee de sa propre couleur de marque. */
.hero-visuel .is-style-bulle {
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
}

.is-style-bulle.has-acksys-background-color {
	box-shadow: 0 18px 40px rgba(34, 94, 157, 0.3);
}

.is-style-bulle.has-planavision-background-color {
	box-shadow: 0 16px 36px rgba(129, 73, 151, 0.3);
}

.is-style-bulle.has-techway-background-color {
	box-shadow: 0 14px 30px rgba(167, 198, 55, 0.35);
}

.is-style-bulle.has-ncs-background-color {
	box-shadow: 0 14px 30px rgba(198, 22, 36, 0.3);
}

@media (prefers-reduced-motion: no-preference) {
	.hero-visuel > *:nth-child(1) { animation: ixnov-flotte-a 7s ease-in-out infinite; }
	.hero-visuel > *:nth-child(2) { animation: ixnov-flotte-c 6.8s ease-in-out 1.4s infinite; }
	.hero-visuel > *:nth-child(3) { animation: ixnov-flotte-b 6s ease-in-out 0.4s infinite; }
	.hero-visuel > *:nth-child(4) { animation: ixnov-flotte-c 5.5s ease-in-out 0.8s infinite; }
	.hero-visuel > *:nth-child(5) { animation: ixnov-flotte-b 6.5s ease-in-out 1.2s infinite; }
	.hero-visuel > *:nth-child(6) { animation: ixnov-flotte-a 6s ease-in-out 1.6s infinite; }
	.hero-visuel > *:nth-child(7) { animation: ixnov-flotte-c 7.5s ease-in-out 0.6s infinite; }
	.hero-visuel > *:nth-child(8) { animation: ixnov-flotte-b 8s ease-in-out 1s infinite; }
}

@keyframes ixnov-flotte-a {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -16px; }
}

@keyframes ixnov-flotte-b {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 12px; }
}

@keyframes ixnov-flotte-c {
	0%, 100% { translate: 0 0; }
	50% { translate: 6px -10px; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.entete-section {
	width: 100%;
}

.entete-section-texte {
	max-width: 720px;
}

.entete-section .wp-block-buttons {
	flex: none;
}

/* Chiffres cles ------------------------------------------------------------ */

/*
 * Le symbole iXnov en filigrane, comme dans le design : un aplat turquoise a
 * 5% masque par le symbole, qui deborde en haut a gauche du bandeau. Ce n'est
 * pas une image de fond mais un masque, pour que la couleur reste pilotable.
 */
.section-chiffres {
	position: relative;
	overflow: hidden;
}

.section-chiffres::before {
	content: "";
	position: absolute;
	left: -100px;
	top: -80px;
	width: 700px;
	height: 495px;
	pointer-events: none;
	opacity: 0.05;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.section-chiffres > * {
	position: relative;
	z-index: 1;
}

/* Positionnement ---------------------------------------------------------- */

.positionnement-visuel {
	position: relative;
	padding: 0 0 32px 32px;
}

.positionnement-visuel::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 70%;
	height: 70%;
	background-color: var(--wp--preset--color--surface);
}

.positionnement-image {
	position: relative;
	margin: 0;
}

.positionnement-image img {
	display: block;
	width: 100%;
	height: 440px;
	object-fit: cover;
}

/* Secteurs ---------------------------------------------------------------- */

/*
 * Slider de l'accueil : les vignettes retournables de la page Secteurs (voir
 * "Page Secteurs"), dans un defilement horizontal natif. Glisser au doigt ou
 * au trackpad suffit ; les fleches sont ajoutees par theme.js.
 *
 * Une zone de defilement coupe tout ce qui en depasse, ombres comprises :
 * l'ombre "carte-forte" y dessinait un rectangle gris. Les cartes du slider
 * prennent donc une ombre plus courte, que le padding contient entierement ;
 * le debord negatif - 20px, la gouttiere minimale du site - le compense.
 *
 * Le masque fond les 20px de chaque bord : sans lui, l'ombre de la carte
 * suivante, encore hors champ, apparaissait en bande dans ce padding.
 */
.slider-secteurs .wp-block-post-template {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin: 0 -20px;
	padding: 16px 20px 32px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 20px;
	scrollbar-width: none;
}

.slider-secteurs .carte-marche > .carte-marche-recto,
.slider-secteurs .carte-marche > .carte-marche-verso {
	box-shadow: 0 8px 20px rgba(0, 40, 40, 0.12);
}

.slider-secteurs .wp-block-post-template::-webkit-scrollbar {
	display: none;
}

/* Pendant un glissement anime par theme.js, l'aimantation le contrarierait. */
.slider-secteurs .wp-block-post-template.est-anime {
	scroll-snap-type: none;
}

/* Hauteur du design (400px), que seul un verso plus long fait depasser. */
.slider-secteurs .wp-block-post-template > li {
	flex: 0 0 calc((100% - 2 * var(--wp--preset--spacing--40)) / 3);
	min-height: 400px;
	margin: 0;
	scroll-snap-align: start;
}

.slider-secteurs-nav {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

.slider-secteurs-nav[hidden] {
	display: none;
}

.slider-secteurs-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--primaire);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--primaire);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.slider-secteurs-bouton:hover:not(:disabled),
.slider-secteurs-bouton:focus-visible {
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc);
}

.slider-secteurs-bouton:disabled {
	opacity: 0.35;
	cursor: default;
}

.slider-secteurs-bouton svg {
	width: 20px;
	height: 20px;
}

/* Actualites -------------------------------------------------------------- */

.carte-actu {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	transition: box-shadow var(--ixnov-transition), transform var(--ixnov-transition);
}

.carte-actu:not(.has-background) {
	background-color: var(--wp--preset--color--blanc);
}

.carte-actu:hover {
	box-shadow: var(--wp--preset--shadow--carte);
	transform: translateY(-3px);
}

.carte-actu-image {
	margin: 0;
}

/* Hauteur fixe, comme dans le design - et non un rapport d'image. */
.carte-actu-image img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.carte-actu-corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 22px 20px;
}

.carte-actu-corps > .wp-block-post-excerpt {
	flex: 1;
}

/*
 * Le titre est un lien, mais le design le veut en noir comme un simple
 * intitule : c'est la carte entiere qui signale l'interactivite au survol. Le
 * turquoise est garde pour le survol, sans quoi le lien n'aurait plus aucune
 * affordance.
 */
.carte-actu .wp-block-post-title a {
	color: var(--wp--preset--color--texte);
}

.carte-actu .wp-block-post-title a:hover,
.carte-actu .wp-block-post-title a:focus {
	color: var(--wp--preset--color--primaire);
}

/* Etiquettes d'entite ----------------------------------------------------- */

.carte-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block: 0;
}

/*
 * post-terms intercale un separateur entre les etiquettes. Dans un conteneur
 * flex il devient un item a part entiere et double la gouttiere : 6 + 4 + 6 au
 * lieu des 6px du design. On le sort de la mise en page.
 */
.carte-tags .wp-block-post-terms__separator {
	display: none;
}

.carte-tags a {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	text-decoration: none;
	color: var(--wp--preset--color--primaire);
	background-color: color-mix(in srgb, var(--wp--preset--color--primaire) 8%, transparent);
}

.carte-tags a:hover {
	color: var(--wp--preset--color--blanc);
	background-color: var(--wp--preset--color--primaire);
}

/* La couleur exacte de chaque entite est injectee par functions.php. */

/* Page Contact ------------------------------------------------------------- */

.contact-intro {
	max-width: 560px;
	line-height: 1.7;
}

/* Formulaire a gauche, coordonnees dans une colonne fixe a droite. */
.contact-grille {
	display: grid;
	grid-template-columns: 1fr 380px;
	align-items: start;
	gap: 48px;
}

/* Le formulaire est pose sur une carte blanche detachee du fond. */
.contact-formulaire {
	padding: 44px 44px 38px;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--blanc);
	box-shadow: 0 20px 48px rgba(0, 40, 40, 0.06);
}

.contact-formulaire-titre {
	margin: 0 0 6px;
	font-size: 1.625rem;
	font-weight: 500;
	line-height: 1.2;
}

.contact-obligatoires {
	margin: 0 0 32px;
	font-size: 0.90625rem;
}

.contact-mention {
	margin: 0;
	max-width: 420px;
	color: #8a8f8f;
	font-size: 0.78125rem;
	line-height: 1.6;
}

/* Formulaire Gravity Forms ------------------------------------------------- */

/*
 * La grille est declaree ici plutot que laissee a la feuille de theme de
 * Gravity Forms : celle-ci n'etait pas appliquee sur le front, et tous les
 * champs s'empilaient sur toute la largeur. Le plugin pose bien ses classes de
 * largeur, il ne manquait que le conteneur.
 */
.contact-formulaire .gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 22px;
	row-gap: 22px;
}

.contact-formulaire .gform_wrapper .gfield {
	grid-column: span 12;
	min-width: 0;
}

.contact-formulaire .gform_wrapper .gfield--width-half {
	grid-column: span 6;
}

.contact-formulaire .gform_wrapper .gfield_label {
	margin-block-end: 9px;
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--corps);
	font-size: 0.84375rem;
	font-weight: 600;
}

/*
 * L'asterisque du design est de la meme encre que le libelle, sans mise en
 * evidence : Gravity Forms le rend en rouge par defaut.
 */
.contact-formulaire .gform_wrapper .gfield_required,
.contact-formulaire .gform_wrapper .gfield_required_asterisk {
	color: inherit;
	font-weight: inherit;
}

/*
 * .gfield dans la chaine : la feuille du theme Gravity Forms cible ses champs
 * de saisie avec une specificite superieure a la notre, et reprenait la bordure
 * et le retrait des input - les select et textarea, eux, passaient.
 */
.contact-formulaire .gform_wrapper .gfield input[type="text"],
.contact-formulaire .gform_wrapper .gfield input[type="email"],
.contact-formulaire .gform_wrapper .gfield input[type="tel"],
.contact-formulaire .gform_wrapper .gfield select,
.contact-formulaire .gform_wrapper .gfield textarea {
	width: 100%;

	/*
	 * Hauteur libre : Gravity Forms impose une hauteur fixe a ses controles, et
	 * la liste deroulante s'en trouvait ecrasee - 38px pour 28px de retrait, le
	 * libelle du pays n'avait plus la place de s'afficher.
	 */
	height: auto;
	padding: 14px 16px;
	border: 1.5px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	font-family: var(--wp--preset--font-family--corps);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Le message respire davantage et reste redimensionnable en hauteur. */
.contact-formulaire .gform_wrapper .gfield textarea {
	line-height: 1.6;
	resize: vertical;
}

.contact-formulaire .gform_wrapper .gfield input:focus,
.contact-formulaire .gform_wrapper .gfield select:focus,
.contact-formulaire .gform_wrapper .gfield textarea:focus {
	border-color: var(--wp--preset--color--primaire);
	box-shadow: 0 0 0 3px rgba(0, 172, 169, 0.12);
	outline: none;
}

/*
 * Gris du design. Le selecteur passe par .gfield : Gravity Forms colore ses
 * placeholders avec ses propres jetons, plus specifiques qu'une regle courte.
 */
.contact-formulaire .gform_wrapper .gfield input::placeholder,
.contact-formulaire .gform_wrapper .gfield textarea::placeholder {
	color: #a8aeae;
	opacity: 1;
}

/* Le chevron du menu deroulant, l'apparence native etant retiree. */
.contact-formulaire .gform_wrapper .gfield select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A58' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 18px;
	padding-right: 40px;
}

/*
 * Le pied porte la ligne du design : bouton a gauche, mention legale a droite,
 * separes en "space-between". Les champs techniques que Gravity Forms range ici
 * sont tous en type=hidden, donc hors flux.
 */
.contact-formulaire .gform_wrapper .gform_footer {
	display: flex !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin: 28px 0 0 !important;
	padding: 0 !important;
}

/*
 * Le bouton garde sa largeur, la mention prend ce qui reste sans depasser les
 * 420px du design. Sans cette compression la ligne passait a la ligne : la
 * colonne du formulaire est ici plus etroite que dans le mockup.
 */
.contact-formulaire .gform_wrapper .gform_footer .gform_button {
	flex: none;
}

.contact-formulaire .gform_wrapper .gform_footer .contact-mention {
	flex: 0 1 420px;
	min-width: 0;
}

/*
 * Le bouton d'envoi reprend le bouton plein du theme.
 *
 * !important a contrecoeur, et seulement ici : Gravity Forms imprime ses jetons
 * de style dans une balise <style> portant un selecteur d'identifiant
 * (#gform_wrapper_1[data-form-index="0"].gform-theme), qu'aucune regle de
 * feuille de theme ne peut depasser. Le reste du formulaire se style
 * normalement, sans forcer.
 */
.contact-formulaire .gform_wrapper .gform_button {
	display: inline-flex !important;
	align-items: center;
	gap: 10px !important;
	width: auto !important;
	height: auto !important;
	padding: 16px 32px !important;
	border: 0 !important;
	border-radius: var(--ixnov-rayon-bouton) !important;
	background-color: var(--wp--preset--color--primaire) !important;
	color: var(--wp--preset--color--blanc) !important;
	font-family: var(--wp--preset--font-family--corps) !important;
	font-size: var(--wp--preset--font-size--confort) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.18s ease;
}

/*
 * La fleche du design. Gravity Forms dessine deja un ::before et un ::after sur
 * ses boutons - la ou il loge ses propres icones - par une regle plus specifique
 * que celle-ci, et dont le font-family est !important : un content et une police
 * poses ici directement seraient l'un ecrase, l'autre ignore.
 *
 * On passe donc par ses variables plutot que contre elles : declarees sur le
 * ::after lui-meme, elles alimentent les var() de sa regle. Le ::before, que la
 * meme regle sert, ne les voit pas et reste vide.
 */
.contact-formulaire .gform_wrapper .gform_button::after {
	--gf-icon-font-family: var(--wp--preset--font-family--icones);
	--gf-ctrl-btn-icon: "arrow_forward";
	--gf-ctrl-btn-icon-font-size: 1.2em;
}

.contact-formulaire .gform_wrapper .gform_button:hover,
.contact-formulaire .gform_wrapper .gform_button:focus {
	background-color: var(--wp--preset--color--primaire-fonce) !important;
}

.contact-formulaire .gform_wrapper .gform_button:active {
	transform: scale(0.98);
}

/* Confirmation : l'ecran de succes du design, sur fond turquoise clair. */
.contact-formulaire .gform_confirmation_message {
	padding: 26px 28px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.90625rem;
	line-height: 1.6;
}

/*
 * La feuille de Gravity Forms est desactivee (reglage "Output CSS") : elle
 * imposait sa propre mise en forme avec des selecteurs qu'un theme ne peut pas
 * depasser proprement. Le formulaire est donc entierement style ici, y compris
 * ses etats d'erreur, que le plugin ne dessine plus.
 */
.contact-formulaire .gform_wrapper .gform_validation_errors {
	margin-block-end: 22px;
	padding: 16px 18px;
	border: 1.5px solid #c61624;
	border-radius: 12px;
	background-color: rgba(198, 22, 36, 0.06);
	color: #c61624;
	font-size: 0.90625rem;
	line-height: 1.5;
}

.contact-formulaire .gform_wrapper .gform_validation_errors h2 {
	margin: 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--corps);
	font-size: inherit;
	font-weight: 600;
}

.contact-formulaire .gform_wrapper .gfield_error input,
.contact-formulaire .gform_wrapper .gfield_error select,
.contact-formulaire .gform_wrapper .gfield_error textarea {
	border-color: #c61624;
}

.contact-formulaire .gform_wrapper .validation_message {
	margin-block-start: 6px;
	color: #c61624;
	font-size: 0.8125rem;
	line-height: 1.4;
}

/* Le plugin ne rend plus sa liste : on retire les puces heritees du theme. */
.contact-formulaire .gform_wrapper ul,
.contact-formulaire .gform_wrapper li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Gravity Forms rend sa propre mention "« * » indique les champs necessaires".
 * Le design a la sienne, juste sous le titre : on retire le doublon.
 */
.contact-formulaire .gform_wrapper .gform_required_legend {
	display: none;
}

/* Coordonnees et plan ------------------------------------------------------ */

.contact-carte {
	position: relative;
	overflow: hidden;
	padding: 38px 34px;
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--surface);
}

.contact-carte::before {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -90px;
	width: 420px;
	height: 297px;
	pointer-events: none;
	opacity: 0.1;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.contact-carte > * {
	position: relative;
	z-index: 1;
}

.contact-carte-titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--titre-s);
	font-weight: 500;
	line-height: 1.2;
}

/*
 * L'interligne du design s'applique au texte, pas a l'icone qui le precede.
 * :not(:first-child) pour la meme raison que l'encart flottant plus haut.
 */
.contact-carte .contact-ligne > p:not(:first-child) {
	line-height: 1.65;
}

/*
 * Interligne egal a la taille, comme dans le mockup : la boite de l'icone fait
 * alors exactement 22px et son glyphe se cale sur la premiere ligne du texte.
 * Un interligne plus grand agrandissait la boite et faisait descendre le
 * glyphe, alors meme que les deux hauts restaient alignes.
 */
.contact-icone {
	flex: none;
	font-size: 1.375rem;
	line-height: 1;
}

.contact-telephone a {
	color: var(--wp--preset--color--texte);
}

.contact-telephone a:hover {
	color: var(--wp--preset--color--primaire);
}

.contact-plan {
	padding: 30px 30px 28px;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
}

/* Le libelle du plan n'a pas de pastille, contrairement aux autres surtitres. */
.contact-plan-titre {
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.contact-plan-cadre {
	overflow: hidden;
	height: 180px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--surface-alt);
}

.contact-plan-cadre iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Page Secteurs ------------------------------------------------------------ */

.secteurs-intro {
	max-width: 640px;
	line-height: 1.7;
}

/*
 * Bandeau gris derriere la grille : il demarre sous la premiere rangee et
 * s'arrete avant le bas, les vignettes debordant de part et d'autre.
 */
.secteurs-grille {
	position: relative;
}

.secteurs-grille::before {
	content: "";
	position: absolute;
	inset: 120px 0 180px;
	pointer-events: none;
	background-color: var(--wp--preset--color--surface-alt);
}

.secteurs-grille > * {
	position: relative;
	z-index: 1;
}

/*
 * Vignette de marche : visuel plein cadre, texte en surimpression.
 *
 * La hauteur se pose sur l'element de liste et non sur la carte, comme pour la
 * grille de secteurs de la page d'accueil. Sur la carte elle serait sans effet :
 * ".is-style-grille-cartes > li > *" l'etire a 100 % a specificite egale mais
 * plus loin dans la feuille, et la carte reprenait alors la hauteur du visuel
 * 600x800, soit 510px au lieu des 380 du mockup.
 */
.grille-marches .wp-block-post-template > li {
	min-height: 380px;
}

/*
 * Vignette retournable : le recto (visuel et accroche) pivote au survol pour
 * reveler le verso (texte detaille et filiales). Les deux faces occupent la
 * meme cellule de grille : la carte prend la hauteur de la plus haute, et un
 * verso plus long que les 380px du mockup l'agrandit au lieu d'etre coupe.
 */
.is-style-grille-cartes > li > .carte-marche {
	flex: 1 0 auto;
	height: auto;
}

.carte-marche {
	display: grid;
	border-radius: var(--ixnov-rayon-carte);
}

.carte-marche > .carte-marche-recto,
.carte-marche > .carte-marche-verso {
	grid-area: 1 / 1;
	margin: 0;
	position: relative;
	overflow: hidden;
	border-radius: var(--ixnov-rayon-carte);
	box-shadow: var(--wp--preset--shadow--carte-forte);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.carte-marche-recto {
	color: var(--wp--preset--color--blanc);
	transform: perspective(1200px) rotateY(0deg);
}

.carte-marche-verso {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 30px 26px;
	border-top: 5px solid var(--wp--preset--color--primaire);
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--texte);
	transform: perspective(1200px) rotateY(180deg);
}

/*
 * Survol reserve aux appareils qui en ont un : sur ecran tactile, le survol
 * "colle" apres un toucher et la carte ne se refermerait plus. Le toucher et
 * le clavier passent par la classe posee par le script et par le focus.
 */
@media (hover: hover) {
	.carte-marche:hover .carte-marche-recto {
		transform: perspective(1200px) rotateY(-180deg);
	}

	.carte-marche:hover .carte-marche-verso {
		transform: perspective(1200px) rotateY(0deg);
	}
}

.carte-marche.est-retournee .carte-marche-recto,
.carte-marche:focus-visible .carte-marche-recto {
	transform: perspective(1200px) rotateY(-180deg);
}

.carte-marche.est-retournee .carte-marche-verso,
.carte-marche:focus-visible .carte-marche-verso {
	transform: perspective(1200px) rotateY(0deg);
}

.carte-marche:focus-visible {
	outline: 2px solid var(--wp--preset--color--primaire);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.carte-marche > .carte-marche-recto,
	.carte-marche > .carte-marche-verso {
		transition: none;
	}
}

/* Le visuel ne doit pas dicter la hauteur de la carte : il remplit le recto. */
.carte-marche-image {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
}

.carte-marche-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Fond de repli : sans visuel, la vignette resterait blanche et son texte
 * illisible. Les cinq marches ajoutes n'ont pas encore de photo.
 */
.carte-marche-recto:not(:has(.carte-marche-image img)) {
	background-color: var(--wp--preset--color--sombre);
}

.carte-marche-recto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 25, 25, 0) 32%, rgba(0, 32, 32, 0.88) 100%);
}

/*
 * L'ecart titre / accroche vient d'un "gap" et non du blockGap du core : les
 * marges de flux que ce dernier pose sur l'accroche sont annulees plus bas par
 * "margin: 0", a specificite egale et plus loin dans la feuille.
 */
.carte-marche-texte {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.carte-marche-titre {
	margin: 0;
	color: var(--wp--preset--color--blanc);
	font-size: 1.4375rem;
	line-height: 1.2;
}

.carte-marche-accroche {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	line-height: 1.6;
}

.carte-marche-accroche p {
	margin: 0;
}

.carte-marche-verso-titre {
	margin: 0;
	color: var(--wp--preset--color--primaire);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
}

.carte-marche-verso-texte {
	margin: 0;
	line-height: 1.6;
}

.carte-marche-verso-texte > * {
	margin: 0;
}

.carte-marche-verso-texte > * + * {
	margin-top: 0.75em;
}

.carte-marche-verso-pied {
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--bordure);
}

.carte-marche-verso-libelle {
	margin: 0 0 4px;
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.carte-marche-verso-entites {
	margin: 0;
	color: var(--wp--preset--color--primaire);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Encart d'appel a l'action, sur fond turquoise clair. */
.secteurs-cta-encart {
	position: relative;
	overflow: hidden;
	padding: 60px 64px;
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--surface);
}

.secteurs-cta-encart::before {
	content: "";
	position: absolute;
	right: -140px;
	bottom: -160px;
	width: 640px;
	height: 452px;
	pointer-events: none;
	opacity: 0.08;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.secteurs-cta-encart > * {
	position: relative;
	z-index: 1;
}

.secteurs-cta-texte {
	max-width: 640px;
}

.secteurs-cta-encart .wp-block-buttons {
	flex: none;
}

/* Point d'interrogation turquoise, precede d'une espace fine insecable. */
.is-style-point-interrogation::after {
	content: "\202f?";
	color: var(--wp--preset--color--primaire);
}

/* Page Expertises ---------------------------------------------------------- */

.expertises-intro {
	max-width: 620px;
	line-height: 1.75;
}

/*
 * Carte d'expertise : panneau de marque a gauche, contenu a droite. Sous la
 * largeur d'une colonne de 380px + son contenu, les deux se superposent.
 */
.carte-expertise {
	display: grid;
	grid-template-columns: 380px 1fr;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--blanc);
	transition: box-shadow var(--ixnov-transition);
}

.carte-expertise:hover {
	box-shadow: 0 22px 50px rgba(0, 40, 40, 0.1);
}

/*
 * Chaque carte est la cible d'une ancre "#expertise-<slug>", posee au rendu et
 * visee par les cartes de la section Expertises de l'accueil. L'en-tete etant
 * sticky, le defilement doit s'arreter sous lui : sans cette marge, le haut de
 * la carte - logo et titre - passe dessous.
 */
.carte-expertise {
	scroll-margin-top: calc(var(--ixnov-header-h) + 24px);
}

/* Le panneau prend la couleur de marque, portee par la classe filiale-<slug>. */
.carte-expertise-marque {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 40px 36px;
	background-color: var(--ixnov-filiale-couleur, var(--wp--preset--color--primaire));
}

.carte-expertise-marque::before {
	content: "";
	position: absolute;
	right: -110px;
	bottom: -120px;
	width: 420px;
	height: 297px;
	pointer-events: none;
	opacity: 0.14;
	background-color: var(--wp--preset--color--blanc);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.carte-expertise-marque > * {
	position: relative;
	z-index: 1;
}

/* Le logo est pose sur un cartouche blanc, comme dans le design. */
.carte-expertise-logo {
	align-self: flex-start;
	margin: 0;
	padding: 22px 24px;
	border-radius: 12px;
	background-color: var(--wp--preset--color--blanc);
}

.carte-expertise-logo img {
	display: block;
	height: 38px;
	width: auto;
	object-fit: contain;
}

.carte-expertise-corps {
	padding: 44px 44px 40px;
}

.carte-expertise-titre {
	font-size: 1.875rem;
	line-height: 1.15;
}

/* Le point final du titre reprend la couleur de la marque. */
.carte-expertise-titre.is-style-point-final::after {
	color: var(--ixnov-filiale-couleur, var(--wp--preset--color--primaire));
}

.carte-expertise-texte {
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.96875rem;
	line-height: 1.75;
}

.carte-expertise-texte > :first-child {
	margin-block-start: 0;
}

/* Listes de filiale ------------------------------------------------------- */

.filiale-liste__titre {
	margin: 0 0 12px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.filiale-liste__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Secteurs : pastilles sur le panneau colore. */
.filiale-liste--secteurs .filiale-liste__titre {
	color: rgba(255, 255, 255, 0.72);
}

.filiale-liste--secteurs .filiale-liste__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.filiale-liste--secteurs .filiale-liste__entree {
	padding: 6px 12px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.18);
	color: var(--wp--preset--color--blanc);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 500;
	line-height: 1.4;
}

/* Expertises cles : deux colonnes, chaque entree precedee d'un tiret turquoise. */
.filiale-liste--cles .filiale-liste__titre {
	margin-block-end: 14px;
	color: var(--wp--preset--color--primaire);
}

.filiale-liste--cles .filiale-liste__items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 28px;
}

.filiale-liste--cles .filiale-liste__entree {
	position: relative;
	padding-left: 17px;
	font-size: 0.90625rem;
	line-height: 1.55;
}

.filiale-liste--cles .filiale-liste__entree::before {
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--ixnov-filiale-couleur, var(--wp--preset--color--primaire));
}

/*
 * Le bouton du site pointe vers l'exterieur : l'icone est la fleche sortante et
 * non la fleche d'avancee des autres boutons a bordure.
 */
.carte-expertise-site {
	align-self: flex-start;
}

.carte-expertise-site .wp-block-button__link::after {
	content: "arrow_outward";
}

/* Encart d'appel a l'action ------------------------------------------------ */

.expertises-cta-encart {
	padding: 56px 64px;
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--surface-alt);
}

.expertises-cta-texte {
	max-width: 660px;
}

.expertises-cta-encart .wp-block-buttons {
	flex: none;
}

/* Page Le groupe ----------------------------------------------------------- */

/*
 * Notre ADN et le bandeau de chiffres reprennent tels quels deux composants
 * deja montes pour l'accueil - l'aplat turquoise decale (.positionnement-visuel)
 * et le filigrane du bandeau (.section-chiffres). Meme composant, meme classe :
 * ils heritent aussi de leur animation d'entree et des compteurs.
 */

/* Filiales : le bandeau de logos et son bouton ----------------------------- */

.groupe-filiales-titre {
	font-size: 2rem;
	line-height: 1.2;
}

/* Chaque logo est centre dans sa colonne et cale sur la meme ligne mediane. */
.groupe-filiales-logos .wp-block-post-template > li {
	display: flex;
	align-items: center;
	justify-content: center;
}

.groupe-filiale-logo {
	margin: 0;
	max-width: 100%;
}

.groupe-filiale-logo img {
	width: auto;
	max-width: 100%;
}

/* Vision et mission ------------------------------------------------------- */

/*
 * Les quatre engagements forment un damier de deux colonnes, separees par un
 * filet. Ce filet n'est pas une bordure mais la gouttiere de la grille, que la
 * couleur de fond de la liste laisse voir : les traits se croisent d'eux-memes
 * au centre, et une cinquieme entree ajoutee en admin s'inscrit dans le meme
 * quadrillage sans qu'aucune bordure soit a reprendre.
 *
 * core/list n'expose ni disposition ni gouttiere : la grille vient donc d'ici,
 * comme pour .is-style-liste-check et .is-style-liste-points.
 */
.groupe-mission-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	padding: 0;
	list-style: none;
	background-color: var(--wp--preset--color--bordure);
}

/*
 * Taille propre au design, hors echelle de theme.json, qui cede des qu'une
 * taille est choisie en admin - meme mecanique que .is-style-surtitre.
 */
.groupe-mission-liste:not([class*="-font-size"]) {
	font-size: 1.625rem;
	line-height: 1.4;
}

.groupe-mission-liste > li {
	padding: 38px 40px 42px;
	background-color: var(--wp--preset--color--surface-alt);
	text-wrap: pretty;
}

/* Sections sur degrade ---------------------------------------------------- */

/*
 * Deux sections de la page - les implantations et les atouts - sont posees sur
 * le degrade bleu-turquoise. Les blancs adoucis qu'elles emploient n'ont pas
 * leur place dans la palette : personne ne choisirait "blanc a 78%" en admin,
 * et hors de ce fond ils rendraient le texte illisible. Ils vivent donc ici,
 * bornes a .section-degrade.
 */
.section-degrade {
	color: var(--wp--preset--color--blanc);
}

.section-degrade :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--blanc);
}

/*
 * Le turquoise de marque s'eteint sur le degrade : la ponctuation des titres et
 * les puces des listes passent au turquoise lumineux.
 */
.section-degrade .is-style-point-final::after,
.section-degrade .is-style-point-interrogation::after {
	color: var(--wp--preset--color--primaire-clair);
}

.section-degrade .is-style-liste-points > li::before {
	background-color: var(--wp--preset--color--primaire-clair);
}

/* Implantations ----------------------------------------------------------- */

.groupe-implantations-titre {
	font-size: 2.125rem;
	line-height: 1.2;
}

.groupe-implantations-texte {
	max-width: 520px;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.75;
}

/*
 * Les trois pays en pastilles. core/list ne sait exprimer ni la disposition en
 * ligne ni la pastille : elles viennent d'ici, comme les autres variantes de
 * liste du theme.
 */
.groupe-implantations-lieux {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 0;
	list-style: none;
}

.groupe-implantations-lieux > li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	background-color: rgba(255, 255, 255, 0.12);
	line-height: 1.4;
}

.groupe-implantations-lieux > li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primaire-clair);
}

.groupe-implantations-carte {
	margin: 0;
}

.groupe-implantations-carte img {
	display: block;
	width: 100%;
	height: auto;
}

/* Valeurs cles ------------------------------------------------------------ */

/*
 * Tailles propres au design, hors echelle de theme.json : la carte est un
 * composant fige, ce sont ses classes qui les portent - comme pour les titres
 * de vignette de marche et de carte d'expertise.
 */
.groupe-valeur-icone {
	font-size: 2.625rem;
}

.groupe-valeur-titre {
	font-size: 1.1875rem;
	line-height: 1.35;
}

/* Pourquoi iXnov ---------------------------------------------------------- */

/*
 * La carte reprend .is-style-carte au detail du fond et du filet : sur le
 * degrade, ce sont des blancs transparents, hors palette. Elle ne se souleve
 * pas non plus au survol - le relief ne se lit pas sur un fond colore.
 */
.groupe-atout {
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--ixnov-rayon-carte);
	background-color: rgba(255, 255, 255, 0.10);
}

/*
 * La pastille de l'icone : le core rembourre tout paragraphe a fond colore
 * (:where(p.has-background)), ce qui deformerait le carre. On remet le
 * rembourrage a zero et on donne au bloc sa taille du design.
 */
.groupe-atout-icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: var(--ixnov-rayon-carte);
	background-color: rgba(255, 255, 255, 0.16);
	font-size: 1.75rem;
}

.groupe-atout-titre {
	font-size: 1.375rem;
	line-height: 1.3;
}

.groupe-atout-texte {
	color: rgba(255, 255, 255, 0.76);
}

/* Le filet separe l'accroche de la liste de points, comme dans le design. */
.groupe-atout-points {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	padding-top: 22px;
	font-size: 0.90625rem;
	line-height: 1.6;
}

/* Expertises -------------------------------------------------------------- */

/*
 * Meme filigrane que sur le bandeau des chiffres, mais debordant en bas a
 * droite et plus large, comme dans le design.
 */
.section-expertises {
	position: relative;
	overflow: hidden;
}

.section-expertises::before {
	content: "";
	position: absolute;
	right: -260px;
	bottom: -160px;
	width: 820px;
	height: 580px;
	pointer-events: none;
	opacity: 0.05;
	background-color: var(--wp--preset--color--primaire);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.section-expertises > * {
	position: relative;
	z-index: 1;
}

/* LinkedIn ---------------------------------------------------------------- */

/*
 * Le fil est un widget Elfsight injecte via un bloc HTML. Il pose lui-meme sa
 * mise en page ; on ne lui impose que la largeur de la colonne de contenu.
 *
 * Le carrousel sort volontairement ses deux fleches de 16px hors de la colonne
 * (left/right: -16px), pour qu'elles se retrouvent centrees sur le bord des
 * cartes. On ne peut donc pas couper au ras du widget sans les amputer : le
 * confinement est remonte sur la section, pleine largeur. Les fleches debordent
 * dans la gouttiere - qui fait au minimum 20px (clamp de la mise en page
 * globale), donc toujours de quoi les loger - et rien ne peut echapper a
 * l'ecran ni provoquer de defilement horizontal.
 */
.section-linkedin {
	overflow: hidden;
}

.section-linkedin [class^="elfsight-app-"] {
	width: 100%;
}

/* ==========================================================================
   Apparition au scroll
   ========================================================================== */

/*
 * Le design fait apparaitre deux familles d'elements a leur entree dans
 * l'ecran : une montee de 32px pour les vignettes de secteurs, decalees de
 * 0,1s l'une apres l'autre, et un fondu pour l'aplat turquoise du bloc
 * positionnement.
 *
 * L'etat masque est pose par le script, jamais ici : sans JS, ou si
 * l'utilisateur a demande a reduire les animations, la page reste entierement
 * visible. Ces classes ne sont donc presentes dans le DOM que si l'animation
 * va effectivement se jouer.
 */
.apparition-montee {
	opacity: 0;
	transform: translateY(32px);
	will-change: opacity, transform;
}

/*
 * La transition n'est declaree que sur l'etat d'arrivee. Posee sur l'etat
 * masque, elle se jouerait aussi au moment ou le script pose la classe : les
 * vignettes disparaitraient en fondu sous les yeux du visiteur avant de
 * revenir. Une transition presente uniquement dans le style d'arrivee anime
 * bien le passage - c'est ce style que le navigateur consulte.
 */
.apparition-montee.est-visible {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * L'aplat turquoise est un pseudo-element : il ne peut pas etre observe
 * directement, c'est donc son conteneur qui porte l'etat. Le fondu ne joue que
 * sur le ::before - l'image et l'encart chiffre, eux, ne bougent pas.
 */
.apparition-aplat::before {
	opacity: 0;
}

.apparition-aplat.est-visible::before {
	opacity: 1;
	transition: opacity 0.7s ease;
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.footer {
	position: relative;
	overflow: hidden;
}

.footer::before {
	content: "";
	position: absolute;
	right: -160px;
	bottom: -220px;
	width: 900px;
	height: 636px;
	pointer-events: none;
	opacity: 0.045;
	background-color: var(--wp--preset--color--blanc);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

.footer > * {
	position: relative;
	z-index: 1;
}

.footer a {
	color: rgba(255, 255, 255, 0.8);
}

.footer a:hover {
	color: var(--wp--preset--color--primaire);
}

.footer-logo {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.footer-baseline {
	max-width: 300px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.65;
}

.footer-social-titre {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}

.footer-titre {
	margin: 0 0 var(--wp--preset--spacing--30);
}

.footer-nav .wp-block-navigation-item__content,
.footer-filiale a {
	color: rgba(255, 255, 255, 0.8);
}

.footer-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primaire);
}

.footer-filiale {
	margin: 0;
}

.footer-filiale a {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-filiale a::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ixnov-filiale-couleur, var(--wp--preset--color--primaire));
}

.footer-filiale a:hover {
	color: var(--wp--preset--color--blanc);
}

/*
 * .contact-ligne sert dans le pied de page et sur la page Contact : la marge et
 * la couleur claire sont propres au pied de page, sur fond sombre. Non bornees,
 * elles rendaient l'adresse blanche sur blanc dans la carte de contact.
 */
.footer .contact-ligne {
	margin-block-end: var(--wp--preset--spacing--30);
}

.contact-ligne > * {
	margin-block: 0;
}

.footer .contact-ligne > p:not(:first-child) {
	color: rgba(255, 255, 255, 0.8);
}

.contact-ligne > p:not(:first-child) {
	line-height: 1.6;
}

.footer-bas {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}

.footer-legal .wp-block-navigation-item__content {
	color: rgba(255, 255, 255, 0.5);
	font-size: var(--wp--preset--font-size--petit);
}

.footer-legal .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blanc);
}

/*
 * Pastille de 38px cerclee d'un filet blanc a 25%, comme dans le design, qui se
 * remplit de turquoise au survol. Le style de bloc "logos-only" du core remet
 * padding et fond a zero avec deux classes : il faut la meme force pour
 * reprendre la main, d'ou le selecteur sur la liste ET sur l'element.
 */
.wp-block-social-links.footer-reseaux .wp-block-social-link {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	transition: background-color var(--ixnov-transition), border-color var(--ixnov-transition);
}

.wp-block-social-links.footer-reseaux .wp-block-social-link-anchor {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0;
}

/*
 * Le design ne met pas le glyphe de marque dans la pastille mais le sigle "in".
 * On masque donc l'icone posee par le bloc et on rend le sigle a sa place. Le
 * nom accessible du lien reste porte par son libelle lecteur d'ecran, que le
 * bloc rend deja : rien n'est perdu pour les technologies d'assistance.
 */
.wp-block-social-links.footer-reseaux .wp-block-social-link svg {
	display: none;
}

.wp-block-social-links.footer-reseaux .wp-block-social-link-anchor::before {
	content: "in";
	font-family: var(--wp--preset--font-family--corps);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.wp-block-social-links.footer-reseaux .wp-block-social-link:hover {
	background-color: var(--wp--preset--color--primaire);
	border-color: var(--wp--preset--color--primaire);
}

/* ==========================================================================
   En-tete des pages interieures
   ========================================================================== */

/*
 * Aplat turquoise profond et symbole en filigrane. Une page avec une image a la
 * une recoit la photo (inc/entete-bandeau.php) : passee en noir et blanc puis
 * multipliee sur le fond turquoise, elle prend la couleur de marque.
 */
.entete-bandeau {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--wp--preset--color--blanc);
	background-color: var(--wp--preset--color--primaire-profond);
}

.entete-bandeau.a-image {
	background-color: var(--wp--preset--color--primaire);
}

.entete-bandeau::before {
	content: "";
	position: absolute;
	right: -150px;
	top: -130px;
	z-index: -1;
	width: 900px;
	height: 636px;
	pointer-events: none;
	opacity: 0.1;
	background-color: var(--wp--preset--color--blanc);
	-webkit-mask: url("../images/symbole.svg") no-repeat center / contain;
	mask: url("../images/symbole.svg") no-repeat center / contain;
}

/* Voile qui garde le texte blanc lisible quelle que soit la photo. */
.entete-bandeau.a-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background-color: var(--wp--preset--color--sombre);
	opacity: 0.3;
}

.entete-bandeau-image {
	position: absolute;
	inset: 0;
	z-index: -3;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	filter: grayscale(1) contrast(1.15);
	mix-blend-mode: multiply;
}

.entete-bandeau :is(h1, h2, h3) {
	color: var(--wp--preset--color--blanc);
}

.entete-bandeau .is-style-point-final::after {
	color: var(--wp--preset--color--primaire-clair);
}

.entete-bandeau .is-style-surtitre::before {
	background-color: var(--wp--preset--color--primaire-clair);
}

.entete-bandeau .carte-tags a {
	background-color: var(--wp--preset--color--blanc);
}

.entete-bandeau .wp-block-post-title,
.entete-bandeau h1 {
	margin-block-end: 0;
}

/* ==========================================================================
   Divers
   ========================================================================== */

.pagination {
	gap: var(--wp--preset--spacing--30);
}

.wp-block-query-pagination .page-numbers {
	padding: 6px 12px;
	border-radius: 8px;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primaire);
	color: var(--wp--preset--color--blanc);
}

/* La grille des Query Loop occupe toute la hauteur disponible par carte. */
.is-style-grille-cartes > li {
	display: flex;
	flex-direction: column;
}

.is-style-grille-cartes > li > * {
	height: 100%;
}

/* ==========================================================================
   Realisations
   ========================================================================== */

.realisations-intro {
	max-width: 640px;
	line-height: 1.7;
}

/* La carte d'actualite, avec un visuel plus haut : ce sont des photos produit. */
.carte-realisation .carte-actu-image img {
	height: 220px;
}

/*
 * Largeur limitee sur le titre et non sur son groupe : le layout constrained
 * centre un enfant plus etroit que lui, le titre se decalait alors du texte.
 */
.realisation-entete .wp-block-post-title {
	max-width: 860px;
}

/*
 * Etiquette de filiale sur le bandeau turquoise : fond blanc, le texte garde la
 * couleur de l'entite. La regle injectee par inc/couleurs.php, plus loin dans
 * la cascade a specificite egale, remettait sinon le fond translucide.
 */
.realisation-entete .carte-tags a[href] {
	background-color: var(--wp--preset--color--blanc);
}

/* ".carte-tags" annule les marges de flux : l'ecart sous le titre est repose ici. */
.realisation-entete .carte-tags {
	margin-top: 18px;
}

/*
 * Fiche : texte a gauche, fiche projet collante a droite. Les marges de flux
 * du layout "default" sont annulees, l'ecart vient du gap de la grille.
 */
.realisation-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: var(--wp--preset--spacing--70);
	align-items: start;
}

.realisation-colonnes > * {
	margin-block: 0;
}

.realisation-contenu {
	line-height: 1.75;
}

.realisation-contenu h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	font-size: var(--wp--preset--font-size--titre-s);
}

.realisation-contenu > h2:first-child {
	margin-top: 0;
}

.realisation-contenu .wp-block-gallery {
	margin-block: var(--wp--preset--spacing--50);
	align-items: flex-start;
}

/*
 * Visuels produit de formats tres differents : vignettes de meme hauteur,
 * image entiere sur fond clair. La legende, que le core pose en surimpression
 * sur un degrade, passe dessous - illisible sur ces petits visuels.
 */
.realisation-contenu .wp-block-gallery.has-nested-images figure.wp-block-image img {
	height: 190px;
	padding: 12px;
	object-fit: contain;
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--surface-alt);
}

.realisation-contenu .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	margin-top: 10px;
	padding: 0;
	overflow: visible;
	background: none;
	color: var(--wp--preset--color--texte-doux);
	font-size: var(--wp--preset--font-size--petit);
	text-align: center;
	text-shadow: none;
}

/* ==========================================================================
   Encart fiche
   ========================================================================== */

/*
 * Encart lateral des pages de detail : fiche projet d'une realisation, offre
 * d'emploi en bref. Le rythme vient du gap du conteneur, et chaque ligne
 * porte son trait en bas : meme ecart au-dessus et au-dessous du trait. Avec
 * des marges, l'ecart ne se posait que d'un cote et le libelle suivant
 * collait au trait.
 */
.fiche-encart {
	position: sticky;
	top: calc(var(--ixnov-header-h, 88px) + 24px);
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
	border-top: 5px solid var(--wp--preset--color--primaire);
	border-radius: var(--ixnov-rayon-carte);
	background-color: var(--wp--preset--color--blanc);
	box-shadow: var(--wp--preset--shadow--carte-forte);
}

.fiche-encart > * {
	margin-block: 0;
}

/* Les lignes du plugin Kienso - Offres d'emploi (une liste dl) suivent le meme rythme. */
.fiche-encart .kemp-details {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	background: none;
}

.fiche-ligne,
.fiche-encart .kemp-details__ligne,
.fiche-encart .kemp-details__ligne + .kemp-details__ligne {
	margin: 0;
	padding: 0 0 18px;
	border-top: 0;
	border-bottom: 1px solid var(--wp--preset--color--bordure);
}

/* Valeur non renseignee (zone geographique optionnelle) : la ligne disparait. */
.fiche-ligne:has(.fiche-valeur:empty) {
	display: none;
}

.fiche-libelle,
.fiche-encart .kemp-details dt {
	margin: 0 0 4px;
	color: var(--wp--preset--color--texte-doux);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 1;
}

.fiche-valeur,
.fiche-encart .kemp-details dd {
	margin: 0;
	font-weight: 600;
	line-height: 1.5;
}

/* L'appel et son bouton forment un tout : ecart reduit entre les deux. */
.fiche-appel {
	color: var(--wp--preset--color--texte-doux);
}

.fiche-encart > .fiche-appel + .wp-block-buttons {
	margin-top: -6px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/*
 * Ces points de rupture, comme toutes les valeurs en vw de theme.json, se
 * mesurent dans l'editeur sur la largeur du canvas et non sur celle de la
 * fenetre : panneau de reglages ouvert, le canvas bascule en tablette bien
 * avant le front. C'est un artefact de l'editeur, il n'y a rien a corriger
 * ici - le responsive se juge avec les apercus Bureau / Tablette / Mobile.
 */
@media (max-width: 1024px) {
	/* La fiche projet passe sous le texte, et n'a plus de raison d'etre collante. */
	.realisation-colonnes {
		grid-template-columns: minmax(0, 1fr);
	}

	.fiche-encart {
		position: static;
	}

	.slider-secteurs .wp-block-post-template > li {
		flex-basis: calc((100% - var(--wp--preset--spacing--40)) / 2);
	}

	.contact-grille {
		grid-template-columns: 1fr;
	}

	.contact-formulaire {
		padding: 32px 28px 28px;
	}

	.secteurs-cta-encart {
		padding: 40px 32px;
	}

	/* La carte d'expertise s'empile : le panneau de marque passe au-dessus. */
	.carte-expertise {
		grid-template-columns: 1fr;
	}

	.carte-expertise-corps {
		padding: 32px 28px 28px;
	}

	.filiale-liste--cles .filiale-liste__items {
		grid-template-columns: 1fr;
	}

	.expertises-cta-encart {
		padding: 36px 32px;
	}

	/*
	 * Les grilles de la page Le groupe se resserrent. Deux classes : le core
	 * imprime "grid-template-columns" sur la classe de conteneur qu'il genere
	 * (0-1-0) dans une feuille qui peut passer apres celle du theme - a
	 * egalite, elle l'emporterait.
	 */
	.groupe-valeurs .groupe-valeurs-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.groupe-atouts .groupe-atouts-grille {
		grid-template-columns: 1fr;
	}

	/*
	 * La carte des implantations lache sa largeur fixe avant que les colonnes
	 * ne s'empilent : a 620px elle ne laisserait plus que deux mots par ligne
	 * a l'accroche.
	 */
	.groupe-implantations .groupe-implantations-visuel {
		flex-basis: 50% !important;
	}

	/*
	 * min(..., 100%) et non une valeur seche : la composition a une largeur
	 * fixe (688px, cadre de calibrage des medaillons), donc un simple plafond
	 * de 520 ou 420px la laisserait deborder de l'ecran des que la colonne est
	 * plus etroite que ce plafond.
	 */
	.hero-visuel {
		max-width: min(520px, 100%);
		margin-inline: auto;
	}

	.entete-section {
		align-items: flex-start;
	}
}

@media (max-width: 781px) {
	:root {
		--ixnov-header-h: 72px;
	}

	/*
	 * Sur mobile la composition de medaillons passe devant l'accroche : elle
	 * pose le sujet d'un coup d'oeil la ou le titre demande d'etre lu.
	 *
	 * Les colonnes du core s'empilent par retour a la ligne, pas en changeant
	 * de direction : on les reordonne donc par "order". L'ordre du DOM reste
	 * inchange, et comme la colonne visuelle ne contient aucun element
	 * focalisable, l'ordre de tabulation n'est pas affecte.
	 */
	.hero .wp-block-column:first-child {
		order: 2;
	}

	.hero .wp-block-column:last-child {
		order: 1;
	}

	.hero-visuel {
		max-width: min(420px, 100%);
	}

	.positionnement-visuel {
		padding: 0 0 24px 24px;
	}

	.positionnement-image img {
		height: 320px;
	}

	.is-style-encart-flottant {
		left: 0;
		top: 16px;
		padding: 14px 18px;
	}

	.groupe-valeurs .groupe-valeurs-grille {
		grid-template-columns: 1fr;
	}

	/* Le damier des engagements se deroule en une seule colonne. */
	.groupe-mission-liste {
		grid-template-columns: 1fr;
	}

	.groupe-mission-liste > li {
		padding: 28px 26px 30px;
	}

	/* Les quatre logos de filiales passent sur deux rangees. */
	.groupe-filiales .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.footer-baseline {
		max-width: none;
	}

	/* Formulaire de contact : un champ par ligne, bouton au-dessus de la mention. */
	.contact-formulaire .gform_wrapper .gfield--width-half {
		grid-column: span 12;
	}

	.contact-formulaire .gform_wrapper .gform_footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.contact-formulaire .gform_wrapper .gform_footer .contact-mention {
		flex: none;
	}
}

@media (max-width: 599px) {
	.header-logo img {
		height: 38px;
	}

	/* Une carte et le debut de la suivante : on voit qu'il y a a faire defiler. */
	.slider-secteurs .wp-block-post-template > li {
		flex-basis: 85%;
	}
}