/*
 * Pied de page — issue 05. Référence : planche 3 (Socle), décisions du 25/09.
 *
 * Le seul grand aplat sombre du site. Sur le brun, le texte est en ivoire
 * (11,88:1) ou en lin (9,63:1), jamais en champagne (4,26:1, sous le seuil).
 * Le filet du bandeau légal est en bronze : décoratif, il ne porte rien.
 *
 * Valeurs de la planche hors de l'échelle, ramenées au pas le plus proche :
 * marge basse 28 → 32, écart dans les colonnes 10 → 8, entre liens légaux
 * 20 → 24. Intitulés (12 px) et liens légaux (13 px) passent à 14 px.
 * Chaque lien fait 44 px de haut (planche 2 : toute cible fait 44 × 44).
 *
 * Remplacé le 09/10 à la demande de Will (« beaucoup trop gros, sur mobile
 * et sur ordinateur », #255 : 1 299 px de haut sur mobile, 480 sur
 * ordinateur) : les liens du pied font 32 px de haut, au-dessus des 24 px
 * du critère WCAG 2.5.8 (AA) ; le logo est réduit par son jeton
 * (--pel-logo-pied, jetons.css) ; sur mobile, « Louer »
 * et « Zones desservies » vont côte à côte.
 */

.pel-footer {
	--pel-focus-couleur: var(--pel-ivoire);   /* le bronze ne fait que 2,38:1 sur le brun */
	background: var(--pel-brun);
	color: var(--pel-ivoire);
}

.pel-footer__grille {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pel-space-l);
	padding-block: var(--pel-space-l) var(--pel-space-m);
}

.pel-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pel-footer__col--identite {
	gap: var(--pel-space-xs);
}

.pel-footer__titre {
	margin: 0 0 var(--pel-space-2xs);
	color: var(--pel-lin);
	font-family: var(--pel-font-texte);
	font-size: var(--pel-fs-small);
	font-weight: 400;
	letter-spacing: var(--pel-capitales);
	line-height: var(--pel-lh-texte);
	text-transform: uppercase;
}

.pel-footer__lien {
	display: inline-flex;
	align-items: center;
	min-width: var(--pel-space-l);   /* « Sète » ne faisait que 27 px de large */
	min-height: var(--pel-space-l);  /* 32 px : au-dessus des 24 px du critère 2.5.8 (AA) */
	color: var(--pel-ivoire);
	font-size: var(--pel-fs-small);
	text-decoration: none;
}

.pel-footer__lien:hover {
	text-decoration: underline;
}

.pel-footer__texte {
	margin: 0;
	color: var(--pel-lin);
	font-size: var(--pel-fs-small);
	font-style: normal;
	line-height: var(--pel-lh-texte);
}

/* --- Bandeau légal ------------------------------------------------------ */
.pel-footer__legal {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--pel-space-m);
	padding-block: var(--pel-space-2xs);
	border-top: var(--pel-filet) solid var(--pel-bronze);
}

.pel-footer__lien--legal {
	color: var(--pel-lin);
}

/* --- Tablette et mobile : les colonnes tombent comme pel-grid --4 ---------- */
@media (max-width: 991px) {
	.pel-footer__grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	/* Identité et contact sur toute la largeur ; « Louer » et « Zones
	   desservies » côte à côte. */
	.pel-footer__grille {
		gap: var(--pel-space-m) var(--pel-space-s);
		padding-block: var(--pel-space-l) var(--pel-space-s);
	}

	.pel-footer__col--identite,
	.pel-footer__col:last-child {
		grid-column: 1 / -1;
	}

	.pel-footer__legal {
		column-gap: var(--pel-space-s);
	}
}