/* Accueil, téléphone (≤ 767 px) : carrousel des catégories sans flèches, défilement au doigt, catégorie suivante coupée
   à moitié au bord droit sur chaque rangée (templates/home-categories-carousel.php, inc/accueil-mobile.php), v1 du 21/10/2026.
   La version téléphone n'est plus un diaporama Slick (classe cat-carousel-slider retirée dans le gabarit) : les pages de
   10 catégories (2 rangées de 5) sont posées côte à côte dans une bande qui défile ; l'ordre reste le même.
   Colonnes : (largeur de l'écran − marge de gauche 4 px − 4 écarts de 6 px) ÷ 4,5 → 4 catégories et demie visibles.
   v2 du 21/10/2026 : marge de départ de la bande 10 px → 4 px (la marge de fin reste à 10 px).
   Tablette et ordinateur : aucune règle (version Slick avec flèches, inchangée). */

@media (max-width: 767px) {

	.anaaz-categories-carousel .cat-carousel-mobile.cat-carousel-defile {
		--anaaz-cat-col: calc((100vw - 4px - 4 * 6px) / 4.5);
		display: flex !important;
		gap: 6px;
		margin: 0 -6px; /* bord à bord : la marge du conteneur passe dans la bande */
		padding: 0 0 4px 4px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		scroll-padding-left: 4px;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.anaaz-categories-carousel .cat-carousel-mobile.cat-carousel-defile::-webkit-scrollbar {
		display: none;
	}

	/* Fin de bande : la dernière catégorie entière, avec une marge de 10 px, sans vide de plus */
	.anaaz-categories-carousel .cat-carousel-mobile.cat-carousel-defile::after {
		content: '';
		flex: 0 0 4px; /* + écart de 6 px = 10 px */
	}

	.anaaz-categories-carousel .cat-carousel-defile .cat-carousel-page {
		flex: 0 0 auto;
		grid-template-columns: repeat(5, var(--anaaz-cat-col)) !important;
		gap: 10px 6px !important;
	}

	.anaaz-categories-carousel .cat-carousel-defile .cat-carousel-item {
		min-width: 0;
		scroll-snap-align: start;
	}
}