/**
 * EquaRent Pro — public front refinements.
 *
 * Additive Pro-only stylesheet, layered on top of the core 'equarent-site' sheet (declared as a
 * dependency so it always loads after it). Free is untouched: this file ships only in the Pro build
 * and is enqueued only in a licensed Pro instance.
 *
 * Current scope: footer polish. All selectors stay under .equarent-site__footer* so nothing else on
 * the page is affected.
 */

/* Inset rounded band: pull the full-bleed navy footer in from the edges and round its corners.
   A slight horizontal inset keeps the radius visible without looking like a broken full-bleed bar;
   overflow:hidden clips the inner content to the rounded corners. The fill is declared here WITH a
   hard fallback (recette #32): the Free rule sets `background: var(--equarent-navy)` with no fallback,
   and --equarent-navy lives only on the .equarent-site wrapper — so if it ever fails to resolve (or is
   saved to a near-white appearance colour) the rounded box collapsed to transparent and the white links
   rendered white-on-white. A fallback guarantees the band always paints. */
.equarent-site__footer {
	margin: var( --equarent-gap, 24px ) 12px 12px;
	/* Literal 16px fallback so the rounded corners survive even if --equarent-radius fails to resolve
	   (the corners had visually disappeared — recette). */
	border-radius: var( --equarent-radius, 16px );
	overflow: hidden;
	/* Recette: prefer the owner's chosen footer background, then the site ACCENT (the footer should be
	   accent-coloured by default, not navy), then navy, then a literal. */
	background: var( --equarent-footer-bg, var( --equarent-accent, var( --equarent-navy, #0c3a66 ) ) );
	color: var( --equarent-footer-text, #fff );
}
/* Footer links follow the chosen text colour (overriding the Free hard #fff) — scoped to the Pro sheet. */
.equarent-site__footer a {
	color: var( --equarent-footer-text, #fff );
}

/* Hug the content: symmetric vertical padding (equal space above the first line and below the last)
   with an even row gap carrying the spacing between blocks. No fixed/min height is set, so the band
   height adapts to the number of lines it carries. The blocks are stacked (flex column) and their
   text is centred via text-align, NOT align-items:center — cross-axis centring would shrink the
   footer-cols grid to its content width and collapse its auto-fit tracks to a single column. */
.equarent-site__footer .equarent-site__footer-inner {
	padding: 20px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-align: center;
}

/* Spacing between footer blocks comes only from the inner's gap: zero out the vertical margins of
   every direct child (Free gives footer-cols a trailing 24px, social 8px, meta a 6px top, and the
   <p> blocks carry UA margins) so the rhythm is even top-to-bottom. */
.equarent-site__footer .equarent-site__footer-inner > .equarent-site__footer-cols,
.equarent-site__footer .equarent-site__footer-inner > .equarent-site__footer-text,
.equarent-site__footer .equarent-site__footer-inner > .equarent-site__social,
.equarent-site__footer .equarent-site__footer-inner > .equarent-site__meta {
	margin-top: 0;
	margin-bottom: 0;
}

/* Lay the footer columns out as a wrapping flex row centred as a group, instead of the Free auto-fit
   grid (which collapses to one track when the footer-inner no longer stretches it). flex-start keeps
   columns of unequal height top-aligned; the row stays centred and wraps on narrow desktop widths. */
.equarent-site__footer .equarent-site__footer-cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 24px 48px;
}

.equarent-site__footer .equarent-site__footer-col {
	text-align: center;
}

/* Centre each link list and strip any ul inline padding (UA padding-inline-start) that would push
   the text to the right. */
.equarent-site__footer .equarent-site__footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.equarent-site__footer .equarent-site__footer-list li {
	text-align: center;
}

.equarent-site__footer .equarent-site__social,
.equarent-site__footer .equarent-site__meta,
.equarent-site__footer .equarent-site__footer-text {
	text-align: center;
	margin: 0;
}

/* Keep a comfortable edge inset on small screens so the rounded band still reads as inset. */
@media ( max-width: 480px ) {
	.equarent-site__footer {
		margin: var( --equarent-gap ) 10px 10px;
	}
}

/* -------------------------------------------------------------------------------------------------
   Pro header layout (brand + menu + language switcher).

   The Pro header (<header class="equarent-site__header equarent-site__header--pro …">) drops the
   Free "Book" button, pins the language switcher to the far top-right, and aligns the site menu
   either left (next to the brand) or horizontally centred in the bar, per the menu_position control
   (.equarent-site__header--menu-left / --menu-center). It reuses the core sticky-header chrome
   (.equarent-site__header / __header-inner); every selector below stays under
   .equarent-site__header*, so Free (which never gets the --pro class) is untouched.
   ------------------------------------------------------------------------------------------------- */

/* Pack the row from the left so the brand + menu sit left; the switcher is pushed right below. */
.equarent-site__header--pro .equarent-site__header-inner {
	position: relative;
	justify-content: flex-start;
}

/* Language switcher pinned hard to the far right of the header bar in both menu modes. */
.equarent-site__header--pro .equarent-site__langsw {
	margin-left: auto;
}

/* Centered menu: take the nav out of flow and center it on the bar regardless of the brand and
   switcher widths. The brand (left) and switcher (right) keep the row; the nav floats centred. */
.equarent-site__header--menu-center .equarent-site__nav {
	position: absolute;
	left: 50%;
	transform: translateX( -50% );
}

/* -------------------------------------------------------------------------------------------------
   Sub-menus (Pro): a parent nav item can carry a hover/focus dropdown of child links.

   Emitted only by the Pro nav (render_nav) when a menu item has children; Free never outputs this
   markup. Selectors stay under .equarent-site__header* so nothing else is affected. The dropdown is
   revealed on hover and on focus-within (keyboard accessible).
   ------------------------------------------------------------------------------------------------- */
.equarent-site__header .equarent-site__navitem {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.equarent-site__header .equarent-site__navitem--has-children > .equarent-site__navlink::after {
	content: "";
	display: inline-block;
	margin-left: 6px;
	border: 4px solid transparent;
	border-top-color: currentColor;
	transform: translateY( 2px );
}

.equarent-site__header .equarent-site__submenu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	background: #fff;
	border: 1px solid var( --equarent-line );
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba( 12, 58, 102, 0.16 );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 20;
}

.equarent-site__header .equarent-site__navitem--has-children:hover > .equarent-site__submenu,
.equarent-site__header .equarent-site__navitem--has-children:focus-within > .equarent-site__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.equarent-site__header .equarent-site__submenu-item {
	margin: 0;
}

.equarent-site__header .equarent-site__submenu .equarent-site__navlink {
	display: block;
	padding: 7px 16px;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------------------------------
   Hero band: accent-derived tint (Pro).

   Core paints the hero with a fixed deep-to-light blue gradient whose lightest stop comes from the
   ambiance palette, so the band keeps a blue cast even when the configured accent changes. Pro
   retints the hero from the configured accent alone: a soft two-stop gradient from a darker accent
   shade to the accent itself, with a faint top sheen and white text preserved. The ambiance and
   deep custom props are deliberately not referenced here, so the tint follows only the accent.
   Scoped strictly to .equarent-site .equarent-hero__inner and its photo overlay. Honoured only in
   the Pro build when the stylesheet is enqueued; absent from Free.
   ------------------------------------------------------------------------------------------------- */

/* Solid-colour fallback (browsers without color-mix()): the plain accent behind the gradient hero. */
.equarent-site .equarent-hero__inner:not( .equarent-hero__inner--image ) {
	background: var( --equarent-accent, #1981de );
	color: #fff;
}

@supports ( background: color-mix( in srgb, red, blue ) ) {
	.equarent-site .equarent-hero__inner:not( .equarent-hero__inner--image ) {
		background:
			radial-gradient( 120% 100% at 50% 0%, rgba( 255, 255, 255, 0.10 ), rgba( 255, 255, 255, 0 ) 55% ),
			linear-gradient(
				135deg,
				color-mix( in srgb, var( --equarent-accent, #1981de ) 60%, #0b1b2a ),
				var( --equarent-accent, #1981de )
			);
	}
}

/* Photo hero overlay: core veils the image with a hard-coded blue gradient. Retint the veil from the
   accent so an image hero follows the configured colour too; keep it dark enough for white text. The
   veil STRENGTH follows the per-property "Watermark opacity" slider, exposed by render_hero as the
   inline custom prop --equarent-hero-overlay-opacity (default .55 when unset / legacy hero). */
.equarent-site .equarent-hero__inner--image::before {
	background: linear-gradient( 135deg, rgba( 11, 27, 42, 0.72 ), rgba( 11, 27, 42, 0.40 ) );
	opacity: var( --equarent-hero-overlay-opacity, .55 );
}

@supports ( background: color-mix( in srgb, red, blue ) ) {
	.equarent-site .equarent-hero__inner--image::before {
		background: linear-gradient(
			135deg,
			color-mix( in srgb, var( --equarent-accent, #1981de ) 52%, #0b1b2a 48% ),
			color-mix( in srgb, var( --equarent-accent, #1981de ) 30%, transparent )
		);
	}
}

/* -------------------------------------------------------------------------------------------------
   Compress WordPress page header (Pro "equarent_pro_compress_header" toggle).

   When the owner enables the toggle, EquaRent_Pro_FrontCss adds body.equarent-pro-compress-header
   to the singular page that hosts the [equarent_site] shortcode. These rules then hide the active
   theme's header/title/empty-menu chrome above the shortcode and zero the top spacing, so the
   EquaRent content sits flush to the top of the page.

   BEST-EFFORT / THEME-DEPENDENT: it targets the widespread theme header selectors (classic and
   block themes) but cannot cover every custom theme. The full-page template (EquaRent_Pro_PageTemplate)
   remains the fully reliable option; both may coexist. Everything stays scoped under the body class
   so it only applies on that page when the toggle is on.
   ------------------------------------------------------------------------------------------------- */
/* Hide the active theme's header chrome ONLY. Every selector targets a theme element; none matches
   the plugin's own top bar (<header class="equarent-site__header">) or anything inside .equarent-site,
   so the plugin chrome (site name / menu / language switcher / Book button) is always preserved.
   .wp-site-blocks > header is the block-theme template-part header, a direct child of the blocks
   wrapper — the plugin header is nested deep inside the entry content, so it is never matched. */
body.equarent-pro-compress-header #masthead,
body.equarent-pro-compress-header .site-header,
body.equarent-pro-compress-header #header,
body.equarent-pro-compress-header #site-navigation,
body.equarent-pro-compress-header .main-navigation,
body.equarent-pro-compress-header .site-branding,
body.equarent-pro-compress-header .site-title,
body.equarent-pro-compress-header .site-description,
body.equarent-pro-compress-header .skip-link,
body.equarent-pro-compress-header .wp-site-blocks > header,
body.equarent-pro-compress-header .entry-hero,
body.equarent-pro-compress-header .entry-header {
	display: none !important;
}

/* Zero the top spacing the theme reserves above the content so the EquaRent page sits flush. */
body.equarent-pro-compress-header,
body.equarent-pro-compress-header .site-content,
body.equarent-pro-compress-header .wp-site-blocks {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.equarent-pro-compress-header .content-area {
	margin-top: 0 !important;
}

body.equarent-pro-compress-header .entry-content-wrap {
	padding-top: 0 !important;
}

body.equarent-pro-compress-header .entry-content > *:first-child {
	margin-top: 0 !important;
}

/* Hero height modes (Pro): an image hero adopts the aspect ratio chosen in the editor, exposed by
   render_hero as the inline --equarent-hero-aspect custom prop plus a modifier class. Scoped to the
   Pro image hero so the Free gradient hero (padding-driven) is left untouched; content is centred in
   the taller box. short = widest/lowest (32/9), normal = 21/9, tall = narrowest/tallest (16/9). */
.equarent-site .equarent-hero__inner--ratio-tall,
.equarent-site .equarent-hero__inner--ratio-normal,
.equarent-site .equarent-hero__inner--ratio-short {
	aspect-ratio: var( --equarent-hero-aspect, 21 / 9 );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Hero free-text line (Pro): the optional owner-authored line that replaces the Free city line, set
   by render_hero's Pro branch. It mirrors the tagline's rhythm but carries the bottom margin the
   city line used to hold before the hero button, so the vertical cadence is unchanged. Owner-chosen
   colour / size arrive as INLINE styles on the element and win over these base rules by specificity,
   so no !important is needed; when unset the element simply inherits the hero's base look. */
.equarent-site .equarent-hero__free {
	font-size: clamp( 15px, 2.4vw, 19px );
	margin: 0 0 24px;
	opacity: .95;
}

/* ------------------------------------------------------------------------------------------------
   FAQ accordion (Pro). Rendered inside a section envelope / shortcode wrapper, so every selector
   stays under .equarent-site. Native <details>/<summary> — fully usable without JavaScript; the
   open/close chevron is pure CSS driven by the [open] state.
   ------------------------------------------------------------------------------------------------ */
.equarent-site .equarent-pro-faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.equarent-site .equarent-pro-faq__item {
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: var( --equarent-radius, 12px );
	background: rgba( 255, 255, 255, .6 );
	overflow: hidden;
}
.equarent-site .equarent-pro-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 14px 18px;
	font-weight: 600;
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
}
/* Remove the native disclosure triangle across engines. */
.equarent-site .equarent-pro-faq__q::-webkit-details-marker {
	display: none;
}
.equarent-site .equarent-pro-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform .18s ease;
	opacity: .65;
}
.equarent-site .equarent-pro-faq__item[open] .equarent-pro-faq__q::after {
	transform: rotate( -135deg );
}
.equarent-site .equarent-pro-faq__q:focus-visible {
	outline: 2px solid var( --equarent-accent, #2563eb );
	outline-offset: -2px;
}
.equarent-site .equarent-pro-faq__a {
	padding: 0 18px 16px;
	line-height: 1.6;
	opacity: .9;
}

/* -------------------------------------------------------------------------------------------------
   Configurator-block content inherits the EquaRent site theme (Pro).

   Blocks added through the site-structure configurator are emitted as
   <div class="equarent-pro-block equarent-pro-block--*"> inside the .equarent-site wrapper, which
   carries the plugin font (Plus Jakarta Sans) and the colour tokens. But an owner's authored markup
   in the HTML block — a heading, a paragraph, a link, a list — otherwise picks up the active
   WordPress theme's element rules (e.g. Kadence sets font-family and colour directly on p / h1..h6 /
   a), and those win over the font merely INHERITED from .equarent-site. These rules pin the authored
   content back to the plugin's own typography and palette.

   Every selector stays under .equarent-site, so nothing outside the plugin's own output is affected,
   and the authored prose is scoped to the --html block so the already-themed button (.equarent-pro-btn)
   and the video / shortcode blocks are left untouched. font-family: inherit forces the children to
   take the .equarent-site font over the theme's element rules; owner-authored INLINE styles on the
   markup still win by specificity, so a colour or size set inline is preserved. No !important used.
   ------------------------------------------------------------------------------------------------- */
.equarent-site .equarent-pro-block {
	font-family: inherit;
	color: var( --equarent-ink, #000d1c );
}

/* Force the plugin font on every common authored child so the theme's element rules cannot win. */
.equarent-site .equarent-pro-block--html p,
.equarent-site .equarent-pro-block--html ul,
.equarent-site .equarent-pro-block--html ol,
.equarent-site .equarent-pro-block--html li,
.equarent-site .equarent-pro-block--html h1,
.equarent-site .equarent-pro-block--html h2,
.equarent-site .equarent-pro-block--html h3,
.equarent-site .equarent-pro-block--html h4,
.equarent-site .equarent-pro-block--html h5,
.equarent-site .equarent-pro-block--html h6,
.equarent-site .equarent-pro-block--html a,
.equarent-site .equarent-pro-block--html strong,
.equarent-site .equarent-pro-block--html em,
.equarent-site .equarent-pro-block--html blockquote,
.equarent-site .equarent-pro-block--html table {
	font-family: inherit;
}

/* Body copy in the ink token, with the plugin's prose rhythm (matches .equarent-prose p spacing). */
.equarent-site .equarent-pro-block--html p,
.equarent-site .equarent-pro-block--html ul,
.equarent-site .equarent-pro-block--html ol,
.equarent-site .equarent-pro-block--html li,
.equarent-site .equarent-pro-block--html table {
	color: var( --equarent-ink, #000d1c );
	line-height: 1.6;
}

.equarent-site .equarent-pro-block--html p {
	margin: 0 0 12px;
}

/* Headings in the navy heading token, matching the site section-title weight/rhythm. */
.equarent-site .equarent-pro-block--html h1,
.equarent-site .equarent-pro-block--html h2,
.equarent-site .equarent-pro-block--html h3,
.equarent-site .equarent-pro-block--html h4,
.equarent-site .equarent-pro-block--html h5,
.equarent-site .equarent-pro-block--html h6 {
	color: var( --equarent-navy, #0c3a66 );
	font-weight: 800;
	line-height: 1.2;
}

/* In-content links in the accent token, darkening to navy on hover like the rest of the site. */
.equarent-site .equarent-pro-block--html a {
	color: var( --equarent-accent, #1981de );
	text-decoration: underline;
}

.equarent-site .equarent-pro-block--html a:hover,
.equarent-site .equarent-pro-block--html a:focus {
	color: var( --equarent-navy, #0c3a66 );
}

/* A quoted block reads as secondary text with a palette rule down its edge. */
.equarent-site .equarent-pro-block--html blockquote {
	color: var( --equarent-muted, #5a6675 );
	border-left: 3px solid var( --equarent-line, #e2ebf3 );
	margin: 0 0 12px;
	padding: 4px 0 4px 14px;
}

/* -------------------------------------------------------------------------------------------------
   Mobile header menu (Pro): hamburger button + dropdown nav panel.

   Core hides the nav outright below its own breakpoint (.equarent-site__nav { display:none }) with no
   mobile affordance. The Pro header (render_header_pro) adds an accessible hamburger button, emitted
   before the nav; this stylesheet hides it on desktop and, on mobile, shows it on the LEFT (regardless
   of the menu_position control) while turning the nav into a stacked dropdown panel revealed when the
   header carries .is-open (toggled by equarent-pro-menu.js). The language switcher stays in the bar.
   Every selector stays under .equarent-site__header* / .equarent-site__burger, both Pro-only, so Free
   (no --pro class, no burger markup) is untouched.
   ------------------------------------------------------------------------------------------------- */

/* Desktop: the hamburger never shows; the nav keeps the core / left / center behaviour above. */
.equarent-site__burger {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var( --equarent-line, #e2ebf3 );
	border-radius: 10px;
	background: transparent;
	color: var( --equarent-navy, #0c3a66 );
	cursor: pointer;
}

.equarent-site__burger-bar {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.equarent-site__burger:focus-visible {
	outline: 2px solid var( --equarent-accent, #1981de );
	outline-offset: 2px;
}

/* Recette: when the menu is placed INSIDE the hero (desktop), the header still carries its nav +
   hamburger so mobile always has a top hamburger — hide the header's inline nav on desktop so the menu
   is not shown twice. The mobile media query below re-reveals it (via .is-open, higher specificity). */
.equarent-site__header--hero-menu .equarent-site__nav {
	display: none;
}

@media ( max-width: 782px ) {
	/* Show the hamburger, pinned to the far left of the header bar in both menu modes. */
	.equarent-site__header--pro .equarent-site__burger {
		display: inline-flex;
		order: -1;
	}

	/* The nav becomes a dropdown panel under the header bar: hidden by default, revealed when open.
	   position:absolute is anchored to .equarent-site__header-inner (position:relative above), and the
	   transform reset cancels the menu-center offset so menu-center never applies on mobile. */
	.equarent-site__header--pro .equarent-site__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		transform: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 6px 0;
		background: #fff;
		border-bottom: 1px solid var( --equarent-line, #e2ebf3 );
		box-shadow: 0 10px 28px rgba( 12, 58, 102, 0.16 );
		max-height: calc( 100vh - 100% );
		overflow-y: auto;
		z-index: 30;
	}

	.equarent-site__header--pro.is-open .equarent-site__nav {
		display: flex;
	}

	/* Full-width tappable rows. */
	.equarent-site__header--pro .equarent-site__nav .equarent-site__navlink {
		display: block;
		padding: 10px 18px;
	}

	/* A parent item and its children stack vertically; the hover dropdown becomes a static, indented
	   sub-list (no hover on touch), and the dropdown caret is dropped. */
	.equarent-site__header--pro .equarent-site__navitem {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.equarent-site__header--pro .equarent-site__navitem--has-children > .equarent-site__navlink::after {
		display: none;
	}

	.equarent-site__header--pro .equarent-site__submenu {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.equarent-site__header--pro .equarent-site__submenu .equarent-site__navlink {
		padding-left: 34px;
		white-space: normal;
	}

	/* ---------------------------------------------------------------------------------------------
	   Footer on mobile: columns stacked, every line genuinely centred on both axes.

	   The desktop flex row stacks here (flex-direction:column) and is centred as a group
	   (align-items:center). Each column and its link list shrink to their content (width:auto) and
	   drop every inline padding/margin — including the UA ul padding-inline-start — so the centred
	   text sits dead-centre rather than reading as shifted to the right. Vertical symmetry is already
	   handled by the inner's symmetric padding + gap + child-margin reset above (both axes).
	   Everything stays scoped under .equarent-site__footer*.
	   --------------------------------------------------------------------------------------------- */
	.equarent-site__footer .equarent-site__footer-cols {
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}

	.equarent-site__footer .equarent-site__footer-col {
		width: auto;
		margin-inline: 0;
		padding-inline: 0;
		text-align: center;
	}

	.equarent-site__footer .equarent-site__footer-list {
		width: auto;
		margin-inline: 0;
		padding-inline: 0;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.equarent-site__footer .equarent-site__footer-list li {
		text-align: center;
	}

	.equarent-site__footer .equarent-site__social,
	.equarent-site__footer .equarent-site__meta,
	.equarent-site__footer .equarent-site__footer-text {
		text-align: center;
	}
}

/* -------------------------------------------------------------------------------------------------
   Pro footer — desktop / mobile variants.

   When a separate mobile footer is configured, render_footer() emits BOTH column variants and the
   viewport picks one (same render-both approach as the header menu). The desktop variant shows above
   782px; the mobile variant (a single configured column) shows at/below 782px. Everything stays
   scoped under .equarent-site__footer*, so Free (which never emits these wrappers) is untouched.
   ------------------------------------------------------------------------------------------------- */
.equarent-site__footer .equarent-pro-footer-variant--mobile {
	display: none;
}

/* The variant wrapper now sits between footer-inner and footer-cols, so re-apply the even-rhythm
   margin reset (footer-inner's direct-child reset no longer reaches the nested cols). */
.equarent-site__footer-inner > .equarent-pro-footer-variant,
.equarent-site__footer .equarent-pro-footer-variant > .equarent-site__footer-cols {
	margin-top: 0;
	margin-bottom: 0;
}

@media ( max-width: 782px ) {
	.equarent-site__footer .equarent-pro-footer-variant--desktop {
		display: none;
	}
	.equarent-site__footer .equarent-pro-footer-variant--mobile {
		display: block;
	}
	/* One clean, centred column on phones (overrides the Pro desktop wrapping-row layout). */
	.equarent-site__footer .equarent-pro-footer-variant--mobile .equarent-site__footer-cols {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.equarent-site__footer .equarent-pro-footer-variant--mobile .equarent-site__footer-col {
		width: 100%;
		text-align: center;
	}
}


/* -------------------------------------------------------------------------
   Payment-result page (Stripe return). Rendered by EquaRent_Payment_Result
   on the front page the guest lands on after Checkout. Self-contained tokens:
   the panel may render on a page WITHOUT the .equarent-site wrapper (e.g. the
   home page), so every colour reads a site token with a hard fallback, so it
   inherits the ambiance when inside .equarent-site and stays on-brand otherwise.
   All selectors stay under .equarent-payresult — nothing else is affected.
   ------------------------------------------------------------------------- */
.equarent-payresult {
	--equarent-pr-accent: var(--equarent-accent, #1981de);
	--equarent-pr-navy: var(--equarent-navy, #0c3a66);
	--equarent-pr-ink: var(--equarent-ink, #000d1c);
	--equarent-pr-muted: var(--equarent-muted, #5a6675);
	--equarent-pr-paper: var(--equarent-paper, #ffffff);
	--equarent-pr-soft: var(--equarent-soft, #f3f8fd);
	--equarent-pr-line: var(--equarent-line, #e2ebf3);
	--equarent-pr-radius: var(--equarent-radius, 16px);
	--equarent-pr-ok: #1f9d55;
	--equarent-pr-warn: #c2721f;
	box-sizing: border-box;
	max-width: 620px;
	margin: 24px auto;
	padding: 0 16px;
	font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: var(--equarent-pr-ink);
	line-height: 1.6;
}
.equarent-payresult *,
.equarent-payresult *::before,
.equarent-payresult *::after { box-sizing: border-box; }

.equarent-payresult__inner {
	background: var(--equarent-pr-paper);
	border: 1px solid var(--equarent-pr-line);
	border-radius: var(--equarent-pr-radius);
	box-shadow: 0 10px 30px rgba( 12, 58, 102, 0.08 );
	padding: 28px 24px;
	text-align: center;
}

.equarent-payresult__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.equarent-payresult--success .equarent-payresult__icon { color: var(--equarent-pr-ok); }
.equarent-payresult--cancel .equarent-payresult__icon { color: var(--equarent-pr-warn); }

.equarent-payresult__title {
	margin: 4px 0 6px;
	font-size: 24px;
	font-weight: 800;
	color: var(--equarent-pr-navy);
}
.equarent-payresult__lead {
	margin: 0 auto 18px;
	max-width: 46ch;
	color: var(--equarent-pr-muted);
}

.equarent-payresult__ref {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0 auto 18px;
	padding: 12px 16px;
	background: var(--equarent-pr-soft);
	border: 1px dashed var(--equarent-pr-accent);
	border-radius: 12px;
}
.equarent-payresult__ref-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--equarent-pr-muted);
}
.equarent-payresult__ref-value {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--equarent-pr-navy);
}

.equarent-payresult__recap {
	margin: 0 0 16px;
	padding: 0;
	text-align: left;
	border-top: 1px solid var(--equarent-pr-line);
}
.equarent-payresult__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 10px 2px;
	border-bottom: 1px solid var(--equarent-pr-line);
}
.equarent-payresult__dt {
	margin: 0;
	color: var(--equarent-pr-muted);
	font-size: 14px;
}
.equarent-payresult__dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
	color: var(--equarent-pr-ink);
}
.equarent-payresult__row--amount .equarent-payresult__dd {
	font-weight: 800;
	color: var(--equarent-pr-navy);
}
/* Sub-sections of the recap: "Rate detail" and "Payment" (portal + Stripe result page). */
.equarent-payresult__subtitle {
	margin: 18px 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--equarent-pr-muted);
	text-align: left;
}
.equarent-payresult__recap--rates,
.equarent-payresult__recap--pay {
	margin-bottom: 8px;
}
.equarent-payresult__row--strong .equarent-payresult__dt,
.equarent-payresult__row--strong .equarent-payresult__dd {
	font-weight: 800;
	color: var(--equarent-pr-navy);
}
/* Minimum-stay note riding on the price line (recette #26). */
.equarent-site .equarent-booking__minnote {
	font-style: italic;
	font-size: 0.9em;
	color: var( --equarent-muted, #52708a );
	margin-left: 6px;
}
/* "Booking and rental conditions" modal opened from the terms consent (recette #26). */
.equarent-book-terms {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.equarent-book-terms[hidden] {
	display: none;
}
.equarent-book-terms__backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 12, 58, 102, 0.45 );
}
.equarent-book-terms__dialog {
	position: relative;
	z-index: 1;
	max-width: 520px;
	width: 100%;
	max-height: 85vh;
	/* The DIALOG no longer scrolls; its body does. This keeps the absolute close button pinned top-right
	   instead of scrolling away with the content (recette). */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: var( --equarent-radius, 12px );
	padding: 24px 22px 20px;
	box-shadow: 0 12px 40px rgba( 12, 58, 102, 0.25 );
}
/* The scrollable region of each modal variant (booking conditions + legal page); flex:1 + min-height:0
   make it the bounded scroller inside the flex-column dialog. */
.equarent-book-terms__body,
.equarent-book-terms__legalbody {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}
.equarent-book-terms__close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 2;
	border: 0;
	background: transparent;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	color: var( --equarent-muted, #52708a );
}
.equarent-book-terms .equarent-pro-cancelpolicy {
	margin: 4px 0 0;
}

/* Legal/business information footer on the standalone result + portal pages. */
.equarent-pro-legal {
	margin: 20px auto 0;
	max-width: 520px;
	padding-top: 12px;
	border-top: 1px solid var(--equarent-pr-line, #e2ebf3);
	color: var(--equarent-pr-muted, #52708a);
	font-size: 11px;
	line-height: 1.5;
	text-align: center;
}
.equarent-pro-legal__line {
	margin: 2px 0;
}
/* "Powered by EquaRent" mark: below the site footer + on the result/portal pages. */
.equarent-pro-poweredby {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin: 14px auto 0;
	padding: 12px 0 4px;
	font-size: 11px;
	color: var( --equarent-pr-muted, #52708a );
	opacity: 0.8;
}
.equarent-pro-poweredby__by {
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.equarent-pro-poweredby__link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.equarent-pro-poweredby__link:hover {
	opacity: 0.7;
}
.equarent-pro-poweredby__logo {
	height: 30px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

.equarent-payresult__contact {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--equarent-pr-muted);
}
.equarent-payresult__contact a {
	color: var(--equarent-pr-accent);
	text-decoration: underline;
}

.equarent-payresult__retry-note {
	margin: 0 auto 18px;
	max-width: 46ch;
	color: var(--equarent-pr-muted);
}
.equarent-payresult__actions { margin: 0; }
.equarent-payresult__btn {
	display: inline-block;
	padding: 12px 22px;
	background: var(--equarent-pr-accent);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 999px;
	transition: filter 0.15s ease;
}
.equarent-payresult__btn:hover,
.equarent-payresult__btn:focus { filter: brightness( 0.92 ); }

@media ( max-width: 480px ) {
	.equarent-payresult__inner { padding: 22px 16px; }
	.equarent-payresult__title { font-size: 21px; }
	.equarent-payresult__ref-value { font-size: 19px; }
	.equarent-payresult__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.equarent-payresult__dd { text-align: left; }
}

/* -------------------------------------------------------------------------
   Standalone payment-result PAGE (Stripe return). The result feature renders
   a self-contained HTML document on template_redirect and exits, so the panel
   is the whole page (no theme/site content below). This wrapper centres the
   panel in the viewport over a soft on-brand background and lays out the
   "Back to home" button under it. The wrapper element also carries the
   .equarent-site class, so the site tokens (soft/paper/line/accent/navy…) and
   the ambiance resolve here exactly as on the main site. All selectors stay
   under .equarent-payresult-page / its own body class.
   ------------------------------------------------------------------------- */
html .equarent-payresult-body,
.equarent-payresult-body {
	margin: 0;
	padding: 0;
	background: var(--equarent-soft, #f3f8fd);
}
.equarent-payresult-page {
	box-sizing: border-box;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 40px 16px;
	background: var(--equarent-soft, #f3f8fd);
}
/* Language switcher on the standalone mail-linked pages (manage portal + payment return): pinned to
   the top-right so it does not disturb the vertically-centred panel. The list look comes from the
   shared .equarent-langsw rules in the front stylesheet. */
.equarent-payresult-page__langsw {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
}
/* The panel keeps its own look but drops the standalone-centring margin so the
   page wrapper controls its vertical placement. */
.equarent-payresult-page .equarent-payresult {
	margin: 0 auto;
	width: 100%;
}
/* The page-level "Back to home" CTA reuses the panel button look (accent pill);
   this hook is here for any page-specific tweak and to keep it clearly targeted. */
.equarent-payresult-page__home {
	flex: 0 0 auto;
}

@media ( max-width: 480px ) {
	.equarent-payresult-page {
		padding: 24px 14px;
	}
}

/* -------------------------------------------------------------------------
   Self-service reservation portal + neutralized landings. Rendered by
   EquaRent_Pro_Reservation_Portal on the standalone manage page (signed-token
   link). It reuses the payment-result shell (.equarent-payresult*,
   .equarent-payresult-page) for the on-brand panel + "Back to home" button;
   these rules add only the portal action buttons and landing spacing. All
   selectors stay under .equarent-pro-portal — nothing else is affected.
   ------------------------------------------------------------------------- */
.equarent-pro-portal__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin: 22px 0 4px;
}
.equarent-pro-portal__form {
	margin: 0;
}
/* The pay button keeps the accent pill from .equarent-payresult__btn. */
.equarent-pro-portal__btn--pay {
	background: var(--equarent-pr-accent, #1981de);
}
/* The cancel button is a quieter, outlined action so it never competes with
   the primary pay CTA. */
.equarent-pro-portal__btn--cancel {
	background: transparent;
	color: var(--equarent-pr-navy, #0c3a66);
	border: 1px solid var(--equarent-pr-line, #e2ebf3);
}
.equarent-pro-portal__btn--cancel:hover,
.equarent-pro-portal__btn--cancel:focus {
	background: var(--equarent-pr-soft, #f3f8fd);
	filter: none;
}
/* Landing variant (cancelled / ended / invalid): recap-only, a touch more air. */
.equarent-pro-portal--landing .equarent-payresult__inner {
	padding: 32px 24px;
}

@media ( max-width: 480px ) {
	.equarent-pro-portal__actions {
		flex-direction: column;
	}
	.equarent-pro-portal__form,
	.equarent-pro-portal__btn--pay,
	.equarent-pro-portal__btn--cancel {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Cancellation-policy notice (booking section). Rendered inside the public
   site (.equarent-site) by the Pro sections override, so it reads the site
   ambiance tokens with hard fallbacks. All selectors stay under
   .equarent-pro-cancelpolicy — nothing else is affected.
   ------------------------------------------------------------------------- */
.equarent-pro-cancelpolicy {
	margin: 12px 0 4px;
	padding: 12px 14px;
	border: 1px solid var( --equarent-line, #e2ebf3 );
	border-left: 3px solid var( --equarent-accent, #1981de );
	border-radius: var( --equarent-radius, 12px );
	background: var( --equarent-soft, #f3f8fd );
}
.equarent-pro-cancelpolicy__title {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --equarent-navy, #0c3a66 );
}
.equarent-pro-cancelpolicy__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var( --equarent-ink, #000d1c );
}
/* Unified "Booking and cancellation conditions" card: a tidy list of the booking terms (min stay,
   payment mode, short-stay full payment) and the cancellation tiers inside the same bracketed box. */
.equarent-pro-cancelpolicy__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 1.5;
	color: var( --equarent-ink, #000d1c );
}
.equarent-pro-cancelpolicy__list li {
	position: relative;
	margin: 0;
	padding: 2px 0 2px 16px;
}
.equarent-pro-cancelpolicy__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var( --equarent-accent, #1981de );
}
/* Date-aware payment note shown under the price breakdown in the booking quote simulation. */
.equarent-book__policy {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --equarent-muted, #52708a );
}

/* Informational deposit / caution amount line shown directly under the Total in the booking quote.
   The deposit is NOT added to the total, so the line is muted and set apart by a hairline rule. */
.equarent-site .equarent-book__line--caution {
	margin-top: 4px;
	padding-top: 6px;
	border-top: 1px dashed var( --equarent-border, #d7e2ee );
	font-size: 13px;
	color: var( --equarent-muted, #52708a );
}

/* Balance auto-debit authorisation consent — rendered with the general booking consents, hidden until
   /quote reports it is required. The wrapper div has no Free display rule, so the UA [hidden] fallback
   already hides it without this stylesheet; this rule is a belt-and-braces reaffirmation. */
.equarent-site .equarent-book__mandate[hidden] {
	display: none;
}

/* Dedicated deposit / caution section in the booking form (data-equarent-caution-wrap): a titled,
   lightly framed block so the required caution consent reads as its own clear step. */
.equarent-site .equarent-book__caution {
	margin: 14px 0 0;
	padding: 12px 14px;
	border: 1px solid var( --equarent-border, #d7e2ee );
	border-radius: 10px;
	background: var( --equarent-surface-soft, #f6f9fc );
}
.equarent-site .equarent-book__caution[hidden] {
	display: none;
}
.equarent-site .equarent-book__caution-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: var( --equarent-text, #0c3a66 );
}
.equarent-site .equarent-book__caution-title:empty {
	display: none;
}
.equarent-site .equarent-book__caution .equarent-book__consent {
	margin: 0;
}

/* -------------------------------------------------------------------------
   "If you cancel now" preview on the active self-service portal. Rendered
   inside .equarent-payresult, so it reads the --equarent-pr-* tokens.
   Selectors stay under .equarent-pro-portal__cancelpreview.
   ------------------------------------------------------------------------- */
.equarent-pro-portal__cancelpreview {
	margin: 2px auto 0;
	max-width: 46ch;
	padding: 11px 14px;
	border: 1px solid var( --equarent-pr-line, #e2ebf3 );
	border-radius: var( --equarent-pr-radius, 16px );
	background: var( --equarent-pr-soft, #f3f8fd );
	font-size: 14px;
	line-height: 1.5;
	color: var( --equarent-pr-ink, #000d1c );
}
.equarent-pro-portal__cancelpreview--full {
	border-color: var( --equarent-pr-ok, #1f9d55 );
}
.equarent-pro-portal__cancelpreview--keep,
.equarent-pro-portal__cancelpreview--none {
	border-color: var( --equarent-pr-warn, #c2721f );
}

/* "Site general terms" (CGU) modal — the owner-selected legal page (recette #27). */
.equarent-book-terms__dialog--legal {
	max-width: 760px;
	max-height: 85vh;
}
.equarent-book-terms__legaltitle {
	margin: 0 24px 12px 0;
	font-size: 1.15em;
	color: var( --equarent-navy, #0c3a66 );
}
.equarent-book-terms__legalbody {
	font-size: 14px;
	line-height: 1.6;
}
.equarent-book-terms__legalbody p {
	margin: 0 0 10px;
}

/* -------------------------------------------------------------------------
   Recette #32 — reviews band carousel: a bounded scroll-snap row with discreet
   dots underneath (replaces the recette #28/#30 auto-marquee + accelerate-on-hold
   buttons, which snapped back on release). The reviews band ships from the FROZEN
   Free stylesheet as an auto-marquee; when the Pro front JS adds .has-dots it
   becomes a real horizontal scroller and the Free animation is neutralised here
   (NOT in the Free sheet). Scoped to Pro classes. The dot styles below are SHARED
   with the video carousel (same .equarent-carousel-dots / -dot markup).
   ------------------------------------------------------------------------- */
.equarent-site .equarent-reviews--band.has-dots {
	position: relative;
	overflow: visible;
}
.equarent-site .equarent-reviews--band.has-dots .equarent-reviews__track {
	/* Neutralise the Free auto-marquee (animation lives in the frozen Free sheet) and turn the row into a
	   real horizontal scroll container driven by the Pro JS (continuous seamless loop). NO scroll-snap —
	   it would fight the rAF-driven continuous scroll and stutter. */
	animation: none;
	transform: none;
	width: auto;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox: hide the native bar; dots are the affordance. */
	padding-bottom: 2px;
	align-items: stretch;
}
.equarent-site .equarent-reviews--band.has-dots .equarent-reviews__track::-webkit-scrollbar {
	display: none; /* WebKit: hide the native bar. */
}
.equarent-site .equarent-reviews--band.has-dots .equarent-rev {
	/* Uniform card (recette): stars on top, a SINGLE-LINE title (or its start, ellipsised), author + date
	   below. Forcing the title to one line makes every card's content the same height, so no card is ever
	   taller than the others — and align-items:stretch on the track equalises any residual. min-width:0
	   keeps the 300px flex-basis even with a long unbreakable token. No fixed height / overflow:hidden:
	   that was clipping the title. */
	flex: 0 0 300px;
	min-width: 0;
}
.equarent-site .equarent-reviews--band.has-dots .equarent-rev__title {
	margin: 0 0 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Discreet dot strip under a Pro carousel (reviews + video). */
.equarent-site .equarent-carousel-dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 2px;
}
.equarent-site .equarent-carousel-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(22, 50, 74, 0.25);
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.equarent-site .equarent-carousel-dot:hover {
	background: rgba(22, 50, 74, 0.5);
}
.equarent-site .equarent-carousel-dot.is-active {
	background: var(--equarent-accent, #1981de);
	transform: scale(1.25);
}

/* -------------------------------------------------------------------------
   Recette #28 — multi-image hero: a paginated carousel (arrows + dots).
   Slides sit behind the colour veil (::before) and the text overlay. The box
   aspect + veil custom props stay on .equarent-hero__inner. Pro-only classes.
   ------------------------------------------------------------------------- */
.equarent-site .equarent-hero__inner--carousel {
	position: relative;
	overflow: hidden;
}
.equarent-site .equarent-hero__inner--carousel > * {
	position: relative;
	z-index: 2; /* title / tagline / free line / CTA above the veil */
}
.equarent-site .equarent-hero__inner--carousel::before {
	z-index: 1; /* veil above the slides, below the text */
}
.equarent-site .equarent-hero__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	border-radius: inherit;
}
.equarent-site .equarent-hero__slide-track {
	display: flex;
	height: 100%;
	transition: transform 0.5s ease;
	will-change: transform;
}
.equarent-site .equarent-hero__slide {
	flex: 0 0 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}
.equarent-site .equarent-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Recette: match the album carousel viewer's chevrons — a translucent dark pill with a white icon,
	   instead of the heavy opaque-white disc (see the Free .equarent-gallery__nav rgba(0,0,0,.32)). */
	background: rgba(0, 0, 0, 0.32);
	color: #fff;
	cursor: pointer;
	box-shadow: none;
	transition: background 0.15s ease;
}
.equarent-site .equarent-hero__nav:hover {
	background: rgba(0, 0, 0, 0.58);
}
.equarent-site .equarent-hero__nav svg {
	width: 20px;
	height: 20px;
}
.equarent-site .equarent-hero__nav--prev {
	left: 14px;
}
.equarent-site .equarent-hero__nav--next {
	right: 14px;
}

/* -------------------------------------------------------------------------
   Recette #28 — site menu placed inside the hero (hero-top / hero-bottom).
   The wrapper also carries .equarent-site__header--pro so the hamburger JS +
   mobile dropdown keep working; these rules reset the inherited header chrome
   and position it over the hero. Scoped under .equarent-hero__inner (Pro-only).
   ------------------------------------------------------------------------- */
/* Ensure the hero box is a positioning context for the absolute hero-menu even when it has no image
   (the base .equarent-hero__inner carries no position; only --image/--carousel do). */
.equarent-site .equarent-hero__inner {
	position: relative;
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: 0;
	box-shadow: none;
	/* Reset the inherited .equarent-site__header chrome (sticky top + backdrop blur) so no blurred band
	   smears across the hero photo. */
	top: auto;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 10px 16px;
	min-height: 0;
	width: auto;
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu--top { top: 10px; bottom: auto; }
.equarent-site .equarent-hero__inner .equarent-site__hero-menu--bottom { top: auto; bottom: 10px; }
.equarent-site .equarent-hero__inner .equarent-site__hero-menu .equarent-site__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	justify-content: center;
	margin: 0;
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu .equarent-site__navlink {
	color: var( --equarent-hero-menu-color, #fff );
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu--pill .equarent-site__navlink {
	background: var( --equarent-hero-menu-pill, rgba( 255, 255, 255, 0.18 ) );
	border-radius: 999px;
	padding: 5px 14px;
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu--pill .equarent-site__navlink:hover {
	filter: brightness( 1.12 );
}
/* Recette: the hero-embedded submenu (a parent item with children). It otherwise inherits the generic
   white header-dropdown fill, which reads grey and — with the white hero-menu link colour — hides the
   child texts. Repaint it with the site ACCENT so the links are legible. And when the menu sits at the
   BOTTOM of the hero, open the dropdown UPWARD (into the hero) so it is neither clipped by the carousel
   hero (overflow:hidden) nor spilling below the hero box. Scoped to the hero; the normal header
   dropdown (lines 144-178) is untouched. */
.equarent-site .equarent-hero__inner .equarent-site__hero-menu .equarent-site__submenu {
	background: var( --equarent-accent, #1981de );
	border-color: var( --equarent-accent, #1981de );
	box-shadow: 0 10px 28px rgba( 11, 27, 42, 0.30 );
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu .equarent-site__submenu .equarent-site__navlink {
	color: #fff;
	background: none;
	/* Reset the pill padding/radius inherited from --pill so submenu rows stay flat dropdown rows. */
	padding: 7px 16px;
	border-radius: 0;
}
.equarent-site .equarent-hero__inner .equarent-site__hero-menu--bottom .equarent-site__navitem--has-children > .equarent-site__submenu {
	top: auto;
	bottom: 100%;
	margin-bottom: 6px;
}
/* Recette: the hero "Check availability" badge uses EM-based padding so the pill box grows with the
   owner-chosen text size (the Free px padding cannot be edited). At the default inherited size this is
   visually equivalent to the Free padding. Scoped to the hero primary button, Pro sheet only. */
.equarent-site .equarent-hero__inner .equarent-btn--primary {
	padding: 0.75em 1.4em;
	line-height: 1.2;
}
@media ( max-width: 782px ) {
	/* Recette: on mobile the site menu is ALWAYS the header hamburger (top, beside the language switcher,
	   above the hero) — never embedded in the hero. The header now always emits its burger + nav (see
	   render_header_pro); hide the in-hero menu entirely here so there is no second, embedded menu. */
	.equarent-site .equarent-hero__inner .equarent-site__hero-menu {
		display: none;
	}
}

/* Recette #29 — the mandatory no-VAT mention under a price detail (portal + result page). */
.equarent-site .equarent-payresult__novat {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	color: var( --equarent-pr-muted, #52708a );
}

/* Recette: the sticky bottom booking bar ("From {price} per night|person" + Check availability). Colours
   come from the admin (inline CSS custom props), falling back to the site deep/accent. The
   .equarent-site--has-cta-bar modifier reserves bottom space so the footer never sits under the fixed bar. */
.equarent-site__ctabar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	flex-wrap: wrap;
	padding: 10px 16px;
	background: var( --equarent-bbar-bg, var( --equarent-navy, #0c3a66 ) );
	color: var( --equarent-bbar-text, #fff );
	box-shadow: 0 -4px 18px rgba( 11, 27, 42, 0.18 );
}
.equarent-site__ctabar-price {
	font-weight: 700;
	font-size: 16px;
	color: var( --equarent-bbar-text, #fff );
	white-space: nowrap;
}
.equarent-site__ctabar-btn {
	background: var( --equarent-bbar-btn, var( --equarent-accent, #1981de ) );
	border-color: var( --equarent-bbar-btn, var( --equarent-accent, #1981de ) );
	white-space: nowrap;
	margin: 0;
}
/* R4: the price + its disclaimer form one left-aligned group, so the bar stays a single row. */
.equarent-site__ctabar-info {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 12px;
	min-width: 0;
}
/* R3/R4: disclaimer (excludes cleaning / special rates), a muted line sitting NEXT TO the price. */
.equarent-site__ctabar-note {
	font-size: 12px;
	line-height: 1.3;
	opacity: 0.85;
	color: var( --equarent-bbar-text, #fff );
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.equarent-site__ctabar-note svg {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
}
/* R3: front booking-calendar special-rate ("mise en avant") picto + "Remise" legend. Pro sheet only — the
   base .equarent-availcal CSS is in the shared core sheet; Free never emits .is-featured, so it is untouched. */
.equarent-availcal__cell.is-featured {
	position: relative;
}
.equarent-availcal__feat {
	position: absolute;
	top: 2px;
	right: 2px;
	line-height: 0;
	color: var( --equarent-accent, #1981de );
	pointer-events: none;
}
.equarent-availcal__feat svg {
	width: 12px;
	height: 12px;
}
.equarent-availcal__legend {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 10px;
	font-size: 13px;
	font-weight: 400;
	color: var( --equarent-accent, #1981de );
	white-space: nowrap;
}
.equarent-availcal__legend svg {
	width: 14px;
	height: 14px;
}
.equarent-site.equarent-site--has-cta-bar {
	/* Reserve for the worst case where the button wraps below the price (two rows):
	   pad 20 + price line 26 + row-gap 10 + button 48 = ~104, plus margin. The price is
	   kept to a single line (nowrap) so the bar can never exceed two rows. */
	padding-bottom: 112px;
}
@media ( max-width: 480px ) {
	.equarent-site__ctabar {
		padding: 8px 12px;
		gap: 8px 12px;
	}
	.equarent-site__ctabar-price {
		font-size: 15px;
	}
	.equarent-site.equarent-site--has-cta-bar {
		/* Two-row worst case at this size: pad 16 + price 24 + row-gap 8 + button 48 = ~96, plus margin. */
		padding-bottom: 104px;
	}
}

/* Recette: on MOBILE, trim the composed-site lateral gutters so images and the hero are as wide as
   possible while text stays readable. Pro sheet only; overrides the Free single-class rules by scoping
   under .equarent-site. Left/right only — never the shorthand — so vertical rhythm (hero clamp, section
   gap) is preserved. Gallery/hero go edge-to-edge; text sections keep a slim 8px gutter. (Values lowered
   from 12-14px: the earlier -2/-4px trim off the 16px core gutter was below the perception threshold.)
   NB: a theme content wrapper around the shortcode sits OUTSIDE .equarent-site and cannot be trimmed here. */
@media ( max-width: 782px ) {
	.equarent-site .equarent-site__header-inner { padding-left: 8px; padding-right: 8px; }
	.equarent-site .equarent-section { padding-left: 8px; padding-right: 8px; }
	.equarent-site .equarent-hero__inner { padding-left: 8px; padding-right: 8px; }
	.equarent-site .equarent-gallery { padding-left: 2px; padding-right: 2px; }
	.equarent-site .equarent-legal__inner { padding-left: 10px; padding-right: 10px; }
	.equarent-site__footer { margin-left: 4px; margin-right: 4px; }
	.equarent-site__footer .equarent-site__footer-inner { padding-left: 8px; padding-right: 8px; }

	/* Sticky bar on mobile: text centered with the button centered directly below it (desktop keeps the
	   price-left / button-right row — this override is confined to the mobile breakpoint). The bar is then
	   deterministically two rows, which the --has-cta-bar bottom reservation above already budgets. */
	.equarent-site__ctabar {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 8px;
	}
	.equarent-site__ctabar-btn { align-self: center; }
}

/* Portal (recette): payment-start failure notice ("Pay the balance" couldn't
   open a Stripe session) — shown instead of a silent reload. */
.equarent-pro-portal__notice {
	margin: 10px 0 0;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 14px;
}
.equarent-pro-portal__notice--error {
	background: #fdecec;
	color: #8a1f1f;
	border: 1px solid #f3c2c2;
}

/* -------------------------------------------------------------------------
   Recette — album/gallery carousel: give the VIEWPORT the fixed 16/9 box (as
   the fade mode already does) so EVERY slide is the same height and the
   viewport's rounded clip (overflow:hidden + border-radius) applies to all four
   corners. The Free sheet puts aspect-ratio on each flex ITEM; combined with
   flex stretch that left every slide but the last taller, with its bottom
   truncated and its bottom corners square. Pro-only override.
   ------------------------------------------------------------------------- */
.equarent-site .equarent-gallery--carousel .equarent-gallery__viewport {
	aspect-ratio: 16 / 9;
}
.equarent-site .equarent-gallery--carousel .equarent-gallery__track {
	height: 100%;
}
.equarent-site .equarent-gallery--carousel .equarent-gallery__item {
	aspect-ratio: auto;
	height: 100%;
}

/* Ambiance presets (Pro). Free ships only the signature palette + the accent/deep colour pickers;
   Pro re-adds the ten ready-made ambiances. Loaded with equarent-site as a dependency, so these
   remap the base hues after the core sheet. */
.equarent-site[data-equarent-ambiance="coastal"]  { --equarent-blue: #0e8f8f; --equarent-navy: #063f3f; --equarent-sky: #5fd0c8; }
.equarent-site[data-equarent-ambiance="warm"]      { --equarent-blue: #c4602f; --equarent-navy: #7a3418; --equarent-sky: #e8a06a; }
.equarent-site[data-equarent-ambiance="forest"]    { --equarent-blue: #2f8f5b; --equarent-navy: #14432c; --equarent-sky: #7fd0a1; }
.equarent-site[data-equarent-ambiance="lavender"]  { --equarent-blue: #7c5cc4; --equarent-navy: #3d2d6b; --equarent-sky: #b9a6e8; }
.equarent-site[data-equarent-ambiance="sand"]      { --equarent-blue: #b78a1f; --equarent-navy: #5f4a15; --equarent-sky: #e8cf6a; }
.equarent-site[data-equarent-ambiance="slate"]     { --equarent-blue: #5b7290; --equarent-navy: #2c3a4e; --equarent-sky: #a9bdd6; }
.equarent-site[data-equarent-ambiance="rose"]      { --equarent-blue: #d65c86; --equarent-navy: #7a2c48; --equarent-sky: #f0a6c4; }
.equarent-site[data-equarent-ambiance="midnight"]  { --equarent-blue: #3a6ea5; --equarent-navy: #0a1a2f; --equarent-sky: #6aa0d0; }
.equarent-site[data-equarent-ambiance="sunset"]    { --equarent-blue: #e2663a; --equarent-navy: #7a2f18; --equarent-sky: #f0a06a; }