/*
 * E2IT - bandeau de logos clients.
 *
 * Defilement continu, sans bibliotheque. La piste contient la serie deux fois
 * et se translate de la moitie de sa largeur : la boucle est sans couture.
 */

/* Aucune valeur par defaut declaree ici : elle masquerait celle que les
   reglages du panneau ecrivent sur le wrapper du widget. Les valeurs de repli
   sont donnees a l usage, dans chaque var(). */
.e2it-clients {
	width: 100%;
}

.e2it-clients-filet-oui .e2it-clients {
	padding-top: var(--e2it-espace-6);
	border-top: 1px solid var(--e2it-filet-entete);
}

.e2it-clients__intitule {
	margin: 0 0 var(--e2it-espace-4);
	text-align: center;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-bleu-clair);
}

/* Fenetre : masque les bords en fondu pour que les logos n apparaissent pas
   ni ne disparaissent brutalement. */
.e2it-clients__fenetre {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.e2it-clients__piste {
	display: flex;
	align-items: center;
	gap: var(--e2it-clients-ecart, 64px);
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	animation: e2it-defile 40s linear infinite;
}

.e2it-clients__item {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Specificite volontairement elevee : Elementor impose height: auto et
   width: 100% aux images de widget, avec une specificite superieure a une
   simple classe. */
.e2it-clients .e2it-clients__item img.e2it-clients__logo {
	display: block;
	height: var(--e2it-clients-hauteur, 40px);
	width: auto;
	max-width: 260px;
	object-fit: contain;
	opacity: var(--e2it-clients-opacite, .6);
	transition: opacity var(--e2it-duree-moyenne) var(--e2it-courbe);
}

.e2it-clients-blanc-oui .e2it-clients .e2it-clients__item img.e2it-clients__logo {
	filter: brightness(0) invert(1);
}

.e2it-clients .e2it-clients__item:hover img.e2it-clients__logo {
	opacity: 1;
}

/* Pause au survol et au focus clavier : une animation infinie doit pouvoir
   etre arretee par l utilisateur. */
.e2it-clients__fenetre:hover .e2it-clients__piste,
.e2it-clients__fenetre:focus-within .e2it-clients__piste {
	animation-play-state: paused;
}

@keyframes e2it-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Le gap ajoute une demi-mesure a la boucle : on la compense pour que la
   translation de 50 % retombe exactement sur le premier logo de la copie. */
.e2it-clients__piste::after {
	content: none;
}

.e2it-clients__vide {
	text-align: center;
	font-size: var(--e2it-etiquette-taille);
	color: var(--e2it-bleu-clair);
	margin: 0;
	padding: var(--e2it-espace-4);
}

@media (prefers-reduced-motion: reduce) {
	.e2it-clients__piste {
		animation: none;
		justify-content: center;
		flex-wrap: wrap;
		width: 100%;
		row-gap: var(--e2it-espace-4);
	}

	.e2it-clients__item[aria-hidden] {
		display: none;
	}

	.e2it-clients__fenetre {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 767px) {
	.e2it-clients {
		--e2it-clients-ecart: 40px; /* repli mobile */
	}

	.e2it-clients-filet-oui .e2it-clients {
		padding-top: var(--e2it-espace-4);
	}
}

/* Equilibre optique : a hauteur egale, un logo large occupe beaucoup plus de
   surface qu un logo carre. Le plafond de largeur ramene les extremes.
   Aucune deformation : object-fit reste en contain. */
.e2it-clients .e2it-clients__item {
	min-width: calc(var(--e2it-clients-hauteur, 64px) * 1.2);
}

/* ------------------------------------------------------------------
   En-tete de bande : intitule, filet, decompte
   ------------------------------------------------------------------ */

.e2it-clients__entete {
	display: flex;
	align-items: center;
	gap: var(--e2it-espace-4);
	margin-bottom: var(--e2it-espace-4);
}

.e2it-clients__entete .e2it-clients__intitule {
	margin: 0;
	text-align: left;
	flex: none;
}

.e2it-clients__filet {
	flex: 1;
	height: 1px;
	background: var(--e2it-filet-entete);
}

.e2it-clients__decompte {
	margin: 0;
	flex: none;
	font-family: var(--e2it-police-mono);
	font-size: var(--e2it-mono-taille);
	font-weight: var(--e2it-mono-graisse);
	letter-spacing: var(--e2it-mono-interlettrage);
	text-transform: uppercase;
	color: var(--e2it-glacier);
}

/* Sens inverse : meme animation, lue a l envers. */
.e2it-clients-sens-droite .e2it-clients__piste {
	animation-direction: reverse;
}

/* Deux bandes de logos qui se suivent : l ecart de conteneur est a zero
   dans la section, la seconde porte donc le sien.

   Le selecteur vise les enveloppes de widget et non les bandes elles-memes :
   deux widgets Elementor ne sont jamais des freres directs au sens du DOM,
   chacun est enveloppe, et la regle precedente ne s appliquait donc jamais. */
.elementor-widget-e2it_clients + .elementor-widget-e2it_clients {
	margin-top: var(--e2it-espace-8);
}

/* ------------------------------------------------------------------
   Rythme de la tete de section Clients

   Le titre et l accroche vivent dans deux colonnes : sur grand ecran
   elles sont cote a cote et les 48 px les separent horizontalement ; en
   dessous elles s empilent et ce meme ecart devenait un blanc de 44 px
   entre le titre et l accroche. L ecart de rangee est donc donne
   separement, a la valeur titre -> introduction du reste du site.

   Les deux colonnes gardaient par ailleurs la marge interieure par
   defaut d Elementor, 10 px en haut et en bas, qui s ajoutait a tout.
   ------------------------------------------------------------------ */
.e2it-clients__tete.e-con:not(#e2it) {
	padding: 0;
	column-gap: var(--e2it-espace-12);
	row-gap: var(--e2it-tete-titre);
	margin-block-end: var(--e2it-espace-10);
}

.e2it-clients__tete.e-con > .e-con:not(#e2it) {
	padding: 0;
	gap: 0;
}

/* Les deux bandeaux se lisent comme une paire : l ecart qui les separe
   reste plus court que celui qui les detache de l accroche. */
.elementor-widget-e2it_clients + .elementor-widget-e2it_clients:not(#e2it) {
	margin-top: var(--e2it-espace-6);
}