/* =====================================================================
   Carrousel partenaires — défilement natif

   Feuille volontairement écrite en CSS simple, hors chaîne Tailwind :
   le build « assets/css/tailwind.css » n'est pas régénéré et ne contient
   ni w-1/2, ni sm:w-1/3, ni lg:w-1/4, ni lg:px-8, ni md:h-16. Les logos
   n'avaient donc aucune largeur imposée. Tout le dimensionnement du
   bandeau est défini ici, et uniquement ici.

   Les paliers reprennent exactement les breakpoints Tailwind
   sm (640px) et lg (1024px).
   ===================================================================== */


/* ===== Piste ===== */

.partner-track {
	display: flex;
	align-items: center;

	/* Le défilement est confiné à la piste : jamais au <body>. */
	overflow-x: auto;
	overflow-y: hidden;
	max-width: 100%;

	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;

	/*
	 * « scroll-behavior » n'est délibérément PAS déclaré ici : le
	 * recalage du bouclage affecte scrollLeft directement et doit
	 * rester instantané, sinon la remise à zéro s'anime et le saut
	 * devient visible. Le lissage est demandé au cas par cas en JS,
	 * via scrollBy({ behavior: 'smooth' }).
	 */

	/* Barre de défilement masquée (le pilotage se fait aux boutons). */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.partner-track::-webkit-scrollbar {
	display: none;
}


/* ===== Élément ===== */

.partner-item {
	box-sizing: border-box;

	/* 2 logos visibles par défaut, cf. media queries plus bas. */
	flex: 0 0 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	padding-left: 1.25rem;
	padding-right: 1.25rem;

	scroll-snap-align: start;
}

.partner-item img {
	width: auto;
	height: 3rem;
	max-width: 100%;
	max-width: min(100%, 180px);
	object-fit: contain;
}


/* ===== Paliers responsives ===== */

/* Tailwind sm — 3 logos visibles */
@media (min-width: 640px) {

	.partner-item {
		flex: 0 0 33.3333%;
	}
}

/* Tailwind md — hauteur de logo augmentée */
@media (min-width: 768px) {

	.partner-item img {
		height: 4rem;
	}
}

/* Tailwind lg — 4 logos visibles */
@media (min-width: 1024px) {

	.partner-item {
		flex: 0 0 25%;

		padding-left: 2rem;
		padding-right: 2rem;
	}
}


/* ===== Mouvement réduit ===== */

/*
 * L'autoplay est neutralisé côté JS (matchMedia sur cette même
 * requête), qui bascule aussi les boutons en défilement instantané.
 * On se contente ici de neutraliser tout lissage résiduel hérité.
 */
@media (prefers-reduced-motion: reduce) {

	.partner-track {
		scroll-behavior: auto;
	}
}