/**
 * ═══════════════════════════════════════════════════════════════════════
 * mega-menu-bienhabille.css
 * ═══════════════════════════════════════════════════════════════════════
 *
 * Ce fichier gère TOUT le header quand le mega menu est actif (template
 * mega-menu-header.php). Il contient :
 *
 *   LIGNE 1 (.bh-mega-top) — Logo | Barre recherche | Icônes (localisation, compte, panier)
 *   LIGNE 2 (.bh-mega-bottom) — Menu nav (collection, nos styles…) + Panneaux dropdown
 *
 * Note : header.css concerne l'autre layout (bh-header--desktop), pas celui-ci.
 * DESKTOP et MOBILE séparés. overflow-x sur content/footer uniquement → panier visible.
 * ═══════════════════════════════════════════════════════════════════════
 */
body.bh-mega-menu-active .bh-content-wrapper,
body.bh-mega-menu-active #bh-footer {
	overflow-x: hidden;
	max-width: 100%;
}
/* Empêche le léger scroll horizontal (sauf pages hero où le plein écran doit déborder) */
html:has(body.bh-mega-menu-active) {
	overflow-x: hidden;
}
html:has(body.bh-hero-overlay.bh-mega-menu-active) {
	overflow-x: visible;
}
/* Desktop : réserver la place de la scrollbar (pages sans hero plein écran) */
@media (min-width: 1025px) {
	html:has(body.bh-mega-menu-active) {
		scrollbar-gutter: stable;
	}
	body.bh-mega-menu-active {
		overflow-x: hidden;
	}
	/* Hero : pas de gouttière stable (sinon bandes blanches latérales) — scrollbar en overlay */
	html:has(body.bh-hero-overlay.bh-mega-menu-active) {
		scrollbar-gutter: auto;
	}
}
:root {
	--bh-black: #1a1a1a;
	--bh-white: #ffffff;
	--bh-gray-50: #f8f7f5;
	--bh-gray-100: #f0eeeb;
	--bh-gray-200: #e2e0db;
	--bh-gray-400: #a09d96;
	--bh-gray-600: #6b6862;
	--bh-gray-800: #3d3b37;
	--bh-accent: #c8a97e;
	--bh-accent-dark: #a8895e;
	--bh-header-height: 64px;
	--bh-topbar-height: 36px;
	--bh-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Pile en-tête : toujours flex (display:contents cassait l’affichage annonce/panier sur certains navigateurs).
 * Mega : même bloc + position fixed.
 */
.bh-site-header-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}
body.bh-mega-menu-active .bh-site-header-stack {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	/* Pas de padding horizontal ici : la zone serait transparente et laisse voir le fond (bande à droite). Le retrait panier/safe-area est sur #bh-header / .bh-mega-top-inner. */
	padding-left: 0;
	padding-right: 0;
	overflow-x: visible;
	overflow-y: visible;
}
.bh-site-header-stack > .bh-announcement-bar {
	flex: 0 0 auto;
	width: 100%;
	position: relative;
	z-index: 3;
}
body.admin-bar.bh-mega-menu-active .bh-site-header-stack {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar.bh-mega-menu-active .bh-site-header-stack {
		top: 46px;
	}
}
/*
 * Hauteur réservée au contenu : sur body (pas #bh-header) pour que .bh-content-wrapper,
 * frère de la stack fixe, hérite de --bh-mega-header-total (sinon seul le fallback 114px s’appliquait).
 */
body.bh-mega-menu-active {
	--bh-header-height: 64px;
	--bh-mega-mobile-search-block: 0px;
	/* Desktop : ligne 1 (64px) + ligne 2 menu (~50px) + bordures */
	--bh-mega-header-total: 120px;
}
/* Header — dans la stack : fond blanc = largeur viewport entière (padding uniquement sur l’intérieur) */
body.bh-mega-menu-active #bh-header {
	--bh-header-pad-right: 0px;
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	flex-shrink: 0;
	z-index: 2;
	background: var(--bh-white);
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding-right: 0;
	overflow-x: visible;
}
/* Barre fermée (cookie / pas de classe) : pas de décalage fictif */
body.bh-mega-menu-active:not(.bh-has-announcement) {
	--bh-topbar-height: 0px;
}
/* Espace réservé : safe-area + barre admin WP + optionnellement annonce + hauteur header mega */
body.bh-mega-menu-active:not(.bh-has-announcement) .bh-content-wrapper {
	padding-top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--bh-mega-header-total, 120px));
}
body.bh-mega-menu-active.bh-has-announcement .bh-content-wrapper {
	padding-top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--bh-topbar-height, 36px) + var(--bh-mega-header-total, 120px));
}
.bh-header.bh-header--mega {
	background: var(--bh-white);
	width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   Hero/vidéo/slider pleine largeur, header transparent, fond blanc au survol
   Active quand body.bh-hero-overlay (Customizer « Header transparent sur hero »)
   S'applique au 1er slider/hero quelle que soit la page ou le widget Elementor.
   ═══════════════════════════════════════════════════════════════════ */
body.bh-hero-overlay.bh-mega-menu-active .bh-content-wrapper {
	padding-top: 0;
	/* Visible : le breakout hero / 100vw n’est pas rogné → plus de « cadre » blanc */
	overflow-x: visible;
}
/* Boutique / archives produit : le header reste fixe sans hero plein écran — garder le décalage du contenu */
body.bh-hero-overlay.bh-mega-menu-active.woocommerce:not(.bh-has-announcement) .bh-content-wrapper {
	padding-top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--bh-mega-header-total, 120px));
}
body.bh-hero-overlay.bh-mega-menu-active.woocommerce.bh-has-announcement .bh-content-wrapper {
	padding-top: calc(env(safe-area-inset-top, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--bh-topbar-height, 36px) + var(--bh-mega-header-total, 120px));
}
body.bh-hero-overlay.bh-mega-menu-active #bh-header,
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega {
	background: transparent !important;
	transition: background var(--bh-transition), box-shadow var(--bh-transition);
}
body.bh-hero-overlay.bh-mega-menu-active #bh-header {
	box-shadow: none;
}
/* Barre annonce : pas de surcharge — fond = Customizer (style inline) */
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-nav,
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-top,
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-bottom,
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-mobile-search {
	background: transparent !important;
	border-color: transparent;
	transition: background var(--bh-transition), border-color var(--bh-transition);
}
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-nav {
	border-bottom-color: transparent;
}
body.bh-hero-overlay.bh-mega-menu-active .bh-header--mega .bh-mega-bottom {
	border-top-color: transparent;
}
/* Scroll : barre opaque (mobile + desktop) */
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled #bh-header,
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega {
	background: rgba(255,255,255,0.98) !important;
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-nav,
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-top,
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-bottom,
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-mobile-search {
	background: transparent !important;
	border-color: transparent;
}
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-nav {
	border-bottom-color: #e0e0e0;
}
body.bh-hero-overlay.bh-mega-menu-active.bh-header-scrolled .bh-header--mega .bh-mega-bottom {
	border-top-color: #e8e8e8;
}
/* Survol : uniquement souris (évite header « collé » blanc sur tactile / fausses hovers) */
@media (hover: hover) and (pointer: fine) {
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover,
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega {
		background: rgba(255,255,255,0.98) !important;
		box-shadow: 0 1px 0 rgba(0,0,0,0.06);
	}
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-nav,
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-top,
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-bottom,
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-mobile-search {
		background: transparent !important;
		border-color: transparent;
	}
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-nav {
		border-bottom-color: #e0e0e0;
	}
	body.bh-hero-overlay.bh-mega-menu-active #bh-header:hover .bh-header--mega .bh-mega-bottom {
		border-top-color: #e8e8e8;
	}
}
/* Panneau mega menu ouvert : garder le fond blanc (cohérent avec le survol) */
body.bh-hero-overlay.bh-mega-menu-active.bh-mega-panel-open #bh-header {
	background: rgba(255,255,255,0.98);
	box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
body.bh-hero-overlay.bh-mega-menu-active.bh-mega-panel-open #bh-header .bh-header--mega .bh-mega-nav {
	border-bottom-color: #e0e0e0;
}
body.bh-hero-overlay.bh-mega-menu-active.bh-mega-panel-open #bh-header .bh-header--mega .bh-mega-bottom {
	border-top-color: #e8e8e8;
}

/* Hero mobile : bandeau recherche comme la ref (pilule blanche sur image, pas de bloc blanc plein largeur) */
@media (max-width: 1024px) {
	body.bh-hero-overlay.bh-mega-menu-active .bh-mega-mobile-search {
		border-top-color: transparent;
		background: transparent;
	}
	body.bh-hero-overlay.bh-mega-menu-active .bh-mega-mobile-search .bh-mega-search__form {
		border-color: rgba(0, 0, 0, 0.08);
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	}
}

/* ═══════════════════════════════════════════════════════════════════
   LIGNE 1 — Logo | Recherche | Icônes (localisation, compte, panier)
   ───────────────────────────────────────────────────────────────── */
/* Nav — structure 2 lignes */
.bh-header--mega .bh-mega-nav {
	display: flex;
	flex-direction: column;
	background: var(--bh-white);
	border-bottom: 1px solid #e5e5e5;
	min-width: 0;
}
.bh-header--mega .bh-mega-top {
	min-height: var(--bh-header-height);
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.bh-header--mega .bh-mega-bottom {
	border-top: 1px solid #e8e8e8;
	width: 100%;
}
/* Ligne 1 : Logo | Recherche | Icônes — largeurs bornées, panier toujours visible */
.bh-header--mega .bh-mega-top-inner {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 24px;
	display: grid;
	grid-template-columns: minmax(0, 160px) minmax(0, 1fr) minmax(100px, 130px);
	grid-template-rows: auto;
	align-items: center;
	height: var(--bh-header-height);
	gap: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP (≥1025px) — Logo à gauche | Recherche | Icônes collées à droite
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
	.bh-header--mega .bh-mega-nav {
		border-bottom: 1px solid #e0e0e0;
	}
	.bh-header--mega .bh-mega-top-inner {
		display: grid;
		/* Colonne droite : mini largeur confort (3×32px + gaps + badge) */
		grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(112px, max-content);
		padding-left: max(16px, env(safe-area-inset-left, 0px));
		padding-right: max(20px, calc(8px + env(safe-area-inset-right, 0px)));
		gap: 12px;
		align-items: center;
		overflow-x: visible;
		min-width: 0;
	}
	.bh-header--mega .bh-mega-search--desktop { display: block; }
	.bh-header--mega .bh-mega-bottom {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 50px;
		width: 100%;
		overflow-x: hidden; /* menu ligne 2 — évite scroll si items nombreux */
	}
	.bh-header--mega .bh-mega-bottom .bh-mega-menu {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0 40px;
	}
	.bh-header--mega .bh-mega-bottom .bh-mega-menu__list {
		justify-content: center !important;
		display: flex !important;
	}
	.bh-header--mega .bh-mega-actions {
		justify-self: end;
		width: auto;
		max-width: 100%;
		min-width: 112px;
		margin: 0;
		padding-inline-end: 10px;
		box-sizing: border-box;
		flex-shrink: 0;
	}
}

/* Mobile trigger (burger + Homme) — masqué desktop */
.bh-mega-mobile-trigger { display: none; }

/* Logo — extrême gauche (colonne 1 du grid) */
.bh-header--mega .bh-mega-logo {
	grid-column: 1;
	justify-self: start;
	min-width: 0;
	max-width: 160px;
}
.bh-header--mega .bh-mega-logo .bh-header__logo-img {
	display: block;
	max-height: 40px;
	max-width: 100%;
	width: auto;
}
.bh-header--mega .bh-logo-text {
	font-size: 24px;
	font-weight: 600;
	color: var(--bh-black);
	letter-spacing: 0.02em;
}

/* Barre de recherche desktop — colonne 2, longue entre logo et icônes */
.bh-mega-search--desktop {
	grid-column: 2;
	grid-row: 1;
	min-width: 0; /* crucial : permet shrink */
	width: 100%;
	margin: 0 8px;
	max-width: 100%;
}
.bh-mega-search__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	min-width: 0;
	background: var(--bh-white);
	border: 1px solid #e0e0e0;
	border-radius: 999px;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.bh-mega-search__form--pill {
	border-radius: 999px;
}
.bh-mega-search__form:focus-within {
	border-color: #ccc;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
}
.bh-mega-search__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 16px;
	color: #999;
	pointer-events: none;
}
.bh-mega-search__icon svg {
	width: 16px;
	height: 16px;
	stroke-width: 1.25;
}
.bh-mega-search__input {
	flex: 1;
	min-width: 0;
	height: 42px;
	padding: 0 18px;
	border: none;
	background: none;
	font-size: 14px;
	color: #1a1a1a;
	outline: none;
}
.bh-mega-search__input::placeholder {
	color: #999;
}
.bh-mega-search__results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 4px;
	background: var(--bh-white);
	border: 1px solid var(--bh-gray-200);
	border-radius: 8px;
	box-shadow: 0 12px 24px rgba(0,0,0,0.1);
	max-height: 400px;
	overflow-y: auto;
	z-index: 1001;
}
.bh-mega-search__results[hidden] { display: none; }
.bh-mega-search__results .bh-search-results-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
.bh-mega-search__results .bh-search-result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--bh-black);
	transition: background 0.2s;
}
.bh-mega-search__results .bh-search-result-item:hover {
	background: var(--bh-gray-50);
}
.bh-mega-search__results .bh-search-result-item img {
	width: 50px;
	height: 63px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.bh-mega-search__results .bh-search-result-name {
	flex: 1;
	font-size: 14px;
	font-weight: 500;
}
.bh-mega-search__results .bh-search-result-price {
	font-size: 14px;
	font-weight: 600;
	color: var(--bh-accent);
}
.bh-mega-search__results .bh-search-no-results {
	margin: 0;
	padding: 16px 14px;
	font-size: 14px;
	color: var(--bh-gray-600);
}

/* ═══════════════════════════════════════════════════════════════════
   LIGNE 2 — Menu nav + Panneaux dropdown (Collection, Nos Styles, etc.)
   ───────────────────────────────────────────────────────────────── */
/* Mega menu list — override mega-menu.css */
.bh-header--mega .bh-mega-menu {
	display: flex;
	position: relative;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	left: auto;
	top: auto;
	transform: none;
	min-width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
	border: none;
}
.bh-header--mega .bh-mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
	justify-content: center;
}

/* Triggers — minuscules, léger */
.bh-header--mega .bh-mega-trigger__btn,
.bh-header--mega .bh-mega-link a {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: #1a1a1a;
	background: none;
	border: none;
	cursor: pointer;
	padding: 20px 14px;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color var(--bh-transition);
	white-space: nowrap;
	text-decoration: none;
	position: relative;
}
.bh-header--mega .bh-mega-trigger__btn::after,
.bh-header--mega .bh-mega-link a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 14px;
	right: 14px;
	height: 2px;
	background: #1a1a1a;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--bh-transition);
}
.bh-header--mega .bh-mega-trigger:hover .bh-mega-trigger__btn::after,
.bh-header--mega .bh-mega-trigger.is-active .bh-mega-trigger__btn::after,
.bh-header--mega .bh-mega-link a:hover::after { transform: scaleX(1); }
.bh-header--mega .bh-mega-trigger:hover .bh-mega-trigger__btn,
.bh-header--mega .bh-mega-trigger.is-active .bh-mega-trigger__btn,
.bh-header--mega .bh-mega-link a:hover { color: #1a1a1a; }
.bh-header--mega .bh-mega-trigger__chevron {
	transition: transform var(--bh-transition);
	width: 10px;
	height: 6px;
	opacity: 0.55;
}
.bh-header--mega .bh-mega-trigger__chevron path {
	stroke-width: 1.35;
}
.bh-header--mega .bh-mega-trigger.is-active .bh-mega-trigger__chevron { transform: rotate(180deg); }

/* Panels — full width sous la nav */
.bh-header--mega .bh-mega-trigger { position: static; }
.bh-header--mega .bh-mega-menu__list { position: relative; }
.bh-header--mega .bh-mega-panel {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + var(--bh-mega-header-total, var(--bh-header-height)));
	left: 0;
	right: 0;
	background: var(--bh-white);
	border-bottom: 1px solid var(--bh-gray-200);
	padding: 40px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: all var(--bh-transition);
	z-index: 1050;
	box-shadow: 0 20px 40px rgba(0,0,0,0.06);
}
.bh-header--mega .bh-mega-panel.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
body.bh-has-announcement .bh-header--mega .bh-mega-panel {
	top: calc(env(safe-area-inset-top, 0px) + var(--bh-topbar-height, 36px) + var(--bh-mega-header-total, var(--bh-header-height)));
}
.bh-header--mega .bh-mega-panel__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	gap: 40px;
}
.bh-header--mega .bh-mega-panel__columns {
	flex: 1;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
}
.bh-header--mega .bh-mega-panel__promo {
	width: 260px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bh-header--mega .bh-mega-panel__promo-tab {
	display: none;
	flex-direction: column;
	gap: 12px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	overflow-x: hidden;
}
.bh-header--mega .bh-mega-panel__promo-tab.is-visible {
	display: flex;
}
.bh-header--mega .bh-mega-panel__promo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	flex: 1;
	min-height: 0;
}
.bh-header--mega .bh-mega-panel__promo-placeholder {
	width: 100%;
	height: 300px;
	background: var(--bh-gray-100);
	border-radius: 8px;
}
/* Photo + lien — placement (span) */
.bh-header--mega .bh-mega-panel__promo-item--span-2 {
	grid-column: 1 / -1;
}
.bh-header--mega .bh-mega-panel__promo-item {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	overflow: hidden;
	transition: opacity var(--bh-transition);
}
.bh-header--mega .bh-mega-panel__promo-item:hover {
	opacity: 0.9;
}
/* Tailles d'images */
.bh-header--mega .bh-mega-panel__promo-item--size-small .bh-mega-panel__promo-img {
	aspect-ratio: 2 / 1;
	min-height: 80px;
}
.bh-header--mega .bh-mega-panel__promo-item--size-medium .bh-mega-panel__promo-img {
	aspect-ratio: 4 / 3;
	min-height: 100px;
}
.bh-header--mega .bh-mega-panel__promo-item--size-large .bh-mega-panel__promo-img {
	aspect-ratio: 3 / 4;
	min-height: 140px;
}
.bh-header--mega .bh-mega-panel__promo-item--size-full .bh-mega-panel__promo-img {
	aspect-ratio: 3 / 4;
	min-height: 180px;
}
.bh-header--mega .bh-mega-panel__promo-img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
}
.bh-header--mega .bh-mega-panel__promo-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bh-header--mega .bh-mega-panel__promo-img--placeholder {
	background: var(--bh-gray-200);
	min-height: 160px;
}
/* Bannière (image + overlay titre/sous-titre/CTA) */
.bh-header--mega .bh-mega-panel__promo-item--banner {
	position: relative;
}
.bh-header--mega .bh-mega-panel__promo-item--banner .bh-mega-panel__promo-img {
	aspect-ratio: 1; /* Overridé par --size-* si présent */
}
.bh-header--mega .bh-mega-panel__promo-item--banner .bh-mega-panel__promo-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
	background: linear-gradient(transparent 20%, rgba(0,0,0,0.6));
	color: var(--bh-white);
}
.bh-header--mega .bh-mega-panel__promo-item--banner .bh-mega-panel__promo-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 2px;
}
.bh-header--mega .bh-mega-panel__promo-item--banner .bh-mega-panel__promo-subtitle {
	font-size: 12px;
	opacity: 0.9;
}
.bh-header--mega .bh-mega-panel__promo-item--banner .bh-mega-panel__promo-cta {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
}
/* Liens en dessous des photos/bannières */
.bh-header--mega .bh-mega-panel__promo-links {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--bh-gray-200);
}
.bh-header--mega .bh-mega-panel__promo-links-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.bh-header--mega .bh-mega-panel__promo-links-list a {
	font-size: 13px;
	color: var(--bh-text-secondary);
	text-decoration: none;
	transition: color var(--bh-transition);
}
.bh-header--mega .bh-mega-panel__promo-links-list a:hover {
	color: var(--bh-accent);
}

/* Nos Styles — sidebar + contenu */
.bh-header--mega .bh-mega-panel--sidebar .bh-mega-panel__inner {
	display: grid;
	grid-template-columns: 220px 1fr 260px;
	gap: 40px;
	align-items: start;
}
.bh-header--mega .bh-mega-panel__sidebar {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bh-header--mega .bh-mega-panel__sidebar-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bh-black);
	text-decoration: none;
	text-transform: capitalize;
	transition: background var(--bh-transition), color var(--bh-transition);
	border: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: none;
}
.bh-header--mega .bh-mega-panel__sidebar-item:hover,
.bh-header--mega .bh-mega-panel__sidebar-item.is-active {
	background: var(--bh-gray-50);
	color: var(--bh-black);
}
.bh-header--mega .bh-mega-panel__sidebar-chevron {
	flex-shrink: 0;
	width: 6px;
	height: 11px;
	opacity: 0.5;
}
.bh-header--mega .bh-mega-panel__sidebar-chevron path {
	stroke-width: 1.35;
}
.bh-header--mega .bh-mega-panel__content {
	position: relative;
	min-height: 240px;
}
.bh-header--mega .bh-mega-panel__tab {
	position: absolute;
	inset: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--bh-transition), visibility var(--bh-transition);
}
.bh-header--mega .bh-mega-panel__tab.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* Colonnes */
.bh-header--mega .bh-mega-column {
	min-width: 160px;
	max-width: 200px;
}
.bh-header--mega .bh-mega-column__title {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bh-black);
	display: block;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--bh-gray-200);
	text-decoration: none;
}
.bh-header--mega .bh-mega-column__title--linked:hover { color: var(--bh-accent-dark); }
.bh-header--mega .bh-mega-column__items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bh-header--mega .bh-mega-item a {
	font-size: 14px;
	color: var(--bh-gray-600);
	text-decoration: none;
	display: block;
	padding: 6px 0;
	transition: color var(--bh-transition), padding-left var(--bh-transition);
}
.bh-header--mega .bh-mega-item a:hover {
	color: var(--bh-black);
	padding-left: 4px;
}
.bh-header--mega .bh-mega-item a[href*="/styles/"],
.bh-header--mega .bh-mega-item a[href*="streetwear"],
.bh-header--mega .bh-mega-item a[href*="casual-chic"],
.bh-header--mega .bh-mega-item a[href*="old-money"],
.bh-header--mega .bh-mega-item a[href*="business-formal"] {
	color: var(--bh-accent-dark);
	font-weight: 500;
	margin-top: 8px;
	font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   OVERLAY — Assombrissement quand panneau ouvert / drawer mobile
   ───────────────────────────────────────────────────────────────── */
.bh-mega-overlay {
	position: fixed;
	top: calc(env(safe-area-inset-top, 0px) + var(--bh-mega-header-total, var(--bh-header-height)));
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.3);
	z-index: 1040;
	opacity: 0;
	visibility: hidden;
	transition: all var(--bh-transition);
	pointer-events: none;
}
.bh-mega-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
body.bh-has-announcement .bh-mega-overlay {
	top: calc(env(safe-area-inset-top, 0px) + var(--bh-topbar-height, 36px) + var(--bh-mega-header-total, var(--bh-header-height)));
}
/* Mobile drawer ouvert : overlay pleine page pour assombrir le fond */
body.bh-drawer-open .bh-mega-overlay {
	top: 0;
}

/* Icônes — extrême droite (colonne 3) : localisation, compte, panier */
.bh-header--mega .bh-mega-actions {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	min-width: min(100%, 120px);
	max-width: 100%;
	flex-wrap: nowrap;
	overflow: visible;
}
.bh-header--mega .bh-mega-actions .bh-header__action {
	width: 32px;
	height: 32px;
	min-width: 32px;
	flex: 0 0 auto;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--bh-black);
	border-radius: 50%;
	transition: background var(--bh-transition), color var(--bh-transition);
	text-decoration: none;
}
.bh-header--mega .bh-mega-actions .bh-header__action svg,
.bh-header--mega .bh-mega-actions .bh-header__action .bh-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.bh-header--mega .bh-mega-actions .bh-header__action svg {
	stroke-width: 1.25;
}
.bh-header--mega .bh-mega-actions .bh-header__action:hover {
	background: var(--bh-gray-100);
	color: var(--bh-black);
}
.bh-header--mega .bh-header__action--account,
.bh-header--mega .bh-header__cart {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	visibility: visible !important;
	flex: 0 0 auto;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	overflow: visible;
	opacity: 1;
}
.bh-header--mega .bh-mega-actions .bh-header__cart {
	/* évite collapse si la grille rétrécit (icône « disparue ») */
	min-width: 32px !important;
}
.bh-header--mega .bh-header__account-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 6px;
	height: 6px;
	background: #e53935;
	border-radius: 50%;
}
.bh-header--mega .bh-header__cart-count {
	position: absolute;
	/* Un peu plus « intérieur » : le badge ne déborde pas sous la scrollbar */
	top: 2px;
	right: 5px;
	left: auto;
	bottom: auto;
	margin: 0;
	transform: none;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	line-height: 1;
	box-sizing: border-box;
	background: #e53935;
	color: var(--bh-white);
	border-radius: 50%;
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.bh-header--mega .bh-header__cart-count--zero {
	background: #e53935;
}

/* Burger mobile */
.bh-header--mega .bh-header__burger {
	display: none;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px 8px;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}
.bh-header--mega .bh-header__burger span {
	display: block;
	width: 24px;
	height: 1.5px;
	background: var(--bh-black);
	transition: all var(--bh-transition);
	transform-origin: center;
}
.bh-header--mega .bh-header__burger.is-active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4px); }
.bh-header--mega .bh-header__burger.is-active span:nth-child(2) { opacity: 0; }
.bh-header--mega .bh-header__burger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4px); }

/* ═══════════════════════════════════════════════════════════════════
   DRAWER MOBILE — Menu accordéon à gauche (≤1024px)
   ───────────────────────────────────────────────────────────────── */
.bh-mobile-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	background: var(--bh-white);
	z-index: 2000;
	transform: translateX(-100%);
	transition: transform var(--bh-transition);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.bh-mobile-drawer.is-open { transform: translateX(0); }
.bh-mobile-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--bh-gray-200);
	flex-shrink: 0;
}
.bh-mobile-drawer__tabs {
	font-size: 16px;
	font-weight: 700;
	color: var(--bh-black);
	text-transform: lowercase;
	letter-spacing: 0.02em;
	border-bottom: 2px solid var(--bh-black);
	padding-bottom: 2px;
}
.bh-mobile-drawer__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--bh-gray-600);
	border-radius: 50%;
	flex-shrink: 0;
}
.bh-mobile-drawer__close:hover { background: var(--bh-gray-100); color: var(--bh-black); }
.bh-mobile-drawer__search {
	padding: 12px 20px;
	border-bottom: 1px solid var(--bh-gray-200);
	flex-shrink: 0;
}
.bh-mobile-drawer__search .bh-mega-search__form {
	border-radius: 999px;
	border: 1px solid var(--bh-gray-200);
	background: var(--bh-white);
}
.bh-mobile-drawer__search .bh-mega-search__input {
	height: 44px;
}
.bh-mobile-drawer__search .bh-mega-search__icon { padding-left: 16px; }
.bh-mobile-drawer__content {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	-webkit-overflow-scrolling: touch;
}
.bh-mobile-drawer__level {
	position: absolute;
	inset: 0;
	transform: translateX(100%);
	transition: transform var(--bh-transition);
	overflow-y: auto;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.bh-mobile-drawer__level--active {
	position: relative;
	transform: translateX(0);
}
.bh-mobile-drawer__level--exiting { transform: translateX(-100%); }

/* Sous-menu : header Retour */
.bh-mobile-submenu__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-bottom: 1px solid var(--bh-gray-200);
	flex-shrink: 0;
}
.bh-mobile-back {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bh-black);
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 0;
}
.bh-mobile-back:hover { color: var(--bh-black); opacity: 0.8; }
.bh-mobile-back__title { font-weight: 600; }
.bh-mobile-back__label {
	font-size: 12px;
	font-weight: 400;
	color: var(--bh-gray-600);
	margin-left: 6px;
}
.bh-mobile-submenu__close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	cursor: pointer;
	color: var(--bh-gray-600);
	border-radius: 50%;
}
.bh-mobile-submenu__close:hover { background: var(--bh-gray-100); color: var(--bh-black); }

/* Liste principale — séparateurs fins */
.bh-mobile-menu__list,
.bh-mobile-submenu__list { list-style: none; margin: 0; padding: 0; }
.bh-mobile-item {
	border-bottom: 1px solid var(--bh-gray-200);
}
.bh-mobile-item__trigger,
.bh-mobile-item__link {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	font-size: 15px;
	font-weight: 600;
	color: var(--bh-black);
	background: none;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: left;
	transition: background var(--bh-transition);
}
.bh-mobile-item__trigger:hover,
.bh-mobile-item__link:hover { background: var(--bh-gray-50); }
.bh-mobile-item__chevron {
	flex-shrink: 0;
	width: 7px;
	height: 12px;
	opacity: 0.55;
}
.bh-mobile-item__chevron path {
	stroke-width: 1.35;
}

/* Accordéons (Hauts, Bas…) — chevron ↓ */
.bh-mobile-group { border-bottom: 1px solid var(--bh-gray-200); }
.bh-mobile-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bh-black);
	background: none;
	border: none;
	cursor: pointer;
}
.bh-mobile-accordion__trigger:hover { background: var(--bh-gray-50); }
.bh-mobile-group__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--bh-black);
	text-decoration: none;
}
.bh-accordion-chevron {
	transition: transform var(--bh-transition);
	flex-shrink: 0;
	width: 10px;
	height: 6px;
	opacity: 0.55;
}
.bh-accordion-chevron path {
	stroke-width: 1.35;
}
.bh-mobile-accordion__trigger[aria-expanded="true"] .bh-accordion-chevron { transform: rotate(180deg); }
.bh-mobile-accordion__items {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.bh-mobile-accordion__items.is-expanded { max-height: 600px; }
.bh-mobile-subitem a {
	display: block;
	padding: 12px 20px 12px 36px;
	font-size: 14px;
	color: var(--bh-gray-600);
	text-decoration: none;
	transition: color var(--bh-transition), background var(--bh-transition);
}
.bh-mobile-subitem a:hover {
	color: var(--bh-black);
	background: var(--bh-gray-50);
}
.bh-mobile-drawer__footer {
	padding: 20px;
	border-top: 1px solid var(--bh-gray-200);
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
	background: var(--bh-white);
}
.bh-mobile-drawer__footer-link {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--bh-gray-600);
	text-decoration: none;
}
.bh-mobile-drawer__footer-link:hover { color: var(--bh-black); }
.bh-mobile-drawer__footer-link .bh-icon,
.bh-mobile-drawer__footer-link svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.bh-mobile-drawer__footer-link svg {
	stroke-width: 1.25;
}

/* Ligne 2 mobile / tablette : barre type vitrine (pilule) */
.bh-mega-mobile-search {
	display: none;
	padding: 6px 10px 10px;
	border-top: 1px solid var(--bh-gray-200);
	background: var(--bh-white);
	max-height: 200px;
	overflow: hidden;
	transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, padding 0.32s ease, border-width 0.2s ease;
	opacity: 1;
}
@media (min-width: 1025px) {
	.bh-mega-mobile-search { display: none !important; }
}
.bh-mega-mobile-search .bh-mega-search__form {
	background: var(--bh-white);
	border: 1px solid var(--bh-gray-200);
	border-radius: 999px;
	min-height: 42px;
}
.bh-mega-mobile-search .bh-mega-search__input {
	height: 42px;
	font-size: 15px;
}
.bh-mega-mobile-search .bh-mega-search__results--mobile {
	left: 12px;
	right: 12px;
	margin-top: 8px;
}
.bh-mega-mobile-search .bh-mega-search__icon {
	padding-left: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE + TABLETTE (≤1024px) — Logo centré | Icônes à l’extrême droite
   overflow-x: hidden UNIQUEMENT ici (pas sur desktop = panier visible).
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
	body.bh-mega-menu-active {
		overflow-x: hidden;
	}
	body.bh-hero-overlay.bh-mega-menu-active {
		overflow-x: visible;
	}
	body.bh-mega-menu-active .bh-site-header-stack {
		padding-top: env(safe-area-inset-top, 0px);
		/* Sans fond, la marge « encoche » reste transparente → le contenu défile / rebondi visible au-dessus du header */
		background-color: var(--bh-white);
	}
	body.bh-hero-overlay.bh-mega-menu-active .bh-site-header-stack {
		background-color: transparent;
	}
	/* Réduit le « rubber band » où le contenu remonte au-dessus du header (hero / encoche) */
	body.bh-hero-overlay.bh-mega-menu-active {
		overscroll-behavior-y: none;
	}
	/* Hauteurs mobile : sur body pour le padding de .bh-content-wrapper */
	body.bh-mega-menu-active {
		--bh-header-height: 56px;
		--bh-mega-mobile-search-block: 64px;
		--bh-mega-header-total: calc(var(--bh-header-height) + var(--bh-mega-mobile-search-block));
	}
	body.bh-mega-menu-active #bh-header {
		/* Safe-area sur la stack ; hauteur utile du bloc header (icônes + recherche) */
		padding-right: 0;
		padding-top: 0;
	}
	/* Barre recherche repliée au scroll vers le bas : hauteur header = une ligne seulement */
	body.bh-mega-search-scroll-hidden.bh-mega-menu-active {
		--bh-mega-mobile-search-block: 0px;
		--bh-mega-header-total: var(--bh-header-height);
	}
	body.bh-mega-search-scroll-hidden .bh-mega-mobile-search {
		max-height: 0;
		min-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		border-top-width: 0;
		opacity: 0;
		pointer-events: none;
	}
	.bh-mobile-drawer {
		display: flex !important;
		visibility: visible !important;
		z-index: 2100;
	}
	.bh-header--mega .bh-mega-nav {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: auto;
	}
	.bh-header--mega .bh-mega-top-inner {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 4px;
		grid-template-columns: unset;
		width: 100%;
		flex-shrink: 0;
		min-height: var(--bh-header-height);
		height: var(--bh-header-height);
		padding-left: max(6px, env(safe-area-inset-left, 0px));
		padding-right: max(2px, env(safe-area-inset-right, 0px));
		box-sizing: border-box;
	}
	.bh-mega-mobile-trigger {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
	}
	.bh-mega-mobile-label {
		font-size: 14px;
		font-weight: 500;
		text-transform: lowercase;
		color: var(--bh-black);
	}
	.bh-header--mega .bh-header__burger {
		display: flex;
		width: 40px;
		height: 40px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 10px 8px;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
	}
	.bh-header--mega .bh-header__burger span {
		display: block;
		width: 24px;
		height: 1.5px;
		background: var(--bh-black);
	}
	.bh-header--mega .bh-mega-logo {
		flex: 1;
		min-width: 0; /* permet au logo de rétrécir pour laisser place au panier */
		display: flex;
		justify-content: center;
		grid-column: unset;
		justify-self: unset;
	}
	.bh-header--mega .bh-mega-bottom { display: none; }
	.bh-header--mega .bh-mega-menu { display: none; }
	.bh-header--mega .bh-mega-search--desktop {
		display: none;
		grid-column: unset;
	}
	.bh-mega-mobile-search { display: block; width: 100%; flex-shrink: 0; }
	.bh-header--mega .bh-mega-action--location { display: none; }
	.bh-header--mega .bh-mega-actions {
		grid-column: unset;
		justify-self: unset;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 0;
		min-width: 0;
	}
	.bh-header--mega .bh-mega-logo .bh-header__logo-img {
		max-height: 36px;
	}
	.bh-header--mega .bh-logo-text {
		font-size: 20px;
	}
}
@media (min-width: 1025px) {
	.bh-mobile-drawer { display: none !important; }
}
@media (max-width: 480px) {
	.bh-header--mega .bh-mega-top-inner {
		padding-left: max(4px, env(safe-area-inset-left, 0px));
		padding-right: max(2px, env(safe-area-inset-right, 0px));
	}
	.bh-header--mega .bh-logo-text { font-size: 20px; }
	.bh-mobile-drawer__header,
	.bh-mobile-drawer__search { padding: 12px 16px; }
	.bh-mobile-item__trigger,
	.bh-mobile-item__link,
	.bh-mobile-accordion__trigger,
	.bh-mobile-group__link { padding: 16px; }
	.bh-mobile-submenu__header { padding: 12px 16px; }
}