/* ═══════════════════════════════════════════════════════════════════════════
   PIED DE PAGE

   Bande pétrole pleine largeur. `.fmt-invert` (style.css) pose le fond, le
   texte ivoire et le traitement des liens ; on ne décrit ici que la mise en
   page et les nuances propres au pied de page.

   La balise `<footer>` est déclarée par l'appel `wp:template-part` du gabarit :
   les éléments racines de `parts/footer.html` sont des `div`, sans quoi on
   emboîterait deux repères ARIA « contentinfo ».
   ═══════════════════════════════════════════════════════════════════════════ */

/* `.fmt-footer` et `.fmt-invert` sont posées par l'appel `wp:template-part` des
   gabarits, donc sur la balise `<footer>` elle-même : c'est elle qui porte la
   bande, pleine largeur puisqu'elle est au premier niveau du document. Elle
   TOUCHE la dernière bande de la page, sans trait : quand celle-ci est
   l'appel pétrole, c'est le sillage posé au pied de l'appel qui la clôt. */
.fmt-footer {
	margin-block-start: 0;
}

.fmt-footer__contenu {
	padding-inline: var(--bande-x);
	padding-block-start: clamp(48px, 6vw, 72px);
}

.fmt-footer__haut {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: clamp(32px, 5vw, 64px);
}

.fmt-footer__haut > *,
.fmt-footer__marque > *,
.fmt-footer__colonnes > *,
.fmt-footer__colonne > *,
.fmt-footer__bas > * {
	margin-block: 0;
}

.fmt-footer__marque {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	max-width: 26.25rem;
}

/* Le logo officiel en ivoire, imprimé par la composition `fmt/logo-pied`. */
.fmt-footer__logo .fmt-logo {
	--fmt-logo-h: 48px;
}

.fmt-footer__livraison {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-body);
	color: var(--text-on-inverse-muted);
}

.fmt-footer__paiements {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.fmt-footer__paiements > * {
	margin-block: 0;
}

.fmt-footer__paiements-titre {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--text-on-inverse-muted);
}

.fmt-footer__paiements-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-footer__paiement {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 34px;
	border-radius: var(--radius-4);
	background: #fff;
	overflow: hidden;
}

.fmt-footer__paiement img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.fmt-footer__paiement--visa img {
	width: 70px;
	height: auto;
	max-width: none;
	flex: none;
}

.fmt-footer__paiement--paypal img {
	width: 25px;
	height: 25px;
}

.fmt-footer__paiement--stripe img {
	width: 47px;
	height: auto;
}

/* ───────────────────────────────────────────────────────────────────────────
   Les quatre colonnes de liens
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-footer__colonnes {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-32) clamp(28px, 4vw, 64px);
}

.fmt-footer__colonne {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* Sur-titres en ivoire à 64 % : 5,36:1 sur le pétrole, au-dessus des 4,5:1
   d'un petit texte, et un cran sous les liens qu'ils coiffent. */
.fmt-footer .fmt-footer__titre {
	font-size: var(--wp--preset--font-size--micro);
	color: var(--text-on-inverse-muted);
}

.fmt-footer__liens {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fmt-footer__liens li {
	margin: 0;
}

/* Une liste de navigation se lit comme telle : pas de soulignement au repos,
   il apparaît au survol et au focus. */
.fmt-invert .fmt-footer__liens a {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--lh-ui);
	color: var(--text-on-inverse);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: var(--hairline);
	text-underline-offset: .28em;
	transition: text-decoration-color var(--dur-quick) var(--ease-soft);
}

.fmt-invert .fmt-footer__liens a:hover,
.fmt-invert .fmt-footer__liens a:focus-visible {
	text-decoration-color: var(--ivoire-64);
}

/* ───────────────────────────────────────────────────────────────────────────
   La barre basse
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-footer__bas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-8) var(--space-32);
	margin-block-start: var(--space-64);
	padding-block-end: var(--space-48);
}

.fmt-footer__bas p {
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--lh-caption);
	color: var(--text-on-inverse-muted);
}

.fmt-footer__bas .fmt-footer__utilitaires {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--space-16) var(--space-24);
	margin-inline-start: auto;
}

.fmt-footer__utilitaires > * {
	margin: 0;
}

.fmt-footer__bas .fmt-footer__paiements-logos {
	justify-content: flex-end;
	max-width: 100%;
}

.fmt-footer__langues .fmt-langues {
	background: rgb(245 241 232 / 0.16);
}

.fmt-footer__langues .fmt-langues a {
	color: var(--text-on-inverse);
}

.fmt-footer__langues .fmt-langues a:hover {
	background: rgb(245 241 232 / 0.16);
}

.fmt-footer__langues .fmt-langues a[aria-current="true"] {
	background: var(--ivoire);
	color: var(--petrole);
}

@media (max-width: 900px) {
	.fmt-footer__colonnes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.fmt-footer__haut {
		gap: var(--space-32);
	}

	.fmt-footer__marque {
		max-width: none;
	}

	.fmt-footer__logo .fmt-logo {
		--fmt-logo-h: 40px;
	}

	.fmt-footer__bas {
		justify-content: flex-start;
		margin-block-start: var(--space-48);
		padding-block-end: var(--space-32);
	}
}