/* ============================================================
   EN-TÊTE DE FICHE  –  .wc-fiche
   Bandeau (titre + bouton réserver) + image héro cliquable (lightbox)
   + galerie + tarifs + sections dépliables (accordéon).
   Rendu par le shortcode [fiche_entete].
   ============================================================ */

.wc-fiche {
	display: flex;
	flex-direction: column;
	gap: var(--s-xl);
	width: 100%;

	/* ── Bandeau : titre (gauche) + bouton réserver (droite) ─ */

	& .wc-fiche__bandeau {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--s-ld);
		padding: var(--s-md) var(--s-xl);
		/* Même fond que le header (texture bois + dégradés sombres) */
		background-color: var(--c-brown-800);
		background-image:
			linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
			linear-gradient(rgba(20, 8, 1, 0.45), rgba(20, 8, 1, 0.45)),
			var(--wc-img-carte-bg);
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	& .wc-fiche__titre {
		margin: 0;
		min-width: 0;
		color: var(--c-text-inverse);
		font-family: var(--ff-heading);
		font-size: var(--fs-h3);
		font-weight: var(--fw-bold);
		line-height: var(--lh-tight);
		text-transform: uppercase;
		letter-spacing: var(--ls-wide);
		overflow-wrap: break-word;   /* évite le débordement des titres longs */
	}

	/* ── Image héro (réutilise le markup .logement-galerie) ─ */

	& .logement-galerie--hero {
		display: block;
	}

	& .logement-galerie--hero .logement-galerie__thumb {
		aspect-ratio: 16 / 9;
		width: 100%;

		/* Photo normale par défaut, léger assombrissement au survol */
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 1;
			background: rgba(43, 26, 14, 0);
			transition: background-color var(--tr-base);
			pointer-events: none;
		}

		/* Pas de zoom au survol : on neutralise les effets hérités de la galerie */
		&:hover,
		&:focus-visible {
			transform: none;
			box-shadow: none;
		}

		&:hover img,
		&:focus-visible img {
			transform: none;
		}

		/* Au survol, un tout petit peu d'assombrissement pour signaler le clic */
		&:hover::after,
		&:focus-visible::after {
			background: rgba(43, 26, 14, 0.30);
		}
	}

	& .wc-fiche__zoom {
		position: absolute;
		z-index: 2;
		right: var(--s-md);
		bottom: var(--s-md);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		background: rgba(43, 26, 14, 0.6);
		color: var(--c-text-inverse);
		border-radius: var(--br-circle);
		pointer-events: none;
		transition: background-color var(--tr-base);

		& svg {
			fill: none !important;
			stroke: currentColor !important;
			width: 1.25rem !important;
			height: 1.25rem !important;
		}
	}

	& .logement-galerie--hero .logement-galerie__thumb:hover .wc-fiche__zoom,
	& .logement-galerie--hero .logement-galerie__thumb:focus-visible .wc-fiche__zoom {
		background: var(--c-primary);
	}

	/* ── Bouton réserver (dans le bandeau, à droite du titre) ─ */

	& .wc-fiche__reserver {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--s-sm);
		min-height: 2.75rem;            /* 44px – cible tactile */
		padding: var(--s-md) var(--s-2xl);
		background: var(--c-primary);
		color: var(--c-text-inverse) !important;
		font-family: var(--ff-body);
		font-size: var(--fs-button);
		font-weight: var(--fw-semibold);
		text-transform: uppercase;
		letter-spacing: var(--ls-wide);
		text-decoration: none;
		border-radius: var(--br-pill);
		-webkit-tap-highlight-color: transparent;
		transition: background-color var(--tr-base), transform var(--tr-base);

		&:hover,
		&:active {
			background: var(--c-primary-hover);
			color: var(--c-text-inverse) !important;
			transform: translateY(-2px);
		}

		&:focus { outline: none; }

		&:focus-visible {
			outline: 3px solid var(--c-green-300) !important;
			outline-offset: 2px;
		}
	}

	& .wc-fiche__reserver-icon {
		flex: 0 0 auto;
		width: 1.25rem !important;
		height: 1.25rem !important;
		fill: none !important;
		stroke: currentColor !important;
	}
}

/* ============================================================
   ACCESSIBILITÉ – mouvement réduit
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.wc-fiche .wc-fiche__zoom,
	.wc-fiche .wc-fiche__reserver,
	.wc-fiche .logement-galerie--hero .logement-galerie__thumb::after {
		transition: none;
	}

	.wc-fiche .wc-fiche__reserver:hover,
	.wc-fiche .wc-fiche__reserver:active {
		transform: none;
	}
}

/* ── Badges infos pratiques (chiens / recharge / ANCV) ───── */
/* Texte simple sur une seule ligne, pas de pilule ni d'icône. */

.wc-fiche__badges {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--s-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--c-text);
	font-size: var(--fs-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

.wc-fiche__badge {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;

	&:not(:last-child)::after {
		content: "\2022";
		margin-left: var(--s-sm);
		color: var(--c-brown-200);
		font-weight: var(--fw-regular);
	}
}

/* ── Sections dépliables + consignes arrivée/départ ──────── */
/* Deux accordéons distincts ([fiche_accordion] + [consignes_arrivee_depart])
   dans le même conteneur .wc-fiche__sections : on annule le gap hérité de
   .wc-fiche pour ne garder que l'écart standard entre items d'accordéon. */

.wc-fiche__sections .wc-accordion + .wc-accordion {
	margin-top: var(--s-md);
}

/* ── Adresse (après les sections dépliables) ─────────────── */

.wc-fiche__adresse {
	display: flex;
	align-items: center;
	gap: var(--s-md);
	padding: var(--s-ld) var(--s-xl);
	background: var(--c-cream-300);
	border: 1px solid rgba(133, 100, 60, 0.18);
	border-radius: var(--br-md);
	color: var(--c-text);
	font-style: normal;            /* neutralise l'italique par défaut de <address> */
	font-size: var(--fs-body);
	line-height: var(--lh-snug);

	& .wc-fiche__adresse-icon {
		flex-shrink: 0;
		color: var(--c-primary);
		fill: none !important;
		stroke: currentColor !important;
	}

	& a {
		color: inherit;
		text-decoration: none;
		transition: color var(--tr-base);

		&:hover,
		&:focus {
			color: var(--c-primary) !important;
			text-decoration: underline;
		}
	}
}

/* ── Carte de localisation (Leaflet) ─────────────────────── */

.wc-fiche__carte {
	width: 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablette ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.wc-fiche {
		gap: var(--s-ld);
	}

	.wc-fiche .wc-fiche__bandeau {
		padding: var(--s-md) var(--s-ld);
	}

	.wc-fiche .logement-galerie--hero .logement-galerie__thumb {
		aspect-ratio: 3 / 2;
	}
}

/* ── Mobile : bandeau empilé, bouton pleine largeur ──────── */
@media (max-width: 600px) {
	.wc-fiche .wc-fiche__bandeau {
		flex-direction: column;
		align-items: stretch;
		gap: var(--s-md);
	}

	.wc-fiche .wc-fiche__reserver {
		width: 100%;
	}

	.wc-fiche .logement-galerie--hero .logement-galerie__thumb {
		aspect-ratio: 4 / 3;
	}
}

/* ── Petit mobile : on resserre titre et bouton ──────────── */
@media (max-width: 400px) {
	.wc-fiche .wc-fiche__titre {
		letter-spacing: var(--ls-normal);
	}

	.wc-fiche .wc-fiche__reserver {
		padding: var(--s-md) var(--s-ld);
	}
}