/* =========================================================================
   Mémoire Battante — feuille de style unique
   Identité « forêt & pierre » : mélèze, sapin, calcaire, ocre.
   Mobile-first. Aucune dépendance externe.
   ========================================================================= */

/* --- Polices auto-hébergées (RGPD : aucun appel à un CDN tiers) ---------- */

@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Fraunces';
	font-style: italic;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/fraunces-latin-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons de design ---------------------------------------------------- */

:root {
	--bg: #fbfaf7;
	--ink: #23291f;
	--primary: #2f5d43;
	--deep: #1b3626;
	--accent: #c08a3e;
	--accent-soft: #e6c893;
	--stone: #8a8578;
	--sand: #e8e4da;
	--line: rgb(138 133 120 / 28%);
	--line-soft: rgb(138 133 120 / 14%);

	--serif: 'Fraunces', Georgia, 'Times New Roman', serif;
	--sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Échelle fluide, base 8. */
	--s1: 0.5rem;
	--s2: 1rem;
	--s3: 1.5rem;
	--s4: 2.5rem;
	--s5: clamp(3rem, 6vw, 5rem);
	--s6: clamp(4rem, 9vw, 8rem);

	--f-xs: 0.8125rem;
	--f-sm: 0.9375rem;
	--f-base: 1.0625rem;
	--f-md: clamp(1.125rem, 0.6vw + 1rem, 1.25rem);
	--f-lg: clamp(1.375rem, 1.2vw + 1.05rem, 1.75rem);
	--f-xl: clamp(1.75rem, 2.4vw + 1.15rem, 2.625rem);
	--f-2xl: clamp(2.25rem, 4.4vw + 1.1rem, 3.75rem);
	--f-3xl: clamp(2.75rem, 6vw + 1rem, 5rem);

	/* Hauteur de la rangée d'en-tête. Source unique : le tiroir mobile s'ouvre
	   juste en dessous et l'ancrage des liens internes s'y cale. */
	--header-h: 4.5rem;

	--wrap: 74rem;
	--article: 46rem;
	--measure: 38rem;
	--gutter: clamp(1.25rem, 5vw, 3.5rem);
	--radius: 3px;
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Socle --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--s2));
}

body {
	margin: 0;
	/* Les sous-menus déroulants restent dans le flux même masqués et
	   élargissent la page. `clip` les contient sans casser le sticky de
	   l'en-tête, contrairement à `hidden`. */
	overflow-x: clip;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--f-base);
	line-height: 1.7;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 600;
	font-variation-settings: 'SOFT' 22, 'WONK' 1;
	line-height: 1.14;
	letter-spacing: -0.012em;
	margin: 0 0 var(--s2);
	text-wrap: balance;
}

p, ul, ol, blockquote, figure { margin: 0 0 var(--s3); }
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--primary); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--deep); }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--s4) 0; }

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

.mb-skip {
	position: absolute;
	left: var(--s2); top: -4rem;
	z-index: 200;
	padding: 0.75rem 1.25rem;
	background: var(--deep);
	color: #fff;
	text-decoration: none;
	transition: top 0.2s var(--ease);
}
.mb-skip:focus { top: var(--s2); color: #fff; }

/* --- Boutons ------------------------------------------------------------- */

.mb-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.8em 1.6em;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-family: var(--sans);
	font-size: var(--f-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
		border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.mb-button--solid {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}
.mb-button--solid:hover {
	background: var(--deep);
	border-color: var(--deep);
	color: #fff;
	transform: translateY(-1px);
}
.mb-button--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--primary);
}
.mb-button--ghost:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	transform: translateY(-1px);
}
/* Bouton d'un corps d'article : centré dans la colonne de texte, où il fait
   une invitation à part entière plutôt qu'une note de bas de paragraphe. */
.mb-cta-wrap { margin-block: var(--s3); text-align: center; }

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

.mb-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line-soft);
}

.mb-header__inner {
	position: relative; /* ancre du panneau « Patrimoine », pleine largeur */
	max-width: var(--wrap);
	margin-inline: auto;
	/* Gouttière plus serrée que --gutter : chaque pixel compte pour que les sept
	   rubriques tiennent sur une ligne dès 1024 px. */
	padding-inline: clamp(1.25rem, 3vw, 3.5rem);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--s2);
}

.mb-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: var(--deep);
	text-decoration: none;
	margin-right: auto;
	/* Sans ce verrou, un menu trop long écrase le logo jusqu'à 0 px. */
	flex: none;
}
.mb-brand__peaks { width: 2.5rem; color: var(--primary); flex: none; }
/* Le logo (963 × 138 px) se resserre entre 1024 et 1450 px, là où le menu a
   besoin de toute la place ; sur mobile, la largeur le borne à côté du bouton
   de menu. Son fond blanc se fond dans celui, crème, du bandeau (multiply). */
.mb-brand__logo {
	width: auto;
	max-width: min(60vw, 22rem);
	max-height: clamp(2.4rem, 1.2rem + 2vw, 3.2rem);
	object-fit: contain;
	mix-blend-mode: multiply;
}
.mb-brand__text { display: grid; }
.mb-brand__name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.2rem;
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.mb-brand__baseline {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
}

/* Réduit à ses barres, le bouton n'a plus de texte pour le porter : sans
   plancher il tomberait à ~42 × 31 px, sous la cible tactile confortable. */
.mb-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--deep);
	font: inherit;
	font-size: var(--f-sm);
	cursor: pointer;
}
.mb-burger__bars { display: grid; gap: 4px; width: 18px; }
.mb-burger__bars i {
	height: 1.6px;
	background: currentColor;
	transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.mb-burger[aria-expanded='true'] .mb-burger__bars i:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.mb-burger[aria-expanded='true'] .mb-burger__bars i:nth-child(2) { opacity: 0; }
.mb-burger[aria-expanded='true'] .mb-burger__bars i:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.mb-nav { display: none; }
/* Le tiroir s'ancre sur l'en-tête plutôt que sur la fenêtre : le
   `backdrop-filter` de .mb-header en fait le bloc conteneur de ses descendants
   positionnés, un `position: fixed` s'y verrait rogner à la hauteur de la
   rangée. `dvh` tient compte des barres d'outils mobiles rétractables. */
.mb-nav.is-open {
	display: block;
	position: absolute;
	inset-block-start: 100%;
	inset-inline: 0;
	height: calc(100vh - var(--header-h));
	height: calc(100dvh - var(--header-h));
	z-index: 90;
	background: var(--bg);
	overflow-y: auto;
	padding: var(--s2) var(--gutter) var(--s5);
}

.mb-nav__list, .mb-nav__sub { list-style: none; margin: 0; padding: 0; }

.mb-nav__item { border-bottom: 1px solid var(--line-soft); }
.mb-nav__item--depth-1, .mb-nav__item--depth-2, .mb-nav__item--depth-3 { border: 0; }

.mb-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	padding: 0.7rem 0;
	background: none;
	border: 0;
	color: var(--ink);
	font: inherit;
	font-size: var(--f-sm);
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}
.mb-nav__item--depth-1 > .mb-nav__link,
.mb-nav__item--depth-2 > .mb-nav__link,
.mb-nav__item--depth-3 > .mb-nav__link {
	padding: 0.4rem 0 0.4rem 1rem;
	font-size: var(--f-sm);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--stone);
}
.mb-nav__item--depth-2 > .mb-nav__link { padding-left: 2rem; }
.mb-nav__item--depth-3 > .mb-nav__link { padding-left: 3rem; }
.mb-nav__link:hover, .mb-nav__item.is-current > .mb-nav__link { color: var(--primary); }

.mb-nav__toggle {
	position: absolute;
	right: 0; top: 0;
	padding: 0.7rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.mb-nav__item { position: relative; }

.mb-nav__chevron { width: 10px; flex: none; transition: transform 0.25s var(--ease); }
[aria-expanded='true'] .mb-nav__chevron { transform: rotate(180deg); }

/* En tiroir, c'est le bouton de repli qui porte le chevron. Celui logé dans le
   lien ferait doublon ici ; il ne ressort qu'en barre horizontale, où le bouton
   est masqué. Le lien-bouton « Infos pratiques » garde le sien, il n'en a pas
   d'autre. */
.mb-nav__link:not(.mb-nav__link--toggle) .mb-nav__chevron { display: none; }

.mb-nav__sub { display: none; padding-bottom: 0.5rem; }
.mb-nav__item.is-expanded > .mb-nav__sub { display: block; }

/* En tiroir, l'adhésion reste un bouton : c'est l'action que l'association
   met en avant, elle ne doit pas se fondre dans la liste. */
.mb-nav__item--cta { border: 0; margin-top: var(--s2); }
.mb-nav__item--cta > .mb-nav__link {
	justify-content: center;
	padding: 0.8rem 1rem;
	background: var(--primary);
	border-radius: var(--radius);
	color: #fff;
}
/* Le lien de la page courante passe au vert, et `.is-current` est plus
   spécifique que le bouton : sur la page « Adhérer », le bouton s'écrivait
   donc en vert sur vert — c'est-à-dire nulle part. */
.mb-nav__item--cta.is-current > .mb-nav__link { color: #fff; }

/* Navigation en barre à partir de 64rem, sur la même ligne que la marque.
   Les sept rubriques de premier niveau totalisent ~780 px, pour ~810 px
   disponibles à 1024 px une fois le logo posé : c'est le cas le plus tendu, et
   c'est lui qui a fixé le regroupement du patrimoine en une seule rubrique.
   Chaque libellé reste insécable et la liste ne se replie jamais. */
@media (min-width: 64rem) {
	/* La rangée se réduit à la marque et au menu, centrés dans l'en-tête. */
	.mb-header { display: flex; }
	.mb-header__inner { max-width: none; padding-inline: 0; gap: 0; }
	.mb-brand { margin-right: 0; }

	.mb-burger { display: none; }

	.mb-nav {
		display: flex;
		/* Étirement de bout en bout : les rubriques doivent toucher le bas de
		   la rangée, sinon le curseur perd le survol avant d'atteindre le
		   panneau, qui se referme sous le doigt. */
		align-items: stretch;
		align-self: stretch;
		/* Le menu cède la place au lieu de déborder : sans ce `min-width`,
		   un onglet de trop pousse « Adhérer » hors de l'écran. */
		min-width: 0;
		flex: 0 1 auto;
	}
	/* Quand les rubriques ne tiennent plus sur une ligne, elles passent à la
	   suivante, centrées : « Adhérer », dernier élément, reste toujours
	   visible. Chaque ligne s'étire sur sa part de la rangée. */
	.mb-nav__list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: stretch;
		gap: 0;
	}
	.mb-nav__item { border: 0; }

	/* Une rubrique survolée passe au-dessus de ses voisines et du contenu. */
	.mb-nav__item--depth-0 { z-index: 1; }
	.mb-nav__item--depth-0:hover,
	.mb-nav__item--depth-0:focus-within,
	.mb-nav__item--depth-0.is-expanded { z-index: 20; }

	.mb-nav__item--depth-0 > .mb-nav__link {
		white-space: nowrap;
		/* Hauteur pleine : sans cela, le curseur quitte le survol entre la
		   rubrique et son panneau, qui se referme au passage. */
		height: 100%;
		/* Plancher d'une ligne quand le menu passe sur deux. */
		min-height: 2.75rem;
		padding: 0 0.5rem;
		/* Le menu respire sur les grands écrans au lieu d'y rester minuscule. */
		font-size: clamp(0.6875rem, 0.28vw + 0.5rem, 0.8125rem);
		letter-spacing: 0.05em;
	}
	.mb-nav__item--depth-0 > .mb-nav__link > span { position: relative; }
	.mb-nav__item--depth-0 > .mb-nav__link > span::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: -4px;
		height: 2px;
		background: var(--accent);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.25s var(--ease);
	}
	.mb-nav__item--depth-0:hover > .mb-nav__link > span::after,
	.mb-nav__item--depth-0.is-current > .mb-nav__link > span::after { transform: scaleX(1); }

	.mb-nav__toggle { display: none; }
	.mb-nav__link:not(.mb-nav__link--toggle) .mb-nav__chevron { display: inline-block; }
	.mb-nav__item--depth-0 > .mb-nav__link .mb-nav__chevron { margin-left: 0.25rem; }

	.mb-nav__sub {
		display: block;
		position: absolute;
		top: 100%;
		left: -0.5rem;
		min-width: 16rem;
		padding: 0.5rem 0;
		background: var(--bg);
		border: 1px solid var(--line-soft);
		border-radius: var(--radius);
		box-shadow: 0 18px 40px -24px rgb(27 54 38 / 45%);
		opacity: 0;
		visibility: hidden;
		/* `visibility` et `pointer-events` s'héritent : sur un panneau fermé,
		   ils neutralisent tout le sous-arbre. Le second double le premier, qui
		   ne bascule qu'en fin de fondu sortant — sans lui, le panneau reste
		   accrochable 200 ms de trop et se rouvre sous le curseur. */
		pointer-events: none;
		/* Un volet retourné recouvre le volet parent : sans ce `z-index`, les
		   entrées suivantes (positionnées) sont peintes par-dessus lui, et
		   survoler leur texte fait perdre le survol à la branche, qui se ferme. */
		z-index: 1;
		transform: translateY(6px);
		transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
	}
	.mb-nav__item--depth-0 { position: relative; }
	.mb-nav__item--depth-1 { position: relative; }
	.mb-nav__item--depth-2 { position: relative; }
	.mb-nav__sub--depth-2,
	.mb-nav__sub--depth-3 { top: -0.5rem; left: 100%; }

	/* Panneaux qui sortiraient de l'écran : ils s'ouvrent vers la gauche.
	   La classe est posée par main.js après mesure — la largeur d'un panneau
	   dépend de son contenu, on ne peut pas la déduire du rang de la rubrique. */
	.mb-nav__sub.is-flipped { left: auto; right: -0.5rem; }
	.mb-nav__sub--depth-2.is-flipped,
	.mb-nav__sub--depth-3.is-flipped { left: auto; right: 100%; }

	.mb-nav__item:hover > .mb-nav__sub,
	.mb-nav__item:focus-within > .mb-nav__sub,
	.mb-nav__item.is-expanded > .mb-nav__sub {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.mb-nav__item--depth-1 > .mb-nav__link,
	.mb-nav__item--depth-2 > .mb-nav__link,
	.mb-nav__item--depth-3 > .mb-nav__link {
		padding: 0.45rem 1rem;
		color: var(--ink);
		font-weight: 400;
	}
	.mb-nav__item--depth-1 > .mb-nav__link:hover { background: var(--sand); color: var(--primary); }
	.mb-nav__item--depth-1.has-children > .mb-nav__link .mb-nav__chevron { transform: rotate(-90deg); }

	/* --- Panneau « Patrimoine » ------------------------------------------
	   Trente-quatre entrées sur quatre niveaux : en volets flottants
	   emboîtés, elles seraient impraticables. Le panneau s'ancre donc sur la
	   rangée d'en-tête, occupe toute sa largeur et déplie tout d'un coup. */
	.mb-nav__item--mega { position: static; }
	.mb-nav__item--mega > .mb-nav__sub {
		left: 0; right: 0;
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s2) var(--s3);
		padding: var(--s3) clamp(1.25rem, 3vw, 3.5rem);
		/* Filet de sécurité sur écran bas de plafond. Le panneau mesure ~545 px :
		   le seuil est au-dessus, il ne défile que sur les vrais petits écrans. */
		max-height: min(78vh, 38rem);
		overflow-y: auto;
	}
	/* À l'intérieur, plus rien ne flotte : tout est visible en même temps.
	   Le sélecteur descend de deux crans — `.mb-nav__item--mega .mb-nav__sub`
	   attraperait le panneau lui-même et annulerait son positionnement. */
	.mb-nav__item--mega > .mb-nav__sub .mb-nav__sub {
		position: static;
		min-width: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transform: none;
		transition: none;
	}
	/* La révélation, elle, reste conditionnée à l'ouverture du panneau. Sans
	   cela, les listes internes annulent le masquage de leur ancêtre : rendues
	   invisibles par la seule opacité, qui ne retire rien au survol, elles
	   laissent en travers de l'en-tête un fantôme pleine largeur qui rouvre le
	   panneau dès qu'on le traverse. */
	.mb-nav__item--mega:hover > .mb-nav__sub .mb-nav__sub,
	.mb-nav__item--mega:focus-within > .mb-nav__sub .mb-nav__sub,
	.mb-nav__item--mega.is-expanded > .mb-nav__sub .mb-nav__sub {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
	/* « Matériel » pèse seize entrées : deux colonnes pour équilibrer. */
	.mb-nav__item--mega .mb-nav__item--wide { grid-column: span 2; }
	.mb-nav__item--mega .mb-nav__item--wide > .mb-nav__sub { columns: 2; column-gap: var(--s3); }
	.mb-nav__item--mega .mb-nav__item--depth-2 { break-inside: avoid; }

	/* Titre de colonne. Les rubriques étant des catégories, l'intitulé est un
	   vrai lien vers l'archive de la branche : il garde son affordance, mais
	   pas son chevron — dans le panneau, tout est déjà déplié. */
	.mb-nav__item--mega > .mb-nav__sub > .mb-nav__item > .mb-nav__link {
		padding: 0 0 0.35rem;
		margin-bottom: 0.35rem;
		border-bottom: 1px solid var(--line-soft);
		font-size: 0.6875rem;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--stone);
	}
	.mb-nav__item--mega > .mb-nav__sub > .mb-nav__item > .mb-nav__link:hover { color: var(--primary); }

	/* Sous-groupe interne (Alpinisme, Scierie, Canaux…) : un intertitre, pas
	   un volet. */
	.mb-nav__item--mega .mb-nav__item--depth-2 > .mb-nav__link {
		padding-top: 0.7rem;
		font-weight: 600;
		color: var(--deep);
	}
	.mb-nav__item--mega .mb-nav__link .mb-nav__chevron { display: none; }
	.mb-nav__item--mega .mb-nav__item--depth-3 > .mb-nav__link { padding-left: 2rem; }

	/* --- Appel à l'adhésion ---------------------------------------------- */
	.mb-nav__item--cta {
		display: flex;
		align-items: center;
		margin: 0 0 0 0.75rem; /* annule le décalage vertical du tiroir */
	}
	.mb-nav__item--cta > .mb-nav__link {
		height: auto;
		padding: 0.5rem 1rem;
		background: var(--primary);
		border-radius: var(--radius);
		color: #fff;
		transition: background-color 0.2s var(--ease);
	}
	.mb-nav__item--cta > .mb-nav__link:hover { background: var(--deep); color: #fff; }
	.mb-nav__item--cta > .mb-nav__link > span::after { display: none; }
}

/* --- Rythme général des sections ---------------------------------------- */

.mb-main > * { margin-block: var(--s6); }
.mb-main > *:first-child { margin-top: 0; }

.mb-section-head {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-bottom: var(--s4);
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--s2);
}
.mb-section-head__title { font-size: var(--f-xl); margin: 0; }
.mb-section-head__lede {
	flex: 1 1 24rem;
	max-width: 34rem;
	margin: 0;
	color: var(--stone);
}
.mb-section-head__more {
	font-size: var(--f-sm);
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.mb-section-head__more:hover { text-decoration: underline; }

/* --- Hero de l'accueil --------------------------------------------------- */

.mb-hero {
	position: relative;
	display: grid;
	gap: 0;
	background: var(--deep);
	color: #fff;
	overflow: clip;
}

.mb-hero__text {
	position: relative;
	z-index: 2;
	padding: var(--s5) var(--gutter);
	display: grid;
	align-content: center;
	gap: var(--s2);
}

/* Courbes de niveau discrètes, dessinées en CSS — aucune image à charger. */
.mb-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(120% 80% at 12% 100%, transparent 38%, rgb(255 255 255 / 4%) 38.4%, transparent 39%),
		radial-gradient(110% 74% at 10% 100%, transparent 48%, rgb(255 255 255 / 4%) 48.4%, transparent 49%),
		radial-gradient(100% 68% at 8% 100%, transparent 58%, rgb(255 255 255 / 4%) 58.4%, transparent 59%),
		radial-gradient(90% 62% at 6% 100%, transparent 68%, rgb(255 255 255 / 4%) 68.4%, transparent 69%);
	pointer-events: none;
}

.mb-hero__eyebrow {
	margin: 0;
	font-size: var(--f-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent-soft);
}
.mb-hero__title {
	margin: 0;
	font-size: var(--f-3xl);
	font-weight: 500;
	font-variation-settings: 'SOFT' 60, 'WONK' 1;
	letter-spacing: -0.02em;
}
.mb-hero__baseline {
	margin: 0;
	max-width: 32rem;
	font-size: var(--f-md);
	line-height: 1.55;
	color: rgb(255 255 255 / 82%);
}
.mb-hero__actions {
	margin: var(--s2) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.mb-hero .mb-button--solid { background: var(--accent); border-color: var(--accent); color: #1b1405; }
.mb-hero .mb-button--solid:hover { background: #d5a05a; border-color: #d5a05a; color: #1b1405; }
.mb-hero .mb-button--ghost { color: #fff; }
.mb-hero .mb-button--ghost:hover { background: #fff; border-color: #fff; color: var(--deep); }

.mb-hero__media { position: relative; margin: 0; }
.mb-hero__img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.mb-hero__media figcaption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.5rem var(--gutter) 0.9rem;
	background: linear-gradient(transparent, rgb(27 54 38 / 78%));
	color: rgb(255 255 255 / 88%);
	font-size: var(--f-xs);
	letter-spacing: 0.02em;
}

@media (min-width: 52rem) {
	.mb-hero { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
	.mb-hero__text { padding-block: var(--s6); }
	.mb-hero__img { aspect-ratio: auto; min-height: 100%; }
}

/* --- Manifeste ----------------------------------------------------------- */

.mb-manifesto {
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: var(--gutter);
	text-align: center;
}
.mb-manifesto__quote {
	font-family: var(--serif);
	font-size: var(--f-xl);
	font-weight: 400;
	font-variation-settings: 'SOFT' 40, 'WONK' 1;
	line-height: 1.28;
	letter-spacing: -0.015em;
	margin: 0 0 var(--s3);
	text-wrap: balance;
}
.mb-manifesto__triad {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.5rem;
	margin: 0 0 0.6rem;
	font-size: var(--f-xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--primary);
}
.mb-manifesto__triad span { position: relative; }
.mb-manifesto__triad span + span::before {
	content: '';
	position: absolute;
	left: -0.85rem; top: 50%;
	width: 4px; height: 4px;
	margin-top: -2px;
	border-radius: 50%;
	background: var(--accent);
}
.mb-manifesto__sub { margin: 0; color: var(--stone); font-size: var(--f-sm); }

/* --- Bandeau panoramique ------------------------------------------------- */

.mb-panorama { margin-block: var(--s6); }
.mb-panorama__img {
	width: 100%;
	max-height: 30rem;
	object-fit: cover;
	object-position: center 42%;
}
.mb-panorama__caption {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--s2) var(--gutter) 0;
	color: var(--stone);
	font-size: var(--f-sm);
	line-height: 1.6;
}
.mb-credit {
	display: block;
	margin-top: 0.35rem;
	font-size: var(--f-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Missions ------------------------------------------------------------ */

.mb-missions {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mb-missions__grid {
	display: grid;
	gap: var(--s3);
}
@media (min-width: 46rem) {
	.mb-missions__grid { grid-template-columns: 1fr 1fr; gap: var(--s4); }
}

.mb-mission {
	padding: var(--s4) var(--s3);
	background: var(--sand);
	border-radius: var(--radius);
	border-top: 3px solid var(--primary);
}
.mb-mission:nth-child(2) { border-top-color: var(--accent); }
.mb-mission__title { font-size: var(--f-lg); margin-bottom: var(--s3); }
.mb-mission__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mb-mission__list li {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
}
.mb-mission__list svg { width: 26px; flex: none; color: var(--primary); }
.mb-mission:nth-child(2) .mb-mission__list svg { color: var(--accent); }

/* --- Mosaïque patrimoine ------------------------------------------------- */

.mb-gallery-section { max-width: var(--wrap); margin-inline: auto; }

.mb-mosaic {
	list-style: none;
	margin: 0;
	padding-inline: var(--gutter);
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(2, 1fr);
}
/* Rangées de hauteur fixe : les cellules ont alors une hauteur définie, donc
   les images les remplissent vraiment et les légendes tombent bien en bas. */
@media (min-width: 46rem) {
	.mb-mosaic {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: clamp(9rem, 13vw, 12rem);
		gap: 1rem;
	}
	.mb-mosaic__cell--0 { grid-column: span 2; grid-row: span 2; }
	.mb-mosaic__cell--3,
	.mb-mosaic__cell--6 { grid-column: span 2; }
}

.mb-mosaic__cell { position: relative; display: grid; }

.mb-mosaic__link {
	display: grid;
	position: relative;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--sand);
	text-decoration: none;
}
.mb-mosaic__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
@media (min-width: 46rem) { .mb-mosaic__img { aspect-ratio: auto; } }
.mb-mosaic__link:hover .mb-mosaic__img { transform: scale(1.04); }

.mb-mosaic__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 2.5rem 0.9rem 0.75rem;
	background: linear-gradient(transparent, rgb(27 54 38 / 82%));
	color: #fff;
	font-size: var(--f-xs);
	line-height: 1.35;
	letter-spacing: 0.01em;
}

/* --- Cartes d'articles --------------------------------------------------- */

.mb-latest { max-width: var(--wrap); margin-inline: auto; }

.mb-cards {
	display: grid;
	gap: var(--s3);
	padding-inline: var(--gutter);
	grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .mb-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .mb-cards { grid-template-columns: repeat(3, 1fr); } }

.mb-card { display: flex; }
.mb-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
		border-color 0.3s var(--ease);
}
.mb-card__link:hover {
	transform: translateY(-3px);
	border-color: var(--line);
	box-shadow: 0 22px 38px -28px rgb(27 54 38 / 55%);
	color: inherit;
}

.mb-card__media { overflow: hidden; background: var(--sand); }
.mb-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.mb-card__link:hover .mb-card__img { transform: scale(1.04); }

.mb-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--s3);
	flex: 1;
}
.mb-card__date {
	margin: 0;
	font-size: var(--f-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}
.mb-card__title { margin: 0; font-size: var(--f-lg); }
.mb-card__excerpt { margin: 0; color: var(--stone); font-size: var(--f-sm); line-height: 1.6; }
.mb-card__more {
	margin-top: auto;
	padding-top: var(--s2);
	font-size: var(--f-sm);
	font-weight: 600;
	color: var(--primary);
}

/* Carte typographique : pas de photo inventée, un aplat et un grand titre. */
.mb-card--typo .mb-card__link {
	position: relative;
	border: 0;
	color: #fff;
	min-height: 21rem;
}
.mb-card--typo .mb-card__body { justify-content: flex-end; }
.mb-card--typo .mb-card__date { color: rgb(255 255 255 / 66%); }
.mb-card--typo .mb-card__title { font-size: var(--f-xl); }
.mb-card--typo .mb-card__excerpt { color: rgb(255 255 255 / 80%); }
.mb-card--typo .mb-card__more { color: #fff; }
.mb-card--typo .mb-card__link:hover { color: #fff; }

.mb-card--melze .mb-card__link { background: var(--primary); }
.mb-card--sapin .mb-card__link { background: var(--deep); }
.mb-card--ocre .mb-card__link { background: #a9772f; }

.mb-card__glyph {
	position: absolute;
	top: var(--s3);
	right: var(--s3);
	color: rgb(255 255 255 / 26%);
}
.mb-card__peaks { width: 5.5rem; }

/* --- Journal ------------------------------------------------------------- */

.mb-journal-head {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--s5) var(--gutter) 0;
	border-bottom: 1px solid var(--line-soft);
	padding-bottom: var(--s4);
}
.mb-journal-head__eyebrow {
	margin: 0 0 0.4rem;
	font-size: var(--f-xs);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
}
.mb-journal-head__title { margin: 0 0 var(--s2); font-size: var(--f-2xl); }
.mb-journal-head__lede {
	max-width: var(--measure);
	margin: 0;
	font-size: var(--f-md);
	color: var(--stone);
}

.mb-journal { max-width: var(--wrap); margin-inline: auto; }
.mb-cards--journal { margin-top: var(--s4); }

.mb-feature { margin-inline: var(--gutter); }
.mb-feature__link {
	display: grid;
	gap: 0;
	background: #fff;
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	transition: box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.mb-feature__link:hover {
	border-color: var(--line);
	box-shadow: 0 28px 50px -34px rgb(27 54 38 / 55%);
	color: inherit;
}
.mb-feature__media { overflow: hidden; background: var(--sand); }
.mb-feature__img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.7s var(--ease);
}
.mb-feature__link:hover .mb-feature__img { transform: scale(1.03); }
.mb-feature__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--s4) var(--s3);
	align-self: center;
}
.mb-feature__flag {
	margin: 0;
	align-self: start;
	padding: 0.25rem 0.7rem;
	background: var(--accent);
	color: #1b1405;
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.mb-feature__date {
	margin: 0;
	font-size: var(--f-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--stone);
}
.mb-feature__title { margin: 0; font-size: var(--f-xl); }
.mb-feature__excerpt { margin: 0; color: var(--stone); }
.mb-feature__more { font-size: var(--f-sm); font-weight: 600; color: var(--primary); }

.mb-feature--typo .mb-feature__link { background: var(--deep); border: 0; color: #fff; }
.mb-feature--typo .mb-feature__date,
.mb-feature--typo .mb-feature__excerpt { color: rgb(255 255 255 / 76%); }
.mb-feature--typo .mb-feature__more { color: var(--accent-soft); }

@media (min-width: 52rem) {
	.mb-feature__link { grid-template-columns: 1.15fr 1fr; }
	.mb-feature__body { padding: var(--s5) var(--s4); }
}

/* Sous-rubriques d'une rubrique intermédiaire. Les cartes sont celles du
   journal ; seul l'intertitre demande sa gouttière, `.mb-cards` portant déjà
   la sienne. */
.mb-rubriques { max-width: var(--wrap); margin-inline: auto; }
.mb-rubriques__title {
	padding-inline: var(--gutter);
	font-size: var(--f-sm);
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
	margin-bottom: var(--s2);
}

.mb-archives {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--s4) var(--gutter) 0;
	border-top: 1px solid var(--line-soft);
}
.mb-archives__title {
	font-size: var(--f-sm);
	font-family: var(--sans);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--stone);
	margin-bottom: var(--s2);
}
.mb-archives__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.mb-archives__list a {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--f-sm);
	text-decoration: none;
	text-transform: capitalize;
	transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.mb-archives__list a:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.mb-pagination { padding: var(--s4) var(--gutter) 0; }
.mb-pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}
.mb-pagination a, .mb-pagination span {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: var(--f-sm);
	text-decoration: none;
}
.mb-pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; }

.mb-empty {
	max-width: var(--measure);
	margin-inline: auto;
	padding: var(--s5) var(--gutter);
	text-align: center;
	color: var(--stone);
}
.mb-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* --- Article et page ----------------------------------------------------- */

.mb-article, .mb-page { margin-bottom: var(--s6); }

.mb-article__cover { background: var(--sand); }
.mb-article__cover-img {
	width: 100%;
	max-height: 32rem;
	object-fit: cover;
}
/* Chapeau et corps partagent la même mesure pour aligner leur bord gauche. */
.mb-article__intro, .mb-page__head {
	max-width: var(--article);
	margin-inline: auto;
	padding: var(--s4) var(--gutter) 0;
}

.mb-article__crumb, .mb-page__crumb {
	margin: 0 0 var(--s2);
	font-size: var(--f-sm);
}
.mb-article__crumb a, .mb-page__crumb a { text-decoration: none; }
.mb-article__crumb a:hover, .mb-page__crumb a:hover { text-decoration: underline; }

.mb-article__date {
	margin: 0 0 0.5rem;
	font-size: var(--f-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent);
}
.mb-article__title { font-size: var(--f-2xl); margin-bottom: var(--s2); }
.mb-article__lede {
	font-size: var(--f-md);
	color: var(--stone);
	line-height: 1.6;
	margin: 0;
}
.mb-page__title { font-size: var(--f-2xl); }
.mb-page__cover { margin: var(--s4) 0 0; }
.mb-page__cover img { width: 100%; max-height: 26rem; object-fit: cover; }

.mb-article__head--typo {
	background: var(--deep);
	color: #fff;
	padding-bottom: var(--s4);
}
.mb-article__head--typo .mb-article__intro { padding-top: var(--s5); }
.mb-article__head--typo .mb-article__crumb a,
.mb-article__head--typo .mb-article__lede { color: rgb(255 255 255 / 80%); }
.mb-article__head--typo .mb-article__date { color: var(--accent-soft); }

.mb-article__body, .mb-page__body {
	max-width: var(--article);
	margin-inline: auto;
	padding: var(--s4) var(--gutter) 0;
	font-size: var(--f-md);
	line-height: 1.75;
}
.mb-article__body h2, .mb-page__body h2 { font-size: var(--f-xl); margin-top: var(--s4); }
.mb-article__body h3, .mb-page__body h3 {
	font-size: var(--f-lg);
	margin-top: var(--s4);
	color: var(--deep);
}
.mb-article__body h3::after, .mb-page__body h3::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: 0.6rem;
	background: var(--accent);
}
.mb-article__body ul, .mb-page__body ul { padding-left: 1.2rem; }
.mb-article__body li, .mb-page__body li { margin-bottom: 0.5rem; }

.mb-article__body blockquote, .mb-page__body blockquote {
	margin: var(--s4) 0;
	padding: var(--s3);
	background: var(--sand);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--f-base);
}
.mb-article__body blockquote p:last-child,
.mb-page__body blockquote p:last-child { margin-bottom: 0; }

.mb-article__body figure, .mb-page__body figure { margin: var(--s4) 0; }
.mb-article__body figure img, .mb-page__body figure img {
	width: 100%;
	border-radius: var(--radius);
}
.mb-article__body figcaption, .mb-page__body figcaption {
	margin-top: 0.6rem;
	font-size: var(--f-sm);
	color: var(--stone);
	text-align: center;
}

/* Galerie d'article : grille responsive, pas de tableau Weebly. */
.mb-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.75rem;
	margin: var(--s4) 0;
}
.mb-gallery figure { margin: 0; }
.mb-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	cursor: zoom-in;
	transition: transform 0.4s var(--ease);
}
.mb-gallery img:hover { transform: scale(1.02); }

@media (min-width: 52rem) {
	.mb-gallery {
		width: min(56rem, calc(100vw - 2 * var(--gutter)));
		margin-inline: calc(50% - min(28rem, (100vw - 2 * var(--gutter)) / 2));
	}
}

/* Contenu embarqué : vidéo, écoute, carte. Le cadre garde son rapport de
   forme quelle que soit la largeur — sans quoi il tomberait à la hauteur fixe
   du gabarit d'origine, illisible sur téléphone. Le lecteur audio, lui, a une
   hauteur propre : lui imposer un rapport de forme le hacherait. */
.mb-embed {
	margin: var(--s4) 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--ink);
}
.mb-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
.mb-embed--video iframe { aspect-ratio: 16 / 9; }
.mb-embed--map iframe { aspect-ratio: 4 / 3; min-height: 20rem; }
.mb-embed--audio { background: none; }
.mb-embed--audio iframe { height: 20rem; }

@media (min-width: 52rem) {
	.mb-embed--video,
	.mb-embed--map {
		width: min(56rem, calc(100vw - 2 * var(--gutter)));
		margin-inline: calc(50% - min(28rem, (100vw - 2 * var(--gutter)) / 2));
	}
}

.mb-notice {
	margin: var(--s4) 0;
	padding: var(--s3);
	background: var(--sand);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.mb-notice p:last-child { margin-bottom: 0; }

/* --- Publications --------------------------------------------------------- */

/* Un livret : sa couverture d'un côté, sa présentation de l'autre. Les quatre
   couvertures n'ont pas exactement le même format — on borne la largeur, la
   hauteur suit, et le filet du haut sépare les livrets sans les encadrer. */
.mb-livret {
	display: grid;
	gap: var(--s3);
	padding-block: var(--s4);
	border-top: 1px solid var(--line-soft);
}
@media (min-width: 46rem) {
	.mb-livret {
		grid-template-columns: 12rem 1fr;
		gap: var(--s4);
		align-items: start;
	}
}
/* Sur téléphone la couverture passe au-dessus du texte : pleine largeur, un
   portrait de 800 pixels de haut ferait un écran à lui seul. */
.mb-page__body .mb-livret figure { margin: 0; max-width: 14rem; }
.mb-page__body .mb-livret img { box-shadow: 0 6px 18px rgb(27 54 38 / 14%); }
.mb-page__body .mb-livret h3 { margin-top: 0; }
.mb-livret__soustitre {
	font-family: var(--serif);
	font-style: italic;
	color: var(--stone);
}
.mb-livret__ours { font-size: var(--f-sm); color: var(--stone); }
.mb-livret__prix { font-weight: 600; margin-bottom: 0; }

/* --- Liens utiles --------------------------------------------------------- */

/* Onze logos qui n'ont en commun ni format ni fond : des JPEG à fond blanc,
   des PNG détourés, du carré et du panoramique. La tuile leur impose une
   hauteur et un fond blanc — sans quoi les JPEG poseraient chacun leur
   rectangle blanc sur le crème de la page — et `contain` les met à l'échelle
   sans jamais rogner ce qu'un partenaire a dessiné. */
.mb-liens {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: var(--s3);
	margin-block: var(--s4);
}
.mb-lien {
	display: grid;
	align-content: start;
	gap: 0.55rem;
	padding: var(--s2);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
	text-align: center;
	transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.mb-lien:hover { border-color: var(--line); box-shadow: 0 12px 26px -20px rgb(27 54 38 / 60%); }
.mb-page__body .mb-lien__logo {
	margin: 0;
	padding: 0.5rem;
	background: #fff;
	border-radius: var(--radius);
}
/* Hauteur fixe plutôt que `max-height: 100%` : c'est elle qui aligne les onze
   tuiles, quel que soit le format du logo, et une hauteur en pourcentage ne se
   résout pas sur une image dont la boîte est elle-même dimensionnée par elle.
   `contain` fait le reste — mise à l'échelle, centrage, aucun rognage. */
.mb-page__body .mb-lien__logo img {
	width: 100%;
	height: 4.5rem;
	object-fit: contain;
}
.mb-lien__nom {
	margin: 0;
	font-size: var(--f-sm);
	font-weight: 600;
	line-height: 1.35;
}
.mb-lien__nom a { text-decoration: none; }
.mb-lien__nom a:hover { text-decoration: underline; }
.mb-lien__note {
	margin: 0;
	font-size: var(--f-xs);
	line-height: 1.45;
	color: var(--stone);
}

/* Adresse postale et coordonnées bancaires : recopiées à la main par le
   lecteur, elles ont besoin d'être détachées du texte courant. */
.mb-page__body .mb-coordonnees {
	margin: 0 0 var(--s3);
	padding: var(--s2) var(--s3);
	background: var(--sand);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--f-base);
	line-height: 1.8;
}
.mb-coordonnees__iban {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: var(--f-sm);
	letter-spacing: 0.01em;
}

.mb-article__foot {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--s5) var(--gutter) 0;
}
.mb-postnav {
	display: grid;
	gap: var(--s2);
	padding-top: var(--s4);
	border-top: 1px solid var(--line-soft);
}
@media (min-width: 46rem) { .mb-postnav { grid-template-columns: 1fr 1fr; } }
.mb-postnav__item {
	display: grid;
	gap: 0.25rem;
	padding: var(--s3);
	background: var(--sand);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.25s var(--ease);
}
.mb-postnav__item:hover { background: #ddd8cb; color: inherit; }
.mb-postnav__item--next { text-align: right; }
.mb-postnav__label {
	font-size: var(--f-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stone);
}
.mb-postnav__title { font-family: var(--serif); font-weight: 600; line-height: 1.3; }
.mb-article__back { margin-top: var(--s4); text-align: center; }

/* --- 404 ----------------------------------------------------------------- */

.mb-404 {
	max-width: 40rem;
	margin-inline: auto;
	padding: var(--s6) var(--gutter);
	text-align: center;
}
.mb-404__peaks { width: 8rem; margin: 0 auto var(--s3); color: var(--primary); opacity: 0.5; }
.mb-404__code {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--f-2xl);
	color: var(--accent);
	letter-spacing: 0.1em;
}
.mb-404__title { font-size: var(--f-xl); }
.mb-404__text { color: var(--stone); }
.mb-404__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }

/* --- Pied de page -------------------------------------------------------- */

.mb-footer {
	margin-top: var(--s6);
	background: var(--deep);
	color: rgb(255 255 255 / 84%);
}
.mb-footer a { color: #fff; }

.mb-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--s5) var(--gutter);
	display: grid;
	gap: var(--s4);
}
@media (min-width: 52rem) {
	.mb-footer__inner { grid-template-columns: 1fr 1.25fr; gap: var(--s5); }
}

.mb-footer__peaks { width: 4rem; color: var(--accent-soft); margin-bottom: var(--s2); }
.mb-footer__org {
	margin: 0 0 0.75rem;
	font-family: var(--serif);
	font-size: var(--f-lg);
	font-weight: 600;
	color: #fff;
}
.mb-footer__address { font-style: normal; line-height: 1.8; margin-bottom: var(--s3); }
.mb-footer__link { text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 32%); }
.mb-footer__link:hover { border-bottom-color: var(--accent); }

.mb-footer__title { font-size: var(--f-lg); color: #fff; margin-bottom: 0.5rem; }
.mb-footer__intro { font-size: var(--f-sm); margin-bottom: var(--s3); }

.mb-footer__bottom {
	border-top: 1px solid rgb(255 255 255 / 12%);
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mb-footer__bottom > * {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mb-footer__bottom p { font-size: var(--f-xs); margin: 0; padding-block: 0.4rem; text-align: center; }
.mb-footer__bottom p:first-child { padding-top: var(--s3); }
.mb-footer__bottom p:last-child { padding-bottom: var(--s3); }
.mb-footer__credits { color: rgb(255 255 255 / 55%); max-width: 46rem; }

/* --- Formulaire ---------------------------------------------------------- */

.mb-form { display: grid; gap: var(--s2); }
.mb-form__row { display: grid; gap: 0.35rem; margin: 0; }
.mb-form label {
	font-size: var(--f-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 70%);
}
.mb-form input, .mb-form textarea {
	padding: 0.7rem 0.85rem;
	background: rgb(255 255 255 / 7%);
	border: 1px solid rgb(255 255 255 / 22%);
	border-radius: var(--radius);
	color: #fff;
	font: inherit;
	font-size: var(--f-sm);
}
.mb-form input:focus, .mb-form textarea:focus {
	background: rgb(255 255 255 / 12%);
	border-color: var(--accent-soft);
	outline-offset: 1px;
}
.mb-form textarea { resize: vertical; min-height: 7rem; }
.mb-form__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mb-form__actions { margin: 0; }
.mb-form .mb-button--solid { background: var(--accent); border-color: var(--accent); color: #1b1405; }
.mb-form .mb-button--solid:hover { background: #d5a05a; border-color: #d5a05a; color: #1b1405; }
.mb-form.is-sending .mb-button { opacity: 0.6; pointer-events: none; }

.mb-form__feedback {
	margin: 0;
	font-size: var(--f-sm);
	min-height: 1.5em;
}
.mb-form__feedback.is-ok { color: var(--accent-soft); }
.mb-form__feedback.is-error { color: #f0a9a0; }

/* --- Visionneuse d'images ------------------------------------------------ */

.mb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	place-items: center;
	padding: var(--s3);
	background: rgb(20 30 24 / 94%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s var(--ease), visibility 0.25s;
}
.mb-lightbox.is-open { opacity: 1; visibility: visible; }
.mb-lightbox__figure { margin: 0; max-width: min(72rem, 100%); text-align: center; }
.mb-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	margin-inline: auto;
	object-fit: contain;
	border-radius: var(--radius);
}
.mb-lightbox__caption {
	margin-top: var(--s2);
	color: rgb(255 255 255 / 78%);
	font-size: var(--f-sm);
}
.mb-lightbox__close {
	position: absolute;
	top: var(--s2);
	right: var(--s2);
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	background: rgb(255 255 255 / 10%);
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 50%;
	color: #fff;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
}
.mb-lightbox__close:hover { background: rgb(255 255 255 / 20%); }

body.mb-locked { overflow: hidden; }

/* --- Apparitions --------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	[data-reveal] { opacity: 1; transform: none; }
}

/* --- Alignements du contenu Gutenberg ------------------------------------ */

.mb-article__body .alignwide, .mb-page__body .alignwide {
	width: min(58rem, calc(100vw - 2 * var(--gutter)));
	margin-inline: calc(50% - min(29rem, (100vw - 2 * var(--gutter)) / 2));
}
.mb-article__body .alignfull, .mb-page__body .alignfull {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	max-width: none;
}
.mb-article__body .alignfull img, .mb-page__body .alignfull img { border-radius: 0; }
.wp-block-image img { cursor: zoom-in; }

/* --- Impression ---------------------------------------------------------- */

@media print {
	.mb-header, .mb-footer__col--form, .mb-postnav, .mb-article__back,
	.mb-skip, .mb-lightbox { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}