/* ==========================================================================
   Prototype de liste « façon Airbnb » (liste/proto-liste.php + gabarits/proto-vignette.php)
   Couleurs : palette du kit (--tk-*), comme les autres listes (sombre, claire avec le sélecteur).
   La fenêtre « Filtres » reprend le moteur clair des autres listes (.zone-moteur, variables --mt-* de listes.css).
   ========================================================================== */

.hd-liste {
	--l-fond: var(--tk-dark, #122327);
	--l-surface: var(--tk-dark-2, #1C2D31);
	--l-encre: var(--tk-white, #FFFFFF);
	--l-texte: var(--tk-text, #909DA1);
	--l-ligne: var(--tk-border, rgba(255, 255, 255, 0.1));
	--l-ligne-forte: rgba(255, 255, 255, 0.28);
	--l-accent: var(--tk-primary, #0CB2DB);
	--l-entete: 92px; /* en-tête fixe du site */
	--l-barre: 0px; /* hauteur de la barre de catégories, ajoutée quand elle existe */

	position: relative;
	font-family: "Inter", "Helvetica Neue", sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: var(--l-texte);
}
html[data-theme="light"] .hd-liste { --l-ligne-forte: rgba(18, 35, 39, 0.28); }

/* La vignette sert aussi dans les autres listes Bridge (?gab=pv) : elle porte ses propres variables et réglages */
.hd-vignette {
	--l-surface: var(--tk-dark-2, #1C2D31);
	--l-encre: var(--tk-white, #FFFFFF);
	--l-texte: var(--tk-text, #909DA1);
	--l-accent: var(--tk-primary, #0CB2DB);
	font-family: "Inter", "Helvetica Neue", sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: var(--l-texte);
}
.hd-vignette button { font: inherit; text-transform: none; cursor: pointer; }
.hd-vignette :focus-visible { outline: 2px solid var(--l-accent); outline-offset: 2px; }
.hd-liste:has(.hd-liste-barre) { --l-barre: 82px; }
@media (max-width: 767px) {
	.hd-liste { --l-entete: 66px; }
	.hd-liste:has(.hd-liste-barre) { --l-barre: 74px; }
}

/* Remise à zéro des boutons (reset Hello : #c36) */
.hd-liste button { font: inherit; text-transform: none; cursor: pointer; }
.hd-liste button:hover,
.hd-liste button:focus { background-color: transparent; }
.hd-liste :focus-visible { outline: 2px solid var(--l-accent); outline-offset: 2px; }

/* Boutons */
.hd-liste .hd-liste-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--l-encre);
	background: transparent;
	border: 1px solid var(--l-ligne-forte);
	border-radius: 12px;
	transition: border-color 0.2s, background-color 0.2s;
}
.hd-liste .hd-liste-btn:hover { color: var(--l-encre); background: var(--l-surface); border-color: var(--l-encre); }
.hd-liste-btn svg,
.hd-liste-fermer svg,
.hd-liste-bascule svg,
.hd-vignette-fleche svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}
.hd-liste-pastille {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 12px;
	color: var(--l-fond);
	background: var(--l-encre);
	border-radius: 10px;
}
.hd-liste-pastille[hidden] { display: none; }
.hd-liste .hd-liste-lien {
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--l-encre);
	text-decoration: underline;
	text-underline-offset: 3px;
	background: none;
	border: 0;
}

/* ---------- Barre de catégories (filtres rapides) + bouton Filtres, collée sous l'en-tête */
.hd-liste-barre {
	position: sticky;
	top: var(--l-entete);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: var(--l-barre);
	margin-bottom: 8px;
	background: var(--l-fond);
	box-shadow: 0 1px 0 var(--l-ligne);
}
.hd-liste-categories { flex: 1 1 auto; min-width: 0; }
.hd-liste-categories .bridge-quick-search,
.hd-liste-categories .bridge-moteur-section { margin: 0 !important; padding: 0; }
.hd-liste-categories .moteur-section-label,
.hd-liste-categories .filter-bridge-header,
.hd-liste-categories .bridgeActiveFiltersDivSection { display: none; }
.hd-liste-categories .uk-grid { margin: 0; }
.hd-liste-categories .uk-grid > * { width: auto; margin: 0 !important; padding: 0; }
/* Cases à cocher → onglets à icône, défilement horizontal */
.hd-liste-categories .bridge-filter-checkbox {
	display: flex;
	gap: 6px;
	padding: 8px 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
	mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.hd-liste-categories .bridge-filter-checkbox::-webkit-scrollbar { display: none; }
.hd-liste-categories .bridge-filter-checkbox label {
	position: relative;
	display: flex !important; /* .uk-display-block est en !important */
	flex: 0 0 auto;
	width: auto !important;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--l-texte);
	white-space: nowrap;
	border-radius: 30px;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}
.hd-liste-categories .bridge-filter-checkbox label:hover { color: var(--l-encre); background: var(--l-surface); }
.hd-liste-categories .bridge-filter-checkbox input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.hd-liste-categories .bridge-filter-checkbox label:has(input:checked) { color: var(--l-fond); background: var(--l-encre); }
.hd-liste-categories .bridge-filter-checkbox label:has(input:focus-visible) { outline: 2px solid var(--l-accent); outline-offset: 2px; }
.hd-liste-categories .bridge-filter-checkbox .bridge-label { display: flex; align-items: center; gap: 8px; }
.hd-liste-categories .bridge-engine-image-container img,
.hd-liste-categories .bridge-engine-image-container svg { width: 22px; height: 22px; object-fit: contain; }
.hd-liste-categories .bridge-count { font-weight: 400; opacity: 0.7; }
.hd-liste-categories .bridge-disabled { opacity: 0.45; }

/* ---------- En-tête des résultats : total, filtres actifs, tri, carte */
.hd-liste-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	padding: 16px 0 20px;
}
.hd-liste-total { margin: 0; font-family: "Inter", sans-serif; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--l-encre); }
.hd-liste-actifs { display: flex; flex: 1 1 260px; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hd-liste-actifs:empty { flex-basis: 0; }
.hd-liste .hd-liste-actifs .bridgeActiveFilter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 12px;
	font-size: 13px;
	font-weight: 500;
	color: var(--l-encre);
	text-transform: none;
	background: transparent;
	border: 1px solid var(--l-ligne-forte);
	border-radius: 30px;
}
.hd-liste .hd-liste-actifs .bridgeActiveFilterRemove {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	padding: 0;
	font-size: 11px;
	color: var(--l-encre);
	background: none;
	border: 0;
	border-radius: 50%;
}
.hd-liste .hd-liste-actifs .bridgeActiveFilterRemove:hover { background: var(--l-surface); }
.hd-liste-tri { margin-left: auto; }
.hd-liste .hd-liste-tri .bridge-sort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hd-liste .hd-liste-tri .bridge-sort-bar > li { padding: 0; list-style: none; }
.hd-liste .hd-liste-tri .bridge-sort-bar > li::before { display: none; }
.hd-liste .hd-liste-tri .bridge-sort-bar h5 { margin: 0 4px 0 0; font-family: "Inter", sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--l-texte); }
.hd-liste .hd-liste-tri .bridge-sort-btn {
	display: inline-flex;
	gap: 6px;
	margin: 0;
	padding: 6px 12px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 20px;
	color: var(--l-encre);
	border: 1px solid var(--l-ligne-forte);
	border-radius: 30px;
	cursor: pointer;
}

/* ---------- Corps : grille + carte collante */
.hd-liste-corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
	gap: 32px;
	align-items: start;
}
.hd-liste.is-sans-carte .hd-liste-corps { grid-template-columns: minmax(0, 1fr); }
.hd-liste.is-sans-carte .hd-liste-carte { display: none; }
.hd-liste-resultats { min-width: 0; }

.hd-liste-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 40px 24px;
}
.hd-liste-grille > .liste_sit_item { min-width: 0; }
.hd-liste-grille > div:not(.liste_sit_item) { grid-column: 1 / -1; } /* message « aucun résultat » renvoyé par le moteur */

.hd-liste-carte {
	position: sticky;
	top: calc(var(--l-entete) + var(--l-barre) + 16px);
	height: calc(100vh - var(--l-entete) - var(--l-barre) - 32px);
	min-height: 420px;
	overflow: hidden;
	background: var(--l-surface);
	border-radius: 16px;
}
.hd-liste-carte #mapsSIT { width: 100%; height: 100% !important; }

/* Aucun résultat */
.hd-liste-vide { grid-column: 1 / -1; padding: 56px 24px; text-align: center; border: 1px dashed var(--l-ligne-forte); border-radius: 16px; }
.hd-liste-vide-titre { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: var(--l-encre); }
.hd-liste-vide p { margin: 0; }

/* Pagination / défilement infini : centrés sous la grille */
.hd-liste .bridge-pagination { margin-top: 48px; }
.hd-liste .bridge-view-more-button-container { margin-top: 40px; }

/* ---------- Vignette */
.hd-vignette { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; }
.hd-vignette-media {
	position: relative;
	aspect-ratio: 20 / 19;
	overflow: hidden;
	background: var(--l-surface);
	border-radius: 14px;
}
.hd-vignette-photos {
	display: flex;
	height: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hd-vignette-photos::-webkit-scrollbar { display: none; }
.hd-vignette-photos img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.hd-vignette-sans-photo { display: grid; place-items: center; height: 100%; color: var(--l-texte); }
.hd-vignette-sans-photo svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Flèches : visibles au survol (toujours sur écran tactile, grâce au défilement au doigt) */
.hd-vignette .hd-vignette-fleche {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	padding: 0;
	color: #122327;
	background: rgba(255, 255, 255, 0.92);
	border: 0;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	transition: opacity 0.2s, transform 0.2s;
}
.hd-vignette .hd-vignette-fleche:focus { color: #122327; background: rgba(255, 255, 255, 0.92); }
.hd-vignette .hd-vignette-fleche:hover { color: #122327; background: #FFFFFF; transform: scale(1.06); }
.hd-vignette-fleche--prec { left: 10px; }
.hd-vignette-fleche--suiv { right: 10px; }
.hd-vignette:hover .hd-vignette-fleche,
.hd-vignette-fleche:focus-visible { opacity: 1; }
@media (hover: none) { .hd-vignette .hd-vignette-fleche { display: none; } }
.hd-vignette-points {
	position: absolute;
	left: 50%;
	bottom: 10px;
	z-index: 2;
	display: flex;
	gap: 5px;
	transform: translateX(-50%);
	pointer-events: none;
}
.hd-vignette-points i { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; transition: background-color 0.2s, transform 0.2s; }
.hd-vignette-points i.is-actif { background: #FFFFFF; transform: scale(1.2); }

/* Favori (carnet de voyage du plugin) */
.hd-vignette-favori { position: absolute; top: 10px; right: 10px; z-index: 3; }
.hd-vignette .hd-vignette-favori .add-to-cv-button {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: #FFFFFF;
	background: rgba(18, 35, 39, 0.45) !important;
	border: 0;
	border-radius: 50%;
}
.hd-vignette .hd-vignette-favori .add-to-cv-button[disabled] { color: var(--l-accent); opacity: 1; }

/* Textes : le lien du titre couvre toute la vignette */
.hd-vignette-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-vignette-titre {
	margin: 0;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--l-encre);
}
.hd-vignette .hd-vignette-lien,
.hd-vignette .hd-vignette-lien:hover,
.hd-vignette .hd-vignette-lien:focus { color: inherit; text-decoration: none; }
.hd-vignette-lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.hd-vignette-lien:focus-visible { outline: 0; }
.hd-vignette-lien:focus-visible::after { outline: 2px solid var(--l-accent); outline-offset: 4px; }
.hd-vignette:hover .hd-vignette-lien { text-decoration: underline; text-underline-offset: 3px; }
.hd-vignette-lieu,
.hd-vignette-desc,
.hd-vignette-infos { margin: 0; font-size: 14px; line-height: 20px; }
.hd-vignette-desc { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hd-vignette-prix { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--l-encre); }

/* ---------- Fenêtre « Filtres » : panneau latéral clair */
.hd-liste-filtres {
	inset: 0 auto 0 0;
	width: min(440px, 100%);
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	color: var(--mt-text, #66767A);
	background: var(--mt-bg, #EDF5F6);
	border: 0;
	box-shadow: 30px 0 80px rgba(0, 0, 0, 0.45);
}
.hd-liste-filtres[open] { display: flex; flex-direction: column; }
.hd-liste-filtres::backdrop { background: rgba(18, 35, 39, 0.6); }
@media (prefers-reduced-motion: no-preference) {
	.hd-liste-filtres[open] { animation: hd-liste-panneau 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes hd-liste-panneau { from { transform: translateX(-100%); } }
html.hd-liste-filtres-ouverts,
html.hd-liste-carte-ouverte { overflow: hidden; }
.hd-liste-filtres-entete,
.hd-liste-filtres-pied {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 24px;
	background: var(--mt-bg, #EDF5F6);
}
.hd-liste-filtres-entete { border-bottom: 1px solid var(--mt-line, #DCE6E8); }
.hd-liste-filtres-pied { border-top: 1px solid var(--mt-line, #DCE6E8); }
.hd-liste-filtres-titre { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: 30px; font-weight: 400; line-height: 1; color: var(--mt-title, #1C2D31); }
.hd-liste .hd-liste-fermer {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--mt-title, #1C2D31);
	background: none;
	border: 0;
	border-radius: 50%;
}
.hd-liste .hd-liste-fermer:hover { color: var(--mt-title, #1C2D31); background: #FFFFFF; }
.hd-liste-filtres-corps { flex: 1 1 auto; min-height: 0; padding: 20px 24px; overflow-y: auto; overscroll-behavior: contain; }
.hd-liste-filtres-corps .bridge-moteur-titre { display: none; } /* la fenêtre a son propre titre */
.hd-liste-filtres-corps .uk-grid { margin-left: 0; }
.hd-liste-filtres-corps .uk-grid > * { padding-left: 0; }
.hd-liste .hd-liste-filtres-pied .hd-liste-lien { color: var(--mt-title, #1C2D31); }
.hd-liste .hd-liste-btn--principal,
.hd-liste .hd-liste-btn--principal:focus { margin-left: auto; color: #FFFFFF; background: var(--mt-title, #1C2D31); border-color: var(--mt-title, #1C2D31); }
.hd-liste .hd-liste-btn--principal:hover,
.hd-liste .hd-liste-btn--principal:focus-visible { color: #FFFFFF; background: var(--l-accent); border-color: var(--l-accent); }

/* ---------- Bascule Carte / Liste (mobile) */
.hd-liste-bascule { display: none; }
.hd-liste-ic-liste { display: none; }

@media (max-width: 959px) {
	.hd-liste-corps { grid-template-columns: minmax(0, 1fr); }
	.hd-liste .hd-liste-btn--carte { display: none; }
	.hd-liste-carte { display: none; }
	.hd-liste.is-carte-mobile .hd-liste-carte {
		position: fixed;
		inset: var(--l-entete) 0 0 0;
		z-index: 900;
		display: block;
		height: auto;
		min-height: 0;
		border-radius: 0;
	}
	.hd-liste .hd-liste-bascule {
		position: fixed;
		left: 50%;
		bottom: calc(24px + env(safe-area-inset-bottom, 0px));
		z-index: 950;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 12px 20px;
		font-size: 15px;
		font-weight: 600;
		color: #122327;
		background: #FFFFFF;
		border: 0;
		border-radius: 30px;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
		transform: translateX(-50%);
	}
	.hd-liste .hd-liste-bascule:hover,
	.hd-liste .hd-liste-bascule:focus { color: #122327; background: #FFFFFF; }
	.hd-liste.is-carte-mobile .hd-liste-ic-carte { display: none; }
	.hd-liste.is-carte-mobile .hd-liste-ic-liste { display: block; }
	.hd-liste-tri { margin-left: 0; width: 100%; }
	.hd-liste-grille { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 32px 16px; }
}
@media (max-width: 767px) {
	.hd-liste-barre { gap: 8px; }
	.hd-liste .hd-liste-btn--filtres { padding: 10px 12px; }
	.hd-liste-filtres { width: 100%; }
}