/**
 * Barre de recherche et fenêtre de filtres, inspirées d'Airbnb.
 * Accent : rouge Listeo. Neutres sombres pour les états actifs, plus lisibles
 * qu'un rouge partout.
 */

.hl-rebuilt {
	--hl-ink: #150e10;
	--hl-muted: #6b6151;
	--hl-line: #ddd7cc;
	--hl-soft: #eeebe5;
	--hl-accent: var( --hl-red, #961b1b );
}

.hl-modal {
	--hl-ink: #150e10;
	--hl-muted: #6b6151;
	--hl-line: #ddd7cc;
	--hl-soft: #eeebe5;
	--hl-accent: var( --hl-red, #961b1b );
}

/* Les commandes d'origine restent dans le formulaire, désactivées. */
.hl-rebuilt > .row,
.hl-rebuilt > .hl-search-submit,
.hl-rebuilt > button[type="submit"] {
	display: none !important;
}

.hl-search {
	margin: 0 0 8px;
	padding: 4px 0 14px;
}

/*
 * Barre collante sur ordinateur, calée sous l'en-tête fixe de Listeo (80 px),
 * plus la barre d'administration WordPress (32 px) quand on est connecté.
 * Fond plein aux couleurs de la colonne, sinon les annonces défilent dessous.
 */
@media ( min-width: 992px ) {
	.hl-search {
		position: sticky;
		top: 74px;
		z-index: 30;
		background: var( --hl-ivory-light, #f7f6f3 );
		box-shadow: none;
	}

	.admin-bar .hl-search {
		top: 106px;
	}

}

/*
 * Section du formulaire générique de Listeo, masquée sur les trois pages
 * d'univers : notre barre est posée dans le formulaire de la page, celle-ci
 * ne laissait qu'un bandeau vide de 81 px. Hors media query : sur téléphone
 * le vide était là aussi, et il se voyait davantage.
 */
.page-id-416 section.search,
.page-id-417 section.search,
.page-id-418 section.search {
	display: none;
}

.hl-hidden {
	display: none;
}

.hl-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.hl-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------------------------------------------------------------- Barre */

.hl-bar {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 66px;
	padding: 0 8px 0 0;
	border: 1px solid var( --hl-line );
	border-radius: 40px;
	background: var( --hl-ivory-light );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 ), 0 4px 12px rgba( 0, 0, 0, 0.05 );
}

.hl-bar-cell {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	min-height: 64px;
	padding: 10px 24px;
	border-radius: 40px;
	cursor: pointer;
	transition: background-color 0.15s;
}

.hl-bar-cell:hover,
.hl-bar-cell.is-open,
.hl-bar-cell:focus-within {
	background: #eeebe5;
}

.hl-bar-label {
	display: block;
	margin: 0 0 2px;
	color: var( --hl-ink );
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
}

.hl-bar-value {
	display: block;
	overflow: hidden;
	color: var( --hl-muted );
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hl-bar-value.is-set {
	color: var( --hl-ink );
	font-weight: 600;
}

.hl-bar-sep {
	flex: 0 0 1px;
	align-self: center;
	height: 32px;
	background: var( --hl-line );
}

.hl-bar-cell:hover + .hl-bar-sep,
.hl-bar-sep:has( + .hl-bar-cell:hover ) {
	opacity: 0;
}

/* Champs natifs de Listeo déplacés dans la barre : on efface leur habillage. */
.hl-bar .hl-native {
	position: static;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.hl-bar .hl-native input,
.hl-bar .hl-native input:focus {
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --hl-ink );
	font-size: 14px;
	line-height: 1.3;
	text-overflow: ellipsis;
}

.hl-bar .hl-native input::placeholder {
	color: var( --hl-muted );
	opacity: 1;
}

.hl-bar .hl-native > i,
.hl-bar .hl-native > span > i,
.hl-bar .hl-native .fa,
.hl-bar .hl-native .sl,
.hl-bar .hl-native > a {
	display: none !important;
}

.hl-bar-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	min-width: 48px;
	margin: 0 0 0 8px;
	padding: 0 16px;
	border: 0;
	border-radius: 24px;
	background: var( --hl-accent );
	color: var( --hl-ivory );
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s;
}

.hl-bar-submit:hover {
	filter: brightness( 0.93 );
}

.hl-bar-submit .hl-icon {
	width: 16px;
	height: 16px;
}

/* Fenêtre surgissante des compteurs de la barre. */
.hl-pop {
	position: absolute;
	top: calc( 100% + 10px );
	right: 0;
	z-index: 40;
	display: none;
	width: 340px;
	max-width: calc( 100vw - 32px );
	padding: 8px 24px;
	border-radius: 24px;
	background: var( --hl-ivory-light );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.2 );
	cursor: default;
}

.hl-bar-cell.is-open .hl-pop {
	display: block;
}

/* ------------------------------------------------------------ Pastilles */

.hl-chips {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0 0;
}

.hl-filters-button,
.hl-chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	height: 38px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var( --hl-line );
	border-radius: 999px;
	background: var( --hl-ivory-light );
	color: var( --hl-ink );
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.hl-filters-button:hover,
.hl-chip:hover {
	border-color: var( --hl-ink );
}

.hl-chip.is-active,
.hl-filters-button.has-filters {
	border-color: var( --hl-ink );
	background: var( --hl-soft );
	box-shadow: inset 0 0 0 1px var( --hl-ink );
	font-weight: 600;
}

.hl-badge:empty {
	display: none;
}

.hl-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 10px;
	background: var( --hl-ink );
	color: var( --hl-ivory );
	font-size: 12px;
	font-weight: 700;
}

.hl-chips-sep {
	flex: 0 0 1px;
	height: 24px;
	background: var( --hl-line );
}

.hl-chips-track {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
	min-width: 0;
	padding: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient( to right, #000 88%, transparent );
	mask-image: linear-gradient( to right, #000 88%, transparent );
}

.hl-chips-track::-webkit-scrollbar {
	display: none;
}

/* -------------------------------------------------------------- Fenêtre */

html.hl-modal-open,
html.hl-modal-open body {
	overflow: hidden;
}

.hl-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
}

.hl-modal.is-open {
	display: flex;
}

/*
 * Animer le fond et la fenêtre séparément. Une animation d'opacité posée sur
 * le conteneur empêchait le fond translucide de se repeindre : la page
 * n'était pas assombrie derrière la fenêtre.
 */
.hl-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	animation: hl-fade 0.18s ease-out;
}

.hl-modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 760px;
	max-height: 100%;
	border-radius: 16px;
	background: var( --hl-ivory-light );
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.28 );
	animation: hl-rise 0.22s ease-out;
}

.hl-modal-head {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	padding: 0 64px;
	border-bottom: 1px solid #eeebe5;
}

.hl-modal-title {
	margin: 0;
	color: var( --hl-ink );
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}

.hl-modal-close {
	position: absolute;
	top: 50%;
	left: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: -18px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --hl-ink );
	cursor: pointer;
}

.hl-modal-close:hover {
	background: var( --hl-soft );
}

.hl-modal-body {
	flex: 1 1 auto;
	padding: 0 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hl-modal-foot {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	border-top: 1px solid #eeebe5;
}

.hl-clear {
	margin: 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.hl-clear:hover {
	background: var( --hl-soft );
}

.hl-apply {
	margin: 0;
	padding: 14px 24px;
	border: 0;
	border-radius: 999px;
	background: var( --hl-ink );
	color: var( --hl-ivory );
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s;
}

.hl-apply:hover {
	background: #000;
}

/* -------------------------------------------------------------- Sections */

.hl-section {
	padding: 28px 0;
	border-bottom: 1px solid #eeebe5;
}

.hl-section:last-child {
	border-bottom: 0;
}

.hl-section-title {
	margin: 0 0 18px;
	color: var( --hl-ink );
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.hl-group-title {
	margin: 20px 0 10px;
	color: var( --hl-muted );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.hl-cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px;
}

.hl-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding: 18px 16px;
	border: 1px solid var( --hl-line );
	border-radius: 12px;
	background: var( --hl-ivory-light );
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.hl-card:hover {
	border-color: var( --hl-ink );
}

.hl-card.is-active {
	border-color: var( --hl-ink );
	background: var( --hl-soft );
	box-shadow: inset 0 0 0 1px var( --hl-ink );
}

.hl-card-title {
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.hl-card-hint {
	color: var( --hl-muted );
	font-size: 13px;
	line-height: 1.4;
}

.hl-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hl-pill {
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var( --hl-line );
	border-radius: 999px;
	background: var( --hl-ivory-light );
	color: var( --hl-ink );
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.hl-pill:hover {
	border-color: var( --hl-ink );
}

.hl-pill.is-active {
	border-color: var( --hl-ink );
	background: var( --hl-ink );
	color: var( --hl-ivory );
}

/* Compteurs */
.hl-counter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
}

.hl-counter + .hl-counter {
	border-top: 1px solid #eeebe5;
}

.hl-counter-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hl-counter-label {
	color: var( --hl-ink );
	font-size: 16px;
	font-weight: 500;
}

.hl-counter-hint {
	color: var( --hl-muted );
	font-size: 14px;
}

.hl-counter-controls {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hl-counter-value {
	min-width: 72px;
	color: var( --hl-ink );
	font-size: 16px;
	text-align: center;
}

.hl-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 1px solid #bcb2a1;
	border-radius: 50%;
	background: var( --hl-ivory-light );
	color: var( --hl-muted );
	cursor: pointer;
}

.hl-round .hl-icon {
	width: 12px;
	height: 12px;
}

.hl-round:hover:not( :disabled ) {
	border-color: var( --hl-ink );
	color: var( --hl-ink );
}

.hl-round:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

/* Prix : deux champs compacts en pilule, aux extrémités du curseur. */
.hl-price {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.hl-price-field {
	display: flex;
	flex: 0 1 140px;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
	cursor: text;
}

.hl-price-label {
	color: var( --hl-muted );
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}

.hl-price-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	height: 44px;
	padding: 0 16px;
	border: 1px solid #bcb2a1;
	border-radius: 999px;
	background: var( --hl-ivory-light );
	transition: border-color 0.15s, box-shadow 0.15s;
}

.hl-price-field:focus-within .hl-price-line {
	border-color: var( --hl-ink );
	box-shadow: inset 0 0 0 1px var( --hl-ink );
}

.hl-modal .hl-price-line input,
.hl-modal .hl-price-line input:focus {
	width: 5.5ch;
	min-width: 0;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: right;
	-moz-appearance: textfield;
}

.hl-price-line input::-webkit-outer-spin-button,
.hl-price-line input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hl-price-unit {
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
}

/* Équipements */
.hl-checks {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 4px 24px;
}

.hl-check {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 10px 0;
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

.hl-check input {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid #bcb2a1;
	border-radius: 5px;
	background: var( --hl-ivory-light ) center / 14px no-repeat;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.hl-check input:hover {
	border-color: var( --hl-ink );
}

.hl-check input:checked {
	border-color: var( --hl-ink );
	background-color: var( --hl-ink );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='4' d='m5 17 7 7L27 9'/%3E%3C/svg%3E" );
}

.hl-check input:focus-visible {
	outline: 2px solid var( --hl-ink );
	outline-offset: 2px;
}

.hl-more {
	margin: 18px 0 0;
	padding: 12px 20px;
	border: 1px solid var( --hl-ink );
	border-radius: 999px;
	background: var( --hl-ivory-light );
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.hl-more:hover {
	background: var( --hl-soft );
}

@keyframes hl-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes hl-rise {
	from { opacity: 0; transform: translateY( 24px ); }
	to { opacity: 1; transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-modal-backdrop,
	.hl-modal-dialog {
		animation: none;
	}
}

/* ---------------------------------------------------------------- Mobile */

@media ( max-width: 767px ) {
	.hl-bar {
		flex-direction: column;
		align-items: stretch;
		padding: 6px;
		border-radius: 24px;
	}

	.hl-bar-cell {
		min-height: 56px;
		padding: 8px 18px;
		border-radius: 18px;
	}

	.hl-bar-sep {
		flex-basis: auto;
		width: calc( 100% - 36px );
		height: 1px;
		margin: 0 18px;
	}

	.hl-bar-submit {
		margin: 6px 0 0;
	}

	.hl-pop {
		right: auto;
		left: 0;
		width: 100%;
	}

	.hl-modal {
		align-items: flex-end;
		padding: 0;
	}

	.hl-modal-dialog {
		max-width: none;
		height: 100%;
		border-radius: 0;
	}

	.hl-cards {
		grid-template-columns: 1fr;
	}

	.hl-checks {
		grid-template-columns: 1fr;
	}

	.hl-section-title {
		font-size: 18px;
	}
}

/* ------------------------------------------------ Ajouts du 2026-09-15 */

.hl-section-hint {
	margin: -10px 0 18px;
	color: var( --hl-muted );
	font-size: 14px;
	line-height: 1.4;
}

/* Intensité de la réputation, visible seulement si « Réputé hanté ». */
.hl-subsection {
	margin: 18px 0 0;
	padding: 18px 20px;
	border-radius: 12px;
	background: var( --hl-soft );
	animation: hl-fade 0.18s ease-out;
}

.hl-subsection-title {
	margin: 0 0 4px;
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
}

.hl-subsection-hint {
	margin: 0 0 14px;
	color: var( --hl-muted );
	font-size: 13px;
	line-height: 1.4;
}

.hl-subsection .hl-pill:not( .is-active ) {
	background: var( --hl-ivory-light );
}

/* Double curseur de prix, poignées dessinées. */
.hl-range {
	position: relative;
	height: 32px;
	margin: 6px 14px 20px;
	touch-action: none;
	cursor: pointer;
}

.hl-range-track {
	position: absolute;
	top: 50%;
	right: 0;
	left: 0;
	height: 2px;
	margin-top: -1px;
	border-radius: 1px;
	background: var( --hl-line );
}

.hl-range-fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var( --hl-ink );
}

.hl-range-thumb {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 1px solid #bcb2a1;
	border-radius: 50%;
	background: var( --hl-ivory-light );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.18 );
	cursor: grab;
	transition: transform 0.12s, box-shadow 0.12s;
}

.hl-range-thumb:hover {
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.25 );
}

.hl-range.is-dragging .hl-range-thumb:focus {
	cursor: grabbing;
	transform: scale( 1.08 );
}

.hl-range-thumb:focus {
	outline: none;
}

.hl-range-thumb:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --hl-ink );
}

/* Formulaire créé sur les pages croisées, sans formulaire Listeo. */
.hl-synthetic {
	margin: 0 0 8px;
}

.hl-synthetic > .input-with-icon {
	display: none;
}

/* Bulle « taper et appuyer sur Entrée » de Listeo : elle recouvrait l'intitulé. */
.hl-bar .type-and-hit-enter {
	display: none !important;
}

/* ------------------------------------------------ Ajouts du 2026-09-16 */

.hl-cards .hl-card:first-child .hl-card-title {
	font-weight: 600;
}

/* Calendrier */
.hl-bar-cell.is-dates {
	position: static;
}

.hl-cal-pop {
	right: auto;
	left: 50%;
	width: 720px;
	max-width: calc( 100vw - 32px );
	padding: 24px 28px 20px;
	border-radius: 28px;
	transform: translateX( -50% );
}

.hl-cal-body {
	position: relative;
}

.hl-cal-months {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 40px;
}

.hl-cal-nav {
	position: absolute;
	top: -4px;
	z-index: 2;
}

.hl-cal-nav.is-prev {
	left: 0;
}

.hl-cal-nav.is-next {
	right: 0;
}

.hl-cal-title {
	margin: 0 0 14px;
	color: var( --hl-ink );
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	text-transform: capitalize;
}

.hl-cal-grid {
	display: grid;
	grid-template-columns: repeat( 7, minmax( 0, 1fr ) );
	row-gap: 2px;
}

.hl-cal-wd {
	padding: 0 0 8px;
	color: var( --hl-muted );
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.hl-bar .hl-cal-day {
	position: relative;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --hl-ink );
	font-size: 14px;
	font-weight: 600;
	line-height: 44px;
	cursor: pointer;
}

.hl-bar .hl-cal-day::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42px;
	height: 42px;
	max-width: 100%;
	border: 1.5px solid transparent;
	border-radius: 50%;
	pointer-events: none;
}

.hl-bar .hl-cal-day:hover:not( :disabled )::after {
	border-color: var( --hl-ink );
}

.hl-bar .hl-cal-day:disabled {
	color: #bcb2a1;
	text-decoration: line-through;
	cursor: default;
}

.hl-bar .hl-cal-day.in-range {
	background: var( --hl-soft );
}

.hl-bar .hl-cal-day.is-start,
.hl-bar .hl-cal-day.is-end {
	z-index: 1;
	color: var( --hl-ivory );
}

.hl-bar .hl-cal-day.is-start::before,
.hl-bar .hl-cal-day.is-end::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: auto;
	width: 42px;
	height: 42px;
	max-width: 100%;
	border-radius: 50%;
	background: var( --hl-ink );
}

.hl-bar .hl-cal-day.is-until::after {
	border-color: var( --hl-ink );
}

.hl-bar .hl-cal-day.is-today:not( .is-start ):not( .is-end ) {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hl-cal-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #eeebe5;
}

.hl-cal-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hl-cal-flex .hl-pill {
	padding: 8px 14px;
	font-size: 13px;
}

.hl-cal-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.hl-cal-actions .hl-apply {
	padding: 10px 20px;
	font-size: 15px;
}

/* Accueil : choix de l'univers au-dessus de la barre. */
.hl-home-form > :not( .hl-search ) {
	display: none !important;
}

.hl-home-form {
	display: block !important;
	width: 100%;
	max-width: 860px;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.hl-search.hl-home {
	position: static;
	margin: 0;
	padding: 0;
	background: none;
	box-shadow: none;
}

.hl-tabs {
	display: inline-flex;
	gap: 4px;
	margin: 0 0 14px;
	padding: 4px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.85 );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.08 );
}

.hl-tab {
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var( --hl-ink );
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.hl-tab:hover {
	background: rgba( 0, 0, 0, 0.06 );
}

.hl-tab.is-active {
	background: var( --hl-ink );
	color: var( --hl-ivory );
}

@media ( max-width: 767px ) {
	.hl-cal-pop {
		left: 0;
		width: 100%;
		max-width: none;
		padding: 18px 14px;
		transform: none;
	}

	.hl-cal-months {
		grid-template-columns: 1fr;
	}

	.hl-cal-month + .hl-cal-month {
		display: none;
	}

	.hl-cal-actions {
		width: 100%;
		justify-content: space-between;
	}

	.hl-tabs {
		display: flex;
	}

	.hl-tab {
		flex: 1 1 0;
		padding: 10px 8px;
		font-size: 14px;
	}

	.hl-price-field {
		flex-basis: 120px;
	}
}

/* Destination : champ, suggestions, localisation. */
.hl-loc-row {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}

.hl-bar .hl-loc-input,
.hl-bar .hl-loc-input:focus {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --hl-ink );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
}

.hl-bar .hl-loc-input::placeholder {
	color: var( --hl-muted );
	font-weight: 400;
	opacity: 1;
}

.hl-loc-clear,
.hl-loc-locate {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --hl-muted );
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.hl-loc-clear[hidden] {
	display: none !important;
}

.hl-loc-clear .hl-icon {
	width: 10px;
	height: 10px;
}

.hl-loc-clear {
	background: #ddd7cc;
	color: var( --hl-ink );
	width: 20px;
	height: 20px;
}

.hl-loc-locate:hover {
	background: #ddd7cc;
	color: var( --hl-ink );
}

.hl-loc-locate.is-busy .hl-icon {
	animation: hl-spin 1s linear infinite;
}

@keyframes hl-spin {
	to { transform: rotate( 360deg ); }
}

.hl-loc-pop {
	right: auto;
	left: 0;
	width: 420px;
	padding: 12px;
	border-radius: 24px;
}

.hl-loc-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hl-bar .hl-loc-item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var( --hl-ink );
	text-align: left;
	cursor: pointer;
}

.hl-bar .hl-loc-item.is-active,
.hl-bar .hl-loc-item:hover {
	background: var( --hl-soft );
}

.hl-loc-icon {
	display: inline-flex;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: #eeebe5;
	color: var( --hl-ink );
}

.hl-loc-icon .hl-icon {
	width: 20px;
	height: 20px;
}

.hl-loc-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.hl-loc-title {
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hl-loc-sub {
	overflow: hidden;
	color: var( --hl-muted );
	font-size: 13px;
	line-height: 1.3;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hl-loc-note {
	margin: 6px 10px;
	color: var( --hl-muted );
	font-size: 13px;
	line-height: 1.4;
}

@media ( max-width: 767px ) {
	.hl-loc-pop {
		width: 100%;
	}
}

/* Voyageurs détaillés. */
.hl-guests-pop {
	width: 380px;
}

.hl-counter-value.is-compact {
	min-width: 28px;
}

.hl-guests-note {
	margin: 4px 0 12px;
	color: var( --hl-muted );
	font-size: 12px;
	line-height: 1.45;
}

/* Carte : interrupteur de synchronisation et zone vide. */
.hl-map-control {
	position: absolute;
	right: 0;
	bottom: 24px;
	left: 0;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto;
	padding: 10px 18px;
	width: -moz-fit-content;
	width: fit-content;
	max-width: calc( 100% - 32px );
	border-radius: 999px;
	background: var( --hl-ivory-light );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.25 );
	color: var( --hl-ink );
	font-size: 14px;
	line-height: 1.2;
}

.hl-map-count {
	font-weight: 600;
	white-space: nowrap;
}

.hl-map-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var( --hl-muted );
	font-size: 13px;
	font-weight: 400;
	cursor: pointer;
}

.hl-map-toggle input {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --hl-accent );
	cursor: pointer;
}

.hl-map-empty {
	padding: 28px 24px;
	border-radius: 12px;
	background: var( --hl-ivory-light );
	text-align: left;
}

.hl-map-empty h3 {
	margin: 0 0 6px;
	color: var( --hl-ink );
	font-size: 20px;
	font-weight: 700;
}

.hl-map-empty p {
	margin: 0;
	color: var( --hl-muted );
	font-size: 15px;
	line-height: 1.45;
}

.hl-map-empty[hidden] {
	display: none !important;
}

@media ( max-width: 767px ) {
	.hl-map-control {
		bottom: 12px;
		padding: 8px 14px;
		font-size: 13px;
	}
}

/* ------------------------------------------------ Cartes d'annonces */

/*
 * Mise en page demandée par la cliente, la même partout : image arrondie,
 * contenu aligné à gauche en dessous, niveau de peur à droite du titre, prix
 * et repères chiffrés. Listeo a deux balisages de carte, l'ancien (compact,
 * pages de résultats) et le nouveau (« nl », accueil et carrousels) : les deux
 * sont traités ici. Aucun gabarit de Listeo n'est remplacé.
 */

/* Barre de tri et bascule grille / liste, retirées à la demande de la cliente. */
.listings-container .layout-switcher,
.listings-container .sort-by,
.fullwidth-filters .sort-by,
.layout-switcher {
	display: none !important;
}

.listings-container .row.margin-bottom-25 {
	margin-bottom: 0 !important;
}

/* ---- Ancien balisage : pages de résultats ---- */

.listing-item-container.compact {
	background: none;
	box-shadow: none;
}

.listing-item-container.compact .listing-item {
	display: flex;
	flex-direction: column;
	height: auto;
	background: none;
}

.listing-item-container.compact .listing-item img,
.listing-card-nl .listing-image-container-nl img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto !important;
	border-radius: 0;
	object-fit: cover;
	transform: none !important;
	transition: none !important;
}

.listing-item-container.compact .listing-item::after,
.listing-item-container.compact .listing-item::before,
.listing-item-container.compact .listing-item-content::before,
.listing-item-container.compact .listing-item-content::after {
	display: none !important;
}

.listing-item-container.compact .listing-item-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: block;
	padding: 10px 0 0 !important;
	background: none;
	text-align: left;
}

.listing-item-container.compact .listing-item-content h3 {
	margin: 0 92px 4px 0;
	padding: 0;
	color: #150e10;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-shadow: none;
	text-align: left;
}

/* Adresse d'origine remplacée par notre ligne « type · lieu ». */
.listing-item-container.compact .listing-item-content > span:not( .hl-card ) {
	display: none;
}

.listing-item-container.compact .numerical-rating,
.listing-item-container.compact .listing-small-badges-container {
	display: none;
}

.listing-item-container.compact .like-icon {
	top: 12px;
	right: 12px;
	z-index: 2;
}

/* ---- Nouveau balisage : accueil et carrousels ---- */

/*
 * Les cartes du carrousel sont exactement celles des pages d'univers : pas de
 * boîte, pas de filet, pas d'ombre. Une photographie aux angles doux, le bloc
 * de texte dessous, posés à même le fond de la section.
 */
.listing-card-nl {
	overflow: visible;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.listing-card-nl .listing-image-container-nl {
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 14px !important;
	line-height: 0;
	overflow: hidden;
}

.listing-card-nl .slider-wrapper-nl,
.listing-card-nl .listing-image-container-nl > a {
	display: block;
	height: auto !important;
	line-height: 0;
}



.listing-card-nl .listing-details-nl {
	display: block !important;
	padding: 10px 0 0 !important;
	background: none !important;
	text-align: left;
}

.listing-card-nl .listing-title-nl {
	display: block !important;
	min-height: 0 !important;
	margin: 0 92px 4px 0 !important;
	padding: 0 !important;
	color: #150e10 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
}

/* Conteneur de badges vide, qui ajoutait une ligne sous le titre. */
.listing-card-nl .listing-title-badges-nl:empty {
	display: none !important;
}

/* Éléments d'origine remplacés par notre bloc. */
.listing-card-nl .listing-location-nl,
.listing-card-nl .listing-features-nl,
.listing-card-nl .details-sidebar-col-nl,
.listing-card-nl .listing-category-tag-nl,
.listing-card-nl .slider-arrow-nl {
	display: none !important;
}

.listing-card-nl .details-main-col-nl {
	position: relative;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.listing-card-nl .favorite-icon-nl {
	top: 12px;
	right: 12px;
}

/* ---- Notre bloc, commun aux deux balisages ---- */

.hl-card,
.hl-card span:not( .hl-card-stat ) {
	background: none !important;
	text-shadow: none !important;
}

.hl-card {
	display: block !important;
	position: static;
	margin: 0 !important;
	padding: 0 !important;
	color: #150e10 !important;
	font-size: 14px;
	line-height: 1.25 !important;
	text-align: left !important;
}

.hl-card-fear {
	position: absolute;
	top: 10px;
	right: 0;
	display: inline-flex !important;
	gap: 3px;
}

.listing-card-nl .hl-card-fear {
	top: 12px;
}

img.hl-fear-icon {
	width: 19px !important;
	height: 21px !important;
	min-width: 0 !important;
	max-width: none !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	object-fit: contain;
	transform: none !important;
	box-shadow: none !important;
}

.hl-fear-icon.is-off {
	opacity: 0.18;
	filter: grayscale( 1 );
}

.hl-card-type {
	display: block !important;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important;
	color: var( --hl-red ) !important;
	font-size: 13px !important;
	font-weight: 500;
	line-height: 1.35 !important;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.hl-card-bottom {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}

.hl-card-price {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #444 !important;
	font-size: 13px !important;
	line-height: 1.3 !important;
}

.hl-card-price strong {
	color: var( --hl-red ) !important;
	font-size: 17px !important;
	font-weight: 700;
}

.hl-card-total {
	display: block !important;
	color: #6b6151 !important;
	font-size: 12px !important;
	font-weight: 500;
}

.hl-card-stats {
	display: inline-flex !important;
	flex: 0 0 auto;
	gap: 6px;
}

.hl-card-stat {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	height: 22px;
	padding: 0 10px !important;
	border-radius: 999px;
	background: var( --hl-red ) !important;
	color: var( --hl-ivory ) !important;
	font-size: 12px !important;
	font-weight: 600;
	line-height: 1 !important;
}

.hl-card-stat svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

@media ( max-width: 767px ) {
	.listing-item-container.compact .listing-item-content h3,
	.listing-card-nl .listing-title-nl {
		margin-right: 80px !important;
	}
}

/* Carrousel de photos des fiches. */
.hl-slider {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	line-height: 0;
}

.hl-slider-arrow {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: -14px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: #150e10;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.15s, background-color 0.15s;
}

.hl-slider-arrow.is-prev {
	left: 10px;
}

.hl-slider-arrow.is-next {
	right: 10px;
}

.hl-slider-arrow .hl-icon {
	width: 11px;
	height: 11px;
}

.hl-slider:hover .hl-slider-arrow {
	opacity: 1;
}

.hl-slider-arrow:hover {
	background: var( --hl-ivory-light );
}

.hl-slider-dots {
	position: absolute;
	right: 0;
	bottom: 8px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	line-height: 1;
	pointer-events: none;
}

.hl-slider-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.6 );
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.4 );
	transition: background-color 0.15s, transform 0.15s;
}

.hl-slider-dot.is-active {
	background: var( --hl-ivory-light );
	transform: scale( 1.25 );
}

/* Écrans tactiles : on fait glisser, pas de flèches. */
@media ( hover: none ) {
	.hl-slider-arrow {
		display: none;
	}
}

/* Lieu sans réputation paranormale : cercle barré, plus discret que les têtes. */
.hl-fear-icon.is-calm {
	width: 17px !important;
	height: 17px !important;
	opacity: 0.55;
}

.hl-card-fear.is-calm {
	top: 12px;
}

/* Cœur des favoris : basculement doux, sans clignotement. */
.listing-item-container .like-icon,
.listing-card-nl .favorite-icon-nl .save {
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.listing-item-container .like-icon:hover,
.listing-card-nl .favorite-icon-nl .save:hover {
	transform: scale( 1.08 );
}

.hl-busy {
	opacity: 0.55;
	pointer-events: none;
}

/* ------------------------------------------ Rouge de la marque partout */

/*
 * La couleur principale du thème est réglée dans l'outil de personnalisation.
 * Restent quelques roses écrits en dur, ici ramenés au rouge de la marque.
 */
.reset-button,
.reset-button:hover,
.listeo-reset-button {
	color: var( --hl-red ) !important;
	border-color: var( --hl-red ) !important;
}

.elementor-page .elementor-button[class*="elementor-size-"] {
	background-color: var( --hl-red ) !important;
}

.elementor-page .elementor-button[class*="elementor-size-"]:hover {
	background-color: #7d1616 !important;
}

/* Formes décoratives de la page d'accueil de démonstration. */
svg [fill="#ff0066" i] {
	fill: var( --hl-red );
}

/* ------------------------------------------- Bulles de la carte */

/* La bulle reçoit une copie de la fiche : rien à restyler, juste le cadre. */
.leaflet-popup-content-wrapper {
	padding: 0 !important;
	border-radius: 16px !important;
	background: var( --hl-ivory-light ) !important;
	overflow: hidden;
}

.leaflet-popup-content {
	width: 280px !important;
	margin: 0 !important;
	padding: 10px 10px 12px !important;
}

.hl-popup-card .listing-item-container,
.hl-popup-card .listing-card-nl {
	display: block;
	width: 100%;
}

.hl-popup-card .listing-item-content,
.hl-popup-card .listing-details-nl {
	padding: 8px 2px 0 !important;
}

.hl-popup-card .hl-slider {
	border-radius: 12px;
}

/*
 * Fermeture et favori, côte à côte.
 *
 * Les deux sont posés dans le coin de la vignette et se chevauchaient : le
 * cœur passait sous la croix. La croix garde sa place, celle qu'on cherche
 * d'instinct, et le cœur se range à sa gauche, centres alignés.
 */
.hl-popup-card .like-icon,
.hl-popup-card .favorite-icon-nl,
.hl-popup-card .listing-item-container.compact .like-icon,
.hl-popup-card .listing-card-nl .favorite-icon-nl {
	top: 8px;
	right: 46px;
}

/*
 * Dans la bulle, les deux commandes sont plus petites que sur les fiches de
 * la liste : la vignette y fait 260 px de large, deux cercles de 40 px la
 * mangeaient.
 */
.hl-popup-card .listing-item-container .like-icon,
.hl-popup-card .listing-item-container .save,
.hl-popup-card .favorite-icon-nl .save {
	width: 32px !important;
	height: 32px !important;
	/* Les fiches de la liste posent un plancher de 40 px : il gagnait sur la
	   largeur, et le cœur restait grand. */
	min-width: 32px !important;
	min-height: 32px !important;
}

.hl-popup-card .hl-heart {
	font-size: 14px !important;
}

/*
 * La croix est ancrée sur la bulle, le cœur sur la vignette : dix pixels de
 * padding séparent les deux repères, d'où ce décalage qui les remet sur la
 * même ligne.
 */
.leaflet-popup-close-button {
	top: 18px !important;
	right: 18px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 ) !important;
	color: #150e10 !important;
	font-size: 15px !important;
	line-height: 32px !important;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.3 );
}

/* --------------------------------------------- En-tête : menu centré */

@media ( min-width: 1100px ) {
	#header .container {
		position: relative;
	}

	#header #navigation.style-1 {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: 0;
		transform: translate( -50%, -50% );
	}

	#header #navigation.style-1 > ul {
		display: flex;
		align-items: center;
		gap: 6px;
	}
}

/* En-tête : tout aligné verticalement sur la même ligne. */
#header .container {
	align-items: center;
}

#header .left-side {
	display: flex;
	align-items: center;
}

#header #logo {
	display: flex;
	align-items: center;
	margin: 0;
}

#header #logo img {
	display: block;
}

/* Copie de fiche dans une bulle : pas de marge de grille, pas d'effet de survol. */
.hl-popup-card > * {
	margin: 0 !important;
}

.hl-popup-card,
.hl-popup-card *,
.hl-popup-card *:hover {
	transition: none !important;
}

/*
 * La bulle ne rejoue pas les effets de survol de la vignette.
 *
 * L'exclusion des icônes de peur est indispensable : elles portent leur
 * propre opacité pour distinguer les crans éteints, et la règle les
 * rallumait tous au passage de la souris. Le niveau de peur semblait alors
 * monter d'un cran.
 */
.hl-popup-card .listing-item-container:hover .listing-item,
.hl-popup-card .listing-item:hover,
.hl-popup-card .listing-item-container:hover img:not( .hl-fear-icon ),
.hl-popup-card img:not( .hl-fear-icon ):hover {
	transform: none !important;
	box-shadow: none !important;
	opacity: 1 !important;
	filter: none !important;
}

.hl-popup-card .hl-fear-icon.is-off,
.hl-popup-card .listing-item-container:hover .hl-fear-icon.is-off,
.hl-popup-card .hl-fear-icon.is-off:hover {
	opacity: 0.18 !important;
	filter: grayscale( 1 ) !important;
}

/* Les flèches du carrousel et le cœur restent actifs. */
.hl-popup-card .hl-slider-arrow,
.hl-popup-card .like-icon,
.hl-popup-card .favorite-icon-nl .save {
	transition: opacity 0.15s ease !important;
}

/* Aucun effet au survol sur les fiches, ni dans la liste ni dans les bulles. */
.listing-item-container:hover,
.hl-popup-card .listing-item-container:hover,
.listing-card-nl:hover,
.listing-card-container-nl:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Léger décalage de la seconde ligne de prix (total du séjour). */
.listing-item-container .hl-card-total,
.hl-popup-card .hl-card-total {
	margin-top: 3px !important;
}

/* =====================================================================
 * Trame des cartes · 1.61.0
 *
 * Même échelle que la fiche d'annonce : 14 / 15 / 16, graisse 600 pour les
 * titres, et le rouge de marque réservé à l'action et au niveau de peur.
 * Relevé avant correction : titre 16/700, lieu 16/400, type 13 en rouge,
 * prix 17/700, pastilles 12 px.
 * ===================================================================== */

.hl-card-title,
.listing-item-container .listing-title h3,
.listing-card-nl .listing-title-nl {
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em;
	line-height: 1.35 !important;
}

.hl-card-sub,
.listing-item-container .listing-location,
.listing-card-nl .listing-location-nl {
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
}

/* Le type de lieu est une information, pas une alerte : gris, pas rouge. */
.hl-card-type,
.hl-card-type a {
	color: #6b6151 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

.hl-card-price,
.hl-card-price strong {
	font-size: 16px !important;
	line-height: 1.35 !important;
}

.hl-card-price strong {
	font-weight: 700 !important;
}

.hl-card-stat,
.listing-card-nl .listing-category-tag-nl {
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

/* Cibles tactiles des cartes : cœur et flèches du carrousel. */
.listing-item-container .like-icon,
.listing-card-nl .favorite-icon-nl .save,
.hl-slider-arrow {
	min-width: 40px;
	min-height: 40px;
}

/*
 * Page Contact : le gabarit de Listeo affiche une carte de New York et un
 * encart « Our Office » codés en dur dans le thème, avec une image restée sur
 * l'ancien domaine de démonstration. On les retire ; le formulaire et le texte
 * de la page suffisent tant que la cliente n'a pas d'adresse à publier.
 */
body.page-id-154 #singleListingMap-container,
body.page-id-154 .address-box-container {
	display: none !important;
}

body.page-id-154 .container .row .col-md-8,
body.page-id-154 .container .row .col-md-12 {
	padding-top: 0;
}

/* =====================================================================
 * Cœur des favoris, identique partout · 1.68.0
 *
 * Listeo dessine deux cœurs pleins superposés en absolu, qu'on ne peut pas
 * piloter proprement. Ils sont neutralisés, et le script pose un cœur unique :
 * contour au repos, plein en favori, avec la même pulsation qu'ailleurs.
 * ===================================================================== */

.listing-item-container .like-icon::before,
.listing-item-container .like-icon::after,
.listing-card-nl .like-icon::before,
.listing-card-nl .like-icon::after,
.favorite-icon-nl .save::before,
.favorite-icon-nl .save::after,
.listing-item-container .save::before,
.listing-item-container .save::after {
	content: none !important;
	display: none !important;
}

.hl-heart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var( --hl-red );
	font-size: 17px;
	line-height: 1;
	transition: transform 0.2s cubic-bezier( 0.2, 1.4, 0.5, 1 ), color 0.18s ease;
}

.listing-item-container .like-icon,
.listing-card-nl .like-icon,
.favorite-icon-nl .save,
.listing-item-container .save {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.92 ) !important;
	box-shadow: 0 2px 8px rgba( 30, 21, 24, 0.16 );
}

.listing-item-container .like-icon:hover .hl-heart,
.listing-card-nl .like-icon:hover .hl-heart,
.favorite-icon-nl .save:hover .hl-heart {
	transform: scale( 1.1 );
}

@keyframes hl-heart-pop {
	0% { transform: scale( 1 ); }
	35% { transform: scale( 1.32 ); }
	65% { transform: scale( 0.92 ); }
	100% { transform: scale( 1 ); }
}

/* Nom distinct : `hl-pop` désigne déjà les panneaux surgissants de la barre de
   recherche, qui portent un fond blanc et une ombre, d'où le halo ovale
   apparu derrière le cœur au moment de la pulsation. */
.hl-heart-beat {
	animation: hl-heart-pop 0.42s cubic-bezier( 0.2, 1.2, 0.4, 1 );
}

.hl-busy {
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-heart-beat,
	.hl-heart {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
 * Fenêtre de filtres : les choix de réputation respirent · 1.68.0
 *
 * Les boutons de choix portent la classe `hl-card`, comme les cartes
 * d'annonces : les styles des cartes s'appliquaient par-dessus et écrasaient
 * les leurs, d'où le texte collé, sans marge ni hiérarchie. Ils sont repris
 * ici sous la fenêtre, avec une spécificité suffisante.
 * ===================================================================== */

.hl-modal .hl-cards {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 12px;
	margin: 0 0 8px;
}

.hl-modal .hl-cards .hl-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 104px;
	margin: 0;
	padding: 18px 20px !important;
	border: 1px solid #ddd7cc;
	border-radius: 14px;
	background: var( --hl-ivory-light );
	text-align: left;
	cursor: pointer;
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.hl-modal .hl-cards .hl-card:hover {
	border-color: #bcb2a1;
	background: #fbfaf8;
}

.hl-modal .hl-cards .hl-card.is-active,
.hl-modal .hl-cards .hl-card[aria-pressed="true"] {
	border-color: #150e10;
	box-shadow: inset 0 0 0 1px #150e10;
	background: var( --hl-ivory-light );
}

.hl-modal .hl-cards .hl-card .hl-card-title {
	display: block !important;
	margin: 0 !important;
	color: #150e10 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}

.hl-modal .hl-cards .hl-card .hl-card-hint {
	display: block !important;
	margin: 0 !important;
	color: #6b6151 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	white-space: normal !important;
}

/*
 * Bouton favori : une seule pastille.
 *
 * Sur les cartes de l'accueil, Listeo emboîte deux éléments : un rond blanc de
 * 38 px et, dedans, un carré de 40 px. En habillant les deux, on obtenait une
 * forme bâtarde. Seul le porteur extérieur garde la pastille ; l'élément
 * intérieur devient une simple zone cliquable transparente.
 */
.favorite-icon-nl {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	overflow: hidden;
	border-radius: 50% !important;
	background: rgba( 255, 255, 255, 0.94 ) !important;
	box-shadow: 0 2px 8px rgba( 30, 21, 24, 0.16 );
}

.favorite-icon-nl .save,
.favorite-icon-nl .like-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Cartes de résultats : la pastille est portée par l'icône elle-même. */
.listing-item-container .like-icon,
.listing-item-container .save {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border-radius: 50% !important;
}

/* Le cœur ne prend jamais la forme de son conteneur. */
.hl-heart {
	width: auto;
	height: auto;
	aspect-ratio: auto;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
}

/*
 * Cœur des cartes : réglé au même millimètre que celui de la fiche.
 *
 * Même dessin (contour au repos, plein en favori), même rouge, même taille de
 * 16 px, même courbe de pulsation et même grossissement au survol. Seule la
 * pastille blanche reste, parce qu'ici le cœur se pose sur une photo.
 */
.listing-item-container .hl-heart,
.listing-card-nl .hl-heart,
.favorite-icon-nl .hl-heart,
.hl-popup-card .hl-heart {
	width: 18px;
	height: 18px;
	color: var( --hl-red );
	font-size: 16px !important;
	line-height: 1;
	transition: transform 0.2s cubic-bezier( 0.2, 1.4, 0.5, 1 ), color 0.18s ease;
}

.listing-item-container .like-icon:hover .hl-heart,
.listing-card-nl .like-icon:hover .hl-heart,
.favorite-icon-nl:hover .hl-heart,
.favorite-icon-nl .save:hover .hl-heart {
	transform: scale( 1.08 );
}

/* Rien d'autre ne bouge au survol : ni la pastille, ni la carte. */
.listing-item-container .like-icon:hover,
.listing-card-nl .like-icon:hover,
.favorite-icon-nl:hover {
	transform: none !important;
}

/*
 * Cœur des favoris pendant l'appel au serveur : aucune transparence.
 *
 * La classe `hl-busy`, partagée avec d'autres éléments de la recherche, pose
 * `opacity: 0.55` le temps de la requête. Sur le cœur, la pulsation suffit à
 * dire que le clic est pris en compte.
 */
.like-icon.hl-busy,
.favorite-icon-nl.hl-busy,
.favorite-icon-nl .save.hl-busy,
.listing-item-container .save.hl-busy,
.hl-busy .hl-heart,
.hl-heart {
	opacity: 1 !important;
}

/* « à partir de » des cartes d'événement : discret, comme le reste du prix. */
.hl-card-price-from {
	color: #6b6151;
	font-size: 14px;
	font-weight: 500;
}

/*
 * « À partir de » des événements : sur sa propre ligne.
 *
 * Posé devant le montant, il était tronqué par la pastille de capacité qui
 * occupe la droite de la ligne. Il passe au-dessus, en petit, comme dans le
 * bloc de réservation de la fiche.
 */
.hl-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
}

.hl-card-price-from {
	flex: 1 0 100%;
	margin-bottom: 1px;
	color: #6b6151 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	white-space: nowrap;
}

/*
 * Contrastes sur fond plein, côté recherche et cartes.
 *
 * Partout où le rouge de marque ou l'encre sombre servent de fond, le texte
 * qu'ils portent passe en blanc, y compris les mentions secondaires écrites
 * en rouge ailleurs.
 */
.hl-card-stat,
.hl-card-stat *,
.listing-card-nl .listing-category-tag-nl,
.listing-card-nl .listing-category-tag-nl * {
	color: var( --hl-ivory ) !important;
}

.hl-modal .hl-cards .hl-card.is-active .hl-card-title,
.hl-modal .hl-cards .hl-card[aria-pressed="true"] .hl-card-title {
	color: #150e10 !important;
}

.hl-bar-submit,
.hl-bar-submit *,
.hl-modal__apply,
.hl-modal__apply * {
	color: var( --hl-ivory ) !important;
}

/*
 * Pastille de filtre active.
 *
 * Elle garde un fond clair et se signale par son liseré sombre : le texte y
 * reste donc à l'encre. Une règle précédente le passait en blanc, en le
 * croyant posé sur du rouge, et le libellé disparaissait au clic.
 */
.hl-chip.is-active,
.hl-chip.is-active * {
	color: var( --hl-ink ) !important;
}

/*
 * Gris trop clairs hérités de la démo Listeo.
 *
 * Mesurés sur fond blanc ou sur le gris des vignettes d'univers, ces textes
 * tombaient entre 3 et 4,4 pour 1 : lisibles pour un oeil reposé, perdus dès
 * que l'écran est incliné ou la lumière forte. On garde la nuance grise, on
 * l'assombrit juste assez pour passer la barre des 4,5.
 */
.category-small-box-alt .category-box-counter-alt {
	color: #6b6151;
}

.headline span:not( [class] ),
.type-and-hit-enter,
.footer-new-bottom-left,
.footer-new-bottom-right,
.footer-new-bottom-left :not( a ),
.footer-new-bottom-right :not( a ) {
	color: #6b6151;
}

/*
 * Gris global d'Elementor.
 *
 * La couleur « Texte » du kit vaut #6b6151 : 4,3 pour 1 sur blanc, sous la
 * barre de 4,5. Le bon endroit reste Elementor, Réglages du site, Couleurs
 * globales, Texte : dès que cette valeur y est passée à #6b6151, ce bloc est
 * à supprimer, sinon il masquera le choix du client. L'attribut [class] sert
 * à passer devant .elementor-kit-5, chargé après nous.
 */
html body[class] {
	/* Repris par le kit : Elementor, Réglages du site, Couleurs globales. */
}

/*
 * Résultats en cours de chargement.
 *
 * Les fiches restent en place, estompées : plus rassurant qu'une colonne
 * vidée, et la position de lecture n'est pas perdue.
 */
#listeo-listings-container.hl-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.15s;
}

@media ( prefers-reduced-motion: reduce ) {
	#listeo-listings-container.hl-loading {
		transition: none;
	}
}

/*
 * Pastille de prix sur la carte.
 *
 * Le marqueur ne dit plus la catégorie mais le prix : c'est l'information
 * qu'on cherche en balayant une carte. Blanc sur fond sombre au survol, pour
 * que la pastille survolée se détache sans changer de taille et faire sauter
 * la carte.
 */
.hl-price-marker {
	background: none !important;
	border: 0 !important;
}

.hl-price-pill {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	transform: translate( -50%, -50% );
	padding: 6px 10px;
	border: 1px solid rgba( 30, 21, 24, 0.1 );
	border-radius: 999px;
	background: var( --hl-ivory-light );
	color: #150e10;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 30, 21, 24, 0.22 );
	transition: background-color 0.15s, color 0.15s;
}

.hl-price-marker:hover .hl-price-pill,
.hl-price-marker:focus .hl-price-pill,
.hl-price-marker.is-open .hl-price-pill {
	background: var( --hl-red );
	border-color: var( --hl-red );
	color: var( --hl-ivory );
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-price-pill {
		transition: none;
	}
}

/*
 * Repères d'origine masqués le temps de poser les prix.
 *
 * Listeo dessine ses icônes de catégorie dès que la carte s'ouvre, et notre
 * passage arrive juste après : on voyait les anciens repères une seconde,
 * puis les prix. Ils restent invisibles jusqu'à ce que le passage soit fait,
 * et ceux qui n'ont pas de prix à afficher reparaissent alors.
 */
.leaflet-container:not( .hl-markers-ready ) .listeo-marker-icon {
	/*
	 * Le !important n'est pas un raccourci : Leaflet écrit lui-même
	 * `opacity: 1` en style en ligne sur chaque repère qu'il pose, et un
	 * style en ligne l'emporte sur toute règle ordinaire. Sans cela, les
	 * anciens repères restaient visibles une seconde.
	 */
	opacity: 0 !important;
}


/* ------------------------------------------------- Téléphone : la carte */

/*
 * Sur téléphone, Listeo montre une bande de carte de 120 px et un bouton
 * « Afficher la carte » qui la déplie. On laisse ce mécanisme tranquille :
 * forcer une hauteur ici bloquerait le dépliage, qui passe par le même
 * élément. Seul notre compteur de zone bouge, pour libérer le bouton.
 */
@media ( max-width: 991px ) {
	.hl-map-control {
		top: auto !important;
		bottom: 10px !important;
		left: 10px !important;
		right: auto !important;
		transform: none !important;
		font-size: 12px;
	}
}

/* --------------------------------------- En-tête sur téléphone et tablette */

/*
 * Listeo range le bouton de menu juste après le logo, au milieu de l'en-tête,
 * dans une pastille grise : il touchait le logo et laissait un grand vide à
 * droite. Le menu part au bord droit, là où le pouce le cherche, la connexion
 * se range juste avant, et les deux commandes atteignent 44 px de haut.
 */
@media ( max-width: 991px ) {
	#header .container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	#header .left-side {
		display: flex;
		flex: 1 1 auto;
		align-items: center;
		min-width: 0;
	}

	#header .left-side .mmenu-trigger {
		position: absolute;
		top: 50%;
		right: 10px;
		margin: 0;
		padding: 0;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: transparent !important;
		border-radius: 12px;
		transform: translateY( -50% );
	}

	#header .left-side .mmenu-trigger:active {
		background: #f7f6f3 !important;
	}

	#header .right-side {
		margin-right: 46px;
	}

	#header .right-side .header-widget a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

/*
 * En-tête, deuxième passe : le geste des applications de voyage.
 *
 * Hauteur fixe et sobre, fond blanc opaque, un seul filet en bas plutôt
 * qu'une ombre, logo plafonné pour qu'il ne dicte pas la hauteur, et les deux
 * commandes de droite en cercles de 44 px espacés de 4 px, assez proches pour
 * former un groupe, assez loin pour ne pas se toucher.
 */
@media ( max-width: 991px ) {
	#header {
		background: var( --hl-ivory-light );
		border-bottom: 1px solid #eeebe5;
		box-shadow: none;
	}

	#header .container {
		min-height: 64px;
		padding-right: 8px;
	}

	#header #logo img {
		max-height: 34px;
		width: auto;
	}

	#header .left-side .mmenu-trigger {
		right: 8px;
		border-radius: 50%;
	}

	#header .right-side {
		margin-right: 44px;
	}

	#header .right-side .header-widget a {
		border-radius: 50%;
	}

	#header .right-side .header-widget a:active {
		background: #f7f6f3;
	}
}

@media ( min-width: 768px ) and ( max-width: 991px ) {
	#header .container {
		min-height: 72px;
	}

	#header #logo img {
		max-height: 38px;
	}
}

/*
 * Réseaux sociaux du pied de page.
 *
 * Les quatre liens de la démo pointent vers « # » : ils ne mènent nulle part
 * et laissent croire à des comptes qui n'existent pas. Masqués tant que la
 * cliente n'a pas ses adresses ; retirer ce bloc le jour où elle les fournit.
 */
.footer-new-bottom-right .social-icons,
#footer .social-icons,
.footer-new .social-icons {
	display: none;
}

/*
 * Compteurs des vignettes d'univers, sur l'accueil.
 *
 * Ils affichent zéro partout : Listeo compte les annonces de la taxonomie
 * `listing_category`, que ce site n'utilise pas, ses univers ayant chacun la
 * leur. Un zéro sous chaque vignette donne un site vide. Masqués en attendant
 * un vrai compteur, ou des vignettes illustrées.
 */
.category-small-box-alt .category-box-counter-alt {
	display: none;
}

/* ------------------------------------------------ Bandeau de l'accueil */

/*
 * Bandeau refait le 2026-09-24.
 *
 * L'ancien montait une photo de sous-bois ensoleillé, enregistrée sous le nom
 * « enquête nocturne à l'ancien sanatorium » mais montrant une forêt verte en
 * plein soleil, et large de 480 px seulement pour un bandeau plein écran.
 * Photo remplacée (média 722, 2400 px), et le bandeau se réduit à trois
 * choses : une image, une phrase, un formulaire.
 */
.home-search-container .main-search-container,
.elementor-main-search-container,
.main-search-container {
	position: relative;
	isolation: isolate;
}

/*
 * Hauteur. Un bandeau court ressemble à un encart, un bandeau haut ressemble
 * à un lieu. 72 % de la fenêtre, borné haut et bas pour ne pas écraser le
 * reste de la page sur les très grands écrans ni sauter la ligne de flottaison
 * sur les petits.
 */
/* Ancienne hauteur et ancien étalonnage du bandeau : remplacés plus bas, le
 * bandeau est désormais un bloc Elementor et ce conteneur ne porte plus que le
 * formulaire de recherche. */

/*
 * Voile en deux couches. La première assombrit l'image entière, la seconde
 * creuse la colonne de gauche où vit le texte : le contraste est acquis là où
 * on lit, et la photo garde sa lumière à droite. Le voile d'ensemble passe par
 * une ombre intérieure, qui se peint toujours au-dessus de l'image de fond et
 * sous le contenu, quelles que soient les couches ajoutées par le thème.
 */
.main-search-container {
	box-shadow: inset 0 0 0 100vmax rgba( 21, 14, 16, 0.10 );
}

.main-search-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			90deg,
			rgba( 21, 14, 16, 0.88 ) 0%,
			rgba( 21, 14, 16, 0.62 ) 40%,
			rgba( 21, 14, 16, 0.18 ) 76%,
			rgba( 21, 14, 16, 0 ) 100%
		),
		linear-gradient(
			180deg,
			rgba( 21, 14, 16, 0.45 ) 0%,
			rgba( 21, 14, 16, 0.10 ) 45%,
			rgba( 21, 14, 16, 0.62 ) 100%
		);
	pointer-events: none;
}

.main-search-container .main-search-inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

/*
 * Titre en Raleway maigre et grand plutôt qu'en gras moyen : à cette taille,
 * le maigre tient la page sans crier, et le voile fournit le contraste que le
 * gras allait chercher.
 */
/*
 * Le sous-titre accompagne, il n'annonce pas. Listeo le sort en h4 : on le
 * ramène au corps de texte pour qu'il ne concurrence pas le titre.
 */
/*
 * Listeo réserve une ligne au texte défilant du bandeau, même quand aucun n'est
 * saisi : 46 px de blanc entre le titre et le sous-titre. On la retire tant que
 * la ligne est vide, et elle revient d'elle-même si la cliente en saisit un.
 */
.main-search-container h1 .typed-words:empty {
	display: none;
}

/*
 * Onglets du bandeau : du texte souligné plutôt que des pastilles pleines.
 * Les pastilles blanches ajoutaient une deuxième carte au-dessus de la barre
 * de recherche, et deux cartes empilées font chrome d'application. Le rouge de
 * marque ne sert qu'à marquer l'univers actif.
 */
.hl-search.hl-home .hl-tabs {
	gap: 0;
	margin: 0 0 20px;
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.hl-search.hl-home .hl-tab {
	margin: 0 30px 0 0;
	padding: 6px 0;
	border-radius: 0;
	border-bottom: 2px solid transparent;
	background: none;
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 15px;
	font-weight: 500;
	transition: color 0.15s, border-color 0.15s;
}

.hl-search.hl-home .hl-tab:last-child {
	margin-right: 0;
}

.hl-search.hl-home .hl-tab:hover {
	background: none;
	color: var( --hl-ivory );
}

.hl-search.hl-home .hl-tab.is-active {
	background: none;
	border-bottom-color: var( --hl-accent );
	color: var( --hl-ivory );
}

/*
 * La barre de recherche devient la pièce posée sur la photo : angles vifs
 * plutôt que gélule, fond ivoire plutôt que blanc pur, et une ombre portée
 * franche pour la décoller de l'image. Réservé à l'accueil : les pages
 * d'univers gardent la barre arrondie, plus discrète sous l'en-tête.
 */
.hl-search.hl-home .hl-bar {
	max-width: 880px;
	min-height: 76px;
	padding: 0 10px 0 0;
	border: 0;
	border-radius: 6px;
	background: #fbfaf8;
	box-shadow: 0 24px 60px rgba( 21, 14, 16, 0.45 );
}

.hl-search.hl-home .hl-bar-cell {
	min-height: 74px;
	border-radius: 4px;
}

.hl-search.hl-home .hl-bar-submit {
	height: 56px;
	padding: 0 22px;
	border-radius: 4px;
	font-size: 15px;
}

@media ( max-width: 991px ) {
	.hl-search.hl-home .hl-bar {
		max-width: none;
	}
}

@media ( max-width: 767px ) {
	.main-search-container:has( .hl-home ) {
		min-height: 0;
		padding: 46px 0 40px;
	}

	.hl-search.hl-home .hl-tab {
		margin-right: 22px;
		font-size: 14px;
	}

	/*
	 * En colonne, la réserve de 10 px à droite de la barre laissait une bande
	 * blanche le long du bouton. Le bouton prend toute la largeur et vient
	 * fermer la carte.
	 */
	.hl-search.hl-home .hl-bar {
		padding: 0;
	}

	.hl-search.hl-home .hl-bar-submit {
		border-radius: 0 0 5px 5px;
	}
}

/*
 * Bandeau « Vous avez un lieu avec une histoire ? » de l'accueil.
 *
 * Il portait encore le décor de la démo Listeo : un dégradé violet vers vert
 * et, en calque, la photo d'un camion à jus de fruits. Rien à voir avec le
 * sujet. On pose une vraie photo de manoir et un voile sombre.
 *
 * Le sélecteur vise l'identifiant Elementor de la section, seul point
 * d'accroche disponible : les sections ne sont pas modifiables par l'outil
 * de pilotage, contrairement aux widgets. Si la section est recréée, cet
 * identifiant change et ce bloc est à mettre à jour.
 */
.elementor-element-3f4d6413 {
	background-image: url( "https://hauntedlodges.com/wp-content/uploads/2026/09/manoir-landes-closes-facade.jpg" ) !important;
	background-position: center center !important;
	background-size: cover !important;
}

.elementor-element-3f4d6413 > .elementor-background-overlay {
	background-image: none !important;
	background-color: rgba( 21, 14, 16, 0.62 ) !important;
	opacity: 1 !important;
}

/*
 * Fiches du nouveau gabarit de Listeo.
 *
 * Deux défauts visibles sur la page d'accueil :
 *
 * 1. plusieurs images empilées dans la vignette, le carrousel de Listeo
 *    n'étant pas démarré sur ces fiches. Le script n'en garde qu'une, cette
 *    règle couvre les copies que le carrousel clone après coup ;
 * 2. les équipements sans icône sortent en `<i class="empty">`, soit des
 *    pastilles grises vides alignées sous la fiche. On masque celles-là,
 *    celles qui ont une vraie icône restent.
 */
.listing-card-nl .hl-slider ~ img.slider-image-nl,
.listing-card-nl img.slider-image-nl[hidden] {
	display: none !important;
}

.listing-amenities-nl .amenity-icon-nl:has( i.empty ) {
	display: none;
}

/*
 * Réservation instantanée, sur les fiches de résultats.
 *
 * Même signe que sur l'accueil : un éclair dans une pastille sombre, posé
 * après le titre. Le libellé reste dans le code pour les lecteurs d'écran,
 * l'infobulle du navigateur le donne à la souris.
 */
/*
 * Le sélecteur est doublé : `.listing-item-content span` de Listeo impose
 * `font-size: 16px` et `display: inline-block` aux pastilles, ce qui faisait
 * déborder l'éclair de son disque. Il faut passer devant.
 */
.hl-instant,
.listing-item-content span.hl-instant,
.listing-item-content h3 span.hl-instant {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 8px;
	border-radius: 50%;
	background: #373132;
	color: var( --hl-ivory );
	font-size: 10px;
	line-height: 1;
	vertical-align: middle;
}

.hl-instant i {
	font-size: 10px;
	line-height: 1;
}

.hl-instant__text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	border: 0;
}

/*
 * Sections Elementor devenues vides.
 *
 * Masquer un widget avec le réglage d'Elementor laisse sa section en place :
 * quatre bandes vides de 20 à 110 px subsistaient sur l'accueil, soit 245 px
 * de blanc sans raison. La règle replie toute section qui ne contient que des
 * widgets masqués. Écrite en général plutôt qu'avec les identifiants de ces
 * quatre sections : elle vaudra aussi pour les prochaines.
 */
.elementor-page .elementor-section:has( .elementor-widget.elementor-hidden-desktop ):not( :has( .elementor-widget:not( .elementor-hidden-desktop ) ) ) {
	display: none;
}

/*
 * Vignettes d'univers de l'accueil.
 *
 * Le gabarit « alt » de Listeo garde la photo à `opacity: 0` et ne la révèle
 * qu'au survol : au repos, trois cartons blancs. On montre la photo tout de
 * suite, sous un voile sombre, et le libellé passe en blanc par-dessus. La
 * photo se rapproche légèrement au survol, c'est là que va le mouvement.
 */
.category-small-box-alt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	min-height: 210px;
	/*
	 * Listeo pose 32 px de réserve tout autour : le libellé flottait alors au
	 * milieu de la vignette. La réserve passe sur le libellé et sur sa ligne
	 * d'explication, qui viennent se caler en bas à gauche.
	 */
	padding: 0;
	overflow: hidden;
	border-radius: 14px;
}

.category-small-box-alt img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 1 !important;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.category-small-box-alt:hover img {
	transform: scale( 1.04 );
}

.category-small-box-alt::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba( 21, 14, 16, 0 ) 18%,
		rgba( 21, 14, 16, 0.38 ) 52%,
		rgba( 21, 14, 16, 0.9 ) 100%
	);
}

.category-small-box-alt h4 {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0;
	padding: 0 20px 4px;
	color: var( --hl-ivory ) !important;
	font-size: 19px;
	font-weight: 700;
	text-align: left;
}

/*
 * Une ligne d'explication sous chaque univers.
 *
 * Les vignettes ne portaient qu'un libellé, et « Expériences » ne dit pas ce
 * qu'on y trouve. La phrase est posée par le script : Listeo n'affiche pas la
 * description du terme dans ce gabarit.
 */
.hl-tile-note {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 0 20px 18px;
	text-align: left;
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 13px;
	line-height: 1.45;
}

/* Icône de catégorie absente : Listeo sort un `<i class="fa empty">` vide. */
.category-small-box-alt i.empty {
	display: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.category-small-box-alt img,
	.category-small-box-alt:hover img {
		transition: none;
		transform: none;
	}
}

/*
 * Bandeau de réassurance de l'accueil.
 *
 * Trois promesses, posées entre les univers et les lieux à découvrir. Même
 * texte que sur la carte de l'hôte des fiches : le visiteur retrouve les
 * mêmes mots à l'endroit où il hésite.
 */
.hl-trust {
	padding: 34px 0 6px;
	background: var( --hl-ivory-light );
}

.hl-trust__inner {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 26px 40px;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

.hl-trust__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.hl-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba( 150, 27, 27, 0.08 );
	color: var( --hl-red );
}

.hl-trust__icon .hl-icon {
	width: 19px;
	height: 19px;
}

.hl-trust__copy {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hl-trust__copy strong {
	color: #150e10;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.hl-trust__copy span {
	color: #6b6151;
	font-size: 13.5px;
	line-height: 1.5;
}

@media ( max-width: 767px ) {
	.hl-trust__inner {
		grid-template-columns: minmax( 0, 1fr );
		gap: 18px;
	}

	.hl-trust {
		padding-top: 26px;
	}
}

/*
 * Porte de sortie sous le carrousel de l'accueil.
 *
 * Un lien discret plutôt qu'un bouton plein : le geste principal de la page
 * reste la recherche du bandeau, celui-ci n'est qu'un second chemin.
 */
.hl-see-all {
	display: flex;
	justify-content: center;
	padding: 6px 15px 34px;
}

.hl-see-all__link {
	display: inline-flex;
	align-items: center;
	padding: 13px 26px;
	border: 1px solid #150e10;
	border-radius: 999px;
	color: #150e10 !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	transition: background-color 0.15s, color 0.15s;
}

.hl-see-all__link:hover,
.hl-see-all__link:focus-visible {
	background: #150e10;
	color: var( --hl-ivory ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-see-all__link {
		transition: none;
	}
}

/*
 * « Comment ça se passe », trois étapes sous les dernières adresses.
 *
 * Numéros en pastille rouge, énoncé bref, explication en gris : la même
 * hiérarchie que le bandeau de réassurance, pour que les deux blocs se
 * lisent comme une seule famille.
 */
.hl-steps {
	padding: 46px 0 52px;
	background: #fbfaf8;
}

.hl-steps__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

.hl-steps__title {
	margin: 0 0 26px;
	color: #150e10;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.2;
}

.hl-steps__list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 26px 40px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.hl-steps__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}

.hl-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var( --hl-red );
	color: var( --hl-ivory );
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}

.hl-steps__copy {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.hl-steps__copy strong {
	color: #150e10;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.hl-steps__copy span {
	color: #6b6151;
	font-size: 14px;
	line-height: 1.55;
}

@media ( max-width: 767px ) {
	.hl-steps {
		padding: 34px 0 38px;
	}

	.hl-steps__list {
		grid-template-columns: minmax( 0, 1fr );
		gap: 20px;
	}

	.hl-steps__title {
		font-size: 23px;
	}
}

/* ------------------------------------------------ Liens légaux du pied de page */

/*
 * Listeo n'offre aucun emplacement de menu dans son pied de page : ses colonnes
 * sont des widgets. Les liens sont donc posés par le script, à partir du menu
 * « Pied de page légal » que la cliente gère depuis Apparence puis Menus. Ils
 * se rangent sur la ligne de copyright, à gauche, à la suite de la mention.
 */
#footer .footer-new-bottom-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
}

.hl-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
}

#footer .hl-legal a {
	color: inherit;
	opacity: 0.72;
	text-decoration: none;
	transition: opacity 0.15s;
}

#footer .hl-legal a:hover,
#footer .hl-legal a:focus-visible {
	opacity: 1;
	text-decoration: underline;
}

@media ( max-width: 767px ) {
	#footer .footer-new-bottom-left,
	.hl-legal {
		gap: 6px 16px;
	}
}


/* ------------------------------------------ Titres de section de l'accueil */

/*
 * Quatre sections, quatre traitements : 27 px en graisse 700 pour « Comment ça
 * se passe », 29 px en 500 pour les titres Listeo, 31 px en 500 centré pour la
 * FAQ. Une page assemblée plutôt que dessinée. Une seule échelle désormais,
 * 31 px en graisse 500, alignée à gauche, et le même filet rouge sous chaque
 * titre. Limité à l'accueil : les pages d'univers gardent leur échelle.
 */
body.home .headline,
body.home .hl-steps__title,
body.home .hl-phen__title,
body.home .hl-places__title,
body.home .faq-title {
	font-size: 31px;
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
}

body.home .hl-steps__title,
body.home .hl-phen__title,
body.home .hl-places__title,
body.home .faq-title {
	position: relative;
	padding-bottom: 14px;
}

body.home .hl-steps__title::after,
body.home .hl-phen__title::after,
body.home .hl-places__title::after,
body.home .faq-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 2px;
	/* Couleur en clair : --hl-accent n'existe que sous .hl-rebuilt et .hl-modal. */
	background: var( --hl-red );
}

@media ( max-width: 767px ) {
	body.home .headline,
	body.home .hl-steps__title,
	body.home .hl-phen__title,
	body.home .hl-places__title,
	body.home .faq-title {
		font-size: 25px;
	}
}

/* ------------------------------------------- Grille commune de l'accueil */

/*
 * Toutes les sections de l'accueil ne tombaient pas sur le même axe. Relevé à
 * 1900 px de large, avant correction :
 *
 * | Bloc                  | gauche | droite |
 * |-----------------------|--------|--------|
 * | titres de section     |   290  |  1610  |
 * | vignettes des univers |   562  |  1440  |
 * | bandeau de confiance  |    10  |  1150  |
 * | bloc « Comment ça se passe » | 380 | 1520 |
 * | FAQ                   |   127  |   967  |
 *
 * Cinq largeurs différentes sur la même page. Elles viennent de trois systèmes
 * qui cohabitent : les sections Elementor héritées, les conteneurs Elementor
 * récents, et les blocs posés par cette extension. Tout est ramené ici sur une
 * seule grille, 1340 px au maximum, gouttière de 20 px, donc un contenu de
 * 1300 px calé au même endroit partout.
 */
body.home .elementor-section > .elementor-container {
	max-width: 1340px;
}

/*
 * Le conteneur de la FAQ est un conteneur Elementor récent, plafonné à 1180 px
 * par les réglages du site quand les sections montent à 1340. Il rejoint la
 * grille commune.
 */
body.home .elementor-element-53aaa9c > .e-con-inner {
	max-width: min( 100%, 1340px );
}

/*
 * Le bloc des étapes occupe toute la largeur de la fenêtre pour sa bande de
 * fond : c'est son contenu qui se cale sur la grille.
 */
body.home .hl-steps {
	padding-right: 20px;
	padding-left: 20px;
}

body.home .hl-steps__inner {
	max-width: 1300px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}

/*
 * Le bandeau de confiance vit à l'intérieur d'une colonne Elementor, déjà
 * calée 10 px à gauche de la grille : il lui manque exactement ces 10 px.
 */
body.home .hl-trust {
	padding-right: 10px;
	padding-left: 10px;
}

body.home .hl-trust__inner {
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * La FAQ garde une largeur de lecture confortable, mais calée à gauche comme le
 * reste de la page plutôt que centrée. Les 20 px retombent sur la gouttière.
 */
body.home .faq-container {
	max-width: 860px;
	margin-right: auto;
	margin-left: 0;
	padding-right: 20px;
	padding-left: 20px;
	box-sizing: border-box;
}

/*
 * Vignettes des univers : Listeo les pose dans une rangée souple centrée, avec
 * un décalage de 25 px vers la gauche. Résultat, trois vignettes étroites au
 * milieu d'une rangée large. Elles passent en grille de trois colonnes égales
 * qui remplit la largeur. Seulement à partir de 992 px : en dessous, le
 * carrousel de Listeo reprend la main, et il pose une largeur en ligne que
 * cette grille ne doit pas contrarier.
 */
@media ( min-width: 992px ) {
	body.home .categories-boxes-container-alt {
		display: grid;
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 24px;
		left: 0;
		width: auto;
		margin-right: 0;
		margin-left: 0;
	}

	body.home .category-small-box-alt {
		width: auto;
		margin: 0;
	}
}


/* ------------------------------------- Registre des manifestations rapportées */

/*
 * Bande sombre, posée entre les adresses et les régions.
 *
 * Elle porte la seule chose que le site peut affirmer honnêtement : il ne
 * promet pas de fantôme, il documente une réputation. À gauche l'échelle des
 * trois niveaux, à droite le relevé réel de ce que les hôtes ont coché. La
 * page respire ainsi en alternant clair et sombre, comme le jour et la nuit.
 */
.hl-phen {
	padding: 84px 20px;
	background: #150e10;
}

.hl-phen__inner {
	display: grid;
	gap: 56px;
	max-width: 1300px;
	margin: 0 auto;
}

.hl-phen__title {
	margin: 0;
	color: var( --hl-ivory );
}

.hl-phen__lead {
	max-width: 46ch;
	margin: 22px 0 0;
	color: rgba( 255, 255, 255, 0.72 );
	font-size: 16px;
	line-height: 1.65;
}

.hl-phen__scale {
	margin: 34px 0 0;
	padding: 0;
	list-style: none;
}

.hl-phen__level {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 14px 0;
}

.hl-phen__marks {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 3px;
	width: 70px;
	padding-top: 2px;
}

.hl-phen__mark {
	width: 17px;
	height: 17px;
}

.hl-phen__levelcopy strong {
	display: block;
	color: var( --hl-ivory );
	font-size: 15px;
	font-weight: 600;
}

.hl-phen__levelcopy span {
	display: block;
	margin-top: 3px;
	color: rgba( 255, 255, 255, 0.62 );
	font-size: 14px;
	line-height: 1.55;
}

.hl-phen__label {
	margin: 0 0 6px;
	color: var( --hl-ivory );
	font-size: 15px;
	font-weight: 600;
}

.hl-phen__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hl-phen__row {
	display: flex;
	gap: 16px;
	align-items: baseline;
	justify-content: space-between;
	padding: 16px 0;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.13 );
}

.hl-phen__name {
	color: rgba( 255, 255, 255, 0.92 );
	font-size: 16px;
}

.hl-phen__count {
	flex: 0 0 auto;
	color: rgba( 255, 255, 255, 0.55 );
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

@media ( min-width: 992px ) {
	.hl-phen__inner {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 72px;
	}
}

/* ------------------------------------------------ Régions à la réservation */

/*
 * « Où ? » est la deuxième question du voyageur, juste après « quoi ? ». La
 * liste se remplit toute seule à mesure que des annonces sont publiées : pas de
 * nombre affiché, car à l'ouverture « 1 lieu » répété sept fois donne un site
 * vide alors que la couverture est le message.
 */
.hl-places {
	padding: 78px 20px 84px;
	background: var( --hl-ivory-light );
}

.hl-places__inner {
	max-width: 1300px;
	margin: 0 auto;
}

.hl-places__title {
	margin: 0;
}

.hl-places__lead {
	margin: 18px 0 0;
	color: var( --e-global-color-text, #6b6151 );
	font-size: 15px;
	line-height: 1.6;
}

.hl-places__list {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 0 28px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}

.hl-places__item {
	position: relative;
	border-top: 1px solid #ddd7cc;
}

/*
 * Le filet rouge se déroule depuis la gauche au survol : c'est la seule
 * animation déclenchée par le visiteur sur cette section, et elle reprend le
 * filet qui souligne déjà tous les titres.
 */
.hl-places__item::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 0;
	height: 2px;
	background: var( --hl-red );
	transition: width 0.26s ease;
}

.hl-places__item:hover::after,
.hl-places__item:focus-within::after {
	width: 100%;
}

.hl-places__link {
	display: block;
	padding: 17px 0;
	color: #150e10;
	font-size: 17px;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.18s;
}

.hl-places__link:hover,
.hl-places__link:focus-visible {
	color: var( --hl-red );
}

/* ------------------------------------------------- Apparition au défilement */

/*
 * Un seul geste, répété partout : le bloc monte de dix pixels et se révèle, une
 * fois. La classe hl-anim n'est posée que si le visiteur n'a pas demandé moins
 * d'animations, donc sans script ou sans observateur, rien ne se cache jamais.
 */
body.hl-anim .hl-reveal {
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

body.hl-anim .hl-reveal.is-in {
	opacity: 1;
	transform: none;
}

body.hl-anim .hl-phen__col + .hl-phen__col,
body.hl-anim .hl-places__list {
	transition-delay: 0.09s;
}

@media ( prefers-reduced-motion: reduce ) {
	body.hl-anim .hl-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media ( max-width: 767px ) {
	.hl-phen {
		padding: 56px 20px;
	}

	.hl-places {
		padding: 52px 20px 56px;
	}

	.hl-phen__inner {
		gap: 40px;
	}
}

/*
 * Le filet rouge de marque tombe à 1,8 contre 1 sur la bande sombre : il
 * disparaît. Version éclaircie du même rouge, qui repasse au-dessus de 4 pour 1.
 */
body.home .hl-phen__title::after {
	background: #d2564f;
}

/* Même raison pour les icônes de peur, rouge sombre sur fond presque noir. */
.hl-phen__mark {
	filter: brightness( 1.5 ) saturate( 1.05 );
}

/*
 * La porte de sortie sous la FAQ est passée dans Elementor, en éléments
 * atomiques : la cliente modifie désormais sa phrase et son lien depuis
 * l'éditeur. Styles et balisage vivent donc là-bas, plus ici.
 */

/* ------------------------------------------------- Entrée du bandeau d'accueil */

/*
 * Le bandeau est déjà dans le champ : son apparition se joue à l'ouverture,
 * ligne après ligne. Quatre décalages courts, pas un de plus, et rien du tout
 * si le visiteur a demandé moins d'animations.
 */
body.hl-anim .hl-rise-2 {
	transition-delay: 0.07s;
}

body.hl-anim .hl-rise-3 {
	transition-delay: 0.14s;
}

body.hl-anim .hl-rise-4 {
	transition-delay: 0.2s;
}

/* --------------------------------------------- Survol des cartes d'annonce */

.listing-card-nl {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.listing-card-nl:hover {
	transform: translateY( -4px );
	box-shadow: 0 16px 34px rgba( 21, 14, 16, 0.14 );
}

/* ------------------------------------------------------ Repères au clavier */

.hl-places__link:focus-visible,
.hl-legal a:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 3px;
}

@media ( prefers-reduced-motion: reduce ) {
	.listing-card-nl,
	.listing-card-nl:hover {
		transform: none;
		transition: none;
	}
}

/* ------------------------------------ Barre de recherche sous le bandeau */

/*
 * Le bandeau est passé dans Elementor, en éléments atomiques, en tête de page.
 * Ce qui reste du bloc Listeo, c'est le formulaire : il devient une barre posée
 * sur le même fond nuit, juste sous le bandeau, et les deux se lisent comme un
 * seul bloc. Plus de photo, plus de voile, et la hauteur fixe de 600 px du
 * gabarit « with slider » est relâchée.
 *
 * Rien n'est retiré côté Listeo : le formulaire, ses onglets, ses champs et
 * toute la mécanique de recherche restent exactement ce qu'ils étaient.
 */
body.home .main-search-container:has( .hl-home ) {
	display: block;
	height: auto !important;
	min-height: 0;
	padding: 0 20px 64px;
	background: transparent !important;
	box-shadow: none;
}

body.home .main-search-container:has( .hl-home )::before {
	content: none;
}

/*
 * Listeo enferme la barre dans un conteneur Bootstrap de 970 px : elle rejoint
 * la grille commune de la page, donc le même axe que le titre du bandeau.
 */
body.home .main-search-container:has( .hl-home ) .container {
	width: auto;
	max-width: 1300px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}

/* Calque décoratif du gabarit, vide et haut de 520 px. */
body.home .main-search-container:has( .hl-home ) .msps-container {
	display: none;
}

body.home .hl-search.hl-home .hl-bar {
	margin-left: 0;
}


/* ---------------------------------------- Bandeau centré, nuit et halos */

/*
 * Composition centrée : un titre sur deux lignes, un paragraphe court, la barre
 * de recherche, puis la réassurance. Plus de photographie : le fond est une nuit
 * unie, travaillée par deux halos (bronze en haut, rouge de marque en bas) posés
 * en pseudo-éléments plus bas dans cette feuille. Le fond lui-même est un défaut
 * en couche, donc réglable dans Elementor.
 */

/* Onglets et barre reviennent au centre, comme le titre. */
body.home .hl-search.hl-home {
	text-align: center;
}

body.home .hl-search.hl-home .hl-tabs {
	justify-content: center;
}

body.home .hl-search.hl-home .hl-bar {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
}

/* ------------------------------ Réassurance sous la barre de recherche */

/*
 * Les trois promesses closent le bandeau, en une ligne centrée. Sous une barre
 * de recherche, la phrase complète alourdit : le libellé suffit, le détail
 * reste sur les fiches et dans la foire aux questions.
 */
body.home .main-search-container .hl-trust {
	padding: 38px 0 0;
	background: none;
}

body.home .main-search-container .hl-trust__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px 40px;
	max-width: 1000px;
	padding: 0;
}

body.home .main-search-container .hl-trust__item {
	align-items: center;
	gap: 10px;
}

body.home .main-search-container .hl-trust__icon {
	width: 30px;
	height: 30px;
	background: rgba( 255, 255, 255, 0.1 );
	color: #d2564f;
}

body.home .main-search-container .hl-trust__icon .hl-icon {
	width: 16px;
	height: 16px;
}

body.home .main-search-container .hl-trust__copy strong {
	color: rgba( 255, 255, 255, 0.92 );
	font-size: 14px;
	font-weight: 500;
}

body.home .main-search-container .hl-trust__copy span {
	display: none;
}

@media ( max-width: 767px ) {
	body.home .main-search-container .hl-trust__inner {
		justify-content: flex-start;
		gap: 12px;
	}
}

/*
 * Le conteneur du bandeau est un conteneur Elementor en ligne : ses deux
 * enfants, le titre et le formulaire, se rangeaient côte à côte. Ils s'empilent.
 */
body.home .elementor-element-deea9d4 {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

/*
 * Listeo remonte le formulaire de 74 px par une transformation, pour le faire
 * chevaucher son bandeau d'origine. Ici il chevauchait le paragraphe : la
 * transformation saute, le formulaire reprend sa place dans le flux.
 */
body.home .main-search-container:has( .hl-home ) .main-search-inner {
	top: 0;
	padding-bottom: 0;
	transform: none;
}

/*
 * Le formulaire de Listeo est plafonné à 860 px et calé à gauche. Il se centre,
 * comme le titre, le paragraphe, les onglets et la réassurance.
 */
body.home .main-search-container:has( .hl-home ) form.main-search-form {
	margin-right: auto;
	margin-left: auto;
}

/*
 * La réassurance du bandeau restait collée à gauche sur les grands écrans : une
 * règle plus ancienne remettait sa marge à zéro. Elle se recentre.
 */
body.home .main-search-container .hl-trust__inner {
	margin-right: auto;
	margin-left: auto;
}

/* ------------------------------------------------- Voix d'archive du site */

/*
 * ELEGANT TYPEWRITER, fournie par la cliente, ne sert pas de police de texte :
 * une machine à écrire fatigue à la lecture longue. Elle porte la voix de
 * l'archive, là où le site consigne plutôt qu'il ne raconte. Partout ailleurs,
 * Raleway continue de lire.
 *
 * Quatre endroits, choisis pour cela :
 *   le relevé des manifestations rapportées,
 *   les trois niveaux de réputation,
 *   les promesses sous la barre de recherche,
 *   les libellés des champs de recherche et les numéros d'étape.
 */
.hl-phen__label,
.hl-phen__name,
.hl-phen__count,
.hl-phen__levelcopy strong,
.hl-steps__number,
.hl-bar-label,
body.home .main-search-container .hl-trust__copy strong {
	font-family: "ELEGANT TYPEWRITER", "Courier New", monospace;
}

/* La machine à écrire porte plus large : on resserre légèrement. */
.hl-phen__name,
.hl-phen__count,
.hl-phen__levelcopy strong,
body.home .main-search-container .hl-trust__copy strong {
	letter-spacing: -0.2px;
}

.hl-bar-label {
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.2px;
}

.hl-phen__label {
	letter-spacing: 0.3px;
}

/* ------------------------------------------- Matière des bandes sombres */

/*
 * L'atmosphère ne passe pas par des toiles d'araignée : elle passe par la
 * matière. Un grain très fin, posé en filtre de bruit SVG, et un vignettage
 * qui assombrit les angles comme sur une photographie ancienne. Les deux
 * ensemble suffisent à faire basculer le registre, sans un seul ornement.
 */
body.home .elementor-element-deea9d4,
body.home .hl-phen {
	position: relative;
}

body.home .elementor-element-deea9d4::after,
body.home .hl-phen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E" );
	background-size: 200px 200px;
	opacity: 0.07;
	pointer-events: none;
}

/* Le contenu repasse au-dessus du grain. */
body.home .elementor-element-deea9d4 > *,
body.home .hl-phen__inner {
	position: relative;
	z-index: 2;
}

body.home .elementor-element-deea9d4 {
	box-shadow: inset 0 0 170px 45px rgba( 0, 0, 0, 0.55 );
}

body.home .hl-phen {
	box-shadow: inset 0 0 170px 45px rgba( 0, 0, 0, 0.45 );
}

/* ------------------------------------- Surtitres et mots accentués */

/*
 * Deux styles dans un même titre : le romain de Raleway pour la phrase,
 * l'italique de la machine à écrire pour le mot qui porte le sens. Ce n'est pas
 * la couleur qui fait l'accent, c'est le changement de dessin, la couleur ne
 * fait que le confirmer.
 */
.hl-eyebrow {
	display: block;
	margin-bottom: 13px;
	color: var( --hl-red );
	font-family: "ELEGANT TYPEWRITER", "Courier New", monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.hl-accent {
	color: var( --hl-red );
	font-family: "ELEGANT TYPEWRITER", "Courier New", monospace;
	font-size: 1.04em;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.5px;
}

/* Le surtitre remplace le filet rouge, qui ferait doublon sous le titre. */
body.home h2:has( .hl-eyebrow )::after,
body.home h3:has( .hl-eyebrow )::after,
body.home h2:has( .hl-eyebrow ),
body.home h3:has( .hl-eyebrow ) {
	padding-bottom: 0;
}

body.home h2:has( .hl-eyebrow )::after,
body.home h3:has( .hl-eyebrow )::after,
body.home .headline:has( .hl-eyebrow )::after {
	content: none;
}

/* Sur les fonds sombres, le rouge de marque tombe sous 2 pour 1 : il s'éclaire. */
.hl-phen .hl-eyebrow,
.hl-phen .hl-accent,
body.home .elementor-element-3f4d6413 .hl-eyebrow,
body.home .elementor-element-3f4d6413 .hl-accent {
	color: #d2564f;
}

@media ( max-width: 767px ) {
	.hl-eyebrow {
		margin-bottom: 10px;
		font-size: 11px;
		letter-spacing: 0.15em;
	}
}

/*
 * Listeo décore les `span` de ses titres d'un filet rouge. Le surtitre étant un
 * span, il héritait du filet, qui réapparaissait au-dessus de lui.
 */
.hl-eyebrow::before,
.hl-eyebrow::after,
body.home .headline span.hl-eyebrow::before,
body.home .headline span.hl-eyebrow::after {
	content: none;
}

/* ============================================================================
 * SYSTÈME DE L'ACCUEIL
 *
 * Constat avant refonte : huit fonds différents sur une seule page, blanc,
 * #fbfaf8, #eeebe5, #fbfaf8, #fbfaf8, nuit, transparent. C'est ça, et pas la
 * décoration, qui faisait « page assemblée ». Un seul sol désormais, deux
 * surfaces, un filet, trois niveaux de texte, un accent.
 * ========================================================================== */

body.home {
	--nuit: #150e10;
	--surface: #1e1518;
	--surface-haut: #1e1518;
	--filet: rgba( 255, 255, 255, 0.1 );
	--filet-fort: rgba( 255, 255, 255, 0.2 );
	--os: #f7f6f3;
	--os-doux: rgba( 247, 246, 243, 0.64 );
	--os-faible: rgba( 247, 246, 243, 0.4 );
	--braise: #c9564e;

	/* Plus de fond forcé : le fond du site est réglé dans Elementor
	   (Réglages du site, Arrière-plan), crème. Chaque section sombre porte
	   son propre fond, lui aussi réglé dans Elementor. */
	color: var( --os );
}

/* Tous les fonds clairs hérités du thème et des blocs s'effacent. */
body.home .elementor-section:not( .elementor-element-6980db5b ),
body.home .elementor-widget-wrap,
body.home .hl-trust,
body.home .hl-places,
body.home .hl-steps,
body.home .hl-phen,
body.home .elementor-element-53aaa9c,
body.home .elementor-element-77c44ee9 {
	background-color: transparent;
}

/*
 * Rythme unique : 120 px de respiration entre les sections sur grand écran,
 * 72 px sur téléphone. Toutes les sections, sans exception.
 */
body.home .hl-phen,
body.home .hl-places,
body.home .hl-steps,
body.home .hl-say {
	padding-top: 120px;
	padding-bottom: 120px;
}

body.home .elementor-element-6980db5b > .elementor-container,
body.home .elementor-element-3030d7c5 > .elementor-container,
body.home .elementor-element-53aaa9c {
	padding-top: 120px;
	padding-bottom: 120px;
}

body.home .hl-trust {
	padding-top: 38px;
	padding-bottom: 0;
}

/* --------------------------------------------------------- Typographie */

body.home .headline,
body.home .hl-steps__title,
body.home .hl-phen__title,
body.home .hl-places__title,
body.home .faq-title {
	margin-bottom: 0;
	color: var( --os );
	font-size: 40px;
	font-weight: 300;
	line-height: 1.12;
	letter-spacing: -0.6px;
}

body.home .hl-eyebrow {
	margin-bottom: 18px;
	color: var( --braise );
	font-size: 11px;
	letter-spacing: 0.22em;
}

/*
 * L'accent ne surligne plus en rouge : il change de dessin, c'est tout. Le
 * rouge partout faisait tic, la bascule romain vers italique de machine à
 * écrire suffit à porter le mot.
 */
body.home .hl-accent {
	color: inherit;
	opacity: 0.94;
}

body.home .hl-places__lead,
body.home .hl-phen__lead,
body.home .headline span {
	color: var( --os-doux );
	font-size: 17px;
	line-height: 1.7;
}

/* ------------------------------------------------- Phrase de respiration */

.hl-say__inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

.hl-say__line {
	margin: 0;
	color: var( --os );
	font-size: clamp( 26px, 3.4vw, 42px );
	font-weight: 300;
	line-height: 1.32;
	letter-spacing: -0.4px;
	text-wrap: balance;
}

/* ------------------------------------------------------- Bandeau de confiance */

body.home .hl-trust__copy strong {
	color: rgba( 247, 246, 243, 0.92 );
}

body.home .hl-trust__icon {
	background: rgba( 255, 255, 255, 0.07 );
	color: var( --braise );
}

/* ------------------------------------------------------------------ Étapes */

body.home .hl-steps__number {
	background: rgba( 201, 86, 78, 0.16 );
	color: var( --braise );
}

body.home .hl-steps__copy strong {
	color: var( --os );
}

body.home .hl-steps__copy span {
	color: var( --os-doux );
}

/* ------------------------------------------------------------------ Régions */

body.home .hl-places__item {
	border-top-color: var( --filet );
}

body.home .hl-places__link {
	color: var( --os );
}

body.home .hl-places__link:hover,
body.home .hl-places__link:focus-visible {
	color: var( --braise );
}

body.home .hl-places__item::after {
	background: var( --braise );
}

/* --------------------------------------------------------------------- FAQ */

body.home .faq-container .faq-item,
body.home .faq-container .faq-question,
body.home .faq-container details,
body.home .faq-container .ui-accordion-header,
body.home .faq-container .trigger {
	border: 1px solid var( --filet );
	border-radius: 6px;
	background: var( --surface );
	box-shadow: none;
	color: var( --os );
}

body.home .faq-container h4,
body.home .faq-container h5,
body.home .faq-container strong {
	color: var( --os );
}

body.home .faq-container p,
body.home .faq-container .faq-answer {
	color: var( --os-doux );
}

/* ------------------------------------------------- Phrase de sortie et pied */

body.home .elementor-element-77c44ee9 .hl-ask__line,
body.home .elementor-element-77c44ee9 p {
	color: var( --os-doux );
}

body.home .elementor-element-77c44ee9 a {
	color: var( --braise );
	border-bottom-color: rgba( 201, 86, 78, 0.4 );
}

/*
 * Le pied de page reste clair : m2graph le veut ainsi, et il ferme la page
 * comme la foire aux questions, en revenant à la lumière.
 */

@media ( max-width: 767px ) {
	body.home .hl-phen,
	body.home .hl-places,
	body.home .hl-steps,
	body.home .hl-say {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	body.home .elementor-element-6980db5b > .elementor-container,
	body.home .elementor-element-3030d7c5 > .elementor-container,
	body.home .elementor-element-53aaa9c {
		padding-top: 72px;
		padding-bottom: 72px;
	}

	body.home .headline,
	body.home .hl-steps__title,
	body.home .hl-phen__title,
	body.home .hl-places__title,
	body.home .faq-title {
		font-size: 29px;
	}
}

/*
 * Le sol sombre était masqué par deux couches plus fortes : le `#wrapper` du
 * thème, blanc sur toute la hauteur, et les fonds générés par Elementor pour
 * chaque section, qui portent une classe de plus que les nôtres. Ces règles-là
 * ne se gagnent pas à la spécificité, elles se gagnent au poids.
 */
body.home #wrapper,
body.home .elementor-section:not( .elementor-element-6980db5b ),
body.home .elementor-widget-wrap,
body.home .elementor-column-wrap,
body.home .e-con-inner {
	background-color: transparent !important;
}

/* La section des univers est hors de ce nettoyage : son fond est réglé dans
   Elementor (Style, Arrière-plan), comme celui du bandeau. */

/* Le bandeau est hors de ce nettoyage : son fond est un défaut en couche, pour
   rester réglable dans Elementor (Style, Arrière-plan). */

/* Fond des vignettes d'univers, visible le temps que la photo se charge. */
body.home .category-small-box-alt {
	background-color: var( --surface );
}

/* Bouton « Voir toutes les adresses » : filet clair sur la nuit. */
body.home .hl-see-all a,
body.home .hl-see-all .button {
	border-color: rgba( 150, 27, 27, 0.35 ) !important;
	color: var( --hl-red ) !important;
	background: transparent !important;
}

body.home .hl-see-all a:hover,
body.home .hl-see-all .button:hover {
	border-color: var( --hl-red ) !important;
	color: var( --hl-ivory-light ) !important;
	background: var( --hl-red ) !important;
}

/*
 * Listeo décore d'un filet rouge tous les `span` de ses titres. Le sous-titre
 * de la section des adresses en est un : le filet réapparaissait entre le titre
 * et sa phrase. Le surtitre joue déjà ce rôle, un seul marqueur suffit.
 */
body.home .headline span::before,
body.home .headline span::after {
	content: none;
}

/* Un seul rayon pour toutes les surfaces de la page. */
body.home .category-small-box-alt {
	border-radius: 6px;
}

/* Les titres cassent au bon endroit plutôt qu'au bord du conteneur. */
body.home .headline,
body.home .hl-steps__title,
body.home .hl-phen__title,
body.home .hl-places__title,
body.home .faq-title,
body.home .hl-say__line {
	text-wrap: balance;
}

/*
 * L'en-tête n'a pas de fond propre : il s'appuyait sur le blanc du `#wrapper`.
 * En rendant le wrapper transparent, le logo et le menu, tous deux en encre
 * sombre, se retrouvaient invisibles sur la nuit. L'en-tête reprend son fond.
 *
 * Un en-tête sombre avec un logo blanc serait plus juste sur cette page, mais
 * c'est un choix de marque : il demande un fichier de logo clair, que la
 * cliente n'a pas fourni.
 */
body.home #header,
body.home #header.cloned,
body.home #header-container {
	background-color: var( --hl-ivory-light );
}

/* ==================================== Fin de page en clair, en-tête posé sur la photo */

/*
 * La page descend dans la nuit puis revient à la lumière pour répondre et pour
 * signer : foire aux questions, phrase de sortie, pied de page.
 */
body.home .elementor-element-53aaa9c,
body.home .elementor-element-77c44ee9 {
	background-color: var( --hl-ivory-light ) !important;
}

body.home .faq-title {
	color: #150e10;
}

body.home .faq-title .hl-eyebrow {
	color: var( --hl-red );
}

body.home .faq-container .faq-item,
body.home .faq-container .faq-question,
body.home .faq-container details,
body.home .faq-container .ui-accordion-header,
body.home .faq-container .trigger {
	border-color: rgba( 0, 0, 0, 0.07 );
	background: var( --hl-ivory-light );
	color: #150e10;
}

body.home .faq-container h4,
body.home .faq-container h5,
body.home .faq-container strong {
	color: #150e10;
}

body.home .faq-container p,
body.home .faq-container .faq-answer {
	color: #6b6151;
}

body.home .elementor-element-77c44ee9 .hl-ask__line,
body.home .elementor-element-77c44ee9 p {
	color: #6b6151;
}

/* ============================ En-tête posé sur la photographie du bandeau */

/*
 * La classe `transparent-header`, posée sur le corps par l'extension, laisse
 * Listeo gérer le positionnement et ses propres replis. Ici, uniquement les
 * couleurs.
 *
 * Attention au clone : Listeo duplique l'en-tête en `#header.cloned.sticky`
 * **à l'intérieur du même conteneur**. Le garde-fou doit donc porter sur
 * l'en-tête lui-même, pas sur le conteneur, sinon le clone hérite des couleurs
 * claires et flotte, illisible, sur le fond blanc du bas de page.
 */
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) {
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.home.transparent-header #header-container:not( .hl-header ):not( .cloned ) {
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) #logo img {
	filter: brightness( 0 ) invert( 1 );
}

body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) #navigation.style-1 > ul > li > a {
	color: rgba( 247, 246, 243, 0.88 );
}

body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) #navigation.style-1 > ul > li > a:hover,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) #navigation.style-1 > ul > li.current-menu-item > a {
	background: transparent;
	color: var( --hl-ivory );
}

/* Le bouton de connexion perd sa pastille grise, illisible sur la photo. */
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget .sign-in,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget .user-name,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget a.button.border {
	border: 1px solid rgba( 255, 255, 255, 0.34 );
	border-radius: 4px;
	background: transparent;
	color: rgba( 247, 246, 243, 0.92 );
	white-space: nowrap;
}

body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget .sign-in:hover,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget a.button.border:hover {
	border-color: rgba( 255, 255, 255, 0.7 );
	background: rgba( 255, 255, 255, 0.1 );
	color: var( --hl-ivory );
}

body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .hamburger-inner,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .hamburger-inner::before,
body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .hamburger-inner::after {
	background-color: #f7f6f3;
}

/*
 * Le bouton « Ajouter une annonce » passait sur deux lignes aux largeurs
 * intermédiaires, ce qui le transformait en grosse ellipse. Il disparaît sous
 * 1100 px, où le menu passe déjà en tiroir.
 */
@media ( max-width: 1099px ) {
	body.home.transparent-header #header-container:not( .hl-header ) #header:not( .cloned ) .header-widget a.button.border {
		display: none;
	}
}

/*
 * L'en-tête collant reprend le fond blanc et l'encre du thème : plus bas dans
 * la page, aucune photographie ne le porte.
 */
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned {
	background: var( --hl-ivory-light );
	box-shadow: 0 1px 0 rgba( 0, 0, 0, 0.08 );
}

body.home.transparent-header #header-container:not( .hl-header ) #header.cloned #logo img {
	filter: none;
}

body.home.transparent-header #header-container:not( .hl-header ) #header.cloned #navigation.style-1 > ul > li > a,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .header-widget .sign-in,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .header-widget .user-name,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .header-widget a.button.border {
	color: #373132;
}

body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .header-widget .sign-in,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .header-widget a.button.border {
	border-color: rgba( 0, 0, 0, 0.18 );
	background: transparent;
}

body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .hamburger-inner,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .hamburger-inner::before,
body.home.transparent-header #header-container:not( .hl-header ) #header.cloned .hamburger-inner::after {
	background-color: #373132;
}

/* ================================= Alternance des fonds demandée par m2graph */

/*
 * Nuit pour le bandeau et les univers, jour pour la sélection et sa phrase,
 * puis retour à la nuit à partir du registre, et sortie en clair.
 */
body.home .elementor-element-3030d7c5.elementor-element-3030d7c5,
body.home .hl-say.hl-say {
	background-color: var( --hl-ivory-light ) !important;
}

/* Dans la zone claire, l'encre reprend ses droits. */
body.home .elementor-element-3030d7c5 .headline,
body.home .hl-say__line {
	color: #150e10;
}

body.home .elementor-element-3030d7c5 .headline .hl-eyebrow {
	color: var( --hl-red );
}

body.home .elementor-element-3030d7c5 .headline span {
	color: #6b6151;
}

/* ============================================== Vignettes des univers reprises */

/*
 * Les trois vignettes étaient basses et leurs photographies trop claires pour
 * le sol de nuit : un château au couchant et une salle dorée sautaient à la
 * figure. Elles gagnent en hauteur, se cernent d'un filet, et leurs images sont
 * désaturées puis assombries pour rejoindre la nuit. Au survol, la photo
 * reprend ses couleurs : c'est la récompense du geste.
 */
body.home .category-small-box-alt {
	min-height: 300px;
	border: 1px solid var( --filet );
	border-radius: 6px;
}

body.home .category-small-box-alt img {
	filter: saturate( 0.55 ) brightness( 0.68 );
	transition: transform 0.5s ease, filter 0.5s ease;
}

body.home .category-small-box-alt:hover img {
	filter: saturate( 0.9 ) brightness( 0.86 );
	transform: scale( 1.04 );
}

body.home .category-small-box-alt:hover {
	border-color: var( --filet-fort );
}

body.home .category-small-box-alt h4 {
	font-size: 21px;
	font-weight: 600;
}

body.home .hl-tile-note {
	color: rgba( 247, 246, 243, 0.72 );
}

/* ====================================================== Pied de page lisible */

/*
 * Le corps de l'accueil passe le texte en os clair, et cette couleur descendait
 * dans le pied de page resté clair : blanc sur blanc. L'encre y est rétablie.
 */
body.home #footer,
body.home #footer p,
body.home #footer .textwidget,
body.home #footer li,
body.home #footer .footer-new-bottom-left {
	color: #373132;
}

body.home #footer h4,
body.home #footer strong {
	color: #150e10;
}

body.home #footer a,
body.home #footer ul.menu li a,
body.home #footer .hl-legal a {
	color: #373132;
}

body.home #footer a:hover,
body.home #footer ul.menu li a:hover,
body.home #footer .hl-legal a:hover {
	color: var( --hl-red );
}

/* Même correction pour les deux autres zones claires de la page. */
body.home .elementor-element-53aaa9c,
body.home .elementor-element-77c44ee9 {
	color: #373132;
}

/* =============================== Titre du bandeau, duo de polices */

/*
 * La deuxième ligne du titre bascule dans l'italique de la machine à écrire :
 * même idée que les titres de section, mais à l'échelle du bandeau.
 */
/*
 * Les éléments atomiques ne portent pas de classe `elementor-element-ID` : ils
 * sont nommés `e-xxxxxxx`. On passe donc par le bloc parent, qui lui la porte.
 */

/* Le paragraphe collait au titre : la marge haute avait sauté à la fusion. */

/* Le paragraphe du bandeau reste centré quoi qu'il arrive à la fusion des styles. */

/* ======================================== Bandeau ramené à une hauteur juste */

/*
 * Le bandeau montait à 825 px, dont 378 px de réserve vide : 168 px au-dessus du
 * titre et 210 px que Listeo pose lui-même au-dessus du formulaire. La réserve
 * haute descend à ce qu'il faut pour dégager l'en-tête, et celle de Listeo saute.
 */
/* Réserve verticale du bloc intérieur supprimée : depuis que le bandeau vit
   dans Elementor, ce sont les rembourrages de la section qui placent le
   contenu, à parts égales en haut et en bas. Les 132 px hérités d'ici
   décentraient tout vers le bas. */
body.home .elementor-element-589c787b {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.home .main-search-container:has( .hl-home ) .main-search-inner {
	padding-top: 0;
}

body.home .main-search-container:has( .hl-home ) {
	padding-bottom: 72px;
}

@media ( max-width: 767px ) {
	body.home .elementor-element-589c787b {
		padding-top: 0 !important;
	}

	body.home .main-search-container:has( .hl-home ) {
		padding-bottom: 48px;
	}
}

/* ================================================ Univers */

/*
 * Les vignettes gagnent un filet qui s'éclaire au survol et un libellé plus
 * affirmé. La photographie reste en retrait tant qu'on ne la regarde pas.
 */
body.home .category-small-box-alt h4 {
	padding: 0 22px 6px;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.2px;
}

body.home .hl-tile-note {
	padding: 0 22px 22px;
	color: rgba( 247, 246, 243, 0.74 );
	font-size: 14px;
	line-height: 1.5;
}

body.home .categories-boxes-container-alt {
	gap: 24px;
}

/* ============================================ Échelle typographique de l'accueil

   h1     52 / 1,04   le bandeau, une seule fois
   h2     40 / 1,12   les titres de section
   h3     22 / 1,3    les intertitres dans une section
   h4     18 / 1,35   les libellés de carte et de vignette
   chapô  17 / 1,7    la phrase sous un titre de section
   texte  16 / 1,7    le corps
   petit  14 / 1,6    les mentions et les compteurs
   ============================================================================ */

body.home .hl-phen__label {
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: 0.3px;
}

body.home .hl-phen__lead,
body.home .hl-places__lead {
	max-width: 62ch;
	margin-top: 18px;
	font-size: 17px;
	line-height: 1.7;
}

body.home .hl-phen__levelcopy strong,
body.home .hl-steps__copy strong {
	font-size: 16px;
	line-height: 1.4;
}

body.home .hl-phen__levelcopy span,
body.home .hl-steps__copy span,
body.home .hl-trust__copy span {
	font-size: 15px;
	line-height: 1.6;
}

body.home .hl-phen__name {
	font-size: 16px;
}

body.home .hl-phen__count,
body.home .hl-places__lead + .hl-places__list {
	font-size: 14px;
}

/* --------------------------------------------------- Rythme intérieur des blocs

   Sous un titre de section : 18 px jusqu'au chapô, 48 px jusqu'au contenu.
   Entre les éléments d'une même grille : 24 px.
   -------------------------------------------------------------------------- */

body.home .headline {
	margin-bottom: 48px;
}

body.home .hl-phen__scale,
body.home .hl-steps__list,
body.home .hl-places__list {
	margin-top: 48px;
}

body.home .hl-phen__list {
	margin-top: 18px;
}

body.home .hl-steps__list,
body.home .hl-trust__inner {
	gap: 24px 40px;
}

body.home .faq-title {
	margin-bottom: 40px;
}

@media ( max-width: 767px ) {
	body.home .headline {
		margin-bottom: 32px;
	}

	body.home .hl-phen__scale,
	body.home .hl-steps__list,
	body.home .hl-places__list {
		margin-top: 32px;
	}
}

/* ============================================================================
 * CHARTE : DEUX FAMILLES, UNE PALETTE
 *
 * Cormorant Garamond porte les titres, les grandes accroches et l'éditorial.
 * Inter porte la navigation, les boutons, les formulaires et le texte courant.
 * Aucune autre famille. L'italique de Cormorant sert à mettre en valeur un mot,
 * rarement, et seulement quand le mot le mérite.
 *
 * Un seul rouge, var( --hl-red ). Sur la nuit il tombe sous 2 pour 1 : là, c'est le
 * bronze qui prend les petits accents, et le rouge reste aux boutons et aux
 * gestes de conversion, où il porte du texte clair.
 * ========================================================================== */

:root {
	/*
	 * Source unique : Elementor, Variables globales. Elementor écrit lui-même
	 * --hl-red, --hl-black, --hl-ivory… sur :root. Les noms français
	 * ci-dessous restent comme alias, le temps que l'ancien code les lâche.
	 * Les valeurs de repli ne servent que si le kit n'est pas chargé.
	 */
	--hl-noir: var( --hl-black, #150e10 );
	--hl-ivoire: var( --hl-ivory, #f7f6f3 );
	--hl-ivoire-clair: var( --hl-ivory-light, #f7f6f3 );
	--hl-rouge: var( --hl-red, #961b1b );
	--hl-gris-chaud: var( --hl-text-muted, #6b6151 );

	/*
	 * --hl-beige, --hl-bronze et --hl-champagne portent déjà le nom que leur
	 * donne Elementor : on ne les redéfinit pas, sinon la variable se
	 * référencerait elle-même.
	 */

	/* Encres, qui n'ont pas d'équivalent dans la palette de marque. */
	--hl-encre: #373132;
	--hl-encre-douce: #6b6151;

	/* Familles. */
	--hl-display: var( --hl-font-display, "Cormorant Garamond" ), Georgia, "Times New Roman", serif;
	--hl-body: var( --hl-font-body, "Plus Jakarta Sans" ), system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Hauteurs de ligne et interlettrage du système. */
	--hl-lh-hero: 0.95;
	--hl-lh-titre: 1.05;
	--hl-lh-sous-titre: 1.15;
	--hl-lh-texte: 1.65;
	--hl-ls-hero: -0.04em;
	--hl-ls-h2: -0.035em;
	--hl-ls-h3: -0.025em;
	--hl-ls-h4: -0.015em;
	--hl-ls-texte: 0;
	--hl-ls-nav: 0.01em;
	--hl-ls-label: 0.14em;
}

/* ------------------------------------------------------------- Les familles */

html body,
html body p,
html body li,
html body span,
html body label,
html body input,
html body textarea,
html body select,
html body button,
html body .button,
html body a.button,
html body #navigation,
html body #navigation a,
html body .header-widget,
html body h4,
html body h5,
html body h6,
html body .listing-card-nl h2,
html body .listing-card-nl .listing-title-nl,
html body .listing-item-container h3 {
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html body h1,
html body h2,
html body h3,
html body .headline,
html body .faq-title,
html body .hl-say__line {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/*
 * Cormorant dessine petit pour sa taille : les titres montent d'environ un
 * sixième pour retrouver la présence qu'avaient les anciens.
 */
body.home .headline,
body.home .hl-phen__title,
body.home .hl-places__title,
body.home .faq-title {
	font-size: 46px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.2px;
}

/* L'italique, rare et volontaire. */
html body h1 em,
html body h2 em,
html body h3 em,
html body .headline em,
html body .hl-accent {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1em;
	letter-spacing: 0;
	opacity: 1;
}

/* Les surtitres et les mentions repassent en Inter, la machine à écrire sort. */
html body .hl-eyebrow,
html body .hl-bar-label,
html body .hl-trust__copy strong,
html body .hl-phen__label,
html body .hl-phen__name,
html body .hl-phen__count,
html body .hl-phen__levelcopy strong,
html body .hl-steps__number,
html body .listing-card-nl .listing-price-nl {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

html body .hl-eyebrow {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.24em;
}

/* --------------------------------------------------------------- La palette */

body.home {
	--nuit: var( --hl-black );
	--surface: #1e1518;
	--surface-haut: #1e1518;
	--filet: rgba( 247, 246, 243, 0.12 );
	--filet-fort: rgba( 247, 246, 243, 0.26 );
	--os: var( --hl-ivory );
	--os-doux: rgba( 247, 246, 243, 0.66 );
	--os-faible: rgba( 247, 246, 243, 0.42 );
	--braise: var( --hl-bronze );

	/* Fond du site : réglé dans Elementor (Réglages du site, Arrière-plan). */
	color: var( --hl-ivory );
}

/* Les zones claires passent à l'ivoire : le blanc pur refroidit la page.
   La classe est doublée pour repasser devant le nettoyage des fonds, qui a
   gagné une classe en épargnant la section des univers. */
body.home .elementor-element-3030d7c5.elementor-element-3030d7c5,
body.home .hl-say.hl-say {
	background-color: var( --hl-ivory ) !important;
}

body.home .elementor-element-53aaa9c.elementor-element-53aaa9c,
body.home .elementor-element-77c44ee9.elementor-element-77c44ee9 {
	background-color: var( --hl-ivory-light ) !important;
}

body.home .elementor-element-3030d7c5 .headline,
body.home .hl-say__line {
	color: var( --hl-black );
}

body.home .elementor-element-3030d7c5 .headline span,
body.home .elementor-element-77c44ee9 .hl-ask__line {
	color: var( --hl-encre-douce );
}

body.home .faq-title {
	color: var( --hl-black );
}

/* Sur l'ivoire, l'italique et les surtitres prennent le rouge de marque. */
body.home .elementor-element-3030d7c5 .hl-eyebrow,
body.home .elementor-element-3030d7c5 .hl-accent,
body.home .faq-title .hl-eyebrow,
body.home .faq-title .hl-accent,
body.home .hl-say__line em {
	color: var( --hl-red );
}

/* Sur la nuit, le bronze prend les petits accents, le champagne l'italique. */
body.home .hl-eyebrow,
body.home .hl-phen__title::after {
	color: var( --hl-bronze );
	background: var( --hl-bronze );
}

body.home .hl-eyebrow {
	background: none;
}

body.home .elementor-element-3f4d6413 .hl-eyebrow {
	color: var( --hl-bronze );
}

body.home .elementor-element-3f4d6413 .hl-accent {
	color: var( --hl-champagne );
}

/* Cartes d'annonce du carrousel : sans boîte, comme celles des pages
   d'univers. La photographie et le texte se posent sur le fond de section. */
html body .listing-card-nl {
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .listing-card-nl:hover {
	box-shadow: none !important;
}

/* Le cœur se pose comme sur les pages d'univers : 40 px, à 12 px du coin de la
   photographie. Le calque d'origine était décalé de 20 px, ce qui repoussait le
   cœur à 32 px du bord. */
html body .listing-card-nl .image-overlay-top-nl {
	top: 0 !important;
	right: 0 !important;
	left: 0 !important;
}

html body .listing-card-nl .favorite-icon-nl {
	top: 12px !important;
	right: 12px !important;
}

html body .listing-card-nl .favorite-icon-nl {
	width: 40px !important;
	height: 40px !important;
}

/* Foire aux questions : mêmes tons chauds. */
body.home .faq-container .faq-item,
body.home .faq-container .faq-question,
body.home .faq-container .trigger {
	border-color: var( --hl-beige );
	background: var( --hl-ivory-light );
	color: var( --hl-black );
}

body.home .faq-container p,
body.home .faq-container .faq-answer {
	color: var( --hl-encre-douce );
}

/* Vignettes des univers : filet bronze discret. */
body.home .category-small-box-alt {
	border-color: rgba( 148, 134, 112, 0.24 );
	background-color: #1e1518;
}

body.home .category-small-box-alt:hover {
	border-color: rgba( 148, 134, 112, 0.55 );
}

/* Régions : le filet qui se déroule passe au bronze. */
body.home .hl-places__item::after {
	background: var( --hl-bronze );
}

body.home .hl-places__link:hover,
body.home .hl-places__link:focus-visible {
	color: var( --hl-champagne );
}

/* Pied de page et zones claires : gris chaud plutôt que gris froid. */
body.home #footer,
body.home #footer p,
body.home #footer .textwidget,
body.home #footer li,
body.home #footer .footer-new-bottom-left,
body.home #footer a,
body.home #footer ul.menu li a {
	color: var( --hl-encre-douce );
}

body.home #footer h4,
body.home #footer strong {
	color: var( --hl-black );
}

body.home #footer a:hover,
body.home #footer ul.menu li a:hover {
	color: var( --hl-red );
}

/* Le bouton de recherche garde le rouge de marque, seul rouge de la page. */
html body .hl-bar-submit {
	background: var( --hl-red );
}

html body .hl-bar {
	background: var( --hl-ivory-light );
	border-color: var( --hl-beige );
}

/*
 * Les surtitres posés dans les titres Listeo sont des `span` : la règle qui
 * grise les sous-titres de ces mêmes titres les rattrapait. Ils reprennent le
 * bronze, qui tient 6 pour 1 sur la nuit là où le rouge de marque tombe à 1,8.
 */
body.home .headline span.hl-eyebrow,
body.home h2 span.hl-eyebrow,
body.home h3 span.hl-eyebrow {
	color: var( --hl-bronze );
}

/* Sur les fonds ivoire, le surtitre et l'italique prennent le rouge de marque. */
body.home .elementor-element-3030d7c5 .headline span.hl-eyebrow,
body.home .faq-title span.hl-eyebrow {
	color: var( --hl-red );
}

/*
 * L'italique de Cormorant remplace l'ancien accent : champagne sur la nuit,
 * rouge de marque sur l'ivoire.
 */
body.home .hl-accent {
	color: var( --hl-champagne );
}

body.home .elementor-element-3030d7c5 .hl-accent,
body.home .faq-title .hl-accent {
	color: var( --hl-red );
}

/*
 * Les nouvelles sections sont des conteneurs Elementor, donc des `.e-con` : la
 * règle qui rend tous les conteneurs transparents pour laisser voir le sol
 * effaçait leur fond. Elles le reprennent nommément.
 */
body.home .elementor-element-3da15d86,
body.home .elementor-element-55e089a2,
body.home .elementor-element-52160128,
body.home .elementor-element-5985e131 {
	background-color: var( --hl-black ) !important;
}

body.home .elementor-element-64d087dd {
	background-color: var( --hl-ivory ) !important;
}

/* Le bandeau sombre : son fond Elementor est une nuit à 67 %, qui laissait
   voir le sol noir de la page. Sur le fond crème, il faut une nuit pleine
   sous le halo. */
html body.home .elementor-element.elementor-element-deea9d4 {
	background-color: var( --hl-black ) !important;
}

/* =========================================================================
   CHARTE, SUITE : LE RESTE DU SITE
   La charte vaut pour tout Haunted Lodges, pas seulement l'accueil. Les
   pages intérieures gardaient un sol gris froid (#eeebe5) et des surfaces
   en blanc pur, que la charte écarte.
   ========================================================================= */

/* Le sol des pages intérieures passe à l'ivoire, les surfaces posées
   dessus à l'ivoire clair. Le noir profond reste réservé à l'accueil. */
html body:not(.home) {
	background-color: var( --hl-ivory );
}

html body:not(.home) #wrapper,
html body:not(.home) .fs-inner-container.content,
html body:not(.home) .fs-container .fs-inner-container,
html body:not(.home) section.search,
html body #header-container,
html body #footer,
html body .listeo-mini-cart,
html body .menu-panel,
html body .panel-dropdown-content,
html body .dropdown-menu.open,
html body .daterangepicker,
html body .hl-pop,
html body .hl-modal-dialog,
html body .hl-map-control,
html body .hl-map-empty {
	background-color: var( --hl-ivory-light );
}

/* Les champs se distinguent de leur support par un filet chaud plutôt que
   par un blanc plus clair, puisque le blanc pur sort de la palette. */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="number"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="date"],
html body textarea,
html body select,
html body .chosen-single,
html body .bootstrap-select .btn {
	background-color: var( --hl-ivory-light );
	border-color: #ddd7cc;
}

html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="password"]:focus,
html body input[type="number"]:focus,
html body input[type="search"]:focus,
html body input[type="tel"]:focus,
html body textarea:focus {
	border-color: var( --hl-bronze );
}

/* Le titre d'une annonce est un élément éditorial : il revient au
   Cormorant, sur toutes les cartes, accueil et recherche comprises. */
html body .listing-card-nl .listing-title-nl,
html body .listing-item-container h3,
html body .listing-item-container .listing-title h3 {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	letter-spacing: 0.005em;
	color: var( --hl-black ) !important;
}

/* Surfaces restées en blanc pur : la règle précédente perdait contre des
   sélecteurs plus spécifiques du thème, d'où le passage en force ici. */
html body header#header-container:not(.hl-header),
html body header#header-container.fixed.fullwidth:not(.hl-header),
html body div#header.cloned,
html body .listeo-mini-cart,
html body .menu-panel,
html body .panel-dropdown-content,
html body .panel-dropdown-content.checkboxes,
html body .dropdown-menu.inner,
html body .calendar-table,
html body .daterangepicker,
html body .zoom-anim-dialog,
html body #sign-in-dialog,
html body .front.face,
html body .main-search-input,
html body #leaflet-geocode-cont,
html body .leaflet-control-zoom-in,
html body .leaflet-control-zoom-out,
html body .leaflet-control-attribution {
	background-color: var( --hl-ivory-light ) !important;
}

/* L'accueil garde son en-tête transparent au repos ; seule la barre
   collée au scroll reprend le fond clair. */
html body.home #header-container #header:not(.cloned),
html body.home header#header-container:not(.is-sticky) {
	background-color: transparent !important;
}

/* Poignées et pastilles de nos propres modules : ivoire, jamais blanc. */
html body .slider-arrow-nl,
html body .slider-handle {
	background-color: var( --hl-ivory-light ) !important;
}

html body .hl-slider-dot.is-active {
	background-color: var( --hl-ivory ) !important;
}

/* Les gris du thème sont froids (#6b6151, #666, #948670) : la charte demande
   un gris chaud. L'encre passe au noir profond, le texte secondaire au
   gris chaud, sur toutes les pages. */
html body,
html body p,
html body li,
html body td,
html body .listing-item-content p,
html body .sidebar-textbox p {
	color: var( --hl-encre );
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .headline,
html body #navigation a,
html body .listing-title h3 {
	color: var( --hl-black );
}

html body label,
html body .small-label,
html body .listing-item-details,
html body .listing-details,
html body .meta,
html body time,
html body .comment-by span,
html body .numerical-rating-description {
	color: var( --hl-encre-douce );
}

/* Le texte saisi doit être aussi lisible que le reste ; seul le texte
   d'aide reste en retrait. */
html body input,
html body textarea,
html body select {
	color: var( --hl-black );
}

html body ::placeholder {
	color: #948670;
	opacity: 1;
}

/* L'encre de corps ne doit pas déteindre sur les menus, dont les liens
   vivent parfois sur fond sombre. */
html body #navigation li,
html body #mobile-nav li,
html body .mobile-navigation-list li {
	color: inherit;
}

/* Texte perdu : le lien « Voir toutes les adresses » était ivoire sur
   ivoire depuis que la section de sélection est passée au clair. */
html body .hl-see-all__link {
	color: var( --hl-red ) !important;
	border-bottom-color: rgba(150, 27, 27, 0.35);
}

html body .hl-see-all__link:hover,
html body .hl-see-all__link:focus-visible {
	color: var( --hl-black ) !important;
	border-bottom-color: var( --hl-black );
}

/* Le bronze ne porte pas de texte sur fond clair : 2,96 pour 1. Il reste
   réservé aux fonds sombres, où il tient 6 pour 1. */
html body .e-con:not([class*="elementor-element-3da15d86"]):not([class*="elementor-element-55e089a2"]):not([class*="elementor-element-52160128"]):not([class*="elementor-element-5985e131"]) a[style*="a88962"],
html body .elementor-element-77c44ee9 a,
html body .elementor-element-64d087dd a {
	color: var( --hl-red ) !important;
}

/* Les univers : le thème sort un gris à 3,94 pour 1 sur le fond nuit. */
html body .category-small-box-alt,
html body .category-small-box-alt p,
html body .category-small-box-alt span {
	color: #ddd7cc;
}

html body .category-small-box-alt h4,
html body .category-small-box-alt h3 {
	color: var( --hl-ivory );
}

/* Cartes : ces deux lignes étaient en blanc translucide, pensées pour un
   fond sombre, illisibles depuis le passage à l'ivoire. */
html body .hl-card-bottom,
html body .hl-card-stats {
	color: var( --hl-encre-douce ) !important;
}

/* Gris chaud relevé à 4,9 pour 1 sur ivoire, au lieu de 4,24. */
html body .hl-say__line span,
html body .listing-item-details,
html body .meta {
	color: var( --hl-encre-douce );
}

/* Le tiroir de menu mobile est sombre par nature : il passe au noir
   profond, et tout ce qu'il porte à l'ivoire. Le rouge de marque n'y
   tenait que 1,87 pour 1 ; le champagne y monte à 8. */
html body .mobile-navigation-wrapper {
	background-color: var( --hl-black );
}

html body .mobile-navigation-wrapper,
html body .mobile-navigation-wrapper p,
html body .mobile-navigation-wrapper li,
html body .mobile-navigation-wrapper a,
html body .mobile-navigation-wrapper .widget-title {
	color: var( --hl-ivory );
}

html body .mobile-navigation-wrapper a[href^="mailto:"],
html body .mobile-navigation-wrapper a[href^="tel:"] {
	color: var( --hl-champagne );
}

/* Fil d'Ariane : le thème le sort en #948670 sur ivoire, soit 3,2 pour 1. */
html body .breadcrumbs span,
html body .breadcrumbs a,
html body #breadcrumbs span,
html body #breadcrumbs a {
	color: var( --hl-encre-douce );
}

html body .breadcrumbs a:hover,
html body #breadcrumbs a:hover {
	color: var( --hl-red );
}

/* Liens de pied de page : encre pleine, le rouge au survol. */
html body #footer a,
html body #footer li a,
html body .footer-links a {
	color: var( --hl-encre );
}

html body #footer a:hover,
html body .footer-links a:hover {
	color: var( --hl-red );
}

/* Menu utilisateur de l'en-tête : #6b6151 tombait à 4,48 pour 1, juste
   sous la barre. */
html body .user-menu a,
html body .user-menu ul li a,
html body .header-widget a,
html body .header-widget ul li a {
	color: var( --hl-encre );
}

html body .user-menu a:hover,
html body .header-widget a:hover {
	color: var( --hl-red );
}

/* Les menus de pied de page vivent dans des `aside.footer-widget`, hors de
   portée des règles visant `#footer a`. */
html body .footer-widget a,
html body .footer-widget li a,
html body .footer-widget .textwidget a,
html body #footer .widget a {
	color: var( --hl-encre );
}

html body .footer-widget a:hover,
html body #footer .widget a:hover {
	color: var( --hl-red );
}

html body.home .footer-widget a,
html body.home #footer .widget a {
	color: var( --hl-encre );
}

/* Page 404 : le message d'excuse sortait à 2,58 pour 1. */
html body .error-page p,
html body .not-found p,
html body .error-404 p {
	color: var( --hl-encre );
}

/* Fiche d'annonce : le bloc de réservation, son calendrier et la barre
   collée en bas de mobile restaient en blanc pur. */
html body .listing-widget,
html body .listing-widget.widget,
html body .hl-booking-dates,
html body .hl-booking-calendar,
html body .booking-sticky-footer,
html body .small-dialog-header,
html body .boxed-widget,
html body .hl-booking-panel {
	background-color: var( --hl-ivory-light );
}

/* Les champs gardaient le Raleway du thème : la charte n'admet que deux
   familles. */
html body input,
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="date"],
html body textarea,
html body .wpcf7-form-control,
html body .input-text,
html body .leaflet-control-zoom-in,
html body .leaflet-control-zoom-out,
html body .leaflet-container {
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Booking Plus sort ses créneaux et ses jours disponibles en blanc pur. */
html body .slot-carousel-viewport,
html body .slot-carousel-nav-btn,
html body .calendar-day.day-available,
html body .calendar-day {
	background-color: var( --hl-ivory-light );
}

/* Le kit Elementor impose encore Raleway sur quelques widgets classiques
   (bandeau propriétaire). */
html body h1.elementor-heading-title,
html body h2.elementor-heading-title,
html body h3.elementor-heading-title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

html body p.elementor-heading-title,
html body .elementor-button,
html body .elementor-widget-text-editor,
html body .elementor-widget-text-editor p {
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Le bandeau propriétaire est une section V3, que l'éditeur atomique
   refuse de modifier ; ses trois widgets gardaient le Raleway du kit. */
html body .elementor-element-65a0fb48 .elementor-heading-title {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
}

html body .elementor-element-3b83b321 .elementor-heading-title,
html body .elementor-element-7e37f03e .elementor-button {
	font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* =========================================================================
   ÉCHELLE TYPOGRAPHIQUE
   Une fonction, une taille. Les valeurs sont définies dans Elementor
   (Variables globales) ; celles-ci sont un repli identique, pour les pages où
   la feuille du kit n'est pas chargée. Les paliers tablette et mobile vivent
   ici, faute de variables globales responsives dans Elementor. `html:root`
   passe devant le `:root` du kit, chargé après nous.
   ========================================================================= */

:root {
	/*
	 * Repli des couleurs et des familles, identique aux variables globales
	 * Elementor : toutes les pages ne chargent pas la feuille du kit, et une
	 * var() inconnue fait tomber la déclaration entière.
	 */
	--hl-red: #961b1b;
	--hl-black: #150e10;
	--hl-ivory: #f7f6f3;
	--hl-ivory-light: #f7f6f3;
	--hl-beige: #eeebe5;
	--hl-bronze: #948670;
	--hl-champagne: #bcb2a1;
	--hl-champagne-light: #bcb2a1;
	--hl-text-muted: #6b6151;
	--hl-font-display: "Cormorant Garamond";
	--hl-font-body: "Plus Jakarta Sans";

	--hl-fs-hero: clamp(64px, 6vw, 92px);
	--hl-fs-h2: 56px;
	--hl-fs-h3: 36px;
	--hl-fs-h4: 24px;
	--hl-fs-lead: 18px;
	--hl-fs-body: 16px;
	--hl-fs-small: 14px;
	--hl-fs-meta: 12px;
	--hl-fs-label: 11px;

	/* Navigation et boutons ne rétrécissent pas sur mobile : 14 px partout. */
	--hl-fs-ui: 14px;
}


@media ( max-width: 1024px ) {
	html:root {
		--hl-fs-hero: clamp(54px, 8vw, 72px);
		--hl-fs-h2: 48px;
		--hl-fs-h3: 32px;
		--hl-fs-h4: 22px;
		--hl-fs-lead: 17px;
		--hl-fs-body: 16px;
		--hl-fs-small: 14px;
	}
}

@media ( max-width: 767px ) {
	html:root {
		--hl-fs-hero: clamp(44px, 12vw, 58px);
		--hl-fs-h2: 40px;
		--hl-fs-h3: 30px;
		--hl-fs-h4: 21px;
		--hl-fs-lead: 16px;
		--hl-fs-body: 15px;
		--hl-fs-small: 13px;
		--hl-fs-label: 10px;
	}
}

/* ------------------------------------------------------------------ Titres */

html body h2,
html body .headline,
html body .faq-title,
html body .hl-phen__title,
html body .hl-places__title,
html body .hl-steps__title,
html body h2.elementor-heading-title {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-h2 ) !important;
	line-height: var( --hl-lh-titre ) !important;
	letter-spacing: var( --hl-ls-h2 ) !important;
}

html body h3,
html body h3.elementor-heading-title {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-h3 ) !important;
	line-height: 1.1 !important;
}

html body h4,
html body h4.elementor-heading-title,
html body .category-small-box-alt h4 {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-h4 ) !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------------- Textes courants */

html body .hl-lead,
html body .hl-phen__lead,
html body .hl-places__lead,
html body .hl-hero__lead,
html body .sidebar-textbox p:first-child {
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-lead ) !important;
	line-height: var( --hl-lh-texte ) !important;
}

html body,
html body p:not( .e-paragraph-base ),
html body li,
html body td {
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-body ) !important;
	line-height: var( --hl-lh-texte ) !important;
}

/* Les paragraphes atomiques appartiennent à l'éditeur : ils héritent de la
   famille, mais leur taille et leur interligne viennent d'Elementor. */
html body p.e-paragraph-base {
	font-family: var( --hl-body );
}

html body .listing-item-details,
html body .listing-details,
html body .hl-card-bottom,
html body .hl-card-stats,
html body .breadcrumbs,
html body .breadcrumbs a,
html body .breadcrumbs span,
html body #breadcrumbs a,
html body #breadcrumbs span {
	font-size: var( --hl-fs-small ) !important;
	line-height: 1.5 !important;
}

html body .meta,
html body time,
html body .comment-by span,
html body .numerical-rating-description,
html body .hl-meta {
	font-size: var( --hl-fs-meta ) !important;
	line-height: 1.45 !important;
}

/* ------------------------------------------------------------- Interface */

html body #navigation a,
html body #mobile-nav a,
html body .button,
html body a.button,
html body button,
html body .elementor-button,
html body input,
html body textarea,
html body select,
html body label,
html body .hl-see-all__link,
html body .user-menu a,
html body .header-widget a {
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	line-height: 1.4 !important;
}

html body .button,
html body a.button,
html body button,
html body .elementor-button,
html body .hl-see-all__link {
	font-weight: 500 !important;
}

/* Surtitres : capitales, interlettrage large, jamais de paragraphe entier. */
html body .hl-eyebrow,
html body .hl-surtitre,
html body .hl-phen__eyebrow,
html body .hl-places__eyebrow,
html body .hl-steps__eyebrow {
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-label ) !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	letter-spacing: var( --hl-ls-label ) !important;
}

/* Le titre d'une carte est un élément éditorial de niveau « lead ». */
html body .listing-card-nl .listing-title-nl,
html body .listing-item-container h3,
html body .listing-item-container .listing-title h3 {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-lead ) !important;
	font-weight: 600 !important;
	line-height: 1.22 !important;
	color: var( --hl-black ) !important;
}

/* L'italique de Cormorant accentue un mot, jamais un paragraphe. */
html body h1 em,
html body h2 em,
html body h3 em,
html body .headline em {
	font-family: var( --hl-display ) !important;
	font-style: italic;
	font-weight: 400 !important;
	color: var( --hl-champagne );
}

html body .hl-sur-ivoire em,
html body .elementor-element-64d087dd em,
html body .elementor-element-77c44ee9 em {
	color: var( --hl-bronze );
}

/* Derniers écarts à l'échelle, relevés page par page. */
html body .hl-bar-label {
	font-size: var( --hl-fs-label ) !important;
	letter-spacing: var( --hl-ls-label );
	text-transform: uppercase;
}

html body .hl-say__line,
html body .hl-say__line span {
	font-size: var( --hl-fs-lead ) !important;
}

html body .footer-new-bottom-left,
html body .footer-new-bottom-left a,
html body .copyrights,
html body .copyrights a,
html body .hl-legal a,
html body .pagination a,
html body .pagination span {
	font-size: var( --hl-fs-small ) !important;
}

/* Le bouton de réservation portait une encre sombre sur le rouge de marque,
   1,83 pour 1. */
html body .book-now-text,
html body .booking-sticky-footer .button,
html body a.button.book-now,
html body #booking-widget-anchor .button {
	color: var( --hl-ivory ) !important;
}

/* Écarts restants à l'échelle, relevés sur la fiche d'annonce et l'accueil. */
html body .headline span,
html body .hl-fear-row__label {
	font-size: var( --hl-fs-lead ) !important;
}

html body .hl-card-stat,
html body .hl-card-stats span {
	font-size: var( --hl-fs-meta ) !important;
}

html body .hl-title-meta__item,
html body .listing-address,
html body .slg-button,
html body .hl-gallery-button {
	font-size: var( --hl-fs-small ) !important;
}

html body .hl-instant,
html body .listing-item-content h3 span.hl-instant {
	font-size: var( --hl-fs-label ) !important;
}

/* Commandes de carte : le thème les sort à 15 px, hors échelle. */
html body .leaflet-control-zoom-in,
html body .leaflet-control-zoom-out,
html body .leaflet-control-attribution,
html body .lost_password,
html body .hosted-by-link {
	font-size: var( --hl-fs-small ) !important;
}

/* Barre de réservation collée : le libellé sur le rouge de marque. La classe
   body.hl-single-listing manque sur certaines vues, d'où la règle ici. */
html body .booking-sticky-footer .bsf-right .button,
html body .booking-sticky-footer a.button {
	color: var( --hl-ivory ) !important;
}

/* Derniers 15 px hors échelle : détails de la fiche, compteur de résultats,
   carte d'hôte, titres de section de la fiche. */
html body .main-detail span,
html body li[class*="main-detail"] span,
html body .hl-detail-ready span,
html body .hl-host-card__help,
html body .hl-host-card a.button,
html body .hosted-by-link,
html body .hl-card-price-from,
html body .listing-nav-container li {
	font-size: var( --hl-fs-small ) !important;
}

html body .hl-section-title,
html body .hl-details-title,
html body .listing-desc-headline {
	font-size: var( --hl-fs-h4 ) !important;
}

/* Bandeau propriétaire : ses trois widgets V3 tiraient leur couleur du kit,
   dont la teinte principale est passée au noir profond, sur un fond sombre. */
html body .elementor-element-65a0fb48 .elementor-heading-title {
	color: var( --hl-ivory ) !important;
}

html body .elementor-element-3b83b321 .elementor-heading-title {
	color: var( --hl-beige ) !important;
}

/* Réglages de recherche restés hors échelle. */
html body .range-slider-headline,
html body .panel-dropdown a span.text,
html body .checkboxes label {
	font-size: var( --hl-fs-small ) !important;
}

/* Pastilles de regroupement sur la carte : le compteur sortait à 15 px. */
html body .marker-cluster span,
html body .leaflet-marker-icon span {
	font-size: var( --hl-fs-meta ) !important;
}

/* =========================================================================
   INTERLETTRAGE
   Le Cormorant se resserre pour un rendu éditorial ; l'Inter garde son
   chasse d'origine. Le resserrement reste sous 4 %, les lettres ne se
   touchent à aucune taille.
   ========================================================================= */

html body h3,
html body h3.elementor-heading-title,
html body .listing-card-nl .listing-title-nl,
html body .listing-item-container h3,
html body .listing-item-container .listing-title h3,
html body .hl-section-title,
html body .hl-details-title,
html body .listing-desc-headline {
	letter-spacing: var( --hl-ls-h3 ) !important;
}

html body h4,
html body h4.elementor-heading-title,
html body .category-small-box-alt h4 {
	letter-spacing: var( --hl-ls-h4 ) !important;
}

/* L'interlettrage se transmet aux enfants : les textes en Inter posés dans un
   titre ou hérités d'un bloc resserré reviennent à zéro. */
html body,
html body p,
html body li,
html body td,
html body input,
html body textarea,
html body select,
html body .button,
html body a.button,
html body button,
html body .elementor-button,
html body .hl-lead,
html body .hl-phen__lead,
html body .hl-places__lead,
html body .hl-hero__lead {
	letter-spacing: var( --hl-ls-texte ) !important;
}

html body #navigation a,
html body #mobile-nav a,
html body .user-menu a,
html body .header-widget a {
	letter-spacing: var( --hl-ls-nav ) !important;
}

/* Surtitres : le mouvement inverse. */
html body .hl-eyebrow,
html body .hl-surtitre,
html body .hl-phen__eyebrow,
html body .hl-places__eyebrow,
html body .hl-steps__eyebrow,
html body .hl-bar-label {
	letter-spacing: var( --hl-ls-label ) !important;
}

/* L'interlettrage se transmet en pixels : un badge de 10 px posé dans un titre
   resserré héritait jusqu'à -0,11 em. Les éléments d'interface en Inter
   reprennent leur chasse, où qu'ils soient. */
html body .headline span,
html body .tooltip-nl,
html body .instant-badge-nl,
html body .title-badge-nl,
html body .hl-instant,
html body .hl-card-bottom,
html body .hl-card-stats,
html body .hl-card-stat,
html body .listing-title-badges-nl,
html body .listing-item-details {
	letter-spacing: var( --hl-ls-texte ) !important;
}

/* Le sous-titre « Annonce proposée par » est en Inter dans un h4 resserré. */
html body .hosted-by-title span,
html body .hosted-by-title small {
	letter-spacing: var( --hl-ls-texte ) !important;
}

/* =========================================================================
   EN-TÊTE DE L'ACCUEIL
   Fixe du haut de page jusqu'au bas : transparent au-dessus du bandeau, puis
   verre fumé au scroll. Un seul interrupteur, `.is-scrolled`, posé par le
   script. Le clone que Listeo colle au scroll ne sert plus à rien ici.
   ========================================================================= */

html body.home header#header-container.hl-header {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: 0 !important;
	z-index: 1001 !important;
	height: 88px !important;
	background-color: transparent !important;
	border-bottom: 1px solid transparent !important;
	box-shadow: none !important;
	opacity: 0;
	transform: translateY( -8px );
	transition:
		background-color 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		backdrop-filter 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		border-color 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		box-shadow 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		height 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		opacity 0.6s ease,
		transform 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header.is-ready {
	opacity: 1;
	transform: translateY( 0 );
}

html body.home header#header-container.hl-header.is-scrolled {
	height: 74px !important;
	background-color: rgba( 21, 14, 16, 0.78 ) !important;
	backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	-webkit-backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	border-bottom-color: rgba( 247, 246, 243, 0.08 ) !important;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.12 ) !important;
}

/* Le clone de Listeo ferait doublon sous une barre déjà fixe. */
html body.home header#header-container.hl-header #header.cloned {
	display: none !important;
}

html body.home header#header-container.hl-header #header:not(.cloned) {
	position: static !important;
	height: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body.home header#header-container.hl-header #header > .container {
	position: relative !important;
	display: flex;
	align-items: center;
	height: 100% !important;
}

html body.home header#header-container.hl-header .left-side,
html body.home header#header-container.hl-header .right-side {
	display: flex;
	align-items: center;
	height: 100% !important;
	width: auto;
	float: none;
}

html body.home header#header-container.hl-header .right-side {
	margin-left: auto;
}

/* La navigation est centrée sur la largeur de la page, pas sur ce qui reste
   entre le logo et les boutons. */
html body.home header#header-container.hl-header #navigation {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	float: none;
	margin: 0 !important;
	transform: translate( -50%, -50% );
}

html body.home header#header-container.hl-header #navigation ul {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

html body.home header#header-container.hl-header #navigation ul li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.home header#header-container.hl-header #navigation ul li a {
	position: relative !important;
	display: inline-block;
	padding: 6px 0 !important;
	color: var( --hl-ivory ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1.4 !important;
	background: none !important;
}

/* Le trait naît au centre et s'ouvre vers les bords. */
html body.home header#header-container.hl-header #navigation ul li a::after {
	content: "";
	position: absolute !important;
	bottom: -4px;
	left: 50% !important;
	width: 0;
	height: 1px !important;
	background: var( --hl-champagne-light ) !important;
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header #navigation ul li a:hover::after,
html body.home header#header-container.hl-header #navigation ul li a:focus-visible::after,
html body.home header#header-container.hl-header #navigation ul li.current-menu-item a::after {
	left: 0 !important;
	width: 100%;
}

/* ------------------------------------------------- Bouton « Ajouter un lieu » */

html body.home header#header-container.hl-header .header-widget {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
}

html body.home header#header-container.hl-header .header-widget a.button {
	display: inline-flex;
	align-items: center;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 1px solid rgba( 247, 246, 243, 0.2 ) !important;
	border-radius: 999px !important;
	background: rgba( 247, 246, 243, 0.04 ) !important;
	color: var( --hl-ivory ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	white-space: nowrap;
	box-shadow: none !important;
	transition:
		background-color 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		border-color 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		transform 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header .header-widget a.button:hover,
html body.home header#header-container.hl-header .header-widget a.button:focus-visible {
	border-color: var( --hl-red ) !important;
	background: var( --hl-red ) !important;
	transform: translateY( -1px );
}

/* --------------------------------------------------------- Icône de compte */

html body.home header#header-container.hl-header .header-widget a.sign-in {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba( 247, 246, 243, 0.2 ) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var( --hl-ivory ) !important;
	transition:
		background-color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		border-color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		transform 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header .header-widget a.sign-in:hover,
html body.home header#header-container.hl-header .header-widget a.sign-in:focus-visible {
	border-color: rgba( 247, 246, 243, 0.34 ) !important;
	background: rgba( 247, 246, 243, 0.08 ) !important;
	transform: scale( 1.04 );
}

html body.home header#header-container.hl-header .header-widget a.sign-in i {
	margin: 0 !important;
	font-size: 17px;
	line-height: 1;
}

html body.home header#header-container.hl-header #logo img {
	transition: height 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* ------------------------------------------------------------------ Mobile */

@media ( max-width: 1024px ) {
	html body.home header#header-container.hl-header {
		height: 74px !important;
	}

	html body.home header#header-container.hl-header.is-scrolled {
		height: 66px !important;
	}

	html body.home header#header-container.hl-header #navigation,
	html body.home header#header-container.hl-header .header-widget a.button {
		display: none;
	}

	html body.home header#header-container.hl-header .mmenu-trigger {
		display: flex;
		align-items: center;
		margin-left: auto;
	}

	html body.home header#header-container.hl-header .left-side {
		flex: 1;
	}
}

/* Le tiroir mobile prend un rendu éditorial. */
html body .mobile-navigation-wrapper #mobile-nav a {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-h4 ) !important;
	letter-spacing: var( --hl-ls-h4 ) !important;
}

@media ( prefers-reduced-motion: reduce ) {
	html body.home header#header-container.hl-header,
	html body.home header#header-container.hl-header *,
	html body.home header#header-container.hl-header *::after {
		transition: none !important;
	}

	html body.home header#header-container.hl-header {
		opacity: 1;
		transform: none;
	}
}

/* Listeo étire la navigation sur toute la largeur du conteneur : centrée en
   absolu, elle doit se réduire à ses liens. */
html body.home header#header-container.hl-header #navigation,
html body.home header#header-container.hl-header #navigation ul,
html body.home header#header-container.hl-header #navigation ul.menu {
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

html body.home header#header-container.hl-header #navigation ul li {
	float: none !important;
	width: auto !important;
}

/* Le bloc de droite hérite de marges négatives du thème : il se recale sur la
   hauteur de la barre. */
html body.home header#header-container.hl-header .right-side,
html body.home header#header-container.hl-header .header-widget,
html body.home header#header-container.hl-header .header-widget > div {
	position: static !important;
	top: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1 !important;
}

html body.home header#header-container.hl-header .header-widget {
	height: auto !important;
}

/* Le panier de Listeo n'a rien à faire dans cette barre. */
html body.home header#header-container.hl-header .listeo-cart-container:empty {
	display: none !important;
}

/* Listeo réserve le bouton d'ajout aux personnes connectées. Sur l'accueil il
   reste visible pour tout le monde : c'est l'appel principal de la barre, et
   Listeo demande la connexion au clic. */
@media ( min-width: 1025px ) {
	html body.home header#header-container.hl-header .header-widget a.button,
	html body.user_not_logged_in.home header#header-container.hl-header .header-widget a.button:not( .wc-forward ) {
		display: inline-flex !important;
	}
}

/* L'icône de compte se suffit à elle-même ; le libellé reste dans le code
   pour les lecteurs d'écran. */
html body.home header#header-container.hl-header .header-widget a.sign-in {
	font-size: 0 !important;
}

html body.home header#header-container.hl-header .header-widget a.sign-in i,
html body.home header#header-container.hl-header .header-widget a.sign-in::before {
	font-size: 17px !important;
	line-height: 1 !important;
}

/* Le bouton d'ajout précède l'icône de compte, comme dans la maquette. */
html body.home header#header-container.hl-header .header-widget a.button {
	order: 1;
}

html body.home header#header-container.hl-header .header-widget a.sign-in {
	order: 2;
}

/* Le libellé se suffit : l'icône du thème sort du bouton. */
html body.home header#header-container.hl-header .header-widget a.button i,
html body.home header#header-container.hl-header .header-widget a.button::after,
html body.home header#header-container.hl-header .header-widget a.button::before {
	display: none !important;
}

/* L'icône de compte remplace la flèche de connexion du thème. */
html body.home header#header-container.hl-header .header-widget a.sign-in i {
	display: none !important;
}

html body.home header#header-container.hl-header .header-widget a.sign-in .hl-compte-icone {
	display: block;
	color: var( --hl-ivory );
}

/* =========================================================================
   EN-TÊTE DE L'ACCUEIL, SUITE
   Alignement vertical, état connecté, et report de la connexion dans le
   tiroir mobile.
   ========================================================================= */

/* Tout s'aligne sur l'axe de la barre : Listeo posait des marges et des
   hauteurs fixes qui décalaient chaque bloc de quelques pixels. */
html body.home header#header-container.hl-header #header > .container,
html body.home header#header-container.hl-header .left-side,
html body.home header#header-container.hl-header .right-side,
html body.home header#header-container.hl-header .header-widget {
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center !important;
}

html body.home header#header-container.hl-header #logo,
html body.home header#header-container.hl-header #logo a,
html body.home header#header-container.hl-header .user-menu,
html body.home header#header-container.hl-header .listeo-cart-container {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.home header#header-container.hl-header #logo img {
	filter: brightness( 0 ) invert( 1 );
	margin: 0 !important;
}

html body.home header#header-container.hl-header #navigation ul li a {
	color: var( --hl-ivory ) !important;
}

html body.home header#header-container.hl-header .hamburger-inner,
html body.home header#header-container.hl-header .hamburger-inner::before,
html body.home header#header-container.hl-header .hamburger-inner::after {
	background-color: var( --hl-ivory ) !important;
}

/* ------------------------------------------------------- Une fois connecté */

/* Le nom perd son cadre : c'est un libellé, pas un bouton. */
html body.home header#header-container.hl-header .user-menu .user-name {
	display: flex !important;
	align-items: center;
	gap: 8px;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	background: transparent !important;
	color: var( --hl-ivory ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1 !important;
}

/* L'imagette de profil sortait de la barre, cerclée de blanc, à gauche du
   logo. Le rond au trait de la barre la remplace. */
html body.home header#header-container.hl-header .user-menu .user-name > span,
html body.home header#header-container.hl-header .user-menu img.avatar {
	display: none !important;
}

html body.home header#header-container.hl-header .user-menu .usrname {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
}

/* Le volet déroulant reprend la matière de la barre. */
html body.home header#header-container.hl-header .user-menu ul {
	top: calc( 100% + 10px ) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 232px;
	padding: 10px !important;
	border: 1px solid rgba( 247, 246, 243, 0.1 ) !important;
	border-radius: 14px !important;
	background: rgba( 21, 14, 16, 0.94 ) !important;
	backdrop-filter: blur( 18px ) saturate( 130% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 130% );
	box-shadow: 0 18px 50px rgba( 0, 0, 0, 0.35 ) !important;
}

html body.home header#header-container.hl-header .user-menu ul li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

html body.home header#header-container.hl-header .user-menu ul li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 12px !important;
	border-radius: 9px;
	color: rgba( 247, 246, 243, 0.86 ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

html body.home header#header-container.hl-header .user-menu ul li a:hover {
	background: rgba( 247, 246, 243, 0.08 ) !important;
	color: var( --hl-ivory ) !important;
}

html body.home header#header-container.hl-header .user-menu ul li a i {
	color: var( --hl-bronze ) !important;
	font-size: 15px !important;
}

/* --------------------------------------------------------- Tiroir mobile */

@media ( max-width: 1024px ) {
	html body.home header#header-container.hl-header .header-widget a.sign-in,
	html body.home header#header-container.hl-header .user-menu {
		display: none !important;
	}
}

html body .hl-drawer-compte {
	margin: 28px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid rgba( 247, 246, 243, 0.12 );
}

html body .hl-drawer-titre {
	margin: 0 0 12px;
	color: var( --hl-bronze ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-label ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-label ) !important;
	text-transform: uppercase;
}

html body .hl-drawer-lien {
	display: block;
	padding: 9px 0;
	color: rgba( 247, 246, 243, 0.86 ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
}

html body .hl-drawer-lien:hover {
	color: var( --hl-ivory ) !important;
}

html body .hl-drawer-connexion {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border: 1px solid rgba( 247, 246, 243, 0.22 );
	border-radius: 999px;
	background: rgba( 247, 246, 243, 0.04 );
	color: var( --hl-ivory ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

html body .hl-drawer-connexion:hover,
html body .hl-drawer-connexion:focus-visible {
	border-color: var( --hl-red );
	background: var( --hl-red );
}

/* Listeo coiffe son en-tête de 18 px de rembourrage en haut et 8 en bas :
   tout le contenu descendait de cinq pixels sous l'axe de la barre. */
html body.home header#header-container.hl-header #header:not( .cloned ) {
	padding: 0 !important;
	border: 0 !important;
}

html body.home header#header-container.hl-header #header:not( .cloned ) > .container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

html body.home header#header-container.hl-header .header-widget,
html body.home header#header-container.hl-header .header-widget > div,
html body.home header#header-container.hl-header .header-widget > a {
	align-self: center !important;
	vertical-align: middle !important;
}

/* Le thème décale le lien de compte de six pixels (`position: relative; top: 6px`)
   et laisse le bloc de droite s'étirer : on remet tout sur l'axe. */
html body.home header#header-container.hl-header #header .header-widget {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in,
html body.home header#header-container.hl-header #header .header-widget .user-menu,
html body.home header#header-container.hl-header #header .header-widget a.button {
	position: relative !important;
	top: 0 !important;
	bottom: auto !important;
	align-self: center !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	top: 0 !important;
}

/* Le bouton garde ses dimensions : ses trois barres sont positionnées en
   absolu, et le vider de son rembourrage le réduisait à néant. */
html body.home header#header-container.hl-header #header .mmenu-trigger button {
	margin: 0 !important;
	position: relative !important;
	top: 0 !important;
}

/* Le bouton d'ouverture du tiroir n'a plus de dimensions propres sur
   l'accueil : ses trois barres sont redessinées ici. */
html body.home header#header-container.hl-header #header .mmenu-trigger button.hamburger {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-box {
	position: relative !important;
	display: block !important;
	width: 24px !important;
	height: 16px !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner,
html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner::before,
html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner::after {
	position: absolute !important;
	left: 0 !important;
	width: 24px !important;
	height: 1.5px !important;
	border-radius: 2px !important;
	background-color: var( --hl-ivory ) !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner {
	top: 50% !important;
	margin-top: -0.75px !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner::before {
	content: "" !important;
	top: -7px !important;
}

html body.home header#header-container.hl-header #header .mmenu-trigger .hamburger-inner::after {
	content: "" !important;
	top: 7px !important;
}

/* Mobile : le logo à gauche, le bouton du tiroir à droite, et rien d'autre.
   Le bloc de droite du thème (panier, connexion, ajout) descend dans le
   tiroir. */
@media ( max-width: 1024px ) {
	html body.home header#header-container.hl-header #header > .container {
		align-items: center !important;
	}

	html body.home header#header-container.hl-header .left-side {
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}

	html body.home header#header-container.hl-header .right-side {
		display: none !important;
	}

	html body.home header#header-container.hl-header .mmenu-trigger {
		margin-left: auto !important;
	}
}

/* Le bouton du tiroir se place lui-même : le thème le fait flotter à droite,
   nos propres règles se neutralisaient l'une l'autre. */
@media ( max-width: 1024px ) {
	html body.home header#header-container.hl-header #header .mmenu-trigger {
		position: absolute !important;
		right: 15px !important;
		top: 50% !important;
		left: auto !important;
		float: none !important;
		margin: 0 !important;
		transform: translateY( -50% ) !important;
	}

	html body.home header#header-container.hl-header .left-side {
		justify-content: flex-start !important;
	}
}

/* Tiroir mobile : le logo y était noir sur noir, et la croix arrivait en
   pastille blanche. */
html body .mobile-navigation-wrapper .menu-logo img {
	filter: brightness( 0 ) invert( 1 );
}

html body .mobile-navigation-wrapper .menu-icon-toggle {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba( 247, 246, 243, 0.18 ) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var( --hl-ivory ) !important;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

html body .mobile-navigation-wrapper .menu-icon-toggle:hover {
	border-color: rgba( 247, 246, 243, 0.34 ) !important;
	background: rgba( 247, 246, 243, 0.08 ) !important;
}

html body .mobile-navigation-wrapper .menu-icon-toggle i,
html body .mobile-navigation-wrapper .menu-icon-toggle::before {
	color: var( --hl-ivory ) !important;
}

/* La fenêtre de connexion passe devant le tiroir mobile, qui monte à
   z-index 100001. */
html body .mfp-bg {
	z-index: 100010 !important;
}

html body .mfp-wrap {
	z-index: 100011 !important;
}

/* Le bloc de droite reste collé au bord : la remise à zéro des marges lui
   avait retiré son `margin-left: auto`. */
html body.home header#header-container.hl-header #header .right-side {
	margin-left: auto !important;
}

/* Le panier WooCommerce n'a pas sa place dans cette barre. */
html body.home header#header-container.hl-header .listeo-cart-container {
	display: none !important;
}

/* Le panneau du panier reste dans le document même vide : il laissait un
   rectangle clair à côté du logo. */
html body.home header#header-container.hl-header .listeo-mini-cart,
html body.home header#header-container.hl-header .cart-details,
html body.home header#header-container.hl-header .widget_shopping_cart_content {
	display: none !important;
}

/* Le bouton du tiroir restait visible jusqu'à 1099 px, avec la pastille
   grise du thème, juste à côté du logo. */
/* Le sélecteur porte `#header` : sans lui, il perd contre nos propres règles
   d'alignement, qui en comptent deux. */
@media ( min-width: 1025px ) {
	html body.home header#header-container.hl-header #header .mmenu-trigger {
		display: none !important;
	}
}

html body.home header#header-container.hl-header .mmenu-trigger,
html body.home header#header-container.hl-header .mmenu-trigger button.hamburger {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Barre d'administration de WordPress : la barre fixe se glissait dessous. */
html body.admin-bar.home header#header-container.hl-header {
	top: 32px !important;
}

@media screen and ( max-width: 782px ) {
	html body.admin-bar.home header#header-container.hl-header {
		top: 46px !important;
	}
}

/* Le bouton d'ajout passe devant le compte, comme pour les visiteurs. */
html body.home header#header-container.hl-header #header .header-widget .user-menu {
	order: 2 !important;
}

/* La pastille de compteur de Listeo sort en vert : elle prend le rouge de
   marque, seule couleur d'alerte de la charte. */
html body.home header#header-container.hl-header .user-menu .nav-tag,
html body.home header#header-container.hl-header .user-menu .nav-tag.blue,
html body .hl-drawer-compte .nav-tag {
	background-color: var( --hl-red ) !important;
	color: var( --hl-ivory ) !important;
}

/* Le conteneur avait perdu son centrage quand ses marges ont été remises à
   zéro : il restait collé à gauche, et le menu centré sur lui se retrouvait
   décalé de la moitié de l'écart. */
html body.home header#header-container.hl-header #header > .container {
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Filet horizontal sous la barre, visible dès le haut de page et sur toutes
   les largeurs. Il se renforce à peine au scroll, quand le fond s'installe. */
html body.home header#header-container.hl-header {
	border-bottom: 1px solid rgba( 247, 246, 243, 0.1 ) !important;
}

html body.home header#header-container.hl-header.is-scrolled {
	border-bottom-color: rgba( 247, 246, 243, 0.14 ) !important;
}

/* Double filet au scroll : la barre était trop transparente, et les filets
   des sections passaient derrière elle en restant visibles. Le fond se
   densifie assez pour les absorber, sans devenir une bande opaque. */
html body.home header#header-container.hl-header.is-scrolled {
	background-color: rgba( 21, 14, 16, 0.78 ) !important;
}

/* Aucun filet dans la barre, sauf le sien : le thème en pose selon les
   largeurs, sur la rangée de navigation comme sur le bloc de droite. Seul le
   bord bas de l'en-tête, le bouton et le rond de compte gardent le leur. */
html body.home header#header-container.hl-header #header,
html body.home header#header-container.hl-header #header > .container,
html body.home header#header-container.hl-header #header .left-side,
html body.home header#header-container.hl-header #header .right-side,
html body.home header#header-container.hl-header #header .header-widget,
html body.home header#header-container.hl-header #header .header-widget > div,
html body.home header#header-container.hl-header #header #logo,
html body.home header#header-container.hl-header #header #navigation,
html body.home header#header-container.hl-header #header #navigation ul,
html body.home header#header-container.hl-header #header #navigation ul li,
html body.home header#header-container.hl-header #header #navigation ul li a,
html body.home header#header-container.hl-header #header .user-menu,
html body.home header#header-container.hl-header #header .user-menu .user-name {
	border: 0 !important;
	box-shadow: none !important;
}

/* Le trait fantôme : Listeo dessine un filet blanc de 940 px en
   `#navigation.style-1::before`, qui traversait la barre au-dessus des liens
   dès que la navigation passait en position centrée. */
html body.home header#header-container.hl-header #navigation::before,
html body.home header#header-container.hl-header #navigation::after,
html body.home header#header-container.hl-header #navigation.style-1::before,
html body.home header#header-container.hl-header #navigation.style-1::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

/* Visiteur : « Connexion » s'écrit, comme « Mon compte » une fois connecté.
   Le rond au trait et l'icône du thème laissent la place au libellé. */
html body.home header#header-container.hl-header #header .header-widget a.sign-in {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var( --hl-ivory ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1 !important;
	transform: none !important;
	transition: color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in:hover,
html body.home header#header-container.hl-header #header .header-widget a.sign-in:focus-visible {
	border: 0 !important;
	background: transparent !important;
	color: var( --hl-champagne-light ) !important;
	transform: none !important;
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in i,
html body.home header#header-container.hl-header #header .header-widget a.sign-in svg,
html body.home header#header-container.hl-header #header .header-widget a.sign-in::before {
	display: none !important;
}

/* Survol au rouge de marque : le trait des liens de navigation, et le même
   trait sous « Connexion ». Le libellé garde l'encre ivoire, parce que le
   rouge sur la nuit tombe à 1,9 pour 1 : illisible. Le geste reste rouge, la
   lecture reste nette. */
html body.home header#header-container.hl-header #navigation ul li a::after {
	background: var( --hl-red ) !important;
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in {
	position: relative !important;
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 1px;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in:hover::after,
html body.home header#header-container.hl-header #header .header-widget a.sign-in:focus-visible::after {
	left: 4px;
	width: calc( 100% - 8px );
}

html body.home header#header-container.hl-header #header .header-widget a.sign-in:hover,
html body.home header#header-container.hl-header #header .header-widget a.sign-in:focus-visible {
	color: var( --hl-ivory ) !important;
}

/* Le trait des liens de navigation sortait à moitié transparent : Listeo lui
   pose une opacité de 0,5, d'où un rouge plus pâle que sous « Connexion ». */
html body.home header#header-container.hl-header #navigation ul li a::after {
	opacity: 1 !important;
	bottom: -6px !important;
	height: 1px !important;
}

/* « Mon compte » reçoit le même trait que « Connexion ». */
html body.home header#header-container.hl-header #header .user-menu .user-name {
	position: relative !important;
}

html body.home header#header-container.hl-header #header .user-menu .user-name::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 1px;
	opacity: 1;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header #header .user-menu:hover .user-name::after,
html body.home header#header-container.hl-header #header .user-menu .user-name:hover::after,
html body.home header#header-container.hl-header #header .user-menu .user-name:focus-visible::after {
	left: 4px;
	width: calc( 100% - 8px );
}

/* Le trait de « Mon compte » passait au-dessus du libellé : le bloc qui le
   portait est plus haut que le texte. Il s'accroche maintenant au libellé
   lui-même, comme sous « Connexion ». */
html body.home header#header-container.hl-header #header .user-menu .user-name::after {
	content: none !important;
	display: none !important;
}

html body.home header#header-container.hl-header #header .user-menu .usrname {
	position: relative !important;
}

html body.home header#header-container.hl-header #header .user-menu .usrname::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 100%;
	margin-top: 4px;
	left: 50%;
	width: 0;
	height: 1px;
	opacity: 1;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body.home header#header-container.hl-header #header .user-menu:hover .usrname::after,
html body.home header#header-container.hl-header #header .user-menu .usrname:hover::after {
	left: 0;
	width: 100%;
}

/* Même écart pour les trois traits : 4,5 px sous la ligne de texte, celui de
   « Connexion ». Les boîtes n'ont pas la même hauteur, d'où des décalages
   différents à partir de leur bord bas. */
html body.home header#header-container.hl-header #navigation ul li a::after {
	bottom: 0.5px !important;
}

html body.home header#header-container.hl-header #header .user-menu .usrname::after {
	margin-top: 0.5px !important;
}

/* « Mon compte » porte un jambage : le p descend sous la ligne de base, et le
   trait paraissait collé alors qu'il était à la bonne distance de la ligne.
   Il descend de deux pixels pour retrouver le même blanc optique que sous
   « Connexion », qui n'a aucune lettre descendante. */
html body.home header#header-container.hl-header #header .user-menu .usrname::after {
	margin-top: 2.5px !important;
}

/* Deux pixels de plus sous « Mon compte » : le jambage du p demandait encore
   un peu d'air. */
html body.home header#header-container.hl-header #header .user-menu .usrname::after {
	margin-top: 4.5px !important;
}

/* Un cran de plus sous « Mon compte ». */
html body.home header#header-container.hl-header #header .user-menu .usrname::after {
	margin-top: 6.5px !important;
}

/* =========================================================================
   PIED DE PAGE ELEMENTOR
   Le pied de page est désormais un modèle global Elementor, posé sur la nuit.
   Notre échelle typographique, écrite en `!important` pour tenir tête au
   thème, y écrasait les réglages de l'éditeur : elle se range ici.
   ========================================================================= */

html body .elementor-location-footer {
	color: rgba( 247, 246, 243, 0.55 );
}

html body .elementor-location-footer h3 {
	font-family: var( --hl-display ) !important;
	font-size: 30px !important;
	font-weight: 500 !important;
	letter-spacing: -0.025em !important;
	line-height: 1.05 !important;
	color: var( --hl-ivory-light ) !important;
}

html body .elementor-location-footer h4 {
	font-family: var( --hl-body ) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.12em !important;
	line-height: 1.3 !important;
	text-transform: uppercase;
	color: var( --hl-bronze ) !important;
}

html body .elementor-location-footer p {
	font-family: var( --hl-body ) !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	color: inherit !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
}

html body .elementor-location-footer a {
	color: rgba( 247, 246, 243, 0.55 ) !important;
	text-decoration: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

html body .elementor-location-footer a:hover,
html body .elementor-location-footer a:focus-visible {
	color: var( --hl-ivory-light ) !important;
	transform: translateX( 3px );
}

/* Phrase de marque : un peu plus d'air entre les lignes. */
html body .elementor-location-footer .elementor-element-597cb727 {
	line-height: 1.7 !important;
}

/* Barre basse : plus petite, plus discrète, et sans décalage au survol. */
html body .elementor-location-footer .elementor-element-716a762d,
html body .elementor-location-footer .elementor-element-24d08df1,
html body .elementor-location-footer .elementor-element-1f7c3f28,
html body .elementor-location-footer .elementor-element-1f7c3f28 p {
	font-size: 12px !important;
	color: rgba( 247, 246, 243, 0.45 ) !important;
}

html body .elementor-location-footer .elementor-element-1f7c3f28:hover,
html body .elementor-location-footer .elementor-element-1f7c3f28:hover p {
	color: var( --hl-champagne-light ) !important;
	transform: none;
}

/* =========================================================================
   BANDEAU D'ACCUEIL, VERSION SOBRE
   Plus de photographie : une nuit profonde, deux cercles au trait et deux
   halos très doux. Le module de recherche de Listeo n'est touché par aucune
   règle de ce bloc ; tous les sélecteurs l'excluent explicitement.
   ========================================================================= */







/* Deux halos, posés en fond, jamais au-dessus du contenu. */
html body.home .elementor-element-deea9d4::before {
	content: "";
	position: absolute;
	top: -18%;
	left: 50%;
	width: 1100px;
	height: 1100px;
	margin-left: -550px;
	border-radius: 50%;
	background:
		radial-gradient( circle at 50% 50%, rgba( 148, 134, 112, 0.1 ) 0%, rgba( 148, 134, 112, 0 ) 62% );
	pointer-events: none;
	animation: hl-halo 22s ease-in-out infinite alternate;
}

html body.home .elementor-element-deea9d4::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -28%;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background:
		radial-gradient( circle at 50% 50%, rgba( 150, 27, 27, 0.14 ) 0%, rgba( 150, 27, 27, 0 ) 66% );
	pointer-events: none;
	animation: hl-halo 28s ease-in-out infinite alternate-reverse;
}

@keyframes hl-halo {
	from {
		transform: translate3d( 0, 0, 0 ) scale( 1 );
	}

	to {
		transform: translate3d( 0, -26px, 0 ) scale( 1.06 );
	}
}

/* Deux cercles au trait, très fins : l'architecture du fond. */


html body.home .elementor-element-589c787b::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 960px;
	height: 960px;
	margin: -480px 0 0 -480px;
	border: 1px solid rgba( 247, 246, 243, 0.055 );
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

html body.home .elementor-element-589c787b::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 640px;
	height: 640px;
	margin: -320px 0 0 -320px;
	border: 1px solid rgba( 247, 246, 243, 0.04 );
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-589c787b::before,
	html body.home .elementor-element-589c787b::after {
		display: none;
	}
}

/* ------------------------------------------------------------- Le texte */

@media ( max-width: 1024px ) {
}

@media ( max-width: 767px ) {
}

@media ( max-width: 767px ) {
}

/* ------------------------------------------------ Les trois engagements */

html body.home .elementor-element-1360bf36 {
	position: relative;
	z-index: 2;
}

html body.home .elementor-element-1360bf36 p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

html body.home .elementor-element-1360bf36 p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.95;
}

/* Cadenas, plume, repère : trois icônes au trait, en champagne. */
html body.home .elementor-element-70a3f591 p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-541a1d2e p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-5f599a43 p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

/* ------------------------------------------------------ Entrée en scène */

@media ( prefers-reduced-motion: no-preference ) {

	html body.home .elementor-element-1360bf36 {
		animation-delay: 0.52s;
	}
}

@keyframes hl-hero-entree {
	from {
		opacity: 0;
		transform: translate3d( 0, 14px, 0 );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Le titre tient sur deux lignes : la coupure est celle du `br`, pas celle
   d'une largeur maximale. */

@media ( max-width: 1500px ) {
}

@media ( max-width: 767px ) {
}

/* Les icônes se posent sur le paragraphe lui-même, pas sur un enfant. */

html body.home .elementor-element-1360bf36 > p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

html body.home p.elementor-element-70a3f591::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home p.elementor-element-541a1d2e::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home p.elementor-element-5f599a43::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

/* Les éléments atomiques ne portent pas la classe `elementor-element-ID` :
   seuls leurs conteneurs l'ont. Le bandeau se vise donc par la structure. */

@media ( max-width: 1024px ) {
}

@media ( max-width: 767px ) {
}

/* Les trois engagements : icône au trait devant chaque libellé. */

html body.home .elementor-element-1360bf36 > p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

html body.home .elementor-element-1360bf36 > p:nth-of-type(1)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-1360bf36 > p:nth-of-type(2)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-1360bf36 > p:nth-of-type(3)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4b799' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

/* L'entrée en scène, reprise sur les bons sélecteurs. */
@media ( prefers-reduced-motion: no-preference ) {

	html body.home .elementor-element-1360bf36 {
		animation-delay: 0.52s;
	}
}

/* Le bandeau prend la hauteur de l'écran, et la ligne d'engagements se
   rapproche de la barre de recherche. */






/* Les trois engagements passent en pastilles : un rond au trait, un intitulé
   et sa précision. L'écart au moteur se règle dans Elementor, il n'est plus
   forcé ici. */
html body.home .elementor-element-1360bf36 {
	gap: 56px !important;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-1360bf36 {
		gap: 32px !important;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-1360bf36 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
		width: auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

html body.home .elementor-element-1360bf36 > p::before {
	content: "";
	display: inline-flex;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 1px solid rgba( 188, 178, 161, 0.34 );
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: border-color 0.3s ease;
}

html body.home .elementor-element-1360bf36 > p:hover::before {
	border-color: rgba( 188, 178, 161, 0.6 );
}

/* Le texte de chaque engagement vit dans une colonne : l'intitulé, puis sa
   précision. Le paragraphe étant une boîte souple, sans cette colonne les
   deux lignes se rangeaient côte à côte. */

/* =========================================================================
   LES TROIS ENGAGEMENTS, AU CORDEAU
   Même largeur, même hauteur, même axe : les trois blocs partagent un seul
   système, sans rien hériter des réglages du widget.
   ========================================================================= */

html body.home .elementor-element-1360bf36 {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 40px !important;
	width: 100%;
	max-width: 1080px;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

/* Le rond : toujours 56 px, l'icône toujours 22, parfaitement centrée. */
html body.home .elementor-element-1360bf36 > p::before {
	content: "";
	display: block;
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	border: 1px solid rgba( 188, 178, 161, 0.34 );
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 22px 22px !important;
	transition: border-color 0.3s ease;
}

/* La colonne de texte : intitulé, puis précision, sur le même axe. */

@media ( max-width: 1024px ) {
	html body.home .elementor-element-1360bf36 {
		gap: 24px !important;
		max-width: 860px;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-1360bf36 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
		width: fit-content;
		max-width: 100%;
	}
}

/* La rangée d'engagements se cale sur la largeur de la barre de recherche
   (860 px, mesurés sur `.hl-bar`) et se fait discrète : trois colonnes
   égales, ronds de 44, texte en 13 et 11. */
html body.home .elementor-element-1360bf36 {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	align-items: center !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: 1040px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

html body.home .elementor-element-1360bf36 > p::before {
	flex: 0 0 42px !important;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid rgba( 188, 178, 161, 0.25 ) !important;
	background-position: center center !important;
	background-size: 17px 17px !important;
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-1360bf36 {
		grid-template-columns: 1fr !important;
		justify-items: center;
		gap: 14px !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

/* Le moteur vient désormais d'un shortcode, posé dans le bloc du bandeau :
   son formulaire se centre comme le reste. Aucune autre propriété du module
   n'est touchée, seulement ses marges extérieures. */
html body.home .elementor-element-589c787b .elementor-widget-shortcode,
html body.home .elementor-element-589c787b .elementor-widget-shortcode > .elementor-widget-container,
html body.home .elementor-element-589c787b .elementor-shortcode {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

html body.home .elementor-element-589c787b form.listeo-form-search_on_home_page,
html body.home .elementor-element-589c787b .hl-rebuilt,
html body.home .elementor-element-589c787b .hl-bar {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* La rangée d'engagements garde la largeur du moteur, centrée elle aussi. */
html body.home .elementor-element-1360bf36 {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================================
   BANDEAU : LA MAIN REVIENT À ELEMENTOR
   Les valeurs ci-dessous ne sont qu'un point de départ. Elles vivent dans une
   couche CSS de faible priorité : dès que la cliente touche une taille, une
   couleur ou une marge dans l'éditeur, c'est son réglage qui gagne, sans
   avoir à venir ici.
   ========================================================================= */

/* Le titre du site garde son échelle, sauf s'il s'agit d'un titre atomique
   posé dans Elementor : celui-là appartient à l'éditeur. */
html body h1:not( .e-heading-base ),
html body .hl-hero__title {
	font-family: var( --hl-display ) !important;
	font-size: var( --hl-fs-hero ) !important;
	line-height: var( --hl-lh-hero ) !important;
	letter-spacing: var( --hl-ls-hero ) !important;
}

@layer hl-bandeau {
	html body.home .elementor-element-589c787b > p:nth-of-type(1) {
		font-family: var( --hl-body );
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.17em;
		line-height: 1.4;
		text-transform: uppercase;
		color: rgba( 188, 178, 161, 0.85 );
		margin: 0 0 26px;
	}

	html body.home .elementor-element-589c787b h1 {
		max-width: none;
		margin: 0 auto 24px;
		font-family: var( --hl-display );
		font-size: clamp( 40px, 4.6vw, 74px );
		font-weight: 400;
		line-height: 0.92;
		letter-spacing: -0.04em;
		color: var( --hl-ivory-light );
		white-space: nowrap;
	}

	html body.home .elementor-element-589c787b h1 em {
		font-family: var( --hl-display );
		font-style: italic;
		font-weight: 400;
		color: var( --hl-champagne-light );
	}

	html body.home .elementor-element-589c787b > p:nth-of-type(2) {
		max-width: 650px;
		margin: 0 auto 36px;
		font-family: var( --hl-body );
		font-size: 17px;
		line-height: 1.65;
		color: rgba( 247, 246, 243, 0.65 );
	}

	html body.home .elementor-element-1360bf36 > p > span {
		font-family: var( --hl-body );
		font-size: 13px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0;
		color: rgba( 247, 246, 243, 0.9 );
	}

	html body.home .elementor-element-1360bf36 > p > span > span {
		font-size: 11px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: 0;
		color: rgba( 247, 246, 243, 0.42 );
	}

	@media ( max-width: 1024px ) {
		html body.home .elementor-element-589c787b h1 {
			font-size: clamp( 34px, 5.4vw, 54px );
		}
	}

	@media ( max-width: 767px ) {
		html body.home .elementor-element-589c787b h1 {
			font-size: clamp( 32px, 9vw, 42px );
			white-space: normal;
			text-wrap: balance;
		}

		html body.home .elementor-element-589c787b > p:nth-of-type(2) {
			font-size: 16px;
			margin-bottom: 28px;
		}
	}
}

/* Structure et décor : ce qu'Elementor ne sait pas faire, et qui ne gêne
   aucun réglage de l'éditeur. */
html body.home .elementor-element-1360bf36 > p > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
}

html body.home .elementor-element-1360bf36 > p > span > span {
	display: block;
}

/* La hauteur, le fond et l'axe du bandeau repassent eux aussi en couche : la
   hauteur minimale, le rembourrage et le centrage se règlent dans Elementor
   (Mise en page, Hauteur minimale), et ce qui suit n'est qu'un défaut.
   Le conteneur Elementor lit sa hauteur et son rembourrage dans ses propres
   variables (--min-height, --padding-block-*), posées par une règle non
   couchée : il faut donc écrire ces variables, et non min-height, sinon la
   règle .e-con l'emporte sur la couche et la hauteur retombe à zéro. */
@layer hl-bandeau {
	/* Le fond du bandeau : une nuit en dégradé, et un halo rouge très faible
	   dont le centre est donné par deux variables. Le script les déplace
	   lentement vers le pointeur ; sans script, sans souris ou en mouvement
	   réduit, elles gardent la position de repos écrite ici. */
	html body.home .elementor-element-deea9d4 {
		--hl-mouse-x: 50%;
		--hl-mouse-y: 46%;

		background-color: var( --hl-black );
		background-image:
			radial-gradient(
				ellipse 52% 46% at var( --hl-mouse-x ) var( --hl-mouse-y ),
				rgba( 150, 27, 27, 0.24 ) 0%,
				rgba( 150, 27, 27, 0.12 ) 24%,
				rgba( 150, 27, 27, 0.038 ) 47%,
				transparent 70%
			),
			linear-gradient(
				180deg,
				#150e10 0%,
				#150e10 54%,
				#150e10 100%
			);
	}

	html body.home .elementor-element-589c787b {
		gap: 0;
	}
}

/* Hauteur et rembourrage du bandeau : le conteneur V3 lit ces trois variables,
   et Listeo comme Elementor les remettent à « initial » dans une règle .e-con
   hors couche, qu'aucune règle en couche ne peut battre. Le défaut est donc posé
   hors couche, mais à deux classes seulement : la feuille de la page écrit
   « .elementor-156 .elementor-element.elementor-element-deea9d4 », trois
   classes, et l'emporte dès que le réglage Mise en page, Hauteur minimale est
   renseigné dans l'éditeur. */
body.home .elementor-element-deea9d4 {
	--min-height: 100svh;
}

@media ( max-width: 1024px ) {
	body.home .elementor-element-deea9d4 {
		--min-height: 88svh;
	}
}

@media ( max-width: 767px ) {
	body.home .elementor-element-deea9d4 {
		--min-height: auto;
		--padding-block-start: 96px;
		--padding-block-end: 56px;
	}
}

/* Hors couche : seulement ce que l'éditeur ne sait pas poser. */
html body.home .elementor-element-deea9d4 {
	position: relative;
	overflow: hidden;
	box-shadow: none !important;
}

html body.home .elementor-element-589c787b {
	position: relative;
	z-index: 2;
}

/* =========================================================================
 * Tablette et pagination des carrousels · 2.81.0
 * ========================================================================= */

/*
 * Pages d'univers sur tablette : le gabarit de Listeo passe à une colonne dès
 * 991 px, et la fiche s'étalait sur toute la largeur, en grande bannière. Deux
 * colonnes à partir de 768 px, donc la même carte verticale que dans le
 * carrousel de l'accueil.
 */
@media ( min-width: 768px ) and ( max-width: 991px ) {
	html body .listings-container .compact-layout.row,
	html body .fs-listings .compact-layout.row {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: flex-start;
	}

	html body .listings-container .compact-layout.row > [class*="col-"],
	html body .fs-listings .compact-layout.row > [class*="col-"] {
		flex: 0 0 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		float: none !important;
	}
}

/* La carte reste verticale quelle que soit la largeur : photographie dessus,
   texte dessous, jamais côte à côte. */
html body .listing-item-container .listing-item,
html body .listing-card-nl {
	flex-direction: column !important;
}

/*
 * Pagination des carrousels. Les points du thème sont larges et lourds, et ses
 * flèches sont des images. L'ensemble devient une pastille claire : deux
 * chevrons au trait, des cercles vides, et le point courant plein.
 */
html body .slider-controls {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 26px auto 0;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba( 21, 14, 16, 0.06 );
}

html body .slide-m-dots {
	display: flex !important;
	align-items: center;
	margin: 0;
	padding: 0 4px;
	background: none;
}

html body .slide-m-dots .slick-dots {
	display: flex !important;
	position: static;
	align-items: center;
	gap: 9px;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le thème masque le bouton et peint la pastille sur le li : c'est donc le li
   qui devient le cercle, et slick écoute déjà le clic dessus. */
html body .slide-m-dots .slick-dots li {
	width: 9px !important;
	height: 9px !important;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba( 21, 14, 16, 0.34 ) !important;
	border-radius: 50% !important;
	background: transparent !important;
	box-shadow: none !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

html body .slide-m-dots .slick-dots li::before,
html body .slide-m-dots .slick-dots li::after,
html body .slide-m-dots .slick-dots li button::before,
html body .slide-m-dots .slick-dots li button::after {
	content: none !important;
	display: none !important;
}

html body .slide-m-dots .slick-dots li button {
	display: none !important;
}

html body .slide-m-dots .slick-dots li.slick-active {
	border-color: var( --hl-encre ) !important;
	background: var( --hl-encre ) !important;
}

html body .slide-m-dots .slick-dots li:hover {
	border-color: var( --hl-encre ) !important;
}

/* Le thème retourne la flèche de gauche de 180 degrés pour réutiliser la même
   image : ce demi-tour retournait aussi notre chevron. Il est annulé. */
html body .slider-controls .slide-m-prev {
	transform: none !important;
}

/* Chevrons dessinés au trait : l'image grise du thème est déposée. */
html body .slider-controls .slick-arrow {
	position: relative;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	color: rgba( 21, 14, 16, 0.55 ) !important;
	font-size: 0 !important;
	transition: color 0.2s ease;
}

html body .slider-controls .slick-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
}

html body .slider-controls .slide-m-prev::after {
	transform: translate( -40%, -50% ) rotate( 135deg );
}

html body .slider-controls .slide-m-next::after {
	transform: translate( -60%, -50% ) rotate( -45deg );
}

html body .slider-controls .slick-arrow:hover {
	color: var( --hl-encre ) !important;
}


/* =========================================================================
 * LES UNIVERS, SUR IVOIRE · 2.83.0
 *
 * La section passe du noir à l'ivoire de la sélection, et le fond lui-même est
 * désormais posé dans Elementor (Style, Arrière-plan) : plus aucune règle ne le
 * force ici. Restent la mise en page et l'habillage des trois vignettes, que
 * Listeo ne sait pas régler.
 * ========================================================================= */

/* Le chapeau reprend exactement celui de « Sélection » : surtitre rouge, titre
   encre, italique rouge. */
body.home .elementor-element-6980db5b .headline {
	color: var( --hl-black );
}

body.home .elementor-element-6980db5b .hl-eyebrow {
	color: var( --hl-red ) !important;
}

body.home .elementor-element-6980db5b .headline em,
body.home .elementor-element-6980db5b .headline .hl-accent {
	color: var( --hl-red );
}

/*
 * Les vignettes : trois photographies en portrait libre, sans filet ni ombre,
 * posées à même l'ivoire, comme les fiches de la sélection. Le voile ne sert
 * qu'à tenir le texte ; la photographie reprend ses couleurs au survol.
 */
body.home .elementor-element-6980db5b .categories-boxes-container-alt {
	gap: 26px;
}

body.home .category-small-box-alt {
	min-height: 380px;
	border: 0;
	border-radius: 14px;
	background-color: var( --hl-black );
}

/*
 * Le survol, en trois gestes très lents et sans éclat : la photographie
 * respire à peine, le voile se retire du haut de l'image, et un souffle rouge
 * monte du bas. Aucun saut de luminosité, aucun déplacement de la vignette.
 */
body.home .category-small-box-alt::after {
	background: linear-gradient(
		180deg,
		rgba( 21, 14, 16, 0.22 ) 0%,
		rgba( 21, 14, 16, 0.34 ) 52%,
		rgba( 21, 14, 16, 0.88 ) 100%
	);
	transition: opacity 0.9s cubic-bezier( 0.22, 0.61, 0.28, 1 );
}

body.home .category-small-box-alt:hover::after,
body.home .category-small-box-alt:focus-visible::after {
	opacity: 0.76;
}

/* Le souffle rouge : un voile de marque, posé sous le texte, qui ne se révèle
   qu'au survol et reste sous les 12 pour cent. */
body.home .category-small-box-alt::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(
		180deg,
		rgba( 150, 27, 27, 0 ) 40%,
		rgba( 150, 27, 27, 0.12 ) 100%
	);
	transition: opacity 0.9s cubic-bezier( 0.22, 0.61, 0.28, 1 );
	pointer-events: none;
}

body.home .category-small-box-alt:hover::before,
body.home .category-small-box-alt:focus-visible::before {
	opacity: 1;
}

body.home .category-small-box-alt img {
	filter: saturate( 0.84 ) brightness( 0.82 );
	transform: scale( 1.012 );
	transition: transform 1.1s cubic-bezier( 0.22, 0.61, 0.28, 1 ),
		filter 1.1s cubic-bezier( 0.22, 0.61, 0.28, 1 );
}

body.home .category-small-box-alt:hover img,
body.home .category-small-box-alt:focus-visible img {
	filter: saturate( 1 ) brightness( 1.02 );
	transform: scale( 1.045 );
}

body.home .category-small-box-alt:hover {
	border-color: transparent;
}

body.home .category-small-box-alt h4,
body.home .hl-tile-note {
	transform: translate3d( 0, 6px, 0 );
	transition: transform 0.9s cubic-bezier( 0.22, 0.61, 0.28, 1 );
}

body.home .category-small-box-alt:hover h4,
body.home .category-small-box-alt:hover .hl-tile-note,
body.home .category-small-box-alt:focus-visible h4,
body.home .category-small-box-alt:focus-visible .hl-tile-note {
	transform: translate3d( 0, 0, 0 );
}

body.home .category-small-box-alt h4 {
	padding: 0 26px 8px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var( --hl-ivory-light ) !important;
}

body.home .hl-tile-note {
	padding: 0 26px 26px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba( 247, 246, 243, 0.78 );
}

/* Un trait sous la phrase, qui s'allonge et passe au rouge de marque au
   survol : le seul mouvement de la vignette, avec la photographie. */
body.home .hl-tile-note::after {
	content: "";
	display: block;
	width: 26px;
	height: 1px;
	margin-top: 16px;
	background: rgba( 247, 246, 243, 0.5 );
	transition: width 0.9s cubic-bezier( 0.22, 0.61, 0.28, 1 ),
		background-color 0.9s cubic-bezier( 0.22, 0.61, 0.28, 1 );
}

body.home .category-small-box-alt:hover .hl-tile-note::after,
body.home .category-small-box-alt:focus-visible .hl-tile-note::after {
	width: 56px;
	background: rgba( 188, 178, 161, 0.9 );
}

body.home .category-small-box-alt:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 3px;
}

/* Tablette et téléphone : Listeo remplace la grille par son propre carrousel,
   qui laisse la troisième vignette coupée au bord de l'écran. On revient à une
   grille, deux vignettes par rangée sur tablette, une sur téléphone, et les
   boutons du carrousel sortent. */
@media ( max-width: 1024px ) {
	body.home .elementor-element-6980db5b .taxonomy-responsive-slider {
		display: grid !important;
		transform: none !important;
	}

	body.home .elementor-element-6980db5b .taxonomy-responsive-slider .category-small-box-alt {
		flex: 1 1 auto !important;
		width: auto !important;
	}

	body.home .elementor-element-6980db5b .taxonomy-slider-controls-container {
		display: none !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	body.home .elementor-element-6980db5b .categories-boxes-container-alt {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
		gap: 22px;
	}

	body.home .category-small-box-alt {
		min-height: 320px;
	}
}

@media ( max-width: 767px ) {
	body.home .elementor-element-6980db5b .categories-boxes-container-alt {
		grid-template-columns: minmax( 0, 1fr ) !important;
		gap: 18px;
	}

	body.home .category-small-box-alt {
		min-height: 260px;
	}

	body.home .category-small-box-alt h4 {
		font-size: 23px;
		padding: 0 22px 6px;
	}

	body.home .hl-tile-note {
		padding: 0 22px 22px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body.home .category-small-box-alt img,
	body.home .category-small-box-alt:hover img,
	body.home .category-small-box-alt h4,
	body.home .hl-tile-note,
	body.home .category-small-box-alt:hover h4,
	body.home .category-small-box-alt:hover .hl-tile-note,
	body.home .category-small-box-alt::before,
	body.home .category-small-box-alt::after,
	body.home .hl-tile-note::after,
	body.home .category-small-box-alt:hover .hl-tile-note::after {
		transition: none;
		transform: none;
	}
}


/* =========================================================================
 * LES COULEURS DE TEXTE SUR IVOIRE · 2.84.0
 *
 * Relevées sur la maquette de m2graph, pixel par pixel : surtitre et filet en
 * brun-gris, titre presque noir, seconde ligne en italique champagne, texte
 * courant en brun-gris plus clair. Elles valent partout où l'accueil passe en
 * ivoire.
 * ========================================================================= */

body.home {
	--hl-sur-ivoire-surtitre: #6b6151;
	--hl-sur-ivoire-titre: #150e10;
	--hl-sur-ivoire-italique: #961b1b;
	--hl-sur-ivoire-texte: #6b6151;
}

body.home .elementor-element-6980db5b .headline,
body.home .elementor-element-3030d7c5 .headline,
body.home .hl-sur-ivoire .headline,
body.home .elementor-element-6980db5b h2,
body.home .elementor-element-3030d7c5 h2,
body.home .elementor-element-6980db5b h3,
body.home .elementor-element-3030d7c5 h3 {
	color: var( --hl-sur-ivoire-titre ) !important;
}

body.home .elementor-element-6980db5b .hl-eyebrow,
body.home .elementor-element-3030d7c5 .hl-eyebrow,
body.home .hl-sur-ivoire .hl-eyebrow {
	color: var( --hl-sur-ivoire-surtitre ) !important;
}

body.home .elementor-element-6980db5b .headline em,
body.home .elementor-element-6980db5b .headline .hl-accent,
body.home .elementor-element-3030d7c5 .headline em,
body.home .elementor-element-3030d7c5 .headline .hl-accent,
body.home .hl-sur-ivoire .headline em,
body.home .hl-sur-ivoire .headline .hl-accent {
	color: var( --hl-sur-ivoire-italique ) !important;
}

/* Le sous-titre de Listeo est un span nu, dans le titre lui-même : il reprend
   le gris du texte courant, et non l'encre du titre. */
body.home .elementor-element-6980db5b .headline-with-subtitle > span:not( .hl-eyebrow ):not( .hl-accent ),
body.home .elementor-element-3030d7c5 .headline-with-subtitle > span:not( .hl-eyebrow ):not( .hl-accent ),
body.home .hl-sur-ivoire .headline-with-subtitle > span:not( .hl-eyebrow ):not( .hl-accent ) {
	color: var( --hl-sur-ivoire-texte ) !important;
}

/* Le texte courant des sections claires : chapô, phrase sous un titre,
   mentions. Les fiches d'annonce gardent leur propre échelle de gris. */
body.home .elementor-element-6980db5b p:not( .hl-tile-note ),
body.home .elementor-element-3030d7c5 > .elementor-container p:not( .hl-card ):not( .hl-tile-note ),
body.home .hl-sur-ivoire p {
	color: var( --hl-sur-ivoire-texte ) !important;
}


/* =========================================================================
 * BANDEAU · HIÉRARCHIE ÉDITORIALE · 2.85.0
 *
 * Le surtitre, le titre, le paragraphe et la rangée d'engagements vivent
 * maintenant dans Elementor : tailles, couleurs et marges s'y règlent. Ce qui
 * suit ne concerne que ce que l'éditeur ne sait pas poser : la grille du bloc
 * intérieur, la largeur du conteneur du moteur Listeo, et les onglets du
 * module, qui appartiennent à Listeo.
 * ========================================================================= */

/* Grille du site : 1300 px, gouttières de 32 px. */
html body.home .elementor-element-589c787b {
	width: min( 1300px, calc( 100% - 64px ) );
	margin-right: auto;
	margin-left: auto;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-589c787b {
		width: calc( 100% - 48px );
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-589c787b {
		width: 100%;
	}
}

/* Conteneur du moteur : seulement sa largeur et son centrage. Le module
   Listeo lui-même n'est pas touché. */
html body.home .elementor-element-589c787b .elementor-widget-shortcode,
html body.home .elementor-element-589c787b .elementor-widget-shortcode > .elementor-widget-container,
html body.home .elementor-element-589c787b .elementor-shortcode,
html body.home .elementor-element-589c787b .hl-home-form,
html body.home .elementor-element-589c787b .hl-search.hl-home .hl-bar {
	width: 100% !important;
	max-width: 1040px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Onglets du module : un simple souligné rouge, rien d'autre. */
html body.home .hl-search.hl-home .hl-tabs {
	gap: 34px;
	margin: 0 0 20px;
	padding: 0;
	background: none;
	box-shadow: none;
}

html body.home .hl-search.hl-home .hl-tab {
	margin: 0 !important;
	padding: 0 0 10px !important;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: none;
	color: rgba( 247, 246, 243, 0.58 );
	font-family: var( --hl-body );
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
}

html body.home .hl-search.hl-home .hl-tab:hover {
	color: var( --hl-ivory-light );
}

html body.home .hl-search.hl-home .hl-tab.is-active {
	border-bottom-color: var( --hl-red );
	color: var( --hl-ivory-light );
}

/* Engagements : intitulé et précision, très en retrait. */
html body.home .elementor-element-1360bf36 > p {
	gap: 12px !important;
}

html body.home .elementor-element-1360bf36 > p > span {
	gap: 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

html body.home .elementor-element-1360bf36 > p > span > span {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba( 247, 246, 243, 0.42 );
}

/* Chaque engagement se centre dans sa colonne : la rangée devient symétrique
   sous la barre de recherche, au lieu de pencher à gauche. · 2.85.4 */
html body.home .elementor-element-1360bf36 > p {
	justify-content: center !important;
}

/* =========================================================================
 * EN-TÊTE DE « SÉLECTION » · 2.86.0
 *
 * Titre à gauche, phrase d'introduction à droite calée sur le bas du titre,
 * et le lien vers toutes les adresses sous la phrase : il quitte le bas du
 * carrousel, où il flottait seul, pour rejoindre ce qu'il prolonge.
 * ========================================================================= */

body.home .hl-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 56px;
	margin-bottom: 48px;
}

body.home .hl-section-head .headline {
	flex: 1 1 auto;
	margin: 0 !important;
}

body.home .hl-section-aside {
	flex: 0 1 440px;
	padding-bottom: 8px;
}

body.home .hl-section-intro {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: var( --hl-sur-ivoire-texte, #6b6151 ) !important;
}

body.home .hl-section-aside .hl-see-all__link {
	display: inline-block;
	margin-top: 14px;
	padding: 0;
	border: 0;
	background: none;
	color: var( --hl-sur-ivoire-titre, #150e10 ) !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: underline;
	text-decoration-color: var( --hl-red );
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

body.home .hl-section-aside .hl-see-all__link:hover,
body.home .hl-section-aside .hl-see-all__link:focus-visible {
	color: var( --hl-red ) !important;
	text-underline-offset: 8px;
}

@media ( max-width: 767px ) {
	body.home .hl-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 32px;
	}

	body.home .hl-section-aside {
		flex-basis: auto;
		padding-bottom: 0;
	}
}

/* =========================================================================
 * CARROUSEL DE « SÉLECTION », À LA FAÇON D'AIRBNB · 2.87.0
 * Deux flèches en haut à droite, plus de points, et une vignette finale
 * « Tout afficher ».
 * ========================================================================= */

/* Les points et les flèches du bas sortent. */
body.home .elementor-element-3030d7c5 .slider-controls {
	display: none !important;
}

body.home .hl-carrousel-nav {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
	padding-bottom: 10px;
}

body.home .hl-carrousel-fleche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba( 21, 14, 16, 0.18 );
	border-radius: 50%;
	background: transparent;
	color: var( --hl-sur-ivoire-titre, #150e10 );
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

body.home .hl-carrousel-fleche .hl-icon,
body.home .hl-carrousel-fleche svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

body.home .hl-carrousel-fleche:hover:not( :disabled ) {
	border-color: var( --hl-sur-ivoire-titre, #150e10 );
	background: rgba( 21, 14, 16, 0.04 );
}

body.home .hl-carrousel-fleche:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 3px;
}

body.home .hl-carrousel-fleche:disabled {
	opacity: 0.32;
	cursor: default;
}

/* Vignette finale : même hauteur que les photographies, trois aperçus en
   éventail et le mot « Tout afficher ». */
body.home .hl-see-all-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 14px;
	background: #eeebe5;
	color: var( --hl-sur-ivoire-titre, #150e10 ) !important;
	text-decoration: none !important;
	transition: background-color 0.3s ease;
}

body.home .hl-see-all-card:hover,
body.home .hl-see-all-card:focus-visible {
	background: #ddd7cc;
}

body.home .hl-see-all-card:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 3px;
}

body.home .hl-see-all-card__stack {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.home .hl-see-all-card__stack img {
	width: 64px;
	height: 64px;
	margin: 0 -10px;
	border: 3px solid #f7f6f3;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 6px 16px rgba( 21, 14, 16, 0.14 );
	transition: transform 0.4s cubic-bezier( 0.22, 0.61, 0.28, 1 );
}

body.home .hl-see-all-card__stack img:nth-child( 1 ) {
	transform: rotate( -8deg );
}

body.home .hl-see-all-card__stack img:nth-child( 2 ) {
	position: relative;
	z-index: 1;
	transform: translateY( -4px );
}

body.home .hl-see-all-card__stack img:nth-child( 3 ) {
	transform: rotate( 8deg );
}

body.home .hl-see-all-card:hover .hl-see-all-card__stack img:nth-child( 1 ) {
	transform: rotate( -12deg ) translateX( -6px );
}

body.home .hl-see-all-card:hover .hl-see-all-card__stack img:nth-child( 3 ) {
	transform: rotate( 12deg ) translateX( 6px );
}

body.home .hl-see-all-card__label {
	font-family: var( --hl-body );
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

@media ( prefers-reduced-motion: reduce ) {
	body.home .hl-see-all-card__stack img {
		transition: none;
	}
}


/* =========================================================================
 * FONDS CRÈME ET EN-TÊTE DES PAGES INTÉRIEURES · 2.88.0
 * ========================================================================= */

/* Fiche d'annonce : Listeo pose sous le titre un dégradé gris clair vers le
   blanc (#eeebe5), 200 px de haut. Il disparaît, le crème de la page passe. */
html body .single-listing-page-titlebar {
	background: none !important;
}

/*
 * En-tête des pages intérieures, centré sur un seul axe.
 *
 * Listeo pose 18 px de réserve en haut de l'en-tête et 8 en bas : le logo et
 * le menu tombaient 5 px sous le milieu. Par-dessus, « Se connecter » est
 * remonté de 6 px et le bloc de droite d'un pixel. Tout revient au même axe :
 * réserve nulle, conteneur de 80 px centré, menu à mi-hauteur, aucun décalage
 * à droite. L'accueil a son propre en-tête et n'est pas concerné.
 */
html body:not( .home ) #header-container:not( .hl-header ) #header {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

html body:not( .home ) #header-container:not( .hl-header ) #header > .container {
	min-height: 80px;
	align-items: center !important;
}

html body:not( .home ) #header-container:not( .hl-header ) #header .left-side,
html body:not( .home ) #header-container:not( .hl-header ) #header .right-side {
	align-self: center;
}

html body:not( .home ) #header-container:not( .hl-header ) #navigation.style-1 {
	top: 50% !important;
}

html body:not( .home ) #header-container:not( .hl-header ) .header-widget {
	top: 0 !important;
	display: flex !important;
	align-items: center;
}

html body:not( .home ) #header-container:not( .hl-header ) .header-widget > * {
	top: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

html body:not( .home ) #header-container:not( .hl-header ) .mmenu-trigger {
	margin-bottom: 0 !important;
}

html body:not( .home ) #header-container:not( .hl-header ) .mmenu-trigger .hamburger {
	top: 0 !important;
}

/*
 * Sous 1240 px, Listeo change deux fois de mise en page : entre 1025 et
 * 1239 px, menu pleine largeur en dessous et bloc de droite remonté de
 * 122 px ; sous 1100 px, logo centré, bouton du menu au milieu et bloc de
 * droite hors de l'écran. On garde partout une seule rangée de 80 px, sur un
 * seul axe : le logo à gauche, le menu au centre tant qu'il tient, puis la
 * connexion et le bouton du menu à droite.
 */
@media ( max-width: 1239px ) {
	html body:not( .home ) #header-container:not( .hl-header ) #header > .container {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-start !important;
		height: 80px;
		min-height: 80px;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #header .left-side {
		display: contents !important;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #logo {
		order: 1;
		flex: 0 0 auto;
		position: static !important;
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		text-align: left !important;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #header .right-side {
		order: 2;
		display: flex !important;
		align-items: center;
		position: static !important;
		float: none !important;
		width: auto !important;
		margin: 0 0 0 auto !important;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #navigation.style-1 {
		top: 50% !important;
		right: auto !important;
		left: 50% !important;
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
		transform: translate( -50%, -50% ) !important;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #navigation.style-1 > ul {
		margin: 0 !important;
		padding: 0 !important;
	}

	html body:not( .home ) #header-container:not( .hl-header ) #header .clearfix {
		display: none !important;
	}
}

@media ( max-width: 1099px ) {
	html body:not( .home ) #header-container:not( .hl-header ) .mmenu-trigger {
		order: 3;
		display: flex !important;
		align-items: center;
		align-self: center !important;
		position: static !important;
		top: auto !important;
		transform: none !important;
		float: none !important;
		height: 40px;
		margin: 0 0 0 16px !important;
	}
}

/* =========================================================================
 * EN-TÊTE CLAIR, SUR TOUTES LES PAGES · 2.89.0, ACCUEIL COMPRIS DEPUIS 2.94.0
 *
 * Porté par la classe `.hl-header--clair`, posée partout par le script. Même
 * spécificité que l'en-tête sombre de l'accueil et écrit après lui : il
 * l'emporte. Retirer la classe sur l'accueil suffit à revenir au sombre.
 *
 * Copie exacte de l'en-tête de l'accueil (mêmes dimensions, mêmes effets,
 * même comportement au défilement), générée depuis ses propres règles, avec
 * la palette inversée : fond crème puis verre crème au défilement, logo
 * d'origine, texte noir, filets encre. Le rouge de marque ne change pas.
 * ========================================================================= */

html body header#header-container.hl-header.hl-header--clair {
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: 0 !important;
	z-index: 1001 !important;
	height: 88px !important;
	background-color: transparent !important;
	border-bottom: 1px solid transparent !important;
	box-shadow: none !important;
	opacity: 0;
	transform: translateY( -8px );
	transition: background-color 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ), backdrop-filter 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ), border-color 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ), height 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 ), opacity 0.6s ease, transform 0.6s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair.is-ready {
	opacity: 1;
	transform: translateY( 0 );
}

html body header#header-container.hl-header.hl-header--clair.is-scrolled {
	height: 74px !important;
	background-color: rgba( 247, 246, 243, 0.84 ) !important;
	backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	-webkit-backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	border-bottom-color: rgba( 21, 14, 16, 0.08 ) !important;
	box-shadow: 0 10px 40px rgba( 21, 14, 16, 0.06 ) !important;
}

html body header#header-container.hl-header.hl-header--clair #header.cloned {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair #header:not(.cloned) {
	position: static !important;
	height: 100% !important;
	background: transparent !important;
	box-shadow: none !important;
}

html body header#header-container.hl-header.hl-header--clair #header > .container {
	position: relative !important;
	display: flex;
	align-items: center;
	height: 100% !important;
}

html body header#header-container.hl-header.hl-header--clair .left-side,
html body header#header-container.hl-header.hl-header--clair .right-side {
	display: flex;
	align-items: center;
	height: 100% !important;
	width: auto;
	float: none;
}

html body header#header-container.hl-header.hl-header--clair .right-side {
	margin-left: auto;
}

html body header#header-container.hl-header.hl-header--clair #navigation {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	float: none;
	margin: 0 !important;
	transform: translate( -50%, -50% );
}

html body header#header-container.hl-header.hl-header--clair #navigation ul {
	display: flex;
	align-items: center;
	gap: 38px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li {
	position: relative !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a {
	position: relative !important;
	display: inline-block;
	padding: 6px 0 !important;
	color: var( --hl-black ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1.4 !important;
	background: none !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a::after {
	content: "";
	position: absolute !important;
	bottom: -4px;
	left: 50% !important;
	width: 0;
	height: 1px !important;
	background: var( --hl-red ) !important;
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a:hover::after,
html body header#header-container.hl-header.hl-header--clair #navigation ul li a:focus-visible::after,
html body header#header-container.hl-header.hl-header--clair #navigation ul li.current-menu-item a::after {
	left: 0 !important;
	width: 100%;
}

html body header#header-container.hl-header.hl-header--clair .header-widget {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	padding: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.button {
	display: inline-flex;
	align-items: center;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 22px !important;
	border: 1px solid rgba( 21, 14, 16, 0.2 ) !important;
	border-radius: 999px !important;
	background: rgba( 21, 14, 16, 0.04 ) !important;
	color: var( --hl-black ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	white-space: nowrap;
	box-shadow: none !important;
	transition: background-color 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 ), border-color 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.button:hover,
html body header#header-container.hl-header.hl-header--clair .header-widget a.button:focus-visible {
	border-color: var( --hl-red ) !important;
	background: var( --hl-red ) !important;
	transform: translateY( -1px );
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba( 21, 14, 16, 0.2 ) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var( --hl-black ) !important;
	transition: background-color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 ), border-color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 ), transform 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in:hover,
html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in:focus-visible {
	border-color: rgba( 21, 14, 16, 0.34 ) !important;
	background: rgba( 21, 14, 16, 0.08 ) !important;
	transform: scale( 1.04 );
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in i {
	margin: 0 !important;
	font-size: 17px;
	line-height: 1;
}

html body header#header-container.hl-header.hl-header--clair #logo img {
	transition: height 0.35s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair {
		height: 74px !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair.is-scrolled {
		height: 66px !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair #navigation,
	html body header#header-container.hl-header.hl-header--clair .header-widget a.button {
		display: none;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .mmenu-trigger {
		display: flex;
		align-items: center;
		margin-left: auto;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .left-side {
		flex: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body header#header-container.hl-header.hl-header--clair,
	html body header#header-container.hl-header.hl-header--clair *,
	html body header#header-container.hl-header.hl-header--clair *::after {
		transition: none !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body header#header-container.hl-header.hl-header--clair {
		opacity: 1;
		transform: none;
	}
}

html body header#header-container.hl-header.hl-header--clair #navigation,
html body header#header-container.hl-header.hl-header--clair #navigation ul,
html body header#header-container.hl-header.hl-header--clair #navigation ul.menu {
	width: auto !important;
	max-width: none !important;
	float: none !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li {
	float: none !important;
	width: auto !important;
}

html body header#header-container.hl-header.hl-header--clair .right-side,
html body header#header-container.hl-header.hl-header--clair .header-widget,
html body header#header-container.hl-header.hl-header--clair .header-widget > div {
	position: static !important;
	top: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	line-height: 1 !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget {
	height: auto !important;
}

html body header#header-container.hl-header.hl-header--clair .listeo-cart-container:empty {
	display: none !important;
}

@media ( min-width: 1025px ) {
	html body header#header-container.hl-header.hl-header--clair .header-widget a.button,
	html body.user_not_logged_in:not( .home ) header#header-container.hl-header .header-widget a.button:not( .wc-forward ) {
		display: inline-flex !important;
	}
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in {
	font-size: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in i,
html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in::before {
	font-size: 17px !important;
	line-height: 1 !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.button {
	order: 1;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in {
	order: 2;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.button i,
html body header#header-container.hl-header.hl-header--clair .header-widget a.button::after,
html body header#header-container.hl-header.hl-header--clair .header-widget a.button::before {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in i {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in .hl-compte-icone {
	display: block;
	color: var( --hl-black );
}

html body header#header-container.hl-header.hl-header--clair #header > .container,
html body header#header-container.hl-header.hl-header--clair .left-side,
html body header#header-container.hl-header.hl-header--clair .right-side,
html body header#header-container.hl-header.hl-header--clair .header-widget {
	height: 100% !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	align-items: center !important;
}

html body header#header-container.hl-header.hl-header--clair #logo,
html body header#header-container.hl-header.hl-header--clair #logo a,
html body header#header-container.hl-header.hl-header--clair .user-menu,
html body header#header-container.hl-header.hl-header--clair .listeo-cart-container {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #logo img {
	filter: none;
	margin: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a {
	color: var( --hl-black ) !important;
}

html body header#header-container.hl-header.hl-header--clair .hamburger-inner,
html body header#header-container.hl-header.hl-header--clair .hamburger-inner::before,
html body header#header-container.hl-header.hl-header--clair .hamburger-inner::after {
	background-color: var( --hl-black ) !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu .user-name {
	display: flex !important;
	align-items: center;
	gap: 8px;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	background: transparent !important;
	color: var( --hl-black ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1 !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu .user-name > span,
html body header#header-container.hl-header.hl-header--clair .user-menu img.avatar {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu .usrname {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font-size: inherit !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu ul {
	top: calc( 100% + 10px ) !important;
	right: 0 !important;
	left: auto !important;
	min-width: 232px;
	padding: 10px !important;
	border: 1px solid rgba( 21, 14, 16, 0.1 ) !important;
	border-radius: 14px !important;
	background: rgba( 247, 246, 243, 0.97 ) !important;
	backdrop-filter: blur( 18px ) saturate( 130% );
	-webkit-backdrop-filter: blur( 18px ) saturate( 130% );
	box-shadow: 0 18px 50px rgba( 21, 14, 16, 0.14 ) !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu ul li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu ul li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 12px !important;
	border-radius: 9px;
	color: rgba( 21, 14, 16, 0.86 ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

html body header#header-container.hl-header.hl-header--clair .user-menu ul li a:hover {
	background: rgba( 21, 14, 16, 0.08 ) !important;
	color: var( --hl-black ) !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu ul li a i {
	color: var( --hl-encre-douce ) !important;
	font-size: 15px !important;
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .header-widget a.sign-in,
	html body header#header-container.hl-header.hl-header--clair .user-menu {
		display: none !important;
	}
}

html body header#header-container.hl-header.hl-header--clair #header:not( .cloned ) {
	padding: 0 !important;
	border: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #header:not( .cloned ) > .container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair .header-widget,
html body header#header-container.hl-header.hl-header--clair .header-widget > div,
html body header#header-container.hl-header.hl-header--clair .header-widget > a {
	align-self: center !important;
	vertical-align: middle !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in,
html body header#header-container.hl-header.hl-header--clair #header .header-widget .user-menu,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.button {
	position: relative !important;
	top: 0 !important;
	bottom: auto !important;
	align-self: center !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	top: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger button {
	margin: 0 !important;
	position: relative !important;
	top: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger button.hamburger {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-box {
	position: relative !important;
	display: block !important;
	width: 24px !important;
	height: 16px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner,
html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner::before,
html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner::after {
	position: absolute !important;
	left: 0 !important;
	width: 24px !important;
	height: 1.5px !important;
	border-radius: 2px !important;
	background-color: var( --hl-black ) !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner {
	top: 50% !important;
	margin-top: -0.75px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner::before {
	content: "" !important;
	top: -7px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger .hamburger-inner::after {
	content: "" !important;
	top: 7px !important;
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair #header > .container {
		align-items: center !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .left-side {
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .right-side {
		display: none !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .mmenu-trigger {
		margin-left: auto !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger {
		position: absolute !important;
		right: 15px !important;
		top: 50% !important;
		left: auto !important;
		float: none !important;
		margin: 0 !important;
		transform: translateY( -50% ) !important;
	}
}

@media ( max-width: 1024px ) {
	html body header#header-container.hl-header.hl-header--clair .left-side {
		justify-content: flex-start !important;
	}
}

html body header#header-container.hl-header.hl-header--clair #header .right-side {
	margin-left: auto !important;
}

html body header#header-container.hl-header.hl-header--clair .listeo-cart-container {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair .listeo-mini-cart,
html body header#header-container.hl-header.hl-header--clair .cart-details,
html body header#header-container.hl-header.hl-header--clair .widget_shopping_cart_content {
	display: none !important;
}

@media ( min-width: 1025px ) {
	html body header#header-container.hl-header.hl-header--clair #header .mmenu-trigger {
		display: none !important;
	}
}

html body header#header-container.hl-header.hl-header--clair .mmenu-trigger,
html body header#header-container.hl-header.hl-header--clair .mmenu-trigger button.hamburger {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html body.admin-bar:not( .home ) header#header-container.hl-header {
	top: 32px !important;
}

@media screen and ( max-width: 782px ) {
	html body.admin-bar:not( .home ) header#header-container.hl-header {
		top: 46px !important;
	}
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget .user-menu {
	order: 2 !important;
}

html body header#header-container.hl-header.hl-header--clair .user-menu .nav-tag,
html body header#header-container.hl-header.hl-header--clair .user-menu .nav-tag.blue {
	background-color: var( --hl-red ) !important;
	color: var( --hl-ivory ) !important;
}

html body header#header-container.hl-header.hl-header--clair #header > .container {
	margin-right: auto !important;
	margin-left: auto !important;
}

html body header#header-container.hl-header.hl-header--clair {
	border-bottom: 1px solid rgba( 21, 14, 16, 0.1 ) !important;
}

html body header#header-container.hl-header.hl-header--clair.is-scrolled {
	border-bottom-color: rgba( 21, 14, 16, 0.14 ) !important;
}

html body header#header-container.hl-header.hl-header--clair.is-scrolled {
	background-color: rgba( 247, 246, 243, 0.84 ) !important;
}

html body header#header-container.hl-header.hl-header--clair #header,
html body header#header-container.hl-header.hl-header--clair #header > .container,
html body header#header-container.hl-header.hl-header--clair #header .left-side,
html body header#header-container.hl-header.hl-header--clair #header .right-side,
html body header#header-container.hl-header.hl-header--clair #header .header-widget,
html body header#header-container.hl-header.hl-header--clair #header .header-widget > div,
html body header#header-container.hl-header.hl-header--clair #header #logo,
html body header#header-container.hl-header.hl-header--clair #header #navigation,
html body header#header-container.hl-header.hl-header--clair #header #navigation ul,
html body header#header-container.hl-header.hl-header--clair #header #navigation ul li,
html body header#header-container.hl-header.hl-header--clair #header #navigation ul li a,
html body header#header-container.hl-header.hl-header--clair #header .user-menu,
html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name {
	border: 0 !important;
	box-shadow: none !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation::before,
html body header#header-container.hl-header.hl-header--clair #navigation::after,
html body header#header-container.hl-header.hl-header--clair #navigation.style-1::before,
html body header#header-container.hl-header.hl-header--clair #navigation.style-1::after {
	content: none !important;
	display: none !important;
	background: none !important;
	border: 0 !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: 42px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var( --hl-black ) !important;
	font-family: var( --hl-body ) !important;
	font-size: var( --hl-fs-ui ) !important;
	font-weight: 500 !important;
	letter-spacing: var( --hl-ls-nav ) !important;
	line-height: 1 !important;
	transform: none !important;
	transition: color 0.25s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:hover,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:focus-visible {
	border: 0 !important;
	background: transparent !important;
	color: var( --hl-red ) !important;
	transform: none !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in i,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in svg,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in::before {
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a::after {
	background: var( --hl-red ) !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in {
	position: relative !important;
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 1px;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:hover::after,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:focus-visible::after {
	left: 4px;
	width: calc( 100% - 8px );
}

html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:hover,
html body header#header-container.hl-header.hl-header--clair #header .header-widget a.sign-in:focus-visible {
	color: var( --hl-black ) !important;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a::after {
	opacity: 1 !important;
	bottom: -6px !important;
	height: 1px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name {
	position: relative !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 1px;
	opacity: 1;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu:hover .user-name::after,
html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name:hover::after,
html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name:focus-visible::after {
	left: 4px;
	width: calc( 100% - 8px );
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .user-name::after {
	content: none !important;
	display: none !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname {
	position: relative !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 100%;
	margin-top: 4px;
	left: 50%;
	width: 0;
	height: 1px;
	opacity: 1;
	background: var( --hl-red );
	transition: width 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), left 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu:hover .usrname::after,
html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname:hover::after {
	left: 0;
	width: 100%;
}

html body header#header-container.hl-header.hl-header--clair #navigation ul li a::after {
	bottom: 0.5px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname::after {
	margin-top: 0.5px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname::after {
	margin-top: 2.5px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname::after {
	margin-top: 4.5px !important;
}

html body header#header-container.hl-header.hl-header--clair #header .user-menu .usrname::after {
	margin-top: 6.5px !important;
}

/* L'en-tête est fixe, comme sur l'accueil : le contenu de la page commence
   sous lui, à 88 px, sa hauteur au repos. */
html body:not( .home ).hl-a-entete-clair #wrapper {
	padding-top: 88px !important;
}

/* Gabarits carte : Listeo décale déjà la colonne et la carte de 87 px sous son
   en-tête fixe. On garde son décalage, porté à 88 px, et pas le nôtre. */
html body:not( .home ).hl-a-entete-clair.hl-entete-deja-compense #wrapper {
	padding-top: 0 !important;
}

html body:not( .home ).hl-entete-deja-compense .fs-inner-container.content,
html body:not( .home ).hl-entete-deja-compense .fs-inner-container.map-fixed {
	padding-top: 88px !important;
}

/* 3.13.1 : l'en-tête mesure 74 px jusqu'à 1024 px de large. Sous 1024 px, la
   carte passe au-dessus des résultats : elle seule contourne l'en-tête, le
   contenu la suit sans décalage. */
@media ( max-width: 1024px ) {
	html body:not( .home ).hl-entete-deja-compense .fs-inner-container.content,
	html body:not( .home ).hl-entete-deja-compense .fs-inner-container.map-fixed {
		padding-top: 74px !important;
	}
}

@media ( max-width: 1023px ) {
	html body:not( .home ).hl-entete-deja-compense .fs-inner-container.content {
		padding-top: 0 !important;
	}
}

/* Titre d'une annonce : le noir du site, celui du pied de page. */
html body.single #titlebar h1,
html body.single .listing-titlebar-title h1,
html body.single .listing-titlebar-title h2 {
	color: var( --hl-black ) !important;
}

/* Pages d'univers (carte à droite) : l'en-tête porte dès le départ le fond
   qu'il prend au défilement. La carte et la colonne commencent juste dessous,
   un en-tête transparent y flottait sans appui. · 2.89.2 */
html body.hl-entete-deja-compense header#header-container.hl-header {
	background-color: rgba( 247, 246, 243, 0.84 ) !important;
	backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	-webkit-backdrop-filter: blur( 18px ) saturate( 130% ) !important;
	border-bottom-color: rgba( 21, 14, 16, 0.08 ) !important;
	box-shadow: 0 10px 40px rgba( 21, 14, 16, 0.06 ) !important;
}

/* Fiche d'annonce : l'en-tête reste en haut de la page et part avec elle au
   défilement, au lieu de la suivre. La lecture de la fiche n'a rien au-dessus
   d'elle. */
html body.single.listing-template-default header#header-container.hl-header {
	position: absolute !important;
}

/* =========================================================================
 * SECOND BANDEAU, EN IVOIRE, PAYSAGE EN PARALLAXE · 2.91.0
 *
 * Copie exacte du bandeau d'origine (section c1a8c9e, classe hl-hero-creme),
 * générée depuis ses propres règles, identifiants remplacés et palette
 * passée en encre sur ivoire. Les calques du paysage sont posés par le script.
 * ========================================================================= */

body.home .elementor-element-c1a8c9e {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
}

body.home .elementor-element-c1a8c9e {
	position: relative;
}

body.home .elementor-element-c1a8c9e::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E" );
	background-size: 200px 200px;
	opacity: 0.07;
	pointer-events: none;
}

body.home .elementor-element-c1a8c9e > * {
	position: relative;
	z-index: 2;
}

body.home .elementor-element-c1a8c9e {
	box-shadow: inset 0 0 170px 45px rgba( 0, 0, 0, 0.55 );
}

/* Les conteneurs gardent le fond réglé dans Elementor : pas de nettoyage
   général ici (il effaçait le crème de la citation et le noir du registre). */

body.home .elementor-element-354dd8f {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

@media ( max-width: 767px ) {
	body.home .elementor-element-354dd8f {
		padding-top: 0 !important;
	}
}

html body.home .elementor-element-c1a8c9e::before {
	content: "";
	position: absolute;
	top: -18%;
	left: 50%;
	width: 1100px;
	height: 1100px;
	margin-left: -550px;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 50%, rgba( 148, 134, 112, 0.1 ) 0%, rgba( 148, 134, 112, 0 ) 62% );
	pointer-events: none;
	animation: hl-halo 22s ease-in-out infinite alternate;
}

html body.home .elementor-element-c1a8c9e::after {
	content: "";
	position: absolute;
	right: -12%;
	bottom: -28%;
	width: 820px;
	height: 820px;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 50%, rgba( 150, 27, 27, 0.14 ) 0%, rgba( 150, 27, 27, 0 ) 66% );
	pointer-events: none;
	animation: hl-halo 28s ease-in-out infinite alternate-reverse;
}

html body.home .elementor-element-354dd8f::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 960px;
	height: 960px;
	margin: -480px 0 0 -480px;
	border: 1px solid rgba( 21, 14, 16, 0.055 );
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

html body.home .elementor-element-354dd8f::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 640px;
	height: 640px;
	margin: -320px 0 0 -320px;
	border: 1px solid rgba( 21, 14, 16, 0.04 );
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-354dd8f::before,
	html body.home .elementor-element-354dd8f::after {
		display: none;
	}
}

html body.home .elementor-element-b180888 {
	position: relative;
	z-index: 2;
}

html body.home .elementor-element-b180888 p {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

html body.home .elementor-element-b180888 p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.95;
}

html body.home .elementor-element-294066a p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-3404418 p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-5d16d67 p::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

@media ( prefers-reduced-motion: no-preference ) {
	html body.home .elementor-element-b180888 {
		animation-delay: 0.52s;
	}
}

html body.home .elementor-element-b180888 > p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

html body.home p.elementor-element-294066a::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home p.elementor-element-3404418::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home p.elementor-element-5d16d67::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-b180888 > p::before {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

html body.home .elementor-element-b180888 > p:nth-of-type(1)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10' width='15' height='10' rx='2'/%3E%3Cpath d='M8 10V7.5a4 4 0 0 1 8 0V10'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-b180888 > p:nth-of-type(2)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 19V6.5A1.5 1.5 0 0 1 6.5 5H17a2 2 0 0 1 2 2v12'/%3E%3Cpath d='M5 19a2 2 0 0 0 2 2h12'/%3E%3Cpath d='M9 9h6M9 13h4'/%3E%3C/svg%3E" );
}

html body.home .elementor-element-b180888 > p:nth-of-type(3)::before {
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23961b1b' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M12 21s6.5-5.4 6.5-10.2A6.5 6.5 0 0 0 5.5 10.8C5.5 15.6 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.3'/%3E%3C/svg%3E" );
}

@media ( prefers-reduced-motion: no-preference ) {
	html body.home .elementor-element-b180888 {
		animation-delay: 0.52s;
	}
}

html body.home .elementor-element-b180888 {
	gap: 56px !important;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-b180888 {
		gap: 32px !important;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-b180888 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
		width: auto;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

html body.home .elementor-element-b180888 > p::before {
	content: "";
	display: inline-flex;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 1px solid rgba( 21, 14, 16, 0.34 );
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: border-color 0.3s ease;
}

html body.home .elementor-element-b180888 > p:hover::before {
	border-color: rgba( 21, 14, 16, 0.6 );
}

html body.home .elementor-element-b180888 {
	display: flex !important;
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: center !important;
	gap: 40px !important;
	width: 100%;
	max-width: 1080px;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

html body.home .elementor-element-b180888 > p::before {
	content: "";
	display: block;
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	border: 1px solid rgba( 21, 14, 16, 0.34 );
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 22px 22px !important;
	transition: border-color 0.3s ease;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-b180888 {
		gap: 24px !important;
		max-width: 860px;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-b180888 {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 18px !important;
		width: fit-content;
		max-width: 100%;
	}
}

html body.home .elementor-element-b180888 {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) ) !important;
	align-items: center !important;
	gap: 16px !important;
	width: 100% !important;
	max-width: 1040px !important;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 0 !important;
}

html body.home .elementor-element-b180888 > p::before {
	flex: 0 0 42px !important;
	width: 42px !important;
	height: 42px !important;
	border: 1px solid rgba( 21, 14, 16, 0.25 ) !important;
	background-position: center center !important;
	background-size: 17px 17px !important;
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-b180888 {
		grid-template-columns: 1fr !important;
		justify-items: center;
		gap: 14px !important;
		width: 100% !important;
		max-width: 100% !important;
	}
}

html body.home .elementor-element-354dd8f .elementor-widget-shortcode,
html body.home .elementor-element-354dd8f .elementor-widget-shortcode > .elementor-widget-container,
html body.home .elementor-element-354dd8f .elementor-shortcode {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

html body.home .elementor-element-354dd8f form.listeo-form-search_on_home_page,
html body.home .elementor-element-354dd8f .hl-rebuilt,
html body.home .elementor-element-354dd8f .hl-bar {
	margin-left: auto !important;
	margin-right: auto !important;
}

html body.home .elementor-element-b180888 {
	margin-left: auto !important;
	margin-right: auto !important;
}

@layer hl-bandeau {
	html body.home .elementor-element-354dd8f > p:nth-of-type(1) {
		font-family: var( --hl-body );
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.17em;
		line-height: 1.4;
		text-transform: uppercase;
		color: rgba( 21, 14, 16, 0.85 );
		margin: 0 0 26px;
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-354dd8f h1 {
		max-width: none;
		margin: 0 auto 24px;
		font-family: var( --hl-display );
		font-size: clamp( 40px, 4.6vw, 74px );
		font-weight: 400;
		line-height: 0.92;
		letter-spacing: -0.04em;
		color: var( --hl-black );
		white-space: nowrap;
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-354dd8f h1 em {
		font-family: var( --hl-display );
		font-style: italic;
		font-weight: 400;
		color: #bcb2a1;
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-354dd8f > p:nth-of-type(2) {
		max-width: 650px;
		margin: 0 auto 36px;
		font-family: var( --hl-body );
		font-size: 17px;
		line-height: 1.65;
		color: rgba( 21, 14, 16, 0.65 );
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-b180888 > p > span {
		font-family: var( --hl-body );
		font-size: 13px;
		font-weight: 600;
		line-height: 1.25;
		letter-spacing: 0;
		color: rgba( 21, 14, 16, 0.9 );
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-b180888 > p > span > span {
		font-size: 11px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: 0;
		color: rgba( 21, 14, 16, 0.42 );
	}
}

@layer hl-bandeau {
	@media ( max-width: 1024px ) {
		html body.home .elementor-element-354dd8f h1 {
			font-size: clamp( 34px, 5.4vw, 54px );
		}
	}
}

@layer hl-bandeau {
	@media ( max-width: 767px ) {
		html body.home .elementor-element-354dd8f h1 {
			font-size: clamp( 32px, 9vw, 42px );
			white-space: normal;
			text-wrap: balance;
		}
	}
}

@layer hl-bandeau {
	@media ( max-width: 767px ) {
		html body.home .elementor-element-354dd8f > p:nth-of-type(2) {
			font-size: 16px;
			margin-bottom: 28px;
		}
	}
}

html body.home .elementor-element-b180888 > p > span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	min-width: 0;
}

html body.home .elementor-element-b180888 > p > span > span {
	display: block;
}

@layer hl-bandeau {
	html body.home .elementor-element-c1a8c9e {
		--hl-mouse-x: 50%;
		--hl-mouse-y: 46%;
		background-color: var( --hl-black );
		background-image: radial-gradient( ellipse 52% 46% at var( --hl-mouse-x ) var( --hl-mouse-y ), rgba( 150, 27, 27, 0.24 ) 0%, rgba( 150, 27, 27, 0.12 ) 24%, rgba( 150, 27, 27, 0.038 ) 47%, transparent 70% ), linear-gradient( 180deg, #150e10 0%, #150e10 54%, #150e10 100% );
	}
}

@layer hl-bandeau {
	html body.home .elementor-element-354dd8f {
		gap: 0;
	}
}

body.home .elementor-element-c1a8c9e {
	--min-height: 100svh;
}

@media ( max-width: 1024px ) {
	body.home .elementor-element-c1a8c9e {
		--min-height: 88svh;
	}
}

@media ( max-width: 767px ) {
	body.home .elementor-element-c1a8c9e {
		--min-height: auto;
		--padding-block-start: 96px;
		--padding-block-end: 56px;
	}
}

html body.home .elementor-element-c1a8c9e {
	position: relative;
	overflow: hidden;
	box-shadow: none !important;
}

html body.home .elementor-element-354dd8f {
	position: relative;
	z-index: 2;
}

html body.home .elementor-element-354dd8f {
	width: min( 1300px, calc( 100% - 64px ) );
	margin-right: auto;
	margin-left: auto;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-354dd8f {
		width: calc( 100% - 48px );
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-354dd8f {
		width: 100%;
	}
}

html body.home .elementor-element-354dd8f .elementor-widget-shortcode,
html body.home .elementor-element-354dd8f .elementor-widget-shortcode > .elementor-widget-container,
html body.home .elementor-element-354dd8f .elementor-shortcode,
html body.home .elementor-element-354dd8f .hl-home-form,
html body.home .elementor-element-354dd8f .hl-search.hl-home .hl-bar {
	width: 100% !important;
	max-width: 1040px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

html body.home .elementor-element-b180888 > p {
	gap: 12px !important;
}

html body.home .elementor-element-b180888 > p > span {
	gap: 3px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
}

html body.home .elementor-element-b180888 > p > span > span {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.35;
	color: rgba( 21, 14, 16, 0.42 );
}

html body.home .elementor-element-b180888 > p {
	justify-content: center !important;
}

/* Le fond : ivoire uni, sans halo ni cercles, le paysage fait le décor. */
html body.home .elementor-element.elementor-element-c1a8c9e {
	background-color: #f7f6f3 !important;
	background-image: none !important;
}

html body.home .elementor-element-c1a8c9e::before,
html body.home .elementor-element-c1a8c9e::after,
html body.home .elementor-element-354dd8f::before,
html body.home .elementor-element-354dd8f::after {
	content: none !important;
	display: none !important;
}

/* Titre principal de l'accueil (h1 depuis 3.3.0, le bandeau sombre ayant été
   retiré), à l'échelle du premier bandeau. */
html body.home .elementor-element-c1a8c9e .e-heading-base {
	white-space: normal !important;
	font-size: clamp( 64px, 5.2vw, 86px ) !important;
	line-height: 0.93 !important;
	letter-spacing: -0.04em !important;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-c1a8c9e .e-heading-base {
		font-size: clamp( 52px, 7vw, 68px ) !important;
		line-height: 0.94 !important;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-c1a8c9e .e-heading-base {
		font-size: clamp( 44px, 12vw, 54px ) !important;
		letter-spacing: -0.035em !important;
	}
}

/* Onglets du module sur ivoire. */
html body.home .elementor-element-c1a8c9e .hl-search.hl-home .hl-tab {
	color: rgba( 21, 14, 16, 0.55 );
}

html body.home .elementor-element-c1a8c9e .hl-search.hl-home .hl-tab:hover,
html body.home .elementor-element-c1a8c9e .hl-search.hl-home .hl-tab.is-active {
	color: var( --hl-black );
}

/* Engagements : intitulé encre, précision gris chaud. */
html body.home .elementor-element-b180888 > p > span {
	color: #150e10 !important;
}

html body.home .elementor-element-b180888 > p > span > span {
	color: #6b6151 !important;
}

/* Le texte et le moteur passent devant le paysage. */
html body.home .elementor-element-354dd8f {
	position: relative;
	z-index: 3;
}

/*
 * Paysage en cinq calques (soleil et oiseaux, collines et lac, cabane sur son
 * rocher, arbres qui encadrent la scène, sol), posés un à un d'après la
 * maquette : chacun a sa largeur, son décalage et sa hauteur de calage, en vw,
 * depuis le bas de la section. La section réserve 27vw sous son contenu :
 * le soleil, les oiseaux et la cheminée restent sous la réassurance, les
 * arbres montent sur les côtés comme un cadre.
 */
html body.home .hl-hero-creme {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

html body.home .elementor-element.elementor-element-c1a8c9e {
	--min-height: 0px !important;
	--padding-block-end: 27vw !important;
	padding-bottom: 27vw !important;
}

/* Sous 1440px la réassurance déborde sur les colonnes d'arbres : la marge
   basse grandit pour que les cimes restent sous la ligne de réassurance. */
@media ( min-width: 1025px ) and ( max-width: 1439px ) {
	html body.home .elementor-element.elementor-element-c1a8c9e {
		--padding-block-end: max( 27vw, min( calc( 50vw + 24px ), calc( 2865px - 172vw ) ) ) !important;
		padding-bottom: max( 27vw, min( calc( 50vw + 24px ), calc( 2865px - 172vw ) ) ) !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	html body.home .elementor-element.elementor-element-c1a8c9e {
		--padding-block-end: calc( 50vw + 40px ) !important;
		padding-bottom: calc( 50vw + 40px ) !important;
	}
}

html body.home .hl-hero-creme .hl-paysage {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

html body.home .hl-hero-creme .hl-paysage__calque {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1672 / 941;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 100%;
	will-change: transform;
}

html body.home .hl-hero-creme .hl-paysage__calque--soleil { bottom: 6.3vw; left: 8.4%; width: 46%; }
html body.home .hl-hero-creme .hl-paysage__calque--lac    { bottom: 2.8vw; left: -2.09%; width: 60.09%; aspect-ratio: 2383 / 793; }
html body.home .hl-hero-creme .hl-paysage__calque--cabane { bottom: -0.2vw; left: 28.5%; width: 54%; }
html body.home .hl-hero-creme .hl-paysage__calque--arbres { bottom: 0; }
html body.home .hl-hero-creme .hl-paysage__calque--sol    { bottom: -2vw; }

/* Téléphone : la scène est agrandie et recadrée sur le lac et la cabane,
   les arbres restent en bordure. */
@media ( max-width: 767px ) {
	html body.home .elementor-element.elementor-element-c1a8c9e {
		--padding-block-end: 62vw !important;
		padding-bottom: 62vw !important;
	}

	html body.home .hl-hero-creme .hl-paysage {
		right: auto;
		left: -40%;
		width: 180%;
	}

	html body.home .hl-hero-creme .hl-paysage__calque--soleil { bottom: 11.3vw; }
	html body.home .hl-hero-creme .hl-paysage__calque--lac    { bottom: 5vw; }
	html body.home .hl-hero-creme .hl-paysage__calque--cabane { bottom: -0.4vw; }
	html body.home .hl-hero-creme .hl-paysage__calque--sol    { bottom: -3.6vw; }
}

/* =========================================================================
 * NIVEAU DE PEUR DANS LA BARRE DE L'ACCUEIL · 2.96.0
 *
 * Plus d'onglets d'univers : la barre de l'accueil cherche des locations et
 * propose le niveau de peur en quatrième case, avec les icônes des cartes.
 * ========================================================================= */

html body .hl-bar .hl-bar-cell.is-fear .hl-fear-value {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

html body .hl-bar .hl-fear-marks {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 2px;
}

html body .hl-bar .hl-fear-mark {
	display: block;
	width: 16px;
	height: 16px;
	margin: 0;
	object-fit: contain;
}

html body .hl-bar .hl-fear-text {
	overflow: hidden;
	min-width: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
}

html body .hl-bar .hl-pop.hl-fear-pop {
	width: 372px;
	padding: 8px;
}

html body .hl-bar .hl-fear-option {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 12px 14px;
	border: 0 !important;
	border-radius: 14px;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --hl-ink );
	font: inherit;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.15s;
}

html body .hl-bar .hl-fear-option:hover {
	background: rgba( 21, 14, 16, 0.05 ) !important;
}

html body .hl-bar .hl-fear-option.is-active {
	background: rgba( 150, 27, 27, 0.07 ) !important;
}

html body .hl-bar .hl-fear-option:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: -2px;
}

html body .hl-bar .hl-fear-option .hl-fear-marks {
	width: 62px;
	justify-content: flex-start;
}

html body .hl-bar .hl-fear-option .hl-fear-mark {
	width: 19px;
	height: 19px;
}

html body .hl-bar .hl-fear-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

html body .hl-bar .hl-fear-label {
	color: var( --hl-ink );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

html body .hl-bar .hl-fear-option.is-active .hl-fear-label {
	color: var( --hl-red );
}

html body .hl-bar .hl-fear-hint {
	color: var( --hl-muted );
	font-size: 12px;
	line-height: 1.4;
}

/* Aucune activité : cercle barré, plus discret que les têtes, comme sur les cartes. */
html body .hl-bar .hl-fear-marks.is-calm .hl-fear-mark {
	opacity: 0.55;
}

/* Tablette : quatre cases dans la barre, on resserre et le bouton garde
   sa loupe seule. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	html body.home .hl-search.hl-home .hl-bar .hl-bar-cell {
		padding-right: 14px !important;
		padding-left: 14px !important;
	}

	html body.home .hl-search.hl-home .hl-bar .hl-bar-label {
		white-space: nowrap;
	}

	html body.home .hl-search.hl-home .hl-bar .hl-bar-submit {
		width: 48px;
		min-width: 48px;
		padding: 0 !important;
	}

	html body.home .hl-search.hl-home .hl-bar .hl-bar-submit-text {
		display: none;
	}
}

/* =========================================================================
 * RETOUCHES · 2.97.0
 * ========================================================================= */

/* Barre de recherche de l'accueil : ombre allégée, pensée pour le crème. */
html body .hl-search.hl-home .hl-bar {
	box-shadow:
		0 2px 6px rgba( 21, 14, 16, 0.06 ),
		0 12px 32px rgba( 21, 14, 16, 0.12 ) !important;
}

/* Menu clair : « Ajouter un lieu » passe en texte beige sur le rouge. */
html body header#header-container.hl-header.hl-header--clair .header-widget a.button:hover,
html body header#header-container.hl-header.hl-header--clair .header-widget a.button:focus-visible {
	color: var( --hl-ivory ) !important;
}

/* Menu clair de l'accueil : « Mon compte » garde son encre au survol. Listeo
   le passe en blanc sur les en-têtes transparents. */
html body.home header#header-container.hl-header.hl-header--clair #header .user-menu:hover .user-name,
html body.home header#header-container.hl-header.hl-header--clair #header .user-menu .user-name:hover,
html body.home header#header-container.hl-header.hl-header--clair #header .user-menu:hover .usrname {
	color: var( --hl-black ) !important;
}

/* =========================================================================
 * « À CHACUN SA FAÇON DE FRISSONNER » · 2.97.1
 *
 * Section Elementor 4ab098ab, sous le bandeau : textes, icônes, liens et
 * couleurs se règlent dans Elementor. Ici seulement ce qu'Elementor ne sait
 * pas faire : le grain des cartes, la flèche, « Découvrir » et le survol.
 * Toute carte ajoutée dans la grille 54e18f58 reçoit le même habillage.
 * ========================================================================= */

/* 3.2.0 : filet crème fin, fond noir, grain discret plus dense vers les bords. */
html body.home .elementor-element-54e18f58 > .elementor-element {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	border: 1.5px solid #ddd7cc !important;
	border-radius: 18px !important;
	background-color: #150e10 !important;
	color: inherit;
	text-decoration: none !important;
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ), border-color 0.3s ease;
}

html body.home .elementor-element-54e18f58 > .elementor-element::before,
html body.home .elementor-element-54e18f58 > .elementor-element::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.79 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E" );
	background-size: 200px 200px;
	pointer-events: none;
}

/* Le grain des bords, effacé au centre. */
html body.home .elementor-element-54e18f58 > .elementor-element::before {
	opacity: 0.35;
	-webkit-mask-image: radial-gradient( ellipse 72% 66% at 50% 46%, transparent 40%, #000 100% );
	mask-image: radial-gradient( ellipse 72% 66% at 50% 46%, transparent 40%, #000 100% );
}

/* Un voile de grain très léger sur toute la carte. */
html body.home .elementor-element-54e18f58 > .elementor-element::after {
	opacity: 0.03;
}

html body.home .elementor-element-54e18f58 > .elementor-element > * {
	position: relative;
	z-index: 1;
}

/* Les icônes n'ont pas le même format : une hauteur commune aligne les titres. */
html body.home .elementor-element-54e18f58 > .elementor-element > img {
	width: auto !important;
	height: 70px !important;
	max-width: 104px;
	object-fit: contain;
	object-position: left bottom;
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* Texte des cartes : le paragraphe de l'accueil, en sans serif (3.28.0). */
html body.home .elementor-element-54e18f58 p {
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.7 !important;
	color: rgba( 247, 246, 243, 0.72 ) !important;
}

/* La flèche : dernier bloc du corps de chaque carte. */
html body.home .elementor-element-54e18f58 > .elementor-element > .elementor-element > .elementor-element:last-child {
	position: relative;
	flex: 0 0 auto;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

html body.home .elementor-element-54e18f58 > .elementor-element > .elementor-element > .elementor-element:last-child::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	margin: auto;
	background-color: var( --hl-ivory );
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), background-color 0.3s ease;
}

/* « Découvrir » à côté de la flèche. */
html body.home .elementor-element-54e18f58 > .elementor-element > .elementor-element > .elementor-element:last-child::before {
	content: "Découvrir";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc( 100% + 22px );
	display: flex;
	align-items: center;
	color: #bcb2a1;
	font-family: var( --hl-body );
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.28em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color 0.3s ease;
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover > .elementor-element > .elementor-element:last-child::before {
	color: var( --hl-ivory );
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover {
	border-color: #f7f6f3 !important;
	transform: translateY( -4px );
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover > img {
	transform: rotate( -3deg ) scale( 1.03 );
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover > .elementor-element > .elementor-element:last-child {
	border-color: var( --hl-ivory ) !important;
	background-color: var( --hl-ivory );
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover > .elementor-element > .elementor-element:last-child::after {
	background-color: var( --hl-black );
	transform: translateX( 3px );
}

html body.home .elementor-element-54e18f58 > .elementor-element:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 4px;
}

@media ( max-width: 1024px ) {
	/* Grille en colonne : une base nulle écraserait la hauteur des cartes. */
	html body.home .elementor-element-54e18f58 > .elementor-element {
		flex: 0 0 auto !important;
	}

	html body.home .elementor-element-54e18f58 > .elementor-element > img {
		flex: 0 0 auto;
		height: 64px !important;
	}
}

/* Tablette, cartes en ligne : une case d'icône de largeur fixe aligne les textes. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	html body.home .elementor-element-54e18f58 > .elementor-element > img {
		width: 96px !important;
		object-position: center;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-54e18f58 > .elementor-element > img {
		height: 60px !important;
	}

	html body.home .elementor-element-54e18f58 p {
		font-size: 20px !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body.home .elementor-element-54e18f58 > .elementor-element,
	html body.home .elementor-element-54e18f58 > .elementor-element > img,
	html body.home .elementor-element-54e18f58 > .elementor-element > .elementor-element > .elementor-element:last-child::after {
		transition: none;
		transform: none !important;
	}
}

/* Niveau de peur, « Peu importe » : point d'interrogation, un peu effacé. */
html body .hl-bar .hl-fear-marks.is-any .hl-fear-mark {
	opacity: 0.7;
}

/* =========================================================================
 * MENU « MON COMPTE » · 2.99.0
 *
 * 25 px de vide séparent « Mon compte » de son menu : la souris qui les
 * traversait quittait le survol et le menu se refermait. Une passerelle
 * invisible, rattachée au menu, comble ce vide.
 * ========================================================================= */

html body header#header-container.hl-header .user-menu ul::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 30px;
}

/* =========================================================================
 * TABLEAU DE BORD : UN SEUL LOGO · 2.99.2
 *
 * Listeo y affiche deux logos (le normal et celui du tableau de bord) dans
 * une case grise de 280 px, et centre l'image deux fois : elle tombait sous
 * l'en-tête, en double, par-dessus la barre latérale.
 * ========================================================================= */

html body.page-template-template-dashboard header#header-container.hl-header #logo {
	padding-left: 30px !important;
	background: transparent !important;
}

html body.page-template-template-dashboard header#header-container.hl-header #logo a.dashboard-logo {
	display: none !important;
}

html body.page-template-template-dashboard header#header-container.hl-header #logo img {
	top: 0 !important;
	transform: none !important;
}

/* Tableau de bord : Listeo trace une ombre à partir de 280 px, au bord de
   l'ancienne case du logo. Inutile avec l'en-tête clair : on la retire. */
html body.page-template-template-dashboard header#header-container.hl-header #header::after {
	content: none !important;
	display: none !important;
}

/* Parallaxe : les calques sont peints à part, sans toucher au reste de la
   page quand ils bougent. */
html body.home .hl-hero-creme .hl-paysage {
	contain: layout paint;
}

html body.home .hl-hero-creme .hl-paysage__calque {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* « Ajouter un lieu » : petit « + » devant le libellé. */
html body header#header-container.hl-header .header-widget a.button {
	gap: 8px;
}

html body header#header-container.hl-header .header-widget a.button .hl-ajout-icone {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	margin: 0;
	line-height: 0;
}

html body header#header-container.hl-header .header-widget a.button .hl-ajout-icone svg {
	display: block;
	width: 14px;
	height: 14px;
}

/* =========================================================================
 * TIROIR MOBILE : « MON COMPTE » · 3.1.0
 *
 * Connecté, « Mon compte » rejoint les entrées du menu. Le libellé mène au
 * tableau de bord ; la flèche déplie les autres pages du compte.
 * ========================================================================= */

html body .mobile-navigation-wrapper .hl-mobile-compte__ligne {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

html body .mobile-navigation-wrapper .hl-mobile-compte__bascule {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba( 247, 246, 243, 0.18 );
	border-radius: 50%;
	background: transparent;
	color: var( --hl-ivory );
	cursor: pointer;
	transition: border-color 0.25s ease, transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body .mobile-navigation-wrapper .hl-mobile-compte__bascule:focus-visible {
	outline: 2px solid var( --hl-red );
	outline-offset: 2px;
}

html body .mobile-navigation-wrapper .hl-mobile-compte.is-open .hl-mobile-compte__bascule {
	border-color: rgba( 247, 246, 243, 0.42 );
	transform: rotate( 180deg );
}

html body .mobile-navigation-wrapper .hl-mobile-compte__sous {
	display: none;
	margin: 10px 0 4px;
	padding: 0 0 0 20px;
	border-left: 1px solid rgba( 247, 246, 243, 0.12 );
	list-style: none;
}

html body .mobile-navigation-wrapper .hl-mobile-compte.is-open .hl-mobile-compte__sous {
	display: block;
}

html body .mobile-navigation-wrapper .hl-mobile-compte__sous li {
	margin: 0;
	padding: 0;
	border: 0;
}

html body .mobile-navigation-wrapper #mobile-nav .hl-mobile-compte__sous a {
	display: block;
	padding: 8px 0 !important;
	color: rgba( 247, 246, 243, 0.78 ) !important;
	font-family: var( --hl-body ) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
}

html body .mobile-navigation-wrapper #mobile-nav .hl-mobile-compte__sous a:hover,
html body .mobile-navigation-wrapper #mobile-nav .hl-mobile-compte__sous a:focus-visible {
	color: var( --hl-ivory ) !important;
}

/* Piège à robots de l'inscription : hors de l'écran, jamais vu ni lu. */
html body .hl-piege {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/*
 * Mes revenus : Listeo affiche en tête « Frais : 5 % », c'est-à-dire le taux
 * des frais payés par le voyageur, pas la commission de l'hôte. Chaque ligne
 * donne déjà le montant réellement retenu : l'en-tête trompeur est masqué.
 */
.dashboard-list-box .comission-taken {
	display: none;
}

/* Page de paiement : rappel de l'acompte et du solde. */
.hl-echeancier {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #f7f6f3;
	color: #373132;
	font-size: 15px;
	line-height: 1.5;
}

/*
 * Menu déroulant « Mon compte » : intertitres Voyager et Accueillir, puis un
 * filet avant le profil et la déconnexion. Encre douce, pas de rouge : ce
 * sont des repères, pas des liens.
 */
html body header#header-container.hl-header .user-menu ul li.hl-menu-titre {
	margin: 10px 0 2px !important;
	padding: 0 12px !important;
	color: #6b6151;
	font-family: var( --hl-body );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	pointer-events: none;
}

html body header#header-container.hl-header .user-menu ul li.hl-menu-trait {
	height: 1px;
	margin: 8px 12px !important;
	padding: 0 !important;
	background: rgba( 21, 14, 16, 0.1 );
	pointer-events: none;
}

/* Lien « Devenir hôte » dans le message réservé aux hôtes. */
.dashboard-content .notification a.hl-devenir-hote {
	color: #7a1515;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Formulaire d'annonce, juste après le passage en hôte. */
.hl-hote-bienvenue {
	margin: 0 0 24px;
	padding: 14px 18px;
	border-left: 3px solid #961b1b;
	border-radius: 10px;
	background: #f7f6f3;
	color: #373132;
	font-size: 16px;
	line-height: 1.5;
}

.hl-hote-bienvenue strong {
	color: #150e10;
}

/* ==================================================== Devenir hôte

   Deux rangées en colonnes. En haut, le titre face au paysage dessiné de
   l'accueil, immobile. Puis les trois univers. Puis les étapes face à une
   carte qui reste à l'écran pendant la lecture. Le bandeau de titre du
   thème est masqué : le titre de la page est dans le hero.
   ================================================================= */
html body.hl-page-hote #titlebar {
	display: none !important;
}

html body.hl-page-hote .wp-block-columns {
	display: grid;
	gap: clamp( 32px, 5vw, 80px );
	align-items: center;
	margin: 0;
}

html body.hl-page-hote .wp-block-column {
	min-width: 0;
}

/* Hero */
html body.hl-page-hote .hl-hote-hero {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr );
	padding: clamp( 40px, 6vw, 88px ) 0 clamp( 48px, 6vw, 96px );
}

html body.hl-page-hote .hl-hote-hero h1 {
	margin: 0 0 24px !important;
	color: #150e10;
	font-size: clamp( 44px, 4.6vw, 72px ) !important;
	font-weight: 500;
	line-height: 1.02 !important;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

html body.hl-page-hote p.hl-hote-chapo {
	max-width: 30em;
	margin: 0 0 32px !important;
	color: #373132;
	font-size: clamp( 18px, 1.4vw, 21px ) !important;
	line-height: 1.6 !important;
}

/* Paysage : mêmes calques et mêmes proportions que l'accueil, dans un
   cadre crème. Les positions sont en largeur du cadre (cqw). */
.hl-hote-paysage {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 28px;
	background: linear-gradient( 180deg, #f7f6f3 0%, #ddd7cc 100% );
	box-shadow: 0 30px 60px -30px rgba( 30, 21, 24, 0.35 );
}

.hl-hote-paysage img {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
	user-select: none;
}

.hl-hote-paysage__soleil { bottom: 6.3cqw !important; left: 8.4% !important; width: 46% !important; }
.hl-hote-paysage__lac    { bottom: 2.8cqw !important; left: -2.09% !important; width: 60.09% !important; }
.hl-hote-paysage__cabane { bottom: -0.2cqw !important; left: 28.5% !important; width: 54% !important; }
.hl-hote-paysage__sol    { bottom: -2cqw !important; }

/* Boutons */
html body.hl-page-hote .hl-hote-action form {
	margin: 0;
}

html body .hl-hote-bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: #961b1b;
	color: #fff !important;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

html body .hl-hote-bouton:hover {
	background: #7a1515;
	transform: translateY( -1px );
}

html body .hl-hote-bouton:focus-visible {
	outline: 2px solid #150e10;
	outline-offset: 3px;
}

html body.hl-page-hote .hl-hote-note {
	margin: 12px 0 0 !important;
	color: #6b6151;
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* Intertitres */
html body.hl-page-hote h2.hl-hote-intertitre {
	margin: 0 0 28px !important;
	color: #150e10;
	font-size: clamp( 32px, 3vw, 44px ) !important;
	line-height: 1.1 !important;
}

/* Univers */
.hl-hote-univers {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
	margin: 0 0 clamp( 64px, 8vw, 112px ) !important;
	padding: 0 !important;
	list-style: none;
}

.hl-hote-univers li {
	margin: 0;
	padding: 28px 28px 30px;
	border: 1px solid #eeebe5;
	border-radius: 20px;
	background: #fbfaf8;
}

.hl-hote-univers img {
	display: block;
	width: auto;
	height: 72px;
	margin: 0 0 20px;
}

html body.hl-page-hote .hl-hote-univers h3 {
	margin: 0 0 8px !important;
	color: #150e10;
	font-size: 28px !important;
	line-height: 1.15 !important;
}

html body.hl-page-hote .hl-hote-univers p {
	margin: 0 !important;
	color: #373132;
	font-size: 16px !important;
	line-height: 1.55 !important;
}

/* Étapes et carte */
html body.hl-page-hote .hl-hote-corps {
	grid-template-columns: minmax( 0, 1.15fr ) minmax( 0, 0.85fr );
	align-items: start;
	padding: 0 0 clamp( 64px, 8vw, 112px );
}

html body.hl-page-hote ol.hl-hote-etapes {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: etape;
}

html body.hl-page-hote ol.hl-hote-etapes li {
	position: relative;
	margin: 0 !important;
	padding: 0 0 28px 72px !important;
	color: #373132;
	font-size: 17px !important;
	line-height: 1.6 !important;
	counter-increment: etape;
}

html body.hl-page-hote ol.hl-hote-etapes li + li {
	padding-top: 28px !important;
	border-top: 1px solid #eeebe5;
}

html body.hl-page-hote ol.hl-hote-etapes li::before {
	content: counter( etape );
	position: absolute;
	left: 0;
	color: #961b1b;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 48px;
	font-weight: 500;
	font-variant-numeric: lining-nums;
	line-height: 0.9;
}

html body.hl-page-hote ol.hl-hote-etapes li strong {
	display: block;
	margin: 0 0 4px;
	color: #150e10;
	font-size: 19px;
	font-weight: 600;
}

html body.hl-page-hote .hl-hote-savoir {
	position: sticky;
	top: 120px;
	padding: 32px;
	border-radius: 24px;
	background: #150e10;
	color: #ddd7cc;
}

html body.hl-page-hote .hl-hote-savoir h2 {
	margin: 0 0 16px !important;
	color: #f7f6f3 !important;
	font-size: 30px !important;
	line-height: 1.15 !important;
}

html body.hl-page-hote .hl-hote-savoir ul {
	margin: 0 0 28px !important;
	padding: 0 !important;
	list-style: none;
}

html body.hl-page-hote .hl-hote-savoir li {
	position: relative;
	margin: 0 !important;
	padding: 10px 0 10px 20px !important;
	color: #ddd7cc;
	font-size: 16px !important;
	line-height: 1.55 !important;
}

html body.hl-page-hote .hl-hote-savoir li + li {
	border-top: 1px solid rgba( 221, 215, 204, 0.14 );
}

html body.hl-page-hote .hl-hote-savoir li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c84a4a;
}

html body.hl-page-hote .hl-hote-savoir .hl-hote-note {
	color: #bcb2a1;
}

/* Sur la carte sombre, le rouge se perdait : bouton ivoire. */
html body.hl-page-hote .hl-hote-savoir .hl-hote-bouton {
	background: #f7f6f3;
	color: #150e10 !important;
}

html body.hl-page-hote .hl-hote-savoir .hl-hote-bouton:hover {
	background: #fff;
}

html body.hl-page-hote .hl-hote-savoir .hl-hote-bouton:focus-visible {
	outline-color: #f7f6f3;
}

@media ( max-width: 991px ) {
	html body.hl-page-hote .hl-hote-hero,
	html body.hl-page-hote .hl-hote-corps {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hl-hote-univers {
		grid-template-columns: minmax( 0, 1fr );
	}

	html body.hl-page-hote .hl-hote-savoir {
		position: static;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-hote-bouton {
		transition: none;
	}
}

/* ========================================== Ajouter un lieu : le type

   Les trois ronds génériques de Listeo cèdent la place aux icônes
   dessinées de l'accueil, dans le même ordre, avec une phrase par type.
   ================================================================= */
html body .listing-type-container.hl-types {
	display: grid !important;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 20px;
}

html body .listing-type-container.hl-types .listing-type {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	width: auto !important;
	margin: 0 !important;
	padding: 28px 28px 30px !important;
	border: 1.5px solid #eeebe5 !important;
	border-radius: 20px !important;
	background: #fbfaf8 !important;
	text-align: left !important;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

html body .listing-type-container.hl-types .listing-type:hover,
html body .listing-type-container.hl-types .listing-type:focus-visible,
html body .listing-type-container.hl-types .listing-type.active {
	border-color: #961b1b !important;
	transform: translateY( -2px );
}

html body .listing-type-container.hl-types .listing-type-icon {
	display: block !important;
	width: auto !important;
	height: 72px !important;
	margin: 0 0 20px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

html body .listing-type-container.hl-types .listing-type-icon::before,
html body .listing-type-container.hl-types .listing-type-icon::after {
	display: none !important;
}

html body .listing-type-container.hl-types .listing-type-icon img {
	display: block;
	width: auto;
	height: 72px;
}

html body .listing-type-container.hl-types .listing-type h3 {
	margin: 0 0 8px !important;
	color: #150e10 !important;
	font-size: 28px !important;
	line-height: 1.15 !important;
}

html body .listing-type-container.hl-types .hl-type-texte {
	margin: 0;
	color: #373132;
	font-size: 15px;
	line-height: 1.55;
}

@media ( max-width: 991px ) {
	html body .listing-type-container.hl-types {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * Fenêtres (connexion, inscription) : la croix de fermeture était
 * invisible, un « × » gris de 7 px et une icône d'une police absente.
 * Une croix dessinée, à l'encre, dans un rond clair.
 */
html body .mfp-content .mfp-close {
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #eeebe5 url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23111012' stroke-width='1.7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E" ) center / 16px no-repeat !important;
	color: transparent !important;
	font-size: 0 !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

html body .mfp-content .mfp-close::before,
html body .mfp-content .mfp-close::after {
	display: none !important;
}

html body .mfp-content .mfp-close:hover {
	background-color: #bcb2a1 !important;
}

html body .mfp-content .mfp-close:focus-visible {
	outline: 2px solid #150e10;
	outline-offset: 2px;
}

/* Devenir hôte : photo du hero, même cadre que le reste du site. */
html body.hl-page-hote figure.hl-hote-photo {
	margin: 0 !important;
	overflow: hidden;
	border-radius: 28px;
	box-shadow: 0 30px 60px -30px rgba( 30, 21, 24, 0.45 );
}

html body.hl-page-hote figure.hl-hote-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ==================================================== Plus de gris

   Le site est ivoire : les gris neutres du thème (#eeebe5, #eeebe5,
   #eeebe5, #eeebe5...) passent à leurs équivalents chauds. Le bandeau de
   titre des pages prend la couleur du fond de page.
   ================================================================= */
html body #titlebar.solid,
html body #titlebar:not([style*="background-image"]) {
	background: transparent !important;
}

html body .dashboard-nav {
	background-color: #f7f6f3 !important;
	border-right-color: #eeebe5 !important;
}

html body .add-listing-headline,
html body .dashboard-list-box h4.gray {
	background-color: #fbfaf8 !important;
	border-color: #eeebe5 !important;
}

html body .lstb-tabs,
html body .payment-tab,
html body .mes_referral {
	background-color: #f7f6f3 !important;
}

html body .dashboard-list-box,
html body .add-listing-section {
	border-color: #eeebe5 !important;
}

/* Les chiffres de la police de titre sont en style ancien : « 10 » se lisait
   « IO ». Chiffres alignés dans tous les titres. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .dashboard-stat h4 {
	font-variant-numeric: lining-nums;
}

/* ============================================ Tableau de bord de l'hôte

   Cinq cartes au lieu de quatre : la carte « Revenus » ouvre la rangée.
   ================================================================= */
html body .listeo-dashoard-widgets {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 20px;
	margin: 0 0 10px !important;
}

html body .listeo-dashoard-widgets::before,
html body .listeo-dashoard-widgets::after {
	display: none !important;
}

html body .listeo-dashoard-widgets > a,
html body .listeo-dashoard-widgets > div {
	display: block;
	min-width: 0;
}

html body .listeo-dashoard-widgets [class*="col-"] {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
}

html body .listeo-dashoard-widgets .dashboard-stat {
	margin: 0 !important;
}

html body .listeo-dashoard-widgets .hl-tuile-revenus {
	order: -1;
}

html body .dashboard-stat.hl-stat-revenus {
	border-color: #961b1b !important;
	background: #f8ecea !important;
}

html body .dashboard-stat.hl-stat-revenus .stat-badge,
html body .dashboard-stat.hl-stat-revenus .stat-label,
html body .dashboard-stat.hl-stat-revenus h4,
html body .dashboard-stat.hl-stat-revenus h4 .woocommerce-Price-amount {
	color: #961b1b !important;
}

html body .dashboard-stat.hl-stat-revenus .stat-badge svg {
	width: 24px;
	height: 24px;
}

html body .dashboard-stat.hl-stat-revenus .stat-meta-text,
html body .dashboard-stat.hl-stat-revenus .stat-meta-text strong {
	color: rgba( 150, 27, 27, 0.85 ) !important;
}

/* Le montant suit la typographie des autres cartes, pas celle des prix. */
html body .dashboard-stat.hl-stat-revenus h4,
html body .dashboard-stat.hl-stat-revenus h4 * {
	font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
	font-size: 24px !important;
	font-weight: inherit !important;
	line-height: inherit !important;
}

html body .dashboard-stat.hl-stat-revenus .stat-meta-text * {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* Tablette et téléphone : le fil d'Ariane, placé en absolu à droite,
   passait sur le titre. Il revient sous le titre, dans le flux. */
@media ( max-width: 1024px ) {
	html body #titlebar #breadcrumbs {
		position: static !important;
		transform: none !important;
		margin: 10px 0 0 !important;
		text-align: left !important;
	}
}

/* =========================================================================
 * ACCUEIL : « EXPLOREZ PAR DESTINATION » · 3.11.0
 * Une carte par région : photo au format et à l'arrondi des cartes
 * d'annonce, nom en Cormorant, accroche en dessous. Cinq cartes visibles sur
 * grand écran, la suite au doigt ou aux flèches.
 * ========================================================================= */
.hl-dest {
	--hl-dest-ecart: 24px;
	--hl-dest-visibles: 5;
}

.hl-dest .hl-section-head {
	margin-bottom: 32px;
}

.hl-dest--fixe .hl-carrousel-nav {
	display: none;
}

.hl-dest__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( var( --hl-dest-visibles ) - 1 ) * var( --hl-dest-ecart ) ) / var( --hl-dest-visibles ) );
	column-gap: var( --hl-dest-ecart );
	margin: 0 !important;
	padding: 0 0 4px !important;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hl-dest__piste::-webkit-scrollbar {
	display: none;
}

.hl-dest__item {
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.hl-dest__carte {
	display: block;
	color: inherit;
	text-decoration: none !important;
}

.hl-dest__cadre {
	display: block;
	overflow: hidden;
	border-radius: 14px;
	background: #eeebe5;
	line-height: 0;
}

.hl-dest__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hl-dest__photo--vide {
	aspect-ratio: 3 / 2;
}

.hl-dest__carte:hover .hl-dest__photo {
	transform: scale( 1.04 );
}

.hl-dest__carte:focus-visible {
	outline: 2px solid var( --hl-red, #961b1b );
	outline-offset: 4px;
	border-radius: 16px;
}

.hl-dest__nom {
	display: block;
	margin: 14px 0 2px;
	color: #150e10;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
}

.hl-dest__accroche {
	display: block;
	color: #6b6151;
	font-size: 14px;
	line-height: 1.45;
}

@media ( max-width: 1199px ) {
	.hl-dest {
		--hl-dest-visibles: 4;
	}
}

@media ( max-width: 991px ) {
	.hl-dest {
		--hl-dest-visibles: 3;
		--hl-dest-ecart: 18px;
	}
}

@media ( max-width: 767px ) {
	.hl-dest {
		--hl-dest-visibles: 1.4;
		--hl-dest-ecart: 14px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-dest__photo {
		transition: none;
	}

	.hl-dest__carte:hover .hl-dest__photo {
		transform: none;
	}
}

/* =========================================================================
 * MENUS DU COMPTE : PICTOGRAMMES DES FICHES · 3.11.0
 * Pictogrammes pleins, couleur encre, comme « Ce que propose ce lieu ».
 * Le rouge reste pour l'entrée active et le survol.
 * ========================================================================= */
html body .dashboard-nav ul li a i.hl-ico,
html body .user-menu ul li a i.hl-ico {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 20px !important;
	margin-right: 10px !important;
	color: #373132 !important;
	font-family: "Font Awesome 6 Free" !important;
	font-size: 15px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-align: center;
	transition: color 0.2s ease;
}

html body .user-menu ul li a i.hl-ico {
	margin-right: 0 !important;
}

html body .dashboard-nav ul li.active > a i.hl-ico,
html body .dashboard-nav ul li a:hover i.hl-ico,
html body .user-menu ul li a:hover i.hl-ico {
	color: #961b1b !important;
}

/* =========================================================================
 * PIED DE PAGE : RÉSEAUX SOCIAUX · 3.11.0
 * ========================================================================= */
.hl-reseaux {
	display: flex;
	gap: 10px;
	margin: 20px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hl-reseaux li {
	margin: 0;
	padding: 0;
}

.hl-reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba( 221, 215, 204, 0.28 );
	border-radius: 50%;
	color: #ddd7cc !important;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.hl-reseaux a:hover,
.hl-reseaux a:focus-visible {
	border-color: #ddd7cc;
	background: rgba( 221, 215, 204, 0.08 );
	color: #fff !important;
}

.hl-reseaux a:focus-visible {
	outline: 2px solid #ddd7cc;
	outline-offset: 3px;
}

/* La section reprend le fond ivoire et la largeur de « Sélection », qu'elle
   prolonge : l'ancienne liste « Où passer la nuit » était sur fond sombre. */
html body.home .elementor-element-52160128 {
	background-color: var( --hl-ivory, #f7f6f3 ) !important;
	padding: 24px 20px 110px !important;
}

html body.home .elementor-element-52160128 .hl-dest {
	max-width: 1320px;
	margin: 0 auto;
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-52160128 {
		padding: 16px 16px 72px !important;
	}

	/* Sur téléphone, la piste déborde à droite pour montrer qu'elle défile. */
	html body.home .elementor-element-52160128 .hl-dest__piste {
		margin-right: -16px !important;
		padding-right: 16px !important;
	}
}

/* Couleurs de titre de « Sélection » : la section d'origine était sombre et
   passait son titre en ivoire. */
html body.home .elementor-element-52160128 .hl-dest .headline {
	color: #150e10 !important;
}

html body.home .elementor-element-52160128 .hl-dest .hl-accent {
	color: #961b1b !important;
}

html body.home .elementor-element-52160128 .hl-dest .hl-eyebrow {
	color: #6b6151 !important;
}

/* Le thème force le rouge sur ces icônes avec un sélecteur à trois classes,
   en ligne dans la page : il faut le dépasser. */
html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a i.hl-ico {
	color: #373132 !important;
}

html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li.active > a i.hl-ico,
html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a:hover i.hl-ico {
	color: #961b1b !important;
}

/* =========================================================================
 * PAGES DE RÉSULTATS : PLUS DE VIDE SOUS LES FILTRES · 3.12.0
 * La barre « tri / affichage » de Listeo restait en place, vide (ses deux
 * boutons sont masqués), et s'ajoutait à une marge de 45 px : 119 px entre les
 * filtres et la première carte, ou le message « Rien trouvé ».
 * ========================================================================= */
html body .fs-content .fs-switcher {
	display: none !important;
}

html body .fs-content section.listings-container.margin-top-45 {
	margin-top: 8px !important;
}

/* =========================================================================
 * ACCUEIL : « EXPLOREZ SELON VOTRE ENVIE » · 3.12.0
 * Bande sombre entre « Sélection » et « Inspiration voyage ». Cartes au
 * filet crème et aux coins des cartes « Locations / Expériences /
 * Événements », mais avec une photo, un voile sombre et la flèche ronde.
 * ========================================================================= */
html body.home .hl-bande-envies {
	background-color: #f7f6f3 !important;
	padding: 96px 20px 104px !important;
}

.hl-envies {
	max-width: 1320px;
	margin: 0 auto;
}

.hl-envies__surtitre {
	margin: 0 0 14px !important;
	color: #bcb2a1 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

html body .hl-envies h2.hl-envies__titre {
	margin: 0 0 40px !important;
	color: #f7f6f3 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: clamp( 38px, 4vw, 56px ) !important;
	font-weight: 500 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.01em;
}

.hl-envies__grille {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hl-envies__grille li {
	margin: 0;
	padding: 0;
}

.hl-envie {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1 / 0.9;
	overflow: hidden;
	isolation: isolate;
	padding: 24px;
	border: 1.5px solid rgba( 221, 215, 204, 0.55 );
	border-radius: 18px;
	background: #150e10;
	color: #f7f6f3 !important;
	text-decoration: none !important;
	transition: border-color 0.3s ease, transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.hl-envie__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

/* Voile : la photo s'assombrit vers le bas, là où se pose le titre. */
.hl-envie::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( 180deg, rgba( 21, 14, 16, 0.05 ) 30%, rgba( 21, 14, 16, 0.82 ) 100% );
}

.hl-envie__titre {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.15;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.4 );
}

.hl-envie__fleche {
	position: relative;
	width: 40px;
	height: 40px;
	margin-top: 16px;
	border: 1.5px solid #ddd7cc;
	border-radius: 50%;
	transition: background-color 0.3s ease;
}

.hl-envie__fleche::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	background-color: #ddd7cc;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
}

.hl-envie:hover,
.hl-envie:focus-visible {
	border-color: #ddd7cc;
	transform: translateY( -3px );
}

.hl-envie:hover .hl-envie__photo {
	transform: scale( 1.05 );
}

.hl-envie:hover .hl-envie__fleche {
	background-color: rgba( 221, 215, 204, 0.16 );
}

.hl-envie:focus-visible {
	outline: 2px solid #ddd7cc;
	outline-offset: 4px;
}

@media ( max-width: 1024px ) {
	.hl-envies__grille {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	html body.home .hl-bande-envies {
		padding: 64px 16px 72px !important;
	}

	.hl-envies__grille {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hl-envie {
		aspect-ratio: 16 / 10;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-envie,
	.hl-envie__photo {
		transition: none;
	}

	.hl-envie:hover,
	.hl-envie:hover .hl-envie__photo {
		transform: none;
	}
}

/* Empilement positif : la photo au fond, le voile, puis le texte. Le
   z-index négatif faisait disparaître certaines photos selon le rendu. */
html body .hl-envie .hl-envie__photo {
	z-index: 0 !important;
	height: 100% !important;
	max-width: none !important;
}

html body .hl-envie::before {
	z-index: 1 !important;
}

html body .hl-envie .hl-envie__titre,
html body .hl-envie .hl-envie__fleche {
	position: relative;
	z-index: 2;
}

/* =========================================================================
 * PLUS DE GRIS NEUTRES · 3.13.0
 * Les gris froids du thème et du calendrier passent aux crèmes de la
 * palette : #eeebe5 pour les fonds légers, --hl-beige (#eeebe5) pour les
 * sélections, un cran plus foncé que le fond de page.
 * ========================================================================= */
html body .daterangepicker td.in-range,
html body .daterangepicker td.in-range:hover {
	background-color: var( --hl-beige, #eeebe5 ) !important;
	color: #150e10 !important;
}

html body .daterangepicker td.available:hover,
html body .daterangepicker th.available:hover {
	background-color: var( --hl-beige, #eeebe5 ) !important;
}

html body .daterangepicker td.off,
html body .daterangepicker td.off.in-range,
html body .daterangepicker td.off.start-date,
html body .daterangepicker td.off.end-date {
	background-color: transparent !important;
}

html body .daterangepicker .calendar-table,
html body .daterangepicker .drp-buttons {
	border-color: var( --hl-line, #ddd7cc ) !important;
}

/* =========================================================================
 * ACCUEIL : UN SEUL RYTHME VERTICAL · 3.13.0
 * Chaque section, sauf le héros, laisse le même espace au-dessus et
 * au-dessous de son contenu : 112 px sur grand écran, 88 px sur tablette,
 * 72 px sur téléphone. Les sections alternent ivoire et sombre, l'espace est
 * donc symétrique. Les couches d'espacement empilées par Elementor (section,
 * conteneur, colonne) sont ramenées à une seule.
 * ========================================================================= */
html body.home {
	--hl-section-y: clamp( 72px, 7.8vw, 112px );
	--hl-section-x: 20px;
}

/* Univers (cartes Locations, Expériences, Événements). */
html body.home .elementor-element-4ab098ab {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* Sélection : la section, son conteneur et sa colonne. */
html body.home .elementor-element-3030d7c5 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

html body.home .elementor-element-3030d7c5 > .elementor-container {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

html body.home .elementor-element-3030d7c5 .elementor-widget-wrap.elementor-element-populated {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

html body.home .elementor-element-3030d7c5 .simple-slick-carousel {
	margin-bottom: 0 !important;
}

/* Explorez selon votre envie. */
html body.home .hl-bande-envies {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* Inspiration voyage. */
html body.home .elementor-element-52160128 {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* Comment ça se passe. */
html body.home .elementor-element-5985e131 {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* Vous êtes hôte : deux colonnes ajoutent chacune 10 px. */
html body.home .elementor-element-3f4d6413 {
	padding-top: calc( var( --hl-section-y ) - 20px ) !important;
	padding-bottom: calc( var( --hl-section-y ) - 20px ) !important;
}

/* Questions fréquentes. */
html body.home .elementor-element-db724a6 .hl-faq {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* =========================================================================
 * PAGES DE RÉSULTATS : MÊMES ESPACES PARTOUT · 3.13.0
 * Région et catégorie posent la barre dans une section `.search` (45 px
 * au-dessus, 35 px au-dessous) ; la page « Locations » la pose dans le
 * contenu (34 px au-dessus, 48 px jusqu'aux cartes). On aligne tout sur
 * « Locations ».
 * ========================================================================= */
html body[class*="tax-"] .fs-content > section.search {
	padding-top: 34px !important;
	padding-bottom: 0 !important;
}

html body[class*="tax-"] .fs-content > section.search .hl-search {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

html body[class*="tax-"] .fs-content > section.search > .row {
	margin-bottom: 0 !important;
}

html body[class*="tax-"] .fs-content > section.search ~ section.listings-container {
	margin-top: 48px !important;
}

/* Tablette et téléphone : l'en-tête mesure 74 px, pas 88. */
@media ( max-width: 1024px ) {
	html body .fs-container .fs-inner-container {
		padding-top: 74px !important;
	}
}

/* Sous 1024 px, la carte passe au-dessus des résultats : le contenu
   n'a plus d'en-tête à contourner, il suit la carte directement. */
@media ( max-width: 1023px ) {
	html body .fs-container .fs-inner-container.content {
		padding-top: 0 !important;
	}
}

/* Sélection : la piste du carrousel ajoutait 30 px et chaque diapositive
   10 px sous les cartes. */
html body.home .elementor-element-3030d7c5 .slick-track {
	margin-bottom: 0 !important;
}

html body.home .elementor-element-3030d7c5 .slick-slide,
html body.home .elementor-element-3030d7c5 .fw-carousel-item {
	padding-bottom: 0 !important;
}

/* Expériences nocturnes : photo en hauteur, la lanterne tombait sous la
   flèche. Le cadrage descend pour la remonter dans la carte. */
html body .hl-envies__grille li:nth-child( 3 ) .hl-envie__photo {
	object-position: 50% 78%;
}

/* Lieux à forte réputation : la statue du Père-Lachaise est à droite de la
   photo, le cadrage se décale pour la garder dans la carte. Photo de jour,
   un peu assombrie pour rester dans le ton des trois autres. Ciblée par son
   fichier : si la photo change, le réglage ne la suit pas. */
html body .hl-envie .hl-envie__photo[src*="statue-pleureuse-pere-lachaise"] {
	object-position: 82% 50%;
	filter: brightness( 0.72 );
}

/* Île-de-France : photo en hauteur, le cadrage remonte pour garder la tête
   de la chimère. */
html body .hl-dest__photo[src*="chimere-notre-dame-paris"] {
	object-position: 50% 30%;
}

/* =========================================================================
   SURTITRES DE L'ACCUEIL : UN SEUL STYLE
   Référence : le surtitre de la FAQ (« Avant d'éteindre la lumière »).
   Même corps, même graisse, même interligne, même approche, même marge.
   Sur les sections noires, le gris passe en clair pour rester lisible
   (contraste supérieur à 7:1 sur #150e10). Le bandeau d'ouverture n'est
   pas concerné. Le :not( #hl ) passe devant les règles de section plus
   anciennes, qui fixaient chacune leur couleur.
   ========================================================================= */
html body.home:not( #hl ) .hl-faq__eyebrow,
html body.home:not( #hl ) .hl-eyebrow,
html body.home:not( #hl ) .hl-envies__surtitre,
html body.home:not( #hl ) .e-3c6af841-c540,
html body.home:not( #hl ) .e-24b5c3a4-e0a3 {
	display: block !important;
	margin: 0 0 24px !important;
	font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
	font-size: 11px !important;
	font-style: normal !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: #6b6151 !important;
}

/* Sections sur fond noir. */
html body.home:not( #hl ) .hl-envies__surtitre,
html body.home:not( #hl ) .e-3c6af841-c540,
html body.home:not( #hl ) .e-24b5c3a4-e0a3 {
	color: #bcb2a1 !important;
}

/* Pages carte : Listeo pose au bas de la colonne des annonces un trait de
   1 px muni d'une ombre gris-blanc (#f7f6f3) de 10 px. Avec le pied de page
   noir dessous, il dessinait une bande claire d'une vingtaine de pixels en
   bas de l'écran. Il ne sert à rien d'autre : on le retire. */
html body .fs-inner-container.content::after {
	content: none !important;
	display: none !important;
	box-shadow: none !important;
}

/* =========================================================================
   PAGE DE CONFIRMATION : CONDITIONS D'ANNULATION, COMME AIRBNB
   Un résumé daté dans le récapitulatif de droite, les règles complètes
   juste avant le bouton d'envoi.
   ========================================================================= */
html body .hl-annulation-resume {
	margin: 0 0 24px;
	padding: 20px 22px;
	border: 1px solid #ddd7cc;
	border-radius: 16px;
	background: #f7f6f3;
	color: #373132;
	font-size: 14px;
	line-height: 1.5;
}

html body .hl-annulation-resume__titre {
	margin: 0 0 4px;
	color: #150e10;
	font-size: 16px;
	font-weight: 600;
}

html body .hl-annulation-resume__texte {
	margin: 0 0 8px;
}

html body .hl-annulation-resume__details summary {
	display: inline-block;
	color: #150e10;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}

html body .hl-annulation-resume__details summary::-webkit-details-marker {
	display: none;
}

html body .hl-annulation-resume__details p {
	margin: 10px 0 0;
}

html body .hl-annulation-resume__accord {
	color: #6b6151;
	font-size: 13px;
}

/* « Mes revenus » : encart tant que l'hôte n'a pas relié Stripe. */
html body .hl-encart-revenus {
	margin: 0 0 28px;
	padding: 20px 24px;
	border: 1px solid #ddd7cc;
	border-left: 4px solid #961b1b;
	border-radius: 14px;
	background: #f7f6f3;
	color: #373132;
	font-size: 15px;
	line-height: 1.55;
}

html body .hl-encart-revenus p {
	margin: 0 0 8px;
}

html body .hl-encart-revenus__titre {
	color: #150e10;
	font-size: 17px;
	font-weight: 600;
}

html body .hl-encart-revenus__lien {
	color: #961b1b;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =========================================================================
   PAGE D'AIDE AUX HÔTES (« Recevoir vos paiements »)
   Colonne de lecture, repères, cartes à pictogramme, frise des étapes,
   encadré, questions dépliables, appel à l'action. Des blocs Gutenberg
   ordinaires portant des classes : le texte reste modifiable.
   ========================================================================= */
html body.hl-page-aide article.page-container-col {
	float: none;
	max-width: none;
	margin: 0 auto 96px;
	color: #373132;
	font-size: 17px;
	line-height: 1.65;
}

html body.hl-page-aide .hl-aide-chapo {
	max-width: 700px;
	margin: 0 0 22px;
	color: #373132;
	font-size: 21px;
	line-height: 1.55;
}

html body.hl-page-aide .hl-aide-reperes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 72px;
	padding: 0;
	list-style: none;
}

html body.hl-page-aide .hl-aide-reperes li {
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background: #f5e9e5;
	color: #961b1b;
	font-size: 14px;
	font-weight: 600;
}

html body.hl-page-aide .hl-aide-surtitre {
	margin: 0 0 10px;
	color: #6b6151;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
}

html body.hl-page-aide article.page-container-col h2 {
	margin: 0 0 28px;
	color: #150e10;
	font-size: clamp( 32px, 3.2vw, 42px );
	line-height: 1.1;
}

html body.hl-page-aide .hl-aide-grille {
	display: grid;
	gap: 16px;
	margin: 0 0 80px;
}

/* Le thème enveloppe le contenu des groupes dans un conteneur intérieur :
   c'est lui qui porte la grille. */
html body.hl-page-aide .hl-aide-grille > .wp-block-group__inner-container {
	display: grid;
	gap: 16px;
}

html body.hl-page-aide .hl-aide-grille:has( > .wp-block-group__inner-container ) {
	display: block;
}

html body.hl-page-aide .hl-aide-grille--4,
html body.hl-page-aide .hl-aide-grille--4 > .wp-block-group__inner-container {
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
}

html body.hl-page-aide .hl-aide-grille--3,
html body.hl-page-aide .hl-aide-grille--3 > .wp-block-group__inner-container {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
}

html body.hl-page-aide .hl-aide-carte {
	margin: 0 !important;
	padding: 24px 22px;
	border: 1px solid #ddd7cc;
	border-radius: 20px;
	background: #fbfaf8;
}

html body.hl-page-aide .hl-aide-carte::before {
	content: "";
	display: block;
	width: 44px;
	height: 44px;
	margin-bottom: 18px;
	border-radius: 14px;
	background-color: #f5e9e5;
	background-image: linear-gradient( #961b1b, #961b1b );
	background-position: center;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	-webkit-mask: none;
}

html body.hl-page-aide .hl-aide-carte h3 {
	margin: 0 0 6px;
	color: #150e10;
	font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	letter-spacing: 0 !important;
}

html body.hl-page-aide .hl-aide-carte p {
	margin: 0;
	color: #6b6151;
	font-size: 15px;
	line-height: 1.55;
}

/* Frise des étapes. */
html body.hl-page-aide .hl-aide-etapes {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: hl-etape;
}

html body.hl-page-aide .hl-aide-etapes li {
	position: relative;
	margin: 0;
	padding: 0 0 26px 64px;
	counter-increment: hl-etape;
	color: #6b6151;
	font-size: 16px;
}

html body.hl-page-aide .hl-aide-etapes li strong {
	display: block;
	margin-bottom: 2px;
	color: #150e10;
	font-size: 17px;
}

html body.hl-page-aide .hl-aide-etapes li::before {
	content: counter( hl-etape );
	position: absolute;
	top: -2px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #150e10;
	color: #fbfaf8;
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: lining-nums;
}

html body.hl-page-aide .hl-aide-etapes li:not( :last-child )::after {
	content: "";
	position: absolute;
	top: 42px;
	bottom: 2px;
	left: 19.5px;
	width: 1px;
	background: #ddd7cc;
}

html body.hl-page-aide .hl-aide-etapes li:last-child::before {
	background: #961b1b;
}

html body.hl-page-aide .hl-aide-note {
	margin: 0 0 80px;
	padding: 16px 20px;
	border-radius: 14px;
	background: #eeebe5;
	color: #6b6151;
	font-size: 15px;
	line-height: 1.6;
}

html body.hl-page-aide .hl-aide-encadre {
	margin: -40px 0 80px;
	padding: 26px 28px;
	border-left: 4px solid #961b1b;
	border-radius: 16px;
	background: #f5e9e5;
}

html body.hl-page-aide .hl-aide-encadre h3 {
	margin: 0 0 6px;
	color: #150e10;
	font-family: "Plus Jakarta Sans", Arial, sans-serif !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
}

html body.hl-page-aide .hl-aide-encadre p {
	margin: 0;
	font-size: 16px;
}

/* Questions dépliables. */
html body.hl-page-aide .hl-aide-question {
	margin: 0;
	border-top: 1px solid #ddd7cc;
}

html body.hl-page-aide .hl-aide-question:last-of-type {
	border-bottom: 1px solid #ddd7cc;
}

html body.hl-page-aide .hl-aide-question summary {
	position: relative;
	padding: 20px 44px 20px 0;
	color: #150e10;
	font-size: 17px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

html body.hl-page-aide .hl-aide-question summary::-webkit-details-marker {
	display: none;
}

html body.hl-page-aide .hl-aide-question summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 4px;
	color: #961b1b;
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	transform: translateY( -50% );
}

html body.hl-page-aide .hl-aide-question[open] summary::after {
	content: "\2212";
}

html body.hl-page-aide .hl-aide-question p {
	margin: 0 0 20px;
	color: #6b6151;
	font-size: 16px;
}

html body.hl-page-aide .hl-aide-cta {
	margin: 72px 0 0;
	padding: 40px;
	border-radius: 24px;
	background: #150e10;
	color: #ddd7cc;
	text-align: center;
}

html body.hl-page-aide .hl-aide-cta h3 {
	margin: 0 0 8px;
	color: #fbfaf8;
	font-size: 32px;
	line-height: 1.15;
}

html body.hl-page-aide .hl-aide-cta p {
	max-width: 520px;
	margin: 0 auto 24px;
	color: #bcb2a1;
	font-size: 16px;
}

html body.hl-page-aide .hl-aide-cta a:not( .wp-block-button__link ) {
	color: #fbfaf8;
	text-decoration: underline;
	text-underline-offset: 3px;
}

html body.hl-page-aide .hl-aide-cta .wp-block-buttons {
	justify-content: center;
}

html body.hl-page-aide .hl-aide-cta .wp-block-button__link {
	padding: 15px 30px;
	border-radius: 999px;
	background: #961b1b;
	color: #fbfaf8;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

html body.hl-page-aide .hl-aide-cta .wp-block-button__link:hover {
	background: #7d1616;
}

@media ( max-width: 991px ) {
	html body.hl-page-aide .hl-aide-grille--4,
	html body.hl-page-aide .hl-aide-grille--4 > .wp-block-group__inner-container {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	html body.hl-page-aide .hl-aide-grille--3,
	html body.hl-page-aide .hl-aide-grille--3 > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 600px ) {
	html body.hl-page-aide .hl-aide-chapo {
		font-size: 18px;
	}

	html body.hl-page-aide .hl-aide-grille--4,
	html body.hl-page-aide .hl-aide-grille--4 > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}

	html body.hl-page-aide .hl-aide-cta {
		padding: 30px 22px;
	}
}

/* Pictogramme des cartes : un trait rouge de marque posé sur la pastille. */
html body.hl-page-aide .hl-aide-carte {
	position: relative;
}

html body.hl-page-aide .hl-aide-carte::before {
	background-image: none;
}

html body.hl-page-aide .hl-aide-carte::after {
	content: "";
	position: absolute;
	top: 35px;
	left: 33px;
	width: 22px;
	height: 22px;
	background: #961b1b;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

html body.hl-page-aide .hl-aide-carte--identite::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.2'/%3E%3Cpath d='M5.8 16c.6-1.6 1.8-2.4 3.2-2.4s2.6.8 3.2 2.4M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--banque::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18L12 4 3 10zM5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18L12 4 3 10zM5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--telephone::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--societe::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V6l7-3v17M11 9h9v11M7 8h1M7 12h1M7 16h1M14 13h3M14 16h3M3 20h18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V6l7-3v17M11 9h9v11M7 8h1M7 12h1M7 16h1M14 13h3M14 16h3M3 20h18'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--transfert::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13l-3-3M20 16H7l3 3'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--versement::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6.5 9.5v5M17.5 9.5v5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M6.5 9.5v5M17.5 9.5v5'/%3E%3C/svg%3E");
}

html body.hl-page-aide .hl-aide-carte--suivi::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16M8 15l3.5-4 3 2.5L19 8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16M8 15l3.5-4 3 2.5L19 8'/%3E%3C/svg%3E");
}


/* Pages carte (Locations, Expériences, Événements, archives) : pas d'ombre
   sous l'en-tête, au repos comme au défilement. Le filet suffit. */
html body.hl-entete-deja-compense header#header-container.hl-header,
html body.hl-entete-deja-compense header#header-container.hl-header.hl-header--clair.is-scrolled {
	box-shadow: none !important;
}

/* =========================================================================
   MON COMPTE : EN-TÊTE PLEIN, FOND CRÈME, MENU AUX COULEURS DES TUILES
   ========================================================================= */

/* L'en-tête ne change plus au défilement : plein, sans flou ni ombre. Le
   contenu ne transparaît plus dessous (le trait clair venait de là). */
html body.hl-compte.page-template-template-dashboard header#header-container.hl-header,
html body.hl-compte.page-template-template-dashboard header#header-container.hl-header.is-scrolled {
	background-color: #f7f6f3 !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: none !important;
	border-bottom: 1px solid #ddd7cc !important;
	transition: none !important;
}

/* Le contenu prend le crème de la page, les cartes l'ivoire. */
html body.hl-compte #dashboard,
html body.hl-compte .dashboard-content-container {
	background-color: #f7f6f3 !important;
}

/* Menu de gauche : pictogrammes rouge de marque, entrée active sur le fond
   rosé de la tuile « Revenus ». */
html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a i.hl-ico {
	color: #961b1b !important;
	opacity: 0.85;
}

html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a {
	border-radius: 12px !important;
	transition: background-color 0.2s ease, color 0.2s ease;
}

html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li a:hover {
	background-color: #eeebe5 !important;
	color: #373132 !important;
}

html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li.active > a {
	background-color: #f5e9e5 !important;
	box-shadow: none !important;
	color: #961b1b !important;
	font-weight: 600 !important;
}

html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul li.active > a i.hl-ico {
	opacity: 1;
}

/* Titres de groupe (« Principal », « Voyager »…) : un brun doux, pas un gris. */
html body.light-dashboard.page-template-template-dashboard .dashboard-nav ul[data-submenu-title]::before {
	color: #948670 !important;
}

/* =========================================================================
 * UNE SEULE FORME DE BOUTON · 3.22.0
 *
 * Le site mélangeait gélules et rectangles arrondis. La gélule l'emporte :
 * c'est déjà la forme de « Devenir hôte », des pastilles de filtre, des
 * boutons de la fiche et du bouton de réservation. Les cartes et les
 * fenêtres gardent leurs angles arrondis : seuls les boutons changent.
 * ========================================================================= */

/* Barre de recherche : la même sur l'accueil et sur les pages d'univers.
   Même gélule, même hauteur, même bouton, même ombre. */
html body .hl-search .hl-bar,
html body .hl-search.hl-home .hl-bar {
	min-height: 72px;
	padding: 0 8px 0 0;
	border: 1px solid var( --hl-beige );
	border-radius: 999px;
	background: #fbfaf8;
	box-shadow:
		0 2px 6px rgba( 21, 14, 16, 0.06 ),
		0 12px 32px rgba( 21, 14, 16, 0.12 ) !important;
}

html body .hl-search .hl-bar-cell,
html body .hl-search.hl-home .hl-bar-cell {
	min-height: 70px;
	border-radius: 999px;
}

html body .hl-search .hl-bar-submit,
html body .hl-search.hl-home .hl-bar-submit {
	height: 56px;
	min-width: 56px;
	padding: 0 24px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	html body.home .hl-search.hl-home .hl-bar .hl-bar-submit {
		width: 56px;
		min-width: 56px;
	}
}

/* Téléphone : les cases s'empilent dans une carte, le bouton reste une
   gélule pleine largeur. */
@media ( max-width: 767px ) {
	html body .hl-search .hl-bar,
	html body .hl-search.hl-home .hl-bar {
		min-height: 0;
		padding: 6px;
		border-radius: 28px;
	}

	html body .hl-search .hl-bar-cell,
	html body .hl-search.hl-home .hl-bar-cell {
		min-height: 56px;
		border-radius: 22px;
	}

	html body .hl-search .hl-bar-submit,
	html body .hl-search.hl-home .hl-bar-submit {
		width: 100%;
		margin: 6px 0 0;
		border-radius: 999px;
	}
}

/* Boutons de Listeo dans « Mon compte » et sur la page de réservation. */
html body.hl-compte .button,
html body.hl-compte button.button,
html body.hl-compte input[type="submit"],
html body.hl-compte input[type="button"] {
	border-radius: 999px !important;
}

/* =========================================================================
 * FILTRES : LES ICÔNES DU NIVEAU DE PEUR · 3.22.0
 *
 * Statut et intensité de la réputation reprennent les têtes de la barre :
 * point d'interrogation, cercle barré, une à trois têtes.
 * ========================================================================= */

html body .hl-modal .hl-fear-marks {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 3px;
}

html body .hl-modal .hl-fear-mark {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	object-fit: contain;
}

html body .hl-modal .hl-fear-marks.is-any .hl-fear-mark {
	opacity: 0.7;
}

html body .hl-modal .hl-fear-marks.is-calm .hl-fear-mark {
	opacity: 0.55;
}

html body .hl-modal .hl-cards .hl-card .hl-fear-marks {
	margin: 0 0 6px;
}

html body .hl-modal .hl-pill:has( .hl-fear-marks ) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

html body .hl-modal .hl-pill .hl-fear-marks {
	gap: 2px;
}

html body .hl-modal .hl-pill .hl-fear-mark {
	width: 17px;
	height: 17px;
}

/* Encart « Intensité de la réputation » : crème clair, plus de gris. */
html body .hl-modal .hl-subsection {
	border: 1px solid var( --hl-beige );
	background: #fbfaf8;
}

html body .hl-modal .hl-subsection .hl-pill:not( .is-active ) {
	background: var( --hl-ivory-light );
}

/* =========================================================================
 * CONTACT (Elementor, page 154) · 3.26.2
 * La règle globale des paragraphes impose Inter : les textes d'accroche
 * gardent ici le Cormorant de l'accueil, et les champs leur taille.
 * ========================================================================= */
html body.page-id-154 .elementor p[data-id="2c5195b6"],
html body.page-id-154 .elementor p[data-id="5285c92e"],
html body.page-id-154 .elementor p[data-id="6618060b"] {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 500 !important;
}

html body.page-id-154 .elementor p[data-id="2c5195b6"] {
	font-size: 22px !important;
	line-height: 1.45 !important;
}

html body.page-id-154 .elementor p[data-id="5285c92e"],
html body.page-id-154 .elementor p[data-id="6618060b"] {
	font-size: 20px !important;
	line-height: 1.4 !important;
}

html body.page-id-154 .elementor label {
	font-size: 13px !important;
	font-weight: 600 !important;
}

html body.page-id-154 .elementor input,
html body.page-id-154 .elementor select,
html body.page-id-154 .elementor textarea,
html body.page-id-154 .elementor button[type="submit"] {
	font-size: 15px !important;
}

@media ( max-width: 767px ) {
	html body.page-id-154 .elementor p[data-id="2c5195b6"] {
		font-size: 19px !important;
	}
}

/* =========================================================================
 * EN-TÊTE : BOUTON « AJOUTER UN LIEU » / « DEVENIR HÔTE » · 3.27.0
 * Au repos, un simple contour rouge, sans fond, sur tous les en-têtes
 * (clair, accueil, collant). Le survol ne change pas.
 * ========================================================================= */
html body header#header-container.hl-header #header .header-widget a.button:not( :hover ):not( :focus-visible ) {
	border-color: #961b1b !important;
	background: transparent !important;
}

/* =========================================================================
 * ACCUEIL : « EXPLOREZ SELON VOTRE ENVIE » SUR FOND CLAIR · 3.27.0
 * ========================================================================= */
html body.home .hl-envies .hl-envies__surtitre {
	color: #6b6151 !important;
	font-size: 11px !important;
	letter-spacing: 0.16em;
}

html body.home .hl-envies h2.hl-envies__titre {
	color: #150e10 !important;
}

/* Les photos restent sombres : le titre reste ivoire, le filet passe en crème. */
html body.home .hl-envies .hl-envie {
	border-color: #ddd7cc !important;
}

html body.home .hl-envies .hl-envie:hover,
html body.home .hl-envies .hl-envie:focus-visible {
	border-color: #961b1b !important;
}

/* =========================================================================
 * ACCUEIL : « CHOISISSEZ VOTRE NIVEAU DE FRISSON » · 3.27.0
 *
 * Bande nuit. À gauche le surtitre, le titre et le texte, dans le style des
 * sections sombres ; à droite quatre cartes en ligne, habillées comme celles
 * de « À chacun sa façon de frissonner » : filet crème, fond noir, grain,
 * flèche ronde, même survol.
 * ========================================================================= */
html body .hl-bande-frisson {
	padding: var( --hl-section-y, 120px ) 20px !important;
	background-color: #150e10 !important;
}

.hl-frisson {
	display: grid;
	grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.3fr );
	grid-template-rows: auto 1fr;
	gap: 0 80px;
	max-width: 1300px;
	margin: 0 auto;
	text-align: left;
}

.hl-frisson__intro {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
}

.hl-frisson__liste {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.hl-frisson__liste li {
	margin: 0;
	padding: 0;
}

html body .hl-frisson p.hl-frisson__surtitre {
	margin: 0 0 18px !important;
	color: #948670 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.24em;
	line-height: 1.2 !important;
	text-transform: uppercase;
}

html body .hl-frisson h2.hl-frisson__titre {
	margin: 0 !important;
	color: #f7f6f3 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 56px !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -1.96px;
}

html body .hl-frisson h2.hl-frisson__titre em {
	color: #bcb2a1;
	font-style: italic;
}

html body .hl-frisson p.hl-frisson__chapo {
	max-width: 30ch;
	margin: 24px 0 0 !important;
	color: rgba( 247, 246, 243, 0.84 ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 21px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
}

/* Carte : même habillage que « À chacun sa façon de frissonner ». */
.hl-frisson__carte {
	position: relative;
	display: flex;
	align-items: center;
	gap: 32px;
	min-height: 148px;
	overflow: hidden;
	isolation: isolate;
	padding: 26px 32px;
	border: 1.5px solid #ddd7cc;
	border-radius: 18px;
	background-color: #150e10;
	color: #f7f6f3 !important;
	text-decoration: none !important;
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 ), border-color 0.3s ease;
}

.hl-frisson__carte::before,
.hl-frisson__carte::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.94 0 0 0 0 0.89 0 0 0 0 0.79 0 0 0 2.6 -1.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E" );
	background-size: 200px 200px;
	pointer-events: none;
}

.hl-frisson__carte::before {
	opacity: 0.35;
	-webkit-mask-image: radial-gradient( ellipse 72% 66% at 50% 46%, transparent 40%, #000 100% );
	mask-image: radial-gradient( ellipse 72% 66% at 50% 46%, transparent 40%, #000 100% );
}

.hl-frisson__carte::after {
	opacity: 0.03;
}

.hl-frisson__carte > * {
	position: relative;
	z-index: 1;
}

/* Case des têtes, séparée du texte par un filet vertical. */
.hl-frisson__icones {
	display: flex;
	flex: 0 0 172px;
	align-items: center;
	justify-content: center;
	gap: 6px;
	align-self: stretch;
	padding-right: 32px;
	border-right: 1px solid rgba( 221, 215, 204, 0.22 );
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body .hl-frisson img.hl-frisson__tete {
	display: block;
	width: auto !important;
	height: 68px !important;
	max-width: none !important;
	margin: 0 !important;
	object-fit: contain;
}

html body .hl-frisson .is-niveau-2 img.hl-frisson__tete {
	height: 58px !important;
}

html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
	height: 48px !important;
}

html body .hl-frisson img.hl-frisson__tete.is-calme {
	height: 64px !important;
	opacity: 0.6;
}

.hl-frisson__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

html body .hl-frisson .hl-frisson__nom {
	color: #f7f6f3 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 34px !important;
	font-weight: 600 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.6px;
}

html body .hl-frisson .hl-frisson__texte {
	color: rgba( 247, 246, 243, 0.84 ) !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
}

/* Flèche ronde, comme les cartes d'univers. */
.hl-frisson__fleche {
	position: relative;
	flex: 0 0 54px;
	width: 54px;
	height: 54px;
	border: 1.5px solid rgba( 247, 246, 243, 0.85 );
	border-radius: 50%;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.hl-frisson__fleche::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 22px;
	height: 22px;
	margin: auto;
	background-color: #f7f6f3;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.2, 1 ), background-color 0.3s ease;
}

.hl-frisson__carte:hover {
	border-color: #f7f6f3;
	transform: translateY( -4px );
}

.hl-frisson__carte:hover .hl-frisson__icones {
	transform: rotate( -3deg ) scale( 1.03 );
}

.hl-frisson__carte:hover .hl-frisson__fleche {
	border-color: #f7f6f3;
	background-color: #f7f6f3;
}

.hl-frisson__carte:hover .hl-frisson__fleche::after {
	background-color: #150e10;
	transform: translateX( 3px );
}

.hl-frisson__carte:focus-visible {
	outline: 2px solid #961b1b;
	outline-offset: 4px;
}

/* Note en bas de la colonne de gauche. */
html body .hl-frisson p.hl-frisson__note {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 40px 0 0 !important;
	color: #948670 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 17px !important;
	line-height: 1.4 !important;
}

.hl-frisson__info {
	position: relative;
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	padding-right: 0;
	border: 1.2px solid rgba( 221, 215, 204, 0.55 );
	border-radius: 50%;
}

.hl-frisson__info::before {
	content: "i";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bcb2a1;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1;
}

.hl-frisson__info::after {
	content: "";
	position: absolute;
	top: -4px;
	bottom: -4px;
	left: calc( 100% + 9px );
	width: 1px;
	background: rgba( 221, 215, 204, 0.3 );
}

@media ( max-width: 1199px ) {
	.hl-frisson {
		gap: 0 48px;
	}

	.hl-frisson__icones {
		flex-basis: 140px;
		padding-right: 24px;
	}
}

@media ( max-width: 1024px ) {
	.hl-frisson {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: auto;
	}

	.hl-frisson__intro,
	.hl-frisson__liste,
	html body .hl-frisson p.hl-frisson__note {
		grid-column: 1;
		grid-row: auto;
	}

	.hl-frisson__liste {
		margin-top: 40px !important;
	}

	html body .hl-frisson h2.hl-frisson__titre {
		font-size: 46px !important;
	}
}

@media ( max-width: 767px ) {
	html body .hl-bande-frisson {
		padding: 72px 16px !important;
	}

	html body .hl-frisson h2.hl-frisson__titre {
		font-size: 36px !important;
		letter-spacing: -1px;
	}

	.hl-frisson__carte {
		gap: 18px;
		min-height: 0;
		padding: 22px 20px;
	}

	.hl-frisson__icones {
		flex-basis: 84px;
		padding-right: 16px;
	}

	html body .hl-frisson img.hl-frisson__tete {
		height: 40px !important;
	}

	html body .hl-frisson .is-niveau-2 img.hl-frisson__tete {
		height: 34px !important;
	}

	html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
		height: 24px !important;
	}

	html body .hl-frisson img.hl-frisson__tete.is-calme {
		height: 40px !important;
	}

	html body .hl-frisson .hl-frisson__nom {
		font-size: 25px !important;
	}

	html body .hl-frisson .hl-frisson__texte {
		font-size: 17px !important;
	}

	.hl-frisson__fleche {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-frisson__carte,
	.hl-frisson__icones,
	.hl-frisson__fleche::after {
		transition: none;
	}

	.hl-frisson__carte:hover,
	.hl-frisson__carte:hover .hl-frisson__icones {
		transform: none;
	}
}

/* Frisson : retouches 3.27.1. */
html body .hl-frisson p.hl-frisson__note span {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 17px !important;
	color: #948670 !important;
}

.hl-frisson__icones {
	box-sizing: border-box;
	flex: 0 0 196px;
	width: 196px;
}

html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
	height: 44px !important;
}

html body .hl-frisson p.hl-frisson__chapo {
	max-width: 36ch;
}

@media ( max-width: 1199px ) {
	.hl-frisson__icones {
		flex-basis: 160px;
		width: 160px;
	}

	html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
		height: 36px !important;
	}
}

@media ( max-width: 767px ) {
	.hl-frisson__icones {
		flex-basis: 92px;
		width: 92px;
	}

	html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
		height: 22px !important;
	}

	html body .hl-frisson h2.hl-frisson__titre br {
		display: none;
	}
}

/* Le cercle barré est dessiné en gris foncé : sur le noir, on l'éclaircit. */
html body .hl-frisson img.hl-frisson__tete.is-calme {
	opacity: 0.75;
	filter: invert( 1 ) sepia( 0.25 ) brightness( 0.8 );
}

/* =========================================================================
 * ACCUEIL : HARMONISATION TYPOGRAPHIQUE · 3.28.0
 *
 * Référence : la FAQ. Surtitre Inter 600, 11 px, capitales espacées de
 * 0,16 em ; titre Cormorant 400, 56 px ; paragraphe Inter 16 px. Sur fond
 * crème : surtitre #6b6151, titre encre, paragraphe #6b6151. Sur fond nuit :
 * surtitre #bcb2a1, titre ivoire, paragraphe ivoire à 72 %. Les paragraphes
 * sont tous en sans serif ; le Cormorant reste aux titres.
 * ========================================================================= */

/* Fond nuit sous la page : le rebond de macOS sous le pied de page ne
   montre plus une bande crème. Le corps garde son crème. */
html {
	background-color: #f7f6f3;
	overscroll-behavior-y: none;
}

html:has( footer.elementor-location-footer ) {
	background-color: #150e10;
}

/* Textes des cartes « Locations, Expériences, Événements » sur téléphone. */
@media ( max-width: 767px ) {
	html body.home .elementor-element-54e18f58 p {
		font-size: 15px !important;
	}
}

/* « Explorez selon votre envie » : surtitre et titre de fond crème. */
html body.home:not( #hl ) .hl-envies p.hl-envies__surtitre {
	margin: 0 0 24px !important;
	color: #6b6151 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	line-height: 1.2 !important;
}

html body.home:not( #hl ) .hl-envies h2.hl-envies__titre {
	font-weight: 400 !important;
}

html body.home .hl-envies h2.hl-envies__titre em {
	color: #bcb2a1;
	font-style: italic;
}

/* Cartes photo : aucun contour, ni au repos ni au survol. */
html body.home .hl-envies .hl-envie,
html body.home .hl-envies .hl-envie:hover,
html body.home .hl-envies .hl-envie:focus-visible {
	border: 0 !important;
}

/* Bandeau « Vous avez un lieu avec une histoire ? » : fond sombre. */
html body.home:not( #hl ) .elementor-element-3f4d6413 .hl-eyebrow {
	color: #bcb2a1 !important;
}

html body.home .elementor-element-3f4d6413 h2.elementor-heading-title {
	font-weight: 400 !important;
}

html body.home .elementor-element-3f4d6413 p.elementor-heading-title {
	color: rgba( 247, 246, 243, 0.72 ) !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
}

/* -------------------------------------------- Cartes sans grain (3.28.0) */

/* « À chacun sa façon de frissonner » : plus de grain, filet discret. */
html body.home .elementor-element-54e18f58 > .elementor-element::before {
	display: none !important;
}

html body.home .elementor-element-54e18f58 > .elementor-element {
	border-color: rgba( 221, 215, 204, 0.35 ) !important;
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover {
	border-color: #ddd7cc !important;
}

/* ------------------------------------- Niveau de frisson, plus aéré */

.hl-frisson__carte::before,
.hl-frisson__carte::after {
	display: none !important;
}

.hl-frisson {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 580px );
	gap: 0 96px;
}

.hl-frisson__liste {
	gap: 14px;
}

.hl-frisson__carte {
	gap: 24px;
	min-height: 112px;
	padding: 20px 24px 20px 20px;
	border-color: rgba( 221, 215, 204, 0.35 );
	border-radius: 16px;
}

.hl-frisson__carte:hover {
	border-color: #ddd7cc;
	transform: translateY( -3px );
}

.hl-frisson__icones {
	flex: 0 0 132px;
	width: 132px;
	padding-right: 20px;
	border-right-color: rgba( 221, 215, 204, 0.18 );
}

html body .hl-frisson img.hl-frisson__tete {
	height: 50px !important;
}

html body .hl-frisson .is-niveau-2 img.hl-frisson__tete {
	height: 42px !important;
}

html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
	height: 32px !important;
}

html body .hl-frisson img.hl-frisson__tete.is-calme {
	height: 46px !important;
}

html body .hl-frisson .hl-frisson__nom {
	font-size: 24px !important;
	font-weight: 600 !important;
	letter-spacing: -0.2px;
}

html body .hl-frisson .hl-frisson__texte {
	color: rgba( 247, 246, 243, 0.68 ) !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.hl-frisson__fleche {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-color: rgba( 247, 246, 243, 0.55 );
}

.hl-frisson__fleche::after {
	width: 18px;
	height: 18px;
}

/* Textes de la section : mêmes réglages que les autres sections nuit. */
html body.home:not( #hl ) .hl-frisson p.hl-frisson__surtitre {
	margin: 0 0 24px !important;
	color: #bcb2a1 !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
}

html body .hl-frisson p.hl-frisson__chapo {
	max-width: 420px;
	margin: 28px 0 0 !important;
	color: rgba( 247, 246, 243, 0.72 ) !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.65 !important;
}

html body .hl-frisson p.hl-frisson__note,
html body .hl-frisson p.hl-frisson__note span {
	color: #948670 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
}

.hl-frisson__info {
	flex-basis: 24px;
	width: 24px;
	height: 24px;
}

.hl-frisson__info::before {
	font-size: 15px;
}

@media ( max-width: 1199px ) {
	.hl-frisson {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 520px );
		gap: 0 56px;
	}

	.hl-frisson__icones {
		flex-basis: 112px;
		width: 112px;
	}

	html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
		height: 28px !important;
	}
}

@media ( max-width: 1024px ) {
	.hl-frisson {
		grid-template-columns: minmax( 0, 1fr );
	}

	.hl-frisson__liste {
		max-width: 620px;
	}
}

@media ( max-width: 767px ) {
	.hl-frisson__carte {
		gap: 16px;
		padding: 18px 18px 18px 14px;
	}

	.hl-frisson__icones {
		flex-basis: 84px;
		width: 84px;
		padding-right: 14px;
	}

	html body .hl-frisson img.hl-frisson__tete {
		height: 36px !important;
	}

	html body .hl-frisson .is-niveau-2 img.hl-frisson__tete {
		height: 30px !important;
	}

	html body .hl-frisson .is-niveau-3 img.hl-frisson__tete {
		height: 21px !important;
	}

	html body .hl-frisson img.hl-frisson__tete.is-calme {
		height: 34px !important;
	}

	html body .hl-frisson .hl-frisson__nom {
		font-size: 21px !important;
	}

	html body .hl-frisson .hl-frisson__texte {
		font-size: 13px !important;
	}
}

/* =========================================================================
 * 3.29.0 · ESPACEMENT, ITALIQUES ROUGES, CARTES D'ANNONCE, SURVOL DES UNIVERS
 * ========================================================================= */

/* « Dernières adresses » et « Explorez selon votre envie » sont deux bandes
   crème qui se suivent : la seconde ne rajoute pas sa marge haute. */
html body.home .hl-bande-envies {
	padding-top: 8px !important;
}

/* Sur fond crème, l'italique des titres est rouge, comme « hanté ? ».
   Les fonds nuit gardent le champagne. */
html body .elementor-element-3030d7c5 .headline em,
html body .hl-dest .hl-section-head em,
html body.home .hl-envies h2.hl-envies__titre em,
html body .hl-faq .hl-faq__title em,
html body.page-id-154 .elementor h1 em,
html body .hl-creme h1 em,
html body .hl-creme h2 em {
	color: #961b1b !important;
}

/* Cartes d'annonce : le nom, en Garamond, se lit nettement au-dessus de la
   ligne de détail en Inter. Le Garamond a un petit œil : à 22 px il pèse à
   peu près une fois et demie le texte de 14 px, rapport d'une échelle 1,5. */
html body .listing-card-nl .listing-title-nl,
html body .listing-item-container .listing-item-content h3,
html body .listing-item .listing-item-content h3 {
	margin: 0 0 4px !important;
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

html body .listing-card-nl .hl-card-type,
html body .listing-item-container .hl-card-type,
html body .listing-card-nl .listing-location-nl {
	color: #6b6151 !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
}

/* Cartes « Locations, Expériences, Événements » : plus de flèche ni de
   « Découvrir » au repos, carte plus basse ; la flèche arrive au survol. */
html body.home .elementor-element-54e18f58 > .elementor-element > .elementor-element > .elementor-element:last-child {
	display: none !important;
}

html body.home .elementor-element-54e18f58 > .elementor-element {
	min-height: 0 !important;
	padding-bottom: 44px !important;
}

html body.home .elementor-element-54e18f58 > .elementor-element::after {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 32px;
	right: 32px;
	left: auto;
	bottom: auto;
	inset: 32px 32px auto auto;
	z-index: 2;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #961b1b url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E" ) center / 22px no-repeat !important;
	background-size: 22px !important;
	opacity: 0 !important;
	transform: translate( -14px, 14px ) rotate( -45deg ) scale( 0.6 );
	transition: opacity 0.35s ease, transform 0.55s cubic-bezier( 0.2, 0.9, 0.25, 1.15 );
	pointer-events: none;
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover::after,
html body.home .elementor-element-54e18f58 > .elementor-element:focus-visible::after {
	opacity: 1 !important;
	transform: none;
}

@media ( max-width: 1024px ) {
	/* Sans survol au doigt : la flèche reste visible, discrète. */
	html body.home .elementor-element-54e18f58 > .elementor-element::after {
		inset: auto 24px 24px auto;
		width: 44px;
		height: 44px;
		opacity: 1 !important;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body.home .elementor-element-54e18f58 > .elementor-element::after {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* Prix des cartes : encre chaude, plus de gris neutre. */
html body .listing-card-nl .hl-card-price,
html body .listing-item-container .hl-card-price {
	color: #373132 !important;
}

/* =========================================================================
 * CARTES D'UNIVERS : FLÈCHE D'ORIGINE, ANIMATION, TABLETTE ET TÉLÉPHONE · 3.30.0
 *
 * La flèche reprend son dessin d'origine : cercle au trait ivoire, flèche
 * ivoire. Au survol, le cercle apparaît pendant que la flèche glisse de la
 * gauche vers le centre, sur la même courbe que le soulèvement de la carte.
 * Sans survol (tablette, téléphone), elle reste visible.
 * ========================================================================= */
html body.home .elementor-element-54e18f58 > .elementor-element::after {
	inset: 32px 32px auto auto;
	width: 52px;
	height: 52px;
	border: 1.5px solid rgba( 247, 246, 243, 0.85 );
	border-radius: 50%;
	background: transparent url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3efe7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E" ) no-repeat !important;
	background-size: 22px 22px !important;
	background-position: calc( 50% - 30px ) 50% !important;
	opacity: 0 !important;
	transform: scale( 0.9 );
	transition:
		opacity 0.3s ease,
		transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ),
		background-position 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.05s,
		background-color 0.3s ease;
}

html body.home .elementor-element-54e18f58 > .elementor-element:hover::after,
html body.home .elementor-element-54e18f58 > .elementor-element:focus-visible::after {
	opacity: 1 !important;
	transform: none;
	background-position: 50% 50% !important;
}

/* Tablette : cartes en ligne sur toute la largeur. Le texte prend la place
   et la flèche, visible, ferme la ligne à droite. */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
	html body.home .elementor-element-54e18f58 > .elementor-element {
		padding: 32px 120px 32px 40px !important;
	}

	html body.home .elementor-element-54e18f58 p {
		max-width: none !important;
	}

	html body.home .elementor-element-54e18f58 > .elementor-element::after {
		inset: 50% 40px auto auto;
		width: 52px;
		height: 52px;
		opacity: 1 !important;
		transform: translateY( -50% );
		background-position: 50% 50% !important;
	}

	html body.home .elementor-element-54e18f58 > .elementor-element:hover::after {
		transform: translateY( -50% );
	}
}

/* Téléphone : carte en colonne, flèche visible en haut à droite, à la
   hauteur de l'icône. */
@media ( max-width: 767px ) {
	html body.home .elementor-element-54e18f58 > .elementor-element {
		padding: 32px 28px 32px !important;
	}

	html body.home .elementor-element-54e18f58 > .elementor-element::after {
		inset: 32px 28px auto auto;
		width: 44px;
		height: 44px;
		background-size: 18px 18px !important;
		opacity: 1 !important;
		transform: none;
		background-position: 50% 50% !important;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body.home .elementor-element-54e18f58 > .elementor-element::after {
		transform: none;
		background-position: 50% 50% !important;
		transition: opacity 0.2s ease;
	}
}

/* =========================================================================
 * 3.31.0 · ENVIES SUR TÉLÉPHONE, PISTE « DERNIÈRES ADRESSES », FRISSON,
 * FILTRES
 * ========================================================================= */

/* Entre 480 et 767 px, le bloc Elementor des envies se faisait comprimer
   (colonne flex qui passe à la ligne) : les cartes débordaient sur la
   section nuit suivante. Hauteur libre, sans compression. */
html body.home .elementor-element-1dd57fc {
	height: auto !important;
	flex-wrap: nowrap !important;
}

html body.home .elementor-element-1dd57fc > .elementor-element {
	height: auto !important;
	flex-shrink: 0 !important;
}

/* « Dernières adresses » : piste native, comme « Inspiration voyage ». */
html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
	--hl-sel-visibles: 3;
	--hl-sel-ecart: 24px;
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - ( var( --hl-sel-visibles ) - 1 ) * var( --hl-sel-ecart ) ) / var( --hl-sel-visibles ) );
	column-gap: var( --hl-sel-ecart );
	margin: 0 !important;
	padding: 4px 0 8px !important;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection::-webkit-scrollbar {
	display: none;
}

html body.home .elementor-element-3030d7c5 .hl-piste-selection > .fw-carousel-item {
	float: none !important;
	width: auto !important;
	min-width: 0;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	scroll-snap-align: start;
}

@media ( max-width: 1024px ) {
	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		--hl-sel-visibles: 2;
		--hl-sel-ecart: 18px;
	}
}

@media ( max-width: 767px ) {
	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		--hl-sel-visibles: 1.15;
		--hl-sel-ecart: 14px;
		margin-right: -16px !important;
		padding-right: 16px !important;
		scroll-padding-left: 0;
	}
}

/* Niveau de frisson : plus de filet vertical, et la flèche des cartes
   d'univers : cercle au trait qui apparaît, flèche qui glisse au centre. */
.hl-frisson__icones {
	padding-right: 0 !important;
	border-right: 0 !important;
}

.hl-frisson__fleche {
	overflow: hidden;
	opacity: 0;
	transform: scale( 0.9 );
	transition: opacity 0.3s ease, transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

.hl-frisson__fleche::after {
	transform: translateX( -30px );
	transition: transform 0.5s cubic-bezier( 0.2, 0.7, 0.2, 1 ) 0.05s;
}

.hl-frisson__carte:hover .hl-frisson__fleche,
.hl-frisson__carte:focus-visible .hl-frisson__fleche {
	opacity: 1;
	transform: none;
	border-color: rgba( 247, 246, 243, 0.85 );
	background-color: transparent;
}

.hl-frisson__carte:hover .hl-frisson__fleche::after,
.hl-frisson__carte:focus-visible .hl-frisson__fleche::after {
	background-color: #f7f6f3;
	transform: none;
}

/* Sans survol au doigt : la flèche reste visible. */
@media ( max-width: 1024px ) {
	.hl-frisson__fleche {
		display: block !important;
		opacity: 1;
		transform: none;
	}

	.hl-frisson__fleche::after {
		transform: none;
	}
}

@media ( max-width: 767px ) {
	.hl-frisson__fleche {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
	}

	.hl-frisson__fleche::after {
		width: 16px;
		height: 16px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hl-frisson__fleche,
	.hl-frisson__fleche::after {
		transform: none;
		transition: opacity 0.2s ease;
	}
}

/* Filtres, « Réputation paranormale » : pictogrammes sur une même ligne,
   textes alignés en haut. */
html body .hl-modal .hl-cards .hl-card {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start !important;
}

html body .hl-modal .hl-cards .hl-card .hl-fear-marks {
	height: 36px;
	margin: 0 0 12px !important;
	align-items: center;
}

html body .hl-modal .hl-cards .hl-card .hl-fear-mark {
	width: 30px;
	height: 30px;
}

/* Listeo masque les cartes d'un carrousel non initialisé et garde son bloc
   de commandes : la piste les montre toutes, sans ce bloc. */
html body.home .elementor-element-3030d7c5 .hl-piste-selection > .fw-carousel-item {
	display: block !important;
}

html body.home .elementor-element-3030d7c5 .hl-piste-selection > .slider-controls-container {
	display: none !important;
}

/* Une règle héritée posait une première colonne de 0 px : la première
   adresse disparaissait. Toutes les colonnes viennent de la piste. */
html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
	grid-template-columns: none !important;
	grid-template-rows: none !important;
}

/* Sur mobile, « Dernières adresses » prend la marge de 16 px des autres
   sections ; la piste déborde à droite d'autant, sans dépasser l'écran. */
@media ( max-width: 767px ) {
	html body.home .elementor-element-3030d7c5 .elementor-widget-wrap.elementor-element-populated {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		width: calc( 100% + 16px ) !important;
		max-width: none !important;
	}
}

/* Le conteneur de la page coupe ce qui dépasse sans pouvoir défiler : un
   focus ou une ancre ne décale plus toute la page de côté. Les deux axes,
   sinon « clip » redevient « hidden ». */
html body.home .elementor-156 {
	overflow: clip !important;
}

/* Bulle de la carte : titre un cran sous celui des listes (la carte est
   étroite), pointe du même beige que la bulle. */
html body .leaflet-popup .hl-popup-card .listing-item-content h3,
html body .leaflet-popup .hl-popup-card .listing-title-nl {
	font-size: 19px !important;
	line-height: 1.2 !important;
}

html body .leaflet-popup .leaflet-popup-tip {
	border-top-color: #f7f6f3 !important;
}

/* Les têtes de frisson sont posées en haut à droite de la carte : le titre
   leur laisse la place à toutes les largeurs, pas seulement au téléphone. */
html body .listing-item-container.compact .listing-item-content h3 {
	margin-right: 76px !important;
}

/* =========================================================================
 * ACCUEIL · « VOUS AVEZ UN LIEU AVEC UNE HISTOIRE ? » (3.53)
 * Panneau encre arrondi posé sur le crème (plus de photo plein écran),
 * texte à gauche, fausse carte d'annonce inclinée à droite.
 * ========================================================================= */
html body .hl-host-call {
	padding: 72px 24px !important;
	background-image: none !important;
	background-color: #f7f6f3 !important;
}

html body .hl-host-call > .elementor-background-overlay,
html body .hl-host-call > .elementor-motion-effects-container {
	display: none !important;
}

html body .hl-host-call .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
}

html body .hl-host-call__panel {
	max-width: 1300px;
	margin: 0 auto;
	padding: 72px 64px !important;
	overflow: hidden;
	border-radius: 32px;
	background: radial-gradient( 120% 140% at 100% 0%, #2a1717 0%, #150e10 55% ) !important;
}

html body .hl-host-call__panel > .elementor-container {
	align-items: center;
}

/* Pastilles. */
html body .hl-host-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 28px;
	padding: 0;
	list-style: none;
}

html body .hl-host-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba( 247, 246, 243, 0.18 );
	border-radius: 999px;
	color: rgba( 247, 246, 243, 0.86 );
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	line-height: 1;
}

html body .hl-host-chip i {
	color: #d9a99f;
	font-size: 13px;
}

/* Bouton et lien côte à côte. */
html body .hl-host-call__actions .elementor-widget-container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
}

html body .hl-host-call__more {
	color: #f7f6f3 !important;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

html body .hl-host-call__more:hover {
	color: #e6c9c0 !important;
}

/* Pile de cartes. */
html body .hl-host-mock {
	position: relative;
	width: min( 100%, 360px );
	height: 420px;
	margin: 0 auto;
}

html body .hl-host-mock__back,
html body .hl-host-mock__card {
	position: absolute;
	inset: 0;
	border-radius: 22px;
}

html body .hl-host-mock__back {
	background-color: #150e10;
	background-position: center;
	background-size: cover;
	opacity: 0.55;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.35 );
}

html body .hl-host-mock__back.is-first {
	transform: translate( 34px, -14px ) rotate( 7deg );
}

html body .hl-host-mock__back.is-second {
	transform: translate( -30px, 10px ) rotate( -9deg );
	opacity: 0.4;
}

html body .hl-host-mock__card {
	display: flex;
	flex-direction: column;
	padding: 12px;
	background: #f7f6f3;
	box-shadow: 0 30px 70px rgba( 0, 0, 0, 0.45 );
	transform: rotate( -3deg );
	transition: transform 0.45s cubic-bezier( 0.2, 0.7, 0.2, 1 );
}

html body .hl-host-mock:hover .hl-host-mock__card {
	transform: rotate( 0deg ) translateY( -6px );
}

html body .hl-host-mock__photo {
	position: relative;
	flex: 1 1 auto;
	border-radius: 14px;
	background-color: #150e10;
	background-position: center;
	background-size: cover;
}

html body .hl-host-mock__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #f7f6f3;
	color: #150e10;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
}

html body .hl-host-mock__body {
	padding: 14px 6px 6px;
}

html body .hl-host-mock__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px !important;
	color: #6b6151;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
}

html body .hl-host-mock__fear {
	display: inline-flex;
	gap: 1px;
}

html body .hl-host-mock__fear img {
	width: 16px;
	height: 16px;
}

html body .hl-host-mock__fear img.is-off {
	opacity: 0.25;
}

html body .hl-host-mock__title {
	margin: 0 0 6px !important;
	color: #150e10;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.15;
}

html body .hl-host-mock__price {
	margin: 0 !important;
	color: #150e10;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-host-mock__card {
		transition: none;
	}
}

@media ( max-width: 1024px ) {
	html body .hl-host-call__panel {
		padding: 48px 32px !important;
	}

	html body .hl-host-mock {
		margin-top: 40px;
	}
}

@media ( max-width: 767px ) {
	html body .hl-host-call {
		padding: 48px 16px !important;
	}

	html body .hl-host-call__panel {
		padding: 40px 22px !important;
		border-radius: 24px;
	}

	html body .hl-host-mock {
		height: 360px;
		width: min( 100%, 300px );
	}

	html body .hl-host-mock__card {
		transform: none;
	}

	html body .hl-host-mock__back.is-first {
		transform: translate( 16px, -10px ) rotate( 5deg );
	}

	html body .hl-host-mock__back.is-second {
		transform: translate( -16px, 8px ) rotate( -6deg );
	}
}

html body .hl-host-mock .hl-host-mock__title {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
}

html body .hl-host-mock__back {
	opacity: 0.8;
}

html body .hl-host-mock__back.is-second {
	opacity: 0.65;
}

/* =========================================================================
 * ACCUEIL · SECTION HÔTE (3.54)
 * Atouts en trois colonnes, grain et lueur de bougie, titre sur deux lignes
 * en grand écran, bouton blanc sur bordeaux au survol, carte réduite en mobile.
 * ========================================================================= */

/* Grain léger sur le panneau, le contenu passe au-dessus. */
html body .hl-host-call__panel {
	position: relative;
	isolation: isolate;
}

html body .hl-host-call__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

html body .hl-host-call__panel > .elementor-container {
	position: relative;
	z-index: 1;
}

/* Lueur de bougie derrière la pile de cartes. */
html body .hl-host-mock {
	isolation: isolate;
}

html body .hl-host-mock::before {
	content: "";
	position: absolute;
	inset: -90px -110px;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient( closest-side, rgba( 206, 74, 40, 0.6 ), rgba( 150, 27, 27, 0.26 ) 55%, transparent 100% );
	filter: blur( 18px );
	animation: hl-bougie 5.5s ease-in-out infinite;
}

@keyframes hl-bougie {
	0%, 100% { opacity: 0.85; transform: scale( 1 ); }
	30% { opacity: 1; transform: scale( 1.03 ); }
	55% { opacity: 0.78; transform: scale( 0.99 ); }
	75% { opacity: 0.95; transform: scale( 1.02 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-host-mock::before {
		animation: none;
	}
}

/* Atouts : trois colonnes, pastille d'icône, intitulé et précision. */
html body .hl-host-chips {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0;
	margin: 8px 0 36px;
	padding: 20px 0 0;
	border-top: 1px solid rgba( 247, 246, 243, 0.12 );
}

html body .hl-host-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 0 20px;
	border: 0;
	border-left: 1px solid rgba( 247, 246, 243, 0.12 );
	border-radius: 0;
	line-height: 1.4;
}

html body .hl-host-chip:first-child {
	padding-left: 0;
	border-left: 0;
}

html body .hl-host-chip__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba( 150, 27, 27, 0.32 );
	box-shadow: inset 0 0 0 1px rgba( 217, 169, 159, 0.22 );
}

html body .hl-host-chip__icon i {
	color: #e8b9ae;
	font-size: 14px;
}

html body .hl-host-chip__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

html body .hl-host-chip__text strong {
	color: #f7f6f3;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
}

html body .hl-host-chip__text span {
	color: rgba( 247, 246, 243, 0.62 );
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
}

/* Titre sur deux lignes en grand écran : « une histoire ? » passe dessous. */
@media ( min-width: 1200px ) {
	html body .hl-host-call .hl-accent {
		display: block;
	}
}

/* Bouton : blanc sur bordeaux foncé au survol, jamais rouge sur rouge. */
html body .hl-host-call .elementor-button:hover,
html body .hl-host-call .elementor-button:focus-visible {
	background-color: #7d1616 !important;
	color: #fff !important;
}

html body .hl-host-call .elementor-button:hover .elementor-button-text,
html body .hl-host-call .elementor-button:focus-visible .elementor-button-text {
	color: #fff !important;
}

html body .hl-host-call .elementor-button:focus-visible {
	outline: 2px solid #f7f6f3;
	outline-offset: 3px;
}

/* Mobile : atouts en liste, carte plus petite qui tient sous le bouton. */
@media ( max-width: 767px ) {
	html body .hl-host-chips {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 28px;
	}

	html body .hl-host-chip {
		flex-direction: row;
		align-items: center;
		gap: 14px;
		padding: 0;
		border-left: 0;
	}

	html body .hl-host-mock {
		width: min( 100%, 250px );
		height: 300px;
		margin-top: 36px;
	}

	html body .hl-host-mock::before {
		inset: -50px -60px;
	}

	html body .hl-host-mock .hl-host-mock__title {
		font-size: 22px !important;
	}

	html body .hl-host-mock__body {
		padding: 10px 4px 2px;
	}

	html body .hl-host-mock__meta {
		gap: 6px;
		font-size: 12px;
		white-space: nowrap;
	}

	html body .hl-host-mock__fear img {
		width: 14px;
		height: 14px;
	}
}

/* =========================================================================
 * ACCUEIL · SECTION HÔTE, ESPACEMENTS (3.54.2)
 * Grille de 8. Dehors : le même pas que les autres sections au-dessus
 * (--hl-section-y), rien en dessous car la FAQ apporte déjà le sien.
 * Dedans : 80 px de marge intérieure partout, puis 16 / 24 / 40 / 40
 * entre sur-titre, titre, accroche, atouts et bouton.
 * ========================================================================= */
html body.home .hl-host-call.elementor-section {
	padding: var( --hl-section-y ) 24px 0 !important;
}

html body .hl-host-call .hl-host-call__panel.elementor-section {
	margin: 0 auto !important;
	padding: 80px !important;
}

html body .hl-host-call__panel > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0 !important;
	align-content: center;
}

html body .hl-host-call__panel .elementor-column:first-child > .elementor-widget-wrap {
	padding-right: 32px !important;
}

html body .hl-host-call__panel .elementor-widget:not( :last-child ) {
	margin-bottom: 0 !important;
}

html body .hl-host-call .hl-eyebrow {
	margin: 0 0 16px !important;
}

html body .hl-host-call__panel .elementor-element.elementor-widget.elementor-element-65a0fb48 {
	margin-bottom: 24px !important;
}

html body .hl-host-call__panel .elementor-element.elementor-widget.elementor-element-3b83b321 {
	margin-bottom: 40px !important;
}

html body .hl-host-call__panel .elementor-element-3b83b321 > .elementor-widget-container {
	margin: 0 !important;
}

html body .hl-host-call__panel .elementor-element-3b83b321 .elementor-heading-title {
	max-width: 52ch;
}

/* Atouts : plus de filet horizontal, seulement les séparateurs verticaux. */
html body .hl-host-call .hl-host-chips {
	grid-template-columns: repeat( 3, max-content );
	margin: 0 0 40px !important;
	padding: 0 !important;
	border-top: 0 !important;
}

html body .hl-host-call .hl-host-chip {
	gap: 16px;
	padding: 0 24px;
}

html body .hl-host-call .hl-host-chip:first-child {
	padding-left: 0;
}

html body .hl-host-call .hl-host-chip:last-child {
	padding-right: 0;
}

@media ( max-width: 1024px ) {
	html body .hl-host-call .hl-host-call__panel.elementor-section {
		padding: 56px 40px !important;
	}

	html body .hl-host-call__panel .elementor-column:first-child > .elementor-widget-wrap {
		padding-right: 0 !important;
	}

	html body .hl-host-call .hl-host-mock {
		margin-top: 48px;
	}
}

@media ( max-width: 767px ) {
	html body.home .hl-host-call.elementor-section {
		padding: 64px 16px 0 !important;
	}

	html body .hl-host-call .hl-host-call__panel.elementor-section {
		padding: 40px 24px !important;
	}

	html body .hl-host-call__panel .elementor-element.elementor-widget.elementor-element-3b83b321 {
		margin-bottom: 32px !important;
	}

	html body .hl-host-call .hl-host-chips {
		grid-template-columns: 1fr;
		margin-bottom: 32px !important;
	}

	html body .hl-host-call .hl-host-chip {
		padding: 0;
	}

	html body .hl-host-call .hl-host-mock {
		margin-top: 40px;
	}
}

/* =========================================================================
 * ACCUEIL · SECTION HÔTE, ATOUTS EN TUILES (3.55)
 * Trois tuiles au fond à peine plus clair que le panneau : icône seule,
 * intitulé, précision. Plus de séparateurs verticaux ni de pastille ronde.
 * ========================================================================= */
html body .hl-host-call .hl-host-chips {
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 12px;
}

html body .hl-host-call .hl-host-chip,
html body .hl-host-call .hl-host-chip:first-child,
html body .hl-host-call .hl-host-chip:last-child {
	gap: 16px;
	padding: 20px 18px;
	border: 1px solid rgba( 247, 246, 243, 0.06 );
	border-radius: 16px;
	background: rgba( 247, 246, 243, 0.045 );
}

html body .hl-host-call .hl-host-chip__icon {
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

html body .hl-host-call .hl-host-chip__icon i {
	color: #e09a8c;
	font-size: 18px;
}

html body .hl-host-call .hl-host-chip__text {
	gap: 4px;
}

html body .hl-host-call .hl-host-chip__text span {
	font-size: 13px;
	line-height: 1.4;
}

@media ( max-width: 767px ) {
	html body .hl-host-call .hl-host-chips {
		grid-template-columns: 1fr;
		gap: 8px;
		width: 100%;
	}

	html body .hl-host-call .hl-host-chip,
	html body .hl-host-call .hl-host-chip:first-child,
	html body .hl-host-call .hl-host-chip:last-child {
		flex-direction: row;
		align-items: center;
		padding: 16px;
	}

	html body .hl-host-call .hl-host-chip__icon {
		flex: 0 0 24px;
		justify-content: center;
	}
}

/* =========================================================================
 * ACCUEIL · SECTION HÔTE, ATOUTS EN LIGNE DE COCHES (3.56, option A)
 * Remplace les tuiles : trois mentions courtes sur une ligne, coche rose
 * bordeaux devant chacune. Repasse à la ligne proprement si la place manque.
 * ========================================================================= */
html body .hl-host-call .hl-host-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	width: auto;
}

@media ( min-width: 1025px ) {
	html body .hl-host-call__panel .elementor-column:first-child > .elementor-widget-wrap {
		padding-right: 0 !important;
	}
}

html body .hl-host-call .hl-host-chip,
html body .hl-host-call .hl-host-chip:first-child,
html body .hl-host-call .hl-host-chip:last-child {
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: #eeebe5;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 15px;
	line-height: 1.4;
	white-space: nowrap;
}

html body .hl-host-call .hl-host-chip i {
	color: #e09a8c;
	font-size: 16px;
}

@media ( max-width: 767px ) {
	html body .hl-host-call .hl-host-chips {
		flex-direction: column;
		gap: 12px;
	}

	html body .hl-host-call .hl-host-chip,
	html body .hl-host-call .hl-host-chip:first-child,
	html body .hl-host-call .hl-host-chip:last-child {
		padding: 0;
	}
}

/* =========================================================================
 * ACCUEIL · SECTION HÔTE, TÉLÉPHONE (3.56.2)
 * Bouton pleine largeur (cible confortable au pouce), lien centré dessous,
 * carte d'exemple plus basse et légèrement inclinée pour raccourcir le panneau.
 * ========================================================================= */
@media ( max-width: 767px ) {
	html body .hl-host-call .hl-host-call__panel.elementor-section {
		padding: 40px 24px 32px !important;
	}

	html body .hl-host-call__actions .elementor-widget-container {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	html body .hl-host-call__actions .elementor-button-wrapper,
	html body .hl-host-call__actions .elementor-button {
		width: 100%;
	}

	html body .hl-host-call__actions .elementor-button {
		display: flex;
		justify-content: center;
		min-height: 52px;
	}

	html body .hl-host-call__more {
		align-self: center;
	}

	html body .hl-host-call .hl-host-mock {
		width: min( 100%, 264px );
		height: 268px;
		margin-top: 40px;
	}

	html body .hl-host-call .hl-host-mock__card {
		transform: rotate( -2deg );
	}

	html body .hl-host-call .hl-host-mock__back {
		opacity: 0.6;
	}

	html body .hl-host-call .hl-host-mock__back.is-second {
		opacity: 0.45;
	}
}

/* =========================================================================
 * ACCUEIL · PLUS DE SURTITRES (3.58)
 * Les surtitres répétaient le titre juste en dessous. Ceux d'Elementor et des
 * shortcodes sont retirés à la source ; celui de la FAQ vit dans un bloc HTML
 * Elementor, il est masqué ici.
 * ========================================================================= */
html body.home:not( #hl ):not( #hl-faq ) .hl-faq__eyebrow {
	display: none !important;
}

/* =========================================================================
 * ACCUEIL · RECHERCHE TÉLÉPHONE EN UNE BARRE (3.58)
 * Une barre « Où partir ? » remplace les quatre champs empilés ; elle ouvre
 * la recherche complète en plein écran. Invisible au-delà de 767 px.
 * ========================================================================= */
html body .hl-home-trigger,
html body .hl-home-sheet__head {
	display: none;
}

@media ( max-width: 767px ) {
	html body .hl-search.hl-home .hl-home-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 64px;
		margin: 0;
		padding: 8px 8px 8px 22px;
		border: 0;
		border-radius: 999px;
		background: #fff;
		box-shadow: 0 10px 30px rgba( 21, 14, 16, 0.12 ), 0 0 0 1px rgba( 21, 14, 16, 0.06 );
		color: #150e10;
		text-align: left;
		cursor: pointer;
	}

	html body .hl-home-trigger__text {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	html body .hl-home-trigger__text strong {
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
	}

	html body .hl-home-trigger__text span {
		overflow: hidden;
		color: #6b6151;
		font-family: "Plus Jakarta Sans", sans-serif;
		font-size: 13px;
		line-height: 1.3;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	html body .hl-home-trigger__icon {
		display: inline-flex;
		flex: 0 0 48px;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #961b1b;
		color: #fff;
	}

	html body .hl-home-trigger__icon svg {
		width: 18px;
		height: 18px;
	}

	html body .hl-home-trigger:focus-visible {
		outline: 2px solid #961b1b;
		outline-offset: 3px;
	}

	/* Fermée : la barre complète est cachée. */
	html body .hl-search.hl-home:not( .is-sheet-open ) .hl-bar-slot {
		display: none !important;
	}

	/* Ouverte : plein écran crème, au-dessus de l'en-tête. */
	html body .hl-search.hl-home.is-sheet-open .hl-bar-slot {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: block;
		overflow-y: auto;
		padding: 16px 16px 40px;
		background: #f7f6f3;
		-webkit-overflow-scrolling: touch;
	}

	html body .hl-search.hl-home.is-sheet-open .hl-home-sheet__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 16px;
	}

	html body .hl-home-sheet__title {
		margin: 0 !important;
		color: #150e10;
		font-family: "Cormorant Garamond", Georgia, serif;
		font-size: 28px;
		font-weight: 500;
		line-height: 1.1;
	}

	html body .hl-home-sheet__close {
		position: relative;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 1px solid rgba( 21, 14, 16, 0.16 );
		border-radius: 50%;
		background: #fbfaf8;
		cursor: pointer;
	}

	html body .hl-home-sheet__close::before,
	html body .hl-home-sheet__close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 1.5px;
		background: #150e10;
		transform: translate( -50%, -50% ) rotate( 45deg );
	}

	html body .hl-home-sheet__close::after {
		transform: translate( -50%, -50% ) rotate( -45deg );
	}

	html.hl-sheet-lock,
	html.hl-sheet-lock body {
		overflow: hidden !important;
	}
}

/* Fenêtre de recherche téléphone : hors du hero, elle héritait du texte
   ivoire des barres sur fond sombre. On lui rend l'encre du hero. */
@media ( max-width: 767px ) {
	html body .hl-home-sheet,
	html body .hl-home-sheet .hl-bar-cell,
	html body .hl-home-sheet .hl-pop,
	html body .hl-home-sheet .hl-cal-pop {
		color: #150e10 !important;
	}

	html body .hl-home-sheet .hl-bar-cell input,
	html body .hl-home-sheet .hl-bar-cell input::placeholder {
		color: #6b6151 !important;
	}

	html body .hl-home-sheet .hl-home-sheet__title {
		color: #150e10 !important;
		font-family: "Cormorant Garamond", Georgia, serif !important;
		font-size: 28px !important;
		font-weight: 500 !important;
	}
}

/* =========================================================================
 * ACCUEIL · BRUME SUR LE HERO (3.60)
 * Trois nappes de brume qui dérivent lentement entre la cabane et les arbres
 * du premier plan. Rien ne bouge si le visiteur demande moins d'animation.
 * ========================================================================= */
html body .hl-brume {
	position: absolute;
	left: -10%;
	width: 60%;
	height: 13%;
	border-radius: 50%;
	background: radial-gradient( ellipse at center, rgba( 247, 246, 243, 0.9 ) 0%, rgba( 247, 246, 243, 0.5 ) 40%, rgba( 247, 246, 243, 0 ) 70% );
	filter: blur( 8px );
	pointer-events: none;
	animation: hl-brume 22s ease-in-out infinite alternate;
}

html body .hl-brume.is-1 { bottom: 9%; }
html body .hl-brume.is-2 { bottom: 3%; left: 35%; width: 70%; opacity: 0.85; animation-duration: 30s; animation-direction: alternate-reverse; }
html body .hl-brume.is-3 { bottom: 15%; left: 50%; width: 45%; height: 9%; opacity: 0.7; animation-duration: 26s; }

@keyframes hl-brume {
	from { transform: translateX( -12% ); }
	to { transform: translateX( 18% ); }
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-brume {
		animation: none;
	}
}

/* Accueil (3.61) : le filet rouge sous les titres revenait depuis le retrait
   des surtitres (il n'était masqué qu'en leur présence). Retiré partout. */
html body.home .headline::after,
html body.home h2:has( .hl-accent )::after,
html body.home h3:has( .hl-accent )::after {
	display: none !important;
}

/* =========================================================================
 * ACCUEIL · « CHOISISSEZ VOTRE NIVEAU DE FRISSON » EN FILTRE (3.66)
 * Fond crème, pastilles de niveau, vraies cartes d'annonces (gabarit Listeo,
 * même style que « Nouveaux lieux à découvrir »), trois par ligne.
 * ========================================================================= */
html body .hl-ff {
	width: min( 1320px, calc( 100% - 40px ) );
	margin: 0 auto;
	font-family: "Plus Jakarta Sans", sans-serif;
}

html body .hl-ff__tete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}

html body .hl-ff__titre {
	margin: 0 !important;
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: clamp( 44px, 4.4vw, 64px ) !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em;
}

html body .hl-ff__titre em {
	color: #961b1b;
	font-style: italic;
}

html body .hl-ff a.hl-ff__tout {
	color: #150e10 !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-color: #961b1b !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 6px;
	transition: text-underline-offset 0.25s ease;
}

html body .hl-ff a.hl-ff__tout:hover {
	text-underline-offset: 9px;
}

html body .hl-ff__puces {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 40px 0 32px;
}

html body .hl-ff__puce {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	margin: 0;
	padding: 0 14px 0 18px;
	border: 1px solid rgba( 21, 14, 16, 0.14 );
	border-radius: 999px;
	background: #fbfaf8;
	color: rgba( 21, 14, 16, 0.82 );
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

html body .hl-ff__puce:hover {
	border-color: rgba( 21, 14, 16, 0.4 );
}

html body .hl-ff__puce:active {
	transform: scale( 0.97 );
}

html body .hl-ff__puce.is-on {
	border-color: #150e10;
	background: #150e10;
	color: #f7f6f3;
}

html body .hl-ff__puce:focus-visible {
	outline: 2px solid #961b1b;
	outline-offset: 3px;
}

html body .hl-ff__icones {
	display: inline-flex;
	gap: 1px;
}

html body .hl-ff__icones img {
	width: 20px;
	height: 20px;
	object-fit: contain;
}

html body .hl-ff__icones img.is-calme {
	opacity: 0.6;
}

html body .hl-ff__puce.is-on .hl-ff__icones img.is-calme {
	filter: invert( 1 );
	opacity: 0.75;
}

html body .hl-ff__puce-total {
	min-width: 24px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba( 21, 14, 16, 0.06 );
	font-size: 12px;
	text-align: center;
}

html body .hl-ff__puce.is-on .hl-ff__puce-total {
	background: rgba( 247, 246, 243, 0.16 );
}

html body .hl-ff__cartes {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 32px 24px;
}

html body .hl-ff__carte {
	min-width: 0;
}

html body .hl-ff__carte.is-cache {
	display: none;
}

html body .hl-ff__carte.is-entre {
	animation: hl-ff-entre 0.55s cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}

@keyframes hl-ff-entre {
	from { opacity: 0; transform: translateY( 18px ); }
	to { opacity: 1; transform: none; }
}

html body .hl-ff__vide {
	margin: 0 !important;
	padding: 48px 0;
	color: #6b6151;
	font-size: 15px;
	text-align: center;
}

@media ( max-width: 1024px ) {
	html body .hl-ff__cartes {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	html body .hl-ff {
		width: calc( 100% - 32px );
	}

	html body .hl-ff__puces {
		flex-wrap: nowrap;
		margin: 28px -16px 24px;
		padding: 0 16px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	html body .hl-ff__puces::-webkit-scrollbar {
		display: none;
	}

	html body .hl-ff__puce {
		flex: 0 0 auto;
	}

	html body .hl-ff__cartes {
		display: flex;
		gap: 16px;
		margin: 0 -16px;
		padding: 0 16px 4px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	html body .hl-ff__cartes::-webkit-scrollbar {
		display: none;
	}

	html body .hl-ff__carte {
		flex: 0 0 84%;
		scroll-snap-align: start;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-ff__carte.is-entre {
		animation: none;
	}
}

/* Le conteneur Elementor de la section (54ca2889) est réglé en crème dans
   l'éditeur ; le fichier CSS atomique d'Elementor garde l'ancien fond encre
   en cache, on l'impose ici (3.66.1). */
html body.home .elementor-element.elementor-element-54ca2889 {
	background-color: #f7f6f3 !important;
}

/* Téléphone (3.66.2) : le conteneur Elementor a déjà 20 px de marge ; titre,
   pastilles et cartes partent du même bord, cartes un peu plus larges. */
@media ( max-width: 767px ) {
	html body .hl-ff {
		width: 100%;
	}

	html body .hl-ff__puces,
	html body .hl-ff__cartes {
		margin-right: -20px;
		margin-left: -20px;
		padding-right: 20px;
		padding-left: 20px;
		scroll-padding-left: 20px;
	}

	html body .hl-ff__carte {
		flex-basis: 88%;
	}
}

/* =========================================================================
 * NIVEAU DE FRISSON EN CARROUSEL (3.67)
 * Même piste que « Nouveaux lieux à découvrir » : trois cartes visibles,
 * défilement natif, flèches en haut à droite, vignette « Tout afficher »
 * à la fin, qui suit le niveau choisi.
 * ========================================================================= */
html body .hl-ff__tete {
	align-items: flex-end;
}

html body .hl-ff__nav {
	padding-bottom: 6px;
}

html body .hl-ff__cartes {
	--hl-ff-visibles: 3;
	--hl-ff-ecart: 24px;
	display: grid;
	grid-auto-columns: calc( ( 100% - ( var( --hl-ff-visibles ) - 1 ) * var( --hl-ff-ecart ) ) / var( --hl-ff-visibles ) );
	grid-auto-flow: column;
	grid-template-columns: none;
	gap: 0 var( --hl-ff-ecart );
	padding: 4px 0 8px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

html body .hl-ff__cartes::-webkit-scrollbar {
	display: none;
}

html body .hl-ff__carte,
html body .hl-ff__fin {
	min-width: 0;
	scroll-snap-align: start;
}

html body .hl-ff__fin[hidden] {
	display: none;
}

html body .hl-ff__voir {
	position: relative;
}

html body .hl-ff__voir-niveau {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: -8px;
	color: #6b6151;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 13px;
	font-weight: 500;
}

html body .hl-ff__voir-niveau .hl-ff__icones img {
	width: 18px;
	height: 18px;
}

@media ( max-width: 1024px ) {
	html body .hl-ff__cartes {
		--hl-ff-visibles: 2;
		--hl-ff-ecart: 18px;
	}
}

@media ( max-width: 767px ) {
	html body .hl-ff__nav {
		display: none;
	}

	html body .hl-ff__cartes {
		--hl-ff-visibles: 1.15;
		--hl-ff-ecart: 14px;
		display: grid;
		gap: 0 var( --hl-ff-ecart );
	}

	html body .hl-ff__carte {
		flex-basis: auto;
	}
}

/* Téléphone (3.67.1) : la piste reprend la marge de 20 px de la section. */
@media ( max-width: 767px ) {
	html body .hl-ff__cartes {
		margin: 0 -20px;
		padding: 4px 20px 8px;
		scroll-padding-left: 20px;
	}
}

/* =========================================================================
 * ACCUEIL · CARROUSELS HARMONISÉS (3.68)
 * Quatre cartes visibles sur ordinateur dans chaque carrousel : niveau de
 * frisson, expériences, nouveaux lieux, destinations. Phrase sous le titre
 * des carrousels d'univers.
 * ========================================================================= */
@media ( min-width: 1025px ) {
	html body .hl-ff__cartes {
		--hl-ff-visibles: 4;
	}

	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		--hl-sel-visibles: 4;
	}
}

@media ( min-width: 1200px ) {
	html body .hl-dest {
		--hl-dest-visibles: 4;
	}
}

html body .hl-ff__texte {
	max-width: 56ch;
	margin: 16px 0 0 !important;
	color: #6b6151;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

html body .hl-ff--univers .hl-ff__cartes {
	margin-top: 40px;
}

/* Sans phrase sous le titre (3.102) : le titre et les flèches tiennent sur
   une ligne, les cartes suivent d'un peu plus près. */
html body .hl-ff--univers .hl-ff__tete:not( :has( .hl-ff__texte ) ) {
	align-items: center;
}

html body .hl-ff--univers:not( :has( .hl-ff__texte ) ) .hl-ff__cartes {
	margin-top: 32px;
}

html body .hl-ff__voir-niveau[hidden] {
	display: none !important;
}

/* =========================================================================
 * ACCUEIL · LARGEURS ET ESPACEMENTS HARMONISÉS (3.68.1)
 * Une seule largeur de contenu, 1300 px (bords à 70 px en 1440), comme
 * l'univers, « Comment ça se passe », l'hôte et la FAQ. Un seul pas vertical :
 * --hl-section-y en haut et en bas de chaque section, rien de plus.
 * ========================================================================= */
html body .hl-ff {
	width: min( 1300px, calc( 100% - 40px ) );
}

html body.home .hl-envies,
html body.home .hl-dest {
	max-width: 1300px !important;
	margin-right: auto !important;
	margin-left: auto !important;
}

@media ( min-width: 768px ) {
	html body.home .elementor-element-3030d7c5 > .elementor-container {
		max-width: 1320px !important;
	}

	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		width: 100% !important;
	}
}

/* Pas vertical. */
html body.home .elementor-element.elementor-element-54ca2889,
html body.home .elementor-element.elementor-element-4eaed7e7 {
	padding: var( --hl-section-y ) 20px !important;
}

html body.home .elementor-element.elementor-element-4eaed7e7 {
	background-color: #f7f6f3 !important;
}

html body.home:not( #hl ) .elementor-element.elementor-element-1dd57fc {
	padding-top: var( --hl-section-y ) !important;
}

html body .hl-ff__cartes,
html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
	padding-bottom: 0 !important;
}

@media ( max-width: 767px ) {
	html body .hl-ff {
		width: 100%;
	}
}

/* Cartes d'annonce (3.68.2) : à quatre par ligne, un titre long passait sous
   les icônes de frisson, posées en absolu à droite. Le titre leur laisse
   leur place (trois têtes, ou le symbole calme). */
html body .listing-card-nl .listing-details-nl:has( .hl-card-fear ) .listing-title-nl {
	padding-right: 72px !important;
}

html body .listing-card-nl .listing-details-nl:has( .hl-card-fear.is-calm ) .listing-title-nl {
	padding-right: 30px !important;
}

/* Flèches des carrousels sur téléphone : visibles comme dans les autres
   sections de l'accueil. */
@media ( max-width: 767px ) {
	html body.home .hl-ff__nav {
		display: flex;
	}
}

/* =========================================================================
 * CARTES D'ANNONCE · TITRE SUR UNE LIGNE (3.69)
 * Logements, expériences et événements, partout sur le site : le titre tient
 * sur une ligne et finit par « … » s'il est trop long, pour que toutes les
 * cartes gardent la même hauteur. Le badge « réservation instantanée » reste
 * visible juste après ; la place des icônes de frisson est gardée à droite.
 * ========================================================================= */
html body .listing-card-nl .listing-title-nl.hl-titre-pret {
	display: flex !important;
	align-items: center;
	gap: 6px;
	min-width: 0;
	white-space: nowrap;
}

html body .listing-card-nl .hl-titre-carte {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .listing-card-nl .hl-titre-pret .listing-title-badges-nl {
	flex: 0 0 auto;
	margin-left: 0 !important;
}

/* =========================================================================
 * ACCUEIL · ESPACEMENT ENTRE SECTIONS RÉDUIT (3.69)
 * Le pas vertical passe de 72 à 112 px à 56 à 88 px ; toutes les sections
 * le suivent, FAQ comprise (elle avait son propre 110 px).
 * ========================================================================= */
html body.home {
	--hl-section-y: clamp( 56px, 6vw, 88px );
}

html body.home .hl-faq {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
}

/* Le span du titre reprend exactement la typographie du titre (une règle des
   cartes passe les span en Inter). */
html body .listing-card-nl .listing-title-nl .hl-titre-carte {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-style: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	letter-spacing: inherit !important;
}

/* Cartes des pages de liste (Locations, Expériences, Événements) : même
   règle, titre sur une ligne terminé par « … ». */
html body .listing-item-container .listing-item-content h3 {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

/* Pages de liste : la marge réservée aux icônes de frisson ne sert que si la
   carte en a (les expériences n'en ont pas) ; le symbole calme est plus
   étroit. Le titre gagne cette place avant d'être coupé. */
html body .listing-item-container.compact:not( :has( .hl-card-fear ) ) .listing-item-content h3 {
	margin-right: 0 !important;
}

html body .listing-item-container.compact:has( .hl-card-fear.is-calm ) .listing-item-content h3 {
	margin-right: 30px !important;
}

/* =========================================================================
 * CARTES D'ANNONCE · ICÔNES ALIGNÉES ET PASTILLE INSTANTANÉE (3.70)
 * Les icônes de frisson sont centrées sur la ligne du titre (titre 26,4 px
 * de haut, icônes 21 px). « Réservation instantanée » quitte le titre pour
 * une pastille en haut à gauche de la photo, sur toutes les cartes.
 * ========================================================================= */
html body .listing-card-nl .hl-card-fear {
	top: 2.7px !important;
}

html body .listing-item-container .listing-item-content .hl-card-fear {
	top: 12.7px !important;
}

html body .listing-card-nl .listing-title-badges-nl .instant-badge-nl,
html body .listing-item-container .hl-instant {
	display: none !important;
}

html body .hl-pastille-instant {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 11px 6px 9px;
	border-radius: 999px;
	background: rgba( 247, 246, 243, 0.94 );
	box-shadow: 0 2px 10px rgba( 21, 14, 16, 0.18 );
	color: #150e10;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

html body .hl-pastille-instant i {
	color: #961b1b;
	font-size: 11px;
}

/* Le symbole calme fait 17 px de haut (contre 21) : 2 px plus bas pour être
   centré sur le titre lui aussi. */
html body .listing-card-nl .hl-card-fear.is-calm {
	top: 4.7px !important;
}

html body .listing-item-container .listing-item-content .hl-card-fear.is-calm {
	top: 14.6px !important;
}

/* =========================================================================
 * CARTES · ÉCLAIR « RÉSERVATION INSTANTANÉE » (3.71)
 * La pastille sur la photo est retirée (elle passait sous les boutons de la
 * carte du plan). L'éclair rejoint la ligne capacité et avis, à gauche de la
 * capacité ; la note des voyageurs reste tout à droite.
 * ========================================================================= */
html body .hl-pastille-instant {
	display: none !important;
}

html body .hl-card-stat.is-instant {
	justify-content: center;
	width: 22px;
	padding: 0 !important;
}

html body .hl-card-stat.is-instant svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/* =========================================================================
 * ACCUEIL · ESPACEMENTS RAPPROCHÉS, FAQ AÉRÉE, PASTILLE ACTIVE (3.72)
 * Deux sections crème qui se suivent et parlent du même sujet sont
 * rapprochées : chacune garde la moitié du pas vertical à leur jonction
 * (niveau de frisson et expériences ; nouveaux lieux, envies et
 * destinations). La FAQ prend une fois et demie le pas.
 * ========================================================================= */
html body.home:not( #hl-a ):not( #hl-b ) .elementor-element.elementor-element-54ca2889 {
	padding-bottom: calc( var( --hl-section-y ) / 2 ) !important;
}

html body.home:not( #hl-a ):not( #hl-b ) .elementor-element.elementor-element-4eaed7e7 {
	padding-top: calc( var( --hl-section-y ) / 2 ) !important;
}

html body.home:not( #hl-a ):not( #hl-b ) .elementor-element-3030d7c5 > .elementor-container {
	padding-bottom: calc( var( --hl-section-y ) / 2 ) !important;
}

html body.home:not( #hl-a ):not( #hl-b ) .elementor-element.elementor-element-1dd57fc,
html body.home:not( #hl-a ):not( #hl-b ) .hl-bande-envies {
	padding-top: calc( var( --hl-section-y ) / 2 ) !important;
	padding-bottom: calc( var( --hl-section-y ) / 2 ) !important;
}

html body.home:not( #hl-a ):not( #hl-b ) .elementor-element.elementor-element-52160128 {
	padding-top: calc( var( --hl-section-y ) / 2 ) !important;
}

html body.home:not( #hl-a ):not( #hl-b ) .hl-faq {
	padding-top: calc( var( --hl-section-y ) * 1.5 ) !important;
	padding-bottom: calc( var( --hl-section-y ) * 1.5 ) !important;
}

/* Pastille de niveau choisie : têtes en blanc sur le fond noir. */
html body .hl-ff__puce.is-on .hl-ff__icones img:not( .is-calme ) {
	filter: brightness( 0 ) invert( 1 );
}

/* =========================================================================
 * ACCUEIL · « COMMENT ÇA SE PASSE »
 * Depuis 3.80, les étapes sont un composant animé (assets/etapes.js et
 * etapes.css). Reste ici le sous-titre de la section.
 * ========================================================================= */
html body.home [data-id="110afaf0"] {
	max-width: 52ch;
	margin: 20px 0 0 !important;
	color: rgba( 247, 246, 243, 0.66 ) !important;
	font-family: "Plus Jakarta Sans", sans-serif !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
}

@media ( max-width: 767px ) {
	html body.home [data-id="110afaf0"] {
		font-size: 16px !important;
	}
}

/* =========================================================================
 * NIVEAU DE FRISSON · FLÈCHES SUR LA LIGNE DU FILTRE (3.81)
 * Dans les autres carrousels, les flèches s'alignent sur la dernière ligne
 * de l'en-tête, juste au-dessus des cartes. Ici, cette ligne est celle des
 * pastilles de niveau : la section devient une grille (titre, puis
 * pastilles et flèches, puis cartes) ; l'en-tête s'efface (display:
 * contents) pour que titre et flèches y prennent place. Les flèches sont
 * centrées sur la dernière ligne de pastilles.
 * ========================================================================= */
html body .hl-ff:not( .hl-ff--univers ) {
	display: grid;
	grid-template-areas:
		"titre titre"
		"puces nav"
		"cartes cartes"
		"vide vide";
	grid-template-columns: minmax( 0, 1fr ) auto;
	column-gap: 32px;
}

html body .hl-ff:not( .hl-ff--univers ) .hl-ff__tete {
	display: contents;
}

html body .hl-ff:not( .hl-ff--univers ) .hl-ff__titre {
	grid-area: titre;
}

html body .hl-ff:not( .hl-ff--univers ) .hl-ff__puces {
	grid-area: puces;
	min-width: 0;
}

/* Alignées sur la dernière ligne de pastilles (48 px), centrées sur elle :
   36 px = 32 px sous les pastilles + 4 px pour centrer 40 px dans 48. */
html body .hl-ff:not( .hl-ff--univers ) .hl-ff__nav {
	grid-area: nav;
	align-self: end;
	margin: 40px 0 36px;
	padding-bottom: 0;
}

html body .hl-ff:not( .hl-ff--univers ) .hl-ff__cartes {
	grid-area: cartes;
}

html body .hl-ff:not( .hl-ff--univers ) .hl-ff__vide {
	grid-area: vide;
}

/* Téléphone : comme les autres carrousels, titre en pleine largeur et
   flèches sur leur propre ligne, à gauche, juste au-dessus des cartes. */
@media ( max-width: 767px ) {
	html body .hl-ff:not( .hl-ff--univers ) {
		grid-template-areas:
			"titre"
			"puces"
			"nav"
			"cartes"
			"vide";
		grid-template-columns: minmax( 0, 1fr );
	}

	html body .hl-ff:not( .hl-ff--univers ) .hl-ff__puces {
		margin-bottom: 16px;
	}

	html body .hl-ff:not( .hl-ff--univers ) .hl-ff__nav {
		justify-self: start;
		margin: 0 0 40px;
	}
}

/* =========================================================================
 * NIVEAU DE FRISSON · PASTILLES EN ICÔNES SUR ORDINATEUR (3.82)
 * « Tous » garde son texte. Les niveaux ne montrent que leurs têtes ; au
 * survol, au focus clavier et quand le niveau est choisi, le nom et le
 * nombre de lieux se déploient. Le texte reste dans le bouton (lu par les
 * lecteurs d'écran), seulement replié. Tablette et téléphone : inchangé.
 * ========================================================================= */
@media ( min-width: 1025px ) {
	html body .hl-ff__puce:not( [data-niveau="-1"] ) {
		padding: 0 16px;
		transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, padding 0.8s cubic-bezier( 0.65, 0, 0.35, 1 );
	}

	html body .hl-ff__puce:not( [data-niveau="-1"] ) .hl-ff__puce-nom,
	html body .hl-ff__puce:not( [data-niveau="-1"] ) .hl-ff__puce-total {
		max-width: 0;
		margin-left: -10px;
		overflow: hidden;
		white-space: nowrap;
		opacity: 0;
		transition: max-width 0.6s cubic-bezier( 0.65, 0, 0.35, 1 ), margin 0.6s cubic-bezier( 0.65, 0, 0.35, 1 ), padding 0.6s cubic-bezier( 0.65, 0, 0.35, 1 ), opacity 0.3s ease;
	}

	html body .hl-ff__puce:not( [data-niveau="-1"] ) .hl-ff__puce-total {
		min-width: 0;
		padding-right: 0;
		padding-left: 0;
	}

	html body .hl-ff__puce:not( [data-niveau="-1"] ):is( :focus-visible, .is-on ) {
		padding: 0 14px 0 18px;
	}

	html body .hl-ff__puce:not( [data-niveau="-1"] ):is( :focus-visible, .is-on ) .hl-ff__puce-nom,
	html body .hl-ff__puce:not( [data-niveau="-1"] ):is( :focus-visible, .is-on ) .hl-ff__puce-total {
		max-width: 180px;
		margin-left: 0;
		opacity: 1;
		transition: max-width 0.8s cubic-bezier( 0.65, 0, 0.35, 1 ), margin 0.8s cubic-bezier( 0.65, 0, 0.35, 1 ), padding 0.8s cubic-bezier( 0.65, 0, 0.35, 1 ), opacity 0.5s ease 0.25s;
	}

	html body .hl-ff__puce:not( [data-niveau="-1"] ):is( :focus-visible, .is-on ) .hl-ff__puce-total {
		min-width: 24px;
		padding-right: 8px;
		padding-left: 8px;
	}
}

/* =========================================================================
 * CARROUSELS DE L'ACCUEIL SUR TABLETTE ET TÉLÉPHONE (3.82)
 * Les pistes vont d'un bord à l'autre de l'écran : les cartes ne sont plus
 * coupées à la marge quand on fait défiler. La piste prend la largeur de
 * l'écran (marges négatives) et rend la marge en padding, si bien que la
 * première carte reste alignée sur le titre et que les colonnes gardent
 * leur largeur. Destinations : la piste ne défile plus verticalement (les
 * cartes décalées par l'animation d'apparition débordaient de 56 px et
 * captaient le geste vertical sur téléphone).
 * ========================================================================= */
html body .hl-dest__piste {
	overflow-y: hidden;
}

@media ( max-width: 1024px ) {
	/* Le parent devient conteneur : 100cqw = sa largeur, d'où la marge
	   exacte jusqu'au bord de l'écran (le % d'un scroll-padding se
	   calculerait sur la piste elle-même). */
	html body.home .hl-ff,
	html body.home .hl-dest,
	html body.home .elementor-element-3030d7c5 .elementor-widget-container:has( > .hl-piste-selection ) {
		container-type: inline-size;
	}

	html body.home .hl-ff__cartes,
	html body.home .hl-dest__piste,
	html body.home .elementor-element-3030d7c5 .simple-slick-carousel.hl-piste-selection {
		width: auto !important;
		max-width: none !important;
		margin-right: calc( 50cqw - 50vw ) !important;
		margin-left: calc( 50cqw - 50vw ) !important;
		padding-right: calc( 50vw - 50cqw ) !important;
		padding-left: calc( 50vw - 50cqw ) !important;
		scroll-padding-right: calc( 50vw - 50cqw );
		scroll-padding-left: calc( 50vw - 50cqw );
	}
}

/* =========================================================================
 * VOUS AVEZ UN LIEU · SECTION SOMBRE PLEINE LARGEUR (3.82)
 * Comme « Comment ça se passe » : le fond sombre couvre toute la section,
 * sans carte arrondie ; le contenu garde la largeur des autres sections.
 * ========================================================================= */
html body.home .elementor-element.elementor-element-3f4d6413 {
	padding-top: var( --hl-section-y ) !important;
	padding-bottom: var( --hl-section-y ) !important;
	background: radial-gradient( 120% 140% at 100% 0%, #2a1717 0%, #150e10 55% ) !important;
}

html body.home .elementor-element.elementor-element-245ba053 {
	padding: 0 !important;
	overflow: visible !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* Le grain était posé sur le bloc intérieur et en dessinait les bords sur
   le fond pleine largeur : retiré. */
html body.home .elementor-element.elementor-element-245ba053::after {
	display: none !important;
}

/* =========================================================================
 * BARRE DE RECHERCHE 4.0 (3.84) · TABLETTE ET ORDINATEUR
 * Gélule blanche, filet pierre ; les champs sont séparés par un fin arc
 * (bord droit d'une gélule) plutôt qu'un trait droit.
 * - Survol d'un champ : fond pierre clair.
 * - Champ ouvert : toute la barre passe en pierre clair, le champ actif
 *   devient une gélule blanche en relief.
 * - Bouton : rond noir velours, rouge au survol.
 * Libellés en capitales espacées, textes d'aide en pierre ; les champs à
 * liste (voyageurs, intensité) portent un chevron.
 * ========================================================================= */
@media ( min-width: 768px ) {
	html body .hl-search .hl-bar.hl-bar {
		min-height: 84px !important;
		padding: 6px !important;
		border: 1px solid #ddd7cc !important;
		border-radius: 999px !important;
		background: #fff !important;
		box-shadow: 0 18px 40px -26px rgba( 21, 14, 16, 0.35 ), 0 1px 2px rgba( 21, 14, 16, 0.04 ) !important;
		transition: background-color 0.3s ease, box-shadow 0.3s ease;
	}

	html body .hl-search .hl-bar.hl-bar:has( .hl-bar-cell.is-open ) {
		background: #eeebe5 !important;
		box-shadow: 0 18px 40px -28px rgba( 21, 14, 16, 0.3 ) !important;
	}

	html body .hl-search .hl-bar .hl-bar-sep {
		display: none !important;
	}

	html body .hl-search .hl-bar .hl-bar-cell {
		min-height: 72px !important;
		padding: 14px 30px !important;
		border: 1px solid transparent !important;
		border-radius: 999px !important;
		background: transparent !important;
		transition: background-color 0.25s ease, box-shadow 0.3s ease, border-color 0.25s ease;
	}

	/* L'arc séparateur : bord droit de la gélule de chaque champ. */
	html body .hl-search .hl-bar .hl-bar-cell:has( + .hl-bar-sep ) {
		border-right-color: #ddd7cc !important;
	}

	html body .hl-search .hl-bar .hl-bar-cell:hover {
		background: #eeebe5 !important;
	}

	html body .hl-search .hl-bar:has( .hl-bar-cell.is-open ) .hl-bar-cell:not( .is-open ):hover {
		background: rgba( 255, 255, 255, 0.55 ) !important;
	}

	html body .hl-search .hl-bar .hl-bar-cell.is-open {
		border-color: transparent !important;
		background: #fff !important;
		box-shadow: 0 10px 28px -12px rgba( 21, 14, 16, 0.3 ) !important;
	}

	/* Le champ voisin d'un champ survolé ou ouvert perd son arc. */
	html body .hl-search .hl-bar .hl-bar-cell:has( + .hl-bar-sep + .hl-bar-cell:is( :hover, .is-open ) ),
	html body .hl-search .hl-bar .hl-bar-cell:is( :hover, .is-open ) {
		border-right-color: transparent !important;
	}

	html body .hl-search .hl-bar .hl-bar-label {
		margin: 0 0 6px !important;
		color: #150e10 !important;
		font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		letter-spacing: 0.09em !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		color: #948670 !important;
		font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
		font-size: 17px !important;
		font-weight: 400 !important;
		line-height: 1.3 !important;
	}

	html body .hl-search .hl-bar .hl-loc-input::placeholder {
		color: #948670 !important;
		opacity: 1;
	}

	html body .hl-search .hl-bar :is( .is-counter, .is-fear ) .hl-bar-value {
		color: #6b6151 !important;
	}

	html body .hl-search .hl-bar .hl-bar-value.is-set,
	html body .hl-search .hl-bar .hl-loc-input:not( :placeholder-shown ) {
		color: #150e10 !important;
		font-weight: 500 !important;
	}

	/* Chevron des champs à liste. */
	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 58px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 28px;
		width: 14px;
		height: 14px;
		margin-top: -7px;
		background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6151' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E" ) center / contain no-repeat;
		transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
		pointer-events: none;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ).is-open::after {
		transform: rotate( 180deg );
	}

	/* Bouton : rond noir velours, rouge au survol. */
	html body .hl-search .hl-bar .hl-bar-submit {
		flex: 0 0 60px !important;
		width: 60px !important;
		min-width: 60px !important;
		height: 60px !important;
		margin: 0 6px 0 10px !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: #150e10 !important;
		box-shadow: 0 10px 22px -10px rgba( 21, 14, 16, 0.6 ) !important;
		color: #f7f6f3 !important;
		filter: none !important;
		transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit:hover {
		background: #961b1b !important;
		box-shadow: 0 12px 26px -10px rgba( 150, 27, 27, 0.6 ) !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit:active {
		transform: scale( 0.95 );
	}

	html body .hl-search .hl-bar .hl-bar-submit:focus-visible {
		outline: 2px solid #961b1b !important;
		outline-offset: 3px !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit .hl-bar-submit-text {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		clip: rect( 0 0 0 0 ) !important;
		white-space: nowrap !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit .hl-icon,
	html body .hl-search .hl-bar .hl-bar-submit svg {
		width: 22px !important;
		height: 22px !important;
	}
}

/* Téléphone : même bouton noir velours, rouge au survol ou au toucher. */
@media ( max-width: 767px ) {
	html body .hl-search .hl-bar .hl-bar-submit {
		background: #150e10 !important;
		color: #f7f6f3 !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit:is( :hover, :active ) {
		background: #961b1b !important;
	}
}

/* Destination : le bouton de géolocalisation prend de la place, le champ
   s'élargit pour que « Où osez-vous aller ? » tienne en entier. */
@media ( min-width: 768px ) {
	html body .hl-search .hl-bar .hl-bar-cell.is-location {
		flex: 1.35 1 0 !important;
		padding-right: 22px !important;
	}
}

/* Barre compacte : tablette, et barres plus étroites des pages univers. */
@media ( min-width: 768px ) and ( max-width: 1100px ) {
	html body .hl-search .hl-bar .hl-bar-cell {
		padding: 12px 18px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		font-size: 15px !important;
	}

	html body .hl-search .hl-bar .hl-bar-label {
		font-size: 11px !important;
		letter-spacing: 0.08em !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 36px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		right: 14px;
		width: 12px;
		height: 12px;
		margin-top: -6px;
	}

	html body .hl-search .hl-bar .hl-bar-submit {
		flex-basis: 54px !important;
		width: 54px !important;
		min-width: 54px !important;
		height: 54px !important;
		margin-left: 6px !important;
	}
}

@media ( min-width: 1101px ) {
	html body .hl-search:not( .hl-home ) .hl-bar .hl-bar-cell {
		padding: 12px 22px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		font-size: 16px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 44px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		right: 20px;
	}
}

@media ( min-width: 768px ) {
	html body .hl-search .hl-bar .hl-bar-cell.is-counter {
		flex: 1.25 1 0 !important;
	}
}

/* Déclencheur de recherche sur téléphone : même bouton noir velours. */
html body .hl-home-trigger .hl-home-trigger__icon {
	background: #150e10 !important;
	color: #f7f6f3 !important;
}

/* =========================================================================
 * ACCUEIL · CONFIANCE (3.85)
 * Sous la FAQ : fond pierre clair sur toute la largeur, titre centré,
 * quatre engagements en colonnes séparées par de fins filets (pas de
 * cartes), icônes au trait rouge, une ligne vers la page Contact.
 * ========================================================================= */
html body .hl-confiance {
	margin-right: calc( 50% - 50vw );
	margin-left: calc( 50% - 50vw );
	padding: var( --hl-section-y, 88px ) max( 20px, calc( 50vw - 650px ) );
	background: #eeebe5;
	color: #150e10;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

html body .hl-confiance__tete {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

html body .hl-confiance__titre {
	margin: 0 !important;
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 400 !important;
}

html body .hl-confiance__titre em {
	color: #961b1b;
	font-style: italic;
}

html body .hl-confiance__texte {
	max-width: 58ch;
	margin: 20px auto 0 !important;
	color: #6b6151 !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
}

html body .hl-confiance__liste {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	margin: 64px 0 0 !important;
	padding: 0 !important;
	list-style: none;
}

html body .hl-confiance__item {
	margin: 0;
	padding: 4px 32px;
	border-left: 1px solid #ddd7cc;
}

html body .hl-confiance__item:first-child {
	padding-left: 0;
	border-left: 0;
}

html body .hl-confiance__item:last-child {
	padding-right: 0;
}

html body .hl-confiance__icone {
	display: block;
	width: 28px;
	height: 28px;
	color: #961b1b;
}

html body .hl-confiance__icone svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

html body .hl-confiance__nom {
	margin: 22px 0 0 !important;
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em !important;
}

html body .hl-confiance__desc {
	margin: 10px 0 0 !important;
	color: #6b6151 !important;
	font-size: 16px !important;
	line-height: 1.65 !important;
}

html body .hl-confiance__pied {
	margin: 64px 0 0 !important;
	color: #6b6151 !important;
	font-size: 15px !important;
	text-align: center;
}

html body .hl-confiance__pied a {
	color: #150e10 !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-color: #961b1b !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 5px;
	transition: text-underline-offset 0.25s ease;
}

html body .hl-confiance__pied a:hover {
	text-underline-offset: 8px;
}

@media ( max-width: 1024px ) {
	html body .hl-confiance__liste {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		margin-top: 48px !important;
	}

	html body .hl-confiance__item,
	html body .hl-confiance__item:first-child,
	html body .hl-confiance__item:last-child {
		padding: 28px 28px 28px 0;
		border-left: 0;
	}

	html body .hl-confiance__item:nth-child( even ) {
		padding-right: 0;
		padding-left: 28px;
		border-left: 1px solid #ddd7cc;
	}

	html body .hl-confiance__item:nth-child( n + 3 ) {
		border-top: 1px solid #ddd7cc;
	}
}

@media ( max-width: 767px ) {
	html body .hl-confiance__texte {
		font-size: 16px !important;
	}

	html body .hl-confiance__liste {
		grid-template-columns: minmax( 0, 1fr );
		margin-top: 36px !important;
	}

	html body .hl-confiance__item,
	html body .hl-confiance__item:first-child,
	html body .hl-confiance__item:last-child,
	html body .hl-confiance__item:nth-child( even ) {
		padding: 24px 0;
		border-top: 1px solid #ddd7cc;
		border-left: 0;
	}

	html body .hl-confiance__nom {
		margin-top: 16px !important;
		font-size: 24px !important;
	}

	html body .hl-confiance__pied {
		margin-top: 36px !important;
	}
}

/* =========================================================================
 * DÉFILEMENT PLUS FLUIDE (3.85)
 * Les effets recalculés à chaque image pendant le défilement faisaient
 * saccader la page (surtout Safari et écrans Retina) :
 * - flou d'arrière-plan de l'en-tête collant : remplacé par un fond
 *   presque opaque, rendu identique ;
 * - flou des trois nappes de brume animées et du halo de bougie : retiré,
 *   leurs dégradés sont déjà doux ;
 * - paysage du héros isolé (contain), calques ramenés à 2 560 px.
 * ========================================================================= */
html body header#header-container.hl-header.is-scrolled,
html body header#header-container.hl-header.hl-header--clair.is-scrolled {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

html body header#header-container.hl-header.hl-header--clair.is-scrolled {
	background-color: rgba( 247, 246, 243, 0.97 ) !important;
}

html body.home header#header-container.hl-header:not( .hl-header--clair ).is-scrolled {
	background-color: rgba( 21, 14, 16, 0.96 ) !important;
}

html body header#header-container.hl-header :is( .user-menu ul, .header-widget ul ) {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

html body .hl-brume,
html body .hl-host-mock::before {
	filter: none !important;
}

html body .hl-brume {
	background: radial-gradient( ellipse at center, rgba( 247, 246, 243, 0.8 ) 0%, rgba( 247, 246, 243, 0.45 ) 35%, rgba( 247, 246, 243, 0.12 ) 58%, rgba( 247, 246, 243, 0 ) 72% ) !important;
	will-change: transform;
}

html body .hl-paysage {
	contain: layout paint;
}

/* =========================================================================
 * BARRE DE RECHERCHE · PROPORTIONS (3.86)
 * Trop haute et trop grosse : on revient aux proportions courantes d'une
 * barre de recherche (≈ 68 px de haut, libellé 11 px, valeur 15 px,
 * bouton 50 px), qui laissent le titre du héros dominer.
 * ========================================================================= */
@media ( min-width: 768px ) {
	html body .hl-search .hl-bar.hl-bar {
		min-height: 68px !important;
		padding: 5px !important;
	}

	html body .hl-search .hl-bar .hl-bar-cell {
		min-height: 58px !important;
		padding: 9px 26px !important;
	}

	html body .hl-search .hl-bar .hl-bar-label {
		margin: 0 0 3px !important;
		font-size: 11px !important;
		letter-spacing: 0.08em !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		font-size: 15px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 48px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		right: 22px;
		width: 12px;
		height: 12px;
		margin-top: -6px;
	}

	html body .hl-search .hl-bar .hl-bar-submit {
		flex-basis: 50px !important;
		width: 50px !important;
		min-width: 50px !important;
		height: 50px !important;
		margin: 0 4px 0 8px !important;
	}

	html body .hl-search .hl-bar .hl-bar-submit .hl-icon,
	html body .hl-search .hl-bar .hl-bar-submit svg {
		width: 18px !important;
		height: 18px !important;
	}
}

@media ( min-width: 768px ) and ( max-width: 1100px ) {
	html body .hl-search .hl-bar .hl-bar-cell {
		padding: 9px 16px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		font-size: 14px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 32px !important;
	}

	html body .hl-search .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		right: 12px;
	}

	html body .hl-search .hl-bar .hl-bar-submit {
		flex-basis: 46px !important;
		width: 46px !important;
		min-width: 46px !important;
		height: 46px !important;
	}
}

@media ( min-width: 1101px ) {
	html body .hl-search:not( .hl-home ) .hl-bar .hl-bar-cell {
		padding: 9px 20px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-value, .hl-loc-input ) {
		font-size: 15px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear ) {
		padding-right: 40px !important;
	}

	html body .hl-search:not( .hl-home ) .hl-bar :is( .hl-bar-cell.is-counter, .hl-bar-cell.is-fear )::after {
		right: 16px;
	}
}

/* =========================================================================
 * TABLEAU DE BORD · CARTES DE STATISTIQUES AUX COULEURS DU SITE (3.86)
 * Plus de vert, bleu, rose ni jaune : fond parchemin clair, filet pierre,
 * icône et accent rouge, chiffres en noir velours. Le vert reste réservé
 * aux petits statuts (« Confirmée », évolution positive).
 * ========================================================================= */
html body .dashboard-stat.stat-card-v2 {
	border: 1px solid #ddd7cc !important;
	background: #fbfaf8 !important;
	background-image: none !important;
	box-shadow: none !important;
	color: #961b1b !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

html body .dashboard-stat.stat-card-v2:hover {
	border-color: #bcb2a1 !important;
	box-shadow: 0 16px 30px -22px rgba( 21, 14, 16, 0.35 ) !important;
	transform: translateY( -2px );
}

html body .dashboard-stat.stat-card-v2 :is( .stat-head, .stat-badge, svg, path, circle ) {
	color: #961b1b !important;
}

html body .dashboard-stat.stat-card-v2 .stat-label {
	color: #150e10 !important;
	font-weight: 600 !important;
}

html body .dashboard-stat.stat-card-v2 .stat-body h4 {
	color: #150e10 !important;
	font-family: "Cormorant Garamond", Georgia, serif !important;
}

html body .dashboard-stat.stat-card-v2 :is( .stat-meta, .stat-meta * ) {
	color: #6b6151 !important;
}

html body .dashboard-stat.stat-card-v2 :is( .stat-meta strong, .stat-meta b ) {
	color: #150e10 !important;
}

html body .dashboard-stat.stat-card-v2 .stat-trend-circle {
	background: rgba( 150, 27, 27, 0.08 ) !important;
	color: #961b1b !important;
}

html body .dashboard-stat.stat-card-v2 .stat-trend-circle * {
	color: #961b1b !important;
}

html body .dashboard-stat.stat-card-v2 a {
	border-color: #ddd7cc !important;
	color: #961b1b !important;
}

html body .dashboard-stat.stat-card-v2 a:hover {
	border-color: #961b1b !important;
	background: #961b1b !important;
	color: #f7f6f3 !important;
}

/* Évolution des cartes : vert pour une hausse, rouge pour une baisse (3.87). */
html body .dashboard-stat.stat-card-v2 .stat-pill {
	padding: 2px 8px !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
}

html body .dashboard-stat.stat-card-v2 .stat-pill.up {
	background: #e7efe2 !important;
	color: #3b6b2a !important;
}

html body .dashboard-stat.stat-card-v2 .stat-pill.down {
	background: #f6e8e8 !important;
	color: #7a1515 !important;
}

/* =========================================================================
 * TIROIR MOBILE 3.94 : une arborescence par profil
 * ========================================================================= */

html body .mobile-navigation-wrapper.hl-tiroir-pret #mobile-nav,
html body .mobile-navigation-wrapper.hl-tiroir-pret .hl-drawer-compte,
html body .mobile-navigation-wrapper.hl-tiroir-pret .mobile-nav-widgets {
	display: none !important;
}

html body .mobile-navigation-wrapper .hl-tiroir {
	display: grid;
	gap: 22px;
	padding: 8px 0 36px;
}

html body .hl-tiroir > * {
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.45s ease, transform 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
	transition-delay: calc( var( --i, 0 ) * 50ms + 0.1s );
}

html body.mobile-nav-open .hl-tiroir > * {
	opacity: 1;
	transform: none;
}

/* Qui est là. */
html body .hl-tiroir__profil {
	display: grid;
	grid-template-columns: 52px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 20px;
	background: rgba( 247, 246, 243, 0.06 );
}

html body .hl-tiroir__avatar {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 50%;
	background: #961b1b;
	color: #fff;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 600;
}

html body .hl-tiroir__avatar img {
	width: 52px !important;
	height: 52px !important;
	object-fit: cover;
}

html body .hl-tiroir__qui {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

html body .mobile-navigation-wrapper .hl-tiroir__qui small {
	color: #948670;
	font-size: 13px;
}

html body .mobile-navigation-wrapper .hl-tiroir__qui strong {
	overflow: hidden;
	color: #fbfaf8;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body .hl-tiroir__role {
	padding: 5px 12px;
	border-radius: 999px;
	background: #961b1b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

html body .mobile-navigation-wrapper a.hl-tiroir__action {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	border-radius: 999px;
	background: #fbfaf8;
	color: #150e10 !important;
	font-size: 15px;
	font-weight: 700;
}

html body .mobile-navigation-wrapper a.hl-tiroir__action::before {
	content: "+";
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
}

/* Groupes de liens. */
html body .mobile-navigation-wrapper p.hl-tiroir__titre {
	margin: 0 0 6px !important;
	padding: 0 4px;
	color: #948670 !important;
	font-size: 13px !important;
	font-weight: 600;
}

html body .mobile-navigation-wrapper ul.hl-tiroir__liens {
	display: grid;
	gap: 2px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .mobile-navigation-wrapper ul.hl-tiroir__liens li {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	padding: 8px 10px !important;
	border-radius: 16px;
	color: #ddd7cc !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
	font-size: 16px !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien:active,
html body .mobile-navigation-wrapper a.hl-tiroir__lien:hover {
	background: rgba( 247, 246, 243, 0.06 );
}

html body .hl-tiroir__icone {
	display: grid;
	flex: 0 0 36px;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: rgba( 247, 246, 243, 0.06 );
	color: #bcb2a1;
	font-size: 14px;
}

html body .hl-tiroir__icone i {
	margin: 0 !important;
	color: inherit !important;
}

html body .mobile-navigation-wrapper img.hl-tiroir__image {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	padding: 6px;
	border-radius: 14px;
	background: #fbfaf8;
	object-fit: contain;
}

html body .hl-tiroir__textes {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

html body .mobile-navigation-wrapper .hl-tiroir__textes strong {
	color: #fbfaf8;
	font-weight: 600;
	line-height: 1.3;
}

html body .mobile-navigation-wrapper a.is-univers .hl-tiroir__textes strong {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
}

html body .mobile-navigation-wrapper .hl-tiroir__textes small {
	color: #948670;
	font-size: 13px;
}

html body .hl-tiroir__compte {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: #961b1b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien.is-sortie .hl-tiroir__textes strong {
	color: #948670;
	font-weight: 500;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien.is-simple {
	min-height: 44px;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien.is-simple .hl-tiroir__textes strong {
	color: #ddd7cc;
	font-weight: 500;
}

/* Visiteur : invitation à se connecter. */
html body .hl-tiroir__invite {
	display: grid;
	gap: 10px;
	padding: 22px;
	border-radius: 22px;
	background: rgba( 247, 246, 243, 0.06 );
}

html body .mobile-navigation-wrapper .hl-tiroir__invite strong {
	color: #fbfaf8;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.1;
}

html body .mobile-navigation-wrapper .hl-tiroir__invite p {
	margin: 0 0 6px !important;
	color: #bcb2a1 !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
}

html body .mobile-navigation-wrapper a.hl-tiroir__bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: 999px;
	background: #fbfaf8;
	color: #150e10 !important;
	font-size: 15px;
	font-weight: 700;
}

html body .mobile-navigation-wrapper a.hl-tiroir__lien-texte {
	justify-self: center;
	padding: 6px;
	color: #fbfaf8 !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline !important;
	text-decoration-color: rgba( 247, 246, 243, 0.3 ) !important;
	text-underline-offset: 4px;
}

/* Devenir hôte. */
html body .mobile-navigation-wrapper a.hl-tiroir__hote {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 18px 56px 18px 20px;
	overflow: hidden;
	border-radius: 20px;
	background: #961b1b;
	color: #fff !important;
	text-decoration: none !important;
}

html body .mobile-navigation-wrapper a.hl-tiroir__hote small {
	color: rgba( 255, 255, 255, 0.78 );
	font-size: 13px;
}

html body .mobile-navigation-wrapper a.hl-tiroir__hote strong {
	color: #fff;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1;
}

html body .mobile-navigation-wrapper a.hl-tiroir__hote::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 20px;
	background: #fff;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4l4.3-4.3H4a1 1 0 1 1 0-2h13.6l-4.3-4.3a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4l4.3-4.3H4a1 1 0 1 1 0-2h13.6l-4.3-4.3a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	transform: translateY( -50% );
}

/* Pied du tiroir. */
html body .hl-tiroir__pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px 0;
	border-top: 1px solid rgba( 247, 246, 243, 0.1 );
}

html body .mobile-navigation-wrapper .hl-tiroir__pied a[href^="mailto:"] {
	color: #bcb2a1 !important;
	font-size: 14px;
}

html body .mobile-navigation-wrapper .hl-tiroir__pied ul {
	display: flex;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	html body .hl-tiroir > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}