/**
 * Widget Elementor "Logos défilants" (anetmo_logo_marquee).
 *
 * Chaque groupe (copie de la liste des logos) est translaté de sa propre largeur
 * plus un écart : à la fin du cycle, le groupe suivant occupe exactement la
 * place du précédent, la boucle est invisible. Le JS règle la durée à partir de
 * la vitesse (px/s) et ajoute des copies si la bande est trop courte pour
 * couvrir le conteneur. Sans JS, deux copies et une durée par défaut.
 *
 * Les classes "anetmo-lm--*" (prefix_class) sont posées sur le wrapper Elementor,
 * parent de .anetmo-lm.
 */

.anetmo-lm {
	--anetmo-lm-height: 40px;
	--anetmo-lm-max-width: 240px;
	--anetmo-lm-gap: 80px;
	--anetmo-lm-padding-y: 10px;
	--anetmo-lm-fade: 80px;
	--anetmo-lm-opacity: 1;
	--anetmo-lm-opacity-hover: 1;
	--anetmo-lm-sep-color: currentColor;
	--anetmo-lm-sep-size: 6px;
	--anetmo-lm-sep-thickness: 1px;
	--anetmo-lm-sep-opacity: 1;
	--anetmo-lm-sep-offset: 0px;
	--anetmo-lm-duration: 30s; /* remplacé par le JS : (largeur d'un groupe + écart) / vitesse */

	width: 100%;
	overflow: hidden;
	padding: var(--anetmo-lm-padding-y) 0;
}

.anetmo-lm--fade-yes .anetmo-lm {
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--anetmo-lm-fade), #000 calc(100% - var(--anetmo-lm-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--anetmo-lm-fade), #000 calc(100% - var(--anetmo-lm-fade)), transparent);
}

.anetmo-lm__track {
	display: flex;
	gap: var(--anetmo-lm-gap);
	width: max-content;
}

.anetmo-lm__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--anetmo-lm-gap);
	animation: anetmo-lm-scroll var(--anetmo-lm-duration) linear infinite;
	will-change: transform;
}

.anetmo-lm--dir-right .anetmo-lm__group {
	animation-direction: reverse;
}

.anetmo-lm--pause-hover-yes .anetmo-lm:hover .anetmo-lm__group {
	animation-play-state: paused;
}

@keyframes anetmo-lm-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* Sa propre largeur + l'écart qui le sépare du groupe suivant. */
		transform: translateX(calc(-100% - var(--anetmo-lm-gap)));
	}
}

.anetmo-lm__item {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.anetmo-lm__logo {
	display: block;
	line-height: 0;
	opacity: var(--anetmo-lm-opacity);
	transition: opacity 0.3s ease, filter 0.3s ease;
}

.anetmo-lm__logo:hover {
	opacity: var(--anetmo-lm-opacity-hover);
}

/* Hauteur fixe, largeur naturelle : l'écart visible est le même entre tous les logos. */
.anetmo-lm__logo img {
	display: block;
	height: var(--anetmo-lm-height);
	width: auto;
	max-width: var(--anetmo-lm-max-width);
	object-fit: contain;
	object-position: center;
}

/* ---------------------------------------------------------------------------
 * Séparateur : un élément de la bande entre chaque logo (et après le dernier de
 * chaque copie), l'écart s'applique donc de chaque côté.
 * ------------------------------------------------------------------------ */

.anetmo-lm__sep {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	color: var(--anetmo-lm-sep-color);
	opacity: var(--anetmo-lm-sep-opacity);
	transform: translateY(var(--anetmo-lm-sep-offset));
	line-height: 1;
	font-size: var(--anetmo-lm-sep-size);
}

.anetmo-lm__sep--dot::before {
	content: "";
	width: var(--anetmo-lm-sep-size);
	height: var(--anetmo-lm-sep-size);
	border-radius: 50%;
	background: currentColor;
}

.anetmo-lm__sep--line::before {
	content: "";
	width: var(--anetmo-lm-sep-thickness);
	height: var(--anetmo-lm-sep-size);
	border-radius: 999px;
	background: currentColor;
}

.anetmo-lm__sep--icon i {
	font-size: inherit;
	line-height: 1;
}

.anetmo-lm__sep--icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.anetmo-lm__sep--text {
	font-weight: inherit;
	white-space: nowrap;
}

.anetmo-lm--grayscale-yes .anetmo-lm__logo {
	filter: grayscale(1);
}

.anetmo-lm--grayscale-yes.anetmo-lm--grayscale-hover-yes .anetmo-lm__logo:hover {
	filter: grayscale(0);
}

/* Accessibilité : pas de défilement automatique si l'OS le demande ;
 * la bande devient simplement scrollable horizontalement. */
@media (prefers-reduced-motion: reduce) {
	.anetmo-lm {
		overflow-x: auto;
	}

	.anetmo-lm__group {
		animation: none;
	}
}