/* ===================================================================
 * Pied de page « Média » — extension mpn-footer, templates/site-footer.php.
 *
 * Maquette validée : https://www.monpetitnuage.com/html/footer/v02.html
 *
 * Écart volontaire : la maquette est en Playfair Display + Archivo. On
 * reste sur le système du site (DM Serif Display + DM Sans, typography.css)
 * plutôt que de charger deux familles de plus sur chaque page pour le seul
 * pied de page. Les variables viennent de zaira-child ; les valeurs de repli
 * servent si le thème change. DM Serif Display n'existe qu'en 400 : les « 700 » de la
 * maquette passent en 400, sinon le navigateur fabrique un faux gras.
 * =================================================================== */

.mpn-footer {
	--mpn-footer-ink: #111111;
	--mpn-footer-muted: #4D4D4D;
	/* Vert secondaire du thème (Personnaliser → couleurs). Sur blanc il
	 * plafonne à 4,37:1, sous les 4,5:1 exigés pour du texte : il reste aux
	 * éléments décoratifs, le texte prend la même teinte assombrie (5:1). */
	--mpn-footer-accent: var(--tg-secondary-color, #517f93);
	--mpn-footer-accent-text: #4A7587;
	/* Violet primaire du thème : trop pâle pour du texte, il sert de fond.
	 * Les étiquettes prennent la même teinte (253°) en foncé, pour du
	 * texte blanc lisible (8,9:1). */
	--mpn-footer-violet-pale: var(--tg-primary-color, #dfd9f5);
	--mpn-footer-violet: #4E3F83;
	--mpn-footer-rule: #D9D9D9;

	width: 100%;
	/* Respiration entre la fin du contenu et le filet noir du footer. */
	margin-top: 80px;
	background: #FFFFFF;
	color: var(--mpn-footer-ink);
	font-family: var(--mpn-font-sans, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.5;
}

.mpn-footer *,
.mpn-footer *::before,
.mpn-footer *::after {
	box-sizing: border-box;
}

.mpn-footer a {
	color: var(--mpn-footer-ink);
	text-decoration: none;
}

.mpn-footer a:hover {
	color: var(--mpn-footer-accent-text);
	text-decoration: underline;
}

.mpn-footer a:focus-visible {
	outline: 2px solid var(--mpn-footer-accent);
	outline-offset: 3px;
}

.mpn-footer p {
	color: inherit;
}

.mpn-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px 24px;
}

/* En-tête : logo + accroche -------------------------------------------- */

.mpn-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 24px;
	padding: 20px 0;
	border-top: 4px solid var(--mpn-footer-ink);
	border-bottom: 1px solid var(--mpn-footer-ink);
}

.mpn-footer .mpn-logo {
	font-family: var(--mpn-font-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1;
}

.mpn-logo span {
	color: var(--mpn-footer-accent);
}

.mpn-footer .mpn-tag {
	margin: 0;
	font-size: 15px;
	color: var(--mpn-footer-muted);
}

/* Colonnes ------------------------------------------------------------- */

.mpn-cols {
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--mpn-footer-ink);
}

.mpn-col {
	flex: 1 1 220px;
	padding: 28px 24px 32px;
	border-right: 1px solid var(--mpn-footer-rule);
}

.mpn-col:first-child {
	padding-left: 0;
}

.mpn-col:last-child {
	flex: 1.6 1 320px;
	padding-right: 0;
	border-right: 0;
}

.mpn-footer .mpn-label {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--mpn-footer-violet);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.mpn-rub {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: var(--mpn-font-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.15;
}

.mpn-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 15px;
}

/* Bannières codes promo ------------------------------------------------ */

.mpn-promos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.mpn-footer .mpn-banner {
	flex: 1 1 140px;
	max-width: 180px;
	aspect-ratio: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px;
	text-align: center;
	background: var(--mpn-footer-violet-pale);
	border: 1px solid var(--mpn-footer-violet-pale);
	border-radius: 6px;
	overflow: hidden;
}

.mpn-footer .mpn-banner:hover {
	text-decoration: none;
	border-color: var(--mpn-footer-accent);
}

.mpn-banner strong {
	font-family: var(--mpn-font-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
	font-size: 22px;
	font-weight: 400;
}

/* Bannière officielle : l'image occupe toute la case. */
.mpn-footer .mpn-banner--image {
	padding: 0;
	background: none;
}

.mpn-banner--image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mpn-footer .mpn-all {
	display: inline-block;
	margin-top: 16px;
	font-size: 15px;
	font-weight: 700;
	text-decoration: underline;
}

/* Marques -------------------------------------------------------------- */

.mpn-brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0;
	border-bottom: 1px solid var(--mpn-footer-ink);
}

.mpn-brands-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
}

.mpn-footer .mpn-brands-list p {
	margin: 0;
	font-family: var(--mpn-font-serif, "DM Serif Display", Georgia, "Times New Roman", serif);
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
}

.mpn-footer .mpn-brands-list .mpn-label {
	margin: 0;
	font-family: var(--mpn-font-sans, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
}

.mpn-footer .mpn-cta {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 22px;
	border-radius: 24px;
	background: var(--mpn-footer-ink);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 15px;
}

.mpn-footer .mpn-cta:hover {
	background: var(--mpn-footer-accent-text);
	color: #FFFFFF;
	text-decoration: none;
}

/* Liens partenaires ---------------------------------------------------- */

.mpn-sponso {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 20px;
	padding: 18px 0;
	border-bottom: 1px solid var(--mpn-footer-rule);
	font-size: 13px;
}

.mpn-footer .mpn-sponso .mpn-label {
	/* Ligne discrète : pas d'étiquette violette ici. */
	margin: 0;
	padding: 0;
	background: none;
	font-size: 13px;
	color: var(--mpn-footer-muted);
}

.mpn-footer .mpn-sponso a {
	color: var(--mpn-footer-muted);
}

/* Bas de page ---------------------------------------------------------- */

.mpn-legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px 24px;
	padding-top: 16px;
	font-size: 12px;
	color: var(--mpn-footer-muted);
}

.mpn-footer .mpn-legal p {
	max-width: 560px;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}

.mpn-legal nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.mpn-footer .mpn-legal a {
	color: var(--mpn-footer-muted);
}

/* Mobile : colonnes empilées, filets horizontaux (breakpoint de la maquette). */
@media (max-width: 700px) {

	.mpn-footer {
		margin-top: 56px;
	}

	.mpn-col {
		padding: 24px 0;
		border-right: 0;
		border-bottom: 1px solid var(--mpn-footer-rule);
	}

	.mpn-col:last-child {
		border-bottom: 0;
	}
}