/*
 * kp-intro-founders.css — Section intro "Bureau d'études" (Home bloc 3).
 *
 * Figma : 10132:653. Eyebrow + (gauche) H2 62px "Bureau d'études & régie technique
 * depuis 2003" + 2 cards fondateurs (photo + nom + rôle) / (droite) 3 paragraphes 24px.
 * Auto-enqueué (kp-pattern-intro-founders, dep kp-tokens). Réutilise .kp-eyebrow.
 *
 * NB : photos + noms fondateurs = PLACEHOLDERS (slots CSS neutres). À remplacer
 * par les vrais assets client.
 */

.kp-intro {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-25, 6.25rem);
	align-items: center;
	padding: var(--kp-section-padding-y, 9.375rem) var(--kp-section-padding-x, 4.5rem);
	background: var(--kp-color-surface-deep);
}

.kp-intro__row {
	display: flex;
	gap: var(--kp-space-16);
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	max-width: 1400px; /* cap : évite que les 2 colonnes fixes (540+593) ne s'écartent sur grand écran */
}

/* --- Colonne gauche : titre + fondateurs --- */
.kp-intro__left {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-16);
	width: 540px;
	max-width: 100%;
	flex-shrink: 0;
}

.kp-intro__title {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-62);
	font-weight: var(--kp-font-weight-light);
	letter-spacing: var(--kp-letter-spacing-h2, -0.06em);
	line-height: 1.06;
	color: var(--kp-color-text-inverse);
}

.kp-intro__title-muted {
	color: var(--kp-color-text-faint);
}

.kp-intro__founders {
	display: flex;
	gap: var(--kp-space-10);
}

.kp-intro__founder {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-2);
	width: 250px;
	max-width: 50%;
}

/* Slot photo (placeholder neutre, à remplacer par vraie photo client) */
.kp-intro__founder-photo {
	width: 100%;
	aspect-ratio: 250 / 300;
	background: linear-gradient(135deg, var(--kp-color-surface-elevated), #0d0d0d);
	border: 1px solid var(--kp-color-border-subtle);
	object-fit: cover;
}

.kp-intro__founder-name {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-24);
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: -0.05em;
	color: var(--kp-color-near-white);
	padding: var(--kp-space-4) var(--kp-space-2) 0;
}

.kp-intro__founder-role {
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-18);
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: -0.03em;
	color: var(--kp-color-text-caption);
	padding: 0 var(--kp-space-2);
	border-bottom: 1px solid var(--kp-color-border-subtle);
	padding-bottom: var(--kp-space-4);
}

/* --- Colonne droite : paragraphes --- */
.kp-intro__right {
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-10);
	width: 593px;
	max-width: 100%;
}

.kp-intro__right p {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-24);
	font-weight: var(--kp-font-weight-regular);
	letter-spacing: var(--kp-letter-spacing-tight);
	line-height: var(--kp-line-height-body, 1.67);
	color: var(--kp-color-text-inverse);
}

@media (max-width: 980px) {
	.kp-intro__row {
		flex-direction: column;
		gap: var(--kp-space-12);
	}
	.kp-intro__left,
	.kp-intro__right {
		width: 100%;
	}
}