/*
 * Pied de page Animal-Rit - DA2 « L'Écurie »
 * Toujours en registre sombre, dans les deux thèmes : c'est le socle de la
 * page, il ferme la composition. Ses couleurs sont donc figées sur la
 * palette de marque et ne suivent pas la bascule de thème.
 */

.site-footer {
	background: var(--od-navy);
	color: var(--od-ivory);
	padding: clamp(2.75rem, 6vw, 5.25rem) var(--pad-x) var(--sp-5);
	border-top: 1px solid var(--c-line);
}

.foot-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 40rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .foot-grid { grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--sp-7); } }

.foot-brand .emblem { width: 2.875rem; height: 2.875rem; color: var(--od-gold); margin-bottom: var(--sp-4); }
.foot-brand p { font-size: var(--t-small); color: rgba(248, 244, 227, .62); max-width: 30ch; }

.foot-col h2 {
	font-family: var(--od-sans);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--od-gold);
	margin-bottom: var(--sp-4);
}
.foot-col a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--t-small);
	color: rgba(248, 244, 227, .66);
	transition: color var(--dur-1) var(--ease), padding-left var(--dur-1) var(--ease);
}
.foot-col a:hover { color: var(--od-ivory); padding-left: var(--sp-2); }

/* Le contraste du focus est calculé sur le navy du pied de page, pas sur le
 * fond de la page : sans cela, le contour de focus disparaît en thème clair. */
.site-footer :focus-visible { outline-color: var(--od-gold); }

.foot-bot {
	margin-top: clamp(2rem, 4vw, 3.25rem);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(207, 175, 99, .22);
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	font-size: var(--t-micro);
	letter-spacing: .04em;
	color: rgba(248, 244, 227, .44);
}
.foot-bot nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.foot-bot a { color: inherit; border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.foot-bot a:hover { color: var(--od-ivory); border-color: rgba(207, 175, 99, .5); }
.credit { color: rgba(248, 244, 227, .44); }