/* =========================================================
   MIDDLE LAND — footer (template home2). Dépend de mlt-tokens.
   Fond olive, logo blanc (sillons ocre retirés à la demande du client, 2026-10-03).
   ========================================================= */

.mlt-footer {
	background: var(--mlt-color-olive);
	color: var(--mlt-color-blanc-80);
	font-size: var(--mlt-fs-small);
}

/* Sillons du logo (même motif que la bannière des pages, .mlt-entete::after) : ici en blanc
   très léger, en haut à gauche, derrière le logo. Décor seul, rien à lire. */
.mlt-footer {
	overflow: hidden;
}

.mlt-footer::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--mlt-space-96) - 140px);
	left: calc(-1 * var(--mlt-space-96));
	z-index: 0;
	width: 420px;
	height: 420px;
	border: 2px solid var(--mlt-color-blanc);
	border-radius: 50%;
	box-shadow: 0 0 0 28px var(--mlt-color-olive), 0 0 0 30px var(--mlt-color-blanc);
	opacity: 0.08;
	pointer-events: none;
}

.mlt-footer__top,
.mlt-footer__bottom {
	position: relative;
	z-index: 1;
}

@media (min-width: 1024px) {
	.mlt-footer::after {
		top: -260px;
		left: 4%;
		width: 560px;
		height: 560px;
	}
}

.mlt-footer a:not(.mlt-btn) {
	color: var(--mlt-color-blanc);
	text-decoration: none;
	transition: color var(--mlt-duration) var(--mlt-ease);
}

.mlt-footer a:not(.mlt-btn):hover {
	color: var(--mlt-color-fond);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mlt-footer a:not(.mlt-btn):focus-visible {
	outline: none;
	border-radius: var(--mlt-space-4);
	box-shadow: 0 0 0 2px var(--mlt-color-olive), 0 0 0 4px var(--mlt-color-blanc);
}

.mlt-footer .mlt-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--mlt-color-olive), 0 0 0 5px var(--mlt-color-blanc);
}

/* Même grille que les sections (contenu 1120 px + marges --mlt-edge) au lieu de .mlt-container */
.mlt-footer .mlt-footer__top,
.mlt-footer .mlt-footer__bottom {
	max-width: var(--mlt-section-max);
	padding-inline: var(--mlt-edge);
}

.mlt-footer__top {
	display: grid;
	gap: var(--mlt-space-48);
	padding-top: var(--mlt-space-64);
	padding-bottom: var(--mlt-space-32);
}

/* Logo : largeur max 270 px, hauteur automatique */
.mlt-footer__logo {
	display: block;
	max-width: 270px;
}

.mlt-footer__logo .mlt-logo {
	display: block;
	width: 100%;
	max-width: 270px;
	height: auto;
}

.mlt-footer__tagline {
	max-width: 40ch;
	margin: var(--mlt-space-24) 0;
	font-size: var(--mlt-fs-body);
	line-height: var(--mlt-lh-body);
}

.mlt-footer__heading {
	margin: 0 0 var(--mlt-space-16);
	color: var(--mlt-color-blanc);
	font-size: var(--mlt-fs-body);
	font-weight: 700;
}

.mlt-footer__menu,
.mlt-footer__list,
.mlt-footer__socials {
	display: grid;
	gap: 0; /* les liens font 44 px de haut : l'espace est dans la cible */
	margin: 0;
	padding: 0;
	list-style: none;
}

.mlt-footer__menu a,
.mlt-footer__list a,
.mlt-footer__socials a,
.mlt-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px; /* cible tactile */
	padding: 0;
}

/* Réseaux sociaux : pastilles cerclées (même style que les puces des offres) */
.mlt-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mlt-space-8);
	margin-top: var(--mlt-space-24);
}

.mlt-footer .mlt-footer__socials a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--mlt-space-16);
	border: 1px solid var(--mlt-color-ligne-inverse);
	border-radius: var(--mlt-radius-pill);
	font-weight: 500;
	transition: border-color var(--mlt-duration) var(--mlt-ease), background-color var(--mlt-duration) var(--mlt-ease), color var(--mlt-duration) var(--mlt-ease);
}

/* Logo du réseau : pastille ronde 44 px (cible tactile), icône 20 px */
.mlt-footer .mlt-footer__socials a.mlt-footer__social-icone {
	justify-content: center;
	width: 44px;
	padding: 0;
	border-radius: 50%;
}

.mlt-footer__social-icone svg {
	display: block;
	flex: none;
}

/* Le focus générique des liens du footer (coins à 4 px) garderait la pastille carrée */
.mlt-footer .mlt-footer__socials a.mlt-footer__social-icone:focus-visible {
	border-radius: 50%;
}

.mlt-footer .mlt-footer__socials a.mlt-footer__social-icone:active {
	border-color: var(--mlt-color-fond);
	background: var(--mlt-color-fond);
	color: var(--mlt-color-texte);
}

.mlt-footer .mlt-footer__socials a:hover {
	border-color: var(--mlt-color-blanc);
	background: var(--mlt-color-blanc);
	color: var(--mlt-color-olive);
	text-decoration: none;
}

.mlt-footer__bottom {
	display: grid;
	gap: var(--mlt-space-16);
	padding-top: var(--mlt-space-24);
	padding-bottom: var(--mlt-space-32);
	border-top: 1px solid var(--mlt-color-ligne-inverse);
}

@media (prefers-reduced-motion: reduce) {
	.mlt-footer .mlt-footer__socials a {
		transition: none;
	}
}

.mlt-footer__copyright,
.mlt-footer__ar {
	margin: 0;
}

.mlt-footer__ar {
	font-family: var(--mlt-font-arabe);
	font-size: var(--mlt-fs-body);
	color: var(--mlt-color-blanc);
}

.mlt-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--mlt-space-24);
}

@media (min-width: 768px) {
	.mlt-footer__top {
		grid-template-columns: 1fr 1fr;
	}

	.mlt-footer__brand {
		grid-column: 1 / -1;
	}

	.mlt-footer__bottom {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.mlt-footer__legal {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.mlt-footer__top {
		grid-template-columns: 2fr 1fr 1fr;
		padding-top: var(--mlt-space-96);
	}

	.mlt-footer__brand {
		grid-column: auto;
	}

	.mlt-footer__bottom {
		grid-template-columns: 1fr auto auto;
		gap: var(--mlt-space-32);
	}

	.mlt-footer__legal {
		grid-column: auto;
	}
}