/* =========================================================
   HERO ZOOM — dézoom + arrondis au scroll (façon SumUp)
   ---------------------------------------------------------
   Le média part en plein écran (scale 1, radius 0) et c'est le
   JS (hero-zoom.js) qui le rétrécit + arrondit selon le scroll.
   La couleur de page apparaît dans la marge révélée.

   RÉGLAGES EXPOSÉS (modifiables ici ou via data-* sur la section) :
     --zoom-scale-end   : échelle finale (1 = plein écran ; plus petit = plus dézoomé)
     --zoom-radius-end  : arrondi final des coins (px)
     --zoom-scroll      : longueur de scroll que dure l'animation (vh)
   data-scale-end / data-radius-end sur .hero-zoom priment sur les variables.
   ========================================================= */
.hero-zoom {
	--zoom-scale-end: 0.86;
	--zoom-radius-end: 44px;
	--zoom-scroll: 80vh;
	--hero-zoom-page-bg: var(--color-bg, #f7f5f0);

	position: relative;
	/* plus haute que l'écran : 100vh visibles + une piste de scroll */
	height: calc(100vh + var(--zoom-scroll));
	background: var(--hero-zoom-page-bg);
}

.hero-zoom__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh; /* tient compte de la barre d'adresse mobile */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* la marge révélée laisse voir le fond de page */
	background: var(--hero-zoom-page-bg);
}

.hero-zoom__media {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 0; /* valeur de départ, animée par le JS */
	overflow: hidden;
	transform-origin: center center;
	will-change: transform, border-radius; /* compositeur GPU = fluide */
	background: var(--color-dark, #0d0d0d);
}

/* Image plein cadre */
.hero-zoom__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Voile pour garantir la lisibilité du texte par-dessus l'image */
.hero-zoom__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(13, 13, 13, 0.45) 0%,
		rgba(13, 13, 13, 0.25) 42%,
		rgba(13, 13, 13, 0.68) 100%
	);
}

/* Contenu DANS le média : il rétrécit avec la carte (effet SumUp) */
.hero-zoom__content {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: clamp(1.5rem, 5vw, 4rem);
	color: #fff;
}
.hero-zoom__content .eyebrow {
	color: var(--color-accent, #c8a96e);
	margin-bottom: var(--s-4, 1rem);
}
.hero-zoom__title {
	font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
	font-weight: 600;
	font-size: clamp(2.75rem, 6.5vw, 6rem);
	line-height: 1;
	letter-spacing: -0.01em;
	max-width: 18ch;
	margin: 0;
	color: #fff;
	text-wrap: balance;
}
.hero-zoom__subtitle {
	margin-top: clamp(1rem, 2vw, 1.5rem);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: rgba(255, 255, 255, 0.82);
	max-width: 46ch;
}
.hero-zoom__content .btn-row {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Indice de scroll */
.hero-zoom__scrollhint {
	position: absolute;
	z-index: 1;
	bottom: clamp(1.5rem, 4vh, 2.5rem);
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	animation: heroZoomBob 1.8s ease-in-out infinite;
}
.hero-zoom__scrollhint span {
	font-size: 1.2rem;
}
@keyframes heroZoomBob {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 6px); }
}

/* Accessibilité : si l'utilisateur refuse les animations,
   on garde un hero plein écran statique, posé dans le flux (pas de piste vide). */
@media (prefers-reduced-motion: reduce) {
	.hero-zoom {
		height: 100vh;
		height: 100svh;
	}
	.hero-zoom__sticky {
		position: relative;
		height: 100vh;
		height: 100svh;
	}
	.hero-zoom__scrollhint {
		animation: none;
	}
}