/*
 * Bloc « logos » (Ils nous font confiance) : SPECIFIQUE a ce bloc.
 * Carousel via la primitive partagee (mx-slider.css + mx-slider.js). Carte logo via .mx-logo-card (base.css).
 *
 * Fond de section pleine largeur, variante editable gris / blanc (les cartes restent blanches dans les deux).
 * Le slider est CLIPPE aux DEUX bords du CONTENU contraint (pas de debordement / peek vers le bord du
 * navigateur, contrairement au bloc slider d'images). Fleches sombres de part et d'autre de la rangee.
 */

.mx-logos {
	box-sizing: border-box;
	/* Mode fini (data-mx-slider-loop="false") : les logos ne bouclent plus. Reserve fleches = 0 pour que
	   les fleches n'apparaissent QUE quand la rangee deborde reellement la largeur de contenu (decision JN :
	   avec peu de logos qui tiennent, rangee complete sans fleches ; les fleches surgissent a la reduction).
	   Valeur px simple (lue par le JS, qui ne resout pas les calc()). */
	--mx-slider-nav-reserve: 0px;
	padding-block: var(--wp--preset--spacing--55); /* 80 (cote Figma) */
	color: var(--wp--preset--color--grey-dark);
}

/* Filet de separation, cote editable (champ « Ligne de séparation »). */
.mx-logos.is-sep-bas {
	border-block-end: 1px solid var(--wp--preset--color--grey-light);
}

.mx-logos.is-sep-haut {
	border-block-start: 1px solid var(--wp--preset--color--grey-light);
}

/* Variante de fond (le fond de SECTION uniquement ; les cartes restent blanches). */
.mx-logos.is-fond-blanc {
	background-color: var(--wp--preset--color--white);
}

.mx-logos.is-fond-gris {
	background-color: var(--wp--preset--color--grey-ultralight);
}

/* Contenu contraint et centre : le slider est borne a cette largeur des deux cotes. */
.mx-logos__inner {
	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30); /* 16 */
}

.mx-logos__title {
	margin: 0;
	color: var(--wp--preset--color--grey-dark);
}

/* Rangee : fleche gauche + slider (clippe au contenu) + fleche droite. */
.mx-logos__row {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--45); /* 32 */
}

.mx-logos__row .mx-slider__viewport {
	flex: 1 1 auto;
	min-width: 0; /* le viewport prend l'espace entre les fleches et clippe aux deux bords du contenu */
}

.mx-logos__row .mx-slider__track {
	gap: var(--wp--preset--spacing--30); /* 16 */
}

/* Fleches sombres carrees (fond clair) : style commun defini dans mx-slider.css
   (.mx-slider__nav-prev / .mx-slider__nav-next). Ici on ne fait que les placer de part et d'autre de
   la rangee (via .mx-logos__row en flex). Le fond grey-dark ressort sur le fond clair de la section. */

/* ---- Responsive : cartes lisibles, slider au doigt, pas de scroll horizontal de page ---- */
@media (max-width: 900px) {

	.mx-logos__inner {
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}

	.mx-logos__row {
		gap: var(--wp--preset--spacing--30); /* 16 */
	}

	.mx-logos .mx-logo-card {
		width: 180px;
	}
}

/* ---- Defilement automatique (marquee), TOUS ecrans, instance opt-in uniquement ----
   Active par bloc-logos.js (.is-marquee + contenu double) sur les sections data-mx-logos-marquee. Le viewport
   ne defile plus au doigt (le marquee prend le relais) ; la piste translate en continu de 0 a -50 %
   (moitie = un jeu de logos, la copie assure la boucle sans couture). L'animation CSS prime sur le transform
   inline du slider. Pause au survol. Les autres blocs de logos (slider fini) ne sont pas touches. */
.mx-logos.is-marquee .mx-slider__viewport {
	overflow: hidden;
}

.mx-logos.is-marquee .mx-slider__track {
	width: max-content;
	animation: mx-logos-defile 40s linear infinite;
	transform: translateX(0);
	transition: none; /* neutralise la transition du slider (on anime en continu) */
}

/* Pause au survol (pointeur fin uniquement : rien a « survoler » au toucher). */
@media (hover: hover) {
	.mx-logos.is-marquee:hover .mx-slider__track {
		animation-play-state: paused;
	}
}

@keyframes mx-logos-defile {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Mouvement reduit : pas de marquee (le JS ne clone pas non plus). Ceinture + bretelles. */
@media (prefers-reduced-motion: reduce) {
	.mx-logos.is-marquee .mx-slider__track {
		animation: none;
		transform: translateX(0);
	}
}