/**
 * Mise en page — en-tête, pied de page, rythme des sections.
 *
 * Tout est exprimé avec les variables générées par theme.json : aucune valeur
 * n'est écrite deux fois, et un changement de token se propage partout.
 */

/* La marge de page est portée par les gabarits, pas par la racine : sinon les
   sections pleine largeur ne peuvent pas atteindre les bords. */
.mrl-main {
	padding-inline: var( --wp--custom--outer-margin );
	/* Repère des éléments que l'on pose SUR le bandeau d'image (voir le fil de
	   section plus bas) : sans lui, `absolute` remonterait jusqu'au document. */
	position: relative;
}

/*
 * Haut de page.
 *
 * Les gabarits ne portent plus le retrait supérieur de 60 px qui insérait, entre
 * l'en-tête et la première image, une bande vide absente des maquettes.
 *
 * Ce retrait est un PADDING, jamais une marge sur le premier enfant : une marge
 * se fusionne avec celle du parent, `main` descend au lieu du contenu, et le fond
 * de la page laisse alors apparaître une ligne vide sous l'en-tête. C'est
 * exactement le défaut signalé — sur `main`, en padding, il ne peut pas arriver.
 *
 * Le texte garde la respiration de la maquette : le fil de section y est à y = 70,
 * soit 25 px sous un en-tête de 45 — le cran 20 de l'échelle.
 */
.mrl-main {
	padding-block-start: var( --wp--preset--spacing--20 );
}

/*
 * ...sauf quand la page commence par un bandeau pleine largeur : elle commence
 * alors VRAIMENT par l'image, à ras de l'en-tête. Trois formes selon le gabarit :
 * le bandeau en tête, le bandeau précédé du seul fil de section (qui se pose
 * dessus, voir plus bas), ou le bandeau en tête du contenu de l'article.
 */
.mrl-main:has( > :first-child.alignfull:not( .mrl-subnav-wrap ) ),
.mrl-main:has( > .mrl-subnav-wrap:first-child + .alignfull ),
.mrl-main:has( > .wp-block-post-content:first-child > :first-child.alignfull ) {
	padding-block-start: 0;
}

/*
 * Garde-fou des bandeaux pleine fenêtre.
 *
 * `vw` compte la barre de défilement : là où elle occupe de la place — Windows,
 * Linux, et macOS réglé sur « toujours afficher » — un bandeau en `50vw` dépasse
 * la zone visible de sa largeur et ouvre un défilement horizontal. `clip` le
 * retient. Sur l'axe vertical on garde `visible` : `hidden` ou `auto` feraient de
 * ce bloc un conteneur de défilement et le fil d'ancres collant cesserait de
 * coller. `clip` ne crée pas de conteneur de défilement — le `sticky` survit.
 */
.wp-site-blocks {
	overflow-x: clip;
	overflow-y: visible;
	/*
	 * PIED DE PAGE COLLÉ EN BAS.
	 *
	 * Sur une page courte — la galerie encore vide, une 404, un article bref — le
	 * pied de page remontait au MILIEU de l'écran, avec un grand vide sous lui.
	 * Le défaut n'appartient pas à ces pages : il appartient au document, et il
	 * touchait toute page dont le contenu ne remplit pas la fenêtre.
	 *
	 * La colonne prend au moins la hauteur de la fenêtre et le contenu principal
	 * absorbe le reste. `100dvh` et non `100vh` : sur mobile, `vh` compte la
	 * barre d'adresse même repliée, ce qui laisse une bande vide sous le pied.
	 */
	display: flex;
	flex-direction: column;

	/*
	 * LA BARRE D'ADMINISTRATION SE RETIRE DE CETTE HAUTEUR. Connecté, WordPress
	 * pose une barre de 32 px (46 sur mobile) EN PLUS du document : une colonne
	 * de 100dvh dépassait donc la fenêtre d'autant, et le pied de page tombait
	 * sous la ligne de flottaison — visible en navigation privée, invisible
	 * connecté. Relevé par le commanditaire sur la 404.
	 *
	 * `--mrl-hauteur-admin` et non `--mrl-decalage-admin` : le second retombe à
	 * zéro sous 601 px, où la barre cesse d'être FIXE — ce qui est juste pour un
	 * élément collant, et faux ici, car la barre occupe toujours sa place dans
	 * le document.
	 */
	min-block-size: calc( 100dvh - var( --mrl-hauteur-admin, 0px ) );
}

/*
 * C'est le contenu principal qui s'étire, jamais l'en-tête ni le pied. Le
 * sélecteur vise le `main` posé par les gabarits, quelle que soit sa classe.
 */
.wp-site-blocks > main {
	flex: 1 0 auto;
}

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

.mrl-footer {
	min-height: var( --wp--custom--footer-height );
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
	background: var( --wp--preset--color--light-light-grey );
}

.mrl-footer p {
	margin: 0;
}

.mrl-footer .wp-block-navigation {
	gap: var( --wp--preset--spacing--20 );
}

/*
 * L'ICÔNE INSTAGRAM AU PIED DE PAGE (#619).
 *
 * Le pictogramme est le même bloc que dans l'en-tête. Ce qui ne dépend pas du
 * lieu — taille et masque — est porté par `.mrl-instagram` ; le filet vertical
 * reste, lui, une affaire d'en-tête, car le pied a déjà ses propres barres.
 *
 * La couleur est HÉRITÉE (`currentColor`) et non écrite : c'est ce qui permet
 * au pictogramme de suivre le pied quand celui-ci passe en sombre, plus bas,
 * sans une seule règle de plus.
 */
.mrl-instagram {
	display: block;
	inline-size: 14px;
	block-size: 14px;
	background-color: currentColor;
	mask: url( "../svg/instagram.svg" ) center / contain no-repeat;
	-webkit-mask: url( "../svg/instagram.svg" ) center / contain no-repeat;
}

.mrl-footer .mrl-dienste {
	display: flex;
	align-items: center;
}

/*
 * La couleur se pose sur le LIEN, pas sur son conteneur. `currentColor` lit la
 * couleur de l'élément qui porte le masque, et `theme.json` donne le noir à
 * tout `<a>` : peindre le parent en gris laissait donc l'icône noire — mesuré.
 */
.mrl-footer .mrl-instagram {
	color: var( --wp--preset--color--mid-grey );
}

.mrl-footer .mrl-instagram:hover,
.mrl-footer .mrl-instagram:focus-visible {
	color: var( --wp--preset--color--black );
}

/*
 * LE PIED PROLONGE LA DERNIÈRE BANDE QUAND ELLE EST TEINTÉE (#618).
 *
 * Signalé par le commanditaire sur fotografie, begegnungen et les pages
 * d'œuvre : quand la page se termine par une bande sombre, le pied clair se
 * lisait comme une ligne blanche en travers du bas de page — « une tache ».
 *
 * Le pied n'est pas dans le `main` : il ne peut pas savoir, seul, comment la
 * page se termine. C'est l'ancêtre commun qui le sait, d'où le `:has()` porté
 * par `.wp-site-blocks`.
 *
 * DEUX FAÇONS DE FINIR EN SOMBRE, et il fallait les deux — la première m'avait
 * échappé, et aucune page ne correspondait à la règle :
 *
 *   1. le `main` LUI-MÊME est sombre. C'est le cas des trois gabarits cités par
 *      le commanditaire : `page-fotografie`, `taxonomy-serie` et
 *      `single-artwork` portent tous `mrl-section--dark` sur leur `<main>` ;
 *   2. la page se termine par une BANDE teintée pleine largeur, dernier enfant
 *      du contenu. C'est le cas de l'accueil et des pages de contenu.
 *
 * Dans le second cas seulement, l'écart entre la bande et le pied tombe à zéro,
 * et ce n'est pas un détail : le laisser, c'était remplacer la ligne claire du
 * pied par une ligne claire juste au-dessus. Dans le premier, le retrait est
 * DÉJÀ à l'intérieur du sombre — il n'y a rien à supprimer, et c'est même la
 * respiration que le commanditaire demande d'augmenter.
 */
.wp-site-blocks:has( > main.mrl-section--dark ) .mrl-footer,
.wp-site-blocks:has( .mrl-main > :is( .entry-content, .wp-block-post-content ) > .mrl-section--dark:last-child ) .mrl-footer {
	background: var( --wp--preset--color--dark-grey );
	color: var( --wp--preset--color--light-light-grey );
}

.wp-site-blocks:has( > main.mrl-section--maroon ) .mrl-footer,
.wp-site-blocks:has( .mrl-main > :is( .entry-content, .wp-block-post-content ) > .mrl-section--maroon:last-child ) .mrl-footer {
	background: var( --wp--preset--color--maroon );
	color: var( --wp--preset--color--light-light-grey );
}

.wp-site-blocks:has( > main.mrl-section--taupe ) .mrl-footer,
.wp-site-blocks:has( .mrl-main > :is( .entry-content, .wp-block-post-content ) > .mrl-section--taupe:last-child ) .mrl-footer {
	background: var( --wp--preset--color--taupe );
	color: var( --wp--preset--color--light-light-grey );
}

.wp-site-blocks:has( .mrl-main > :is( .entry-content, .wp-block-post-content ) > :is( .mrl-section--dark, .mrl-section--maroon, .mrl-section--taupe ):last-child ) .mrl-main {
	padding-block-end: 0;
}

/*
 * Sur teinte, tout le pied suit sa propre couleur — liens, filets, icône.
 * `color: inherit` plutôt qu'une couleur écrite : le pied peut ainsi devenir
 * sombre, bordeaux ou taupe sans une règle de plus par teinte.
 */
.wp-site-blocks:has( > main:is( .mrl-section--dark, .mrl-section--maroon, .mrl-section--taupe ) ) .mrl-footer :is( a, p, .mrl-instagram ),
.wp-site-blocks:has( .mrl-main > :is( .entry-content, .wp-block-post-content ) > :is( .mrl-section--dark, .mrl-section--maroon, .mrl-section--taupe ):last-child ) .mrl-footer :is( a, p, .mrl-instagram ) {
	color: inherit;
}

/* ------------------------------------------------- Sections pleine largeur. */

/*
 * Les bandeaux colorés de la refonte débordent la largeur de contenu mais pas
 * la marge de page : ils s'étendent bord à bord, leur contenu reste dans les
 * 1200 px.
 */
/*
 * RETRAIT INTÉRIEUR D'UNE BANDE — et rien d'autre par-dessus.
 *
 * Mesuré contre la maquette : elle laisse 58 px au-dessus du premier élément
 * d'une bande, le site en laissait 170. Deux fautes cumulées.
 *
 * La première : le retrait vaut 85 px là où la maquette en donne une soixantaine.
 * La seconde, plus sournoise : le premier enfant AJOUTAIT sa propre marge de
 * 85 px au retrait de la bande. Un retrait et une marge ne se confondent jamais
 * — c'est la règle du modèle de boîte — et personne ne les voyait s'additionner.
 */
/*
 * LE RYTHME VERTICAL DES MODULES, EN UN SEUL ENDROIT (#615, #616).
 *
 * Demande du commanditaire, 2026-08-28 : « Vertikale Modulabstände leicht
 * erhöhen > einheitliche Abstandslogik » — des écarts un peu plus larges, et
 * UNE logique, pas plusieurs.
 *
 * Le retrait passe de 60 à 75, ce qui porte l'écart entre deux modules voisins
 * de 120 à 150. Ce n'est pas un nombre choisi au hasard : la maquette donne
 * 149 pour l'écart « Meine Arbeit… → Fotografie ». Le harnais le mesurait à
 * 120 et le comptait en écart ; il passe au vert.
 *
 * POURQUOI PAS SIMPLEMENT SUIVRE LES BANDES DE LA MAQUETTE : parce qu'elle n'a
 * PAS de logique unifiée. Ses trois bandes de l'accueil se retirent de 92, 47
 * et 37 px — trois valeurs pour un même rôle. La suivre bande par bande, c'est
 * reconduire l'incohérence que le commanditaire demande précisément de lever.
 * On retient donc son plus grand écart entre modules, et on l'applique partout.
 *
 * Le jeton vit dans `theme.json` : une seule source, comme le reste.
 *
 * 2026-08-29 — LE JETON DEVIENT FLUIDE, sur demande du commanditaire :
 * « zwischen Blöcken einheitliche Lösung — auf desktop gerne etwas großzügiger,
 * mobil darf kompakter sein ». La logique reste unique — un seul jeton pour
 * toutes les bandes du site — mais elle suit maintenant la largeur : 85 px à
 * 1440, 48 px à 390. C'est l'écart de section de l'échelle (cran 5) en haut,
 * et un peu moins que le cran 4 en bas. La maquette, qui n'est dessinée qu'à
 * 1440, ne dit rien du mobile : elle ne peut donc pas trancher ici.
 */
.mrl-section {
	padding-block: var( --wp--custom--section-padding );
}

/*
 * Le manifeste respire plus que les autres — et la maquette le dit.
 *
 * C'est le module que le commanditaire a pointé (#615). Quatre lignes de texte
 * seules sur toute la largeur : au rythme commun, sa bande fait 330 px là où la
 * maquette en donne 364. Elle lui accorde 92 px de retrait, contre 47 et 37 aux
 * bandes voisines — sur ce point-là, elle est explicite, et l'œil lui donne
 * raison : un bloc de texte isolé a besoin de plus de silence autour de lui
 * qu'un module qui porte déjà un visuel.
 */
.mrl-section:has( > .is-style-manifest ) {
	padding-block: var( --wp--custom--manifest-padding );
}

/*
 * Le premier et le dernier enfant d'une bande ne portent pas de marge : c'est le
 * retrait de la bande qui fait l'écart. Sans cela, chaque bloc qui a sa propre
 * marge de section la doublait.
 *
 * LA CLASSE EST RÉPÉTÉE À DESSEIN, ce n'est pas une coquille. Les marges qu'on
 * neutralise ici viennent de règles à deux classes — `.mrl-wb-row.wp-block-columns`
 * et ses semblables — qui l'emportaient sur un sélecteur à une seule. Doubler la
 * classe met les deux à égalité, et l'ordre de la feuille tranche en faveur de
 * celle-ci. C'est plus lisible qu'un `!important`, et plus sûr qu'une liste de
 * blocs à tenir à jour.
 */
.mrl-section.mrl-section > :first-child {
	margin-block-start: 0;
}

.mrl-section.mrl-section > :last-child {
	margin-block-end: 0;
}

.mrl-section--dark {
	background: var( --wp--preset--color--dark-grey );
	color: var( --wp--preset--color--light-light-grey );
}

.mrl-section--maroon {
	background: var( --wp--preset--color--maroon );
	color: var( --wp--preset--color--light-light-grey );
}

.mrl-section--taupe {
	background: var( --wp--preset--color--taupe );
	color: var( --wp--preset--color--light-light-grey );
}

.mrl-section--light {
	background: var( --wp--preset--color--light-light-grey );
}

.mrl-section--dark :is( h1, h2, h3, h4 ),
.mrl-section--maroon :is( h1, h2, h3, h4 ),
.mrl-section--taupe :is( h1, h2, h3, h4 ) {
	color: inherit;
}

/* ------------------------------------------------------------ Sur-titres. */

/*
 * PAS de marge basse ici. L'écart sur-titre → titre est celui du thème
 * (`blockGap`, 20 px) : le poser une seconde fois marchait par accident.
 *
 * Dans un conteneur en FLOT, les deux marges se confondaient — 10 et 20 donnent
 * 20 — et la maquette était respectée. Dans un conteneur en FLEX, les marges de
 * frères ne se confondent pas : elles s'ajoutent. Les corps de carte
 * (`.mrl-card__body`) sont en flex, et l'écart y valait 30 au lieu de 20, sur la
 * carte « l'amour on tour » comme sur l'encart « Shop ». Deux mesures de
 * géométrie au rouge, pour une marge qui n'avait rien à faire là.
 */
.is-style-eyebrow {
	font-size: var( --wp--preset--font-size--eyebrow );
	font-weight: 700;
	letter-spacing: var( --wp--custom--tracking );
	line-height: 1.25;
}

/*
 * Le retrait bas du contenu vient d'ICI, plus des gabarits.
 *
 * Il y était posé en STYLE EN LIGNE, que rien ne peut battre : la règle
 * ci-dessous, écrite pour le cas de la bande finale, n'avait aucun effet et la
 * bande grise restait. Un réglage qui doit pouvoir être nuancé n'a pas sa place
 * en style en ligne.
 */
.mrl-main {
	padding-block-end: var( --wp--preset--spacing--50 );
}

/*
 * LA BANDE GRISE SOUS LA DERNIÈRE SECTION.
 *
 * Le contenu porte 85 px de retrait en bas — de la respiration, juste, quand la
 * page se termine par du texte. Mais quand elle se termine par une BANDE DE
 * TEINTE pleine largeur, ces 85 px laissent voir le fond de page entre la bande
 * et le pied : une épaisse bande grise que rien ne justifie. La maquette y met
 * 40 px, la hauteur du pied lui-même.
 *
 * La règle ne s'applique donc QUE dans ce cas, et le reste du site garde sa
 * respiration.
 *
 * ÉCART AUGMENTÉ À 60 (#619) : le commanditaire trouvait le pied trop près du
 * dernier module — « Abstand zum Footer vergrössern ». 40 px était la hauteur
 * du pied, pas une respiration. Quand la bande finale est TEINTÉE, cet écart
 * retombe à zéro et le pied prolonge la bande : voir la règle du pied plus
 * haut. Les deux vont ensemble — sans quoi on ne déplacerait la ligne claire
 * que de quelques pixels.
 */
.mrl-main:has( > .entry-content > .mrl-section:last-child ),
.mrl-main:has( > .wp-block-post-content > .mrl-section:last-child ) {
	padding-block-end: var( --wp--preset--spacing--40 );
}

/* --------------------------------------------------- Fil de section / ancres. */

.mrl-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--10 );
	align-items: center;
	font-size: var( --wp--preset--font-size--eyebrow );
	color: var( --wp--preset--color--mid-grey );
}

.mrl-subnav a[aria-current="page"] {
	color: var( --wp--preset--color--black );
}

.mrl-anchors {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--10 );
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	text-transform: uppercase;
}

/* ==========================================================================
   Responsive — le Figma ne fournit que des vues 1440 px. Les paliers ci-dessous
   sont déduits, pas relevés : ils reprennent les points de rupture historiques
   du site (600 / 900 / 1200) et dégradent la grille de 3 → 2 → 1 colonne.
   ========================================================================== */

/* ------------------------------------------------------- Grille d'œuvres. */

/*
 * Le nombre de colonnes vient du bloc — « Beitrags-Vorlage → Spalten » — et non
 * de la feuille : les trois gabarits déclarent `columnCount: 3`. On ne pose ici
 * que des PLAFONDS aux petites largeurs, sans quoi le réglage n'aurait aucun
 * effet, ce qui était le cas.
 */
.mrl-grid {
	display: grid;
	gap: var( --wp--preset--spacing--40 ) var( --wp--custom--gutter );
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( max-width: 899px ) {
	.mrl-grid.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 599px ) {
	.mrl-grid.is-layout-grid {
		grid-template-columns: 1fr;
	}
}

.mrl-grid > li {
	margin: 0;
}

/* Les vignettes sont carrées dans les maquettes (373 × 373), l'image est cadrée.
   `height: auto` est ici redondant — ces vignettes sont dans
   `.wp-block-post-featured-image`, à qui le cœur l'accorde déjà — mais on le pose
   quand même : il ne tient qu'au balisage du bloc, et sans lui `aspect-ratio` est
   ignoré (voir l'explication sur `.mrl-series__media img`). */
.mrl-grid__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.mrl-grid__caption {
	margin-block: var( --wp--preset--spacing--20 ) 0;
}

/*
 * LA LÉGENDE DÉCIDE, SON LIEN SUIT. La couleur est déclarée sur le bloc de titre
 * — c'est là qu'elle se règle, jamais en CSS. Mais le lien qu'il contient a la
 * sienne, héritée des liens du site : sorti de la règle des fonds sombres, il
 * retombait en NOIR sur du gris anthracite, donc illisible. `inherit` le remet
 * au service du titre qui le porte.
 */
.mrl-grid__caption a {
	color: inherit;
}

/* ------------------------------------------------- Rangées de séries (hub). */

.mrl-series__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--custom--gutter );
	align-items: start;
	margin-block-end: var( --wp--preset--spacing--50 );
}

@media ( min-width: 900px ) {
	.mrl-series__row {
		/* 373 px de visuel, le reste au texte — les proportions du Figma. */
		grid-template-columns: minmax( 0, 373fr ) minmax( 0, 787fr );
		gap: var( --wp--preset--spacing--40 );
	}
}

/* Visuel de série : 373 × 373 dans la maquette.
   `height: auto` est INDISPENSABLE ici. Cette <img> sort de
   `wp_get_attachment_image()` dans un simple <div> : aucune des règles du cœur qui
   posent `height: auto` (`.wp-block-image img`, `.wp-block-post-featured-image img`)
   ne l'atteint. Son attribut HTML `height` reste donc une hauteur résolue, et
   `aspect-ratio` — qui n'agit que si une dimension vaut `auto` — est ignoré : le
   visuel partait en 373 × 1024, toute la hauteur du fichier. C'était le « format
   d'images » signalé sur la page Fotografie. Contrôlé par `serie-1-media` et
   `serie-2-media` dans tools/qa/figma-ref.json. */
.mrl-series__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

.mrl-series__title {
	margin: 0 0 var( --wp--preset--spacing--20 );
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var( --wp--custom--tracking );
}

.mrl-series__text {
	margin: 0 0 var( --wp--preset--spacing--30 );
	max-width: var( --wp--custom--column );
}

/* ------------------------------------------------------------ Page œuvre. */

.mrl-work__image img {
	display: block;
	width: 100%;
	height: auto;
}

.mrl-work__caption {
	margin-block: var( --wp--preset--spacing--30 ) 0;
}

.mrl-work__field {
	margin-block: var( --wp--preset--spacing--10 );
}

/* La technique tient sur deux lignes dans la maquette : on respecte le saut. */
.mrl-work__field--technology {
	white-space: pre-line;
}

/*
 * Un paragraphe lié à un champ vide ne doit pas laisser d'espace fantôme — SUR LE
 * SITE seulement. Dans l'éditeur, les champs liés sont vides par nature (ils se
 * remplissent au rendu) : masquer les rendait invisibles et insélectionnables dans
 * le gabarit « Werk », où l'on vient précisément les réordonner.
 */
.wp-site-blocks .mrl-work__field:empty {
	display: none;
}

.mrl-work__gallery {
	margin-block-start: var( --wp--preset--spacing--50 );
	display: grid;
	gap: var( --wp--preset--spacing--40 );
}

.mrl-work__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--40 );
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	text-transform: uppercase;
}

.mrl-work__nav-grid {
	display: grid;
	grid-template-columns: repeat( 3, 4px );
	gap: 2px;
	width: 20px;
}

.mrl-work__nav-grid::before {
	content: "";
	display: block;
	grid-column: 1 / -1;
	block-size: 0;
}

/* Neuf carrés, dessinés en CSS plutôt qu'en image : ça suit la couleur du texte. */
.mrl-work__nav-index {
	display: block;
	inline-size: 20px;
	block-size: 20px;
	background-image: radial-gradient( currentColor 45%, transparent 46% );
	background-size: 6.67px 6.67px;
	background-position: 0 0;
}

.mrl-work__nav-index .mrl-work__nav-grid {
	display: none;
}

/* ---------------------------------------------------- Chapô à deux colonnes. */

.mrl-lede.wp-block-columns {
	gap: var( --wp--custom--gutter );
}

@media ( max-width: 899px ) {
	.mrl-lede.wp-block-columns {
		flex-wrap: wrap;
	}
}

/* ------------------------------------------------------------- Séparateurs. */

.mrl-rule.wp-block-separator {
	width: 100%;
	max-width: none;
	height: 1px;
	border: 0;
	opacity: 0.4;
	margin-block: var( --wp--preset--spacing--50 );
}

/* ------------------------------------------------- Navigation sur mobile. */

@media ( max-width: 899px ) {
	/*
	 * L'INTERLIGNE DU PIED, SUR MOBILE.
	 *
	 * Le pied est une rangée en flex qui tient sur une seule ligne à 1440. En
	 * dessous de 900 elle se replie en TROIS lignes, et l'écart de 20 px prévu
	 * pour séparer des voisins HORIZONTAUX devient un interligne de 20 px entre
	 * des lignes de 20 px de haut : le pied respire deux fois plus qu'il ne
	 * s'écrit.
	 *
	 * On sépare donc les deux écarts, ce que `gap` seul ne permet pas : les
	 * colonnes gardent leurs 20 px — ce sont eux qui tiennent les filets « | »
	 * à distance — et les rangées descendent à 10. Le pied garde sa hauteur
	 * minimale, rien d'autre ne bouge.
	 */
	.mrl-footer {
		padding-block: var( --wp--preset--spacing--20 );
		text-align: center;
		row-gap: var( --wp--preset--spacing--10 );
	}
}

/* ------------------------------------------------------ Sections d'accueil. */

/* Les sections pleine largeur portent elles-mêmes la marge : le contenu reste
   dans les 1200 px, le fond va de bord à bord. */
.mrl-section.alignfull {
	padding-inline: var( --wp--custom--outer-margin );
}

.mrl-hero {
	display: flex;
	align-items: center;
	min-block-size: 600px;
	/*
	 * La hauteur de la maquette est celle de la BANDE, retrait intérieur compris.
	 * Sans `border-box`, les 85 px de retrait du haut et du bas s'ajoutaient aux
	 * 600 : le bandeau mesurait 770 px, soit 170 de trop, et tout ce qui suit sur
	 * l'accueil descendait d'autant. Rien ne le voyait — `geometry.mjs` ne
	 * contrôlait pas la hauteur des bandes, alors que la référence la porte.
	 */
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
}

.mrl-hero__body {
	margin-inline-start: auto;
	inline-size: min( 100%, 534px );
}

@media ( min-width: 900px ) {
	.mrl-hero__body {
		/* Le bloc de titre occupe la moitié droite, comme dans la maquette. */
		margin-inline-start: 50%;
	}
}

.is-style-manifest {
	max-inline-size: 797px;
	margin-inline: auto;
}

/*
 * LE DÉFAUT D'UN DUO EST « EN HAUT », PAS « CENTRÉ » (#602).
 *
 * Demande du commanditaire, 2026-08-28 : un duo sans choix explicite aligne ses
 * colonnes sur leur bord haut. Le centrage reste disponible, mais il se demande.
 *
 * Ne concerne QUE la variante « teaser » : les cartes (`mrl-card`) tirent leurs
 * deux colonnes à la même hauteur, et un `flex-start` les ferait retomber sur
 * leur hauteur naturelle — le fond de la carte cesserait de descendre jusqu'au
 * bas du visuel.
 */
.mrl-teaser.wp-block-columns {
	gap: var( --wp--preset--spacing--40 );
	align-items: flex-start;
}

.mrl-teaser__media img,
.mrl-card__media img,
.mrl-duo.mrl-teaser > .wp-block-column:last-child img,
.mrl-duo.mrl-card > .wp-block-column:last-child img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.mrl-card.wp-block-columns {
	gap: 0;
}

/*
 * Le volet de texte d'une carte.
 *
 * Le sélecteur de position s'ajoute à la classe : une carte tout juste insérée
 * depuis l'inséreur n'a AUCUNE classe tapée à la main, et devait pourtant
 * ressembler à une carte. Faire dépendre l'aspect d'un `mrl-card__body` saisi
 * dans « Avancé », c'était garder la moitié du motif hors du bloc.
 * La classe reste acceptée : le contenu existant la porte encore.
 */
.mrl-card__body,
.mrl-duo.mrl-card > .wp-block-column:first-child {
	/*
	 * 29 px, relevé sur la maquette. Les 60 px du cran 4 venaient d'un
	 * arrondi : le texte perdait 62 px de largeur utile dans une colonne qui
	 * n'en fait que 413.
	 */
	padding: var( --wp--preset--spacing--40 ) 29px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*
 * Duo texte / visuel — bloc « Text mit Bild ».
 *
 * Le rapport des colonnes vit ICI, une seule fois, au lieu d'être retapé en
 * `flex-basis` dans chaque page. C'est tout l'intérêt du bloc : changer la
 * proportion d'une carte se fait sur une ligne, pas dans dix pages.
 *
 * Le texte est toujours la première colonne dans le contenu — c'est l'ordre de
 * lecture, et l'ordre dans lequel une synthèse vocale le restituera. Mettre le
 * visuel à gauche n'est qu'un renversement d'affichage.
 */
/*
 * Les colonnes d'un duo comptent leur retrait DANS leur taille.
 *
 * Le cœur ne pose `box-sizing: border-box` que sur `.wp-block-columns`, jamais
 * sur les colonnes. Une carte a une hauteur fixe de 500 px et son volet de
 * texte 60 px de retrait : en `content-box`, cela fait une boîte de 620 px. Le
 * fond blanc dépassait donc de 120 px sous l'image — signalé sur /wortbilder/,
 * vrai sur toutes les cartes.
 */
.mrl-card__body,
.mrl-duo > .wp-block-column {
	box-sizing: border-box;
}

.mrl-duo.mrl-card > .wp-block-column {
	/*
	 * Le cœur ne coupe la croissance que si la base est posée EN LIGNE
	 * (`.wp-block-column[style*="flex-basis"]`). La nôtre vient de la feuille
	 * de style : sans ce `flex-grow: 0`, les colonnes s'étirent au-delà de
	 * leur base et la colonne de texte perdait 19 px.
	 */
	flex-grow: 0;
}

/*
 * La largeur du volet de texte vient du jeton `cardBody` de theme.json — la
 * même valeur que les règles de bande plus bas. Elle était écrite ici en
 * pourcentage (34,42 %) et là en jeton : deux sources pour une seule mesure.
 * Le visuel prend simplement ce qui reste.
 */
.mrl-duo.mrl-card > .wp-block-column:first-child {
	flex-basis: var( --wp--custom--card-body );
}

.mrl-duo.mrl-card > .wp-block-column:last-child {
	flex-basis: auto;
	flex-grow: 1;
}

.mrl-duo--medien-links {
	flex-direction: row-reverse;
}

@media ( max-width: 899px ) {
	/*
	 * En pile, le renversement n'a plus de sens : il ferait passer le visuel
	 * avant le texte qu'il illustre.
	 */
	.mrl-duo--medien-links {
		flex-direction: row;
	}

	/*
	 * `!important` assumé, et pour la seule raison qui vaille sur ce projet :
	 * le cœur en pose un. La feuille de `core/columns` déclare
	 * `@media (min-width: 782px) { .wp-block-columns { flex-wrap: nowrap !important } }`,
	 * et le duo emprunte cette classe. Notre point de rupture est à 899 px :
	 * sans cela, entre 782 et 899, les duos refusaient de s'empiler et la
	 * colonne de texte tombait à 313 px — mesuré à 800 px sur /ueber-mich/.
	 */
	.mrl-duo {
		flex-wrap: wrap !important;
	}

	/*
	 * Et les colonnes prennent toute la largeur.
	 *
	 * Le renvoi à la ligne ne suffit pas : sans base explicite, deux colonnes
	 * `flex: 1` se partagent la ligne quand même — 195 px chacune sur un écran
	 * de 390. Illisible pour du texte.
	 */
	.mrl-duo > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Sur fond sombre ou coloré, le bouton contour prend la couleur du texte. */
.mrl-section--dark .wp-block-button.is-style-outline > .wp-block-button__link,
.mrl-section--maroon .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var( --wp--preset--color--light-light-grey );
	border-color: var( --wp--preset--color--light-light-grey );
	background: transparent;
}

@media ( max-width: 899px ) {
	.mrl-card.wp-block-columns,
	.mrl-teaser.wp-block-columns {
		flex-wrap: wrap;
	}

	.mrl-card .wp-block-column {
		flex-basis: 100% !important;
	}

	.mrl-hero {
		min-block-size: 420px;
	}
}

/* ------------------------------------------------------- Gabarit d'accueil. */

/* L'accueil ne porte pas de marge : chaque section va de bord à bord et gère
   son propre retrait intérieur. */
.mrl-front {
	padding-inline: 0;
}

/*
 * UNE BANDE NE PORTE PAS DE MARGE — SUR TOUTES LES PAGES, PLUS SEULEMENT L'ACCUEIL.
 *
 * L'écart entre blocs frères (`blockGap`, 20 px) s'appliquait aux bandes des
 * pages de contenu : deux bandes voisines laissaient donc voir 20 px de fond de
 * page entre elles. Invisible tant que les deux teintes se ressemblent — et
 * c'est bien le piège : entre la bande blanche de « Produktion & Qualität » et
 * la bande claire qui suit, la ligne existait sans se voir, et elle se serait
 * vue au premier changement de teinte.
 *
 * L'écart entre deux modules, c'est leur RETRAIT — 75 px de chaque côté, la
 * logique unifiée de #616 — jamais une marge qui s'ajoute par-dessus.
 */
.mrl-front > .wp-block-post-content > .mrl-section,
:is( .entry-content, .wp-block-post-content ) > .mrl-section {
	margin-block: 0;
}

/*
 * MAIS UNE BANDE QUI SUIT AUTRE CHOSE QU'UNE BANDE REPREND SON ÉCART (#623).
 *
 * La règle ci-dessus était trop large, et le commanditaire l'a vu avant moi :
 * sur /ueber-mich/, la carte « Limitierte Editionen » se retrouvait COLLÉE à la
 * bande blanche de « Produktion & Qualität » — écart mesuré à 0, là où la
 * maquette en donne 83 entre le bas de la carte et le début de la bande.
 *
 * La distinction est celle-ci, et elle tient en une phrase : entre DEUX BANDES,
 * l'écart est fait par leurs retraits et une marge en plus ne ferait qu'ouvrir
 * une bande de fond de page ; entre une bande et un bloc ORDINAIRE, il n'y a
 * aucun retrait pour séparer, et la marge est le seul écart possible.
 *
 * 85 et non 75 : ajoutés aux 75 de retrait de la bande, ils donnent 160 entre la
 * carte et le titre qui suit — la maquette en demande 159.
 */
:is( .entry-content, .wp-block-post-content ) > * + .mrl-section {
	margin-block-start: var( --wp--preset--spacing--50 );
}

:is( .entry-content, .wp-block-post-content ) > .mrl-section + .mrl-section {
	margin-block-start: 0;
}

/* Boutons pleins clairs sur les surfaces colorées. */
.mrl-card__body.has-taupe-background-color .wp-block-button__link,
.mrl-section--maroon .wp-block-button__link:not( .is-style-outline ) {
	background: var( --wp--preset--color--light-light-grey );
	color: var( --wp--preset--color--black );
	border-color: var( --wp--preset--color--mid-grey );
}

/*
 * Une image de bloc sans média choisi ne doit pas réserver de place — SUR LE SITE.
 *
 * Cette règle est bornée à `.wp-site-blocks`, enveloppe qui n'existe QUE sur le
 * site public. Sans cette borne, elle s'appliquait aussi dans l'éditeur, où un
 * bloc image encore vide rend bien une `<figure>` sans `<img>` autour de son
 * espace réservé : le bloc y devenait invisible et insaisissable, au moment précis
 * où l'on venait lui choisir une image. La feuille étant passée au canevas par
 * `add_editor_style()`, tout ce qui masque doit être borné de la sorte.
 */
.wp-site-blocks .wp-block-image:not( :has( img ) ),
.wp-site-blocks .wp-block-gallery:not( :has( img ) ) {
	display: none;
}

/* L'accueil est une pile de sections pleine largeur : ni le main ni le bloc de
   contenu ne contraignent la largeur, sinon les fonds ne peuvent pas atteindre
   les bords. Le retrait à 1200 px est porté par chaque section. */
.mrl-front,
.mrl-front > .wp-block-post-content {
	max-width: none;
	padding-inline: 0;
}

.mrl-section.alignfull > * {
	max-inline-size: var( --wp--custom--content-width );
	margin-inline: auto;
}

/* Les cartes à deux volets : le média remplit sa colonne sur toute la hauteur. */
.mrl-card .wp-block-column {
	display: flex;
}

.mrl-card__media {
	margin: 0;
	inline-size: 100%;
	min-block-size: 400px;
}

.mrl-teaser__media {
	margin: 0;
}

/* Voile sombre sous le héros : les maquettes posent le titre sur une zone
   sombre de la photo. Sans lui, la lisibilité dépend de l'image choisie. */
.mrl-hero {
	position: relative;
	background-color: var( --wp--preset--color--dark-grey );
}

.mrl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 90deg, rgb( 0 0 0 / 20% ) 0%, rgb( 0 0 0 / 65% ) 55% );
}

.mrl-hero > * {
	position: relative;
}

/*
 * Galerie « Quatuor ».
 *
 * La galerie native est en flex ; on la force en grille pour obtenir le carré
 * 2 × 2 de la maquette. Le NOMBRE de colonnes suit le réglage du bloc — 2 n'est
 * que le repli.
 *
 * Ces règles existaient en TROIS exemplaires, écrits à trois moments
 * différents et de spécificités croissantes ; seules celles-ci agissaient
 * réellement. Les deux autres ont été retirées.
 */
.wp-block-gallery.is-style-quartett.has-nested-images {
	display: grid;
	grid-template-columns: repeat( var( --mrl-galerie-colonnes, 2 ), minmax( 0, 1fr ) );
	gap: var( --wp--custom--gutter );
}

.wp-block-gallery.is-style-quartett.has-nested-images figure.wp-block-image {
	width: 100% !important;
	flex-grow: 0 !important;
	margin: 0;
}

.wp-block-gallery.is-style-quartett.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Les cartes de l'accueil font 1200 × 500 dans la maquette : sans hauteur
   imposée, une image en portrait étire la carte à plus du double. */
@media ( min-width: 900px ) {
	.mrl-card.wp-block-columns {
		block-size: 500px;
	}

	.mrl-card .wp-block-column {
		block-size: 100%;
		overflow: hidden;
	}

	.mrl-card__media {
		min-block-size: 0;
		block-size: 100%;
	}
}

/* --------------------------------------------------- Sélecteur de vue (œuvre). */

.mrl-work__switch {
	display: flex;
	justify-content: center;
	gap: var( --wp--preset--spacing--10 );
	margin-block-start: var( --wp--preset--spacing--20 );
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	text-transform: uppercase;
}

.mrl-work__switch a {
	color: var( --wp--preset--color--mid-grey );
}

.mrl-work__caption {
	text-align: center;
	font-size: var( --wp--preset--font-size--meta );
}

/* Feuilletage en trois colonnes égales : précédent à gauche, index au centre,
   suivant à droite — même quand un des deux liens manque. */
.mrl-work__nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var( --wp--preset--spacing--30 );
	justify-items: center;
}

.mrl-work__nav-link--prev {
	justify-self: end;
}

.mrl-work__nav-link--next {
	justify-self: start;
}

/*
 * Sur fond sombre, les liens du site sont clairs.
 *
 * SAUF les légendes d'une grille d'œuvres : le commanditaire les veut GRISES, et
 * cette règle-ci les repeignait en clair par-dessus la couleur déclarée sur le
 * bloc. Un `:not()` plutôt qu'une règle de plus après : c'est ici que se décide
 * la couleur des liens sombres, et l'exception se lit au même endroit.
 */
.mrl-section--dark a:not( .mrl-grid__caption a ),
.mrl-section--dark .wp-block-post-title:not( .mrl-grid__caption ) a {
	color: var( --wp--preset--color--light-light-grey );
}

.mrl-section--dark .mrl-subnav a {
	color: var( --wp--preset--color--mid-grey );
}

.mrl-section--dark .mrl-subnav a[aria-current="page"] {
	color: var( --wp--preset--color--light-light-grey );
}

/* Le texte descriptif de l'œuvre est centré comme le reste du pavé. */
.mrl-work__details .wp-block-post-content {
	text-align: center;
}

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

.mrl-form__row--split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--custom--gutter );
}

@media ( min-width: 600px ) {
	.mrl-form__row--split {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/*
 * Rythme du formulaire, relevé sur la maquette : 5 px entre le libellé et son
 * champ, 30 px entre un champ et le libellé suivant — soit 70 px d'un libellé
 * au suivant. Ces deux mesures ne sont pas sur l'échelle d'espacement du
 * thème, qui saute de 20 à 40.
 */
.mrl-form__field {
	margin-block: 0 30px;
}

.mrl-form__field label {
	display: block;
	margin-block-end: 5px;
	font-size: var( --wp--preset--font-size--titel );
}

/*
 * Champs de saisie.
 *
 * La maquette ne leur donne aucune bordure au repos : le fond blanc suffit à
 * les détacher du gris de la page. Le contour gris venait de nulle part.
 *
 * En revanche le FOCUS reste visible, et c'est non négociable : sans lui, une
 * personne qui navigue au clavier ne sait plus où elle est. On le dessine avec
 * `outline`, qui ne déplace rien.
 */
.mrl-form input[type="text"],
.mrl-form input[type="email"],
.mrl-form textarea {
	inline-size: 100%;
	/*
	 * `border-box` : sans lui, la hauteur dessinée du champ de message
	 * (223 px) s'ajoute à son retrait et la boîte fait 235 px — tout le pied
	 * du formulaire descend d'autant.
	 */
	box-sizing: border-box;
	font: inherit;
	color: inherit;
	background: var( --wp--preset--color--white );
	border: 0;
	border-radius: 0;
	/*
	 * 35 px de haut, comme la maquette : la saisie est à la mesure
	 * « Titel » (17 px), l'interligne à 23 px, et 6 px de retrait de part et
	 * d'autre. Le champ faisait 46 px parce qu'il héritait du corps de
	 * texte (20 px, interligne 1,5).
	 */
	font-size: var( --wp--preset--font-size--titel );
	line-height: calc( 23 / 17 );
	padding: 6px var( --wp--preset--spacing--10 );
}

.mrl-form textarea {
	/* 223 px dans la maquette — une dimension dessinée, comme les 35 px. */
	block-size: 223px;
	resize: vertical;
}

.mrl-form input[type="text"]:focus-visible,
.mrl-form input[type="email"]:focus-visible,
.mrl-form textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--dark-grey );
	outline-offset: 0;
}

/* Le pot de miel doit rester invisible sans être `display:none` : certains
   robots ignorent les champs masqués de cette façon. */
.mrl-form__trap {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* Le champ de message touche presque le pied du formulaire : 21 px. */
.mrl-form__field:has( textarea ) {
	margin-block-end: 0;
}

.mrl-form__row--footer {
	margin-block-start: 21px;
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--custom--gutter );
	/*
	 * La mention de confidentialité et le bouton partent du MÊME haut dans la
	 * maquette. Alignés par le bas, le bouton descendait de 20 px sous la
	 * mention, qui est plus haute que lui.
	 */
	align-items: start;
	justify-content: space-between;
}

.mrl-form__hint {
	margin: 0;
	max-inline-size: var( --wp--custom--column );
	font-size: var( --wp--preset--font-size--meta );
}

/*
 * Bouton d'envoi : CONTOUR.
 *
 * Le bouton par défaut du thème est plein et sombre — c'est le bouton d'appel à
 * l'action des pages de contenu. Celui du formulaire est dessiné autrement dans
 * la maquette : fond de page, filet gris, texte noir. Il tient donc ses valeurs
 * des mêmes jetons, mais dans l'autre sens.
 */
.mrl-form__submit {
	margin: 0;
}

.mrl-form__submit .wp-element-button {
	background: var( --wp--preset--color--light-light-grey );
	color: var( --wp--preset--color--black );
	border: 1px solid var( --wp--preset--color--mid-grey );
	/*
	 * 14 px de retrait latéral et non 20 : le bouton mesure alors 206 px,
	 * comme la maquette. Les boutons d'appel à l'action des pages de contenu
	 * gardent leurs 20 px — ils tombent déjà juste (357 contre 356 attendus,
	 * 252 contre 250).
	 */
	padding-inline: 14px;
}

.mrl-form__submit .wp-element-button:hover,
.mrl-form__submit .wp-element-button:focus-visible {
	background: var( --wp--preset--color--dark-grey );
	color: var( --wp--preset--color--light-light-grey );
	border-color: var( --wp--preset--color--dark-grey );
}

.mrl-form__notice {
	padding: var( --wp--preset--spacing--10 ) 14px;
	border: 1px solid var( --wp--preset--color--light-grey );
	margin-block-end: var( --wp--preset--spacing--20 );
}

.mrl-form__notice--ok {
	border-color: var( --wp--preset--color--dark-grey );
}

/* ------------------------------------------------ Ausstellungen et cartes. */

.mrl-exhibitions {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px var( --wp--custom--gutter );
	margin-block-start: var( --wp--preset--spacing--40 );
}

.mrl-exhibitions dt,
.mrl-exhibitions dd {
	margin: 0;
}

/*
 * LA CARTE DE CONTACT NE PREND PAS TOUTE LA LARGEUR (#621).
 *
 * Signalé par le commanditaire sur /ueber-mich/. Le groupe qui l'enveloppe
 * déclare pourtant `contentSize: var( --wp--custom--contact-card )`, soit
 * 375 px — mais la mise en page « constrained » du cœur ne contraint que les
 * enfants qui ne sont pas en pleine largeur, et la bande intérieure en est une.
 * Mesuré : le fond bordeaux s'étalait sur 1200 px, de x=120 à x=1320.
 *
 * La maquette place cette carte à x=532 sur 375 de large — donc centrée. On
 * pose donc la mesure sur la bande elle-même, avec le MÊME jeton : deux
 * endroits qui disent 375, jamais deux nombres.
 */
.mrl-contact-card__inner {
	/*
	 * `border-box` : la maquette donne 375 px pour la CARTE, retrait compris.
	 * Sans lui, les 60 px de retrait s'ajoutaient de chaque côté et la carte
	 * mesurait 495 — mesuré.
	 */
	box-sizing: border-box;
	max-inline-size: var( --wp--custom--contact-card );
	margin-inline: auto;
	/*
	 * Retrait ASYMÉTRIQUE, et la maquette l'exige : elle donne 375 px à la carte
	 * ET 374 à son texte — autrement dit, le texte occupe toute la largeur, il
	 * n'y a pas de retrait latéral à proprement parler. Avec 60 px de chaque
	 * côté, la colonne tombait à 255, le texte passait à cinq lignes et la carte
	 * mesurait 447 de haut contre 354 attendus. 20 px suffisent à décoller le
	 * texte du bord sans le comprimer.
	 */
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--20 );
}

.mrl-prose > * + * {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/*
 * UNE IMAGE DE BILLET NE SORT JAMAIS DE SA COLONNE (commanditaire, 2026-08-29).
 *
 * CE BLOC ANNULE #606, et il faut dire pourquoi. On avait donné trois crans de
 * largeur aux visuels d'un billet — 786, 1200, bord à bord — en reprenant la
 * convention de WordPress : « large » et « pleine largeur » s'échappent du
 * conteneur par des marges négatives. C'est le comportement du cœur, et il est
 * délibéré.
 *
 * Le commanditaire l'a regardé et l'a refusé, dans des termes qui ne laissent
 * pas de place au doute : « pourquoi tout le haut de l'article fait une certaine
 * largeur et le bas déborde ? si je mets 100 % sur une image ça devrait pas
 * déborder du parent », puis « on doit pouvoir choisir size full, que ce soit
 * 100 % et puis basta ». Il a raison sur le fond : une échappée par marges
 * négatives est une bizarrerie de la plateforme, pas une évidence de lecture.
 *
 * Donc : quel que soit l'alignement choisi, l'image tient dans la colonne de
 * lecture ET la remplit. « Pleine largeur » veut dire 100 % du parent. Les
 * boutons d'alignement du cœur restent dans l'éditeur — on ne peut pas les en
 * retirer sans retirer le bloc image lui-même — mais ils ne déplacent plus rien
 * ici, et c'est ce qui était demandé.
 *
 * `inline-size: 100%` compte : sans lui, un fichier plus étroit que la colonne
 * s'y arrête à sa taille propre. C'était le cas des deux visuels signalés, servis
 * en 683 dans une colonne de 786 — « aucun moyen de mettre une image en
 * width 100 % », et c'était vrai.
 */
.mrl-prose .wp-block-post-content > :is( figure.wp-block-image, .alignwide, .alignfull ) {
	margin-inline: auto;
	max-inline-size: 100%;
	inline-size: auto;
}

.mrl-prose .wp-block-post-content > figure.wp-block-image img {
	inline-size: 100%;
	block-size: auto;
}

/* ------------------------------------------------- Produktion & Qualität. */

/*
 * Deux colonnes, deux rangées, et la première case est du texte (#622).
 *
 * Relevé sur la maquette (node 5774:832) : bande pleine largeur en BLANC, texte
 * à x=120 sur 580 de large, visuels de 580 × 350 à x=120 et x=740. La gouttière
 * vaut donc 40 — le jeton `gutter` du projet, pas un nombre écrit ici.
 *
 * Une GRILLE et non un duo : `mrl/text-bild` sait faire deux colonnes, pas un
 * damier de quatre cases dont la première est un bloc de texte. La grille dit
 * exactement cela, et l'auteur peut ajouter ou retirer un visuel sans que rien
 * ne se disloque — la case suivante prend la place libre.
 */
.mrl-produktion {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --wp--custom--gutter );
}

.mrl-produktion__text > * + * {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/*
 * Le rapport vient de la maquette, la découpe de `cover` : les trois photos
 * n'ont pas le même format d'origine — 2500×1875, 2500×2175, 3500×2320 — et
 * sans rapport imposé, la grille prendrait la hauteur de la plus haute.
 */
.mrl-produktion__media {
	margin: 0;
}

.mrl-produktion__media img {
	display: block;
	inline-size: 100%;
	aspect-ratio: 580 / 350;
	object-fit: cover;
}

/* En pile, une seule colonne : deux visuels de 580 côte à côte n'ont plus de
   sens en dessous de la largeur du contenu. */
@media ( max-width: 899px ) {
	.mrl-produktion {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------- Bandeau. */

.mrl-cover {
	margin-block-end: var( --wp--preset--spacing--50 );
}

.mrl-cover.alignfull {
	/* Le bandeau déborde la marge du gabarit pour aller bord à bord. */
	margin-inline: calc( -1 * var( --wp--custom--outer-margin ) );
}

.mrl-cover__picture,
.mrl-cover__image {
	display: block;
	inline-size: 100%;
}

.mrl-cover__image {
	block-size: clamp( 240px, 37vw, 532px );
	object-fit: cover;
}

/* ================================================ Pages éditoriales longues. */

.mrl-subnav-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--10 ) var( --wp--preset--spacing--30 );
	align-items: baseline;
	margin-block-end: var( --wp--preset--spacing--40 );
}

.mrl-section--white {
	background: var( --wp--preset--color--white );
}

/*
 * Triptyque et paires : des grilles régulières, pas le flex natif de la galerie.
 *
 * Le nombre de colonnes SUIT LE RÉGLAGE DU BLOC. Il était figé par classe de
 * galerie, si bien que changer « Colonnes » dans la colonne latérale ne produisait
 * aucun effet — ni dans l'éditeur, ni sur le site. Le cœur pose une classe
 * `columns-N` : c'est elle qui pilote désormais la grille, la valeur par classe ne
 * servant plus que de repli quand le bloc n'en déclare pas.
 */
.wp-block-gallery.is-style-triptychon.has-nested-images,
.wp-block-gallery.is-style-paar.has-nested-images,
.wp-block-gallery.mrl-lot-grid.has-nested-images {
	display: grid;
	gap: var( --wp--custom--gutter );
	grid-template-columns: repeat( var( --mrl-galerie-colonnes, 2 ), minmax( 0, 1fr ) );
}

.wp-block-gallery.is-style-triptychon.has-nested-images {
	--mrl-galerie-colonnes: 3;
}

.wp-block-gallery.is-style-paar.has-nested-images {
	--mrl-galerie-colonnes: 2;
}

/*
 * LE PREMIER ÉCART DE LA GRILLE « SHOP » ÉTAIT PLUS GRAND QUE LES AUTRES.
 *
 * Les six visuels du shop ne sont pas une grille mais DEUX galeries : deux
 * images dans le bloc texte-image, puis quatre dans celle-ci. Sur mobile, les
 * deux se rangent l'une sous l'autre en 2 colonnes et l'œil ne lit plus qu'une
 * seule grille de trois rangées — sauf que le premier écart valait 40 px et le
 * second 16.
 *
 * La cause est ce retrait, écrit en jeton d'espacement FIXE (40 px) là où la
 * grille, elle, respire avec la gouttière `clamp(16px, 2.778vw, 40px)`. Sur un
 * grand écran les deux valent 40 : le défaut était donc INVISIBLE en bureau, et
 * c'est exactement pour cela qu'il a tenu. Il n'apparaît qu'en dessous de
 * 1440 px, où la gouttière rétrécit et le retrait non.
 *
 * Le retrait suit désormais la gouttière : les deux galeries gardent le même
 * rythme vertical que les colonnes, à toutes les largeurs.
 */
.wp-block-gallery.mrl-lot-grid.has-nested-images {
	--mrl-galerie-colonnes: 4;
	margin-block-start: var( --wp--custom--gutter );
}

/* Le réglage du bloc l'emporte sur le repli de la classe. */
.wp-block-gallery.has-nested-images.columns-1 { --mrl-galerie-colonnes: 1; }
.wp-block-gallery.has-nested-images.columns-2 { --mrl-galerie-colonnes: 2; }
.wp-block-gallery.has-nested-images.columns-3 { --mrl-galerie-colonnes: 3; }
.wp-block-gallery.has-nested-images.columns-4 { --mrl-galerie-colonnes: 4; }
.wp-block-gallery.has-nested-images.columns-5 { --mrl-galerie-colonnes: 5; }
.wp-block-gallery.has-nested-images.columns-6 { --mrl-galerie-colonnes: 6; }
.wp-block-gallery.has-nested-images.columns-7 { --mrl-galerie-colonnes: 7; }
.wp-block-gallery.has-nested-images.columns-8 { --mrl-galerie-colonnes: 8; }

.wp-block-gallery.is-style-triptychon.has-nested-images figure.wp-block-image,
.wp-block-gallery.is-style-paar.has-nested-images figure.wp-block-image,
.wp-block-gallery.mrl-lot-grid.has-nested-images figure.wp-block-image {
	width: 100% !important;
	flex-grow: 0 !important;
	margin: 0;
}

.wp-block-gallery.is-style-triptychon.has-nested-images img,
.wp-block-gallery.is-style-paar.has-nested-images img,
.wp-block-gallery.mrl-lot-grid.has-nested-images img {
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/*
 * Le Shop de l'amour on tour est en PORTRAIT, pas en carré.
 *
 * La maquette y dessine six cadres de 270 × 351 — deux à droite du texte, quatre
 * en dessous. Le carré venait de la règle commune ci-dessus, écrite pour les
 * triptyques et les paires, et il recadrait chaque produit par le haut et le
 * bas : un sweat coupé aux épaules, un porte-clés amputé de sa sangle.
 */
.wp-block-gallery.mrl-lot-grid.has-nested-images img,
.mrl-lot-shop .wp-block-gallery.has-nested-images img {
	aspect-ratio: 270 / 351;
}

/* Sous 600 px, deux colonnes au plus, quel que soit le réglage du bloc. */
@media ( max-width: 599px ) {
	.wp-block-gallery.is-style-quartett.has-nested-images,
	.wp-block-gallery.is-style-paar.has-nested-images,
	.wp-block-gallery.is-style-triptychon.has-nested-images,
	.wp-block-gallery.mrl-lot-grid.has-nested-images {
		--mrl-galerie-colonnes: 2;
	}
}

.mrl-wb-hero img,
.mrl-lot-logo img {
	inline-size: 100%;
	block-size: auto;
	object-fit: contain;
}

.mrl-wb-row.wp-block-columns {
	gap: var( --wp--custom--gutter );
	margin-block: var( --wp--preset--spacing--50 );
}

/*
 * DEUX RANGÉES QUI SE SUIVENT FORMENT UNE GRILLE, pas deux modules.
 *
 * « Weniger Abstand — wie Spaltenabstand » (commanditaire, l'amour on tour) :
 * 85 px séparaient deux rangées d'images que 40 px seulement séparent
 * horizontalement, si bien que la grille se lisait comme deux blocs sans
 * rapport. L'écart vertical reprend la GOUTTIÈRE — le même jeton que l'écart
 * entre colonnes — et les rangées redeviennent une seule composition.
 */
.mrl-wb-row.wp-block-columns + .mrl-wb-row.wp-block-columns {
	margin-block-start: var( --wp--custom--gutter );
}

.mrl-wb-row.wp-block-columns:has( + .mrl-wb-row ) {
	margin-block-end: var( --wp--custom--gutter );
}

/*
 * DEUX RANGÉES, UNE SEULE GRILLE.
 *
 * Le bloc Shop de l'amour on tour est fait de deux morceaux : une rangée de deux
 * visuels à droite du texte, puis une grille de quatre en dessous. L'œil y lit
 * UNE grille de six — c'est ce que dessine la maquette — mais l'écart vertical
 * valait 85 px (l'écart de section porté par la rangée) contre 40 en horizontal.
 * Deux grilles superposées, pas une.
 *
 * L'écart entre les deux rangées rejoint donc la gouttière. La règle est bornée
 * au cas où une grille suit immédiatement une rangée : ailleurs, l'écart de
 * section reste ce qu'il est.
 */
.mrl-wb-row.wp-block-columns:has( + .wp-block-gallery ) {
	margin-block-end: var( --wp--custom--gutter );
}

.mrl-wb-big img {
	inline-size: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.mrl-cover-fill {
	margin: 0;
}

.mrl-cover-fill img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Écarts relevés sur la maquette : 50 px sous le titre de la galerie, 100 px
 * entre la galerie et la carte qui suit. L'écart entre blocs du thème (20 px)
 * est fait pour du texte, pas pour séparer deux ensembles de cette taille.
 */
.mrl-wb-galerie__row.wp-block-columns {
	gap: var( --wp--custom--gutter );
	align-items: stretch;
	margin-block-start: 50px;
}

.mrl-wb-galerie + * {
	margin-block-start: 100px;
}

.mrl-wb-galerie__row .wp-block-column {
	display: flex;
}

/*
 * Le volet de texte de la galerie : 29 px sur les côtés et 32 en haut, comme
 * dessiné. Il héritait des 60 px du volet de carte, ce qui gonflait toute la
 * rangée — les visuels, étirés pour s'aligner, passaient de 374 à 468 px.
 */
.mrl-wb-galerie__row .mrl-card__body {
	padding: 32px 29px;
}

.mrl-wb-galerie__row .mrl-cover-fill {
	inline-size: 100%;
	min-block-size: 374px;
}

@media ( max-width: 899px ) {
	.mrl-wb-galerie__row.wp-block-columns {
		flex-wrap: wrap;
	}

	.mrl-wb-galerie__row .wp-block-column {
		flex-basis: 100% !important;
	}
}

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

.mrl-journal .mrl-grid__caption,
.mrl-journal .wp-block-post-date {
	margin-block: var( --wp--preset--spacing--10 ) 0;
}

.mrl-journal .wp-block-post-title {
	margin-block: 6px var( --wp--preset--spacing--10 );
}

.mrl-pagination {
	margin-block-start: var( --wp--preset--spacing--50 );
	gap: var( --wp--preset--spacing--20 );
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	text-transform: uppercase;
}

.mrl-postnav {
	font-family: var( --wp--preset--font-family--van-condensed );
	text-transform: uppercase;
	border-top: 1px solid var( --wp--preset--color--light-grey );
	padding-block-start: var( --wp--preset--spacing--30 );
}

/* --------------------------------------------------------- Recherche. */

.wp-block-search__input {
	padding: 8px var( --wp--preset--spacing--10 );
	font: inherit;
	border: 1px solid var( --wp--preset--color--light-grey );
	border-radius: 0;
	background: var( --wp--preset--color--white );
}

.wp-block-search__button {
	font-family: var( --wp--preset--font-family--bourton );
	text-transform: uppercase;
	border-radius: var( --wp--custom--button--radius );
}

.mrl-lot-band.alignfull {
	margin-inline: calc( -1 * var( --wp--custom--outer-margin ) );
	margin-block: var( --wp--preset--spacing--50 );
}

/*
 * La bande pleine largeur TOUCHE la section qui la précède.
 *
 * Une bande de teinte porte déjà 85 px de retrait intérieur en bas ; la bande
 * d'image en ajoutait 85 de marge. Entre les deux apparaissait un filet du fond
 * de page — une ligne grise que rien ne justifiait, et que la maquette ne
 * dessine pas : elle fait se toucher les deux.
 */
.mrl-section + .mrl-lot-band.alignfull {
	margin-block-start: 0;
}

/*
 * LA BANDE DU SHOP N'AJOUTE PAS SA MARGE À SON PROPRE RETRAIT.
 *
 * « Gleicher Abstand » (commanditaire, l'amour on tour) : entre deux blocs de la
 * page, 85 px ; mais avant la bande du Shop, 85 px de marge PLUS les 85 px de
 * retrait de la bande, soit le double — au seul endroit où la page change de
 * fond, donc au seul endroit où l'œil le remarque. Le retrait de la bande suffit
 * à faire le silence.
 *
 * BORNÉ À CETTE BANDE, et ce n'est pas de la timidité : la même règle passée à
 * toutes les bandes ramenait l'écart « editions-card → Produktion & Qualität »
 * d'Über mich de 159 à 85, alors que la maquette y demande bien les deux — le
 * harnais l'a relevé. Un écart que le commanditaire fait corriger sur une page
 * n'est pas une loi générale tant que rien ne l'a vérifié ailleurs.
 */
.mrl-lot-shop.mrl-section.alignfull {
	margin-block-start: 0;
}

/*
 * La bande n'avait AUCUNE hauteur imposée : elle tombait sur les proportions du
 * fichier — 1440 × 997 en pleine largeur, alors que la maquette la dessine en
 * bandeau. La règle existait pourtant ici, en `block-size: clamp( 200px, 26vw,
 * 375px )`, mais elle était morte : le cœur pose `.wp-block-image.alignfull img
 * { height: auto }`, deux classes contre une, et il gagnait. Vérifier la
 * présence d'une règle ne prouve rien — il faut vérifier laquelle s'applique.
 *
 * La hauteur s'écrit donc en `aspect-ratio` : le cœur ne le déclare pas, rien ne
 * le contredit, et surtout le RÉGLAGE « Seitenverhältnis » du bloc image, qui
 * sort en style en ligne, le remplace. Le cadrage se pilote depuis l'éditeur, ce
 * que la hauteur en dur interdisait. 50/13 reprend les 26vw d'origine.
 */
.mrl-lot-band img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 50 / 13;
	object-fit: cover;
}

.mrl-lot-logo {
	max-inline-size: 375px;
	margin-inline: auto;
}

/* ----------------------------------------------- Shop — bientôt disponible. */

.mrl-shop-cta {
	position: relative;
}

.wp-block-button__link.is-soon {
	cursor: not-allowed;
	opacity: 0.75;
}

.mrl-popover {
	margin: 0;
	padding: var( --wp--preset--spacing--10 ) 14px;
	max-inline-size: 260px;
	border: 1px solid var( --wp--preset--color--mid-grey );
	border-radius: var( --wp--custom--button--radius );
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--black );
	font-size: var( --wp--preset--font-size--meta );
	/*
	 * Ancrage sous le bouton, sans JavaScript ni bibliothèque.
	 *
	 * Le NOM d'ancrage n'est plus écrit ici : il était unique pour tout le site
	 * (`--mrl-shop`), si bien que deux boutons sur une même page se seraient
	 * disputé le même point d'accrochage. Le bloc `mrl/shop-cta` en engendre un
	 * par instance et le pose en style en ligne, des deux côtés de la liaison.
	 */
	position-area: bottom center;
	position-try-fallbacks: flip-block;
}

/* Repli pour les navigateurs sans ancrage CSS : le popover reste centré. */
@supports not ( anchor-name: --x ) {
	.mrl-popover {
		inset: auto;
		margin: auto;
	}
}

/* ========================================================================
   Alignement sur les maquettes — corrections issues de la revue comparative
   (relevé Figma page MrL 2026, 2026-08-25).
   ======================================================================== */

/*
 * En-tête collant. La règle doit porter sur l'enveloppe `template-part` :
 * posée sur le groupe intérieur, le bloc conteneur ne fait que la hauteur de
 * l'en-tête et `sticky` n'a rien à parcourir.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var( --mrl-decalage-admin, 0px );
	z-index: 20;
}

/*
 * Barre d'administration.
 *
 * Connecté, WordPress pose une barre FIXE en haut de la fenêtre. Un élément
 * collant à `top: 0` se glisse dessous et disparaît au défilement — c'est ce qui
 * arrivait à l'en-tête et au fil d'ancres. Le décalage passe par une variable, si
 * bien qu'une seule déclaration suffit à corriger tous les collants du thème.
 *
 * Deux hauteurs, imposées par le cœur : 32 px au-dessus de 782 px, 46 px en
 * dessous. Sous 601 px la barre n'est plus fixe — elle défile avec la page — et
 * le décalage doit donc revenir à zéro, sans quoi il creuserait un vide.
 */
.admin-bar {
	--mrl-decalage-admin: 46px;

	/* La hauteur RÉELLE de la barre, quel que soit son positionnement. */
	--mrl-hauteur-admin: 46px;
}

@media screen and ( max-width: 600px ) {
	.admin-bar {
		--mrl-decalage-admin: 0px;
	}
}

@media screen and ( min-width: 783px ) {
	.admin-bar {
		--mrl-decalage-admin: 32px;
		--mrl-hauteur-admin: 32px;
	}
}

/* Les titres de carte restent à 35 px ; seuls les titres de section font 45. */
.mrl-card__body :is( h1, h2, h3 ) {
	font-size: var( --wp--preset--font-size--heading );
}

/*
 * Zwischentitel à 25 px : « Limitierte Editionen », le titre de l'œuvre dans le
 * pavé de détails, « Kontaktformular », « Direkter Kontakt ».
 */
.mrl-editions h2,
/*
 * « Wortbilder-Galerie » a été retiré d'ici : la maquette le donne à 45 px, et
 * cette règle le bridait à 24. Un corps de texte se règle dans l'attribut
 * `fontSize` DU BLOC, jamais en CSS — ici la CSS gagnait en silence.
 */
.mrl-work__details .wp-block-post-title,
.mrl-kontakt h2 {
	font-size: var( --wp--preset--font-size--subhead );
}

/* Manifeste de l'accueil : 30 px, graisse moyenne, pas 23 px. */
.is-style-manifest {
	font-size: var( --wp--preset--font-size--manifest );
	font-weight: 500;
}

/*
 * Bandeau bordeaux d'Über mich : 35 px en graisse moyenne, texte gris moyen,
 * seuls les mots mis en avant passent en blanc. Je l'avais rendu entièrement
 * clair et en gras.
 */
.mrl-section--maroon .is-style-manifest {
	font-size: var( --wp--preset--font-size--heading );
	font-weight: 500;
	color: var( --wp--preset--color--mid-grey );
}

.mrl-section--maroon .is-style-manifest strong {
	font-weight: inherit;
	color: var( --wp--preset--color--white );
}

/* Texte de processus des Wortbilder : 25 px medium. */
.mrl-wb-prozess .has-lead-font-size {
	font-size: var( --wp--preset--font-size--subhead );
	font-weight: 500;
}

/* Le pavé de détails de l'œuvre alterne ligne pleine et ligne vide : dans les
   maquettes chaque attribut est séparé par un interligne entier. La taille et la
   couleur, elles, sont posées sur LES BLOCS du gabarit (`meta`, `light-grey`) —
   un corps de texte ne se corrige pas ici. */
.mrl-work__field {
	margin-block: 0 1.6em;
}

.mrl-work__field:last-of-type {
	margin-block-end: 0;
}

/* ------------------------------------------- Fil d'ancres collant et actif. */

.mrl-subnav-wrap {
	position: sticky;
	/* Sous l'en-tête (45 px), lui-même sous la barre d'administration s'il y en a une. */
	top: calc( var( --wp--custom--nav-height ) + var( --mrl-decalage-admin, 0px ) );
	z-index: 15;
	background: var( --wp--preset--color--light-light-grey );
	padding-block: var( --wp--preset--spacing--10 );

	/*
	 * Le fond du bandeau traverse toute la fenêtre, le texte reste sur la
	 * colonne. Le débordement vient de la règle `.mrl-main > .alignfull` : le
	 * bandeau porte la classe `alignfull` dans `patterns/subnav-editorial.php`,
	 * seule façon d'échapper au `margin-inline: auto !important` que la mise en
	 * page « contrainte » du cœur impose à tout enfant qui ne l'a pas.
	 *
	 * Le retrait, lui, ne peut pas être la simple marge de page : ce bandeau est
	 * enfant direct de `main` et n'a pas de `> *` à plafonner. On recalcule donc
	 * le bord gauche de la colonne de contenu — (fenêtre − 1200) / 2 — sans
	 * descendre sous la marge de page quand la fenêtre est plus étroite.
	 */
	padding-inline: max(
		var( --wp--custom--outer-margin ),
		calc( 50vw - var( --wp--custom--content-width ) / 2 )
	);
}

/*
 * Fil de section posé SUR le bandeau d'image qui le suit.
 *
 * Dans les maquettes (Über mich, article du Journal), la photo démarre à ras de
 * l'en-tête et le fil se lit par-dessus. Le sortir du flux est la seule façon
 * d'obtenir cela sans connaître sa hauteur : le bandeau remonte de lui-même.
 * Le fond disparaît — c'est la photo qui sert de fond — et le collant n'a plus
 * lieu d'être ici : ce fil-là n'a pas d'ancres, il ne sert qu'au repérage.
 */
.mrl-subnav-wrap:has( + .mrl-cover ) {
	position: absolute;
	/* `top` doit être remis à zéro : la règle collante ci-dessus le fixe à la
	   hauteur de l'en-tête, ce qui décalerait le fil vers le bas du bandeau. */
	top: 0;
	inset-inline: 0;
	z-index: 5;
	margin-block: 0;
	padding-block-start: var( --wp--preset--spacing--20 );
	background: transparent;
}

/*
 * Le fil sorti du flux, c'est le bandeau qui devient le premier enfant réel de
 * `main` — et il porte encore l'écart de bloc que le cœur met entre voisins.
 * Cette marge se fusionne avec celle de `main` et rouvre la ligne vide sous
 * l'en-tête. On la retire : ce bandeau-là doit toucher l'en-tête.
 */
.mrl-subnav-wrap:has( + .mrl-cover ) + .mrl-cover {
	margin-block-start: 0;
}

.mrl-anchors a {
	color: var( --wp--preset--color--mid-grey );
}

.mrl-anchors a[aria-current="true"] {
	color: var( --wp--preset--color--black );
}

/*
 * Les ancres de page ne servent QUE sur mobile.
 *
 * Sur un grand écran, la page se parcourt d'un coup d'œil et à la molette : le
 * rappel des ancres double la navigation sans rien apporter, et il encombre la
 * ligne du fil de section. Sur un téléphone, où l'on ne voit qu'un écran à la
 * fois, il reste le seul moyen d'atteindre le bas de page sans faire défiler.
 * Demandé par le commanditaire sur l'amour on tour, valable partout : la règle
 * porte sur le bloc, pas sur une page.
 */
@media ( min-width: 900px ) {
	.mrl-anchors {
		display: none;
	}
}

/*
 * Retour au Journal, en tête et en pied d'article.
 *
 * Ni bouton ni fil : un lien discret, dans la famille du reste de la navigation.
 */
.mrl-backlink {
	font-family: var( --wp--preset--font-family--van-condensed );
	text-transform: uppercase;
	margin-block-end: var( --wp--preset--spacing--20 );
}

.mrl-backlink a {
	color: var( --wp--preset--color--mid-grey );
	text-decoration: none;
}

.mrl-backlink a:hover,
.mrl-backlink a:focus-visible {
	color: var( --wp--preset--color--black );
}

/* Sans cette marge, l'en-tête et le fil d'ancres recouvrent le titre visé. */
[id="prinzip"],
[id="motive"],
[id="prozess"],
[id="galerie"],
[id="label"],
[id="botschaften"],
[id="herstellung"],
[id="shop"],
[id="werkdetails"],
[id="kontaktformular"] {
	scroll-margin-top: calc( var( --wp--custom--nav-height ) + var( --wp--preset--spacing--40 ) );
}

html {
	scroll-behavior: smooth;
}

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

}

/* --------------------------------- Page œuvre : l'image tient dans l'écran. */

/*
 * Une photographie en portrait débordait largement la fenêtre : on ne voyait
 * ni la légende ni le fait qu'il y avait une suite. On borne donc la hauteur
 * pour que légende, sélecteur de vue et indice de défilement restent visibles.
 * `svh` plutôt que `vh` : sur mobile, la barre d'adresse fausse `vh`.
 */
/*
 * RESPIRATION DE LA SCÈNE, telle que le commanditaire l'a annotée : l'image
 * s'écarte du haut de page, le titre s'écarte de l'image, et « Details » s'écarte
 * du titre. Trois écarts, trois crans de l'échelle — rien en pixels au jugé.
 */
.mrl-work__stage {
	margin-block-start: var( --wp--preset--spacing--40 );
}

.mrl-work__image {
	margin: 0;
	text-align: center;
}

/*
 * « DETAILS » DOIT TENIR AU-DESSUS DE LA LIGNE DE FLOTTAISON (commanditaire).
 *
 * Le plafond était un nombre unique — 260 px — qui ne disait pas d'où il venait
 * et que chaque retouche d'espacement démentait un peu plus. Résultat : le lien
 * finissait EXACTEMENT au bord de la fenêtre, et il suffisait de la barre
 * d'administration pour le pousser dessous.
 *
 * Il s'écrit donc en TERMES DE CE QU'IL Y A AUTOUR : l'en-tête, la barre
 * d'administration quand elle est là, le fil de série, l'écart au-dessus de
 * l'image, puis la légende et le lien avec leurs écarts. Toute modification de
 * l'un de ces crans est désormais reprise ici toute seule.
 */
.mrl-work__image img {
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: calc(
		100svh
		- var( --wp--custom--nav-height )        /* l'en-tête */
		- var( --mrl-decalage-admin, 0px )       /* la barre d'administration */
		- var( --wp--preset--spacing--40 )       /* l'écart au-dessus de l'image */
		- var( --wp--preset--spacing--30 )       /* image → légende */
		- var( --wp--preset--spacing--20 )       /* légende → « Details » */
		- 140px                                  /* fil, légende, lien, et de l'air */
	);
	margin-inline: auto;
	object-fit: contain;
}

/*
 * La flèche de défilement a été RETIRÉE à la demande du commanditaire
 * (« virer la flèche indiquant qu'on va vers le bas »). Elle disait la même
 * chose que le lien « Details » posé juste au-dessus, en bougeant. Son balisage
 * part avec elle dans `artwork-blocks.php` : une règle sans élément est une
 * dette, pas une précaution.
 */

/* ========================================================================
   En-tête — blocs natifs.

   L'en-tête était un bloc « HTML personnalisé », ses six entrées écrites en PHP :
   rien ne s'y modifiait depuis l'administration, et l'éditeur de site n'en montrait
   qu'un pavé de code. Il est désormais fait de `core/site-logo`, `core/navigation`
   et `core/social-links` — le menu vit dans une publication `wp_navigation`, le
   logo dans la médiathèque, le lien social dans le bloc.

   Le style porte donc sur le balisage du cœur. Une SEULE navigation sert le bureau
   et le panneau mobile : c'est elle qui produit le bouton d'ouverture, il ne peut
   donc pas y en avoir deux — l'objection qui avait fait écarter `core/navigation`
   ne tenait qu'à l'emploi de deux blocs de navigation.
   ======================================================================== */

.mrl-header {
	display: flex;
	align-items: center;
	gap: 0;
	min-block-size: var( --wp--custom--nav-height );
	/*
	 * L'INTÉRIEUR DE L'EN-TÊTE S'ARRÊTE À LA LARGEUR DU CONTENU (1200).
	 *
	 * Le retrait seul ne suffisait pas : il vaut au plus 120 px, donc au-delà de
	 * 1440 l'en-tête s'étalait indéfiniment — 1680 px d'intérieur mesurés à
	 * 1920 — pendant que le contenu, lui, restait bloqué à 1200. Le logo et le
	 * lien Instagram s'éloignaient du texte de la page.
	 *
	 * `max()` prend le plus grand des deux retraits : la marge de page tant
	 * qu'elle est la contrainte, la moitié du débordement au-delà. La bande
	 * blanche et son filet, eux, restent pleine largeur — c'est l'élément qui
	 * les porte.
	 */
	padding-inline: max(
		var( --wp--custom--outer-margin ),
		calc( ( 100% - var( --wp--custom--content-width ) ) / 2 )
	);
	background: var( --wp--preset--color--white );
	border-bottom: 1px solid var( --wp--preset--color--light-grey );
}

/*
 * La marque occupe une bande calée à gauche ; le logo y est aligné au bord
 * gauche et L'ESPACE RESTANT EST L'ÉCART avec « Fotografie ». La bande vaut
 * donc, toujours, largeur du logo + 38,5 — l'écart de la maquette.
 *
 * ÉCART ASSUMÉ, demandé par le commanditaire le 2026-08-28 (#600) : le logo
 * passe de 11,18 à 16 de haut. La maquette, elle, n'a pas changé.
 *
 * Trois valeurs commandent cette taille et il faut les trois — l'attribut
 * `width` du bloc dans `parts/header.html` ne suffit pas, c'est la règle
 * ci-dessous qui l'emporte à l'écran :
 *   1. `parts/header.html`  → wp:site-logo {"width":88}
 *   2. la taille de l'image → 88 × 16
 *   3. la bande             → 88 + 38,5 = 126,5
 *
 * Le SVG porte `preserveAspectRatio="none"` : le rapport est tenu à la main,
 * 61,4983 / 11,1822 = 5,5. Une hauteur h donne donc une largeur h × 5,5.
 *
 * Le bandeau ne grandit pas pour autant : sa hauteur est fixée par
 * `min-block-size: var( --wp--custom--nav-height )`, soit 45, et 16 reste très
 * en deçà. La rangée du menu ne se décale pas verticalement ; seul le groupe de
 * gauche glisse vers la droite de la largeur gagnée, dans un vide de plus de
 * 500 px. Mesuré en 1440 et en 390.
 */
.mrl-header .mrl-header__logo {
	flex: 0 0 126.5px;
	margin: 0;
	line-height: 0;
}

.mrl-header .mrl-header__logo img {
	display: block;
	inline-size: 88px;
	block-size: 16px;
}

/* ------------------------------------------------------------ Navigation. */

.mrl-header .mrl-nav {
	flex: 1 1 auto;
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	line-height: 1;
	text-transform: uppercase;
}

.mrl-header .wp-block-navigation__container {
	gap: var( --wp--preset--spacing--20 );
	align-items: center;
}

.mrl-header .wp-block-navigation-item a {
	color: var( --wp--preset--color--mid-grey );
	text-decoration: none;
}

.mrl-header .wp-block-navigation-item a:hover,
.mrl-header .wp-block-navigation-item.current-menu-item a,
.mrl-header .wp-block-navigation-item a[aria-current="page"] {
	color: var( --wp--preset--color--black );
}

/*
 * Coupure entre les sections et les entrées de service.
 *
 * Elle tient à une CLASSE posée sur l'entrée qui ouvre le second groupe, jamais à
 * un `:nth-child` : le propriétaire du site peut réordonner, ajouter ou retirer des
 * entrées sans que la barre se disloque.
 *
 * LE SÉLECTEUR EST LONG À DESSEIN. L'éditeur de blocs pose sur chaque entrée une
 * classe `wp-block` et une règle à lui :
 *
 *     .editor-styles-wrapper .wp-block-navigation .wp-block-navigation-item.wp-block
 *         { margin: revert; }
 *
 * — quatre classes, contre trois pour la version courte de cette règle. La coupure
 * était donc annulée DANS L'ÉDITEUR SEULEMENT : les six entrées s'y alignaient à
 * gauche, et l'éditeur montrait un en-tête que le site n'a jamais eu. Ajouter
 * `.mrl-nav.wp-block-navigation` porte la nôtre à cinq classes ; elle l'emporte
 * quel que soit l'ordre des feuilles. Sur le site, rien ne change : la navigation
 * y porte déjà les deux classes.
 */
.mrl-header .mrl-nav.wp-block-navigation .wp-block-navigation-item.mrl-nav-service {
	margin-inline-start: auto;
}

/* --------------------------------------------------------- Lien social. */

/*
 * L'ICÔNE VIENT DU THÈME, PLUS DU CŒUR — ET CE N'EST PAS UN DÉTAIL DE STYLE.
 *
 * L'en-tête utilisait `core/social-links`. Ce bloc est INVISIBLE pour une part
 * des visiteurs : la classe que WordPress engendre, `wp-block-social-links`,
 * figure comme filtre cosmétique GÉNÉRIQUE dans Fanboy Social et Fanboy
 * Annoyance — `##.wp-block-social-links`, sans domaine devant, donc partout.
 * Les extensions qui chargent ces listes posent `display: none !important` en
 * origine `user` : aucune règle d'ici ne peut le battre. Détail complet et
 * références dans `mu-plugins/mrl-core/instagram-block.php`.
 *
 * Le pictogramme est donc posé en MASQUE depuis `assets/svg/instagram.svg`,
 * l'export Figma dont le `viewBox` de 14 épouse le tracé. C'est le motif déjà
 * employé pour les pictogrammes de Kontakt : le fichier porte un gris en dur,
 * le masque le fait peindre par la couleur du contexte.
 *
 * Deux dettes disparaissent au passage :
 *   · plus de `transform` pour rattraper l'icône du cœur, qui laissait 3 unités
 *     de vide sur 24 de chaque côté et ne remplissait sa boîte qu'à 75 % ;
 *   · plus de dépendance à la feuille de `core/social-links` ni à son style
 *     `is-style-logos-only`.
 */
.mrl-header .mrl-header__dienste {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-inline-start: var( --wp--preset--spacing--20 );
}

/* Le filet vertical qui précède l'icône dans la maquette. */
.mrl-header .mrl-header__dienste::before {
	content: "";
	display: block;
	inline-size: 1px;
	block-size: 9px;
	margin-inline-end: var( --wp--preset--spacing--20 );
	background: var( --wp--preset--color--light-grey );
}

/*
 * 14 × 14, et cette fois c'est bien l'ENCRE qui mesure 14 : le tracé remplit
 * son `viewBox`, il n'y a plus d'écart entre la boîte et la marque.
 */
.mrl-header .mrl-header__instagram {
	display: block;
	inline-size: 14px;
	block-size: 14px;
	background-color: var( --wp--preset--color--mid-grey );
	mask: url( "../svg/instagram.svg" ) center / contain no-repeat;
	-webkit-mask: url( "../svg/instagram.svg" ) center / contain no-repeat;
}

/* --------------------------------------------- Bouton et panneau mobiles. */

.mrl-header .wp-block-navigation__responsive-container-open,
.mrl-header .wp-block-navigation__responsive-container-close {
	color: var( --wp--preset--color--black );
}

.mrl-header .wp-block-navigation__responsive-container-open {
	margin-inline-start: auto;
}

/* Panneau plein écran : la hiérarchie de la barre de bureau n'y a pas de sens,
   les entrées y sont toutes au même rang et bien plus grandes. */
.mrl-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var( --wp--preset--spacing--40 ) var( --wp--custom--outer-margin );
	background: var( --wp--preset--color--white );
	color: var( --wp--preset--color--black );
}

.mrl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var( --wp--preset--spacing--30 );
	align-items: flex-start;
}

/* Le panneau mobile empile : plus de coupure. Le sélecteur doit rester plus
   spécifique que celui du bureau, qui vient de passer à cinq classes. */
.mrl-header .mrl-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.mrl-nav-service {
	margin-inline-start: 0;
}

.mrl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	font-size: var( --wp--preset--font-size--heading );
	color: var( --wp--preset--color--black );
}


/* ------------------------------------------------- Blocs de premier niveau. */

/*
 * La gouttière globale de `theme.json` sert aux blocs de contenu, mais le layout
 * racine l'applique aussi entre l'en-tête, le `main` et le pied de page — d'où une
 * bande vide de 40 px sous la barre de navigation, sur toutes les pages.
 * Ces trois blocs s'enchaînent sans respiration dans les maquettes.
 */
.wp-site-blocks > header.wp-block-template-part + *,
.wp-site-blocks > * + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ==================================================================
   Correctifs issus de la revue géométrique exhaustive (2026-08-25).
   ================================================================== */

/*
 * Sections pleine largeur : le FOND va d'un bord à l'autre de la fenêtre, le
 * texte reste sur la colonne de contenu.
 *
 * `calc( 50% - 50vw )` est la seule formule qui vaille aux deux profondeurs où
 * ces sections apparaissent, sans y écrire la moindre valeur en dur : le
 * pourcentage se résout sur le bloc conteneur de CHAQUE section, la moitié de
 * la fenêtre est la même pour tous, et la différence est très exactement le
 * débordement nécessaire pour atteindre le bord.
 *   • enfant direct de `main`  → conteneur 1460 : 730 − 850 = −120
 *   • enfant de `entry-content` → conteneur 1200 : 600 − 850 = −250
 * Le retrait précédent, `−1 × outer-margin`, ne défaisait que la marge de page
 * et laissait la section plafonnée à 1440 : au-delà, le bandeau s'arrêtait en
 * pleine fenêtre. C'est le `w-screen` demandé sur le bandeau bordeaux.
 *
 * Le contenu, lui, ne bouge pas : `.mrl-section.alignfull` garde son retrait de
 * marge de page et `.mrl-section.alignfull > *` reste plafonné à 1200, centré.
 */
.mrl-main > .alignfull,
.mrl-main > .wp-block-post-content > .alignfull {
	margin-inline: calc( 50% - 50vw );
	max-inline-size: none;
	inline-size: auto;
}

/*
 * Rangées de séries du hub Fotografie.
 * Maquette : visuel 373 à x=327, texte 373 à x=740 — soit un bloc de 786 centré
 * dans les 1200, et non deux colonnes qui occupent toute la largeur.
 */
@media ( min-width: 900px ) {
	.mrl-series__row {
		grid-template-columns: 373px 373px;
		gap: var( --wp--preset--spacing--30 );
		justify-content: center;
	}
}

.mrl-series__text {
	max-inline-size: none;
}

/* Sous-titre de série : 580 px centrés, pas toute la largeur. */
.mrl-serie__intro .wp-block-term-description {
	max-inline-size: var( --wp--custom--half-column );
	margin-inline: auto;
}

/* Colonne centrale de 374 px, et débordement sur les 1200 : deux gabarits
   ponctuels de la page l'amour on tour. */
.mrl-col-center {
	max-inline-size: var( --wp--custom--column );
	margin-inline: auto;
}

.mrl-full-width {
	max-inline-size: var( --wp--custom--content-width ) !important;
	inline-size: 100%;
}

/* ==================================================================
   Géométrie de l'accueil — valeurs relevées nœud par nœud dans Figma.
   Ces règles ferment la feuille : le CSS des blocs natifs (gouttière de
   `core/columns`, retrait par défaut des colonnes) l'emportait sur les
   déclarations placées plus haut.
   ================================================================== */

/* Héros : le bloc de titre occupe la moitié droite — x = 740 sur 1440. */
.mrl-hero .mrl-hero__body {
	inline-size: var( --wp--custom--half-column );
	max-inline-size: 100%;
	margin-inline: auto 0;
}

/* Manifeste : 797 px centrés, pas toute la largeur de contenu. */
.mrl-section .is-style-manifest {
	max-inline-size: 797px;
	margin-inline: auto;
}

/* Teasers : deux colonnes de 580 px, gouttière de 40. */
.mrl-section .mrl-teaser.wp-block-columns {
	gap: var( --wp--preset--spacing--30 );
}

.mrl-section .mrl-teaser.wp-block-columns > .wp-block-column {
	flex-basis: var( --wp--custom--half-column );
	flex-grow: 0;
}

/* Cartes : 1200 de large, volet de texte de 413, retrait intérieur de 40. */
.mrl-section .mrl-card.wp-block-columns {
	gap: 0;
}

.mrl-section .mrl-card.wp-block-columns > .wp-block-column {
	flex-basis: var( --wp--custom--narrow );
	flex-grow: 0;
}

.mrl-section .mrl-card.wp-block-columns > .mrl-card__body {
	flex-basis: 413px;
	padding: var( --wp--preset--spacing--30 );
}

/* L'encart Shop serre un peu plus : 35 px dans la maquette. */
.mrl-section .mrl-card--shop.wp-block-columns > .mrl-card__body {
	padding-inline: 35px;
}

/* Bandeau bordeaux d'Über mich : texte sur 786 px centrés. */
.mrl-section--maroon .is-style-manifest {
	max-inline-size: var( --wp--custom--narrow );
}

/* Rangées de séries : gouttière de 40 px entre visuel et texte. */
@media ( min-width: 900px ) {
	.mrl-series .mrl-series__row {
		gap: var( --wp--preset--spacing--30 );
	}
}

@media ( max-width: 899px ) {
	.mrl-section .mrl-teaser.wp-block-columns > .wp-block-column,
	.mrl-section .mrl-card.wp-block-columns > .wp-block-column,
	.mrl-section .mrl-card.wp-block-columns > .mrl-card__body {
		flex-basis: 100%;
	}

	/*
	 * LE VISUEL D'UNE CARTE NE SE FAIT PLUS ROGNER SUR MOBILE.
	 *
	 * Au-dessus de 900, une carte mesure 1200 × 500 : les deux volets sont
	 * côte à côte et doivent finir à la même hauteur, donc le visuel remplit sa
	 * colonne et `object-fit: cover` rogne ce qui dépasse. C'est juste, et la
	 * maquette le demande.
	 *
	 * En dessous, les volets s'empilent et le visuel prend toute la largeur : il
	 * n'y a plus aucune hauteur à égaliser. Or `min-block-size: 400px` restait,
	 * et la photo du Shop — 4:3 dans la médiathèque — était écrasée dans une
	 * boîte de 325 × 400. Le rognage ne coupait pas du décor : il coupait les
	 * deux badges eux-mêmes, sur la gauche et sur la droite.
	 *
	 * ── POURQUOI `block-size: auto` SUFFIT ICI, ALORS QU'AILLEURS NON ────────
	 *
	 * Depuis WordPress 6.7, une image différée sort avec `sizes="auto"`, et la
	 * spécification fait alors appliquer `contain: size` par le NAVIGATEUR : la
	 * taille intrinsèque du fichier est effacée, et une image en hauteur `auto`
	 * retombe sur un 3000 × 1500 inventé. C'est ce qui avait troué la galerie
	 * des Wortbilder.
	 *
	 * Ce qui sauve ce cas précis, c'est que le cœur écrit `width="1024"` et
	 * `height="768"` sur la balise : le rapport de repli vient des ATTRIBUTS et
	 * non du fichier, il survit donc à `contain: size`. Mesuré, pas déduit —
	 * `aspect-ratio` calculé rend bien `auto 1024 / 768`.
	 *
	 * Autrement dit : cette règle ne se recopie PAS telle quelle sur une image
	 * qui n'aurait pas ses attributs de dimension.
	 */
	.mrl-card__media {
		min-block-size: 0;
	}

	.mrl-card__media img {
		block-size: auto;
	}

	.mrl-hero .mrl-hero__body {
		inline-size: 100%;
		margin-inline: 0;
	}
}

/*
 * Largeurs de carte : un DÉFAUT de gabarit, pas une contrainte.
 *
 * Ces deux règles portaient un `!important` justifié par « le style en ligne des
 * colonnes l'emporte ». C'était vrai, mais la conséquence l'était aussi : la
 * poignée de redimensionnement et le champ « Largeur » de l'inspecteur ne
 * faisaient plus rien. Le contenu porte déjà les proportions de la maquette ; la
 * feuille se contente de les rappeler quand il n'en donne pas, et cède dès que
 * quelqu'un règle une largeur.
 */
.mrl-section .mrl-card.wp-block-columns > .wp-block-column {
	flex-basis: var( --wp--custom--narrow );
	flex-grow: 0;
}

.mrl-section .mrl-card.wp-block-columns > .mrl-card__body {
	flex-basis: var( --wp--custom--card-body );
}

/* Les deux teasers ne se replient pas au même endroit dans la maquette :
   479 px pour Fotografie (trois lignes), 574 px pour Wortbilder (deux). */
.mrl-section--dark .mrl-teaser h2 {
	max-inline-size: 479px;
}

@media ( max-width: 899px ) {
	/* Plafond responsive assumé : sous 900 px les colonnes s'empilent, quelle que
	   soit la largeur choisie dans le bloc. Au-dessus, elle reste maîtresse. */
	.mrl-section .mrl-card.wp-block-columns > .wp-block-column,
	.mrl-section .mrl-card.wp-block-columns > .mrl-card__body {
		flex-basis: 100% !important;
	}

	.mrl-section--dark .mrl-teaser h2 {
		max-inline-size: none;
	}
}

/*
 * Les colonnes sont en `content-box` : le retrait intérieur s'ajoutait à la
 * largeur déclarée, la somme dépassait la carte, et le flex rétrécissait les
 * deux volets — d'où un texte 52 px trop à gauche. En `border-box`, la largeur
 * déclarée est celle qu'on lit dans la maquette.
 */
.mrl-section .mrl-card.wp-block-columns > .wp-block-column {
	box-sizing: border-box;
	flex-shrink: 0;
}

/* Héros : titre replié à 534 px, bouton aligné à gauche du bloc. */
.mrl-hero__body h1 {
	max-inline-size: 534px;
}

.mrl-hero__body .wp-block-buttons {
	justify-content: flex-start;
}

/* Retrait des volets de texte : la maquette est asymétrique — 40 à gauche,
   28 à droite pour la carte l'amour ; 35 / 14 pour l'encart Shop. */
.mrl-section .mrl-card.wp-block-columns > .mrl-card__body {
	padding: var( --wp--preset--spacing--30 ) 28px var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--30 );
}

.mrl-section .mrl-card--shop.wp-block-columns > .mrl-card__body {
	padding-inline: 35px 14px;
}

@media ( max-width: 899px ) {
	/*
	 * Retrait des volets de texte sur écran étroit.
	 *
	 * Le retrait de la maquette — 60 px, parfois asymétrique — est dessiné pour
	 * une carte de 413 px posée à côté d'une image. Empilée sur un écran de
	 * 390 px, la même carte n'a plus que 326 px de large une fois la marge de
	 * page retirée : 60 px de chaque côté ne laissent que 206 px au texte, qui
	 * tombe à trois ou quatre mots par ligne. L'asymétrie, elle, n'a plus aucun
	 * sens sans image en vis-à-vis.
	 *
	 * Les trois sélecteurs sont repris tels quels pour égaler la spécificité
	 * des règles de bureau ci-dessus ; c'est la position dans le fichier qui
	 * tranche. Le Figma ne fournit que des vues 1440 : cette valeur est déduite,
	 * comme tous les paliers responsives de ce fichier.
	 */
	.mrl-card__body,
	.mrl-duo.mrl-card > .wp-block-column:first-child,
	.mrl-section .mrl-card.wp-block-columns > .mrl-card__body,
	.mrl-section .mrl-card--shop.wp-block-columns > .mrl-card__body {
		padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--20 );
	}
}

/*
 * Héros : la section est en flex et sans retrait, ce qui centrait le bloc de
 * titre par marges automatiques. On rétablit le retrait de page et on aligne à
 * droite — le bloc tombe alors à x = 740, comme dans la maquette.
 */
/*
 * Le `!important` posé ici documentait un raisonnement faux : le sélecteur vaut
 * 0,3,0 contre 0,1,0 pour `.has-global-padding` — la spécificité suffit, et
 * l'ordre d'impression ne joue que devant des sélecteurs de force égale. Il
 * privait au passage le héros de ses réglages « Innenabstand » et « Außenabstand ».
 */
.mrl-section.mrl-hero.alignfull {
	justify-content: flex-end;
	padding-inline: var( --wp--custom--outer-margin );
}

/*
 * `!important` INDISPENSABLE, et pour une raison précise : la mise en page
 * « contrainte » du cœur pose `margin-left: auto; margin-right: auto !important`
 * sur chacun de ses enfants. Ce n'est pas une affaire de spécificité — aucun
 * sélecteur, si lourd soit-il, ne bat un `!important`. Sans lui le bloc du héros
 * se recentre et son texte tombe à x = 453 au lieu de 740.
 * Vérifié : le retirer fait échouer deux mesures de `geometry.mjs`.
 */
.mrl-section.mrl-hero.alignfull > .mrl-hero__body {
	margin-inline: 0 !important;
}

@media ( max-width: 899px ) {
	.mrl-hero.mrl-section {
		justify-content: flex-start;
	}
}

/* Le titre du héros est plafonné à 534 px ; la mise en page contrainte le
   centrait dans son bloc de 580. Il doit rester calé à gauche, et là encore
   c'est le `margin: auto !important` du cœur qu'il faut battre. */
.mrl-hero__body h1 {
	margin-inline: 0 !important;
}

/* ==================================================================
   Rythme vertical — relevé écart par écart dans la maquette.
   ================================================================== */

/*
 * La gouttière globale vaut 20 px : c'est l'écart entre un sur-titre et son
 * titre, et entre un titre et son texte. Les boutons, eux, sont toujours
 * détachés de 40 px du bloc qui les précède.
 */
.wp-block-buttons,
.mrl-series__cta {
	margin-block-start: var( --wp--preset--spacing--30 );
}

/*
 * Une page peut ne PAS vouloir de titre affiché — Kontakt, où le commanditaire a
 * fait retirer l'accroche. Le bloc de titre rend alors un `<h1>` vide, qui garde
 * sa hauteur de ligne et sa marge : une ligne blanche que rien n'explique. On le
 * retire quand il n'a rien à dire, plutôt que d'ajouter un gabarit par page.
 */
.wp-block-post-title:empty {
	display: none;
}

/* Les colonnes gardent la gouttière de grille, pas le rythme de texte. */
.wp-block-columns {
	gap: var( --wp--custom--gutter );
}

/* Page Kontakt : les titres intermédiaires respirent davantage que le rythme
   courant — 71 px avant, 37 px après dans la maquette. */
.mrl-kontakt h2 {
	margin-block: var( --wp--preset--spacing--50 ) var( --wp--preset--spacing--30 );
}

/*
 * 36 px entre le titre et le chapô dans la maquette. L'enveloppe du contenu
 * en apporte déjà 20 (l'écart entre blocs) : il en reste 16 à poser ici. Le
 * cran 3 de l'échelle (40 px) donnait 60 px au total.
 */
.mrl-kontakt > .wp-block-post-title + p,
.mrl-kontakt > p:first-of-type {
	margin-block-start: 16px;
}

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

/*
 * Bourton Hand déclare des métriques incohérentes — hauteur de capitale 900
 * pour une ascendante de 730 — donc son encre déborde le cadre annoncé et le
 * centrage par boîte de ligne place le texte trop haut.
 *
 * La correction n'est pas un nombre au jugé : elle est mesurée. À 20 px, l'encre
 * va de −13,86 px à +0,5 px autour de la ligne de base ; son centre tombe donc
 * 2,08 px au-dessus du centre du bouton. Comme un retrait haut réduit la boîte
 * de contenu et que le centrage flex recentre ensuite, il faut appliquer le
 * double : 4,16 px, soit 0,208 em.
 */
:root {
	--mrl-button-optical: 0.208em;
}

.wp-element-button,
.wp-block-button__link,
.mrl-series__cta a,
.wp-block-search__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-block-size: var( --wp--custom--button--height );
	padding-block: var( --mrl-button-optical ) 0;
	line-height: 1;
}

/* ---------------------------------------------------- Contact direct. */

/*
 * Contact direct.
 *
 * Les deux lignes se suivent de près dans la maquette — 16 px entre elles,
 * 30 px sous le titre — et non à l'écart d'un paragraphe. Elles sont à la
 * mesure « Titel / Link » (17 px), pas à celle du corps de texte.
 */
.mrl-kontakt__direct {
	margin-block: 30px 0;
	padding: 0;
	list-style: none;
	display: grid;
	/*
	 * 16 px entre les lignes, 30 px sous le titre : ces deux mesures viennent
	 * de la maquette et ne figurent PAS dans l'échelle d'espacement du thème,
	 * qui va de 10 à 20 puis 40. Les arrondir au cran le plus proche donnerait
	 * 43 px de pas au lieu de 39 — précisément ce qu'on corrige ici.
	 */
	gap: 16px;
	font-size: var( --wp--preset--font-size--titel );
	line-height: calc( 23 / 17 );
}

/*
 * L'élément de liste épouse la hauteur du lien.
 *
 * En `list-item`, il ajoute l'espace de descente sous le lien en ligne : 28 px
 * au lieu des 23 de la maquette, et le pas passait à 44.
 */
.mrl-kontakt__direct li {
	margin: 0;
	display: flex;
}

/*
 * Le titre qui introduit la liste s'en approche.
 *
 * Les marges verticales SE FUSIONNENT : la marge basse du titre (40 px) et la
 * marge haute de la liste (30) ne s'additionnent pas, c'est la plus grande qui
 * gagne. Régler la liste ne suffisait donc pas. On neutralise la marge du
 * titre — et uniquement de celui-là, grâce à `:has()`.
 */
.mrl-kontakt :is( h2, h3 ):has( + .mrl-kontakt__direct ) {
	margin-block-end: 0;
}

.mrl-kontakt__link,
.mrl-kontakt__direct a {
	display: inline-flex;
	align-items: center;
	gap: var( --wp--preset--spacing--10 );
}

/*
 * Les pictogrammes viennent de la feuille, plus du balisage.
 *
 * Ils étaient posés par un motif PHP en `wp:html` — supprimé depuis, sans que
 * la page cesse de l'appeler : la liste « Direkter Kontakt » était vide en
 * ligne. La liste est redevenue des blocs ordinaires, modifiables ; le
 * pictogramme se déduit de la destination du lien, donc rien à saisir et rien
 * à oublier.
 */
/*
 * Le pictogramme est posé en MASQUE, pas en image de fond.
 *
 * `instagram.svg` porte un `fill` gris en dur — celui de la barre de service.
 * En image de fond, il arrivait gris ici alors que la maquette le veut noir.
 * En masque, c'est la couleur du texte qui le peint : le même fichier sert aux
 * deux endroits et suit son contexte.
 */
.mrl-kontakt__direct a::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 20px;
	background-color: currentColor;
	mask: center / contain no-repeat;
	-webkit-mask: center / contain no-repeat;
}

.mrl-kontakt__direct a[href*="instagram"]::before {
	mask-image: url( "../svg/instagram.svg" );
	-webkit-mask-image: url( "../svg/instagram.svg" );
}

.mrl-kontakt__direct a[href^="mailto"]::before {
	mask-image: url( "../svg/mail.svg" );
	-webkit-mask-image: url( "../svg/mail.svg" );
}

.mrl-kontakt__icon {
	inline-size: 20px;
	block-size: 20px;
	flex: 0 0 20px;
}

/* ------------------------------------------------- Conteneurs vides, éditeur. */

/*
 * `layout.css` est servi au canevas de l'éditeur, ce qui est ici un avantage :
 * un conteneur encore vide n'a aucune hauteur et devient impossible à viser.
 * Les sélecteurs portent une classe que SEUL l'éditeur pose
 * (`block-editor-block-list__block`) : rien de tout cela n'atteint le site.
 */
.block-editor-block-list__block.wp-block-column:not( :has( > * ) ),
.block-editor-block-list__block.mrl-section:not( :has( > * ) ),
.block-editor-block-list__block.mrl-prose:not( :has( > * ) ) {
	min-block-size: var( --wp--preset--spacing--50 );
}

/* ------------------------------------------------ Composés allemands. */

/*
 * UN TITRE NE COUPE JAMAIS UN MOT. Demande du commanditaire, 2026-08-28 (#601).
 *
 * `hyphens: auto` était posé ici pour les composés allemands des pages légales
 * — « Verbraucherstreitbeilegung », « Universalschlichtungsstelle » — mais la
 * règle portait sur TOUS les titres du site, et le dictionnaire césurait ce
 * qu'il n'avait aucune raison de césurer : « län-ger », « Begeg-nungen »,
 * « Verschie-ben », « Aufla-gen ». 31 mots coupés relevés sur 14 routes en 1440
 * et 390 — et parfois coupés FAUX, « Materi-altests » au lieu de
 * « Material-tests ».
 *
 * `hyphens: manual` plutôt qu'une simple suppression : c'est dire que la césure
 * reste possible, mais seulement là où quelqu'un l'a demandée par un `&shy;`
 * dans le texte. La décision revient à l'auteur, jamais au navigateur.
 *
 * `overflow-wrap: break-word` RESTE, et ce n'est pas une contradiction : il ne
 * coupe pas un mot qui tient, il ne casse que celui qui, seul, dépasse déjà sa
 * colonne — sans tiret, et en dernier recours. C'est le filet qui empêche un
 * composé de 54 signes de sortir de la page en 390. Mesuré : aucun titre du
 * site ne déborde, avant comme après.
 */
:is( h1, h2, h3, h4 ) {
	hyphens: manual;
	overflow-wrap: break-word;
}

/*
 * LES URL NUES DES PAGES LÉGALES NE DÉBORDENT PLUS LA COLONNE (#613).
 *
 * Le texte de Datenschutz cite ses adresses en toutes lettres — jusqu'à
 * `https://www.facebook.com/legal/terms/page_controller_addendum`, 540 px de
 * large. Une URL n'a ni espace ni tiret : c'est un seul mot, insécable. En 390,
 * la colonne de contenu mesurait 325 pour un contenu de 540.
 *
 * LE HARNAIS NE LE VOYAIT PAS : `audit.mjs` contrôle le débordement du
 * DOCUMENT, et il n'y en avait pas — c'est la colonne qui débordait, en
 * silence, sous un conteneur qui la contenait. Un débordement peut donc se
 * cacher à l'intérieur de la page.
 *
 * `anywhere` et non `break-word` : les deux coupent le mot trop long, mais
 * `anywhere` le fait AUSSI compter dans la largeur minimale du conteneur, ce
 * qui empêche une colonne souple de se dimensionner sur une URL de 540 px.
 *
 * Borné aux liens de PROSE — paragraphes et listes. Surtout pas aux titres :
 * #601 vient d'y interdire la coupure des mots, et un titre n'a jamais d'URL.
 */
.wp-site-blocks :is( p, li ) a {
	overflow-wrap: anywhere;
}

/* ------------------------------------- Aperçus dans l'éditeur de site. */

/*
 * `mrl/cover` et `mrl/bereichs-fil` lisent la publication courante. Dans
 * l'éditeur de SITE, il n'y en a pas : ils rendaient vide, et l'éditeur affichait
 * « Block rendered as empty » — un pavé mort là où le site pose un bandeau et un
 * fil de section.
 *
 * Le PHP rend désormais le bloc POUR UNE PAGE RÉELLE et marque l'enveloppe d'un
 * `data-mrl-apercu` portant le nom de cette page. Le liseré et l'étiquette
 * ci-dessous disent que c'est un exemple, pas le contenu du gabarit.
 *
 * Ces règles ne peuvent PAS atteindre le site : l'attribut n'y est jamais posé.
 */
[data-mrl-apercu] {
	position: relative;
	outline: 1px dashed var( --wp--preset--color--mid-grey );
	outline-offset: 2px;
}

[data-mrl-apercu]::after {
	content: attr( data-mrl-apercu );
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 1;
	padding: 2px 8px;
	background: var( --wp--preset--color--mid-grey );
	color: var( --wp--preset--color--white );
	font-family: var( --wp--preset--font-family--core-sans );
	font-size: var( --wp--preset--font-size--navi-h );
	line-height: 1.4;
	/* L'étiquette ne doit pas intercepter le clic qui sélectionne le bloc. */
	pointer-events: none;
}

/* Recours quand aucune page ne peut servir d'exemple : un cadre qui parle. */
.mrl-apercu-vide {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--10 );
	padding: var( --wp--preset--spacing--40 );
	background: var( --wp--preset--color--light-light-grey );
	color: var( --wp--preset--color--mid-grey );
	text-align: center;
}

.mrl-apercu-vide strong {
	font-size: var( --wp--preset--font-size--titel );
	color: var( --wp--preset--color--black );
}

.mrl-apercu-vide span {
	font-size: var( --wp--preset--font-size--meta );
}

/* ------------------------------------------------- Page de galerie. */

/*
 * Même respiration que « Begegnungen » : le chapô appartient au TITRE, pas à la
 * grille. Là-bas, titre et description tiennent dans un même groupe, puis 85 px
 * les séparent des vignettes. Ici la description vit dans le contenu de la page
 * — c'est un texte que l'auteur écrit — donc l'écart se pose en aval : le titre
 * garde son chapô à portée (l'écart entre blocs du thème), et c'est la GRILLE
 * qui prend ses distances.
 */
.mrl-galerie .mrl-raster {
	margin-block-start: var( --wp--preset--spacing--50 );
}

/* ---------------------------------------------- Grille d'œuvres (bloc). */

/*
 * `mrl/werk-raster` reprend le balisage de `core/post-template` en disposition
 * grille — c'est la règle du projet : emprunter les classes du cœur plutôt que
 * d'en inventer, pour que le rendu soit celui de « Begegnungen » au pixel.
 *
 * Le cœur pose le nombre de colonnes en style en ligne, propre à CHAQUE bloc de
 * requête. Ici il n'y a pas de bloc de requête : le bloc pose sa propre variable
 * et la feuille la lit. Les paliers 900 et 600 restent ceux de `.mrl-grid`.
 */
.mrl-raster.is-layout-grid {
	grid-template-columns: repeat( var( --mrl-raster-colonnes, 3 ), minmax( 0, 1fr ) );
}

.mrl-raster__leer {
	margin-block: var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--mid-grey );
	text-align: center;
}

/*
 * MAÇONNERIE — chaque œuvre garde sa hauteur.
 *
 * En colonnes CSS et non en grille : une grille impose des rangées, et c'est
 * exactement ce dont le commanditaire ne veut pas pour les Wortbilder, qui n'ont
 * pas tous le même format. `break-inside: avoid` empêche qu'une vignette soit
 * coupée en deux d'une colonne à l'autre.
 *
 * L'ordre de lecture descend chaque colonne avant de passer à la suivante.
 * C'est la nature du procédé, et c'est sans conséquence ici : une collection
 * libre n'a pas d'ordre à respecter — le commanditaire parle d'ailleurs de
 * « freie Sammlung ».
 */
.mrl-raster--mauerwerk {
	display: block;
	columns: var( --mrl-raster-colonnes, 3 );
	column-gap: var( --wp--custom--gutter );
}

.mrl-raster--mauerwerk > li {
	break-inside: avoid;
	margin-block-end: var( --wp--preset--spacing--40 );
}

/*
 * EN MAÇONNERIE, CHAQUE ŒUVRE GARDE SON FORMAT — mais surtout pas en `auto`.
 *
 * PIÈGE MAJEUR, ET IL VAUT POUR TOUT LE SITE. Depuis WordPress 6.7, une image
 * différée sort avec `sizes="auto, …"`, et le navigateur applique alors la règle
 * que la spécification HTML lui prescrit :
 *
 *     img[sizes^="auto" i] { contain: size; contain-intrinsic-size: 3000px 1500px }
 *
 * `contain: size` EFFACE la taille intrinsèque de l'image. En `aspect-ratio:
 * auto` avec `height: auto`, le navigateur ne retombe donc pas sur les 900 × 900
 * du fichier : il retombe sur le 3000 × 1500 inventé par la règle, et rend une
 * vignette carrée dans une boîte de 1500 px de haut. C'est ce que le
 * commanditaire a vu — des colonnes trouées de vides immenses. Aucune règle du
 * thème ne parlait de hauteur : elle venait de la feuille du NAVIGATEUR.
 *
 * D'où la leçon : sur ce site, une image sans `aspect-ratio` déclaré n'a pas de
 * hauteur fiable. Le rapport réel est lu dans la médiathèque et posé sur
 * l'élément par `artwork-grid.php` ; `1` n'est qu'un filet si la mesure manque.
 */
.mrl-raster--mauerwerk .wp-block-post-featured-image img {
	aspect-ratio: var( --mrl-ratio, 1 );
}

@media ( max-width: 899px ) {
	.mrl-raster--mauerwerk {
		columns: 2;
	}
}

@media ( max-width: 599px ) {
	.mrl-raster--mauerwerk {
		columns: 1;
	}
}

/*
 * LES ŒUVRES NE SONT PLUS RECADRÉES (demande du commanditaire).
 *
 * « Die Werkbilder dürfen nicht automatisch gecroppt werden. Jedes Werk wird im
 * Originalformat proportional in eine definierte Bildfläche eingepasst und dort
 * zentriert. » L'aire reste donc carrée — c'est elle qui tient la grille — mais
 * le cadrage passe de `cover` à `contain` : le motif entre en entier, centré, et
 * plus rien n'est coupé. Vaut pour la galerie d'une série comme pour la grille
 * du bloc ; le Journal, lui, garde ses vignettes cadrées — ce sont des photos
 * d'illustration, pas des œuvres.
 *
 * ATTENTION — CETTE RÈGLE NE SUFFIT PAS PARTOUT, et c'est instructif. Sur
 * l'archive d'une série, la vignette vient de `core/post-featured-image`, qui
 * écrit `object-fit` en STYLE EN LIGNE dès qu'il porte un réglage de cadrage.
 * Aucune feuille ne peut battre un style en ligne : la règle ci-dessous était
 * là, elle s'appliquait à l'élément, et le rendu restait `cover`. Le cadrage s'y
 * règle donc sur LE BLOC — `"aspectRatio":"1","scale":"contain"` dans
 * `taxonomy-serie.html` — ce qui a le mérite de rester modifiable depuis
 * l'éditeur. La règle reste utile pour la galerie et pour `mrl/werk-raster`,
 * dont le balisage ne porte pas de style en ligne.
 */
.mrl-serie .mrl-grid__image img,
.mrl-galerie .mrl-grid__image img,
.mrl-raster .wp-block-post-featured-image img {
	object-fit: contain;
}

/* ========================================================================
   MOUVEMENT
   ========================================================================

   Trois règles ont guidé ce qui suit.

   1. RIEN NE BOUGE APRÈS COUP. Un texte qui glisse pendant qu'on le lit, une
      image qui remonte quand on va cliquer, c'est le contraire du confort. Les
      apparitions se jouent en OPACITÉ, jamais en déplacement, sauf à l'entrée
      de page où plus rien n'est encore lu.
      Cette règle a aussi une conséquence pratique : les 147 mesures de
      géométrie comparent des positions. Une révélation qui déplace fausse la
      mesure selon l'endroit où la page est arrêtée.

   2. LE MOUVEMENT EST UN JETON, pas un nombre. Les durées et la courbe vivent
      dans `theme.json` (`--wp--custom--motion--*`) comme les couleurs et les
      espacements. On règle le tempo du site d'un seul endroit.

   3. QUI N'EN VEUT PAS N'EN A PAS. Tout ce bloc s'éteint sous
      `prefers-reduced-motion`, y compris les transitions de vue. Ce n'est pas
      une politesse : le mouvement déclenche des malaises réels.
   ======================================================================== */

/* ------------------------------------------- Passage d'une page à l'autre. */

/*
 * Transition de vue entre documents : le navigateur fond l'ancienne page dans
 * la nouvelle, sans une ligne de JavaScript et sans transformer le site en
 * application monopage. Là où elle n'existe pas, la navigation reste ce qu'elle
 * était — rien ne casse.
 */
@view-transition {
	navigation: auto;
}

::view-transition-old( root ),
::view-transition-new( root ) {
	animation-duration: var( --wp--custom--motion--base );
	animation-timing-function: var( --wp--custom--motion--ease );
}

/*
 * L'en-tête et le pied ne participent PAS au fondu : ils sont identiques d'une
 * page à l'autre, et les voir traverser donnerait l'impression que le site
 * recharge tout. Nommés, ils restent en place pendant que le contenu change.
 */
.wp-site-blocks > header.wp-block-template-part {
	view-transition-name: mrl-entete;
}

.wp-site-blocks > footer.wp-block-template-part {
	view-transition-name: mrl-pied;
}

/*
 * ENTRÉE DE PAGE — sur TOUS les navigateurs, pas seulement ceux qui ignorent les
 * transitions de vue.
 *
 * Première version : ce fondu était réservé aux navigateurs sans
 * `@view-transition`, par crainte que les deux effets se superposent. Résultat,
 * sur Chrome — donc sur l'écran où l'on valide — l'arrivée sur une page était
 * exactement ce qu'elle a toujours été : rien. La transition de vue ne se joue
 * qu'entre DEUX pages du site ; ouvrir une adresse, recharger, revenir depuis un
 * autre site n'en déclenche aucune.
 *
 * Le contenu entre donc en fondu à chaque affichage, et les bandes se succèdent
 * légèrement décalées : c'est ce décalage qui donne la sensation de matière,
 * bien plus qu'une durée plus longue.
 */
@keyframes mrl-entree {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
}

.wp-site-blocks > main {
	animation: mrl-entree var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) both;
}

/*
 * Le décalage porte sur les PREMIERS enfants du contenu — ceux qu'on voit en
 * arrivant. Au-delà, c'est la révélation au défilement qui prend le relais :
 * décaler une bande qu'on ne verra que dans dix secondes ne servirait à rien.
 */
.wp-site-blocks > main > * {
	animation: mrl-entree var( --wp--custom--motion--slow ) var( --wp--custom--motion--ease ) both;
}

.wp-site-blocks > main > :nth-child( 1 ) { animation-delay: 80ms; }
.wp-site-blocks > main > :nth-child( 2 ) { animation-delay: 200ms; }
.wp-site-blocks > main > :nth-child( 3 ) { animation-delay: 320ms; }

/*
 * L'en-tête arrive avec, mais sans déplacement : il est collant, et un en-tête
 * qui glisse au chargement donne l'impression que la page saute.
 */
@keyframes mrl-entree-fondu {
	from {
		opacity: 0;
	}
}

.wp-site-blocks > header.wp-block-template-part {
	animation: mrl-entree-fondu var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) both;
}

/* ------------------------------------------------ Apparition au défilement. */

/*
 * L'ANIMATION EST UN RÉGLAGE DE BLOC, et cette feuille n'en connaît que le nom.
 *
 * Elle ne cite AUCUN bloc, aucune classe de thème : elle lit `data-mrl-anim`,
 * posé au rendu par `mu-plugins/mrl-core/animations.php` à partir du réglage
 * choisi dans l'éditeur — ou du défaut du type de bloc. Un bloc créé demain
 * s'animera sans qu'on touche ici.
 *
 * La version précédente énumérait des sélecteurs devinés à la main. Elle
 * marchait sur l'accueil et sur rien d'autre, et condamnait le commanditaire à
 * demander un développeur pour la moindre retouche.
 *
 * `mrl-anime` n'est posée QUE par le script, et seulement après qu'il a marqué
 * les éléments. Sans JavaScript, rien n'est masqué : la page reste lisible.
 */
.mrl-anime [data-mrl-anim] {
	transition:
		opacity var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) var( --mrl-anim-delai, 0ms ),
		transform var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) var( --mrl-anim-delai, 0ms );
}

/* --- État de départ, un par effet. --- */

.mrl-anime [data-mrl-anim="fondu"]:not( .est-vu ),
.mrl-anime [data-mrl-anim="suite"] > :not( .est-vu ) {
	opacity: 0;
}

.mrl-anime [data-mrl-anim="montant"]:not( .est-vu ) {
	opacity: 0;
	transform: translateY( 24px );
}

.mrl-anime [data-mrl-anim="zoom"]:not( .est-vu ) {
	opacity: 0;
	transform: scale( 0.97 );
}

/*
 * « Un par un » : c'est le bloc qui porte le réglage, ce sont ses ENFANTS qui
 * bougent — une grille, une galerie. Ils héritent de la transition, et le
 * script leur donne leur retard.
 */
.mrl-anime [data-mrl-anim="suite"] > * {
	transition:
		opacity var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) var( --mrl-anim-delai, 0ms ),
		transform var( --wp--custom--motion--base ) var( --wp--custom--motion--ease ) var( --mrl-anim-delai, 0ms );
}

.mrl-anime [data-mrl-anim="suite"] > :not( .est-vu ) {
	transform: translateY( 20px );
}

/* --- État d'arrivée, commun. --- */

.mrl-anime .est-vu {
	opacity: 1;
	transform: none;
}

/*
 * `will-change` seulement PENDANT l'attente : le navigateur peut préparer la
 * composition, opacité et déplacement se jouent alors sur le GPU sans repeindre.
 * Le laisser en place sur cinquante éléments coûterait de la mémoire pour rien.
 */
.mrl-anime [data-mrl-anim]:not( .est-vu ),
.mrl-anime [data-mrl-anim="suite"] > :not( .est-vu ) {
	will-change: opacity, transform;
}

/* ------------------------------------------------- Éléments interactifs. */

/*
 * Une seule déclaration pour tout ce qui réagit au pointeur. Les propriétés
 * sont NOMMÉES une à une : `transition: all` animerait aussi ce qu'on n'a pas
 * prévu — une largeur, une hauteur — et ferait sauter la mise en page.
 */
a,
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button,
.mrl-header .wp-block-navigation-item a,
.mrl-subnav a,
.mrl-anchors a,
.mrl-header__instagram {
	transition:
		color var( --wp--custom--motion--fast ) var( --wp--custom--motion--ease ),
		background-color var( --wp--custom--motion--fast ) var( --wp--custom--motion--ease ),
		border-color var( --wp--custom--motion--fast ) var( --wp--custom--motion--ease ),
		opacity var( --wp--custom--motion--fast ) var( --wp--custom--motion--ease );
}

/*
 * LE FIL DE SECTION ET LE FIL D'ANCRES N'AVAIENT AUCUN SURVOL.
 *
 * Ce ne sont pas des ornements : ce sont les deux barres de navigation
 * secondaires du site. Elles ne répondaient ni au pointeur ni au clavier — un
 * lien qui ne dit pas qu'il est un lien. La couleur rejoint celle de l'entrée
 * courante, ce qui donne au survol le sens qu'il doit avoir : « voilà où vous
 * iriez ».
 */
.mrl-subnav a:hover,
.mrl-subnav a:focus-visible,
.mrl-anchors a:hover,
.mrl-anchors a:focus-visible {
	color: var( --wp--preset--color--black );
}

/* Sur fond sombre, l'entrée courante est claire : le survol la rejoint. */
.mrl-section--dark .mrl-subnav a:hover,
.mrl-section--dark .mrl-subnav a:focus-visible {
	color: var( --wp--preset--color--light-light-grey );
}

/*
 * L'icône sociale est posée en MASQUE pour prendre la couleur du texte : c'est
 * donc son fond qui s'anime, pas sa couleur.
 */
.mrl-header .mrl-header__instagram:hover,
.mrl-header .mrl-header__instagram:focus-visible {
	opacity: 0.65;
}

/*
 * VIGNETTES : l'image respire dans son cadre, le cadre ne bouge pas.
 *
 * Le grossissement porte sur l'`img`, et la `figure` le recadre. Sans ce
 * `overflow: clip`, l'image déborderait sur ses voisines ; et si le
 * grossissement portait sur la figure, la grille se décalerait à chaque survol.
 */
.mrl-grid__image,
.mrl-series__media,
.mrl-raster .wp-block-post-featured-image {
	overflow: clip;
}

.mrl-grid__image img,
.mrl-series__media img,
.mrl-raster .wp-block-post-featured-image img {
	transition: transform var( --wp--custom--motion--base ) var( --wp--custom--motion--ease );
}

.mrl-grid__image:hover img,
.mrl-grid__image:focus-within img,
.mrl-series__media:hover img,
.mrl-raster .wp-block-post-featured-image:hover img,
.mrl-raster .wp-block-post-featured-image:focus-within img {
	transform: scale( 1.03 );
}

/*
 * LES APPELS À L'ACTION S'ESTOMPENT AU SURVOL (#604).
 *
 * Demande du commanditaire, 2026-08-28 : « CTA mit kleiner Animation bei
 * Mouseover (fading transparency) » — et VALABLE PARTOUT, pas seulement sur la
 * page qu'il annotait.
 *
 * Ces boutons n'avaient AUCUN survol : la transition ci-dessus était déclarée,
 * `opacity` y figurait déjà, mais rien ne changeait jamais la valeur. Un bouton
 * qui ne répond pas au pointeur ne se donne pas pour un bouton.
 *
 * L'estompe plutôt qu'une inversion de couleurs : le site pose ses boutons sur
 * cinq fonds différents — clair, blanc, sombre, bordeaux, taupe — et une
 * inversion demanderait une règle par fond, à retenir à chaque nouvelle teinte.
 * L'opacité, elle, dit la même chose partout et ne peut pas devenir illisible.
 *
 * `focus-visible` en même temps : ce qui répond à la souris doit répondre au
 * clavier. Et `prefers-reduced-motion`, plus bas, coupe déjà la transition pour
 * qui n'en veut pas — le changement reste, seul le fondu disparaît.
 *
 * `is-soon` est ÉCARTÉ : c'est le bouton « bientôt disponible » du shop, qui
 * porte déjà `cursor: not-allowed` et sa propre opacité. Le faire réagir
 * dirait au visiteur qu'il peut cliquer.
 */
.wp-block-button__link:not( .is-soon ):hover,
.wp-block-button__link:not( .is-soon ):focus-visible,
.mrl-form__submit .wp-element-button:hover,
.mrl-form__submit .wp-element-button:focus-visible {
	opacity: 0.7;
}

/*
 * Le bouton s'enfonce à peine quand on l'active. Deux pixels : assez pour que
 * la main sente le clic, trop peu pour qu'on le remarque.
 */
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY( 1px );
}

/* --------------------------------------------------- Qui n'en veut pas. */

@media ( prefers-reduced-motion: reduce ) {
	@view-transition {
		navigation: none;
	}

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

	.mrl-grid__image:hover img,
	.mrl-series__media:hover img,
	.mrl-raster .wp-block-post-featured-image:hover img {
		transform: none;
	}

	/*
	 * ÉTEINTE, pas raccourcie. Une animation pilotée par le défilement ignore sa
	 * DURÉE — sa progression vient de la position de la page — si bien que la
	 * réduire à 0,01 ms ne l'arrête pas : l'élément resterait déplacé de 22 px
	 * tant qu'on ne l'a pas atteint. C'est aussi ce qui rend le harnais possible :
	 * il mesure en mouvement réduit, donc sur une page qui ne bouge plus.
	 */
	/*
	 * Le script de révélation s'arrête de lui-même en mouvement réduit : il ne
	 * pose ni attribut ni classe, donc rien n'est masqué. Restent les animations
	 * d'ENTRÉE, écrites en CSS — celles-là, on les éteint ici.
	 */
	.wp-site-blocks > main,
	.wp-site-blocks > main > *,
	.wp-site-blocks > header.wp-block-template-part {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ============================================== Visionneuse plein écran. */

/*
 * « Vollbild » ouvrait l'image dans un onglet : on quittait le site et le retour
 * n'était que le bouton « précédent ». Le commanditaire a demandé une
 * visionneuse qui se ferme. La grille des Wortbilder demandait la même chose.
 * Une seule brique, un seul style — `assets/js/lightbox.js`.
 *
 * Le fond est noir des deux côtés du site : une image se regarde sur du noir,
 * qu'elle vienne d'une page claire ou d'une page sombre.
 */
.mrl-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--50 );
}

.mrl-lightbox[hidden] {
	display: none;
}

.mrl-lightbox__voile {
	position: absolute;
	inset: 0;
	/* Presque opaque : à 92 %, l'en-tête blanc restait lisible derrière. */
	background: rgb( 0 0 0 / 97% );
}

/* La page ne défile plus derrière la visionneuse. */
.mrl-lightbox-ouverte {
	overflow: hidden;
}

.mrl-lightbox__scene {
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
	max-block-size: 100%;
}

/*
 * L'image tient dans l'écran, jamais l'inverse. `min-block-size: 0` est
 * indispensable : sans lui l'élément flex refuse de descendre sous sa taille
 * intrinsèque et une image haute déborde par le bas.
 */
.mrl-lightbox__image {
	display: block;
	min-block-size: 0;
	max-inline-size: 100%;
	max-block-size: calc( 100vh - 2 * var( --wp--preset--spacing--50 ) );
	inline-size: auto;
	block-size: auto;
	object-fit: contain;
}

.mrl-lightbox__legende {
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: center;
	color: var( --wp--preset--color--white );
	max-inline-size: var( --wp--custom--narrow );
}

.mrl-lightbox__titre {
	font-family: var( --wp--preset--font-family--van-condensed );
	font-size: var( --wp--preset--font-size--navi );
	text-transform: uppercase;
	letter-spacing: var( --wp--custom--tracking );
}

.mrl-lightbox__texte {
	font-size: var( --wp--preset--font-size--meta );
	color: var( --wp--preset--color--light-grey );
}

.mrl-lightbox__titre[hidden],
.mrl-lightbox__texte[hidden],
.mrl-lightbox__bouton[hidden] {
	display: none;
}

.mrl-lightbox__bouton {
	position: absolute;
	z-index: 1;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --wp--preset--color--white );
	cursor: pointer;
}

/*
 * OÙ SE POSENT LES TROIS BOUTONS. Sans ces retraits, ils retombent sur leur
 * position statique — c'est-à-dire empilés au centre exact de la fenêtre, les
 * uns sur les autres, invisibles par-dessus l'image.
 */
.mrl-lightbox__bouton--prev,
.mrl-lightbox__bouton--next {
	inset-block-start: 50%;
	translate: 0 -50%;
}

.mrl-lightbox__bouton--prev {
	inset-inline-start: var( --wp--preset--spacing--10 );
}

.mrl-lightbox__bouton--next {
	inset-inline-end: var( --wp--preset--spacing--10 );
}

.mrl-lightbox__bouton--fermer {
	inset-block-start: var( --wp--preset--spacing--10 );
	inset-inline-end: var( --wp--preset--spacing--10 );
}

/*
 * Chevrons et croix sont DESSINÉS, pas écrits : aucun caractère à traduire, et
 * rien qui dépende d'une police.
 *
 * Le chevron est un carré dont on ne garde que deux côtés, tourné de 45° : les
 * bords conservés désignent le sens. Gauche = bord gauche + bord bas. Ma première
 * version croisait deux barres, et les deux flèches pointaient à l'envers —
 * relevé par le commanditaire, pas par le harnais : aucun contrôle ne sait dans
 * quel sens pointe un triangle.
 */
.mrl-lightbox__bouton--prev::before,
.mrl-lightbox__bouton--next::before {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 13px;
	block-size: 13px;
	border: 0 solid currentcolor;
}

.mrl-lightbox__bouton--prev::before {
	border-inline-start-width: 2px;
	border-block-end-width: 2px;
	transform: translate( -40%, -50% ) rotate( 45deg );
}

.mrl-lightbox__bouton--next::before {
	border-inline-end-width: 2px;
	border-block-start-width: 2px;
	transform: translate( -60%, -50% ) rotate( 45deg );
}

/* La croix, elle, reste deux barres croisées. */
.mrl-lightbox__bouton--fermer::before,
.mrl-lightbox__bouton--fermer::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 15px;
	block-size: 2px;
	background: currentcolor;
}

.mrl-lightbox__bouton--fermer::before {
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.mrl-lightbox__bouton--fermer::after {
	transform: translate( -50%, -50% ) rotate( -45deg );
}

.mrl-lightbox__bouton:hover,
.mrl-lightbox__bouton:focus-visible {
	color: var( --wp--preset--color--light-grey );
}

/* Sur un téléphone, les flèches ne peuvent pas vivre hors de l'image. */
@media ( max-width: 599px ) {
	.mrl-lightbox {
		padding: var( --wp--preset--spacing--40 ) var( --wp--preset--spacing--20 );
	}

	.mrl-lightbox__bouton--prev {
		inset-inline-start: 0;
	}

	.mrl-lightbox__bouton--next {
		inset-inline-end: 0;
	}
}

/* ==================================================== Page d'un Wortbild. */

/*
 * Un Wortbild n'avait PAS de gabarit : il tombait sur celui du Journal, qui
 * n'affiche pas d'image mise en avant. La page montrait donc une date, un titre,
 * et rien — c'est ce que le commanditaire a signalé. Le motif est désormais rendu
 * par `single-wortbild.html` ; il reste ici à lui donner sa mesure.
 *
 * `contain` et non `cover` : un motif se regarde en entier, c'est la règle que le
 * commanditaire a posée pour toutes les œuvres.
 */
.mrl-wortbild__image img {
	display: block;
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: calc( 100svh - 260px );
	margin-inline: auto;
	object-fit: contain;
}

/*
 * L'ÉCART FIL → MOTIF, ICI SEULEMENT.
 *
 * 60 px séparaient le fil de section de l'image, et le commanditaire les trouve
 * trop grands SUR CETTE PAGE. Ils ne viennent pas du bloc image — sa marge est
 * plus petite — mais de la marge basse du fil, qui est GLOBALE : la baisser là
 * où elle est déclarée déplacerait toutes les pages éditoriales. La règle est
 * donc bornée à `.mrl-wortbild`, la classe que seul `single-wortbild.html`
 * porte. Les marges se fusionnant, c'est la plus grande des deux qui compte :
 * 20 ici contre 40 sur l'image, donc 40 au total.
 */
.mrl-wortbild .mrl-subnav-wrap {
	margin-block-end: var( --wp--preset--spacing--20 );
}

/* Le retour vers la galerie est centré sous le motif, pas aligné à gauche. */
.mrl-backlink--centre {
	margin-inline: auto;
}

/*
 * Le bouton « Anfrage » d'une œuvre est CENTRÉ.
 *
 * Il était un `core/buttons` écrit dans le gabarit ; il est devenu un bloc rendu,
 * pour emporter le titre de l'œuvre dans le lien. Le centrage s'est perdu au
 * passage — et c'est instructif : le cœur ne met pas `justify-content` dans une
 * feuille commune, il engendre une règle propre à CHAQUE bloc de mise en page,
 * accrochée à une classe `wp-container-…` qu'un bloc rendu côté serveur ne
 * reçoit pas. La classe `is-content-justification-center` que porte le balisage
 * ne décrit donc rien à elle seule. Le harnais l'a vu : le lien commençait à
 * 327 au lieu de 662.
 */
.wp-block-mrl-anfrage {
	justify-content: center;
}