/* ============================================================
   NAV DRAWER
   ============================================================ */

.nav-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--tr-slow);
}

body.menu-open .nav-overlay {
	opacity: 1;
	pointer-events: all;
}

.nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10001;
	width: 20rem;
	max-width: 85vw;
	background-color: var(--c-brown-900);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--s-xl) var(--s-xl) var(--s-3xl);
	box-sizing: border-box;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: -6px 0 30px rgba(0, 0, 0, 0.5);
	overflow-y: auto;
}

body.menu-open .nav-drawer {
	transform: translateX(0);
}

.nav-drawer__close {
	align-self: flex-end;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 2.75rem;             /* 44px – cible tactile */
	height: 2.75rem;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-bottom: var(--s-xl);
	position: relative;

	& span {
		display: block;
		position: absolute;
		width: 1.5rem;
		height: 2px;
		background-color: var(--c-white);
		border-radius: 1px;

		&:nth-child(1) { transform: rotate(45deg); }
		&:nth-child(2) { transform: rotate(-45deg); }
	}

	&:hover span {
		background-color: var(--c-primary-light);
	}

	&:hover,
	&:focus,
	&:active,
	&:focus-visible {
		outline: none !important;
		box-shadow: none !important;
		background: none !important;
		-webkit-tap-highlight-color: transparent !important;
	}
}

.nav-drawer__logo {
	margin-bottom: var(--s-3xl);

	& img {
		height: 6.875rem;
		width: auto;
		display: block;
		filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
	}
}

.nav-drawer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--s-xs);

	& li a {
		display: block;
		color: var(--c-text-inverse);
		text-decoration: none;
		font-size: var(--fs-button);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-widest);
		text-transform: uppercase;
		padding: var(--s-md) 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		transition: color var(--tr-base), padding-left var(--tr-base);

		&:hover {
			color: var(--c-primary-light);
			padding-left: var(--s-sm);
		}
	}

	& li:last-child a {
		border-bottom: none;
	}
}

/* Items cochés « Masquer dans le drawer mobile » (Apparence > Menus) :
   retirés sous 1024px, là où le header-nav disparaît et où le drawer
   devient la seule navigation visible (cf. header.css). Sans effet quand
   un menu "drawer-mobile" dédié est assigné (voir ci-dessous). */
@media (max-width: 1024px) {
	.nav-drawer__list .wc-hide-mobile {
		display: none;
	}
}

/* Menu "drawer-mobile" dédié (Apparence > Menus) : remplace entièrement le
   menu "drawer" sous 1024px. Les deux listes sont rendues par header.php
   uniquement quand un menu "drawer-mobile" est assigné ; sinon .nav-drawer__list
   n'a pas ces modificateurs et reste affiché à toutes les tailles. */
.nav-drawer__list--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.nav-drawer__list--desktop {
		display: none;
	}

	.nav-drawer__list--mobile {
		display: flex;
	}
}

.nav-drawer__actions {
	display: flex;
	flex-direction: column;
	gap: var(--s-md);
	width: 100%;
	margin-top: var(--s-2xl);
}

.nav-drawer__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.75rem;        /* 44px – cible tactile */
	padding: var(--s-md) var(--s-xl);
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	font-size: var(--fs-button);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	border-radius: var(--br-xs);
	transition: background-color var(--tr-base), color var(--tr-base), border-color var(--tr-base);
}

.nav-drawer__btn--outline {
	color: var(--c-text-inverse);
	border: 2px solid rgba(255, 255, 255, 0.5);
	background: transparent;

	&:hover,
	&:focus,
	&:active {
		border-color: var(--c-white) !important;
		color: var(--c-text-inverse) !important;
		background: rgba(255, 255, 255, 0.08) !important;
	}
}

.nav-drawer__btn--primary {
	color: var(--c-text-inverse);
	background-color: var(--c-primary);
	border: 2px solid var(--c-primary);

	&:hover,
	&:focus,
	&:active {
		background-color: var(--c-primary-hover) !important;
		border-color: var(--c-primary-hover) !important;
		color: var(--c-text-inverse) !important;
	}
}

.nav-drawer__badges {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: var(--s-xl);
	margin: var(--s-2xl) 0 0;
	padding: 0;
	list-style: none;
	width: 100%;
}

/* Pictos seuls, en plus gros, sur une seule ligne (pas de libellé visible) */
.nav-drawer__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	flex: 0 0 auto;
	border-radius: var(--br-circle);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--c-text-inverse);

	& svg {
		fill: none !important;
		stroke: currentColor !important;
		width: 2rem !important;
		height: 2rem !important;
	}

	/* Les icônes « chien » et « recharge » sont en fill plein (pas de contour) */
	& svg[fill="currentColor"] {
		fill: currentColor !important;
		stroke: none !important;
	}
}

.nav-drawer__badge-img {
	width: 2.1rem !important;
	height: 2.1rem !important;
	max-width: none !important;
	object-fit: contain;
}

.nav-drawer__social {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--s-md);
	margin-top: var(--s-xl);
	padding-top: var(--s-xl);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	width: 100%;
}

.nav-drawer__social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;             /* 44px – cible tactile */
	height: 2.75rem;
	border-radius: var(--br-circle);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	color: var(--c-text-inverse);
	text-decoration: none;
	transition: background-color var(--tr-base), border-color var(--tr-base), color var(--tr-base);
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;

	&:hover,
	&:focus {
		background: rgba(193, 207, 130, 0.18);
		border-color: var(--c-primary-light);
		color: var(--c-primary-light);
	}

	& svg {
		fill: none !important;
		stroke: currentColor !important;
		width: 1.125rem !important;
		height: 1.125rem !important;
		flex-shrink: 0;
	}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Drawer plein écran sur mobile */
@media (max-width: 500px) {
	.nav-drawer {
		width: 100vw;
		max-width: 100vw;
	}
}