/* ==========================================================================
   Bloc Hero
   ========================================================================== */
.hero {
	--curve-h: clamp(32px, 3.6vw, 52px);
	--lines-x: max(var(--gutter), calc(50% - 512px));
	position: relative;
	padding-bottom: var(--curve-h);
	background: var(--c-white);
}

.hero.hero--has-cta {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.hero__stage {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(640px, 100svh, 850px);
	overflow: hidden;
	background: var(--c-dark);
	color: var(--c-white);
	isolation: isolate;
}

/* --- Diaporama --- */
.hero__slides,
.hero__slide {
	position: absolute;
	inset: 0;
}

.hero__slides {
	z-index: -1;
}

.hero__slide {
	opacity: 0;
	transition: opacity 1.4s var(--ease);
}

.hero__slide.is-active {
	opacity: 1;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Voile pour garder le texte lisible quelle que soit la photo. */
.hero__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 45%, rgba(20, 22, 18, .34), transparent 75%),
		linear-gradient(180deg, rgba(20, 22, 18, .18) 0%, rgba(20, 22, 18, .12) 60%, rgba(20, 22, 18, .28) 100%);
}

/* --- Lignes verticales décoratives : présentes sur la maquette, retirées
   en production (la variable --lines-x sert toujours à l'alignement). --- */
.hero__lines::before,
.hero__lines::after {
	display: none;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, .22);
	pointer-events: none;
}

.hero__lines::before { left: var(--lines-x); }
.hero__lines::after { right: var(--lines-x); }

/* --- Contenu --- */
.hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: calc(940px + 2 * var(--gutter));
	margin-inline: auto;
	padding: calc(var(--admin-bar) + var(--header-top) + var(--header-h) + 48px) var(--gutter) 150px;
	text-align: center;
}

.hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 6px 14px 6px 8px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.hero__avatars {
	display: flex;
}

.hero__avatars img {
	width: 34px;
	height: 34px;
	border: 2px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	object-fit: cover;
}

.hero__avatars img + img {
	margin-left: -10px;
}

.hero__star {
	width: 17px;
	height: 17px;
	color: var(--c-gold);
}

.hero__title {
	font-size: var(--fs-h1);
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-shadow: 0 1px 24px rgba(0, 0, 0, .18);
}

.hero__text {
	max-width: 60ch;
	margin-top: 18px;
	font-size: var(--fs-lead);
	font-weight: 300;
	line-height: 1.45;
	color: rgba(255, 255, 255, .88);
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 26px;
}

.hero__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
	padding: 0;
	list-style: none;
}

.hero__badge {
	--icon-contrast: #3c4642;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px 6px 10px;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-size: 0.8125rem;
	white-space: nowrap;
	color: rgba(255, 255, 255, .9);
}

.hero__badge .icon {
	width: 16px;
	height: 16px;
}

/* --- Légende + barres de progression --- */
.hero__slider-ui {
	position: absolute;
	right: max(var(--gutter), calc(50% - 660px + 24px));
	bottom: 72px;
	width: 270px;
}

.hero__caption {
	width: fit-content;
	margin-bottom: 14px;
	padding: 7px 12px;
	border-radius: 10px;
	background: rgba(24, 24, 20, .55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 0.9375rem;
}

.hero__caption:empty {
	display: none;
}

.hero__progress {
	display: flex;
	gap: 8px;
}

.hero__bar {
	position: relative;
	flex: 1;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__bar::before,
.hero__bar span {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	border-radius: 2px;
}

.hero__bar::before {
	right: 0;
	background: rgba(255, 255, 255, .35);
}

.hero__bar span {
	width: 0;
	background: var(--c-white);
}

.hero__bar.is-done span {
	width: 100%;
}

.hero__bar.is-active span {
	animation: hero-progress var(--hero-duration, 6s) linear forwards;
}

.hero.is-paused .hero__bar.is-active span {
	animation-play-state: paused;
}

.hero.is-static .hero__bar.is-active span {
	width: 100%;
	animation: none;
}

@keyframes hero-progress {
	from { width: 0; }
	to { width: 100%; }
}

/* --- Courbe crème sous l'image --- */
.hero__curve {
	position: absolute;
	/* Pleine largeur : la courbe rejoint les bords de l'écran, comme la photo. */
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--curve-h);
	background: radial-gradient(ellipse 49.5% 140% at 50% 100%, var(--c-white) calc(100% - 1px), var(--c-cream) 100%);
	pointer-events: none;
}

/* --- Grand bouton or --- */
.hero__cta {
	position: absolute;
	left: 50%;
	bottom: var(--curve-h);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	max-width: calc(100% - 2 * var(--gutter));
	padding: 12px 30px 12px 12px;
	border-radius: var(--radius-pill);
	background: var(--c-gold);
	color: var(--c-white);
	font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.625rem);
	font-weight: 600;
	line-height: 1.1;
	transform: translate(-50%, 50%);
	box-shadow: 0 10px 30px rgba(36, 31, 20, .14);
	transition: background-color .2s var(--ease);
}

.hero__cta:hover {
	background: var(--c-gold-dark);
}

.hero__cta-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.hero__cta-main {
	display: block;
	white-space: nowrap;
}

/* Deuxième ligne du bouton, plus petite. */
.hero__cta-sub {
	display: block;
	margin-top: 2px;
	font-size: 0.72em;
	font-weight: 500;
	line-height: 1.15;
}

.hero__cta-icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .28);
}

.hero__cta-icon .icon {
	width: 28px;
	height: 28px;
}

/* --- Tablette --- */
@media (max-width: 1179px) {
	.hero__slider-ui {
		right: var(--lines-x);
		width: min(270px, 40%);
		margin-right: 24px;
	}
}

/* --- Mobile --- */
@media (max-width: 767px) {
	.hero__stage {
		align-items: start;
		min-height: clamp(640px, 100svh, 820px);
	}

	.hero__content {
		padding-top: calc(var(--admin-bar) + var(--header-top) + var(--header-h) + 36px);
		padding-bottom: 170px;
	}

	.hero__title {
		font-size: 1.5rem;
	}

	.hero__rating {
		gap: 8px;
		max-width: 100%;
		font-size: 0.8125rem;
		text-align: left;
	}

	.hero__avatars img {
		width: 28px;
		height: 28px;
	}

	.hero__text {
		font-size: 0.9375rem;
	}

	.hero__buttons {
		flex-direction: column;
		width: 100%;
		max-width: 280px;
		margin-top: 28px;
	}

	.hero__buttons .btn {
		justify-content: center;
		width: 100%;
	}

	/* Mobile : pastilles côte à côte, plus compactes. */
	.hero__badges {
		gap: 6px;
		justify-content: center;
	}

	.hero__badge {
		gap: 6px;
		font-size: 0.6875rem;
		padding: 5px 9px 5px 7px;
	}

	.hero__badge .icon {
		width: 13px;
		height: 13px;
	}

	.hero__slider-ui {
		left: calc(var(--lines-x) + 8px);
		right: calc(var(--lines-x) + 8px);
		bottom: 88px;
		width: auto;
		margin-right: 0;
	}

	.hero__caption {
		border-radius: var(--radius-pill);
		padding-inline: 12px;
	}

	.hero__cta {
		width: auto;
		max-width: calc(100% - 2 * var(--gutter));
		padding: 9px 22px 9px 10px;
		font-size: 1.25rem;
		text-align: center;
	}

	.hero__cta-label {
		flex: 1;
	}

	.hero__cta-icon {
		width: 52px;
		height: 52px;
	}
}

/* --- Variante : texte aligné à gauche ---
   Le texte se cale toujours 125 px à gauche de la ligne verticale de gauche
   (mesure de la maquette), quelle que soit la largeur de l'écran. Le bloc
   occupe toute la largeur pour que ce calcul parte bien du bord de l'écran. */
.hero--left .hero__content {
	align-items: flex-start;
	max-width: none;
	margin-inline: 0;
	padding-left: max(var(--gutter), calc(var(--lines-x) - 125px));
	padding-right: var(--gutter);
	text-align: left;
}

.hero--left .hero__title {
	max-width: 21em;
}

.hero--left .hero__text {
	max-width: 52ch;
}

.hero--left .hero__buttons,
.hero--left .hero__badges {
	justify-content: flex-start;
}

@media (max-width: 767px) {
	.hero--left .hero__content {
		padding-left: var(--gutter);
	}

	.hero--left .hero__buttons {
		max-width: 300px;
	}
}

/* --- Variante : hauteur réduite (page Blog) --- */
.hero--compact .hero__stage {
	min-height: clamp(460px, 62svh, 560px);
}

.hero--compact .hero__content {
	padding-bottom: 110px;
}

@media (max-width: 767px) {
	.hero--compact .hero__stage {
		min-height: 480px;
	}

	.hero--compact .hero__content {
		padding-bottom: 130px;
	}
}

.hero__btn-gold {
	color: var(--c-dark);
}

/* Badge texte (à la place de la pastille d'avis) */
.hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 7px 16px;
	border: 1px solid rgba(219, 167, 61, .55);
	border-radius: var(--radius-pill);
	background: rgba(36, 31, 20, .45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 0.875rem;
	color: var(--c-white);
}

.hero__tag .icon {
	width: 16px;
	height: 16px;
	color: var(--c-gold);
}