/* =====================================================================
   Qeewee — ESPACE MEMBRE (/espace, layout member.layout).
   Même langage visuel que le reste de Qeewee (soft UI indigo) :
   fond slate, cartes blanches ombrées, accent #4f46e5.
   Préfixe mb-* pour tous les composants.
   ===================================================================== */

:root {
    /* Couleur de marque de l'app membre (par défaut : indigo Qeewee).
       Surchargée par église via un bloc <style> inline dans le layout. */
    --mb-brand: #4f46e5;
    --mb-brand-2: #6366f1;
    --mb-brand-dark: #4338ca;
    --mb-brand-soft: #eef2ff;
}

*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: #f8fafc; color: #1e293b; -webkit-font-smoothing: antialiased;
}

/* Mouvement réduit : réglage système de qui souffre du mal des transports ou
   de troubles vestibulaires, pour qui une animation n'est pas un agrément
   mais une nausée. Cette feuille n'en comportait aucune prise en compte. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important; scroll-behavior: auto !important;
    }
}

/* ── Coquille ── */
.mb-shell { max-width: 520px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.mb-main { flex: 1; padding: 1.15rem 1rem 1.75rem; }

/* ── En-tête (bande indigo, branding église) ──
   Assorti aux portes d'entrée (lot A, 2026-08-06) : semis de graines + fondu
   vers le violet dérivé en oklch. Le dégradé d'origine (--mb-brand vers
   --mb-brand-2, la marque éclaircie de 14 %) avait le même « tout bleu » que
   le login avant sa refonte ; il reste le repli hors oklch. Tout est dérivé :
   la couleur d'église injectée par le gabarit continue de commander. */
.mb-head {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1rem; padding-top: calc(0.9rem + env(safe-area-inset-top));
    color: #fff;
    background-color: var(--mb-brand);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.18) 1.3px, transparent 1.4px),
        radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.1px),
        linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2));
    background-size: 26px 26px, 17px 17px, auto;
    background-position: 0 0, 9px 13px, 0 0;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.25);
}
@supports (color: oklch(from red l c h)) {
    .mb-head {
        background-image:
            radial-gradient(rgba(255, 255, 255, 0.18) 1.3px, transparent 1.4px),
            radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.1px),
            linear-gradient(135deg,
                var(--mb-brand) 0%,
                oklch(from var(--mb-brand) calc(l + 0.04) calc(c * 0.90) calc(h + 8)) 55%,
                oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)) 100%);
    }
}
.mb-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.2px; }
.mb-brand img { height: 1.7rem; width: auto; border-radius: 6px; background: #fff; padding: 2px 4px; }
.mb-logout {
    background: rgba(255, 255, 255, 0.14); border: none; cursor: pointer; color: #fff;
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.8rem; font-weight: 600; font-family: inherit;
    padding: 0.4rem 0.7rem; border-radius: 999px;
}
.mb-logout svg { width: 1rem; height: 1rem; }
.mb-head-actions { display: inline-flex; align-items: center; gap: 0.4rem; }
.mb-switch { text-decoration: none; }

/* Pastille de compte + menu déroulant (déconnexion, profil) */
[x-cloak] { display: none !important; }
.mb-usermenu { position: relative; display: inline-flex; }
.mb-avatar {
    width: 2.1rem; height: 2.1rem; padding: 0; border: none; cursor: pointer;
    border-radius: 999px; overflow: hidden; color: #fff; font-family: inherit;
    background: rgba(255, 255, 255, 0.18); font-weight: 700; font-size: 0.82rem;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.mb-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-usermenu-pop {
    position: absolute; top: calc(100% + 0.45rem); right: 0; min-width: 12rem;
    background: #fff; border: 1px solid #eef2f7; border-radius: 0.85rem;
    padding: 0.35rem; z-index: 60; box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18);
    /* Fondu à l'ouverture : x-show bascule le display, une animation CSS joue au
       moment où l'élément passe en display:block (fiable, contrairement à une
       transition depuis un état masqué). */
    transform-origin: top right; animation: mb-pop-in 0.15s ease forwards;
}
@keyframes mb-pop-in {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.mb-usermenu-pop a, .mb-usermenu-pop button {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.6rem 0.7rem; border-radius: 0.6rem; text-align: left;
    background: none; border: none; cursor: pointer; font: inherit;
    color: #334155; text-decoration: none;
}
.mb-usermenu-pop a:hover, .mb-usermenu-pop button:hover { background: #f1f5f9; }
.mb-usermenu-pop svg { width: 1.15rem; height: 1.15rem; flex: none; color: #64748b; }
.mb-usermenu-pop form { margin: 0; }

/* ── Barre d'onglets (bas) ── */
.mb-nav {
    /* z-index : les pastilles de réactions du fil (z-1) passaient DEVANT la
       barre au défilement, et restaient cliquables à travers elle. */
    position: sticky; bottom: 0; z-index: 2; display: flex; background: #fff;
    border-top: 1px solid #eef0f5; box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
}
.mb-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 0.55rem 0 0.5rem; font-size: 0.68rem; font-weight: 500;
    text-decoration: none; color: #94a3b8; position: relative;
}
/* L'icone porte sa pastille : transparente au repos, lavande sur l'onglet
   actif. Le padding est constant pour que la barre ne bouge pas d'un pixel
   quand l'onglet change. Remplace le trait du haut (lot A, 2026-08-06) :
   la pastille se voit du pouce, le trait de 3 px se cherchait. */
.mb-nav a svg { width: 1.45rem; height: 1.45rem; padding: 0.14rem 0.55rem; border-radius: 999px; box-sizing: content-box; }
.mb-nav a.is-active { color: var(--mb-brand); font-weight: 700; }
.mb-nav a.is-active svg { background: var(--mb-brand-soft); }

/* ── Titres et textes ── */
.mb-title { font-size: 1.35rem; font-weight: 800; margin: 0.25rem 0 0.15rem; color: #1e293b; }
.mb-sub { color: #64748b; font-size: 0.9rem; margin: 0 0 1.4rem; }
.mb-section { font-weight: 700; font-size: 0.82rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.6rem; }
.mb-muted { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }

/* ── Cartes ── */
.mb-card {
    background: #fff; border-radius: 1rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
    padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.mb-card--flush { padding: 0; overflow: hidden; }
.mb-card--danger { box-shadow: 0 2px 12px rgba(220, 38, 38, 0.12); border: 1px solid #fecaca; }

/* Bloc repliable (details/summary natif, sans JS) — ex. suppression de compte */
.mb-collapse { padding: 0; overflow: hidden; }
.mb-collapse > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.9rem 1.1rem; font-weight: 700; font-size: 0.92rem; color: #b91c1c;
}
.mb-collapse > summary::-webkit-details-marker { display: none; }
.mb-collapse-label { display: inline-flex; align-items: center; gap: 0.4rem; }
.mb-collapse-chev { width: 1.1rem; height: 1.1rem; flex-shrink: 0; transition: transform 0.15s ease; }
.mb-collapse[open] .mb-collapse-chev { transform: rotate(180deg); }
.mb-collapse-body { padding: 0 1.1rem 1rem; }

/* Liste de lignes dans une carte flush */
.mb-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.1rem; }
.mb-row + .mb-row { border-top: 1px solid #f1f5f9; }

/* ── Tuiles d'accueil façon dashboard admin (pleine largeur, kiwi au trait) ── */
.mb-hero {
    position: relative; overflow: hidden; display: block;
    border-radius: 1.1rem; padding: 1.15rem 1.2rem; min-height: 108px;
    color: #fff; text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    background: var(--tuile, #6366f1);
    /* L'ombre est COLORÉE par la tuile : le relief gris unique d'avant
       aplatissait sept couleurs sous la même ombre. */
    box-shadow: 0 10px 24px color-mix(in srgb, var(--tuile, #23286a) 32%, transparent);
}
/* Chaque tuile garde SA couleur — c'est le repère fonctionnel du module — et
   la déclare dans `--tuile` : le fond, le fondu et l'ombre colorée en
   dérivent. L'aplat ci-dessus reste le repli hors oklch. (Lot A, 2026-08-06.) */
.mb-hero--service { --tuile: #6366f1; }
.mb-hero--groups { --tuile: #ea580c; }
.mb-hero--giving { --tuile: #0d9488; }
.mb-hero--children { --tuile: #16a34a; }
.mb-hero--media { --tuile: #7c3aed; }
.mb-hero--documents { --tuile: #b45309; }
.mb-hero--profile { --tuile: #64748b; }
@supports (color: oklch(from red l c h)) {
    .mb-hero {
        background: linear-gradient(150deg,
            var(--tuile, #6366f1),
            oklch(from var(--tuile, #6366f1) calc(l + 0.07) calc(c * 0.85) calc(h + 19)));
    }
}
/* Survol (desktop) : la tuile se soulève, comme le dashboard admin. */
@media (hover: hover) {
    a.mb-hero:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px color-mix(in srgb, var(--tuile, #23286a) 40%, transparent);
    }
}
/* Appui (tactile) : la tuile s'enfonce, ombre resserrée. */
a.mb-hero:active {
    transform: translateY(2px) scale(0.99);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tuile, #23286a) 26%, transparent);
}
/* Le filigrane est désormais le composant x-kiwi-trait (viewBox 64) : la
   taille se donne ici, l'ancien SVG portait la sienne en attributs. */
.mb-hero-kiwi { position: absolute; top: -28px; right: -24px; width: 110px; height: 110px; }
.mb-hero-ico {
    position: relative; display: inline-flex; width: 2.4rem; height: 2.4rem;
    align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.18); border-radius: 0.8rem;
}
.mb-hero-ico svg { width: 1.35rem; height: 1.35rem; }
.mb-hero-title { position: relative; margin-top: 0.7rem; font-size: 1.02rem; font-weight: 700; }
.mb-hero-desc { position: relative; margin-top: 0.15rem; font-size: 0.85rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.mb-hero-soon {
    position: absolute; top: 1rem; right: 1rem; z-index: 1;
    font-size: 0.68rem; font-weight: 600; color: #fff;
    background: rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 2px 10px;
}

/* ── Cartes-liens de l'accueil ── */
.mb-tile {
    display: flex; align-items: center; gap: 0.9rem;
    background: #fff; border-radius: 1rem; padding: 1rem 1.1rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07);
    text-decoration: none; color: inherit;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.mb-tile:active { transform: scale(0.985); }
.mb-tile-ico {
    flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    background: #eef2ff; color: #4f46e5;
}
.mb-tile-ico svg { width: 1.4rem; height: 1.4rem; }
.mb-tile--service .mb-tile-ico { background: #eef2ff; color: #4f46e5; }
.mb-tile--groups .mb-tile-ico { background: #fff7ed; color: #ea580c; }
.mb-tile--giving .mb-tile-ico { background: #ecfdf5; color: #059669; }
.mb-tile--profile .mb-tile-ico { background: #f1f5f9; color: #475569; }
.mb-tile-body { flex: 1; min-width: 0; }
.mb-tile-title { font-weight: 700; font-size: 0.95rem; }
.mb-tile-desc { font-size: 0.82rem; color: #64748b; }
.mb-tile-chev { flex-shrink: 0; color: #cbd5e1; }
.mb-tile-chev svg { width: 1.05rem; height: 1.05rem; }
.mb-soon { flex-shrink: 0; font-size: 0.68rem; font-weight: 600; color: #94a3b8; background: #f1f5f9; border-radius: 999px; padding: 2px 9px; }
.mb-tiles { display: flex; flex-direction: column; gap: 0.75rem; }

/* ── Boutons ── */
.mb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
    border: none; border-radius: 0.7rem; padding: 0.75rem 1.1rem;
    font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit;
    text-decoration: none; transition: background 0.12s ease;
}
.mb-btn svg { width: 1.05rem; height: 1.05rem; }
.mb-btn:active { transform: translateY(1px); }
/* Le bouton primaire porte le fondu du login PARTOUT (lot A) : l'aplat et le
   survol plein restent les replis hors oklch. */
.mb-btn--primary { background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2)); color: #fff; box-shadow: 0 6px 16px rgba(35, 40, 100, 0.18); }
.mb-btn--primary:hover { background: var(--mb-brand-dark); }
.mb-btn--primary:active { box-shadow: 0 3px 8px rgba(35, 40, 100, 0.14); }
@supports (color: oklch(from red l c h)) {
    .mb-btn--primary {
        background: linear-gradient(135deg,
            var(--mb-brand),
            oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)));
    }
    .mb-btn--primary:hover {
        background: linear-gradient(135deg,
            var(--mb-brand-dark),
            oklch(from var(--mb-brand) calc(l + 0.03) calc(c * 0.9) calc(h + 12)));
    }
}
.mb-btn--block { width: 100%; }
.mb-btn--success { background: #16a34a; color: #fff; box-shadow: 0 4px 12px rgba(35, 40, 100, 0.16); }
.mb-btn--danger-outline { background: #fff; color: #b91c1c; border: 1.5px solid #fca5a5; }
.mb-btn--danger { background: #dc2626; color: #fff; }
.mb-btn--ghost { background: #f1f5f9; color: #475569; }
.mb-btn--sm { padding: 0.5rem 0.9rem; font-size: 0.85rem; border-radius: 0.6rem; }
.mb-link { background: none; border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--mb-brand); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.mb-link svg { width: 0.9rem; height: 0.9rem; }

/* ── Formulaires ── */
.mb-label { display: block; font-size: 0.82rem; font-weight: 600; color: #475569; margin-bottom: 0.3rem; }
.mb-input {
    /* Lavande au repos, blanc a la saisie : le geste du login, generalise a
       tout l'espace membre (lot A). La teinte suit la marque d'eglise. */
    width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid transparent; background: var(--mb-brand-soft);
    /* ⚠️ `font-size: 1rem` N'EST PAS UN CHOIX ESTHÉTIQUE : sous 16 px, Safari
       iOS zoome tout seul sur le champ au moment de la saisie, et l'écran
       de connexion part de travers. Ne pas descendre. */
    border-radius: 0.6rem; font-size: 1rem; outline: none; color: #1e293b;
    /* La police du texte (04.10.2026, retours d'Eva) : un textarea prend sinon
       la chasse fixe du navigateur, et le motif de « Je ne peux plus venir »
       s'écrivait en machine à écrire. Sans effet visible sur les input, dont
       la police par défaut est déjà celle du système. */
    font-family: inherit;
}
/* 🔴 UN ANNEAU, ET PAS SEULEMENT UNE BORDURE COLORÉE. `outline: none` est
   posé ci-dessus, et la règle de focus ne changeait que la COULEUR d'une
   bordure de même épaisseur : au clavier, rien ne bougeait de perceptible,
   et l'on ne savait plus dans quel champ on se trouvait. Le décalage de
   teinte seul ne suffit pas non plus à qui distingue mal les couleurs. */
.mb-input:focus { background: #fff; border-color: var(--mb-brand); box-shadow: 0 0 0 3px var(--mb-brand-soft); }
/* ⚠️ Le lavande suppose une CARTE BLANCHE derriere. Dans les conteneurs deja
   teintes — bulle de message (edition, signalement : la bulle du membre est
   EXACTEMENT --mb-brand-soft) et bloc date de naissance — un champ lavande a
   bordure invisible mesurait 1,0:1 : rien n'indiquait plus ou taper. La, le
   champ reste blanc et borde, comme avant le lot A. */
.mb-msg-bubble .mb-input,
.mb-birthdate .mb-input { background: #fff; border-color: #e2e8f0; }
/* Les placeholders heritaient du gris du navigateur (#757575) : 4,1:1 sur le
   lavande, sous le seuil AA de 4,5:1. `opacity: 1` neutralise le voile que
   Firefox ajoute par defaut. */
.mb-input::placeholder { color: #64748b; opacity: 1; }
.mb-error { color: #dc2626; font-size: 0.78rem; margin-top: 0.3rem; }
/* Champ mot de passe avec bouton œil */
[x-cloak] { display: none !important; }
.mb-pass { position: relative; }
.mb-pass-input { padding-right: 2.8rem; }
.mb-pass-toggle {
    position: absolute; top: 0; right: 0; height: 100%; width: 2.7rem;
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; color: #94a3b8;
}
.mb-pass-toggle svg { width: 1.2rem; height: 1.2rem; }

.mb-alert { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 0.7rem; padding: 0.6rem 0.8rem; font-size: 0.85rem; margin-bottom: 1rem; }
.mb-alert--info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; display: flex; align-items: center; gap: 0.5rem; }
/* Attention (ambre) : quelque chose à faire, pas une erreur. Le bandeau des
   notifications coupées (décision Stéphane 2026-08-19) : on avertit tant que la
   personne n'a pas dit « je me débrouille ». */
.mb-alert--attention { background: #fffbeb; border-color: #fde68a; color: #92400e; display: flex; align-items: flex-start; gap: 0.6rem; }
.mb-alert--attention > svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }
.mb-alert-corps { flex: 1; min-width: 0; }
.mb-alert-corps p { margin: 0 0 0.5rem; line-height: 1.45; }
.mb-alert-corps p:last-of-type { margin-bottom: 0; }
.mb-alert-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.55rem; align-items: center; }
.mb-alert-actions .mb-btn--ghost { color: inherit; }
.mb-alert-ignorer { background: none; border: 0; padding: 0.3rem 0.2rem; font-size: 0.8rem; color: inherit; opacity: 0.8; text-decoration: underline; cursor: pointer; }

/* ── Badges de statut ── */
.mb-badge { flex-shrink: 0; font-size: 0.68rem; font-weight: 600; border-radius: 999px; padding: 2px 9px; }
.mb-badge--green { background: #dcfce7; color: #15803d; }
.mb-badge--red { background: #fee2e2; color: #b91c1c; }
.mb-badge--orange { background: #ffedd5; color: #c2410c; }
.mb-badge--gray { background: #f1f5f9; color: #4b5563; }
.mb-badge--amber { background: #fef3c7; color: #b45309; }

/* ── Déroulé de service (bénévole affecté) ── */
.mb-plan-section { background: #f8fafc; color: #64748b; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.45rem 1rem; border-bottom: 1px solid #f1f5f9; }
.mb-plan-time { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 0.82rem; font-weight: 700; color: var(--mb-brand); min-width: 2.9rem; }
/* La tonalité du jour : .mb-cle-du-jour, section « Louange » en fin de
   feuille (21.10.2026, lot L2), à la place de l'ancien badge gris. */
.mb-plan-row { display: block; }
.mb-plan-line { display: flex; align-items: baseline; gap: 0.6rem; }
.mb-plan-main { flex: 1; min-width: 0; }
.mb-plan-title { font-weight: 700; font-size: 0.92rem; }
.mb-plan-meta { margin-top: 2px; }
.mb-link--inline { display: inline-flex; }
/* Avant et après le culte (P3, 31.10.2026, choix A de 5-p3-choix) :
   l'intertitre de la partie et ses lignes sur un fond rosé du module Chants. */
.mb-plan-partie { background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1rem 0.3rem; }
.mb-plan-row--hors { background: linear-gradient(90deg, var(--mb-chants-douce, #fdf4ff), #fff 85%); }
.mb-plan-row--hors .mb-plan-time { color: var(--mb-chants-fonce, #a21caf); }

/* ── Le message du culte sur une carte de service (15.10.2026, lot P6) ──
   Thème, sujet, passage, et le petit formulaire « Indiquer mon sujet » de la
   personne qui apporte le message (planche « sujet du message », image 3b).
   Fond lavande de la marque ; les champs y passent en blanc, sans quoi ils
   disparaîtraient dans le fond (.mb-input est lui-même lavande). */
.mb-message { margin-top: 0.6rem; padding: 0.65rem 0.85rem; border-radius: 0.75rem; background: var(--mb-brand-soft); }
.mb-message-ligne { display: flex; gap: 0.75rem; font-size: 0.85rem; line-height: 1.45; color: #1e293b; }
.mb-message-ligne + .mb-message-ligne { margin-top: 0.15rem; }
.mb-message-cle { flex: 0 0 auto; min-width: 4.6rem; color: var(--mb-brand); font-weight: 600; }
/* La valeur va à la ligne, même sans espace (relecture du 15.10.2026) : un
   passage collé depuis bible.com (49 caractères, sous la borne de 80) sortait
   de 72 px de la carte, l'élément flex gardant sa largeur minimale
   automatique. Comme .mb-msg-body et .mb-ann-body. */
.mb-message-ligne > span:last-child { min-width: 0; overflow-wrap: anywhere; }
/* #475569 et non #64748b (relecture du 15.10.2026) : 4,25:1 sur le fond
   lavande, sous le seuil de 4,5:1 ; 6,8:1 ainsi. */
.mb-message-vide { color: #475569; font-style: italic; }
.mb-message .mb-label { margin-top: 0.65rem; }
.mb-message .mb-input { background: #fff; }

/* ── Mon service › Mon équipe (B2, 24.10.2026, planche manques-jerome/B) ──
   La barre des deux onglets (pastille lavande, onglet ouvert au dégradé de
   marque), puis, par équipe, sa pastille aux couleurs de l'Annuaire (le
   module des équipes, SectionTheme : #db2777, foncé #be185d) et ses lignes
   au planning. Lecture seule : aucun bouton dans les lignes.
   ⚠️ Rien ici ne dépend de .mb-zone, sauf la grille sur ordinateur : la
   nouvelle interface et l'ancienne montrent le même onglet. */
:root {
    --mb-equipe: #db2777;
    --mb-equipe-fin: #9333ea;
}
/* 30rem au plus : sur ordinateur (colonne de 1060 px), deux onglets étirés
   sur toute la largeur ne se lisaient plus comme un choix. */
.mb-onglets {
    display: flex; gap: 0.3rem; padding: 0.3rem; margin: 0.7rem 0 1.1rem; max-width: 30rem;
    border-radius: 999px; background: var(--mb-brand-soft);
}
.mb-onglet {
    flex: 1 1 0; min-width: 0; min-height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.4rem 0.75rem; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font: inherit; font-size: 0.86rem; font-weight: 700; color: var(--mb-brand-dark);
}
.mb-onglet svg { flex: none; width: 1.05rem; height: 1.05rem; }
.mb-onglet span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-onglet.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2));
    box-shadow: 0 4px 12px color-mix(in srgb, var(--mb-brand) 32%, transparent);
}
@supports (color: oklch(from red l c h)) {
    .mb-onglet.is-active {
        background: linear-gradient(135deg, var(--mb-brand), oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)));
    }
}
.mb-onglet:focus-visible { outline: 2px solid var(--mb-brand); outline-offset: 2px; }

.mb-equipe { margin-bottom: 1.4rem; }
.mb-equipe .mb-card { margin-bottom: 0; }
.mb-equipe-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin: 0 0 0.6rem; }
.mb-equipe-pastille {
    display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%;
    padding: 0.32rem 0.85rem; border-radius: 999px;
    color: #fff; font-size: 0.8rem; font-weight: 700;
    background-color: var(--mb-equipe);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.2) 1.3px, transparent 1.4px),
        linear-gradient(135deg, var(--mb-equipe), var(--mb-equipe-fin));
    background-size: 13px 13px, auto;
    box-shadow: 0 4px 12px rgba(219, 39, 119, 0.28);
}
.mb-equipe-pastille svg { flex: none; width: 0.95rem; height: 0.95rem; }
.mb-equipe-pastille span { min-width: 0; overflow-wrap: anywhere; }
/* #475569 et non #64748b : lisible sur le fond lavande de la ligne « vous »
   (même relecture que .mb-message-vide, 15.10.2026). */
.mb-equipe-role { font-size: 0.78rem; font-weight: 600; color: #475569; }
.mb-equipe-ligne { align-items: flex-start; gap: 0.9rem; padding: 0.75rem 1.1rem; }
.mb-equipe-ligne.is-moi { background: var(--mb-brand-soft); box-shadow: inset 3px 0 0 var(--mb-brand); }
.mb-equipe-quand { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mb-equipe-jour { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mb-brand-dark); }
.mb-equipe-activite { font-size: 0.8rem; color: #475569; overflow-wrap: anywhere; }
.mb-equipe-qui { flex: 0 1 auto; min-width: 0; max-width: 58%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.mb-equipe-nom { font-size: 0.88rem; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }
.mb-equipe-nom.is-moi { color: var(--mb-brand); font-weight: 800; }
.mb-equipe-a-pourvoir { padding: 1px 9px; border-radius: 999px; background: #fee2e2; color: #b91c1c; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.mb-equipe-vide { padding: 1.1rem; }
.mb-equipe-vide .mb-muted { margin: 0; }
.mb-equipe-note { margin-top: 0.2rem; }
/* Sur ordinateur, dans la nouvelle interface (colonne de 1060 px) : les
   équipes côte à côte, deux par rangée, comme l'accueil. */
@media (min-width: 1024px) {
    .mb-zone .mb-equipes-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; margin-bottom: 1.4rem; }
    .mb-zone .mb-equipes-liste .mb-equipe { margin-bottom: 0; }
}

/* ── Pastilles d'attestation ── */
.mb-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    border: 1.5px solid var(--mb-brand); color: var(--mb-brand); background: #fff;
    border-radius: 999px; padding: 0.4rem 0.9rem;
    font-size: 0.85rem; font-weight: 700; text-decoration: none;
}
.mb-pill svg { width: 0.85rem; height: 0.85rem; }

/* =====================================================================
   ÉCRANS PUBLICS — connexion, inscription, mot de passe oublié, code
   d'église, lien de connexion. Le gabarit leur pose `.mb-public` sur le
   <body> (voir member/layout.blade.php).

   L'IDÉE : le bandeau porte la marque et le nom de l'écran, la carte ne
   porte plus que le formulaire. Sur téléphone la carte remonte par-dessus
   le bandeau ; au-delà de 900 px l'écran se coupe en deux, vitrine à
   gauche et formulaire à droite.

   🔴 CE QUI COMMANDE TOUT : L'ÉCRAN DE CONNEXION DOIT TENIR SANS DÉFILER.
   Mesuré sur 375 x 812 avant cette refonte : le contenu s'arrêtait à
   760 px, soit 52 px de marge — pas un de plus. Ce qui tombe hors champ
   quand on dépasse, c'est le bas de la carte, donc « J'ai un code
   d'église », seul chemin pour rejoindre la sienne. Toute retouche de
   padding ici se vérifie au navigateur, jamais à l'estime.
   ===================================================================== */

/* ── Le bandeau de marque ── */
.mb-cover {
    position: relative; overflow: hidden; color: #fff;
    padding: 1.4rem 1.25rem 3rem;
    /* 🔴 REPRIS DE `.mb-head`, QUI ÉTAIT LE SEUL PORTEUR DE CETTE RÉSERVE
       dans toute la feuille. Sans elle, le logo passe sous l'encoche. */
    padding-top: calc(1.4rem + env(safe-area-inset-top));
    /* ⚠️ AUCUNE COULEUR EN DUR. Une église peut imposer sa teinte de marque
       (bloc <style> du gabarit), et un membre déjà connecté qui rouvre
       l'écran de connexion la verrait ici. Le relief vient donc d'une
       lueur BLANCHE, qui reste juste quelle que soit la teinte, et non
       d'un violet inventé qui jurerait avec un rouge ou un vert. */
    background-color: var(--mb-brand);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.20) 1.4px, transparent 1.5px),
        radial-gradient(rgba(255, 255, 255, 0.13) 1.1px, transparent 1.2px),
        radial-gradient(120% 95% at 88% -15%, rgba(255, 255, 255, 0.30), transparent 62%),
        linear-gradient(145deg, var(--mb-brand) 0%, var(--mb-brand-2) 100%);
    /* Les deux premières couches sont les GRAINES DU KIWI, agrandies et
       semées : le fond ne décore pas, il reprend le logo. Deux pas
       différents et décalés, pour éviter la grille trop régulière. */
    background-size: 26px 26px, 17px 17px, auto, auto;
    background-position: 0 0, 9px 13px, 0 0, 0 0;
}
/* 🔴 LE FONDU NE PEUT PAS VENIR DE LA PALETTE DÉRIVÉE. `--mb-brand-2` n'est
   que la marque éclaircie de 14 % (BrandColor::palette) : d'un bout à l'autre
   du bandeau, l'œil ne voyait qu'un aplat — « on dirait que c'est tout bleu »
   (Stéphane, sur capture). La maquette validée fondait l'indigo vers le
   violet, c'est-à-dire une ROTATION DE TEINTE, que la palette ne sait pas
   produire. Quand le navigateur sait dériver une couleur (oklch relatif :
   Safari 16.4+, Chrome 119+ — la coquille iOS le sait, l'app Android suit la
   version de sa WebView système), on la
   CALCULE depuis la marque : le violet n'est pas codé en dur, une église
   rouge fondra vers le grenat, et l'invariant « aucune couleur en dur » tient
   toujours. Les autres navigateurs gardent le dégradé discret ci-dessus. */
@supports (color: oklch(from red l c h)) {
    .mb-cover {
        background-image:
            radial-gradient(rgba(255, 255, 255, 0.20) 1.4px, transparent 1.5px),
            radial-gradient(rgba(255, 255, 255, 0.13) 1.1px, transparent 1.2px),
            radial-gradient(120% 95% at 88% -15%, rgba(255, 255, 255, 0.30), transparent 62%),
            linear-gradient(150deg,
                var(--mb-brand) 0%,
                oklch(from var(--mb-brand) calc(l + 0.04) calc(c * 0.90) calc(h + 8)) 45%,
                oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)) 100%);
    }
}
/* Le ciel de graines : dessiné par le gabarit (member/layout) au chargement,
   par-dessus le semis CSS — qui reste le repli quand JavaScript manque. Les
   points sont reliés entre voisins, comme sur la maquette : c'est lui qui
   fait la profondeur du panneau, le semis seul se lisait comme un aplat. */
.mb-cover-ciel { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.45; }
/* Le kiwi au trait, à cheval sur un coin du bandeau. Sur téléphone : un QUART
   de kiwi dans l'angle haut droit (demande de Stéphane, croquis à l'appui) —
   l'overflow du bandeau fait la découpe. Sur grand écran, la media query le
   fait géant, sur le coin bas du panneau. Il est exclu du :not() ci-dessous :
   un position:relative le ramènerait dans le flux, or il vit en absolu. */
.mb-cover-filigrane { position: absolute; width: 15rem; height: 15rem; top: -5.5rem; right: -5.5rem; }
/* Le contenu passe DEVANT le ciel : même mécanique que la carte plus bas —
   entre un positionné et du flux, le positionné est peint au-dessus. */
.mb-cover > :not(.mb-cover-ciel):not(.mb-cover-filigrane) { position: relative; }
/* L'accroche marketing et sa ligne d'appui : grand écran seulement. Sur
   téléphone, le bandeau tient à 52 px près — c'est le nom de l'écran qui y
   parle. Les DEUX jeux de textes sont toujours dans le HTML : la feuille
   choisit, le serveur ne varie pas, et les tests trouvent leurs chaînes. */
.mb-cover-pitch,
.mb-cover-pitch-sub { display: none; }
/* Nom de l'écran dans la carte : le pendant du pitch, grand écran seulement.
   Sous 900 px le bandeau le porte déjà — l'afficher deux fois à 10 px d'écart
   ferait bégayer l'écran. */
.mb-card-head,
.mb-card-lead { display: none; }
/* L'entrée du titre (posée sur `.mb-cover-title` et `.mb-cover-sub` plus bas) :
   jouée UNE fois, au chargement complet — le gabarit n'est jamais re-rendu par
   Livewire, elle ne peut donc pas rejouer sur une erreur de formulaire. Le
   bloc prefers-reduced-motion du haut de la feuille la réduit à un saut
   instantané ; `both` garantit l'état final visible. */
@keyframes mb-lever {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
.mb-cover-marque { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.mb-cover-marque svg { flex: none; }
/* Issue d'un membre déjà connecté qui atterrit sur un écran public : ces écrans
   n'ont ni onglets ni menu de compte. `margin-left: auto` la pousse à l'opposé
   de la marque. Cible tactile de 44 px, comme les deux issues de la carte. */
.mb-cover-retour {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 44px; padding: 0 0.6rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.16); color: #fff; text-decoration: none;
    font-size: 0.78rem; font-weight: 600;
}
.mb-cover-retour svg { width: 1rem; height: 1rem; }
.mb-cover-title {
    font-size: 1.45rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em;
    margin: 0.85rem 0 0.2rem; text-wrap: balance;
    /* L'allemand n'est pas la langue la plus longue de ces écrans (mesuré :
       l'italien et l'espagnol le battent sur 20 clés sur 30), mais il est
       le seul à produire des mots INSÉCABLES — « Datenschutzerklärung »
       fait 20 caractères sans trait d'union. Sans césure, ce n'est pas un
       repli de ligne mais un débordement horizontal. */
    hyphens: auto; overflow-wrap: break-word;
    animation: mb-lever 0.5s ease both;
}
/* 🔴 LA COULEUR DE CE TEXTE DÉPEND DU DÉGRADÉ QU'IL RECOUVRE, et elle est
   déclarée DEUX fois : 0.92 ici, pour le dégradé discret de repli (0.85 y
   mesurait 3,84 à 4,28:1, sous le seuil AA de 4,5:1) ; blanc PLEIN dans le
   bloc @supports du fondu oklch plus haut, dont l'arrêt final plus clair fait
   retomber 0.92 sous le seuil. Les deux valeurs ont chacune été mesurées sur
   LEUR dégradé — retoucher l'un sans re-mesurer l'autre, c'est rejouer le
   coup du commentaire rassurant. Une accroche est du texte, pas de la
   décoration : elle doit se lire. */
.mb-cover-sub { margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(255, 255, 255, 0.92); hyphens: auto; overflow-wrap: break-word; animation: mb-lever 0.5s ease 0.08s both; }
/* Les gages de confiance coûtent deux lignes : sur téléphone la marge est
   de 52 px, ils n'y tiennent pas. Ils réapparaissent sur grand écran, où
   la vitrine a de la place à revendre. */
.mb-cover-gages { display: none; }

/* Les accents des écrans publics (champs lavande, bouton en dégradé) sont
   devenus le régime GÉNÉRAL de l'espace membre au lot A : voir .mb-input et
   .mb-btn--primary plus haut. Plus rien à surcharger ici. */

/* ── La carte remonte par-dessus le bandeau ── */
/* La marge basse tombe de 1.75rem à 1rem : sur ces écrans, le dernier élément
   est le sélecteur de langue, déjà détaché. Ces 12 px sont allés au cas le plus
   serré — l'écran de connexion PORTANT UNE ERREUR, qui ajoute 72 px d'un coup
   (message le plus long des 7 langues : le néerlandais, 67 caractères). Sans ce
   gain, la page défilait de 22 px dans ce cas ; elle en défilait 48 avant cette
   refonte. Les deux issues, elles, restent à 138 px au-dessus de la ligne de
   flottaison même dans ce cas. */
.mb-public .mb-main { padding-top: 0; padding-bottom: 1rem; }
/* 🔴 `position: relative` N'EST PAS DÉCORATIF ICI, C'EST CE QUI FAIT REMONTER
   LA CARTE. Une marge négative la superpose au bandeau, mais elle ne dit rien
   de QUI est peint au-dessus : le bandeau est positionné (il porte son motif de
   graines en fond), la carte ne l'était pas, et l'ordre de peinture veut qu'un
   élément positionné passe APRÈS le contenu en flux. C'était donc le bandeau
   qui recouvrait la carte — et il masquait le quart supérieur du PREMIER
   libellé de chaque écran : « Adresse e-mail », « Code de l'église »,
   « Prénom ». Positionner la carte à son tour la remet devant, l'ordre du
   document tranchant entre deux éléments positionnés sans z-index. */
.mb-public .mb-auth { position: relative; margin-top: -1.9rem; }
/* Remplace les quatre `style="padding:1.5rem 1.35rem"` des vues, qui
   battaient toute règle de la feuille (un attribut style l'emporte sur
   une classe) : le padding des cartes d'authentification était donc
   modifiable dans le HTML uniquement, écran par écran. */
.mb-auth .mb-card { padding: 1.5rem 1.35rem; }
/* Titre de la carte, réservé aux ÉTATS (« Message envoyé ») : le nom de
   l'écran, lui, vit dans le bandeau. Les deux ne sont pas au même endroit
   parce que Livewire ne re-rend pas le gabarit — un titre qui change en
   cours de route ne peut pas y être. */
.mb-auth-done { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.35rem; text-align: center; }
/* Le bouton d'envoi est toujours détaché du champ qui le précède. C'était
   écrit quatre fois en `style="margin-top:1rem"`, donc quatre fois à corriger
   le jour où l'espacement change. */
.mb-auth form .mb-btn--block { margin-top: 1rem; }
/* Le même détachement pour un bouton hors formulaire : « Renvoyer le
   courriel » de l'écran « Vérifiez votre boîte », qui touchait presque la
   dernière ligne du texte (relecture des captures du 03.10.2026). */
.mb-auth-relance { margin-top: 1rem; }
/* Retour vers l'écran de connexion, en bas de carte. */
.mb-auth-back { text-align: center; margin-top: 1rem; }
/* Deux champs sur une ligne — prénom et nom. `min-width: 0` sans quoi un champ
   refuse de descendre sous sa largeur intrinsèque et déborde de la carte. */
.mb-field-row { display: flex; gap: 0.6rem; }
.mb-field-row > * { flex: 1; min-width: 0; }
/* Champ suivant dans une pile. */
.mb-field { margin-top: 0.85rem; }
/* Précision sous un champ : règle de mot de passe, mention légale. */
.mb-note { font-size: 0.78rem; margin: 0.35rem 0 0; }
.mb-note--legal { margin-top: 0.7rem; text-align: center; }
/* Précision posée AU-DESSUS d'un bloc, et non sous un champ : elle a donc
   besoin de sa marge basse, que `.mb-note` ne donne pas. */
.mb-note--perimetre { margin-bottom: 0.9rem; }
/* Titre d'un bloc à l'intérieur d'une carte (page « lien expiré » des reçus) :
   un vrai titre, plus grand et plus gras qu'un libellé de champ, pour que les
   deux voies proposées se lisent comme deux parties (retouche du 05.10.2026). */
.mb-bloc-titre { font-size: 1.1rem; font-weight: 800; color: #1e293b; line-height: 1.3; margin: 1.2rem 0 0.25rem; }
.mb-bloc-titre--suite { margin-top: 1.8rem; }
/* Saisie d'un code d'église : espacé, centré, toujours en capitales. Le champ
   accepte les minuscules et c'est la CSS qui les affiche en capitales — un
   `text-transform` ne modifie pas la valeur envoyée, la casse reste donc celle
   que la personne a tapée, et c'est le serveur qui la normalise. */
.mb-input--code { text-transform: uppercase; letter-spacing: 0.18em; text-align: center; font-weight: 700; }
/* Champ suivi d'un autre champ, sans bloc intercalaire. */
.mb-input--spaced { margin-bottom: 0.85rem; }
/* Mention légale sous la carte de connexion. Exigée par les deux stores, et
   c'est la première chose qu'un relecteur cherche : elle ne bouge pas d'ici. */
.mb-auth-legal { text-align: center; margin-top: 0.5rem; }
.mb-auth-legal .mb-link { font-size: 0.82rem; }

/* ── Entre le téléphone et l'écran partagé : la tablette ── */
/* De 560 à 899 px, la coquille reste plafonnée à 520 px et le bandeau flottait
   au milieu d'une page grise EXACTEMENT de la même teinte que lui-même — rien
   ne rattachait la colonne au reste, elle avait l'air posée là par accident.
   Un fond très légèrement teinté et une ombre suffisent à la faire lire comme
   un panneau voulu. Au-delà de 900 px la coquille occupe toute la largeur : ce
   fond n'est plus visible, les deux règles ne se contredisent donc jamais. */
@media (min-width: 560px) {
    .mb-public { background: var(--mb-brand-soft); }
    .mb-public .mb-shell { box-shadow: 0 0 60px rgba(15, 23, 42, 0.10); }
}

/* ── Écran partagé sur ordinateur ── */
/* ⚠️ LA CLASSE EST SUR LE <body>, PAS SUR `.mb-shell` : cette coquille sert
   aussi à `member/back-to-app`, qui n'a rien à faire en deux colonnes.
   C'est aussi la première media query de largeur de cette feuille. */
@media (min-width: 900px) {
    .mb-public .mb-shell {
        max-width: none;
        display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
    /* ⚠️ PAS DE `space-between` ICI. Le bandeau a quatre enfants — marque,
       titre, accroche, gages — et `space-between` les écarte TOUS d'un écart
       égal : le titre se retrouvait à 200 px de son propre sous-titre, qui ne
       se lisait plus comme lui appartenant. Deux `margin-top: auto` répartissent
       le vide aux deux seuls endroits qui le méritent, et le titre reste collé
       à son accroche. */
    /* 🔴 `max()` SUR LES CÔTÉS, ET PAS SEULEMENT EN HAUT ET EN BAS. En paysage,
       l'encoche et les coins arrondis mordent sur la GAUCHE et la DROITE : les
       deux colonnes touchent alors les bords de l'écran, et c'est justement en
       paysage que la grille à deux colonnes s'active. Aucune feuille du projet
       ne traitait ces deux côtés. */
    .mb-public .mb-cover {
        display: flex; flex-direction: column; justify-content: flex-start;
        padding: 3rem 3rem calc(3rem + env(safe-area-inset-bottom));
        padding-top: calc(3rem + env(safe-area-inset-top));
        padding-left: max(3rem, env(safe-area-inset-left));
    }
    /* Le nom de l'écran sort du bandeau SANS sortir de la page : le h1 passe
       en lecture d'écran seule (la hiérarchie de titres reste entière), et
       c'est la carte qui l'affiche (.mb-card-head ci-dessous). La vitrine,
       elle, porte l'accroche marketing — grande, le mot clef en vert kiwi. */
    .mb-public .mb-cover-title {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
        animation: none;
    }
    .mb-public .mb-cover-sub { display: none; }
    .mb-public .mb-cover-pitch {
        display: block; font-size: clamp(2.1rem, 3.2vw, 2.8rem); font-weight: 800;
        line-height: 1.12; letter-spacing: -0.03em; margin: auto 0 0.9rem;
        max-width: 15ch; text-wrap: balance; animation: mb-lever 0.5s ease both;
    }
    /* 🔴 L'ACCENT N'EST PAS EN DUR : sur l'indigo par défaut il rend le vert
       kiwi (~4,7:1 mesuré, texte large au seuil de 3:1), mais un membre déjà
       connecté peut recevoir la teinte de SON église — et un accent figé au
       vert clair disparaissait sur une marque claire (1,15:1 mesuré sur un
       vert lime). Il est donc DÉRIVÉ de la marque : même clarté, teinte
       tournée vers son complément. Le repli hors oklch reste le vert du logo.
       ⚠️ Une marque TRÈS claire rend tout le bandeau illisible, accent ou
       pas : c'est la limite connue de BrandColor::palette, qui n'a pas de
       garde de contraste — problème antérieur à cet accent, et distinct. */
    .mb-public .mb-cover-pitch em { font-style: normal; color: #c9ea8b; }
    @supports (color: oklch(from red l c h)) {
        .mb-public .mb-cover-pitch em { color: oklch(from var(--mb-brand) 0.89 0.12 calc(h - 160)); }
    }
    .mb-public .mb-cover-pitch-sub {
        display: block; margin: 0; font-size: 1.02rem; line-height: 1.55;
        color: #fff; max-width: 38ch; animation: mb-lever 0.5s ease 0.08s both;
    }
    /* Le kiwi géant, à cheval sur le coin bas du panneau. `top: auto` défait
       l'ancrage haut de la version téléphone, sinon l'élément s'étire entre
       les deux ancres. */
    .mb-public .mb-cover-filigrane {
        width: 34rem; height: 34rem; top: auto;
        right: -10rem; bottom: -10.5rem; transform: rotate(-12deg);
    }
    /* La marque en avant : sur téléphone elle partage 52 px de marge avec tout
       le reste, ici la place ne manque pas (demande de Stéphane). Le nom pèse
       autant que le logo — 30 px de texte face à 46 px de pastille, sinon le
       kiwi écrase le mot et la marque se lit à moitié. */
    /* Essai demandé : le nom à la MÊME taille que l'accroche du milieu. */
    .mb-public .mb-cover-marque { font-size: clamp(2.1rem, 3.2vw, 2.8rem); gap: 0.7rem; }
    .mb-public .mb-cover-marque svg { width: 52px; height: 52px; }
    /* Les gages en pastilles de verre SOMBRE, pas blanc : un voile blanc
       ÉCLAIRCIT le fond sous le texte blanc et retombe sous le seuil AA
       (mesuré 3,4:1) ; un voile sombre l'en éloigne (6,8:1). */
    .mb-public .mb-cover-gages {
        display: flex; flex-wrap: wrap; gap: 0.7rem; margin: auto 0 0;
        font-size: 0.82rem; font-weight: 600; color: #fff;
    }
    .mb-public .mb-cover-gages span {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.95rem; border-radius: 999px;
        background: rgba(30, 27, 57, 0.28); border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    }
    .mb-public .mb-cover-gages svg { width: 1.05rem; height: 1.05rem; flex: none; }
    .mb-public .mb-main {
        display: flex; flex-direction: column; justify-content: center;
        padding: 2.5rem 2rem;
        padding-right: max(2rem, env(safe-area-inset-right));
    }
    /* La carte flotte et CHEVAUCHE le panneau : c'est le geste qui fait le
       « wouaw » au premier regard (référence validée par Stéphane). Elle est
       déjà positionnée (règle mobile plus haut) : venant après la vitrine
       dans le document, elle est peinte au-dessus. */
    /* 🔴 LA LARGEUR EST EXPLICITE, PAS UN `align-self: stretch`. Dans un flex
       en colonne, une marge transversale `auto` ANNULE l'étirement : la boîte
       retombe alors à la largeur de son contenu — ça « marchait » ici parce
       que la ligne allemande du pied est large, et ça cassait le sélecteur de
       langue, au contenu étroit. `calc(100% + 84px)` rend à la boîte ce que la
       marge négative lui prend, sans dépendre de ce qu'elle contient. */
    .mb-public .mb-auth { margin: 0 auto 0 -84px; width: calc(100% + 84px); max-width: 480px; }
    .mb-public .mb-auth .mb-card {
        border-radius: 22px; padding: 2.3rem 2.4rem;
        box-shadow: 0 34px 80px -28px rgba(30, 27, 57, 0.5);
    }
    /* 🔴 TOUT CE QUI VIT SOUS LA CARTE PARTAGE SON AXE. Le pied, la mention
       légale et le sélecteur de langue se centraient chacun sur une largeur
       différente — « alignés sur je ne sais pas quoi » (Stéphane, sur
       capture). Ils se centrent désormais sur LE MÊME axe que la carte.

       ⚠️ ET ILS NE MORDENT PAS SUR LE PANNEAU SOMBRE : centrée sous la carte,
       la ligne ALLEMANDE du pied (410 px, la plus longue des 7 langues)
       reviendrait de 17 px sur l'indigo, en gris clair illisible — c'est le
       `max-width` qui l'oblige à se replier sur deux lignes AVANT d'atteindre
       le panneau, pas une retraduction. Budget calculé sur l'écran partagé le
       plus ÉTROIT (900 px), où la boîte fait 459 px : la zone claire y laisse
       355 px sous l'axe, 21.5rem = 344 px garde 11 px de marge. */
    .mb-public .mb-auth-foot,
    .mb-public .mb-auth-legal { max-width: 21.5rem; margin-left: auto; margin-right: auto; }
    /* Le sélecteur de langue est un enfant du <main>, pas de `.mb-auth` : il
       se centrait sur toute la colonne et paraissait « tout à droite ». On
       lui donne EXACTEMENT la boîte de `.mb-auth` ci-dessus — même calc, même
       plafond, mêmes marges — et son centrage interne fait le reste. */
    .mb-public .mb-locale-pick { width: calc(100% + 84px); max-width: 480px; margin-left: -84px; margin-right: auto; }
    /* Le nom de l'écran, là où l'on agit. */
    .mb-public .mb-card-head { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
    .mb-public .mb-card-lead { display: block; margin: 0 0 1.5rem; color: #64748b; font-size: 0.92rem; line-height: 1.5; }
}

/* ⚠️ LE FONDU OKLCH A UN PRIX, ET IL EST PAYÉ ICI. Plus l'arrêt final du
   dégradé est clair, plus le blanc du texte s'en approche : à l + 0.13,
   l'accroche et les gages mesuraient entre 3,36 et 4,22:1 — sous le seuil AA
   de 4,5:1 — sur la moitié claire du bandeau, et même l + 0.10 restait à
   4,11 au point le plus clair. D'où DEUX décisions liées, à ne jamais
   dissocier : l'arrêt final du @supports plus haut est plafonné à l + 0.07
   (4,67:1 mesuré, blanc plein, au pire point — le violet vient de la ROTATION
   DE TEINTE h + 19, pas de la clarté), ET les textes du bandeau passent en
   blanc PLEIN quand ce fondu s'applique (le voile à 0.92 se paie précisément
   là où le fond est le plus clair). Qui éclaircit l'un doit re-mesurer
   l'autre.

   🔴 CE BLOC DOIT RESTER APRÈS les déclarations qu'il corrige — la règle de
   base de `.mb-cover-sub` ET la media query des gages — et viser
   `.mb-public .mb-cover-gages` (0,2,0) pour égaler la spécificité de cette
   dernière : placé plus haut ou écrit `.mb-cover-gages`, il perd la cascade
   et ne fait RIEN, sans qu'aucun outil ne le signale. */
@supports (color: oklch(from red l c h)) {
    .mb-cover-sub, .mb-public .mb-cover-gages { color: #fff; }
}

/* ── Écrans d'auth (connexion, inscription, récupération) ── */
.mb-auth { max-width: 400px; margin: 1.75rem auto 0; }
.mb-auth-ico { display: flex; justify-content: center; margin-bottom: 0.75rem; color: var(--mb-brand); }
.mb-auth-ico svg { width: 2.4rem; height: 2.4rem; }
.mb-auth-title { font-size: 1.25rem; font-weight: 800; text-align: center; margin: 0 0 0.35rem; }
.mb-auth-sub { font-size: 0.9rem; color: #64748b; text-align: center; line-height: 1.5; margin: 0 0 1.25rem; }
/* Dernier bloc de la carte : la marge basse ci-dessus créerait un vide sous le
   texte. Remplace quatre `style="margin:0"` semés dans les vues.
   ⚠️ CETTE LIGNE DOIT RESTER APRÈS `.mb-auth-sub`, jamais avant. Les deux
   sélecteurs pèsent le même poids (0,1,0), c'est donc le dernier écrit qui
   gagne : placé plus haut dans la feuille, ce modificateur ne faisait rien du
   tout, et rien ne le signalait. */
.mb-auth-sub--last { margin-bottom: 0; }
.mb-auth-foot { text-align: center; font-size: 0.75rem; color: #94a3b8; margin-top: 1rem; line-height: 1.5; }
/* Les deux issues d'un membre qui n'arrive pas à entrer, sur une seule ligne.
   Elles occupaient trois blocs empilés, séparateur compris, pour deux liens. */
.mb-auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 0.9rem; margin-top: 0.9rem; }
.mb-auth-join { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
/* 🔴 CIBLE TACTILE. Ces deux liens sont les seules issues d'un membre qui
   n'arrive pas a entrer : mot de passe oublie, et code d'eglise. Passes de
   boutons a de simples liens, ils ne faisaient plus que 18 px de haut (mesure),
   contre les 44 px recommandes par Apple et Google et les 47 px des boutons SSO
   places juste au-dessus. Le doigt attrapait le voisin. */
.mb-auth-links .mb-link { min-height: 44px; }
/* Zone unique (lot F, 13.10.2026) : les fournisseurs des comptes qui n'ont pas
   d'espace membre, sous les deux issues d'un membre. Une ligne discrète,
   séparée d'un filet comme le « ou » des boutons SSO, pour qu'on ne la
   confonde pas avec eux ; mêmes cibles tactiles de 44 px que les liens
   voisins. */
.mb-auth-orga { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.6rem; margin: 0.5rem 0 0; padding-top: 0.4rem; border-top: 1px solid #e2e8f0; text-align: center; }
.mb-auth-orga-liens { display: inline-flex; gap: 0.9rem; }
.mb-auth-orga .mb-link { min-height: 44px; font-size: 0.8rem; }
/* Rappel du QR sur l'écran de saisie du code : discret, car c'est une
   indication, pas une action — le scan se fait avec l'appareil photo. */
.mb-join-qr-hint {
    display: flex; align-items: flex-start; gap: 0.45rem;
    margin: 1rem 0 0; padding: 0.7rem 0.8rem;
    /* `--mb-soft` n'a jamais existé — la variable de marque s'appelle
       `--mb-brand-soft`. C'était donc toujours le repli gris qui
       s'appliquait, et le jour où quelqu'un aurait défini `--mb-soft`
       ailleurs, ce bloc aurait changé de couleur sans raison apparente. */
    background: var(--mb-brand-soft); border-radius: 0.6rem;
    font-size: 0.82rem; line-height: 1.45; color: #475569;
}
.mb-join-qr-hint svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; color: var(--mb-brand); }

/* Sélecteur de langue des écrans publics (avant connexion) */
.mb-locale-pick { display: flex; justify-content: center; margin-top: 1.25rem; }
.mb-locale-pick select { font-size: 0.8rem; color: #64748b; background: transparent; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.3rem 0.6rem; }
.mb-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── État vide ── */
/* ── Mes groupes ── */
.mb-card-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.4rem; }
.mb-group-meta { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mb-group-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: #475569; }
.mb-group-ico { width: 1rem; height: 1rem; flex-shrink: 0; color: #94a3b8; }
.mb-group-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }

/* ── Mes enfants (check-in) ── */
.mb-checkin { background: #f0fdf4; border-radius: 0.8rem; padding: 0.8rem 0.9rem; }
.mb-checkin-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: #15803d; flex-wrap: wrap; }
.mb-checkin-status svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.mb-checkin-event { font-size: 0.8rem; color: #475569; margin-top: 0.15rem; }
.mb-checkin-code-label { margin-top: 0.6rem; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.mb-checkin-code { font-size: 2rem; font-weight: 800; letter-spacing: 0.18em; color: #14532d; font-variant-numeric: tabular-nums; }
.mb-checkin-hint { font-size: 0.78rem; color: #64748b; margin-top: 0.2rem; }
/* Carte d'accueil (/espace) : les mêmes pastilles vertes que « Mes enfants »,
   dans une carte-lien. Liseré vert à gauche : se repère au premier coup d'œil
   au-dessus du carrousel, sans rivaliser avec les tuiles pleines. */
a.mb-home-checkin { display: block; color: inherit; text-decoration: none; border-left: 4px solid #16a34a; }
a.mb-home-checkin:active { transform: scale(0.99); }
.mb-home-checkin-child { margin-top: 0.6rem; }
.mb-home-checkin-name { font-size: 1rem; font-weight: 700; color: #0f172a; overflow-wrap: anywhere; }
.mb-home-checkin .mb-checkin-code { font-size: 1.6rem; }
.mb-home-checkin-more { margin-top: 0.7rem; }
/* « depuis 9h05 », « seit 09:42 Uhr » : préposition, heure et unité ne se
   séparent pas à 360 px ; c'est la salle, avant, qui passe à la ligne. */
.mb-nowrap { white-space: nowrap; }

/* ── Sujets des discussions de groupe (planche 1, variante A, 25.10.2026) ──
   Remplacent les pastilles de canaux. Une COULEUR PAR SUJET (dégradé et bande
   à points sur le bandeau), « Général » en ardoise. Deuxième étape (26.10.2026) :
   la pastille orange vif dit les NON-LUS du sujet (aucune à zéro, « 99+ »). */
.mb-sujets-tete, .mb-sujet-barre { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.mb-sujets-titre { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #9a3412; }
.mb-sujets-outils { display: inline-flex; align-items: center; gap: 0.45rem; }
.mb-sujets-nouveau {
    display: inline-flex; align-items: center; gap: 0.3rem; border: 0; cursor: pointer; font-family: inherit;
    padding: 0.5rem 0.95rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); box-shadow: 0 6px 14px rgba(234, 88, 12, 0.3);
}
.mb-sujets-nouveau svg { width: 0.95rem; height: 0.95rem; }
.mb-sujets-nouveau--petit { padding: 0.35rem 0.75rem; font-size: 0.76rem; box-shadow: 0 4px 10px rgba(234, 88, 12, 0.25); }
.mb-sujets-moderation {
    position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1.5px solid #fecaca; background: #fff; color: #b91c1c;
}
.mb-sujets-moderation svg { width: 1rem; height: 1rem; }
.mb-sujets-moderation.is-active { background: #fee2e2; }
.mb-sujet-form { margin-bottom: 0.9rem; border-top: 4px solid #fb923c; }
.mb-sujet-form-aide { margin: 0.5rem 0 0; font-size: 0.8rem; color: #64748b; }
.mb-sujet-form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

.mb-sujets { margin-bottom: 1rem; }
.mb-sujets-liste { display: flex; flex-direction: column; gap: 0.55rem; }
.mb-sujet-ligne {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    padding: 0.75rem 0.8rem; border: 1px solid #eef0f5; border-radius: 1rem; background: #fff; color: inherit;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.mb-sujet-ligne:active { transform: scale(0.99); }
.mb-sujet-ligne.is-clos { background: #f8fafc; }
.mb-sujet-ligne.is-clos .mb-sujet-pastille { filter: grayscale(0.85); opacity: 0.75; }
.mb-sujet-pastille {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; color: #fff; font-weight: 800; font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.mb-sujet-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.mb-sujet-nom-ligne { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.mb-sujet-nom { font-weight: 700; font-size: 0.92rem; color: #0f172a; overflow-wrap: anywhere; }
.mb-sujet-type { display: inline-flex; color: #64748b; }
.mb-sujet-type svg { width: 0.85rem; height: 0.85rem; }
.mb-sujet-epingle {
    flex: none; padding: 0.08rem 0.4rem; border-radius: 999px; background: #fef3c7; color: #b45309;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.mb-sujet-dernier { font-size: 0.8rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-sujet-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.mb-sujet-quand { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; }
.mb-sujet-nonlus {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.42rem;
    border-radius: 999px; font-size: 0.72rem; font-weight: 800; line-height: 1; color: #fff; white-space: nowrap;
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); box-shadow: 0 3px 8px rgba(234, 88, 12, 0.32);
}
.mb-sujet-ligne.is-nonlu { border-color: #fed7aa; box-shadow: 0 3px 12px rgba(234, 88, 12, 0.12); }
.mb-sujet-ligne.is-nonlu .mb-sujet-nom { font-weight: 800; }
.mb-sujet-ligne.is-nonlu .mb-sujet-dernier { color: #1e293b; font-weight: 600; }
.mb-sujet-ligne.is-nonlu .mb-sujet-quand { color: #ea580c; font-weight: 700; }
.mb-sujets-clos-titre { display: inline-flex; align-items: center; gap: 0.45rem; }
.mb-sujets-clos {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.8rem;
    padding: 0.65rem 0.9rem; border: 1.5px dashed #fdba74; border-radius: 0.9rem; background: #fff7ed;
    color: #9a3412; font-size: 0.84rem; font-weight: 700;
}
.mb-sujets-clos button { border: 0; background: none; cursor: pointer; font-family: inherit; font-weight: 800; color: #ea580c; font-size: 0.84rem; }
.mb-sujets-liste--clos { margin-top: 0.55rem; }

.mb-sujet-retour {
    display: inline-flex; align-items: center; gap: 0.2rem; border: 0; background: none; cursor: pointer; padding: 0;
    font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--mb-brand);
}
.mb-sujet-retour svg { width: 0.9rem; height: 0.9rem; }
.mb-sujet-bandeau {
    position: relative; display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem;
    padding: 0.8rem 0.9rem; border-radius: 1rem; color: #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}
.mb-sujet-bandeau::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px); background-size: 12px 12px;
}
.mb-sujet-bandeau .mb-sujet-pastille { background: rgba(255, 255, 255, 0.22); }
.mb-sujet-bandeau-texte { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mb-sujet-bandeau-nom { display: flex; align-items: center; gap: 0.3rem; font-weight: 800; font-size: 1rem; overflow-wrap: anywhere; }
.mb-sujet-bandeau-ico { flex: none; width: 1rem; height: 1rem; }
.mb-sujet-bandeau-sous { font-size: 0.76rem; opacity: 0.92; }
.mb-sujet-bandeau.is-clos { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); }
.mb-sujet-gerer {
    position: relative; flex: none; border: 1px solid rgba(255, 255, 255, 0.45); cursor: pointer; font-family: inherit;
    padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #fff; font-size: 0.78rem; font-weight: 700;
}
.mb-sujet-menu {
    position: absolute; z-index: 20; right: 0.6rem; top: calc(100% + 0.35rem); width: min(17rem, calc(100vw - 2rem));
    padding: 0.35rem; border-radius: 0.9rem; background: #fff; color: #0f172a; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.22);
}
.mb-sujet-menu-item {
    display: flex; align-items: flex-start; gap: 0.6rem; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    padding: 0.55rem 0.6rem; border: 0; border-radius: 0.6rem; background: none; color: inherit;
}
.mb-sujet-menu-item + .mb-sujet-menu-item { border-top: 1px solid #f1f5f9; }
.mb-sujet-menu-item:hover { background: #f8fafc; }
.mb-sujet-menu-item b { display: block; font-size: 0.86rem; }
.mb-sujet-menu-item small { display: block; font-size: 0.72rem; color: #64748b; margin-top: 0.05rem; }
.mb-sujet-menu-item--danger b { color: #dc2626; }
.mb-sujet-menu-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 0.45rem; }
.mb-sujet-menu-ico svg { width: 0.9rem; height: 0.9rem; }
.mb-sujet-menu-ico--epingle { background: #ffedd5; color: #ea580c; }
.mb-sujet-menu-ico--renommer { background: #fef3c7; color: #b45309; }
.mb-sujet-menu-ico--clore { background: #dcfce7; color: #16a34a; }
.mb-sujet-menu-ico--supprimer { background: #fee2e2; color: #dc2626; }
.mb-sujet-erreur { margin: -0.4rem 0 0.8rem; }
.mb-sujet-clos-avis { margin-top: 0.6rem; background: #f1f5f9; border-color: #cbd5e1; color: #334155; align-items: flex-start; }
.mb-sujet-clos-avis > svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; color: #64748b; }

/* Les teintes : « Général » (g) en ardoise, puis huit couleurs vives. Le
   bandeau et la pastille prennent le dégradé ; le nombre de messages, la
   version douce de la même couleur. */
.mb-sujet-tg { background: linear-gradient(135deg, #64748b 0%, #475569 100%); }
.mb-sujet-t0 { background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%); }
.mb-sujet-t1 { background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); }
.mb-sujet-t2 { background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); }
.mb-sujet-t3 { background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%); }
.mb-sujet-t4 { background: linear-gradient(135deg, #38bdf8 0%, #0284c7 100%); }
.mb-sujet-t5 { background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); }
.mb-sujet-t6 { background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%); }
.mb-sujet-t7 { background: linear-gradient(135deg, #e879f9 0%, #c026d3 100%); }

/* ── Fil de messages de groupe (refonte v3 validée, 2026-08-06) ──
   DEUX TONS DE FOND seulement, à la WhatsApp : blanc pour les autres, lavande
   de marque pour soi. La couleur PAR PERSONNE survit dans le nom et dans le
   LISERÉ — plus dans le fond, qui faisait « post-it ». Les autres à gauche
   (liseré gauche), soi à droite (liseré droit, en miroir). */
.mb-feed { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1rem; }
/* Colonne, pas rangée : les réactions vivent SOUS la bulle, dans le flux
   (voir .mb-reactions), et l'alignement gauche/droite se joue en cross-axis. */
.mb-msg { display: flex; flex-direction: column; align-items: flex-start; }
.mb-msg--mine { align-items: flex-end; }
.mb-msg-bubble {
    position: relative; max-width: 85%; background: #fff; border-radius: 1rem; padding: 0.6rem 0.85rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    border-left: 3px solid transparent;
}
.mb-msg--mine .mb-msg-bubble { background: var(--mb-brand-soft); border-left: none; border-right: 3px solid var(--mb-brand); }
.mb-msg-author { font-size: 0.78rem; font-weight: 700; color: var(--mb-brand); }
/* Messages consécutifs d'un même auteur : nom masqué (vue) + espacement resserré. */
.mb-msg--cont { margin-top: -0.35rem; }
/* Le liseré porte la couleur de la personne — le nom porte la même. */
.mb-msg-bubble.mb-c0 { border-left-color: #c24a3e; }
.mb-msg-bubble.mb-c1 { border-left-color: #1e7a54; }
.mb-msg-bubble.mb-c2 { border-left-color: #a6741a; }
.mb-msg-bubble.mb-c3 { border-left-color: #2a6cb5; }
.mb-msg-bubble.mb-c4 { border-left-color: #6d4fc7; }
.mb-msg-bubble.mb-c5 { border-left-color: #b84a8c; }
.mb-msg-bubble.mb-c6 { border-left-color: #17786e; }
.mb-msg-bubble.mb-c7 { border-left-color: #7a7a1e; }
.mb-c0 .mb-msg-author { color: #c24a3e; }
.mb-c1 .mb-msg-author { color: #1e7a54; }
.mb-c2 .mb-msg-author { color: #a6741a; }
.mb-c3 .mb-msg-author { color: #2a6cb5; }
.mb-c4 .mb-msg-author { color: #6d4fc7; }
.mb-c5 .mb-msg-author { color: #b84a8c; }
.mb-c6 .mb-msg-author { color: #17786e; }
.mb-c7 .mb-msg-author { color: #7a7a1e; }

/* L'en-tête de bulle, à la Teams : nom + heure sur une ligne, menu à trois
   points à droite. L'heure vient SANS jour de semaine, et un message
   d'aujourd'hui n'affiche que l'heure (décision de Stéphane, formats posés
   côté composant). */
.mb-msg-entete { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.15rem; }
.mb-msg-heure { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; }
/* 2.25rem = 36 px : seul chemin vers Modifier/Supprimer/Signaler, la cible
   doit se toucher du pouce. Les marges négatives compensent pour que la bulle
   ne gonfle pas d'un pixel. */
.mb-msg-kebab {
    border: none; background: none; cursor: pointer; color: #94a3b8;
    width: 2.25rem; height: 2.25rem; border-radius: 999px;
    display: grid; place-items: center; margin: -0.55rem -0.7rem -0.55rem auto;
}
.mb-msg-kebab svg { width: 1.05rem; height: 1.05rem; }
.mb-msg-kebab:hover { background: rgba(15, 23, 42, 0.06); color: #475569; }
/* Le menu range Modifier / Supprimer / Signaler — les liens en toutes lettres
   alourdissaient chaque bulle, et « Supprimer » en rouge permanent criait
   plus fort que les messages. Les CONDITIONS d'affichage, elles, n'ont pas
   bougé d'un pouce (droits, propriété, modération). */
/* PARTAGE par tout le fil, comme la palette : position fixe calculee a
   l'ouverture par ouvrirMenu() (style en ligne = valeur dynamique). */
.mb-msg-menu-pop {
    position: fixed; z-index: 60; min-width: 10rem;
    background: #fff; border: 1px solid #eef2f7; border-radius: 0.8rem; padding: 0.3rem;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18);
    transform-origin: top right; animation: mb-pop-in 0.15s ease forwards;
}
.mb-msg-menu-pop button {
    display: flex; align-items: center; gap: 0.5rem; width: 100%;
    padding: 0.5rem 0.65rem; border-radius: 0.55rem; text-align: left;
    background: none; border: none; cursor: pointer; font: inherit; font-size: 0.85rem; color: #334155;
}
.mb-msg-menu-pop button:hover { background: #f1f5f9; }
.mb-msg-menu-pop button svg { width: 1rem; height: 1rem; flex: none; color: #64748b; }
.mb-msg-menu-pop .mb-msg-menu-danger { color: #b91c1c; }
.mb-msg-menu-pop .mb-msg-menu-danger svg { color: #b91c1c; }

/* ── Liste unifiée « Discussions » (façon WhatsApp) ── */
.mb-chats-head { margin-bottom: 0.8rem; }
.mb-chats-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.mb-chats { display: flex; flex-direction: column; }
.mb-chat-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.4rem; border-bottom: 1px solid #eef0f5; text-decoration: none; color: inherit; }
.mb-chat-row:last-child { border-bottom: none; }
.mb-chat-row:hover { background: #f8fafc; }
.mb-chat-avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; color: #475569; background: #eef2f7; }
.mb-chat-avatar svg { width: 1.3rem; height: 1.3rem; }
.mb-chat-avatar--group { background: var(--mb-brand-soft); color: var(--mb-brand); }
.mb-chat-main { flex: 1; min-width: 0; }
.mb-chat-line { display: flex; align-items: baseline; gap: 0.5rem; }
.mb-chat-name { font-weight: 700; color: #1e293b; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-chat-time { margin-left: auto; flex: 0 0 auto; font-size: 0.7rem; color: #94a3b8; }
.mb-chat-preview { display: block; font-size: 0.85rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-chat-row.is-unread .mb-chat-name { color: #0f172a; }
.mb-chat-row.is-unread .mb-chat-preview { color: #1e293b; font-weight: 600; }
.mb-chat-dot { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mb-brand); }
/* Total des non-lus d'un groupe, tous ses sujets lisibles (26.10.2026) : la
   même pastille orange que la liste des sujets. */
.mb-chat-row .mb-sujet-nonlus { flex: 0 0 auto; }
.mb-chat-avatar.mb-c0 { background: #fef2f2; color: #c24a3e; }
.mb-chat-avatar.mb-c1 { background: #ecfdf5; color: #1e7a54; }
.mb-chat-avatar.mb-c2 { background: #fffbeb; color: #a6741a; }
.mb-chat-avatar.mb-c3 { background: #eff6ff; color: #2a6cb5; }
.mb-chat-avatar.mb-c4 { background: #f5f3ff; color: #6d4fc7; }
.mb-chat-avatar.mb-c5 { background: #fdf2f8; color: #b84a8c; }
.mb-chat-avatar.mb-c6 { background: #f0fdfa; color: #17786e; }
.mb-chat-avatar.mb-c7 { background: #fefce8; color: #7a7a1e; }

/* ── Panneau « Infos » du groupe (replié par défaut) ── */
.mb-group-info { margin-bottom: 0.8rem; }
.mb-group-info-toggle { display: flex; align-items: center; gap: 0.4rem; width: 100%; background: none; border: none; padding: 0.35rem 0; color: var(--mb-brand); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.mb-group-info-toggle > svg { width: 1rem; height: 1rem; }
.mb-group-info-chev { margin-left: auto; display: inline-flex; transition: transform 0.15s; }
.mb-group-info-chev svg { width: 1rem; height: 1rem; }
.mb-group-info-chev.is-open { transform: rotate(180deg); }
.mb-group-info-body { padding: 0.2rem 0 0.4rem; }

/* ── Encadré d'info « activer les messages privés » (liste Discussions) ── */
.mb-hint { background: var(--mb-brand-soft); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0.7rem; padding: 0.55rem 0.7rem; margin: 0.2rem 0 0.7rem; }
.mb-hint-line { display: flex; align-items: center; gap: 0.4rem; }
.mb-hint-text { flex: 1; min-width: 0; font-size: 0.82rem; color: #334155; }
.mb-hint-btn { flex: 0 0 auto; background: none; border: none; padding: 0.15rem; cursor: pointer; color: var(--mb-brand); display: inline-flex; }
.mb-hint-btn svg { width: 1.15rem; height: 1.15rem; }
.mb-hint-more { margin-top: 0.5rem; }
.mb-hint-more p { margin: 0 0 0.5rem; font-size: 0.82rem; line-height: 1.5; color: #475569; }

/* ── Saisie de la date de naissance (activation des messages privés) ── */
.mb-birthdate { margin-top: 0.8rem; padding: 0.7rem 0.8rem; background: #f8fafc; border: 1px solid #eef0f5; border-radius: 0.7rem; }
.mb-birthdate-modes { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem; font-size: 0.85rem; }
.mb-birthdate-modes label { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.mb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Photos de profil (avatars) ── */
.mb-avatar { overflow: hidden; }
.mb-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mb-avatar-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.6rem; }
.mb-chat-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mb-msg-avatar { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mb-msg-body { font-size: 0.92rem; color: #1e293b; white-space: pre-line; overflow-wrap: anywhere; }
.mb-msg-image { display: block; margin-top: 0.4rem; max-width: 100%; border-radius: 0.6rem; }
.mb-msg-image:first-child { margin-top: 0; }
.mb-msg-meta { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.25rem; font-size: 0.7rem; color: #94a3b8; }
.mb-msg-edited { font-style: italic; color: #b0b8c6; }
.mb-msg-mention { display: inline-flex; align-items: center; gap: 0.15rem; color: var(--mb-brand); font-weight: 600; }
.mb-msg-mention svg { width: 0.8rem; height: 0.8rem; }
.mb-edit-form { margin: 0.15rem 0 0.1rem; }
.mb-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
/* z-index : même raison que .mb-nav — les pastilles à cheval (z-1) se
   peignaient par-dessus le composeur au défilement. */
.mb-feed-composer { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 2; background: #f8fafc; padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* Pièce jointe image (composeur, responsables) */
.mb-composer-tools { display: flex; align-items: center; gap: 0.5rem; }
/* Le composeur compact (v3) : outils en icones, envoi en rond degrade. */
.mb-composer-ligne { display: flex; align-items: flex-end; gap: 0.4rem; }
/* Le champ grandit avec son texte, comme WhatsApp (décision du 05.10.2026) :
   1 ligne au départ, jusqu'à 10 lignes, puis hauteur fixe et ascenseur.
   La hauteur est posée par Alpine (partials/composeur) ; field-sizing fait de
   même sans script là où il existe. Le plafond de 10 lignes vit ICI seulement
   (14em = 10 x line-height 1.4, + padding vertical + bordure), le script
   le lit par le style calculé. box-sizing : la hauteur inclut padding et bordure.
   Le composeur est collé en bas (sticky) : il grandit vers le haut, rien ne
   saute dans la page. */
.mb-composer-champ { flex: 1; box-sizing: border-box; min-height: 2.6rem; max-height: calc(14em + 1.2rem + 2px); line-height: 1.4; overflow-y: auto; field-sizing: content; border-radius: 1.3rem; padding: 0.6rem 0.9rem; resize: none; }
.mb-outil {
    flex: none; width: 2.6rem; height: 2.6rem; border: none; background: none; cursor: pointer;
    border-radius: 999px; display: grid; place-items: center; color: #64748b;
}
.mb-outil:hover { background: rgba(15, 23, 42, 0.06); color: var(--mb-brand); }
.mb-outil svg { width: 1.35rem; height: 1.35rem; }
.mb-outil input { display: none; }
.mb-composer-envoi { flex: none; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 999px; display: grid; place-items: center; }
.mb-composer-envoi svg { width: 1.15rem; height: 1.15rem; }
.mb-tourne { display: inline-flex; animation: mb-tourner 1s linear infinite; }
@keyframes mb-tourner { to { transform: rotate(360deg); } }

.mb-attach {
    display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer;
    font-size: 0.8rem; font-weight: 600; color: var(--mb-brand);
    background: var(--mb-brand-soft); border-radius: 0.6rem; padding: 0.5rem 0.8rem;
}
.mb-attach svg { width: 1rem; height: 1rem; }
.mb-attach input { display: none; }
.mb-attach-preview { position: relative; display: inline-block; }
.mb-attach-preview img { height: 3.2rem; width: auto; border-radius: 0.5rem; display: block; }
.mb-attach-remove {
    position: absolute; top: -6px; right: -6px; width: 1.25rem; height: 1.25rem;
    border-radius: 50%; border: none; cursor: pointer; background: #dc2626; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem; line-height: 1;
}
.mb-uploading { font-size: 0.75rem; color: #94a3b8; }

/* ── Médias (prédications YouTube + réseaux sociaux) ── */
.mb-embed {
    position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */
    border-radius: 0.9rem; overflow: hidden; background: #000;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.10); margin-bottom: 1.1rem;
}
.mb-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mb-media-links { display: flex; flex-direction: column; gap: 0.6rem; }
.mb-media-link {
    display: flex; align-items: center; gap: 0.75rem;
    background: #fff; border-radius: 0.85rem; padding: 0.85rem 1rem;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07); text-decoration: none; color: inherit;
    transition: transform 0.12s ease;
}
a.mb-media-link:active { transform: scale(0.985); }
.mb-media-ico {
    flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.7rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-media-ico svg { width: 1.3rem; height: 1.3rem; }
.mb-media-label { flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem; }
.mb-media-chev { flex-shrink: 0; color: #cbd5e1; }
.mb-media-chev svg { width: 1.05rem; height: 1.05rem; }

.mb-empty { text-align: center; padding: 2.25rem 1rem; color: #94a3b8; }
.mb-empty svg { width: 2.5rem; height: 2.5rem; opacity: 0.5; margin-bottom: 0.6rem; }
.mb-empty p { font-size: 0.9rem; margin: 0; }

/* ── Formulaire de don public embarqué dans la coquille membre ──
   Neutralise le chrome pleine page de qp-page (la coquille fournit déjà
   en-tête et fond) ; qeewee-member.css est chargée APRÈS qeewee-public.css. */
.mb-main .qp-page { min-height: auto; padding: 0; }
.mb-main .qp-head { margin-bottom: 1rem; text-align: left; }
.mb-main .qp-head-title { font-size: 1.35rem; font-weight: 800; }
.mb-main .qp-card { max-width: none; }
/* Annuaire des groupes embarqué dans la coquille membre. */
.mb-main .gd-wrap { max-width: none; padding: 0; }
.mb-main .gd-head { text-align: left; margin-bottom: 1.25rem; }
.mb-main .gd-head h1 { font-size: 1.35rem; }
.mb-main .gd-grid { grid-template-columns: 1fr; }

/* ── Feed d'actualités (accueil) : carrousel horizontal de cartes ── */
.mb-feed-h {
    display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 -1rem 1.4rem; padding: 0 1rem 0.4rem;
}
.mb-feed-h::-webkit-scrollbar { display: none; }
.mb-fcard {
    flex: 0 0 78%; scroll-snap-align: start; background: #fff; border-radius: 1rem;
    overflow: hidden; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    text-decoration: none; color: inherit;
}
a.mb-fcard:active { transform: scale(0.99); }
.mb-fcard-img { height: 128px; background-size: cover; background-position: center; }
.mb-fcard-img--none {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2)); color: rgba(255, 255, 255, 0.85);
}
.mb-fcard-img--none svg { width: 2.4rem; height: 2.4rem; }
.mb-fcard-body { padding: 0.75rem 0.85rem 0.9rem; }
.mb-fcard-pin {
    display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700;
    color: var(--mb-brand); background: var(--mb-brand-soft); border-radius: 999px; padding: 2px 8px; margin-bottom: 0.35rem;
}
.mb-fcard-pin svg { width: 0.8rem; height: 0.8rem; }
.mb-fcard-title {
    font-weight: 700; font-size: 0.98rem; color: #1e293b; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-fcard-meta { margin-top: 0.35rem; font-size: 0.78rem; color: #64748b; }

/* ── Détail d'une annonce ── */
.mb-ann-img { width: 100%; border-radius: 1rem; display: block; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.10); }
.mb-ann-meta { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.3rem 0 1rem; }
.mb-ann-meta span { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: #475569; font-weight: 600; }
.mb-ann-meta svg { width: 1rem; height: 1rem; color: var(--mb-brand); flex-shrink: 0; }
.mb-ann-body { font-size: 0.95rem; color: #334155; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; margin-bottom: 1.1rem; }

.mb-rsvp { display: flex; gap: 0.5rem; }
.mb-rsvp-btn {
    flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 0.6rem 0.3rem; border: 1.5px solid #e2e8f0; background: #fff; border-radius: 0.7rem;
    cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 600; color: #64748b;
}
.mb-rsvp-btn svg { width: 1.3rem; height: 1.3rem; }
.mb-rsvp-btn:active { transform: translateY(1px); }
.mb-rsvp-btn.is-on--yes { border-color: #16a34a; background: #f0fdf4; color: #15803d; }
.mb-rsvp-btn.is-on--maybe { border-color: #d97706; background: #fffbeb; color: #b45309; }
.mb-rsvp-btn.is-on--no { border-color: #dc2626; background: #fef2f2; color: #b91c1c; }
.mb-ann-coming { margin-top: 0.85rem; font-size: 0.85rem; color: #475569; }
.mb-ann-names { display: block; color: #64748b; margin-top: 0.15rem; }

.mb-contrib-list { display: flex; flex-direction: column; margin-bottom: 0.9rem; }
.mb-contrib { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.15rem; }
.mb-contrib + .mb-contrib { border-top: 1px solid #f1f5f9; }
.mb-contrib-item { font-weight: 700; font-size: 0.9rem; color: #1e293b; }
.mb-contrib-who { flex: 1; font-size: 0.8rem; color: #94a3b8; }
.mb-contrib-del { background: none; border: none; cursor: pointer; color: #cbd5e1; padding: 2px; display: inline-flex; }
.mb-contrib-del svg { width: 1.05rem; height: 1.05rem; }
.mb-contrib-form { display: flex; gap: 0.5rem; }
.mb-contrib-form .mb-input { flex: 1; }

/* ── Avatar ── */
.mb-avatar {
    flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--mb-brand-soft); color: var(--mb-brand); display: flex; align-items: center;
    justify-content: center; font-weight: 700; font-size: 1.05rem;
}

/* ── Modération : signaler + sourdine ── */
.mb-mod-badge {
    position: absolute; top: -0.3rem; right: -0.3rem; min-width: 1.05rem; height: 1.05rem;
    padding: 0 0.28rem; border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 1.05rem; text-align: center;
}
.mb-report-form { margin-top: 0.5rem; }
.mb-report-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

.mb-mod { margin-bottom: 1rem; }
.mb-mod-empty { font-size: 0.85rem; color: #94a3b8; }
.mb-mod-report { border: 1px solid #fee2e2; background: #fff7f7; border-radius: 0.7rem; padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; }
.mb-mod-report-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mb-mod-reported { font-weight: 700; font-size: 0.9rem; color: #1e293b; }
.mb-mod-time { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; }
.mb-mod-excerpt { margin-top: 0.35rem; font-size: 0.85rem; color: #475569; background: #fff; border-radius: 0.5rem; padding: 0.4rem 0.6rem; overflow-wrap: anywhere; }
.mb-mod-by { margin-top: 0.35rem; font-size: 0.75rem; color: #94a3b8; }
.mb-mod-reason { margin-top: 0.25rem; font-size: 0.85rem; color: #1e293b; font-style: italic; overflow-wrap: anywhere; }
.mb-mod-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.mb-mod-mute { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.15rem; font-size: 0.9rem; color: #1e293b; }
.mb-mod-mute + .mb-mod-mute { border-top: 1px solid #f1f5f9; }

/* ── Réactions emoji ── */
/* Les reactions A CHEVAL : moitie sur la bulle, moitie dessous. Dans le FLUX
   (marge haute negative), pas en absolu : plusieurs rangees de reactions
   poussent naturellement le message suivant au lieu de le recouvrir. La vue
   ne rend ce bloc que s'il a un contenu, sinon la marge negative aspirerait
   le message suivant de 0.85rem. */
.mb-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
                margin: -0.85rem 0 0 0.7rem; max-width: 85%; position: relative; z-index: 1; }
.mb-msg--mine .mb-reactions { margin: -0.85rem 0.7rem 0 0; justify-content: flex-end; }
.mb-react {
    display: inline-flex; align-items: center; gap: 0.2rem; cursor: pointer; font-family: inherit;
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 0.1rem 0.5rem; line-height: 1.4;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}
.mb-react-emoji { font-size: 0.9rem; }
.mb-react-count { font-weight: 600; font-size: 0.75rem; color: #475569; }
.mb-react.is-mine { background: var(--mb-brand-soft); border-color: var(--mb-brand); }
.mb-react.is-mine .mb-react-count { color: var(--mb-brand); }
.mb-react-add { position: relative; display: inline-flex; }
.mb-react-btn {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid #e2e8f0; background: #fff; border-radius: 999px; padding: 0.15rem 0.4rem; color: #94a3b8;
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}
.mb-react-btn svg { width: 0.95rem; height: 0.95rem; }
.mb-react-btn:hover { color: var(--mb-brand); border-color: var(--mb-brand); }
.mb-react-palette {
    position: absolute; bottom: calc(100% + 0.3rem); left: 0; z-index: 20; display: flex; gap: 0.15rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 0.7rem; padding: 0.3rem;
    box-shadow: 0 6px 20px rgba(35, 40, 100, 0.15);
}
.mb-msg--mine .mb-react-palette { left: auto; right: 0; }
/* Palette partagée par tout le fil : une seule dans la page, positionnée à
   l'ouverture sur le bouton cliqué. Elle remplace une palette répétée sous
   chaque message, qui pesait 56 % du HTML d'un message. */
.mb-react-palette--flottante { position: fixed; bottom: auto; left: 0; top: 0; z-index: 60; }
.mb-react-pick { border: none; background: none; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.25rem; border-radius: 0.4rem; }
.mb-react-pick:hover { background: #f1f5f9; }

/* ── Pièces jointes fichier ── */
.mb-msg-file {
    display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem; text-decoration: none;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.6rem; padding: 0.45rem 0.65rem; color: #1e293b;
}
.mb-msg-file:first-child { margin-top: 0; }
.mb-msg-file svg { width: 1.1rem; height: 1.1rem; color: var(--mb-brand); flex-shrink: 0; }
.mb-msg-file-name { font-weight: 600; font-size: 0.85rem; overflow-wrap: anywhere; }
.mb-msg-file-size { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; }
.mb-attach-file { display: inline-flex; align-items: center; gap: 0.35rem; background: #f1f5f9; border-radius: 0.6rem; padding: 0.35rem 0.55rem; }
.mb-attach-file svg { width: 1rem; height: 1rem; color: var(--mb-brand); }
.mb-attach-file-name { font-size: 0.8rem; color: #1e293b; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Pièces jointes multiples (05.10.2026), fil de groupe ET privé ── */
/* Bulle : photos en grille (vignettes carrées recadrées), puis documents en liste. */
.mb-msg-photos { display: grid; gap: 3px; margin-top: 0.4rem; border-radius: 0.6rem; overflow: hidden; width: min(100%, 20rem); }
.mb-msg-photos:first-child { margin-top: 0; }
.mb-msg-photos--1 { display: block; width: auto; max-width: 100%; }
.mb-msg-photos--1 .mb-msg-image { margin-top: 0; max-height: 22rem; width: auto; }
.mb-msg-photos--2 { grid-template-columns: repeat(2, 1fr); }
.mb-msg-photos--3 { grid-template-columns: repeat(3, 1fr); }
.mb-msg-photo { position: relative; display: block; padding: 0; border: none; background: #e2e8f0; cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.mb-msg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-msg-photo--plus span {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(15, 23, 42, 0.55); color: #fff; font-size: 1.35rem; font-weight: 700;
}
.mb-msg-docs { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; margin-top: 0.4rem; }
.mb-msg-docs:first-child { margin-top: 0; }
.mb-msg-docs .mb-msg-file { margin-top: 0; max-width: 100%; }
.mb-msg-file .mb-msg-file-dl { width: 0.95rem; height: 0.95rem; color: #94a3b8; }
/* Le texte sous les pièces ne colle pas à la grille ni à la liste. */
.mb-msg-photos + .mb-msg-body, .mb-msg-docs + .mb-msg-body { margin-top: 0.45rem; }

/* Composeur : la croix de retrait est COLLÉE à sa pièce, dans le coin de la
   vignette ou au bout du nom du document (elle flottait loin de sa puce). */
.mb-composer-pieces { display: flex; flex-direction: column; gap: 0.4rem; }
.mb-composer-photos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mb-composer-photo { position: relative; width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; background: #e2e8f0; flex: none; }
.mb-composer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mb-piece-retirer {
    width: 1.4rem; height: 1.4rem; border-radius: 50%; border: none; cursor: pointer; padding: 0; flex: none;
    display: grid; place-items: center; background: rgba(15, 23, 42, 0.72); color: #fff;
}
.mb-piece-retirer svg { width: 0.9rem; height: 0.9rem; }
.mb-piece-retirer:hover { background: #dc2626; color: #fff; }
.mb-composer-photo .mb-piece-retirer { position: absolute; top: 3px; right: 3px; }
.mb-piece-retirer--doc { background: #cbd5e1; color: #1e293b; }
.mb-composer-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.mb-composer-doc { display: inline-flex; align-items: center; gap: 0.4rem; max-width: 100%; background: #f1f5f9; border-radius: 0.6rem; padding: 0.3rem 0.35rem 0.3rem 0.6rem; }
.mb-composer-doc > svg { width: 1rem; height: 1rem; color: var(--mb-brand); flex: none; }
.mb-composer-doc-nom { font-size: 0.8rem; color: #1e293b; min-width: 0; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-composer-doc-taille { font-size: 0.72rem; color: #94a3b8; white-space: nowrap; }
.mb-composer-compte { font-size: 0.7rem; color: #94a3b8; }
.mb-envoi { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: #475569; }
.mb-envoi .mb-tourne svg { width: 0.95rem; height: 0.95rem; }
.mb-envoi-nom { min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-envoi-barre { flex: 1; max-width: 10rem; height: 0.35rem; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.mb-envoi-barre span { display: block; height: 100%; background: var(--mb-brand); transition: width 0.2s; }

/* ── Messages directs (DM) ── */
.mb-dm-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
.mb-dm-thread {
    text-align: left; display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer; font-family: inherit;
    background: #fff; border: 1px solid #eef0f5; border-radius: 0.9rem; padding: 0.7rem 0.85rem;
}
.mb-dm-thread.is-unread { border-color: var(--mb-brand); background: var(--mb-brand-soft); }
.mb-dm-thread-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.mb-dm-thread-name { font-weight: 700; color: #1e293b; font-size: 0.95rem; }
.mb-dm-thread.is-unread .mb-dm-thread-name { color: var(--mb-brand-dark); }
.mb-dm-thread-time { font-size: 0.7rem; color: #94a3b8; white-space: nowrap; }
.mb-dm-thread-preview { font-size: 0.85rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-dm-candidates { display: flex; flex-direction: column; margin-top: 0.5rem; }
.mb-dm-candidate {
    display: flex; align-items: center; gap: 0.4rem; text-align: left; cursor: pointer; font-family: inherit;
    background: none; border: none; border-radius: 0.5rem; padding: 0.55rem 0.4rem; font-size: 0.9rem; color: #1e293b;
}
.mb-dm-candidate:hover { background: #f1f5f9; }
.mb-dm-candidate svg { width: 1rem; height: 1rem; color: var(--mb-brand); }
.mb-dm-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.mb-dm-head-name { font-weight: 700; font-size: 1.05rem; color: #1e293b; flex: 1; }

/* Notice service tiers (Jitsi) sous le bouton Visio */
.mb-group-video-note { font-size: 0.72rem; color: #94a3b8; margin: 0.35rem 0 0; }

/* SSO membre (Google / Microsoft) */
.mb-sso { margin-top: 1rem; }
.mb-sso-div { display: flex; align-items: center; text-align: center; color: #94a3b8; font-size: 0.78rem; margin-bottom: 0.8rem; }
.mb-sso-div::before, .mb-sso-div::after { content: ""; flex: 1; border-top: 1px solid #e2e8f0; }
.mb-sso-div span { padding: 0 0.7rem; }
/* Les trois fournisseurs sur une rangée, logos seuls : empilés en pleine
   largeur, ils prenaient le quart de l'écran de connexion. Cases égales, car
   Apple exige que son bouton ne soit pas moins en évidence que les autres. */
.mb-sso-row { display: flex; gap: 0.6rem; }
.mb-sso-btn {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 0.7rem; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 0.7rem; color: #334155; cursor: pointer;
    text-decoration: none; transition: background 0.12s ease;
}
.mb-sso-btn svg { width: 1.4rem; height: 1.4rem; }
.mb-sso-btn:hover { background: #f8fafc; }
.mb-sso-btn:active { transform: translateY(1px); }

/* ── Panneau de choix d'une personne ─────────────────────────────────────────
   Remplace la liste déroulante de l'écran de réaffectation. Une <option> ne sait
   afficher qu'une ligne sans mise en forme : elle ne pouvait pas porter la
   RAISON de chaque proposition, qui est justement ce qui évite d'avoir à se
   souvenir de qui fait quoi. */
.mb-picker {
    margin-top: 0.7rem; border: 1px solid #e2e8f0; border-radius: 0.7rem;
    background: #fff; overflow: hidden; max-height: 22rem; overflow-y: auto;
}
.mb-picker-head { display: flex; gap: 0.4rem; align-items: center; padding: 0.55rem; border-bottom: 1px solid #f1f5f9; }
.mb-picker-head .mb-input { flex: 1; min-width: 0; }
.mb-picker-close {
    border: none; background: none; color: #94a3b8; cursor: pointer; padding: 0.3rem;
    border-radius: 0.4rem; display: inline-flex;
}
.mb-picker-close:hover { background: #f1f5f9; color: #475569; }
.mb-picker-close svg { width: 1.1rem; height: 1.1rem; }
.mb-picker-group {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--mb-brand); background: var(--mb-brand-soft); padding: 0.35rem 0.7rem;
}
.mb-picker-item {
    display: block; width: 100%; text-align: left; border: none; background: none;
    padding: 0.55rem 0.7rem; cursor: pointer; border-bottom: 1px solid #f8fafc;
}
.mb-picker-item:hover { background: #f8fafc; }
.mb-picker-name { display: block; font-size: 0.9rem; color: #1e293b; font-weight: 600; }
.mb-picker-hint { display: block; font-size: 0.75rem; color: #94a3b8; margin-top: 0.1rem; }
.mb-picker-empty { padding: 0.9rem 0.7rem; font-size: 0.85rem; color: #94a3b8; text-align: center; }

/* ── Visionneuse de photos (05.10.2026), public/js/qeewee-visionneuse.js ── */
/* Plein écran, fond noir, photo ENTIÈRE dans l'écran (taille posée par le
   script) ; la barre flotte par-dessus, SOUS l'encoche (safe-area). Au-dessus
   de tout l'espace, mais sous le panneau de session (z-index 999998+).
   `touch-action: none` : les gestes appartiennent à la visionneuse, le
   pincement ne zoome donc jamais la page derrière. */
html.qw-vis-ouverte, html.qw-vis-ouverte body { overflow: hidden; }
.qw-vis {
    position: fixed; inset: 0; z-index: 9000; background: #000;
    touch-action: none; overscroll-behavior: contain; user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.qw-vis[hidden] { display: none; }
.qw-vis-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: zoom-in; }
.qw-vis-img {
    display: block; max-width: none; flex: none; transform-origin: center center;
    opacity: 0; transition: opacity 0.15s ease; will-change: transform; -webkit-user-drag: none;
}
.qw-vis-img.is-pret { opacity: 1; }
.qw-vis--anime .qw-vis-img { transition: transform 0.22s ease, opacity 0.15s ease; }
.qw-vis-barre {
    position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; gap: 0.35rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.5rem) calc(env(safe-area-inset-right, 0px) + 0.5rem) 1.25rem calc(env(safe-area-inset-left, 0px) + 0.75rem);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    pointer-events: none;
}
.qw-vis-compteur { margin-right: auto; color: #fff; font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.qw-vis-bouton, .qw-vis-nav {
    pointer-events: auto; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; border: none; border-radius: 999px;
    background: rgba(15, 23, 42, 0.55); color: #fff; cursor: pointer; text-decoration: none;
}
.qw-vis-bouton[hidden], .qw-vis-nav[hidden] { display: none; }
.qw-vis-bouton svg, .qw-vis-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.qw-vis-bouton:focus-visible, .qw-vis-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.qw-vis-nav { position: absolute; top: 50%; margin-top: -24px; }
.qw-vis-prec { left: calc(env(safe-area-inset-left, 0px) + 0.5rem); }
.qw-vis-suiv { right: calc(env(safe-area-inset-right, 0px) + 0.5rem); }
/* Au doigt, on glisse : les flèches ne servent qu'à la souris et au clavier. */
@media (hover: none) and (pointer: coarse) { .qw-vis-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .qw-vis-img, .qw-vis--anime .qw-vis-img { transition: none; } }

/* Avis de l'app native (document à ouvrir sans navigateur intégré). */
.qw-avis { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 23, 42, 0.55); }
.qw-avis[hidden] { display: none; }
.qw-avis-carte { width: min(100%, 26rem); background: #fff; border-radius: 1rem; padding: 1.1rem; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.3); }
.qw-avis-texte { margin: 0 0 0.75rem; color: #1e293b; font-size: 0.92rem; line-height: 1.45; }
.qw-avis-url { width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; padding: 0.5rem 0.6rem; border: 1px solid #cbd5e1; border-radius: 0.5rem; font-size: 0.8rem; color: #475569; }
.qw-avis-url[hidden] { display: none; }
.qw-avis-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; }
.qw-avis-actions [hidden] { display: none; }

/* =====================================================================
   Zone unique, lot D (13.10.2026) : la double authentification.
   Même langage que le reste de l'espace (cartes blanches, dégradé de
   marque, kiwi au trait), aucune couleur nouvelle : la marque de l'église
   continue de commander par --mb-brand.
   ===================================================================== */

/* La fenêtre « Protégez votre compte » : une feuille qui monte du bas, posée
   sur l'écran assombri (maquette de la planche 4). Au-dessus de la barre
   d'onglets (z 2) et du menu de compte (z 60), sous la visionneuse (z 9000)
   et le panneau de session. Sur grand écran, la feuille se centre. */
.mb-feuille-fond {
    position: fixed; inset: 0; z-index: 80;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(15, 23, 42, 0.45);
}
.mb-feuille {
    position: relative; overflow: hidden;
    width: 100%; max-width: 520px; background: #fff;
    border-radius: 1.4rem 1.4rem 0 0;
    padding: 1.4rem 1.2rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 34px rgba(15, 23, 42, 0.22);
    animation: mb-feuille-monte 0.28s ease both;
}
@keyframes mb-feuille-monte {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@media (min-width: 900px) {
    .mb-feuille-fond { align-items: center; padding: 1.5rem; }
    .mb-feuille { border-radius: 1.4rem; }
}
/* L'emblème de la feuille : le bouclier sur le dégradé de marque, avec le
   kiwi au trait en filigrane, comme les tuiles de l'accueil (mb-hero). */
.mb-feuille-ico {
    position: relative; overflow: hidden; width: 2.8rem; height: 2.8rem; margin-bottom: 0.8rem;
    border-radius: 0.9rem; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2)); color: #fff;
    box-shadow: 0 6px 16px rgba(35, 40, 100, 0.18);
}
.mb-feuille-ico > svg:not(.mb-feuille-kiwi) { position: relative; width: 1.45rem; height: 1.45rem; }
.mb-feuille-kiwi { position: absolute; top: -14px; right: -14px; width: 46px; height: 46px; }
.mb-feuille-titre { position: relative; margin: 0 0 0.35rem; font-size: 1.12rem; font-weight: 800; color: #1e293b; }
.mb-feuille-texte { position: relative; margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.5; color: #64748b; }
.mb-feuille-plus-tard { text-align: center; margin-top: 0.9rem; }
.mb-feuille-plus-tard .mb-link { min-height: 44px; color: #64748b; font-weight: 500; }
.mb-feuille-plus-tard strong { color: #1e293b; font-weight: 700; }

/* Les moyens à choisir : une ligne par moyen, cible tactile pleine largeur.
   Le moyen conseillé porte la teinte de la marque, comme l'onglet actif. */
.mb-choix-liste { display: flex; flex-direction: column; gap: 0.6rem; }
.mb-choix-liste form { margin: 0; }
.mb-choix {
    display: flex; align-items: center; gap: 0.8rem; width: 100%; min-height: 56px;
    padding: 0.75rem 0.9rem; border: 1.5px solid #e2e8f0; border-radius: 0.95rem;
    background: #fff; color: #1e293b; font-family: inherit; text-align: left; cursor: pointer;
    transition: border-color 0.12s ease, transform 0.12s ease;
}
.mb-choix:active { transform: scale(0.985); }
.mb-choix--conseille { border-color: var(--mb-brand); background: var(--mb-brand-soft); }
.mb-choix-ico {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-choix--conseille .mb-choix-ico { background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2)); color: #fff; }
.mb-choix-ico svg { width: 1.3rem; height: 1.3rem; }
.mb-choix-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-choix-titre { font-weight: 700; font-size: 0.92rem; }
.mb-choix-desc { font-size: 0.78rem; color: #64748b; }

/* « Je gère » fermé (planche 4, troisième écran) : le bouclier ambre dit
   « à faire », pas « interdit » ; le bouton mène à « Mes moyens de connexion ». */
.mb-ferme { margin-top: 0.75rem; }
.mb-ferme-carte { text-align: center; padding: 1.6rem 1.3rem; }
.mb-ferme-ico {
    width: 3.6rem; height: 3.6rem; margin: 0 auto 1rem; border-radius: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    background: #fef3c7; color: #b45309;
}
.mb-ferme-ico svg { width: 1.9rem; height: 1.9rem; }
.mb-ferme-titre { margin: 0 0 0.5rem; font-size: 1.08rem; font-weight: 800; color: #1e293b; }
.mb-ferme-texte { margin: 0 0 1.1rem; font-size: 0.88rem; line-height: 1.55; color: #64748b; }
.mb-ferme-note { margin: 0.9rem 0 0; }

/* « Mes moyens de connexion » : une ligne par moyen actif. */
.mb-moyens-carte .mb-alert--attention { margin-bottom: 0.9rem; }
.mb-moyen-ico {
    flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-moyen-ico svg { width: 1.2rem; height: 1.2rem; }
.mb-moyen-corps { flex: 1; min-width: 0; }
.mb-moyen-titre { font-weight: 700; font-size: 0.9rem; color: #1e293b; }
.mb-moyen-detail { font-size: 0.78rem; color: #64748b; }
.mb-moyens-liens { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.25rem 0 0; }
.mb-moyens-liens .mb-link { min-height: 44px; }

/* =====================================================================
   Zone unique, lot E (13.10.2026) : « Mes moyens de connexion ».
   Le langage du lot D (cartes blanches, dégradé de marque, kiwi au trait) ;
   aucune couleur nouvelle : la marque de l'église commande par --mb-brand,
   le vert et l'ambre sont ceux des pastilles de l'espace.
   ===================================================================== */

/* Le geste fait (« Moyen ajouté », « Appareil déconnecté »). Une classe à
   part, et pas `.mb-alert--ok` : le profil emploie déjà ce nom sans style, le
   définir changerait son écran pour tout le monde, interrupteur éteint compris. */
.mb-alert--fait { background: #f0fdf4; border-color: #bbf7d0; color: #166534; display: flex; align-items: center; gap: 0.5rem; }
.mb-alert--fait > svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* L'encart d'encouragement (R7) : la tuile de l'accueil, dégradé de marque et
   kiwi en filigrane, pour un compte qui gère. Discret pour un membre : carte
   blanche, pastille lavande, sans dégradé (facultatif pour lui). */
.mb-encart {
    position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 0.85rem;
    padding: 1.05rem 1.1rem; color: #fff;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2));
    box-shadow: 0 8px 20px rgba(35, 40, 100, 0.2);
}
@supports (color: oklch(from red l c h)) {
    .mb-encart {
        background: linear-gradient(150deg,
            var(--mb-brand),
            oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)));
    }
}
.mb-encart-kiwi { position: absolute; top: -26px; right: -22px; width: 104px; height: 104px; pointer-events: none; }
.mb-encart-ico {
    position: relative; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 0.85rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.18); color: #fff;
}
.mb-encart-ico svg { width: 1.35rem; height: 1.35rem; }
.mb-encart-corps { position: relative; flex: 1; min-width: 0; }
.mb-encart-titre { margin: 0 0 0.2rem; font-size: 0.98rem; font-weight: 800; }
.mb-encart-texte { margin: 0; font-size: 0.85rem; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.mb-encart--discret { background: #fff; color: #1e293b; box-shadow: 0 2px 12px rgba(15, 23, 42, 0.07); }
.mb-encart--discret .mb-encart-kiwi { display: none; }
.mb-encart--discret .mb-encart-ico { background: var(--mb-brand-soft); color: var(--mb-brand); }
.mb-encart--discret .mb-encart-texte { color: #64748b; }

/* Le titre de la liste et son compteur, sur une ligne. */
.mb-moyens-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.mb-moyens-entete .mb-section { margin-bottom: 0.6rem; }
.mb-moyens-compteur { font-size: 0.78rem; font-weight: 600; color: var(--mb-brand); white-space: nowrap; }
.mb-moyens-titre-section { margin-top: 1.4rem; }
.mb-moyens-note { margin: -0.4rem 0 0.4rem; }
.mb-moyens .mb-row form { margin: 0; flex-shrink: 0; }
.mb-moyens .mb-moyen-titre .mb-badge { margin-left: 0.3rem; vertical-align: 1px; }
.mb-moyen-retirer { color: #b91c1c; }
.mb-moyens-tous { margin-top: 0.75rem; }
.mb-moyens-tous .mb-btn svg { width: 1.05rem; height: 1.05rem; }

/* Les codes de secours, montrés une fois : la carte se détache par le liseré
   de marque, les codes en chasse fixe sur la teinte lavande. */
.mb-moyens-codes { border: 1.5px solid var(--mb-brand); }
.mb-moyens-codes-titre { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; font-weight: 800; color: #1e293b; }
.mb-moyens-codes-titre svg { width: 1.15rem; height: 1.15rem; color: var(--mb-brand); }
.mb-moyens-codes-texte { margin: 0 0 0.75rem; font-size: 0.83rem; line-height: 1.5; color: #64748b; }
.mb-moyens-codes-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.mb-moyens-codes-grille code {
    display: block; text-align: center; padding: 0.5rem 0.3rem; border-radius: 0.6rem;
    background: var(--mb-brand-soft); color: #1e293b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; letter-spacing: 0.02em;
}

/* Les écrans d'ajout : une carte, l'emblème du moyen sur le dégradé de marque
   avec le kiwi en filigrane (comme la fenêtre du lot D), puis les étapes. */
.mb-ajout { padding: 1.4rem 1.25rem; }
.mb-ajout-ico {
    position: relative; overflow: hidden; width: 3rem; height: 3rem; margin: 0 auto 0.9rem;
    border-radius: 0.95rem; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2)); color: #fff;
    box-shadow: 0 6px 16px rgba(35, 40, 100, 0.18);
}
.mb-ajout-ico > svg:not(.mb-ajout-kiwi) { position: relative; width: 1.5rem; height: 1.5rem; }
.mb-ajout-kiwi { position: absolute; top: -14px; right: -14px; width: 48px; height: 48px; }
.mb-ajout-texte { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.55; color: #475569; text-align: center; }
.mb-ajout-centre { text-align: center; }
.mb-ajout-qr { display: block; width: 200px; max-width: 100%; height: auto; margin: 0 auto 0.4rem; border-radius: 0.8rem; background: #fff; }
.mb-ajout-espace { margin-top: 0.6rem; }
.mb-ajout-cle {
    margin: 1rem 0 0.25rem; padding: 0.6rem 0.75rem; border-radius: 0.7rem; text-align: center;
    background: var(--mb-brand-soft); color: #1e293b; word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; letter-spacing: 0.04em;
}
.mb-ajout-copier { min-height: 44px; }
.mb-ajout-form { margin-top: 1.1rem; }
.mb-ajout-form .mb-btn--block { margin-top: 0.9rem; }
.mb-ajout-code { text-align: center; font-size: 1.25rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.mb-ajout-renvoi { margin-top: 0.9rem; }
.mb-ajout-renvoi > summary { list-style: none; min-height: 44px; justify-content: center; width: 100%; }
.mb-ajout-renvoi > summary::-webkit-details-marker { display: none; }
.mb-ajout-message { margin: 0.9rem 0 0; }

/* La carte du profil qui mène à « Mes moyens de connexion » : une ligne
   entière à toucher, comme les rangées de la page qu'elle ouvre. */
.mb-profil-moyens { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.mb-profil-moyens:active { transform: scale(0.99); }
.mb-profil-moyens .mb-moyen-detail { display: block; }
.mb-profil-moyens-chevron { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: #94a3b8; }
/* Sur la page, le nom du moyen et son détail l'un sous l'autre. */
.mb-moyens .mb-moyen-titre, .mb-moyens .mb-moyen-detail { display: block; }

/* =====================================================================
   Zone unique, lot I (13.10.2026) : la navigation unique.
   Une seule coquille pour « Pour moi » et « Je gère » (planches 1 à 3 de
   qeewee-planches/une-seule-zone), au style de l'espace : bande violette à
   points, tuiles en dégradé avec le kiwi, cartes blanches, pastilles. Aucune
   couleur nouvelle : la marque de l'église commande par --mb-brand, l'ambre
   est celui des avertissements de l'espace (« à faire », pas « erreur »).
   Tout est sous `.mb-zone` (classe du <body>, posée par le gabarit pour un
   compte de la zone) ou sur des classes que seule la zone emploie :
   interrupteur éteint, rien ne change.
   ===================================================================== */

/* Le nombre de choses qui attendent (badges de « Je gère »). */
.mb-pastille {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 0.4rem; border-radius: 999px;
    background: var(--mb-brand); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1;
}
/* (Navigation A3, lot L3, 20.10.2026 : l'accès « Je gère » a quitté la bande
   de l'en-tête, et avec lui sa pastille inversée. Son nombre est sur l'onglet
   Menu de la barre du bas.) */

/* La barre du bas : l'icône de l'onglet. (Menu en tiroir, 26.10.2026 : plus
   d'onglet Menu ni de pastille dans la barre ; le nombre de « Je gère » est
   sur le bouton à trois traits, .qw-menu-pastille de qeewee-socle.css.) */
.mb-nav-ico { position: relative; display: inline-flex; }

/* ── La coquille : sur téléphone rien ne bouge, la colonne principale garde
   toute la hauteur (la barre du bas reste en bas d'une page courte). ── */
.mb-zone-corps { flex: 1; display: flex; flex-direction: column; }
.mb-zone-corps > .mb-main { flex: 1; }

/* ── Le menu de l'onglet Menu du téléphone ──
   Navigation A3, lot L2 (20.10.2026) : sur ordinateur, le menu de gauche est
   la colonne commune à l'espace et au panneau (partials/colonne-zone), dont
   les styles sont dans qeewee-socle.css. Les règles du menu de gauche d'avant
   (`.mb-zone-menu`, `.mb-menu--lateral`, `.mb-menu-accueil`) sont retirées. ── */
.mb-menu { display: flex; flex-direction: column; gap: 1.3rem; }
.mb-menu-page { margin-top: 1rem; }
.mb-menu-section .mb-menu-titre { margin-bottom: 0.55rem; }
.mb-menu-carte { margin-bottom: 0; }
/* Un trait entre deux lignes. Le retrait d'un pixel cache celui de la
   première ligne VISIBLE sous le bord de la carte, même quand la feuille
   masque les lignes qui ont un onglet (téléphone). */
.mb-menu-carte > * { border-top: 1px solid #f1f5f9; margin-top: -1px; }
.mb-menu-ligne {
    display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 54px;
    padding: 0.65rem 1.1rem; color: #1e293b; text-decoration: none;
    background: none; border: 0; font: inherit; text-align: left; cursor: pointer;
}
summary.mb-menu-ligne { list-style: none; }
summary.mb-menu-ligne::-webkit-details-marker { display: none; }
.mb-menu-ligne:active { background: #f8fafc; }
@media (hover: hover) {
    .mb-menu-ligne:hover, .mb-menu-sous-ligne:hover { background: #f8fafc; }
}
.mb-menu-ico {
    flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-menu-ico svg { width: 1.2rem; height: 1.2rem; }
.mb-menu-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-menu-libelle { font-weight: 700; font-size: 0.92rem; }
.mb-menu-detail { font-size: 0.78rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-menu-chevron { flex-shrink: 0; display: inline-flex; color: #cbd5e1; transition: transform 0.15s ease; }
.mb-menu-chevron svg { width: 1.05rem; height: 1.05rem; }
.mb-menu-rubrique[open] .mb-menu-chevron--bas { transform: rotate(180deg); }
.mb-menu-sous { padding: 0 0 0.5rem; }
.mb-menu-sous-ligne {
    display: flex; align-items: center; gap: 0.5rem; min-height: 44px;
    padding: 0.5rem 1.1rem 0.5rem 4.1rem; color: #334155; text-decoration: none; font-size: 0.88rem;
}
.mb-menu-sous-libelle { flex: 1; min-width: 0; }
.mb-menu-ligne.is-active, .mb-menu-sous-ligne.is-active { color: var(--mb-brand); background: var(--mb-brand-soft); }
.mb-menu-sous-ligne.is-active { font-weight: 700; }
.mb-menu-sortie { margin: 0; }
.mb-menu-sortie .mb-menu-ico { background: #f1f5f9; color: #64748b; }
/* Téléphone et tablette : l'onglet Menu ne répète pas les écrans de la barre
   du bas (planche 2). Même seuil que le panneau (qeewee-theme.css, 1024 px). */
@media (max-width: 1023.98px) {
    .mb-menu-ligne--onglet { display: none; }
}
/* Sur ordinateur, la page Menu ne répète pas le menu de gauche (planche 3 : un
   seul menu). Elle y renvoie en une phrase ; le menu de gauche déplie alors
   toutes les rubriques de « Je gère ». */
.mb-menu-a-gauche { display: none; align-items: center; gap: 0.8rem; margin: 1rem 0 0; }
.mb-menu-a-gauche p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: #475569; }

/* « Je gère » fermé faute de double authentification : le bouclier ambre de
   l'écran du lot D, en ligne. */
.mb-menu-ferme { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0; }
.mb-menu-ferme-ico {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem;
    display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #b45309;
}
.mb-menu-ferme-ico svg { width: 1.3rem; height: 1.3rem; }
.mb-menu-ferme-corps { flex: 1; min-width: 0; }
.mb-menu-ferme-titre { margin: 0 0 0.2rem; font-weight: 800; font-size: 0.95rem; color: #1e293b; }
.mb-menu-ferme-texte { margin: 0 0 0.75rem; font-size: 0.84rem; line-height: 1.5; color: #64748b; }

/* ── L'accueil « À faire » puis « Pour moi » ── */
.mb-accueil { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1rem; }
.mb-accueil-sous-titre { margin-top: 1.3rem; }
.mb-afaire { display: flex; flex-direction: column; gap: 0.65rem; }
.mb-afaire-ligne {
    display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0;
    padding: 0.85rem 1rem; color: inherit; text-decoration: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.mb-afaire-ligne:active { transform: scale(0.985); }
.mb-afaire-ico {
    flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 0.8rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-afaire-ico svg { width: 1.25rem; height: 1.25rem; }
.mb-afaire-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.mb-afaire-titre { font-weight: 700; font-size: 0.93rem; color: #1e293b; }
.mb-afaire-detail { font-size: 0.8rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-afaire-chevron { flex-shrink: 0; display: inline-flex; color: #cbd5e1; }
.mb-afaire-chevron svg { width: 1.05rem; height: 1.05rem; }
/* Urgent (un service sans personne, une réponse attendue) : l'ambre des
   avertissements de l'espace, comme la maquette validée. */
.mb-afaire-ligne--urgent { background: #fffbeb; border: 1px solid #fde68a; box-shadow: 0 2px 12px rgba(180, 83, 9, 0.1); }
.mb-afaire-ligne--urgent .mb-afaire-ico { background: #fef3c7; color: #b45309; }
.mb-afaire-ligne--urgent .mb-afaire-titre { color: #92400e; }
.mb-afaire-ligne--urgent .mb-afaire-detail { color: #a16207; }
.mb-accueil-messages { margin-bottom: 0; }
.mb-accueil-messages .mb-chat-row { padding: 0.7rem 1rem; }
.mb-accueil-messages .mb-chat-row:last-child { border-bottom: 0; }

/* « C'est fait, ajoutez un second moyen » (relevé §4.9, point 5). */
.mb-c-est-fait { margin-top: 0.75rem; }
.mb-c-est-fait-carte .mb-feuille-plus-tard { margin-bottom: 0; }

/* ── Sur ordinateur (planche 3) : la barre du bas s'efface, la bande violette
   court sur toute la largeur, et l'accueil place « À faire » et « Pour moi »
   côte à côte. La colonne commune et la place du contenu à sa droite sont
   dans qeewee-socle.css (navigation A3, lot L2, 20.10.2026).
   ⚠️ 1024 px ET NON 900 (relecture du lot I, 13.10.2026) : le seuil du
   panneau, où Filament change de mise en page (lg). À 900, une tablette en
   paysage passait d'une coquille à l'autre en allant de « Pour moi » à « Je
   gère ». Les deux feuilles doivent changer ensemble. ── */
@media (min-width: 1024px) {
    .mb-zone .mb-shell { max-width: none; }
    .mb-zone .mb-head { padding-left: 1.75rem; padding-right: 1.75rem; }
    .mb-zone .mb-nav { display: none; }
    /* Le composeur des fils se collait à 64 px du bas, la hauteur d'une barre
       qui n'est plus là : il flottait, les messages défilaient dessous. Collé
       au bas, il garde un peu d'air (sa propre marge, sur son fond). */
    .mb-zone .mb-feed-composer { bottom: 0; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); }
    .mb-zone .mb-menu-page { display: none; }
    .mb-zone .mb-menu-a-gauche { display: flex; }
    .mb-zone .mb-accueil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
    .mb-zone .mb-accueil > :only-child { grid-column: 1 / -1; }
}

/* =====================================================================
   Zone unique, lot J (13.10.2026) : le bouton « Écrire » et son écran
   (planche 1 de qeewee-planches/une-seule-zone, validée sur le fond).
   Le langage de l'espace, aucune couleur nouvelle : la cible choisie prend
   le dégradé de marque avec le kiwi en filigrane (tuiles de l'accueil,
   encart du lot E), les options le liseré de marque des pastilles, le
   message une carte blanche, l'ambre des avertissements pour le nombre à
   confirmer. Tout est sur des classes que seule la zone emploie.
   ===================================================================== */

/* Le bouton de l'en-tête : la seule pastille BLANCHE de la bande violette,
   pour qu'il se voie d'abord (la maquette le montre plein). */
.mb-head .mb-ecrire-acces {
    background: #fff; color: var(--mb-brand); text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
}
.mb-head .mb-ecrire-acces svg { width: 1rem; height: 1rem; }
.mb-head .mb-ecrire-acces.is-active { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 4px 12px rgba(15, 23, 42, 0.14); }
/* Le nom de l'église cède la place aux boutons sur un téléphone étroit. */
.mb-zone .mb-head .mb-brand { min-width: 0; flex: 1 1 auto; }
.mb-zone .mb-head .mb-brand img { flex-shrink: 0; }
.mb-brand-nom { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-zone .mb-head-actions { flex-shrink: 0; }

/* « À qui ? » : quatre cibles au plus, deux par ligne, cible tactile pleine. */
.mb-ecrire { max-width: 720px; }
.mb-ecrire-cibles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.mb-ecrire-cible {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.65rem; min-height: 64px;
    padding: 0.75rem 0.8rem; border: 1.5px solid #e2e8f0; border-radius: 1rem;
    background: #fff; color: #1e293b; font-family: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
    transition: border-color 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.mb-ecrire-cible:active { transform: scale(0.985); }
@media (hover: hover) {
    .mb-ecrire-cible:not(.is-active):hover { border-color: var(--mb-brand); }
}
.mb-ecrire-cible-kiwi { position: absolute; top: -22px; right: -20px; width: 80px; height: 80px; pointer-events: none; }
.mb-ecrire-cible-ico {
    position: relative; flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 0.75rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-ecrire-cible-ico svg { width: 1.2rem; height: 1.2rem; }
.mb-ecrire-cible-corps { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.mb-ecrire-cible-titre { font-weight: 700; font-size: 0.9rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-ecrire-cible-desc { font-size: 0.74rem; line-height: 1.3; color: #64748b; }
.mb-ecrire-cible.is-active {
    border-color: transparent; color: #fff;
    background: linear-gradient(135deg, var(--mb-brand), var(--mb-brand-2));
    box-shadow: 0 8px 20px rgba(35, 40, 100, 0.22);
}
@supports (color: oklch(from red l c h)) {
    .mb-ecrire-cible.is-active {
        background: linear-gradient(150deg,
            var(--mb-brand),
            oklch(from var(--mb-brand) calc(l + 0.07) calc(c * 0.85) calc(h + 19)));
    }
}
.mb-ecrire-cible.is-active .mb-ecrire-cible-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
.mb-ecrire-cible.is-active .mb-ecrire-cible-desc { color: rgba(255, 255, 255, 0.85); }

/* Les options d'une cible (groupes, équipes, églises) : pastilles au liseré de marque. */
.mb-ecrire-options { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1rem; }
.mb-ecrire-option {
    display: inline-flex; align-items: center; gap: 0.3rem; min-height: 40px;
    padding: 0.4rem 0.95rem; border: 1.5px solid var(--mb-brand); border-radius: 999px;
    background: #fff; color: var(--mb-brand); font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.mb-ecrire-option svg { width: 0.95rem; height: 0.95rem; }
.mb-ecrire-option.is-active { background: var(--mb-brand); color: #fff; }

/* Courriel ou annonce (R14) : un sélecteur à deux positions sur la lavande. */
.mb-ecrire-canaux { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin: 0 0 1rem; border-radius: 999px; background: var(--mb-brand-soft); }
.mb-ecrire-canal {
    display: inline-flex; align-items: center; gap: 0.35rem; min-height: 38px;
    padding: 0.4rem 0.95rem; border: 0; border-radius: 999px; background: transparent;
    color: var(--mb-brand); font-family: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer;
}
.mb-ecrire-canal svg { width: 1rem; height: 1rem; }
.mb-ecrire-canal.is-active { background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1); }

/* La personne choisie, et sa recherche. */
.mb-ecrire-recherche { margin: 0 0 1rem; }
.mb-ecrire-choisi { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; }
.mb-ecrire-choisi-ico {
    flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-ecrire-choisi-ico svg { width: 1.1rem; height: 1.1rem; }
.mb-ecrire-choisi-nom { flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Le message. */
.mb-ecrire-carte { padding: 1.05rem 1.1rem 1.1rem; }
.mb-ecrire-texte { min-height: 9rem; resize: vertical; line-height: 1.5; }
.mb-ecrire-erreur { margin: -0.5rem 0 0.9rem; }
.mb-ecrire-erreur-champ { margin: -0.55rem 0 0.85rem; }
.mb-ecrire-note { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0 0 0.9rem; font-size: 0.82rem; line-height: 1.5; color: #475569; }
.mb-ecrire-note > svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; margin-top: 0.12rem; color: var(--mb-brand); }
.mb-ecrire-note--carte { margin: 0.7rem 0 0; color: #64748b; }
.mb-ecrire-nombre { margin: 0.75rem 0 0; }
.mb-ecrire-nombre .mb-badge { font-size: 0.74rem; padding: 3px 10px; }
.mb-ecrire-confirme {
    display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 0.7rem; padding: 0.65rem 0.75rem;
    border: 1px solid #fde68a; border-radius: 0.7rem; background: #fffbeb; color: #92400e;
    font-size: 0.86rem; font-weight: 600; line-height: 1.45; cursor: pointer;
}
.mb-ecrire-confirme input { width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; flex-shrink: 0; accent-color: var(--mb-brand); }
.mb-ecrire-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem 1rem; margin-top: 1.05rem; }
.mb-ecrire-actions .mb-link { margin-right: auto; min-height: 44px; }
.mb-ecrire-actions .mb-btn--primary { min-width: 9rem; }
.mb-ecrire-actions .mb-btn--primary[disabled] { opacity: 0.65; cursor: wait; }

/* Personne à qui écrire : le pourquoi, et la marche à suivre. */
.mb-ecrire-vide { text-align: center; padding: 1.6rem 1.3rem; }
.mb-ecrire-vide-ico {
    width: 3.2rem; height: 3.2rem; margin: 0 auto 0.9rem; border-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--mb-brand-soft); color: var(--mb-brand);
}
.mb-ecrire-vide-ico svg { width: 1.6rem; height: 1.6rem; }
.mb-ecrire-vide-titre { margin: 0 0 0.4rem; font-weight: 800; font-size: 1.02rem; color: #1e293b; }
.mb-ecrire-vide-texte { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.55; color: #64748b; }

/* =====================================================================
   « Entrer avec Face ID » (19.10.2026, planche validée par Stéphane le
   18.10.2026, qeewee-planches/connexion-face-id). Aucune couleur nouvelle :
   le dégradé de marque, le gris du bouton secondaire, la pastille lavande.
   ===================================================================== */

/* Le grand bouton de l'écran de connexion : plus haut que « Se connecter »,
   qui passe en secondaire (mb-btn--ghost) juste dessous. */
.mb-btn--geste { padding: 1.05rem 1rem; font-size: 1.06rem; gap: 0.6rem; }
.mb-btn--geste svg { width: 1.6rem; height: 1.6rem; }
.mb-btn--geste[disabled] { opacity: 0.7; cursor: wait; }
.mb-geste-message { margin: 0.75rem 0 0; }
/* « ou avec votre mot de passe » : le filet des boutons SSO, détaché du
   bouton. ⚠️ Après .mb-sso-div dans la feuille (même poids, le dernier
   écrit gagne). */
.mb-geste-ou { margin: 1.2rem 0 0.8rem; }

/* L'encart de l'accueil « Entrer d'un geste la prochaine fois » : la carte
   discrète des moyens de connexion (mb-encart--discret), avec ses deux
   gestes. Près du titre, comme la planche (image b3). */
.mb-encart-geste { margin-top: 0.75rem; }
.mb-encart-geste .mb-encart-ico svg { width: 1.45rem; height: 1.45rem; }
.mb-encart-geste .mb-encart-texte { color: #475569; }
.mb-encart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; margin-top: 0.75rem; }
.mb-encart-plus-tard {
    min-height: 44px; padding: 0 0.2rem; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 600; color: #64748b;
}

/* 🔴 UN MESSAGE CACHÉ RESTE CACHÉ. `hidden` ne pèse rien face à une classe
   qui pose `display: flex` (mb-alert--info, mb-alert--attention) : la page
   biométrie montrait une boîte vide à la place de « Moyen ajouté », et
   l'astuce Android y aurait été visible d'emblée. */
.mb-ajout-message[hidden] { display: none; }

/* L'astuce Android de la page biométrie, révélée si l'enregistrement échoue :
   ce qu'il faut régler dans le téléphone, pas une erreur. */
.mb-astuce-texte { margin: 0; line-height: 1.5; }

/* =====================================================================
   Louange (déroulé, feuille du chant) : la louange sur tablette, lot L2
   (21.10.2026, planche validée par Stéphane, images 1a, 1b et 1c).
   Le musicien lit la tonalité du jour en pastille du module Chants, touche
   une ligne « Chant » et lit ses paroles dans la feuille du bas.
   Couleurs du module Chants (SectionTheme::couleurs('Chants')), posées en
   variables par le gabarit member/layout : --mb-chants, --mb-chants-fonce,
   --mb-chants-fin, --mb-chants-douce ; les valeurs de repli sont les mêmes.
   ⚠️ Rien ici ne dépend de .mb-zone : zone éteinte, le <body> n'a pas cette
   classe, et l'écran doit être le même.
   ⚠️ Les classes « mb-louange-* » marquent ce que ce chantier AJOUTE (le
   filet de non-régression lit la page sans elles) : une ligne ou un
   intertitre existant prend un modificateur, mb-plan-row--chant ou
   mb-plan-section--pupitre.
   ===================================================================== */
:root {
    --mb-chants-bord: #f5d0fe;
    --mb-louange-points: radial-gradient(rgba(255, 255, 255, 0.2) 1.3px, transparent 1.4px), radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.1px);
}

/* La tonalité du jour : pastille du module Chants (fond doux, texte foncé),
   à la place du badge gris d'avant. */
.mb-cle-du-jour {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; height: 1.6rem;
    padding: 0 0.55rem; margin-left: 0.4rem; border-radius: 0.55rem; vertical-align: 1px;
    background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf);
    border: 1.5px solid var(--mb-chants-bord); font-weight: 800; font-size: 0.84rem; white-space: nowrap;
}

/* Une ligne « Chant » se touche en entier (doigt, Entrée, Espace) : chevron
   à droite, fond doux au toucher et au focus du clavier. */
.mb-plan-row--chant { position: relative; padding-right: 2.4rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mb-plan-row--chant:hover, .mb-plan-row--chant:active { background: var(--mb-chants-douce, #fdf4ff); }
.mb-plan-row--chant:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: -2px; background: var(--mb-chants-douce, #fdf4ff); }
.mb-louange-chev { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--mb-chants-fonce, #a21caf); display: inline-flex; }
.mb-louange-chev svg { width: 1.15rem; height: 1.15rem; }

/* Le bouton du pupitre (lot L3) : sur le premier intertitre suivi d'un
   chant, ou au-dessus de la carte quand le déroulé n'a pas d'intertitre. */
.mb-plan-section--pupitre { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding-top: 0.4rem; padding-bottom: 0.4rem; }
.mb-louange-pupitre-haut { display: flex; justify-content: flex-end; margin: 0 0 0.6rem; }
.mb-louange-pupitre-btn {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.85rem; min-height: 2.75rem; border-radius: 999px;
    text-transform: none; letter-spacing: 0; font-size: 0.76rem; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    box-shadow: 0 4px 12px rgba(162, 28, 175, 0.28);
}
.mb-louange-pupitre-btn svg { width: 0.95rem; height: 0.95rem; }

/* La feuille du chant : la vraie .mb-feuille, qui défile quand les paroles
   sont longues (sans entraîner la page derrière). */
.mb-feuille.mb-louange-feuille { padding-top: 1.1rem; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; }
.mb-louange-poignee { width: 2.6rem; height: 0.3rem; border-radius: 999px; background: #e2e8f0; margin: -0.2rem auto 0.9rem; }
.mb-louange-f-tete { display: flex; gap: 0.8rem; align-items: flex-start; }
.mb-louange-f-corps { flex: 1; min-width: 0; }
.mb-feuille-ico.mb-louange-ico {
    flex: none; margin-bottom: 0;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    box-shadow: 0 6px 16px rgba(162, 28, 175, 0.28);
}
.mb-louange-f-tete .mb-feuille-titre { margin: 0.05rem 0 0.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.mb-louange-f-sous { font-size: 0.8rem; color: #64748b; line-height: 1.4; }
.mb-louange-fermer {
    margin-left: auto; flex: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: #f1f5f9; color: #475569; display: flex; align-items: center; justify-content: center;
}
.mb-louange-fermer svg { width: 1.1rem; height: 1.1rem; }

/* La tonalité du jour : grande tuile Chants, puis son nom dans la langue. */
.mb-louange-cle-bloc {
    display: flex; align-items: center; gap: 0.9rem; margin: 1rem 0 0.9rem; padding: 0.75rem;
    border-radius: 1rem; background: var(--mb-chants-douce, #fdf4ff); border: 1px solid var(--mb-chants-bord);
}
.mb-louange-cle-texte { min-width: 0; }
.mb-louange-cle-grande {
    position: relative; overflow: hidden; flex: none; width: 4.2rem; height: 4.2rem; border-radius: 1rem;
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em;
    background-color: var(--mb-chants-fonce, #a21caf);
    background-image: var(--mb-louange-points), linear-gradient(150deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    background-size: 26px 26px, 17px 17px, auto; background-position: 0 0, 9px 13px, 0 0;
    box-shadow: 0 8px 18px rgba(192, 38, 211, 0.3);
}
/* Une saisie libre plus longue (« capo 2 », « mi majeur ») reste dans la tuile. */
.mb-louange-cle-grande--long { padding: 0 0.3rem; font-size: 0.95rem; line-height: 1.1; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; }
/* Trois ou quatre caractères (« F#m », « C#m », « Bbm », « E/G# ») : la
   taille pleine sortait de la tuile (relecture du 21.10.2026). */
.mb-louange-cle-grande--moyen { font-size: 1.4rem; letter-spacing: -0.03em; white-space: nowrap; }
.mb-louange-cle-etiquette { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mb-chants-fonce, #a21caf); }
.mb-louange-cle-nom { font-size: 1.08rem; font-weight: 800; color: #1e293b; line-height: 1.3; overflow-wrap: anywhere; }
.mb-louange-cle-detail { font-size: 0.8rem; color: #64748b; line-height: 1.4; }

/* Les paroles : un bloc par paragraphe, les vers à la ligne comme saisis. */
.mb-louange-paroles { display: flex; flex-direction: column; gap: 0.6rem; }
.mb-louange-bloc {
    margin: 0; padding: 0.75rem 0.95rem; border-radius: 0.9rem; background: #f8fafc;
    font-size: 1rem; line-height: 1.62; color: #1e293b; white-space: pre-line; overflow-wrap: anywhere;
}

/* Chant d'avant (ou Fermer), chant d'après (ou le pupitre). */
.mb-louange-f-actions { display: flex; gap: 0.6rem; margin-top: 1rem; }
.mb-louange-f-actions .mb-btn { flex: 1; min-width: 0; white-space: nowrap; }
.mb-louange-f-actions .mb-btn:first-child:not(:last-child) { flex: 0 1 auto; max-width: 45%; padding-left: 1.1rem; padding-right: 1.1rem; }
.mb-louange-f-actions .mb-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mb-louange-f-actions .mb-btn svg { flex: none; }
.mb-btn.mb-louange-btn-chant {
    color: #fff; background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    box-shadow: 0 6px 16px rgba(162, 28, 175, 0.25);
}
.mb-louange-f-note { margin: 0.75rem 0 0; display: flex; gap: 0.35rem; justify-content: center; align-items: center; font-size: 0.74rem; color: #64748b; text-align: center; }
.mb-louange-f-note svg { width: 0.95rem; height: 0.95rem; flex: none; }

/* Paroles pas encore saisies : la carte en pointillés, et l'enregistrement
   à écouter quand le chant en a un. */
.mb-louange-vide { padding: 1.15rem 1rem 1.05rem; border-radius: 1rem; border: 1.5px dashed #e7b7f0; background: #fff; text-align: center; }
.mb-louange-vide-ico {
    width: 2.7rem; height: 2.7rem; border-radius: 0.85rem; margin: 0 auto 0.6rem;
    background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf);
    display: flex; align-items: center; justify-content: center;
}
.mb-louange-vide-ico svg { width: 1.4rem; height: 1.4rem; }
.mb-louange-vide-titre { margin: 0 0 0.25rem; font-weight: 800; font-size: 1rem; color: #1e293b; }
.mb-louange-vide-texte { margin: 0 auto 0.85rem; max-width: 22rem; font-size: 0.86rem; line-height: 1.5; color: #64748b; }
.mb-btn.mb-louange-btn-clair { background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf); border: 1.5px solid var(--mb-chants-bord); }

/* =====================================================================
   Largeur de tablette (la louange sur tablette, lot L3, 21.10.2026) : le
   déroulé et la page du conducteur de louange (option `large` du gabarit,
   classe mb-large sur le <body>) prennent jusqu'à 780 px de contenu au lieu
   de la colonne de 520 px, dès 700 px de large. Sur téléphone, rien ne
   change. ⚠️ Dans la zone unique, à partir de 1024 px, la règle de la zone
   (.mb-zone .mb-zone-corps > .mb-main, plus précise) garde la main.

   🔴 RELECTURE DU 21.10.2026 : `mb-large` n'est posée que sur un déroulé QUI
   A DES CHANTS (et la page du conducteur), plus jamais pour toutes les
   églises. Et seul le contenu (.mb-main) s'élargit, aux largeurs de
   tablette : la coquille (.mb-shell), la barre du haut et la barre du bas
   gardent leurs 520 px. Le contenu déborde la coquille de part et d'autre,
   centré par des marges négatives (jamais par `transform`, qui ferait de
   .mb-main le repère des feuilles en `position: fixed`). Dans la zone, à
   partir de 1024 px, il reste collé à la colonne, à 780 px au plus.
   ===================================================================== */
@media (min-width: 700px) and (max-width: 1366px) {
    .mb-large .mb-main {
        width: min(780px, calc(100vw - 2rem)); max-width: none;
        margin-left: calc(50% - min(390px, 50vw - 1rem)); margin-right: calc(50% - min(390px, 50vw - 1rem));
        padding-left: 1.5rem; padding-right: 1.5rem;
    }
    .mb-large .mb-plan-title { font-size: 1rem; }
}
@media (min-width: 1024px) and (max-width: 1366px) {
    .mb-large.mb-zone .mb-zone-corps > .mb-main { width: 100%; max-width: 780px; margin: 0; padding-left: 0; padding-right: 0; }
}

/* =====================================================================
   Pupitre (la louange sur tablette, lot L3, 21.10.2026 ; images 2a et 2b) :
   un chant par écran, en plein écran (option `pupitre` du gabarit, classe
   mb-pupitre sur le <body> : ni barre du haut, ni colonne, ni barre du bas).
   La barre Chants, la bande des puces, le corps (titre, tonalité en très
   grand, paroles) et le pied (chant précédent, compte, chant suivant).
   ⚠️ L'app iOS (Capacitor) a une encoche : marges env(safe-area-inset-*).
   ⚠️ Rien ici ne dépend de .mb-zone.
   ===================================================================== */
.mb-pupitre { background: #fcf8fd; }
.mb-pupitre .mb-shell { max-width: none; min-height: 0; }
.mb-pupitre .mb-main { padding: 0; }
.mb-pupitre-page {
    display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
    background: #fcf8fd; color: #1e293b;
}
.mb-pupitre-barre {
    position: relative; overflow: hidden; flex: none; display: flex; align-items: center; gap: 0.8rem;
    padding: calc(0.95rem + env(safe-area-inset-top, 0px)) calc(1.3rem + env(safe-area-inset-right, 0px)) 0.95rem calc(1.3rem + env(safe-area-inset-left, 0px));
    color: #fff; background-color: var(--mb-chants-fonce, #a21caf);
    background-image: var(--mb-louange-points), linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    background-size: 26px 26px, 17px 17px, auto; background-position: 0 0, 9px 13px, 0 0;
    box-shadow: 0 2px 12px rgba(162, 28, 175, 0.3);
}
.mb-pupitre-barre-kiwi { position: absolute; width: 150px; height: 150px; top: -46px; right: -30px; pointer-events: none; }
.mb-pupitre-pill {
    position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.6rem; padding: 0.5rem 0.9rem;
    border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.2); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 700;
    white-space: nowrap; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-pupitre-pill svg { width: 1.05rem; height: 1.05rem; flex: none; }
.mb-pupitre-pill:disabled { opacity: 0.5; cursor: default; }
.mb-pupitre-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mb-pupitre-ecran { opacity: 0.75; }
.mb-pupitre-ecran.is-actif { opacity: 1; background: rgba(255, 255, 255, 0.3); }
.mb-pupitre-titre { position: relative; flex: 1; min-width: 0; text-align: center; line-height: 1.25; }
.mb-pupitre-titre strong { display: block; font-size: 1.08rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pupitre-titre span { display: block; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pupitre-outils { position: relative; display: flex; gap: 0.45rem; }

/* Les puces : un chant par puce ; la bande défile quand il y en a beaucoup. */
.mb-pupitre-bande {
    flex: none; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none;
    padding: 0.9rem calc(1.1rem + env(safe-area-inset-right, 0px)) 0.9rem calc(1.1rem + env(safe-area-inset-left, 0px));
    background: #fff; border-bottom: 1px solid #f3e1f6;
}
.mb-pupitre-bande::-webkit-scrollbar { display: none; }
.mb-puce {
    flex: none; display: flex; align-items: center; gap: 0.4rem; max-width: 16rem; min-height: 2.6rem;
    padding: 0.4rem 0.6rem 0.4rem 0.4rem; border-radius: 999px; border: 1.5px solid #f0d9f5; background: #fff;
    font: inherit; font-size: 0.8rem; font-weight: 700; color: #475569; white-space: nowrap; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.mb-puce b { flex: none; width: 1.65rem; height: 1.65rem; border-radius: 999px; background: #f5eef7; color: #86198f; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; }
.mb-puce-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mb-puce i { flex: none; font-style: normal; color: var(--mb-chants-fonce, #a21caf); background: var(--mb-chants-douce, #fdf4ff); border: 1px solid var(--mb-chants-bord); border-radius: 0.4rem; padding: 0 0.4rem; }
.mb-puce.is-active { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de)); box-shadow: 0 6px 16px rgba(192, 38, 211, 0.3); }
.mb-puce.is-active b { background: rgba(255, 255, 255, 0.25); color: #fff; }
.mb-puce.is-active i { background: #fff; border-color: #fff; }
.mb-puce:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }

/* Le corps : défile seul quand les paroles sont longues ; le glissé
   horizontal change de chant (touch-action : le vertical reste au navigateur). */
.mb-pupitre-corps {
    position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    padding: 1.7rem calc(2.3rem + env(safe-area-inset-right, 0px)) 1.2rem calc(2.3rem + env(safe-area-inset-left, 0px));
    --mb-pupitre-taille: 2.05rem;
}
.mb-pupitre-tete { display: flex; gap: 1.6rem; align-items: flex-start; justify-content: space-between; }
.mb-pupitre-tete-texte { min-width: 0; }
.mb-pupitre-rang { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mb-chants-fonce, #a21caf); }
.mb-pupitre-nom { margin: 0.2rem 0 0; font-size: 2.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #1e293b; overflow-wrap: anywhere; }
.mb-pupitre-meta { margin-top: 0.55rem; font-size: 1.1rem; color: #64748b; line-height: 1.45; }
.mb-pupitre-cle { flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.mb-pupitre-cle .mb-louange-cle-grande { width: 8.4rem; height: 8.4rem; border-radius: 1.7rem; font-size: 4.8rem; }
.mb-pupitre-cle .mb-louange-cle-grande--long { font-size: 1.6rem; padding: 0 0.6rem; }
.mb-pupitre-cle .mb-louange-cle-grande--moyen { font-size: 2.9rem; }
.mb-pupitre-cle .mb-louange-cle-nom { font-size: 1.15rem; text-align: center; max-width: 9rem; }
.mb-pupitre-paroles { margin-top: 2.1rem; font-size: var(--mb-pupitre-taille); line-height: 1.5; font-weight: 500; color: #1e293b; }
.mb-pupitre-paroles p { margin: 0 0 1.5rem; padding-left: 1.2rem; border-left: 5px solid var(--mb-chants-bord); white-space: pre-line; overflow-wrap: anywhere; }
.mb-pupitre-paroles p + p { border-left-color: var(--mb-chants, #c026d3); }
.mb-louange-vide.mb-pupitre-vide { margin: 2.6rem auto 0; max-width: 36rem; padding: 2rem 2rem 1.8rem; }
.mb-pupitre-vide .mb-louange-vide-ico { width: 4rem; height: 4rem; border-radius: 1.2rem; }
.mb-pupitre-vide .mb-louange-vide-ico svg { width: 2rem; height: 2rem; }
.mb-pupitre-vide .mb-louange-vide-titre { font-size: 1.5rem; }
.mb-pupitre-vide .mb-louange-vide-texte { font-size: 1.12rem; max-width: 30rem; }
.mb-pupitre-vide .mb-btn { font-size: 1.05rem; padding: 0.85rem 1.4rem; }
/* L'astuce du glissé : en bas à droite de l'écran, au-dessus du pied, le
   temps de quelques secondes. */
.mb-pupitre-glisser {
    position: fixed; z-index: 5; right: calc(1.6rem + env(safe-area-inset-right, 0px)); bottom: calc(8.4rem + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1.1rem 0.7rem 0.8rem; border-radius: 999px; background: rgba(30, 41, 59, 0.82); color: #fff;
    font-size: 0.95rem; font-weight: 700; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.25); pointer-events: none;
}
.mb-pupitre-glisser svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* Le pied : chant précédent, compte, chant suivant (ou la fin des chants). */
.mb-pupitre-pied {
    flex: none; display: flex; align-items: stretch; gap: 1rem;
    padding: 0.9rem calc(1.3rem + env(safe-area-inset-right, 0px)) calc(1.3rem + env(safe-area-inset-bottom, 0px)) calc(1.3rem + env(safe-area-inset-left, 0px));
}
.mb-pupitre-nav {
    flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.2rem; min-height: 86px;
    border-radius: 1.2rem; background: #fff; border: 1px solid #f1e4f4; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07);
    font: inherit; color: #1e293b; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-pupitre-nav > svg { width: 2rem; height: 2rem; flex: none; color: var(--mb-chants-fonce, #a21caf); }
.mb-pupitre-nav-texte { min-width: 0; display: block; }
.mb-pupitre-nav small { display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
.mb-pupitre-nav strong { display: flex; align-items: center; min-width: 0; font-size: 1.2rem; color: #1e293b; }
.mb-pupitre-nav-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-pupitre-nav .mb-cle-du-jour { flex: none; font-size: 0.9rem; margin-left: 0.6rem; }
.mb-pupitre-nav:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-pupitre-nav--suiv {
    justify-content: flex-end; text-align: right; color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de)); box-shadow: 0 8px 22px rgba(162, 28, 175, 0.3);
}
.mb-pupitre-nav--suiv > svg, .mb-pupitre-nav--suiv strong { color: #fff; }
.mb-pupitre-nav--suiv strong { justify-content: flex-end; }
.mb-pupitre-nav--suiv small { color: #fff; }
.mb-pupitre-nav--suiv .mb-cle-du-jour { background: #fff; border-color: #fff; }
.mb-pupitre-nav--fin { opacity: 0.55; justify-content: center; text-align: center; cursor: default; }
.mb-pupitre-nav--vide { visibility: hidden; }
.mb-pupitre-compte {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-width: 7.5rem;
    color: #64748b; font-size: 0.86rem; font-weight: 700; text-align: center;
}
.mb-pupitre-points { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; max-width: 9rem; }
.mb-pupitre-points span { width: 0.55rem; height: 0.55rem; border-radius: 99px; background: #ead5ef; }
.mb-pupitre-points span.is-active { width: 1.4rem; background: var(--mb-chants, #c026d3); }

/* LA GRILLE D'ACCORDS (chants de Genève, G1, 30.10.2026, carte 1A) : les
   accords au-dessus des syllabes, dans la tonalité du jour, au pupitre et
   dans la feuille du chant. Chaque mot est un bloc insécable (la ligne ne
   se coupe qu'entre deux mots) ; dans un mot, chaque morceau empile son
   accord et sa syllabe. Un accord plus large que sa syllabe pousse la
   suite, comme sur une grille papier. */
.mb-accords { color: #1e293b; }
.mb-accords-section { margin: 0 0 1.1em; padding-left: 0.7em; border-left: 5px solid var(--mb-chants-bord); }
.mb-accords-section + .mb-accords-section { border-left-color: var(--mb-chants, #c026d3); }
.mb-accords-titre { margin-bottom: 0.3rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; }
.mb-accords-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 0.3em; row-gap: 0.1em; margin-bottom: 0.3em; line-height: 1.3; }
.mb-accords-mot { display: inline-flex; align-items: flex-end; }
.mb-accords-morceau { display: inline-flex; flex-direction: column; white-space: pre; }
.mb-accords-morceau > b { min-height: 1.3em; padding-right: 0.4em; font-size: 0.8em; font-weight: 800; line-height: 1.3; color: var(--mb-chants-fonce, #a21caf); }
/* Un accord sans syllabe dessous (« béni[D] soit », « nom. [D] ») a un texte
   vide : sans hauteur, il retombait au niveau des paroles (signalé par
   Stéphane le 01.11.2026). Le texte garde toujours la hauteur d'une ligne. */
.mb-accords-morceau > span { min-height: 1.3em; }
/* Dans un mot coupé par un accord plus large que sa syllabe (« victoi[Bb]re »),
   un trait fin comble le blanc jusqu'à la syllabe suivante, comme sur une
   grille papier ; le PDF écrit « ma---tin » (planche 8-traits-dans-les-mots,
   02.11.2026). Jamais après le dernier morceau d'un mot : entre deux mots, le
   blanc est une vraie espace. Un petit écart ne laisse presque rien voir. */
.mb-accords-ligne:not(.mb-accords-ligne--seuls) > .mb-accords-mot > .mb-accords-morceau:not(:last-child) > span { display: flex; }
.mb-accords-ligne:not(.mb-accords-ligne--seuls) > .mb-accords-mot > .mb-accords-morceau:not(:last-child) > span::after {
    content: ''; flex: 1 1 0; min-width: 0; align-self: center; height: 2px; margin-top: 0.15em;
    background: linear-gradient(to right, transparent 0.08em, #a98bbf 0.08em, #a98bbf calc(100% - 0.1em), transparent calc(100% - 0.1em));
}
.mb-accords-ligne--seuls { column-gap: 0.75em; }
.mb-accords-ligne--seuls .mb-accords-morceau > span { display: none; }
.mb-accords-ligne--seuls .mb-accords-morceau > b { padding-right: 0; font-size: 0.9em; }
.mb-accords-ligne--texte { display: block; }
.mb-accords-annonce { display: block; font-size: 0.8rem; line-height: 1.35; color: #64748b; }
.mb-accords-sans { display: flex; gap: 0.5rem; align-items: center; margin: 1.6rem 0 0; font-size: 1rem; color: #64748b; }
.mb-accords-sans svg { width: 1.3rem; height: 1.3rem; flex: none; color: var(--mb-chants-fonce, #a21caf); }

/* La bascule « Paroles / Accords » : blanche sur le dégradé de la barre du
   pupitre ; Chants sur fond clair dans la bande des puces (téléphone) et
   dans la feuille du chant. */
.mb-accords-bascule { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.2); }
.mb-accords-bascule button {
    min-height: 2.25rem; padding: 0.3rem 0.85rem; border: 0; border-radius: 999px; background: transparent; color: #fff;
    font: inherit; font-size: 0.86rem; font-weight: 700; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-accords-bascule button.is-actif { background: #fff; color: var(--mb-chants-fonce, #a21caf); }
.mb-accords-bascule button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mb-accords-bascule--bande, .mb-accords-bascule--feuille { background: var(--mb-chants-douce, #fdf4ff); border: 1.5px solid var(--mb-chants-bord); }
.mb-accords-bascule--bande button, .mb-accords-bascule--feuille button { color: var(--mb-chants-fonce, #a21caf); }
.mb-accords-bascule--bande button.is-actif, .mb-accords-bascule--feuille button.is-actif {
    color: #fff; background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
}
.mb-accords-bascule--bande button:focus-visible, .mb-accords-bascule--feuille button:focus-visible { outline-color: var(--mb-chants, #c026d3); }
.mb-accords-bascule--bande { display: none; }
.mb-accords-bascule--feuille { display: flex; width: max-content; margin: 0 0 0.75rem; }

/* Au pupitre : en grand, à la taille choisie (A− A+), un peu sous celle des
   paroles, puisque chaque ligne en porte deux. */
.mb-pupitre-accords { margin-top: 2.1rem; font-size: calc(var(--mb-pupitre-taille) * 0.86); font-weight: 500; }
.mb-pupitre-accords .mb-accords-section { padding-left: 1.2rem; margin-bottom: 1.5rem; }
.mb-pupitre-accords .mb-accords-titre { font-size: 0.95rem; }
.mb-pupitre-accords > .mb-accords-annonce { margin: 0 0 1rem; font-size: 1rem; }
.mb-pupitre-cle .mb-accords-annonce { max-width: 9rem; font-size: 0.95rem; text-align: center; }

/* TOUT LE CHANT SUR UNE PAGE (01.11.2026, planche 7-pupitre-colonnes) : en
   mode Accords (`is-accords` sur la page), l'en-tête d'un chant à grille
   tient sur une ligne, la bande des puces et le pied se resserrent ; la
   hauteur va à la grille. qeewee-pupitre.js (mettreEnPage) pose
   `is-en-colonnes`, la hauteur, le nombre de colonnes (data-colonnes) et la
   taille ; ce qui dépasse fait une page de plus, tournée par scrollLeft.
   ⚠️ Livewire efface ces réglages quand il redessine : mettreEnPage repasse. */
.mb-pupitre-page.is-accords .mb-pupitre-bande { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.mb-pupitre-page.is-accords .mb-pupitre-pied { padding-top: 0.45rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); }
.mb-pupitre-page.is-accords .mb-pupitre-nav { min-height: 58px; padding: 0.5rem 1rem; }
.mb-pupitre-page.is-accords .mb-pupitre-corps { padding-top: 1.05rem; padding-bottom: 0.5rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-tete { align-items: center; gap: 1.2rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-rang { font-size: 0.78rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-nom { margin: 0.1rem 0 0; font-size: 1.65rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-meta { margin-top: 0.1rem; font-size: 0.92rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle { display: grid; grid-template-columns: auto auto; column-gap: 0.75rem; row-gap: 0.1rem; align-items: center; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle > :not(.mb-louange-cle-grande) { grid-column: 2; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-etiquette { display: none; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-grande { grid-row: 1 / span 2; width: 3.7rem; height: 3.7rem; border-radius: 1rem; font-size: 2rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-grande--moyen { font-size: 1.45rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-grande--long { font-size: 0.9rem; padding: 0 0.3rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-nom { font-size: 0.98rem; text-align: left; max-width: none; align-self: end; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-accords-annonce,
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-change { text-align: left; max-width: none; align-self: start; font-size: 0.85rem; }
.mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-accords { margin-top: 1.1rem; }

/* La grille en colonnes de hauteur fixe. Un couplet ou un refrain ne se
   coupe pas entre deux colonnes ; en une seule colonne (téléphone), il peut
   continuer à la page suivante, jamais une ligne. Un COLUMN_BREAK de
   Planning Center ouvre une colonne quand le chant tient sur deux. */
.mb-pupitre-accords.is-en-colonnes { position: relative; }
.mb-pupitre-accords.is-en-colonnes .mb-accords { overflow: hidden; column-fill: auto; column-gap: 2.6rem; column-rule: 2px dotted var(--mb-chants-bord); }
.mb-pupitre-accords.is-en-colonnes .mb-accords-section { break-inside: avoid; }
.mb-pupitre-accords.is-en-colonnes .mb-accords[data-colonnes="1"] .mb-accords-section { break-inside: auto; }
.mb-pupitre-accords.is-en-colonnes .mb-accords[data-colonnes="2"] .mb-accords-section--saut { break-before: column; }
.mb-pupitre-accords.is-en-colonnes .mb-accords-ligne { break-inside: avoid; }
.mb-pupitre-accords.is-en-colonnes .mb-accords-titre { font-size: 0.82rem; }
/* « Page 1 sur 3 » : sous le texte, dans la place que mettreEnPage lui garde. */
.mb-pupitre-pages {
    position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.6rem;
    padding: 0.4rem 0.5rem 0.4rem 0.95rem; border: 0; border-radius: 999px; color: #fff; font: inherit; font-size: 0.88rem; font-weight: 800;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de)); box-shadow: 0 6px 16px rgba(162, 28, 175, 0.3);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-pupitre-pages-fleche { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: rgba(255, 255, 255, 0.25); }
.mb-pupitre-pages-fleche svg { width: 1rem; height: 1rem; }
/* La flèche suivante, ou le retour à la première page depuis la dernière. */
.mb-pupitre-pages.is-fin .mb-pupitre-pages-fleche--suite,
.mb-pupitre-pages:not(.is-fin) .mb-pupitre-pages-fleche--retour { display: none; }
.mb-pupitre-pages:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
@media (max-width: 640px) {
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-tete { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 0.8rem; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-nom { font-size: 1.35rem; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-meta { font-size: 0.82rem; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle { display: flex; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-grande { width: 3rem; height: 3rem; border-radius: 0.8rem; font-size: 1.6rem; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-louange-cle-nom,
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-cle .mb-accords-annonce { display: none; }
    .mb-pupitre-page.is-accords .mb-pupitre-chant--grille .mb-pupitre-accords { margin-top: 0.8rem; }
}

/* Dans la feuille du chant : la carte des paroles, et le PDF de la grille. */
.mb-louange-accords { padding: 0.8rem 0.95rem; border-radius: 0.9rem; background: #f8fafc; font-size: 1rem; }
.mb-louange-accords > .mb-accords-annonce { margin: 0 0 0.6rem; }
.mb-louange-fichiers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.mb-louange-fichiers .mb-btn svg { width: 1rem; height: 1rem; flex: none; }

/* Les fichiers joints (G2, 30.10.2026, carte 2A) : une pastille par fichier,
   le titre puis son format (« MP3 · E »). Sous une ligne qui n'est pas un
   chant, et pour tout le culte au-dessus de la carte du déroulé. */
.mb-louange-fichier { max-width: 100%; min-width: 0; }
.mb-louange-fichier-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-louange-fichier small { flex: none; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.03em; opacity: 0.75; }
.mb-louange-fichiers--ligne { margin-top: 0.45rem; }
.mb-louange-fichiers-culte {
    margin: 0 0 0.9rem; padding: 0.75rem 0.85rem; border-radius: 1rem;
    background: var(--mb-chants-douce, #fdf4ff); border: 1px solid var(--mb-chants-bord);
}
.mb-louange-fichiers-culte-titre {
    display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; font-weight: 800;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--mb-chants-fonce, #a21caf);
}
.mb-louange-fichiers-culte-titre svg { width: 1rem; height: 1rem; flex: none; }
.mb-louange-fichiers-culte .mb-louange-fichiers { margin-top: 0.5rem; }

/* Le lecteur d'entraînement (G3, 31.10.2026, carte 2A) : lecture et barre,
   puis « Écouter en − D + » et ce que l'on entend (« mp3 en E · 2 demi-tons
   plus bas »). Le son se transpose sur l'appareil (public/js/qeewee-lecteur.js). */
.mb-louange-lecteur {
    margin: 0 0 0.9rem; padding: 0.75rem 0.85rem; border-radius: 1rem;
    background: var(--mb-chants-douce, #fdf4ff); border: 1.5px solid var(--mb-chants-bord);
}
.mb-louange-lecteur-tete {
    display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.55rem; min-width: 0;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mb-chants-fonce, #a21caf);
}
.mb-louange-lecteur-tete span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-louange-lecteur-tete svg { width: 1rem; height: 1rem; flex: none; }
.mb-louange-lecteur-ligne { display: flex; align-items: center; gap: 0.6rem; }
.mb-louange-lecteur-ligne + .mb-louange-lecteur-ligne { margin-top: 0.6rem; }
.mb-louange-lecteur-jouer {
    flex: none; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 999px; cursor: pointer; color: #fff;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    box-shadow: 0 6px 14px rgba(162, 28, 175, 0.28); -webkit-tap-highlight-color: transparent;
}
.mb-louange-lecteur-jouer svg { width: 1.2rem; height: 1.2rem; }
.mb-louange-lecteur-jouer:disabled { opacity: 0.6; cursor: progress; }
.mb-louange-lecteur-jouer:focus-visible, .mb-louange-lecteur-pas:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-louange-lecteur-barre { position: relative; flex: 1; height: 0.45rem; border-radius: 999px; background: #ead5ef; cursor: pointer; }
.mb-louange-lecteur-barre span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--mb-chants, #c026d3); }
.mb-louange-lecteur-temps { flex: none; font-size: 0.74rem; color: #64748b; font-variant-numeric: tabular-nums; }
.mb-louange-lecteur-libelle { flex: none; font-size: 0.82rem; color: #475569; }
.mb-louange-lecteur-pas {
    flex: none; width: 2rem; height: 2rem; border-radius: 0.6rem; cursor: pointer; font: inherit; font-size: 1.1rem; font-weight: 800;
    color: var(--mb-chants-fonce, #a21caf); background: #fff; border: 1.5px solid var(--mb-chants-bord);
}
.mb-louange-lecteur-pas:disabled { opacity: 0.4; cursor: default; }
.mb-louange-lecteur-cle { flex: none; min-width: 2.2rem; text-align: center; font-size: 1.15rem; font-weight: 800; color: var(--mb-chants-fonce, #a21caf); }
.mb-louange-lecteur-texte { min-width: 0; font-size: 0.74rem; line-height: 1.3; color: #64748b; }
.mb-louange-lecteur-etat { margin: 0.5rem 0 0; font-size: 0.78rem; color: #64748b; }

@media (max-width: 640px) {
    .mb-accords-bascule--barre { display: none; }
    .mb-accords-bascule--bande { display: inline-flex; }
    .mb-accords-bascule--bande button { min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.8rem; }
    .mb-pupitre-accords { margin-top: 1.3rem; font-size: calc(var(--mb-pupitre-taille) * 0.56); }
    .mb-pupitre-accords .mb-accords-section { padding-left: 0.8rem; border-left-width: 4px; margin-bottom: 1.1rem; }
    .mb-pupitre-cle { flex-wrap: wrap; }
    .mb-pupitre-cle .mb-accords-annonce { order: 4; max-width: none; font-size: 0.8rem; text-align: left; }
}

/* Sur téléphone, le pupitre marche aussi : tout se réduit, la tuile de la
   tonalité passe sous le titre, le pied se resserre. */
@media (max-width: 640px) {
    .mb-pupitre-barre { gap: 0.5rem; padding-left: calc(0.8rem + env(safe-area-inset-left, 0px)); padding-right: calc(0.8rem + env(safe-area-inset-right, 0px)); }
    .mb-pupitre-pill { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
    /* Sur deux lignes au plus, plutôt que coupés (relecture du 21.10.2026). */
    .mb-pupitre-titre strong { font-size: 0.92rem; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .mb-pupitre-titre span { font-size: 0.74rem; white-space: normal; }
    .mb-pupitre-ecran span { display: none; }
    .mb-pupitre-corps { padding: 1.1rem calc(1rem + env(safe-area-inset-right, 0px)) 1rem calc(1rem + env(safe-area-inset-left, 0px)); }
    .mb-pupitre-tete { flex-direction: column; gap: 0.9rem; }
    .mb-pupitre-cle { flex-direction: row; gap: 0.75rem; }
    .mb-pupitre-cle .mb-louange-cle-grande { width: 4.4rem; height: 4.4rem; border-radius: 1rem; font-size: 2.3rem; }
    .mb-pupitre-cle .mb-louange-cle-grande--long { font-size: 0.95rem; }
    .mb-pupitre-cle .mb-louange-cle-grande--moyen { font-size: 1.5rem; }
    .mb-pupitre-cle .mb-louange-cle-etiquette { order: 2; }
    .mb-pupitre-cle .mb-louange-cle-grande { order: 1; }
    .mb-pupitre-cle .mb-louange-cle-nom { order: 3; max-width: none; text-align: left; }
    .mb-pupitre-nom { font-size: 1.75rem; }
    .mb-pupitre-meta { font-size: 0.92rem; }
    .mb-pupitre-paroles { margin-top: 1.3rem; font-size: calc(var(--mb-pupitre-taille) * 0.62); }
    .mb-pupitre-paroles p { padding-left: 0.8rem; border-left-width: 4px; margin-bottom: 1.1rem; }
    .mb-louange-vide.mb-pupitre-vide { margin-top: 1.4rem; padding: 1.3rem 1rem; }
    .mb-pupitre-vide .mb-louange-vide-titre { font-size: 1.15rem; }
    .mb-pupitre-vide .mb-louange-vide-texte { font-size: 0.92rem; }
    .mb-pupitre-pied { gap: 0.5rem; padding-left: calc(0.6rem + env(safe-area-inset-left, 0px)); padding-right: calc(0.6rem + env(safe-area-inset-right, 0px)); padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); }
    .mb-pupitre-nav { min-height: 64px; padding: 0.6rem 0.7rem; gap: 0.4rem; border-radius: 1rem; }
    .mb-pupitre-nav > svg { width: 1.4rem; height: 1.4rem; }
    .mb-pupitre-nav small { font-size: 0.64rem; }
    .mb-pupitre-nav strong { font-size: 0.92rem; }
    .mb-pupitre-nav .mb-cle-du-jour { display: none; }
    .mb-pupitre-compte { min-width: 3.6rem; font-size: 0.74rem; }
    .mb-pupitre-points { display: none; }
    .mb-pupitre-glisser { right: calc(0.8rem + env(safe-area-inset-right, 0px)); bottom: calc(6.2rem + env(safe-area-inset-bottom, 0px)); font-size: 0.85rem; }
}

/* =====================================================================
   Conducteur de louange (la louange sur tablette, lot L4, 21.10.2026 ;
   images 3a et 3b) : la bande Chants du déroulé (« Vous conduisez la
   louange de ce culte ») et la page « Modifier l'ordre et les tonalités » :
   lignes verrouillées, poignées, pastilles de tonalité, grille, ligne
   soulevée et case « Déposer ici », encadré cadenas.
   ===================================================================== */
.mb-louange-bande {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1rem; padding: 1rem 1.1rem;
    border-radius: 1.2rem; color: #fff; background-color: var(--mb-chants-fonce, #a21caf);
    background-image: var(--mb-louange-points), linear-gradient(150deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    background-size: 26px 26px, 17px 17px, auto; background-position: 0 0, 9px 13px, 0 0; box-shadow: 0 12px 26px rgba(192, 38, 211, 0.28);
}
.mb-louange-bande-kiwi { position: absolute; width: 150px; height: 150px; top: -46px; right: -30px; pointer-events: none; }
.mb-louange-bande-ico { position: relative; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 0.9rem; background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; }
.mb-louange-bande-ico svg { width: 1.5rem; height: 1.5rem; }
.mb-louange-bande-corps { position: relative; flex: 1; min-width: 0; }
.mb-louange-bande-titre { font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.mb-louange-bande-sous { font-size: 0.84rem; line-height: 1.35; margin-top: 0.1rem; }
.mb-louange-bande-actions { position: relative; flex: none; display: flex; gap: 0.6rem; }
.mb-btn.mb-louange-btn-blanc { position: relative; flex: none; background: #fff; color: var(--mb-chants-fonce, #a21caf); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2); }
.mb-btn.mb-louange-btn-voile { position: relative; flex: none; background: rgba(255, 255, 255, 0.2); color: #fff; }
.mb-btn.mb-louange-btn-blanc:focus-visible, .mb-btn.mb-louange-btn-voile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Sur téléphone, le bouton passe sous le texte de la bande. */
@media (max-width: 560px) {
    .mb-louange-bande { flex-wrap: wrap; }
    .mb-louange-bande > .mb-btn, .mb-louange-bande-actions { flex: 1 1 100%; }
    .mb-louange-bande-actions .mb-btn { flex: 1; }
}

/* Le retour de l'enregistrement : le bandeau vert, le détail en une ligne. */
.mb-alert.mb-louange-alerte { margin: 0 0 0.9rem; padding: 0.75rem 0.9rem; font-size: 0.88rem; line-height: 1.45; align-items: flex-start; gap: 0.6rem; }
.mb-alert.mb-louange-alerte > svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 1px; }
.mb-alert.mb-louange-alerte strong { font-weight: 800; }
.mb-louange-alerte-detail { display: block; margin-top: 0.15rem; color: #15803d; font-size: 0.82rem; }

/* La page « Modifier l'ordre et les tonalités ». */
.mb-louange-refus { margin: 0 0 0.75rem; }
.mb-louange-refus:not([x-cloak]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.mb-btn.mb-louange-recharger { flex: none; background: #fff; color: #b91c1c; border: 1.5px solid currentColor; }
.mb-louange-consigne { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 0.75rem; font-size: 0.9rem; color: #475569; }
.mb-louange-consigne svg { width: 1.15rem; height: 1.15rem; color: var(--mb-chants-fonce, #a21caf); flex: none; }
.mb-card.mb-louange-liste { position: relative; overflow: visible; }
.mb-louange-er { position: relative; }
.mb-louange-er + .mb-louange-er { border-top: 1px solid #f1f5f9; }
.mb-louange-er:first-of-type { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.mb-louange-er:last-child { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.mb-louange-er-ligne { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; }
.mb-louange-er-heure { flex: none; min-width: 2.9rem; font-variant-numeric: tabular-nums; font-size: 0.82rem; font-weight: 700; color: #64748b; }
.mb-louange-er-corps { flex: 1; min-width: 0; }
.mb-louange-er-titre { font-weight: 700; font-size: 0.98rem; color: #1e293b; overflow-wrap: anywhere; }
.mb-louange-er-meta { font-size: 0.8rem; color: #64748b; margin-top: 1px; }
.mb-louange-er-duree { flex: none; font-size: 0.8rem; color: #64748b; }
.mb-louange-er--verrou { background: #fafafa; }
.mb-louange-er--verrou .mb-louange-er-titre { color: #94a3b8; font-weight: 600; font-size: 0.9rem; }
.mb-louange-er-cadenas { flex: none; color: #cbd5e1; display: inline-flex; }
.mb-louange-er-cadenas svg { width: 1.05rem; height: 1.05rem; }
.mb-louange-er--section { padding: 0.45rem 1rem; background: #f8fafc; color: #64748b; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mb-louange-er--chant { background: #fff; }
.mb-louange-er--chant .mb-louange-er-ligne { min-height: 76px; }
.mb-louange-er--chant.is-ouvert { z-index: 5; }
.mb-louange-dd {
    flex: none; width: 2.7rem; height: 2.9rem; padding: 0; border-radius: 0.75rem; cursor: grab;
    display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none;
    background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf); border: 1px solid var(--mb-chants-bord);
    -webkit-tap-highlight-color: transparent;
}
.mb-louange-dd svg { width: 1.3rem; height: 1.3rem; }
.mb-louange-dd:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-louange-dd--off { visibility: hidden; }
.mb-louange-cle-zone { position: relative; flex: none; }
.mb-louange-cle-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 3.9rem; height: 2.9rem; padding: 0 0.7rem 0 0.9rem;
    border-radius: 0.8rem; background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf); border: 2px solid var(--mb-chants-bord);
    font: inherit; font-weight: 800; font-size: 1.15rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-louange-cle-btn svg { width: 0.95rem; height: 0.95rem; flex: none; }
.mb-louange-cle-btn-valeur { max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-louange-cle-btn.is-vide { color: #86198f; border-style: dashed; }
.mb-louange-cle-btn.is-change { border-color: #e879f9; }
.mb-louange-cle-btn.is-ouvert { border-color: var(--mb-chants, #c026d3); box-shadow: 0 0 0 4px rgba(192, 38, 211, 0.15); }
.mb-louange-cle-btn:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-louange-deposer { display: none; }

/* Pendant un glissé : la place de la ligne devient « Déposer ici », sa copie
   se soulève et suit le doigt. */
.mb-louange-er.is-fantome { background: transparent; }
.mb-louange-er.is-fantome .mb-louange-er-ligne {
    margin: 0.4rem 0.6rem; padding: 0 1rem; justify-content: center; border-radius: 0.9rem;
    border: 2px dashed #e879f9; background: var(--mb-chants-douce, #fdf4ff);
}
.mb-louange-er.is-fantome .mb-louange-er-ligne > :not(.mb-louange-deposer) { display: none; }
.mb-louange-er.is-fantome .mb-louange-deposer { display: block; color: var(--mb-chants-fonce, #a21caf); font-weight: 700; font-size: 0.9rem; }
.mb-louange-er.is-fantome + .mb-louange-er { border-top: 0; }
.mb-louange-souleve {
    position: fixed; z-index: 60; margin: 0; pointer-events: none; background: #fff; border-radius: 0.95rem; border: 2px solid #e879f9;
    box-shadow: 0 22px 44px rgba(162, 28, 175, 0.3), 0 4px 10px rgba(15, 23, 42, 0.1); transform: rotate(-1.4deg) scale(1.02);
}
.mb-louange-souleve .mb-louange-dd { box-shadow: 0 0 0 8px rgba(192, 38, 211, 0.12); }

/* « Monter », « Descendre » : au toucher de la poignée, sans glisser. */
.mb-louange-menu {
    position: absolute; z-index: 30; left: 0.6rem; top: calc(100% - 0.4rem); display: flex; gap: 0.4rem; padding: 0.45rem;
    border-radius: 0.9rem; background: #fff; border: 1px solid #f3e1f6; box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

/* La grille des tonalités : bulle sous la pastille. */
.mb-louange-grille {
    position: absolute; z-index: 40; top: calc(100% + 12px); right: -0.4rem; width: 470px; max-width: calc(100vw - 2rem);
    padding: 1rem 1rem 0.9rem; border-radius: 1.1rem; background: #fff; border: 1px solid #f3e1f6; box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
    text-align: left;
}
.mb-louange-grille::before {
    content: ""; position: absolute; top: -9px; right: 1.9rem; width: 16px; height: 16px; background: #fff;
    border-left: 1px solid #f3e1f6; border-top: 1px solid #f3e1f6; transform: rotate(45deg);
}
.mb-louange-grille-tete { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.75rem; }
.mb-louange-grille-titre { min-width: 0; font-weight: 800; font-size: 0.98rem; color: #1e293b; line-height: 1.25; }
.mb-louange-grille-titre small { display: block; font-weight: 600; font-size: 0.78rem; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-louange-seg { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: #f1f5f9; }
.mb-louange-seg button { border: 0; background: transparent; padding: 0.32rem 0.85rem; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 700; color: #64748b; cursor: pointer; }
.mb-louange-seg button.is-active { background: #fff; color: var(--mb-chants-fonce, #a21caf); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.mb-louange-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.45rem; padding-top: 0.35rem; }
.mb-louange-case {
    position: relative; height: 3.5rem; padding: 0 0.15rem; border-radius: 0.75rem; border: 1.5px solid #e2e8f0; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
    font: inherit; font-weight: 800; font-size: 1.02rem; color: #1e293b; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mb-louange-case small { font-size: 0.7rem; font-weight: 600; color: #64748b; margin-top: 2px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.mb-louange-case em {
    position: absolute; top: -0.55rem; padding: 0 0.35rem; border-radius: 99px; background: #fff; border: 1px solid #f0abfc;
    font-style: normal; font-size: 0.56rem; font-weight: 800; color: var(--mb-chants-fonce, #a21caf); white-space: nowrap;
}
.mb-louange-case.is-actuelle { border-color: #f0abfc; background: var(--mb-chants-douce, #fdf4ff); }
.mb-louange-case.is-choisie { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de)); box-shadow: 0 6px 14px rgba(162, 28, 175, 0.3); }
.mb-louange-case.is-choisie small { color: #fff; }
.mb-louange-case:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-louange-garder { margin: 0.7rem 0 0; padding: 0; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--mb-chants-fonce, #a21caf); text-decoration: underline; cursor: pointer; }
.mb-louange-grille-note { margin: 0.75rem 0 0; font-size: 0.78rem; line-height: 1.45; color: #64748b; display: flex; gap: 0.4rem; align-items: flex-start; }
.mb-louange-grille-note svg { width: 1rem; height: 1rem; flex: none; color: var(--mb-chants-fonce, #a21caf); margin-top: 1px; }
.mb-louange-limite {
    display: flex; gap: 0.7rem; align-items: flex-start; margin-top: 0.9rem; padding: 0.85rem 1rem; border-radius: 1rem;
    background: #fff; border: 1px solid #e2e8f0; font-size: 0.86rem; line-height: 1.5; color: #475569;
}
.mb-louange-limite svg { width: 1.2rem; height: 1.2rem; flex: none; color: #94a3b8; margin-top: 2px; }
.mb-louange-limite strong { color: #1e293b; }
@media (max-width: 560px) {
    .mb-louange-er-ligne { gap: 0.55rem; padding: 0.6rem 0.75rem; }
    .mb-louange-dd { width: 2.4rem; }
    .mb-louange-cle-btn { min-width: 3.3rem; padding: 0 0.5rem 0 0.65rem; }
    .mb-louange-cases { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Sur téléphone, la grille se cale sur la LIGNE (toute la largeur de la
       carte) et non plus sur la pastille : accrochée à droite de la pastille,
       elle sortait de 38 px à gauche à 360 et 390 px (relecture du
       21.10.2026). La ligne ouverte passe au-dessus des suivantes. */
    .mb-louange-cle-zone { position: static; }
    .mb-louange-grille { top: calc(100% - 0.3rem); left: 0.4rem; right: 0.4rem; width: auto; max-width: none; }
    .mb-louange-grille::before { display: none; }
    /* Les lignes de chant tenaient sur trois lignes de titre : l'heure de
       passage s'efface (la page du déroulé la garde), la méta tient sur une
       ligne. */
    .mb-louange-er--chant .mb-louange-er-heure { display: none; }
    .mb-louange-er--chant .mb-louange-er-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* =====================================================================
   Remplacer ce chant (la louange sur tablette, lot L5, 21.10.2026 ; plan
   § 1.4, sans image sur la planche) : le bouton « Remplacer » de chaque
   ligne de chant, la marque « remplacé » et « Revenir à … », puis la feuille
   « Remplacer ce chant » : feuille du bas sur téléphone, panneau centré de
   600 px sur tablette, au-dessus de la page assombrie. Même langage que la
   feuille du chant (lot L2) : tuile Chants, kiwi au trait, pastilles douces.
   ⚠️ Rien ici ne dépend de .mb-zone.
   ===================================================================== */
.mb-louange-remplacer-btn {
    flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; height: 2.9rem; padding: 0 0.8rem;
    border-radius: 0.8rem; border: 1.5px solid #e2e8f0; background: #fff; color: #475569;
    font: inherit; font-size: 0.84rem; font-weight: 700; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.mb-louange-remplacer-btn svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--mb-chants-fonce, #a21caf); }
.mb-louange-remplacer-btn:hover { border-color: var(--mb-chants-bord); background: var(--mb-chants-douce, #fdf4ff); }
.mb-louange-remplacer-btn:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
/* La marque « changé » (déroulé, lot L6) et « remplacé » (page du
   conducteur, avant l'enregistrement) : une pastille au contour Chants. */
.mb-louange-change {
    display: inline-flex; align-items: center; margin-left: 0.35rem; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
    color: var(--mb-chants-fonce, #a21caf); background: #fff; border: 1px solid #f0abfc;
}
.mb-louange-revenir {
    display: inline-flex; align-items: center; min-height: 1.9rem; margin-top: 0.15rem; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--mb-chants-fonce, #a21caf); text-decoration: underline; text-underline-offset: 2px;
}
@media (max-width: 560px) {
    /* Sur téléphone, l'icône seule : la ligne garde sa place pour le titre. */
    .mb-louange-remplacer-btn { width: 2.6rem; padding: 0; }
    .mb-louange-remplacer-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* La feuille : hauteur fixe pendant la recherche (le champ ne saute pas
   quand les résultats arrivent), la liste défile seule. */
.mb-feuille.mb-remplacer {
    display: flex; flex-direction: column; max-width: 600px; height: min(88vh, 46rem); height: min(88dvh, 46rem);
    padding-top: 1.1rem; overflow: hidden;
}
/* La confirmation, plus courte : la feuille prend sa hauteur. */
.mb-feuille.mb-remplacer.is-confirmation { height: auto; max-height: 92vh; max-height: 92dvh; }
.mb-remplacer .mb-louange-f-tete { flex: none; }
.mb-remplacer .mb-louange-refus { flex: none; margin: 0.75rem 0 0; }
@media (min-width: 700px) {
    .mb-remplacer-fond { align-items: center; padding: 1.5rem; }
    .mb-feuille.mb-remplacer { border-radius: 1.4rem; }
}
.mb-remplacer-recherche { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mb-remplacer-champ {
    flex: none; position: relative; display: flex; align-items: center; gap: 0.5rem; height: 3rem; margin: 1rem 0 0.7rem; padding: 0 0.5rem 0 0.9rem;
    border-radius: 0.9rem; border: 1.5px solid #e2e8f0; background: #fff;
}
.mb-remplacer-champ:focus-within { border-color: var(--mb-chants, #c026d3); box-shadow: 0 0 0 4px rgba(192, 38, 211, 0.12); }
.mb-remplacer-champ > svg { width: 1.2rem; height: 1.2rem; flex: none; color: #94a3b8; }
.mb-remplacer-champ input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 1rem; color: #1e293b; -webkit-appearance: none; appearance: none;
}
.mb-remplacer-champ input::-webkit-search-cancel-button { display: none; }
.mb-remplacer-vider {
    flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; cursor: pointer;
    background: #f1f5f9; color: #475569; display: flex; align-items: center; justify-content: center;
}
.mb-remplacer-vider svg { width: 1rem; height: 1rem; }
.mb-remplacer-onglets { flex: none; display: flex; gap: 0.45rem; margin-bottom: 0.6rem; }
.mb-remplacer-onglets button {
    min-height: 2.3rem; padding: 0.35rem 0.95rem; border-radius: 999px; border: 1.5px solid #e2e8f0; background: #fff; cursor: pointer;
    font: inherit; font-size: 0.84rem; font-weight: 700; color: #475569;
}
.mb-remplacer-onglets button.is-active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--mb-chants-fonce, #a21caf), var(--mb-chants-fin, #c800de));
    box-shadow: 0 4px 12px rgba(162, 28, 175, 0.25);
}
.mb-remplacer-onglets button:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 2px; }
.mb-remplacer-liste {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -0.3rem; padding: 0 0.3rem 0.4rem;
}
/* Une ligne par chant : cible tactile de 64 px au moins. */
.mb-remplacer-resultat {
    width: 100%; display: flex; align-items: center; gap: 0.75rem; min-height: 64px; padding: 0.6rem 0.75rem; margin: 0 0 0.4rem;
    border-radius: 0.9rem; border: 1px solid #f1e4f4; background: #fff; text-align: left; cursor: pointer;
    font: inherit; color: #1e293b; -webkit-tap-highlight-color: transparent;
}
.mb-remplacer-resultat:hover { border-color: var(--mb-chants-bord); background: var(--mb-chants-douce, #fdf4ff); }
.mb-remplacer-resultat:focus-visible { outline: 2px solid var(--mb-chants, #c026d3); outline-offset: 1px; }
.mb-remplacer-resultat.is-deja { cursor: default; opacity: 0.55; background: #f8fafc; }
.mb-remplacer-resultat-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.mb-remplacer-resultat-corps strong { font-size: 0.98rem; font-weight: 800; overflow-wrap: anywhere; }
.mb-remplacer-resultat-corps small { font-size: 0.8rem; color: #64748b; overflow-wrap: anywhere; }
.mb-remplacer-resultat-corps small.mb-remplacer-quand { margin-top: 0.1rem; font-size: 0.74rem; color: #64748b; }
.mb-remplacer-resultat-fin { flex: none; display: flex; align-items: center; gap: 0.4rem; }
.mb-remplacer-resultat-fin .mb-cle-du-jour { margin-left: 0; }
.mb-remplacer-doc {
    flex: none; width: 1.9rem; height: 1.9rem; border-radius: 0.6rem; display: inline-flex; align-items: center; justify-content: center;
    background: var(--mb-chants-douce, #fdf4ff); color: var(--mb-chants-fonce, #a21caf);
}
.mb-remplacer-doc svg { width: 1.1rem; height: 1.1rem; }
.mb-remplacer-vide, .mb-remplacer-chargement { margin: 1rem 0.5rem; text-align: center; font-size: 0.88rem; line-height: 1.5; color: #64748b; }
.mb-btn.mb-remplacer-plus { width: 100%; margin-top: 0.2rem; }

/* L'étape 2 : la confirmation. */
.mb-remplacer-confirmer { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 1rem; }
.mb-remplacer-question { margin: 0 0 0.8rem; font-size: 1.02rem; font-weight: 800; line-height: 1.35; color: #1e293b; overflow-wrap: anywhere; }
.mb-remplacer-carte {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border-radius: 1rem;
    background: var(--mb-chants-douce, #fdf4ff); border: 1px solid var(--mb-chants-bord);
}
.mb-remplacer-cle { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.9rem 0 0.4rem; }
.mb-remplacer-grille { margin: 0.3rem 0 0.4rem; padding: 0.9rem; border-radius: 1rem; border: 1px solid #f3e1f6; background: #fff; }
.mb-remplacer-note { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.7rem 0 0; font-size: 0.86rem; line-height: 1.45; color: #475569; }
.mb-remplacer-note svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 1px; color: var(--mb-chants-fonce, #a21caf); }
.mb-remplacer-confirmer .mb-louange-f-actions { margin-top: 1.1rem; }
@media (max-width: 560px) {
    .mb-feuille.mb-remplacer { height: 90vh; height: 90dvh; }
    .mb-feuille.mb-remplacer.is-confirmation { height: auto; }
}

/* =====================================================================
   Après l'enregistrement du conducteur (la louange sur tablette, lot L6,
   21.10.2026 ; images 4a et 4b) : le bandeau Chants de l'équipe (« Emma a
   modifié la louange à 10h42 » et le détail), l'ancienne tonalité barrée
   et « remplace … » sur les lignes touchées, l'avis du pupitre déjà ouvert
   et le point clair des puces changées. Jusqu'à la fin du jour du culte.
   ===================================================================== */
.mb-alert.mb-louange-alerte--chant { display: flex; background: var(--mb-chants-douce, #fdf4ff); border-color: var(--mb-chants-bord); color: #701a75; }
.mb-alert.mb-louange-alerte--chant > svg { color: var(--mb-chants-fonce, #a21caf); }
.mb-louange-alerte--chant .mb-louange-alerte-detail { color: #86198f; }
.mb-louange-ancienne { margin-left: 0.3rem; font-size: 0.78rem; font-weight: 700; color: #64748b; text-decoration: line-through; vertical-align: 1px; }
.mb-louange-remplace { font-size: 0.8rem; font-weight: 600; color: #86198f; }
.mb-pupitre-annonce {
    flex: none; display: flex; align-items: center; gap: 0.65rem;
    margin: 1rem calc(1.3rem + env(safe-area-inset-right, 0px)) 0 calc(1.3rem + env(safe-area-inset-left, 0px));
    padding: 0.75rem 1rem; border-radius: 1rem; background: var(--mb-chants-douce, #fdf4ff); border: 1px solid var(--mb-chants-bord);
    color: #701a75; font-size: 1rem; line-height: 1.4;
}
.mb-pupitre-annonce > svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--mb-chants-fonce, #a21caf); }
.mb-pupitre-annonce-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mb-pupitre-annonce-fermer {
    flex: none; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, 0.7); color: #86198f; display: flex; align-items: center; justify-content: center;
}
.mb-pupitre-annonce-fermer svg { width: 1rem; height: 1rem; }
.mb-puce .mb-louange-point-change { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 99px; background: #f0abfc; box-shadow: 0 0 0 2px #fff; }
.mb-puce.is-active .mb-louange-point-change { background: #fff; box-shadow: none; }
.mb-pupitre-cle .mb-louange-change { margin: 0.1rem 0 0; font-size: 0.82rem; padding: 2px 10px; }
.mb-pupitre-remplace { margin-top: 0.35rem; font-size: 1rem; font-weight: 600; color: #86198f; }
@media (max-width: 640px) {
    .mb-pupitre-annonce { margin: 0.7rem calc(0.8rem + env(safe-area-inset-right, 0px)) 0 calc(0.8rem + env(safe-area-inset-left, 0px)); font-size: 0.88rem; padding: 0.6rem 0.8rem; }
    .mb-pupitre-cle .mb-louange-change { order: 4; }
}