/*
 * PRIMITIVE PARTAGEE « mx-slider » : mecanique CSS commune du carousel (consommee par le bloc slider
 * d'images ET le bloc logos). Voir assets/js/mx-slider.js. Ne contient QUE la mecanique : le layout
 * (bleed vs clip au contenu), le fond, les cartes et le style des boutons restent propres a chaque bloc.
 *
 * Chaque bloc pose `data-mx-slider` sur sa section et utilise, a l'interieur :
 *   .mx-slider__viewport > .mx-slider__track (+ .mx-slider__nav-prev / .mx-slider__nav-next optionnels).
 */

/* Viewport : sans JS, rangee defilable (swipe / trackpad), scrollbar masquee. */
.mx-slider__viewport {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
}

.mx-slider__viewport::-webkit-scrollbar {
	display: none; /* WebKit */
}

/* Avec JS : mode transform (boucle infinie + defilement lisse), plus de scroll natif. */
[data-mx-slider].is-enhanced .mx-slider__viewport {
	overflow: hidden;
	cursor: grab;
	touch-action: pan-y; /* drag horizontal gere en JS ; scroll vertical de page natif */
}

[data-mx-slider].is-enhanced .mx-slider__viewport.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/* Piste : flex, sans puce. Le gap est defini par chaque bloc (le JS lit le gap calcule). */
.mx-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

[data-mx-slider].is-enhanced .mx-slider__track {
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease); /* defilement lisse (prod) */
	will-change: transform;
}

/* Pas d'animation pendant le drag. */
[data-mx-slider].is-enhanced .mx-slider__viewport.is-dragging .mx-slider__track {
	transition: none;
}

/* Fleches = debordement : masquees tant que tout tient (pas de .has-overflow), visibles des qu'au moins
   un element est cache. (Sans JS : ni .has-overflow ni .is-enhanced -> masquees, defilement au doigt.) */
[data-mx-slider]:not(.has-overflow) .mx-slider__nav,
[data-mx-slider]:not(.has-overflow) .mx-slider__nav-prev,
[data-mx-slider]:not(.has-overflow) .mx-slider__nav-next {
	display: none;
}

/* Style commun des fleches : carre sombre + chevron simple (Type=single.svg). Le POSITIONNEMENT
   (groupees en haut a droite, ou de part et d'autre de la rangee) reste propre a chaque bloc ; un bloc
   sur fond sombre peut surcharger le fond/contour pour rester visible. */
.mx-slider__nav-prev,
.mx-slider__nav-next {
	flex: 0 0 auto;
	width: 48px; /* cote Figma */
	height: 48px; /* cote Figma */
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: var(--mx-radius); /* 8 (Figma ~6.857) */
	background-color: var(--wp--preset--color--grey-dark);
	cursor: pointer;
	transition: background-color var(--mx-transition), border-color var(--mx-transition);
}

.mx-slider__nav-prev::before,
.mx-slider__nav-next::before {
	content: "";
	width: 24px;
	height: 24px;
	background-color: var(--wp--preset--color--white);
	-webkit-mask: url("../icons/Type=single.svg") center / contain no-repeat;
	mask: url("../icons/Type=single.svg") center / contain no-repeat;
}

/* Le chevron « simple » pointe vers le bas : on le tourne pour gauche / droite. */
.mx-slider__nav-prev::before {
	transform: rotate(90deg);
}

.mx-slider__nav-next::before {
	transform: rotate(-90deg);
}

.mx-slider__nav-prev:hover,
.mx-slider__nav-next:hover {
	background-color: var(--wp--preset--color--orange-dark); /* survol on-brand [a confirmer] */
}

.mx-slider__nav-prev:focus-visible,
.mx-slider__nav-next:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 2px;
}

/* Fleche desactivee : uniquement en mode FINI (data-mx-slider-loop="false"), aux extremites de la frise.
   Attenuee et inerte (le mode boucle ne desactive jamais ses fleches). */
.mx-slider__nav-prev:disabled,
.mx-slider__nav-next:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none; /* pas de survol / clic quand desactivee */
}