/**
 * Chrome VibraForce 2026 — header, hero, footer.
 *
 * Direction V3 « Vibratoire », accent orange, registre clair.
 * Tout est préfixé `vf-` et scopé : aucune règle ne fuit vers le reste du site.
 */

/* ------------------------------------------------------------------ Tokens */

:root {
	--vf-navy: #14315b;
	--vf-blue: #1f6f9e;
	--vf-teal-900: #0f3a4a;
	--vf-teal-700: #15586e;
	--vf-green: #2ba46b;
	--vf-sky: #32b5a3;
	--vf-green-ink: #1f7a50;
	--vf-orange: #ef7d16;
	--vf-orange-ink: #cf6608;

	--vf-ink: #16232e;
	--vf-ink-soft: #54646f;
	--vf-bg: #eef3f6;
	--vf-surface: #ffffff;
	--vf-surface-2: #f5f8fa;
	--vf-line: #dde6ec;

	--vf-accent: var(--vf-orange);
	--vf-accent-ink: var(--vf-orange-ink);

	--vf-r-s: 6px;
	--vf-r-m: 12px;
	--vf-r-l: 20px;
	--vf-r-pill: 999px;

	--vf-sh-1: 0 10px 30px -18px rgba(15, 58, 74, .5);
	--vf-sh-2: 0 24px 60px -30px rgba(15, 58, 74, .55);
	--vf-ease: cubic-bezier(.22, .61, .36, 1);

	--vf-maxw: 1180px;
	--vf-header-h: 138px;

	/* Échelle typographique du hero.
	   Sous-titre et repère calés sur la maquette (~1180 px : 17 px / 11 px).
	   H1 réduit d'environ 30 % à la demande du client (1180 px : ~34 px,
	   plafond 50 px), pour laisser la place à la barre de recherche. */
	--vf-hero-title: clamp(22px, 2.1vw + 9.5px, 50px);
	--vf-hero-lead: clamp(14px, .38vw + 12.5px, 23px);
	--vf-hero-scroll: clamp(11px, .14vw + 9.35px, 14px);
	--vf-font: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--vf-font-alt: "Fraunces", Georgia, "Times New Roman", serif;
}

/* Coquille neutre reprise des templates du thème parent. */
.vf-shell,
.vf-shell__inner {
	display: contents;
}

/* --------------------------------------------------------------- Primitives */

.vf-header,
.vf-hero,
.vf-footer,
.vf-drawer {
	font-family: var(--vf-font);
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

.vf-header *,
.vf-hero *,
.vf-footer *,
.vf-drawer * {
	box-sizing: border-box;
}

.vf-wrap {
	width: 100%;
	max-width: var(--vf-maxw);
	margin: 0 auto;
	padding: 0 26px;
}

.vf-header ul,
.vf-footer ul,
.vf-drawer ul,
.vf-hero ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vf-header a,
.vf-footer a,
.vf-drawer a,
.vf-hero a {
	text-decoration: none;
	transition: color .18s var(--vf-ease), opacity .18s var(--vf-ease), background-color .18s var(--vf-ease);
}

.vf-header img,
.vf-footer img,
.vf-drawer img,
.vf-hero img {
	max-width: 100%;
	height: auto;
	display: block;
}

.vf-header :focus-visible,
.vf-hero :focus-visible,
.vf-footer :focus-visible,
.vf-drawer :focus-visible {
	outline: 3px solid var(--vf-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Boutons */

.vf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--vf-r-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .18s var(--vf-ease), filter .18s var(--vf-ease), background-color .18s var(--vf-ease);
}

.vf-btn--primary {
	background: var(--vf-accent);
	color: #fff;
}

.vf-btn--primary:hover,
.vf-btn--primary:focus {
	color: #fff;
	filter: brightness(1.1);
	transform: translateY(-1px);
}

.vf-btn--navy {
	background: var(--vf-navy);
	color: #fff;
}

.vf-btn--navy:hover,
.vf-btn--navy:focus {
	color: #fff;
	filter: brightness(1.15);
	transform: translateY(-1px);
}

.vf-btn--sky {
	background: var(--vf-sky);
	border-color: var(--vf-sky);
	color: #fff;
}

.vf-btn--sky:hover,
.vf-btn--sky:focus {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.vf-btn--ghost {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.vf-btn--ghost:hover,
.vf-btn--ghost:focus {
	background: rgba(255, 255, 255, .2);
	color: #fff;
	transform: translateY(-1px);
}

.vf-btn--lg {
	padding: 14px 26px;
	font-size: 14px;
}

.vf-btn--block {
	display: flex;
	width: 100%;
}

.vf-btn__arrow {
	font-size: 1.05em;
	line-height: 1;
}

.vf-pill,
.vf-nav__link.vf-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	border-radius: var(--vf-r-pill);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.4;
	color: #fff;
	opacity: 1;
}

.vf-pill--accent,
.vf-nav__link.vf-pill--accent {
	background: var(--vf-accent);
}

.vf-pill--green,
.vf-nav__link.vf-pill--green {
	background: #2a8f6f;
	color: #eaf6fa;
}

.vf-pill--sky,
.vf-nav__link.vf-pill--sky {
	background: var(--vf-sky);
}

.vf-pill:hover,
.vf-pill:focus,
.vf-nav__link.vf-pill:hover,
.vf-nav__link.vf-pill:focus {
	color: #fff;
	text-decoration: none;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

.vf-pill__mark {
	font-size: 11px;
}

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

.vf-header {
	position: relative;
	z-index: 900;
	background: var(--vf-surface);
}

.vf-header.is-sticky {
	position: sticky;
	top: 0;
}

/* Bandes dégradées du header et du footer. Dégradé, largeur de fond et
   défilement sont mutualisés ici : seules la hauteur et la mise en page
   diffèrent d'une bande à l'autre (voir `.vf-footer__wave`).
   Maquette : 6 s ; ralenti à 10 s à la demande du client. */
@keyframes vf-wave-flow {
	from { background-position: 0 0; }
	to { background-position: 300% 0; }
}

.vf-wave,
.vf-footer__wave {
	background: linear-gradient(90deg, var(--vf-navy), var(--vf-blue), var(--vf-green), var(--vf-blue), var(--vf-navy));
	background-size: 300% 100%;
	animation: vf-wave-flow 10s linear infinite;
}

.vf-wave {
	display: block;
	height: clamp(4px, .4vw, 8px);
}

/* Barre utilitaire */

.vf-util {
	background: var(--vf-teal-900);
	color: #cfe2e9;
	font-size: 14px;
	max-height: 80px;
	opacity: 1;
	overflow: hidden;
	transition: max-height .28s var(--vf-ease), opacity .2s var(--vf-ease);
}

.vf-header.is-compact .vf-util {
	max-height: 0;
	opacity: 0;
}

.vf-util__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-top: 8px;
	padding-bottom: 8px;
	flex-wrap: wrap;
	max-width: none;
}

.vf-util__menu {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.vf-util__menu .vf-nav__link:not(.vf-pill),
.vf-util__actions .vf-nav__link:not(.vf-pill) {
	color: #cfe2e9;
	font-weight: 600;
	opacity: .9;
}

.vf-util__menu .vf-nav__link:not(.vf-pill):hover,
.vf-util__actions .vf-nav__link:not(.vf-pill):hover {
	color: #fff;
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vf-util__spacer {
	flex: 1 1 auto;
}

/* Liens de droite (menu `vf_utility_actions`). Classe `vf-pill--green` sur un
 * item = bouton pastille ; sans classe = lien texte. */
.vf-util__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.vf-util__actions .vf-nav__link:not(.vf-pill) {
	padding: 0;
	font-size: inherit;
}

.vf-util__menu .vf-nav__item.is-current > .vf-nav__link,
.vf-util__actions .vf-nav__item.is-current > .vf-nav__link {
	color: #fff;
}

/* Pastilles de la barre utilitaire : 10 px plus hautes que les autres (38 px). */
.vf-util .vf-nav__link.vf-pill {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* Pastilles de la barre utilitaire : repère ▸ (masqué aux lecteurs d'écran). */
.vf-util__menu .vf-nav__link.vf-pill--accent::before,
.vf-util__menu .vf-nav__link.vf-pill--sky::before {
	content: "▸";
	content: "▸" / "";
	font-size: 11px;
}

.vf-socials {
	display: flex;
	gap: 6px;
}

.vf-socials__link {
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #eaf6fa;
	font-size: 13px;
}

.vf-socials__link:hover {
	background: var(--vf-accent);
	color: #fff;
}

.vf-lang {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
}

.vf-lang__item {
	color: rgba(255, 255, 255, .55);
}

.vf-lang__item.is-active,
.vf-lang__item:hover {
	color: #fff;
}

.vf-lang__sep {
	opacity: .4;
}

/* Barre principale */

.vf-main {
	background: var(--vf-surface);
	border-bottom: 1px solid var(--vf-line);
	transition: box-shadow .25s var(--vf-ease);
}

.vf-header.is-compact .vf-main {
	box-shadow: var(--vf-sh-1);
}

.vf-main__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	max-width: none;
}

.vf-main__brand {
	flex: 0 0 auto;
}

.vf-brand__img {
	max-height: 62px;
	width: auto;
	transition: max-height .25s var(--vf-ease);
}

.vf-header.is-compact .vf-brand--header .vf-brand__img {
	max-height: 48px;
}

.vf-brand__text {
	font-weight: 800;
	font-size: 22px;
	color: var(--vf-navy);
}

.vf-main__actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.vf-main__cta {
	font-size: 15px;
}

/* Navigation principale */

.vf-nav-wrap {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

.vf-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: center;
}

.vf-nav__item {
	position: relative;
}

.vf-nav__link {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--vf-ink);
	white-space: nowrap;
	transition: color .18s var(--vf-ease), opacity .18s var(--vf-ease);
}

/* Soulignement animé du menu principal.
 *
 * Le filet est un pseudo-élément en position absolue : il ne participe pas au
 * flux, son apparition ne peut donc pas changer la hauteur du lien ni celle du
 * header. L'ancienne version mélangeait deux mécaniques à deux hauteurs
 * différentes — un `border-bottom` accent sur les entrées à sous-menu, un
 * `text-decoration: underline` posé 4 px plus bas sur les autres — d'où
 * l'impression de sursaut au survol.
 *
 * L'animation se fait en `scaleX` depuis le bord gauche : seul le compositeur
 * travaille, aucun recalcul de mise en page. `prefers-reduced-motion` est déjà
 * couvert par la règle globale `.vf-header *` en fin de feuille.
 *
 * Portée limitée à `.vf-nav-wrap` : le footer, la barre utilitaire et le tiroir
 * réutilisent la classe `.vf-nav__link` mais gardent leur propre soulignement
 * (blanc, natif). L'accent orange y reste réservé aux numéros de téléphone. */
.vf-nav-wrap .vf-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--vf-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s var(--vf-ease);
}

.vf-nav-wrap .vf-nav__link:hover,
.vf-nav-wrap .vf-nav__link:focus-visible,
.vf-nav-wrap .vf-nav__item--parent:hover > .vf-nav__link,
.vf-nav-wrap .vf-nav__item--parent:focus-within > .vf-nav__link,
.vf-nav-wrap .vf-nav__item--parent.is-open > .vf-nav__link {
	opacity: 1;
	color: var(--vf-navy);
	text-decoration: none;
}

.vf-nav-wrap .vf-nav__link:hover::after,
.vf-nav-wrap .vf-nav__link:focus-visible::after,
.vf-nav-wrap .vf-nav__item--parent:hover > .vf-nav__link::after,
.vf-nav-wrap .vf-nav__item--parent:focus-within > .vf-nav__link::after,
.vf-nav-wrap .vf-nav__item--parent.is-open > .vf-nav__link::after,
.vf-nav-wrap .vf-nav__item.is-current > .vf-nav__link::after {
	transform: scaleX(1);
}

.vf-nav__item.is-current > .vf-nav__link {
	opacity: 1;
	color: var(--vf-navy);
	font-weight: 700;
	text-decoration: none;
}

.vf-nav__link.is-soon,
.vf-sub__link.is-soon {
	color: var(--vf-ink-soft);
	cursor: default;
}

.vf-nav__soon {
	margin-left: 6px;
	font-size: 12px;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--vf-ink-soft);
	background: var(--vf-surface-2);
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-r-pill);
	padding: 1px 7px;
}

.vf-nav__toggle {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px;
	margin-left: 2px;
	color: var(--vf-ink-soft);
	cursor: pointer;
	line-height: 0;
}

.vf-nav__caret {
	width: 11px;
	height: 8px;
	transition: transform .2s var(--vf-ease);
}

.vf-nav__item.is-open > .vf-nav__toggle .vf-nav__caret {
	transform: rotate(180deg);
}

/* Panneau de sous-menu (desktop) */

.vf-nav__panel {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, 8px);
	min-width: 280px;
	max-width: min(760px, 92vw);
	padding: 14px 8px;
	background: var(--vf-surface);
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-r-m);
	box-shadow: var(--vf-sh-2);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s var(--vf-ease), transform .2s var(--vf-ease), visibility .2s;
	z-index: 20;
}

.vf-nav__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -14px;
	height: 14px;
}

.vf-nav__panel::after {
	content: "";
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: var(--vf-surface);
	border-left: 1px solid var(--vf-line);
	border-top: 1px solid var(--vf-line);
}

.vf-nav__item--parent:hover > .vf-nav__panel,
.vf-nav__item--parent:focus-within > .vf-nav__panel,
.vf-nav__item--parent.is-open > .vf-nav__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.vf-sub {
	display: grid;
	gap: 2px;
}

.vf-sub--cols {
	grid-template-columns: repeat(2, minmax(230px, 1fr));
	column-gap: 22px;
}

.vf-sub__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 14px;
	border-radius: var(--vf-r-s);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--vf-ink);
}

.vf-sub__link::after {
	content: "→";
	color: var(--vf-ink-soft);
	font-weight: 400;
	transition: color .18s var(--vf-ease), transform .18s var(--vf-ease);
}

.vf-sub__link.is-soon::after {
	content: none;
}

.vf-sub__link:hover {
	background: var(--vf-surface-2);
}

.vf-sub__link:hover::after {
	color: var(--vf-accent-ink);
	transform: translateX(2px);
}

.vf-sub__item--parent > .vf-sub__link {
	font-weight: 700;
	color: var(--vf-navy);
}

.vf-sub__caption {
	font-size: 12.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vf-ink-soft);
	font-weight: 800;
	padding: 4px 14px 8px;
}

.vf-sub__group {
	padding-left: 10px;
	border-left: 2px solid var(--vf-line);
	margin: 2px 0 6px 10px;
}

.vf-sub__item--parent > .vf-nav__toggle {
	display: none;
}

.vf-nav__empty {
	margin: 0;
	font-size: 14px;
	color: var(--vf-ink-soft);
}

/* Burger */

.vf-burger {
	display: none;
	appearance: none;
	background: var(--vf-surface-2);
	border: 1px solid var(--vf-line);
	border-radius: var(--vf-r-s);
	padding: 9px 10px;
	cursor: pointer;
}

.vf-burger__bars {
	display: grid;
	gap: 4px;
	width: 20px;
}

.vf-burger__bars i {
	display: block;
	height: 2px;
	background: var(--vf-navy);
	border-radius: 2px;
}

/* Tiroir mobile */

.vf-drawer {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(9, 35, 55, .5);
	opacity: 0;
	transition: opacity .25s var(--vf-ease);
}

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

.vf-drawer.is-open {
	opacity: 1;
}

.vf-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(400px, 92vw);
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 18px;
	background: var(--vf-surface);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .3s var(--vf-ease);
}

.vf-drawer.is-open .vf-drawer__panel {
	transform: none;
}

.vf-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--vf-line);
}

.vf-drawer__close {
	appearance: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	width: 44px;
	height: 44px;
	background: var(--vf-accent);
	border: 0;
	border-radius: 10px;
	color: #fff;
	line-height: 0;
	cursor: pointer;
	transition: filter .18s var(--vf-ease);
}

.vf-drawer__close:hover,
.vf-drawer__close:focus {
	filter: brightness(1.1);
}

.vf-drawer__close .vf-drawer__close-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.vf-drawer__eyebrow {
	margin: 0;
	padding: 6px 10px 10px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vf-ink-soft);
}

.vf-drawer__nav {
	width: 100%;
}

/* Le <ul> hérite de `.vf-nav` (flex row + wrap) : on le repasse en colonne
   pleine largeur, sinon chaque <li> se réduit à son contenu et le +
   absolu se cale sur le bord du texte au lieu du bord du tiroir. */
.vf-nav--drawer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
}

.vf-nav--drawer .vf-nav__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	padding: 0 10px;
	border-bottom: 1px solid var(--vf-bg);
}

.vf-nav--drawer .vf-nav__item:last-child {
	border-bottom: 0;
}

.vf-nav--drawer .vf-nav__link {
	flex: 1 1 100%;
	padding: 14px 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--vf-navy);
	/* Le libellé passe à la ligne avant le +, jamais dessous. */
	white-space: normal;
}

/* Dans le tiroir, l'état ouvert se lit au fond du sous-menu et à la couleur du
   libellé : ni soulignement, ni filet accent, ni fond sur la ligne. */
.vf-nav--drawer .vf-nav__link:hover,
.vf-nav--drawer .vf-nav__link:focus {
	opacity: 1;
	text-decoration: none;
	background: transparent;
}

.vf-nav--drawer .vf-nav__item--parent:hover > .vf-nav__link,
.vf-nav--drawer .vf-nav__item--parent:focus-within > .vf-nav__link,
.vf-nav--drawer .vf-nav__item--parent.is-open > .vf-nav__link,
.vf-nav--drawer .vf-nav__item.is-current > .vf-nav__link {
	text-decoration: none;
}

.vf-nav--drawer .vf-nav__item.is-open > .vf-nav__link,
.vf-nav--drawer .vf-nav__item.is-current > .vf-nav__link {
	color: var(--vf-accent);
	font-weight: 800;
}

/* Le lien parent navigue vers sa page ; seul le « + » déroule le sous-menu. */
.vf-nav--drawer .vf-nav__item--parent > .vf-nav__link {
	padding-right: 48px;
}

/* Zone de toucher de 44 × 44 px, centrée sur la 1re ligne du libellé. */
.vf-nav--drawer .vf-nav__toggle {
	position: absolute;
	top: 3px;
	right: 0;
	z-index: 1;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Le chevron du desktop devient un +/- dans le tiroir. */
.vf-nav--drawer .vf-nav__toggle .vf-nav__caret {
	display: none;
}

.vf-nav--drawer .vf-nav__toggle::before {
	content: "\FF0B";
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	color: var(--vf-ink-soft);
}

.vf-nav--drawer .vf-nav__item.is-open > .vf-nav__toggle::before {
	content: "\2212";
	font-size: 17px;
	color: var(--vf-accent);
}

/* Spécificité alignée sur les règles desktop (.vf-nav__item--parent.is-open >
   .vf-nav__panel) pour neutraliser leur translate(-50%) dans le tiroir. */
.vf-nav--drawer .vf-nav__item--parent > .vf-nav__panel,
.vf-nav--drawer .vf-nav__item--parent.is-open > .vf-nav__panel,
.vf-nav--drawer .vf-nav__item--parent:hover > .vf-nav__panel,
.vf-nav--drawer .vf-nav__item--parent:focus-within > .vf-nav__panel {
	position: static;
	flex: 1 1 100%;
	left: auto;
	top: auto;
	transform: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	display: none;
	min-width: 0;
	max-width: none;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.vf-nav--drawer .vf-nav__item--parent.is-open > .vf-nav__panel {
	display: block;
	margin: 0 0 12px;
	padding: 8px 10px;
	background: var(--vf-surface-2);
	border-radius: var(--vf-r-s);
}

.vf-nav--drawer .vf-nav__panel::before,
.vf-nav--drawer .vf-nav__panel::after {
	content: none;
}

.vf-nav--drawer .vf-sub,
.vf-nav--drawer .vf-sub--cols {
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: 2px 0 2px 14px;
	border-left: 2px solid var(--vf-accent);
}

.vf-nav--drawer .vf-sub__caption {
	padding: 0 0 6px;
}

.vf-nav--drawer .vf-sub__link {
	justify-content: flex-start;
	margin: 0;
	padding: 8px 0;
	background: transparent;
	border-radius: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--vf-ink);
}

.vf-nav--drawer .vf-sub__link::after {
	content: none;
}

.vf-nav--drawer .vf-sub__link:hover {
	background: transparent;
	color: var(--vf-accent-ink);
}

.vf-nav--drawer .vf-sub__group {
	border-left-color: var(--vf-line);
}

.vf-drawer__foot {
	margin-top: auto;
	display: grid;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--vf-line);
}

.vf-drawer__foot .vf-btn--block {
	padding: 13px 20px;
	font-size: 14px;
}

/* Items pastille de la barre utilitaire, rendus en boutons pleine largeur. */
.vf-drawer__pills {
	display: grid;
	gap: 10px;
}

.vf-drawer__pills:empty {
	display: none;
}

.vf-drawer__pills .vf-nav__link.vf-pill {
	display: flex;
	justify-content: center;
	width: 100%;
	gap: 8px;
	padding: 13px 20px;
	font-size: 14px;
	letter-spacing: .02em;
	line-height: 1.2;
}

.vf-drawer__foot .vf-drawer__util {
	margin-top: 4px;
}

.vf-drawer__util {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}

.vf-drawer__util .vf-nav__item {
	display: block;
}

/* Liens du bas du tiroir : zone de toucher de 44 px de haut. */
.vf-drawer__util a,
.vf-drawer__meta a:not(.vf-pill) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.vf-drawer__util .vf-nav__link {
	color: var(--vf-ink-soft);
	font-size: 13px;
	font-weight: 600;
}

.vf-drawer__util .vf-nav__link:hover {
	color: var(--vf-accent-ink);
}

.vf-drawer__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.vf-drawer__meta {
	padding: 6px 4px 0;
}

.vf-drawer__meta-links {
	display: flex;
	align-items: center;
	gap: 22px;
}

/* Même menu que les liens de droite de la barre utilitaire : liens texte,
 * et l'item pastille (Contact) garde le même bouton que dans le header. */
.vf-drawer__meta-links .vf-nav__link:not(.vf-pill) {
	padding: 0;
	background: none;
	letter-spacing: normal;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vf-ink-soft);
}

.vf-drawer__meta-links .vf-nav__link:not(.vf-pill):hover,
.vf-drawer__meta-links .vf-nav__link:not(.vf-pill):focus {
	color: var(--vf-accent-ink);
	filter: none;
	transform: none;
}

/* Le bouton garde sa hauteur de header ; sa zone de toucher monte à 44 px. */
.vf-drawer__meta-links .vf-nav__link.vf-pill::before {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

.vf-drawer__socials {
	display: flex;
}

.vf-drawer__meta .vf-socials__link {
	background: var(--vf-surface-2);
	color: var(--vf-navy);
}

.vf-drawer__meta .vf-lang__item {
	color: var(--vf-ink-soft);
}

.vf-drawer__meta .vf-lang__item.is-active {
	color: var(--vf-navy);
}

body.vf-drawer-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
	overscroll-behavior: contain;
}

html.vf-drawer-open {
	overflow: hidden;
}

/* Bouton WhatsApp (Joinchat, z-index 9000 par défaut) : sous le tiroir (1200),
   au-dessus du header (900). */
body .joinchat {
	z-index: 1100;
}

.vf-drawer__panel {
	overscroll-behavior: contain;
}

/* -------------------------------------------------------------------- Hero */

.vf-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	place-items: center;
	overflow: hidden;
	padding: clamp(44px, 6vh, 84px) 0 clamp(72px, 9vh, 112px);
	color: #fff;
	text-align: center;

	/* Repli le plus large d'abord, puis les unités modernes. */
	min-height: calc(var(--vf-vh, 1vh) * 100 - var(--vf-header-h));
}

@supports (height: 100svh) {
	.vf-hero {
		min-height: calc(100svh - var(--vf-header-h));
	}
}

.vf-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: linear-gradient(120deg, #7fb4d8 0%, #4f8fbf 34%, #2f6fa3 60%, #1b4f7d 100%);
}

.vf-hero__scene {
	position: absolute;
	inset: -40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vf-hero__layer {
	/* !important nécessaire : la lib Parallax.js met le 1er calque qu'elle
	   trouve en `position: relative` (inline) — sans ça il perd sa taille
	   plein cadre et son image disparaît (hauteur 0). Les autres calques ne
	   sont pas concernés, mais on verrouille par cohérence. */
	position: absolute !important;
	inset: 0 !important;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
}

.vf-hero__layer--1 {
	opacity: .65;
}

.vf-hero__layer--2 {
	opacity: .8;
}

.vf-hero__grain {
	position: absolute;
	inset: 0;
	opacity: .5;
	mix-blend-mode: screen;
	background:
		repeating-linear-gradient(115deg, rgba(255, 255, 255, .1) 0 2px, transparent 2px 26px),
		radial-gradient(60% 60% at 70% 20%, rgba(255, 255, 255, .35), transparent 60%);
}

.vf-hero__scrim {
	position: absolute;
	inset: 0;
	/* background: linear-gradient(180deg,
		rgba(9, 35, 55, .32) 0%,
		rgba(9, 35, 55, .12) 34%,
		rgba(9, 35, 55, var(--vf-scrim, .6)) 100%); */
}

.vf-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1000px;
}

.vf-hero__logo-link {
	display: inline-block;
	transition: filter .25s ease;
}

.vf-hero__logo-link:hover,
.vf-hero__logo-link:focus-visible {
	filter: brightness(1.06);
}

/* Respiration du logo : amplitude 3,5 %, ombre portée fixe (choix client).
   L'ombre reste hors des keyframes pour ne pas « pomper » avec l'échelle.
   Le survol s'exprime uniquement via `filter` sur le lien : une animation en
   cours l'emporte sur les déclarations normales, un `transform` de survol sur
   l'image serait donc ignoré. */
@keyframes vf-breathe {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.035);
	}
}

/* Une seule regle pour le logo : deux blocs `.vf-hero__logo` separes rendaient
   la cascade illisible (le `filter` statique du second masquait le premier). */
.vf-hero__logo {
	display: block;
	width: auto;
	max-width: min(550px, 78vw);
	max-height: clamp(112px, 9vw, 168px);
	margin: 0 auto clamp(18px, 3vh, 28px);
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
	transform-origin: center center;
	will-change: transform;
	animation: vf-breathe 4.8s ease-in-out infinite;
}

/* Marque typographique de repli — proportions de la maquette (38 / 14 px
   pour un H1 de 50 px), exprimées en ratio pour suivre l'échelle du hero. */
.vf-hero__wordmark {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto clamp(18px, 3vh, 28px);
	font-size: calc(var(--vf-hero-title) * .76);
	line-height: .9;
	text-align: center;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35));
}

.vf-hero__wordmark-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .14em;
	font-weight: 800;
}

.vf-hero__wordmark-a {
	background: linear-gradient(92deg, #fff 10%, #bfe6ff 45%, #8ff0c4 96%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vf-hero__wordmark-b {
	font-weight: 600;
	letter-spacing: .16em;

	/* Compense l'approche ajoutée après le « E » pour rester centré. */
	margin-right: -.16em;
	color: #fff;
}

.vf-hero__wordmark-c {
	margin-top: .28em;
	font-size: .368em;
	font-weight: 600;
	letter-spacing: .42em;
	text-indent: .42em;
	color: #cfeafc;
}

.vf-hero__title {
	margin: 0 auto;
	max-width: 28ch;
	font-family: var(--vf-font);
	font-weight: 800;
	font-size: var(--vf-hero-title);
	line-height: 1.08;
	letter-spacing: -.015em;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0, 20, 40, .45);
}

/* Barre de recherche « verre » : fond blanc à 70 %, liseré blanc dégradé,
   flou d'arrière-plan, reflet haut, bouton loupe en pastille dégradée.
   Au focus, la barre se soulève légèrement et prend un halo clair. */
.vf-hero__search {
	--vf-search-h: clamp(54px, 1.2vw + 42px, 66px);
	--vf-search-gap: 6px;

	position: relative;
	display: flex;
	align-items: center;
	width: min(100%, 660px);
	height: var(--vf-search-h);
	margin: clamp(24px, 3.6vh, 38px) auto 0;
	padding: var(--vf-search-gap) var(--vf-search-gap) var(--vf-search-gap) 1.6em;
	font-size: clamp(15px, .25vw + 12.5px, 18px);
	border: 2px solid var(--vf-accent);
	border-radius: var(--vf-r-pill);
	background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)) padding-box;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 6px -2px rgba(9, 35, 55, .18),
		0 22px 48px -26px rgba(9, 35, 55, .65);
	-webkit-backdrop-filter: blur(18px) saturate(170%);
	backdrop-filter: blur(18px) saturate(170%);
	transition:
		transform .28s var(--vf-ease),
		box-shadow .28s var(--vf-ease),
		border-color .28s var(--vf-ease),
		background .28s var(--vf-ease);
}

/* Reflet glossy sur la moitié haute. */
.vf-hero__search::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, .65) 0%, rgba(255, 255, 255, .12) 48%, rgba(255, 255, 255, 0) 52%);
	pointer-events: none;
}

.vf-hero__search:hover {
	border-color: var(--vf-accent-ink);
	background: linear-gradient(rgba(255, 255, 255, .78), rgba(255, 255, 255, .78)) padding-box;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 2px 6px -2px rgba(9, 35, 55, .2),
		0 0 0 4px rgba(233, 122, 15, .14),
		0 26px 54px -26px rgba(9, 35, 55, .7);
}

.vf-hero__search:focus-within {
	transform: translateY(-2px);
	border-color: var(--vf-accent-ink);
	background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)) padding-box;
	box-shadow:
		0 1px 0 #fff inset,
		0 0 0 5px rgba(233, 122, 15, .2),
		0 30px 60px -28px rgba(9, 35, 55, .75);
}

.vf-hero .vf-hero__search-input {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 .75em 0 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-weight: 500;
	letter-spacing: -.005em;
	color: var(--vf-ink);
	caret-color: var(--vf-accent);
	text-align: left;
	text-overflow: ellipsis;
}

.vf-hero .vf-hero__search-input::placeholder {
	font-weight: 400;
	color: var(--vf-ink-soft);
	opacity: 1;
	transition: opacity .2s var(--vf-ease), transform .2s var(--vf-ease);
}

.vf-hero .vf-hero__search-input:focus::placeholder {
	opacity: .45;
}

.vf-hero .vf-hero__search-input::-webkit-search-cancel-button,
.vf-hero .vf-hero__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
}

.vf-hero .vf-hero__search-input:focus,
.vf-hero .vf-hero__search-input:focus-visible {
	outline: none;
}

.vf-hero .vf-hero__search-btn {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	height: 100%;
	aspect-ratio: 1;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #f2f5f7 0%, #e3e9ee 48%, #d3dce3 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .7) inset,
		0 -2px 6px rgba(84, 100, 111, .12) inset,
		0 8px 18px -8px rgba(9, 35, 55, .35);
	color: var(--vf-ink-soft);
	line-height: 0;
	letter-spacing: 0;
	cursor: pointer;
	overflow: hidden;
	transition: transform .25s var(--vf-ease), box-shadow .25s var(--vf-ease), filter .25s var(--vf-ease), background-image .25s var(--vf-ease), color .25s var(--vf-ease);
}

/* Seul le survol de la BARRE fait passer la pastille du gris a l'orange.
   Pas de `transform` ni de `filter` ici : survoler le bouton lui-meme ne doit
   rien changer de plus a l'aspect de la loupe. */
.vf-hero .vf-hero__search:hover .vf-hero__search-btn,
.vf-hero .vf-hero__search:focus-within .vf-hero__search-btn {
	background-image: linear-gradient(145deg, #f7a24a 0%, var(--vf-accent) 48%, var(--vf-accent-ink) 100%);
	color: #fff;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .5) inset,
		0 -2px 6px rgba(160, 70, 0, .25) inset,
		0 12px 24px -8px rgba(207, 102, 8, .95);
}

.vf-hero .vf-hero__search-btn:active {
	transform: scale(.96);
	box-shadow: 0 -2px 6px rgba(160, 70, 0, .3) inset;
}

.vf-hero__search-btn svg {
	width: 42%;
	height: 42%;
}

@media (max-width: 767px) {
	.vf-hero__search {
		padding-left: 1.1em;
		font-size: 14px;
	}
}

.vf-hero__lead {
	margin: clamp(16px, 2.6vh, 26px) auto 0;
	max-width: 60ch;
	font-size: var(--vf-hero-lead);
	line-height: 1.6;
	color: #eaf4fb;
	text-shadow: 0 1px 10px rgba(0, 20, 40, .5);
}

.vf-hero__actions {
	margin-top: clamp(22px, 3.6vh, 36px);
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Le CTA suit l'échelle du hero pour ne pas paraître minuscule sur grand écran. */
.vf-hero__actions .vf-btn--lg {
	padding: .95em 1.8em;
	font-size: calc(var(--vf-hero-lead) * .85);
}

.vf-hero__scroll {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75em;
	font-size: var(--vf-hero-scroll);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #fff;
	opacity: .85;
}

.vf-hero__scroll:hover {
	opacity: 1;
	color: #fff;
}

/* Souris : dimensions de la maquette (22 × 34 px pour un libellé de 11 px),
   exprimées en em pour suivre l'échelle. Le boîtier respire de haut en bas,
   la molette descend en boucle. */
.vf-hero__mouse {
	position: relative;
	display: block;
	width: 2em;
	height: 3.1em;
	border: .18em solid rgba(255, 255, 255, .7);
	border-radius: 1.1em;
	animation: vf-mouse-bob 1.9s var(--vf-ease) infinite;
	will-change: transform;
}

.vf-hero__dot {
	position: absolute;
	top: .55em;
	left: 50%;
	width: .28em;
	height: .64em;
	background: #fff;
	border-radius: .18em;
	transform: translateX(-50%);
	animation: vf-scrolldot 1.6s var(--vf-ease) infinite;
}

@keyframes vf-scrolldot {
	0% { opacity: 0; transform: translate(-50%, 0); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, .9em); }
}

@keyframes vf-mouse-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(.55em); }
}

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

.vf-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #eaf3f7;
	background-color: #0b3346;
	background-image: var(--vf-foot-poster, none);
	background-size: cover;
	background-position: center;
}

.vf-footer__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
}

.vf-footer__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .6s var(--vf-ease);
}

.vf-footer__video.is-playing {
	opacity: .85;
}

.vf-footer__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	/* Assez sombre pour garder le texte lisible, assez léger pour laisser voir
	   le mouvement de la vidéo de fond. */
	background: linear-gradient(180deg, rgba(8, 30, 42, .62), rgba(8, 26, 38, .8));
}

/* Bande dégradée en tête du footer : dans le flux (et non superposée), elle
   repousse le contenu de sa propre hauteur. Épaisseur indexée sur la largeur
   d'écran : 3px sur mobile, jusqu'à 6px sur grand écran. */
.vf-footer__wave {
	position: relative;
	z-index: 1;
	width: 100%;
	height: clamp(3px, .3vw, 6px);
}

.vf-footer__inner {
	position: relative;
	z-index: 1;
	padding-top: 60px;
	padding-bottom: 26px;
}

.vf-footer__grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 38px;
}

.vf-brand--footer {
	display: inline-block;
	margin-bottom: 14px;
}

.vf-brand--footer .vf-brand__img {
	max-height: 58px;
	width: auto;
	/* Le logo source est navy/vert sur fond transparent : on le passe en blanc
	   pour rester lisible sur le fond sombre du footer. */
	filter: brightness(0) invert(1);
}

.vf-brand--footer .vf-brand__text {
	color: #fff;
}

.vf-footer__tagline {
	margin: 0 0 18px;
	max-width: 38ch;
	font-size: 13px;
	line-height: 1.6;
	color: #b8ccd6;
}

/* Deux boutons boutique insérés dans la baseline (champ Footer > Baseline). */
.vf-footer__shops {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	width: max-content;
	max-width: 100%;
	margin-top: 18px;
}

.vf-footer__shops .vf-btn {
	justify-content: center;
}

.vf-footer__title {
	margin: 0 0 16px;
	font-family: var(--vf-font);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8fc6d6;
}

.vf-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vf-footer__menu .vf-nav__link,
.vf-footer__menu .vf-sub__link {
	padding: 0;
	font-size: 13.5px;
	font-weight: 400;
	color: #dbeaf0;
	white-space: normal;
}

/* Même filet animé que le menu principal, en blanc : il grandit de la gauche
 * vers la droite et reste hors flux, donc la colonne ne bouge pas. L'accent
 * orange demeure réservé aux numéros de téléphone. */
.vf-footer__menu .vf-nav__link::after,
.vf-footer__legal .vf-nav__link::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s var(--vf-ease);
}

.vf-footer__menu .vf-nav__link:hover,
.vf-footer__menu .vf-nav__link:focus-visible {
	color: #fff;
	text-decoration: none;
}

.vf-footer__menu .vf-nav__link:hover::after,
.vf-footer__menu .vf-nav__link:focus-visible::after,
.vf-footer__legal .vf-nav__link:hover::after,
.vf-footer__legal .vf-nav__link:focus-visible::after {
	transform: scaleX(1);
}

.vf-footer__menu .vf-nav__toggle {
	display: none;
}

.vf-footer__phones {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vf-footer__phones a {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
}

.vf-footer__phones a:hover {
	color: var(--vf-accent);
}

.vf-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.vf-footer__legal {
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}

.vf-footer__legal .vf-nav__link {
	padding: 0;
	font-size: 12px;
	font-weight: 400;
	color: #a9c4cf;
}

.vf-footer__legal .vf-nav__link:hover,
.vf-footer__legal .vf-nav__link:focus-visible {
	color: #fff;
	text-decoration: none;
}

.vf-footer__copy {
	margin: 0;
	font-size: 12px;
	color: #88a6b2;
}

/* -------------------------------------------------------------- Responsive */

/* Navigation desktop sur une ligne.
 *
 * Seuil du burger : 1240 px. Doit rester égal à VF_NAV_BREAKPOINT
 * (functions.php), transmis au JS via vfChrome.navBreakpoint.
 *
 * Au-dessus du seuil, logo, marges, police et espacement du menu varient
 * ensemble pour que les 6 entrées (libellés actuels) tiennent sur une ligne :
 * ~45 px de marge restante à 1240 px, ~85 px à 1280 px (portable 15" à 150 %),
 * ~135 px à 1366 px. Toute entrée ajoutée ou libellé rallongé consomme cette
 * marge : ~17 px par flèche, 12 px d'espacement, 7 à 9 px par mot. */

@media (max-width: 1239.98px) {
	.vf-nav-wrap {
		display: none;
	}

	.vf-burger {
		display: inline-flex;
	}

	.vf-main__inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

@media (min-width: 1240px) {
	/* Sans CTA, le conteneur ne porte que le burger masqué : il coûterait un
	   espacement de 18 px pour rien. */
	.vf-main__actions--no-cta {
		display: none;
	}

	/* 20 px jusqu'à 1280 px, 26 px à partir de 1440 px. */
	.vf-main__inner.vf-wrap {
		padding-right: clamp(20px, calc(3.75vw - 28px), 26px);
		padding-left: clamp(20px, calc(3.75vw - 28px), 26px);
	}

	/* 48 px de haut (taille du header compact) jusqu'à 1280 px, 62 px à partir de 1536 px. */
	.vf-brand--header .vf-brand__img {
		max-height: clamp(48px, calc(5.469vw - 22px), 62px);
	}

	/* Espacement : 12 px jusqu'à 1280 px, 28 px à partir de 1680 px. */
	.vf-nav-wrap .vf-nav {
		flex-wrap: nowrap;
		gap: clamp(12px, calc(4vw - 39.2px), 28px);
	}

	/* Police : 14 px jusqu'à 1366 px, 15 px à partir de 1536 px. */
	.vf-nav-wrap .vf-nav__link {
		font-size: clamp(14px, calc(.5882vw + 5.965px), 15px);
	}

	.vf-nav-wrap .vf-nav__toggle {
		padding: 4px 3px;
		margin-left: 0;
	}

	/* Sous-menus des deux dernières entrées : calés sur leur bord droit, sinon
	   ils sortent de l'écran (et sont coupés par le overflow-x du body). */
	.vf-nav-wrap .vf-nav > .vf-nav__item:nth-last-child(-n+2) > .vf-nav__panel {
		left: auto;
		right: 0;
		transform: translateY(8px);
	}

	.vf-nav-wrap .vf-nav > .vf-nav__item--parent:nth-last-child(-n+2):is(:hover, :focus-within, .is-open) > .vf-nav__panel {
		transform: translateY(0);
	}

	.vf-nav-wrap .vf-nav > .vf-nav__item:nth-last-child(-n+2) > .vf-nav__panel::after {
		left: auto;
		right: 22px;
		transform: rotate(45deg);
	}
}

@media (max-width: 1180px) {
	.vf-util__menu .vf-nav__link:not(.vf-pill) {
		font-size: 14.5px;
	}
}

/* Petits écrans en paysage : la barre utilitaire mange l'écran ; ses liens
   sont repris dans le tiroir. */
@media (max-width: 1239.98px) and (max-height: 500px) and (orientation: landscape) {
	.vf-util {
		display: none;
	}
}

@media (max-width: 1023px) {
	/* Les liens passent sur deux lignes : 80px les rognerait. */
	.vf-util {
		max-height: 110px;
	}

	.vf-util__inner {
		gap: 10px 12px;
		font-size: 13.5px;
	}

	.vf-util__menu .vf-nav__item:not(.vf-nav__item--pill) {
		display: none;
	}

	.vf-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.vf-footer__brand {
		grid-column: 1 / -1;
	}
}

/* Barre utilitaire : seuls les deux boutons boutique restent. Blog,
   Recrutement, Contact, EN/FR et réseaux sont repris dans le tiroir. */
@media (max-width: 864.98px) {
	.vf-util__spacer,
	.vf-util__actions,
	.vf-util .vf-lang,
	.vf-util .vf-socials {
		display: none;
	}
}

@media (max-width: 767px) {
	.vf-wrap {
		padding: 0 18px;
	}

	.vf-socials {
		display: none;
	}

	.vf-util {
		max-height: 130px;
		padding-top: 5px;
		padding-bottom: 5px;
		transition: max-height .28s var(--vf-ease), opacity .2s var(--vf-ease), padding .28s var(--vf-ease);
	}

	/* Header compact : la barre se replie entièrement, padding compris. */
	.vf-header.is-compact .vf-util {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Le padding de .vf-wrap ci-dessus remet le haut et le bas à 0. */
	.vf-main__inner {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.vf-util__inner {
		justify-content: space-between;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* Boutons boutique sur une seule ligne, à leur taille : la ligne défile au
	   doigt quand elle dépasse, jusqu'aux bords de l'écran. Sélecteurs renforcés :
	   le CSS additionnel (chargé après cette feuille) les empile en pleine largeur. */
	.vf-util .vf-util__menu {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 10px;
		min-width: 0;
		/* Marges négatives : défilement bord à bord, et place pour le contour de focus. */
		margin: -6px -18px;
		padding: 6px 18px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
	}

	.vf-util .vf-util__menu::-webkit-scrollbar {
		display: none;
	}

	.vf-util .vf-util__menu > .vf-nav__item {
		flex: 0 0 auto;
	}

	.vf-util .vf-util__menu .vf-nav__link.vf-pill {
		width: auto;
	}

	/* Pas de soulèvement au survol : il serait rogné par la zone de défilement. */
	.vf-util .vf-util__menu .vf-nav__link.vf-pill:hover,
	.vf-util .vf-util__menu .vf-nav__link.vf-pill:focus {
		transform: none;
	}

	.vf-main__cta {
		padding: 9px 14px;
		font-size: 14px;
	}

	.vf-brand__img {
		max-height: 46px;
	}

	.vf-hero {
		padding-bottom: 92px;
	}

	.vf-hero__logo {
		max-height: 96px;
	}

	.vf-hero__wordmark {
		font-size: calc(var(--vf-hero-title) * .82);
	}

	.vf-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.vf-hero__actions .vf-btn {
		width: 100%;
	}

	.vf-footer__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.vf-footer__inner {
		padding-top: 44px;
	}

	.vf-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Barre utilitaire mobile : 2 pills côte à côte, sans scroll horizontal */
@media (max-width: 767px) {
	.vf-util .vf-util__menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		flex: 1 1 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	.vf-util .vf-util__menu > .vf-nav__item {
		min-width: 0;
	}

	.vf-util .vf-util__menu .vf-nav__link.vf-pill {
		width: 100%;
		min-height: 42px;
		justify-content: center;
		text-align: center;
		white-space: normal;
		line-height: 1.2;
		padding: 8px 10px;
		font-size: 13px;
		letter-spacing: .02em;
	}
}

/* Très petits écrans : on resserre et on retire le ▸ */
@media (max-width: 379.98px) {
	.vf-util .vf-util__menu {
		gap: 6px;
	}

	.vf-util .vf-util__menu .vf-nav__link.vf-pill {
		font-size: 12px;
		padding: 7px 8px;
		letter-spacing: 0;
	}

	.vf-util__menu .vf-nav__link.vf-pill--accent::before,
	.vf-util__menu .vf-nav__link.vf-pill--sky::before {
		display: none;
	}
}

@media (max-width: 400px) {
	.vf-main__cta {
		display: none;
	}
}

/* Écrans courts en paysage : le hero ne doit pas écraser le contenu. */
@media (max-height: 520px) and (orientation: landscape) {
	.vf-hero {
		min-height: 0;
		padding: 40px 0 56px;
	}

	.vf-hero__scroll {
		display: none;
	}
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {

	/* Souris « Découvrir », parallaxe du hero, respiration du logo et bandes
	   dégradées : décision produit, ces effets tournent toujours, même si le
	   visiteur a demandé moins d'animations côté OS — le site n'en a quasiment
	   pas d'autres. Rien ne les neutralise ici, d'où l'absence de règle. */

	/* Mouvement réduit : la vidéo reste affichée mais figée sur sa 1re image
	   (le JS ne lance pas la lecture), plutôt que de disparaître. */
	.vf-footer__video {
		opacity: .85;
		transition: none;
	}

	.vf-header *,
	.vf-hero *,
	.vf-footer *,
	.vf-drawer * {
		transition-duration: .01ms !important;
	}

	.vf-drawer__panel {
		transition: none;
	}
}

/* Correctif sursautement header (v1.7.4) : header fixe, l'état compact ne modifie plus la mise en page */
.js .vf-header.is-sticky {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
}

/* Espace réservé = hauteur du header déplié, figée */
.js body:has(> .vf-header.is-sticky) {
	padding-top: var(--vf-header-h, 0px);
}

/* Mesure de la hauteur dépliée sans transition */
.vf-header.vf-measuring,
.vf-header.vf-measuring * {
	transition: none !important;
}