/* ==========================================================================
   Méga-footer — 5 colonnes, empilées sur mobile.
   ========================================================================== */

.site-footer {
	background-color: var(--color-ink);
	color: var(--color-ink-muted);
	padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-xl);
	padding-bottom: var(--space-xl);
}

@media (min-width: 768px) {
	.site-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr 1fr;
		gap: var(--space-lg);
	}
}

.site-footer__col-title {
	font-size: var(--text-small);
	font-weight: var(--font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-white);
	margin-bottom: var(--space-md);
}

.site-footer__logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.site-footer__logo-icon {
	height: 36px;
	width: auto;
}

.site-footer__logo-text {
	font-family: var(--font-heading);
	font-size: var(--text-h6);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	letter-spacing: 0.01em;
}

.site-footer__tagline {
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-muted);
	max-width: 22ch;
	margin-bottom: var(--space-md);
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
}

.site-footer__list a {
	color: var(--color-ink-muted);
	font-size: var(--text-small);
	transition: color 200ms ease;
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
	color: var(--color-accent);
}

.site-footer__text {
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--color-ink-muted);
}

/* --- Social media --- */

.site-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid var(--color-ink-muted);
	background-color: transparent;
	color: var(--color-ink-muted);
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-ink);
}

.site-footer__social-link svg {
	width: 16px;
	height: 16px;
}

/* --- Newsletter --- */

.site-footer__newsletter-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.site-footer__newsletter-input {
	width: 100%;
	padding: var(--space-sm) var(--space-md);
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background-color: rgba(255, 255, 255, 0.08);
	color: var(--color-white);
	font-size: var(--text-small);
}

.site-footer__newsletter-input::placeholder {
	color: var(--color-ink-muted);
}

.site-footer__newsletter-input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.site-footer__newsletter-submit {
	width: 100%;
}

/* --- Barre du bas --- */

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: var(--space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	font-size: var(--text-small);
	color: var(--color-ink-muted);
}

@media (min-width: 1024px) {
	.site-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.site-footer__contact-info {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
}

.site-footer__contact-info a {
	color: var(--color-ink-muted);
	transition: color 200ms ease;
}

.site-footer__contact-info a:hover,
.site-footer__contact-info a:focus-visible {
	color: var(--color-accent);
}

/* --- Liens légaux --- */

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs) var(--space-md);
	margin-top: var(--space-md);
	font-size: var(--text-small);
}

.site-footer__legal a {
	color: var(--color-ink-muted);
	transition: color 200ms ease;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
	color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
	.site-footer__list a,
	.site-footer__social-link,
	.site-footer__contact-info a,
	.site-footer__legal a {
		transition-duration: 0.01ms;
	}
}