/* ============================================================
   HERO CAROUSEL  –  [hero_carousel] / [hero_slide]
   Direction « Far West cinématique » : photo plein cadre,
   effet Ken Burns, overlay dégradé, accroche + titre + CTA.
   ============================================================ */

.wc-hero {
	position: relative;
	width: 100%;
}

/* Variante plein écran : casse la largeur du conteneur Elementor */
.wc-hero--bleed {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.wc-hero__viewport {
	position: relative;
	height: var(--wc-hero-h, clamp(28rem, 80vh, 46rem));
	overflow: hidden;
	background: var(--c-brown-900);
}

/* ── Piste + slides empilées (crossfade) ──────────────────── */

.wc-hero__track {
	display: grid;
	grid-template-areas: "slide";
	height: 100%;
}

.wc-hero__slide {
	grid-area: slide;
	position: relative;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;

	&.is-active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.8s ease, visibility 0s linear 0s;
		z-index: 1;
	}
}

/* ── Média de fond + effet Ken Burns ──────────────────────── */

.wc-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.wc-hero__img {
	/* Hello Elementor force height:auto/max-width sur les img → on impose le plein cadre */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ── Overlay de lisibilité ────────────────────────────────── */

.wc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 40%),
		linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.15) 80%);
}

/* ── Contenu (accroche / titre / sous-titre / CTA) ────────── */

.wc-hero__content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	width: 100%;
	max-width: var(--container-w);
	margin: 0 auto;
	padding: var(--s-5xl) var(--s-2xl);

	&--center {
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

.wc-hero__inner {
	max-width: 40rem;

	.wc-hero__content--center & {
		margin: 0 auto;
	}
}

.wc-hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--s-md);
	padding: var(--s-xs) var(--s-ld);
	background: rgba(196, 164, 74, 0.18);
	border: 1px solid var(--c-gold);
	border-radius: var(--br-pill);
	color: var(--c-cream-400);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
}

.wc-hero__title {
	margin: 0;
	color: var(--c-white);
	font-family: var(--ff-heading);
	font-size: var(--fs-h1);
	line-height: var(--lh-tight);
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.wc-hero__subtitle {
	margin: var(--s-ld) 0 0;
	color: var(--c-cream-400);
	font-size: var(--fs-h5);
	line-height: var(--lh-normal);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.wc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-md);
	margin-top: var(--s-xl);

	.wc-hero__content--center & {
		justify-content: center;
	}
}

/* ── Badges « infos pratiques » (persistants sur toutes les slides) ─ */

.wc-hero__badges {
	position: absolute;
	top: 3rem;
	right: var(--s-2xl);
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--s-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Logo seul : pastille ronde, libellé en infobulle au survol */
.wc-hero__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--s-sm);
	background: rgba(43, 26, 14, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--br-circle);
	color: var(--c-white);
	line-height: 0;
	backdrop-filter: blur(2px);
	cursor: help;
}

.wc-hero__badge-icon {
	width: 2.75rem !important;
	height: 2.75rem !important;
	flex: 0 0 auto;
}

.wc-hero__badge-img {
	width: 2.9rem !important;
	height: 2.9rem !important;
	max-width: none !important;
	object-fit: contain;
	flex: 0 0 auto;
	display: block;
}

/* Infobulle : libellé affiché au survol / focus, sinon lu par les lecteurs d'écran */
.wc-hero__badge-label {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 7;
	padding: var(--s-xs) var(--s-md);
	background: rgba(43, 26, 14, 0.95);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--br-sm);
	color: var(--c-white);
	font-size: var(--fs-small);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: var(--sh-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--tr-base), transform var(--tr-base), visibility var(--tr-base);
	pointer-events: none;
}

.wc-hero__badge:hover .wc-hero__badge-label,
.wc-hero__badge:focus-within .wc-hero__badge-label {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.wc-hero__badge-label {
		transition: none;
	}
}

/* ── Puces ────────────────────────────────────────────────── */

.wc-hero__dots {
	position: absolute;
	bottom: var(--s-xl);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: var(--s-sm) !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none;
}

.wc-hero__dot {
	position: relative;
	width: 0.625rem !important;
	height: 0.625rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: var(--br-circle) !important;
	background: rgba(255, 255, 255, 0.25) !important;
	font-size: 0 !important;
	line-height: 0 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background-color var(--tr-base), transform var(--tr-base) !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-appearance: none !important;
	appearance: none !important;

	&.is-active {
		background: var(--c-white) !important;
		border-color: var(--c-white) !important;
		transform: scale(1.3) !important;

		&:hover,
		&:focus {
			background: var(--c-white) !important;
			transform: scale(1.3) !important;
		}
	}

	&:hover,
	&:focus,
	&:active {
		background: rgba(255, 255, 255, 0.65) !important;
		transform: scale(1.15) !important;
	}
}

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

@media (max-width: 800px) {
	.wc-hero__content {
		/* Plus de marge basse pour dégager le CTA au-dessus des puces */
		padding: var(--s-3xl) var(--s-xl) var(--s-5xl);
	}

	.wc-hero__dots {
		bottom: var(--s-md);
	}

	.wc-hero__badges {
		right: var(--s-md);
		gap: var(--s-sm);
	}
}

/* Header réduit sous 768px : on remonte les badges en conséquence */
@media (max-width: 768px) {
	.wc-hero__badge {
		padding: 0.375rem;
	}

	.wc-hero__badge-icon {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	.wc-hero__badge-img {
		width: 2.4rem !important;
		height: 2.4rem !important;
	}
}

@media (max-width: 500px) {
	.wc-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.wc-hero__btn {
		justify-content: center;
	}
}