/*
 * Full Page Product Cat
 * Reprise du colonage et des etats du mega menu materielelectrique.com,
 * cale sur les ruptures Blocksy Premium :
 *   mobile   : < 690px        -> drilldown
 *   tablette : 690 a 999.98px -> 2 colonnes
 *   desktop  : >= 1000px      -> 3 colonnes
 *   large    : >= 1200px      -> 4 colonnes
 */

.fppc-wrap {
	--fppc-accent: #ee720f;            /* orange actif/survol (site source) */
	--fppc-accent-bg: #fdeadb;          /* fond de l'onglet actif */
	--fppc-lvl2: var(--theme-palette-color-1, #0d3c61);
	--fppc-text: var(--theme-text-color, #333);
	--fppc-muted: #ced4da;              /* chevron au repos */
	width: 100%;
}

/* ---------- Colonne gauche : categories niveau 1 ---------- */

.fppc-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.fppc-nav-item {
	margin: 0;
}

.fppc-cat {
	display: flex;
	align-items: center;
	font-weight: 600;
	line-height: 1.2;
	padding: .375rem .5rem;
	margin-bottom: .75rem;
	color: var(--fppc-text);
	text-decoration: none;
	border-radius: 4px;
}

.fppc-cat-img {
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
	object-fit: contain;
	margin-right: 1rem;
}

.fppc-cat-label {
	flex: 1 1 auto;
}

/* Chevron en CSS pur, colore via border, oriente vers la droite */
.fppc-chevron {
	flex: 0 0 auto;
	width: .55em;
	height: .55em;
	margin-left: .5rem;
	border-right: 2px solid var(--fppc-muted);
	border-top: 2px solid var(--fppc-muted);
	transform: rotate(45deg);
}

.fppc-cat:hover,
.fppc-cat.is-active {
	color: var(--fppc-accent);
}

.fppc-cat.is-active {
	background-color: var(--fppc-accent-bg);
}

.fppc-cat:hover .fppc-chevron,
.fppc-cat.is-active .fppc-chevron {
	border-color: var(--fppc-accent);
}

/* ---------- Panneaux : sous-categories lvl2 / lvl3 ---------- */

.fppc-pane {
	display: none;
}

.fppc-prodlist {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 2rem;
}

.fppc-prodlist > li {
	display: inline-block;
	width: 100%;
	margin-bottom: 1.5rem;
	break-inside: avoid-column;
}

.fppc-lvl2 > a {
	display: block;
	color: var(--fppc-lvl2);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.2rem;
	margin-bottom: .5rem;
	text-decoration: none;
}

.fppc-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fppc-lvl3 > a {
	display: block;
	font-size: .95rem;
	line-height: 1.7rem;
	color: var(--fppc-text);
	text-decoration: none;
}

.fppc-lvl2 > a:hover,
.fppc-lvl3 > a:hover {
	color: var(--fppc-accent);
}

.fppc-empty {
	margin: 0;
	color: var(--fppc-text);
}

/* ---------- Bouton retour (drilldown mobile uniquement) ---------- */

.fppc-back {
	display: none;
	align-items: center;
	gap: .5rem;
	border: 0;
	border-radius: 4px;
	background-color: #f1f3f5;
	color: var(--fppc-text);
	font: inherit;
	font-size: .9rem;
	padding: .375rem .75rem;
	margin-bottom: 1rem;
	cursor: pointer;
}

.fppc-back::before {
	content: "";
	width: .55em;
	height: .55em;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}

/* ---------- Mobile Blocksy : < 690px, drilldown ---------- */

@media (max-width: 689.98px) {
	.fppc-wrap {
		overflow-x: hidden;
	}

	.fppc-wrap.is-drilled .fppc-nav {
		display: none;
	}

	/* Le panneau glisse depuis la droite a l'ouverture du drilldown,
	   la liste revient depuis la gauche au retour, comme le site modele */
	.fppc-wrap.is-drilled .fppc-pane.is-active {
		display: block;
		animation: fppc-slide-in-right .25s ease-out;
	}

	.fppc-wrap:not(.is-drilled) .fppc-nav {
		animation: fppc-slide-in-left .25s ease-out;
	}

	.fppc-back {
		display: inline-flex;
	}

	.fppc-prodlist {
		column-count: 1;
	}
}

@keyframes fppc-slide-in-right {
	from {
		transform: translateX(100%);
		opacity: .4;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fppc-slide-in-left {
	from {
		transform: translateX(-100%);
		opacity: .4;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Pas d'animation pour les utilisateurs ayant reduit les mouvements */
@media (prefers-reduced-motion: reduce) {
	.fppc-wrap.is-drilled .fppc-pane.is-active,
	.fppc-wrap:not(.is-drilled) .fppc-nav {
		animation: none;
	}
}

/* ---------- Tablette Blocksy : 690 a 999.98px, 2 colonnes ---------- */

@media (min-width: 690px) {
	.fppc-wrap {
		display: flex;
		gap: 1.5rem;
	}

	.fppc-nav {
		flex: 0 0 300px;
	}

	.fppc-panes {
		flex: 1 1 auto;
		min-width: 0;
	}

	.fppc-pane.is-active {
		display: block;
	}

	.fppc-prodlist {
		column-count: 2;
	}
}

/* ---------- Desktop Blocksy : >= 1000px, 3 colonnes ---------- */

@media (min-width: 1000px) {
	.fppc-prodlist {
		column-count: 3;
	}
}

/* ---------- Large : >= 1200px, 4 colonnes (rupture du site source) ---------- */

@media (min-width: 1200px) {
	.fppc-prodlist {
		column-count: 4;
	}
}