/**
 * Styles structurels du widget Marquee de logos.
 *
 * Ce fichier ne porte que le strict nécessaire au fonctionnement : flux
 * horizontal, débordement masqué, masque de fondu et transitions. Toute la
 * cosmétique vient des contrôles de l'onglet Style, qui alimentent les
 * propriétés personnalisées déclarées ci-dessous. C'est ce qui rend les
 * réglages responsives d'Elementor opérants sans une seule ligne de media query
 * ici : Elementor redéfinit simplement la variable par point de rupture.
 */

.myria-marquee {
	--myria-marquee-h: 56px;
	--myria-marquee-w: 180px;
	--myria-marquee-gap: 48px;
	--myria-marquee-fondu: 80px;
	--myria-marquee-transition: .3s;

	position: relative;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.myria-marquee * {
	box-sizing: border-box;
}

/*
 * La piste porte la translation. will-change et translate3d maintiennent
 * l'animation sur la couche de composition du navigateur : sans cela, un
 * bandeau large provoque un recalcul de mise en page à chaque image.
 */
.myria-marquee__piste {
	display: flex;
	align-items: center;
	gap: var(--myria-marquee-gap);
	width: max-content;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.myria-marquee__groupe {
	display: flex;
	align-items: center;
	gap: var(--myria-marquee-gap);
	flex: 0 0 auto;
}

.myria-marquee__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--myria-marquee-h);
}

/*
 * Attention a la specificite.
 *
 * Elementor declare `.elementor img { height: auto; max-width: 100%; }`, soit
 * une classe + un type = 0-1-1. Un simple `.myria-marquee__img` (0-1-0) est
 * donc ecrase sur la hauteur et la largeur maximale, sans aucun avertissement :
 * seules les proprietes qu'Elementor ne declare pas (object-fit, transition)
 * passaient.
 *
 * On prefixe par le conteneur pour monter a 0-2-0, ce qui suffit a repasser
 * devant sans recourir a !important.
 */
.myria-marquee .myria-marquee__img {
	display: block;
	height: 100%;
	width: auto;
	max-width: var(--myria-marquee-w);
	object-fit: contain;
	transition:
		opacity var(--myria-marquee-transition) ease,
		filter var(--myria-marquee-transition) ease;
}

/*
 * Fondu sur les bords. Le masque évite d'avoir à caler une couleur de dégradé
 * sur celle de la section : il agit sur l'opacité, donc il fonctionne
 * au-dessus de n'importe quel arrière-plan, y compris une image.
 */
.myria-marquee.a-fondu {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--myria-marquee-fondu),
		#000 calc(100% - var(--myria-marquee-fondu)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--myria-marquee-fondu),
		#000 calc(100% - var(--myria-marquee-fondu)),
		transparent 100%
	);
}

/* Message affiché dans l'éditeur quand la galerie est vide. */
.myria-marquee__vide {
	padding: 24px;
	text-align: center;
	border: 1px dashed #c3c4c7;
	border-radius: 6px;
	color: #6b7280;
}

/*
 * Préférence système de réduction des animations : la bande s'immobilise.
 * Le script coupe déjà la boucle, cette règle neutralise en plus les
 * transitions de survol.
 */
@media (prefers-reduced-motion: reduce) {
	.myria-marquee .myria-marquee__img {
		transition: none;
	}
}