/*
 * JDP Theme — Header V2 (refonte fidèle redesign-home-v2.html).
 *
 * Deux barres : utility (noire, en haut) + navbar (translucide + blur).
 * Valeurs structurelles reprises de la V2, couleurs et durées mappées sur les tokens.
 * Classes préfixées (jdp-utilbar / jdp-navbar) pour éviter toute collision.
 *
 * @since 0.4.3
 */

/* Wrapper sticky : épingle tout le header (utility + navbar) en haut. */
.jdp-site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
}

/* ====================================================================
   1. UTILITY BAR (noire)
   ==================================================================== */
.jdp-utilbar {
	/* Contexte d'empilement au-dessus de la navbar (qui crée le sien via backdrop-filter),
	   sinon la navbar se peint par-dessus et capte les clics des liens de la barre noire. */
	position: relative;
	z-index: 2;
	background: var(--bg-dark);
	color: var(--fg-on-dark2);
	font-size: 13px;
	border-bottom: 1px solid #000000;
}
.jdp-utilbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 38px;
	gap: 16px;
}
.jdp-utilbar-nav {
	display: flex;
	align-items: center;
	gap: 24px;
}
.jdp-utilbar-nav a {
	color: var(--fg-on-dark2);
	font-weight: 400;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.jdp-utilbar-nav a:hover {
	color: var(--jdp-white);
}
.jdp-utilbar-account {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--radius-full);
	color: var(--jdp-white);
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.jdp-utilbar-account:hover { background: rgba(255, 255, 255, 0.14); }
.jdp-utilbar-account:active { transform: scale(0.97); }
.jdp-utilbar-account svg { width: 12px; height: 12px; }

@media (max-width: 640px) {
	.jdp-utilbar-nav { gap: 16px; }
	.jdp-utilbar-nav a:not(:nth-child(-n+2)) { display: none; }
}

/* ====================================================================
   2. NAVBAR (translucide + blur)
   ==================================================================== */
.jdp-navbar {
	background: rgba(255, 255, 255, 0.88);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--border);
}
.jdp-navbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 68px;
	gap: 32px;
}
.jdp-navbar-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.jdp-navbar-logo img {
	height: 36px;
	width: auto;
	display: block;
}

.jdp-navbar-platforms {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	justify-content: center;
}
.jdp-navbar-platforms a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	font-size: 14px;
	font-weight: 500;
	color: var(--fg1);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jdp-navbar-platforms a:hover {
	background: var(--bg-soft);
	color: var(--fg1);
}
.jdp-navbar-platforms a svg {
	width: 14px;
	height: 14px;
	opacity: 0.5;
}

/* Sous-menu déroulant (desktop, survol + focus clavier).
   Le pont anti-trou (::before) couvre l'espace vide entre le lien et le panneau
   pour que le curseur puisse descendre sans fermer le menu. */
.jdp-navbar-platform {
	position: relative;
}
.jdp-navbar-platform-trigger svg {
	transition: transform var(--dur-fast) var(--ease-out);
}
.jdp-navbar-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-dropdown);
	min-width: 280px;
	margin-top: var(--sp-2);
	padding: var(--sp-2);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.jdp-navbar-submenu::before {
	content: "";
	position: absolute;
	top: calc(var(--sp-2) * -1);
	left: 0;
	right: 0;
	height: var(--sp-2);
}
.jdp-navbar-platform:hover > .jdp-navbar-submenu,
.jdp-navbar-platform:focus-within > .jdp-navbar-submenu,
.jdp-navbar-platform.is-open > .jdp-navbar-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.jdp-navbar-platform:hover > .jdp-navbar-platform-trigger svg,
.jdp-navbar-platform:focus-within > .jdp-navbar-platform-trigger svg,
.jdp-navbar-platform.is-open > .jdp-navbar-platform-trigger svg {
	transform: rotate(180deg);
}
.jdp-navbar-submenu-item {
	display: block;
	padding: var(--sp-2) var(--sp-3);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fg2);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.jdp-navbar-submenu-item:hover,
.jdp-navbar-submenu-item:focus-visible {
	background: var(--bg-soft);
	color: var(--fg1);
}

/* Panier (pill noire) */
.jdp-navbar-cart {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 16px 7px 8px;
	background: var(--bg-dark);
	color: var(--jdp-white);
	border: none;
	border-radius: var(--radius-full);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform var(--dur-fast) var(--ease-out), background var(--dur-normal) var(--ease-out);
}
.jdp-navbar-cart:hover { background: var(--jdp-card-alt); }
.jdp-navbar-cart:active { transform: scale(0.97); }
.jdp-navbar-cart:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.jdp-navbar-cart-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-full);
}
.jdp-navbar-cart-icon svg { width: 15px; height: 15px; }
.jdp-navbar-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	background: var(--accent);
	color: var(--jdp-black);
	font-size: 10px;
	font-weight: 700;
	border-radius: var(--radius-full);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--bg-dark);
}
.jdp-navbar-cart-meta {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	text-align: left;
}
.jdp-navbar-cart-label {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1;
}
.jdp-navbar-cart-total {
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--jdp-white);
	line-height: 1.1;
}

/* Hamburger : masqué desktop, visible < 1024px.
   La V2 standalone n'a pas de nav mobile : on conserve le drawer mobile du theme. */
.jdp-navbar-hamburger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: -8px;
	background: none;
	border: none;
	border-radius: var(--radius-sm);
	color: var(--fg1);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--dur-fast) var(--ease-out);
}
.jdp-navbar-hamburger:hover { background: var(--bg-soft); }

@media (max-width: 1024px) {
	.jdp-navbar-platforms { display: none; }
	.jdp-navbar-submenu { display: none; }
	.jdp-navbar-hamburger { display: inline-flex; }
}