/* =========================================================================
   ICP — Carrousels de produits ([icp_products])
   Réutilise la carte .icp-card (07-catalog-filter.css). Module autonome.
   ========================================================================= */

.icp-products {
	position: relative;
	font-family: var(--font-body);
	color: var(--icp-text);
}
.icp-products, .icp-products *, .icp-products *::before, .icp-products *::after { box-sizing: border-box; }

/* Titre optionnel (en général fourni par le widget Elementor, donc title="") */
.icp-products__title {
	font: 700 26px/1.2 var(--font-body);
	color: var(--icp-text);
	text-align: center;
	margin: 0 0 var(--space-lg);
}

.icp-products__viewport { position: relative; }

/* ---------- Piste défilante ---------- */
.icp-products__track {
	display: flex;
	gap: var(--space-lg);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 6px 4px; /* respire pour ne pas rogner l'ombre du hover carte */
	-ms-overflow-style: none;        /* masque la scrollbar (Edge/IE) */
	scrollbar-width: none;           /* Firefox */
}
.icp-products__track::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.icp-products__slide {
	flex: 0 0 auto;
	width: calc((100% - 4 * var(--space-lg)) / 5); /* 5 cartes par vue (desktop) */
	min-width: 200px;
	scroll-snap-align: start;
}

/* Variante grille simple (carousel="0") : retour à la ligne, pas de défilement */
.icp-products--grid .icp-products__track {
	flex-wrap: wrap;
	overflow: visible;
	scroll-snap-type: none;
}

/* ---------- Flèches de navigation (overlay) ---------- */
.icp-products__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: var(--icp-blue);
	background: #fff;
	border: 1px solid var(--icp-border);
	border-radius: 999px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(20, 63, 107, .12);
	transition: background .18s, color .18s, border-color .18s;
	z-index: 3;
}
.icp-products__nav:hover { background: var(--icp-blue); color: #fff; border-color: var(--icp-blue); }
.icp-products__nav[disabled] { opacity: .3; cursor: default; pointer-events: none; }
.icp-products__nav--prev { left: -10px; }
.icp-products__nav--next { right: -10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.icp-products__slide { width: calc((100% - 2 * var(--space-lg)) / 3); } /* 3 par vue */
}
@media (max-width: 768px) {
	.icp-products__track { gap: var(--space-md); }
	.icp-products__slide { width: calc((100% - var(--space-md)) / 2); min-width: 0; } /* 2 par vue */
	.icp-products__nav { display: none; } /* swipe tactile sur mobile */
}