/* BB – Elementor Centered Carousel */

/*
 * Classes posées par le JS :
 * - .bb-centered-swiper  sur le conteneur Swiper du widget ;
 * - .bb-is-centered      sur la slide centrée (et ses clones en mode boucle) ;
 * - .bb-before-centered / .bb-after-centered sur les slides situées avant / après.
 *
 * Variables (réglées dans l'onglet Contenu > Slider centré) :
 * --bb-active-scale, --bb-inactive-scale, --bb-inactive-opacity, --bb-origin-y (0 haut, .5 centre, 1 bas).
 */

.bb-centered-highlight-yes .bb-centered-swiper {
	/* Espace réservé pour que la slide agrandie ne soit pas rognée par l'overflow de Swiper. */
	--bb-grow: max(0px, calc(var(--bb-slide-height, 0px) * (var(--bb-active-scale, 1) - 1)));
	padding-block-start: calc(var(--bb-grow) * var(--bb-origin-y, 0.5));
	padding-block-end: calc(var(--bb-grow) * (1 - var(--bb-origin-y, 0.5)));
}

.bb-centered-highlight-yes .bb-centered-swiper > .swiper-wrapper > .swiper-slide {
	/* Décalage des voisines (en % de leur propre largeur) pour garder un espacement visuel constant
	   entre la slide centrée et ses voisines malgré les différences d'échelle. */
	--bb-gap-shift: calc((var(--bb-active-scale, 1) + var(--bb-inactive-scale, 0.9)) / 2 - 1);
	opacity: var(--bb-inactive-opacity, 0.5);
	scale: var(--bb-inactive-scale, 0.9);
	transform-origin: 50% calc(var(--bb-origin-y, 0.5) * 100%);
	transition:
		opacity var(--bb-speed, 300ms) ease,
		scale var(--bb-speed, 300ms) ease,
		translate var(--bb-speed, 300ms) ease;
}

.bb-centered-highlight-yes .bb-centered-swiper > .swiper-wrapper > .bb-is-centered {
	opacity: 1;
	scale: var(--bb-active-scale, 1);
}

.bb-centered-highlight-yes.bb-centered-gap-yes .bb-centered-swiper > .swiper-wrapper > .bb-before-centered {
	translate: calc(var(--bb-gap-shift) * -100%) 0;
}

.bb-centered-highlight-yes.bb-centered-gap-yes .bb-centered-swiper > .swiper-wrapper > .bb-after-centered {
	translate: calc(var(--bb-gap-shift) * 100%) 0;
}

/* Saut de boucle : changement d'état instantané (voir updateClassesWithoutTransition). */
.bb-centered-swiper.bb-no-transition > .swiper-wrapper > .swiper-slide {
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.bb-centered-highlight-yes .bb-centered-swiper > .swiper-wrapper > .swiper-slide {
		transition: none;
	}
}