/**
 * Marche & Co — composants et mises en page.
 *
 * theme.json porte les tokens (couleurs, familles, tailles, espacements) et le style
 * des éléments. Ce fichier porte tout ce qu'un preset ne sait pas exprimer : grilles
 * auto-fit, gabarits asymétriques, la trace, et les états de survol.
 *
 * Convention : toutes les classes sont préfixées `mc-`. Les couleurs viennent des
 * variables de theme.json, jamais d'un hexadécimal écrit ici.
 *
 * Sommaire
 *   01. Socle
 *   02. Rythme de section et conteneurs
 *   03. La trace
 *   04. En-tête et navigation
 *   05. Boutons, liens, sur-titres
 *   06. Accueil
 *   07. Pages internes
 *   08. Formulaire
 *   09. Pied de page
 *   10. CTA collant
 *   11. Mouvement
 */

/* -------------------------------------------------------------------------- */
/* 01. Socle                                                                   */
/* -------------------------------------------------------------------------- */

/*
 * Le modèle de boîte s'applique partout : sans lui, un champ de formulaire ajoute
 * ses 14 px de retrait et sa bordure à la hauteur demandée, et déborde de sa colonne.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}

body {
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--pierre);
	outline-offset: 2px;
}

/* Le lien de la barre supérieure et les cibles tactiles : 44 px minimum (brief §10). */
.mc-touch {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

img {
	max-width: 100%;
	height: auto;
}

.mc-visuellement-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------- */
/* 02. Rythme de section et conteneurs                                         */
/* -------------------------------------------------------------------------- */

/*
 * La maquette fixe le padding vertical à 120 px (accueil) et 96 px (pages internes)
 * sans prévoir de réduction mobile. Le brief §3.4 la prescrit — 120 / 80 / 56 — et
 * §10 rappelle que le mobile est le cas majoritaire. On garde la maquette au pixel
 * sur desktop et on applique la réduction du brief en dessous de 1025 px.
 */
.mc-section {
	padding-inline: 24px;
	padding-block: var(--mc-py, 120px);
}

.mc-section--96 { --mc-py: 96px; }
.mc-section--72 { --mc-py: 72px; }
.mc-section--sans-haut { padding-top: 0; }
.mc-section--sans-bas { padding-bottom: 0; }

@media (max-width: 1024px) {
	.mc-section { --mc-py: 80px; }
	.mc-section--96 { --mc-py: 72px; }
	.mc-section--72 { --mc-py: 56px; }
}

@media (max-width: 767px) {
	.mc-section { --mc-py: 56px; }
	.mc-section--96 { --mc-py: 52px; }
	.mc-section--72 { --mc-py: 44px; }
}

/*
 * Colonne de lecture décalée à droite : elle laisse respirer la trace dans la marge
 * gauche sur desktop, et reprend toute la largeur quand la trace disparaît.
 */
/*
 * Le layout « contenu limité » de Gutenberg centre ses enfants avec !important.
 * L'asymétrie voulue par le brief §3.4 — colonne poussée à droite pour dégager la
 * marge de la trace — impose de reprendre la main au même niveau d'insistance.
 *
 * `--mc-gouttiere` reproduit le décalage du conteneur de 1240 px : une colonne de
 * 680 px se cale ainsi sur le bord du conteneur, et non sur celui de la fenêtre.
 * En dessous de 1240 px la valeur tombe à zéro d'elle-même.
 */
.mc-lecture,
.mc-mesure {
	--mc-gouttiere: max(0px, calc((100% - 1240px) / 2));

	width: 100%;
	/*max-width: 680px;*/
}

.mc-lecture {
	margin-left: auto !important;
	margin-right: var(--mc-gouttiere) !important;
}

.mc-mesure {
	margin-left: var(--mc-gouttiere) !important;
	margin-right: auto !important;
}

/* Sous 1025 px la trace disparaît : la colonne reprend le bord gauche. */
@media (max-width: 1024px) {
	.mc-lecture {
		margin-left: var(--mc-gouttiere) !important;
		margin-right: auto !important;
	}
}

/* Filets de séparation, seule hiérarchie autorisée avec le fond (brief §3.4). */
.mc-filet-bas { border-bottom: 1px solid var(--wp--preset--color--brume); }
.mc-filet-haut { border-top: 1px solid var(--wp--preset--color--brume); }

/*
 * `mc-jalon` marque une section comme point de passage : site.js y pose un cercle
 * plein sur la trace. `mc-apparait` déclenche l'apparition au défilement.
 */

/* Grilles récurrentes. Les enfants directs perdent leurs marges de flux. */
.mc-grille,
.mc-duo,
.mc-trio {
	display: grid;
}

.mc-grille > *,
.mc-duo > *,
.mc-trio > * {
	margin-block: 0;
}

.mc-trio {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 40px;
}

.mc-duo {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 64px;
	align-items: start;
}

.mc-duo--centre { align-items: center; }
.mc-duo--56 { gap: 56px; }

/* Pile verticale simple : reprend le flex column + gap de la maquette. */
.mc-pile {
	display: flex;
	flex-direction: column;
}

.mc-pile > * { margin-block: 0; }

.mc-pile--12 { gap: 12px; }
.mc-pile--16 { gap: 16px; }
.mc-pile--20 { gap: 20px; }
.mc-pile--24 { gap: 24px; }
.mc-pile--28 { gap: 28px; }

/* Rangée horizontale qui retombe en colonne. */
.mc-rangee {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.mc-rangee > * { margin-block: 0; }

/* -------------------------------------------------------------------------- */
/* 03. La trace                                                                */
/* -------------------------------------------------------------------------- */

/*
 * Ligne continue posée dans la marge gauche, dessinée au scroll. Le SVG est injecté
 * par site.js à partir de la hauteur réelle du document et des sections marquées
 * `data-trace-point`. Purement décoratif : aria-hidden côté JS.
 */
.mc-trace {
	position: absolute;
	top: 0;
	left: max(8px, calc((100% - 1240px) / 2 - 56px));
	width: 44px;
	pointer-events: none;
	z-index: 0;
}

.mc-page {
	position: relative;
}

/* Entre 861 et 1351 px, la trace se colle au bord et le contenu se décale. */
@media (max-width: 1351px) and (min-width: 861px) {
	.mc-trace { left: 16px; }

	.mc-section,
	.mc-header,
	.mc-footer {
		padding-left: 84px;
	}

	.mc-header__inner,
	.mc-hero__contenu {
		padding-left: 0;
	}
}

@media (max-width: 860px) {
	.mc-trace { display: none; }
}

/* -------------------------------------------------------------------------- */
/* 04. En-tête et navigation                                                   */
/* -------------------------------------------------------------------------- */

.mc-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: 84px;
	display: flex;
	align-items: center;
	background: rgb(239 238 232 / 94%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--wp--preset--color--brume);
	padding-inline: 24px;
}

.mc-header__inner {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 40px;
}

.mc-logo {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
}

/*
 * Navigation : bloc core, pour que la cliente gère ses entrées depuis l'éditeur.
 * On ne reprend du markup natif que ce qu'il faut pour retrouver la maquette.
 */
.mc-nav {
	margin-left: auto;
	font-size: 16px;
}

.mc-nav .wp-block-navigation__container {
	gap: 28px;
	align-items: center;
}

.mc-nav .wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
	padding-block: 4px;
	line-height: 1.4;
}

.mc-nav .current-menu-item > .wp-block-navigation-item__content,
.mc-nav .current-menu-ancestor > .wp-block-navigation-item__content,
.mc-nav .current-page-ancestor > .wp-block-navigation-item__content,
.mc-nav .wp-block-navigation-item__content[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--pierre);
}

/*
 * Le CTA primaire est la dernière entrée du menu, pas un bouton indépendant :
 * une seule source pour le libellé imposé par le brief §5, présente aussi bien
 * dans la barre desktop qu'en bas de la superposition mobile.
 */
.mc-nav .mc-nav__cta { margin-left: 12px; }

.mc-nav .mc-nav__cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--encre);
	border-radius: 4px;
	padding: 14px 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	white-space: nowrap;
	line-height: 1.2;
	border-bottom: 0;
	transition: background-color 150ms ease;
}

.mc-nav .mc-nav__cta .wp-block-navigation-item__content:hover,
.mc-nav .mc-nav__cta .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--pierre-fonce);
	color: var(--wp--preset--color--encre);
}

/*
 * Menu mobile — absent de la maquette, qui se contente de masquer la nav desktop
 * sous 860 px. Composé d'après le brief §8.2 : panneau plein écran, fond papier,
 * entrées en Bricolage, CTA primaire en bas et toujours visible.
 *
 * Le bloc de navigation bascule en superposition à 600 px. Le gabarit de l'en-tête
 * (logo + 4 entrées + CTA) déborde bien avant : on remonte la bascule à 860 px, ce
 * qui suppose de neutraliser les règles natives entre 600 et 860 px.
 */
@media (min-width: 600px) and (max-width: 860px) {
	.mc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/*
 * `backdrop-filter` crée un bloc conteneur pour les descendants en position fixe :
 * la superposition du menu, qui vit dans l'en-tête, s'y retrouverait enfermée dans
 * les 84 px de la barre. On s'en passe là où le menu s'ouvre — le fond opaque à
 * 94 % suffit — et on le neutralise aussi pendant l'ouverture, par sécurité.
 */
@media (max-width: 860px) {
	.mc-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: var(--wp--preset--color--papier);
	}
}

.mc-header:has(.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.mc-nav .wp-block-navigation__responsive-container-open,
.mc-nav .wp-block-navigation__responsive-container-close {
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--encre);
}

/*
 * Le cœur habille la superposition en blanc quand la navigation n'a pas de fond
 * déclaré, avec une spécificité élevée. On repasse sur papier au même niveau.
 */
.wp-block-navigation.mc-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
	padding: 24px;
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0;
	align-items: stretch;
	width: 100%;
	padding-top: 8px;
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--brume);
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding-block: 8px;
	border-bottom: 0;
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 500;
	font-size: 24px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--encre);
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	padding: 0 0 12px;
	border: 0;
	background: transparent;
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 0;
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	min-height: 44px;
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--wp--preset--color--ardoise);
}

/* Dans la superposition, le CTA reprend toute la largeur, sous les rubriques. */
.mc-nav .wp-block-navigation__responsive-container.is-menu-open .mc-nav__cta {
	margin: 24px 0 0;
	border-bottom: 0;
}

.mc-nav .wp-block-navigation__responsive-container.is-menu-open .mc-nav__cta .wp-block-navigation-item__content {
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 16px 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.12em;
	white-space: normal;
	text-align: center;
}

/* -------------------------------------------------------------------------- */
/* 05. Boutons, liens, sur-titres                                              */
/* -------------------------------------------------------------------------- */

.mc-surtitre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.5;
	margin: 0;
}

.mc-mono {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.08em;
}

.mc-mono--maj {
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Boutons — le bloc core/button porte déjà fond, rayon et typo via theme.json. */
.mc-btn .wp-block-button__link,
a.mc-btn {
	display: inline-block;
	background: var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--encre);
	border-radius: 4px;
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.2;
	transition: background-color 150ms ease;
}

.mc-btn .wp-block-button__link:hover,
a.mc-btn:hover,
.mc-btn .wp-block-button__link:focus-visible,
a.mc-btn:focus-visible {
	background: var(--wp--preset--color--pierre-fonce);
	color: var(--wp--preset--color--encre);
}

/* Bouton fantôme clair, posé sur photo ou sur fond forêt. */
.mc-btn-clair .wp-block-button__link,
a.mc-btn-clair {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--wp--preset--color--papier);
	color: var(--wp--preset--color--papier);
	border-radius: 4px;
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.2;
	transition: background-color 150ms ease, color 150ms ease;
}

.mc-btn-clair .wp-block-button__link:hover,
a.mc-btn-clair:hover,
.mc-btn-clair .wp-block-button__link:focus-visible,
a.mc-btn-clair:focus-visible {
	background: var(--wp--preset--color--papier);
	color: var(--wp--preset--color--encre);
}

/* Bouton fantôme foncé, sur fond papier. */
.mc-btn-sombre .wp-block-button__link,
a.mc-btn-sombre {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--wp--preset--color--encre);
	color: var(--wp--preset--color--encre);
	border-radius: 4px;
	padding: 16px 32px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.2;
	transition: background-color 150ms ease, color 150ms ease;
}

.mc-btn-sombre .wp-block-button__link:hover,
a.mc-btn-sombre:hover,
.mc-btn-sombre .wp-block-button__link:focus-visible,
a.mc-btn-sombre:focus-visible {
	background: var(--wp--preset--color--encre);
	color: var(--wp--preset--color--papier);
}

/* Lien fléché : la flèche avance de 4 px au survol (brief §8.4). */
.mc-lien-fleche {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.4;
}

.mc-lien-fleche::after {
	content: "→";
	color: var(--wp--preset--color--pierre);
	transition: transform 150ms ease;
}

.mc-lien-fleche:hover::after,
.mc-lien-fleche:focus-visible::after {
	transform: translateX(4px);
}

/* Fil d'Ariane. */
.mc-fil {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.5;
}

.mc-fil a { color: var(--wp--preset--color--ardoise); }
.mc-fil [aria-current="page"] { color: var(--wp--preset--color--encre); }

/* Liste à puces : point 4 px pierre, jamais de disque ni de coche (brief §8.4). */
.mc-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mc-liste li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 17px;
	line-height: 1.55;
}

.mc-liste li::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--wp--preset--color--pierre);
	transform: translateY(-3px);
}

.mc-liste--filets li {
	gap: 16px;
	font-size: 18px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wp--preset--color--brume);
}

.mc-liste--filets {
	gap: 16px;
}

.mc-liste--filets li::before {
	width: 5px;
	height: 5px;
}

/* Liste sans puce, colonne « Ce qui est compris ». */
.mc-liste-nue {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--wp--preset--color--ardoise);
}

.mc-liste-nue li {
	font-size: 17px;
	line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* 06. Accueil                                                                 */
/* -------------------------------------------------------------------------- */

/* 01 — Hero */
.mc-hero {
	position: relative;
	height: var(--mc-hero-h, 88vh);
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	padding: 0;
}

/*
 * Mode recette (?mc-capture=1) : les hauteurs exprimées en vh et l'en-tête collant
 * rendent les captures pleine page inexploitables, puisqu'elles suivent la hauteur
 * de fenêtre demandée. On les fige le temps d'une capture. Sans effet sur le site.
 */
.mc-capture { --mc-hero-h: 820px; }
.mc-capture .mc-header { position: static; }

@media (max-width: 767px) {
	.mc-capture { --mc-hero-h: 610px; }
}

.mc-hero__image,
.mc-hero__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.mc-hero__image img {
	object-fit: cover;
	display: block;
}

/*
 * Voile dégradé, jamais uniforme (brief §6) : opaque en bas où se pose le H1,
 * presque transparent en haut pour que la photo respire. Posé en pseudo-élément
 * plutôt qu'en bloc, pour ne pas exposer un bloc vide dans l'éditeur.
 */
.mc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(22 36 31 / 86%) 0%,
		rgb(22 36 31 / 74%) 34%,
		rgb(22 36 31 / 50%) 62%,
		rgb(22 36 31 / 10%) 88%
	);
	pointer-events: none;
}

.mc-hero__contenu {
	position: relative;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px 72px;
	z-index: 1;
}

.mc-hero h1 {
	font-size: clamp(38px, 5vw, 72px);
	max-width: 900px;
	text-wrap: balance;
}

.mc-hero__chapo {
	font-size: clamp(19px, 1.6vw, 23px);
	line-height: 1.55;
	max-width: 660px;
	text-wrap: pretty;
	margin-top: -12px;
}

.mc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

@media (max-width: 767px) {
	.mc-hero {
		height: var(--mc-hero-h, 72vh);
		min-height: 480px;
	}

	.mc-hero__contenu { padding-bottom: 48px; }
}

/* 02 — Bandeau confiance */
.mc-confiance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
}

.mc-confiance__intro {
	max-width: 260px;
	margin: 0;
}

.mc-confiance__marques {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 44px;
}

.mc-marque {
	position: relative;
	margin: 0;
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 500;
	font-size: 22px;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.2;
}

/*
 * Filet de séparation posé au milieu de l'écart, plutôt qu'un bloc vide dans le
 * contenu : ajouter ou retirer une référence ne demande aucun réglage.
 */
.mc-marque:not(:last-child)::after {
	content: "";
	position: absolute;
	right: -22px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 24px;
	background: var(--wp--preset--color--brume);
}

@media (max-width: 767px) {
	.mc-confiance__marques { gap: 20px 28px; }
	.mc-marque:not(:last-child)::after { right: -14px; }
}

/* 05 — Trois intelligences */
.mc-intelligence img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	display: block;
}

.mc-intelligence h3 { margin: 0; }

.mc-intelligence p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--ardoise);
	margin: 0;
	text-wrap: pretty;
}

/* 06 — Vous reconnaissez-vous */
/*
 * Les numéros 01 à 08 sont produits par un compteur CSS, pas saisis à la main :
 * la cliente peut ajouter, retirer ou réordonner une situation sans renuméroter.
 * Chaque situation est un simple paragraphe, donc éditable comme du texte.
 */
.mc-situations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0 40px;
	border-top: 1px solid var(--wp--preset--color--brume);
	counter-reset: mc-situation;
}

.mc-situation {
	counter-increment: mc-situation;
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin: 0;
	padding: 28px 20px 28px 0;
	border-bottom: 1px solid var(--wp--preset--color--brume);
	font-size: 17px;
	line-height: 1.5;
	color: var(--wp--preset--color--encre);
}

.mc-situation::before {
	content: counter(mc-situation, decimal-leading-zero);
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--pierre);
}

/* Quand la situation renvoie vers une page, toute la ligne devient cliquable. */
.mc-situation a {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex: 1;
	transition: color 150ms ease;
}

.mc-situation a::after {
	content: "→";
	margin-left: auto;
	color: var(--wp--preset--color--pierre);
	transition: transform 150ms ease;
}

.mc-situation a:hover::after,
.mc-situation a:focus-visible::after {
	transform: translateX(4px);
}

/* Variante non cliquable, page « Pour qui ». */
.mc-situations--fixe {
	grid-template-columns: repeat(2, 1fr);
	gap: 0 56px;
}

.mc-situations--fixe .mc-situation {
	padding: 28px 0;
	font-size: 18px;
	line-height: 1.55;
}

@media (max-width: 860px) {
	.mc-situations,
	.mc-situations--fixe {
		grid-template-columns: 1fr;
	}
}

/* 07 — Les formats */
.mc-formats {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--wp--preset--color--brume);
}

/*
 * La ligne de format reste un assemblage de blocs éditables. Le lien porté par le
 * titre est étendu à toute la ligne par un pseudo-élément : on retrouve la zone
 * cliquable de la maquette sans enfermer les quatre cellules dans un bloc HTML.
 */
.mc-format {
	position: relative;
	display: grid;
	grid-template-columns: minmax(120px, 200px) minmax(180px, 1fr) minmax(120px, 180px) minmax(96px, 120px);
	gap: 32px;
	align-items: center;
	padding: 32px 0;
	border-bottom: 1px solid var(--wp--preset--color--brume);
	transition: background-color 150ms ease;
}

.mc-format:hover,
.mc-format:focus-within {
	background: rgb(212 215 207 / 35%);
}

.mc-format > * { margin: 0; }

.mc-format__trace { display: block; }

.mc-format__id {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mc-format__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.3;
	margin: 0;
}

.mc-format__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mc-format__public {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.5;
}

.mc-format__duree {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--encre);
}

.mc-format__tarif {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--pierre);
	text-align: right;
}

@media (max-width: 860px) {
	.mc-format {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 28px 0;
	}

	.mc-format__tarif { text-align: left; }
}

/* 08 — Ce que dit la science */
.mc-chiffres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 48px;
}

.mc-chiffre {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid rgb(212 215 207 / 30%);
}

.mc-chiffre > * { margin: 0; }

.mc-chiffre__valeur {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--or);
}

.mc-chiffre__libelle {
	font-size: 17px;
	line-height: 1.45;
	color: var(--wp--preset--color--papier);
}

.mc-chiffre__source {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blanc);
}

/* Variante page Seuil : pas de source, libellé plus large. */
.mc-chiffre--seuil {
	border-top-color: rgb(239 238 232 / 35%);
}

.mc-chiffre--seuil .mc-chiffre__libelle {
	font-size: 18px;
	line-height: 1.6;
}

@media (max-width: 767px) {
	.mc-chiffre__valeur { font-size: 44px; }
}

/* 09 — Témoignages */
.mc-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.mc-temoignage {
	border: 1px solid var(--wp--preset--color--brume);
	border-radius: 4px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 28px;
	background: var(--wp--preset--color--creme);
}

.mc-temoignage > * { margin: 0; }

.mc-temoignage__citation {
	font-family: var(--wp--preset--font-family--newsreader);
	font-style: italic;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--ardoise);
}

.mc-temoignage__auteur {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: auto;
}

.mc-temoignage__nom {
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 600;
	font-size: 17px;
}

.mc-temoignage__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.5;
}

/* 10 — Portrait Anne-Laure */
.mc-portrait img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	display: block;
}

.mc-valeurs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--brume);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	margin: 0;
	list-style: none;
	padding-inline: 0;
}

/* 11 — Bandeau engagement */
.mc-bandeau {
	border-top: 1px solid var(--wp--preset--color--brume);
	border-bottom: 1px solid var(--wp--preset--color--brume);
	padding: 32px 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}

.mc-bandeau > * { margin: 0; }
.mc-bandeau .mc-bandeau__lien { margin-left: auto; }

@media (max-width: 767px) {
	.mc-bandeau .mc-bandeau__lien { margin-left: 0; }
}

/* 12 — Bandeau CTA de fin de page */
.mc-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 56px;
	align-items: flex-end;
	justify-content: space-between;
}

.mc-cta > * { margin: 0; }

.mc-cta__texte { max-width: 680px; }

.mc-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.mc-cta__coords {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blanc);
}

.mc-cta__coords a { color: var(--wp--preset--color--blanc); }
.mc-cta__coords a:hover { color: var(--wp--preset--color--or); }

/* -------------------------------------------------------------------------- */
/* 07. Pages internes                                                          */
/* -------------------------------------------------------------------------- */

/* Cartes de sous-page sur les hubs. Lien étendu, comme les lignes de format. */
.mc-carte-hub {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	border: 1px solid var(--wp--preset--color--brume);
	border-radius: 4px;
	padding: 40px 32px;
	background: var(--wp--preset--color--creme);
	min-height: 280px;
	transition: border-color 150ms ease;
}

.mc-carte-hub > * { margin: 0; }

.mc-carte-hub:hover,
.mc-carte-hub:focus-within {
	border-color: var(--wp--preset--color--pierre);
}

.mc-carte-hub h2,
.mc-carte-hub__titre {
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 600;
	font-size: 28px;
	line-height: 1.3;
	letter-spacing: 0;
	margin: 0;
}

.mc-carte-hub__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.mc-carte-hub__accroche {
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--ardoise);
	text-wrap: pretty;
}

.mc-carte-hub__lien {
	margin-top: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--encre);
}

.mc-carte-hub__lien::after {
	content: " →";
	color: var(--wp--preset--color--pierre);
}

/* Fiche format détaillée, page Formats & tarifs. */
.mc-fiche {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 56px;
	padding: 48px 0;
	border-bottom: 1px solid var(--wp--preset--color--brume);
	align-items: start;
}

.mc-fiche > * { margin: 0; }

.mc-fiche__meta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--brume);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Chaque couple libellé / valeur est un paragraphe portant deux spans. */
.mc-fiche__meta > p {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.mc-fiche__cle {
	color: var(--wp--preset--color--ardoise);
}

.mc-fiche__tarif { color: var(--wp--preset--color--pierre-fonce); }

.mc-fiche__public-valeur {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.45;
	color: var(--wp--preset--color--encre);
}

@media (max-width: 860px) {
	.mc-fiche {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.mc-fiche__meta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
	}
}

/* Carte d'exemple de mission, sur fond forêt. */
.mc-exemple {
	border: 1px solid rgb(239 238 232 / 35%);
	border-radius: 4px;
	padding: 40px 32px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mc-exemple > * { margin: 0; }

.mc-exemple__benefices {
	padding-top: 20px;
	border-top: 1px solid rgb(239 238 232 / 35%);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Profil de dénivelé, page Avant / Pendant / Après. */
.mc-profil svg {
	display: block;
	overflow: visible;
	width: 100%;
	height: auto;
}

.mc-etapes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	border-top: 1px solid var(--wp--preset--color--brume);
	padding-top: 40px;
}

.mc-etapes > * { margin: 0; }

@media (max-width: 860px) {
	.mc-profil { display: none; }

	.mc-etapes {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* Citation longue avec guillemet en filigrane (brief §8.4). */
.mc-citation-longue {
	position: relative;
	width: 100%;
	max-width: 680px;
	margin: 0 0 0 auto;
	padding-top: 40px;
}

.mc-citation-longue::before {
	content: "«";
	position: absolute;
	top: 0;
	left: -48px;
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 600;
	font-size: 96px;
	line-height: 1;
	color: var(--wp--preset--color--brume);
	pointer-events: none;
}

.mc-citation-longue blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--wp--preset--font-family--newsreader);
	font-style: italic;
	font-size: 24px;
	line-height: 1.55;
	color: var(--wp--preset--color--encre);
}

.mc-citation-longue figcaption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 28px;
	margin-top: 28px;
	border-top: 1px solid var(--wp--preset--color--brume);
	text-align: left;
}

@media (max-width: 1024px) {
	.mc-citation-longue {
		margin-left: 0;
		padding-left: 48px;
	}

	.mc-citation-longue::before { left: 0; }
}

/* Citation de philosophe : filet pierre à gauche (brief §8.4). */
.mc-citation-philo {
	margin: 0;
	padding: 8px 0 8px 28px;
	border-left: 1px solid var(--wp--preset--color--pierre);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.mc-citation-philo p {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0;
}

.mc-citation-philo cite {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
}

/* Conviction numérotée, page Mon approche. */
.mc-conviction {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 32px;
	padding: 40px 0;
	border-bottom: 1px solid var(--wp--preset--color--brume);
	align-items: start;
}

.mc-conviction > * { margin: 0; }

.mc-conviction__n {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--pierre);
	padding-top: 10px;
}

.mc-conviction__corps {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 680px;
}

@media (max-width: 767px) {
	.mc-conviction {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.mc-conviction__n { padding-top: 0; }
}

/* FAQ — accordéon natif <details>, un seul ouvert à la fois via site.js. */
.mc-faq {
	border-top: 1px solid var(--wp--preset--color--brume);
}

.mc-faq details {
	border-bottom: 1px solid var(--wp--preset--color--brume);
}

.mc-faq summary {
	display: flex;
	align-items: baseline;
	gap: 24px;
	padding: 28px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--newsreader);
	font-weight: 600;
	font-size: 21px;
	line-height: 1.4;
	transition: color 150ms ease;
}

.mc-faq summary::-webkit-details-marker { display: none; }

.mc-faq summary:hover { color: var(--wp--preset--color--pierre); }

.mc-faq summary::after {
	content: "+";
	margin-left: auto;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 21px;
	color: var(--wp--preset--color--pierre);
	line-height: 1;
	flex: none;
}

.mc-faq details[open] summary::after { content: "–"; }

.mc-faq__reponse {
	padding: 0 0 28px;
	max-width: 680px;
	color: var(--wp--preset--color--ardoise);
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
}

/* Liste de diplômes, page Mon parcours. */
.mc-diplomes {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--brume);
}

.mc-diplomes li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 24px;
	padding: 20px 0;
	border-bottom: 1px solid var(--wp--preset--color--brume);
	font-size: 17px;
	line-height: 1.5;
}

.mc-diplomes .mc-diplomes__annee {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--pierre);
	flex: none;
	min-width: 92px;
}

/* Emplacement réservé, identifié en clair (brief §7 et §13). */
.mc-reserve {
	border: 1px dashed var(--wp--preset--color--brume);
	border-radius: 4px;
	background: repeating-linear-gradient(135deg, #d4d7cf 0 8px, #dde0d8 8px 16px);
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.mc-reserve span {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.7;
}

/*
 * Notes de maquette : elles rappellent les points restés en attente côté client.
 * Invisibles pour les visiteurs, visibles pour toute personne connectée ayant le
 * droit de modifier le site. Elles disparaîtront quand les points seront tranchés.
 */
.mc-note { display: none; }

.mc-notes-visibles .mc-note {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--pierre-fonce);
	line-height: 1.7;
	margin: 0;
}

.mc-notes-visibles .mc-note::before {
	content: "Note interne — ";
	opacity: 0.7;
}

.mc-notes-visibles .mc-note--clair { color: var(--wp--preset--color--or); }

/* Images de rubrique. */
.mc-img-21-9 img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	display: block;
}

.mc-img-16-9 img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.mc-img-3-2 img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.mc-img-4-5 img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}

/* -------------------------------------------------------------------------- */
/* 08. Formulaire                                                              */
/* -------------------------------------------------------------------------- */

.mc-contact {
	display: grid;
	grid-template-columns: 1fr 380px;
	gap: 80px;
	align-items: start;
}

.mc-contact > * { margin: 0; }

@media (max-width: 860px) {
	.mc-contact {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}

.mc-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 680px;
}

.mc-form__duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	align-items: end;
}

@media (max-width: 860px) {
	.mc-form__duo { grid-template-columns: 1fr; }
}

.mc-champ {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mc-form label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.5;
}

.mc-form input[type="text"],
.mc-form input[type="email"],
.mc-form select,
.mc-form textarea {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 17px;
	color: var(--wp--preset--color--encre);
	background: var(--wp--preset--color--creme);
	border: 1px solid var(--wp--preset--color--brume);
	border-radius: 4px;
	padding: 14px 16px;
	width: 100%;
	min-height: 52px;
}

.mc-form textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.6;
}

.mc-form input:focus,
.mc-form select:focus,
.mc-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--pierre);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--pierre);
}

.mc-form__aide {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ardoise);
	line-height: 1.6;
}

.mc-consentement {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--brume);
	border-radius: 4px;
}

.mc-consentement input[type="checkbox"] {
	width: 22px;
	height: 22px;
	min-height: 22px;
	flex: none;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--pierre);
	padding: 0;
}

.mc-consentement label {
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.55;
	color: var(--wp--preset--color--ardoise);
}

.mc-consentement a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mc-form__envoi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding-top: 8px;
}

.mc-form button[type="submit"] {
	background: var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--encre);
	border: none;
	border-radius: 4px;
	padding: 18px 32px;
	min-height: 56px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	transition: background-color 150ms ease;
}

.mc-form button[type="submit"]:hover,
.mc-form button[type="submit"]:focus-visible {
	background: var(--wp--preset--color--pierre-fonce);
}

.mc-form__promesse {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--encre);
}

/* Honeypot : hors écran, jamais display:none pour rester rempli par les robots. */
.mc-piege {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mc-message {
	margin: 0;
	padding: 20px;
	border: 1px solid var(--wp--preset--color--pierre);
	border-radius: 4px;
	background: var(--wp--preset--color--creme);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--encre);
	line-height: 1.7;
}

.mc-message--erreur {
	border-color: #8c2f2f;
	color: #8c2f2f;
}

.mc-aside {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.mc-aside__bloc {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--brume);
}

.mc-aside__bloc:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mc-aside__bloc > * { margin: 0; }

.mc-tel {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 500;
	font-size: 27px;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* -------------------------------------------------------------------------- */
/* 09. Pied de page                                                            */
/* -------------------------------------------------------------------------- */

.mc-footer {
	background: var(--wp--preset--color--foret);
	padding: 80px 24px 32px;
	border-top: 1px solid rgb(212 215 207 / 20%);
	font-family: var(--wp--preset--font-family--newsreader);
	font-size: 19px;
	line-height: 1.65;
}

.mc-footer__grille {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 48px;
}

.mc-footer__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mc-footer__col > * { margin: 0; }

.mc-footer__logo {
	font-family: var(--wp--preset--font-family--bricolage);
	font-weight: 600;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--papier);
	line-height: 1.2;
}

.mc-footer p,
.mc-footer__phrase {
	font-size: 17px;
	color: var(--wp--preset--color--papier);
	line-height: 1.6;
}

.mc-footer__geo,
.mc-footer__etiquette {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--blanc);
	line-height: 1.5;
}

.mc-footer__nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-size: 17px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-footer a { color: var(--wp--preset--color--blanc); }
.mc-footer a:hover,
.mc-footer a:focus-visible { color: var(--wp--preset--color--or); }

.mc-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blanc);
}

.mc-notes-visibles .mc-footer .mc-note {
	font-size: 13px;
	line-height: 1.6;
}

.mc-footer__bas {
	max-width: 1240px;
	margin: 56px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgb(212 215 207 / 20%);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--blanc);
	align-items: center;
}

.mc-footer__copyright { margin-left: auto; }

@media (max-width: 860px) {
	.mc-footer__grille {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.mc-footer__copyright { margin-left: 0; }
}

/* -------------------------------------------------------------------------- */
/* 10. CTA collant                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Mobile uniquement, à partir de 40 % de scroll (brief §5). La maquette d'accueil
 * déclenchait à 1,2 hauteur d'écran ; on retient le seuil du brief, appliqué
 * uniformément à toutes les pages.
 */
.mc-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 56px;
	z-index: 50;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--pierre);
	color: var(--wp--preset--color--encre);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	transform: translateY(100%);
	transition: transform 200ms ease;
}

.mc-sticky-cta:hover,
.mc-sticky-cta:focus-visible {
	color: var(--wp--preset--color--encre);
}

@media (max-width: 767px) {
	.mc-sticky-cta { display: flex; }
	.mc-sticky-cta.est-visible { transform: translateY(0); }

	/* Le CTA collant ne doit pas masquer la fin du pied de page. */
	.mc-footer { padding-bottom: 88px; }
}

/* -------------------------------------------------------------------------- */
/* 11. Mouvement                                                               */
/* -------------------------------------------------------------------------- */

/*
 * Apparition des blocs : 12 px de translation + opacité, 400 ms, une seule fois
 * (brief §3.5). Sans JS, rien ne se cache : la classe n'est posée que si
 * IntersectionObserver est disponible.
 */
.mc-anim {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: opacity, transform;
}

.mc-anim.est-vu {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.mc-anim {
		opacity: 1;
		transform: none;
	}
}