/* @doxallia/design — Marketing footer
 * Four-column footer for marketing pages.
 * Class prefix: .mk-footer*
 */

.mk-footer {
	background: var(--color-surface-muted);
	border-top: 1px solid var(--color-border);
}

/* Variant : marketing-footer dark (.mk-footer--figma)
 * Le token --color-text-muted vaut #636374 (WCAG AA 5.2:1 sur fond clair),
 * mais cette variante a un fond navy --fg-bg-navy (#0b1f3a) où #636374
 * donne seulement 2.4:1 (fail AA). On scope une nouvelle valeur du token
 * dans ce contexte pour que tous les consommateurs (newsletter-lead,
 * legal-band p, sub-brand, etc.) héritent automatiquement d'une couleur
 * qui passe l'AA sur fond sombre, sans avoir à surcharger chaque sélecteur.
 *
 * Référence : audit a11y vitrine 2026-05-24, axe-core color-contrast 2.38:1
 * sur .mk-footer__col--newsletter .mk-footer__newsletter-lead. */
.mk-footer--figma {
	--color-text-muted: rgba(255, 255, 255, 0.85);
}

.mk-footer__inner {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr;
	gap: var(--s-8, 2rem);
	max-width: var(--page-max-width, 1280px);
	margin: 0 auto;
	padding: var(--s-12, 3rem) var(--s-6) var(--s-8);
}

/* Column: brand */
.mk-footer__col {
}

.mk-footer__brand {
	font-size: var(--text-lg);
	font-weight: var(--fw-bold, 700);
	color: var(--color-brand);
	margin: 0 0 var(--s-2) 0;
}

.mk-footer__tagline {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--s-5) 0;
	line-height: 1.5;
	max-width: 18rem;
}

/* Legal links inside brand column */
.mk-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.mk-footer__legal a {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: none;
}

.mk-footer__legal a:hover {
	color: var(--color-text);
}

/* Column headings */
.mk-footer__heading {
	font-size: var(--text-xs);
	font-weight: var(--fw-bold, 700);
	color: var(--color-text-muted);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 0 0 var(--s-4) 0;
}

/* Nav links inside other columns */
.mk-footer__col > nav {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.mk-footer__col > nav a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color 150ms ease;
}

.mk-footer__col > nav a:hover {
	color: var(--color-text);
}

/* Address in contact column */
.mk-footer__address {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.8;
	font-style: normal;
	margin: 0 0 var(--s-3) 0;
}

.mk-footer__contact-link {
	font-size: var(--text-sm);
	color: var(--color-brand);
	text-decoration: none;
	font-weight: var(--fw-medium, 500);
}

.mk-footer__contact-link:hover {
	text-decoration: underline;
}

/* Bottom legal band */
.mk-footer__legal-band {
	border-top: 1px solid var(--color-border);
	padding: var(--s-4) var(--s-6);
	text-align: center;
}

.mk-footer__legal-band p {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet 768–1024 — brand spans full top row, 4 columns below.
   Prevents the 5th column (newsletter) from orphaning on its own row. */
@media (max-width: 1024px) {
	.mk-footer__inner {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: var(--s-6, 1.5rem) var(--s-6, 1.5rem);
	}

	.mk-footer__col:first-child {
		grid-column: 1 / -1;
	}

	.mk-footer__col--newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 768px) {
	.mk-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.mk-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--s-6);
		padding: var(--s-8) var(--s-4);
	}

	.mk-footer__tagline {
		max-width: none;
	}
}

/* ── Dark mode ───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.mk-footer__brand {
		color: var(--color-brand-text);
	}

	.mk-footer__col > nav a:hover {
		color: #f1f5f9;
	}

	.mk-footer__contact-link {
		color: var(--color-brand-text);
	}
}