/**
 * Maison Satab — bandes d'images qui défilent, en mobile.
 *
 * Sous 768 px, deux blocs de la page cessent de s'empiler et deviennent des
 * bandes horizontales (voir assets/js/sliders.js, qui pose les classes) :
 *
 * - la bande de logos du pied de page défile toute seule, sans repère ;
 * - la galerie Instagram de l'accueil devient un slider surmonté de la barre
 *   de défilement maison — les classes .mst-scrollbar / .mst-scrollbar__curseur
 *   sont celles du carrousel Inspiration, donc le dessin est identique sans
 *   une ligne de plus. Ce fichier ne pose que la ligne qui les accueille.
 *
 * Les largeurs d'élément passent par flex-basis et non par width : Elementor
 * pose ses propres largeurs en !important, et flex-basis les devance sans
 * qu'on ait à surenchérir.
 *
 * @package Maison_Satab
 */

/* ------------------------------------------------------------------ */
/*  Réglages — tout se change ici                                      */
/*  (bascule : 767 px, à reporter dans le @media plus bas)             */
/* ------------------------------------------------------------------ */

:root {
	--mst-sl-logo: 96px;            /* largeur d'un logo dans le défilé */
	--mst-sl-logo-ecart: 44px;      /* écart entre deux logos */

	--mst-sl-vignette: 62%;         /* largeur d'une vignette du slider */
	--mst-sl-vignette-ecart: 5px;   /* écart entre vignettes — celui de la grille Elementor */

	--mst-sl-barre-marge: 6px;      /* espace entre la bande et sa barre */
}


@media ( max-width: 767px ) {

	/* -------------------------------------------------------------- */
	/*  La bande                                                       */
	/* -------------------------------------------------------------- */

	/* Défilement natif au doigt, ascenseur masqué ; le glisser-déposer à la
	   souris est ajouté par le JS. */
	.mst-piste {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;

		overflow-x: auto;
		overscroll-behavior-x: contain;

		scrollbar-width: none;
		-ms-overflow-style: none;

		cursor: grab;
	}

	.mst-piste::-webkit-scrollbar {
		display: none;
	}

	.mst-piste.est-glisse {
		cursor: grabbing;
		user-select: none;
	}


	/* -------------------------------------------------------------- */
	/*  Défilé continu — les logos du pied de page                     */
	/* -------------------------------------------------------------- */

	.mst-piste--defile {
		gap: var( --mst-sl-logo-ecart ) !important;
	}

	.mst-piste--defile > .elementor-element {
		flex: 0 0 var( --mst-sl-logo );
	}

	.mst-piste--defile img {
		width: 100%;
		height: auto;
	}


	/* -------------------------------------------------------------- */
	/*  Slider à barre — la galerie Instagram                          */
	/* -------------------------------------------------------------- */

	.mst-piste--slider {
		gap: var( --mst-sl-vignette-ecart ) !important;
		scroll-snap-type: x proximity;
	}

	.mst-piste--slider > .elementor-element {
		flex: 0 0 var( --mst-sl-vignette );
		scroll-snap-align: start;
	}

	/* La ligne qui accueille le rail : même hauteur que sous le carrousel
	   Inspiration, et rail centré comme lui en mobile. */
	.mst-slider__barre {
		display: flex;
		align-items: center;
		justify-content: center;

		height: var( --mst-sb-h, 48px );
		margin-top: var( --mst-sl-barre-marge );
	}

	.mst-slider__barre--inactif {
		display: none;
	}

	/* Ici la bande défile librement : le curseur colle au doigt au lieu de
	   rattraper une position d'une vue à l'autre. */
	.mst-slider__barre .mst-scrollbar__curseur {
		transition: none;
	}
}