/*
 * tdn-cta-pre-footer — manifesto + dual CTA on midnight bg
 * Spec: Figma node 8115:4919
 *
 * Phase C.4 round 10 (2026-05-04) — inversion watermark + ajout courbes
 * pointillées :
 *   - Le watermark "Tomber des nues" italique géant repasse ici (porté par
 *     ce pattern) avec un `bottom` NÉGATIF pour déborder visuellement vers
 *     le footer. Le footer (full-width midnight + pill glass) recouvre
 *     naturellement l'extrémité basse du watermark à ~10-15% car il est
 *     situé après dans l'ordre du DOM (donc peint au-dessus de l'overflow).
 *   - Pour permettre cet overflow vertical sans déclencher de scroll
 *     horizontal, on utilise `overflow-x: clip` (vs l'ancien
 *     `overflow: hidden` qui clippait dans les deux axes).
 *   - Courbes pointillées décoratives en SVG inline (assets/images/decorations/
 *     pre-footer-curves.svg), positionnées en background-image sur le wrapper.
 *   Voir docs/phase-c4-notes.md "Inversion watermark + courbes pointillées (round 10)".
 */

.tdn-cta-pre-footer {
	position: relative;
	z-index: 1; /* lower than .tdn-footer (z-index 2) — footer paints over the watermark overflow zone, le pill glass devant. Round 12. */
	overflow-x: clip;
	background: var(--tdn-color-midnight, #1a1a2e);
	padding: 120px 24px 160px;
	color: #fff;
	isolation: isolate;
}

/* Round 13 : ancien pseudo-element `::after` (qui prolongeait midnight 800px
 * sous le pre-footer) supprimé. La continuité midnight sous le footer est
 * désormais assurée par le bg du body lui-même (template-fullwidth.css), ce
 * qui simplifie la stack et couvre n'importe quelle hauteur de footer. */

/* --- Watermark "Tomber des nues" italic géant (overflow vers footer) --- */

.tdn-cta-pre-footer__watermark {
	position: absolute;
	left: 50%;
	bottom: -150px; /* Round 12 : déborde 150px sous le pre-footer (recalibré depuis -180 pour que le watermark reste visible au-dessus du pill). */
	transform: translateX(-50%);
	font-family: 'Bodoni 72', 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 400;
	font-size: clamp(120px, 18vw, 250px);
	line-height: 1;
	letter-spacing: -0.01em;
	color: rgba(242, 194, 202, 0.1);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* --- Courbes pointillées décoratives ---------------------------- */

.tdn-cta-pre-footer__curves {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	user-select: none;
	object-fit: cover;
	object-position: center;
}

/* --- Inner column ----------------------------------------------- */

.tdn-cta-pre-footer__inner {
	position: relative;
	z-index: 1;
	max-width: 758px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
	text-align: center;
}

/* --- Heading mixte bold + italic pink --------------------------- */

.tdn-cta-pre-footer__heading {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-h2-weight);
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 1.2;
	letter-spacing: -0.04em;
	color: #fff;
	text-wrap: pretty; /* Morgan 2026-06-29 : évite "?" orphelin dernière ligne */
}

.tdn-cta-pre-footer__heading-accent {
	font-style: italic;
	font-weight: var(--tdn-font-weight-regular, 400);
	color: var(--tdn-color-pink-100, #F6C9D0);
}

/* Variant solid (non-italic) — used on L'Agence pre-footer "Travaillons ensemble." */
.tdn-cta-pre-footer__heading-accent--solid {
	font-style: normal;
	font-weight: var(--tdn-h2-weight);
	color: var(--tdn-color-pink-100, #F6C9D0);
}

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

.tdn-cta-pre-footer__subtitle {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.85);
	max-width: 560px;
}

/* --- Dual CTA --------------------------------------------------- */

.tdn-cta-pre-footer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

.tdn-cta-pre-footer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-button-weight);
	font-size: 20px;
	line-height: 24px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 200ms ease, border-color 0.2s ease;
}

.tdn-cta-pre-footer__cta:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 3px;
}

/* --- Primary CTA ------------------------------------------------ */

.tdn-cta-pre-footer__cta--primary {
	gap: 10px;
	height: 56px;
	padding: 12px 16px 12px 32px;
	background: var(--tdn-color-pink-primary, #C06D80);
	color: #fff;
	border: 0;
	border-radius: 40px;
}

.tdn-cta-pre-footer__cta--primary:hover {
	background: var(--tdn-color-action-primary-hover, #C06D80);
	transform: scale(1.02);
}

.tdn-cta-pre-footer__cta--primary:active {
	transform: scale(0.98);
}

.tdn-cta-pre-footer__cta--primary::after {
	content: '';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	box-sizing: border-box;
	background-color: var(--tdn-color-midnight, #1a1a2e);
	background-image: url("../../images/icons/arrow-up-right.svg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border-radius: 40px;
	transition: transform 200ms ease;
}

.tdn-cta-pre-footer__cta--primary:hover::after {
	transform: translateX(2px);
}

/* --- Secondary glass CTA ---------------------------------------- */

.tdn-cta-pre-footer__cta--secondary {
	height: 56px;
	padding: 12px 24px;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 48px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.tdn-cta-pre-footer__cta--secondary:hover {
	background: rgba(255, 255, 255, 0.3);
	border-color: rgba(255, 255, 255, 0.35);
}

/* --- Reduced motion -------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.tdn-cta-pre-footer__cta {
		transition: none;
	}
	.tdn-cta-pre-footer__cta--primary:hover,
	.tdn-cta-pre-footer__cta--primary:active {
		transform: none;
	}
	.tdn-cta-pre-footer__cta--primary::after,
	.tdn-cta-pre-footer__cta--primary:hover::after {
		transform: none;
	}
}

/* --- Responsive ------------------------------------------------ */

@media (max-width: 768px) {
	.tdn-cta-pre-footer {
		padding: 80px 16px 120px;
	}

	.tdn-cta-pre-footer__inner {
		gap: 32px;
	}

	.tdn-cta-pre-footer__actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		max-width: 360px;
	}

	.tdn-cta-pre-footer__cta {
		width: 100%;
	}
}