/* parts-page-hero : ex-bloc <style> de page-hero.php, source de vérité depuis le 09/09/2026 (plan poids-html-blueprint-light, lot 2). Tokens : var(--color-*) uniquement. */
	/* Hero canonique unifie pour guides/audiences/partenaires/secteurs/comparatif/portefeuille. */
	.exp-hero {
		min-height: 100vh;
		display: flex;
		align-items: flex-end;
		position: relative;
		padding: 140px 0 0;
		overflow: hidden;
		/* Garde-fou : fond garanti pour que le texte du hero reste lisible meme
		   sans image (defaut data-theme=dark -> texte blanc -> fond marque sombre). */
		background-color: var(--color-bleu);
	}
	.exp-hero[data-theme="light"] {
		background-color: var(--color-cream);
	}
	@media (max-width: 899px) {
		/* padding-top 150px (et non 0) : le contenu est ancré en bas (flex-end) ;
		   quand il dépasse le min-height (titre complet + intro + stats), il
		   remontait sous le fil d'Ariane (top 80px, 2 lignes possibles) et le
		   header. Sans effet sur les heros courts (min-height gouverne).
		   Gate Hn 2026-07-07. */
		.exp-hero.has-mobile-portrait { min-height: var(--hero-mobile-minh, 125vw); padding-top: 150px; }
		/* line-clamp 3 (et non 2) : parité de rendu i18n — un titre traduit long
		   (EN/ES) ne doit pas être tronqué après 2 lignes. Miroir du fix
		   expertises-blueprint-light.php (audit i18n leaf expertise, tour 1). */
		.exp-hero.has-mobile-portrait .exp-hero-title { font-size: clamp(26px, 7vw, 34px); line-height: 1.12; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
		.exp-hero.has-mobile-portrait .exp-hero-intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	}
	.exp-hero-image-wrapper { position: absolute; inset: 0; z-index: 0; }
	.exp-hero-image-wrapper .kytom-picture { display: block; width: 100%; height: 100%; }
	.exp-hero-image-wrapper img {
		width: 100%; height: 100%;
		object-fit: cover;
		display: block;
	}
	.exp-hero-content {
		position: relative; z-index: 2;
		width: 100%;
		max-width: var(--container-wide, 1400px);
		margin: 0 auto;
		padding: 0 60px 80px;
		text-align: left;
		color: var(--color-white);
	}
	/* Pas d'overlay : photo nette. Lisibilite (filet de texte + texte adaptatif
	   sur hero clair) centralisee dans le MU-plugin kytom-hero-luminance.php,
	   source unique pour TOUS les types de hero. */

	/* Eyebrow = module partagé .k-eyebrow (parts/kytom-eyebrow.php). */

	/* H1 court. */
	.exp-hero-title {
		font-family: var(--font-title, "Plus Jakarta Sans", system-ui, sans-serif);
		font-size: clamp(36px, 6vw, 88px);
		font-weight: 300; line-height: 1.05;
		letter-spacing: -0.02em; color: var(--color-white);
		margin: 0 0 32px; max-width: 1100px;
	}

	/* Intro : filet orange vertical + paragraphe. */
	.exp-hero-intro-wrapper {
		display: flex; align-items: stretch; gap: 20px;
		max-width: 700px; margin: 0 0 48px;
	}
	.exp-hero-accent-bar {
		flex-shrink: 0;
		width: 3px;
		background: var(--color-orange, #F27E33);
		border-radius: 2px;
	}
	.exp-hero-intro {
		font-size: clamp(15px, 1.1vw, 18px);
		font-weight: 400; line-height: 1.55;
		color: rgba(255, 255, 255, 0.92);
		margin: 0; padding: 4px 0;
	}

	/* 3 KPI. */
	.exp-hero-stats {
		display: flex; gap: clamp(30px, 5vw, 60px);
		flex-wrap: wrap;
	}
	.exp-hero-stat {
		display: flex; flex-direction: column;
		position: relative;
		padding-right: clamp(20px, 3vw, 40px);
	}
	.exp-hero-stat:not(:last-child)::after {
		content: '';
		position: absolute; right: 0; top: 8px; bottom: 8px;
		width: 1px;
		background: rgba(255, 255, 255, 0.18);
	}
	.exp-hero-stat-value {
		font-family: var(--font-title, "Plus Jakarta Sans", system-ui, sans-serif);
		font-size: clamp(32px, 4.5vw, 56px);
		font-weight: 800; line-height: 1;
		color: var(--color-white);
	}
	.exp-hero-stat-label {
		margin-top: 8px;
		font-size: 11px; font-weight: 600;
		letter-spacing: 0.12em; text-transform: uppercase;
		color: rgba(255, 255, 255, 0.7);
	}

	/* Scroll indicator. */
	.exp-scroll-indicator {
		position: absolute;
		bottom: 60px; right: 60px;
		z-index: 3;
		display: flex; flex-direction: column; align-items: center; gap: 16px;
	}
	.exp-scroll-indicator-text {
		font-size: 10px; font-weight: 600;
		letter-spacing: 0.25em; text-transform: uppercase;
		color: rgba(255, 255, 255, 0.7);
		writing-mode: horizontal-tb;
	}
	.exp-scroll-indicator-line {
		width: 1px; height: 60px;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
		animation: expScrollPulse 2s ease-in-out infinite;
	}
	@keyframes expScrollPulse {
		0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.7; }
		50%      { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
	}

	@media (max-width: 768px) {
		/* 150px : dégage header + fil d'Ariane sur 2 lignes (cf. commentaire
		   has-mobile-portrait ci-dessus). */
		.exp-hero { min-height: 85vh; padding-top: 150px; }
		.exp-hero-content { padding: 0 24px 56px; }
		.exp-hero-stats { gap: 20px; }
		.exp-hero-stat { padding-right: 16px; }
		.exp-scroll-indicator { right: 24px; bottom: 24px; }
	}