/**
 * Page Location saisonnière — « La collection ».
 * Bandeau vedette immersif + tuiles photo plein cadre, titres serif
 * en surimpression, zooms lents au survol. Esprit collection d'hôtels.
 */

.gites-collection {
	padding: 5rem 0 6rem;
}

/* En-tête aligné à gauche, accroche poussée à droite */
.gites-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 4rem;
	margin-bottom: 2.5rem;
}

.gites-header .section-eyebrow::after {
	display: none;
}

.gites-header .section-title {
	margin-bottom: 0;
}

.gites-header-sub {
	margin: 0 0 0.4rem;
	color: var( --color-text-muted, #717171 );
	font-size: 1rem;
	line-height: 1.6;
	max-width: 360px;
}

.gites-hidden {
	display: none !important;
}

.gites-empty {
	text-align: center;
	color: var( --color-text-muted, #717171 );
	padding: 3rem 0;
	font-size: 1rem;
}

/* ── Bandeau vedette ───────────────────────────────────────────────── */

.gites-feature {
	position: relative;
	display: block;
	border-radius: 24px;
	overflow: hidden;
	margin-bottom: 2rem;
	aspect-ratio: 21 / 9;
	min-height: 400px;
	min-width: 0; /* sinon min-height, via le ratio, impose une largeur minimale */
	isolation: isolate;
}

.gites-feature img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.gites-feature::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient( 90deg, rgba( 10, 22, 24, 0.72 ) 0%, rgba( 10, 22, 24, 0.32 ) 48%, rgba( 10, 22, 24, 0.08 ) 75% ),
		linear-gradient( 0deg, rgba( 10, 22, 24, 0.82 ) 0%, rgba( 10, 22, 24, 0 ) 60% );
	z-index: 1;
}

.gites-feature:hover img {
	transform: scale( 1.045 );
}

/* Photos en fondu enchaîné (assets/js/gites-slider.js) : la nouvelle
   apparaît par-dessus l'ancienne (.is-prev), gardée visible dessous */
.gites-feature-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.gites-feature-media img {
	opacity: 0;
}

.gites-feature-media img[hidden] {
	display: none;
}

.gites-feature-media img.is-prev {
	opacity: 1;
	z-index: 1;
}

.gites-feature-media img.is-active {
	opacity: 1;
	z-index: 2;
	transition: opacity 1.4s ease, transform 1.4s cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

.gites-feature-body {
	position: absolute;
	z-index: 2;
	left: clamp( 1.5rem, 4vw, 3.5rem );
	right: clamp( 1.5rem, 4vw, 3.5rem );
	bottom: clamp( 1.5rem, 3.5vw, 3rem );
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
}

.gites-feature-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --color-accent-light, #50c4c3 );
}

.gites-feature-title {
	font-family: var( --font-heading );
	font-size: clamp( 2rem, 4.2vw, 3.4rem );
	font-weight: 500;
	line-height: 1.05;
	color: var( --color-cream, #f5efe3 );
	max-width: 16em;
	text-shadow: 0 2px 24px rgba( 10, 22, 24, 0.65 );
}

.gites-feature-eyebrow,
.gites-feature-cta {
	text-shadow: 0 1px 12px rgba( 10, 22, 24, 0.6 );
}

.gites-feature-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gites-chip {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var( --color-cream, #f5efe3 );
	background: rgba( 255, 255, 255, 0.09 );
	border: 1px solid rgba( 245, 239, 227, 0.35 );
	backdrop-filter: blur( 8px );
	-webkit-backdrop-filter: blur( 8px );
	border-radius: 999px;
	padding: 0.4rem 1rem;
}

.gites-feature-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --color-cream, #f5efe3 );
	border-bottom: 1px solid rgba( 245, 239, 227, 0.45 );
	padding-bottom: 0.4rem;
	transition: color 0.25s ease, border-color 0.25s ease, gap 0.25s ease;
}

.gites-feature-cta svg,
.gites-feature-cta span[aria-hidden] svg {
	width: 16px;
	height: 16px;
}

.gites-feature:hover .gites-feature-cta {
	color: var( --color-accent-light, #50c4c3 );
	border-color: var( --color-accent-light, #50c4c3 );
	gap: 1rem;
}

.gites-chip--icon {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.gites-chip--icon svg {
	width: 14px;
	height: 14px;
}

.gites-feature-prix {
	font-size: 0.95rem;
	font-weight: 600;
	color: var( --color-cream, #f5efe3 );
	text-shadow: 0 1px 12px rgba( 10, 22, 24, 0.6 );
}

/* Disponibilité sur les dates recherchées */
.gite-dispo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
}

.gite-dispo[hidden] {
	display: none;
}

.gite-dispo::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}

.gite-dispo.is-free {
	background: rgba( 44, 159, 75, 0.12 );
	color: #1f7a39;
}

.gite-dispo.is-request {
	background: rgba( 248, 193, 63, 0.2 );
	color: #8a6200;
}

.gite-dispo.is-unknown {
	background: rgba( 107, 107, 107, 0.1 );
	color: var( --color-text-muted, #6b6b6b );
}

.gites-chip.gite-dispo.is-free {
	background: rgba( 44, 159, 75, 0.85 );
	color: #fff;
}

.gites-chip.gite-dispo.is-request {
	background: rgba( 248, 193, 63, 0.9 );
	color: #3d2b00;
}

.gites-chip.gite-dispo.is-unknown {
	background: rgba( 255, 255, 255, 0.14 );
	color: var( --color-cream, #f5efe3 );
}

/* ── Liste éditoriale alternée ─────────────────────────────────────── */

.gites-list {
	display: flex;
	flex-direction: column;
	gap: clamp( 3rem, 6vw, 5rem );
	margin-top: clamp( 2.5rem, 5vw, 4rem );
}

.gite-row {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: clamp( 1.5rem, 4vw, 4rem );
	align-items: center;
}

/* Alternance pilotée par classe (recalculée par le JS après filtrage
   pour que le motif gauche/droite reste régulier) */
.gite-row.is-flipped {
	grid-template-columns: 5fr 7fr;
}

.gite-row.is-flipped .gite-row-media {
	order: 2;
}

.gite-row.is-flipped .gite-row-body {
	order: 1;
}

/* Photos qui défilent (assets/js/gites-slider.js) : défilement natif
   avec aimantation, donc glisser au doigt sur mobile */
.gite-row-media {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	isolation: isolate;
	background: var( --color-cream, #f5efe3 );
}

.gite-slides {
	display: flex;
	width: 100%;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.gite-slides::-webkit-scrollbar {
	display: none;
}

.gite-slides .gite-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Voile bas : lisibilité des points */
.gite-row-media[data-gite-slider]::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 28%;
	background: linear-gradient( 0deg, rgba( 10, 22, 24, 0.42 ), rgba( 10, 22, 24, 0 ) );
	pointer-events: none;
	z-index: 1;
}

.gite-slides-btn {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.92 );
	color: var( --color-ink, #1c2b2d );
	box-shadow: 0 4px 18px rgba( 10, 22, 24, 0.18 );
	cursor: pointer;
	opacity: 0;
	transform: scale( 0.9 );
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.gite-slides-btn.is-prev {
	left: 1rem;
}

.gite-slides-btn.is-next {
	right: 1rem;
}

.gite-slides-btn svg {
	width: 18px;
	height: 18px;
}

.gite-row-media:hover .gite-slides-btn,
.gite-slides-btn:focus-visible {
	opacity: 1;
	transform: scale( 1 );
}

.gite-slides-btn:hover {
	background: #fff;
}

.gite-slides-dots {
	position: absolute;
	left: 1.25rem;
	bottom: 1.1rem;
	z-index: 2;
	display: flex;
	gap: 6px;
	pointer-events: none;
}

.gite-slides-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.55 );
	transition: width 0.35s ease, background 0.35s ease;
}

.gite-slides-dot.is-active {
	width: 22px;
	background: #fff;
}

/* Écrans tactiles : on glisse, pas de flèches */
@media ( hover: none ) {
	.gite-slides-btn {
		display: none;
	}
}

.gite-row-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.5rem 0;
}

.gite-row-num {
	font-family: var( --font-heading );
	font-size: clamp( 3rem, 5vw, 4.5rem );
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: transparent;
	-webkit-text-stroke: 1px rgba( 4, 173, 186, 0.45 );
}

.gite-row-title {
	margin: 0;
}

.gite-row-title a {
	font-family: var( --font-heading );
	font-size: clamp( 1.6rem, 2.6vw, 2.2rem );
	font-weight: 500;
	line-height: 1.1;
	color: var( --color-ink, #1c2b2d );
	text-decoration: none;
	transition: color 0.2s ease;
}

.gite-row-title a:hover {
	color: var( --color-accent-dark, #038a96 );
}

.gite-row-meta {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --color-accent-dark, #038a96 );
}

.gite-row-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.15rem 0 0;
}

.gite-row-badges:not( :has( > :not( [hidden] ) ) ) {
	display: none;
}

/* Chiffres clés : voyageurs, chambres, lits, salles de bain — sur une
   ligne, le chiffre en capitales de titre et son libellé à la suite */
.gite-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
	width: 100%;
	margin: 0.6rem 0 0;
	padding: 0.9rem 0;
	list-style: none;
	border-top: 1px solid var( --color-border, #e5e5e5 );
	border-bottom: 1px solid var( --color-border, #e5e5e5 );
}

.gite-spec {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	white-space: nowrap;
}

.gite-spec-num {
	font-family: var( --font-heading );
	font-size: 1.7rem;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var( --color-ink, #1c2b2d );
}

.gite-spec-label {
	font-size: 0.82rem;
	color: var( --color-text-muted, #717171 );
}

/* Ce que contient le gîte : icône seule, sans pastille */
.gite-amenities {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 0.65rem 1.5rem;
	width: 100%;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.gite-amenity {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	font-size: 0.88rem;
	line-height: 1.3;
	color: var( --color-ink, #1c2b2d );
}

.gite-amenity-icon {
	flex: 0 0 auto;
	color: var( --color-accent-dark, #038a96 );
}

.gite-amenity-icon svg {
	display: block;
	width: 17px;
	height: 17px;
}

.gite-amenity.is-more {
	font-weight: 600;
	color: var( --color-accent-dark, #038a96 );
}

/* Pied de carte : prix à gauche, lien à droite */
.gite-row-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem 2rem;
	width: 100%;
	margin-top: 1.5rem;
}

.gite-row-prix {
	margin: 0;
	font-size: 0.82rem;
	color: var( --color-text-muted, #717171 );
}

.gite-row-prix strong {
	margin: 0 0.15rem;
	font-family: var( --font-heading );
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1;
	font-variant-numeric: lining-nums;
	color: var( --color-ink, #1c2b2d );
}

.gite-row-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --color-ink, #1c2b2d );
	text-decoration: none;
	border-bottom: 1.5px solid var( --color-accent, #04adba );
	padding-bottom: 0.35rem;
	transition: color 0.25s ease, gap 0.25s ease;
}

.gite-row-cta svg,
.gite-row-cta span[aria-hidden] svg {
	width: 15px;
	height: 15px;
}

.gite-row-cta:hover {
	color: var( --color-accent-dark, #038a96 );
	gap: 1rem;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media ( max-width: 1024px ) {
	.gites-feature {
		aspect-ratio: 16 / 9;
		min-height: 340px;
	}
}

@media ( max-width: 860px ) {
	.gite-row,
	.gite-row.is-flipped {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}

	.gite-row.is-flipped .gite-row-media {
		order: 0;
	}

	.gite-row.is-flipped .gite-row-body {
		order: 1;
	}

	.gite-row-num {
		position: absolute;
		top: -4rem;
		right: 1rem;
		font-size: 2.6rem;
		-webkit-text-stroke: 1px rgba( 245, 239, 227, 0.85 );
	}
}

@media ( max-width: 640px ) {
	.gites-collection {
		padding: 3.5rem 0 4rem;
	}

	/* Chiffres clés en 2 × 2, équipements sur une colonne (libellés entiers) */
	.gite-specs {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 0.6rem 1rem;
	}

	.gite-amenities {
		grid-template-columns: 1fr;
		gap: 0.55rem;
	}

	/* Vedette : hauteur libre, le texte (chips comprises) pousse le cadre */
	.gites-feature {
		aspect-ratio: auto;
		min-height: 420px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 18px;
	}

	.gites-feature-body {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		padding: 1.5rem 1.25rem;
	}
}