/*
 * tdn-cta-pre-footer-home — variant Home dédiée
 *
 * Phase C.5 Bloc 9 (2026-05-05) — variante Home du pre-footer.
 *
 * Pourquoi un fichier dédié vs reuse direct de tdn-cta-pre-footer (Phase C.4) :
 *   - Le pattern Phase C.4 met l'accent ITALIC pink-100 sur "prochain événement".
 *   - La Home (screenshot Morgan) met l'accent SOLID pink-500 sur "mérite".
 *   - Doctrine §8 : on ne touche PAS au pattern partagé, on duplique en variante.
 *
 * Structure DOM identique au pattern Phase C.4 (watermark + courbes + titre +
 * sous-titre + 2 CTAs primary/secondary). Seul change le style de l'accent.
 *
 * Convention `--accent` (cf. decisions.md 2026-05-04) : la ligne accentuée
 * consomme `var(--accent)` au lieu de hardcoder la couleur.
 */

.tdn-cta-pre-footer-home {
	--accent: var(--tdn-color-pink-500, #C06D80);

	position: relative;
	z-index: 1; /* sous le footer (z-index 2) — le footer pill recouvre la queue du watermark */
	overflow-x: clip;
	background: var(--tdn-color-midnight, #1a1a2e);
	padding: 120px 24px 160px;
	color: #fff;
	isolation: isolate;
}

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

.tdn-cta-pre-footer-home__watermark {
	position: absolute;
	left: 50%;
	bottom: -150px;
	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-home__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-home__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 + accent solid ------------------------------------- */

.tdn-cta-pre-footer-home__heading {
	margin: 0;
	/* Phase 3.6 — semantic layer h2 (weight medium 500). ls -0.04em signature conservé */
	font-family: var(--tdn-h2-family);
	font-weight: var(--tdn-h2-weight);
	font-size: var(--tdn-h2-size);
	line-height: var(--tdn-h2-lh);
	letter-spacing: -0.04em;
	color: #fff;
}

.tdn-cta-pre-footer-home__heading-accent {
	font-style: normal;
	font-weight: var(--tdn-h2-weight);
	color: var(--accent);
}

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

.tdn-cta-pre-footer-home__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-home__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: center;
}

.tdn-cta-pre-footer-home__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-home__cta:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 3px;
}

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

.tdn-cta-pre-footer-home__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-home__cta--primary:hover {
	background: var(--tdn-color-action-primary-hover, #C06D80);
	transform: scale(1.02);
}

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

.tdn-cta-pre-footer-home__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-home__cta--primary:hover::after {
	transform: translateX(2px);
}

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

.tdn-cta-pre-footer-home__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-home__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-home__cta {
		transition: none;
	}
	.tdn-cta-pre-footer-home__cta--primary:hover,
	.tdn-cta-pre-footer-home__cta--primary:active {
		transform: none;
	}
	.tdn-cta-pre-footer-home__cta--primary::after,
	.tdn-cta-pre-footer-home__cta--primary:hover::after {
		transform: none;
	}
}

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

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

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

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

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