/**
 * Widget 1 — Logos défilants (marquee CSS).
 * Défilement infini via translateX + @keyframes. La piste contient deux
 * groupes identiques : on translate de -50 % => boucle sans saut visible.
 */

.ccw-marquee {
	--ccw-marquee-duration: 30s;
	overflow: hidden;
	width: 100%;
	position: relative;
}

/* La piste qui défile (largeur = 2x le contenu). */
.ccw-marquee__track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: ccw-marquee-scroll var(--ccw-marquee-duration) linear infinite;
}

/* Un groupe = la liste de logos (dupliquée une fois dans le HTML). */
.ccw-marquee__group {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.ccw-marquee__item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.ccw-marquee__item img {
	display: block;
	/* Taille pilotée par les contrôles Elementor (hauteur et/ou largeur).
	   Par défaut la largeur suit la hauteur (ratio conservé). */
	width: auto;
	max-width: none;
	object-fit: contain;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Direction gauche (défaut). */
@keyframes ccw-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Direction droite : on inverse le sens d'animation. */
.ccw-marquee--right .ccw-marquee__track {
	animation-direction: reverse;
}

/* Pause au survol. */
.ccw-marquee--pause-hover:hover .ccw-marquee__track {
	animation-play-state: paused;
}

/* Niveau de gris -> couleur au survol. */
.ccw-marquee--grayscale .ccw-marquee__item img {
	filter: grayscale(100%);
	opacity: 0.7;
}
.ccw-marquee--grayscale .ccw-marquee__item img:hover {
	filter: grayscale(0);
	opacity: 1;
}

/* Accessibilité : on stoppe l'animation si l'utilisateur le demande. */
@media (prefers-reduced-motion: reduce) {
	.ccw-marquee__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
	}
}