/* =============================================================================
 * Hero — Accueil
 * Full-viewport video hero with editorial overlay header.
 * ========================================================================== */

/* Romance — custom display font, used for ALL big section headings
   (Cormorant Garamond stays for italic <em> emphasis inside headings,
   so the "italic accent" of the brand voice is preserved). */
@font-face {
	font-family: 'Romance';
	src: url('../fonts/Romance.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Official brand palette (charte graphique) */
	--exspa-sage:       #394839;   /* primary deep sage */
	--exspa-sage-light: #4A6B4A;   /* secondary leaf green — accents, gradients */
	--exspa-sage-deep:  #2B2522;   /* warm near-black — deepest backgrounds */
	--exspa-cream:      #EFE8DA;   /* off-white cream */
	--exspa-gold:       #8B6F3D;   /* antique brass accent */
	--exspa-line:       rgba(239, 232, 218, 0.4);
	/* Type stack tokens */
	--exspa-font-display: 'Romance', 'Cormorant Garamond', Georgia, serif;
	--exspa-font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	--exspa-font-sans:    'Inter', system-ui, -apple-system, sans-serif;
}

/* All section headings AND per-item display names → Romance display font.
   Italic <em> emphasis inside headings → keep Cormorant italic
   so the "voice" stays editorial. */
.exspa-hero__title,
.exspa-hero-cinematic__title,
.exspa-cinema__title,
.exspa-cinema__title--single,
.exspa-page-hero__heading,
[class*="__heading"]:not(.exspa-equip__group-label):not(.bv2-chapter):not(.exspa-footer__heading),
.bv2-display,
.bv2-hero__title,
.bv2-engagement__title,
.bv2-manifesto__title,
.bv2-venir__heading,
.bv2-soins__heading,
.bv2-booking__heading,
.bv2-services__heading,
.exspa-cta__heading,
.bv2-row__name,
.exspa-bm__service,
/* Per-item display titles (card / zone / amenity item names) */
.exspa-products__name,
.exspa-amenities__name,
.exspa-zones__name,
.exspa-rules__name,
/* Contact page H tags (Joindre, Horaires, Un message, Trouvez-nous., Passez votre parenthèse) */
.exspa-contact-grid__h,
.exspa-contact-grid__hero {
	font-family: var(--exspa-font-display) !important;
	letter-spacing: -0.005em;
}
[class*="__heading"] em,
[class*="__title"] em,
[class*="__name"] em,
.bv2-display em,
.bv2-row__name em,
.exspa-cta__heading em,
.exspa-bm__service em,
.exspa-contact-grid__h em,
.exspa-contact-grid__hero em {
	font-family: var(--exspa-font-serif) !important;
	font-style: italic;
}

/* -----------------------------------------------------------------------------
 * GeneratePress applies `margin-bottom: 20px` to every block-level element
 * inside .entry-content (a prose default). On our pages this paints 20px white
 * gaps between full-bleed sections (body bg is transparent so the html default
 * white shows through). Fix: zero the margins on section roots + set a body
 * background fallback so any residual gap blends into warm-black instead.
 * -------------------------------------------------------------------------- */
html, body {
	background: var(--exspa-sage-deep, #2B2522);
}
.exspa-cinema, .exspa-products, .exspa-marquee, .exspa-amenities,
.exspa-moments, .exspa-hygiene, .exspa-founder, .exspa-ig, .exspa-cta,
.exspa-page-hero, .exspa-lieu, .exspa-zones, .exspa-suite {
	margin: 0 !important;
}

/* Hide GeneratePress's default header on the Accueil template only —
   the hero brings its own. */
.page-template-page-accueil .site-header,
body.home .site-header {
	display: none !important;
}

/* Lock page background so we never see a flash of GP's body bg. */
.page-template-page-accueil,
body.home {
	background: var(--exspa-sage-deep);
}

/* Remove the .site / .container padding so the hero is truly full-bleed. */
.page-template-page-accueil .site,
.page-template-page-accueil .site-content,
.page-template-page-accueil .content-area,
.page-template-page-accueil .site-main,
.page-template-page-accueil .entry-content,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home .site-main,
body.home .entry-content {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
}

/* -----------------------------------------------------------------------------
 * Hero shell
 * -------------------------------------------------------------------------- */
.exspa-hero {
	position: relative;
	width: 100%;
	min-height: 100svh;
	height: 100svh;
	color: var(--exspa-cream);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
}

html, body {
	overflow-x: hidden;
}

.exspa-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.exspa-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(42, 51, 37, 0.55) 0%, rgba(42, 51, 37, 0.15) 28%, rgba(42, 51, 37, 0.15) 60%, rgba(42, 51, 37, 0.75) 100%);
	pointer-events: none;
}

/* -----------------------------------------------------------------------------
 * Header overlay — logo centers, slides to top-left on scroll
 * -------------------------------------------------------------------------- */
.exspa-hero__header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 28px 40px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	transition: background 400ms ease, padding 400ms ease, border-color 400ms ease;
	border-bottom: 1px solid transparent;
}

/* Brand top-left, hamburger top-right — clean editorial header. */
.exspa-hero__brand {
	grid-column: 1;
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--exspa-cream);
	text-decoration: none;
	transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

.exspa-hero__mark {
	width: 36px;
	height: 36px;
	color: var(--exspa-cream);
	transition: width 400ms ease, height 400ms ease;
}

.exspa-hero__wordmark {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: 22px;
	font-style: italic;
	letter-spacing: 0.5px;
	font-weight: 500;
}

/* New SVG logo helper (exspa_logo() PHP). The horizontal variant bundles
 * the mark + wordmark, so we hide the legacy inline lotus mark whenever the
 * SVG logo is rendered next to it. */
.exspa-hero__logo {
	height: 34px;
	width: auto;
	color: #FFFFFF;
	display: block;
	transition: height 400ms ease;
}
.exspa-hero__brand:has(.exspa-hero__logo) .exspa-hero__mark { display: none; }
.exspa-hero__header[data-state="scrolled"] .exspa-hero__logo { height: 26px; }

/* Inline horizontal nav: hidden in the TRANSPARENT (top-of-page) state, so
 * the hamburger + overlay menu carry navigation while the hero composition
 * stays clean. Once the header gets the "scrolled" data-state (see scroll
 * listener), we reveal the horizontal links and hide the hamburger — best
 * of both worlds: editorial intro, then a useful sticky bar. */
.exspa-hero__nav {
	grid-column: 3;
	justify-self: end;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	display: none;
	transition: opacity 400ms ease, transform 400ms ease;
}

.exspa-hero__menu {
	list-style: none;
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
}

.exspa-hero__menu li {
	margin: 0;
}

.exspa-hero__menu a {
	color: var(--exspa-cream);
	text-decoration: none;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 0;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}

.exspa-hero__menu a:hover {
	border-bottom-color: var(--exspa-cream);
}

/* CTA-style item at end of nav — covers both .exspa-hero__menu-cta (legacy)
 * and .exspa-nav-cta (WP menu item CSS class set via Appearance → Menus or
 * via the rename-menu seeder). */
.exspa-hero__menu-cta a,
.exspa-hero__menu .exspa-nav-cta a,
.exspa-hero__menu li.exspa-nav-cta a {
	padding: 10px 22px;
	border: 1px solid var(--exspa-cream);
	border-bottom: 1px solid var(--exspa-cream) !important;
	margin-left: 12px;
	letter-spacing: 0.24em;
	font-weight: 500;
	transition: background 260ms ease, color 260ms ease, transform 260ms ease;
}
.exspa-hero__menu-cta a:hover,
.exspa-hero__menu .exspa-nav-cta a:hover,
.exspa-hero__menu li.exspa-nav-cta a:hover {
	background: var(--exspa-cream);
	color: var(--exspa-sage-deep, #2B2522);
	transform: translateY(-1px);
}

/* SCROLLED STATE — applied to <header> via JS once scrollY > 80 */
.exspa-hero__header[data-state="scrolled"] {
	background: rgba(42, 51, 37, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 14px 40px;
	border-bottom-color: var(--exspa-line);
}

.exspa-hero__header[data-state="scrolled"] .exspa-hero__brand {
	grid-column: 1;
	justify-self: start;
}

.exspa-hero__header[data-state="scrolled"] .exspa-hero__mark {
	width: 28px;
	height: 28px;
}

.exspa-hero__header[data-state="scrolled"] .exspa-hero__wordmark {
	font-size: 18px;
}

.exspa-hero__header[data-state="scrolled"] .exspa-hero__nav {
	display: flex;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Swap: once scrolled, the inline nav takes over and the hamburger steps
 * aside (kept in the DOM for ARIA continuity, just visually hidden). */
.exspa-hero__header[data-state="scrolled"] .exspa-hero__menu-toggle {
	opacity: 0;
	pointer-events: none;
	transform: scale(0.85);
}

/* -----------------------------------------------------------------------------
 * Hero content (centered)
 * -------------------------------------------------------------------------- */
.exspa-hero__content {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 0 24px;
	max-width: 900px;
}

.exspa-hero__eyebrow {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin: 0 0 32px;
	opacity: 0.85;
}

.exspa-hero__headline {
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: clamp(40px, 7.5vw, 96px);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 48px;
	color: var(--exspa-cream);
}

.exspa-hero__headline em {
	font-style: italic;
	font-weight: 400;
}

.exspa-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border: 1px solid var(--exspa-cream);
	color: var(--exspa-cream);
	text-decoration: none;
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: background 250ms ease, color 250ms ease;
}

.exspa-hero__cta:hover {
	background: var(--exspa-cream);
	color: var(--exspa-sage);
}

/* -----------------------------------------------------------------------------
 * Scroll cue (bottom center)
 * -------------------------------------------------------------------------- */
.exspa-hero__scroll {
	position: absolute;
	bottom: 32px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	background: none;
	border: 0;
	color: var(--exspa-cream);
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	opacity: 0.85;
	transition: opacity 200ms ease;
}

.exspa-hero__scroll:hover {
	opacity: 1;
}

.exspa-hero__scroll-line {
	display: block;
	width: 1px;
	height: 60px;
	background: var(--exspa-cream);
	position: relative;
	overflow: hidden;
}

.exspa-hero__scroll-line::after {
	content: '';
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: 60px;
	background: var(--exspa-sage-deep);
	animation: exspa-scroll-pulse 2.4s ease-in-out infinite;
}

@keyframes exspa-scroll-pulse {
	0%   { top: -60px; }
	100% { top: 60px; }
}

/* -----------------------------------------------------------------------------
 * Sound toggle (bottom right)
 * -------------------------------------------------------------------------- */
.exspa-hero__sound {
	position: absolute;
	bottom: 32px;
	right: 32px;
	z-index: 20;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(245, 241, 232, 0.12);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(245, 241, 232, 0.3);
	color: var(--exspa-cream);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 200ms ease;
}

.exspa-hero__sound:hover {
	background: rgba(245, 241, 232, 0.22);
}

.exspa-hero__sound-icon {
	width: 20px;
	height: 20px;
}

/* -----------------------------------------------------------------------------
 * Mobile
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.exspa-hero__header {
		padding: 20px 24px;
	}
	.exspa-hero__nav {
		display: none;
	}
	/* Mobile: NEVER reveal the inline link list — even when scrolled the
	   horizontal links won't fit. Keep the hamburger as the only nav control
	   at every scroll position (override the desktop scrolled-state swap). */
	.exspa-hero__header[data-state="scrolled"] .exspa-hero__nav {
		display: none !important;
	}
	.exspa-hero__header[data-state="scrolled"] .exspa-hero__menu-toggle {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
	.exspa-hero__mark {
		width: 32px;
		height: 32px;
	}
	.exspa-hero__wordmark {
		font-size: 18px;
	}
	.exspa-hero__headline {
		font-size: clamp(26px, 7.5vw, 44px);
		line-height: 1.1;
	}
	.exspa-hero__content {
		padding: 0 20px;
	}
	.exspa-hero__eyebrow {
		font-size: 10px;
		letter-spacing: 0.28em;
	}
	.exspa-hero__sound {
		bottom: 24px;
		right: 24px;
	}
	.exspa-hero__scroll {
		bottom: 24px;
	}
}

/* -----------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	/* The hero video is a calm, muted, slow ambient loop — no flashing or
	   jarring motion. We keep it visible for reduced-motion users and just
	   suppress the scroll-cue pulse animation. */
	.exspa-hero__scroll-line::after {
		animation: none;
	}
}

/* =============================================================================
 * HAMBURGER MENU — top-right toggle + fullscreen overlay
 *
 * Injected universally by header-nav.js into every .exspa-hero__header. The
 * inline horizontal nav is hidden (above); its WP menu items are projected
 * into the overlay panel at runtime so we get a single source of truth.
 * ========================================================================== */

/* Toggle button — sits in the right grid column of the header */
.exspa-hero__menu-toggle {
	position: relative;
	grid-column: 3;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: #FFFFFF;
	cursor: pointer;
	z-index: 1100;
	transition: color 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.exspa-hero__menu-toggle:hover {
	transform: scale(1.05);
}
.exspa-hero__menu-toggle:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* The three bars — animate into an X when the menu is open */
.exspa-hero__menu-toggle-bars {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 14px;
}
.exspa-hero__menu-toggle-bars::before,
.exspa-hero__menu-toggle-bars::after,
.exspa-hero__menu-toggle-bars span {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.4px;
	background: currentColor;
	transition: transform 280ms cubic-bezier(0.65, 0, 0.35, 1),
	            opacity 200ms ease,
	            top 280ms cubic-bezier(0.65, 0, 0.35, 1);
}
.exspa-hero__menu-toggle-bars::before { top: 0; }
.exspa-hero__menu-toggle-bars span    { top: 50%; transform: translateY(-50%); display: block; }
.exspa-hero__menu-toggle-bars::after  { top: 100%; }

/* Open state: middle bar fades, top/bottom rotate into X */
body.is-menu-open .exspa-hero__menu-toggle-bars::before {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}
body.is-menu-open .exspa-hero__menu-toggle-bars::after {
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}
body.is-menu-open .exspa-hero__menu-toggle-bars span {
	opacity: 0;
}

/* Backdrop dim — softens the page behind the sidebar but keeps it visible */
.exspa-hero__menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 1050;
	background: rgba(43, 37, 34, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.is-menu-open .exspa-hero__menu-overlay {
	opacity: 1;
	pointer-events: auto;
}

/* Sidebar drawer — slides in from the right (flat olive sage) */
.exspa-hero__menu-overlay-inner {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 86vw);
	padding: 96px clamp(28px, 4vw, 48px) 48px;
	background: var(--exspa-sage, #394839);
	box-shadow: -16px 0 48px rgba(0, 0, 0, 0.32);
	transform: translateX(100%);
	transition: transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
	overflow-y: auto;
	z-index: 1060;
	text-align: left;
	pointer-events: auto;
}
body.is-menu-open .exspa-hero__menu-overlay-inner {
	transform: translateX(0);
}

.exspa-hero__menu-overlay-eyebrow {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--exspa-gold, #8B6F3D);
	margin: 0 0 36px;
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity 420ms ease 80ms, transform 420ms ease 80ms;
}
body.is-menu-open .exspa-hero__menu-overlay-eyebrow {
	opacity: 0.85;
	transform: translateY(0);
}

/* Overlay menu list — large editorial list, staggered fade-in */
.exspa-hero__menu-overlay-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.exspa-hero__menu-overlay-list li {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.is-menu-open .exspa-hero__menu-overlay-list li {
	opacity: 1;
	transform: translateY(0);
}
.exspa-hero__menu-overlay-list li:nth-child(1) { transition-delay: 120ms; }
.exspa-hero__menu-overlay-list li:nth-child(2) { transition-delay: 180ms; }
.exspa-hero__menu-overlay-list li:nth-child(3) { transition-delay: 240ms; }
.exspa-hero__menu-overlay-list li:nth-child(4) { transition-delay: 300ms; }
.exspa-hero__menu-overlay-list li:nth-child(5) { transition-delay: 360ms; }
.exspa-hero__menu-overlay-list li:nth-child(6) { transition-delay: 420ms; }
.exspa-hero__menu-overlay-list li:nth-child(7) { transition-delay: 480ms; }

.exspa-hero__menu-overlay-list a {
	display: inline-block;
	font-family: var(--exspa-font-display, 'Romance', 'Cormorant Garamond', Georgia, serif);
	font-size: clamp(28px, 3.6vw, 38px);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--exspa-cream, #EFE8DA);
	text-decoration: none;
	padding: 6px 0;
	position: relative;
	transition: color 260ms ease, transform 260ms ease;
}
.exspa-hero__menu-overlay-list a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 2px;
	width: 0;
	height: 1px;
	background: var(--exspa-gold, #8B6F3D);
	transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.exspa-hero__menu-overlay-list a:hover {
	color: var(--exspa-gold, #8B6F3D);
}
.exspa-hero__menu-overlay-list a:hover::after {
	width: 100%;
}

/* Active link — WordPress flags the current page with .current-menu-item +
 * .current_page_item on the <li>. Paint it in the BRIGHT brand gold (#C4A765)
 * so it reads as a luminous accent against the sage drawer, not a dark brass. */
.exspa-hero__menu-overlay-list li.current-menu-item > a,
.exspa-hero__menu-overlay-list li.current_page_item > a,
.exspa-hero__menu-overlay-list li.current-menu-ancestor > a,
.exspa-hero__menu-overlay-list li.current_page_parent > a {
	color: #C4A765 !important;
}
.exspa-hero__menu-overlay-list li.current-menu-item > a::after,
.exspa-hero__menu-overlay-list li.current_page_item > a::after {
	width: 100%;
	background: #C4A765;
}

/* Highlight the CTA menu item (Réserver) as a true button inside the drawer */
.exspa-hero__menu-overlay-list li.exspa-nav-cta {
	margin-top: 20px;
}
.exspa-hero__menu-overlay-list li.exspa-nav-cta a {
	font-family: 'Inter', system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	padding: 14px 28px;
	border: 1px solid var(--exspa-gold, #8B6F3D);
	color: var(--exspa-cream, #EFE8DA);
}
.exspa-hero__menu-overlay-list li.exspa-nav-cta a:hover {
	background: var(--exspa-gold, #8B6F3D);
	color: var(--exspa-sage-deep, #2B2522);
}
.exspa-hero__menu-overlay-list li.exspa-nav-cta a::after { display: none; }

/* Lock background scroll when menu open */
body.is-menu-open {
	overflow: hidden;
}

/* Mobile — slightly tighter title sizing */
@media (max-width: 540px) {
	.exspa-hero__menu-overlay-list a {
		font-size: clamp(28px, 9vw, 44px);
	}
	.exspa-hero__menu-toggle {
		width: 40px;
		height: 40px;
	}
}