/* ==========================================================================
   Header commun — intégration fidèle de la maquette design_handoff_header.
   Breakpoint unique : 1080px (≤1080 = mobile, ≥1081 = desktop).
   ========================================================================== */

/* Les tokens (:root) et le reset sont dans base.css, chargé avant. */

/* --- Barre principale ---------------------------------------------------- */

.hd {
	/* Le header suit le scroll (flux normal) : ni sticky ni fixed. */
	background: var(--k-header-bg);
	border-bottom: 1px solid var(--k-border);
	font-family: var(--k-font-body);
	color: var(--k-charcoal);
}

.hd-inner {
	padding-top: 14px;
	padding-bottom: 14px;
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
}

/* Le logo est le SEUL élément compressible de la barre : le burger et le panier
   sont des cibles tactiles à taille fixe, qu'on ne rétrécit pas.
   Sans cela, sous 375px la barre dépassait la largeur de l'écran et TOUTE la
   page défilait latéralement. Le panier absorbait auparavant le manque en se
   comprimant jusqu'à 22px — une icône déformée qui repoussait le problème à
   320px sans le régler. */
.hd-logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex: 0 1 auto;
	min-width: 0;
}

/* max-height plutôt que height : avec max-width, l'image se réduit alors en
   conservant ses proportions au lieu de s'écraser. Tant qu'il y a la place,
   les 42px de la maquette s'appliquent — le rendu desktop ne bouge pas. */
.hd-logo img {
	max-height: 42px;
	max-width: 100%;
	height: auto;
	width: auto;
	display: block;
}

/* --- Navigation desktop -------------------------------------------------- */

.hd-nav {
	display: flex;
	align-items: center;
	gap: 1px;
	margin-left: auto;
	flex-wrap: nowrap;
}

/* .hd-link s'applique aux <a> ET aux <button> obfusqués : rendu identique. */
.hd-link {
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	padding: 9px 10px;
	border-radius: 10px;
	color: var(--k-nav);
	text-decoration: none;
	white-space: nowrap;
	transition: background .14s, color .14s;
	line-height: inherit;
}

.hd-link:hover,
.hd-link:focus-visible {
	background: var(--k-orange);
	color: var(--k-header-bg);
}

/* --- Actions compte / panier (desktop) ----------------------------------- */

.hd-actions {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: none;
}

.hd-icon-btn {
	--tile-size: 44px;
	--tile-bg: #fff;
	--tile-color: var(--k-nav);
	border: 1px solid var(--k-border);
	transition: border-color .14s, color .14s;
}

.hd-icon-btn:hover,
.hd-icon-btn:focus-visible {
	border-color: var(--k-orange);
	color: var(--k-charcoal);
}

.hd-cart {
	--tile-size: 44px;
	--tile-bg: #fff;
	--tile-color: var(--k-charcoal);
	position: relative;
	border: 1px solid var(--k-border);
	transition: border-color .14s;
}

.hd-cart:hover,
.hd-cart:focus-visible {
	border-color: var(--k-orange);
}

.hd-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--k-orange);
	color: #fff;
	font-family: var(--k-font-title);
	font-weight: 800;
	font-size: var(--k-text-xs);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--k-bg);
}

/* --- Éléments mobiles (masqués en desktop) ------------------------------- */

.hd-burger,
.hd-cart-mobile {
	display: none;
}

/* --- Drawer mobile ------------------------------------------------------- */

.hd-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.hd-drawer[hidden] {
	display: none;
}

.hd-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: var(--k-overlay);
	animation: hdBackdrop .22s ease forwards;
	cursor: pointer;
}

.hd-drawer-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(88vw, 360px);
	background: var(--k-bg);
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.25);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	animation: hdSlide .26s cubic-bezier(.22, .61, .36, 1) forwards;
}

.hd-drawer-top {
	position: sticky;
	top: 0;
	background: rgba(251, 246, 239, 0.96);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--k-border);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.hd-drawer-top img {
	height: 32px;
	width: auto;
	margin-left: 4px;
}

.hd-close {
	--tile-size: 48px;
	--tile-radius: 50%;
	--tile-bg: var(--k-orange);
	--tile-color: #fff;
	box-shadow: var(--k-shadow-orange-sm);
}

.hd-drawer-nav {
	padding: 10px 14px 4px;
}

.hd-drawer-link {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 17px 14px;
	border-radius: var(--k-r-card);
	min-height: 60px;
	text-decoration: none;
	text-align: left;
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-2xl);
	color: var(--k-charcoal);
	line-height: 1.2;
}

.hd-drawer-link > span:first-child {
	flex: 1;
}

.hd-drawer-link:hover,
.hd-drawer-link:focus-visible {
	background: var(--k-hover);
}

.hd-chevron {
	color: var(--k-chevron);
	display: inline-flex;
	flex: none;
}

.hd-drawer-bottom {
	padding: 14px 18px 22px;
	margin-top: 6px;
	border-top: 1px solid var(--k-border);
	display: flex;
	gap: 12px;
}

.hd-drawer-card {
	--card-shadow: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	--card-radius: var(--k-r-card);
	--card-padding: 18px 10px;
	text-decoration: none;
	color: var(--k-charcoal);
	font-family: var(--k-font-title);
	font-weight: 700;
	font-size: var(--k-text-m);
	text-align: center;
}

.hd-drawer-card:hover,
.hd-drawer-card:focus-visible {
	border-color: var(--k-orange);
}

/* --- Bascule mobile (breakpoint unique 1080px) --------------------------- */

@media (max-width: 1080px) {
	.hd-nav,
	.hd-actions {
		display: none !important;
	}

	.hd-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background: var(--k-orange);
		color: #fff;
		flex: none;
		box-shadow: var(--k-shadow-orange-sm);
	}

	.hd-cart-mobile {
		display: inline-flex;
		margin-left: auto;
		width: 46px;
		height: 46px;
		border-radius: var(--k-r-tile);
	}
}

/* --- Animations ---------------------------------------------------------- */

@keyframes hdBackdrop {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes hdSlide {
	from { transform: translateX(-100%); }
	to   { transform: none; }
}