/* Footer custom — Commune de La Petite-Raon */

/* Pictogramme "nouvelle fenêtre" (RGAA 6.2), décoratif — le texte pour
   lecteur d'écran est porté par .screen-reader-text juste à côté. */
.external-link-icon {
	width: 0.7em;
	height: 0.7em;
	margin-left: 0.3em;
	vertical-align: middle;
}

.site-footer {
	background: var(--color-principale);
	color: var(--color-bg-principal);
}

.site-footer__top {
	max-width: 1920px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
	gap: 32px;
	align-items: start;
}

/* Colonne blason + nom + accroche + description */
.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.site-footer__logo,
.site-footer__brand img,
.site-footer .custom-logo {
	height: 96px;
	width: auto;
}

.site-footer__titles {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.site-footer__name {
	font-size: var(--fs-xl);
	font-weight: 700;
	margin-top: -55px;
}

.site-footer__tagline {
	font-size: var(--fs-sm);
	color: var(--color-contraste);
}

.site-footer__description {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.6;
	color: var(--color-contraste);
	max-width: 32ch;
}

/* Titres de colonnes (MAIRIE / VIE PRATIQUE / LIENS UTILES / SUIVEZ-NOUS) */
.site-footer__heading {
	font-size: var(--fs-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 16px;
	color: var(--color-chaude);
}

/* Colonnes de liens */
.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.site-footer__links a {
	color: var(--color-bg-principal);
	text-decoration: none;
	font-size: var(--fs-sm);
}

.site-footer__links a:hover {
	color: var(--color-chaude);
}

/* Réseaux sociaux */
.site-footer__col--social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.site-footer__social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-bg-principal);
	border-radius: 50%;
	color: var(--color-bg-principal);
	text-decoration: none;
}

.site-footer__social-icon:hover {
	background: var(--color-bg-principal);
	color: var(--color-accent);
}

/* Mentions légales + copyright, sous "Suivez-nous" comme sur la maquette */
.site-footer__legal-block {
	margin-top: 24px;
	padding-top: 16px;
	border-top: 1px solid rgba(248, 248, 248, 0.2);
	width: 100%;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-xs);
	margin-bottom: 8px;
}

.site-footer__legal a {
	color: var(--color-bg-principal);
	text-decoration: none;
}

.site-footer__legal a:hover {
	color: var(--color-chaude);
}

.site-footer__legal span {
	color: var(--color-contraste);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--fs-xs);
	color: var(--color-contraste);
}

/* Barre de crédit — même couleur que le footer */
.site-footer__credit {
	background: var(--color-principale);
	border-top: 1px solid rgba(248, 248, 248, 0.15);
}

.site-footer__credit-link {
	max-width: 1920px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--color-bg-principal);
	text-decoration: none;
	font-size: var(--fs-xs);
}

.site-footer__credit-link:hover {
	color: var(--color-chaude);
}

.site-footer__credit-logo {
	height: 36px;
	width: auto;
}

/* Responsive : empile tout en dessous de 1350px */
@media (max-width: 1350px) {
	.site-footer__brand {
    flex-direction: column;
	align-items: flex-start;
}
.site-footer__name {
    margin-top: 0px;
}
}

/* Responsive : empile tout en dessous de 1024px. Chaque colonne (sauf le
   blason) reçoit une ligne de séparation au-dessus, pour bien distinguer
   les thématiques une fois qu'elles ne sont plus côte à côte sur 5 colonnes. */
@media (max-width: 1024px) {
	.site-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 40px 32px;
	}

	.site-footer__col--brand {
		grid-column: 1 / -1;
		padding-bottom: 8px;
	}

	.site-footer__top > .site-footer__col:not(.site-footer__col--brand) {
		padding-top: 24px;
		border-top: 1px solid rgba(248, 248, 248, 0.2);
	}
	.site-footer__heading {
    text-align: center;
}
}

@media (max-width: 560px) {
	.site-footer__top {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}