/* ==========================================================================
   MMEA — Blocs & modèles de page
   Charte MORET appliquée aux blocs natifs de WordPress.
   Ce fichier est chargé sur le site public ET dans l'éditeur, pour que
   l'aperçu de l'admin corresponde au rendu réel.
   ========================================================================== */

/* --- Jetons de la charte -------------------------------------------------
   On réutilise les variables du thème quand elles existent (site public) et
   on retombe sur les valeurs de la charte sinon (iframe de l'éditeur).      */
:root {
	--mmb-noyer: var(--noyer, #2C231B);
	--mmb-noyer2: var(--noyer2, #3A2F24);
	--mmb-chene: var(--chene, #B5824A);
	--mmb-chene-d: var(--chene-d, #9A6C39);
	--mmb-chene-t: var(--chene-t, #86592C);
	--mmb-lin: var(--lin, #FAF7F1);
	--mmb-copeau: var(--copeau, #F2EBDD);
	--mmb-copeau-d: var(--copeau-d, #EBE2CF);
	--mmb-taupe-t: var(--taupe-t, #6E6353);
	--mmb-trait: var(--trait, #DDD2BE);
	--mmb-encre: var(--encre, #4A4137);
	--mmb-r: var(--r, 14px);
	--mmb-max: var(--max, 1160px);
	--mmb-ff-display: var(--ff-display, 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif);
	--mmb-ff-body: var(--ff-body, 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif);
}

/* ==========================================================================
   1. GABARIT DE PAGE
   ========================================================================== */
.mmb-page {
	padding: 118px 28px 96px;
	background: var(--mmb-copeau);
	overflow-x: clip;
}

/* Largeur de lecture par défaut */
.mmb-page > * {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

/* Largeur « large » = la grille du site (1160 px) */
.mmb-page > .alignwide {
	max-width: var(--mmb-max);
}

/* Pleine largeur : on ressort des gouttières de la page */
.mmb-page > .alignfull {
	max-width: none;
	margin-left: -28px;
	margin-right: -28px;
	width: calc(100% + 56px);
}

/* Rythme vertical par défaut */
.mmb-page > * + * {
	margin-top: 34px;
}

.mmb-page > * + .alignfull,
.mmb-page > .alignfull + * {
	margin-top: 0;
}

.mmb-page > * + h2,
.mmb-page > * + .mmb-eyebrow {
	margin-top: 72px;
}

/* En-tête de page (titre de la page dans le style du site) */
.mmb-hero {
	padding: 132px 0 10px;
	background: linear-gradient(180deg, var(--mmb-copeau) 0%, var(--mmb-lin) 100%);
	border-bottom: 1px solid var(--mmb-trait);
}

.mmb-hero .mmb-hero-in {
	max-width: var(--mmb-max);
	margin: 0 auto;
	padding: 0 28px 62px;
}

.mmb-hero h1 {
	font-family: var(--mmb-ff-display);
	font-weight: 720;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--mmb-noyer);
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	max-width: 18ch;
}

.mmb-hero h1 em {
	font-style: normal;
	color: var(--mmb-chene);
}

.mmb-hero + .mmb-page,
.mmb-page.mmb-page--apres-hero {
	padding-top: 78px;
	background: var(--mmb-copeau);
}

/* Fil d'Ariane discret */
.mmb-fil {
	font-weight: 620;
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--mmb-taupe-t);
	margin-bottom: 16px;
}

.mmb-fil a {
	color: var(--mmb-chene-t);
	text-decoration: none;
}

.mmb-fil a:hover {
	color: var(--mmb-chene-d);
}

/* ==========================================================================
   2. TYPOGRAPHIE DES BLOCS
   ========================================================================== */
.mmb-page,
.editor-styles-wrapper {
	font-family: var(--mmb-ff-body);
	font-size: 17px;
	line-height: 1.65;
	color: var(--mmb-noyer);
}

.mmb-page h1,
.mmb-page h2,
.mmb-page h3,
.mmb-page h4,
.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4 {
	font-family: var(--mmb-ff-display);
	font-weight: 620;
	line-height: 1.1;
	letter-spacing: -.005em;
	color: var(--mmb-noyer);
}

.mmb-page h2,
.editor-styles-wrapper h2 {
	font-size: clamp(2rem, 4.4vw, 3.1rem);
}

.mmb-page h3,
.editor-styles-wrapper h3 {
	font-size: 1.42rem;
}

.mmb-page h4,
.editor-styles-wrapper h4 {
	font-size: 1.1rem;
}

.mmb-page h1 em,
.mmb-page h2 em,
.mmb-page h3 em,
.editor-styles-wrapper h1 em,
.editor-styles-wrapper h2 em,
.editor-styles-wrapper h3 em {
	font-style: normal;
	color: var(--mmb-chene);
}

.mmb-page p,
.mmb-page li {
	color: var(--mmb-encre);
}

.mmb-page a:not(.wp-block-button__link),
.editor-styles-wrapper a:not(.wp-block-button__link) {
	color: var(--mmb-chene-t);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--mmb-trait);
	text-decoration-thickness: 1.5px;
}

.mmb-page a:not(.wp-block-button__link):hover {
	color: var(--mmb-chene-d);
	text-decoration-color: var(--mmb-chene);
}

/* Surtitre (« eyebrow ») */
.mmb-eyebrow {
	font-family: var(--mmb-ff-body) !important;
	font-weight: 700 !important;
	font-size: 12.5px !important;
	letter-spacing: .16em !important;
	text-transform: uppercase;
	color: var(--mmb-chene-t) !important;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px !important;
}

.mmb-eyebrow::before {
	content: "";
	width: 22px;
	height: 1.5px;
	background: var(--mmb-chene-t);
	flex: none;
}

/* Chapô */
.mmb-lead {
	color: var(--mmb-encre) !important;
	max-width: 62ch;
	font-size: clamp(1.02rem, 1.4vw, 1.14rem) !important;
}

/* Petite légende / mention */
.mmb-mention {
	font-size: 12.5px !important;
	color: var(--mmb-taupe-t) !important;
	letter-spacing: .02em;
}

/* ==========================================================================
   3. BANDEAUX PLEINE LARGEUR
   ========================================================================== */
.mmb-band {
	padding: 86px 28px;
}

.mmb-band--lin {
	background: var(--mmb-lin);
	border-top: 1px solid var(--mmb-trait);
	border-bottom: 1px solid var(--mmb-trait);
}

.mmb-band--copeau {
	background: var(--mmb-copeau-d);
}

.mmb-band--noyer {
	background: var(--mmb-noyer);
}

.mmb-band--noyer,
.mmb-band--noyer p,
.mmb-band--noyer li {
	color: #D9CDB8;
}

.mmb-band--noyer h2,
.mmb-band--noyer h3,
.mmb-band--noyer h4 {
	color: var(--mmb-lin);
}

.mmb-band--noyer .mmb-eyebrow {
	color: var(--mmb-chene) !important;
}

.mmb-band--noyer .mmb-eyebrow::before {
	background: var(--mmb-chene);
}

.mmb-band--noyer .mmb-lead {
	color: #D9CDB8 !important;
}

/* ==========================================================================
   4. BOUTONS
   ========================================================================== */
.wp-block-button.mmb-btn .wp-block-button__link,
.wp-block-button.mmb-btn-ghost .wp-block-button__link {
	font-family: var(--mmb-ff-body);
	font-weight: 620;
	font-size: 15px;
	border-radius: 999px;
	padding: 15px 28px;
	line-height: 1.2;
	text-decoration: none;
	transition: background .25s, color .25s, border-color .25s, transform .2s;
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.wp-block-button.mmb-btn .wp-block-button__link {
	background: var(--mmb-noyer);
	color: var(--mmb-lin);
	border: 2px solid transparent;
}

.wp-block-button.mmb-btn .wp-block-button__link:hover {
	background: var(--mmb-chene);
	color: var(--mmb-lin);
	transform: translateY(-2px);
}

.wp-block-button.mmb-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--mmb-noyer);
	border: 2px solid var(--mmb-trait);
}

.wp-block-button.mmb-btn-ghost .wp-block-button__link:hover {
	border-color: var(--mmb-chene);
	color: var(--mmb-chene-d);
}

/* Bouton fantôme posé sur fond noyer */
.mmb-band--noyer .wp-block-button.mmb-btn-ghost .wp-block-button__link,
.mmb-cta .wp-block-button.mmb-btn-ghost .wp-block-button__link {
	color: var(--mmb-lin);
	border-color: var(--mmb-chene);
}

.mmb-band--noyer .wp-block-button.mmb-btn-ghost .wp-block-button__link:hover,
.mmb-cta .wp-block-button.mmb-btn-ghost .wp-block-button__link:hover {
	background: var(--mmb-chene);
	color: var(--mmb-noyer);
}

/* ==========================================================================
   5. BLOC PRÊT — « UN PROJET DE CE TYPE ? »
   Aligné au pixel sur .pf-cta du thème (mmea-atelier) :
   rayon var(--r) = 14px, padding 46/44, titre clamp(1.4rem,2.6vw,2rem).
   ========================================================================== */
.mmb-cta {
	background: var(--mmb-noyer);
	border-radius: var(--mmb-r);
	padding: 46px 44px;
	overflow: hidden;
}

.mmb-cta .mmb-cta__t {
	color: var(--mmb-lin);
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	font-weight: 620;
	max-width: 20ch;
	margin: 0;
}

.mmb-cta .mmb-cta__p {
	color: #D9CDB8;
	max-width: 46ch;
	margin: 8px 0 0;
}

.mmb-cta .wp-block-columns {
	margin-bottom: 0;
	gap: 30px;
}

@media (max-width: 781px) {
	.mmb-cta {
		padding: 34px 26px;
	}
	.mmb-cta .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   6. CARTES
   ========================================================================== */
.mmb-card {
	background: var(--mmb-lin);
	border: 1px solid var(--mmb-trait);
	border-radius: var(--mmb-r);
	padding: 32px 28px 34px;
	transition: transform .35s, box-shadow .35s, border-color .35s;
}

.mmb-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: 0 18px 40px rgba(44, 35, 27, .10);
}

.mmb-card h3 {
	margin-top: 0;
	margin-bottom: 10px;
}

.mmb-card p {
	font-size: 15px;
	margin-bottom: 0;
}

.mmb-band--noyer .mmb-card {
	background: var(--mmb-noyer2);
	border-color: #4A3D2E;
}

/* ==========================================================================
   7. CHIFFRES CLÉS
   ========================================================================== */
.mmb-stat {
	text-align: center;
	position: relative;
	padding: 8px 10px;
}

.mmb-stat .mmb-stat__n {
	font-family: var(--mmb-ff-display) !important;
	font-weight: 720;
	font-size: clamp(2.1rem, 4.4vw, 3rem) !important;
	color: var(--mmb-noyer) !important;
	line-height: 1;
	margin: 0;
}

.mmb-stat .mmb-stat__n em {
	font-style: normal;
	color: var(--mmb-chene);
}

.mmb-stat .mmb-stat__k {
	margin: 10px 0 0 !important;
	font-weight: 620;
	font-size: 12.5px !important;
	letter-spacing: .04em;
	color: var(--mmb-encre) !important;
}

.mmb-band--noyer .mmb-stat .mmb-stat__n {
	color: var(--mmb-lin) !important;
}

.mmb-band--noyer .mmb-stat .mmb-stat__k {
	color: #D9CDB8 !important;
}

/* ==========================================================================
   8. ÉTAPES
   ========================================================================== */
.mmb-step .mmb-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 12px;
	background: var(--mmb-noyer);
	color: var(--mmb-lin) !important;
	font-family: var(--mmb-ff-display) !important;
	font-weight: 720;
	font-size: 15px !important;
	line-height: 1;
	margin: 0 0 16px !important;
}

.mmb-step h3 {
	margin: 0 0 9px;
	font-size: 1.32rem;
}

.mmb-step p {
	font-size: 15px;
	margin-bottom: 0;
}

/* ==========================================================================
   9. CITATION
   ========================================================================== */
.mmb-quote {
	background: var(--mmb-noyer);
	border-radius: var(--mmb-r);
	border: none;
	padding: 44px 48px;
	margin: 0;
}

.mmb-quote p {
	font-family: var(--mmb-ff-display) !important;
	font-weight: 500;
	font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
	line-height: 1.3;
	color: var(--mmb-lin) !important;
	max-width: 34ch;
	margin: 0;
}

.mmb-quote cite {
	display: block;
	margin-top: 18px;
	font-family: var(--mmb-ff-body);
	font-style: normal;
	font-weight: 620;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mmb-chene);
}

/* ==========================================================================
   10. IMAGES, GALERIES, VIDÉOS
   ========================================================================== */
.mmb-page .wp-block-image img,
.mmb-page .wp-block-gallery img {
	border-radius: var(--mmb-r);
}

.mmb-img img {
	border: 1px solid var(--mmb-trait);
}

.mmb-page .wp-block-image figcaption,
.mmb-page .wp-block-gallery figcaption,
.mmb-page .wp-block-embed figcaption,
.editor-styles-wrapper .wp-block-image figcaption {
	font-weight: 620;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mmb-taupe-t);
	text-align: center;
	margin-top: 14px;
}

.mmb-page .wp-block-embed iframe {
	border-radius: var(--mmb-r);
	display: block;
}

.mmb-page .wp-block-video video {
	border-radius: var(--mmb-r);
	width: 100%;
}

/* Image en médaillon (colonne texte + image) */
.mmb-media img {
	border-radius: var(--mmb-r);
	box-shadow: 0 18px 40px rgba(44, 35, 27, .10);
}

/* ==========================================================================
   11. LISTES & DIVERS
   ========================================================================== */
.mmb-liste {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.mmb-liste li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	color: var(--mmb-encre);
}

.mmb-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 15px;
	height: 10px;
	background: var(--mmb-chene);
	clip-path: polygon(0 0, 50% 26%, 100% 0, 100% 100%, 50% 74%, 0 100%);
}

.mmb-band--noyer .mmb-liste li {
	color: #D9CDB8;
}

/* Filet de séparation */
.wp-block-separator.mmb-filet {
	border: none;
	border-top: 1px solid var(--mmb-trait);
	max-width: 100%;
	opacity: 1;
	margin: 12px auto;
	height: 0;
}

/* Encadré information */
.mmb-encadre {
	background: var(--mmb-lin);
	border: 1px solid var(--mmb-trait);
	border-left: 3px solid var(--mmb-chene);
	border-radius: var(--mmb-r);
	padding: 26px 30px;
}

.mmb-encadre p:last-child {
	margin-bottom: 0;
}

/* Étiquettes */
.mmb-chips .wp-block-button__link {
	background: var(--mmb-lin);
	color: var(--mmb-noyer);
	border: 1px solid var(--mmb-trait);
	border-radius: 999px;
	padding: 11px 20px;
	font-weight: 620;
	font-size: 13.5px;
}

.mmb-chips .wp-block-button__link:hover {
	border-color: var(--mmb-chene);
	color: var(--mmb-chene-d);
}

/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
	.mmb-page {
		padding-top: 104px;
	}
	.mmb-hero {
		padding-top: 108px;
	}
	.mmb-band {
		padding: 62px 24px;
	}
}

@media (max-width: 760px) {
	.mmb-page {
		padding-left: 22px;
		padding-right: 22px;
	}
	.mmb-page > .alignfull {
		margin-left: -22px;
		margin-right: -22px;
		width: calc(100% + 44px);
	}
	.mmb-hero .mmb-hero-in {
		padding: 0 22px 44px;
	}
	.mmb-quote {
		padding: 34px 26px;
	}
}