/*
 * Carrousel de logos infini.
 * Logique : inc/carousels.php (shortcode [scf_carrousel])
 * Deux groupes identiques dans la piste : l'animation glisse de la largeur
 * d'un groupe (-50 %), la boucle est donc invisible.
 */

.scf-carousel {
	width: 100%;
	overflow: hidden;
}

.scf-carousel-track {
	display: flex;
	width: max-content;
	animation: scf-carousel-scroll var(--scf-duration, 30s) linear infinite;
}

.scf-carousel-group {
	display: flex;
	align-items: center;
	gap: 60px;
	padding-right: 60px;
}

.scf-carousel-item {
	flex: 0 0 auto;
}

/* Hauteur fixe + largeur automatique : les proportions viennent du fichier
   lui-meme (viewBox pour les SVG), object-fit borne les logos tres larges. */
.scf-carousel-item img {
	display: block;
	height: 80px;
	width: auto;
	max-width: 220px;
	object-fit: contain;
}

@keyframes scf-carousel-scroll {
	to {
		transform: translateX(-50%);
	}
}

@media (max-width: 767px) {
	/* Deux fois plus rapide sur mobile : les logos y sont plus petits,
	   la meme duree paraitrait deux fois plus lente. */
	.scf-carousel-track {
		animation-duration: calc(var(--scf-duration, 30s) / 2);
	}

	.scf-carousel-group {
		gap: 32px;
		padding-right: 32px;
	}

	.scf-carousel-item img {
		height: 56px;
		max-width: 160px;
	}
}