html {
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.15;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	min-width: 280px;
	background: var(--bva-canelle-100);
	color: var(--bva-black-pure);
	/* V3 default type stack. base.css only loads on V3 views, so this keeps every
	   view on Geist even where dist/main.css is dropped (checkout/PDP) and the body
	   would otherwise fall back to the browser serif. Legacy pages never load this. */
	font-family: var(--bva-font-sans);
	font-size: 16px;
	line-height: 1.15;
	padding: 0;

	&.page-template-article-v3 {
		background: var(--bva-canelle-100);
		padding-top: 70px;
	}
}
body.no-scroll {
	overflow: hidden;
}

a {
	color: inherit;
	text-decoration: none;
}

a[href^='tel'] {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 2.3em;
}

p,
ul,
ol,
dl,
hr,
table,
blockquote {
	margin-top: 0;
	margin-bottom: 1.15em;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
ul:last-child,
ol:last-child,
dl:last-child,
table:last-child,
blockquote:last-child {
	margin-bottom: 0;
}

button {
	all: unset;
	cursor: pointer;
}

/* ------------------------------------------------------------ *\
	WYSWYG
\* ------------------------------------------------------------ */

.line05em {
	line-height: 0.5em !important;
}
.line06em {
	line-height: 0.6em !important;
}
.line07em {
	line-height: 0.7em !important;
}
.line08em {
	line-height: 0.8em !important;
}
.line09em {
	line-height: 0.9em !important;
}
.line1em {
	line-height: 1em !important;
}
.line11em {
	line-height: 1.1em !important;
}
.line12em {
	line-height: 1.2em !important;
}
.line13em {
	line-height: 1.3em !important;
}
.line14em {
	line-height: 1.4em !important;
}
.line15em {
	line-height: 1.5em !important;
}
.line16em {
	line-height: 1.6em !important;
}
.line17em {
	line-height: 1.7em !important;
}
.line18em {
	line-height: 1.8em !important;
}
.line19em {
	line-height: 1.9em !important;
}
.line2em {
	line-height: 2em !important;
}
.line3em {
	line-height: 3em !important;
}
.lightweight {
	font-weight: 300 !important;

	b {
		font-weight: 700 !important;
	}

	.heavyweight {
		font-weight: 700 !important;
	}
}
.font4weight {
	font-weight: 400 !important;
}
.font5weight {
	font-weight: 500 !important;
}
.font6weight {
	font-weight: 600 !important;
}
.heavyweight {
	font-weight: 700 !important;
}
.underline {
	text-decoration: underline !important;
}
/* Legacy V2 font utility classes (Nunito Sans / Reem Kufi / Arial / Futura)
   still ride on BO/Elementor content surfaced inside V3 views (e.g. the cart's
   the_content()). base.css only loads on V3 views, so redirecting them to the
   V3 sans stack here keeps V3 on-brand while the legacy pages — which load
   these classes from dist/main.css & root.css — stay untouched. */
.nunito-sans,
.reem-kufi,
.arial,
.futura,
.futura-ndalt {
	font-family: var(--bva-font-sans) !important;
}
.letsp155px {
	letter-spacing: 1.5px !important;
}
.checkmark {
	width: 23px !important;
	height: 23px !important;
}

/* ------------------------------------------------------------ *\
	Btn
\* ------------------------------------------------------------ */

/* Shared button component. Lives in base.css (loaded on every v3 view) because
   it backs the .btn--product CTA in the shared v3/common/product-card fragment,
   which renders well outside the home (PDP, article, "Vos besoins", journal). */
.btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--bva-white);
	width: fit-content;
	gap: 8px;
	white-space: nowrap;
	color: var(--bva-black);
	font-family: Geist;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 110%;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	border-radius: 2px;
	padding: 14px 20px;
	outline: none;
	cursor: pointer;
	transition: all 0.4s;

	&:hover {
		background: var(--bva-grey-100);
	}

	&:active {
		background: var(--bva-white);
	}

	&.btn--product {
		background: transparent;
		width: 100%;
		color: var(--bva-black);
		text-align: center;
		font-family: Geist;
		font-size: 14px;
		font-style: normal;
		font-weight: 500;
		line-height: 130%; /* 18.2px */
		text-transform: uppercase;
		text-align: center;
		border-radius: 2px;
		border: 1px solid rgba(21, 20, 18, 0.16);

		/* Unified hover for the product CTA site-wide: black fill, white type. */
		&:hover {
			background: var(--bva-black);
			border-color: var(--bva-black);
			color: var(--bva-white);
		}
	}
}

/* ------------------------------------------------------------ *\
	Shell
\* ------------------------------------------------------------ */

.shell {
	max-width: calc(1360px + 40px * 2);
	padding-left: 40px;
	padding-right: 40px;
	margin: 0 auto;

	&.shell--fluid {
		max-width: none;
	}

	&.shell--sm {
		max-width: calc(1128px + 40px * 2);
	}
}
@media (max-width: 835px) {
	.shell {
		padding-left: 13px;
		padding-right: 13px;
	}
}

/* ------------------------------------------------------------ *\
	Header
\* ------------------------------------------------------------ */

.page-template-home-v3 {
	.header-main,
	.header-mobile {
		/* Dark scrim fading down over the hero (Figma home header): darkest at
		   the very top, transparent at the bottom of the header band — keeps the
		   white logo/icons legible while the hero image shows through. */
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%);
		box-shadow: none;

		&.header--scrolled {
			background: var(--bva-canelle-100);
			box-shadow: 0px 2px 4px 0px var(--bva-hairline);
		}

		&:not(.header--scrolled) {
			/* At the top of the home hero the header sits on a dark scrim, so every
			   icon is whitened. Apply `filter` on the <svg> itself, never on inner
			   <path> nodes: Safari/iOS silently ignores a filter set on an SVG
			   child element, which left the mobile hamburger + cart dark while the
			   (svg-level) search loupe whitened correctly. */
			.v3-drawer .v3-drawer__open svg,
			.logo svg,
			.header__icon svg,
			.controls svg,
			.header__cart svg {
				filter: brightness(0) invert(1);
			}

			.logo svg {
				width: auto;
				height: 44px;
			}

			.controls,
			.header__cart {
				.cart-count {
					color: var(--bva-white);
				}
			}

			.header__button {
				color: var(--bva-white-pure);
			}
		}
	}
}

body {
	.header-main {
		.header__inner {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: stretch;

			.header__left,
			.header__right {
				width: 50%;
				min-height: 48px;
				display: flex;
				align-items: center;
				position: relative;

				.logo {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(-50%, -50%);

					svg {
						width: auto;
						height: 44px;
					}
				}
			}
			.header__right {
				flex-direction: row-reverse;
			}
		}

		.header__button {
			display: block;
			color: var(--bva-black);
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: 110%; /* 24px */
			border: none;
			outline: none;
			text-decoration: none;
			text-transform: uppercase;

			& ~ .header__button {
				margin-left: 32px;
			}
		}

		/* Cart action: icon + count badge (mirrors the mobile .controls link).
		   Keeps .header__button for spacing/whitening, but overrides display so
		   the 24px icon centres and the absolute badge anchors to the link. */
		.header__cart {
			position: relative;
			display: flex;
			align-items: center;

			svg {
				display: block;
				width: 24px;
				height: 24px;
			}

			.cart-count {
				position: absolute;
				top: -3px;
				right: -3px;
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 12px;
				font-weight: 500;
				line-height: 110%;
			}
		}
	}

	.header-main,
	.header-mobile {
		position: fixed;
		top: 0;
		/* Fixed nav must sit above all page content (sections/buy-bar go up to
		   z-index:60) yet below the site's own overlays (drawer/megamenu:80,
		   search:90, offers popup:101). Resting at 1 let content — and the
		   intl-tel country list — paint over the header. */
		z-index: 70;
		width: 100vw;
		background: var(--bva-canelle-100);
		box-shadow: 0px 2px 4px 0px var(--bva-hairline);
		padding: 16px 10px 16px 0px;
		/* Only the scroll-state chrome transitions (bg + shadow). `all` also
		   animated the header's own height, which changes every time the
		   megamenu opens (display:none->block) or a product image inside it
		   loads — leaving CSS transitions perpetually running and forcing
		   header relayouts. */
		transition: background-color 0.4s, box-shadow 0.4s;

		&.header--scrolled {
			padding: 16px 10px 16px 0;
		}

		.header__inner {
			display: flex;
			justify-content: space-between;
			align-items: center;

			/* Left actions group (hamburger + search) and the right controls group
			   grow equally so the logo stays optically centred between them. */
			.header__mobile-actions,
			.controls {
				flex-grow: 1;
				flex-basis: 0;
			}
		}

		.header__mobile-actions {
			display: flex;
			align-items: center;
			gap: 16px;
		}

		/* Bare icon button (mobile search) — matches the controls icon links. */
		.header__icon {
			display: flex;
			align-items: center;
			padding: 0;
			border: 0;
			background: none;
			cursor: pointer;
		}
		.header__icon svg {
			display: block;
			width: 24px;
			height: 24px;
		}

		.header__outer {
			overflow-y: auto;
			max-height: 65vh;

			.header__menu {
				display: none;

				&.active-menu {
					display: block;

					&#menu-two {
						display: flex;
						flex-wrap: wrap;
						gap: 32px 16px;

						.header__submenu {
							width: calc((100% - 64px) / 5);
						}
					}

					/* "À propos": content + utility columns side by side at the left
					   like the Produits grid, not pushed apart (the base
					   .header__menu-inner uses space-between). Same column width as
					   Produits, no divider between them. */
					&#menu-three {
						.header__menu-inner {
							justify-content: flex-start;
							gap: 16px;
						}

						.header__menu-left,
						.header__menu-right {
							width: calc((100% - 64px) / 5);
						}

						.header__menu-right {
							padding-left: 0;
							border-left: none;
						}
					}
				}
			}
		}
	}

	.header-main {
		display: block !important;
	}
	.header-mobile {
		display: none !important;
	}

	.header__menu-inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
}

@media (max-width: 835px) {
	.logo {
		svg {
			/* Keep the logo's aspect ratio — without width:auto the SVG renders at its
			   100px attribute width against a 34px height and squashes (the orange mark
			   "bleeds"). Auto width yields ~77×34, matching the 76×34 mobile mockup. */
			width: auto !important;
			height: 34px !important;
		}
	}
}

@media (max-width: 835px) {
	body {
		.header-main {
			opacity: 0;
			pointer-events: none;
		}
		.header-mobile {
			display: block !important;
			padding: 4px 10px 4px 0px;
		}
	}

	/* The v3 mobile header (.header-mobile) is ~43px tall — far shorter than the
	   legacy v2 header the .main offset was calibrated for (margin-top up to 203px).
	   Re-anchor content flush under the fixed mobile header instead of a ~160px gap.
	   Breathing room above the first section is handled by each section's own
	   top padding (e.g. .pdp-hero), not by inflating this offset. */
	.main {
		margin-top: 43px;
	}

	/* Home v3: the mobile header is transparent and overlays the hero. Drop the
	   header-height offset so the background image slides under it (with the fade
	   scrim) like desktop, instead of starting flush below the header. */
	.page-template-home-v3 .main {
		margin-top: 0;
	}
}

.wrapper {
	.header-main:has(.active-menu) {
		/* Clear the home hero scrim too (background-image set at
		   .page-template-home-v3 .header-main): while the megamenu is open before
		   any scroll, a lone background-color leaves that dark fade painting over
		   the top of the dropdown. Both longhands so the gradient image is dropped
		   AND the solid panel colour holds (a shorthand with var() proved flaky). */
		background-color: var(--bva-canelle-100) !important;
		background-image: none !important;
		/* Lift the open desktop megamenu above all page content. The resting
		   header is z-index:70; page content tops out at ~3 and the 80 bump (and
		   sticky pricebox/cart create their own contexts) and would paint over
		   the dropdown. 80 sits above page content yet below the full-screen
		   modals (search 90 / offers popup 101 / loader 1000), which are never
		   open at the same time as a menu. Mirrors the mobile drawer lift. */
		z-index: 80;

		.header__menu-inner {
			.header__menu-left {
				p.header__menu-title {
					color: var(--BLACK, var(--bva-black));
					/* Desktop/Label */
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 300;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 16px;
				}

				ul {
					list-style-type: none;
					padding-left: 0;

					li {
						& ~ li {
							margin-top: 16px;
						}

						a {
							color: var(--BLACK, var(--bva-black));
							font-family: Geist;
							font-size: 24px;
							font-style: normal;
							font-weight: 500;
							line-height: 110%; /* 26.4px */
						}
					}
				}
			}

			.header__menu-right {
				padding-left: 16px;
				border-left: 1px solid rgba(0, 0, 0, 0.08);

				p.header__menu-title {
					color: var(--BLACK, var(--bva-black));
					/* Desktop/Label */
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 300;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 16px;
				}

				/* "À propos" utility column (#menu-three) — match the left column's link
				   list. Harmless for #menu-one, whose right column carries product cards
				   instead of a <ul>. */
				ul {
					list-style-type: none;
					padding-left: 0;

					li {
						& ~ li {
							margin-top: 16px;
						}

						a {
							color: var(--BLACK, var(--bva-black));
							font-family: Geist;
							font-size: 24px;
							font-style: normal;
							font-weight: 500;
							line-height: 110%; /* 26.4px */
						}
					}
				}
			}
		}

		.header__submenu {
			p.header__menu-title {
				color: var(--BLACK, var(--bva-black));
				/* Desktop/Label */
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 300;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
				margin-bottom: 16px;
			}

			ul {
				list-style-type: none;
				padding-left: 0;

				li {
					& ~ li {
						margin-top: 16px;
					}

					a {
						color: var(--BLACK, var(--bva-black));
						font-family: Geist;
						font-size: 24px;
						font-style: normal;
						font-weight: 500;
						line-height: 110%; /* 26.4px */
					}
				}
			}
		}

		.header__outer {
			border-top: 1px solid rgba(0, 0, 0, 0.08);
			padding: 40px 0;
			margin-top: 16px;
		}

		.header__button {
			color: var(--bva-black);

			&.active-button {
				position: relative;

				&::before {
					content: '';
					display: block;
					width: 100%;
					height: 1px;
					background: var(--bva-black);
					position: absolute;
					/* Sit on the grey divider line (.header__outer border-top, 16px
					   below .header__inner) so the active tab reads as a black
					   segment on the continuous grey rule. */
					bottom: -33px;
					left: 0;
				}
			}
		}

		.logo {
			svg {
				filter: none;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Admin Bar (if header is fixed)
\* ------------------------------------------------------------ */

body.admin-bar {
	.header-main,
	.header-mobile {
		margin-top: 32px;
	}
}

@media (width <= 782px) {
	body.admin-bar {
		.header-mobile {
			margin-top: 46px;

			&.header--scrolled {
				margin-top: 46px;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Nav
\* ------------------------------------------------------------ */

.v3-drawer {
	&.v3-drawer-opened {
		.v3-drawer__menu {
			left: 0;
		}
	}

	.v3-drawer__open {
		display: block;
		border-radius: 32px;
		transition: all 0.4s;

		&:hover {
			background-color: var(--bva-vitamine-tint);
			box-shadow: 0px 0px 0px 12px var(--bva-vitamine-tint);
		}

		svg {
			display: block;
		}
	}

	.v3-drawer__menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
		width: 400px;
		max-width: 400px;
		height: 100vh;
		background: var(--bva-cream-light);
		padding: 0 40px;
		position: fixed;
		top: 0;
		bottom: 0;
		left: -400px;
		z-index: 10;
		transition: left 0.5s;

		.v3-drawer__head {
			position: relative;
			width: 100%;
			padding: 56px 0 90px;

			.v3-drawer__logo {
				position: absolute;
				left: 50%;
				top: 56px;
				svg {
					display: block;
					height: 58px;
					width: auto;
					transform: translateX(-50%);
				}
			}

			.v3-drawer__close {
				display: block;
				border-radius: 32px;
				margin-left: auto;
				transition: all 0.4s;

				svg {
					path {
						fill: var(--bva-black-pure);
					}
				}

				&:hover {
					background-color: var(--bva-vitamine-tint);
					box-shadow: 0px 0px 0px 12px var(--bva-vitamine-tint);
				}

				svg {
					display: block;
				}
			}
		}
	}
}

/* The mobile header is its own stacking context (z-index:70); some PDP
   sections use z-index:1-3 and the sticky buy-bar uses z-index:60, all of
   which (being later in the DOM / higher) would paint over the confined
   drawer. Lift the header above every page layer while the drawer is open so
   the opaque drawer + scrim fully cover the page. 80 stays below the
   full-screen modals (search 90 / offers popup 101 / loader 1000): the search
   overlay CAN be open at the same time (its bar anchors under the header, which
   keeps the burger clickable), so v3.js/search.js close one when the other
   opens — the stacking order alone does not protect this. Matches the desktop
   megamenu. */
.header-mobile:has(.v3-drawer-opened) {
	z-index: 80;
}

.v3-drawer__scrim {
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9;
	background: #00000099;
	transition: all 0.4s;
}

/* ------------------------------------------------------------ *\
	Admin Bar
\* ------------------------------------------------------------ */

body.admin-bar {
	.v3-drawer .v3-drawer__menu {
		margin-top: 32px;
		height: calc(100vh - 32px);
	}
}

@media (width <= 782px) {
	body.admin-bar {
		.v3-drawer .v3-drawer__menu {
			margin-top: 46px;
			height: calc(100vh - 46px);
		}
	}
}

/* ------------------------------------------------------------ *\
	Menu
\* ------------------------------------------------------------ */

.v3-drawer .drawer-nav {
	flex-grow: 1;
	width: 100%;
	/* overflow-y:auto alone would compute overflow-x to auto too, clipping the
	   rotated chevron at the right edge (and risking a stray h-scrollbar on long
	   labels). Pin overflow-x to hidden; the chevron gets its own clearance below. */
	overflow-x: hidden;
	overflow-y: auto;
	/* Breathing room so the last expanded item clears the viewport edge. */
	padding-bottom: 40px;

	.drawer-nav__list {
		display: flex;
		flex-direction: column;
		gap: 28px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.drawer-nav__item {
		display: block;
	}

	/* Top-level entry — every item is an accordion trigger (Vos besoins,
	   Produits, À propos, Aide), mirroring the desktop megamenus + footer. */
	.drawer-nav__toggle {
		display: flex;
		align-items: center;
		width: 100%;
		color: var(--bva-espresso);
		font-family: var(--bva-font-sans);
		font-weight: 300;
		font-size: 32px;
		line-height: 1.21;
		text-align: left;
		transition: opacity 0.3s;

		&:hover {
			opacity: 0.6;
		}
	}

	/* The chevron is the ONLY arrow in the drawer; leaf links and sub-items
	   carry none ("flèches avec parcimonie"). */
	.drawer-nav__toggle {
		justify-content: space-between;
		gap: 16px;
	}

	.drawer-nav__chevron {
		flex: none;
		width: 11px;
		height: 11px;
		/* The 45° rotation makes the painted box ~3.5px wider than the layout box;
		   this margin keeps that overshoot clear of the overflow-x:hidden clip. */
		margin-right: 6px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-3px) rotate(45deg);
		transition: transform 0.35s ease;
	}

	.drawer-nav__item--has-panel.is-open .drawer-nav__chevron {
		transform: translateY(2px) rotate(225deg);
	}

	/* Collapsible panel — height animates via the grid 0fr→1fr trick, so it
	   works for any content length (Produits = 8 groups / ~49 items). */
	.drawer-nav__panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.35s ease;
	}

	.drawer-nav__item--has-panel.is-open .drawer-nav__panel {
		grid-template-rows: 1fr;
	}

	.drawer-nav__panel-inner {
		min-height: 0;
		overflow: hidden;
		/* Keep collapsed sub-links out of the keyboard tab order — overflow:hidden
		   alone doesn't remove them. Visibility flips to hidden only after the
		   collapse finishes (delay) and back to visible immediately on open, so the
		   grid height animation is preserved. */
		visibility: hidden;
		transition: visibility 0s linear 0.35s;
	}

	/* Air between the trigger and the first sub-item / category label. Applied as
	   a margin on the first child (not panel-inner padding) so it lives inside the
	   overflow-clipped box and doesn't leak height when the panel is collapsed. */
	.drawer-nav__panel-inner > :first-child {
		margin-top: 24px;
	}

	.drawer-nav__item--has-panel.is-open .drawer-nav__panel-inner {
		visibility: visible;
		transition: visibility 0s linear 0s;
	}

	.drawer-nav__sublist {
		/* Top gap handled by .drawer-nav__panel-inner > :first-child margin-top. */
		margin: 0;
		padding: 0;
		list-style: none;

		li ~ li {
			margin-top: 14px;
		}

		a {
			display: inline-block;
			color: var(--bva-espresso);
			font-family: var(--bva-font-sans);
			font-weight: 300;
			font-size: 18px;
			line-height: 1.46;
			transition: opacity 0.3s;

			&:hover {
				opacity: 0.6;
			}
		}
	}

	/* Category heading inside the Produits panel — mono label, mirrors the
	   desktop megamenu (.header__menu-title). */
	.drawer-nav__group ~ .drawer-nav__group {
		margin-top: 28px;
	}

	.drawer-nav__group-title {
		margin: 0;
		color: var(--bva-muted);
		font-family: var(--bva-font-mono);
		font-weight: 300;
		font-size: 14px;
		line-height: 1.1;
		text-transform: uppercase;
	}

	.drawer-nav__group .drawer-nav__sublist {
		margin-top: 14px;
	}
}

/* Reduced-motion: drop the chevron spin / panel slide / link fade. */
@media (prefers-reduced-motion: reduce) {
	.v3-drawer .drawer-nav__panel,
	.v3-drawer .drawer-nav__panel-inner,
	.v3-drawer .drawer-nav__chevron,
	.v3-drawer .drawer-nav__toggle,
	.v3-drawer .drawer-nav__sublist a {
		transition: none;
	}
}

/* ------------------------------------------------------------ *\
	Controls
\* ------------------------------------------------------------ */

.controls {
	display: flex;
	justify-content: end;
	align-items: center;
	list-style-type: none;
	gap: 16px;
	padding: 0;

	li {
		position: relative;

		a {
			display: block;
			border-radius: 32px;
			transition: all 0.4s;

			&:hover {
				background-color: var(--bva-vitamine-tint);
				box-shadow: 0px 0px 0px 12px var(--bva-vitamine-tint);
			}

			svg {
				display: block;
			}

			.cart-count {
				position: absolute;
				top: -3px;
				right: -3px;
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 12px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 13.2px */
				text-transform: uppercase;
			}
		}
	}
}

/* ------------------------------------------------------------ *\
	Footer
\* ------------------------------------------------------------ */

.footer {
	background-color: var(--bva-canelle-400);
	padding: 40px 0;

	.footer__head {
		padding-bottom: 40px;
		border-bottom: solid 1px var(--bva-overlay-white-30);
		margin-bottom: 40px;

		.contacts {
			list-style-type: none;
			display: flex;
			justify-content: space-between;
			align-items: start;
			flex-wrap: nowrap;
			padding: 0;

			li {
				position: relative;
				color: var(--bva-white);
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 400; /* one notch bolder than the 300 default */
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
				padding-left: 40px;

				&:last-child {
					max-width: 278px;
				}

				a {
					display: block;
					opacity: 0.5;
					transition: all 0.4s;

					&:hover {
						opacity: 0.8;
					}
				}

				svg {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
	}

	.footer__body {
		padding-bottom: 40px;
		border-bottom: solid 1px var(--bva-overlay-white-30);
		margin-bottom: 40px;

		.footer__content {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: start;
		}

		.footer__left {
			width: 50%;

			h3 {
				max-width: 330px;
				color: var(--bva-white);
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			.newsletter-form {
				max-width: 330px;

				.newsletter__row {
					position: relative;
					border-bottom: 1px solid #fefefe;

					.newsletter__input {
						width: 90%;
						background: transparent;
						padding: 15px 24px 15px 0;
						border: none;
						outline: none;
						color: var(--bva-overlay-white-60);
						font-family: 'Geist Mono';
						font-size: 14px;
						font-style: normal;
						font-weight: 300;
						line-height: 110%; /* 15.4px */
						text-transform: uppercase;

						&::placeholder {
							color: var(--bva-overlay-white-60);
						}
					}

					.newsletter__submit {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
		}

		.footer__right {
			width: 50%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: start;
			gap: 48px;

			.footer_right_1,
			.footer_right_2,
			.footer_right_3 {
				padding-left: 20px;
				border-left: 1px solid rgba(255, 255, 255, 0.3);
				width: calc((100% - 96px) / 3);

				summary {
					color: var(--bva-white);
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 300;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;
					margin-bottom: 24px;

					/* Kill the native <details> disclosure triangle everywhere. The
					   `+`/`−` affordance (mobile summary::after) is the only marker we
					   want — `::marker { content:none }` alone leaves WebKit/Safari's
					   solid triangle, which paints alongside the `+`. */
					list-style: none;

					&::marker {
						content: none;
					}

					&::-webkit-details-marker {
						display: none;
					}
				}

				.content {
					a {
						display: block;
						color: var(--bva-white-pure);
						font-family: Geist;
						font-size: 12px;
						font-style: normal;
						font-weight: 500;
						line-height: 110%; /* 13.2px */
						text-transform: uppercase;
						transition: all 0.4s;

						&:hover {
							opacity: 0.8;
						}
					}

					a ~ a {
						margin-top: 12px;
					}
				}

				/* Desktop/tablet: columns are always expanded and the summary is
				   inert (the mobile accordion below takes over at ≤835). */
				@media (min-width: 836px) {
					details summary {
						cursor: default;
						pointer-events: none;
					}

					/* Force the panel visible whatever the <details> open state.
					   A closed <details> hides its panel two different ways depending
					   on the browser: the legacy `display:none` on its children AND the
					   modern ::details-content / content-visibility slot. Override both,
					   otherwise a column without the `open` attribute shows nothing. */
					details > .content {
						display: block !important;
					}

					details::details-content {
						content-visibility: visible !important;
					}
				}
			}
		}
	}

	.footer__foot {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: end;
		gap: 40px;

		p {
			max-width: 1247px;
			color: var(--bva-white);
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 300;
			line-height: 132%; /* 15.84px */
			margin-bottom: 0;
		}

		.scroll-up {
			display: block;
		}
	}
}

@media (max-width: 835px) {
	.footer {
		padding: 32px 0;

		.footer__head {
			.contacts {
				/* Single row that scrolls horizontally on phones instead of
				   stacking — the reassurance items stay on one line, swipeable. */
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 32px;
				overflow-x: auto;
				scrollbar-width: none; /* Firefox */

				&::-webkit-scrollbar {
					display: none;
				}

				li {
					flex: 0 0 auto;
					white-space: nowrap;

					&:last-child {
						max-width: none;
					}
				}
			}
		}

		.footer__content {
			flex-direction: column;
			gap: 24px;

			.footer__left,
			.footer__right {
				width: 100%;
			}

			.footer__right {
				flex-direction: column;

				.footer_right_1,
				.footer_right_2,
				.footer_right_3 {
					width: 100%;
					padding-left: 0;
					border-left: none;
					border-top: 1px solid rgba(255, 255, 255, 0.08);
					padding-top: 24px;

					/* Collapsible accordion on phones: closed by default (no `open`
					   attribute), a +/− affordance, the panel toggles natively. */
					summary {
						position: relative;
						padding-right: 24px;
						margin-bottom: 0;
						opacity: 0.6;
						cursor: pointer;
					}

					summary::after {
						content: '+';
						position: absolute;
						top: 0;
						right: 0;
						font-family: 'Geist Mono';
						font-size: 18px;
						line-height: 1;
					}

					details[open] summary {
						margin-bottom: 24px;
					}

					details[open] summary::after {
						content: '−';
					}

					/* Explicit collapse: don't rely on the native <details> hiding
					   (defeated by page-level .content rules on some templates). */
					details:not([open]) .content {
						display: none;
					}
				}
			}
		}

		.footer__foot {
			.scroll-up {
				display: none;
			}
		}
	}
}

/* Shared featured section wrapper. The grid .products/.product below was already
   shared, but the section chrome (.featured padding + .featured__head flex header,
   h3 uppercase, right-aligned CTA) used to live in home.css — loaded only on home —
   so article/journal/presse/larticle cross-sell sections rendered the head unstyled
   (non-uppercase title, CTA stacked under it). Moved here so every v3 view that uses
   featured-products gets the same head. The max-width:835px override sits below. */
.featured {
	padding: 132px 0;

	&.featured--alt {
		padding: 120px 0;
	}

	.featured__head {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;

		h3 {
			max-width: 570px;
			color: var(--bva-black);
			font-family: Geist;
			font-size: 24px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 26.4px */
			text-transform: uppercase;
			margin-bottom: 0;
		}

		a {
			display: block;
			color: var(--bva-black);
			text-align: center;
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 600;
			line-height: 110%; /* 13.2px */
			text-transform: uppercase;
			border-bottom: 1px solid var(--bva-black);
			text-decoration: none;
			transition: all 0.4s;

			&:hover {
				opacity: 0.8;
			}
		}
	}
}

/* Shared product grid. Lives with .product (the centralized card) so every v3
   view that renders the card — home, larticle catalog, article/journal cross-sell —
   gets the 4-up desktop layout. The mobile carousel override sits in the
   max-width:835px block below. (Was previously home.css-only, which left .products
   at display:block on every other template.) */
.products {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 40px 12px;
}

.product {
	display: flex;
	flex-direction: column;
	width: calc(25% - 9px);

	.product__head {
		position: relative;
		overflow: hidden;
		border-radius: 4px;
		margin-bottom: 16px;

		.product__image {
			display: block;
			text-decoration: none;
			padding-bottom: 114%;
			background-size: contain;
			background-position: center;
			background-repeat: no-repeat;
			transition: all 0.4s ease;
			background-color: var(--bva-cream);

			&:hover {
				transform: scale(1.06);
			}
		}

		.product__meta {
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			position: absolute;
			top: 24px;
			left: 0;
			right: 0;
			padding: 0 24px;

			.stars {
				display: flex;
				flex-wrap: nowrap;
				justify-content: start;
				align-items: center;
				gap: 2px;

				svg {
					width: 16px;
					height: 15px;
				}
			}
			.tag {
				color: var(--bva-black-pure);
				font-family: 'Geist Mono';
				font-size: 14px;
				font-style: normal;
				font-weight: 300;
				line-height: 110%; /* 15.4px */
				text-transform: uppercase;
			}
		}
	}

	.product__body {
		flex-grow: 1;

		.product__name {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: 120%; /* 24px */
			text-decoration: none;
			margin-bottom: 8px;
		}

		.product__info {
			color: var(--bva-black);
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 300;
			line-height: 132%; /* 23.76px */
			margin-bottom: 0;
			opacity: 0.6;
		}
	}

	.product__foot {
		margin-top: 32px;
	}
}

@media (max-width: 835px) {
	.featured {
		padding: 80px 0;

		&.featured--alt {
			padding: 48px 0;
			h3 {
				color: var(--BLACK, var(--bva-black));
				text-align: center;

				/* Mobile/Header M */
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 500;
				line-height: 100%; /* 20px */
				text-transform: uppercase;
			}
		}

		.featured__head {
			flex-direction: column;
			align-items: center;

			h3 {
				width: 100%;
				text-align: center;
				margin-bottom: 16px;
			}

			a {
				font-size: 11px;
			}
		}
	}

	.product {
		.product__body {
			.product__name {
			}
		}
	}
}

/* The slider switcher (.v3-dots) is mobile-only — on desktop these rows
   are static grids with no indicator. Styled inside the breakpoint below. */
.v3-dots { display: none; }

@media (max-width: 835px) {
	.products {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 40px; /* Extra space for dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Hide scrollbar (Firefox) */
	}

	.products::-webkit-scrollbar {
		display: none; /* Hide scrollbar (Chrome/Safari) */
	}

	.product {
		width: calc(82% - 10px);
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;
	}

	/* ----------------------------------------------------------- *\
	   V3 slider switcher — SINGLE SOURCE OF TRUTH.
	   The "trait" (dash) indicator built by ihaInitSlider() for every
	   mobile slider (home products + videos, "Le journal" teaser, PDP
	   secondary products). One dash per slide; active slide goes ink.
	   Visual parity with the PDP carousel dots (.pdp-carousel-dots).
	\* ----------------------------------------------------------- */
	.v3-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		margin-top: -24px; /* sit within the slider's reserved padding-bottom */
		position: relative;
		z-index: 2;
	}

	.v3-dots .dot {
		width: 24px;
		height: 2px;
		border-radius: 0;
		background: rgba(21, 20, 18, 0.2);
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.v3-dots .dot.active { background: var(--bva-black); }

	/* "Le journal" teaser → one-line peek slider on mobile (like the
	   products/videos rows). The journal *listing* grid
	   (.journal-listing .journal-grid) is intentionally untouched. */
	.posts .journal-grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		gap: 16px;
		padding-bottom: 40px; /* reserved space for the dash switcher */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.posts .journal-grid::-webkit-scrollbar { display: none; }

	.posts .journal-card {
		flex: 0 0 calc(82% - 8px);
		scroll-snap-align: start;
	}

	/* ihaInitSlider() injects .v3-dots as the block's LAST element, so its bottom
	   edge ends the section — page-level margins can't carry the spacing (see
	   `.larticle .posts { margin: 0 }` in larticle.css) and the global FAQ that
	   follows has a filled background, so the dashes sat right against it.
	   `--alt` (article page) is excluded: its bordered box already pads 48px. */
	.posts:not(.posts--alt) .v3-dots { margin-bottom: 40px; }
}


/* --- Featured journal section wrapper ("Le journal" / "Pour aller plus loin") --- */
.posts {
	margin: 132px 0;

	&.posts--alt {
		padding: 48px 0;
		border: 1px solid rgba(0, 0, 0, 0.12);
		margin: 0 0;

		.posts__head {
			h3 {
				text-align: left;
			}
		}
	}

	.posts__head {
		margin-bottom: 32px;

		h3 {
			color: var(--bva-black);
			text-align: center;
			font-family: Geist;
			font-size: 24px;
			font-style: normal;
			font-weight: 500;
			line-height: 110%;
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}
}

/* --- Article card grid (staggered: odd short, even tall) — shared by journal listing + featured sections --- */
.journal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px 32px;
	align-items: start;
}

.journal-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
}

.journal-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 328 / 266;
	border-radius: 4px;
	background: var(--bva-img-bg) center / cover no-repeat;
}

.journal-card:nth-child(even) .journal-card__media { aspect-ratio: 328 / 323; }

.journal-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.journal-card__cat {
	font: var(--bva-t-label);
	text-transform: uppercase;
	color: var(--bva-black);
}

.journal-card__title {
	font: var(--bva-t-header-s);
	color: var(--bva-black);
}

@media (max-width: 1100px) {
	.journal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 835px) {
	.posts {
		margin: 24px 0;

		&.posts--alt {
			h3 {
				color: var(--bva-black);
				text-align: center;
				font-family: Geist;
				font-size: 20px;
				font-style: normal;
				font-weight: 500;
				line-height: 100%;
				text-transform: uppercase;
			}
		}
	}
}

@media (max-width: 860px) {
	.journal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.journal-grid { gap: 40px; }
	.journal-card__media { aspect-ratio: 351 / 320; }
	.journal-card:nth-child(even) .journal-card__media { aspect-ratio: 351 / 390; }
}

.questions {
	background-color: var(--bva-badge-bg);
	padding: 80px 0;

	.questions__head {
		margin-bottom: 40px;

		h3 {
			color: var(--bva-black);
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 400;
			line-height: 130%; /* 36.4px */
			margin-bottom: 0;
		}
	}
}

@media (max-width: 835px) {
	.questions {
		padding: 32px 0;

		.questions__head {
			h3 {
				color: var(--BLACK, var(--bva-black));

				/* Mobile/Header L */
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 400;
				line-height: 112%; /* 26.88px */
				margin-bottom: 32px;
			}
		}
	}
}

.faqs {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid rgba(0, 0, 0, 0.16);

	& ~ .faqs {
		margin-top: 40px;
	}

	.faqs__head {
		color: var(--bva-black);
		font-family: 'Geist Mono';
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 110%; /* 15.4px */
		text-transform: uppercase;
		padding-top: 16px;
	}

	.faqs__body {
		width: 757px;
	}
}

.faq {
	summary {
		position: relative;
		display: block;
		color: var(--bva-black);
		font-family: Geist;
		font-size: 18px;
		font-style: normal;
		font-weight: 300;
		line-height: 132%; /* 23.76px */
		padding-top: 8px;
		padding-bottom: 4px;
		border-bottom: 1px solid var(--bva-shadow);
		margin-bottom: 0;

		svg {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.content {
		color: rgba(28, 26, 23, 0.6);
		font-family: Geist;
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 132%; /* 23.76px */
		padding-bottom: 6px;
		transition: all 0.4s;
	}

	details[open] summary {
		border-bottom: none;
	}
	details[open] .content {
		border-bottom: 1px solid var(--bva-shadow);
	}
}

@media (max-width: 835px) {
	.faqs {
		border-top: none;
		flex-direction: column;

		.faqs__body {
			width: 100%;
		}
	}

	.faq {
		summary {
			padding-right: 20px;
		}
	}
}

.main-wrapper {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 94px 0 120px;

	.main-content {
		width: 673px;
		min-width: 0;

		h1 {
			color: var(--bva-black);
			font-family: Geist;
			font-size: 48px;
			font-style: normal;
			font-weight: 500;
			line-height: 110%; /* 52.8px */
			margin-bottom: 40px;
		}

		h2 {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 32px;
			font-style: normal;
			font-weight: 400;
			line-height: 130%; /* 36.4px */
			margin-bottom: 24px;
		}

		h3 {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 28px;
			font-style: normal;
			font-weight: 400;
			line-height: 130%; /* 36.4px */
			margin-bottom: 24px;
		}

		h4 {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 12px;
			font-style: normal;
			font-weight: 500;
			line-height: 110%; /* 13.2px */
			text-transform: uppercase;
			margin-bottom: 24px;
		}

		p {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 18px;
			font-style: normal;
			font-weight: 300;
			line-height: 132%; /* 23.76px */
		}

		p.meta {
			max-width: 310px;
			color: var(--bva-black);
			font-family: 'Geist Mono';
			font-size: 14px;
			font-style: normal;
			font-weight: 300;
			line-height: 110%; /* 15.4px */
			text-transform: uppercase;
			margin-bottom: 0;
		}

		p.subtitle {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: 120%; /* 24px */
			margin-bottom: 80px;
		}

		.image-block {
			margin: 80px 0;

			img {
				width: 100%;
				max-width: 100%;
			}
		}

		.highlight-block,
		.form-block,
		.text-block {
			margin: 80px 0;
		}

		.highlight-block {
			border-radius: 12px;
			background: var(--bva-badge-bg);
			padding: 40px;

			h4 {
				color: var(--bva-black);
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 40px;
			}

			p {
				color: rgba(0, 0, 0, 0.6);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 300;
				line-height: 132%;
				padding-bottom: 0;

				& ~ p {
					margin-top: 32px;
				}

				strong,
				b {
					color: var(--bva-black-pure);
					font-weight: 600;
				}
			}
		}

		.form-block {
			border-radius: 12px;
			background: var(--bva-canelle-400);
			padding: 40px;

			label {
				display: block;
				color: var(--bva-white);
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 26.4px */
				text-transform: uppercase;
				margin-bottom: 20px;
			}

			.dl__row {
				position: relative;
				border-bottom: 1px solid #fefefe;

				.dl-input {
					width: 95%;
					background: transparent;
					padding: 15px 24px 15px 0;
					border: none;
					outline: none;
					/* Typed/autofilled value: full white + medium weight for legibility.
					   Placeholder stays dim (below) to keep the input-state hierarchy. */
					color: var(--bva-white);
					font-family: 'Geist Mono';
					font-size: 14px;
					font-style: normal;
					font-weight: 500;
					line-height: 110%; /* 15.4px */
					text-transform: uppercase;

					&::placeholder {
						color: var(--bva-overlay-white-60);
						font-weight: 300;
					}

					/* Neutralize the UA autofill paint (opaque light box) so it can't
					   cover the submit arrow or override the mono-on-canelle palette. */
					&:-webkit-autofill,
					&:-webkit-autofill:hover,
					&:-webkit-autofill:focus,
					&:-webkit-autofill:active {
						-webkit-box-shadow: 0 0 0 1000px var(--bva-canelle-400) inset;
						-webkit-text-fill-color: var(--bva-white);
						font-weight: 500;
						caret-color: var(--bva-white);
						transition: background-color 9999s ease-in-out 0s;
					}
				}

				.dl-submit {
					position: absolute;
					/* offset so the 40px hit area stays centered on the arrow's
					   original edge position; circle stays within the card padding */
					right: -8px;
					top: 50%;
					transform: translateY(-50%);
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					cursor: pointer;
					transition: background-color 0.2s ease;

					&:hover {
						background: var(--bva-overlay-white-30);
					}
				}
			}
		}
	}

	.sidebar {
		width: 359px;
		flex-shrink: 0;
		position: relative;
		padding-left: 16px;
		border-left: 1px solid var(--bva-hairline);

		.sidebar__title {
			display: none;
		}

		h3 {
			color: var(--bva-black);
			font-family: 'Geist Mono';
			font-size: 14px;
			font-style: normal;
			font-weight: 300;
			line-height: 110%; /* 15.4px */
			text-transform: uppercase;
			margin-bottom: 24px;
		}
	}

	/* Pinned product column. `top: 120px` is the mock's offset and holds as long
	   as the list fits the viewport; a taller list (4 products = 958px against
	   the 649px between the pin and the fold on a 769px-tall viewport) would
	   park its tail below the fold for good — the sticky's containing block is
	   the full-height .sidebar, so the pin never releases. v3.js then overrides
	   --bva-aside-top with a negative offset that pins the column by its bottom
	   instead: the page scroll walks the whole list past the reader first. */
	.content-wrapper {
		position: sticky;
		top: var(--bva-aside-top, 120px);
		transition: all 0.3s ease;
	}
}

@media (max-width: 835px) {
	.main-wrapper {
		flex-direction: column;
		padding: 88px 0 120px;

		.main-content {
			width: 100%;

			p.meta {
				max-width: none;
				color: var(--BLACK, var(--bva-black));
				font-family: 'Geist Mono';
				font-size: 11px;
				font-style: normal;
				font-weight: 300;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				margin-bottom: 18px;
			}

			p.subtitle {
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 18px;
				font-style: normal;
				font-weight: 500;
				line-height: 120%; /* 21.6px */
				margin-bottom: 65px;
			}

			h1 {
				color: var(--BLACK, var(--bva-black));
				font-family: Geist;
				font-size: 36px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 39.6px */
			}

			h2 {
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 30px;
				font-style: normal;
				font-weight: 400;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}

			h3 {
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 24px;
				font-style: normal;
				font-weight: 400;
				line-height: 112%; /* 26.88px */
				margin-bottom: 24px;
			}

			h4 {
				color: var(--bva-black-pure);
				/* Mobile/Label Bold */
				font-family: Geist;
				font-size: 11px;
				font-style: normal;
				font-weight: 500;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				margin-bottom: 24px;
			}

			p {
				color: var(--bva-black-pure);
				font-family: Geist;
				font-size: 15px;
				font-style: normal;
				font-weight: 300;
				line-height: 132%; /* 19.8px */
				margin-bottom: 10px;
			}

			.image-block {
				margin: 65px 0;
				border-radius: 4px;
				overflow: hidden;
			}

			.highlight-block,
			.form-block,
			.text-block {
				margin: 65px 0;
			}

			.form-block {
				padding: 24px;

				label {
					color: var(--White, var(--bva-white));

					/* Mobile/Header M */
					font-family: Geist;
					font-size: 20px;
					font-style: normal;
					font-weight: 500;
					line-height: 100%; /* 20px */
					text-transform: uppercase;
				}

				.dl-input {
					width: 90% !important;

					&::placeholder {
						color: var(--bva-overlay-white-60);
					}
				}
			}

			.highlight-block {
				padding: 24px;

				h4 {
					color: var(--BLACK, var(--bva-black));

					/* Mobile/Header M */
					font-family: Geist;
					font-size: 20px;
					font-style: normal;
					font-weight: 500;
					line-height: 100%; /* 20px */
					text-transform: uppercase;
				}

				p {
					color: rgba(0, 0, 0, 0.6);

					/* Mobile/Paragraphe */
					font-family: Geist;
					font-size: 15px;
					font-style: normal;
					font-weight: 300;
					line-height: 132%;
				}
			}
		}

		.sidebar {
			width: auto;

			.sidebar__title {
				display: block;
				color: var(--BLACK, var(--bva-black));

				/* Mobile/Label Mono */
				font-family: 'Geist Mono';
				font-size: 11px;
				font-style: normal;
				font-weight: 300;
				line-height: 110%; /* 12.1px */
				text-transform: uppercase;
				text-align: center;
			}

			.content-wrapper {
				position: static;

				h3 {
					display: none;
				}
			}
		}
	}
}

@media (max-width: 835px) {
	.content-wrapper {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-behavior: smooth;
		scroll-snap-type: x mandatory;
		gap: 20px;
		padding-bottom: 50px; /* Space for pagination dots */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	}

	.content-wrapper::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	}

	.product-info {
		width: calc(82% - 10px); /* Good balance for product cards */
		flex: 0 0 calc(82% - 10px);
		scroll-snap-align: start;

		flex-direction: column !important;

		& ~ .product-info {
			margin-top: 0 !important;
		}

		.product__head {
			width: 100% !important;
			padding-bottom: 80% !important;
		}

		.product__body {
			width: 100% !important;
		}
	}

	/* Secondary-products switcher uses the centralized .v3-dots (above). */
}

.product-info {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	gap: 16px;

	& ~ .product-info {
		margin-top: 40px;
	}

	.product__head {
		width: 154px;
		padding: 16px 12px 48% 12px;
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		background-color: var(--bva-cream);
	}

	.product__body {
		flex-grow: 1;
		width: 173px;

		h4 {
			color: var(--bva-black-pure);
			font-family: Geist;
			font-size: 20px;
			font-style: normal;
			font-weight: 500;
			line-height: 120%; /* 24px */
			margin-bottom: 8px;
		}

		p {
			color: var(--bva-black);
			font-family: Geist;
			font-size: 16px;
			font-style: normal;
			font-weight: 300;
			line-height: 132%; /* 21.12px */
			margin-bottom: 16px;
		}
	}
}



/* ------------------------------------------------------------ *\
	Article pull-quote (v3/article/quote.php) — centered statement + optional
	expert signature, sits in the article body beside .text-block/.highlight-block.
\* ------------------------------------------------------------ */

.main-content .quote-block {
	margin: 80px 0;
	text-align: center;
}
.main-content .quote-block__text {
	position: relative;
	margin: 0 auto 40px;
	padding-top: 56px;
	color: var(--bva-black);
	font-family: Geist;
	font-size: 24px;
	font-weight: 500;
	line-height: 130%;
	text-transform: uppercase;
}
.main-content .quote-block__text::before {
	content: '\201C';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	font-size: 72px;
	line-height: 1;
	color: var(--bva-black);
}
.main-content .quote-block__author {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 426px;
	margin: 0 auto;
	padding-top: 16px;
	border-top: 1px solid rgba(21, 20, 18, 0.3);
}
.main-content .quote-block__brand {
	color: var(--bva-black);
	font-family: 'Geist Mono';
	font-size: 11px;
	font-weight: 300;
	line-height: 120%;
	text-transform: uppercase;
	text-align: left;
}
.main-content .quote-block__sign {
	font-family: 'Zeyada', cursive;
	font-size: 34px;
	line-height: 1;
	color: var(--bva-black);
}
@media (max-width: 835px) {
	.main-content .quote-block { margin: 56px 0; }
	.main-content .quote-block__text { font-size: 20px; padding-top: 44px; }
	.main-content .quote-block__text::before { font-size: 56px; }
	.main-content .quote-block__sign { font-size: 28px; }
}

/* ------------------------------------------------------------ *\
	Figma design-system corrections (shared v3 components).
	The Figma text styles are Geist Medium/SemiBold/Regular; several shared
	components were authored one weight too light (Header L 500, Header S/M 600,
	Paragraphe 400, Label 400, CTA 600). These same-specificity, later-in-source
	overrides realign them to the DS.
	Affects every v3 view that uses these components (home, PDP, journal, etc.).

	Plate tint stays --bva-cream (#f4ede5, set on .product__image above): the
	product photos are exported with that exact warm-white baked in, so the plate
	must match it for `background-size: contain` to read as the image extended —
	--bva-img-bg (#ebe6e0) left a visible seam around the bottle.
\* ------------------------------------------------------------ */
.product .product__head .product__meta .tag { font-weight: 400; }   /* Label */
.product .product__body .product__name { font-weight: 600; }        /* Header S */
.product .product__body .product__info { font-weight: 400; }        /* Paragraphe */
.btn { font-weight: 600; }                                          /* CTA */
.btn.btn--product { font-weight: 700; }                             /* CTA "Découvrir" — bolder */
.questions .questions__head h3 { font-weight: 500; }                /* Header L */
.faqs .faqs__head { font-weight: 400; }                             /* Label */
.faq summary { font-weight: 400; }                                  /* Paragraphe */
.faq .content { font-weight: 400; }
.journal-card__cat { font-weight: 400; }                            /* Label */
.journal-card__title { font-weight: 600; }                          /* Header S */

/* Half-star primitive for app_render_stars(half=true). Lives here (loaded on
   every v3 view) so fractional ratings render outside the PDP too — e.g. the
   home reviews header "4,7" shows ★★★★½ as in the maquette. */
.stars .pdp-star-half { position: relative; flex: 0 0 19px; width: 19px; height: 18px; }
.stars .pdp-star-half svg { position: absolute; inset: 0; width: 19px; height: 18px; }
.stars .pdp-star-half svg:last-child { clip-path: inset(0 50% 0 0); }

/* Footer column titles (BESOINS / À PROPOS / AIDE) are muted vs the white links
   in the maquette; the V3 footer rendered them at full white. Dim to ~60%. */
.footer .footer__body .footer__content .footer__right :is(.footer_right_1, .footer_right_2, .footer_right_3) summary {
	color: rgba(254, 254, 254, 0.6);
}

/* ------------------------------------------------------------ *\
	#LOGO — stem darkening at standard density
\* ------------------------------------------------------------ */

/* The lockup's strokes measure ~1.78 CSS px at height:44px, so on a 1x display
   they never align with the pixel grid: only 28% of the inked pixels come out
   solid and the mark reads grey. A 0.4px non-scaling stroke (0.2px each side)
   lifts that to 43% — the contrast of a 45% larger logo, with no layout change.
   `non-scaling-stroke` keeps the added weight at 0.4 device px whatever height
   the logo is rendered at (44 header / 34 mobile / 58 drawer). Retina has the
   resolution to resolve the strokes on its own and is left untouched. */
@media (max-resolution: 1.5dppx), (-webkit-max-device-pixel-ratio: 1.5) {
	.logo svg path,
	.v3-drawer__logo svg path {
		stroke-width: 0.4px;
	}
}