/**
 * Maison Satab — carrousels d'images : les puces deviennent une barre de
 * défilement, alignée à gauche, avec le bouton d'action sur la même ligne.
 *
 * Le JS (assets/js/carousel-scrollbar.js) ne fait que construire le rail et
 * écrire deux valeurs par frame : la largeur du curseur et sa position.
 * Tout le reste — couleurs, épaisseurs, hauteur de la ligne, alignement du
 * bouton — se règle ici.
 *
 * Aucune classe à ajouter dans Elementor : le JS marque lui-même le widget
 * (.mst-carousel-sb) et le conteneur du bouton qui le suit (.mst-carousel-cta).
 * Pour exclure un carrousel, lui donner la classe mst-sb-off (onglet Avancé).
 */

:root {

	/* ---- Réglages : tout se change ici, nulle part ailleurs ---- */

	--mst-sb-h: 80px;                          /* hauteur de la ligne barre + bouton, sous les images */
	--mst-sb-w: clamp( 200px, 22%, 340px );    /* longueur du rail */
	--mst-sb-ep: 2px;                          /* épaisseur du trait */
	--mst-sb-rail: rgb( 17 17 17 / .18 );      /* couleur du rail */
	--mst-sb-curseur: #111111;                 /* couleur du curseur */
	--mst-sb-curseur-min: 48px;                /* largeur minimale du curseur */
	--mst-sb-duree: .45s;                      /* glissement du curseur d'une vue à l'autre */
	--mst-sb-clic: 14px;                       /* marge de clic invisible au-dessus et sous le trait */
}


/* ------------------------------------------------------------------ */
/*  La ligne sous les images                                           */
/* ------------------------------------------------------------------ */

/* On réserve la hauteur de la ligne : les puces d'Elementor sont déjà
   positionnées en absolu dans cet espace, on ne fait que l'agrandir. */
.mst-carousel-sb .elementor-image-carousel-wrapper {
	padding-bottom: var( --mst-sb-h ) !important;   /* Elementor pose 30px avec une spécificité plus forte */
}

.mst-carousel-sb .elementor-image-carousel-wrapper > .swiper-pagination {
	position: absolute;
	top: auto !important;
	right: 0;
	bottom: 0 !important;   /* Elementor pose bottom: 5px */
	left: 0;
	height: var( --mst-sb-h );
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	/* le conteneur fait toute la largeur du carrousel : on ne laisse
	   cliquable que le rail, sinon il masquerait le bouton placé au-dessus */
	pointer-events: none;
}


/* ------------------------------------------------------------------ */
/*  Le rail et son curseur                                             */
/* ------------------------------------------------------------------ */

.mst-scrollbar {
	position: relative;
	flex: 0 0 auto;
	width: var( --mst-sb-w );
	height: var( --mst-sb-ep );
	background: var( --mst-sb-rail );
	cursor: pointer;
	pointer-events: auto;
	touch-action: none;   /* au doigt, le drag ne doit pas faire défiler la page */
}

/* Zone de clic plus généreuse que le trait, sans l'épaissir à l'œil. */
.mst-scrollbar::before {
	content: '';
	position: absolute;
	inset: calc( var( --mst-sb-clic ) * -1 ) 0;
}

.mst-scrollbar__curseur {
	position: absolute;
	top: 50%;
	left: 0;
	height: var( --mst-sb-ep );
	min-width: var( --mst-sb-curseur-min );
	background: var( --mst-sb-curseur );
	transform: translate3d( 0, -50%, 0 );
	will-change: transform, width;
	transition: transform var( --mst-sb-duree ) cubic-bezier( .22, .61, .36, 1 );
}

/* Pendant le glissement, le curseur colle au doigt : pas d'inertie. */
.mst-scrollbar--drag .mst-scrollbar__curseur {
	transition: none;
}

/* Les puces restent dans le DOM — elles servent encore de repère au clavier
   et aux lecteurs d'écran — mais ne sont plus visibles. */
.mst-carousel-sb .swiper-pagination-bullet {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset( 50% );
	pointer-events: auto;
}

/* Une puce prise au clavier est invisible : on montre le focus sur le rail. */
.mst-carousel-sb .swiper-pagination:has( .swiper-pagination-bullet:focus-visible ) .mst-scrollbar {
	outline: 2px solid var( --mst-sb-curseur );
	outline-offset: 8px;
}


/* ------------------------------------------------------------------ */
/*  Le bouton remonte sur la ligne de la barre                         */
/* ------------------------------------------------------------------ */

.mst-carousel-cta {
	margin-top: calc( var( --mst-sb-h ) * -1 );
	min-height: var( --mst-sb-h );
	position: relative;
	z-index: 2;
	/* ce conteneur recouvre le rail : seul le lien reste cliquable */
	pointer-events: none;
}

.mst-carousel-cta > .e-con-inner {
	height: var( --mst-sb-h ) !important;
	justify-content: center !important;   /* conteneur en colonne : centre le bouton en hauteur */
}

.mst-carousel-cta a,
.mst-carousel-cta button {
	pointer-events: auto;
}


/* ------------------------------------------------------------------ */
/*  Rien à faire défiler                                               */
/* ------------------------------------------------------------------ */

/* Moins d'images que de places visibles : un rail plein n'aurait aucun sens,
   on rend la ligne au bouton. */
.mst-carousel-sb--inactif .elementor-image-carousel-wrapper {
	padding-bottom: 0;
}

.mst-carousel-sb--inactif .mst-scrollbar {
	display: none;
}

.mst-carousel-sb--inactif + .mst-carousel-cta {
	margin-top: 0;
	min-height: 0;
}


/* ------------------------------------------------------------------ */
/*  Tablette et mobile                                                 */
/* ------------------------------------------------------------------ */

@media ( max-width: 1024px ) {

	:root {
		--mst-sb-h: 64px;
		--mst-sb-w: clamp( 160px, 30%, 280px );
	}
}

@media ( max-width: 767px ) {

	:root {
		--mst-sb-h: 48px;
		--mst-sb-w: clamp( 140px, 55%, 240px );
	}

	/* La ligne est trop étroite pour tenir la barre et le bouton : le bouton
	   repasse dessous et la barre se centre juste au-dessus de lui.
	   Supprimer ce bloc pour les garder côte à côte. */
	.mst-carousel-sb .elementor-image-carousel-wrapper > .swiper-pagination {
		justify-content: center;
	}

	.mst-carousel-cta {
		margin-top: 0;
		min-height: 0;
	}

	.mst-carousel-cta > .e-con-inner {
		height: auto;
	}
}