/* =========================================================================
 * E42 Skyline Hero — v1.1.0
 * Couches : ciel (z1) -> voile (z2) -> contenu (z3) -> bâtiment (z4).
 * Le bâtiment (en flux) définit la hauteur du hero -> responsive à toute largeur.
 * Le contenu se révèle de derrière le bâtiment : sa partie haute traverse le ciel
 * transparent du PNG, sa partie basse est masquée par les toits opaques.
 * !important ciblé sur les états d'animation pour résister à LiteSpeed (Hostinger).
 * ========================================================================= */

.esh {
	--esh-min-h: 600px;
	--esh-sky-band: 200px;
	--esh-content-max: 1000px;
	--esh-content-bottom: 60%;
	--esh-building-width: 100%;
	--esh-building-bottom: 0px;
	--esh-side-pad: 24px;
	--esh-justify: center;
	--esh-text-align: center;

	/* Animation */
	--esh-rise: 160px;
	--esh-duration: 1100ms;
	--esh-delay: 0ms;
	--esh-stagger: 130ms;
	--esh-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	min-height: var(--esh-min-h);
	padding-top: var(--esh-sky-band);
	overflow: hidden;
	isolation: isolate;
	background-color: #0b2438;
}

/* ---------- Ciel ---------- */
.esh__sky {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* ---------- Voile de lisibilité ---------- */
.esh__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(6, 22, 38, 0.55) 0%, rgba(6, 22, 38, 0) 55%);
}

/* ---------- Bloc de contenu (DERRIÈRE le bâtiment) ---------- */
.esh__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--esh-content-bottom);
	z-index: 3; /* sous le bâtiment */
	display: flex;
	flex-direction: column;
	align-items: var(--esh-justify);
	padding-left: var(--esh-side-pad);
	padding-right: var(--esh-side-pad);
	pointer-events: none;
}

.esh__card {
	--esh-divider-w: 56px;
	--esh-divider-thickness: 1px;
	--esh-divider-color: rgba(255, 255, 255, 0.55);
	--esh-divider-space: 26px;

	position: relative;
	width: 100%;
	max-width: var(--esh-content-max);
	display: flex;
	flex-direction: column;
	align-items: var(--esh-text-align);
	text-align: var(--esh-text-align);
	pointer-events: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0 24px;
	will-change: transform, opacity;
}

/* ---------- Sur-titre ---------- */
.esh__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
	color: #d9c2cc;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	line-height: 1;
}

.esh__eyebrow--line::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 1px;
	background-color: rgba(217, 194, 204, 0.7);
}

/* ---------- Titre ---------- */
.esh__title {
	margin: 0 0 22px;
	color: #edf2f7;
	font-family: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	font-size: 48px;
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	text-wrap: balance;
}

/* ---------- Trait de séparation ---------- */
.esh__divider {
	display: block;
	width: var(--esh-divider-w);
	height: var(--esh-divider-thickness);
	margin-top: 0;
	margin-bottom: var(--esh-divider-space);
	background-color: var(--esh-divider-color);
}

/* ---------- Texte ---------- */
.esh__desc {
	margin: 0;
	max-width: 880px;
	color: rgba(236, 241, 247, 0.8);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.2px;
}

.esh__desc :where(p):last-child {
	margin-bottom: 0;
}

/* ---------- Bouton ---------- */
.esh__actions {
	display: block;
}

.esh__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 15px 34px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 100px;
	cursor: pointer;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.35s ease;
}

.esh__btn:hover {
	background: #fff;
	color: #0b2438;
	border-color: #fff;
	transform: translateY(-1px);
}

/* ---------- Bâtiment (EN FLUX -> définit la hauteur, DEVANT le contenu) ---------- */
.esh__building {
	position: relative;
	z-index: 4; /* au-dessus du contenu : les toits opaques masquent la partie basse en transit */
	width: var(--esh-building-width);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--esh-building-bottom);
	pointer-events: none;
}

.esh__building img {
	display: block;
	width: 100%;
	height: auto;
}

/* =========================================================================
 * ANIMATION — révélation depuis l'arrière du bâtiment (bottom -> top)
 * ========================================================================= */
.esh--anim .esh__card {
	transform: translateY(var(--esh-rise)) !important;
	opacity: 0 !important;
	transition:
		transform var(--esh-duration) var(--esh-ease) var(--esh-delay),
		opacity var(--esh-duration) var(--esh-ease) var(--esh-delay) !important;
}

.esh--anim .esh__eyebrow,
.esh--anim .esh__title,
.esh--anim .esh__divider,
.esh--anim .esh__desc,
.esh--anim .esh__actions {
	transform: translateY(calc(var(--esh-rise) * 0.45)) !important;
	opacity: 0 !important;
	transition:
		transform var(--esh-duration) var(--esh-ease)
			calc(var(--esh-delay) + (var(--esh-i, 0) + 1) * var(--esh-stagger)),
		opacity var(--esh-duration) var(--esh-ease)
			calc(var(--esh-delay) + (var(--esh-i, 0) + 1) * var(--esh-stagger)) !important;
}

.esh--anim.is-revealed .esh__card,
.esh--anim.is-revealed .esh__eyebrow,
.esh--anim.is-revealed .esh__title,
.esh--anim.is-revealed .esh__divider,
.esh--anim.is-revealed .esh__desc,
.esh--anim.is-revealed .esh__actions {
	transform: translateY(0) !important;
	opacity: 1 !important;
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */
@media (max-width: 1024px) {
	.esh { --esh-sky-band: 130px; --esh-content-bottom: 58%; }
	.esh__title { font-size: 40px; }
	.esh__card { padding: 0 28px; }
}

@media (max-width: 767px) {
	.esh { --esh-sky-band: 90px; --esh-content-bottom: 56%; }
	.esh__title { font-size: 30px; letter-spacing: 1px; }
	.esh__card { padding: 0 20px; }
	.esh__desc { font-size: 13px; }
	.esh__eyebrow { letter-spacing: 2px; margin-bottom: 14px; }
}

/* =========================================================================
 * ACCESSIBILITÉ — respect de prefers-reduced-motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.esh--anim .esh__card,
	.esh--anim .esh__eyebrow,
	.esh--anim .esh__title,
	.esh--anim .esh__divider,
	.esh--anim .esh__desc,
	.esh--anim .esh__actions {
		transform: none !important;
		opacity: 1 !important;
		transition: none !important;
	}
}