/**
 * Pied de page — handoff, fin de l'ecran 1.
 * Fond --odg-encre, texte 13 px, padding 36px 40px, trois colonnes
 * (Boutique / Ressources / Maison). Le lien compte client, retire de la barre
 * principale, se place ici (colonne Maison).
 */

.odg-pied {
	display: flex;
	justify-content: space-between;
	gap: var(--odg-espace-40);
	padding: 36px var(--odg-espace-40);
	background-color: var(--odg-encre);
	color: var(--odg-encre-texte);
	font-size: var(--odg-texte-13);
	line-height: 1.6;
}

/* --- Bloc marque --- */
.odg-pied__marque {
	display: flex;
	flex-direction: column;
	gap: var(--odg-espace-8);
	max-width: 22em;
}

.odg-pied__nom {
	font-family: var(--odg-police-titre);
	font-size: 18px;
	font-weight: 500;
	color: var(--odg-papier);
}

.odg-pied__accroche {
	margin: 0;
	color: var(--odg-encre-texte);
	font-size: var(--odg-texte-13);
}

/* --- Colonnes --- */
.odg-pied__colonnes {
	display: flex;
	gap: 52px;
}

.odg-pied__colonne {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.odg-pied__titre {
	font-weight: 700;
	color: var(--odg-papier);
}

.odg-pied__liste {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.odg-pied__liste li {
	margin: 0;
}

.odg-pied__liste a {
	color: var(--odg-encre-texte);
	transition: color 200ms ease;
}

.odg-pied__liste a:hover,
.odg-pied__liste a:focus-visible {
	color: var(--odg-terracotta);
}

.odg-pied__liste .sub-menu {
	display: none;
}

/* -------------------------------------------------------------------------
 * Ecrans etroits — lot 5.
 *
 * Le handoff ne decrit pas le pied de page en mobile. Les trois colonnes de
 * 52 px de gouttiere ne tiennent pas a 375 px : elles passent en pile, dans
 * l'ordre du handoff (Boutique, Ressources, Maison), et les liens gagnent une
 * hauteur de frappe utilisable.
 * ---------------------------------------------------------------------- */
@media (max-width: 899px) {
	.odg-pied {
		flex-wrap: wrap;
		gap: var(--odg-espace-28);
	}

	.odg-pied__colonnes {
		flex-wrap: wrap;
		gap: var(--odg-espace-28) var(--odg-espace-40);
	}
}

@media (max-width: 767px) {
	.odg-pied {
		flex-direction: column;
		gap: var(--odg-espace-24);
		padding: var(--odg-espace-28) var(--odg-espace-16);
	}

	.odg-pied__marque {
		max-width: none;
	}

	.odg-pied__colonnes {
		flex-direction: column;
		gap: var(--odg-espace-24);
	}

	.odg-pied__liste {
		gap: 0;
	}

	.odg-pied__liste a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}