/**
 * CBS Theme — hero accueil (content-structure.md §2)
 */

.hero {
	/* Surchargé en ligne par le template (URL poster ACF ou défaut). */
	--cbs-hero-poster: url("../../images/hero-home.webp");
	position: relative;
	display: flex;
	align-items: center;
	min-height: 85vh;
	min-height: 85dvh;
	padding-block: var(--cbs-space-24) var(--cbs-section-py);
	padding-top: max(var(--cbs-space-24), 6rem);
	margin-top: 0;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

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

.hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--cbs-overlay-dark);
	z-index: 1;
}

.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--cbs-container-wide);
	text-align: center;
}

.hero__kicker {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-xs);
	font-weight: 600;
	letter-spacing: var(--cbs-tracking-wide);
	text-transform: uppercase;
	color: var(--cbs-gold);
	margin: 0 0 var(--cbs-space-6);
	text-align: center;
}

.hero__title {
	font-family: var(--cbs-font-serif);
	font-size: var(--cbs-text-display);
	font-weight: 400;
	line-height: var(--cbs-leading-tight);
	letter-spacing: var(--cbs-tracking-tight);
	color: var(--cbs-white);
	margin: 0 0 var(--cbs-space-6);
	/* Voir .methode-spa-hero__title : mesure alignée à 64 rem pour tenir en
	   deux lignes. Le titre de l'accueil reste sur 3 lignes tant que son texte
	   n'est pas raccourci. */
	max-width: min(64rem, 100%);
	margin-inline: auto;
}

.hero__subtitle {
	font-family: var(--cbs-font-sans);
	font-size: var(--cbs-text-lead);
	line-height: var(--cbs-leading-relaxed);
	color: var(--cbs-silver-100);
	margin: 0 auto var(--cbs-space-10);
	max-width: 40rem;
	text-align: center;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cbs-space-4);
	justify-content: center;
	align-items: center;
}

/* ——— Écrans larges mais peu hauts (portables 1366x768, 1440x900) ———
   Le héro mesurait 1048 px de haut pour une fenêtre de 695 : le titre était
   coupé et les deux boutons tombaient sous la ligne de flottaison. Le titre à
   88 px dans une mesure de 36 rem partait sur 6 lignes.
   On resserre la respiration verticale et on réduit le corps du titre. La
   mesure suit celle de la règle de base (64 rem) : la rétrécir ici rajouterait
   des lignes, exactement ce qu'on cherche à éviter. Le texte et la composition
   ne changent pas ; au-delà de 1080 px de hauteur, la mise en page d'origine
   s'applique telle quelle. */
@media (min-width: 1024px) and (max-height: 1080px) {
	.hero {
		min-height: 100dvh;
		padding-top: max(var(--cbs-space-16), 5rem);
		padding-bottom: var(--cbs-space-12);
	}

	.hero__title {
		font-size: clamp(2.5rem, 3.8vw, 3.5rem);
		margin-bottom: var(--cbs-space-4);
	}

	.hero__subtitle {
		margin-bottom: var(--cbs-space-6);
	}
}

/* Fond sombre : primaire plein en bleu principal, texte blanc ; secondaire en contour clair */
.hero .hero__cta-primary {
	background-color: var(--cbs-primary);
	border-color: var(--cbs-primary);
	color: var(--cbs-white);
}

.hero .hero__cta-primary:hover {
	background-color: var(--cbs-primary-light);
	border-color: var(--cbs-primary-light);
	color: var(--cbs-white);
}

.hero .hero__cta-secondary {
	color: var(--cbs-white);
	border-color: var(--cbs-primary-light);
}

.hero .hero__cta-secondary:hover {
	background-color: var(--cbs-primary-dark);
	border-color: var(--cbs-primary-dark);
	color: var(--cbs-white);
}

@media (prefers-reduced-motion: reduce) {
	.hero__video {
		display: none;
	}

	.hero__media {
		background-color: var(--cbs-silver-900);
		background-image: var(--cbs-hero-poster);
		background-size: cover;
		background-position: center;
	}
}