/* =========================================================================
   Batiself — Site header
   Fixed two-row header (top: logo / nav / search / utils — bottom: mega menu).
   Background states:
     - .bs-header--overlay (home, category pages): dark gradient over hero
     - .bs-header.is-scrolled (any page once scrolled): white .8 + blur
     - default (non-overlay pages): white .8 + blur from the start
   Tokens come from tokens.css. Geist comes from Google Fonts (header-enqueue).
   ========================================================================= */

.bs-header,
.bs-header * {
	box-sizing: border-box;
	font-family: var(--bs-font-family); 
}
 
/* ---------- Base ----------------------------------------------------------
   Bg + backdrop blur applied via a SINGLE ::before pseudo on .bs-header so
   the top row and the mega bar share one continuous blurred surface — no
   chance of subtle pixel-rendering differences between two independent
   blur contexts. The pseudo carries the property (not the parent itself),
   so it doesn't create a filter trap on the parent's descendants — the
   hover-dropdown panel below the mega bar keeps its own backdrop-filter
   working against the page content. */
.bs-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	color: var(--bs-color-text);
	transition: color .25s ease; 
}
.bs-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	transition: background-color .25s ease;
	pointer-events: none;
}

/* Admin bar offset. */
.admin-bar .bs-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .bs-header { top: 46px; }
}

/* Overlay variant — RESTING state on the home page.
   Transparent + frosted blur: the hero shows through, with a subtle
   backdrop blur for the glass effect. No dark gradient — that's reserved
   for the previous design. White text/icons because the hero is darker. */
.bs-header--overlay:not(.is-scrolled) {
	background-color: transparent;
	background-image: none;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #fff;
}
.bs-header--overlay:not(.is-scrolled)::before {
	background-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	transition: background-color .25s ease;
}

/* Overlay variant — INTERACTIVE state.
   The header turns solid white (with dark text + light search pill) as soon
   as the user interacts with it: hovering anywhere on the bar, focusing any
   field/dropdown inside, or opening the big MENU panel (body class added by
   header.js). All other rules already key off transparent vs. solid, so this
   is the only place the flip needs to be wired. */
.bs-header--overlay:not(.is-scrolled):hover,
.bs-header--overlay:not(.is-scrolled):focus-within,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled) {
	color: var(--bs-color-text);
}
.bs-header--overlay:not(.is-scrolled):hover::before,
.bs-header--overlay:not(.is-scrolled):focus-within::before,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled)::before {
	background-color: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
/* Search bar repaint to its light/non-overlay variant during interaction. */
.bs-header--overlay:not(.is-scrolled):hover .bs-header__search,
.bs-header--overlay:not(.is-scrolled):focus-within .bs-header__search,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled) .bs-header__search {
	background: var(--bs-color-bg-alt);
	border-color: var(--bs-color-border);
}
.bs-header--overlay:not(.is-scrolled):hover .bs-header__search-submit,
.bs-header--overlay:not(.is-scrolled):focus-within .bs-header__search-submit,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled) .bs-header__search-submit {
	background: var(--bs-color-text);
	color: #fff;
}
/* Restore the DARK inter-row separator (between top + mega rows) AND the
   dark bottom border of the header when the overlay flips to white — the
   white-tinted shadows below are invisible against the new white bg. */
.bs-header--overlay:not(.is-scrolled):hover .bs-header__top,
.bs-header--overlay:not(.is-scrolled):focus-within .bs-header__top,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled) .bs-header__top,
.bs-header--overlay:not(.is-scrolled):hover .bs-header__mega,
.bs-header--overlay:not(.is-scrolled):focus-within .bs-header__mega,
body.bs-mega-full-open .bs-header--overlay:not(.is-scrolled) .bs-header__mega {
	box-shadow: inset 0 -1px 0 var(--bs-color-border);
}

/* Inner row wrapper — base sizing. Specific layouts (grid) are defined per
   row below so the search and mega menu can be perfectly centered. */
.bs-header__inner {
	max-width: var(--bs-container-w);
	margin: 0 auto;
	padding: 0 var(--bs-container-pad);
	min-height: var(--bs-header-h);
} 

/* Top row — 3-column grid: left-cluster | search (centered) | utils (right).
   The two outer columns share remaining width equally → the search column
   stays perfectly centered relative to the viewport regardless of left/right
   content widths. */
.bs-header__top .bs-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
}
.bs-header__left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
/* .bs-header__search-wrap is the grid item now (it contains form + dropdown).
   The form keeps its pill styling, the wrap is a positioning context for
   the AJAX panel below. */
/* Fluid search width: shrinks on smaller desktops so the right-hand utility
   cluster (Magasins / Services / Projets / Contact + icons) keeps breathing
   room instead of getting squeezed. Capped tighter than before so the utils
   never feel cramped — they get the extra room. */
/* Search is the flexible middle column — grows/shrinks between the left
   (logo + Magasins) and right (Services/Projets/Contact/Pro + icons) clusters.
   min-width:0 lets it shrink gracefully instead of overflowing (fixes the
   squished-search bug); max-width caps it on very wide screens. */
.bs-header__top .bs-header__search-wrap { flex: 1 1 auto; min-width: 0; max-width: 600px; }
.bs-header__top .bs-header__utils { flex: 0 0 auto; margin-left: auto; }
 
/* ---------- Top row ----------------------------------------------------
   No local bg / blur anymore — inherits .bs-header::before for the unified
   backdrop. The element only carries the inter-row separator line and the
   stacking-context elevation needed by the search dropdown to render above
   the sibling mega bar. */
.bs-header__top {
	position: relative;
	z-index: 2;
	box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, .2);
	transition: box-shadow .25s ease;
}
/* Children positioned to render above the .bs-header::before pseudo. */
.bs-header__top > .bs-header__inner {
	position: relative;
}
.bs-header--overlay:not(.is-scrolled) .bs-header__top {
	box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, .35);
}

.bs-header__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
}
.bs-header__logo img,
.bs-header__logo .custom-logo {
	display: block;
	height: 44px;
	width: auto;
}
/* Brand wordmark — role: h3 (with black weight + tight tracking overrides) */
.bs-header__logo-text {
	color: inherit;
	text-decoration: none;
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-black);            /* h3 weight override */
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-tracking-tight);          /* h3 tracking override */
}

/* ---------- « Blog » link (left of the search bar) -------------------- */
.bs-header__blog {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--bs-color-primary-dark);
	text-decoration: none;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-nav-size);
	font-weight:    var(--bs-type-nav-weight);
	letter-spacing: var(--bs-type-nav-tracking);
	text-transform: var(--bs-type-nav-case);
	transition: color .15s ease;
}
.bs-header__blog:hover { color: var(--bs-color-primary); }
/* On mobile the drawer carries the Blog link → hide it from the top bar. */
@media (max-width: 900px) {
	.bs-header__blog { display: none; }
}

/* ---------- Primary nav (BRICO/DECO/JARDIN) ---------------------------- */
.bs-header__primary { display: block; }
.bs-primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}
/* Primary nav link — role: nav */
.bs-primary-menu a {
	display: inline-block;
	padding: 8px 0;
	color: inherit;
	text-decoration: none;
	transition: opacity .15s, color .15s;
	font-size:      var(--bs-type-nav-size);
	font-weight:    var(--bs-type-nav-weight);
	line-height:    var(--bs-type-nav-leading);
	letter-spacing: var(--bs-type-nav-tracking);
	text-transform: var(--bs-type-nav-case);
}
.bs-primary-menu a:hover,
.bs-primary-menu .current-menu-item a { opacity: .7; }
.bs-header:not(.bs-header--overlay) .bs-primary-menu .current-menu-item a,
.bs-header.is-scrolled .bs-primary-menu .current-menu-item a {
	color: var(--bs-color-primary);
	opacity: 1;
}

/* ---------- Search ----------------------------------------------------- */
.bs-header__search {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: 6px 6px 6px 18px;
	transition: background-color .25s, border-color .25s;
}
.bs-header:not(.bs-header--overlay) .bs-header__search,
.bs-header.is-scrolled .bs-header__search {
	background: var(--bs-color-bg-alt);
	border-color: var(--bs-color-border);
}
/* Search input — role: body-sm */
.bs-header__search-input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: 0;
	color: inherit;
	padding: 6px 0;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-type-body-sm-leading);
	letter-spacing: var(--bs-type-body-sm-tracking);
}
.bs-header__search-input::placeholder { color: inherit; opacity: .75; }
.bs-header__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: rgba(255, 255, 255, .9);
	color: var(--bs-color-text);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background .15s;
}
.bs-header:not(.bs-header--overlay) .bs-header__search-submit,
.bs-header.is-scrolled .bs-header__search-submit {
	background: var(--bs-color-text);
	color: #fff;
}
.bs-header__search-submit:hover { background: var(--bs-color-primary); color: #fff; }

/* ---------- Magasins popup wrapper (positions the popup under the trigger)
   ---------------------------------------------------------------------------
   Inline-flex + align-items center so the wrapper participates in the
   parent flex layout exactly like the sibling <a> .bs-util items. Without
   this, the wrapping <div> defaults to block and the Magasins button
   visually offsets from the other utility links. */
.bs-header__stores {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* ---------- Magasins popup (panel anchored under the "Magasins" button) */
.bs-stores-popup {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 1150;
	width: min(420px, 92vw);
	background: #fff;
	border: 1px solid var(--bs-color-border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
	color: var(--bs-color-text);
	overflow: hidden;
}
.bs-stores-popup[hidden] { display: none; }

/* Desktop dropdown: smooth fade-in (mobile ≤700px keeps its bottom-sheet
   slide animation, untouched). Driven by .bs-header__stores.is-open (JS). */
@media (min-width: 701px) {
	.bs-stores-popup {
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
	}
	.bs-stores-popup[hidden] { display: block; }
	.bs-header__stores.is-open .bs-stores-popup {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: opacity .2s ease, transform .2s ease;
	}
}

.bs-stores-popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-space-sm) var(--bs-space-md);
	border-bottom: 1px solid var(--bs-color-border);
}
.bs-stores-popup__title {
	margin: 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-stores-popup__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	padding: var(--bs-space-2xs);
	cursor: pointer;
	color: var(--bs-color-text);
}
.bs-stores-popup__close:hover { color: var(--bs-color-primary); }

.bs-stores-popup__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 60vh;
	overflow-y: auto;
}
.bs-stores-popup__item {
	display: flex;
	gap: var(--bs-space-sm);
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-space-sm) var(--bs-space-md);
	border-top: 1px solid var(--bs-color-border);
}
.bs-stores-popup__item:first-child { border-top: 0; }
.bs-stores-popup__item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.bs-stores-popup__name {
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-snug);
}
.bs-stores-popup__address,
.bs-stores-popup__hours {
	color: var(--bs-color-muted);
	font-size:      var(--bs-type-body-sm-size);
	line-height:    var(--bs-type-body-sm-leading);
}
.bs-stores-popup__phone {
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-semibold);
	line-height:    var(--bs-type-body-sm-leading);
	text-decoration: none;
}
.bs-stores-popup__phone:hover { color: var(--bs-color-primary-dark); }
.bs-stores-popup__cta {
	flex-shrink: 0;
	padding: 6px 14px;
	background: var(--bs-color-primary);
	color: #fff;
	text-decoration: none;
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	transition: background .2s ease;
	border-radius: 999px;
}
.bs-stores-popup__cta:hover { background: var(--bs-color-primary-dark); }

/* Header subtitle under the popup title. */
.bs-stores-popup__sub {
	margin: 4px 0 0;
	color: var(--bs-color-muted);
	font-size:   var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-snug);
}

/* Vertical stack for the "Choisir" + "Itinéraire" buttons — equal width
   (stretch) so the two pills always read as a matched pair. */
.bs-stores-popup__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	flex-shrink: 0;
	width: 200px;
	max-width: 45%;
}
/* "Choisir ce magasin" — outlined pill, flips to filled Blue when selected.
   Same dimensions as .bs-stores-popup__cta so both buttons look identical. */
.bs-stores-popup__pick,
.bs-stores-popup__cta {
	box-sizing: border-box;
	width: 100%;
	min-height: 36px;
	padding: 8px 14px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	line-height: 1.1;
	text-align: center;
}
.bs-stores-popup__pick {
	background: #fff;
	border: 1px solid var(--bs-color-primary);
	cursor: pointer;
	color: var(--bs-color-primary);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bs-stores-popup__pick:hover {
	background: var(--bs-color-primary);
	color: #fff;
}
/* Override the base .bs-stores-popup__cta's smaller padding from the older
   rule above — both buttons now share the unified pill dimensions. */
.bs-stores-popup__cta {
	border: 1px solid var(--bs-color-primary);
}
.bs-stores-popup__check { display: none; }
.bs-stores-popup__item.is-active {
	background: rgba(0, 91, 167, .04);
}
.bs-stores-popup__item.is-active .bs-stores-popup__pick {
	background: var(--bs-color-primary);
	color: #fff;
	border-color: var(--bs-color-primary);
}
.bs-stores-popup__item.is-active .bs-stores-popup__check { display: inline-flex; }

/* Footer CTA — emphasised filled button to the full /magasins/ page, with
   breathing room (margins) around it on every side. */
.bs-stores-popup__footer {
	margin-top: 4px;
	padding: 14px var(--bs-space-md) var(--bs-space-md);
	border-top: 1px solid var(--bs-color-border);
	display: flex;
}
.bs-stores-popup__all {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 20px;
	border-radius: 999px;
	background: var(--bs-color-primary);
	color: #fff;
	text-decoration: none;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-weight-bold);
	letter-spacing: var(--bs-tracking-wide);
	text-transform: uppercase;
	transition: background .2s ease, gap .2s ease;
}
.bs-stores-popup__all:hover { background: var(--bs-color-primary-dark); color: #fff; gap: 12px; }

/* Selected store label in the header — keep it compact, no wrap. */
.bs-util--store .bs-util__label strong {
	font-weight: var(--bs-weight-bold);
	color: var(--bs-color-primary);
}
.bs-header__stores[data-bs-pref-store]:not([data-bs-pref-store=""]) .bs-util--store .bs-util__label {
	white-space: nowrap;
}

/* Active state on the toggle when the popup is open */
.bs-header__stores.is-open .bs-util--store { color: var(--bs-color-primary); }

/* Mobile — popup becomes a full-width slide-down sheet anchored to the
   header. Big touch targets, scrollable. */
/* ---------- Mobile bottom-sheet behaviour ----------------------------------
   Below 700px the popup leaves the header dropdown idiom and becomes a
   full-width bottom sheet — easier to reach with the thumb, fully scrollable
   when there are many stores, and immune to the header overlay/drawer.
   Backdrop sits at z-index 1140; the sheet at 1150 (above mobile-drawer). */
@media (max-width: 700px) {
	.bs-stores-popup {
		position: fixed;
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		width: 100%;
		max-width: none;
		max-height: 88vh;
		border: 0;
		border-top: 1px solid var(--bs-color-border);
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -16px 48px rgba(0, 0, 0, .22);
		z-index: 1150;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		animation: bs-stores-sheet-in .22s cubic-bezier(.2, .8, .2, 1) both;
	}
	.bs-stores-popup[hidden] { display: none; }

	/* Backdrop — created via the popup's ::before so we don't need extra
	   markup. Only painted on mobile when the sheet is visible. */
	.bs-stores-popup::before {
		content: '';
		position: fixed;
		inset: 0;
		background: rgba(16, 54, 86, .45);
		z-index: -1;
		animation: bs-stores-backdrop-in .22s ease both;
	}

	.bs-stores-popup__header {
		position: sticky;
		top: 0;
		z-index: 2;
		background: #fff;
		padding: 14px var(--bs-space-md);
	}
	/* Visual drag-handle so the sheet feels native. */
	.bs-stores-popup__header::before {
		content: '';
		position: absolute;
		top: 6px;
		left: 50%;
		transform: translateX(-50%);
		width: 44px;
		height: 4px;
		border-radius: 999px;
		background: var(--bs-color-border);
	}
	.bs-stores-popup__close {
		min-width: 44px;
		min-height: 44px;
	}

	.bs-stores-popup__list {
		flex: 1 1 auto;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: env(safe-area-inset-bottom, 12px);
	}
	.bs-stores-popup__item {
		padding: 14px var(--bs-space-md);
		gap: 12px;
	}
	/* Choose-this-store CTA — full width on mobile, easier to tap. */
	.bs-stores-popup__pick,
	.bs-stores-popup__cta {
		min-width: 44px;
		min-height: 44px;
		flex-shrink: 0;
	}
}

@keyframes bs-stores-sheet-in {
	from { transform: translateY( 100% ); }
	to   { transform: translateY( 0 ); }
}
@keyframes bs-stores-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* On mobile the page must NOT scroll under the open sheet. The JS adds
   `.bs-stores-popup-open` on <body> when the sheet is visible. */
body.bs-stores-popup-open { overflow: hidden; touch-action: none; }

/* ---------- Utility links (Magasins / Services / Projets / Contact /
              Wishlist / Account / Cart) -------------------------------
   Two clusters: a horizontal nav of page links (.bs-header__utils-nav)
   visually unified under the .bs-util class, then a divider, then the
   account/wishlist/cart icon-only items. */
.bs-header__utils {
	display: flex;
	align-items: center;
	gap: var(--bs-space-sm);
	margin-left: auto;
}
.bs-header__utils-nav {
	display: flex;
	align-items: center;
	/* More breathing room between Magasins / Services / Projets / Contact. */
	gap: 32px;
}
.bs-header__utils-divider {
	width: 1px;
	height: 20px;
	background: currentColor;
	opacity: .2;
	display: inline-block;
}

/* ---- Utility item with dropdown submenu (Services / Projets / Contact)
   ---------------------------------------------------------------------------
   Wrapper is the positioning + hover context. The dropdown card mirrors the
   Magasins popup styling, anchored below the trigger. Shown on hover and on
   keyboard focus-within (accessible without JS). Desktop-only — the trigger
   links hide below 1300px, mobile relies on the MENU mega panel. */
.bs-header__util {
	position: relative;
	display: inline-flex;
	align-items: center;
}
/* Hide the leading icons on the page-link util items (Magasins, Services,
   Projets, Contact) so the trailing caret reads clearly as "this opens a
   dropdown". Keep .bs-util__caret visible — that's the affordance we want
   the user to spot first. */
.bs-util--link > svg:not(.bs-util__caret) {
	display: none;
}
/* Magasins keeps its location pin, shown to the left of the store name. */
.bs-util--store > svg:not(.bs-util__caret) {
	width: 16px;
	height: 16px;
	color: var(--bs-color-primary);
}
.bs-util__caret {
	width: 12px;
	height: 12px;
	margin-left: 4px;
	transition: transform .2s ease;
	opacity: .85;
}
.bs-header__util:hover .bs-util__caret,
.bs-header__util:focus-within .bs-util__caret {
	transform: rotate(180deg);
	opacity: 1;
}

.bs-util-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(6px);
	z-index: 1150;
	min-width: 230px;
	padding: var(--bs-space-xs);
	background: #fff;
	border: 1px solid var(--bs-color-border);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .14);
	border-radius: 0;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
/* Hover-bridge: a transparent pad above the menu so the cursor can travel
   from the trigger to the menu without crossing a dead gap. */
.bs-util-menu::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}
.bs-header__util:hover .bs-util-menu,
.bs-header__util:focus-within .bs-util-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
}

.bs-util-menu__item {
	display: block;
	padding: 9px 14px;
	border-radius: 8px;
	color: var(--bs-color-text);
	text-decoration: none;
	white-space: nowrap;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-sm-size);
	font-weight:    var(--bs-type-body-sm-weight);
	line-height:    var(--bs-leading-snug);
	letter-spacing: var(--bs-type-body-sm-tracking);
	transition: background .15s ease, color .15s ease;
}
.bs-util-menu__item:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary); }
.bs-util-menu__item--all {
	color: var(--bs-color-primary);
	font-weight: var(--bs-weight-bold);
	border-bottom: 1px solid var(--bs-color-border);
	border-radius: 8px 8px 0 0;
	margin-bottom: 4px;
}

/* Utility link — role: meta. Button reset so a <button> looks identical
   to an <a> with the same class (Magasins is a button; Services / Projets
   / Contact are anchors). line-height locked to 1 so the SVG glyph and
   the text label share the exact same vertical center — otherwise the
   meta role's default 1.25 leading offsets text baseline against the
   svg, making Magasins look misaligned vs the anchor siblings. */
.bs-util {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	vertical-align: middle;
	transition: color .15s ease, opacity .15s ease;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-meta-size);
	font-weight:    var(--bs-type-meta-weight);
	line-height:    1;
	letter-spacing: var(--bs-type-meta-tracking);
}
.bs-util > svg {
	flex-shrink: 0;
	display: block;
}
.bs-util:hover { color: var(--bs-color-primary); opacity: 1; }
.bs-util__label { display: inline-block; }
.bs-util--icon {
	padding: 4px;
	/* Defensive: force visibility regardless of inherited state. The icons
	   live in the right cluster of the top row and must always render — they
	   inherit color from the header, which is white at rest on overlay and
	   black on hover/interactive (so they remain visible against the matching
	   bg on every variant). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
}
.bs-util--icon:hover { color: var(--bs-color-primary); }
/* Mobile search icon — hidden on desktop (desktop has the full search bar). */
.bs-util--search { display: none; }
/* Cart / wishlist badge — role: caption */
.bs-util__badge {
	position: absolute;
	top: -4px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--bs-color-primary);
	color: #fff;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size:      var(--bs-type-caption-size);
	font-weight:    var(--bs-type-caption-weight);
	line-height:    var(--bs-type-caption-leading);
	letter-spacing: var(--bs-type-caption-tracking);
}

/* ---------- Burger (mobile) -------------------------------------------- */
.bs-header__burger {
	display: none;
	flex-direction: column;
	justify-content: space-between;
	width: 28px;
	height: 22px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	/* Neutralise Safari's default button rendering. */
	-webkit-appearance: none;
	appearance: none;
}
.bs-header__burger span {
	display: block;
	/* Explicit full width — the spans are EMPTY, so relying on flex stretch
	   left them 0px wide (invisible) on Safari mobile. */
	width: 100%;
	height: 2px;
	/* Always dark — the burger only ever shows on the white mobile bar, so a
	   fixed dark bar is correct and avoids the currentColor pitfall (it was
	   white/invisible on overlay pages). */
	background: var(--bs-color-text);
	border-radius: 2px;
	transition: transform .2s, opacity .2s;
}

/* ---------- Mega menu (bottom row) -------------------------------------
   The dropdown panel is a descendant — backdrop-filter on this element
   would create a filter context that prevents the panel from blurring the
   page directly. So we paint the bg + blur on a ::before pseudo-element
   (which has its own isolated rendering), and the element itself stays
   filter-free for the panel's sake. */
/* No local bg / blur anymore — inherits .bs-header::before for the unified
   backdrop. Only the bottom separator line + the positioned-relative needed
   by the dropdown panel anchoring remain here. */
.bs-header__mega {
	position: relative;
	box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, .2);
	transition: box-shadow .25s ease;
}

/* ---- Dim overlay behind the dropdown panel --------------------------------
   Fixed full-viewport black layer sitting BETWEEN the page content (z auto)
   and the header (z 1000). Becomes visible whenever any top-level mega item
   is hovered, leveraging the native :has() selector. */
.bs-mega-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility 0s linear .25s;
}
body:has(.bs-mega-menu > .menu-item:hover) .bs-mega-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}
/* Children must be positioned to render ABOVE the absolutely-positioned
   ::before (otherwise non-positioned content stacks below positioned
   siblings, hiding the menu items). `position: relative` is enough — no
   z-index needed thanks to document order. */
.bs-header__mega > .bs-header__inner,
.bs-header__mega > .bs-header__inner--mega {
	position: relative;
}
.bs-header--overlay:not(.is-scrolled) .bs-header__mega {
	box-shadow: inset 0 -0.5px 0 rgba(255, 255, 255, .35);
} 
/* Mega row — 2-column grid: toggle (auto) | nav (fills ALL remaining width).
   The nav uses the full container width so the category items spread out with
   breathing room instead of clustering in the centre (long labels like
   « Électroménager » were touching their neighbours). */
.bs-header__inner--mega {
	min-height: 56px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}
.bs-mega__toggle { grid-column: 1; justify-self: start; align-self: stretch; }
.bs-mega__nav    { grid-column: 2; }
/* Mega menu toggle — role: button */ 
.bs-mega__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bs-color-primary);
	color: #fff;
	border: 0;
	/* Square, full-bleed block: no rounding + align-self:stretch (above) makes
	   it fill the FULL height of the mega bar. Height comes from the stretch,
	   so only horizontal padding here. */
	border-radius: 0;
	padding: 0 24px;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    1.18;
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
.bs-mega__toggle:hover { background: var(--bs-color-primary-dark); color: #fff; }
/* Pressed / active (full menu open) → Batiself Yellow (#FAB800), dark text.
   - :active gives instant visual feedback on the click itself.
   - aria-expanded="true" + body.bs-mega-full-open are kept by the JS while
     the full menu panel is open so the pill stays yellow throughout. */
.bs-mega__toggle:active,
.bs-mega__toggle[aria-expanded="true"],
body.bs-mega-full-open .bs-mega__toggle {
	background: var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
}
.bs-mega__toggle:active:hover,
.bs-mega__toggle[aria-expanded="true"]:hover,
body.bs-mega-full-open .bs-mega__toggle:hover {
	background: var(--bs-color-accent);
	color: var(--bs-color-primary-dark);
}
/* Hamburger to the left of « MENU ».
   Drawn in CSS (::before mask) rather than relying on the markup <svg>, so it
   shows regardless of header.php deploy / page-cache state. `currentColor`
   makes it follow the button text colour (white at rest, dark on the open/
   active state). The markup .bs-mega__icon span is hidden to avoid doubling. */
.bs-mega__icon { display: none; }
.bs-mega__toggle::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}

/* Items are contiguous (no gap) so the mouse never crosses dead space between
   them — that would close the active panel and reopen the next, causing a
   flicker. Visual spacing comes from horizontal padding on each link below. */
.bs-mega-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	/* NEVER wrap onto 2 lines — long labels are allowed to wrap WITHIN their
	   own item (multi-line label) but the row of items stays single-line. */
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	justify-content: center;
	align-items: stretch;
}
/* Mega top-level item — role: meta (sm + medium for a softer feel than primary nav) */
.bs-mega-menu a {
	display: inline-block;
	padding: 6px 0;
	color: inherit;
	text-decoration: none;
	transition: opacity .15s;
	font-size:      var(--bs-type-meta-size);
	font-weight:    var(--bs-type-meta-weight);
	line-height:    var(--bs-type-meta-leading);
	letter-spacing: var(--bs-type-meta-tracking);
}
.bs-mega-menu a:hover { opacity: .7; }

/* « Offres » or any item flagged with the .is-promo CSS class. */
.bs-mega-menu .is-promo a,
.bs-mega-menu .menu-item-is-promo a {
	color: var(--bs-color-promo);
	font-weight: var(--bs-weight-bold);
}

/* ============================== MEGA DROPDOWN PANEL ====================
   Native WordPress nav-menu markup (nested <ul>/<li>) styled with pure CSS:
     - depth 1 (top items)      → .bs-mega-menu > .menu-item
     - depth 2 (section titles) → .bs-mega-menu > .menu-item > .sub-menu > .menu-item
     - depth 3 (sub-links)      → .bs-mega-menu > .menu-item > .sub-menu .sub-menu .menu-item

   The panel is anchored to the mega bar (.bs-header__mega), spans full width
   and opens on hover of a top-level item. Use the WP CSS Classes field to
   add `is-promo` for the orange "Offres" item.
   ======================================================================= */

.bs-header__mega { position: relative; }

/* Top-level item background highlight on hover. Horizontal padding doubles
   as visual spacing between items (since the gap was removed).
   IMPORTANT: top-level <li> stays position:static so that the .sub-menu
   panel's `position: absolute` walks up to .bs-header__mega instead of
   anchoring to the <li>. That keeps the panel full-viewport-width and
   physically glued to the bottom of the mega bar. */
.bs-mega-menu > .menu-item {
	position: static;
	/* Equal share of the row → 12 items distribute evenly. min-width: 0
	   lets long labels shrink + wrap rather than push the row to a 2nd line. */
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
	display: flex;
	align-items: stretch;
}
.bs-mega-menu > .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Full-width nav gives each item a wider slot → more side padding reads
	   cleanly even for long labels. */
	padding: 14px 14px;
	/* Labels are allowed to wrap to 2 lines INSIDE an item (e.g. "Revêtement
	   de sol, mur et peinture") without pushing the row onto a second line. */
	white-space: normal;
	line-height: 1.18;
	transition: background-color .15s, color .15s;
}
@media (max-width: 1200px) {
	.bs-mega-menu > .menu-item > a {
		padding: 14px 10px;
		font-size: var(--bs-text-xs); /* 11px — shrinks gracefully on narrower desktops */
	}
}

/* ---- Hover bridge ----------------------------------------------------
   Invisible 1px strip sitting just below every top-level mega item.
   Placed on the <a> (not the <li>) so the <li> can keep position:static,
   yet .menu-item:hover stays true because the <a> is a descendant of the
   <li> and pseudo-elements participate in :hover. With the panel now
   docked at top:100% of .bs-header__mega there is in theory no gap, but
   the bridge survives sub-pixel rounding and admin-bar offsets. */
.bs-mega-menu > .menu-item > a::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 12px;
}
.bs-mega-menu > .menu-item:hover > a {
	background: var(--bs-color-primary);
	color: #fff;
	opacity: 1;
}

/* The panel itself — first-level sub-menu.
   - Anchored to the BOTTOM of .bs-header__mega via position: absolute +
     top: 100%, so it stays physically glued to the header regardless of
     the actual header height (varies with logo height, search bar, zoom,
     admin-bar, etc). Previously used position: fixed with a hardcoded
     calc that broke when the top row exceeded --bs-header-h.
   - .bs-header__mega is a direct child of .bs-header (position: fixed;
     left: 0; right: 0) → the panel's left/right: 0 still spans 100vw.
   - Content (grid of columns) aligns horizontally with .home-container
     used everywhere else on the site. Achieved by a 2-term padding:
       term 1: (100vw - container) / 2   → centers a container-sized box
       term 2: + var(--bs-container-pad) → matches .home-container's own
                                            internal 24px horizontal pad
     Net effect: the grid starts at the same X coordinate as any
     home-container content on the page. On narrow screens the max() falls
     back to a flat --bs-container-pad on each side.
   - min-height keeps the panel size stable when switching between items */
.bs-mega-menu > .menu-item > .sub-menu {
	position: absolute;
	top: 100%;
	/* Full-bleed escape — the panel's positioning ancestor is
	   .bs-header__inner--mega (it owns `position: relative` so its
	   children render above the .bs-header__mega::before backdrop),
	   but that inner is capped at --bs-container-w. Using `left: 0;
	   right: 0` would anchor the panel to the narrowed container
	   instead of the viewport. We anchor `left` to the container's
	   horizontal center (50%) then pull it back by 50vw + force
	   width: 100vw, so the panel spans the full screen regardless of
	   how wide / narrow / off-center its parent is. */
	left: 50%;
	right: auto;
	width: 100vw;
	margin-left: -50vw;
	z-index: 200;
	/* The panel itself is now just an invisible positioning/hover layer — only
	   the list boxes inside carry a background (see .bs-mega-flyout__nav /
	   __pane). Small top gap so the floating list sits just under the bar. */
	padding-top: 10px;
	padding-bottom: 40px;
	/* Inner content stays aligned with the canonical site container
	   (.home-container / .bs-header__inner). The padding centers a
	   container-sized box inside the now-100vw panel, then adds the
	   container's own 24px gutter on each side so columns line up
	   exactly with the rest of the site. */
	padding-left:  max(
		var(--bs-container-pad),
		calc((100vw - var(--bs-container-w)) / 2 + var(--bs-container-pad))
	);
	padding-right: max(
		var(--bs-container-pad),
		calc((100vw - var(--bs-container-w)) / 2 + var(--bs-container-pad))
	);
	/* Locked height: every panel — short (Automobile) or full (Jardin) —
	   renders at exactly the same size so hovering between categories
	   never makes the visible area jump. min == max → fixed. Sized to the
	   tallest sub-category list (Jardin = 7 rows) + the CTA so there's no
	   large empty area below the list. */
	height: min(460px, 82vh);
	min-height: min(460px, 82vh);
	max-height: min(460px, 82vh);
	list-style: none;

	/* No panel background — only the list boxes are visible (charte). */
	background: transparent;
	color: var(--bs-color-text);

	/* Single full-width cell holding the flyout; the list boxes float inside. */
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 1fr;
	align-items: stretch;
	overflow: hidden;

	visibility: hidden;
	opacity: 0;
	/* Close: small delay on visibility so the next item's panel can fade in
	   ON TOP of this one when switching quickly — visually continuous. */
	transition: opacity .2s ease, visibility 0s linear .2s;
	pointer-events: none;
}
.bs-mega-menu > .menu-item:hover > .sub-menu {
	visibility: visible;
	opacity: 1;
	/* Open: instant visibility, fade in opacity. */
	transition: opacity .2s ease, visibility 0s linear 0s;
	/* IMPORTANT: the panel stays pointer-transparent even when open — its
	   100vw × 460px area is mostly empty, and capturing hover there is what
	   kept the menu open when the mouse moved to the SIDE. Only the flyout box
	   (.bs-mega-flyout, below) re-enables pointer events, so hover is held by
	   the visible content + the category itself, not the empty panel. */
	pointer-events: none;
}
/* Recherche active : ne PAS ouvrir le méga-menu au survol des items quand on
   déplace la souris de l'input vers le panneau de résultats (#75). Les liens
   de la nav restent cliquables — seul le déroulé au survol est neutralisé. */
body.is-search-active .bs-mega-menu > .menu-item:hover > .sub-menu {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	transition: none !important;
}
/* Admin-bar offset no longer needed: the panel uses position: absolute;
   top: 100% relative to .bs-header__mega, which is itself shifted down by
   the .admin-bar .bs-header { top: 32px } rule. The panel automatically
   follows the header. */

/* ========================== MEGA FLYOUT (style Castorama) ==============
   Two UNIFORM, left-aligned columns of full-width rows (label left, chevron
   right, thin separators). Left = depth-2 sub-categories (active row filled in
   charte Blue); right = the active sub-category's depth-3 sub-sub-categories.
   Sits in row 1 of the panel grid; the CTA stays in row 2. Built by header.js. */
.bs-mega-flyout {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;           /* hug content → header.js shifts it under the hovered top category */
	position: relative;            /* positioning context for the dropped pane */
	min-width: 0;
	min-height: 0;
	/* The flyout box stretches to the full panel height (for the JS column-fit
	   calc), so it must NOT itself capture hover — otherwise its invisible area
	   below the sub-menu card keeps the menu open. Only the VISIBLE parts (nav
	   card, active pane) + the bridges re-enable pointer events below. */
	pointer-events: none;
	/* Width of each uniform column. Single source → the left list's width and
	   the right column's left offset always match exactly. */
	--bs-fly-col: clamp(240px, 22vw, 300px);
}
/* Invisible bridge above the box: keeps the hover continuous while the mouse
   crosses the small gap between the header and the submenu (so it doesn't flash
   shut), without re-capturing the whole panel. */
.bs-mega-flyout::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
	pointer-events: auto;
}
.bs-mega-flyout a:hover { opacity: 1; }   /* neutralise the generic .bs-mega-menu a:hover dim */

/* LEFT list — sub-categories. Floating white box with its own padding + shadow
   (the panel behind it is transparent). */
.bs-mega-flyout__nav {
	list-style: none;
	margin: 0;
	padding: 8px;
	width: var(--bs-fly-col);
	box-sizing: border-box;
	position: relative;            /* anchor the hover bridge to the sub-sub menu */
	pointer-events: auto;          /* the visible card captures hover */
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(16, 54, 86, .16);
}
/* Invisible bridge over the gap between the sub-menu (this nav) and the
   sub-sub-menu pane on its right — so the mouse can cross the visible space
   without the flyout closing. Spans the full nav height (the pane drops to
   whichever row is hovered). Slightly wider than the 10px gap. */
.bs-mega-flyout__nav::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: -14px;
	width: 14px;
	pointer-events: auto;
}

/* RIGHT column — absolutely placed so the active pane can DROP to the level of
   the hovered sub-category (header.js sets its `top`). Sits just right of the
   left list (small gap). Only ever visible while a sub-category is hovered. */
.bs-mega-flyout__panes {
	position: absolute;
	top: 0;
	left: calc(var(--bs-fly-col) + 10px);
	width: var(--bs-fly-col);
	min-width: 0;
}

/* Shared row — identical in BOTH columns so they read uniform. No separators. */
.bs-mega-flyout .bs-mega-flyout__nav-item > a,
.bs-mega-flyout .bs-mega-flyout__sublist > .menu-item > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 16px;
	border-radius: 0;
	color: var(--bs-color-text);
	text-decoration: none;
	font-size:   var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-medium);
	line-height: 1.3;
	transition: background-color .12s ease, color .12s ease;
}
.bs-mega-flyout .bs-mega-flyout__nav-item > a:hover,
.bs-mega-flyout .bs-mega-flyout__sublist > .menu-item > a:hover {
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary);
}
/* Active sub-category — filled Blue (charte), white label + chevron. */
.bs-mega-flyout__nav-item.is-active > a {
	background: var(--bs-color-primary);
	color: #fff;
	font-weight: var(--bs-weight-bold);
}
.bs-mega-flyout__chev { flex: 0 0 16px; }
.bs-mega-flyout__nav-item.is-active .bs-mega-flyout__chev { color: #fff; }

.bs-mega-flyout__pane { display: none; }
/* Right column shows ONLY while its sub-category is hovered (header.js toggles
   .is-active on hover and clears it when the menu closes). NO scroll: a list
   taller than the panel is flowed into extra columns by header.js (column-count
   + a bounded height) so everything stays visible at a glance. */
.bs-mega-flyout__pane.is-active {
	display: block;
	padding: 8px;
	box-sizing: border-box;
	pointer-events: auto;          /* the visible sub-sub card captures hover */
	background: #fff;
	border: 1px solid var(--bs-color-border);   /* sub-sub menu = a defined card */
	border-radius: 0;
	box-shadow: 0 14px 34px rgba(16, 54, 86, .16);
	animation: bs-flyout-fade .2s cubic-bezier(.2, .8, .2, 1);
}
@keyframes bs-flyout-fade {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}
/* The left row already links to the sub-category → no separate header. */
.bs-mega-flyout .bs-mega-flyout__pane-head { display: none; }
/* column-fill:auto → when header.js bounds the height + sets a column-count,
   the list fills column 1 top-to-bottom, then spills into the next column. */
.bs-mega-flyout__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
	column-gap: 0;
	column-fill: auto;
}
.bs-mega-flyout__sublist > .menu-item { break-inside: avoid; }
/* Safety — a depth-3 with its own children (depth-4) renders faint + indented. */
.bs-mega-flyout__sublist .sub-menu { list-style: none; margin: 0; padding: 0 0 0 18px; }
.bs-mega-flyout .bs-mega-flyout__sublist .sub-menu a {
	padding: 7px 22px;
	color: var(--bs-color-muted);
	font-size: var(--bs-text-xs);
	text-align: left;
}

/* Libellés du sous-menu / sous-sous-menu : alignés à gauche, MÊME sur 2 lignes.
   Sans ça, ils héritent du `text-align:center` des items de tête de la barre
   méga (.bs-mega-menu > .menu-item) → un libellé long se centrait sur 2 lignes. */
.bs-mega-flyout,
.bs-mega-flyout .bs-mega-flyout__nav-item > a,
.bs-mega-flyout .bs-mega-flyout__sublist > .menu-item > a { text-align: left; }

@media (max-width: 900px) {
	.bs-mega-flyout { --bs-fly-col: 100%; }
	.bs-mega-flyout__panes { position: static; left: auto; width: 100%; }
	.bs-mega-flyout__nav { width: 100%; }
}

/* Slider container — left column, row 1. Holds the Swiper + nav buttons.
   Stretches to fill the panel's row 1 so every slide has the same height. */
.bs-mega-slider {
	position: relative;
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	min-height: 0;
	height: 100%;
	list-style: none;
	/* Reserve space on each side for the prev/next buttons. */
	padding: 0 56px;
}
/* ---- Native scroll-snap grid (replaces the old Swiper Grid) -------------
   The depth-2 sub-categories are chunked by JS (header.js) into pages of 10.
   Each page is a 5-col × 2-row CSS grid; pages line up horizontally in a
   scroll-snap container. The prev/next arrows call scrollBy(clientWidth) →
   exactly one page per click, and scroll-snap locks onto the page edge.
   ZERO JS library — removes the ~180 KB Swiper bundle from every page that
   only had it for this menu.

   --bs-mega-row-gap / --bs-mega-col-gap tune the grid breathing room. */
.bs-mega-slider--grid {
	--bs-mega-row-gap: 48px;
	--bs-mega-col-gap: 28px;
}
.bs-mega-grid {
	height: 100%;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Hide the native scrollbar — the arrows drive the scroll. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.bs-mega-grid::-webkit-scrollbar { display: none; }

/* One page = a 5-col × 2-row grid filling the full slider width + height.
   CSS grid's default row-first flow places items 1-5 on row 1, 6-10 on
   row 2 — the same reading order Swiper's fill:'row' produced. */
.bs-mega-grid__page {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-template-rows: repeat(2, calc((100% - var(--bs-mega-row-gap)) / 2));
	column-gap: var(--bs-mega-col-gap);
	row-gap: var(--bs-mega-row-gap);
	align-content: start;
}

/* Each cell = one depth-2 menu item. A long depth-3 list scrolls INSIDE the
   cell instead of stretching the panel taller than its locked height. */
.bs-mega-grid__page > .menu-item {
	margin: 0;
	min-width: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	min-height: 0;
	text-align: left;
	padding-right: 4px;
}
.bs-mega-grid__page > .menu-item > .sub-menu {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--bs-color-border) transparent;
}

/* Prev / next buttons — circular, on the panel edges, vertically centered
   against the slider area. Filled Batiself Blue so they read clearly. */
.bs-mega-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--bs-color-primary);
	border: 0;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(16, 54, 86, .14);
	transition: background .2s ease, transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.bs-mega-slider__nav:hover {
	background: var(--bs-color-primary-dark);
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 6px 18px rgba(16, 54, 86, .22);
}
.bs-mega-slider__nav svg { width: 18px; height: 18px; }
.bs-mega-slider__nav--prev { left: 0; }
.bs-mega-slider__nav--next { right: 0; }
/* Fade an arrow out at its scroll extreme; hide both when a single page fits
   (set by header.js — the watchOverflow equivalent). */
.bs-mega-slider__nav.is-disabled {
	opacity: 0;
	pointer-events: none;
}
.bs-mega-slider--single .bs-mega-slider__nav {
	display: none;
}

/* Dropdown section title (depth 2) — kept STRICTLY on one line so a long
   label doesn't push the slide taller than its siblings and break the
   column alignment of the grid. Truncated with an ellipsis if it overflows;
   when JS detects overflow it adds .is-marquee — the title text starts
   scrolling horizontally after 1s to reveal what was cropped. */
.bs-mega-grid__page > .menu-item > a {
	position: relative;
	display: block;
	max-width: 100%;
	padding: 0 0 14px;
	margin: 0 0 12px;
	border-bottom: 1px solid var(--bs-color-border);
	color: var(--bs-color-text);
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 1;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-text-md);
	font-weight:    var(--bs-type-h3-weight);
	line-height:    var(--bs-type-h3-leading);
	letter-spacing: var(--bs-type-h3-tracking);
	text-transform: var(--bs-type-h3-case);
}
.bs-mega-grid__page > .menu-item > a:hover {
	color: var(--bs-color-primary);
}

/* Marquee wrapper — wraps the title text once JS detects overflow. */
.bs-mega-slider__title-text {
	display: inline-block;
	will-change: transform;
}
/* When the title overflows: drop the ellipsis (text scrolls instead),
   then animate the inner span back and forth so the full label is
   revealed. The CSS variable --bs-marquee-offset (set by JS) is the EXACT
   amount of pixels the text needs to slide left to show its tail. */
.bs-mega-grid__page > .menu-item > a.is-marquee {
	text-overflow: clip;
}
.bs-mega-grid__page > .menu-item > a.is-marquee .bs-mega-slider__title-text {
	/* 4s back-and-forth (was 8s) — visibly faster reveal of the tail. */
	animation: bs-mega-title-marquee 4s linear 1s infinite alternate;
}
@keyframes bs-mega-title-marquee {
	/* Brief pauses at each end so the reader can catch both extremes. */
	0%   { transform: translateX(0); }
	14%  { transform: translateX(0); }                              /* hold ~0.55s at the start */
	86%  { transform: translateX(var(--bs-marquee-offset, 0)); }    /* hold ~0.55s at the end */
	100% { transform: translateX(var(--bs-marquee-offset, 0)); }
}
/* Pause the marquee while the user actively hovers the title — easier to
   read at rest. */
.bs-mega-grid__page > .menu-item > a.is-marquee:hover .bs-mega-slider__title-text {
	animation-play-state: paused;
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.bs-mega-grid__page > .menu-item > a.is-marquee .bs-mega-slider__title-text {
		animation: none;
		transform: translateX(0);
	}
}

/* Link list — depth 3 ul. Left-aligned column. */
.bs-mega-grid__page > .menu-item > .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
}
.bs-mega-grid__page > .menu-item > .sub-menu > .menu-item {
	margin: 0;
	list-style: none;
	text-align: left;
	max-width: 100%;
}
.bs-mega-grid__page > .menu-item > .sub-menu > .menu-item > a {
	display: block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Dropdown link (depth 3) — role: body. Items live inside the slider.
   Padding tightened (was 4px → 2px) so the depth-3 list packs more options
   per visible row without crowding. */
.bs-mega-grid__page > .menu-item > .sub-menu > .menu-item > a {
	display: inline-block;
	padding: 2px 0;
	color: var(--bs-color-text);
	text-decoration: none;
	opacity: 1;
	transition: color .15s;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-type-body-leading);
	letter-spacing: var(--bs-type-body-tracking);
	text-transform: var(--bs-type-body-case);
}
.bs-mega-grid__page > .menu-item > .sub-menu > .menu-item > a:hover {
	color: var(--bs-color-primary);
}

/* Only nested items get a positioning context (kept static at top-level so the
   first-level .sub-menu panel positions against .bs-header__mega → full viewport width). */
.bs-mega-menu .sub-menu .menu-item { position: relative; }

/* ---- Mega feature card (injected by JS) — rightmost column, spans both rows.
   align-self: stretch overrides the panel's `align-items: start` so the card
   fills the full grid height (i.e. the panel height minus its padding). */
/* DEPRECATED — the feature image card was removed from the mega dropdowns.
   Rule kept (display:none) so any stale DOM left by a cached JS bundle still
   renders cleanly until the new header.js takes over on next page load. */
.bs-mega-feature { display: none; }

.bs-mega-feature--legacy {
	grid-column: 2;
	grid-row: 1;
	align-self: stretch;
	margin: 0;
	list-style: none;
}
a.bs-mega-feature__link {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	background-color: var(--bs-color-bg-alt);
	font-weight: var(--bs-weight-regular);
	opacity: 1;
}
.bs-mega-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.bs-mega-feature__link:hover .bs-mega-feature__img { transform: scale(1.03); }
.bs-mega-feature__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}
/* Mega feature card title — role: h2 (sits on a photo, large impact) */
.bs-mega-feature__title {
	position: absolute;
	left: 24px;
	right: 64px;
	top: 24px;
	color: #fff;
	z-index: 1;
	text-align: left;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-text-xl);                 /* h2 size override: xl, more compact than full h2 */
	font-weight:    var(--bs-weight-bold);             /* h2 weight override */
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
}
.bs-mega-feature__cta {
	position: absolute;
	right: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff;
	color: var(--bs-color-text);
	display: grid;
	place-items: center;
	z-index: 1;
	font-size: 18px;  /* glyph sizing — not a typographic role */
}

/* ---- Mega CTA "Découvrir toute la catégorie" — full-width row below items.
   No explicit grid-row → auto-flow places it after the last item, but with
   grid-column: 1 / -2 it can ONLY fit in a free row that spans cols 1-4. */
.bs-mega-cta-wrap {
	grid-column: 1 / -2;
	margin: var(--bs-space-md) 0 0;
	list-style: none;
	justify-self: start;
}
/* Same shape as the site-wide primary CTA (.home-btn--primary). Selector
   `a.bs-mega-cta` lifts specificity above the generic `.bs-mega-menu a` rule
   that would otherwise reset padding / font-weight to the link defaults. */
/* Mega CTA "Découvrir toute la catégorie" — role: button */
a.bs-mega-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--bs-color-primary);
	color: #fff;
	border: 0;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s;
	opacity: 1;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-button-size);
	font-weight:    var(--bs-type-button-weight);
	line-height:    var(--bs-type-button-leading);
	letter-spacing: var(--bs-type-button-tracking);
	text-transform: var(--bs-type-button-case);
}
a.bs-mega-cta:hover {
	background: var(--bs-color-primary-dark);
	opacity: 1;
}

/* =========================================================================
   FULL MEGA PANEL — "MENU" button opens an overview of every category.
   ---------------------------------------------------------------------------
   Same visual language as the hover dropdown (full-bleed, white-blur,
   container-aligned content) but with a different inner layout: each
   top-level menu item becomes a column, depth-2 items list inline below.
   ========================================================================= */
.bs-mega-full {
	position: absolute;
	/* Floating CONTAINED box with exterior margins on every side (same design
	   language as the hover sub-menus) — no longer full-bleed. Width caps at the
	   site container, and leaves a 24px margin per side on narrower screens. */
	--bs-megafull-w: min(var(--bs-container-w), calc(100vw - 48px));
	top: calc(100% + 12px);
	left: 50%;
	width: var(--bs-megafull-w);
	margin-left: calc(var(--bs-megafull-w) / -2);
	/* Above the hover dropdown (200) and the backdrop (999 on body),
	   but below the .bs-header__top (z-index of the header is 1000). */
	z-index: 1100;

	background: rgba(255, 255, 255, .98);
	-webkit-backdrop-filter: blur(28px);
	backdrop-filter: blur(28px);
	box-shadow: 0 30px 60px rgba(0, 0, 0, .14);
	color: var(--bs-color-text);

	/* Scroll inside the panel if it overflows the viewport — leaves room
	   for the fixed header above. Falls back gracefully on short screens. */
	max-height: calc(100vh - var(--bs-header-h) - 80px);
	overflow-y: auto;
	/* Smooth fade-in when the MENU panel opens (driven by body.bs-mega-full-open
	   set by header.js). Visibility handled here, not the [hidden] attribute. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .24s ease, transform .24s ease, visibility 0s linear .24s;
}
.bs-mega-full[hidden] { display: block; }   /* visibility handled by the fade above */
body.bs-mega-full-open .bs-mega-full {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity .24s ease, transform .24s ease;
}
@media (prefers-reduced-motion: reduce) {
	.bs-mega-full { transition: none; transform: none; }
}

.bs-mega-full__inner {
	max-width: var(--bs-container-w);
	margin: 0 auto;
	padding: 40px var(--bs-container-pad) 56px;
	box-sizing: border-box;
}

.bs-mega-full__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--bs-space-md);
	margin-bottom: var(--bs-space-lg);
	padding-bottom: var(--bs-space-md);
	border-bottom: 1px solid var(--bs-color-border);
}
/* Eyebrow + title shown as white text on a filled blue (charte) rectangle. */
.bs-mega-full__eyebrow {
	display: inline-block;
	margin: 0 0 8px;
	padding: 6px 12px;
	background: var(--bs-color-primary);
	color: #fff;
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
/* Title sits on its OWN line below the eyebrow: blue text, no background,
   no uppercase. */
.bs-mega-full__title {
	display: block;
	margin: 8px 0 0;
	color: var(--bs-color-primary);
	font-size:      var(--bs-type-h2-size);
	font-weight:    var(--bs-type-h2-weight);
	line-height:    var(--bs-type-h2-leading);
	letter-spacing: var(--bs-type-h2-tracking);
	text-transform: none;
}
.bs-mega-full__close {
	width: 40px;
	height: 40px;
	background: var(--bs-color-bg-alt);
	border: 1px solid var(--bs-color-border);
	border-radius: 50%;
	color: var(--bs-color-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bs-mega-full__close:hover {
	background: var(--bs-color-primary);
	color: #fff;
	border-color: var(--bs-color-primary);
}

/* ---- 5-column thematic grid (curated, not WP-nav-driven) -------------- */
.bs-mega-full__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--bs-space-lg) var(--bs-space-md);
	margin-bottom: var(--bs-space-lg);
}
.bs-mega-col {
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* Column title — button on mobile (accordion toggle), heading on desktop. */
.bs-mega-col__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0 0 10px;
	margin: 0 0 var(--bs-space-sm);
	border-bottom: 2px solid var(--bs-color-accent);
	color: var(--bs-color-primary);
	cursor: default;
	text-align: left;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-text-md);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-tight);
	letter-spacing: var(--bs-tracking-tight);
	text-transform: uppercase;
}
.bs-mega-col__chevron {
	display: none;            /* hidden on desktop — only used as accordion indicator */
	transition: transform .2s ease;
}

/* Column body — list + CTA, flex column with gap. */
.bs-mega-col__body {
	display: flex;
	flex-direction: column;
	gap: var(--bs-space-sm);
	flex: 1 1 auto;
}
.bs-mega-col__list {
	list-style: none;
	margin: 0;
	/* Reserve breathing room below the list so the CTA — pushed to the
	   column bottom via margin-top: auto — never collides with the last
	   link, even on tall columns. */
	padding: 0 0 var(--bs-space-md);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bs-mega-col__list > li { margin: 0; list-style: none; }

/* Link colors — extra-specific selectors (.bs-mega-full prefix + descendant
   chain) so they win against Hello Elementor's default link color and the
   .bs-primary-menu's `color: inherit` rule, which together can turn these
   blue on first paint. Black by default, Blue on hover. */
.bs-mega-full .bs-mega-col__list a,
.bs-mega-full .bs-mega-col__list .menu-item a {
	display: inline-block;
	padding: 2px 0;
	color: var(--bs-color-text);
	text-decoration: none;
	font-family:    var(--bs-font-family);
	font-size:      var(--bs-type-body-size);
	font-weight:    var(--bs-type-body-weight);
	line-height:    var(--bs-leading-snug);
	letter-spacing: var(--bs-type-body-tracking);
	text-transform: none;
	transition: color .15s ease;
	opacity: 1;
}
.bs-mega-full .bs-mega-col__list a:hover,
.bs-mega-full .bs-mega-col__list .menu-item a:hover {
	color: var(--bs-color-primary);
	opacity: 1;
}

/* CTA — pushed to the column bottom via margin-top: auto so every CTA in
   every column aligns on the same baseline at the bottom of the grid row.
   The 24px breathing room above is provided by the list's padding-bottom
   (above), not by margin-top, so the auto-alignment still works. Width
   forced to 100% so all 5 column CTAs have the exact same footprint and
   the text is centered. */
.bs-mega-col__cta {
	margin-top: auto;
	width: 100%;
	justify-content: center;
	padding: 14px 20px;
	font-size: var(--bs-type-button-size);
	box-sizing: border-box;
}
.bs-mega-full .bs-mega-col__cta.home-btn--primary,
.bs-mega-full .bs-mega-full__feature-actions .home-btn--primary {
	background: var(--bs-color-primary);
	color: #fff;
}
.bs-mega-full .bs-mega-col__cta.home-btn--primary:hover,
.bs-mega-full .bs-mega-full__feature-actions .home-btn--primary:hover {
	background: var(--bs-color-primary-dark);
	color: #fff;
}
.bs-mega-full .bs-mega-col__cta.home-btn--ghost {
	background: #fff;
	color: var(--bs-color-primary);
	box-shadow: inset 0 0 0 1.5px var(--bs-color-border);
}
.bs-mega-full .bs-mega-col__cta.home-btn--ghost:hover {
	color: var(--bs-color-primary-dark);
	box-shadow: inset 0 0 0 1.5px var(--bs-color-primary);
}

/* ---- Visual CTA band — bottom of the panel ----------------------------
   Flat band (no border-radius), spans the full inner container width.
   Uses higher-specificity selectors on the title because the header has
   scoped h3 rules that override unscoped color: #fff. */
.bs-mega-full__feature {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bs-space-lg);
	padding: var(--bs-space-md) var(--bs-space-lg);
	background: var(--bs-color-primary-dark);
	color: #fff;
	margin-top: var(--bs-space-md);
}
.bs-mega-full__feature-text { flex: 1 1 auto; min-width: 0; }
.bs-mega-full__feature-eyebrow {
	margin: 0 0 4px;
	color: var(--bs-color-accent);
	font-size:      var(--bs-type-eyebrow-size);
	font-weight:    var(--bs-type-eyebrow-weight);
	letter-spacing: var(--bs-type-eyebrow-tracking);
	text-transform: var(--bs-type-eyebrow-case);
}
.bs-mega-full .bs-mega-full__feature .bs-mega-full__feature-title,
h3.bs-mega-full__feature-title {
	margin: 0;
	color: #fff;
	font-size:      var(--bs-type-h3-size);
	font-weight:    var(--bs-weight-bold);
	line-height:    var(--bs-leading-snug);
	letter-spacing: var(--bs-tracking-tight);
}
.bs-mega-full__feature-actions {
	display: flex;
	gap: var(--bs-space-sm);
	flex-wrap: wrap;
	flex-shrink: 0;
}
.bs-mega-full__feature-actions .home-btn--ghost {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .6);
}
.bs-mega-full__feature-actions .home-btn--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px #fff;
}

/* =========================================================================
   RESPONSIVE — accordion on mobile, 3-col on tablet, 5-col on desktop
   ========================================================================= */
@media (max-width: 1100px) {
	.bs-mega-full__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
	.bs-mega-full__grid { grid-template-columns: repeat(2, 1fr); }
	.bs-mega-full__feature { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 700px) {
	.bs-mega-full__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.bs-mega-col {
		border-bottom: 1px solid var(--bs-color-border);
	}
	.bs-mega-col:last-child { border-bottom: 0; }

	/* Title becomes a clickable accordion header. */
	.bs-mega-col__title {
		padding: var(--bs-space-md) 0;
		margin: 0;
		border-bottom: 0;
		cursor: pointer;
	}
	.bs-mega-col__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: var(--bs-color-muted);
	}
	.bs-mega-col[data-bs-mega-col].is-open .bs-mega-col__chevron {
		transform: rotate(180deg);
		color: var(--bs-color-primary);
	}
	.bs-mega-col[data-bs-mega-col]:not(.is-open) .bs-mega-col__title {
		color: var(--bs-color-primary-dark);
	}

	/* Body — collapsed by default on mobile, expands when .is-open. */
	.bs-mega-col__body {
		display: none;
		padding: 0 0 var(--bs-space-md);
	}
	.bs-mega-col[data-bs-mega-col].is-open .bs-mega-col__body {
		display: flex;
	}
}

/* ---- Backdrop dim — extend the existing hover trigger so it also
        activates while the full panel is open OR while the search bar is
        focused (search.js sets body.is-search-active on input focus). --- */
body.bs-mega-full-open .bs-mega-backdrop,
body.is-search-active .bs-mega-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity .25s ease, visibility 0s linear 0s;
}

/* While the full panel is open, suppress the hover-dropdown so the two
   menus never collide visually. */
body.bs-mega-full-open .bs-mega-menu > .menu-item:hover > .sub-menu {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* (Removed duplicate aria-expanded rule — the canonical Yellow open-state
   lives at .bs-mega__toggle:active / [aria-expanded="true"] above and was
   being overridden here by the older Dark-Blue variant.) */

/* ---------- Skip link & sr ------------------------------------------- */
.bs-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--bs-color-primary);
	color: #fff;
	padding: 10px 16px;
	z-index: 9999;
}
.bs-skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Body offset for non-overlay pages -------------------------
   The header is position:fixed. On overlay pages (home, category) the hero
   is designed to bleed under it. On all other pages we push content down. */
body {
	padding-top: calc(var(--bs-header-h) + 56px);
}
body.bs-no-header-offset,
body.home,
body.page-template-template-batiself-home,
body.tax-product_cat,
body.single-project {
	padding-top: 0;
}
.admin-bar {
	padding-top: calc(var(--bs-header-h) + 56px + 32px);
}
@media (max-width: 782px) {
	.admin-bar { padding-top: calc(var(--bs-header-h) + 56px + 46px); }
}

/* ---------- Responsive ------------------------------------------------- */
/* Below 1850px the container caps at 1350px (--bs-container-w) — the right
   cluster with full labels + 4 icons no longer fits, the rightmost icons
   (Wishlist/Account/Cart) get pushed off-screen. We progressively compact
   the cluster so they ALWAYS stay visible. */
@media (max-width: 1849px) {
	/* Tighten the spacing between Magasins/Services/Projets/Contact so the
	   cluster fits in the narrower 1350px container. */
	.bs-header__utils-nav { gap: 16px; }
	.bs-header__utils { gap: 12px; }
}
@media (max-width: 1500px) {
	/* Free room for the page links by dropping the BRICO/DECO/JARDIN primary
	   nav + the divider; the flexible search bar absorbs the rest. */
	.bs-header__primary { display: none; }
	.bs-header__utils-divider { display: none; }
	.bs-header__utils-nav { gap: 14px; }
}
@media (max-width: 1300px) {
	.bs-header__utils-nav { gap: 12px; }
	.bs-util--link .bs-util__caret { display: none; }
}
@media (max-width: 1080px) {
	/* Tighten the page-link gaps; the flexible search bar keeps shrinking. */
	.bs-header__utils-nav { gap: 10px; }
}
@media (max-width: 900px) {
	/* Mobile: the page-link cluster collapses into the off-canvas drawer. */
	.bs-header__utils-nav .bs-header__util,
	.bs-header__utils-nav .bs-util--link { display: none; }
}

@media (max-width: 900px) {
	/* Desktop nav rows hidden on mobile — replaced by the off-canvas drawer
	   opened via the burger. The primary nav, the centered search and the
	   whole mega bar all collapse into .bs-mobile-nav. */
	.bs-header__primary,
	.bs-header__mega { display: none; }
	.bs-header__burger { display: flex; }

	/* Top row → flex: logo on the left, the utils icons + burger grouped on
	   the right. The grid template is dropped here so the burger (a 4th
	   child) doesn't mis-place. flex-wrap lets the full search bar drop onto
	   a 2nd row underneath. */
	.bs-header__top .bs-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 12px;
		row-gap: 8px;
		min-height: 0;
		padding-top: 10px;
		padding-bottom: 12px;   /* léger espace sous la barre de recherche */
	}
	.bs-header__left { margin-right: auto; }   /* pushes utils + burger right */
	.bs-header__utils { gap: 14px; }
	/* Cap the logo so the top row height stays predictable (drives the body
	   offset below — keeps the hero flush under the header, no empty gap). */
	.bs-header__logo img,
	.bs-header__logo .custom-logo { height: 40px; }

	/* Full search bar on its own 2nd header row (replaces the old mobile
	   search icon, which has been removed). order:10 + 100% basis force it
	   below the logo/icons/burger row. */
	.bs-header__top .bs-header__search-wrap {
		display: block;
		order: 10;
		flex: 1 0 100%;
		width: 100%;
		max-width: none;
		min-width: 0;
		margin: 0;
	}

	/* Solid WHITE header on mobile (all pages) + dark text/icons so nothing
	   is invisible on the white bar. */
	.bs-header { color: var(--bs-color-text); }
	.bs-header::before {
		background-color: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	/* Burger bars forced dark (they used currentColor = white on overlay
	   pages → invisible on the white bar). */
	.bs-header__burger span { background: var(--bs-color-text); }
	/* Burger → X animation keyed on the open body class. */
	body.bs-mobile-open .bs-header__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	body.bs-mobile-open .bs-header__burger span:nth-child(2) { opacity: 0; }
	body.bs-mobile-open .bs-header__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* Overlay pages (home): neutralise the transparent-over-hero variant so
	   the bar is the same solid white as everywhere else.
	   CRITICAL: also drop backdrop-filter here — on the home page it was
	   left on the .bs-header element, and backdrop-filter makes the element
	   the containing block for position:fixed descendants. That trapped the
	   mobile drawer INSIDE the 80px header box, so it opened "behind" the
	   hero. Removing it lets the drawer be fixed to the viewport again. */
	.bs-header--overlay:not(.is-scrolled) {
		background-image: none;
		color: var(--bs-color-text);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.bs-header--overlay:not(.is-scrolled)::before {
		background-color: #fff;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.bs-header--overlay:not(.is-scrolled) .bs-header__top {
		box-shadow: inset 0 -0.5px 0 rgba(0, 0, 0, .12);
	}
	/* Mobile overlay header is forced solid white → give the 2nd-row search a
	   solid surface + border so it doesn't vanish on the white bar. */
	.bs-header--overlay:not(.is-scrolled) .bs-header__search {
		background: var(--bs-color-bg-alt);
		border-color: var(--bs-color-border);
	}
	.bs-header--overlay:not(.is-scrolled) .bs-header__search-submit {
		background: var(--bs-color-text);
		color: #fff;
	}
}

/* Mobile body offset — the mega row is hidden on mobile, so the header is a
   single ~80px row. Every page (incl. overlay home/category/project, which
   are 0 on desktop) gets a one-row top offset so the now-solid fixed header
   never covers content. The body.<class> selectors match the overlay pages'
   specificity (0,1,0) so they override the desktop `padding-top: 0`. */
@media (max-width: 900px) {
	/* Hard guarantee: no horizontal page scroll on mobile/tablet, whatever a
	   carousel or wide element might try to do. Internal scrollers (e.g. the
	   references rail) keep their own overflow-x and are unaffected. */
	html, body { overflow-x: hidden; }

	/* +36px ≈ the 2nd-row search bar height, tuned so the hero sits flush under
	   the header with no empty gap (header ≈ 80px row + search row). */
	body { padding-top: calc(var(--bs-header-h) + 36px); }
	body.home,
	body.page-template-template-batiself-home,
	body.tax-product_cat,
	body.single-project {
		padding-top: calc(var(--bs-header-h) + 36px);
	}
	.admin-bar { padding-top: calc(var(--bs-header-h) + 36px + 46px); }
}

/* Small phones — declutter the top bar: Magasins + wishlist live in the
   drawer, so the bar keeps just Account + Cart + burger.
   BUT: the stores POPUP also lives inside `.bs-header__stores`, and it must
   stay reachable when triggered from the product page ("Choisir mon
   magasin"). So we only hide the trigger button — the container collapses
   to zero-width because the popup is `[hidden]` by default. */
@media (max-width: 600px) {
	.bs-header__stores > .bs-util--store { display: none; }
	.bs-util--wishlist { display: none; }
	.bs-header__logo img,
	.bs-header__logo .custom-logo { height: 36px; }
}

/* =========================================================================
   MOBILE OFF-CANVAS NAV DRAWER
   ========================================================================= */
.bs-mobile-nav {
	position: fixed;
	inset: 0;
	z-index: 1200;
}
.bs-mobile-nav[hidden] { display: none; }

.bs-mobile-nav__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	transition: opacity .3s ease;
}
body.bs-mobile-open .bs-mobile-nav__backdrop { opacity: 1; }

.bs-mobile-nav__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(380px, 88vw);
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: -16px 0 48px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
body.bs-mobile-open .bs-mobile-nav__panel { transform: translateX(0); }

/* Lock background scroll while the drawer is open. */
body.bs-mobile-open { overflow: hidden; }

/* Drawer header */
.bs-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--bs-space-md);
	background: var(--bs-color-primary);
	border-bottom: 0;
}
.bs-mobile-nav__title {
	position: relative;
	padding-top: 12px;
	color: #fff;
	font-size:      var(--bs-type-h4-size);
	font-weight:    var(--bs-type-h4-weight);
	letter-spacing: var(--bs-type-h4-tracking);
	text-transform: var(--bs-type-h4-case);
}
.bs-mobile-nav__title::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 3px;
	background: var(--bs-color-accent);
}
.bs-mobile-nav__head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.bs-mobile-nav__close,
.bs-mobile-nav__icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, .16);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
}
.bs-mobile-nav__close:hover,
.bs-mobile-nav__close:hover,
.bs-mobile-nav__icon-btn:hover { background: #fff; color: var(--bs-color-primary); }

/* Drawer search */
.bs-mobile-nav__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: var(--bs-space-md);
	padding: 6px 6px 6px 16px;
	background: var(--bs-color-bg-alt);
	border: 1px solid var(--bs-color-border);
	border-radius: 999px;
}
.bs-mobile-nav__search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	padding: 8px 0;
	color: var(--bs-color-text);
	font-family: var(--bs-font-family);
	font-size:   var(--bs-type-body-sm-size);
}
.bs-mobile-nav__search button {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bs-color-text);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

/* Drawer menu */
.bs-mobile-nav__menu {
	display: flex;
	flex-direction: column;
	padding: var(--bs-space-lg) var(--bs-space-md) 0;
}

/* Simple link — large tap target with a full-row hover tint. */
.bs-mnav-link {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding: 15px var(--bs-space-sm);
	margin: 0 calc(-1 * var(--bs-space-sm));
	color: var(--bs-color-primary-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--bs-color-border);
	border-radius: 10px;
	font-size:   var(--bs-type-body-size);
	font-weight: var(--bs-weight-bold);
	transition: background .15s ease, color .15s ease;
}
/* 16px chevron-right (SVG, not the old › glyph) so every onglet's chevron —
   Catégories, Services (down), and the simple links — is the same size and
   flush-right, perfectly aligned. */
.bs-mnav-link::after {
	content: '';
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background-color: var(--bs-color-muted);
	margin-left: auto;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bs-mnav-link:hover {
	background: var(--bs-color-bg-alt);
	color: var(--bs-color-primary);
}
.bs-mnav-link:hover::after { background-color: var(--bs-color-primary); }

/* Accordion section */
.bs-mnav-acc { border-bottom: 1px solid var(--bs-color-border); display: flex; flex-direction: column; }
.bs-mnav-acc__head {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: auto;
	padding: 15px var(--bs-space-sm);
	margin: 0 calc(-1 * var(--bs-space-sm));
	background: transparent;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	color: var(--bs-color-primary-dark);
	text-align: left;
	font-family:  var(--bs-font-family);
	font-size:    var(--bs-type-body-size);
	font-weight:  var(--bs-weight-bold);
	transition: background .15s ease, color .15s ease;
}
.bs-mnav-acc__head:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary); }
.bs-mnav-acc.is-open .bs-mnav-acc__head { color: var(--bs-color-primary); }
.bs-mnav-acc__chev { transition: transform .2s ease; color: var(--bs-color-muted); flex-shrink: 0; margin-left: auto; }
.bs-mnav-acc.is-open .bs-mnav-acc__chev { transform: rotate(180deg); color: var(--bs-color-primary); }
.bs-mnav-acc__body {
	display: none;
	flex-direction: column;
	padding: 0 4px 12px;
}
.bs-mnav-acc.is-open .bs-mnav-acc__body { display: flex; }
.bs-mnav-acc__link {
	padding: 11px 12px;
	color: var(--bs-color-text);
	text-decoration: none;
	border-radius: 8px;
	font-size:   var(--bs-type-body-sm-size);
	line-height: var(--bs-leading-snug);
}
.bs-mnav-acc__link:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary); }

/* ---------- Categories drill-down ("pages") ----------------------------- */
.bs-mobile-nav__menu[data-bs-mdrill] { position: relative; }
.bs-mdrill__level { display: none; flex-direction: column; }
/* Directional page transition: drilling forward slides in from the right,
   going back slides in from the left (set by header.js via .bs-mdrill--fwd /
   --back on the container). Default (panel just opened) = from the right. */
.bs-mdrill__level.is-active {
	display: flex;
	animation: bs-mdrill-in-right .26s cubic-bezier(.2, .8, .2, 1);
}
.bs-mdrill--back .bs-mdrill__level.is-active { animation-name: bs-mdrill-in-left; }
@keyframes bs-mdrill-in-right {
	from { opacity: 0; transform: translateX(26px); }
	to   { opacity: 1; transform: none; }
}
@keyframes bs-mdrill-in-left {
	from { opacity: 0; transform: translateX(-26px); }
	to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bs-mdrill__level.is-active,
	.bs-mega-flyout__pane.is-active { animation: none; }
}

/* Emphasized « Catégories » trigger (feature row). */
/* Catégories drill trigger — a <button> styled exactly like the .bs-mnav-link
   <a> tabs (same row, same full width). Just resets the native button look. */
.bs-mnav-link--btn {
	width: auto;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bs-color-border);
	font-family: var(--bs-font-family);
	cursor: pointer;
	text-align: left;
}
.bs-mnav-link__ic { display: inline-flex; flex-shrink: 0; }
/* Categories tab: blue, same row height as the others; chevron + icon white. */
.bs-mnav-link--cat { background: var(--bs-color-primary); color: #fff; }
.bs-mnav-link--cat:hover { background: var(--bs-color-primary-dark); color: #fff; }
.bs-mnav-link--cat::after { background-color: #fff; }

/* A universe row that opens its sub-categories (child level). */
.bs-mdrill__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: auto;
	padding: 14px var(--bs-space-sm);
	margin: 0 calc(-1 * var(--bs-space-sm));
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bs-color-border);
	border-radius: 10px;
	color: var(--bs-color-primary-dark);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family:  var(--bs-font-family);
	font-size:    var(--bs-type-body-size);
	font-weight:  var(--bs-weight-semibold);
	transition: background .15s ease, color .15s ease;
}
/* Leaf universe (no sub-categories) — same row layout as the rest, just a
   direct link with no chevron. Keeps the list visually uniform. */
.bs-mdrill__row--leaf { justify-content: flex-start; }

/* All mobile-drawer onglets are flat (no rounded corners) — client request. */
.bs-mnav-link,
.bs-mnav-link--feature,
.bs-mnav-acc__head,
.bs-mnav-acc__link,
.bs-mdrill__row { border-radius: 0; }
.bs-mdrill__row:hover { background: var(--bs-color-bg-alt); color: var(--bs-color-primary); }
.bs-mdrill__row .bs-mdrill__chev { color: var(--bs-color-muted); flex-shrink: 0; }
.bs-mdrill__row:hover .bs-mdrill__chev { color: var(--bs-color-primary); }

/* Back button + level title. */
.bs-mdrill__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	margin: 0 0 4px;
	padding: 8px 10px 8px 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--bs-color-primary);
	font-family:  var(--bs-font-family);
	font-size:    var(--bs-type-body-sm-size);
	font-weight:  var(--bs-weight-bold);
}
.bs-mdrill__back:hover { color: var(--bs-color-primary-dark); }
.bs-mdrill__title {
	display: block;
	margin: 0 0 8px;
	color: var(--bs-color-primary-dark);
	font-size:   var(--bs-type-h4-size);
	font-weight: var(--bs-weight-bold);
}
.bs-mdrill__all {
	font-weight: var(--bs-weight-bold) !important;
	color: var(--bs-color-primary) !important;
}

/* Drawer footer — quick links (Compte / Favoris / Panier) */
.bs-mobile-nav__foot {
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bs-space-xs);
	padding: var(--bs-space-md);
	border-top: 1px solid var(--bs-color-border);
	background: var(--bs-color-bg-alt);
}
.bs-mnav-quick {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 6px;
	background: #fff;
	border: 1px solid var(--bs-color-border);
	border-radius: 0;
	color: var(--bs-color-primary-dark);
	text-decoration: none;
	font-size: var(--bs-type-body-sm-size);
	font-weight: var(--bs-weight-semibold);
	text-align: center;
	transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.bs-mnav-quick:hover {
	border-color: var(--bs-color-primary);
	color: var(--bs-color-primary);
	box-shadow: 0 8px 20px rgba(16, 54, 86, .1);
}
/* Icon sits in a soft circle for a more finished, app-like feel. */
.bs-mnav-quick svg {
	width: 22px;
	height: 22px;
	padding: 8px;
	box-sizing: content-box;
	background: var(--bs-color-bg-alt);
	border-radius: 50%;
	color: var(--bs-color-primary);
	transition: background .2s ease, color .2s ease;
}
.bs-mnav-quick:hover svg { background: var(--bs-color-primary); color: #fff; }

/* Drawer is desktop-irrelevant — never show above the burger breakpoint. */
@media (min-width: 901px) {
	.bs-mobile-nav { display: none; }
}

/* ── Ajout au panier : feedback (assets/script/add-to-cart.js) ──────────────
   Le badge panier du header "rebondit" et un toast confirme l'ajout. */
@keyframes bs-cart-bump {
	0%, 100% { transform: scale(1); }
	30%      { transform: scale(1.28); }
	60%      { transform: scale(.92); }
}
.bs-util--cart.is-bumping { animation: bs-cart-bump .6s cubic-bezier(.2, .8, .2, 1); }

/* ── Mini-panier déroulant depuis l'icône panier du header ─────────────────── */
.bs-cart-wrap { position: relative; display: inline-flex; }
.bs-mini-cart {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 1200;
	width: 400px;
	max-width: calc(100vw - 32px);
	background: #fff;
	border: 1px solid var(--bs-color-border);
	box-shadow: 0 18px 50px rgba(16, 54, 86, .22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1), visibility .2s;
}
.bs-cart-wrap.is-open .bs-mini-cart { opacity: 1; visibility: visible; transform: translateY(0); }
.bs-mini-cart .widget_shopping_cart_content { padding: var(--bs-space-md); }
/* WooCommerce mini-cart contents → charte Batiself. */
.bs-mini-cart .woocommerce-mini-cart { list-style: none; margin: 0 0 var(--bs-space-sm); padding: 0; max-height: 340px; overflow-y: auto; }
/* Ligne produit : miniature encadrée + nom en gras + prix à droite + croix
   discrète en haut à droite. (Le lien WooCommerce contient l'image PUIS le nom,
   donc on aligne ce lien en flex ; la croix est sortie du flux en absolu.) */
.bs-mini-cart .woocommerce-mini-cart-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 28px 14px 0;
	border-bottom: 1px solid var(--bs-color-bg-alt);
	font-size: var(--bs-type-body-sm-size);
	line-height: 1.3;
	transition: background-color .12s ease;
}
.bs-mini-cart .woocommerce-mini-cart-item:last-child { border-bottom: 0; }
.bs-mini-cart .woocommerce-mini-cart-item:hover { background: var(--bs-color-bg-alt); }
.bs-mini-cart .woocommerce-mini-cart-item a:not(.remove) {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--bs-color-text);
	text-decoration: none;
	font-weight: var(--bs-weight-bold);
}
.bs-mini-cart .woocommerce-mini-cart-item a:not(.remove):hover { color: var(--bs-color-primary); }
.bs-mini-cart .woocommerce-mini-cart-item img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex: 0 0 auto;
	border: 1px solid var(--bs-color-border);
	background: #fff;
}
.bs-mini-cart .woocommerce-mini-cart-item .quantity {
	flex: 0 0 auto;
	margin-left: auto;
	white-space: nowrap;
	color: var(--bs-color-muted);
	font-size: var(--bs-type-body-sm-size);
}
.bs-mini-cart .woocommerce-mini-cart-item .quantity .amount {
	color: var(--bs-color-text);
	font-weight: var(--bs-weight-bold);
}
.bs-mini-cart .woocommerce-mini-cart-item .remove {
	position: absolute;
	top: 12px;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	color: var(--bs-color-muted);
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	border-radius: 50%;
	transition: color .12s ease, background-color .12s ease;
}
.bs-mini-cart .woocommerce-mini-cart-item .remove:hover { color: #fff; background: #c0392b; }
.bs-mini-cart .woocommerce-mini-cart__total { display: flex; justify-content: space-between; font-weight: var(--bs-weight-bold); color: var(--bs-color-text); padding: 12px 0; }
.bs-mini-cart .woocommerce-mini-cart__total .amount { color: var(--bs-color-primary); }
.bs-mini-cart .woocommerce-mini-cart__buttons { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.bs-mini-cart .woocommerce-mini-cart__buttons .button {
	display: block; text-align: center; padding: 12px 16px; border-radius: 0;
	font-weight: var(--bs-weight-bold); font-size: var(--bs-type-body-sm-size); text-decoration: none;
	border: 1px solid var(--bs-color-primary); color: var(--bs-color-primary); background: #fff;
}
.bs-mini-cart .woocommerce-mini-cart__buttons .button.checkout { background: var(--bs-color-primary); color: #fff; }
.bs-mini-cart .woocommerce-mini-cart__empty-message { margin: 0; color: var(--bs-color-muted); text-align: center; padding: var(--bs-space-sm) 0; }
@media (prefers-reduced-motion: reduce) {
	.bs-util--cart.is-bumping { animation: none; }
	.bs-mini-cart { transition: opacity .15s ease; transform: none; }
}
@media (max-width: 600px) {
	.bs-mini-cart { position: fixed; top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-width: none; }
}

/* ── Modale « Mode d'obtention » : Click & Collect vs Livraison (#71) ──────── */
.bs-fulfill-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bs-fulfill-modal[hidden] { display: none; }
.bs-fulfill-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 54, 86, .55); }
.bs-fulfill-modal__dialog {
	position: relative; z-index: 1; width: 100%; max-width: 520px;
	max-height: calc(100vh - 40px); overflow-y: auto;
	background: #fff; padding: clamp(24px, 4vw, 36px);
	box-shadow: 0 30px 80px rgba(16, 54, 86, .3);
	animation: bs-fulfill-in .25s cubic-bezier(.2, .8, .2, 1);
}
@keyframes bs-fulfill-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bs-fulfill-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--bs-color-muted); }
.bs-fulfill-modal__close:hover { color: var(--bs-color-primary); }
.bs-fulfill-modal__title { margin: 0; color: var(--bs-color-primary); font-size: var(--bs-type-h3-size); font-weight: var(--bs-weight-bold); line-height: var(--bs-leading-snug); padding-right: 30px; }
.bs-fulfill-modal__rule { display: block; width: 64px; height: 5px; background: var(--bs-color-accent); margin: 14px 0 16px; }
.bs-fulfill-modal__intro { margin: 0 0 20px; color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-leading-normal); }
.bs-fulfill-modal__subtitle { margin: 0 0 12px; color: var(--bs-color-text); font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); text-transform: uppercase; letter-spacing: .05em; }
.bs-fulfill-modal__stores { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.bs-fulfill-modal__store { width: 100%; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--bs-color-border); transition: border-color .15s ease, background .15s ease; }
.bs-fulfill-modal__store:hover { border-color: var(--bs-color-primary); background: var(--bs-color-bg-alt); }
.bs-fulfill-modal__store-item.is-active .bs-fulfill-modal__store { border-color: var(--bs-color-primary); border-width: 2px; }
.bs-fulfill-modal__store-name { font-weight: var(--bs-weight-bold); color: var(--bs-color-primary); }
.bs-fulfill-modal__store-addr { font-size: var(--bs-type-body-sm-size); color: var(--bs-color-muted); }
.bs-fulfill-modal__delivery { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; cursor: pointer; background: var(--bs-color-primary); color: #fff; border: 0; font-family: var(--bs-font-family); font-weight: var(--bs-weight-bold); font-size: var(--bs-type-body-sm-size); transition: background .15s ease; }
.bs-fulfill-modal__delivery:hover { background: var(--bs-color-primary-dark); }
body.bs-fulfill-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .bs-fulfill-modal__dialog { animation: none; } }

/* Modale C&C — statut de stock par magasin (#1) : seuls les magasins en stock
   restent sélectionnables, les autres sont grisés. */
.bs-fulfill-modal__store-status { display: block; margin-top: 3px; font-size: var(--bs-type-body-sm-size); font-weight: var(--bs-weight-bold); }
.bs-fulfill-modal__store-item:not(.is-unavailable):not(.is-loading) .bs-fulfill-modal__store-status { color: var(--bs-color-primary); }
.bs-fulfill-modal__store-item.is-unavailable .bs-fulfill-modal__store { opacity: .5; cursor: not-allowed; }
.bs-fulfill-modal__store-item.is-unavailable .bs-fulfill-modal__store:hover { border-color: var(--bs-color-border); background: #fff; }
.bs-fulfill-modal__store-item.is-unavailable .bs-fulfill-modal__store-status { color: var(--bs-color-muted); }
.bs-fulfill-modal__store-item.is-loading .bs-fulfill-modal__store { opacity: .6; cursor: progress; }
.bs-fulfill-modal__no-pickup { margin: 0 0 20px; padding: 12px 14px; background: var(--bs-color-bg-alt); color: var(--bs-color-muted); font-size: var(--bs-type-body-sm-size); line-height: var(--bs-leading-normal); }