/* L'espace membre — surface téléphone, tablette et bureau.

   Ce fichier porte les **règles de composition** imposées par le téléphone :
   une colonne, cibles de 44 px, barre dans la zone du pouce, et un écran qui
   ne pose qu'une question à la fois. Les couleurs viennent des jetons --ef-* ;
   sur une page en nouvelle DA (`body.fm`), jetons.css les fait pointer sur
   ceux du front, et front.css ajoute ce que la direction change — polices,
   rayons, barre, boutons.

   Trois paliers, et une règle pour les gouverner (R1) : la largeur gagnée sert
   à montrer deux choses à la fois, jamais à étirer une seule. */

:root {
  --mb-large: 1200px;     /* la largeur maximale du contenu, au bureau */
  --mb-texte: 680px;      /* une ligne de 1200 px est illisible */
  --mb-colonne: 480px;    /* un formulaire ne s'élargit jamais */
  --mb-liste: 392px;      /* la liste du maître-détail, au bureau */
  --mb-barre: 64px;       /* la hauteur de la barre d'onglets du bas */
  --mb-haut: 73px;        /* la barre haute, qui reste en place : la marque
                             (70 px, front.css) et le filet dégradé (3 px) */
}

/* --- La barre ------------------------------------------------------------
   Elle vit dans front.css : c'est celle de la marque, pas de l'espace membre,
   et les pages du site public la montrent aussi à un membre connecté. */

/* --- Le bandeau d'écran -------------------------------------------------- */

.mb-ecran { background: var(--ef-surface);
  border-bottom: 1px solid var(--ef-bordure); }
.mb-ecran .dedans {
  display: flex; align-items: center; gap: var(--e-3);
  max-width: var(--mb-large); margin: 0 auto; padding: var(--e-3) var(--e-5);
}
.mb-ecran-titre { min-width: 0; flex: 1; }
.mb-ecran h1 { margin: 0; font-size: var(--t-titre-m); letter-spacing: -0.01em; }
.mb-ecran h1:empty { display: none; }
.mb-retour {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; margin-left: -10px; flex: none;
  text-decoration: none; color: var(--ef-accent); font-weight: 600;
}
.mb-page { max-width: var(--mb-large); margin: 0 auto;
  padding: var(--e-4) var(--e-5) calc(var(--mb-barre) + var(--e-5)); }
.mb-pied { padding-bottom: calc(var(--mb-barre) + var(--e-4)); }

/* --- Mobile : la page laisse la place à la barre du bas ------------------ */

@media (max-width: 39.99rem) {
  .mb-ecran .dedans, .mb-page { padding-left: var(--e-4);
    padding-right: var(--e-4); }
  .mb-ecran h1 { font-size: var(--t-titre-s); }
}

/* --- Bureau : libellés complets et recherche ---------------------------- */

@media (min-width: 64rem) {
  .mb-page { padding-top: var(--e-5); padding-bottom: var(--e-6); }
  .mb-pied { padding-bottom: var(--e-5); }
}

/* --- Le corps de texte : 15 px, 16 px au bureau, toujours borné --------- */

.mb-texte { font-size: var(--t-corps); line-height: 1.7;
  max-width: var(--mb-texte); }
.mb-texte p { margin: 0 0 var(--e-3); }
@media (min-width: 64rem) { .mb-texte { font-size: calc(16px * var(--fm-echelle, 1)); } }

/* --- Les tuiles de l'accueil -------------------------------------------- */

.mb-bonjour { display: flex; align-items: baseline; gap: var(--e-3);
  flex-wrap: wrap; margin: 0 0 var(--e-4); }
.mb-bonjour h2 { margin: 0; font-size: var(--t-titre-m); letter-spacing: -0.02em; }
.mb-bonjour .note { font-family: var(--chiffres); margin: 0; }

.mb-pile { display: flex; flex-direction: column; gap: var(--e-4); }
.mb-tuile {
  border: 1px solid var(--ef-bordure); border-radius: var(--r-l);
  background: var(--ef-surface); overflow: hidden;
}
.mb-tuile-tete {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--bo-bordure-fine);
}
.mb-tuile-tete h3 { margin: 0; font-size: var(--t-titre-s); }
.mb-tuile-tete .etiquette {
  font-size: var(--t-libelle); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ef-encre-doux);
}
.mb-tuile-tete .lien { margin-left: auto; font-size: var(--t-secondaire);
  font-weight: 600; text-decoration: none; }
.mb-tuile-corps { padding: var(--e-4); }

/* Le direct. Il ne s'affiche que pendant le direct — d'où le droit de passer
   devant tout le reste, et le seul fond encre de l'écran. */
.mb-direct {
  background: var(--ef-encre-plein, var(--ef-encre)); color: #fff; border-radius: var(--r-l);
  padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-2);
}
.mb-direct h3 { margin: 0; font-size: var(--t-titre-s); color: #fff;
  line-height: 1.3; }
.mb-direct .note { color: color-mix(in srgb, #fff 62%, transparent);
  font-family: var(--chiffres); margin: 0; }
.mb-pastille-direct {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: var(--r-s); background: var(--statut-bloquant-plein, var(--statut-bloquant));
  font-family: var(--chiffres); font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.mb-pastille-direct::before { content: ""; width: 6px; height: 6px;
  border-radius: 50%; background: #fff; }
.mb-direct .mb-bouton { background: #fff; color: var(--ef-encre-plein, var(--ef-encre)); }

/* « À faire » — ce qui appelle un geste. Le seul bloc en ambre de l'accueil :
   s'il y en avait deux, il n'y en aurait plus aucun. */
.mb-afaire { border-color: var(--statut-bloquant-bord); }
.mb-afaire .mb-tuile-tete { background: var(--statut-bloquant-fond);
  border-bottom-color: var(--statut-bloquant-bord);
  color: var(--statut-bloquant); }
.mb-afaire .etiquette { color: var(--statut-bloquant); }
.mb-afaire-ligne { padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bo-bordure-fine); }
.mb-afaire-ligne:last-child { border-bottom: 0; }
.mb-afaire-ligne p { margin: 0 0 var(--e-1); }
.mb-afaire-ligne .titre { font-weight: 600; }

.mb-epingle { padding: var(--e-4); border-bottom: 1px solid var(--bo-bordure-fine); }
.mb-epingle:last-child { border-bottom: 0; }
.mb-epingle p { margin: 0 0 var(--e-1); }
.mb-epingle .titre { font-weight: 600; }
.mb-image {
  height: 96px; border-radius: var(--r-m); margin-bottom: var(--e-2);
  background: repeating-linear-gradient(135deg,
    var(--bo-fond), var(--bo-fond) 8px,
    var(--bo-bordure-fine) 8px, var(--bo-bordure-fine) 16px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--chiffres); font-size: var(--t-meta);
  color: var(--ef-encre-doux);
}

/* Quelques utilitaires, écrits une fois ici plutôt que vingt fois en ligne
   dans les gabarits : un style en ligne échappe à toute relecture, et c'est
   par là qu'une couleur en dur finit par entrer. */
.mb-etiquette {
  display: block; font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ef-encre-doux);
  margin: 0 0 var(--e-1);
}
.mb-chiffre { font-family: var(--chiffres); }
.mb-detache { margin-top: var(--e-4); }
/* La démarche de validation, en tête de l'accueil, au-dessus des colonnes. */
.mb-validation { margin-bottom: var(--e-4); }
.mb-serre { margin: 0 0 var(--e-2); }
.mb-separe { border-top: 1px solid var(--bo-bordure-fine); }
.mb-gras { font-weight: 600; }
.mb-lien { font-weight: 600; text-decoration: none; }
.mb-lien.eteint { color: var(--ef-encre-doux); font-weight: 500; }

/* --- Boutons et pastilles ------------------------------------------------ */

.mb-bouton, .mb-bouton-creux {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--touche-min); padding: 12px var(--e-4);
  border-radius: var(--r-m); font: inherit; font-size: var(--t-corps);
  font-weight: 600; text-decoration: none; cursor: pointer; border: 0;
  text-align: center;
}
.mb-bouton { background: var(--ef-accent-plein, var(--ef-accent)); color: #fff; }
.mb-bouton-creux { background: none; color: var(--ef-accent);
  border: 1px solid var(--ef-accent); }
.mb-bouton[disabled], .mb-bouton.eteint {
  background: var(--bo-bordure); color: var(--ef-encre); cursor: not-allowed;
}
.mb-bouton.large, .mb-bouton-creux.large { width: 100%; }
.mb-bouton.alerte { background: var(--statut-bloquant-plein, var(--statut-bloquant)); }
.mb-bouton-creux.alerte { color: var(--statut-bloquant);
  border-color: var(--statut-bloquant); }

.mb-etat {
  display: inline-block; padding: 3px 8px; border-radius: var(--r-s);
  font-size: var(--t-libelle); font-weight: 600; white-space: nowrap;
  border: 1px solid var(--bo-bordure); color: var(--ef-encre-doux);
  background: var(--bo-fond);
}
.mb-etat.ok { color: var(--statut-ok); border-color: var(--statut-ok-bord);
  background: var(--statut-ok-fond); }
/* Ambre, et non brique : « complet » ou « paiement attendu » sont un manque
   à traiter, pas une règle violée (code de statut à trois valeurs). */
.mb-etat.attention { color: var(--statut-attention);
  border-color: var(--statut-attention-bord, var(--statut-bloquant-bord));
  background: var(--statut-attention-fond); }
.mb-compteur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--statut-bloquant-plein, var(--statut-bloquant)); color: #fff;
  font-family: var(--chiffres); font-size: var(--t-meta); font-weight: 600;
}
.mb-compteur.calme { background: var(--ef-accent-plein, var(--ef-accent)); }
.mb-point {
  position: absolute; top: 7px; right: 22px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--statut-bloquant);
  border: 1.5px solid var(--ef-surface);
}

/* `body.ef a` pèse (0,1,2) — deux éléments et une classe. Une simple classe
   ne peut pas l'emporter, et un bouton bleu sur bleu ne se voit qu'à l'écran,
   jamais dans un test. Les composants de l'espace membre qui sont des liens
   reprennent donc le même poids. */
body.ef a.mb-bouton, body.ef a.mb-bouton:hover,
body.ef a.mb-bouton.alerte { color: #fff; }
body.ef .mb-direct a.mb-bouton { color: var(--ef-encre-plein, var(--ef-encre)); }
body.ef a.mb-bouton-creux { color: var(--ef-accent); }
body.ef a.mb-bouton-creux.alerte { color: var(--statut-bloquant); }
body.ef .mb-bouton.eteint { color: var(--ef-encre); }
body.ef a.mb-filtre { color: var(--ef-encre-doux); }
body.ef a.mb-filtre.actif { color: #fff; }
body.ef a.mb-plus-ligne, body.ef a.mb-marque,
body.ef a.mb-compte { color: var(--ef-encre); }
body.ef a.mb-onglet { color: var(--ef-encre-doux); }
body.ef a.mb-onglet.actif { color: var(--ef-encre); }
body.ef a.mb-lire { color: var(--ef-encre-plein, var(--ef-encre)); }
body.ef a.mb-retour, body.ef a.mb-lien { color: var(--ef-accent); }

/* --- La coquille : « bientôt disponible », jamais une panne ------------- */

.mb-coquille {
  display: flex; align-items: flex-start; gap: var(--e-3);
  padding: var(--e-4); margin-bottom: var(--e-4);
  border: 1px solid var(--bo-bordure); border-radius: var(--r-l);
  background: color-mix(in srgb, var(--ef-accent) 6%, transparent);
}
.mb-coquille::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  margin-top: 7px; background: var(--ef-accent);
}
.mb-coquille p { margin: 0 0 var(--e-2); }
.mb-coquille .titre { font-weight: 600; }
/* Le retrait passe par le fond et les bordures, jamais par l'opacité : les
   textes gardent leurs valeurs nominales et restent conformes AA. */
.mb-eteint { background: var(--bo-fond); }
.mb-eteint .mb-bouton { background: var(--bo-bordure); color: var(--ef-encre); }

/* --- Les grilles de cartes : 1, 2, puis 3 colonnes ---------------------- */

.mb-grille { display: grid; grid-template-columns: 1fr; gap: var(--e-4); }
@media (min-width: 40rem) {
  .mb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-colonnes .mb-grille { grid-template-columns: 1fr; }
}
@media (min-width: 64rem) {
  .mb-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mb-grille.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mb-colonnes .mb-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* L'accueil au bureau : deux colonnes, pas trois. « À faire » reste à droite,
   toujours au même endroit. */
.mb-colonnes { display: flex; flex-direction: column; gap: var(--e-4); }
/* Dès la tablette, deux colonnes : 834 px, c'est l'iPad en portrait, et la
   largeur y suffit à montrer l'épinglé et « à faire » côte à côte. Pas trois —
   la troisième colonne ferait des cartes de 250 px. */
@media (min-width: 40rem) {
  .mb-colonnes {
    display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--e-4); align-items: start;
  }
  .mb-colonnes > div { display: flex; flex-direction: column; gap: var(--e-4); }
}
@media (min-width: 64rem) {
  .mb-colonnes { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--e-5); }
}

/* Au téléphone, les deux colonnes se replient en une seule pile : les tuiles
   deviennent enfants directes du conteneur et c'est leur rang qui ordonne. */
@media (max-width: 39.99rem) {
  .mb-colonnes > div { display: contents; }
}
.mb-rang-1 { order: 1; } .mb-rang-2 { order: 2; } .mb-rang-3 { order: 3; }
.mb-rang-4 { order: 4; } .mb-rang-5 { order: 5; } .mb-rang-6 { order: 6; }
@media (min-width: 40rem) { .mb-colonnes [class*="mb-rang-"] { order: 0; } }

/* --- Les filtres en pastilles ------------------------------------------- */

.mb-filtres { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 var(--e-4);
  padding-bottom: 2px; }
.mb-filtre {
  padding: 9px 13px; border-radius: var(--r-m); white-space: nowrap;
  border: 1px solid var(--ef-bordure); background: var(--ef-surface);
  color: var(--ef-encre-doux); text-decoration: none;
  font-size: var(--t-secondaire); min-height: var(--touche-min);
  display: inline-flex; align-items: center;
}
.mb-filtre.actif { background: var(--ef-encre); color: #fff;
  border-color: var(--ef-encre); font-weight: 600; }

/* --- Messages : liste puis lecture, maître-détail au-delà de 640 px ----- */

.mb-maitre-detail { display: block; }
.mb-fleches { display: flex; gap: 6px; }
.mb-fleche {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 5px 9px; border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); color: var(--ef-accent);
  font-size: var(--t-libelle); font-weight: 600; text-decoration: none;
}
.mb-fleche.eteint { color: var(--ef-encre-doux); background: var(--bo-fond); }
.mb-lecture { display: none; }

@media (min-width: 40rem) {
  .mb-maitre-detail {
    display: grid; grid-template-columns: 296px minmax(0, 1fr);
    border: 1px solid var(--ef-bordure); border-radius: var(--r-l);
    overflow: hidden; background: var(--ef-surface);
  }
  .mb-lecture { display: block; }
}
@media (min-width: 64rem) {
  .mb-maitre-detail { grid-template-columns: var(--mb-liste) minmax(0, 1fr); }
}

.mb-lecture-tete {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-5); border-bottom: 1px solid var(--ef-bordure);
}
.mb-lecture-corps { padding: var(--e-5); }
.mb-note-encadree {
  display: flex; gap: var(--e-3); padding: var(--e-3);
  border: 1px solid var(--ef-bordure); border-radius: var(--r-m);
  background: var(--bo-fond); margin: var(--e-3) 0;
}
.mb-note-encadree::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  margin-top: 7px; background: var(--ef-accent);
}
.mb-note-encadree p { margin: 0; }
.mb-pagination { display: flex; align-items: center; gap: var(--e-3);
  margin-top: var(--e-4); }
.mb-pagination .fin { margin-left: auto; }

/* --- Événements : la liste et la fiche sont dans front.css (FO-EVT) ------ */

/* L'inscription : barre de total collée en bas sur téléphone, carte collante
   à droite au-delà. Même intention, moyen différent. */
.mb-total {
  position: fixed; left: 0; right: 0; bottom: var(--mb-barre); z-index: 40;
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); background: var(--ef-surface);
  border-top: 1px solid var(--ef-bordure);
}
.mb-total .mb-bouton { margin-left: auto; }
.mb-total .montant { font-family: var(--chiffres); font-weight: 600;
  font-size: var(--t-corps); }
@media (min-width: 40rem) {
  .mb-total { position: sticky; bottom: auto; top: calc(var(--mb-haut) + var(--e-4));
    flex-direction: column; align-items: stretch; border-radius: var(--r-l);
    border: 1px solid var(--ef-bordure); padding: var(--e-4); }
  .mb-total .mb-bouton { margin-left: 0; }
}

/* --- Lives --------------------------------------------------------------- */

.mb-lecteur { background: var(--ef-encre-plein, var(--ef-encre)); border-radius: var(--r-l);
  overflow: hidden; }
.mb-lecteur-image {
  height: 186px; position: relative; display: flex; align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg,
    var(--ef-accent), var(--ef-accent) 10px,
    color-mix(in srgb, var(--ef-accent) 80%, #fff) 10px,
    color-mix(in srgb, var(--ef-accent) 80%, #fff) 20px);
}
.mb-lecteur-image .mb-pastille-direct { position: absolute; top: 11px; left: 11px;
  z-index: 1; }
/* La vignette 16:9 du live, sous la pastille et le bouton de lecture. Sans
   elle, le motif rayé reste : un cadre vide se lirait comme une image qui n'a
   pas chargé. */
.mb-lecteur-photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.mb-lecteur-image .mb-lire { position: relative; z-index: 1; }
.mb-lire {
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ef-encre-plein, var(--ef-encre)); font-size: var(--t-titre-s); text-decoration: none;
}
.mb-lecteur-pied { padding: var(--e-4); color: #fff; }
.mb-lecteur-pied h3 { margin: 0 0 var(--e-1); color: #fff;
  font-size: var(--t-titre-s); }
.mb-lecteur-pied .note { color: color-mix(in srgb, #fff 62%, transparent);
  font-family: var(--chiffres); margin: 0; }
/* « Rejoindre le live » : le geste du direct, sous son titre, partout. */
.mb-lecteur-pied .mb-rejoindre { margin-top: var(--e-3); background: #fff;
  color: var(--ef-encre-plein, var(--ef-encre)); }
body.ef .mb-lecteur-pied a.mb-rejoindre { color: var(--ef-encre-plein, var(--ef-encre)); }
/* Une marge entre le bandeau du direct et les colonnes qui le suivent. */
.mb-bandeau-accueil { display: flex; flex-direction: column; gap: var(--e-4);
  margin-bottom: var(--e-5); }
/* Le compteur de YouTube, en bas à droite de l'image (maquette EM10) ; avant
   le live, à la même place, son échéance. */
.mb-lecteur-public, .mb-lecteur-echeance { position: absolute; right: 11px;
  bottom: 11px; z-index: 1;
  padding: 3px 8px; border-radius: var(--r-s); font-family: var(--chiffres);
  font-size: var(--t-meta); color: #fff;
  background: color-mix(in srgb, var(--ef-encre) 72%, transparent); }

/* Le prochain live : le dessin du direct (maquette du 7 octobre 2026). La
   pastille est neutre et son point creux — le point plein et la brique disent
   « en direct », et seulement eux. Pas de ▶ : il n'y a rien à regarder. */
.mb-pastille-prochain {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  border-radius: var(--r-s); color: #fff;
  background: color-mix(in srgb, var(--ef-encre) 72%, transparent);
  font-family: var(--chiffres); font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.mb-pastille-prochain::before { content: ""; width: 6px; height: 6px;
  border-radius: 50%; border: 1.5px solid currentColor; }
.mb-lecteur-image .mb-pastille-prochain { position: absolute; top: 11px;
  left: 11px; z-index: 1; }
.mb-a-venir .mb-lecteur-pied p { margin: 0; }
.mb-a-venir .mb-pastille-attente { margin-top: var(--e-3); }

/* Le prédicateur, sur sa ligne : c'est la première chose qu'on cherche dans
   une liste de lives. */
.mb-ligne .mb-predicateur { font-size: var(--t-secondaire); }

/* La tuile Live de l'accueil, hors direct. */
.mb-tuile-live .mb-tuile-corps { display: flex; flex-direction: column;
  gap: var(--e-2); }
.mb-tuile-surtitre { margin: var(--e-2) 0 0; font-family: var(--chiffres);
  font-size: var(--t-meta); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ef-encre-doux); }
.mb-pastille-attente {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--e-1);
  padding: 4px 9px; border-radius: var(--r-s);
  border: 1px solid color-mix(in srgb, var(--ef-accent-texte) 45%, transparent);
  font-family: var(--chiffres); font-size: var(--t-meta); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.mb-pastille-attente::before { content: ""; width: 6px; height: 6px;
  border-radius: 50%; border: 1.5px solid currentColor; }

.mb-ligne { display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--bo-bordure-fine); }
.mb-ligne:last-child { border-bottom: 0; }
.mb-ligne .jour { width: 46px; flex: none; text-align: center;
  font-family: var(--chiffres); }
.mb-ligne .jour .nombre { display: block; font-size: var(--t-titre-s);
  font-weight: 600; }
.mb-ligne .jour .mois { display: block; font-size: var(--t-meta);
  text-transform: uppercase; color: var(--ef-encre-doux); }
.mb-ligne .corps { flex: 1; min-width: 0; }
.mb-ligne p { margin: 0; }
/* 80 px sur téléphone : au-delà, le titre du replay passe à la ligne et la
   liste se met à respirer là où elle devrait se parcourir. */
.mb-vignette { width: 80px; height: 48px; flex: none; border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); overflow: hidden;
  background: repeating-linear-gradient(135deg,
    var(--bo-fond), var(--bo-fond) 8px,
    var(--bo-bordure-fine) 8px, var(--bo-bordure-fine) 16px); }
.mb-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Dons ---------------------------------------------------------------- */

.mb-choix { display: flex; flex-direction: column; gap: var(--e-2); }
.mb-choix-ligne {
  display: block; padding: var(--e-3); border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); background: var(--ef-surface);
  font-size: var(--t-corps); cursor: pointer; min-height: var(--touche-min);
}
.mb-choix-ligne.retenu { border: 1.5px solid var(--ef-accent);
  color: var(--ef-accent); font-weight: 600; }
.mb-montants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e-2); }
.mb-montant {
  padding: 14px 0; text-align: center; border-radius: var(--r-m);
  border: 1px solid var(--ef-bordure); background: var(--ef-surface);
  font-family: var(--chiffres); font-size: var(--t-corps);
  min-height: var(--touche-min);
}
.mb-montant.retenu { border: 1.5px solid var(--ef-accent);
  color: var(--ef-accent); font-weight: 600; }

.mb-bientot { flex: none; font-family: var(--p-mono); font-size: calc(.6875rem * var(--fm-echelle, 1));
  letter-spacing: .04em; color: var(--ef-encre-doux);
  border: 1px solid var(--ef-bordure); border-radius: 999px;
  padding: .0625rem .4375rem; }
.mb-chevron { flex: none; color: var(--ef-encre-doux); font-size: calc(1.25rem * var(--fm-echelle, 1));
  line-height: 1; }

@media (min-width: 40rem) {
  .mb-vignette { width: 104px; height: 62px; }
}

/* --- Le panneau « Plus » -------------------------------------------------- */

.mb-plus-liste { display: flex; flex-direction: column; }
.mb-plus-ligne {
  display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4);
  border-bottom: 1px solid var(--bo-bordure-fine); text-decoration: none;
  color: var(--ef-encre); min-height: var(--touche-min);
}
.mb-plus-ligne svg { width: 20px; height: 20px; flex: none;
  color: var(--ef-accent); }
.mb-plus-ligne .corps { flex: 1; min-width: 0; }
.mb-plus-ligne p { margin: 0; }
.mb-plus-ligne .titre { font-weight: 600; }

/* --- Un formulaire ne s'élargit jamais ----------------------------------- */

.mb-formulaire { max-width: var(--mb-colonne); }
@media (min-width: 40rem) { .mb-formulaire { margin-left: auto;
  margin-right: auto; } }

/* --- Au-delà de 1024 px, la souris : 36 px suffisent -------------------- */

@media (min-width: 64rem) and (pointer: fine) {
  .mb-filtre, .mb-choix-ligne, .mb-montant,
  .mb-plus-ligne { min-height: 36px; }
  .mb-bouton, .mb-bouton-creux { min-height: 38px; padding: 9px var(--e-4); }
}