/*
 * kp-hero-page.css — Hero générique des pages internes KP.
 *
 * Figma : 10132:1330 (Pour les Agences). Photo full-bleed h=900 + halo radial
 * orange centré + gradient noir bas + bloc texte centré (H1 76px + sous-titre
 * 18px + bouton CTA orange). Réutilisable sur Nos Expertises, Directions
 * Événementielles, Portfolio, Le Bureau, Contact (variantes copy seulement).
 * Auto-enqueué (kp-pattern-hero-page, dep kp-tokens).
 *
 * NB : pas d'asset glow externe — le halo orange ellipse est rendu en pur CSS
 * via radial-gradient (économise 1 requête).
 */

.kp-hero-page {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 56.25rem; /* 900px UNIFORME pour TOUTES les pages — demande Morgan harmonisation 2026-06-10 */
	padding: 16.875rem var(--kp-section-padding-x, 4.5rem) 6rem; /* 270px top fixe = position eyebrow uniforme cross-pages */
	overflow: clip;
	background-color: var(--kp-color-surface-deep);
	background-image: url('../../img/kp-hero-page-bg.jpg');
	background-size: cover;
	background-position: center;
}

/* Modifiers par page (background-image override). Min-height = 900 pour TOUS. */
.kp-hero-page--nos-expertises {
	background-image: url('../../img/kp-hero-nos-expertises-bg.jpg');
}

.kp-hero-page--agences {
	/* default bg = kp-hero-page-bg.jpg (PoA = défaut historique) */
}

.kp-hero-page--directions {
	background-image: url('../../img/kp-hero-directions-bg.jpg');
}

.kp-hero-page--contact {
	background-image: url('../../img/kp-hero-directions-bg.jpg'); /* réuse temporaire — Yann fournira asset dédié */
}

.kp-hero-page--bureau {
	background-image: url('../../img/kp-hero-bureau-bg.jpg');
}

/* Halo orange flouté centré, hauteur du frame ellipse Figma (790x397). */
.kp-hero-page::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(49.375rem, 80vw); /* 790 */
	height: 24.8125rem; /* 397 */
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(223, 115, 46, 0.55) 0%,
		rgba(223, 115, 46, 0.28) 35%,
		rgba(223, 115, 46, 0) 70%
	);
	filter: blur(80px);
	pointer-events: none;
	z-index: 1;
}

/* Vignette gradient bas vers noir (h=470 dans Figma). */
.kp-hero-page::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 29.375rem; /* 470 */
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0) 1%,
		rgba(0, 0, 0, 0.7) 63.5%,
		#000 100%
	);
	pointer-events: none;
	z-index: 2;
}

.kp-hero-page__content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kp-space-10, 2.5rem); /* 40 */
	width: 100%;
	max-width: 71.75rem; /* 1148 — fidèle Figma Directions/Bureau pour titres sur 3 lignes max */
	text-align: center;
}

.kp-hero-page__title {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: clamp(2.5rem, 6.4vw, 5.125rem); /* 40→82 */
	font-weight: var(--kp-font-weight-regular);
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--kp-color-text-inverse);
	max-width: 71.75rem; /* 3 lignes max — demande Morgan */
}

.kp-hero-page__subtitle {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-18);
	font-weight: var(--kp-font-weight-medium);
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--kp-color-text-muted);
	max-width: 56.25rem;
}

.kp-hero-page__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.5rem; /* 56 */
	padding: 0.75rem 1.5rem;
	border: 1px solid var(--kp-color-border-subtle);
	border-radius: var(--kp-radius-sm, 4px);
	background: var(--kp-color-brand-primary);
	color: var(--kp-color-text-on-brand);
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-18);
	font-weight: var(--kp-font-weight-medium);
	line-height: 1.5;
	letter-spacing: normal;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.kp-hero-page__cta:hover,
.kp-hero-page__cta:focus-visible {
	background: var(--kp-color-brand-primary-hover);
	color: var(--kp-color-text-on-brand);
}

@media (max-width: 768px) {
	.kp-hero-page {
		min-height: 100svh;
		padding: 8rem var(--kp-space-6, 1.5rem) 3rem; /* eyebrow toujours visible top sur mobile */
	}
	.kp-hero-page__content {
		gap: var(--kp-space-7, 1.75rem);
	}
	.kp-hero-page__title {
		font-size: clamp(2rem, 9vw, 3rem);
		line-height: 1.05;
	}
	.kp-hero-page::before {
		filter: blur(60px);
	}
}