/**
 * Memorial Book — feuille du thème.
 *
 * ==========================================================================
 * DIRECTION 2.2 : « SURFACE ET CALME » — l'écran, plus le papier
 * ==========================================================================
 *
 * La direction précédente s'appelait « papier et lumière » : fonds crème,
 * filets sable, accent safran. Elle imitait l'objet vendu. On la retire, et
 * l'argument tient en une phrase — le livre est en papier, la page de vente
 * ne l'est pas.
 *
 * Ce qui rassure quelqu'un au moment de confier l'histoire de son père à un
 * logiciel, ce n'est pas une texture d'archive : c'est de reconnaître un
 * outil tenu. D'où la grammaire de cette version, empruntée au système
 * TailAdmin — celui-là même que porte l'administration de l'extension :
 *
 *   - des CARTES blanches posées sur une bande gris clair ;
 *   - un filet d'un pixel, `--mbk-line`, plutôt qu'une ombre lourde ;
 *   - une ombre courte et basse, `--mbk-shadow`, qui décolle sans faire
 *     flotter ;
 *   - un rayon de 10 px, franc, jamais de pilule ;
 *   - un seul accent — indigo, violet ou bleu-gris — employé rarement.
 *
 * Le bénéfice n'est pas qu'esthétique : la vitrine et l'espace client
 * cessent d'appartenir à deux mondes visuels. Le client qui s'inscrit ne
 * change plus de produit en changeant de page.
 *
 * Ce qui NE change pas : la typographie. Assistant et Frank Ruhl Libre
 * portent l'hébreu et le latin de la même main. DM Sans, la police de
 * TailAdmin, n'a pas d'hébreu — la prendre ferait retomber toute la moitié
 * hébraïque du produit sur un substitut système. On n'échange pas une langue
 * contre une nuance.
 *
 * ==========================================================================
 * CONTRAT DE PRÉFIXES
 * ==========================================================================
 *
 * Cette feuille ne contient QUE des sélecteurs `.mbk-`. Un `grep biotl-` ici
 * doit rester vide : les composants de l'extension ne s'habillent pas depuis
 * le thème, sous peine de casser au premier changement de version.
 *
 * LES COULEURS, ELLES, NE SONT PLUS EMPRUNTÉES À L'EXTENSION — et c'est le
 * second renversement de cette version. Jusqu'ici le thème lisait les jetons
 * `--biotl-v-*` de la vitrine de l'extension : nuit méditerranéenne, os,
 * safran. Une palette dérivée de TailAdmin ne peut pas se replier sur du
 * safran sans devenir un mélange de deux systèmes — exactement le défaut que
 * le commentaire des palettes, côté PHP, décrit pour les palettes
 * incomplètes. La vitrine possède donc sa couleur, entièrement.
 *
 * Les jetons de POLICE restent lus : `--biotl-font-ui` et
 * `--biotl-font-serif` ne portent pas d'univers visuel, seulement un repli
 * système, et les deux paquets ont tout intérêt à s'accorder dessus.
 *
 * ==========================================================================
 * CLASSES D'ÉTAT PILOTÉES PAR LE SCRIPT — à ne jamais perdre lors d'une
 * réécriture de cette feuille :
 *   .is-compact   (en-tête réduit au défilement)
 *   .is-open      (menu mobile ouvert)
 *   .is-visible   (rappel d'inscription affiché)
 *   [aria-expanded="true"] sur le bouton de menu
 * ==========================================================================
 */

/* ==========================================================================
   JETONS — DÉCLARÉS SUR `:root`, ET NULLE PART AILLEURS
   ==========================================================================

   Ce bloc était sur `.mbk-site`, c'est-à-dire sur le `<body>`. C'était un
   piège, et il avait déjà refermé : l'écran de réglages écrit la palette
   choisie dans un `<style>` en ligne, sur `:root`, donc sur le `<html>`.

   Une propriété personnalisée S'HÉRITE. Le `<html>` recevait bien la couleur
   choisie dans l'administration… puis le `<body>` la redéclarait aussitôt avec
   la valeur écrite en dur ici, et l'écrasait pour toute la page. Ce n'est pas
   une question de spécificité — les deux sélecteurs pèsent le même poids — mais
   d'ÉLÉMENT : le plus proche gagne, toujours. Changer de palette dans
   l'administration ne changeait donc rien, sauf pour les trois jetons qui
   étaient, eux, déjà sur `:root`. Une palette à moitié appliquée : le pire des
   deux mondes, et rigoureusement invisible en lisant le code de l'un ou de
   l'autre fichier isolément.

   Un jeton, un endroit. Si vous ajoutez une variable, elle vient ICI.

   Les valeurs sont des REPLIS. En marche normale, `Options::palette()` les
   remplace toutes — d'où l'exigence, côté PHP, qu'une palette déclare la série
   complète et non quelques couleurs choisies.

   Ces replis sont ceux de la palette INDIGO, la palette par défaut. Ils ne
   lisent plus les jetons `--biotl-v-*` de l'extension : voir l'en-tête de
   fichier — une palette dérivée de TailAdmin ne peut pas se replier sur du
   safran sans devenir un mélange de deux systèmes.
   ========================================================================== */

:root {
	/* Les deux bandes sombres : en-tête, pied de page, appel final.
	   `#1c2434` est le `boxdark` de TailAdmin, `#24303f` son second niveau. */
	--mbk-night: #1c2434;
	--mbk-night-2: #24303f;

	/* LA SURFACE, ET LE FOND SUR LEQUEL ELLE EST POSÉE.

	   `paper` est BLANC : c'est la carte, l'encadré, le bouton clair — et
	   c'est aussi la couleur du texte posé sur les bandes sombres, d'où
	   l'exigence qu'il reste le plus clair des deux.

	   `paper_2` est le gris `#f1f5f9` (slate-100) : une section sur deux, et
	   les encadrés qui doivent se distinguer d'une carte blanche voisine. */
	--mbk-paper: #ffffff;
	--mbk-paper-2: #f1f5f9;

	--mbk-line: #e2e8f0;
	--mbk-line-strong: #7c8da6;
	--mbk-ink: #1c2434;
	--mbk-ink-2: #334155;
	--mbk-ink-3: #5d6c82;

	/* L'accent sur fond clair. */
	--mbk-accent: #3c50e0;

	/* LE MÊME ACCENT, ÉCLAIRCI POUR LES FONDS SOMBRES.

	   Un accent choisi pour être lisible sur du blanc est, par construction,
	   trop foncé pour se détacher de la nuit : `#3c50e0` sur `#1c2434` donne
	   2,52:1, là où une marque d'état en demande 3 et un texte 4,5. Deux
	   jetons, donc, et non un seul éclairci « à l'œil » au cas par cas dans
	   les règles. `#9aa9ff` sur la nuit : 7,03:1. */
	--mbk-accent-soft: #9aa9ff;

	/* ==================================================================
	   DEUX JETONS DE PLUS AUTOUR DE L'ACCENT
	   ==================================================================

	   `--mbk-accent` est la couleur de REMPLISSAGE : le fond d'un bouton, la
	   pastille d'une etape, la bordure d'une offre. Elle appartient a la
	   marque, et rien ne la deplace.

	   `--mbk-on-accent` est ce qu'on ECRIT DESSUS. Blanc par defaut, parce
	   que les trois accents livres sont fonces. Un exploitant qui saisit un
	   jaune d'entreprise obtient de PHP un jeton NOIR : le jaune reste le
	   jaune, et le libelle du bouton d'inscription reste lisible. Sans ce
	   jeton, la seule reponse possible aurait ete de refuser sa couleur.

	   `--mbk-accent-ink` est l'accent employe COMME TEXTE ou comme trait sur
	   le papier — sur-titres, pictogrammes, anneau de focus. Aucune inversion
	   n'y est possible : c'est la couleur elle-meme qui doit descendre a
	   4,5:1. Sur les trois palettes livrees, elle vaut l'accent au pixel pres.

	   REGLE : un accent en `background` va avec `--mbk-on-accent` en `color`.
	   Un accent en `color` ou en `outline` sur fond clair s'ecrit
	   `--mbk-accent-ink`. `--mbk-accent` seul, en couleur de texte, est un
	   bogue en attente d'un client au jaune vif. */
	--mbk-on-accent: var(--mbk-paper);
	--mbk-accent-ink: var(--mbk-accent);

	/* L'OMBRE. Une seule, courte et basse — le `shadow-default` de TailAdmin.

	   Une carte blanche posée sur une section blanche a besoin de quelque
	   chose ; le filet d'un pixel seul la rend plate, et une ombre longue la
	   fait flotter au-dessus d'une page qui parle d'un mort. Trois pixels de
	   diffusion suffisent à décoller, et se voient à peine. */
	--mbk-shadow: 0 1px 3px rgba(28, 36, 52, 0.08);
	--mbk-shadow-lift: 0 6px 16px -8px rgba(28, 36, 52, 0.22);

	/* Le filet SUR fond sombre. Dernier endroit qui empruntait une couleur à
	   l'extension (`--biotl-v-line-night`) : une bande d'en-tête qui garde le
	   bleu-nuit de l'extension au-dessus d'un corps de page gris TailAdmin,
	   c'est la couture qu'on voit en premier. */
	--mbk-line-night: #2e3a4c;

	/* ==================================================================
	   L'ENCRE POSÉE SUR LA NUIT — trois niveaux, comme sur le papier
	   ==================================================================

	   Ces trois jetons n'existaient pas, et leur absence a coûté cher : les
	   liens du menu principal étaient écrits en `--mbk-ink-2`, c'est-à-dire
	   avec l'encre du PAPIER, sur la bande de nuit de l'en-tête. Mesuré à
	   1,27:1 dans les trois palettes — un menu de navigation invisible, en
	   haut de chaque page, pendant plusieurs versions.

	   La cause n'est pas l'étourderie : c'est qu'il n'y avait rien d'autre à
	   écrire. Le socle offrait `ink`, `ink-2`, `ink-3` — trois niveaux d'encre
	   sombre — et un unique `paper` blanc. Devant un texte secondaire sur fond
	   sombre, il n'existait aucun jeton juste ; chaque règle inventait donc son
	   propre `color-mix`, ou se trompait de famille.

   	   Trois niveaux, en miroir exact de l'encre du papier :

	     `on-night`    le titre, la marque, l'élément courant     — 15,4:1
	     `on-night-2`  le texte courant, les liens du menu        —  8,4:1
	     `on-night-3`  le secondaire : langues, notes de pied     —  5,7:1

	   Ils sont exprimés en `color-mix` sur `--mbk-paper` plutôt qu'en gris
	   figés : une palette qui change son papier emporte ses trois niveaux avec
	   elle, sans qu'on ait à les recalculer. */
	--mbk-on-night: var(--mbk-paper);
	--mbk-on-night-2: color-mix(in srgb, var(--mbk-paper) 78%, transparent);
	--mbk-on-night-3: color-mix(in srgb, var(--mbk-paper) 62%, transparent);

	/* LE CONTOUR D'UN CONTRÔLE POSÉ SUR LA NUIT.
	
	   Distinct de `--mbk-line-night`, qui SÉPARE deux surfaces et n'a donc
	   qu'à être devinée. Ici la bordure EST l'objet : c'est elle qui dit où
	   commence le bouton et où l'on peut appuyer. Le critère 1.4.11 de WCAG
	   demande 3:1 pour cela.
	
	   Mesuré : `--mbk-line-night` sur l'en-tête donnait 1,14:1 — le bouton de
	   menu du mobile n'avait, littéralement, pas de contour. 45 % de papier en
	   donnent 3,4:1 : visible sans crier. */
	--mbk-on-night-line: color-mix(in srgb, var(--mbk-paper) 45%, transparent);

	/* DEUX JETONS DE PLUS, ET LA RAISON EST LA MEME QUE POUR LES TROIS
	   PRECEDENTS.

	   `--mbk-night-hover` est le fond d'un controle survole sur la bande
	   sombre ; `--mbk-line-night-soft` est le filet de separation du pied de
	   page. Les deux etaient ecrits en `color-mix` DANS LA REGLE — un 10 %
	   ici, un 18 % la — c'est-a-dire exactement la pratique que le bloc
	   precedent decrit comme la cause du menu invisible : chaque regle
	   inventait sa nuance, et aucune n'etait mesurable.

	   PHP compose desormais les deux et les mesure : `night-hover` est ramene
	   au seuil si le texte blanc n'y tient pas, `line-night-soft` ne l'est pas
	   — c'est une separation decorative, et WCAG n'en exige rien.

	   REGLE PERMANENTE : plus aucun `color-mix` ni `rgba(255,255,255,…)` dans
	   une regle posee sur la nuit. Si une nuance manque, elle devient un jeton
	   mesure ici. Une nuance ecrite dans une regle est invisible a PHP, donc
	   invisible a la garde, donc livrable illisible. */
	--mbk-night-hover: color-mix(in srgb, var(--mbk-paper) 9%, var(--mbk-night));
	--mbk-line-night-soft: color-mix(in srgb, var(--mbk-paper) 18%, var(--mbk-night));

	/* Frank Ruhl Libre : le caractère du livre hébreu depuis 1908, avec son
	   compagnon latin. Assistant : une grotesque dessinée POUR l'hébreu, au
	   latin de même main. Une famille par rôle, servant les trois langues —
	   la thèse du produit appliquée à sa propre typographie. */
	--mbk-font: "Assistant", var(--biotl-font-ui, system-ui), sans-serif;
	--mbk-font-serif: "Frank Ruhl Libre", var(--biotl-font-serif, Georgia), serif;

	/* ==================================================================
	   LA POLICE DES TITRES EST UN AIGUILLAGE, PAS UNE FAMILLE
	   ==================================================================

	   Toutes les regles de titre lisent `--mbk-font-title`, jamais
	   directement l'une des deux piles. L'ecran de reglages n'a donc qu'un
	   seul jeton a rediriger pour faire basculer les dix-neuf titres du
	   theme de l'empattement au baton — au lieu de dix-neuf regles a
	   reecrire, dont on en oublierait deux. */
	--mbk-font-title: var(--mbk-font-serif);

	/* L'ECHELLE DE TEXTE, ET LES DEUX INTERLIGNES.

	   `--mbk-font-scale` multiplie la taille de la racine : toutes les
	   tailles de cette feuille etant en `rem`, elles suivent ensemble et
	   gardent leurs rapports. Voir la regle `html` juste apres ce bloc.

	   `--mbk-lh` est l'interligne du texte long, tel que l'exploitant le
	   choisit. `--mbk-lh-k` est le MEME reglage exprime en multiplicateur
	   de la valeur d'origine (1,70) : les paragraphes qui n'etaient pas a
	   1,70 — un chapeau a 1,60, une reponse de FAQ a 1,65 — s'ecrivent
	   `calc(1.6 * var(--mbk-lh-k))` et conservent leur ecart relatif. Sans
	   ce second jeton, ouvrir le reglage aurait aplati toute la page sur
	   une seule valeur d'interligne, c'est-a-dire detruit la hierarchie de
	   lecture en croyant l'ajuster. */
	/* L'ECHELLE GENERALE, puis l'echelle EFFECTIVE.

	   `--mbk-font-scale-base` porte le reglage general du site ;
	   `--mbk-font-scale` est ce que la regle `html` lit. Une langue qui
	   regle sa propre taille reecrit la seconde en MULTIPLIANT la premiere
	   (voir `Assets::language_declarations()`), de sorte qu'un site a 110 %
	   dont l'hebreu est a 90 % affiche l'hebreu a 99 % — et non a 90 %.

	   Sans ce dedoublement, regler la taille d'une langue effacerait le
	   reglage general au lieu de le corriger. */
	--mbk-font-scale-base: 1;
	--mbk-font-scale: var(--mbk-font-scale-base);
	--mbk-lh: 1.7;
	--mbk-lh-k: 1;

	/* Graisses. Les titres portent 700 par defaut ; le corps, 400. */
	--mbk-fw-body: 400;
	--mbk-fw-title: 700;

	/* L'approche des titres, EN SUPPLEMENT de celle que chaque regle
	   declare. Les grands titres sont deja resserres a -0,02em : le jeton
	   s'ajoute en `calc()` plutot que de remplacer, sinon le reglage par
	   defaut redresserait des titres dessines serres. */
	--mbk-ls-title: 0em;

	--mbk-header-h: 76px;
	--mbk-header-h-compact: 60px;
	--mbk-wrap: 1180px;

	/* Mesures de la vitrine. */
	/* EN PIXELS, ET NON EN `rem`. Une largeur en `rem` suivrait l'echelle de
	   texte : choisir « texte tres grand » elargirait la colonne d'autant, et
	   la ligne garderait exactement le meme nombre de caracteres. Le reglage
	   n'aurait alors rien change a ce qu'on lui demandait de changer. */
	--mbk-shell: 1152px;
	--mbk-shell-narrow: 737px;
	--mbk-gap: clamp(1rem, 3vw, 2rem);
	--mbk-section-y: clamp(3rem, 8vw, 6rem);
	/* 10 px, et non 14. TailAdmin tranche franc ; au-delà de douze, une carte
	   commence à ressembler à une bulle de messagerie. */
	--mbk-radius: 10px;

	/* Le rayon des BOUTONS, distinct de celui des cartes : on veut pouvoir
	   arrondir un bouton en pilule sans transformer les cartes en bulles. */
	--mbk-radius-btn: 8px;
}

/* ==========================================================================
   L'ECHELLE DE TEXTE — LA SEULE REGLE DE CETTE FEUILLE QUI VISE `html`
   ==========================================================================

   Le contrat de prefixes interdit les selecteurs generiques, et cette regle
   est l'exception qui le confirme : la taille de la racine EST la racine, il
   n'existe aucun element prefixe sur lequel la poser. Une echelle appliquee
   a `.mbk-site` ne toucherait aucun `rem`, puisque `rem` se mesure sur
   `html` et sur rien d'autre.

   Elle ne declare QUE `font-size`, et par un pourcentage : elle multiplie ce
   que le visiteur a regle dans son navigateur au lieu de l'ecraser. Un texte
   fixe en pixels sur la racine annule le reglage d'accessibilite de celui
   qui voit mal — c'est le manquement au critere 1.4.4, et il se commet
   presque toujours ici. */
html {
	font-size: calc(100% * var(--mbk-font-scale, 1));
}

/* LE FOND DE PAGE EST LE GRIS, PAS LE BLANC.

   C'est l'inversion qui fait basculer tout le reste dans la grammaire
   TailAdmin : la page est une table gris clair, et les contenus sont des
   cartes blanches posées dessus. Tant que le corps était blanc, une carte
   blanche n'existait pas — il ne restait qu'un filet pour la distinguer, et
   le bas des pages courtes était une grande étendue vide sans matière. */
.mbk-site {
	background: var(--mbk-paper-2);
	color: var(--mbk-ink);
	font-family: var(--mbk-font);
	font-weight: var(--mbk-fw-body);
	margin: 0;
}

/* Les articles et les pages ordinaires — hors vitrine — reposent sur du blanc
   plutôt que sur la table : un texte long se lit sur une page, pas sur un
   plan de travail. */
.mbk-page {
	background: var(--mbk-paper);
}

/* Aucune pile séparée pour l'hébreu, et c'est tout l'intérêt du choix
   typographique : Assistant et Frank Ruhl Libre contiennent les deux scripts,
   dessinés par la même main. L'hébreu et le latin ont donc la même couleur de
   gris sur la page — ce qu'aucune paire « fonte latine + substitut hébreu »
   n'obtient jamais. La règle qui existait ici n'a plus d'objet. */

/* Réset MINIMAL et PORTÉ. On ne style jamais `a`, `button` ou `h2` nus : ces
   sélecteurs frapperaient aussi les composants de l'extension, et l'on
   passerait la semaine à chercher pourquoi un bouton du portail a changé de
   couleur. */
.mbk-site *,
.mbk-site *::before,
.mbk-site *::after {
	box-sizing: border-box;
}

.mbk-sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mbk-skip {
	position: absolute;
	inset-block-start: -100px;
	inset-inline-start: 12px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--mbk-ink);
	color: var(--mbk-paper);
	text-decoration: none;
	border-radius: 2px;
}

.mbk-skip:focus {
	inset-block-start: 12px;
}

/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

.mbk-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 50;
	/* L'en-tête est une bande de NUIT posée sur la page claire : c'est ce qui
	   ancre l'identité dès le premier pixel, avant même que le visiteur ait lu
	   un mot. Un en-tête crème translucide sur fond crème ne dit rien. */
	/* OPAQUE, ET C'EST UN CORRECTIF DE LISIBILITE AUTANT QUE DE VITESSE.

	   L'en-tete etait a 94 % d'opacite, avec un flou d'arriere-plan. Tant que
	   la nuit etait tres sombre, les 6 % de page qui transparaissaient ne se
	   voyaient pas. Des que l'exploitant choisit sa propre nuit, ils comptent :
	   la bande rendue n'est plus `--mbk-night` mais un melange de la nuit et
	   de CE QUI PASSE DESSOUS — c'est-a-dire d'un contenu que PHP ne connait
	   pas et ne peut donc pas mesurer. La garde de contraste validait une
	   couleur qui n'etait jamais celle affichee.

	   Un en-tete translucide n'est pas mesurable, point. On le rend opaque.

	   `backdrop-filter` part avec : sans transparence il ne produit plus rien,
	   et il coutait une couche de composition maintenue pendant tout le
	   defilement — l'un des postes les plus chers de l'INP sur telephone. */
	background: var(--mbk-night);
	color: var(--mbk-paper);
	border-block-end: 1px solid var(--mbk-line-night);
	transition: block-size 160ms ease, box-shadow 160ms ease;
}

/* La barre d'administration de WordPress est elle-même fixe : sans ce
   décalage, l'en-tête collant passerait dessous et masquerait le menu du
   site pour l'administrateur connecté. */
.admin-bar .mbk-header {
	inset-block-start: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mbk-header {
		inset-block-start: 46px;
	}
}

.mbk-header__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	inline-size: 100%;
	max-inline-size: var(--mbk-wrap);
	min-block-size: var(--mbk-header-h);
	margin-inline: auto;
	padding-inline: 24px;
	transition: min-block-size 160ms ease;
}

/*
 * L'OMBRE DE L'EN-TÊTE COMPACT — une ombre, pas un filet clair.
 *
 * La règle posait `0 1px 0 0 var(--mbk-line)`, c'est-à-dire un filet GRIS
 * CLAIR sous une barre presque noire, au-dessus d'une page claire. Invisible
 * des deux côtés : on ne le voyait ni contre la barre, ni contre la page. Il
 * datait de la 2.0, quand l'en-tête était crème.
 *
 * Ce qu'on veut dire ici est « cette barre flotte au-dessus du contenu qui
 * défile dessous ». Cela s'écrit avec une ombre portée, et la teinte de la
 * nuit plutôt qu'un noir pur : une ombre neutre sous une barre bleu-nuit se
 * voit comme une salissure.
 */
.mbk-header.is-compact {
	box-shadow: 0 8px 24px -16px rgba(28, 36, 52, .55);
}

.mbk-header.is-compact .mbk-header__inner {
	min-block-size: var(--mbk-header-h-compact);
}

.mbk-brand__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--mbk-paper);
}

.mbk-brand__mark {
	display: inline-flex;
	color: var(--mbk-accent-soft);
}

.mbk-brand__name {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	font-size: 1.25rem;
	letter-spacing: calc(-.01em + var(--mbk-ls-title));
}

.mbk-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-inline-start: auto;
}

/* ==========================================================================
   LANGUES
   ========================================================================== */

.mbk-langs {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.mbk-langs__item {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 2px;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--mbk-on-night-3);
}

.mbk-langs__item:hover {
	color: var(--mbk-on-night);
	background: var(--mbk-night-2);
}

/* La langue courante se marque par le POIDS et un filet, pas seulement par la
   couleur : trois libellés courts dont un teinté passent inaperçus. */
.mbk-langs__item.is-current {
	color: var(--mbk-paper);
	font-weight: 700;
	box-shadow: inset 0 -2px 0 0 var(--mbk-accent-soft);
}

.mbk-langs__short {
	display: none;
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */

/* LA DÉFINITION DE `.mbk-btn` EST PLUS BAS, EN UN SEUL ENDROIT.

   Elle vivait ici, puis la vitrine en a écrit une seconde à la fin du fichier.
   Deux blocs pour la même classe dans la même feuille : le dernier gagne, en
   silence, et l'on passe une journée à se demander pourquoi la couleur qu'on
   modifie ne bouge pas. La règle unique est à la section « Boutons » de la
   partie vitrine ; il n'y en a pas d'autre, et il ne doit pas y en avoir. */

/* Le bouton d'inscription de l'EN-TÊTE ne se coupe JAMAIS.

   Deux libellés dans le même bouton : le long sur grand écran, le court sur
   téléphone. Ni l'un ni l'autre ne passe à la ligne, et le bouton ne peut pas
   être compressé par ses voisins — c'est le seul élément de cette page dont
   dépend le chiffre d'affaires.

   `mbk-navcta` ET NON `mbk-cta` : la vitrine a introduit une SECTION d'appel
   final qui s'appelle `.mbk-cta`, avec un fond sombre et six rem de padding
   vertical. Les deux classes se seraient rencontrées sur ce bouton d'en-tête,
   qui serait devenu un bloc noir haut de cent pixels dans la barre de
   navigation. Un nom, une chose. */
.mbk-navcta {
	flex: 0 0 auto;
	white-space: nowrap;
}

.mbk-navcta__short {
	display: none;
}

.mbk-link-quiet {
	color: var(--mbk-on-night-3);
	font-size: 0.9375rem;
	text-decoration: none;
}

.mbk-link-quiet:hover {
	color: var(--mbk-paper);
	text-decoration: underline;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/*
 * LE BOUTON DE MENU DU MOBILE — le contrôle le plus important de l'en-tête sur
 * téléphone, et il n'avait pas de contour visible.
 *
 * Sa bordure empruntait `--mbk-line-night`, le filet qui sépare l'en-tête de
 * la page : 1,14:1 sur la bande de nuit. Les trois barres blanches se voyaient,
 * la ZONE où appuyer non — et sur un écran tactile, c'est la zone qui compte.
 *
 * 44 px et non 40 : c'est la cible confortable du critère 2.5.5, et c'est la
 * même hauteur que les entrées du menu qu'il ouvre. Deux contrôles voisins de
 * hauteurs différentes se lisent comme un défaut d'alignement.
 */
.mbk-burger {
	display: none;
	align-items: center;
	justify-content: center;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--mbk-on-night-line);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	color: var(--mbk-on-night);
	transition: border-color 140ms ease, background 140ms ease;
}

.mbk-burger:hover,
.mbk-burger[aria-expanded="true"] {
	border-color: var(--mbk-on-night);
	background: var(--mbk-night-hover);
}

.mbk-burger__bars,
.mbk-burger__bars::before,
.mbk-burger__bars::after {
	display: block;
	inline-size: 18px;
	block-size: 1.5px;
	background: currentColor;
	content: "";
	transition: transform 160ms ease, opacity 160ms ease;
}

.mbk-burger__bars::before {
	transform: translateY(-6px);
}

.mbk-burger__bars::after {
	transform: translateY(4.5px);
}

.mbk-burger[aria-expanded="true"] .mbk-burger__bars {
	background: transparent;
}

.mbk-burger[aria-expanded="true"] .mbk-burger__bars::before {
	transform: rotate(45deg);
}

.mbk-burger[aria-expanded="true"] .mbk-burger__bars::after {
	transform: rotate(-45deg) translateY(0);
}

.mbk-nav__list {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ==========================================================================
 * LE MENU VIT SUR LA NUIT, ET SON ENCRE DOIT VENIR DE LÀ
 * ==========================================================================
 *
 * Ces deux règles écrivaient `--mbk-ink-2` puis `--mbk-ink` : l'encre du
 * PAPIER, posée sur la bande de nuit. 1,27:1 dans les trois palettes — cinq
 * liens illisibles en haut de chaque page.
 *
 * L'erreur venait de la 2.0, quand l'en-tête était encore crème ; elle a
 * survécu au passage à la bande sombre parce que rien ne la signalait. Le banc
 * de mesure ne rendait pas l'en-tête, et la liste de paires de
 * `mesures-palettes.php` ne contenait pas « encre 2 sur nuit » — personne
 * n'avait l'intention de l'écrire.
 *
 * `tools/preview/mesures-contraste.mjs` mesure désormais chaque nœud de texte
 * de chaque écran rendu, en-tête et pied compris. Il ne peut plus être aveugle
 * à une combinaison qu'on n'a pas prévue, puisqu'il n'en prévoit aucune.
 */
.mbk-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 6px;
	color: var(--mbk-on-night-2);
	font-size: 0.9375rem;
	line-height: 1.2;
	text-decoration: none;
	transition: color 140ms ease;
}

.mbk-nav__list a:hover,
.mbk-nav__list a:focus-visible {
	color: var(--mbk-on-night);
}

/*
 * LE SOULIGNEMENT EST UN PSEUDO-ÉLÉMENT, PAS UNE BORDURE.
 *
 * Une bordure ajouterait deux pixels à la hauteur du lien au survol, et
 * ferait sauter toute la rangée. Le trait est donc posé hors du flux, et il
 * s'anime d'une transformation — la seule propriété que le navigateur
 * compose sans recalculer la mise en page.
 */
.mbk-nav__list a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -2px;
	block-size: 2px;
	background: var(--mbk-accent-soft);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 160ms ease;
}

.mbk-nav__list a:hover::after,
.mbk-nav__list a:focus-visible::after {
	transform: scaleX(1);
}

/*
 * LA PAGE COURANTE SE VOIT SANS SURVOL.
 *
 * `aria-current="page"` est la source de vérité — c'est ce que WordPress pose
 * et ce qu'un lecteur d'écran annonce. Les classes `current-menu-item` et
 * `current_page_item` sont conservées parce que tous les menus ne portent pas
 * l'attribut, notamment ceux rendus par un walker ancien.
 */
.mbk-nav__list .current-menu-item > a,
.mbk-nav__list .current_page_item > a,
.mbk-nav__list a[aria-current="page"] {
	color: var(--mbk-on-night);
}

.mbk-nav__list .current-menu-item > a::after,
.mbk-nav__list .current_page_item > a::after,
.mbk-nav__list a[aria-current="page"]::after {
	transform: scaleX(1);
}

/*
 * L'ANNEAU DE FOCUS DE LA BANDE SOMBRE.
 *
 * Le focus par défaut du navigateur est un trait sombre : posé sur la nuit, il
 * est invisible — le critère 2.4.7 tombe précisément là où l'on navigue au
 * clavier, dans la barre de navigation. On le repeint en clair pour tout ce
 * qui est focalisable DANS l'en-tête, une fois, plutôt que règle par règle.
 */
.mbk-header a:focus-visible,
.mbk-header button:focus-visible {
	outline: 2px solid var(--mbk-accent-soft);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mbk-nav__list a,
	.mbk-nav__list a::after {
		transition: none;
	}
}

/* ==========================================================================
   CONTENU ÉDITORIAL
   ========================================================================== */

.mbk-main {
	display: block;
	min-block-size: 40vh;
}

.mbk-page {
	padding-block: 64px 88px;
}

.mbk-page--center {
	text-align: center;
}

.mbk-page__inner {
	inline-size: 100%;
	max-inline-size: 760px;
	margin-inline: auto;
	padding-inline: 24px;
}

.mbk-page__title {
	margin: 0 0 12px;
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: calc(-.02em + var(--mbk-ls-title));
}

.mbk-page__meta,
.mbk-page__lead {
	margin: 0 0 24px;
	color: var(--mbk-ink-3);
}

.mbk-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-block-start: 32px;
}

/* Réset éditorial PORTÉ au contenu rédigé : ici, et nulle part ailleurs. */
.mbk-prose {
	font-size: 1.0625rem;
	line-height: var(--mbk-lh);
	color: var(--mbk-ink-2);
}

.mbk-prose > * + * {
	margin-block-start: 1.1em;
}

.mbk-prose h2,
.mbk-prose h3 {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	color: var(--mbk-ink);
	line-height: 1.25;
	margin-block-start: 1.8em;
}

.mbk-prose h2 { font-size: 1.6em; }
.mbk-prose h3 { font-size: 1.25em; }

.mbk-prose a {
	color: var(--mbk-ink);
	text-decoration: none;
	box-shadow: inset 0 -1px 0 0 var(--mbk-line-strong);
}

.mbk-prose a:hover {
	box-shadow: inset 0 -2px 0 0 var(--mbk-accent);
}

.mbk-prose ul,
.mbk-prose ol {
	padding-inline-start: 1.3em;
}

.mbk-prose li + li {
	margin-block-start: .4em;
}

.mbk-prose blockquote {
	margin-inline: 0;
	padding-inline-start: 20px;
	border-inline-start: 2px solid var(--mbk-accent);
	font-style: italic;
}

.mbk-list__item + .mbk-list__item {
	margin-block-start: 40px;
	padding-block-start: 40px;
	border-block-start: 1px solid var(--mbk-line);
}

.mbk-list__title {
	margin: 0 0 8px;
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.5rem;
}

.mbk-list__title a {
	color: var(--mbk-ink);
	text-decoration: none;
}

/* ==========================================================================
   AVIS D'ADMINISTRATION (extension absente)
   ========================================================================== */

.mbk-notice {
	inline-size: 100%;
	max-inline-size: 620px;
	margin: 80px auto;
	padding: 24px;
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-inline-start: 3px solid var(--mbk-accent);
	border-radius: 2px;
	color: var(--mbk-ink-2);
}

.mbk-notice__title {
	margin: 0 0 8px;
	font-weight: 700;
	color: var(--mbk-ink);
}

.mbk-notice__hint {
	margin-block-end: 0;
	font-size: 0.875rem;
	color: var(--mbk-ink-3);
}

/* ==========================================================================
   PIED DE PAGE
   ========================================================================== */

.mbk-footer {
	background: var(--mbk-night);
	color: var(--mbk-on-night-2);
}

.mbk-footer__inner {
	inline-size: 100%;
	max-inline-size: var(--mbk-wrap);
	margin-inline: auto;
	padding: 64px 24px 40px;
}

.mbk-footer__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block-end: 40px;
	border-block-end: 1px solid var(--mbk-line-night-soft);
}

.mbk-footer__line {
	margin: 0;
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: clamp(1.4rem, 3vw, 2rem);
	color: var(--mbk-paper);
}

/* Le bouton garde son safran dans le pied : c'est justement là qu'il doit
   rester reconnaissable. Safran sur nuit : 6,73:1. */
.mbk-footer .mbk-btn--primary:hover {
	background: var(--mbk-paper);
	color: var(--mbk-night);
}

.mbk-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	padding-block-start: 32px;
	font-size: 0.875rem;
}

.mbk-footer__brand {
	margin: 0;
	font-weight: 600;
	color: var(--mbk-on-night);
}

.mbk-footer__note {
	margin: 0;
	max-inline-size: 46ch;
}

.mbk-footer__note p {
	margin: 0;
}

.mbk-footer__legal {
	margin-inline-start: auto;
}

.mbk-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbk-footer__legal-list a {
	color: inherit;
	text-decoration: none;
}

/* `color: inherit` au repos : il prend `--mbk-on-night-2` du pied de page,
   qui est mesure. Le survol monte d'un cran, vers le jeton le plus clair —
   et non vers `--mbk-paper` brut, qui est la couleur du PAPIER et se trouve
   n'etre la bonne ici que par coincidence, tant que le papier reste blanc. */
.mbk-footer__legal-list a:hover,
.mbk-footer__legal-list a:focus-visible {
	color: var(--mbk-on-night);
	text-decoration: underline;
}

/* ==========================================================================
   RAPPEL D'INSCRIPTION (téléphone)
   ========================================================================== */

.mbk-sticky {
	position: fixed;
	inset-inline: 12px;
	inset-block-end: 12px;
	z-index: 60;
	display: none;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line-strong);
	border-radius: 3px;
	box-shadow: 0 12px 30px -12px rgba(33, 29, 23, .45);
	transform: translateY(120%);
	transition: transform 220ms ease;
}

.mbk-sticky.is-visible {
	transform: none;
}

.mbk-sticky__text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--mbk-ink-2);
}

.mbk-sticky__close {
	margin-inline-start: auto;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--mbk-ink-3);
	cursor: pointer;
}

@media (max-width: 780px) {

	.mbk-sticky {
		display: flex;
	}

	.mbk-header__inner {
		padding-inline: 16px;
		gap: 8px;
	}

	/* ORDRE DE SACRIFICE, mesuré à 390 px de large.
	   Ce qui cède en premier : le nom du site, qui n'est qu'un rappel — la
	   marque reste lisible par son symbole. Ce qui ne cède jamais : le bouton
	   d'inscription. Sans cette hiérarchie, les trois éléments se partagent la
	   place au prorata et le bouton se retrouve coupé à 53 % — constaté sur
	   capture, dans les trois langues. */
	.mbk-brand {
		min-inline-size: 0;
		flex: 0 1 auto;
		overflow: hidden;
	}

	.mbk-brand__name {
		display: none;
	}

	.mbk-header__actions {
		gap: 6px;
		min-inline-size: 0;
	}

	.mbk-navcta__long {
		display: none;
	}

	.mbk-navcta__short {
		display: inline;
	}

	.mbk-navcta {
		padding-inline: 14px;
		font-size: 0.875rem;
	}

	/* Le libellé long des langues cède la place au code court : sur 390 px,
	   « Français » et « English » côte à côte poussent le bouton
	   d'inscription hors de l'écran — et c'est le seul élément de cette page
	   qui doit rester visible en toutes circonstances. */
	.mbk-langs__long {
		display: none;
	}

	.mbk-langs__short {
		display: inline;
	}

	.mbk-link-quiet {
		display: none;
	}

	.mbk-burger {
		display: inline-flex;
	}

	/*
	 * ==================================================================
	 * LE PANNEAU MOBILE EST SOMBRE, ET C'EST UN CORRECTIF DOUBLE
	 * ==================================================================
	 *
	 * Il était `--mbk-paper` — blanc — et tombait d'une bande d'en-tête
	 * presque noire. Deux problèmes d'un coup :
	 *
	 * 1. VISUELLEMENT, c'est la couture que les commentaires de ce fichier
	 *    dénoncent ailleurs : un panneau clair suspendu à une barre de nuit
	 *    fait deux objets là où il n'y en a qu'un.
	 *
	 * 2. TECHNIQUEMENT, cela faisait vivre les liens du menu sur DEUX fonds
	 *    opposés selon la largeur de l'écran — un seul jeu de couleurs ne peut
	 *    pas être juste sur les deux. C'est même ce qui a fait survivre le
	 *    défaut : `--mbk-ink-2` était correct ici, en mobile, et illisible sur
	 *    le bureau. Une règle à moitié juste ne se corrige jamais.
	 *
	 * Le panneau prolonge donc la nuit de l'en-tête. Les liens gardent une
	 * seule couleur, quelle que soit la largeur.
	 */
	.mbk-nav {
		position: absolute;
		inset-inline: 0;
		inset-block-start: 100%;
		display: none;
		padding: 16px 24px 20px;
		background: var(--mbk-night);
		border-block-end: 1px solid var(--mbk-line-night);
		box-shadow: 0 18px 32px -24px rgba(0, 0, 0, .8);
	}

	.mbk-nav.is-open {
		display: block;
	}

	.mbk-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	/* Une cible de 44 px de haut, pleine largeur : c'est le minimum du critère
	   2.5.8 (Target Size) de WCAG 2.2, et c'est surtout ce qui rend un menu
	   utilisable au pouce dans un train. */
	.mbk-nav__list a {
		padding-block: 12px;
		padding-inline: 4px;
		min-block-size: 44px;
	}

	/* Le soulignement animé n'a plus de sens sur une liste verticale : il
	   traverserait toute la largeur du panneau. La page courante se marque par
	   un filet vertical du côté du début de lecture. */
	.mbk-nav__list a::after {
		inset-inline: auto;
		inset-block: 6px;
		inset-inline-start: -12px;
		block-size: auto;
		inline-size: 2px;
		transform: scaleY(0);
	}

	.mbk-nav__list a:hover::after,
	.mbk-nav__list a:focus-visible::after,
	.mbk-nav__list .current-menu-item > a::after,
	.mbk-nav__list .current_page_item > a::after,
	.mbk-nav__list a[aria-current="page"]::after {
		transform: scaleY(1);
	}

	.mbk-footer__legal {
		margin-inline-start: 0;
	}
}

/* Entre 420 et 780 px, la place existe pour le nom du site : le masquer sur
   une tablette serait un excès de prudence. */
@media (min-width: 421px) and (max-width: 780px) {

	.mbk-brand__name {
		display: inline;
		font-size: 1.0625rem;
	}
}

/* ==========================================================================
   MOUVEMENT ET IMPRESSION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.mbk-header,
	.mbk-header__inner,
	.mbk-sticky,
	.mbk-btn,
	.mbk-burger__bars,
	.mbk-burger__bars::before,
	.mbk-burger__bars::after {
		transition: none;
	}
}

@media print {

	.mbk-header,
	.mbk-sticky,
	.mbk-footer__cta,
	.mbk-skip {
		display: none;
	}

	.mbk-site {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   LES SECTIONS DE VITRINE
   Ajoutées en version 2, quand le thème a cessé de déléguer sa vitrine à
   l'extension pour la posséder. Tout est en propriétés logiques : l'hébreu
   bascule sans une seule règle dédiée.
   ========================================================================== */

/* Les jetons de la vitrine ont rejoint le bloc `:root` du haut de fichier :
   un jeton, un endroit. Voir la note qui s'y trouve — un second bloc ici
   redeviendrait, à la première modification, la moitié de la vérité. */

.mbk-shell {
	inline-size: 100%;
	max-inline-size: var(--mbk-shell);
	margin-inline: auto;
	padding-inline: var(--mbk-gap);
}

.mbk-shell--narrow {
	max-inline-size: var(--mbk-shell-narrow);
}

.mbk-section {
	padding-block: var(--mbk-section-y);
}

/* Une section sur deux respire sur un fond légèrement différent. `:nth-child`
   plutôt qu'une classe : l'ordre est décidé dans l'admin, et le rythme doit
   suivre l'ordre réel — pas une case cochée qu'on oublie de décocher.

   Les DEUX parités sont désormais déclarées, et ce n'est pas une redondance.
   Le corps de page porte maintenant le gris ; sans la règle impaire, les
   sections impaires le laisseraient traverser et la page entière serait
   grise, rythme compris. */
.mbk-main > .mbk-section:nth-child(odd) {
	background: var(--mbk-paper);
}

.mbk-main > .mbk-section:nth-child(even) {
	background: var(--mbk-paper-2);
}

.mbk-section__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block-start: 1.75rem;
}

.mbk-section__actions:empty {
	display: none;
}

/* --------------------------------------------------------------- En-têtes */

.mbk-head {
	max-inline-size: 42rem;
	margin-block-end: 2.5rem;
}

.mbk-head__kicker {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbk-accent-ink);
	margin: 0 0 0.6rem;
}

.mbk-head__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	line-height: 1.2;
	color: var(--mbk-ink);
	margin: 0 0 0.8rem;
	text-wrap: balance;
}

.mbk-head__text {
	font-size: 1.075rem;
	line-height: calc(1.65 * var(--mbk-lh-k));
	color: var(--mbk-ink-2);
	margin: 0;
}

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

   L'UNIQUE définition des boutons du site. En-tête, sections, formulaires,
   rappel flottant : tout passe par ici. Voir la note en haut du fichier.

   L'ACCENT EST LA SEULE COULEUR D'ACTION. Il n'apparaît nulle part ailleurs en
   aplat — ni en fond de section, ni en filet décoratif — pour qu'une surface
   accentuée veuille toujours dire « on peut cliquer ici ». C'est aussi la
   seule couleur que l'administration laisse changer, ce qui garantit qu'un
   site repeint reste cohérent : on ne peut pas déplacer la couleur d'action
   sans la déplacer partout à la fois.

   CONTRASTES MESURÉS (papier sur accent, WCAG AA texte = 4,5:1) :
   sable 5,44:1 — olive 5,44:1 — ardoise 6,67:1. Un accent personnalisé saisi
   à la main n'est PAS vérifié : c'est dit dans l'écran de réglages. */

.mbk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 48 px de haut : la cible tactile plancher du produit. Une page de vente
	   se touche sur un téléphone, dans un couloir d'hôpital. */
	min-block-size: 48px;
	padding-inline: 1.4rem;
	/* 8 px et non 999. La pilule appartenait à la direction « papier » ; le
	   système TailAdmin tranche franc. Les 48 px de haut, eux, ne bougent
	   pas : c'est une cible tactile, pas un choix de style.

	   Le 8 px est passé dans un jeton : l'exploitant peut le porter à zéro
	   ou à la pilule, mais PAS la hauteur — voir la ligne au-dessus. */
	border-radius: var(--mbk-radius-btn);
	border: 1px solid transparent;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.mbk-btn--primary {
	background: var(--mbk-accent);
	color: var(--mbk-on-accent);
}

/* Au survol, l'accent FONCE — il ne devient pas une autre couleur. Passer à
   l'encre faisait changer d'identité le seul bouton qui porte la marque, et
   sur les trois palettes le résultat était le même bleu-noir : le survol
   effaçait précisément ce qui distingue les palettes entre elles. */
.mbk-btn--primary:hover,
.mbk-btn--primary:focus-visible {
	background: color-mix(in srgb, var(--mbk-accent) 84%, #000);
	color: var(--mbk-on-accent);
}

/* Le contour du bouton secondaire est une FRONTIÈRE DE COMPOSANT, pas une
   décoration : WCAG 1.4.11 lui demande 3:1 contre le fond, sans quoi le
   bouton n'existe visuellement que pour ceux qui voient bien. Mesuré sur
   papier : sable 3,52:1 — olive 3,44:1 — ardoise 3,64:1. */
.mbk-btn--ghost {
	border-color: var(--mbk-line-strong);
	color: var(--mbk-ink);
	background: transparent;
}

.mbk-btn--ghost:hover,
.mbk-btn--ghost:focus-visible {
	border-color: var(--mbk-ink);
	background: var(--mbk-paper-2);
}

.mbk-btn--sm {
	min-block-size: 40px;
	padding-inline: 1rem;
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------ Héros */

.mbk-hero__grid {
	display: grid;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
}

.mbk-hero--large .mbk-hero__grid {
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.mbk-hero--large .mbk-hero__grid {
		grid-template-columns: 1.05fr 0.95fr;
	}
}

.mbk-hero--compact {
	padding-block: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.mbk-hero--compact .mbk-hero__body {
	max-inline-size: 46rem;
	margin-inline: auto;
}

.mbk-hero--compact .mbk-hero__actions {
	justify-content: center;
}

.mbk-hero__kicker {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbk-accent-ink);
	margin: 0 0 0.75rem;
}

.mbk-hero__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: clamp(2rem, 5.2vw, 3.25rem);
	line-height: 1.1;
	color: var(--mbk-ink);
	margin: 0 0 1rem;
	text-wrap: balance;
}

.mbk-hero__text {
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	line-height: calc(1.6 * var(--mbk-lh-k));
	color: var(--mbk-ink-2);
	margin: 0 0 1.75rem;
	max-inline-size: 38rem;
}

.mbk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}

.mbk-hero__actions:empty {
	display: none;
}

.mbk-hero__note {
	margin-block-start: 1rem;
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
}

.mbk-hero__img,
.mbk-split__img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--mbk-radius);
	display: block;
}

/* ----------------------------------------------------------------- Plaque */

.mbk-plate {
	position: relative;
	border-radius: var(--mbk-radius);
	overflow: hidden;
	border: 1px solid var(--mbk-line);
	aspect-ratio: 16 / 10;
	background: var(--mbk-paper-2);
	box-shadow: var(--mbk-shadow);
}

.mbk-plate svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.mbk-plate__note {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-start: 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mbk-ink-3);
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: 999px;
	padding: 0.25rem 0.7rem;
}

/* ------------------------------------------------------------------ Étapes */

.mbk-steps__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
	counter-reset: mbk-step;
}

@media (min-width: 48rem) {
	.mbk-steps__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbk-steps__item {
	counter-increment: mbk-step;
	position: relative;
	padding-block-start: 3.25rem;
}

/* Le numéro vient du compteur CSS, jamais du texte : insérer une étape au
   milieu renumérote alors les suivantes sans que personne y pense. */
.mbk-steps__item::before {
	content: counter(mbk-step);
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: var(--mbk-accent);
	color: var(--mbk-on-accent);
	font-family: var(--mbk-font-title);
	font-size: 1.1rem;
	font-weight: 700;
}

.mbk-steps__icon {
	display: none;
}

.mbk-steps__title,
.mbk-card__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--mbk-ink);
	margin: 0 0 0.5rem;
}

.mbk-steps__text,
.mbk-card__text {
	color: var(--mbk-ink-2);
	line-height: calc(1.6 * var(--mbk-lh-k));
	margin: 0;
}

/* ----------------------------------------------------------- Grille cartes */

.mbk-features__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
}

@media (min-width: 40rem) {
	.mbk-features__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.mbk-features__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbk-card {
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: 1.5rem;
	box-shadow: var(--mbk-shadow);
}


.mbk-card__icon {
	display: inline-flex;
	margin-block-end: 0.9rem;
	color: var(--mbk-accent-ink);
}

.mbk-icon {
	inline-size: 26px;
	block-size: 26px;
}

/* ------------------------------------------------------------ Texte/image */

.mbk-split__grid {
	display: grid;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.mbk-split__grid {
		grid-template-columns: 1fr 1fr;
	}

	/* `order` inverse la COLONNE, jamais l'ordre du document : le texte reste
	   avant l'image pour un clavier et un lecteur d'écran. */
	.mbk-split--flip .mbk-split__media {
		order: -1;
	}
}

.mbk-split .mbk-head {
	margin-block-end: 1.25rem;
}

.mbk-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}

.mbk-list li {
	position: relative;
	padding-inline-start: 1.6rem;
	color: var(--mbk-ink-2);
	line-height: calc(1.55 * var(--mbk-lh-k));
}

.mbk-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.55em;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 999px;
	background: var(--mbk-accent);
}

/* ------------------------------------------------------------------ Tarifs */

.mbk-pricing__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
	align-items: start;
}

@media (min-width: 56rem) {
	.mbk-pricing__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbk-plan {
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: 1.75rem;
	box-shadow: var(--mbk-shadow);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	block-size: 100%;
}


/* L'offre mise en avant se distingue par une BORDURE à l'encre, pas par une
   couleur pâle : mesuré, une bordure d'accent clair sur papier clair descend
   sous 2:1 et ne se voit pas. */
/* L'offre mise en avant prend l'ACCENT et se soulève d'un cran.

   En 2.1 elle portait une bordure d'encre, avec cet argument : « une bordure
   d'accent clair sur papier clair descend sous 2:1 et ne se voit pas ». Il
   valait pour le safran sable (2,4:1 sur son papier crème). Il ne vaut plus :
   mesuré, l'indigo `#3c50e0` sur blanc donne 6,15:1, le violet 5,70:1, le
   bleu-gris 7,01:1 — les trois très au-dessus des 3:1 qu'un élément
   d'interface porteur de sens demande. La contrainte a disparu avec la
   palette ; la règle qu'elle justifiait devait disparaître avec elle. */
.mbk-plan--featured {
	border: 2px solid var(--mbk-accent-ink);
	box-shadow: var(--mbk-shadow-lift);
}

.mbk-plan__flag {
	align-self: flex-start;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mbk-paper);
	background: var(--mbk-ink);
	border-radius: 999px;
	padding: 0.3rem 0.8rem;
}

.mbk-plan__name {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.3rem;
	margin: 0;
	color: var(--mbk-ink);
}

.mbk-plan__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.mbk-plan__amount {
	font-family: var(--mbk-font-title);
	font-size: clamp(1.9rem, 4vw, 2.4rem);
	font-weight: 700;
	color: var(--mbk-ink);
	line-height: 1;
}

.mbk-plan__period {
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
}

.mbk-plan__text {
	margin: 0;
	color: var(--mbk-ink-2);
}

.mbk-plan__list {
	margin-block: 0.3rem;
}

.mbk-plan__list li {
	font-size: 0.95rem;
}

.mbk-plan__action {
	margin: auto 0 0;
	padding-block-start: 0.6rem;
}

.mbk-plan__action .mbk-btn {
	inline-size: 100%;
}

.mbk-pricing__note {
	margin-block-start: 1.5rem;
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
	max-inline-size: 46rem;
}

/* ------------------------------------------------------------- Témoignages */

.mbk-quotes__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
}

@media (min-width: 56rem) {
	.mbk-quotes__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbk-quote {
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: 1.5rem;
	box-shadow: var(--mbk-shadow);
}


.mbk-quote__text {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
}

.mbk-quote__text p {
	margin: 0;
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.05rem;
	line-height: calc(1.55 * var(--mbk-lh-k));
	color: var(--mbk-ink);
}

.mbk-quote__by {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
}

.mbk-quote__by cite {
	font-style: normal;
	font-weight: 600;
	color: var(--mbk-ink-2);
}

.mbk-quote__role::before {
	content: " · ";
}

/* ---------------------------------------------------------------- Chiffres */

.mbk-stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
	grid-template-columns: repeat(2, 1fr);
	text-align: center;
}

@media (min-width: 56rem) {
	.mbk-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.mbk-stat {
	display: grid;
	gap: 0.35rem;
}

.mbk-stat__value {
	font-family: var(--mbk-font-title);
	font-size: clamp(2.2rem, 6vw, 3rem);
	font-weight: 700;
	color: var(--mbk-accent-ink);
	line-height: 1;
}

.mbk-stat__label {
	font-size: 0.92rem;
	color: var(--mbk-ink-2);
}

/* --------------------------------------------------------------------- FAQ */

.mbk-faq__list {
	display: grid;
	gap: 0.6rem;
}

.mbk-faq__item {
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	background: var(--mbk-paper);
	box-shadow: var(--mbk-shadow);
	overflow: hidden;
}


.mbk-faq__q {
	cursor: pointer;
	list-style: none;
	padding: 1.05rem 1.25rem;
	font-weight: 600;
	color: var(--mbk-ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-block-size: 48px;
}

.mbk-faq__q::-webkit-details-marker {
	display: none;
}

/* Le chevron est posé en `::after`, donc du côté FIN de la ligne : il passe
   tout seul à gauche en hébreu. Il tourne à l'ouverture. */
.mbk-faq__q::after {
	content: "";
	inline-size: 0.6rem;
	block-size: 0.6rem;
	flex: 0 0 auto;
	border-inline-end: 2px solid var(--mbk-ink-3);
	border-block-end: 2px solid var(--mbk-ink-3);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.mbk-faq__item[open] .mbk-faq__q::after {
	transform: rotate(-135deg);
}

.mbk-faq__a {
	padding: 0 1.25rem 1.2rem;
	color: var(--mbk-ink-2);
	line-height: calc(1.65 * var(--mbk-lh-k));
}

.mbk-faq__a p {
	margin: 0;
}

/* ------------------------------------------------------------------- Prose */

.mbk-prose p {
	color: var(--mbk-ink-2);
	line-height: calc(1.75 * var(--mbk-lh-k));
	font-size: 1.05rem;
	margin: 0 0 1.1rem;
}

/* ----------------------------------------------------------------- Contact */

.mbk-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.mbk-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	color: var(--mbk-ink-2);
}

.mbk-contact__icon {
	color: var(--mbk-accent-ink);
	flex: 0 0 auto;
}

.mbk-contact__item a {
	color: var(--mbk-ink);
}

/* --------------------------------------------------------------- Annuaire */

.mbk-search__label {
	display: block;
	font-weight: 600;
	margin-block-end: 0.5rem;
	color: var(--mbk-ink);
}

.mbk-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.mbk-search__input {
	flex: 1 1 16rem;
	min-block-size: 48px;
	padding-inline: 1rem;
	font-size: 1rem;
	border: 1px solid var(--mbk-line-strong);
	border-radius: 999px;
	background: var(--mbk-paper);
	color: var(--mbk-ink);
}

.mbk-directory__list {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.mbk-directory__item {
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: 1rem 1.25rem;
	background: var(--mbk-paper);
	box-shadow: var(--mbk-shadow);
}

.mbk-directory__name {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.15rem;
	margin: 0;
}

.mbk-directory__dates {
	margin: 0.2rem 0 0;
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
}

/* --------------------------------------------------------------- Articles */

.mbk-posts__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
}

@media (min-width: 48rem) {
	.mbk-posts__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.mbk-post__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--mbk-radius);
	display: block;
	margin-block-end: 0.9rem;
}

.mbk-post__date {
	margin: 0 0 0.35rem;
	font-size: 0.82rem;
	color: var(--mbk-ink-3);
}

.mbk-post__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.5rem;
}

.mbk-post__title a {
	color: var(--mbk-ink);
	text-decoration: none;
}

.mbk-post__title a:hover,
.mbk-post__title a:focus-visible {
	text-decoration: underline;
}

.mbk-post__excerpt {
	margin: 0;
	color: var(--mbk-ink-2);
	line-height: calc(1.6 * var(--mbk-lh-k));
}

/* ------------------------------------------------------------ Appel final */

.mbk-cta {
	background: var(--mbk-night);
	color: var(--mbk-paper);
}

/* L'APPEL FINAL RESTE SOMBRE, QUELLE QUE SOIT SA PARITÉ.

   Il n'y avait qu'une seule surcharge ici — `:nth-child(even)` —, parce que
   le rythme des sections n'en déclarait qu'une : les impaires laissaient
   simplement passer le corps de page, et rien ne les touchait. Depuis que
   les DEUX parités sont déclarées, la règle impaire pèse 0,3,1 contre le
   0,1,0 de `.mbk-cta` : un appel final tombé en position impaire — une page
   à trois sections, cas parfaitement ordinaire — serait repeint en blanc,
   avec son texte blanc dessus. Illisible, et invisible en relisant l'une ou
   l'autre des deux règles séparément.

   Les deux surcharges vont donc par paire avec les deux règles de rythme. */
.mbk-main > .mbk-section.mbk-cta:nth-child(odd),
.mbk-main > .mbk-section.mbk-cta:nth-child(even) {
	background: var(--mbk-night);
}

.mbk-cta__inner {
	text-align: center;
}

.mbk-cta__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	line-height: 1.2;
	margin: 0 0 0.8rem;
	color: inherit;
	text-wrap: balance;
}

.mbk-cta__text {
	margin: 0 auto 1.75rem;
	max-inline-size: 40rem;
	font-size: 1.05rem;
	line-height: calc(1.6 * var(--mbk-lh-k));
	/* UN JETON, ET NON UNE OPACITE.

	   `opacity` sur un element de texte est le dernier moyen de rendre une
	   couleur illisible sans que rien ne le voie : PHP ne connait pas la regle,
	   et une sonde qui lit `color` recoit la couleur PLEINE — l'opacite est
	   appliquee a la composition, apres. Le banc de contraste mesurait donc ce
	   texte comme opaque, et le declarait bon.

	   Voir la regle permanente en tete du bloc des jetons : sur la nuit, toute
	   nuance devient un jeton mesure. L'opacite est une nuance. */
	color: var(--mbk-on-night-2);
}

.mbk-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin: 0;
}

/* SUR FOND SOMBRE, LE BOUTON S'INVERSE.

   L'accent posé sur la nuit ne se détache pas assez pour faire un bouton :
   mesuré, il donne 3,07:1 en sable mais 2,57:1 en olive et 2,16:1 en ardoise,
   quand une frontière de composant en demande 3 (WCAG 1.4.11). Autrement dit,
   sur deux palettes sur trois, le bouton le plus important de la page se
   fondrait dans le fond. Le papier sur la nuit, lui, donne 14:1 dans les trois
   — et l'encre sur le papier 15,9:1 pour le texte. On inverse donc, plutôt que
   de choisir un accent par palette et d'espérer que le suivant passe. */
.mbk-cta .mbk-btn--primary {
	background: var(--mbk-paper);
	color: var(--mbk-ink);
}

.mbk-cta .mbk-btn--primary:hover,
.mbk-cta .mbk-btn--primary:focus-visible {
	background: var(--mbk-paper-2);
	color: var(--mbk-ink);
}

.mbk-cta .mbk-btn--ghost {
	/* `--mbk-on-night-line` et non un blanc a 55 % : ce contour EST le bouton,
	   WCAG 1.4.11 lui demande 3:1, et un blanc a 55 % pose sur une nuit
	   choisie par l'exploitant ne les tient pas. Le jeton, lui, est mesure. */
	border-color: var(--mbk-on-night-line);
	color: var(--mbk-on-night);
	background: transparent;
}

.mbk-cta .mbk-btn--ghost:hover,
.mbk-cta .mbk-btn--ghost:focus-visible {
	border-color: var(--mbk-on-night);
	background: var(--mbk-night-hover);
}

.mbk-cta__note {
	margin-block-start: 1.1rem;
	font-size: 0.88rem;
	color: var(--mbk-on-night-3);
}

/* ==========================================================================
   LE SÉLECTEUR DE LANGUE EN MENU
   ==========================================================================

   Trois langues tiennent en ligne dans un en-tête ; six n'y tiennent pas. Le
   menu occupe une place CONSTANTE quel que soit leur nombre — c'est tout son
   objet.

   Il est bâti sur `<details>` / `<summary>` : il s'ouvre sans une ligne de
   script, à la souris comme au clavier. Le script n'ajoute que la fermeture au
   clic extérieur et à Échap.

   TOUTES LES COULEURS VIENNENT DES JETONS `on-night`, mesurés à chaque
   requête. C'est la règle permanente de la 2.4 : sur la bande de nuit, aucune
   nuance improvisée — un blanc à 70 % écrit ici échapperait à la garde de
   contraste et se livrerait illisible dès qu'un exploitant choisit sa propre
   couleur d'en-tête.
   ========================================================================== */

.mbk-langpick {
	position: relative;
}

/* Le triangle que le navigateur pose devant un `<summary>` : on le retire des
   deux façons qui existent, aucune n'étant supportée partout. */
.mbk-langpick__button::-webkit-details-marker {
	display: none;
}

.mbk-langpick__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	/* 44 px : cible tactile plancher du produit (WCAG 2.5.5). */
	min-block-size: 44px;
	padding-inline: 12px;
	border: 1px solid var(--mbk-on-night-line);
	border-radius: var(--mbk-radius-btn);
	color: var(--mbk-on-night-2);
	font-size: 0.9375rem;
	list-style: none;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mbk-langpick__button:hover,
.mbk-langpick[open] > .mbk-langpick__button {
	color: var(--mbk-on-night);
	border-color: var(--mbk-on-night);
	background: var(--mbk-night-hover);
}

.mbk-langpick__button:focus-visible {
	outline: 2px solid var(--mbk-on-night);
	outline-offset: 2px;
}

.mbk-langpick__globe,
.mbk-langpick__chevron {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.mbk-langpick[open] .mbk-langpick__chevron {
	transform: rotate(180deg);
}

/* Le nom complet sur grand écran, le code court sur téléphone : le bouton doit
   tenir à côté de l'appel à l'inscription, qui compte davantage. */
.mbk-langpick__short {
	display: none;
}

.mbk-langpick__panel {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	/* `inset-inline-end` SEUL : le panneau s'aligne sur le bord de FIN du
	   bouton, donc à droite en français et à gauche en hébreu, sans une ligne
	   de plus. Y ajouter `left` le sur-contraindrait — c'est le défaut qui a
	   empilé onze cartes d'arbre contre un bord en 2.26. */
	inset-inline-end: 0;
	z-index: 60;
	min-inline-size: 208px;
	max-block-size: min(70vh, 420px);
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--mbk-on-night-line);
	border-radius: var(--mbk-radius);
	background: var(--mbk-night-2);
	box-shadow: var(--mbk-shadow-lift);
}

.mbk-langpick__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mbk-langpick__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 44px;
	padding-inline: 10px;
	border-radius: var(--mbk-radius-btn);
	color: var(--mbk-on-night-2);
	text-decoration: none;
	font-size: 0.9375rem;
}

.mbk-langpick__item:hover,
.mbk-langpick__item:focus-visible {
	background: var(--mbk-night-hover);
	color: var(--mbk-on-night);
}

/* La langue courante se marque d'une COCHE en plus de sa couleur : la couleur
   seule ne dirait rien à qui la distingue mal — critère 1.4.1. */
.mbk-langpick__item.is-current {
	color: var(--mbk-on-night);
	font-weight: 600;
}

.mbk-langpick__code {
	flex: 0 0 auto;
	min-inline-size: 2.25em;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mbk-on-night-3);
	text-align: center;
}

.mbk-langpick__item.is-current .mbk-langpick__code {
	color: var(--mbk-accent-soft);
}

/* LE NOM SE RÉTRÉCIT À SON TEXTE, et c'est ce qui range la colonne.

   Étiré sur toute la ligne (`flex: 1 1 auto`), un nom en hébreu ou en arabe
   s'aligne sur le début de SA direction — donc au bord opposé. Six langues
   donnaient six alignements alternés : chaque nom correct, la colonne
   illisible.

   Réduit à son contenu, il se pose juste après le code, quelle que soit sa
   direction ; `margin-inline-end: auto` renvoie la coche au bout de la ligne.
   Le texte, lui, garde son `dir` : c'est ce qui compose « العربية » dans le
   bon ordre. */
.mbk-langpick__name {
	flex: 0 1 auto;
	min-inline-size: 0;
}

/* C'EST LA COCHE QUI POUSSE, ET NON LE NOM QUI S'ÉTIRE.

   Le premier correctif posait `margin-inline-end: auto` sur le nom. Mesuré :
   les entrées hébraïque et arabe restaient collées au bord opposé, à 97 px des
   autres. La raison est que la marge LOGIQUE d'un élément suit SA propre
   direction — sur un `dir="rtl"`, `inline-end` EST la gauche, donc la marge le
   repoussait vers la droite.

   La coche, elle, ne porte pas de `dir` : sa marge suit la direction du
   DOCUMENT, et pousse toujours vers la fin de la ligne. Une propriété logique
   ne dispense pas de savoir de quelle direction elle parle. */
.mbk-langpick__tick {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	margin-inline-start: auto;
	color: var(--mbk-accent-soft);
}

@media (prefers-reduced-motion: reduce) {

	.mbk-langpick__chevron {
		transition: none;
	}
}

/* Sur téléphone, le bouton se réduit au code de la langue : le nom complet
   d'une langue écrite dans son propre alphabet peut être long, et l'appel à
   l'inscription doit rester visible. */
@media (max-width: 780px) {

	.mbk-langpick__now {
		display: none;
	}

	.mbk-langpick__short {
		display: inline;
		font-weight: 600;
	}

	.mbk-langpick__button {
		padding-inline: 10px;
	}

	/* Le panneau prend toute la largeur disponible plutôt que de déborder de
	   l'écran : un menu coupé par le bord droit est un menu inutilisable. */
	.mbk-langpick__panel {
		min-inline-size: 180px;
		max-inline-size: calc(100vw - 24px);
	}
}

/* ------------------------------------------------------- Pied de page (v2) */

.mbk-footer__links-list,
.mbk-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.mbk-footer__links {
	margin-block: 1.5rem;
}

/* ==========================================================================
   LE MEME DEFAUT QUE LE MENU D'EN-TETE, ET IL A SURVECU A SA CORRECTION
   ==========================================================================

   Ces liens etaient ecrits en `--mbk-ink-2` — l'encre du PAPIER — sur la bande
   de nuit du pied de page. Mesure : 1,27:1. C'est, au jeton pres, le defaut
   corrige dans l'en-tete a la version 2.3.

   POURQUOI IL A SURVECU A CETTE CORRECTION-LA : le doublet de WordPress de
   l'apercu ne rendait `mbk_primary`. `has_nav_menu( 'mbk_footer' )` rendait
   `false`, donc ce `<nav>` n'existait sur aucun des cent deux ecrans mesures,
   donc les deux cent quatre passages du banc de contraste ne l'ont jamais vu.

   La 2.3 avait diagnostique juste — « un harnais qui n'affiche pas une partie
   de l'ecran ne la verifie pas » — et n'avait rebranche QUE le menu qu'elle
   regardait. Une correction d'angle mort qui ne couvre qu'un cas laisse les
   autres exactement ou ils etaient, avec en prime la certitude d'avoir
   corrige.

   L'apercu rend desormais les TROIS emplacements que le theme declare, et un
   controle du harnais confronte la liste de `Setup::menus()` a celle du
   doublet : un emplacement ajoute au theme et oublie dans l'apercu fait
   echouer la verification, au lieu de creer un angle mort de plus. */
.mbk-footer__links-list a,
.mbk-social__link {
	color: var(--mbk-on-night-2);
	text-decoration: none;
	font-size: 0.94rem;
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
}

.mbk-footer__links-list a:hover,
.mbk-footer__links-list a:focus-visible,
.mbk-social__link:hover,
.mbk-social__link:focus-visible {
	text-decoration: underline;
	color: var(--mbk-on-night);
}

/* ------------------------------------------------------------------- Vide */

.mbk-empty {
	border: 1px dashed var(--mbk-line-strong);
	border-radius: var(--mbk-radius);
	padding: 1.5rem;
	color: var(--mbk-ink-2);
	margin-block: var(--mbk-section-y);
}

.mbk-empty__note {
	font-size: 0.85rem;
	color: var(--mbk-ink-3);
	margin-block-end: 0;
}

/* ==========================================================================
   LES QUATRE SECTIONS DE LA VERSION 2.1

   Arbre, plaque QR, cérémonies, date hébraïque. Elles suivent les mêmes
   règles que les treize précédentes, et deux d'entre elles en particulier :

   1. PROPRIÉTÉS LOGIQUES PARTOUT. `margin-left` est un défaut dans ce
      dépôt : l'hébreu est l'un des trois modes normaux du thème, pas une
      adaptation, et il n'y a pas de feuille RTL séparée à corriger après.

   2. AUCUN SÉLECTEUR `biotl-`. Le contrat de préfixes tient dans les deux
      sens ; ces sections affichent pourtant du HTML venu de l'extension
      (le SVG du QR). On l'habille par le CONTENEUR — `.mbk-plaque__code
      svg` — et jamais par ses classes à lui, qu'elle peut renommer sans
      nous prévenir.
   ========================================================================== */

/* ------------------------------------------------------- Arbre généalogique */

.mbk-tree__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 2.75rem);
	align-items: center;
}

@media (min-width: 62rem) {
	.mbk-tree__grid {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.mbk-tree__figure {
	margin: 0;
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: clamp(0.75rem, 3vw, 1.5rem);
	box-shadow: var(--mbk-shadow);
}

/* Le dessin garde son sens de lecture en hébreu : un arbre n'est pas un
   paragraphe, l'inverser mettrait les grands-parents à droite pour la seule
   raison que la page l'est. `direction: ltr` sur le seul SVG. */
.mbk-tree__svg {
	direction: ltr;
	display: block;
	inline-size: 100%;
	block-size: auto;
	color: var(--mbk-line-strong);
}

.mbk-tree__node rect {
	fill: var(--mbk-paper-2);
	stroke: var(--mbk-line-strong);
	stroke-width: 1;
}

.mbk-tree__node text {
	font-family: var(--mbk-font);
	font-size: 0.9375rem;
	fill: var(--mbk-ink-2);
}

/* La personne du livre : encre pleine, texte sur papier. C'est le seul
   contraste fort du dessin, et il sert à répondre en un coup d'œil à
   « lequel de ces quatorze cadres est celui dont on parle ». */
.mbk-tree__node--self rect {
	fill: var(--mbk-night);
	stroke: var(--mbk-night);
}

.mbk-tree__node--self text {
	fill: var(--mbk-paper);
	font-weight: 700;
}

/* Les rattachements que la base ne connaît pas : cadre en creux, comme le
   trait pointillé qui y mène. */
.mbk-tree__node--soft rect {
	fill: none;
	stroke-dasharray: 4 5;
}

.mbk-tree__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.5rem;
	margin-block-start: 1rem;
	padding-block-start: 0.9rem;
	border-block-start: 1px solid var(--mbk-line);
	font-size: 0.88rem;
	color: var(--mbk-ink-3);
}

.mbk-tree__key {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.mbk-tree__swatch {
	inline-size: 32px;
	block-size: 8px;
	flex: none;
	color: var(--mbk-line-strong);
}

.mbk-tree__aside {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

/* ------------------------------------------------------------- Plaque QR */

.mbk-memorial__grid {
	display: grid;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
}

@media (min-width: 60rem) {
	.mbk-memorial__grid {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	}
}

.mbk-memorial__stone {
	display: grid;
	gap: 0.9rem;
	justify-items: center;
}

/* La plaque : de la pierre, pas une carte. D'où le fond sourd, l'angle
   presque droit et l'ombre portée courte — une pierre posée, pas un élément
   d'interface qui flotte. */
/* La plaque reste l'exception de cette feuille : c'est de la PIERRE, pas une
   carte d'interface. Elle garde donc son angle presque droit et son dégradé,
   là où tout le reste de la page a pris le rayon de 10 px et l'aplat. Elle
   est le seul objet PHYSIQUE représenté sur le site — la faire ressembler
   aux autres blocs reviendrait à dessiner un bouton, pas une stèle.

   L'ombre chaude écrite en dur (`rgba(20, 18, 13, .85)`) appartenait à la
   palette sable : sous une palette froide, elle brunissait le bas de la
   plaque. Elle passe sur le jeton d'ombre du thème. */
.mbk-plaque {
	inline-size: min(20rem, 100%);
	background: linear-gradient(180deg, var(--mbk-paper-2), var(--mbk-paper));
	border: 1px solid var(--mbk-line-strong);
	border-radius: 6px;
	padding: clamp(1rem, 4vw, 1.6rem);
	text-align: center;
	box-shadow: var(--mbk-shadow-lift);
}

.mbk-plaque__code {
	inline-size: min(11rem, 62%);
	margin-inline: auto;
	margin-block-end: 0.9rem;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

/* Le SVG vient de l'extension. On l'habille par son conteneur : ses propres
   classes ne nous appartiennent pas. */
.mbk-plaque__code svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
	color: var(--mbk-ink);
}

.mbk-plaque__code--empty {
	border: 1px dashed var(--mbk-line-strong);
	border-radius: 8px;
	color: var(--mbk-ink-3);
}

.mbk-plaque__code--empty .mbk-icon {
	inline-size: 40px;
	block-size: 40px;
}

.mbk-plaque__name {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.15rem;
	color: var(--mbk-ink);
	margin: 0;
}

.mbk-plaque__dates {
	font-size: 0.9rem;
	color: var(--mbk-ink-3);
	margin-block: 0.25rem 0;
	font-variant-numeric: tabular-nums;
}

.mbk-memorial__scan {
	font-size: 0.88rem;
	color: var(--mbk-ink-3);
	text-align: center;
	margin: 0;
	max-inline-size: 22rem;
}

.mbk-memorial__aside {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.mbk-memorial__note {
	font-size: 0.88rem;
	color: var(--mbk-ink-3);
	margin: 0;
}

/* ------------------------------------------------------------- Cérémonies */

.mbk-ceremonies__rail {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mbk-gap);
	counter-reset: mbk-ceremony;
}

@media (min-width: 48rem) {
	.mbk-ceremonies__rail {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 72rem) {
	.mbk-ceremonies__rail {
		grid-template-columns: repeat(5, 1fr);
	}
}

.mbk-ceremony {
	position: relative;
	background: var(--mbk-paper);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	padding: 1.35rem 1.25rem 1.25rem;
	counter-increment: mbk-ceremony;
	box-shadow: var(--mbk-shadow);
}

/* Le rang est décoratif : la liste est déjà un `<ol>`, et l'annoncer une
   seconde fois à voix haute n'ajoute rien. D'où `content` sur un
   pseudo-élément plutôt qu'un nombre écrit dans le HTML. */
.mbk-ceremony::before {
	content: counter(mbk-ceremony);
	position: absolute;
	inset-block-start: -0.75rem;
	inset-inline-start: 1.1rem;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	display: grid;
	place-items: center;
	border-radius: 999px;
	/* L'ACCENT, comme les numéros de la section « étapes ». Les deux sont des
	   progressions numérotées ; les habiller de deux couleurs différentes
	   faisait lire deux systèmes là où il n'y en a qu'un, et le lecteur
	   cherchait la distinction qu'on n'avait pas voulu faire. */
	background: var(--mbk-accent);
	color: var(--mbk-on-accent);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
}

.mbk-ceremony__icon {
	display: inline-flex;
	color: var(--mbk-accent-ink);
	margin-block-end: 0.6rem;
}

.mbk-ceremony__title {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: 1.08rem;
	margin: 0 0 0.35rem;
	color: var(--mbk-ink);
}

/* ==========================================================================
   « Les sept jours », « chaque année, à la date hébraïque » : c'est du TEXTE
   INFORMATIF, et il portait la couleur d'accent.

   Mesuré : accent sable #b87d18 sur papier #f2ece0 = 2,98:1. WCAG 2.2 AA et
   la norme israélienne IS 5568 exigent 4,5:1 pour du texte. L'accent est une
   couleur de MARQUE, calibrée pour du blanc dessus (voir le bloc « contrastes
   mesurés » des boutons) — pas pour de l'encre sur papier clair.

   Et l'accent est configurable : même en le remplaçant par une couleur
   conforme, la règle ferait dépendre la lisibilité d'un texte d'un réglage de
   palette. On la retire du texte, on la garde sur le pictogramme, qui est
   décoratif et porte déjà `aria-hidden`.

   `ink-2` sur papier : 7,42:1.
   ========================================================================== */
.mbk-ceremony__when {
	font-size: 0.85rem;
	color: var(--mbk-ink-2);
	margin: 0 0 0.45rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mbk-ceremony__text {
	font-size: 0.94rem;
	line-height: calc(1.55 * var(--mbk-lh-k));
	color: var(--mbk-ink-2);
	margin: 0;
}

/* Fond BLANC, et non gris. Une section sur deux pose déjà `paper_2` : un
   encadré gris sur une section grise ne se voyait que par son filet, et
   l'aspect changeait selon la position de la section dans la page — c'est-à-
   dire selon un ordre décidé dans l'admin. Une carte blanche se détache des
   deux fonds, toujours, quel que soit le rang. */
.mbk-ceremonies__note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-block-start: var(--mbk-gap);
	padding: 1rem 1.1rem;
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	background: var(--mbk-paper);
	box-shadow: var(--mbk-shadow);
	color: var(--mbk-ink-2);
	font-size: 0.92rem;
	line-height: calc(1.55 * var(--mbk-lh-k));
}

.mbk-ceremonies__shield {
	flex: none;
	display: inline-flex;
	color: var(--mbk-accent-ink);
}

.mbk-ceremonies__cta {
	margin-block-start: var(--mbk-gap);
}

/* ---------------------------------------------------------- Date hébraïque */

.mbk-hdate__form {
	display: grid;
	gap: 0.85rem;
	padding: clamp(1rem, 4vw, 1.5rem);
	border: 1px solid var(--mbk-line);
	border-radius: var(--mbk-radius);
	background: var(--mbk-paper);
	box-shadow: var(--mbk-shadow);
}

.mbk-hdate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.mbk-hdate__label {
	flex: 1 0 100%;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--mbk-ink-2);
}

/* `direction: ltr` sur le champ de date : le sélecteur natif attend
   jour/mois/année dans cet ordre, y compris quand la page est en hébreu.
   Le `text-align: start` le garde du bon côté de son conteneur. */
.mbk-hdate__input {
	direction: ltr;
	text-align: start;
	flex: 1 1 12rem;
	min-inline-size: 0;
	min-block-size: 46px;
	padding-inline: 0.85rem;
	border: 1px solid var(--mbk-line-strong);
	border-radius: 10px;
	background: var(--mbk-paper);
	color: var(--mbk-ink);
	font-family: inherit;
	font-size: 1rem;
}

.mbk-hdate__input:focus-visible {
	/* L'ANNEAU DE FOCUS PREND `accent-ink`, ET NON `accent`.

	   C'est le seul repere de celui qui navigue au clavier : le critere 2.4.7
	   ne se contente pas qu'il existe, il faut qu'il se VOIE. Un accent pale
	   sur du papier donne un anneau a 1,5:1 — c'est-a-dire pas d'anneau. */
	outline: 2px solid var(--mbk-accent-ink);
	outline-offset: 2px;
}

.mbk-hdate__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.9rem;
	color: var(--mbk-ink-2);
	line-height: 1.5;
	cursor: pointer;
}

.mbk-hdate__check input {
	margin-block-start: 0.15rem;
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: none;
	accent-color: var(--mbk-accent);
}

/* Le résultat est la seule chose que la personne est venue chercher. Il prend
   donc un filet d'accent et l'ombre soulevée — c'est le seul bloc de contenu
   de tout le thème à qui l'on accorde ça, et c'est ce qui le rend lisible
   d'un coup d'œil au milieu d'une page. */
.mbk-hdate__out {
	margin-block-start: var(--mbk-gap);
	padding: clamp(1.25rem, 4vw, 2rem);
	border: 1px solid var(--mbk-accent-ink);
	border-radius: var(--mbk-radius);
	background: var(--mbk-paper);
	box-shadow: var(--mbk-shadow-lift);
	text-align: center;
}

.mbk-hdate__from {
	font-size: 0.92rem;
	color: var(--mbk-ink-3);
	margin: 0 0 0.35rem;
}

/* La réponse. C'est la seule chose que la personne est venue chercher : elle
   est la plus grosse de la page après le titre, et rien ne la partage. */
.mbk-hdate__to {
	font-family: var(--mbk-font-title);
	font-weight: var(--mbk-fw-title);
	letter-spacing: var(--mbk-ls-title);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	line-height: 1.25;
	color: var(--mbk-ink);
	margin: 0;
}

.mbk-hdate__yahrzeit {
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--mbk-line);
	text-align: start;
	display: grid;
	gap: 0.6rem;
}

.mbk-hdate__ytitle {
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbk-ink-3);
	margin: 0;
	font-weight: 600;
}

.mbk-hdate__yline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	margin: 0;
	color: var(--mbk-ink-2);
}

.mbk-hdate__yline strong {
	color: var(--mbk-ink);
}

.mbk-hdate__ysmall {
	font-size: 0.92rem;
	color: var(--mbk-ink-3);
}

.mbk-hdate__note,
.mbk-hdate__cta {
	margin-block-start: var(--mbk-gap);
}

.mbk-hdate__note {
	font-size: 0.88rem;
	color: var(--mbk-ink-3);
}

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

@media print {
	.mbk-cta,
	.mbk-header,
	.mbk-footer__links,
	.mbk-social {
		display: none;
	}

	/* Ce qui reste utile sur papier, et ce qui ne l'est pas. Une plaque QR
	   imprimée se scanne encore — c'est même le geste : on imprime la page,
	   on la porte au marbrier. Un formulaire imprimé ne se remplit pas. */
	.mbk-hdate__form,
	.mbk-hdate__cta,
	.mbk-ceremonies__cta,
	.mbk-tree__aside .mbk-btn {
		display: none;
	}

	.mbk-plaque,
	.mbk-tree__figure,
	.mbk-hdate__out {
		border-color: #000;
		box-shadow: none;
		background: none;
	}
}
