/* ==========================================================
GALERIE PRODUIT
Slider actif jusqu’à 768px inclus
========================================================== */

@media all and (max-width: 768px) {

	/* Flèches masquées, navigation au toucher */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__arrows {
		display: none !important;
	}


	/* Pagination placée sous les images */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination {
		position: static !important;

		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;

		display: flex !important;
		align-items: center;
		gap: 4px;

		width: 100%;
		margin: -12px 0 24px;
		padding: 0 8px;

		list-style: none;

		transform: none !important;
	}


	/* Chaque segment prend la même largeur */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination > li {
		display: flex;
		flex: 1 1 0;

		margin: 0;
		padding: 0;

		line-height: 0;
	}


	/* Segment inactif */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination
	.splide__pagination__page {
		display: block;

		width: 100% !important;
		height: 3px;
		margin: 0;
		padding: 0;

		background-color: rgba(28, 28, 28, 0.18);
		border: 0;
		border-radius: 0;

		opacity: 1;
		transform: none !important;

		transition: background-color 180ms ease;
	}


	/* Segment correspondant à l’image active */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination
	.splide__pagination__page.is-active {
		background-color: var(--couleur-secondaire);

		opacity: 1;
		transform: none !important;
	}


	/* Navigation clavier */

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination
	.splide__pagination__page:focus-visible {
		outline: 2px solid var(--couleur-secondaire);
		outline-offset: 3px;
	}
}


/* ==========================================================
GALERIE PRODUIT
Grille à partir de 769px
========================================================== */

@media all and (min-width: 769px) {

	.cs3-single-product-gallery
	.cs3-single-product-gallery__pagination,
	.cs3-single-product-gallery
	.cs3-single-product-gallery__arrows {
		display: none !important;
	}
}