/*
 * Pied de page Metal-X.
 * Mise en page et effets verrouilles ici ; le contenu (logo, titres, liens, reseaux) reste editable cote WP.
 * Zero valeur en dur : couleurs / espacements / typos viennent des tokens theme.json (var --wp--preset--*).
 */

/* --mx-radius et --mx-transition sont definis une seule fois dans base.css (charte), depuis les tokens de forme/motion. */

/* Fond de page au ton sombre du footer : evite la bande blanche sous le footer en mobile (le rebond de
   defilement iOS laissait voir le fond blanc du body sous le footer). Toutes les sections sont opaques,
   le milieu de page est donc inchange ; le haut (sur-header noir) reste coherent avec ce fond sombre. */
html {
	background-color: var(--wp--preset--color--grey-dark);
}

/* Conteneur du pied de page : fond continu + aucun ecart entre bandeau et sous-footer
   (sinon le fond blanc du body apparait dans le block gap par defaut de 24px). */
.mx-footer {
	background-color: var(--wp--preset--color--grey-dark);
}

.mx-footer > * + * {
	margin-block-start: 0;
}

/* Contenu cadre et centre sur grands ecrans (evite l'effet "colle a gauche").
   Le fond reste pleine largeur grace a .mx-footer ; seul le contenu est borne. */
.mx-footer__main,
.mx-footer__legal {
	max-width: 1440px; /* cote Figma */
	margin-inline: auto;
}

/* ---- Bandeau principal ---- */
.mx-footer__main {
	background-color: var(--wp--preset--color--grey-dark);
	padding-block: var(--wp--preset--spacing--50); /* 40 */
	/* Padding et ecart carte<->colonnes fluides : valeurs Figma a 1440px, compressees jusqu'a 1046px
	   (ou les accordeons prennent le relais) pour garder la mise en page cote a cote plus longtemps. */
	padding-inline: clamp(20px, calc(20px + 84 * (100vw - 1046px) / 394), 104px); /* 104 -> 20 */
	column-gap: clamp(24px, calc(24px + 16 * (100vw - 1046px) / 394), 40px); /* 40 -> 24 */
	row-gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

/* Carte marque : logo + accroche, sur fond blanc arrondi. Carte compacte. */
.mx-footer__brand {
	flex: 0 0 auto;
	/* Carte fluide : 300 (Figma, >=1440) qui se reduit jusqu'a 230 (logo 190 + padding 20) vers 1046. */
	inline-size: clamp(230px, calc(230px + 70 * (100vw - 1046px) / 394), 300px);
	max-inline-size: 100%;
	background-color: var(--wp--preset--color--white);
	border-radius: var(--mx-radius);
	padding: clamp(20px, calc(20px + 4 * (100vw - 1046px) / 394), 24px); /* 24 -> 20 */
	row-gap: var(--wp--preset--spacing--20); /* 8 (resserre le logo et la baseline, depuis 16) */
	align-self: center;
}

/* Largeur du logo forcee en CSS avec une specificite superieure au core
   (.wp-block-site-logo img { width:100% }, qui ignore l'attribut de bloc sur un SVG).
   L'attribut {"width":190} du bloc ne sert qu'a cadrer l'editeur ; le CSS fait foi sur le front. */
.mx-footer .mx-footer__logo img {
	width: 190px; /* cote Figma */
	height: auto;
	display: block;
}

/* Baseline remontee de 20px vers le logo (demande JN). Specificite .mx-footer + !important pour battre
   durablement toute marge du bloc paragraphe core et le row-gap de la carte marque. */
.mx-footer .mx-footer__tagline {
	margin-top: -20px !important;
}

.mx-footer__tagline {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm); /* 14 */
	line-height: 1.25;
	color: var(--wp--preset--color--black);
}

/* ---- Colonnes de liens ---- */
.mx-footer__cols {
	flex-wrap: nowrap; /* les colonnes se compressent au lieu de tomber a la ligne */
	column-gap: clamp(20px, calc(20px + 20 * (100vw - 1046px) / 394), 40px); /* 40 -> 20 */
	row-gap: var(--wp--preset--spacing--50);
	flex: 1 1 auto;
	justify-content: flex-end;
}

.mx-footer__col {
	flex: 0 1 170px; /* cote Figma (largeur colonne) */
	min-width: 0; /* compressible pour tenir la mise en page cote a cote jusqu'a 1046 */
}

/* Colonne Contact : libelles plus longs, on lui laisse plus de place. */
.mx-footer__col--contact {
	flex: 1 1 210px; /* cote Figma (largeur colonne) */
	min-width: 0;
}

.mx-footer__col-title {
	margin: 0 0 var(--wp--preset--spacing--20) 0; /* 8 */
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 900;
	font-size: var(--wp--preset--font-size--md); /* 16 (homogeneise depuis 15) */
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

/*
 * Bouton d'accordeon injecte en JS a l'interieur du titre (mobile).
 * Reset de base : sur desktop il se comporte comme un titre inerte (chevron et interaction ajoutes
 * seulement dans la media query mobile). Le titre reste un <h2> (heading > button).
 */
.mx-footer__acc-toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: start;
}

/* Liste de liens : puce orange reconstruite en CSS, libelle editable. */
.mx-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	row-gap: var(--wp--preset--spacing--10); /* 4 */
}

.mx-footer__list li {
	position: relative;
	padding-inline-start: 12px;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	line-height: 1.35;
}

.mx-footer__list li::before {
	content: "•";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--orange-dark);
}

.mx-footer__list a {
	color: var(--wp--preset--color--grey-light);
	text-decoration: none;
	transition: color var(--mx-transition, 150ms ease);
}

.mx-footer__list a:hover,
.mx-footer__list a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Colonne Contact : libelles en blanc. */
.mx-footer__col--contact .mx-footer__list a {
	color: var(--wp--preset--color--white);
}

.mx-footer__col--contact .mx-footer__list a:hover,
.mx-footer__col--contact .mx-footer__list a:focus-visible {
	color: var(--wp--preset--color--yellow);
}

/* Reseaux sociaux. */
.mx-footer__social {
	margin-block-start: var(--wp--preset--spacing--30); /* 16 */
}

.mx-footer__social-label {
	margin: 0 0 var(--wp--preset--spacing--10) 0;
	padding-inline-start: 12px;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	color: var(--wp--preset--color--white);
}

.mx-footer__rs.wp-block-social-links {
	padding-inline-start: 12px;
	gap: var(--wp--preset--spacing--20);
}

/* Icones reseaux : rendu natif (logos only), picto blanc a 24px. */
.mx-footer__rs.wp-block-social-links .wp-social-link {
	background-color: transparent;
}

.mx-footer__rs.wp-block-social-links .wp-social-link svg {
	width: 24px;
	height: 24px;
	fill: var(--wp--preset--color--white);
}

/* ---- Sous-footer : liens legaux + credit ---- */
/* 3 zones reparties sur la largeur : gauche / centre / droite (space-between). */
.mx-footer__legal {
	background-color: var(--wp--preset--color--grey-dark);
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding-block: var(--wp--preset--spacing--30); /* 16 (homogeneise depuis 14) */
	padding-inline: var(--wp--preset--spacing--60); /* 104 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: var(--wp--preset--spacing--55); /* 80 : ecart mini entre zones */
	row-gap: var(--wp--preset--spacing--30); /* 16 */
}

/* Une zone = une rangee d'items ; ecart interne de 20px (cote demandee par JN, hors echelle de tokens). */
.mx-footer__legal-zone {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.mx-footer__legal-zone--right {
	justify-content: flex-end;
}

.mx-footer__legal-item {
	margin: 0;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	color: var(--wp--preset--color--grey-light);
}

.mx-footer__legal-item a {
	color: var(--wp--preset--color--grey-light);
	text-decoration: none;
	transition: color var(--mx-transition, 150ms ease);
}

.mx-footer__legal-item a:hover,
.mx-footer__legal-item a:focus-visible {
	color: var(--wp--preset--color--white);
}

/* Declencheur cookies : <button> requis par Complianz, calque sur le style des liens legaux. */
.mx-footer__legal-trigger {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--titillium);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs); /* 12 */
	line-height: inherit;
	color: var(--wp--preset--color--grey-light);
	transition: color var(--mx-transition, 150ms ease);
}

.mx-footer__legal-trigger:hover,
.mx-footer__legal-trigger:focus-visible {
	color: var(--wp--preset--color--white);
}

.mx-footer__legal-trigger:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

/* Credit LDD : signature accolee au libelle "Conception web". */
.mx-footer__credit {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10); /* 4 */
}

.mx-footer__credit::after {
	content: "";
	display: inline-block;
	width: 12px; /* 12, homogeneise depuis 13 (mask contain conserve le ratio) */
	height: 12px;
	background-color: var(--wp--preset--color--grey-light);
	-webkit-mask: url("../icons/signature-lesdeuxdandys.svg") center / contain no-repeat;
	mask: url("../icons/signature-lesdeuxdandys.svg") center / contain no-repeat;
}

/* ---- Responsive : colonnes en accordeons sous 1046px ---- */
@media (max-width: 1046px) {
	.mx-footer__main {
		flex-direction: column;
		align-items: stretch;
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
	}

	.mx-footer__brand {
		align-self: center;
	}

	.mx-footer__cols {
		flex-direction: column;
		row-gap: 0;
		column-gap: 0;
		justify-content: flex-start;
	}

	/* Chaque colonne devient un accordeon plein largeur, separe par un filet. */
	.mx-footer__col {
		flex: 0 0 auto;
		width: 100%;
		min-width: 0;
		border-top: 1px solid var(--wp--preset--color--border-light);
	}

	.mx-footer__col-title {
		margin: 0;
	}

	.mx-footer__acc-toggle {
		padding-block: var(--wp--preset--spacing--40); /* 24 -> en-tete ~72px de haut */
		cursor: pointer;
	}

	.mx-footer__acc-toggle::after {
		content: "";
		flex: 0 0 auto;
		width: 24px; /* cote Figma (icon-arrow 24) */
		height: 24px;
		background-color: var(--wp--preset--color--grey-light);
		-webkit-mask: url("../icons/icon-arrow-down.svg") center / 16px no-repeat;
		mask: url("../icons/icon-arrow-down.svg") center / 16px no-repeat;
		transition: transform var(--mx-transition, 150ms ease);
	}

	.mx-footer__acc-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	/* Liste : repliee via l'attribut hidden pose par le JS ; marge basse quand deployee. */
	.mx-footer__list[hidden] {
		display: none;
	}

	.mx-footer__list {
		padding-block-end: var(--wp--preset--spacing--40); /* 24 */
	}

	/* Colonne Contact : le bloc reseaux reste visible, centre, separe par un filet. */
	.mx-footer__col--contact .mx-footer__social {
		margin-block-start: 0;
		padding-block: var(--wp--preset--spacing--40);
		border-top: 1px solid var(--wp--preset--color--border-light);
		text-align: center;
	}

	.mx-footer__col--contact .mx-footer__social-label,
	.mx-footer__col--contact .mx-footer__rs.wp-block-social-links {
		padding-inline-start: 0;
		justify-content: center;
	}

	/* Liens un peu plus grands et espaces (lisibilite + cible tactile plus confortable). */
	.mx-footer__list li {
		font-size: var(--wp--preset--font-size--sm); /* 14 (etait 12) */
		line-height: 1.4;
	}

	.mx-footer__list {
		row-gap: var(--wp--preset--spacing--20); /* 8 (etait 4) */
	}

	.mx-footer__list a {
		display: inline-block;
		padding-block: var(--wp--preset--spacing--10); /* 4 : agrandit la zone cliquable */
	}

	/* Icone reseau (LinkedIn) : cible tactile 44px, picto agrandi (etait 24). */
	.mx-footer__rs.wp-block-social-links .wp-social-link {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.mx-footer__rs.wp-block-social-links .wp-social-link svg {
		width: 30px;
		height: 30px;
	}

	/* Sous-footer : padding reduit, les 3 zones se centrent et wrappent proprement. */
	.mx-footer__legal {
		justify-content: center;
		padding-inline: var(--wp--preset--spacing--40); /* 24 */
		row-gap: var(--wp--preset--spacing--30); /* 16 */
	}
}

/* Mobile : les 3 zones s'empilent, centrees. */
@media (max-width: 600px) {
	.mx-footer__legal {
		flex-direction: column;
		align-items: center;
	}

	.mx-footer__legal-zone {
		justify-content: center;
	}
}

/* Accessibilite : focus visible homogene. */
.mx-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mx-footer * {
		transition: none !important;
	}
}