/* ==========================================================================
   WC Category Tree Navigator — wctn.css
   ========================================================================== */
/* Écrase le reset Elementor sur les boutons — spécificité renforcée */
.wctn-tree .wctn-toggle.wctn-toggle {   /* classe doublée = spécificité x2 */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
}

.wctn-tree .wctn-toggle.wctn-toggle:focus,
.wctn-tree .wctn-toggle.wctn-toggle:focus-within,
.wctn-tree .wctn-toggle.wctn-toggle:active {
    background: transparent;
    outline: none;
    box-shadow: none;
    border: none;
}

.wctn-tree .wctn-toggle.wctn-toggle:hover,
.wctn-tree .wctn-toggle.wctn-toggle:focus-visible {
    background: var(--wctn-color-hover-bg);
}
/* --- Conteneur principal -------------------------------------------------- */
.wctn-tree {
	--wctn-indent: 1rem;
	--wctn-gap: 0.25rem;
	--wctn-radius: 4px;
	--wctn-color-text: #1a1a1a;
	--wctn-color-muted: #666;
	--wctn-color-active: #2271b1;   /* bleu WP */
	--wctn-color-hover-bg: rgba(0, 0, 0, 0.05);
	--wctn-color-current-bg: rgba(34, 113, 177, 0.08);
	--wctn-anim-duration: 260ms;
	--wctn-anim-easing: cubic-bezier(0.4, 0, 0.2, 1);

	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wctn-color-text);
}

/* --- Listes --------------------------------------------------------------- */
.wctn-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wctn-list--sub {
	padding-left: var(--wctn-indent);
	border-left: 2px solid rgba(0,0,0,0.08);
	margin-left: 0.5rem;
}

/* --- Item ----------------------------------------------------------------- */
.wctn-item {
	margin: var(--wctn-gap) 0;
}

.wctn-tree :focus        { outline: none; background-color: transparent !important;}   

/* --- Bouton toggle (la catégorie elle-même) -------------------------------- */
.wctn-toggle {
	-webkit-appearance: none;
	appearance: none;           /* ← supprime le rendu natif bouton du navigateur */
	text-wrap: wrap !important;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	background: none;
	border: none;               /* ← était déjà là mais peut être surchargé */
	outline: none;              /* ← reset dès le chargement, pas seulement au focus */
	box-shadow: none;           /* ← certains thèmes ajoutent un box-shadow sur button */
	padding: 0.35rem 0.5rem;
	border-radius: var(--wctn-radius);
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--wctn-color-text);
	text-align: left;
	transition: background var(--wctn-anim-duration) var(--wctn-anim-easing);
}

.wctn-toggle:hover,
.wctn-toggle:focus-visible {
	background: var(--wctn-color-hover-bg);
	outline: none;
}

.wctn-item--active > .wctn-toggle {
	color: var(--wctn-color-active);
}

/* --- Icône flèche --------------------------------------------------------- */
.wctn-toggle__icon {
	flex-shrink: 0;
	color:white;
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);   /* pointe vers la droite = fermé */
	transition: transform var(--wctn-anim-duration) var(--wctn-anim-easing);
	position: relative;
	top: -1px;
}

.wctn-toggle--open .wctn-toggle__icon {
	transform: rotate(45deg);    /* pointe vers le bas = ouvert */
}

/* --- Compteur ------------------------------------------------------------- */
.wctn-toggle__count {
	font-size: 0.8em;
	font-weight: 400;
	/* color: var(--wctn-color-muted); */
	color:white;
	margin-left: auto;
}

/* --- Panneau (animation slide) -------------------------------------------- */
.wctn-panel {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition:
		max-height var(--wctn-anim-duration) var(--wctn-anim-easing),
		opacity    var(--wctn-anim-duration) var(--wctn-anim-easing);
	/* max-height animée en JS via data-height */
}

.wctn-panel--open {
	max-height: var(--wctn-panel-height, 9999px);
	opacity: 1;
}

/* Rendu initial sans JS : afficher si open */
.wctn-panel--open {
	/* déjà géré par max-height ci-dessus */
}

/* --- Liste de produits ---------------------------------------------------- */
.wctn-products {
	list-style: none;
	margin: 0.25rem 0 0.25rem var(--wctn-indent);
	padding: 0;
}

.wctn-product {
	margin: 0.15rem 0;
}

/* --- Lien produit --------------------------------------------------------- */
.wctn-product__link {
	display: block;
	padding: 0.25rem 0.5rem;
	border-radius: var(--wctn-radius);
	color: var(--wctn-color-text);
	text-decoration: none;
	transition: background var(--wctn-anim-duration) var(--wctn-anim-easing),
	            color    var(--wctn-anim-duration) var(--wctn-anim-easing);
}

.wctn-product__link:hover,
.wctn-product__link:focus-visible {
	background: var(--wctn-color-hover-bg);
	/* color: var(--wctn-color-active); */
	outline: none;
	text-decoration: none;
}

/* --- Produit courant (page produit) --------------------------------------- */
.wctn-product--current .wctn-product__link {
	background: var(--wctn-color-current-bg);
	color: var(--wctn-color-active);
	font-weight: 600;
}

/* --- Accessibilité : focus visible global --------------------------------- */
.wctn-tree :focus-visible {
	outline: 2px solid var(--wctn-color-active);
	outline-offset: 2px;
}

.wctn-toggle__label {
	color:white;
}

/* ==========================================================================
   Grille de produits [wc_category_products]
   ========================================================================== */

.wctn-products-grid {
	--wctn-pg-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--wctn-pg-cols), 1fr);
	gap: 1.5rem;
	margin: 1.5rem 0;
}

.wctn-pg-item {
	display: flex;
	flex-direction: column;
	border: none;
	border-radius: var(--wctn-radius, 4px);
	overflow: hidden;
	background: transparent;
}

.wctn-pg-item__thumb-link {
	display: block;
	text-decoration: none;
}

.wctn-pg-item__thumb {
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #f5f5f5;
}

.wctn-pg-item__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.wctn-pg-item:hover .wctn-pg-item__thumb img {
	transform: scale(1.04);
}

.wctn-pg-item__no-img {
	width: 100%;
	height: 100%;
	background: #ececec;
}

.wctn-pg-item__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	padding: 0.85rem 0.5rem;
	gap: 0.75rem;
	text-align: center;
}

.wctn-pg-item__title {
	font-size: 1.6rem;
	font-weight: 400;
	font-family: "PT Serif", sans-serif;
	margin: 0;
	flex: 1;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.wctn-pg-item__title a {
	color: inherit;
	text-decoration: none;
}

.wctn-pg-item__title a:hover {
	text-decoration: underline;
}

.wctn-pg-item__btn {
	display: inline-block;
	padding: 0.45rem 1.4rem;
	background: #D18A23;
	font-family: 'Roboto', sans-serif !important;
	color: #fff !important;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;
	transition: opacity 200ms;
}

.wctn-pg-item__btn:hover {
	opacity: 0.85;
	color: #fff;
	text-decoration: none;
}

/* Pagination */
.wctn-pg-nav {
	margin: 2rem 0 1rem;
}

.wctn-pg-nav .page-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.wctn-pg-nav .page-numbers li {
	margin: 0;
}

.wctn-pg-nav .page-numbers a,
.wctn-pg-nav .page-numbers span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--wctn-radius, 4px);
	text-decoration: none;
	font-size: 0.875rem;
	color: inherit;
	transition: background 150ms, color 150ms, border-color 150ms;
}

.wctn-pg-nav .page-numbers a:hover {
	background: #d18a23;
	color: #fff;
	border-color: #d18a23;
	text-decoration: none;
}

.wctn-pg-nav .page-numbers .current {
	background: #d18a23;
	color: #fff;
	border-color: #d18a23;
	font-weight: 700;
}


.wctn-pg-nav .page-numbers .dots {
	border-color: transparent;
}

/* Responsive */
@media (max-width: 768px) {
	.wctn-products-grid {
		--wctn-pg-cols: 2;
	}
}

@media (max-width: 480px) {
	.wctn-products-grid {
		--wctn-pg-cols: 1;
	}
}