/**
 * EquaRent Directory - Lot 3 front stylesheet.
 *
 * Colours, backgrounds, borders, brand and fonts come ONLY from charter
 * tokens (var(--l974-*)); the active charter stylesheet is loaded as a
 * dependency and defines them. The single tolerated exception is the modal
 * scrim and a few subtle elevation shadows, expressed as rgba(0,0,0,..).
 *
 * Mobile-first, responsive, no horizontal overflow at 360px. Honours
 * prefers-reduced-motion. WCAG 2.1 AA focus visibility.
 *
 * @package EquaRent_Directory
 */

/* -------------------------------------------------------------------------
 * 1. Root wrapper, box model, width modifiers
 * ---------------------------------------------------------------------- */
.eqdir {
	font-family: var(--l974-font-body);
	color: var(--l974-text);
	line-height: 1.5;
	box-sizing: border-box;
}

.eqdir *,
.eqdir *::before,
.eqdir *::after {
	box-sizing: border-box;
}

.eqdir img {
	max-width: 100%;
	height: auto;
	display: block;
}

.eqdir a {
	color: var(--l974-link);
}

.eqdir-width-theme {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-left: auto;
	margin-right: auto;
}

.eqdir-width-full {
	width: 100%;
	max-width: 100%;
	padding-left: 16px;
	padding-right: 16px;
}

/* Accessible visually-hidden helper (fiche table caption uses it). */
.eqdir .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * 2. Search filter bar
 * ---------------------------------------------------------------------- */
.eqdir-search {
	margin-bottom: 1.5rem;
}

.eqdir-search__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 10rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.eqdir-search__field label,
.eqdir-search__field legend {
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--l974-text-muted);
}

.eqdir-search__field input,
.eqdir-search__field select {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-search__field input:focus,
.eqdir-search__field select:focus {
	outline: 2px solid var(--l974-link);
	outline-offset: 1px;
	border-color: var(--l974-link);
}

.eqdir-search__secteurs {
	flex: 1 1 100%;
}

.eqdir-search__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.9rem;
}

.eqdir-search__check {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--l974-text);
	cursor: pointer;
}

.eqdir-search__check input {
	width: auto;
	min-height: 0;
	margin: 0;
	accent-color: var(--l974-cta);
}

.eqdir-search__submit {
	display: flex;
	align-items: flex-end;
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 3. Buttons
 * ---------------------------------------------------------------------- */
.eqdir-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.7rem 1.5rem;
	font: inherit;
	font-weight: 700;
	/* Keep the label on one line: a narrow container must shrink the siblings,
	 * never break the button text character-by-character (e.g. "Libérer"). */
	white-space: nowrap;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--l974-radius-pill);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Compact variant for dense action rows (photo cards, inline controls). */
.eqdir-btn--sm {
	min-height: 2rem;
	padding: 0.3rem 0.75rem;
	font-size: 0.8125rem;
}

.eqdir-btn--cta {
	color: var(--l974-on-cta);
	background: var(--l974-cta);
	border-color: var(--l974-cta);
}

.eqdir-btn--cta:hover,
.eqdir-btn--cta:focus {
	color: var(--l974-on-cta);
	background: var(--l974-cta-hover);
	border-color: var(--l974-cta-hover);
}

/* A CTA rendered as a link (e.g. "View the listing" in the fiche modal) must keep
 * its on-CTA text colour: the generic `.eqdir a { color: var(--l974-link) }` rule
 * (specificity 0,1,1) otherwise wins over `.eqdir-btn--cta` (0,1,0) and paints the
 * label in the link colour — green/teal text on the red-orange button, unreadable. */
.eqdir a.eqdir-btn--cta {
	color: var(--l974-on-cta);
}

/* -------------------------------------------------------------------------
 * 4. Results header, count, classement, mobile toggle
 * ---------------------------------------------------------------------- */
.eqdir-results__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1.25rem;
}

.eqdir-results__count {
	margin: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.125rem;
	color: var(--l974-ink);
}

.eqdir-results__classement {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted);
}

.eqdir-results__classement a {
	color: var(--l974-link);
}

.eqdir-toggle {
	display: inline-flex;
	margin-left: auto;
	padding: 0.2rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
}

.eqdir-toggle__btn {
	min-height: 2.25rem;
	padding: 0.4rem 1rem;
	font: inherit;
	font-weight: 600;
	color: var(--l974-text-muted);
	background: transparent;
	border: 0;
	border-radius: var(--l974-radius-pill);
	cursor: pointer;
}

.eqdir-toggle__btn.is-active {
	color: var(--l974-on-primary);
	background: var(--l974-primary);
}

@media (min-width: 900px) and (min-height: 481px) {
	/* The List/Map toggle stays visible on desktop in EVERY disposition: "Map" opens the
	 * full-screen map, "List" returns to the configured layout (side-by-side column, banner,
	 * or list-only). This brings the full-screen map — previously reachable only in the
	 * "Full screen" disposition — to "Side by side" and "Banner" too. */
	.eqdir-toggle {
		display: inline-flex;
	}
}

/* -------------------------------------------------------------------------
 * 5. Results layout: two columns + sticky map on desktop
 * ---------------------------------------------------------------------- */
.eqdir-results-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.eqdir-results-col {
	min-width: 0;
}

.eqdir-map-col {
	display: none;
}

@media (min-width: 900px) and (min-height: 481px) {
	/* Disposition "cote": list + map column side by side, ratio-driven
	 * (--eqdir-col-results / --eqdir-col-map are set inline from the admin ratio). */
	.eqdir-disp-d-cote .eqdir-results-layout--map {
		grid-template-columns: var( --eqdir-col-results, 2fr ) minmax( 320px, var( --eqdir-col-map, 1fr ) );
		align-items: start;
	}

	.eqdir-disp-d-cote .eqdir-results-layout--map .eqdir-map-col {
		display: block;
		position: sticky;
		/* Clear the (logo-sized) sticky header so the map — and its zoom buttons — never slide
		 * under it; --eqdir-header-h is set by JS to the sticky header's occupied height (0 if
		 * the header is not sticky). Height is 10% shorter than the available viewport. */
		top: calc(var(--eqdir-header-h, 0px) + 1rem);
		height: calc((100vh - var(--eqdir-header-h, 0px) - 2rem) * 0.9);
	}

	/* Disposition "bandeau": a wide map banner above a full-width list. */
	.eqdir-disp-d-bandeau .eqdir-results-layout--map {
		display: flex;
		flex-direction: column;
	}

	.eqdir-disp-d-bandeau .eqdir-results-layout--map .eqdir-map-col {
		display: block;
		order: -1;
		/* Sticky banner: the map pins just below the (logo-sized) sticky header and the
		 * results scroll UNDERNEATH it, so the map never scrolls out of sight. --eqdir-header-h
		 * is set by JS to the sticky header's occupied height (0 when the header is not sticky). */
		position: sticky;
		/* Pin the banner flush under the sticky header (no gap): a gap would leave an uncovered
		 * strip above the map where the list cards scrolling underneath reappear. */
		top: var(--eqdir-header-h, 0px);
		/* NB: no align-self here — in this column flex the default `stretch` is what gives the
		 * banner its full width; `align-self:start` would shrink it to content width (0 → blank map). */
		z-index: 2;
		height: 420px;
		margin-bottom: 1.5rem;
	}

	/* Disposition "plein": list only; the map opens full-bleed via the toggle. */
	.eqdir-disp-d-plein .eqdir-results-layout--map {
		display: block;
	}

	.eqdir-disp-d-plein .eqdir-map-col {
		display: none;
	}

	/* Full-screen map overlay — reachable in EVERY disposition through the List/Map toggle
	 * ("Map" opens it, "List" returns to the configured layout). Scoped with the layout class
	 * so it overrides the per-disposition inline map rules above (equal specificity, later in
	 * source) when the wrapper gains .eqdir-show-map. */
	.eqdir-show-map .eqdir-results-layout--map .eqdir-map-col {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		height: 100vh;
		background: var(--l974-surface);
	}

	.eqdir-show-map .eqdir-results-col--list {
		display: none;
	}

	.eqdir-show-map .eqdir-toggle {
		position: fixed;
		z-index: 1001;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Mobile disposition (admin: "Results map layout (mobile navigation)"). 'plein' is the default:
 * the inline map stays hidden and the map opens full-screen via the List/Map toggle (historical
 * mobile behaviour). 'bandeau' and 'cote' instead show the map INLINE as a banner above the list
 * (there is no room for a true side column at phone width, so 'cote' stacks like 'bandeau'). Gated
 * with :not(.eqdir-show-map) so switching to the map view still uses the full-screen overlay below. */
@media (max-width: 899px), (orientation: landscape) and (max-height: 480px) {
	/* 'bandeau': map as a full-width banner stacked above the list. */
	.eqdir-disp-m-bandeau:not(.eqdir-show-map) .eqdir-results-layout--map {
		display: flex;
		flex-direction: column;
	}

	.eqdir-disp-m-bandeau:not(.eqdir-show-map) .eqdir-results-layout--map .eqdir-map-col {
		display: block;
		order: -1;
		position: sticky;
		top: calc(var(--eqdir-header-h, 0px));
		z-index: 2;
		height: 300px;
		margin-bottom: 1rem;
	}

	/* 'cote': a genuine side-by-side list + map column on mobile too, driven by the mobile ratio
	 * (admin "List / map ratio (mobile navigation)"). Narrow, but it is the operator's choice. */
	.eqdir-disp-m-cote:not(.eqdir-show-map) .eqdir-results-layout--map {
		display: grid;
		grid-template-columns: var( --eqdir-col-results-m, 1fr ) var( --eqdir-col-map-m, 1fr );
		gap: 0.75rem;
		align-items: start;
	}

	.eqdir-disp-m-cote:not(.eqdir-show-map) .eqdir-results-layout--map .eqdir-map-col {
		display: block;
		position: sticky;
		top: calc(var(--eqdir-header-h, 0px) + 0.5rem);
		height: calc((100vh - var(--eqdir-header-h, 0px)) * 0.6);
		min-height: 220px;
	}
}

/* Mobile: the map is an overlay, shown when JS flags the view. */
@media (max-width: 899px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-show-map .eqdir-map-col,
	.eqdir-results-layout[data-eqdir-view="map"] .eqdir-map-col {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1000;
		height: 100vh;
		background: var(--l974-surface);
	}

	.eqdir-show-map .eqdir-results-col,
	.eqdir-results-layout[data-eqdir-view="map"] .eqdir-results-col--list {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 6. Bloc sections and empty state
 * ---------------------------------------------------------------------- */
.eqdir-bloc {
	margin-bottom: 2rem;
}

.eqdir-bloc__title {
	margin: 0 0 1rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.375rem;
	color: var(--l974-ink);
}

.eqdir-empty {
	padding: 2rem 1rem;
	text-align: center;
	background: var(--l974-surface-alt);
	border: 1px dashed var(--l974-border);
	border-radius: var(--l974-radius-md);
}

/* Nearest-results fallback notice (shown above the grid when the searched place
 * had no listing and the closest ones island-wide are shown instead). */
.eqdir-results__fallback {
	margin: 0 0 1rem;
	padding: 0.65rem 0.9rem;
	font-size: 0.9375rem;
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-empty__title {
	margin: 0 0 0.5rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.125rem;
	color: var(--l974-ink);
}

.eqdir-empty__hint {
	margin: 0;
	color: var(--l974-text-muted);
}

/* -------------------------------------------------------------------------
 * 7. Card grid and card
 * ---------------------------------------------------------------------- */
.eqdir-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 600px) {
	.eqdir-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.eqdir-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.eqdir-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}

/* JS adds this when the matching map marker is hovered. */
.eqdir-card--hover {
	outline: 2px solid var(--l974-accent);
	outline-offset: 2px;
}

.eqdir-card__media {
	position: relative;
	display: block;
	margin: 0;
	background: var(--l974-surface-alt);
	text-decoration: none;
}

.eqdir-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eqdir-card__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--l974-surface-alt);
}

/* Charter image slots ([equarent_directory_image] + listing fallback). */
.eqdir-slot-image {
	max-width: 100%;
	height: auto;
}

.eqdir-card__fallback {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eqdir-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 1 1 auto;
	padding: 0.9rem 1rem 1.1rem;
}

.eqdir-card__title {
	margin: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	line-height: 1.25;
	color: var(--l974-ink);
}

.eqdir-card__title a {
	color: inherit;
	text-decoration: none;
}

.eqdir-card__title a:hover {
	text-decoration: underline;
}

.eqdir-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted);
}

.eqdir-card__capacity {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-card__price {
	margin: 0;
	margin-top: auto;
	padding-top: 0.4rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	color: var(--l974-ink);
}

.eqdir-card__verify {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--l974-cta);
}

.eqdir-card__reg {
	margin: 0;
	font-size: 0.75rem;
	color: var(--l974-text-muted);
}

/* -------------------------------------------------------------------------
 * 8. Badges
 * ---------------------------------------------------------------------- */
.eqdir-badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	border-radius: var(--l974-radius-pill);
}

.eqdir-badge--direct {
	color: var(--l974-on-cta);
	background: var(--l974-cta);
}

/* Inside a card media, the badge floats over the photo. */
.eqdir-card__media .eqdir-badge {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * 9. Map, Leaflet, clusters, hover minicard popup
 * ---------------------------------------------------------------------- */
.eqdir-map {
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

.eqdir .leaflet-container {
	background: var(--l974-surface-alt);
	font-family: var(--l974-font-body);
}

.eqdir-marker {
	display: block;
	box-sizing: border-box;
	width: 1.5rem;
	height: 1.5rem;
	border: 2px solid var(--l974-on-primary);
	border-radius: var(--l974-radius-pill);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.eqdir-marker--direct {
	background: var(--l974-cta);
}

.eqdir-marker--autres {
	background: var(--l974-secondary);
}

.eqdir .marker-cluster {
	background: transparent;
}

.eqdir .marker-cluster div {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	font-family: var(--l974-font-body);
	font-weight: 700;
	color: var(--l974-on-primary);
	background: var(--l974-primary);
	border-radius: var(--l974-radius-pill);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.eqdir .leaflet-popup-content-wrapper {
	padding: 0;
	background: var(--l974-surface);
	color: var(--l974-text);
	border-radius: var(--l974-radius-md);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.eqdir .leaflet-popup-content {
	margin: 0;
}

.eqdir .leaflet-popup-tip {
	background: var(--l974-surface);
}

.eqdir-minicard {
	width: 200px;
	max-width: 100%;
}

.eqdir-minicard__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eqdir-minicard__body {
	padding: 0.5rem 0.7rem 0.7rem;
}

.eqdir-minicard__title {
	margin: 0 0 0.2rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 0.9375rem;
	color: var(--l974-ink);
}

.eqdir-minicard__price {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--l974-ink);
}

/* Clickable hover-chip: the whole minicard opens the fiche modal. */
.eqdir-minicard--clickable {
	cursor: pointer;
}

.eqdir-minicard__title,
.eqdir-minicard__price,
.eqdir-minicard__cta {
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

.eqdir-minicard__cta {
	display: block;
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	padding-bottom: 0.4rem;
	font-size: 0.8125rem;
	font-weight: 700;
	text-align: center;
	color: var(--l974-on-cta);
	background: var(--l974-cta);
}

.eqdir-minicard--clickable:hover .eqdir-minicard__cta,
.eqdir-minicard--clickable:focus .eqdir-minicard__cta {
	background: var(--l974-cta-hover);
}

.eqdir-minicard--clickable:focus-visible {
	outline: 2px solid var(--l974-link);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 10. Fiche detail (standalone page + modal content)
 * ---------------------------------------------------------------------- */
.eqdir-fiche,
.eqdir-fiche-page {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
}

.eqdir-fiche-page__back {
	margin: 0 0 1rem;
	font-size: 0.9375rem;
}

.eqdir-fiche-page__back a {
	color: var(--l974-link);
	text-decoration: none;
}

.eqdir-fiche-page__back a:hover {
	text-decoration: underline;
}

.eqdir-fiche__header {
	margin: 1.25rem 0 1.5rem;
}

.eqdir-fiche__title {
	margin: 0 0 0.35rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--l974-ink);
}

.eqdir-fiche__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.75rem;
	margin: 0 0 0.35rem;
	color: var(--l974-text-muted);
}

.eqdir-fiche__reg {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-fiche section,
.eqdir-fiche__description {
	margin: 1.75rem 0;
}

.eqdir-fiche__h2 {
	margin: 0 0 0.75rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.25rem;
	color: var(--l974-ink);
}

.eqdir-fiche__tagline {
	font-size: 1.125rem;
	color: var(--l974-text);
}

.eqdir-fiche__short,
.eqdir-fiche__long {
	color: var(--l974-text);
}

.eqdir-caplist {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--l974-text);
}

.eqdir-fiche__base-price {
	margin: 0 0 0.35rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.375rem;
	color: var(--l974-ink);
}

.eqdir-fiche__min-nights {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--l974-text-muted);
}

/* -------------------------------------------------------------------------
 * 11. Pricing table and fees
 * ---------------------------------------------------------------------- */
.eqdir-fiche__periods {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.eqdir-fiche__periods th,
.eqdir-fiche__periods td {
	padding: 0.55rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-fiche__periods th {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
}

.eqdir-fiche__fees {
	margin: 0.9rem 0 0;
	padding-left: 1.2rem;
	color: var(--l974-text);
}

/* -------------------------------------------------------------------------
 * 12. Availability, verify note, report
 * ---------------------------------------------------------------------- */
.eqdir-fiche__verify {
	font-weight: 600;
	color: var(--l974-cta);
}

.eqdir-fiche__indispos {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
	color: var(--l974-text);
}

.eqdir-fiche__cta {
	margin: 1.75rem 0 1rem;
}

.eqdir-fiche__cta .eqdir-btn {
	padding: 0.8rem 1.75rem;
}

.eqdir-fiche__report {
	margin: 1rem 0 0;
	font-size: 0.875rem;
}

.eqdir-report-trigger {
	color: var(--l974-text-muted);
	text-decoration: underline;
}

.eqdir-report-container {
	margin-top: 1rem;
	padding: 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

/* -------------------------------------------------------------------------
 * 13. Carousel
 * ---------------------------------------------------------------------- */
.eqdir-carousel {
	position: relative;
	margin: 1rem 0 1.5rem;
	background: var(--l974-surface-alt);
	border-radius: var(--l974-radius-lg);
	overflow: hidden;
}

.eqdir-carousel__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
}

.eqdir-carousel__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: center;
}

.eqdir-carousel__slide[hidden] {
	display: none;
}

.eqdir-carousel__slide img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Lightweight carousel arrows: large WHITE chevrons with a neutral-grey outline, no white pill
 * fill. Lighter over the photo and far less intrusive on small phone screens. */
.eqdir-carousel__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 3.25rem;
	padding: 0;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	-webkit-text-stroke: 1.5px #8a8f98; /* neutral-grey outline around the white chevron */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); /* legibility over bright photos */
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.eqdir-carousel__nav:hover,
.eqdir-carousel__nav:focus {
	background: transparent;
	color: #fff;
	-webkit-text-stroke-color: #5f6368;
}

.eqdir-carousel__nav--prev {
	left: 0.75rem;
}

.eqdir-carousel__nav--next {
	right: 0.75rem;
}

.eqdir-carousel__counter {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.2rem 0.65rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--l974-on-primary);
	background: var(--l974-primary);
	border-radius: var(--l974-radius-pill);
}

/* -------------------------------------------------------------------------
 * 14. Amenities — picto + label grid inside a collapsed accordion. The pictos
 *     are the SAME Lucide icons as EquaRent (copied into assets/img/amenities/),
 *     rendered as <img>. No more text pills.
 * ---------------------------------------------------------------------- */
.eqdir-amenities-acc {
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface);
	overflow: hidden;
}

.eqdir-amenities-acc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.85rem 1rem;
	cursor: pointer;
	list-style: none;
	background: var(--l974-surface-alt);
}

.eqdir-amenities-acc__summary::-webkit-details-marker {
	display: none;
}

.eqdir-amenities-acc__summary .eqdir-fiche__h2 {
	margin: 0;
}

/* Chevron (border triangle), rotates when the accordion is open. */
.eqdir-amenities-acc__summary::after {
	content: '';
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--l974-text-muted);
	border-bottom: 2px solid var(--l974-text-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.eqdir-amenities-acc[open] .eqdir-amenities-acc__summary::after {
	transform: rotate(-135deg);
}

/* ----------------------------------------------------------------------
 * Fiche map (the rental's location inside the listing pop-up + on the
 * standalone fiche page). Two admin modes (desktop / mobile navigation) x
 * three options (afficher / proposer / aucune). Both the "plain" (always
 * shown) and the accordion (offered) variants are rendered; CSS reveals the
 * one matching the current breakpoint. The breakpoints mirror the header /
 * footer ones so a landscape phone counts as mobile here too.
 * ---------------------------------------------------------------------- */
.eqdir-fiche__map-plain,
.eqdir-fiche__map-acc {
	display: none;
}

@media (min-width: 900px) and (min-height: 481px) {
	.eqdir-fmap-d-afficher .eqdir-fiche__map-plain {
		display: block;
	}
	.eqdir-fmap-d-proposer .eqdir-fiche__map-acc {
		display: block;
	}
}

@media (max-width: 899.98px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-fmap-m-afficher .eqdir-fiche__map-plain {
		display: block;
	}
	.eqdir-fmap-m-proposer .eqdir-fiche__map-acc {
		display: block;
	}
}

.eqdir-fiche__map {
	margin-top: 1rem;
}

.eqdir-fiche__map .eqdir-fiche__h2 {
	margin: 0;
}

.eqdir-fiche-map {
	position: relative;
	width: 100%;
	height: 260px;
	margin-top: 0.75rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

/* The accordion frames its own body, so the inner map drops its top gap/frame. */
.eqdir-fiche__map-acc .eqdir-fiche-map {
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* Approximate precision: a soft tinted circle instead of a false-precision pin. */
.eqdir-fiche-map__circle {
	stroke: var(--l974-cta);
	fill: var(--l974-cta);
	fill-opacity: 0.18;
}

/* Discreet "Open in Maps / Plan" button embedded top-right of the map (the
 * zoom control is top-left, attribution bottom-right); above the tiles but
 * below the Leaflet controls (z-index 1000). */
.eqdir-fiche-map__ext {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 500;
	display: inline-flex;
	align-items: center;
	padding: 0.4em 0.7em;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	color: var(--l974-ink, #0b1b2b);
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	text-decoration: none;
}

.eqdir-fiche-map__ext:hover,
.eqdir-fiche-map__ext:focus {
	background: #fff;
}

/* Built-in cookie-consent bar (marketing tracking; shown only in "required" mode with no CMP). */
.eqdir-consent-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99998;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1rem;
	background: var(--l974-surface, #fff);
	color: var(--l974-text, #0b1b2b);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
	font-size: 0.9rem;
}

.eqdir-consent-bar__text {
	flex: 1 1 260px;
	max-width: 60ch;
}

.eqdir-consent-bar__btn {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid var(--l974-border, #ccc);
	border-radius: var(--l974-radius-pill, 999px);
	padding: 0.5em 1.1em;
	font-weight: 600;
	background: transparent;
	color: inherit;
}

.eqdir-consent-bar__btn.is-accept {
	border-color: transparent;
	background: var(--l974-cta, #0a6cff);
	color: #fff;
}

/* Multi-column grid (3–4 columns by available width); each cell is a grid cell,
 * so a label that wraps never pushes the other columns out of alignment. */
.eqdir-amenities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
	gap: 0.55rem 1.25rem;
	margin: 0;
	padding: 1rem;
	list-style: none;
}

.eqdir-amenity {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	font-size: 0.875rem;
	color: var(--l974-text);
}

.eqdir-amenity__icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	opacity: 0.85;
}

.eqdir-amenity__label {
	min-width: 0;
}

/* -------------------------------------------------------------------------
 * 15. Secteur editorial page
 * ---------------------------------------------------------------------- */
.eqdir-secteur__header {
	margin-bottom: 2rem;
}

.eqdir-secteur__title {
	margin: 0 0 1rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 2rem;
	line-height: 1.15;
	color: var(--l974-ink);
}

.eqdir-secteur__photo {
	margin: 0 0 1.25rem;
	border-radius: var(--l974-radius-lg);
	overflow: hidden;
}

.eqdir-secteur__photo img {
	width: 100%;
	object-fit: cover;
}

.eqdir-secteur__content {
	color: var(--l974-text);
}

.eqdir-secteur__content a {
	color: var(--l974-link);
}

/* -------------------------------------------------------------------------
 * 16. Modal overlay (JS-driven)
 * ---------------------------------------------------------------------- */
.eqdir-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.5);
}

.eqdir-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: 90vh;
	/* The bar is fixed and the content scrolls; hidden keeps both clipped to the rounded corners. */
	overflow: hidden;
	color: var(--l974-text);
	background: var(--l974-surface);
	border-radius: var(--l974-radius-lg);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

/* Fixed title bar: holds the close button (and, for a fiche, the listing name). Never scrolls. */
.eqdir-modal__bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 0.75rem 0.65rem 1.25rem;
	background: var(--l974-surface);
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-modal__bar-title {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.25;
	color: var(--l974-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Only the content scrolls; its 1.5rem padding reproduces the former modal gutter so the content
 * renders exactly as before (carousel flush with the top, title under it, etc.). */
.eqdir-modal__content {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 1.5rem;
}

.eqdir-modal__close {
	flex: 0 0 auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
	cursor: pointer;
}

.eqdir-modal__close:hover {
	background: var(--l974-border);
}

/* The fiche carousel sits flush with the content's top padding. */
.eqdir-modal .eqdir-carousel {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * 17. Focus visibility (WCAG 2.1 AA)
 * ---------------------------------------------------------------------- */
.eqdir a:focus-visible,
.eqdir button:focus-visible,
.eqdir input:focus-visible,
.eqdir select:focus-visible,
.eqdir [tabindex]:focus-visible {
	outline: 3px solid var(--l974-link);
	outline-offset: 2px;
	border-radius: var(--l974-radius-sm);
}

.eqdir-btn:focus-visible,
.eqdir-toggle__btn:focus-visible,
.eqdir-carousel__nav:focus-visible,
.eqdir-modal__close:focus-visible {
	outline: 3px solid var(--l974-cta);
	outline-offset: 2px;
}

/* Avoid clipping the focus ring on the scroll container. */
.eqdir-fiche__content:focus-visible,
#eqdir-fiche-content:focus-visible {
	outline: none;
}

/* -------------------------------------------------------------------------
 * 18. Reduced motion
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.eqdir *,
	.eqdir *::before,
	.eqdir *::after {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.eqdir-card:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Review fixes (Lot 3): modal scroll-lock, mobile toggle above the map
   overlay, and the report form. Colours stay on charter tokens only.
   -------------------------------------------------------------------------- */
.eqdir-modal-open {
	overflow: hidden;
}

@media (max-width: 899px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-results.eqdir-show-map .eqdir-toggle,
	.eqdir-show-map .eqdir-toggle {
		position: fixed;
		z-index: 1001;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		background: var(--l974-surface);
		border: 1px solid var(--l974-border);
		border-radius: var(--l974-radius-pill);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	}
}

.eqdir-report-container {
	margin-top: 12px;
	padding: 16px;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}
.eqdir-report-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
	color: var(--l974-text);
}
.eqdir-report-form select,
.eqdir-report-form textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
	background: var(--l974-surface);
	color: var(--l974-text);
	font-family: var(--l974-font-body);
}
.eqdir-report-feedback {
	color: var(--l974-text-muted);
	margin-top: 8px;
}

/* ==========================================================================
 * Lot 4: advertiser accounts front (auth, espace, fiche wizard, photos).
 *
 * Mobile-first. Colours, backgrounds, borders, brand and fonts come ONLY
 * from charter tokens (var(--l974-*)); the lone exceptions remain subtle
 * elevation shadows expressed as rgba(0,0,0,..). No horizontal overflow at
 * 360px. WCAG 2.1 AA focus visibility is inherited from section 17.
 * ======================================================================== */

/* -------------------------------------------------------------------------
 * 19. Field stacks (label + control), fieldsets, help and errors
 * ---------------------------------------------------------------------- */
.eqdir-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1rem;
}

.eqdir-field > label,
.eqdir-field > legend {
	padding: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-field__req {
	color: var(--l974-cta);
}

.eqdir-field input,
.eqdir-field select,
.eqdir-field textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-field textarea {
	min-height: 6rem;
	resize: vertical;
}

/* Compact multi-column layout for short related fields (e.g. the "Features" characteristics —
 * guests, bedrooms, beds, bathrooms, surface) so they don't each span the full page width. */
.eqdir-field-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 0.75rem 1rem;
	margin: 0 0 1rem;
}

.eqdir-field-grid > .eqdir-field {
	margin: 0;
}

.eqdir-field input:focus,
.eqdir-field select:focus,
.eqdir-field textarea:focus {
	outline: 2px solid var(--l974-link);
	outline-offset: 1px;
	border-color: var(--l974-link);
}

.eqdir-field__hint {
	display: block;
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

/* Weekend-days picker: a wrapping row of day checkboxes, set once per listing. */
.eqdir-weekend-days {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.eqdir-weekend-days > legend {
	padding: 0;
	font-weight: 600;
}

.eqdir-weekend-days__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	margin-top: 0.4rem;
}

.eqdir-weekend-days__day {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
}

.eqdir-weekend-days__day input {
	margin: 0;
}

.eqdir-field__error {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--l974-cta);
}

.eqdir-field input[aria-invalid="true"],
.eqdir-field select[aria-invalid="true"],
.eqdir-field textarea[aria-invalid="true"] {
	border-color: var(--l974-cta);
}

/* Inline checkbox / radio rows (consents, choices). */
.eqdir-check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	color: var(--l974-text);
}

.eqdir-check input {
	width: auto;
	min-height: 0;
	margin: 0.2rem 0 0;
	accent-color: var(--l974-cta);
}

.eqdir-fieldset {
	margin: 0 0 1.25rem;
	padding: 1rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface);
}

.eqdir-fieldset > legend {
	padding: 0 0.4rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
}

/* Honeypot: must be reachable in the DOM but hidden from humans. Never
 * display:none, which some bots skip; keep it off-canvas instead. */
.eqdir-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 20. Auth cards (login / register / lost + reset password / 2FA)
 * ---------------------------------------------------------------------- */
.eqdir-auth {
	width: 100%;
	max-width: 32rem;
	margin: 1.5rem auto;
	padding: 1.5rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-lg);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

.eqdir-auth__title {
	margin: 0 0 0.35rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.5rem;
	color: var(--l974-ink);
}

.eqdir-auth__lede {
	margin: 0 0 1.25rem;
	color: var(--l974-text-muted);
}

.eqdir-auth .eqdir-btn {
	width: 100%;
}

.eqdir-auth__alt {
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	font-size: 0.9375rem;
	text-align: center;
	color: var(--l974-text-muted);
	border-top: 1px solid var(--l974-border);
}

.eqdir-auth__alt a {
	color: var(--l974-link);
}

/* Registration identity-type toggle. The JS mirrors the chosen radio onto
 * form[data-eqdir-type]; CSS then hides the group for the other type. Both
 * groups render by default so the form degrades without JS. */
.eqdir-type-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.eqdir-type-choice legend {
	width: 100%;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-type-option {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex: 1 1 10rem;
	padding: 0.7rem 0.9rem;
	font-weight: 600;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	cursor: pointer;
}

.eqdir-type-option input {
	accent-color: var(--l974-cta);
}

/* Registration radios / consent checkboxes: align with the real markup
 * classes and stop the generic .eqdir-field input rule from stretching them. */
.eqdir-register__type {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}
.eqdir-register__radio,
.eqdir-register__check {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	cursor: pointer;
}
.eqdir-register__radio input,
.eqdir-register__check input,
.eqdir-field--check input {
	width: auto;
	min-height: 0;
	margin: 0.15rem 0 0;
	accent-color: var(--l974-cta);
}

.eqdir-auth form[data-eqdir-type="pro"] .eqdir-type-part,
.eqdir-auth form[data-eqdir-type="particulier"] .eqdir-type-pro {
	display: none;
}

/* Registration: a roomier, two-column layout so the long sign-up form is not an
 * endless narrow column. Scoped to .eqdir-auth--register so the login card stays
 * compact. Each field group becomes a 2-column grid; "wide" fields (company name,
 * street, address line 2, e-mail) and the group legend span the full row, while the
 * short fields pair up two-per-row. It collapses to a single column on phones. */
.eqdir-auth--register {
	max-width: 52rem;
}

.eqdir-auth--register .eqdir-field-group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	column-gap: 1.5rem;
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.25rem 1.35rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface-alt);
}

.eqdir-auth--register .eqdir-field-group > legend {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	margin: 0 0 0.75rem;
	padding: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.05rem;
	color: var(--l974-ink);
}

.eqdir-auth--register .eqdir-field-group .eqdir-field {
	margin: 0 0 1rem;
}

.eqdir-auth--register .eqdir-field--wide {
	grid-column: 1 / -1;
}

/* Consents always stay a single stacked column (never two-up). */
.eqdir-auth--register .eqdir-register__legal {
	display: block;
}

.eqdir-auth--register .eqdir-register__legal .eqdir-register__check {
	margin: 0 0 0.75rem;
}

/* A comfortable submit button rather than one stretched across the wide card. */
.eqdir-auth--register .eqdir-field--submit {
	margin-top: 0.5rem;
	text-align: center;
}

.eqdir-auth--register .eqdir-field--submit .eqdir-btn {
	width: auto;
	min-width: 18rem;
}

@media (max-width: 40rem) {
	.eqdir-auth--register .eqdir-field-group {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.eqdir-auth--register .eqdir-field--submit .eqdir-btn {
		width: 100%;
		min-width: 0;
	}
}

/* -------------------------------------------------------------------------
 * 21. Notices (success / error / info)
 * ---------------------------------------------------------------------- */
.eqdir-notice {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--l974-border);
	border-left-width: 4px;
	border-radius: var(--l974-radius-sm);
	background: var(--l974-surface-alt);
	color: var(--l974-text);
}

.eqdir-notice p {
	margin: 0;
}

.eqdir-notice--success {
	border-left-color: var(--l974-cta);
}

.eqdir-notice--error {
	border-left-color: var(--l974-accent);
}

.eqdir-notice--info {
	border-left-color: var(--l974-primary);
}

/* -------------------------------------------------------------------------
 * 22. Espace: account area layout with tab navigation
 * ---------------------------------------------------------------------- */
.eqdir-espace {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.eqdir-espace__header {
	margin: 0 0 0.5rem;
}

.eqdir-espace__title {
	margin: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.625rem;
	color: var(--l974-ink);
}

.eqdir-espace__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0.3rem;
	list-style: none;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-espace__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--l974-text-muted);
	border-radius: var(--l974-radius-sm);
}

.eqdir-espace__nav a:hover {
	color: var(--l974-text);
	background: var(--l974-surface);
}

.eqdir-espace__nav a[aria-current="page"] {
	color: var(--l974-on-primary);
	background: var(--l974-primary);
}

.eqdir-espace__body {
	min-width: 0;
}

@media (min-width: 782px) and (min-height: 481px) {
	.eqdir-espace--sidebar {
		grid-template-columns: 14rem 1fr;
		align-items: start;
	}

	.eqdir-espace--sidebar .eqdir-espace__nav {
		flex-direction: column;
	}
}

/* Account section card and fiche list rows reuse the surface look. */
.eqdir-panel {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-panel__title {
	margin: 0 0 1rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.25rem;
	color: var(--l974-ink);
}

.eqdir-fiche-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-fiche-row__name {
	flex: 1 1 12rem;
	min-width: 0;
	margin: 0;
	font-weight: 600;
	color: var(--l974-ink);
}

.eqdir-status {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
}

/* -------------------------------------------------------------------------
 * 23. Wizard: stepped fieldsets with indicator and nav
 * ---------------------------------------------------------------------- */
.eqdir-wizard {
	margin: 0;
}

.eqdir-wizard__indicator {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	counter-reset: eqdir-step;
}

.eqdir-wizard__indicator li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--l974-text-muted);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
	/* The step badges become clickable (JS handles the jump); hint it. */
	cursor: pointer;
}

.eqdir-wizard__indicator li:focus-visible {
	outline: 3px solid var(--l974-link);
	outline-offset: 2px;
}

.eqdir-wizard__indicator li::before {
	counter-increment: eqdir-step;
	content: counter(eqdir-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	font-size: 0.75rem;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
}

.eqdir-wizard__indicator li[aria-current="step"] {
	color: var(--l974-on-primary);
	background: var(--l974-primary);
	border-color: var(--l974-primary);
}

.eqdir-wizard__indicator li[aria-current="step"]::before {
	color: var(--l974-primary);
	background: var(--l974-on-primary);
	border-color: var(--l974-on-primary);
}

.eqdir-wizard__step {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
}

.eqdir-wizard__step[hidden] {
	display: none;
}

.eqdir-wizard__step > legend {
	margin: 0 0 1rem;
	padding: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.25rem;
	color: var(--l974-ink);
}

.eqdir-wizard__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--l974-border);
}

.eqdir-wizard__nav .eqdir-btn {
	flex: 1 1 auto;
}

@media (min-width: 600px) {
	.eqdir-wizard__nav .eqdir-btn {
		flex: 0 0 auto;
	}

	.eqdir-wizard__nav--next {
		margin-left: auto;
	}
}

/* Secondary (ghost) button for Précédent and destructive-lite actions. */
.eqdir-btn--ghost {
	color: var(--l974-text);
	background: var(--l974-surface);
	border-color: var(--l974-border);
}

.eqdir-btn--ghost:hover,
.eqdir-btn--ghost:focus {
	background: var(--l974-surface-alt);
	border-color: var(--l974-text-muted);
}

/* -------------------------------------------------------------------------
 * 24. Geocode suggestions and map picker (wizard step 2)
 * ---------------------------------------------------------------------- */
.eqdir-geocode-wrap {
	position: relative;
}

.eqdir-geocode-suggest {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin: 0.2rem 0 0;
	padding: 0.25rem;
	list-style: none;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
	max-height: 16rem;
	overflow-y: auto;
}

.eqdir-geocode-suggest[hidden] {
	display: none;
}

.eqdir-geocode-suggest li {
	margin: 0;
}

.eqdir-geocode-suggest button {
	display: block;
	width: 100%;
	padding: 0.55rem 0.7rem;
	font: inherit;
	text-align: left;
	color: var(--l974-text);
	background: transparent;
	border: 0;
	border-radius: var(--l974-radius-sm);
	cursor: pointer;
}

.eqdir-geocode-suggest button:hover,
.eqdir-geocode-suggest button:focus {
	background: var(--l974-surface-alt);
}

.eqdir-map-pick {
	width: 100%;
	height: 20rem;
	margin: 0.75rem 0;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

.eqdir-map-pick .leaflet-container {
	background: var(--l974-surface-alt);
	font-family: var(--l974-font-body);
}

/* -------------------------------------------------------------------------
 * 25. Repeatable tarif periods
 * ---------------------------------------------------------------------- */
.eqdir-periods {
	margin: 0 0 1rem;
}

.eqdir-periods__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.75rem;
	margin: 0 0 0.9rem;
	padding: 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

@media (min-width: 600px) {
	.eqdir-periods__row {
		grid-template-columns: repeat(2, 1fr);
		align-items: end;
	}
}

.eqdir-periods__row .eqdir-field {
	margin: 0;
}

.eqdir-periods__remove {
	grid-column: 1 / -1;
	justify-self: start;
}

/* -------------------------------------------------------------------------
 * 26. Photos grid (upload, reorder main, alt text, delete)
 * ---------------------------------------------------------------------- */
/* Wrapper holds the upload zone above the grid (NOT a grid itself). */
.eqdir-photos {
	margin: 0 0 1.25rem;
}

/* Upload form: a dashed drop-zone-style block above the grid. */
.eqdir-photos__upload {
	margin: 0 0 1rem;
	padding: 1rem;
	background: var(--l974-surface-alt);
	border: 1px dashed var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-photos__upload .eqdir-field {
	margin: 0 0 0.5rem;
}

/* The photo grid: cards are wide enough (min ~20rem) to fit the per-photo action
 * row (Set-as-cover left / Delete right) on one line, and reflow responsively. */
.eqdir-photos__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-photos__item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

.eqdir-photos__item.is-main {
	outline: 2px solid var(--l974-cta);
	outline-offset: -2px;
}

.eqdir-photos__media {
	position: relative;
	margin: 0;
	background: var(--l974-surface-alt);
}

.eqdir-photos__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.eqdir-photos__badge {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	margin: 0;
	padding: 0.15rem 0.55rem;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--l974-on-cta);
	background: var(--l974-cta);
	border-radius: var(--l974-radius-pill);
}

.eqdir-photos__controls {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.6rem;
}

/* Alt-text row: input grows, the small Save button hugs its content. */
.eqdir-photos__action--alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.eqdir-photos__action--alt input[type="text"] {
	flex: 1 1 7rem;
	min-width: 0;
}

/* Set-as-cover pinned LEFT, Delete pinned RIGHT on every photo card. */
.eqdir-photos__btns {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.4rem;
	justify-content: space-between;
}

.eqdir-photos__btns .eqdir-photos__action {
	margin: 0;
}

/* Delete is always the last (or only) child — margin-left:auto keeps it on the
 * right even on the cover photo, where the Set-as-cover form is not rendered. */
.eqdir-photos__btns .eqdir-photos__action:last-child {
	margin-left: auto;
}

.eqdir-photos__empty,
.eqdir-photos__note {
	margin: 0.5rem 0;
	color: var(--l974-muted);
}

/* AJAX photo status line (uploading / error). */
.eqdir-photos__msg:empty {
	display: none;
}

.eqdir-photos__msg {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted, #5b6672);
}

/* -------------------------------------------------------------------------
 * 27. Accept documents / data / dangerous actions
 * ---------------------------------------------------------------------- */
.eqdir-accept {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-accept__doc {
	margin: 0 0 1rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-accept__doc:last-of-type {
	border-bottom: 0;
}

.eqdir-accept__doc-title {
	margin: 0 0 0.25rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	color: var(--l974-ink);
}

.eqdir-accept__doc-meta {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-accept__doc-text {
	max-height: 14rem;
	overflow-y: auto;
	padding: 0.75rem;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-danger {
	margin: 1.5rem 0 0;
	padding: 1.25rem;
	border: 1px solid var(--l974-accent);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface);
}

.eqdir-danger__title {
	margin: 0 0 0.5rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	color: var(--l974-ink);
}

.eqdir-btn--danger {
	color: var(--l974-on-cta);
	background: var(--l974-accent);
	border-color: var(--l974-accent);
}

.eqdir-btn--danger:hover,
.eqdir-btn--danger:focus {
	filter: brightness(0.94);
}

/* -------------------------------------------------------------------------
 * 28. Footer (EquaRent_Directory_Footer::render())
 *
 * Sits on the dark ink background, so every colour comes from charter tokens
 * that read light on ink: --l974-on-primary for text and links, --l974-ink
 * for the background. No rgba literals here.
 *
 * The admin "Appearance" option may override the background and text via the
 * inline --eqdir-footer-bg / --eqdir-footer-text custom properties; when it
 * leaves them unset they fall back to the charter footer tokens below.
 *
 * render() emits BOTH a desktop variant (columns) and a mobile variant (single
 * centred column). The mobile variant is hidden by default; at <= 782px the
 * desktop variant hides and the mobile one shows.
 * ---------------------------------------------------------------------- */
.eqdir-footer {
	margin-top: 3rem;
	background: var(--eqdir-footer-bg, var(--l974-ink));
	color: var(--eqdir-footer-text, var(--l974-on-primary));
}

.eqdir-footer__inner {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1100px);
	margin-left: auto;
	margin-right: auto;
	padding: 2.5rem 16px;
}

/* Full-width display mode (Settings → Display): the footer inner fills the width
 * like the rest of the plugin content instead of the theme content size. */
.eqdir-footer--full .eqdir-footer__inner {
	max-width: 100%;
}

@media (min-width: 782px) {
	.eqdir-footer__inner {
		padding: 3rem 24px;
	}
}

/* Variants: desktop columns vs. a single centred mobile column. */
.eqdir-footer-variant--mobile {
	display: none;
}

@media (max-width: 782px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-footer-variant--desktop {
		display: none;
	}

	.eqdir-footer-variant--mobile {
		display: block;
	}

	.eqdir-footer-variant--mobile .eqdir-footer__cols,
	.eqdir-footer-variant--mobile .eqdir-footer__col {
		display: block;
		text-align: center;
	}

	.eqdir-footer-variant--mobile .eqdir-footer__list {
		align-items: center;
	}

	.eqdir-footer-variant--mobile .eqdir-footer__col + .eqdir-footer__col {
		margin-top: 1.75rem;
	}
}

.eqdir-footer__brand {
	margin: 0 0 1.75rem;
}

.eqdir-footer__logo {
	width: auto;
	max-width: 220px;
	height: auto;
}

.eqdir-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem 2rem;
}

@media (min-width: 600px) {
	.eqdir-footer__cols {
		/* Two tracks, but never more than the number of configured columns, so a
		 * 1-column footer does not leave an empty second track. */
		grid-template-columns: repeat(min(2, var(--eqdir-footer-cols, 2)), 1fr);
	}
}

@media (min-width: 900px) {
	.eqdir-footer__cols {
		/* Track count follows the REAL configured column count (PHP emits the inline
		 * --eqdir-footer-cols, capped at 4), so 2/3/4 columns each divide the width
		 * evenly and the block stays centred instead of shifting left. */
		grid-template-columns: repeat(var(--eqdir-footer-cols, 4), 1fr);
	}
}

.eqdir-footer__col {
	min-width: 0;
}

.eqdir-footer__title {
	margin: 0 0 0.9rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	color: var(--eqdir-footer-text, var(--l974-on-primary));
}

.eqdir-footer__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-footer__list li {
	margin: 0;
}

.eqdir-footer__link {
	color: var(--eqdir-footer-text, var(--l974-on-primary));
	text-decoration: none;
}

.eqdir-footer__link:hover,
.eqdir-footer__link:focus {
	color: var(--eqdir-footer-text, var(--l974-on-primary));
	text-decoration: underline;
}

.eqdir-footer__img {
	max-width: 100%;
	height: auto;
}

.eqdir-footer__img--rounded {
	border-radius: var(--l974-radius-md);
}

.eqdir-footer__html {
	color: var(--eqdir-footer-text, var(--l974-on-primary));
	font-size: 0.9375rem;
	line-height: 1.6;
}

.eqdir-footer__html a {
	color: var(--eqdir-footer-text, var(--l974-on-primary));
	text-decoration: underline;
}

/* ==========================================================================
 * 29. V3 results: configurable layout ratio, per-group card density,
 *     featured (heart) + bonus rendering, mobile floating map button.
 *
 * The two-column results/map ratio and the per-group cards-per-row counts are
 * driven by inline custom properties set from the admin settings (templates
 * results.php / results-blocks.php); this stylesheet only consumes them, so
 * retuning the counts never touches the CSS. Colours stay on charter tokens:
 * the featured badge/mention on --l974-cta, the level-2 border on --l974-accent.
 * ======================================================================== */

/* "How are results ranked?" header link to the explanatory page. */
.eqdir-results__ranking-help {
	margin: 0;
	font-size: 0.875rem;
}

.eqdir-results__ranking-help a {
	color: var(--l974-link);
}

/* Per-group card density: group 1 (Connect) = larger/fewer, group 2 = compact.
 * Mobile-first; tablet at 600px, desktop at 900px. The counts come from the
 * inline custom properties, with safe fallbacks. Specificity is raised with the
 * base class so these always win over the generic .eqdir-grid rules above. */
.eqdir-grid.eqdir-grid--g1,
.eqdir-grid.eqdir-grid--g2 {
	grid-template-columns: repeat(var(--eqdir-cpr-m, 1), minmax(0, 1fr));
}

@media (min-width: 600px) {
	.eqdir-grid.eqdir-grid--g1 {
		grid-template-columns: repeat(var(--eqdir-cpr-t, 2), minmax(0, 1fr));
	}

	.eqdir-grid.eqdir-grid--g2 {
		grid-template-columns: repeat(var(--eqdir-cpr-t, 3), minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.eqdir-grid.eqdir-grid--g1 {
		grid-template-columns: repeat(var(--eqdir-cpr, 3), minmax(0, 1fr));
	}

	.eqdir-grid.eqdir-grid--g2 {
		grid-template-columns: repeat(var(--eqdir-cpr, 4), minmax(0, 1fr));
	}
}

/* No visible title separates the two groups; keep a little breathing room. */
.eqdir-bloc--g1 {
	margin-bottom: 1.5rem;
}

/* Featured heart badge: floats in the top-right corner of the card media
 * (the "Direct booking" badge keeps the top-left). */
.eqdir-card__fav {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: var(--l974-on-cta);
	background: var(--l974-cta);
	border-radius: var(--l974-radius-pill);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.eqdir-card__fav svg {
	width: 1.05rem;
	height: 1.05rem;
	fill: currentColor;
}

/* Level 2 = heart badge + an accentuated card border. */
.eqdir-card--featured-2 {
	border-color: var(--l974-accent);
	border-width: 2px;
}

/* Bottom-of-card mention: "Highlighted listing" (featured) or the configurable
 * bonus label. Only one shows; featured wins over bonus (handled in the PHP). */
.eqdir-card__mention {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
}

.eqdir-card__mention--featured {
	color: var(--l974-cta);
}

.eqdir-card__mention--bonus {
	color: var(--l974-text-muted);
}

/* Mobile: the map is hidden by default; the list/map toggle becomes a single
 * floating pill. In list view only "Map" shows (a floating Map button that
 * opens the full-screen map); in map view only "List" shows (to close it).
 * Reuses the existing toggle markup + JS and the full-screen overlay above. */
@media (max-width: 899px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-results__header .eqdir-toggle {
		position: fixed;
		z-index: 1001;
		bottom: 16px;
		left: 50%;
		transform: translateX(-50%);
		background: var(--l974-surface);
		border: 1px solid var(--l974-border);
		border-radius: var(--l974-radius-pill);
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	}

	.eqdir-results:not(.eqdir-show-map) .eqdir-toggle__btn[data-eqdir-view="list"] {
		display: none;
	}

	.eqdir-results.eqdir-show-map .eqdir-toggle__btn[data-eqdir-view="map"] {
		display: none;
	}

	/* The floating pill steps aside while the footer is on screen, so it never sits over the footer
	 * links — but ONLY in list view. In map view the toggle is the single "List" button that closes
	 * the full-screen map, so it must NEVER be hidden (the footer still exists in the DOM behind the
	 * map overlay, so the :not(.eqdir-show-map) guard is required). */
	.eqdir-results:not(.eqdir-show-map) .eqdir-toggle.eqdir-toggle--at-footer {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ==========================================================================
 * 30. Advertiser space (#8) — a polished, professional dashboard built from
 *     the charter tokens only. Greeting, tab pills with an active state,
 *     panel card, dashboard tiles, listing cards, the packs/credits screen
 *     (credit list, purchase table, live recap) and the documents reader.
 *     Mobile-first, 16px side gutter, no horizontal scroll.
 * ======================================================================== */

/* -- Greeting ------------------------------------------------------------- */
.eqdir-espace__greeting {
	margin: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--l974-ink);
}

/* -- Tab navigation: the menu becomes a tray of pills with an active state - */
.eqdir-espace__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-espace__tabs > li {
	margin: 0;
	padding: 0;
}

.eqdir-espace__tab {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding: 0.45rem 1rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--l974-text-muted);
	border-radius: var(--l974-radius-sm);
	transition: color 0.15s ease, background-color 0.15s ease;
}

.eqdir-espace__tab:hover,
.eqdir-espace__tab:focus {
	color: var(--l974-text);
	background: var(--l974-surface);
}

.eqdir-espace__tab.is-active,
.eqdir-espace__tab[aria-current="page"] {
	color: var(--l974-on-primary);
	background: var(--l974-primary);
}

.eqdir-espace__tab.is-active:hover,
.eqdir-espace__tab[aria-current="page"]:hover {
	color: var(--l974-on-primary);
}

/* Sidebar variant: stack the pills in the left column. */
@media (min-width: 782px) {
	.eqdir-espace--sidebar .eqdir-espace__tabs {
		flex-direction: column;
	}

	.eqdir-espace--sidebar .eqdir-espace__tab {
		width: 100%;
	}
}

/* -- Panel: the active tab's content sits on a surface card --------------- */
.eqdir-espace__panel {
	min-width: 0;
	padding: 1.25rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

@media (min-width: 600px) {
	.eqdir-espace__panel {
		padding: 1.5rem;
	}
}

/* Section heading rhythm, shared by every tab's <section>. */
.eqdir-espace__panel > section > h2,
.eqdir-espace__panel > div > h2 {
	margin: 0 0 1rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.25rem;
	color: var(--l974-ink);
}

.eqdir-espace__panel h3 {
	margin: 1.5rem 0 0.75rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1rem;
	color: var(--l974-ink);
}

.eqdir-espace__panel h4 {
	margin: 1rem 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--l974-text);
}

/* -- Dashboard ------------------------------------------------------------ */
.eqdir-dash__alerts {
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-left: 4px solid var(--l974-accent);
	border-radius: var(--l974-radius-sm);
}

.eqdir-dash__alerts ul {
	margin: 0;
	padding-left: 1.2rem;
	color: var(--l974-text);
}

.eqdir-dash__trial {
	margin: 0 0 1rem;
	color: var(--l974-text-muted);
}

.eqdir-dash__counts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
	gap: 0.75rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.eqdir-dash__counts li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.85rem 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-dash__count-label {
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-dash__count-num {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.375rem;
	line-height: 1.1;
	color: var(--l974-ink);
}

/* Dashboard tiles arranged in explicit rows of wider ("doubled") cards. EVERY row is a uniform
   4-column grid so all tiles have the SAME width (a quarter of the row) and line up in columns
   across rows — a row with fewer tiles simply leaves the trailing columns empty rather than
   stretching its tiles. The --2/--3/--4 markers all resolve to this same 4-column grid. These sit
   after the base rule so they win by source order (same specificity). */
.eqdir-dash__counts--row,
.eqdir-dash__counts--2,
.eqdir-dash__counts--3,
.eqdir-dash__counts--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.eqdir-dash__counts--row li {
	padding: 1.1rem 1.25rem;
	min-height: 5rem;
	justify-content: center;
}

/* "Views & clicks" sub-heading between a section's count tiles and its traffic tiles. */
.eqdir-dash__subtitle {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--l974-text-muted);
	text-transform: none;
}

@media (max-width: 782px) {
	.eqdir-dash__counts--row,
	.eqdir-dash__counts--2,
	.eqdir-dash__counts--3,
	.eqdir-dash__counts--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.eqdir-dash__counts--row,
	.eqdir-dash__counts--2,
	.eqdir-dash__counts--3,
	.eqdir-dash__counts--4 {
		grid-template-columns: 1fr;
	}
}

.eqdir-dash__links {
	margin: 0;
}

.eqdir-dash__links a {
	color: var(--l974-link);
}

/* -- Listings tab: fiche cards ------------------------------------------- */
.eqdir-fiches__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.eqdir-fiches__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-fiches__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	flex: 1 1 14rem;
	min-width: 0;
}

.eqdir-fiches__name {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1rem;
	color: var(--l974-ink);
}

.eqdir-fiches__status,
.eqdir-fiches__type {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
}

.eqdir-fiches__type {
	color: var(--l974-text-muted);
	font-weight: 600;
}

/* Self-serve visibility diagnostic badge in the advertiser's listing list. */
.eqdir-fiches__visible {
	display: inline-block;
	padding: 0.15rem 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: var(--l974-radius-pill, 999px);
	border: 1px solid transparent;
}

.eqdir-fiches__visible.is-on {
	color: #0a7a3d;
	background: #e4f6ec;
	border-color: #bce3cc;
}

.eqdir-fiches__visible.is-off {
	color: #8a5300;
	background: #fdf3e3;
	border-color: #f0d9ad;
}

.eqdir-fiches__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.eqdir-fiches__actions .eqdir-btn {
	min-height: 2.25rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.8125rem;
}

.eqdir-fiches__delete {
	margin: 0;
}

.eqdir-fiches__editor {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-fiches__editor > h3 {
	margin-top: 0;
}

.eqdir-fiches__create {
	margin-top: 0.5rem;
}

.eqdir-fiches__create > summary {
	display: inline-flex;
	cursor: pointer;
	list-style: none;
}

.eqdir-fiches__create > summary::-webkit-details-marker {
	display: none;
}

.eqdir-fiches__create-body {
	margin-top: 1.25rem;
	padding: 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

/* Inline "Draft saved" feedback next to the Save-as-draft button (no reload / no scroll jump). */
.eqdir-wizard__draftmsg {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}
.eqdir-wizard__draftmsg:empty {
	display: none;
}

/* -- Subscriptions & credits tab ----------------------------------------- */
.eqdir-abos__credits,
.eqdir-abos__current,
.eqdir-abos__subscribe,
.eqdir-abos__allocation {
	margin: 0 0 1.5rem;
	padding: 1.1rem 1.15rem 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-abos__credits > h3:first-child,
.eqdir-abos__current > h3:first-child,
.eqdir-abos__subscribe > h3:first-child,
.eqdir-abos__allocation > h3:first-child {
	margin-top: 0;
}

.eqdir-abos__credit-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-abos__credit {
	padding: 0.6rem 0.8rem;
	font-size: 0.875rem;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__status,
.eqdir-abos__next,
.eqdir-abos__trial {
	margin: 0 0 0.4rem;
	color: var(--l974-text);
}

.eqdir-abos__next,
.eqdir-abos__trial {
	color: var(--l974-text-muted);
	font-size: 0.875rem;
}

.eqdir-abos__none {
	margin: 0;
	color: var(--l974-text-muted);
}

/* Current packs: a simple token-styled list. */
ul.eqdir-abos__packs {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.eqdir-abos__packs > li {
	padding: 0.55rem 0.8rem;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__pack-offered {
	color: var(--l974-text-muted);
}

.eqdir-abos__subscribe-note {
	margin: 0 0 1rem;
	color: var(--l974-text-muted);
	font-size: 0.875rem;
}

.eqdir-abos__pay-ok {
	margin: 0 0 1rem;
	font-weight: 600;
	color: var(--l974-cta);
}

/* The pack purchase table. */
table.eqdir-abos__packs {
	width: 100%;
	margin: 0 0 1rem;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

table.eqdir-abos__packs th,
table.eqdir-abos__packs td {
	padding: 0.6rem 0.75rem;
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--l974-border);
}

/* Centre the quantity input within its (centred) column. */
table.eqdir-abos__packs .eqdir-qty {
	margin: 0 auto;
}

table.eqdir-abos__packs thead th {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
}

table.eqdir-abos__packs tbody tr:last-child th,
table.eqdir-abos__packs tbody tr:last-child td {
	border-bottom: 0;
}

table.eqdir-abos__packs tbody th {
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-qty {
	width: 5rem;
	min-height: 2.5rem;
	padding: 0.4rem 0.6rem;
	font: inherit;
	color: var(--l974-text);
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-qty:focus {
	outline: 2px solid var(--l974-link);
	outline-offset: 1px;
	border-color: var(--l974-link);
}

/* Live estimate recap. */
.eqdir-abos__recap {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-left: 4px solid var(--l974-primary);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__recap > p {
	margin: 0 0 0.35rem;
}

.eqdir-abos__recap > p:last-child {
	margin-bottom: 0;
}

/* One consistent detail size for every informational line: the recap no longer
 * mixes five font sizes. Only the monthly total and the "to pay now" headline
 * stand out (see below). */
.eqdir-abos__recap-empty,
.eqdir-abos__recap-count,
.eqdir-abos__recap-discount {
	font-size: 0.875rem;
	color: var(--l974-text-muted);
}

/* Chosen packs as a clean list of name/amount rows (no bullets); the amounts line
 * up on the right so the estimate reads like a tidy little invoice. */
.eqdir-abos__recap-lines {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--l974-text);
}

.eqdir-abos__recap-lines li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.15rem 0;
}

.eqdir-abos__recap-line-name {
	min-width: 0;
}

.eqdir-abos__recap-line-amt {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--l974-ink);
}

/* The monthly total: one emphasis step above the detail lines. */
.eqdir-abos__recap-total {
	margin-top: 0.5rem;
	font-weight: 700;
	font-size: 1rem;
	color: var(--l974-ink);
}

/* Allocation sub-blocks. */
.eqdir-abos__auto {
	margin: 0;
	color: var(--l974-text-muted);
}

.eqdir-abos__alloc-type {
	margin: 0 0 1rem;
}

.eqdir-abos__alloc-type:last-child {
	margin-bottom: 0;
}

.eqdir-abos__alloc-type > h4 {
	margin-top: 0;
}

.eqdir-abos__alloc-holders {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0.5rem 0 0;
	padding: 0;
	list-style: none;
}

.eqdir-abos__alloc-holder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	padding: 0.55rem 0.8rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__alloc-name {
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-abos__alloc-remove {
	margin: 0;
}

/* -- Account tab: give the raw fieldsets a consistent card look ---------- */
.eqdir-compte__form {
	margin: 0 0 1.25rem;
}

.eqdir-compte__form fieldset {
	margin: 0;
	padding: 1rem 1.15rem 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-compte__form legend {
	padding: 0 0.4rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.0625rem;
	color: var(--l974-ink);
}

/* -- Invoices / stats / documents tables --------------------------------- */
.eqdir-factures__table,
.eqdir-docs__table,
.eqdir-stats__list {
	width: 100%;
}

.eqdir-factures__table,
.eqdir-docs__table {
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.eqdir-factures__table th,
.eqdir-factures__table td,
.eqdir-docs__table th,
.eqdir-docs__table td {
	padding: 0.6rem 0.75rem;
	text-align: left;
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-factures__table thead th,
.eqdir-docs__table thead th {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
}

.eqdir-stats__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-stats__list li {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.85rem 1rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-stats__label {
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-stats__value {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.25rem;
	color: var(--l974-ink);
}

/* Documents reader (details/summary). */
.eqdir-docs__text > summary {
	cursor: pointer;
	color: var(--l974-link);
}

.eqdir-docs__text-body {
	max-height: 16rem;
	overflow-y: auto;
	margin-top: 0.5rem;
	padding: 0.75rem;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

/* Data tab danger block. */
.eqdir-donnees__block {
	margin: 0 0 1.5rem;
}

.eqdir-donnees__block--danger {
	margin-top: 1.5rem;
	padding: 1.25rem;
	border: 1px solid var(--l974-accent);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface);
}

/* -- Listing preview banner (preview page notice bar) -------------------- */
.eqdir-preview-banner {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0.75rem 16px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--l974-on-primary);
	background: var(--l974-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.eqdir-preview-banner a {
	color: var(--l974-on-primary);
	text-decoration: underline;
}

/* ==========================================================================
 * 31. Number spinners — removed on DECIMAL fields only (step="0.01" or
 *     step="any", e.g. prices, lat/lng, taxe de séjour), kept on integer
 *     fields (no step or step="1", e.g. quantity) where the arrows help.
 * ======================================================================== */
.eqdir input[type=number][step="0.01"],
.eqdir input[type=number][step="any"] { -moz-appearance: textfield; appearance: textfield; }
.eqdir input[type=number][step="0.01"]::-webkit-inner-spin-button,
.eqdir input[type=number][step="0.01"]::-webkit-outer-spin-button,
.eqdir input[type=number][step="any"]::-webkit-inner-spin-button,
.eqdir input[type=number][step="any"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ==========================================================================
 * 32. Footer centering (#6) — the logo and both the desktop and mobile
 *     columns read centred, text included. The mobile variant already
 *     centres its columns; these rules add the logo + desktop centring and
 *     do not disturb the grid template defined above.
 * ======================================================================== */
.eqdir-footer__brand {
	text-align: center;
}

.eqdir-footer__logo {
	display: block;
	margin-inline: auto;
}

.eqdir-footer__cols {
	justify-items: center;
}

.eqdir-footer__col {
	text-align: center;
}

.eqdir-footer__list {
	align-items: center;
}

/* ==========================================================================
 * 33. Availability calendar (#7) — the server-rendered 12-month calendar on
 *     the listing page. A legend with coloured swatches, a scroll-snapping
 *     column of months, and a 7-column day grid. The three day colours are
 *     local vars derived from charter tokens with a static pale-hex fallback;
 *     color-mix (when supported) tints the charter tokens instead.
 * ======================================================================== */
.eqdir-cal {
	/* Availability must read as GREEN (free) vs RED (booked) on every charte, so
	 * the two states are never confusable. The hues are fixed green/red (not the
	 * charte CTA/accent tokens, which could be close to each other); color-mix only
	 * tints them toward the current surface so they stay pale in light AND dark. */
	--eqdir-cal-available: #e3f6e6;
	--eqdir-cal-unavailable: #fde4e1;
	--eqdir-cal-past: var(--l974-surface-alt);
	margin: 0;
}

@supports (background: color-mix(in srgb, red 50%, white)) {
	.eqdir-cal {
		--eqdir-cal-available: color-mix(in srgb, #2e9e4f 24%, var(--l974-surface));
		--eqdir-cal-unavailable: color-mix(in srgb, #d64545 22%, var(--l974-surface));
	}
}

.eqdir-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-cal__key {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.eqdir-cal__key::before {
	content: '';
	width: 0.9rem;
	height: 0.9rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
	background: var(--l974-surface-alt);
}

.eqdir-cal__key--available::before {
	background: var(--eqdir-cal-available);
}

.eqdir-cal__key--unavailable::before {
	background: var(--eqdir-cal-unavailable);
}

/* Single-month view: a compact bordered frame, no inner scrollbar. The JS shows
 * one .eqdir-cal__month at a time; no-JS shows all months stacked (spaced). */
.eqdir-cal__months {
	max-width: 24rem;
	padding: 0.5rem 0.75rem 0.75rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-cal__month[hidden] {
	display: none;
}

.eqdir-cal__month + .eqdir-cal__month {
	margin-top: 1.25rem;
}

/* Caption row: ‹ prev — Month YYYY — next ›. Buttons are hidden until JS reveals them. */
.eqdir-cal__caption-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.eqdir-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-pill);
	cursor: pointer;
}

.eqdir-cal__nav[hidden] {
	display: none;
}

.eqdir-cal__nav:disabled {
	opacity: 0.4;
	cursor: default;
}

.eqdir-cal__caption {
	margin: 0;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1rem;
	color: var(--l974-ink);
	text-align: center;
}

.eqdir-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.eqdir-cal__dow {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--l974-text-muted);
}

.eqdir-cal__pad {
	aspect-ratio: 1 / 1;
}

.eqdir-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	font-size: 0.8125rem;
	color: var(--l974-text);
	border-radius: var(--l974-radius-sm);
}

.eqdir-cal__day.is-available {
	background: var(--eqdir-cal-available);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #2e9e4f 30%, transparent);
}

.eqdir-cal__day.is-unavailable {
	background: var(--eqdir-cal-unavailable);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #d64545 30%, transparent);
}

/* Past days must win over the availability colours above. */
.eqdir-cal__day.is-past {
	color: var(--l974-text-muted);
	background: var(--eqdir-cal-past);
	opacity: 0.5;
}

/* Special-rate ("coupon") night: a small corner marker; the native title tooltip
 * (set in the template) carries the per-night price on hover. Opaque fallbacks so it
 * also reads correctly wherever the charte tokens are not in scope. */
.eqdir-cal__day.is-coupon {
	position: relative;
	cursor: help;
}

.eqdir-cal__coupon {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--l974-accent, #d98c00);
	box-shadow: 0 0 0 1px var(--l974-surface, #fff);
}

/* A priced night is tappable; its price appears in a styled bubble on click (not hover). */
.eqdir-cal__day.is-priced {
	position: relative;
	cursor: pointer;
}

.eqdir-cal__day.has-tip {
	z-index: 3;
}

.eqdir-cal__tip {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 20;
	white-space: nowrap;
	padding: 0.35rem 0.6rem;
	font-size: 0.8125rem;
	line-height: 1.2;
	font-weight: 600;
	/* The bubble stays clickable (NO pointer-events:none): a tap on it resolves to its owner
	 * day and closes the bubble, rather than passing through to whatever cell is painted under. */
	/* Light surface in the charte colours, with opaque fallbacks for wherever the charte
	 * tokens are not in scope (e.g. the admin preview iframe). */
	color: var(--l974-text, #1f2933);
	background: var(--l974-surface, #fff);
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.eqdir-cal__tip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--l974-surface, #fff);
}

.eqdir-cal__tip.is-special {
	color: var(--l974-ink, #0c3a66);
	border-color: var(--l974-accent, #d98c00);
}

.eqdir-cal__key--coupon::before {
	background: var(--l974-accent, #d98c00);
	border-radius: 50%;
}

.eqdir-cal__hint {
	margin: 0.4rem 0 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

/* --- Advertising purchase selector + availability calendars ------------------------- */

@supports (background: color-mix(in srgb, red 50%, white)) {
	.eqdir-cal--ads {
		--eqdir-cal-adfree: color-mix(in srgb, #2e9e4f 24%, var(--l974-surface));
		--eqdir-cal-adpartial: color-mix(in srgb, #d98c00 26%, var(--l974-surface));
		--eqdir-cal-adfull: color-mix(in srgb, #d64545 22%, var(--l974-surface));
	}
}

.eqdir-cal__day--adfree {
	background: var(--eqdir-cal-adfree, #dff2e4);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #2e9e4f 30%, transparent);
}

.eqdir-cal__day--adpartial {
	background: var(--eqdir-cal-adpartial, #faeccd);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #d98c00 32%, transparent);
}

.eqdir-cal__day--adfull {
	background: var(--eqdir-cal-adfull, #f6dcdc);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, #d64545 30%, transparent);
}

.eqdir-cal__key--adfree::before {
	background: var(--eqdir-cal-adfree, #dff2e4);
}

.eqdir-cal__key--adpartial::before {
	background: var(--eqdir-cal-adpartial, #faeccd);
}

.eqdir-cal__key--adfull::before {
	background: var(--eqdir-cal-adfull, #f6dcdc);
}

/* The ad tooltip lists several placements/lines, so it wraps and left-aligns. */
.eqdir-cal--ads .eqdir-cal__tip {
	white-space: pre-line;
	text-align: left;
	font-weight: 500;
	min-width: 12rem;
	max-width: 16rem;
}

.eqdir-adbuy {
	margin: 0 0 2rem;
}

.eqdir-adbuy__block {
	margin: 0 0 1.75rem;
	padding: 1.1rem 1.25rem 1.3rem;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	/* Tinted "usual" background, like the Souscrire-un-pack card, not plain white. */
	background: var(--l974-surface-alt, #FBF4E6);
}

.eqdir-adbuy__h {
	margin: 0 0 0.9rem;
	font-size: 1.1rem;
}

.eqdir-adbuy__intro {
	margin: 0 0 1rem;
	color: var(--l974-text, #1f2933);
}

.eqdir-adbuy__intro > :first-child {
	margin-top: 0;
}

.eqdir-adbuy__intro > :last-child {
	margin-bottom: 0;
}

.eqdir-adbuy__lead {
	/* Important for understanding the calendar: readable, spaced from the segmented control. */
	margin: 1.5rem 0 1rem;
	font-size: 1rem;
	line-height: 1.45;
	font-weight: 600;
	color: var(--l974-text, #1f2933);
}

/* Segmented control: styled radio buttons for Space / Mode. */
.eqdir-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.eqdir-seg__opt {
	position: relative;
}

.eqdir-seg__opt input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.eqdir-seg__btn {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: 999px;
	/* White (not tinted) so the control stands out against the now-tinted block. */
	background: var(--l974-surface, #fff);
	color: var(--l974-text, #1f2933);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.eqdir-seg__opt input:checked + .eqdir-seg__btn {
	background: var(--l974-cta, #2e9e4f);
	border-color: var(--l974-cta, #2e9e4f);
	color: #fff;
}

.eqdir-seg__opt input:focus-visible + .eqdir-seg__btn {
	outline: 2px solid var(--l974-cta, #2e9e4f);
	outline-offset: 2px;
}

/* Offer cards (radio cards, consistent with the pack purchase page). */
.eqdir-adbuy__offers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem;
}

.eqdir-offer-card {
	position: relative;
	display: block;
	cursor: pointer;
}

.eqdir-offer-card__radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.eqdir-offer-card__inner {
	display: block;
	height: 100%;
	padding: 1rem 1.1rem;
	border: 2px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	background: var(--l974-surface, #fff);
	transition: border-color 0.15s, box-shadow 0.15s;
}

.eqdir-offer-card__radio:checked + .eqdir-offer-card__inner {
	border-color: var(--l974-cta, #2e9e4f);
	box-shadow: 0 0 0 1px var(--l974-cta, #2e9e4f);
}

.eqdir-offer-card__radio:focus-visible + .eqdir-offer-card__inner {
	outline: 2px solid var(--l974-cta, #2e9e4f);
	outline-offset: 2px;
}

.eqdir-offer-card__pos {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
}

.eqdir-offer-card__meta {
	display: block;
	margin: 0.25rem 0;
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-offer-card__price {
	display: block;
	font-weight: 700;
	color: var(--l974-cta, #2e9e4f);
}

.eqdir-offer-card__pres {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
	color: var(--l974-text, #1f2933);
}

/* Booking panel: 3-month calendar + a side column (banner, totals, pay). */
.eqdir-adbuy__panel-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 16rem;
	gap: 1.5rem;
	align-items: start;
}

.eqdir-adbuy__side-field {
	display: block;
	margin: 0 0 0.75rem;
}

.eqdir-adbuy__side-field > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.eqdir-adbuy__side-field select {
	width: 100%;
}

.eqdir-adbuy__nocrea {
	display: block;
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-adbuy__side-line,
.eqdir-adbuy__side-total {
	margin: 0.35rem 0;
}

.eqdir-adbuy__card {
	margin: 0.75rem 0;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-sm, 6px);
	background: var(--l974-surface, #fff);
}

.eqdir-adbuy__demo {
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-adbuy__panel [data-eqdir-ad-pay] {
	width: 100%;
	margin-top: 0.5rem;
}

.eqdir-adbuy__msg {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	min-height: 1.2em;
}

.eqdir-adbuy__none {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted, #5b6672);
}

@media (max-width: 782px) {
	.eqdir-adbuy__panel-grid {
		grid-template-columns: 1fr;
	}
}

/* Three months shown at once (static windowed ad calendars), ~50% smaller than the
 * per-listing calendar: capped width + reduced day/dow/caption sizes so the 3-up grid
 * stays compact. */
.eqdir-cal--ads .eqdir-cal__months--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.6rem;
	max-width: 32rem;
}

.eqdir-cal--ads .eqdir-cal__months--grid .eqdir-cal__month + .eqdir-cal__month {
	margin-top: 0;
}

.eqdir-cal--ads .eqdir-cal__grid {
	gap: 1px;
}

.eqdir-cal--ads .eqdir-cal__day {
	font-size: 0.625rem;
}

.eqdir-cal--ads .eqdir-cal__dow {
	font-size: 0.5rem;
	padding: 0.1rem 0;
}

.eqdir-cal--ads .eqdir-cal__caption {
	font-size: 0.8125rem;
}

/* Windowed scroll bar (‹ Month – Month ›) above the 3-month grid. */
.eqdir-cal__winnav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.eqdir-cal__winnav[hidden] {
	display: none;
}

.eqdir-cal__winlabel {
	min-width: 12rem;
	text-align: center;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--l974-ink, #0c3a66);
}

@media (max-width: 900px) {
	.eqdir-cal--ads .eqdir-cal__months--grid {
		grid-template-columns: 1fr;
		max-width: 20rem;
	}
}

/* Pickable day on the offer calendar + its selected state. */
.eqdir-cal__day--pick {
	cursor: pointer;
}

.eqdir-cal__day--pick.is-selected {
	background: var(--l974-cta, #2e9e4f);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--l974-cta, #2e9e4f);
	font-weight: 700;
}

/* --- Structured availability tooltip (overview): a bold placement category with an
 * Exclusive and a Shared line under it, left-aligned and spaced to breathe. ------------ */
.eqdir-cal--ads .eqdir-cal__tip {
	white-space: normal;
	line-height: 1.35;
}

.eqdir-cal__tipcat + .eqdir-cal__tipcat {
	margin-top: 0.55rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--l974-border, #d7dce3);
}

.eqdir-cal__tipcat strong {
	display: block;
	margin-bottom: 0.2rem;
	font-weight: 700;
}

.eqdir-cal__tiprow {
	padding-left: 0.6rem;
	font-weight: 500;
	color: var(--l974-text, #1f2933);
}

/* --- Offer step: cards (left) + a mini page mock (right) highlighting the placement. -- */
.eqdir-adbuy__offers-wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 15rem;
	gap: 1.5rem;
	align-items: start;
}

@media (max-width: 782px) {
	.eqdir-adbuy__offers-wrap {
		grid-template-columns: 1fr;
	}
}

.eqdir-adbuy__preview {
	position: sticky;
	top: 1rem;
}

.eqdir-adbuy__screen {
	display: block;
	overflow: hidden;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	/* The page canvas (around the 4 zones and the light centre rectangle) reads grey. */
	background: #e5e7eb;
}

.eqdir-adbuy__screen-body {
	display: flex;
	gap: 0;
	min-height: 6rem;
}

.eqdir-adbuy__screen-main {
	flex: 1 1 auto;
	background: var(--l974-surface, #fff);
	margin: 0.4rem;
	border-radius: var(--l974-radius-sm, 6px);
}

.eqdir-adbuy__zone {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--l974-text-muted, #5b6672);
	background: var(--l974-surface, #fff);
	border: 1px dashed var(--l974-border, #d7dce3);
	margin: 0.4rem;
	border-radius: var(--l974-radius-sm, 6px);
}

.eqdir-adbuy__zone--top,
.eqdir-adbuy__zone--bottom {
	height: 1.6rem;
}

.eqdir-adbuy__zone--left,
.eqdir-adbuy__zone--right {
	width: 3.25rem;
	flex: 0 0 auto;
}

.eqdir-adbuy__zone.is-active {
	color: #fff;
	background: var(--l974-cta, #2e9e4f);
	border-style: solid;
	border-color: var(--l974-cta, #2e9e4f);
}

.eqdir-adbuy__preview-help {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-adbuy__preview-cap {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.75rem;
	color: var(--l974-text-muted, #5b6672);
}

/* --- Booking panel: pay sits UNDER the calendar (vertical), consents above the button. The whole
 * checkout sits in a thin, rounded, CENTRED frame — the same treatment as the pack pay box. */
.eqdir-adbuy__checkout {
	max-width: 34rem;
	margin: 1.1rem auto 0;
	padding: 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	text-align: center;
}

.eqdir-adbuy__totals {
	margin: 0 0 0.75rem;
	font-size: 0.95rem;
}

.eqdir-adbuy__consents {
	margin: 0.75rem 0;
}

.eqdir-adbuy__cardnote {
	margin: 0.4rem 0 0.75rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-adbuy__pay {
	width: 100%;
	margin-top: 0.5rem;
}

/* --- Advertising sub-tabs (Manage banners / Broadcast ads). --------------------------- */
.eqdir-ads-space__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1.5rem;
	border-bottom: 1px solid var(--l974-border, #d7dce3);
}

.eqdir-subtab {
	padding: 0.6rem 1rem;
	font-weight: 600;
	color: var(--l974-text-muted, #5b6672);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.eqdir-subtab:hover {
	color: var(--l974-text, #1f2933);
}

.eqdir-subtab.is-active {
	color: var(--l974-ink, #0c3a66);
	border-bottom-color: var(--l974-cta, #2e9e4f);
}

.eqdir-ads-space__lede {
	margin: 0 0 1rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-ad-create-wrap {
	margin: 0 0 1.5rem;
}

.eqdir-ad-create-wrap > summary {
	display: inline-block;
	margin-bottom: 0.75rem;
}

.eqdir-ad-create {
	max-width: 32rem;
}

/* --- My banners: a card per banner (thumb + meta + status chips + actions). ----------- */
.eqdir-ad-banners {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.eqdir-ad-banner {
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	/* The usual tinted background, like the other espace cards (not plain white). */
	background: var(--l974-surface-alt, #FBF4E6);
	align-items: flex-start;
}

/* Manage-visuals panel: list first, the "Create a visual" block last (like "My listings"). */
.eqdir-ad-manage {
	display: flex;
	flex-direction: column;
}
.eqdir-ad-manage .eqdir-ad-create-wrap {
	order: 3;
	margin-top: 1rem;
}

/* The thumbnail sits to the RIGHT of the card body (order:2) in a FIXED-size box, so every
 * visual card has the same height whatever the format: a tall skyscraper (160×600) no longer
 * stretches its card. The preview fits INSIDE the box (object-fit: contain, centred); the full
 * visual stays viewable by clicking it (modal). */
.eqdir-ad-banner__thumb {
	flex: 0 0 auto;
	width: 240px;
	height: 150px;
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.eqdir-ad-banner__thumb img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--l974-radius-sm, 6px);
}

/* Clickable thumbnail: a fully reset button (no theme background/box-shadow/focus fill)
 * that opens the visual preview modal — only the image shows, highlighted on hover/focus. */
.eqdir-ad-banner__thumb--btn {
	appearance: none;
	-webkit-appearance: none;
	/* flex (not block): inherits the fixed-size centring box from .eqdir-ad-banner__thumb. */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	cursor: zoom-in;
	border-radius: var(--l974-radius-sm, 6px);
}

/* Never let the theme paint a background/ring on the thumbnail button in any state (the blue
 * focus/hover fill some themes add was unsightly on the visual previews). */
.eqdir-ad-banner__thumb--btn:hover,
.eqdir-ad-banner__thumb--btn:focus,
.eqdir-ad-banner__thumb--btn:focus-visible,
.eqdir-ad-banner__thumb--btn:active {
	background: transparent;
	box-shadow: none;
	outline: none;
}

/* Hover/keyboard affordance lives on the IMAGE as a subtle neutral ring — not a blue fill. */
.eqdir-ad-banner__thumb--btn:hover img,
.eqdir-ad-banner__thumb--btn:focus-visible img {
	outline: 2px solid var(--l974-border, #d7dce3);
	outline-offset: 2px;
}

.eqdir-ad-banner__body {
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
}

.eqdir-ad-banner__name {
	margin: 0 0 0.35rem;
	font-weight: 700;
}

.eqdir-ad-banner__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
	margin: 0 0 0.4rem;
	font-size: 0.8125rem;
}

.eqdir-ad-banner__fmt {
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-ad-banner__statut,
.eqdir-ad-banner__sched {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: var(--l974-radius-pill, 999px);
	font-size: 0.75rem;
	font-weight: 600;
}

.eqdir-ad-banner__statut {
	background: var(--l974-surface-alt, #f7f9fb);
	color: var(--l974-text, #1f2933);
	border: 1px solid var(--l974-border, #d7dce3);
}

.eqdir-ad-banner__statut--validee {
	background: var(--eqdir-cal-adfree, #dff2e4);
	border-color: transparent;
}

.eqdir-ad-banner__statut--attente_validation {
	background: var(--eqdir-cal-adpartial, #faeccd);
	border-color: transparent;
}

.eqdir-ad-banner__statut--refusee,
.eqdir-ad-banner__statut--suspendue {
	background: var(--eqdir-cal-adfull, #f6dcdc);
	border-color: transparent;
}

.eqdir-ad-banner__sched--live {
	color: #1f7a3d;
	background: var(--eqdir-cal-adfree, #dff2e4);
}

.eqdir-ad-banner__sched--scheduled {
	color: #8a5a00;
	background: var(--eqdir-cal-adpartial, #faeccd);
}

.eqdir-ad-banner__stats {
	margin: 0 0 0.6rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted, #5b6672);
}

.eqdir-ad-banner__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.eqdir-ad-edit {
	flex: 1 1 100%;
	margin-top: 0.75rem;
	max-width: 28rem;
}

@media (max-width: 600px) {
	.eqdir-ad-banner {
		flex-direction: column;
	}
}

/* --- Account tab: rationalised width + two-column profile grid (no page-wide fields). - */
.eqdir-compte {
	max-width: 60rem;
}

.eqdir-compte__form fieldset {
	max-width: 34rem;
}

.eqdir-compte__form--grid fieldset {
	max-width: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1.25rem;
}

.eqdir-compte__form--grid legend {
	grid-column: 1 / -1;
}

.eqdir-compte__form--grid fieldset > p {
	grid-column: span 1;
	margin: 0.5rem 0;
}

.eqdir-compte__form--grid fieldset > p.eqdir-field--wide,
.eqdir-compte__form--grid fieldset > p:not([class]) {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.eqdir-compte__form--grid fieldset {
		grid-template-columns: 1fr;
	}
}

/* --- Statistics tab: a card per listing + a readable month table. --------------------- */
.eqdir-stats {
	max-width: 60rem;
}

.eqdir-stats__fiche {
	margin: 0 0 1.5rem;
	padding: 1rem 1.15rem 1.15rem;
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	background: var(--l974-surface, #fff);
}

.eqdir-stats__fiche-title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.eqdir-stats__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.eqdir-stats__table th,
.eqdir-stats__table td {
	padding: 0.5rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid var(--l974-border, #d7dce3);
}

.eqdir-stats__table thead th {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
}

.eqdir-stats__table tbody th {
	font-weight: 600;
}

/* "(excluding tourist tax)" note beside the "from" price (card + modal). */
.eqdir-fiche__excl-tax,
.eqdir-card__excl-tax {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--l974-text-muted, #5b6672);
}

/* "Synced from your site" note replacing the Edit action on a Connect listing. */
.eqdir-fiches__synced-note {
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--l974-text-muted, #5b6672);
}

/* ==========================================================================
 * 34. Credits accordion + allocation tiles (#10) — the packs/credits tab.
 *     Each credit type is a card-like accordion item with a full-width head
 *     (label left, meta + chevron right) and a hidden panel holding the
 *     allocation tiles.
 * ======================================================================== */
.eqdir-acc {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0 0 1rem;
}

.eqdir-acc__item {
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

.eqdir-acc__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	width: 100%;
	padding: 0.85rem 1rem;
	font: inherit;
	text-align: left;
	color: var(--l974-text);
	background: var(--l974-surface-alt);
	border: 0;
	cursor: pointer;
}

.eqdir-acc__head:hover,
.eqdir-acc__head:focus {
	background: var(--l974-surface);
}

.eqdir-acc__head:focus-visible {
	outline: 2px solid var(--l974-link);
	outline-offset: -2px;
}

.eqdir-acc__label {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-acc__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

/* Credits cartouches: three fixed columns so Available / used / offered line up
 * vertically across every cartouche whether or not the offered clause is present
 * (the offered column is always rendered, empty when 0, keeping the layout stable). */
.eqdir-abos__credits .eqdir-acc__meta {
	display: grid;
	grid-template-columns: 13ch 9ch 20ch;
	gap: 0 0.6rem;
	justify-items: start;
	text-align: left;
}

.eqdir-acc__col {
	white-space: nowrap;
}

@media (max-width: 560px) {
	.eqdir-abos__credits .eqdir-acc__meta {
		grid-template-columns: 1fr 1fr;
	}
	.eqdir-abos__credits .eqdir-acc__col--offered {
		grid-column: 1 / -1;
	}
}

/* Chevron drawn from a border triangle; rotates when the head is expanded. */
.eqdir-acc__head::after {
	content: '';
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.25rem;
	border-right: 2px solid var(--l974-text-muted);
	border-bottom: 2px solid var(--l974-text-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.eqdir-acc__head[aria-expanded="true"]::after {
	transform: rotate(-135deg);
}

.eqdir-acc__panel {
	padding: 0.9rem 1rem 1rem;
}

.eqdir-acc__panel[hidden] {
	display: none;
}

.eqdir-abos__credit-avail {
	font-weight: 700;
	color: var(--l974-text);
}

/* Allocation tiles. */
.eqdir-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-tile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	padding: 0.65rem 0.8rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-tile__name {
	/* The name shrinks (and ellipses) so the button keeps its intrinsic width. */
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-tile__form {
	margin: 0;
	flex: 0 0 auto;
}

.eqdir-tile__btn {
	flex: 0 0 auto;
	min-height: 2.1rem;
	padding: 0.35rem 0.9rem;
	font-size: 0.8125rem;
}

/* ==========================================================================
 * 35. Rating stars (#18) — the listing header rating row.
 * ======================================================================== */
.eqdir-fiche__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
}

.eqdir-fiche__stars {
	display: inline-flex;
	line-height: 1;
}

.eqdir-fiche__star {
	font-size: 1.05rem;
	line-height: 1;
	color: var(--l974-text-muted);
}

.eqdir-fiche__star.is-on {
	color: var(--l974-accent);
}

.eqdir-fiche__rating-val {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-fiche__rating-count {
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

/* ==========================================================================
 * 36. Pay-now emphasis (#20) — in the purchase recap the "to pay now" line
 *     reads larger than the total so it stands out; the discount amount is a
 *     normal recap line.
 * ======================================================================== */
/* The "to pay now" amount: the single headline of the recap — one step larger
 * than the monthly total, per the CDC (#20). Sizing lives in the consolidated
 * recap block above for every other line. */
.eqdir-abos__recap-paynow {
	margin-top: 0.4rem;
	font-weight: 700;
	font-size: 1.125rem;
	color: var(--l974-ink);
}

/* ==========================================================================
 * 37. Card size modifiers (#12) — the admin listing-edit screen renders the
 *     shared .eqdir-card markup (this front stylesheet is enqueued there) at
 *     two preview WIDTHS. The front card markup is identical everywhere (same
 *     4/3 media, same fonts/padding); on the results grid the only real
 *     difference between an out-of-ecosystem card and a Connect card is the
 *     column width (more-per-row vs fewer-per-row). So the two preview sizes
 *     differ by max-width ONLY — no font, padding or media-ratio overrides —
 *     to stay faithful to the real rendering.
 * ======================================================================== */
.eqdir-card--sm {
	max-width: 17rem;
}

.eqdir-card--lg {
	max-width: 24rem;
}

/* ==========================================================================
 * 38. Advertiser space: grouped amenity checklist + per-listing stats table.
 *     The editor's .eqdir-amenities is a block wrapper (not the fiche chips
 *     grid), holding category fieldsets with multi-column checkbox lists.
 * ======================================================================== */
.eqdir-amenities[data-eqdir-amenities] {
	display: block;
	margin: 0;
}

.eqdir-amenities__title {
	margin: 0 0 0.75rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1rem;
	color: var(--l974-ink);
}

.eqdir-amenities-group {
	margin: 0 0 1rem;
	padding: 0.5rem 1rem 1rem;
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-amenities-group:last-child {
	margin-bottom: 0;
}

.eqdir-amenities-group > legend {
	padding: 0 0.4rem;
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--l974-text);
}

.eqdir-amenities-choices {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 0.4rem 1rem;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

/* Reset the fiche chip look inherited from `.eqdir-amenities li`. */
.eqdir-amenities-choices li {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.875rem;
	background: none;
	border: 0;
	border-radius: 0;
}

.eqdir-amenities-choices label {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--l974-text);
	cursor: pointer;
}

/* Per-listing stats: a simple bordered table. */
.eqdir-stats__fiche {
	margin: 0 0 1.5rem;
}

.eqdir-stats__fiche:last-child {
	margin-bottom: 0;
}

.eqdir-stats__fiche-title {
	margin: 0 0 0.5rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1rem;
	color: var(--l974-ink);
}

.eqdir-stats__empty {
	margin: 0;
	color: var(--l974-text-muted);
}

.eqdir-stats__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	overflow: hidden;
}

.eqdir-stats__table th,
.eqdir-stats__table td {
	padding: 0.5rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid var(--l974-border);
}

.eqdir-stats__table thead th {
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	color: var(--l974-ink);
	background: var(--l974-surface-alt);
}

.eqdir-stats__table tbody tr:last-child th,
.eqdir-stats__table tbody tr:last-child td {
	border-bottom: 0;
}

/* ==========================================================================
 * 40. "My packs" cartouches (#6) — each held pack is an accordion whose panel
 *     shows the subscription detail and a Résilier (end-of-period) control.
 * ======================================================================== */
.eqdir-abos__packs-acc {
	margin: 0 0 1rem;
}

/* "My subscriptions" — ONE card per held unit. Three aligned zones: identity (pack name +
   that unit's subscription date) on the left, the renewal (date + amount, with struck list
   price + discounted price + "-N %" badge when a volume discount applies) in the middle, and
   the unit's control on the right. The shared grid keeps every card's zones in line. */
.eqdir-abos__cards {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 0 0 1rem;
	/* Lets the cards stack on their OWN width (the espace panel can be narrower than the viewport
	   under a theme-width content column), not just on the viewport — see the @container rule below. */
	container-type: inline-size;
}

/* One collapsible block per pack TYPE, holding that type's per-unit cards. */
.eqdir-abos__type {
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	background: var(--l974-surface);
	padding: 0.35rem 0.6rem 0.6rem;
}

.eqdir-abos__type-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.6rem;
	padding: 0.45rem 0.25rem;
	cursor: pointer;
	font-weight: 700;
	color: var(--l974-ink);
	list-style: none; /* hide the default disclosure marker; a flex summary suppresses it anyway. */
}

.eqdir-abos__type-head::-webkit-details-marker { display: none; }

/* Disclosure chevron (border triangle), rotating when the block is open — a flex summary renders no
   native marker, so the collapsible block needs its own affordance (matches the amenities accordion). */
.eqdir-abos__type-head::after {
	content: "";
	order: 9; /* stays last, after .eqdir-abos__type-count (which carries margin-left:auto). */
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.4rem;
	border-right: 2px solid var(--l974-text-muted);
	border-bottom: 2px solid var(--l974-text-muted);
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.eqdir-abos__type[open] .eqdir-abos__type-head::after {
	transform: rotate(-135deg);
}

.eqdir-abos__type-name {
	font-size: 1.05rem;
}

.eqdir-abos__type-count {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--l974-text-muted);
}

.eqdir-abos__type-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

/* "i" badge + "Credits and allocations" tooltip, next to the pack name. */
.eqdir-abos__info {
	position: relative;
	display: inline-flex;
	outline: none;
}

.eqdir-abos__info-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: var(--l974-cta);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: help;
}

.eqdir-abos__info-bubble {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	z-index: 50;
	display: none;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 18rem;
	max-width: 26rem;
	padding: 0.75rem 0.9rem;
	background: var(--l974-surface);
	color: var(--l974-ink);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
}

.eqdir-abos__info:hover .eqdir-abos__info-bubble,
.eqdir-abos__info:focus-within .eqdir-abos__info-bubble,
.eqdir-abos__info:focus .eqdir-abos__info-bubble,
.eqdir-abos__info.is-open .eqdir-abos__info-bubble {
	display: flex;
}

.eqdir-abos__info-title {
	font-weight: 700;
	color: var(--l974-ink);
	margin-bottom: 0.1rem;
}

.eqdir-abos__info-k {
	font-weight: 600;
}

/* Keep the bubble clear of the right edge on narrow screens. */
@media (max-width: 560px) {
	.eqdir-abos__info-bubble {
		min-width: 0;
		max-width: min(22rem, calc(100vw - 2rem));
	}
}

.eqdir-abos__type-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.25rem;
	margin: 0.85rem 0 0.15rem;
	padding: 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__type-facts div {
	display: flex;
	gap: 0.35rem;
}

.eqdir-abos__type-facts dt {
	margin: 0;
	font-weight: 600;
}

.eqdir-abos__type-facts dt::after {
	content: ":";
}

.eqdir-abos__type-facts dd {
	margin: 0;
}

/* Scoped to the .eqdir-abos__cards container: the bare class .eqdir-abos__card is ALSO used by the
   inline Stripe card-capture box (.eqdir-abos__card--banner #eqdir-inline-card) in the subscribe
   flow, which must stay a plain stacked block — never this 3-column grid. */
.eqdir-abos__cards .eqdir-abos__card {
	display: grid;
	/* Three zones in a row: the pack name + subscription date on the LEFT, the renewal (date, struck /
	   discounted price, "-N %" badge) CENTRED in the middle, and the unit's control on the RIGHT. The
	   two text columns can shrink to 0 and the button wraps, so nothing ever overflows the card. */
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
	align-items: center;
	gap: 0.4rem 1.25rem;
	padding: 0.85rem 1.1rem;
	/* Full width: never inherit the 34rem Stripe-box cap. */
	width: 100%;
	max-width: none;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

/* The subscription date and the renewal date never wrap at full width (the price/strike/badge still
   wrap below the renewal date if needed, via .eqdir-abos__card-renew-line's flex-wrap). */
.eqdir-abos__card-sub,
.eqdir-abos__card-renew-date {
	white-space: nowrap;
}

.eqdir-abos__cards .eqdir-abos__card--pending {
	opacity: 0.75;
}

.eqdir-abos__card-id {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.eqdir-abos__card-name {
	font-weight: 600;
	color: var(--l974-ink);
}

.eqdir-abos__card-sub {
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__card-renew {
	text-align: center;
}

.eqdir-abos__card-renew-line {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 0.3rem 0.4rem;
}

.eqdir-abos__card-was {
	color: var(--l974-text-muted);
	text-decoration: line-through;
}

.eqdir-abos__card-now {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-abos__card-badge {
	display: inline-block;
	padding: 0.05rem 0.4rem;
	border-radius: 999px;
	background: var(--l974-cta);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.5;
}

.eqdir-abos__card-resil {
	color: var(--l974-cta);
	font-weight: 600;
}

.eqdir-abos__card-action {
	display: flex;
	justify-content: flex-end; /* button on the RIGHT of the card (3rd column). */
}

/* The action button wraps onto a second line rather than overflowing a narrow left column — the
   ultimate guard against the button ever spilling outside the card border. */
.eqdir-abos__cards .eqdir-abos__card-action .eqdir-btn {
	white-space: normal;
	text-align: left;
}

/* Stack to a single column when the CARD CONTAINER (not the viewport) is narrow, so the layout is
   correct even when the espace panel is constrained to a theme-width content column below the
   viewport width. */
@container (max-width: 560px) {
	.eqdir-abos__cards .eqdir-abos__card {
		grid-template-columns: 1fr;
	}

	.eqdir-abos__card-renew,
	.eqdir-abos__card-renew-line {
		justify-content: flex-start;
		text-align: left;
	}

	.eqdir-abos__card-action {
		justify-content: flex-start;
	}
}

/* Viewport fallback for browsers without container-query support: stack on small screens. */
@media (max-width: 600px) {
	.eqdir-abos__cards .eqdir-abos__card {
		grid-template-columns: 1fr;
	}

	.eqdir-abos__card-renew,
	.eqdir-abos__card-renew-line {
		justify-content: flex-start;
		text-align: left;
	}

	.eqdir-abos__card-action {
		justify-content: flex-start;
	}
}

.eqdir-abos__pack-resil {
	color: var(--l974-cta);
	font-weight: 600;
}

.eqdir-abos__pack-detail {
	margin: 0 0 0.75rem;
	padding-left: 1.2rem;
	font-size: 0.9375rem;
	color: var(--l974-text);
}

.eqdir-abos__pack-detail li {
	margin: 0 0 0.25rem;
}

.eqdir-abos__resil-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0;
}

.eqdir-abos__resil-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
}

.eqdir-abos__resil-qty input {
	width: 4.5rem;
}

.eqdir-abos__packs--offered {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
	color: var(--l974-text);
}

/* ==========================================================================
 * 41. Confirmation modal (#6 résiliation, #9 listing deletion) — a styled
 *     replacement for the native confirm(); see espace.js initConfirmModal.
 * ======================================================================== */
.eqdir-confirm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.5);
}

.eqdir-confirm[hidden] {
	display: none;
}

.eqdir-confirm__box {
	width: 100%;
	max-width: 26rem;
	padding: 1.25rem 1.4rem;
	background: var(--l974-surface);
	border-radius: var(--l974-radius-md);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.eqdir-confirm__title {
	margin: 0 0 0.5rem;
	font-family: var(--l974-font-heading);
	font-weight: var(--l974-heading-weight);
	font-size: 1.1rem;
	color: var(--l974-ink);
}

.eqdir-confirm__msg {
	margin: 0 0 1.1rem;
	color: var(--l974-text);
}

.eqdir-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* ==========================================================================
 * 42. Advertiser space polish (V3.7) — align the credit counters, calm the
 *     "toy" look (de-serif headings, de-pill buttons, denser tiles), and turn
 *     the held packs into tidy cartouches. All scoped to the advertiser space
 *     so the public front is untouched.
 * ======================================================================== */

/* Credit cartouche header as a 3-cell grid (label | counters | chevron): the
 * counters' right edge is now identical on every row regardless of the title
 * length — the real cause of the misalignment (the ::after chevron was a 3rd
 * flex item under justify-content:space-between, floating the meta to the
 * middle). The per-column fixed widths then line the three numbers up. */
.eqdir-abos__credits .eqdir-acc__head {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	column-gap: 1rem;
}

@media (max-width: 560px) {
	/* Stack on narrow screens: label on top, counters below. */
	.eqdir-abos__credits .eqdir-acc__head {
		grid-template-columns: 1fr auto;
	}
	.eqdir-abos__credits .eqdir-acc__meta {
		grid-column: 1 / -1;
	}
}

/* Panel headings in the body font (the display serif read childish here). */
.eqdir-abos h2,
.eqdir-abos h3 {
	font-family: inherit;
	font-weight: 700;
}

/* De-pill the advertiser-space action buttons (the 999px pill read like a game). */
.eqdir-abos .eqdir-btn {
	border-radius: var(--l974-radius-sm);
}

/* Allocation tiles: a readable single-column list, name left / button right. */
.eqdir-abos .eqdir-tiles {
	grid-template-columns: 1fr;
}

.eqdir-abos .eqdir-tile {
	padding: 0.55rem 0.8rem;
}

.eqdir-abos .eqdir-tile__name {
	font-size: 0.9375rem;
}

/* Held packs: one compact cartouche per subscription (name + date left,
 * Résilier right), replacing the old accordion + quantity selector. */
.eqdir-abos__pack-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.eqdir-abos__pack {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.85rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__pack-info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.eqdir-abos__pack-name {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-abos__pack-qty {
	font-weight: 400;
	color: var(--l974-text-muted);
}

.eqdir-abos__pack-date {
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__resil-form {
	margin: 0;
	flex: 0 0 auto;
}

.eqdir-abos__packs--offered {
	margin: 0 0 1rem;
	padding-left: 1.2rem;
	color: var(--l974-text);
}

/* Recap: a tidy little summary — details in one size, a divider before the
 * total, and "to pay now" as the single emphasised figure (a touch larger than
 * the monthly total, per the CDC). */
.eqdir-abos__recap-total {
	margin-top: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--l974-border);
}

.eqdir-abos__recap-paynow {
	font-size: 1.25rem;
}

/* The "prorated for the current month" note: italic, lighter and smaller than the
 * amount, sitting between the label and the colon. */
.eqdir-abos__recap-paynow-note {
	font-style: italic;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

/* ==========================================================================
 * 43. Held packs as one accordion per type (V3.8, #3) — reuses .eqdir-acc.
 *     Head: pack name | active-unit count + pending note | chevron. Panel: a
 *     facts list (date, credits opened, listings using them) and one Résilier
 *     row per held unit; units already scheduled to drop are shown dashed.
 * ======================================================================== */
.eqdir-abos__packs-acc {
	margin: 0 0 1rem;
}

/* Same 3-cell head grid as the credits cartouches, so the meta/chevron sit on
 * the right instead of floating to the middle (the ::after chevron would be a
 * 3rd flex item under space-between). */
.eqdir-abos__packs-acc .eqdir-acc__head {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	column-gap: 1rem;
}

.eqdir-abos__pack-pending {
	font-size: 0.8125rem;
	color: var(--l974-cta);
}

.eqdir-abos__pack-facts {
	margin: 0 0 0.75rem;
}

.eqdir-abos__pack-facts > div {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1rem 0.5rem;
	padding: 0.15rem 0;
	font-size: 0.9375rem;
}

.eqdir-abos__pack-facts dt {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-abos__pack-facts dt::after {
	content: ':';
}

.eqdir-abos__pack-facts dd {
	margin: 0;
	color: var(--l974-text);
}

.eqdir-abos__units {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eqdir-abos__unit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.7rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

.eqdir-abos__unit--pending {
	background: transparent;
	border-style: dashed;
}

.eqdir-abos__unit-label {
	font-weight: 600;
	color: var(--l974-text);
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

/* Per-unit subscription date (each purchased unit carries its own). */
.eqdir-abos__unit-date {
	font-weight: 400;
	font-size: 0.82em;
	color: var(--l974-text-muted);
}

.eqdir-abos__unit .eqdir-abos__resil-form {
	margin: 0;
	flex: 0 0 auto;
}

/* ==========================================================================
 * 44. Subscribe block (V3.10) — narrower pack selector, pack-description
 *     tooltip hint, and the inline Stripe Elements card capture (also styles
 *     the standalone payment page, which had no CSS before).
 * ======================================================================== */
/* Narrower, more readable pack selector + recap + the inline Stripe card-capture box (they align
   left). Scoped to .eqdir-abos__card--banner, NOT the bare .eqdir-abos__card: the bare class is now
   also the full-width per-unit "My subscriptions" card, which must never inherit this 34rem cap (that
   leak compressed those cards and pushed the action button outside them). */
table.eqdir-abos__packs,
.eqdir-abos__subscribe .eqdir-abos__recap,
.eqdir-abos__card--banner {
	max-width: 34rem;
}

/* The pack name carries the admin "Description" as a native hover tooltip. */
.eqdir-abos__pack-th--tip {
	cursor: help;
	text-decoration: underline dotted;
	text-underline-offset: 2px;
}

/* Card capture (Stripe Elements) — shared by the inline subscribe form and the
 * standalone [equarent_directory_paiement] page. */
.eqdir-field__label {
	display: block;
	margin: 0 0 0.35rem;
	font-weight: 600;
	color: var(--l974-ink);
}

.eqdir-payment__card,
.eqdir-abos__card--banner {
	margin: 0 0 0.85rem;
}

#eqdir-card-element,
#eqdir-inline-card-element {
	padding: 0.8rem 0.85rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-sm);
}

/* "Payment card" tab (advertiser space): wrap the card form in the same cream, bordered, CENTRED
 * 34rem box the pack-subscribe (.eqdir-abos__paybox) and ad-purchase (.eqdir-adbuy__checkout) pages
 * use — so the tab matches the usual surface colour and the Stripe field no longer spans full width.
 * Scoped under .eqdir-card-tab, so the standalone [equarent_directory_paiement] page is untouched. */
.eqdir-card-tab .eqdir-payment {
	max-width: 34rem;
	margin: 1.25rem auto 0;
	padding: 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-card-tab .eqdir-payment > :first-child {
	margin-top: 0;
}

/* The pack-purchase "pay box": a single thin, rounded, CENTRED frame (max 34rem, same width as the
 * advertising checkout) wrapping everything from the card details to the "Pay and subscribe" button.
 * Centring it tightens the consents to the same compact, centred form as the advertising page. */
.eqdir-abos__paybox {
	max-width: 34rem;
	margin: 1.25rem auto 0;
	padding: 1.25rem;
	background: var(--l974-surface-alt);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	text-align: center;
}

.eqdir-abos__paybox > :first-child {
	margin-top: 0;
}

/* Consent lines read left-aligned inside the centred box (as on the advertising page). */
.eqdir-abos__paybox .eqdir-abos__consents,
.eqdir-abos__paybox .eqdir-abos__waiver {
	text-align: left;
}

/* The submit button sits centred, not full-width, inside the box. */
.eqdir-abos__paybox .eqdir-abos__buy-submit {
	text-align: center;
}

.eqdir-abos__paybox .eqdir-abos__buy-submit .eqdir-btn {
	width: auto;
	min-width: 16rem;
}

/* Operator-authored note under the card-entry field (admin: Stripe → "Text under the Stripe
 * module"). Muted and small so it reads as guidance, not a form control. */
.eqdir-payment__help {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.45;
	color: var(--l974-text-muted);
}

.eqdir-payment__help :first-child {
	margin-top: 0;
}

.eqdir-payment__help :last-child {
	margin-bottom: 0;
}

.eqdir-payment__help a {
	color: var(--l974-link);
}

.eqdir-payment__errors {
	margin: 0.4rem 0 0;
	font-size: 0.875rem;
	color: var(--l974-cta);
}

.eqdir-payment__status {
	margin: 0.4rem 0 0;
	font-size: 0.875rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__pay-ok {
	font-size: 0.9375rem;
	color: var(--l974-secondary);
}

/* ==========================================================================
 * 45. Advertiser-space tab menu — hamburger on mobile (V3.10). The toggle and
 *     the collapse are gated on `.is-js` (added by espace.js), so with no JS the
 *     full tab list stays visible and no dead button shows.
 * ======================================================================== */
.eqdir-espace__nav-toggle {
	display: none;
}

@media (max-width: 782px) {
	.eqdir-espace__nav {
		flex-direction: column;
		align-items: stretch;
	}

	.eqdir-espace__nav.is-js .eqdir-espace__nav-toggle {
		display: flex;
		align-items: center;
		gap: 0.7rem;
		width: 100%;
		min-height: 2.75rem;
		padding: 0.5rem 0.9rem;
		font: inherit;
		font-weight: 700;
		color: var(--l974-ink);
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.eqdir-espace__nav-burger {
		position: relative;
		flex: 0 0 auto;
		width: 1.25rem;
		height: 2px;
		background: currentColor;
	}

	.eqdir-espace__nav-burger::before,
	.eqdir-espace__nav-burger::after {
		content: '';
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background: currentColor;
	}

	.eqdir-espace__nav-burger::before { top: -6px; }
	.eqdir-espace__nav-burger::after { top: 6px; }

	.eqdir-espace__nav-current {
		font-size: 0.9375rem;
	}

	.eqdir-espace__nav.is-js .eqdir-espace__tabs {
		display: none;
	}

	.eqdir-espace__nav.is-js.is-open .eqdir-espace__tabs {
		display: flex;
		flex-direction: column;
		margin-top: 0.4rem;
	}
}

/* ==========================================================================
 * 46. Commune / postal-code autocomplete (V3.11) — a real dropdown floating
 *     over the field, not plain text pushed below it. The container was
 *     previously unstyled.
 * ======================================================================== */
.eqdir-search__commune {
	position: relative;
}

/* The place field is the positioning context for its suggestion dropdown — WITHOUT this the
 * absolutely-positioned list has no positioned ancestor and lands full-width at the bottom of
 * the page (so the visitor sees no dropdown under the field at all). Admin autocompletes set
 * their own positioned wrapper, so this only needs the front field. */
.eqdir-search__place {
	position: relative;
}

.eqdir-ac {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 50;
	margin: 0.25rem 0 0;
	padding: 0.25rem;
	min-width: 16rem;
	max-height: 16rem;
	overflow-y: auto;
	list-style: none;
	/* Hard fallbacks after each token: in wp-admin the autocomplete is rendered OUTSIDE
	 * the charte scope (.l974 / [data-l974-charte]), so --l974-* are undefined there and
	 * the dropdown would be fully transparent — the Leaflet map showed straight through it.
	 * An opaque fallback makes the list solid regardless of where it is mounted. */
	background: var(--l974-surface, #fff);
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.eqdir-ac[hidden] {
	display: none;
}

.eqdir-ac__item {
	padding: 0.5rem 0.7rem;
	font-size: 0.9375rem;
	color: var(--l974-text, #1f2933);
	border-radius: var(--l974-radius-sm, 6px);
	cursor: pointer;
}

.eqdir-ac__item:hover,
.eqdir-ac__item.is-active {
	background: var(--l974-surface-alt, #eef1f5);
	color: var(--l974-ink, #0c3a66);
}

/* Unified place suggestion: the place name (left) and a muted type hint
 * ("Commune" / "Locality", right) so a visitor sees what a pick will search. */
.eqdir-ac__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.eqdir-ac__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.eqdir-ac__type {
	flex: none;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--l974-muted, #6b7280);
}

/* ==========================================================================
 * 47. Subscribe block — 2-column buy layout (V3.11): pack list (left) + running
 *     estimate (right), card banner centred below. Each pack row: name + "i"
 *     pill (admin Tooltip on hover), inline description, price, quantity.
 * ======================================================================== */
.eqdir-abos__buy {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0 0 1rem;
	max-width: none;
}

@media (min-width: 720px) {
	.eqdir-abos__buy {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.eqdir-abos__buy-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.eqdir-abos__buy-pack {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	padding: 0.75rem 0.9rem;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
}

.eqdir-abos__buy-pack-main {
	flex: 1 1 11rem;
	min-width: 0;
}

.eqdir-abos__buy-pack-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
}

.eqdir-abos__buy-pack-name {
	font-weight: 700;
	color: var(--l974-ink);
}

.eqdir-abos__ipill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	padding: 0;
	font-family: var(--l974-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	color: var(--l974-on-cta);
	background: var(--l974-cta);
	border: 0;
	border-radius: 50%;
	cursor: help;
}

.eqdir-abos__buy-pack-desc {
	margin: 0.25rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--l974-text-muted);
}

.eqdir-abos__buy-pack-price {
	margin: 0.3rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--l974-text);
}

.eqdir-abos__buy-pack-qty {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__buy-pack-qty input {
	width: 4.5rem;
}

/* The recap fills its own column in the 2-col layout (overrides the 34rem cap). */
.eqdir-abos__buy-recap .eqdir-abos__recap {
	max-width: none;
	margin: 0;
}

/* Card banner: centred below the two columns. */
.eqdir-abos__card--banner {
	max-width: 34rem;
	margin: 0 auto 1rem;
}

.eqdir-abos__card-title {
	margin: 0 0 0.5rem;
	font-weight: 700;
	color: var(--l974-ink);
}

/* Reassurance note under the card field (block, below the Stripe insert — mirrors the ad page). */
.eqdir-abos__card-note {
	margin: 0.4rem 0 0.75rem;
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--l974-text-muted);
}

.eqdir-abos__buy-submit {
	text-align: center;
}

/* Payment-method management block (V3.11) — replace card from the space. */
.eqdir-abos__payment {
	margin: 0 0 1.5rem;
}

.eqdir-abos__payment-replace > summary {
	display: inline-flex;
	list-style: none;
	cursor: pointer;
}

.eqdir-abos__payment-replace > summary::-webkit-details-marker {
	display: none;
}

.eqdir-abos__payment-replace-body {
	margin-top: 0.85rem;
	max-width: 34rem;
}

/* Legal-document link inside a consent checkbox (opens the doc in a modal). */
.eqdir-doc-link {
	text-decoration: underline;
	font-weight: 600;
}

/* Address geo fields (commune / postal / INSEE) under the fiche address picker —
 * read-only, auto-filled from the address search; 3-up on wide screens. */
.eqdir-geo-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem 1rem;
	margin: 0.75rem 0 0;
}

@media (min-width: 560px) {
	.eqdir-geo-fields {
		grid-template-columns: repeat(3, 1fr);
	}
}

.eqdir-geo-fields .eqdir-field {
	margin: 0;
}

.eqdir-geo-fields input[readonly] {
	background: var(--l974-surface-alt);
	cursor: default;
}

/* -------------------------------------------------------------------------
 * V3.17: espace polish (logout, consent text, offered packs, next-payment
 * recap) + purchase consents + fiche wizard "Back to my listings" button.
 * ---------------------------------------------------------------------- */

/* Logout button, top-right of the espace header. */
.eqdir-espace__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.eqdir-espace__logout {
	flex: 0 0 auto;
}

/* Consent checkbox text: lighter and smaller than the bold field labels (the
 * registration consents and the purchase consents under the subscribe button). */
.eqdir-register__check > span,
.eqdir-abos__consent > span {
	font-size: 0.85rem;
	font-weight: 400;
	line-height: 1.4;
	color: var(--l974-text);
}

.eqdir-register__check .eqdir-doc-link,
.eqdir-abos__consent .eqdir-doc-link {
	font-weight: 500;
}

.eqdir-abos__consents {
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Next-payment recap at the bottom of "My packs". */
.eqdir-abos__next-recap {
	margin: 1rem 0 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--l974-border);
	font-weight: 600;
	color: var(--l974-ink);
}

/* Offered (free) packs rendered as cards consistent with the paid packs (no
 * accordion, as there are no units to manage). Overrides the earlier muted list. */
.eqdir-abos__packs.eqdir-abos__packs--offered {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.eqdir-abos__pack-offered {
	padding: 0.75rem 1rem;
	color: var(--l974-ink);
	font-weight: 600;
	background: var(--l974-surface);
	border: 1px solid var(--l974-border);
	border-radius: var(--l974-radius-md);
	list-style: none;
}

/* Fiche wizard: "Back to my listings" button, centered on the Previous/Next row
 * and NOT shifted when Previous or Next is hidden (first/last step). Explicit
 * grid columns keep the centre slot fixed even when an edge button is hidden. */
.eqdir-wizard__back {
	flex: 1 1 auto;
}

/* The `hidden` attribute must win over the button's own `display: inline-flex`;
 * without this, Previous (step 1) and Next (last step) never actually hide. */
.eqdir-btn[hidden] {
	display: none;
}

@media (min-width: 600px) {
	.eqdir-wizard__nav {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
	}

	.eqdir-wizard__nav--prev {
		grid-column: 1;
		justify-self: start;
	}

	.eqdir-wizard__back {
		grid-column: 2;
		justify-self: center;
		margin: 0;
	}

	.eqdir-wizard__nav--next {
		grid-column: 3;
		justify-self: end;
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
 * V3.18 / V3.20: plugin site header — two variants (desktop + mobile), each
 * configurable; a CSS media-query shows the right one (like the footer). The
 * mobile menu collapses behind a hamburger. Inherits the charte tokens.
 * ---------------------------------------------------------------------- */
.eqdir-header {
	font-family: var(--l974-font-body, sans-serif);
}

/* Variant switch: desktop by default, mobile below 782px. */
.eqdir-header-variant--mobile {
	display: none;
}

@media (max-width: 782px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-header-variant--desktop {
		display: none;
	}

	.eqdir-header-variant--mobile {
		display: block;
	}
}

.eqdir-header__bar {
	background: var(--l974-surface, #fff);
	border-bottom: 1px solid var(--l974-border, #e5e5e5);
}

/* Sticky: applied to the OUTER header (its containing block is the page, so it can
 * actually stick), gated per variant at the variant breakpoint. */
@media (min-width: 783px) and (min-height: 481px) {
	.eqdir-header.eqdir-header--sticky-desktop {
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	/* Offset below the WordPress admin bar (32px, fixed) for logged-in users. */
	.admin-bar .eqdir-header.eqdir-header--sticky-desktop {
		top: 32px;
	}
}

@media (max-width: 782px), (orientation: landscape) and (max-height: 480px) {
	.eqdir-header.eqdir-header--sticky-mobile {
		position: sticky;
		top: 0;
		z-index: 1000;
	}
}

/* Admin bar is 46px and fixed between 601px and 782px; below 601px it scrolls away,
 * so no offset is needed there. */
@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar .eqdir-header.eqdir-header--sticky-mobile {
		top: 46px;
	}
}

.eqdir-header__inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0.75rem 1rem;
}

.eqdir-header--full .eqdir-header__inner {
	max-width: none;
}

.eqdir-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.eqdir-header__logo {
	width: auto;
	display: block;
}

.eqdir-header--logo-center .eqdir-header__brand {
	margin-inline: auto;
}

.eqdir-header--logo-right .eqdir-header__brand {
	order: 5;
	margin-left: auto;
}

.eqdir-header__nav {
	flex: 0 1 auto;
}

.eqdir-header--menu-right .eqdir-header__nav {
	margin-left: auto;
}

.eqdir-header--menu-left .eqdir-header__nav {
	margin-right: auto;
}

.eqdir-header--menu-center .eqdir-header__nav {
	margin-inline: auto;
}

.eqdir-header__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.5rem;
}

.eqdir-header__link {
	color: var(--l974-ink, #1a1a1a);
	text-decoration: none;
	font-weight: 600;
}

.eqdir-header__link:hover,
.eqdir-header__link:focus {
	color: var(--l974-cta, #b5452f);
	text-decoration: underline;
}

.eqdir-header__link--sm { font-size: 0.85rem; }
.eqdir-header__link--md { font-size: 1rem; }
.eqdir-header__link--lg { font-size: 1.25rem; }

/* Mobile variant: a hamburger toggle + a collapsible, stacked menu. Progressive
 * enhancement: without JavaScript the full menu is shown and the burger is hidden;
 * JS adds .eqdir-header--js, which reveals the burger and collapses the menu. */
.eqdir-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	padding: 0.55rem;
	background: transparent;
	border: 1px solid var(--l974-border, #e5e5e5);
	border-radius: var(--l974-radius-sm, 6px);
	cursor: pointer;
}

.eqdir-header--js .eqdir-header__burger {
	display: inline-flex;
}

.eqdir-header__burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--l974-ink, #1a1a1a);
}

.eqdir-header__nav--mobile {
	flex: 1 1 100%;
	order: 10;
}

.eqdir-header__nav--mobile .eqdir-header__menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	width: 100%;
	padding-top: 0.5rem;
}

.eqdir-header--js .eqdir-header__nav--mobile .eqdir-header__menu {
	display: none;
}

.eqdir-header--js .eqdir-header__nav--mobile.is-open .eqdir-header__menu {
	display: flex;
}

.eqdir-header__nav--mobile .eqdir-header__link {
	display: block;
	padding: 0.5rem 0;
}

/* -------------------------------------------------------------------------
 * V3.19: plugin page builder — custom page content (Visual/HTML), rendered
 * verbatim inside .eqdir-page. Inherits the charte tokens.
 * ---------------------------------------------------------------------- */
.eqdir-page {
	max-width: 1180px;
	margin: 2rem auto;
	padding: 0 1rem;
	font-family: var(--l974-font-body, sans-serif);
	color: var(--l974-text, #333);
	line-height: 1.6;
}

.eqdir-page.eqdir-width-full {
	max-width: none;
}

.eqdir-page h1,
.eqdir-page h2,
.eqdir-page h3 {
	font-family: var(--l974-font-heading, serif);
	color: var(--l974-ink, #1a1a1a);
}

.eqdir-page h2 {
	margin-top: 2rem;
}

.eqdir-presentation__lead {
	font-size: 1.2rem;
	color: var(--l974-text-muted, #666);
}

.eqdir-page ul,
.eqdir-page ol {
	line-height: 1.8;
	padding-left: 1.5rem;
}

/* V3.22: "My data" relocated to the bottom of "My account". */
.eqdir-compte__data {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--l974-border, #e5e5e5);
}

.eqdir-donnees__back {
	margin: 0 0 1rem;
}

/* V3.23: right-of-withdrawal waiver at subscription (individuals). */
.eqdir-abos__waiver {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
}

/* V3.24: accepted-document reading in a modal (native <dialog>) instead of an accordion. */
.eqdir-docs__dialog:not([open]) {
	display: none; /* defensive: browsers without the <dialog> UA rule keep closed ones hidden */
}

.eqdir-docs__dialog {
	max-width: 640px;
	width: calc(100% - 2rem);
	max-height: 80vh;
	padding: 0;
	border: 1px solid var(--l974-border, #e5e5e5);
	border-radius: var(--l974-radius-md, 10px);
	overflow: hidden;
	color: var(--l974-text, #333);
	background: var(--l974-surface, #fff);
}

.eqdir-docs__dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.eqdir-docs__dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--l974-border, #e5e5e5);
}

.eqdir-docs__dialog-title {
	margin: 0;
	font-size: 1.1rem;
	font-family: var(--l974-font-heading, serif);
}

.eqdir-docs__dialog-close {
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: var(--l974-text-muted, #666);
}

.eqdir-docs__dialog-body {
	padding: 1.25rem;
	overflow-y: auto;
	max-height: calc(80vh - 4rem);
	line-height: 1.6;
}

/* =========================================================================
 * V3.x additions: localité search, pre-launch counters + lead form, SEO
 * focus pillar pages, and the advertising slots.
 * ========================================================================= */

/* Pre-launch listing counters ([equarent_directory_compteur_*]). */
.eqdir-counter { display: inline-flex; align-items: baseline; gap: .25em; }
.eqdir-counter__value { font-weight: 700; }

/* Pre-launch e-mail capture form ([equarent_directory_lead_form]). */
.eqdir-lead-form { display: flex; flex-direction: column; gap: .75rem; max-width: 34rem; }
.eqdir-lead-form__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.eqdir-lead-form__row input[type="email"] { flex: 1 1 14rem; min-width: 0; padding: .6rem .8rem; }
.eqdir-lead-form__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .9em; }
.eqdir-lead-form__msg { margin: 0; font-size: .9em; }
/* On success the form collapses to just the confirmation: hide the fields, consent and button so the
   modal reduces to simply the thank-you message. */
.eqdir-lead-form--done { gap: 0; }
.eqdir-lead-form--done .eqdir-lead-form__row,
.eqdir-lead-form--done .eqdir-lead-form__consent { display: none; }
.eqdir-lead-form--done .eqdir-lead-form__msg {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--l974-ink);
}

/* SEO pillar page ([equarent_focus]). */
.eqdir-focus__header { margin-bottom: 1.25rem; }
.eqdir-focus__title { margin: 0 0 .4rem; }
.eqdir-focus__intro { margin: 0; opacity: .85; }

/* Advertising slots (rendered by the Ads marketplace). */
/* The box hugs the image (fit-content) so the "Ad" badge, positioned on the box's top-right,
 * always sits in the image corner — at any zoom (at 100% the inline width is unset). */
.eqdir-ad { position: relative; display: block; width: fit-content; margin: 0 auto 1rem; text-align: center; max-width: 100%; }
/* Slightly rounded corners on the rendered ad visuals (every slot, both front surfaces), to
 * match the already-rounded listing cards, map and advertiser-space UI. overflow:hidden on the
 * link so the image corners are clipped even though the <img> itself also carries the radius. */
.eqdir-ad img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: var(--l974-radius-sm, 6px); }
.eqdir-ad__link { display: inline-block; line-height: 0; border-radius: var(--l974-radius-sm, 6px); overflow: hidden; }
.eqdir-ad__tag {
	position: absolute; top: 4px; right: 4px;
	font-size: .62rem; text-transform: uppercase; letter-spacing: .04em;
	background: rgba(0,0,0,.55); color: #fff; padding: 1px 5px; border-radius: 3px;
}
.eqdir-ad--left, .eqdir-ad--right { margin-bottom: 1rem; }
/* The per-offer display zoom caps the aside's width inline; let the image track it. */
.eqdir-ad img { max-width: 100%; height: auto; }

/* Shortcode ad wrapper (ads="top,bottom,left,right"): banners top/bottom, skyscrapers flank the
 * content — left of the results, right of the map — so a skyscraper is never between the two. */
.eqdir-adwrap__top, .eqdir-adwrap__bottom { margin: 0 0 1rem; }
.eqdir-adwrap__bottom { margin: 1rem 0 0; }
.eqdir-adwrap__body { display: block; }
.eqdir-adwrap--has-left .eqdir-adwrap__body,
.eqdir-adwrap--has-right .eqdir-adwrap__body { display: flex; gap: 1.25rem; align-items: flex-start; }
.eqdir-adwrap__main { flex: 1 1 auto; min-width: 0; }
.eqdir-adwrap__flank { flex: 0 0 auto; position: sticky; top: calc(var(--eqdir-header-h, 0px) + 1rem); }
@media (max-width: 900px) {
	/* Stack the flanks above/below the content. align-items:stretch (overriding the desktop
	 * flex-start) lets the main column — and the map inside it — fill the full width; without it the
	 * column shrinks to its widest inline content and the map collapses to a sliver. The flanks keep
	 * their own centring via align-self. */
	.eqdir-adwrap--has-left .eqdir-adwrap__body,
	.eqdir-adwrap--has-right .eqdir-adwrap__body { flex-direction: column; align-items: stretch; }
	.eqdir-adwrap__flank { position: static; align-self: center; }
}

/* Per-device ad visibility (admin "Shown on" flags on each advertising product). A space hidden
 * on a surface is removed there; when it is a flank's only ad, the flank collapses too so the
 * stack leaves no empty gap (:has() is progressive — without it the space just hides). The
 * breakpoint matches the list/map layout switch (899/900px). */
@media (max-width: 899px) {
	.eqdir-ad--hide-mobile { display: none !important; }
	.eqdir-adwrap__flank:has(> .eqdir-ad--hide-mobile:only-child) { display: none; }
}
@media (min-width: 900px) {
	.eqdir-ad--hide-desktop { display: none !important; }
	.eqdir-adwrap__flank:has(> .eqdir-ad--hide-desktop:only-child) { display: none; }
}

/* Support tickets (front). */
.eqdir-tickets__new { margin-bottom: 1.5rem; }
.eqdir-ticket { border: 1px solid var(--l974-border, #e2e2e2); border-radius: 8px; margin-bottom: .6rem; padding: .25rem .75rem; }
.eqdir-ticket summary { cursor: pointer; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; padding: .5rem 0; }
.eqdir-ticket__msg { margin: .5rem 0; padding: .5rem .75rem; border-radius: 6px; background: rgba(0,0,0,.03); }
.eqdir-ticket__msg--admin { background: rgba(0,0,0,.06); }
.eqdir-ticket-form__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Advertiser ads space. */
.eqdir-ads-space__table { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; }
.eqdir-ads-space__table th, .eqdir-ads-space__table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--l974-border, #eee); vertical-align: middle; }
.eqdir-ad-book { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; font-size: .85em; }
.eqdir-ad-book__msg { font-size: .85em; }

/* Connect-listing edit modal (type + synced address + locality). */
.eqdir-connect-edit-tpl[hidden] { display: none; }
.eqdir-connect-edit__title { margin: 0 0 .5rem; font-size: 1.15rem; }
.eqdir-connect-edit__notice { margin: 0 0 1rem; padding: .6rem .8rem; border-radius: var(--l974-radius-sm, 6px); background: var(--l974-surface-alt, #FBF4E6); border: 1px solid var(--l974-border, #d7dce3); font-size: .85rem; }
.eqdir-connect-edit__form .eqdir-field { margin: 0 0 .9rem; }
.eqdir-connect-edit__form select { display: block; margin-top: .25rem; width: 100%; max-width: 22rem; }
.eqdir-connect-edit__addr { display: block; margin-top: .2rem; color: var(--l974-text-muted, #5b6672); }
.eqdir-connect-edit__form .eqdir-field__label { font-weight: 600; }

/* Visual preview modal (Manage my visuals). The modal SHRINK-WRAPS the visual so a tall
 * skyscraper gets a tall narrow modal (not a wide box with the image stuck to one side) and a
 * wide banner gets a short wide one — the visual keeps its aspect ratio with an even margin all
 * around. Scoped with :has() so only the preview modal is affected (other modals keep 760px). */
.eqdir-modal:has(.eqdir-adprev) {
	width: auto;
	max-width: min(92vw, 760px);
}
.eqdir-adprev { text-align: center; }
.eqdir-adprev__title { margin: 0 0 .25rem; font-size: 1.15rem; }
.eqdir-adprev__dim { margin: 0 0 .75rem; color: var(--l974-text-muted, #5b6672); font-size: .85rem; }
.eqdir-adprev__img { text-align: center; }
/* Bound the visual by BOTH axes so a vertical one is limited by height (and the modal narrows to
 * match its width) while a horizontal one is limited by width. 72vh leaves room for the title,
 * dimension line and the modal's own even padding within the 90vh modal cap. */
.eqdir-adprev__img img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: auto;
	max-width: 100%;
	/* Leaves room for the fixed title bar + the title/dimension lines within the 90vh modal cap. */
	max-height: 66vh;
	border-radius: var(--l974-radius-sm, 6px);
}

/* Booking detail modal (My space bookings). */
.eqdir-rsvdetail__title { margin: 0 0 .75rem; font-size: 1.15rem; }
.eqdir-rsvdetail__img { text-align: center; margin-bottom: .75rem; }
.eqdir-rsvdetail__img img { max-width: 100%; max-height: 10rem; height: auto; border-radius: var(--l974-radius-sm, 6px); }
.eqdir-rsvdetail__dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0; }
.eqdir-rsvdetail__dl dt { font-weight: 700; color: var(--l974-text-muted, #5b6672); }
.eqdir-rsvdetail__dl dd { margin: 0; }

/* My-space-bookings toolbar (a full-width cartouche) + pager. */
.eqdir-rsv-toolbar {
	display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end;
	margin: .5rem 0 1.25rem; padding: 1rem 1.25rem; width: 100%; box-sizing: border-box;
	background: var(--l974-surface-alt, #f7f9fb);
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
}
.eqdir-rsv-toolbar__field { margin: 0; display: flex; flex-direction: column; gap: .3rem; flex: 1 1 12rem; }
.eqdir-rsv-toolbar__field label { font-size: .8rem; font-weight: 600; }
.eqdir-rsv-toolbar__field select { width: 100%; }
.eqdir-rsv-toolbar__apply { margin: 0; }
.eqdir-rsv-table__detail { text-align: right; white-space: nowrap; }
.eqdir-rsv-pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin: .5rem 0 1rem; }
.eqdir-rsv-pager__pos { font-size: .85rem; color: var(--l974-text-muted, #5b6672); }
.eqdir-rsv-pager [aria-disabled="true"] { opacity: .5; pointer-events: none; }
.eqdir-notice { padding: .6rem .9rem; border-radius: 6px; }
.eqdir-notice--ok { background: rgba(0,128,0,.08); }
.eqdir-notice--err { background: rgba(200,0,0,.08); }

/* =========================================================================================
 * R-pub-4 refinements (advertising UI + account / subscriptions sub-tabs).
 * Appended last so these overrides win over the base rules above.
 * ========================================================================================= */

/* 1a. Availability + reservation calendars: ~double the 3-month frame, centred. */
.eqdir-cal--ads .eqdir-cal__months--grid {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	gap: 0.9rem;
}

.eqdir-cal--ads .eqdir-cal__day {
	font-size: 0.9rem;
}

.eqdir-cal--ads .eqdir-cal__dow {
	font-size: 0.72rem;
}

.eqdir-cal--ads .eqdir-cal__caption {
	font-size: 1rem;
}

@media (max-width: 900px) {
	.eqdir-cal--ads .eqdir-cal__months--grid {
		grid-template-columns: 1fr;
		max-width: 26rem;
	}
}

/* 1b. The segmented space/mode selectors and the ‹/› month nav sit centred above the grid. */
.eqdir-adbuy__block .eqdir-seg {
	display: flex;
	justify-content: center;
}

.eqdir-adbuy__ov,
.eqdir-adbuy__panel-cal {
	text-align: center;
	/* White calendar frame so it stands out against the tinted block (sections 1 and 4). */
	background: var(--l974-surface, #fff);
	border: 1px solid var(--l974-border, #d7dce3);
	border-radius: var(--l974-radius-md, 10px);
	padding: 0.75rem;
}

.eqdir-adbuy__ov .eqdir-cal__grid,
.eqdir-adbuy__panel-cal .eqdir-cal__grid {
	text-align: left;
}

/* 1c. More breathing room between the space buttons and the availability lead line. */
.eqdir-adbuy__block .eqdir-seg {
	margin: 0 auto 1.9rem;
}
.eqdir-adbuy__lead {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	text-align: center;
}

/* 1d. Structured availability tooltip widened ~50% so each mode line stays on one line. */
.eqdir-cal--ads .eqdir-cal__tip {
	min-width: 18rem;
	max-width: 24rem;
}

/* 1e. Colour legend placed under the calendars, centred. */
.eqdir-cal__legend--under {
	justify-content: center;
	margin: 0.9rem 0 0;
}

/* 2a. Placement example — IDENTICAL in "Manage banners" and "Broadcast": the block is split
   into two equal halves (offers/fields left, example right) and the example is a FIXED size,
   horizontally centred in the right half. Sizing is shared (global selectors) so the two views
   match exactly. The example is 30% larger than before. The vertical ("side") space sits on the
   LEFT of the mock (a left column), so it does not visually clash with the results map. */
.eqdir-adbuy__offers-wrap {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

@media (max-width: 782px) {
	.eqdir-adbuy__offers-wrap {
		grid-template-columns: 1fr;
	}
}

.eqdir-adbuy__preview {
	width: 28.6rem; /* +30% from 22rem; centred in the right half. */
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.eqdir-adbuy__screen-body {
	min-height: 13rem; /* +30% from 10rem. */
	/* Document order is left skyscraper · content · right skyscraper (no reverse needed). */
}

.eqdir-adbuy__zone {
	font-size: 1.04rem; /* +30% from 0.8rem. */
}

.eqdir-adbuy__zone--top,
.eqdir-adbuy__zone--bottom {
	height: 3.65rem; /* +30% from 2.8rem. */
}

.eqdir-adbuy__zone--left,
.eqdir-adbuy__zone--right {
	width: 7.15rem; /* +30% from 5.5rem. */
}

/* 2b. Checkout: centre the consent/waiver boxes and the pay button under the calendar. */
.eqdir-adbuy__checkout {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.eqdir-adbuy__consents,
.eqdir-adbuy__waiver {
	/* Match the pack-subscribe consents: no fieldset frame, full width, stacked column. */
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	max-width: none;
	margin: 0.75rem 0 0;
	padding: 0;
	border: 0;
}

.eqdir-adbuy__pay {
	width: auto;
	min-width: 16rem;
	margin: 0.75rem auto 0;
}

/* 3. Manage-banners create form: fields left half, the SAME centred page-mock aside right half.
   The base caps this form at 32rem; lift the cap so the block is as wide as the "Broadcast"
   block and the example lands at the identical size and position in both views. */
.eqdir-ad-create {
	max-width: none;
}

.eqdir-ad-create__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 2.25rem;
	align-items: center;
}

.eqdir-ad-create__aside {
	align-self: center;
}

.eqdir-ad-create__fields select {
	width: 100%;
	max-width: 26rem;
}

@media (max-width: 782px) {
	.eqdir-ad-create__grid {
		grid-template-columns: 1fr;
	}
}

/* 4. Account + Subscriptions sub-tab panels, centred on the page. */
.eqdir-compte {
	margin-left: auto;
	margin-right: auto;
}

.eqdir-compte__panel {
	max-width: 46rem;
	margin: 0 auto;
}

.eqdir-compte__panel .eqdir-compte__form {
	margin-left: auto;
	margin-right: auto;
}

.eqdir-compte__panel .eqdir-compte__form--grid fieldset {
	max-width: none;
}

.eqdir-compte__data {
	margin: 1.5rem auto 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--l974-border, #d7dce3);
}

.eqdir-compte__data-title {
	margin-top: 0;
}

/* Right-of-withdrawal (rétractation) control in the "My subscriptions" pack panel (3.13.0):
   set apart from the end-of-period cancellation units above, as a distinct, heavier action. */
.eqdir-abos__retract {
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--eqdir-border, rgba(0, 0, 0, 0.1));
}
.eqdir-abos__retract .eqdir-abos__resil-form {
	margin: 0;
}
.eqdir-abos__retract-note {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--l974-muted, #52606d);
}

/* Advertising reservations: read-only note + the per-campaign withdrawal list (3.15.0). */
.eqdir-adbuy__bookings-note {
	margin: 0.6rem 0 0;
	font-size: 0.9rem;
	color: var(--l974-muted, #52606d);
}
.eqdir-adbuy__retract {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--eqdir-border, rgba(0, 0, 0, 0.1));
}
.eqdir-adbuy__retract-note {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--l974-muted, #52606d);
}
.eqdir-adbuy__retract-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}
.eqdir-adbuy__retract-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.eqdir-adbuy__retract-label {
	font-weight: 600;
}
.eqdir-adbuy__retract-list form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0;
}