/* =====================================================================
 *  Finitions UX — audit du 25/07/2026
 * ===================================================================== */

/* ---------------------------------------------------------------------
 *  1. Ancrage sous l'en-tête collant
 *
 *  Constaté sur la fiche annonce : après un défilement programmé, le titre
 *  visé passait SOUS l'en-tête collant et devenait illisible. `scroll-margin`
 *  réserve la hauteur de l'en-tête au moment du saut.
 * ------------------------------------------------------------------- */

:where( h1, h2, h3, h4, [id] ) {
	scroll-margin-top: 96px;
}

@media ( max-width: 767px ) {
	:where( h1, h2, h3, h4, [id] ) {
		scroll-margin-top: 80px;
	}
}

/* ---------------------------------------------------------------------
 *  2. « Par ligne 3 | 4 » sur mobile
 *
 *  Sous 768 px la grille affiche une annonce par ligne : proposer de choisir
 *  entre 3 et 4 colonnes n'a aucun effet visible, et le contrôle occupe une
 *  barre entière au-dessus des résultats. On masque le seul réglage sans
 *  objet ; « Par page », lui, reste utile et reste affiché.
 * ------------------------------------------------------------------- */

@media ( max-width: 767px ) {
	.li-lpr > .li-lpr__label,
	.li-lpr > .li-lpr__opts {
		display: none;
	}
}

/* ---------------------------------------------------------------------
 *  3. Mention sous le bouton « Contacter l'hôte »
 *
 *  Le libellé complet (« Créer un compte pour contacter l'hôte ») tenait sur
 *  3 lignes dans une pilule de 279 px. Le verbe d'action est passé sur le
 *  bouton, la condition d'accès sous forme de mention discrète.
 * ------------------------------------------------------------------- */

.li-msg-locked__note {
	display: block;
	margin-top: 8px;
	text-align: center;
	font-family: var( --sans, inherit );
	font-size: .82rem;
	line-height: 1.35;
	color: var( --ink-2, #5b5563 );
}

/* ---------------------------------------------------------------------
 *  4. Visionneuse photo (lightbox)
 *
 *  Complète les règles de hivepress.css (l.197-206). Ajouts du 25/07/2026 :
 *  scène de zoom, légende, bande de miniatures, cibles tactiles au gabarit.
 *  Le JS correspondant est dans assets/js/listing.js (initLightbox).
 * ------------------------------------------------------------------- */

.li-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	touch-action: none;          /* les gestes sont pilotés par le JS */
}

.li-lightbox .li-lightbox__img {
	/* La barre du bas (légende + compteur + miniatures) prend ~120 px :
	   on rend cette place, sinon la photo passe dessous. */
	max-height: 70vh;
	transform-origin: center center;
	transition: transform .18s ease, opacity .15s ease;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
}

.li-lightbox.is-zoomed .li-lightbox__img {
	cursor: grab;
	transition: none;            /* le déplacement doit coller au doigt */
}

.li-lightbox__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px 12px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	/* Le fond de la visionneuse est à 92 % d'opacité : la légende de la galerie
	   restée sur la page transparaissait derrière les miniatures, donnant deux
	   textes superposés. La barre est donc opaque sur sa partie utile. */
	background: linear-gradient( to top, rgba( 20, 12, 18, 1 ) 62%, rgba( 20, 12, 18, 0 ) );
}

.li-lightbox__cap {
	color: #fff;
	font-family: var( --sans, inherit );
	font-size: .95rem;
	font-weight: 600;
	text-align: center;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, .5 );
}

.li-lightbox__cap:empty {
	display: none;
}

/* inc/photo-captions.php injecte déjà sa propre légende dans la visionneuse
   (`.li-photo-cap--lb`, en position fixe). Depuis que la barre du bas porte la
   légende, les deux s'affichaient en même temps — deux fois le même mot, dont
   un par-dessus les miniatures. On masque l'ancienne, mais SEULEMENT si la
   nouvelle est présente : si cette barre venait à disparaître, l'ancienne
   reprend son rôle et aucune légende n'est perdue. */
.li-lightbox:has( .li-lightbox__cap ) .li-photo-cap--lb {
	display: none;
}

/* Le compteur était en position absolue en bas : il rejoint la barre. */
.li-lightbox .li-lightbox__count {
	position: static;
	color: rgba( 255, 255, 255, .78 );
	font-size: .85rem;
}

.li-lightbox__thumbs {
	display: flex;
	gap: 8px;
	max-width: 100%;
	overflow-x: auto;
	padding: 4px 2px;
	scrollbar-width: none;
}

.li-lightbox__thumbs::-webkit-scrollbar {
	display: none;
}

.li-lightbox__thumb {
	flex: none;
	width: 62px;
	height: 46px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .55;
	transition: opacity .18s ease, border-color .18s ease;
}

.li-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.li-lightbox__thumb:hover,
.li-lightbox__thumb:focus-visible {
	opacity: .85;
}

.li-lightbox__thumb.is-current {
	opacity: 1;
	border-color: #fff;
}

/* Cibles tactiles : la croix faisait moins de 44 px, les flèches 42 px
   sous 560 px — sous le seuil confortable au doigt. */
.li-lightbox__close {
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media ( max-width: 560px ) {
	.li-lightbox {
		padding: 12px;
	}

	.li-lightbox__nav {
		width: 46px;
		height: 46px;
	}

	.li-lightbox .li-lightbox__img {
		max-height: 62vh;
	}

	.li-lightbox__thumb {
		width: 54px;
		height: 40px;
	}
}

/* ---------------------------------------------------------------------
 *  5. Cibles tactiles
 *
 *  Mesuré sur la fiche annonce en 375 px : 49 éléments interactifs sur 117
 *  faisaient moins de 40 px. Les responsables identifiés sont les puces et
 *  flèches de carrousel, les pastilles de pagination et la croix du bandeau.
 *  On les élargit sans changer leur apparence : la zone cliquable grandit,
 *  le visuel reste identique.
 * ------------------------------------------------------------------- */

@media ( max-width: 900px ) {

	/* La cible tactile est posée en PSEUDO-ÉLÉMENT centré, comme pour les
	   puces ci-dessous. Un min-width/min-height de 44px déformait les flèches
	   des cartes (cercle de 34px étiré en ovale de 34×44 — visible en vue
	   Carte sur mobile) : la zone cliquable grandit, le rond reste rond. */
	.slick-arrow {
		min-width: 0;
		min-height: 0;
	}

	.slick-arrow::after {
		content: '' !important;
		position: absolute;
		inset: 50% auto auto 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	/* Les puces gardent leur petit point visible ; c'est la zone tactile,
	   posée en pseudo-élément centré, qui atteint 44 px. */
	.slick-dots li {
		position: relative;
	}

	.slick-dots li::after {
		content: '';
		position: absolute;
		inset: 50% auto auto 50%;
		width: 44px;
		height: 44px;
		transform: translate( -50%, -50% );
	}

	.li-lpp__btn,
	.li-lpr__btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.li-signup-bar__close {
		min-width: 44px;
		min-height: 44px;
	}
}