/*
 * tdn-cta-banner-pink — pink banner manifesto
 * Spec: Figma node 8115:4618
 */

/* Section wrapper — bg pink-100 to blend with RSE section above (used as
 * the closing banner of the L'Agence engagement zone). Padding-bottom 100px
 * to breathe before the pre-footer midnight section. */
.tdn-cta-banner-pink {
	width: 100%;
	padding: 0 24px 100px;
	background: var(--tdn-color-pink-100, #F6C9D0);
	display: flex;
	justify-content: center;
}

.tdn-cta-banner-pink__container {
	max-width: 1296px;
	width: 100%;
	background: var(--tdn-color-pink-50-deep, #fbe9ec);
	border-radius: 60px;
	padding: 48px 24px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Note: NO border-top / pseudo-element line. Figma source has no top
 * separator — the previous attempt was a misinterpretation removed in
 * round 8 per user feedback "trait parasite à supprimer". */

/* Cool-shapes 300×300 débordant left + right (Figma 8115:4619 + 8115:4620).
 * PNG Figma export has the wrapper opacity-20 BAKED IN — we render at full
 * opacity 1.0 to match Figma's intended visual rendering. */

.tdn-cta-banner-pink__decor {
	position: absolute;
	width: 300px;
	height: 300px;
	opacity: 1; /* PNG already at Figma's 20% intensity */
	pointer-events: none;
	user-select: none;
	z-index: 0;
	max-width: none;
}

.tdn-cta-banner-pink__decor--left {
	left: -20px;
	bottom: -60px;
}

.tdn-cta-banner-pink__decor--right {
	right: -60px;
	bottom: 30px;
}

.tdn-cta-banner-pink__text {
	position: relative;
	z-index: 1;
	margin: 0;
	max-width: 818px;
	width: 100%;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-medium);
	font-size: clamp(28px, 3.5vw, 48px);
	line-height: 1.2;
	letter-spacing: -0.04em;
	text-align: center;
	color: var(--tdn-color-midnight, #1a1a2e);
}

.tdn-cta-banner-pink__line {
	display: block;
}

.tdn-cta-banner-pink__line--accent {
	color: var(--tdn-color-pink-200, #c06d80);
	font-weight: var(--tdn-h2-weight);
}

@media (max-width: 768px) {
	.tdn-cta-banner-pink__container {
		padding: 32px 20px;
		border-radius: 40px;
	}

	.tdn-cta-banner-pink__decor {
		width: 200px;
		height: 200px;
	}
}