/* =========================================================================
   ICP — Bloc catalogue : filtre sticky + grille produits
   Dépend de 01-tokens.css. Module autonome/réversible.
   ========================================================================= */

.icp-catalog {
	--icp-cat-sticky-top: 112px; /* hauteur header flottant + marge */
	font-family: var(--font-body);
	color: var(--icp-text);
	max-width: 100%;
}
/* border-box partout dans le bloc : width:100% + padding ne déborde plus (cause du scroll horizontal mobile) */
.icp-catalog, .icp-catalog *, .icp-catalog *::before, .icp-catalog *::after { box-sizing: border-box; }

/* ---------- Barre de filtres sticky ---------- */
.icp-filterbar {
	position: sticky;
	top: var(--icp-cat-sticky-top);
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border: 1px solid var(--icp-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 8px 24px rgba(20, 63, 107, 0.07);
}

.icp-filterbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}
.icp-catalog [hidden] { display: none !important; }

.icp-filterbar__tools {
	gap: var(--space-md);
	padding-top: var(--space-sm);
	border-top: 1px solid var(--icp-border);
}

/* ---------- Chips (familles + sous-catégories) ---------- */
.icp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	font: 600 14px/1 var(--font-body);
	color: var(--icp-text);
	background: var(--icp-bg-light);
	border: 1px solid var(--icp-border);
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, transform .12s;
}
.icp-chip:hover { transform: translateY(-1px); border-color: var(--icp-blue); }

.icp-chip__count {
	font-size: 12px;
	font-weight: 700;
	padding: 1px 7px;
	border-radius: 999px;
	background: #fff;
	color: var(--icp-text-muted);
	border: 1px solid var(--icp-border);
}

.icp-chip--family.is-active {
	background: var(--icp-blue);
	color: #fff;
	border-color: var(--icp-blue);
}
.icp-chip--family.is-active .icp-chip__count { background: var(--icp-blue-dark); color: #fff; border-color: transparent; }

.icp-chip--sub.is-active {
	background: var(--icp-green-light);
	color: var(--icp-blue-dark);
	border-color: var(--icp-green);
}
.icp-chip--sub.is-active .icp-chip__count { background: var(--icp-green); color: #fff; border-color: transparent; }

.icp-filterbar__subs { gap: 6px; }

/* Chip « branche » (niveau intermédiaire drillable, ex. Plastique domestique) */
.icp-chip--branch {
	background: #fff;
	border-color: var(--icp-blue);
	color: var(--icp-blue-dark);
	font-weight: 600;
}
.icp-chip--branch:hover { background: var(--icp-blue); color: #fff; }
.icp-chip--branch:hover .icp-chip__count { background: var(--icp-blue-dark); color: #fff; border-color: transparent; }
.icp-chip__caret { font-weight: 800; opacity: .7; }

/* Fil d'Ariane (niveau courant) à côté du bouton retour */
.icp-subs__crumb {
	display: inline-flex;
	align-items: center;
	font: 700 15px/1 var(--font-body);
	color: var(--icp-blue-dark);
	padding: 0 10px 0 4px;
	margin-right: 4px;
	border-right: 1px solid var(--icp-border);
}

/* Chip « retour » au niveau supérieur */
.icp-chip--back {
	background: transparent;
	border-style: dashed;
	color: var(--icp-text-muted);
	font-weight: 700;
}
.icp-chip--back:hover { color: var(--icp-blue); border-color: var(--icp-blue); transform: none; }

/* ---------- Champs (recherche, marque, tri) ---------- */
.icp-field { display: flex; align-items: center; }
.icp-field--search { flex: 1 1 220px; min-width: 180px; }

.icp-search,
.icp-brand,
.icp-sort {
	width: 100%;
	padding: 10px 14px;
	font: 500 14px/1.2 var(--font-body);
	color: var(--icp-text);
	background: #fff;
	border: 1px solid var(--icp-border);
	border-radius: var(--radius);
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.icp-search:focus,
.icp-brand:focus,
.icp-sort:focus {
	border-color: var(--icp-blue);
	box-shadow: 0 0 0 3px rgba(26, 84, 144, .14);
}
.icp-brand, .icp-sort { cursor: pointer; min-width: 170px; }

/* ---------- Méta (compteur + reset) ---------- */
.icp-catalog__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin: var(--space-md) 2px var(--space-sm);
}
.icp-catalog__count { font-weight: 600; color: var(--icp-text-muted); }
.icp-catalog__reset {
	font: 600 13px/1 var(--font-body);
	color: var(--icp-orange);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: underline;
}

/* ---------- Grille produits ---------- */
.icp-catalog__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--space-lg);
	transition: opacity .2s;
	min-width: 0;
}
.icp-card { min-width: 0; }
.icp-catalog__grid[aria-busy="true"] { opacity: .45; pointer-events: none; }

.icp-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--icp-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.icp-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(20, 63, 107, .12);
	border-color: transparent;
}
.icp-card__link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }

.icp-card__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	background: var(--icp-bg-light);
}
.icp-card__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }

.icp-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: var(--space-md);
	flex: 1;
}
.icp-card__cat {
	font: 700 11px/1 var(--font-body);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--icp-orange);
}
.icp-card__title {
	font: 600 15px/1.35 var(--font-body);
	color: var(--icp-text);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Référence produit (SKU parent pour les variables, SKU pour les simples) */
.icp-card__sku {
	font: 500 11px/1.2 var(--font-body);
	letter-spacing: .02em;
	color: var(--icp-text-muted);
}
/* Actions carte : bouton WooCommerce « Ajouter à la commande » / « Choisir les options » */
.icp-card__actions { margin-top: auto; padding: 0 var(--space-md) var(--space-md); }
.icp-card__actions .button {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 14px;
	font: 600 13px/1.2 var(--font-body);
	color: #fff !important;
	background: var(--icp-green) !important;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition: background .18s, transform .12s;
}
.icp-card__actions .button:hover { background: var(--icp-green-dark, #4f9447) !important; transform: translateY(-1px); }
.icp-card__actions .button.loading { opacity: .7; }
/* produits à variantes : « Choisir les options » → fiche (bleu pour distinguer) */
.icp-card__actions .button.product_type_variable,
.icp-card__actions .button.product_type_grouped,
.icp-card__actions .button.product_type_external { background: var(--icp-blue) !important; }
.icp-card__actions .button.product_type_variable:hover { background: var(--icp-blue-dark) !important; }
.icp-card__actions .added_to_cart {
	display: block;
	text-align: center;
	margin-top: 6px;
	font: 600 12px/1 var(--font-body);
	color: var(--icp-blue);
	text-decoration: underline;
}

/* ---------- Footer (load more + vide) ---------- */
.icp-catalog__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); }
.icp-catalog__more {
	padding: 12px 28px;
	font: 700 14px/1 var(--font-body);
	color: #fff;
	background: var(--icp-blue);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .18s, transform .12s;
}
.icp-catalog__more:hover { background: var(--icp-blue-dark); transform: translateY(-1px); }
.icp-catalog__more.is-loading { opacity: .7; pointer-events: none; }
.icp-catalog__empty { font-weight: 600; color: var(--icp-text-muted); text-align: center; padding: var(--space-lg); }

/* ---------- Intégration gabarit archive The7 (36240) ----------
   La sidebar de filtres The7 a été retirée : la colonne contenu passe pleine largeur. */
.post-type-archive-product .elementor-element-c36a214,
.tax-product_cat .elementor-element-c36a214,
.tax-product_brand .elementor-element-c36a214 {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.icp-catalog { --icp-cat-sticky-top: 88px; }
}
@media (max-width: 768px) {
	.icp-filterbar { padding: var(--space-sm); }
	.icp-filterbar__tools { flex-direction: column; align-items: stretch; }
	/* en colonne, flex-basis devient une HAUTEUR : on neutralise pour éviter un champ géant */
	.icp-field, .icp-field--search, .icp-field--brand, .icp-field--sort { flex: 0 0 auto; width: 100%; }
	.icp-search, .icp-brand, .icp-sort { width: 100%; }
	.icp-catalog__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } /* mobile : 2 colonnes fixes */
	/* Mobile : les chips catégories reviennent à la ligne (wrap) au lieu de défiler */
	.icp-filterbar__families { flex-wrap: wrap; overflow-x: visible; }
	.icp-chip--family { flex: 0 1 auto; }
}