/**
 * ADVA11 — adva11-footer.css
 *
 * Styles du pied de page du thème enfant ADVA11.
 */


/* =========================================================
   1. Conteneur principal
   ========================================================= */

.site-footer {
	width: 100%;

	background-color: var(--adva11-color-neutral-900);
	color: var(--adva11-color-neutral-0);
}


/* =========================================================
   2. Conteneur interne
   ========================================================= */

.site-footer__inner {
	padding-block-start: 4rem;
	padding-block-end: 2.5rem;
	padding-inline: 7.5rem;
}


/* =========================================================
   3. Colonnes
   ========================================================= */

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--adva11-space-2xl);
	row-gap: var(--adva11-space-xl);

	align-items: start;
}


/* =========================================================
   4. Colonnes individuelles
   ========================================================= */

.site-footer__column {
	color: var(--adva11-color-neutral-0);
}

.site-footer__column--identity {
	text-align: center;
}

.site-footer__column--legal {
	display: flex;
	justify-content: center;

	text-align: left;
}

.site-footer__column--actions {
	text-align: left;
}


/* =========================================================
   5. Logo footer
   ========================================================= */

.site-footer__logo {
	display: flex;
	justify-content: center;

	margin-block-end: var(--adva11-space-l);
}

.site-footer__logo-image {
	width: 19.875rem;
	max-width: 100%;
	height: auto;
}


/* =========================================================
   6. Coordonnées
   ========================================================= */

.site-footer__contact {
	margin: 0;

	font-family: var(--adva11-font-body);
	font-size: var(--adva11-font-size-l);
	font-style: normal;
	font-weight: var(--adva11-font-weight-semibold);
	line-height: 1.5;
	letter-spacing: 0.06em;

	color: var(--adva11-color-neutral-0);
}

.site-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus,
.site-footer__contact a:focus-visible {
	text-decoration-line: underline;
	text-decoration-thickness: var(--adva11-border-xs);
	text-underline-offset: 0.2em;
}


/* =========================================================
   7. Actions footer
   ========================================================= */

.site-footer__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--adva11-space-s);

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-footer__actions a {
	font-family: var(--adva11-font-body);
	font-size: var(--adva11-font-size-l);
	font-weight: var(--adva11-font-weight-semibold);
	line-height: 1.5;
	letter-spacing: 0.06em;

	color: var(--adva11-color-neutral-0);
	text-decoration: none;
}

.site-footer__actions a:hover,
.site-footer__actions a:focus,
.site-footer__actions a:focus-visible {
	text-decoration-line: underline;
	text-decoration-thickness: var(--adva11-border-xs);
	text-underline-offset: 0.2em;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 1.5rem;
	min-height: 1.5rem;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus,
.site-footer__social-link:focus-visible {
	text-decoration: none;
}

.site-footer__social-icon {
	display: block;

	width: auto;
	height: 1.25rem;
}


/* =========================================================
   8. Phrase de soutien
   ========================================================= */

.site-footer__support {
	margin-block-start: var(--adva11-space-l);
	margin-block-end: var(--adva11-space-m);

	font-family: var(--adva11-font-body);
	font-size: var(--adva11-font-size-l);
	font-weight: var(--adva11-font-weight-semibold);
	line-height: 1.5;
	letter-spacing: 0.06em;

	color: var(--adva11-color-neutral-0);
}


/* =========================================================
   9. Crédits
   ========================================================= */

.site-footer__credits {
	margin-block-start: var(--adva11-space-2xl);

	text-align: center;
}

.site-footer__credits p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.5rem;

	margin: 0;

	font-family: var(--adva11-font-body);
	font-size: var(--adva11-font-size-s);
	font-weight: var(--adva11-font-weight-regular);
	line-height: 1.5;

	color: var(--adva11-color-neutral-0);
}

.site-footer__copyright::before {
	content: "";

	display: inline-block;

	width: 1em;
	height: 1em;
	margin-inline-end: 0.35em;

	vertical-align: -0.15em;

	background-color: currentColor;
	mask-image: url("../icons/icon-copyright.svg");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.site-footer__credits a {
	color: inherit;
	text-decoration: none;
}

.site-footer__credits a:hover,
.site-footer__credits a:focus,
.site-footer__credits a:focus-visible {
	text-decoration-line: underline;
	text-decoration-thickness: var(--adva11-border-xs);
	text-underline-offset: 0.2em;
}


/* =========================================================
   10. Responsive
   ========================================================= */

@media (max-width: 60em) {

	.site-footer__inner {
		padding-inline: var(--adva11-space-l);
	}

	.site-footer__columns {
		grid-template-columns: 1fr;
	}

	.site-footer__column--identity {
		text-align: left;
	}

	.site-footer__column--legal {
		order: 3;

		display: block;
	}

	.site-footer__column--actions {
		order: 2;
	}

	.site-footer__logo {
		justify-content: flex-start;
	}

}

@media (max-width: 40em) {

	.site-footer__inner {
		padding-block-start: var(--adva11-space-2xl);
		padding-block-end: var(--adva11-space-xl);
		padding-inline: var(--adva11-space-m);
	}

	.site-footer__credits p {
		flex-direction: column;
		gap: var(--adva11-space-2xs);
	}

	.site-footer__credits-separator {
		display: none;
	}

}