/*
Theme Name: Manga Card Event
Theme URI: http://mangacardeventtest.local
Author: Justin
Description: Thème bloc dédié au site Manga Card Event. Direction « Presse » : titrage condensé, filets fins, angles droits, une seule couleur d'accent. Seul thème modifiable du projet ; les thèmes Twenty Twenty-* sont fournis par le core et sont écrasés à chaque mise à jour.
Version: 0.6.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: manga-card-event
Tags: block-theme, full-site-editing
*/

/*
 * Direction : « Presse » — éditorial, imprimé.
 *
 * Trois règles portent tout le reste : le titrage est condensé et en capitales,
 * les séparations sont des filets d'un pixel, et l'accent rouge ne sert qu'à
 * désigner — jamais à décorer. Aucun angle arrondi, aucune ombre portée : la
 * hiérarchie vient de l'échelle typographique et du filet.
 *
 * Trois familles, trois rôles, jamais interchangeables :
 *   - Anton              titres et chiffres, toujours en capitales
 *   - Libre Baskerville  labels, navigation, boutons, texte de fiche
 *   - Inter              texte courant
 *
 * Répartition du code, conforme à la règle du projet :
 *   - theme.json porte les jetons et tout ce que l'éditeur sait régler :
 *     couleurs, tailles, bouton, liens, titres.
 *   - ce fichier ne porte que ce que theme.json ne sait pas exprimer : grilles
 *     à filets, en-têtes de section, rangées de programme et de tarifs.
 *
 * COULEUR DE L'ÉDITION
 * Elle ne se change pas ici : slug `accent` dans theme.json, et quatre
 * variations prêtes à l'emploi dans `styles/` — Apparence → Éditeur → Styles.
 *
 * SOMMAIRE
 *   01. Alias de jetons        05. Rangées (programme, tarifs)
 *   02. Typographie            06. Boutons & labels
 *   03. En-tête de section     07. En-tête / pied de page
 *   04. Grilles à filets       08. Compatibilité (ancienne direction)
 *                              09. Plancher de qualité
 */


/* ==========================================================================
   01. ALIAS DE JETONS
   ========================================================================== */
:root {
	--mce-acc:      var( --wp--preset--color--accent, #e60012 );
	--mce-acc-deep: var( --wp--preset--color--accent-deep, #a8000d );
	--mce-ink:      var( --wp--preset--color--ink, #0a0a0a );
	--mce-paper:    var( --wp--preset--color--paper, #fff );
	--mce-paper-2:  var( --wp--preset--color--paper-2, #f6f5f3 );
	--mce-n600:     var( --wp--preset--color--n600, #5c5a52 );
	--mce-n400:     var( --wp--preset--color--n400, #8e8c85 );
	--mce-n200:     var( --wp--preset--color--n200, #e2e0db );

	--font-display: var( --wp--preset--font-family--display, sans-serif );
	--font-label:   var( --wp--preset--font-family--label, Georgia, serif );
	--font-body:    var( --wp--preset--font-family--body, sans-serif );

	--rule-hair:    var( --wp--custom--rule--hair, 1px );
	--rule-strong:  var( --wp--custom--rule--strong, 2px );
	--rule-mark:    var( --wp--custom--rule--mark, 4px );

	--ls-label:     var( --wp--custom--letter-spacing--label, 0.18em );
	--ls-action:    var( --wp--custom--letter-spacing--action, 0.14em );
	--ls-tight:     var( --wp--custom--letter-spacing--tight, 0.2em );

	--dur:          var( --wp--custom--motion--duration, 160ms );
	--ease:         var( --wp--custom--motion--ease, cubic-bezier( 0.22, 1, 0.36, 1 ) );

	/* Filets sur fond encre : le n200 y disparaîtrait. */
	--rule-on-ink:  rgba( 255, 255, 255, 0.28 );
	--text-on-ink:  #c8c6c0;
}

/*
 * Le focus visible ne se négocie pas. Un trait plein de la couleur d'accent,
 * décalé, lisible sur papier comme sur encre.
 */
:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --mce-acc );
	outline-offset: 3px;
}

.has-ink-background-color :where( a, button, input, select, textarea ):focus-visible,
.mce-footer :where( a, button ):focus-visible {
	outline-color: var( --mce-paper );
}


/* ==========================================================================
   02. TYPOGRAPHIE
   theme.json règle h1–h6, les liens et le texte courant. Ne restent ici que
   les rendus qui ne correspondent à aucun élément HTML.
   ========================================================================== */

/*
 * Label : la petite ligne en capitales espacées qui annonce une section, une
 * fiche ou une valeur. C'est la pièce la plus employée du système.
 */
.mce-label,
.is-style-mce-label {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --mce-acc );
	margin-block-end: 0;
}

.mce-label--muet,
.is-style-mce-label-muet {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --mce-n400 );
	margin-block-end: 0;
}

/* Chapô : posé sous un titre de page, en serif, jamais en Inter. */
.mce-chapo,
.is-style-mce-chapo {
	font-family: var( --font-label );
	font-size: 17px;
	line-height: 1.75;
	color: var( --mce-n600 );
	/*
	 * Pas de `max-width` ici. WordPress force `margin-inline: auto !important`
	 * sur tout enfant d'un conteneur contraint : un chapô plus étroit que ses
	 * voisins s'y retrouverait centré, donc décalé à droite sous son propre
	 * titre, et aucune spécificité ne passe devant un `!important`. La largeur
	 * de lecture est déjà fixée par `contentSize` dans theme.json.
	 */
}

/*
 * Grand chiffre — un par section au maximum.
 *
 * L'interlignage de 0,82 serre volontairement le bloc, mais il rend la boîte de
 * ligne plus courte que la police : les chiffres débordent d'environ un dixième
 * de cadratin au-dessus de leur propre boîte et mordent sur ce qui précède. La
 * marge haute est donc exprimée en `em` — elle absorbe ce débordement et suit
 * l'échelle, du plus petit clamp au plus grand.
 */
.mce-chiffre {
	font-family: var( --font-display );
	font-size: clamp( 80px, 13vw, 150px );
	line-height: 0.82;
	color: var( --mce-acc );
	margin-block-start: 0.22em;
	margin-block-end: 0;
}

/*
 * Donnée clé : le chiffre ou le fait qu'un visiteur doit pouvoir attraper en
 * diagonale — un prix, une heure, une date limite, un nombre de places.
 *
 * Elle prend la couleur d'édition et le gras de la famille courante, jamais une
 * police différente : c'est une désignation, pas un ornement. La règle du
 * système tient ici aussi — l'accent sert à montrer, pas à décorer. Une page
 * qui en compte dix n'en met plus aucune en avant.
 */
.mce-cle {
	color: var( --mce-acc );
	font-weight: 700;
}

/*
 * Sur le papier cassé, le rouge tombe à 4,41:1 — sous le seuil de 4,5 pour du
 * texte courant. La teinte profonde y remonte à 7,5:1 sans changer la lecture.
 */
.wp-block-group.is-style-mce-encadre-gris .mce-cle,
.wp-block-group.mce-cellule .mce-cle,
.wp-block-column.mce-cellule .mce-cle,
.mce-rangee--marque .mce-cle {
	color: var( --mce-acc-deep );
}

/*
 * Sur l'encre, le rouge tombe à 4,1:1 — sous le seuil pour du texte courant.
 * La donnée clé y désigne par le blanc et le gras.
 */
.has-ink-background-color .mce-cle,
.wp-block-group.is-style-mce-encadre-encre .mce-cle,
.mce-footer .mce-cle {
	color: var( --mce-paper );
}

/* Texte de fiche : serif, plus petit, gris. Distinct du texte courant. */
.mce-fiche,
.is-style-mce-fiche {
	font-family: var( --font-label );
	font-size: 14px;
	line-height: 1.7;
	color: var( --mce-n600 );
}

/*
 * Lien d'action : souligné d'un trait d'accent plutôt que d'un soulignement
 * ordinaire. Employé en fin de fiche et dans les en-têtes de section.
 */
.mce-action,
.is-style-mce-action a,
.mce-action a {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-action );
	text-transform: uppercase;
	color: var( --mce-ink );
	border-bottom: var( --rule-strong ) solid var( --mce-acc );
	padding-bottom: 2px;
	text-decoration: none;
}

.mce-action a:hover,
.is-style-mce-action a:hover {
	color: var( --mce-acc );
	text-decoration: none;
}


/* ==========================================================================
   03. EN-TÊTE DE SECTION
   Titre à gauche, mention à droite, filet épais dessous. C'est la respiration
   qui structure toutes les pages.
   ========================================================================== */
.wp-block-group.is-style-mce-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	border-bottom: var( --rule-strong ) solid var( --mce-ink );
	padding-bottom: 14px;
}

.wp-block-group.is-style-mce-section-head > * {
	margin-block: 0;
}


/* ==========================================================================
   04. GRILLES À FILETS
   Les fiches ne sont pas des cartes : elles ne flottent pas. Elles partagent
   une grille dont les filets d'un pixel sont le fond qui transparaît entre
   les cellules. C'est la signature de la direction.
   ========================================================================== */
.mce-grille {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: var( --rule-hair );
	background: var( --mce-n200 );
	border: var( --rule-hair ) solid var( --mce-n200 );
}

/*
 * La grille porte elle-même l'écartement d'un pixel. Les marges que WordPress
 * pose entre les blocs d'un groupe en flux s'y ajouteraient et laisseraient
 * voir le fond gris sous forme de bandes.
 */
.mce-grille > * {
	margin-block: 0;
}

.mce-grille--3 { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
.mce-grille--1 { grid-template-columns: minmax( 0, 1fr ); }

/*
 * Nombre impair de cellules : la dernière n'occuperait qu'une demi-rangée et
 * laisserait voir le fond gris de la grille sur l'autre moitié — un trou qui
 * se lit comme un défaut d'affichage. Elle prend donc toute la largeur.
 *
 * C'est ce qui rend le nombre de cellules réellement libre : deux, trois,
 * cinq ou six, la grille reste pleine. Sans cette règle, une composition
 * qu'on agrandit d'une cellule se troue une fois sur deux.
 *
 * Écartée des variantes à trois et quatre colonnes, où le reste de la
 * division ne vaut pas toujours une cellule et demanderait un autre calcul.
 */
.mce-grille:not( .mce-grille--3, .mce-grille--4 ) > :nth-child( odd ):last-child {
	grid-column: 1 / -1;
}

/*
 * Grille imbriquée : la grille interne ne reprend pas de bordure, sinon celle
 * de la grille externe s'y ajoute et le filet d'un pixel devient une bande.
 * Ses cellules perdent aussi la hauteur minimale, qui n'a de sens que pour une
 * fiche, pas pour un chiffre.
 */
.mce-grille .mce-grille {
	border: none;
}

.mce-grille .mce-grille :is( .mce-cellule, .is-style-mce-cellule ),
.mce-grille .mce-grille .wp-block-group:is( .mce-cellule, .is-style-mce-cellule ) {
	min-height: 0;
	padding: 20px;
}

/*
 * Cellule tenant lieu de photo : elle réserve la place d'une image qui n'existe
 * pas encore, sans la simuler. Un aplat papier cassé et un label centré, rien
 * de plus — le jour où l'image arrive, elle remplace le label.
 */
.mce-cellule--photo {
	min-height: 230px;
	background: var( --mce-paper-2 );
	align-items: center;
	justify-content: center;
}

.mce-cellule--photo:hover { background: var( --mce-paper-2 ); }
.mce-grille--4 { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }

/*
 * Valeur d'une cellule : la donnée qu'on lit en diagonale — une date, une
 * tranche horaire, un prix — posée au-dessus de son libellé.
 *
 * Déclarée comme style de bloc (« Valeur »), donc applicable d'un clic. La
 * bande de chiffres d'une page d'édition a sa propre classe, plus grande :
 * ici on est dans une cellule de grille, pas dans un bandeau de tête.
 *
 * Reprend les valeurs de `.mce-stat__value`, l'ancienne classe que la section
 * 08 garde pour le contenu déjà publié — l'accueil en porte encore. Les deux
 * rendus sont identiques : c'est voulu, pour qu'une page reconstruite à côté
 * d'une ancienne ne se voie pas.
 */
.is-style-mce-valeur {
	font-family: var( --font-display );
	font-size: 21px;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 8px 0 0;
}

/* Collée sous un en-tête de section, la grille n'a pas de filet haut. */
.wp-block-group.is-style-mce-section-head + .mce-grille,
.wp-block-group.is-style-mce-section-head + .wp-block-columns .mce-grille {
	border-top: none;
}

@media ( max-width: 781px ) {
	.mce-grille,
	.mce-grille--3,
	.mce-grille--4 {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * Cellule de grille. En balisage bloc, c'est une colonne ou un groupe : le
 * fond papier est ce qui masque le fond gris de la grille, et le filet
 * apparaît dans l'interstice d'un pixel.
 */
.wp-block-group.is-style-mce-cellule,
.wp-block-group.mce-cellule,
.wp-block-column.mce-cellule {
	background: var( --mce-paper );
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 180px;
	transition: background-color var( --dur ) var( --ease );
}

.wp-block-group.is-style-mce-cellule:hover,
.wp-block-group.mce-cellule:hover,
.wp-block-column.mce-cellule:hover {
	background: var( --mce-paper-2 );
}

.wp-block-group.is-style-mce-cellule > *,
.wp-block-group.mce-cellule > *,
.wp-block-column.mce-cellule > * {
	margin-block: 0;
}

/* Le lien d'action d'une fiche se cale en bas, quelle que soit la hauteur. */
.wp-block-group.is-style-mce-cellule > .mce-action,
.wp-block-group.mce-cellule > .mce-action,
.wp-block-column.mce-cellule > .mce-action {
	margin-top: auto;
	align-self: flex-start;
}

/*
 * Encadré simple : un filet, rien d'autre. Remplace l'ancien « sticker ».
 * Les slugs hérités pointent ici pour que le contenu déjà publié suive.
 */
.wp-block-group.is-style-mce-encadre,
.wp-block-group.is-style-mce-sticker,
.wp-block-group.is-style-mce-carte {
	background: var( --mce-paper );
	border: var( --rule-hair ) solid var( --mce-n200 );
	padding: 26px;
}

.wp-block-group.is-style-mce-encadre-gris,
.wp-block-group.is-style-mce-sticker-ice {
	background: var( --mce-paper-2 );
	border: var( --rule-hair ) solid var( --mce-n200 );
	padding: 26px;
}

/* Encadré encre : pleine surface sombre, filets et texte adaptés. */
.wp-block-group.is-style-mce-encadre-encre,
.wp-block-group.is-style-mce-sticker-ink,
.wp-block-group.is-style-mce-panneau {
	background: var( --mce-ink );
	color: var( --mce-paper );
	border: var( --rule-hair ) solid var( --mce-ink );
	padding: 26px;
}

.wp-block-group.is-style-mce-encadre-encre :is( h1, h2, h3, h4, h5, h6 ),
.wp-block-group.is-style-mce-sticker-ink :is( h1, h2, h3, h4, h5, h6 ),
.wp-block-group.is-style-mce-panneau :is( h1, h2, h3, h4, h5, h6 ) {
	color: var( --mce-paper );
}

.has-ink-background-color :is( .mce-fiche, .is-style-mce-fiche, .mce-chapo, .is-style-mce-chapo ),
.wp-block-group.is-style-mce-encadre-encre :is( .mce-fiche, .is-style-mce-fiche, .mce-chapo, .is-style-mce-chapo ),
.wp-block-group.is-style-mce-sticker-ink :is( .mce-fiche, .is-style-mce-fiche, .mce-chapo, .is-style-mce-chapo ) {
	color: var( --text-on-ink );
}

.has-ink-background-color .mce-label,
.has-ink-background-color .is-style-mce-label,
.wp-block-group.is-style-mce-sticker-ink .mce-label,
.wp-block-group.is-style-mce-sticker-ink .is-style-mce-label {
	color: var( --mce-acc );
}


/* ==========================================================================
   05. RANGÉES
   ========================================================================== */

/*
 * Liste à filets : chaque élément est une rangée séparée par un trait, pas une
 * puce. Un liseré d'accent à gauche marque l'entrée.
 */
ul.is-style-mce-rangs,
.mce-rangs {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.is-style-mce-rangs li,
.mce-rangs li {
	padding: 15px 0 15px 18px;
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
	border-left: var( --rule-mark ) solid transparent;
	padding-left: 18px;
	transition: border-color var( --dur ) var( --ease );
}

ul.is-style-mce-rangs li:hover,
.mce-rangs li:hover {
	border-left-color: var( --mce-acc );
}

ul.is-style-mce-rangs li:last-child,
.mce-rangs li:last-child {
	border-bottom: none;
}

.has-ink-background-color ul.is-style-mce-rangs li,
.wp-block-group.is-style-mce-sticker-ink ul.is-style-mce-rangs li {
	border-bottom-color: var( --rule-on-ink );
}

/* Rangée de tarif : intitulé à gauche, montant à droite, filet dessous. */
.mce-tarif {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	padding: 18px;
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
}

.mce-tarif:last-child { border-bottom: none; }
.mce-tarif > * { margin-block: 0; }

.mce-tarif__nom {
	font-family: var( --font-display );
	font-size: 19px;
	text-transform: uppercase;
	margin: 0;
}

.mce-tarif__detail {
	font-family: var( --font-label );
	font-size: 13px;
	color: var( --mce-n600 );
	margin: 0;
}

.mce-tarif__prix {
	font-family: var( --font-display );
	font-size: 26px;
	color: var( --mce-acc );
	margin: 0;
}

/* Table de caractéristiques — le « format du tournoi » de la maquette. */
.mce-specs {
	border: var( --rule-hair ) solid var( --mce-n200 );
}

.has-ink-background-color .mce-specs,
.wp-block-group.is-style-mce-sticker-ink .mce-specs {
	border-color: var( --rule-on-ink );
}

.mce-specs__ligne {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: baseline;
	padding: 16px 20px;
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
}

.has-ink-background-color .mce-specs__ligne,
.wp-block-group.is-style-mce-sticker-ink .mce-specs__ligne {
	border-bottom-color: var( --rule-on-ink );
}

.mce-specs__ligne:last-child { border-bottom: none; }
.mce-specs__ligne > * { margin-block: 0; }

.mce-specs__label {
	font-family: var( --font-label );
	font-size: 12px;
	letter-spacing: var( --ls-action );
	text-transform: uppercase;
	color: var( --mce-n400 );
}

.mce-specs__valeur {
	font-family: var( --font-display );
	font-size: 21px;
	text-transform: uppercase;
}

/* ==========================================================================
   RANGÉE DE LISTE
   Une seule rangée pour toutes les listes du site : programme, salles, canaux
   de vente, accessibilité, règlement. Trois zones — un rail, un corps, une
   méta — dont seul le rail est obligatoire.

   Le rail est ce qui tient le système. Il fait toujours la même largeur et
   n'est jamais vide : il porte l'heure quand il y en a une, sinon un libellé
   court, sinon un numéro, sinon un losange. Le supprimer faute d'horaire —
   ce que faisait la version précédente de ce composant — fait perdre à la
   liste le rythme qui la rendait reconnaissable, et la ramène à une liste à
   puces habillée.

   Corollaire : une liste de rangées ne s'encadre pas. Les filets d'un pixel
   suffisent à la délimiter ; un encadré la sortirait du système.

   Le composant ne s'appelle plus « horaire » : l'heure n'est qu'un des quatre
   contenus possibles du rail.
   ========================================================================== */
.mce-rangee {
	display: grid;
	grid-template-columns: minmax( 96px, 112px ) 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 17px 14px;
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
	border-left: var( --rule-mark ) solid transparent;
}

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

/*
 * Mise en avant. Une seule par liste : posée sur chaque rangée, elle ne
 * désignerait plus rien.
 */
.mce-rangee--marque {
	border-left-color: var( --mce-acc );
	background: var( --mce-paper-2 );
}

/* --- Les quatre contenus du rail ------------------------------------------ */

.mce-rangee__rail,
.is-style-mce-rail-heure,
.is-style-mce-rail-libelle,
.is-style-mce-rail-numero,
.is-style-mce-rail-losange {
	line-height: 1.2;
}

.mce-rangee__rail--heure,
.is-style-mce-rail-heure {
	font-family: var( --font-display );
	font-size: 21px;
	line-height: 1.1;
}

.mce-rangee__rail--libelle,
.is-style-mce-rail-libelle {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mce-acc );
	line-height: 1.3;
}

.mce-rangee__rail--numero,
.is-style-mce-rail-numero {
	font-family: var( --font-display );
	font-size: 18px;
	color: var( --mce-n400 );
}

.mce-rangee__rail--losange,
.is-style-mce-rail-losange {
	font-family: var( --font-display );
	font-size: 15px;
	color: var( --mce-acc );
	text-align: center;
}

/*
 * Sur le papier cassé de la rangée mise en avant, le rouge tombe sous le seuil
 * pour du petit texte : le libellé y passe en teinte profonde, comme la donnée
 * clé ailleurs dans la feuille.
 */
.mce-rangee--marque :is(
	.mce-rangee__rail--libelle,
	.is-style-mce-rail-libelle,
	.mce-rangee__rail--losange,
	.is-style-mce-rail-losange
) {
	color: var( --mce-acc-deep );
}

/* --- Corps et méta -------------------------------------------------------- */

.mce-rangee__titre {
	font-weight: 600;
	font-size: 16px;
}

.mce-rangee__detail {
	font-family: var( --font-label );
	font-size: 13px;
	color: var( --mce-n600 );
}

.mce-rangee__meta {
	font-family: var( --font-label );
	font-size: 11px;
	letter-spacing: var( --ls-action );
	text-transform: uppercase;
	color: var( --mce-n400 );
	white-space: nowrap;
}

@media ( max-width: 600px ) {
	.mce-rangee {
		grid-template-columns: minmax( 76px, 92px ) 1fr;
		gap: 14px;
		padding: 15px 12px;
	}

	/*
	 * La méta passe sous le corps plutôt que de comprimer les deux colonnes
	 * utiles. Le rail, lui, garde sa place : c'est le repère de lecture.
	 */
	.mce-rangee__meta {
		grid-column: 2;
		white-space: normal;
	}

	.mce-rangee__rail--heure,
.is-style-mce-rail-heure {
		font-size: 19px;
	}

	/*
	 * Un libellé long — « Exemplaires » — dépasse les 92 px du rail à cette
	 * largeur et vient mordre sur le corps. On resserre la lettre et le corps
	 * du texte, et on autorise la coupure : un mot seul ne peut pas se replier
	 * de lui-même, il déborderait en silence.
	 */
	.mce-rangee__rail--libelle,
.is-style-mce-rail-libelle {
		font-size: 10px;
		letter-spacing: 0.12em;
		overflow-wrap: anywhere;
	}
}


/* ==========================================================================
   06. BOUTONS & LABELS
   theme.json pose la couleur, la typo et le rectangle. Ne restent ici que les
   variantes et l'étiquette pleine.
   ========================================================================== */
.wp-element-button,
.wp-block-button__link {
	display: inline-block;
	transition: background-color var( --dur ) var( --ease ), color var( --dur ) var( --ease );
}

/* Bouton au trait : sur papier comme sur encre, il emprunte la couleur courante. */
.wp-block-button.is-style-mce-trait .wp-block-button__link,
.wp-block-button.is-style-mce-ghost .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	border: var( --rule-hair ) solid currentColor;
}

.wp-block-button.is-style-mce-trait .wp-block-button__link:hover,
.wp-block-button.is-style-mce-ghost .wp-block-button__link:hover {
	background-color: var( --mce-ink );
	color: var( --mce-paper );
	border-color: var( --mce-ink );
}

.has-ink-background-color .wp-block-button.is-style-mce-trait .wp-block-button__link:hover,
.has-ink-background-color .wp-block-button.is-style-mce-ghost .wp-block-button__link:hover {
	background-color: var( --mce-paper );
	color: var( --mce-ink );
	border-color: var( --mce-paper );
}

/* Bouton compact, pour une barre de navigation. */
.wp-block-button.is-style-mce-sm .wp-block-button__link {
	font-size: 11px;
	padding: 12px 18px;
}

/*
 * Étiquette : surtitre de section, en capitales, précédé d'un filet d'accent.
 *
 * Elle portait un aplat rouge jusqu'à la bascule vers « Presse ». Les boutons
 * y ont perdu leur rayon : aplat rouge, capitales, même graisse, même
 * interlettrage — l'étiquette devenait impossible à distinguer d'un bouton,
 * et rien n'indiquait plus au lecteur ce qui se clique. Le filet remplace
 * l'aplat : il donne le même signal d'ouverture de section sans jamais
 * ressembler à une surface pressable.
 */
.mce-etiquette,
p.is-style-mce-etiquette {
	display: block;
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	background: none;
	color: var( --mce-ink );
	padding: 0;
	margin: 0;
}

/*
 * Le filet est un ::before en ligne, pas un enfant de flex : un `gap` couperait
 * le libellé en morceaux dès qu'il contient du balisage en ligne.
 */
.mce-etiquette::before,
p.is-style-mce-etiquette::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 30px;
	height: var( --rule-mark );
	margin-right: 12px;
	margin-bottom: 2px;
	background: var( --mce-acc );
}

/* Sur fond encre, le libellé passe en papier ; le filet reste rouge. */
.has-ink-background-color .mce-etiquette,
.has-ink-background-color p.is-style-mce-etiquette,
.wp-block-group.is-style-mce-encadre-encre .mce-etiquette,
.wp-block-group.is-style-mce-encadre-encre p.is-style-mce-etiquette {
	color: var( --mce-paper );
}


/* ==========================================================================
   07. EN-TÊTE / PIED DE PAGE
   ========================================================================== */
.mce-utilitaire {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
}

.mce-marque {
	font-family: var( --font-display );
	font-size: clamp( 30px, 5vw, 52px );
	line-height: 1;
	text-transform: uppercase;
	margin: 0;
}

.mce-marque a { color: inherit; text-decoration: none; }
.mce-marque em { font-style: normal; color: var( --mce-acc ); }

.mce-marque__date {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 12px;
	letter-spacing: var( --ls-tight );
	text-transform: uppercase;
	margin: 14px 0 0;
}

/* Navigation collante, soulignée d'un filet épais. */
.mce-nav {
	position: sticky;
	top: 0;
	z-index: 70;
	border-bottom: var( --rule-strong ) solid var( --mce-ink );
}

.admin-bar .mce-nav { top: 32px; }

@media ( max-width: 782px ) {
	.admin-bar .mce-nav { top: 46px; }
}

.mce-nav .wp-block-navigation-item__content {
	padding: 19px 20px;
	border-bottom: var( --rule-mark ) solid transparent;
}

.mce-nav .wp-block-navigation-item__content:hover,
.mce-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var( --mce-acc );
	border-bottom-color: var( --mce-acc );
	text-decoration: none;
}

.mce-footer { background: var( --mce-ink ); color: var( --mce-paper ); }
.mce-footer a { color: var( --mce-paper ); }
.mce-footer a:hover { color: var( --mce-acc ); }
.mce-footer p { color: var( --text-on-ink ); }


/*
 * En-tête sur petit écran.
 *
 * Le bandeau est une signature : le logo et le nom forment un bloc, et la date
 * se lit dessous. Sans ces règles, le groupe flex passe à la ligne dès que le
 * nom et la date ne tiennent plus, et le logo se retrouve seul sur sa propre
 * ligne — l'ensemble se lit alors comme trois éléments empilés au hasard plutôt
 * que comme une marque. `flex-wrap: nowrap` interdit ce retour : le bloc de
 * texte se comprime et c'est la date qui passe à la ligne, à l'intérieur, là où
 * c'est sans conséquence.
 *
 * Le logo rétrécit en même temps, sinon il mangerait la largeur qu'il faut au
 * nom. Les 100 px d'origine sont posés en attribut sur l'image par le bloc
 * « Logo du site » : on les redéfinit ici, en laissant la hauteur suivre.
 */
@media ( max-width: 900px ) {
	.mce-lockup {
		flex-wrap: nowrap;
		gap: 18px;
	}

	/*
	 * Sans retour à la ligne, le logo devient un élément flex compressible et
	 * la colonne de texte, plus large que la place disponible, le réduit à
	 * presque rien — il disparaît au lieu de passer dessous. On lui interdit
	 * donc de se contracter : c'est le texte qui cède.
	 */
	.mce-lockup .wp-block-site-logo {
		flex: 0 0 auto;
	}

	.mce-lockup .wp-block-site-logo img {
		width: 68px;
		height: auto;
	}

	.mce-marque__date {
		margin-top: 10px;
	}

}

/*
 * Menu principal replié sur deux rangs.
 *
 * Les cinq entrées cessent de tenir sur une ligne bien avant le volet mobile du
 * cœur, qui n'apparaît qu'à 600 px : la bascule se produit vers 1 100 px, d'où
 * ce seuil. Sur deux rangs, l'écart de bloc du thème ajoute 26 px entre les
 * rangs, qui s'additionnent aux 19 px de marge haute et basse de chaque entrée —
 * près de 80 px de vide, et deux rangs qui ne se lisent plus comme un menu. On
 * supprime l'écart et on resserre la marge ; les 15 px de part et d'autre de
 * chaque entrée séparent encore largement les libellés.
 */
@media ( max-width: 1100px ) {
	.mce-nav .wp-block-navigation {
		gap: 0;
	}

	.mce-nav .wp-block-navigation-item__content {
		padding: 13px 15px;
	}
}

@media ( max-width: 600px ) {
	.mce-lockup .wp-block-site-logo img {
		width: 54px;
	}

	/*
	 * La date est longue : à 320 px elle occupe cinq lignes et déséquilibre le
	 * bloc face au logo. Un cran de corps en moins la ramène à trois.
	 */
	.mce-marque__date {
		font-size: 11px;
		letter-spacing: 0.12em;
	}

	/*
	 * Trois liens utilitaires ne tiennent pas sur une ligne à cette largeur.
	 * Alignés à droite, le dernier tombe seul sous les deux autres et la
	 * colonne paraît cassée ; centrés, les deux rangs se lisent comme un choix.
	 */
	.mce-utilitaire .wp-block-navigation {
		justify-content: center;
	}

	/*
	 * Le bouton d'ouverture du menu est une cible tactile : la cible de 24 px
	 * que pose le cœur est sous le seuil confortable, et rien ne la désigne
	 * comme un bouton. On l'agrandit sans lui ajouter de fond, la direction
	 * n'ayant pas de bouton fantôme dans l'en-tête.
	 */
	.mce-nav .wp-block-navigation__responsive-container-open {
		padding: 12px;
		margin: 4px 0;
	}

	.mce-nav .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
	}
}


/* ==========================================================================
   07 bis. QUESTIONS DÉPLIABLES
   Habillage du bloc « Détails » du cœur, c'est-à-dire de `<details>` et
   `<summary>`. Le dépliage est donc natif : pas une ligne de JavaScript, le
   clavier et les lecteurs d'écran fonctionnent sans qu'on s'en occupe, et le
   contenu replié reste dans la page — imprimable, trouvable par la recherche du
   navigateur.

   Rien de tout ceci ne s'exprime dans `theme.json` : un filet sur un seul côté,
   le remplacement du chevron par un signe, et l'état ouvert sont hors de ce que
   le format sait décrire pour ce bloc. D'où le passage par la feuille, selon la
   règle du projet — le CSS ne porte que ce que `theme.json` ne peut pas dire.

   Aucune classe propre n'est employée : n'importe quel bloc « Détails » posé
   dans l'éditeur adopte ce rendu, sur n'importe quelle page.
   ========================================================================== */
.wp-block-details {
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
}

.wp-block-details > summary {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 19px 16px;
	cursor: pointer;
	font-family: var( --font-display );
	font-size: 19px;
	line-height: 1.25;
	text-transform: uppercase;
	background: var( --mce-paper );
	transition: background-color var( --dur ) var( --ease );
}

/*
 * Le triangle par défaut est retiré des deux façons qui coexistent encore :
 * `::marker` sur les moteurs récents, `::-webkit-details-marker` pour les
 * versions de WebKit qui l'ignorent. `list-style: none` couvre Firefox.
 */
.wp-block-details > summary {
	list-style: none;
}

.wp-block-details > summary::marker,
.wp-block-details > summary::-webkit-details-marker {
	display: none;
	content: "";
}

/*
 * Le signe est décoratif : il double l'état que `<details>` annonce déjà aux
 * technologies d'assistance. Posé en `::after`, il reste hors du texte lu.
 *
 * Il n'emprunte pas la police d'affichage, contrairement au reste du résumé :
 * Anton dessine un plus et un moins très petits au regard de ses capitales, et
 * le signe s'y perdait. La police de texte les proportionne correctement.
 */
.wp-block-details > summary::after {
	content: "+";
	flex: none;
	font-family: var( --font-body );
	font-size: 26px;
	font-weight: 400;
	line-height: 1;
	color: var( --mce-acc );
}

.wp-block-details[ open ] > summary {
	background: var( --mce-paper-2 );
}

.wp-block-details[ open ] > summary::after {
	content: "−";
}

/*
 * La réponse. La marge plutôt que la marge intérieure, pour qu'une réponse en
 * plusieurs paragraphes garde son interligne normal au lieu de cumuler les
 * marges intérieures de chaque bloc.
 */
.wp-block-details > :not( summary ) {
	margin-inline: 16px;
	max-width: 70ch;
	font-family: var( --font-label );
	font-size: 15px;
	line-height: 1.75;
	color: var( --mce-n600 );
}

.wp-block-details > summary + * {
	margin-top: 12px;
}

.wp-block-details > :not( summary ):last-child {
	margin-bottom: 20px;
}

@media ( max-width: 600px ) {
	.wp-block-details > summary {
		font-size: 17px;
		padding: 16px 12px;
	}

	.wp-block-details > :not( summary ) {
		margin-inline: 12px;
	}
}


/* ==========================================================================
   07 ter. MOSAÏQUE DE GALERIE
   Habillage du bloc « Galerie » du cœur, posé par le style de bloc
   « Mosaïque » — donc par la classe `is-style-mce-mosaique`, qu'un clic dans le
   panneau « Styles » suffit à mettre.

   Les sélecteurs reconnaissent aussi `mce-mosaique`, la classe qu'il fallait
   écrire à la main avant que le style existe : trois pages publiées la portent.
   D'où le `:is( … , … )` plutôt que la paire de sélecteurs employée ailleurs
   dans cette feuille — les sélecteurs de cette section sont trop longs pour
   être doublés lisiblement, et `:is()` garde la spécificité d'une classe, ce
   dont on a besoin pour passer devant les règles du bloc Galerie.
   Le dépliage en grand est celui de WordPress — l'attribut `lightbox` du bloc
   Image — donc pas de JavaScript à nous : les flèches du clavier et la
   fermeture par Échap viennent avec.

   La grille reprend le filet d'un pixel du reste du système : c'est le fond
   gris qui transparaît entre les cellules, pas une bordure sur chacune.

   Une vignette sur sept occupe quatre cases. `grid-auto-flow: dense` comble
   les trous que ces grandes cellules laisseraient derrière elles — sans lui,
   la mosaïque se troue dès qu'une grande vignette ne rentre pas en fin de
   rangée. C'est ce qui remplace l'algorithme de placement du comp.
   ========================================================================== */
/* ==========================================================================
   EN-TÊTE D'ÉDITION
   Le titre d'une page d'édition ne se compose pas comme les autres : un surtitre
   annonce le rang, puis le titre tombe sur deux lignes dont la seconde passe en
   couleur d'édition.

   Il vit dans le contenu et non dans le gabarit, parce qu'aucun bloc « Titre de
   page » ne sait porter un surtitre au-dessus de lui ni couper son texte en deux
   couleurs. D'où le gabarit `page-edition`, qui retire le titre automatique et
   laisse la page composer le sien.

   Le rang est annoncé par l'étiquette à filet du thème, jamais par une pastille
   en aplat. La charte du comp en pose une ; le système a tranché l'inverse plus
   haut dans cette feuille, et c'est lui qui gagne : un aplat d'accent portant des
   capitales de même graisse et de même interlettrage qu'un bouton se lit comme un
   bouton, et le lecteur ne sait plus ce qui se clique. Seuls les boutons portent
   un aplat.
   ========================================================================== */
.mce-fil {
	font-family: var( --font-label );
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mce-n400 );
}

.mce-fil a {
	color: var( --mce-n400 );
	text-decoration: none;
}

.mce-fil a:hover {
	color: var( --mce-acc );
	text-decoration: underline;
}

/* Le dernier maillon est la page courante : il ne mène nulle part, donc il ne
   se distingue que par l'encre. */
.mce-fil strong {
	color: var( --mce-ink );
	font-weight: inherit;
}

.mce-titre-edition {
	font-family: var( --font-display );
	font-weight: 400;
	font-size: clamp( 38px, 7vw, 84px );
	line-height: 0.94;
	text-transform: uppercase;
	margin-block: 20px 0;
}

/* La seconde ligne du titre porte la couleur de l'édition. */
.mce-titre-edition em {
	font-style: normal;
	color: var( --mce-acc );
}

.mce-edition-intro {
	font-family: var( --font-label );
	font-size: 17px;
	line-height: 1.75;
	color: var( --mce-n600 );
	max-width: 62ch;
	margin-block: 24px 0;
}


/* ==========================================================================
   BANDE DE CHIFFRES
   Quatre données d'un coup d'œil, en tête d'une page d'édition. C'est une
   grille à filets comme les autres, mais pas la grille de fiches : celle-ci
   impose 180 px de hauteur et 26 px de marge pour loger un texte, ce qui est
   hors de proportion pour une étiquette et un nombre.

   `auto-fit` plutôt qu'un nombre fixe de colonnes : la bande passe d'elle-même
   de quatre à deux puis à une, sans requête média — le nombre de cases n'est
   pas toujours quatre.
   ========================================================================== */
.mce-chiffres {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: var( --rule-hair );
	background: var( --mce-n200 );
	border: var( --rule-hair ) solid var( --mce-n200 );
}

.mce-chiffres > * {
	background: var( --mce-paper );
	padding: 20px;
}

.mce-chiffres__valeur {
	font-family: var( --font-display );
	font-size: 32px;
	line-height: 1.1;
	margin-block: 6px 0;
}


/*
 * Le bloc Galerie est nativement un conteneur flex, et ses propres règles sont
 * écrites pour résister : la largeur des vignettes passe par
 * `figure.wp-block-image:not(#individual-image)`, dont le `:not()` d'identifiant
 * gonfle la spécificité exprès. On reprend donc le même sélecteur, préfixé de
 * notre classe — ce qui suffit à passer devant sans recourir à `!important`.
 */
.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ),
.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).is-layout-flex {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	grid-auto-rows: 152px;
	grid-auto-flow: dense;
	gap: var( --rule-hair );
	background: var( --mce-n200 );
	border: var( --rule-hair ) solid var( --mce-n200 );
}

.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).has-nested-images figure.wp-block-image:not( #individual-image ) {
	width: auto;
	max-width: none;
	margin: 0;
	flex-grow: 0;
	height: 100%;
	min-width: 0;
}

/* Une vignette sur sept occupe quatre cases. */
.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).has-nested-images figure.wp-block-image:nth-child( 7n + 1 ):not( #individual-image ) {
	grid-column: span 2;
	grid-row: span 2;
}

/*
 * `cover` plutôt que `contain` : les photos sont pour deux tiers en portrait
 * et pour un tiers en paysage. Les contenir laisserait des bandes vides de
 * proportions changeantes, et la mosaïque perdrait son alignement.
 */
.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var( --mce-paper-2 );
}

/*
 * Le survol désigne la vignette sans la déplacer : un liseré posé à
 * l'intérieur, qui ne modifie pas la place occupée dans la grille.
 */
:is( .mce-mosaique, .is-style-mce-mosaique ) figure.wp-block-image:hover img,
:is( .mce-mosaique, .is-style-mce-mosaique ) figure.wp-block-image:focus-within img {
	outline: var( --rule-mark ) solid var( --mce-acc );
	outline-offset: calc( var( --rule-mark ) * -1 );
}

@media ( max-width: 900px ) {
	.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ),
	.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).is-layout-flex {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		grid-auto-rows: 132px;
	}
}

@media ( max-width: 600px ) {
	.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ),
	.wp-block-gallery:is( .mce-mosaique, .is-style-mce-mosaique ).is-layout-flex {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		grid-auto-rows: 116px;
	}
}


/* ==========================================================================
   08. COMPATIBILITÉ — composants de la direction précédente
   Ces classes sont encore écrites dans du contenu publié. On ne les supprime
   pas : on les rhabille. Elles perdent donc l'ombre, l'angle arrondi et les
   teintes de l'ancien système, et adoptent le filet d'un pixel.
   Les styles de bloc correspondants ne sont plus proposés dans l'éditeur.
   ========================================================================== */

/* Carte à vignette : image en haut, texte en bas. */
.mce-card {
	background: var( --mce-paper );
	border: var( --rule-hair ) solid var( --mce-n200 );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: background-color var( --dur ) var( --ease );
}

.mce-card:hover,
.mce-card:focus-within {
	background: var( --mce-paper-2 );
}

/*
 * Hauteur fixe, pas un minimum : c'est elle qui garantit que plusieurs cartes
 * côte à côte gardent la même ligne de partage, quelles que soient les
 * proportions des photos. Le recadrage est fait par `object-fit`.
 */
.mce-card__media {
	height: 150px;
	border-bottom: var( --rule-hair ) solid var( --mce-n200 );
	background: var( --mce-paper-2 );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 10px;
	letter-spacing: var( --ls-label );
	color: var( --mce-n400 );
	text-transform: uppercase;
	margin: 0;
}

/*
 * Les teintes de l'ancien système n'ont pas d'équivalent : la direction
 * « Presse » n'admet que le papier, le papier cassé et l'accent. Les deux
 * variantes retombent donc sur le fond commun.
 */
.mce-card__media--yellow,
.mce-card__media--soft {
	background: var( --mce-paper-2 );
}

.mce-card__media > * { margin-block: 0; }

.mce-card__media .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.mce-card__media .wp-block-image img,
.mce-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mce-card__body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mce-card__body > * { margin-block: 0; }

.wp-block-column > .mce-card { height: 100%; }

/* Lignes tarifaires : reprennent le rendu des rangées de tarif. */
.mce-price {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	padding: 18px;
	border: var( --rule-hair ) solid var( --mce-n200 );
}

.mce-price > * { margin-block: 0; }

.mce-price__name {
	font-family: var( --font-display );
	font-size: 19px;
	text-transform: uppercase;
	margin: 0;
}

.mce-price__desc {
	font-family: var( --font-label );
	font-size: 13px;
	color: var( --mce-n600 );
	margin: 0;
}

.mce-price__value {
	font-family: var( --font-display );
	font-size: 26px;
	color: var( --mce-acc );
	margin: 0;
}

/* Tuiles de chiffres : deviennent des cellules à filet. */
.mce-stat {
	background: var( --mce-paper );
	border: var( --rule-hair ) solid var( --mce-n200 );
	padding: 20px;
}

.mce-stat--ink {
	background: transparent;
	border-color: var( --rule-on-ink );
	color: var( --mce-paper );
}

.mce-stat__label,
.mce-stat-label {
	font-family: var( --font-label );
	font-weight: 700;
	font-size: 11px;
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --mce-n400 );
	margin: 0;
}

.mce-stat--ink .mce-stat__label,
.mce-stat--ink .mce-stat-label {
	color: var( --mce-acc );
}

.mce-stat__value,
.mce-stat-value {
	font-family: var( --font-display );
	font-size: 21px;
	line-height: 1.15;
	text-transform: uppercase;
	margin: 8px 0 0;
}

.mce-stat__meta,
.mce-stat-note {
	font-family: var( --font-label );
	font-size: 13px;
	line-height: 1.7;
	color: var( --mce-n600 );
	margin: 0;
}

.mce-stat--ink .mce-stat__meta,
.mce-stat--ink .mce-stat-note {
	color: var( --text-on-ink );
}

/* Mention secondaire sous un bloc de contenu. */
.mce-help {
	font-family: var( --font-label );
	font-size: 13px;
	line-height: 1.7;
	color: var( --mce-n400 );
}


/* ==========================================================================
   09. PLANCHER DE QUALITÉ
   ========================================================================== */
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-group.is-style-mce-cellule,
	.wp-block-column.mce-cellule,
	ul.is-style-mce-rangs li,
	.mce-rangs li,
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

@media print {
	.mce-nav { position: static; }

	.wp-block-group.is-style-mce-encadre-encre,
	.wp-block-group.is-style-mce-sticker-ink,
	.wp-block-group.is-style-mce-panneau,
	.mce-footer {
		background: var( --mce-paper );
		color: var( --mce-ink );
	}
}