/*
 * tdn-footer — Pill glass footer
 * Spec: Figma node 8115:4936 + Phase C.4 round 9 evolution (Morgan)
 *
 * STRUCTURE :
 *   <footer class="tdn-footer" role="contentinfo">
 *     <div class="tdn-footer__pill">
 *       <div class="tdn-footer__col tdn-footer__col--brand">…</div>
 *       <div class="tdn-footer__col tdn-footer__col--nav">…</div>
 *       <div class="tdn-footer__col tdn-footer__col--contact">…</div>
 *     </div>
 *   </footer>
 *
 * PILL : max-width 1392px (Figma exact), centered horizontally, rgba midnight
 * 0.8 background + backdrop-filter blur 10px (glass effect aligned with nav
 * pattern), border 1px rgba white 0.06, border-radius 32px, padding 60px.
 *
 * WATERMARK : porté par le pré-footer (tdn-cta-pre-footer__watermark) — round 10
 * inversion. Le watermark déborde le pre-footer vers le bas et le footer pill
 * recouvre naturellement son extrémité basse à ~10-15%. Voir
 * docs/phase-c4-notes.md "Inversion watermark + courbes pointillées (round 10)".
 */

.tdn-footer {
	position: relative;
	z-index: 2; /* Round 12 : au-dessus de .tdn-cta-pre-footer (z-index 1) → le pill glass paint par-dessus le watermark débordant. */
	background: transparent; /* Round 12 : transparent (vs ancien midnight) — la continuité midnight est portée par le pseudo-element ::after du pre-footer. Sans transparence ici, le bg solide écrase le watermark avant que le pill ne puisse appliquer son glass blur. */
	color: #fff;
	padding: 80px 24px 60px;
	margin-top: -20px; /* Round 13 : réduit depuis -40 à -20. Combiné au padding-top 80, le pill arrive à pre-footer.bottom + 60. Avec watermark.bottom -150 (baseline ≈ pre-footer.bottom + 95), le pill couvre ~35px = ~20% du visible text — moins agressif que le round 12. */
	isolation: isolate;
}

/* --- Pill glass (3-cols grid container) ------------------------ */

.tdn-footer__pill {
	position: relative;
	z-index: 1;
	max-width: 1392px;
	margin: 0 auto;
	background: rgba(26, 26, 46, 0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 32px;
	padding: 60px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 32px;
	overflow: hidden;
}

.tdn-footer__col {
	display: flex;
	flex-direction: column;
	min-width: 0; /* allow text wrapping inside grid cells */
}

/* --- Brand ------------------------------------------------------- */

.tdn-footer__col--brand {
	gap: 24px;
}

.tdn-footer__logo {
	display: inline-block;
	text-decoration: none;
	border-radius: 8px;
}

.tdn-footer__logo svg {
	height: 70px;
	width: auto;
	display: block;
}

.tdn-footer__logo:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 4px;
}

.tdn-footer__title {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-font-weight-bold, 700);
	font-size: 24px;
	line-height: 1.5;
	margin: 0;
	color: #fff;
}

.tdn-footer__tagline {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.7;
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* --- Eyebrow + horizontal divider -------------------------------- */

.tdn-footer__eyebrow {
	display: block;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tdn-color-pink-primary, #C06D80);
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(242, 194, 202, 0.2);
	margin: 0 0 32px;
}

/* --- Nav column -------------------------------------------------- */

.tdn-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tdn-footer__links li {
	margin: 0;
	padding: 0;
}

.tdn-footer__links a {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tdn-footer__links a:hover {
	color: var(--tdn-color-pink-primary, #C06D80);
}

.tdn-footer__links a:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Contact column ---------------------------------------------- */

.tdn-footer__contact-block {
	margin: 0 0 24px;
}

.tdn-footer__contact-block:last-of-type {
	margin-bottom: 32px;
}

.tdn-footer__contact-label {
	display: block;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 8px;
}

.tdn-footer__contact-value {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: 16px;
	line-height: 1.5;
	color: #fff;
	margin: 0;
}

.tdn-footer__contact-value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tdn-footer__contact-value a:hover {
	color: var(--tdn-color-pink-primary, #C06D80);
}

.tdn-footer__contact-value a:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- LinkedIn CTA ------------------------------------------------ */

.tdn-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	height: 44px;
	padding: 8px 8px 8px 12px;
	background: var(--tdn-color-pink-primary, #C06D80);
	color: #fff;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-weight: var(--tdn-button-weight);
	font-size: 16px;
	line-height: 1.5;
	text-decoration: none;
	border-radius: 40px;
	transition: background-color 0.2s ease, transform 200ms ease;
	cursor: pointer;
}

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

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

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

.tdn-footer__cta-icon {
	display: inline-block;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	background: url("../../images/icons/linkedin.svg") center/contain no-repeat;
}

.tdn-footer__cta::after {
	content: '';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	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: 14px 14px;
	border-radius: 28px;
	transition: transform 200ms ease;
}

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

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

/* Tablet : le pill conserve sa structure mais bascule en 1 colonne + padding réduit. */
@media (max-width: 1024px) {
	.tdn-footer {
		padding: 64px 16px 48px;
	}

	.tdn-footer__pill {
		grid-template-columns: 1fr;
		gap: 48px;
		padding: 40px 32px;
		border-radius: 24px;
	}

	.tdn-footer__logo svg {
		height: 60px;
	}
}

/* Mobile : padding/gap plus serrés, pill réduite. */
@media (max-width: 640px) {
	.tdn-footer {
		padding: 48px 12px 32px;
	}

	.tdn-footer__pill {
		gap: 40px;
		padding: 32px 24px;
		border-radius: 20px;
	}

	.tdn-footer__logo svg {
		height: 48px;
	}

	.tdn-footer__title {
		font-size: 20px;
	}

	.tdn-footer__tagline {
		font-size: 15px;
	}

	.tdn-footer__legal-bar {
		padding: 0 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdn-footer__links a,
	.tdn-footer__cta,
	.tdn-footer__cta::after,
	.tdn-footer__contact-value a {
		transition: none;
	}

	.tdn-footer__cta:hover,
	.tdn-footer__cta:hover::after,
	.tdn-footer__cta:active {
		transform: none;
	}
}

/* --- Legal bar (sous le pill) ------------------------------------ */
/* v0.4.0 — barre de pied de page conformité légale. Copyright à gauche,
 * 3 liens (Mentions / Confidentialité / Cookies) à droite. Discrète,
 * typo 13px, opacity réduite. */

.tdn-footer__legal-bar {
	max-width: 1392px;
	margin: 32px auto 0;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.tdn-footer__legal-copyright {
	margin: 0;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
}

.tdn-footer__legal-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}

.tdn-footer__legal-links li {
	margin: 0;
	padding: 0;
}

.tdn-footer__legal-links a {
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tdn-footer__legal-links a:hover,
.tdn-footer__legal-links a:focus-visible {
	color: var(--tdn-color-pink-primary, #C06D80);
}

.tdn-footer__legal-links a:focus-visible {
	outline: 2px solid var(--tdn-color-pink-100, #F6C9D0);
	outline-offset: 2px;
	border-radius: 4px;
}

@media (max-width: 640px) {
	.tdn-footer__legal-bar {
		justify-content: center;
		text-align: center;
		flex-direction: column;
		gap: 16px;
	}

	.tdn-footer__legal-links {
		justify-content: center;
		gap: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tdn-footer__legal-links a {
		transition: none;
	}
}