/*
 * E2IT - boutons.
 *
 * Source unique du comportement de tous les boutons du site. Trois gestes,
 * une meme idee : le bouton reagit comme un circuit qu on ferme, de gauche
 * a droite, dans le sens de lecture et de l action.
 *
 *   1. Charge  - pilules : un aplat se remplit comme une jauge, la fleche
 *                est relayee par une nouvelle.
 *   2. Trace   - boutons ronds : le contour se dessine sur un tour.
 *   3. Filet   - liens d action : le trait des surtitres se trace.
 *   +  Voyant  - filtres : une pastille glacier s allume sur l actif.
 *
 * Les variantes ne changent que des couleurs (--b-*). Le mouvement est
 * ecrit une seule fois.
 *
 * :not(#e2it) donne a ces regles le poids d un identifiant : elles passent
 * devant les anciens styles de boutons des autres feuilles et devant les
 * couleurs qu Elementor ecrit pour chaque widget. Seuls couleurs, contour
 * et mouvement sont pris en charge ici ; tailles et marges restent aux
 * feuilles de composants.
 *
 * Le survol n agit que sur les appareils a souris : sur ecran tactile, il
 * resterait colle apres l appui.
 */

@property --e2it-trace {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0turn;
}

:root {
	--e2it-bouton-duree: 320ms;
	--e2it-bouton-appui: 80ms;
	--e2it-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--e2it-combine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 1.8h2.4l1.2 3-1.5 1a8 8 0 0 0 3.9 3.9l1-1.5 3 1.2v2.4a1.4 1.4 0 0 1-1.4 1.4A11.6 11.6 0 0 1 1.8 3.2a1.4 1.4 0 0 1 1.4-1.4z' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ==================================================================
   1. CHARGE - pilules
   ================================================================== */

/* Principal, par defaut : marine, remplissage bleu profond. */
.elementor-widget-button .elementor-button,
.e2it-bouton,
.e2itz-btn,
.fluentform .ff-btn-submit {
	--b-fond: var(--e2it-marine);
	--b-texte: var(--e2it-blanc);
	--b-contour: var(--e2it-marine);
	--b-remplissage: var(--e2it-bleu-profond);
	--b-texte-survol: var(--e2it-blanc);
	--b-contour-survol: var(--e2it-bleu-profond);
}

/* Accent : bleu arc, remplissage marine. Un seul par ecran. */
.e2it-btn--accent .elementor-button,
.e2it-hero__bouton-principal .elementor-button,
.e2it-bouton--accent,
.e2it-bouton--contact {
	--b-fond: var(--e2it-accent-fond);
	--b-contour: var(--e2it-accent-fond);
	--b-remplissage: var(--e2it-marine);
	--b-contour-survol: var(--e2it-marine);
}

/* Secondaire : contour marine, le remplissage fait passer le texte en blanc. */
.e2it-btn--secondaire .elementor-button,
.e2it-bouton--secondaire {
	--b-fond: transparent;
	--b-texte: var(--e2it-marine);
	--b-contour: var(--e2it-marine);
	--b-remplissage: var(--e2it-marine);
	--b-texte-survol: var(--e2it-blanc);
	--b-contour-survol: var(--e2it-marine);
}

/* Secondaire sur fond sombre (hero, sections sombres ou a photo, pied) :
   contour blanc, remplissage blanc, texte marine. */
.e2it-btn--sombre .elementor-button,
:is(.e2it-hero, .e2it-marine, .e2it-section--sombre, .e2it-section--photo, .e2it-panneau, .e2it-formation, .e2it-pied) .e2it-btn--secondaire .elementor-button,
.e2it-hero__bouton-secondaire .elementor-button,
.e2it-clients__bouton .elementor-button,
.e2it-bouton--clair {
	--b-fond: transparent;
	--b-texte: var(--e2it-blanc);
	--b-contour: rgba(255, 255, 255, .55);
	--b-remplissage: var(--e2it-blanc);
	--b-texte-survol: var(--e2it-marine);
	--b-contour-survol: var(--e2it-blanc);
}

/* Accent sur fond sombre : un remplissage marine se confondrait avec le
   fond, il passe au bleu profond et le contour s allume en glacier. */
:is(.e2it-hero, .e2it-marine, .e2it-section--sombre, .e2it-section--photo, .e2it-panneau, .e2it-formation, .e2it-pied) :is(.e2it-btn--accent .elementor-button, .e2it-hero__bouton-principal .elementor-button, .e2it-bouton--accent),
.e2it-entete--transparente:not(.e2it-entete--figee) .e2it-bouton--contact {
	--b-remplissage: var(--e2it-bleu-profond);
	--b-contour-survol: var(--e2it-glacier);
}

/* Mecanique commune. */
:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it) {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--b-fond);
	background-image: none;
	color: var(--b-texte);
	border: 1.5px solid var(--b-contour);
	box-shadow: none;
	transform: none;
	text-decoration: none;
	transition:
		color var(--e2it-bouton-duree) var(--e2it-courbe),
		border-color var(--e2it-bouton-duree) var(--e2it-courbe),
		transform var(--e2it-bouton-appui) var(--e2it-courbe);
}

/* L aplat : il entre par la gauche et, au depart du pointeur, ressort par
   la droite. Le courant traverse, il ne recule pas. */
:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--b-remplissage);
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--e2it-bouton-duree) var(--e2it-courbe);
	pointer-events: none;
}

@media (hover: hover) {
	:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):hover {
		color: var(--b-texte-survol);
		border-color: var(--b-contour-survol);
	}

	:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):hover::before {
		transform: scaleX(1);
		transform-origin: left center;
	}
}

/* Focus clavier : meme etat que le survol, plus un contour decale. */
:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):focus-visible {
	color: var(--b-texte-survol);
	border-color: var(--b-contour-survol);
	outline: 3px solid var(--e2it-accent);
	outline-offset: 3px;
}

:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):focus-visible::before {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Appui : le bouton s enfonce, sans ombre. */
:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):active {
	transform: scale(.97);
}

/* La fleche, relayee : deux calques du meme trait dans un masque. Au
   survol, le premier sort par la droite, le second entre par la gauche. */
.elementor-widget-button .elementor-button-content-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

:is(.elementor-widget-button .elementor-button-content-wrapper, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it)::after {
	content: "";
	position: static;
	inset: auto;
	z-index: auto;
	display: inline-block;
	flex: none;
	width: 16px;
	height: 16px;
	margin-inline-start: 2px;
	vertical-align: -3px;
	background: currentColor;
	transform: none;
	-webkit-mask: var(--e2it-fleche) 0 0 / 16px 16px no-repeat, var(--e2it-fleche) -20px 0 / 16px 16px no-repeat;
	mask: var(--e2it-fleche) 0 0 / 16px 16px no-repeat, var(--e2it-fleche) -20px 0 / 16px 16px no-repeat;
	transition: -webkit-mask-position 280ms var(--e2it-courbe), mask-position 280ms var(--e2it-courbe);
}

.e2it-bouton:not(#e2it)::after,
.e2itz-btn:not(#e2it)::after,
.fluentform .ff-btn-submit:not(#e2it)::after {
	margin-inline-start: 10px;
}

.e2it-bouton:not(#e2it) {
	gap: 0;
}

@media (hover: hover) {
	:is(.elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper, .e2it-bouton:hover, .e2itz-btn:hover, .fluentform .ff-btn-submit:hover):not(#e2it)::after {
		-webkit-mask-position: 20px 0, 0 0;
		mask-position: 20px 0, 0 0;
	}
}

:is(.elementor-widget-button .elementor-button:focus-visible .elementor-button-content-wrapper, .e2it-bouton:focus-visible, .e2itz-btn:focus-visible):not(#e2it)::after {
	-webkit-mask-position: 20px 0, 0 0;
	mask-position: 20px 0, 0 0;
}

/* Sans fleche : sur demande, par une classe. */
:is(.e2it-btn--sans-fleche .elementor-button-content-wrapper, .e2it-bouton--sans-fleche):not(#e2it)::after {
	content: none;
}

/* Appel : un combine a la place de la fleche, qui se decale au survol. */
:is(.e2it-btn--appel .elementor-button-content-wrapper, .e2it-bouton--appel):not(#e2it)::after {
	-webkit-mask: var(--e2it-combine) center / 16px 16px no-repeat;
	mask: var(--e2it-combine) center / 16px 16px no-repeat;
	transition: transform 280ms var(--e2it-courbe);
}

@media (hover: hover) {
	:is(.e2it-btn--appel .elementor-button:hover .elementor-button-content-wrapper, .e2it-bouton--appel:hover):not(#e2it)::after {
		transform: rotate(-12deg);
	}
}

/* Envoi d un formulaire : le bouton reste charge, la fleche laisse place
   a trois points qui s allument l un apres l autre. */
@keyframes e2it-envoi {
	0%   { clip-path: inset(0 66% 0 0); }
	33%  { clip-path: inset(0 33% 0 0); }
	66%  { clip-path: inset(0 0 0 0); }
}

.fluentform .ff-btn-submit.ff-working:not(#e2it) {
	color: var(--b-texte-survol);
	pointer-events: none;
}

.fluentform .ff-btn-submit.ff-working:not(#e2it)::before {
	transform: scaleX(1);
	transform-origin: left center;
}

.fluentform .ff-btn-submit.ff-working:not(#e2it)::after {
	width: 22px;
	height: 6px;
	vertical-align: middle;
	-webkit-mask: none;
	mask: none;
	background: radial-gradient(circle, currentColor 2.4px, transparent 2.9px) 0 0 / 8px 6px repeat-x;
	animation: e2it-envoi 900ms steps(1) infinite;
}

/* Desactive : lisible, inerte, sans effet. */
:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it):is([disabled], [aria-disabled="true"]):not(.ff-working) {
	opacity: .4;
	pointer-events: none;
}

/* ==================================================================
   2. TRACE - boutons ronds
   Le bouton menu de l en-tete porte deja ce geste ; il sert de modele.
   ================================================================== */

:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it) {
	position: relative;
	isolation: isolate;
	transition:
		background-color var(--e2it-duree-rapide) var(--e2it-courbe),
		border-color var(--e2it-duree-rapide) var(--e2it-courbe),
		transform var(--e2it-bouton-appui) var(--e2it-courbe);
}

:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it)::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(from 180deg, currentColor var(--e2it-trace), transparent 0);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	transition: --e2it-trace var(--e2it-bouton-duree) var(--e2it-courbe);
	pointer-events: none;
}

:is(.e2it-rail__fleche, .e2it-equipe__fleche) > span[aria-hidden] {
	display: inline-block;
	transition: transform 280ms var(--e2it-courbe);
}

@media (hover: hover) {
	:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it):hover:not([disabled])::before {
		--e2it-trace: 1turn;
	}

	:is(.e2it-rail__fleche--suiv, [data-e2it-eq-suiv]):hover:not([disabled]) > span[aria-hidden] {
		transform: translateX(2px);
	}

	:is(.e2it-rail__fleche--prec, [data-e2it-eq-prec]):hover:not([disabled]) > span[aria-hidden] {
		transform: translateX(-2px);
	}
}

:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it):focus-visible::before {
	--e2it-trace: 1turn;
}

:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it):active:not([disabled]) {
	transform: scale(.94);
}

:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it)[disabled]::before {
	display: none;
}

/* ==================================================================
   3. FILET - liens d action
   Trace par un fond et non par un pseudo-element : sur les cartes, le
   ::after du lien sert deja a rendre toute la carte cliquable.
   ================================================================== */

:is(.e2it-carte__lien a, .e2it-rail__cta):not(#e2it) {
	text-decoration: none;
	padding-bottom: 3px;
	background-image: linear-gradient(var(--e2it-accent), var(--e2it-accent));
	background-repeat: no-repeat;
	background-position: 100% 100%;
	background-size: 0 2px;
	transition: background-size var(--e2it-bouton-duree) var(--e2it-courbe);
}

.e2it-carte__lien:not(#e2it),
.e2it-carte__lien:not(#e2it):hover {
	text-decoration: none;
}

@media (hover: hover) {
	:is(.e2it-carte:hover .e2it-carte__lien a, .e2it-carte__lien a:hover, .e2it-rail__carte:hover .e2it-rail__cta):not(#e2it) {
		text-decoration: none;
		background-position: 0 100%;
		background-size: 100% 2px;
	}
}

:is(.e2it-carte__lien a:focus-visible, .e2it-rail__carte:focus-visible .e2it-rail__cta):not(#e2it) {
	background-position: 0 100%;
	background-size: 100% 2px;
}

/* ==================================================================
   4. VOYANT - filtres
   Un filtre n est pas une action : il ne se charge pas, il s allume.
   ================================================================== */

@keyframes e2it-voyant {
	from { transform: scale(0); }
}

:is(.e2it-rea-index__filtre, .e2itz-filtre, .e2it-index__filtre):not(#e2it):active {
	transform: scale(.97);
}

:is(.e2it-rea-index__filtre, .e2itz-filtre):not(#e2it) {
	transition:
		background-color 160ms var(--e2it-courbe),
		border-color 160ms var(--e2it-courbe),
		color 160ms var(--e2it-courbe),
		transform var(--e2it-bouton-appui) var(--e2it-courbe);
}

:is(.e2it-rea-index__filtre.est-actif, .e2itz-filtre.is-actif, .e2it-index__filtre.est-actif):not(#e2it)::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--e2it-glacier);
	vertical-align: 1px;
	animation: e2it-voyant 200ms var(--e2it-courbe) backwards;
}

.e2itz-filtre.is-actif:not(#e2it)::before {
	margin-inline-end: 8px;
}

/* ==================================================================
   Mouvement reduit : les couleurs changent, rien ne glisse.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	:is(.elementor-widget-button .elementor-button, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it)::before,
	:is(.elementor-widget-button .elementor-button-content-wrapper, .e2it-bouton, .e2itz-btn, .fluentform .ff-btn-submit):not(#e2it)::after,
	:is(.e2it-rail__fleche, .e2it-equipe__fleche, .e2itz-zoom, .e2it-tiroir__fermer):not(#e2it)::before,
	:is(.e2it-carte__lien a, .e2it-rail__cta):not(#e2it) {
		transition: none;
	}

	.fluentform .ff-btn-submit.ff-working:not(#e2it)::after,
	:is(.e2it-rea-index__filtre, .e2itz-filtre, .e2it-index__filtre)::before {
		animation: none;
	}
}
/* ------------------------------------------------------------------
   Icone choisie dans Elementor
   Si un bouton recoit une icone dans le panneau, elle remplace la fleche
   automatique : jamais deux fleches. Elle se place a droite du libelle,
   au meme ecart et a la meme taille que la fleche du systeme.
   ------------------------------------------------------------------ */
.elementor-widget-button .elementor-button:has(.elementor-button-icon) .elementor-button-content-wrapper:not(#e2it)::after {
	content: none;
}

.elementor-widget-button .elementor-button:has(.elementor-button-icon) .elementor-button-content-wrapper:not(#e2it) {
	flex-direction: row;
	gap: 10px;
}

.elementor-widget-button .elementor-button-icon:not(#e2it) {
	order: 2;
	margin: 0;
	display: inline-flex;
	transition: transform 280ms var(--e2it-courbe);
}

.elementor-widget-button .elementor-button-icon:not(#e2it) svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (hover: hover) {
	.elementor-widget-button .elementor-button:hover .elementor-button-icon:not(#e2it) {
		transform: translateX(3px);
	}
}
/* Bouton de la carte : meme hauteur de 48 px que les autres pilules,
   quelle que soit la taille du libelle. */
.e2itz-btn:not(#e2it) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding-block: 0;
}

/* Un bouton masque doit disparaitre : le display des pilules et des
   boutons ronds prend sinon le pas sur l attribut hidden, et un bouton
   cache continue d occuper sa place. */
:is(.e2it-bouton, .elementor-button, .e2itz-btn, .e2it-rea-index__tout, .e2it-rea-index__effacer, button)[hidden]:not(#e2it) {
	display: none;
}