/*
 * tdn-section-intro — Eyebrow + titre H2 (3 lignes, accent ligne 2) + sous-titre + 2 cool-shapes latéraux
 * Spec : Figma 8115:5941 (sub-frame intro de 8115:5940), CHECK 1 validé Phase C.5 bloc 3.
 *
 * STRUCTURE :
 *   .tdn-section-intro (section, neutral-0 bg, padding 100/24, position relative, isolation)
 *     .tdn-section-intro__decor--left (img 200h native, top 100, left -32, z:0)
 *     .tdn-section-intro__decor--right (img 200h native, top 230, right -40, z:0)
 *     .tdn-section-intro__inner (max-w 993, flex column gap 32 items center, z:1)
 *       .tdn-section-intro__eyebrow (inline-flex gap 14 — line+text+line)
 *         .tdn-section-intro__eyebrow-line × 2 (32×1 pink-200, gauche + droite)
 *         .tdn-section-intro__eyebrow-text (Nunito 900 16 wider uppercase pink-200)
 *       .tdn-section-intro__title (h2 flex column gap 20, Nunito 900 clamp 36-60, leading 0.855, tight)
 *         .tdn-section-intro__title-line (block, white-space nowrap desktop)
 *         .tdn-section-intro__title-line--accent (color pink-500 sur ligne 2)
 *       .tdn-section-intro__subtitle (Nunito 400 24 leading 1.2 neutral-700)
 *
 * Décisions §8 CHECK 1 (toutes validées) :
 *   - Polices Avenir → Nunito Sans (cohérent C.5 blocs 1+2)
 *   - Naming : tdn-section-intro (générique, réutilisable Expertises/Entreprises/Agences/Réalisations/Le Mag)
 *   - Bg neutral-0 (blanc) à valider CHECK 3
 *   - Cool-shapes latéraux 200×200 RATTACHÉS au bloc 3 (rectif §4)
 *   - Letter-spacing eyebrow : token --tdn-letter-spacing-wider 2.7px (cohérence design system, delta 0.18px Figma 2.88 imperceptible)
 *   - Markup --accent sur title-line 2 (cohérent tdn-page-hero)
 *   - white-space adaptive desktop nowrap / mobile normal
 *   - text-transform: none/inherit + letter-spacing: normal défensifs (convention C.5)
 *   - Cool-shapes hidden <768px
 *   - Opacity 1 sur les décors (alpha baked-in côté Figma export)
 */

.tdn-section-intro {
	position: relative;
	width: 100%;
	padding: 100px 24px;
	background: var(--tdn-color-neutral-0, #ffffff);
	isolation: isolate;
}

/* --- Cool-shapes décoratifs latéraux (alpha baked-in Figma) -- */

.tdn-section-intro__decor {
	position: absolute;
	height: 200px;
	width: auto;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	max-width: none;
}

.tdn-section-intro__decor--left {
	top: 100px;
	left: -32px;
}

.tdn-section-intro__decor--right {
	top: 230px;
	right: -40px;
}

/* --- Inner column (centered) ---------------------------------- */

.tdn-section-intro__inner {
	position: relative;
	z-index: 1;
	max-width: 993px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	text-align: center;
}

/* --- Eyebrow (line gauche + text + line droite, centré) ------ */

.tdn-section-intro__eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	letter-spacing: normal;
}

.tdn-section-intro__eyebrow-line {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--tdn-color-pink-200, #c06d80);
	flex-shrink: 0;
}

.tdn-section-intro__eyebrow-text {
	/* Phase 3.6 — semantic layer : eyebrow (weight bold 700, less bold) */
	font-family: var(--tdn-eyebrow-family);
	font-weight: var(--tdn-eyebrow-weight);
	font-size: var(--tdn-eyebrow-size);
	line-height: var(--tdn-eyebrow-lh);
	letter-spacing: var(--tdn-eyebrow-ls);
	text-transform: var(--tdn-eyebrow-tt);
	color: var(--tdn-color-pink-200, #c06d80);
	white-space: nowrap;
}

/* --- Title H2 (3 lignes, ligne 2 accent pink-500) ------------ */

.tdn-section-intro__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	/* Phase 3.6 — semantic layer h2 (weight medium 500). line-height 0.855 conservé : signature section-intro (outlier protégé, NE PAS migrer vers --tdn-h2-lh) */
	font-family: var(--tdn-h2-family);
	font-weight: var(--tdn-h2-weight);
	font-size: var(--tdn-h2-size);
	line-height: 0.855;
	letter-spacing: var(--tdn-h2-ls);
	text-transform: var(--tdn-h2-tt);
	color: var(--tdn-color-midnight-900, #1a1a2e);
}

.tdn-section-intro__title-line {
	display: block;
	white-space: nowrap;
	text-transform: inherit;
}

.tdn-section-intro__title-line--accent {
	color: var(--tdn-color-pink-500, #C06D80);
}

/* --- Subtitle ------------------------------------------------ */

.tdn-section-intro__subtitle {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-regular, 400);
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tdn-color-neutral-700, #4d4d4c);
}

/* --- Tablet 768-1023 : title clamp réduit, white-space normal */

@media (max-width: 1023px) {
	.tdn-section-intro {
		padding: 80px 24px;
	}

	.tdn-section-intro__inner {
		gap: 28px;
	}

	.tdn-section-intro__title {
		font-size: clamp(32px, 5vw, 48px);
		line-height: 1.1;
		gap: 16px;
	}

	.tdn-section-intro__title-line {
		white-space: normal;
	}

	.tdn-section-intro__subtitle {
		font-size: 20px;
	}

	.tdn-section-intro__eyebrow-text {
		font-size: 14px;
	}
}

/* --- Mobile <768 : decors hidden, compacte ------------------- */

@media (max-width: 767px) {
	.tdn-section-intro {
		padding: 64px 16px;
	}

	.tdn-section-intro__inner {
		gap: 24px;
	}

	.tdn-section-intro__title {
		font-size: clamp(28px, 7vw, 40px);
		line-height: 1.1;
		gap: 12px;
	}

	.tdn-section-intro__subtitle {
		font-size: 18px;
	}

	.tdn-section-intro__eyebrow-text {
		font-size: 12px;
	}

	.tdn-section-intro__eyebrow-line {
		width: 20px;
	}

	.tdn-section-intro__decor {
		display: none;
	}
}