/* Front AM Ministries — la nouvelle direction artistique.

   Maquettes « Front2 » : Fondations, Menu, Mon compte, Création de compte,
   non connecté. Chargé par les bases du front — membre connecté et visiteur —
   jamais par le back-office, qui reste en « Registre ».

   Aucune couleur ici : tout vient des jetons --fm-* de jetons.css. Deux
   portées :

   - la **marque** (barres, menus, logo, filet dégradé) lit --fm-* partout,
     y compris sur une page en ambiance d'événement : elle appartient à
     l'association, jamais à un événement ;
   - le **contenu** d'une page en nouvelle DA (`body.fm`) garde les règles
     partagées de l'espace famille — jetons.css fait pointer --ef-* sur
     --fm-* — et prend ici ce que la direction change : Montserrat pour les
     titres et les boutons, rayons 10 / 6 / 12, pastilles de catégorie.

   Usages réservés : le dégradé n'a qu'un usage, le filet de 3 px sous la barre
   haute ; le magenta est au don et au badge des non-lus ; l'or à ce que
   l'église met à part. Pas d'ombre portée, pas de relief. */

/* --- Utilitaires ------------------------------------------------------------ */

/* Le sprite des icônes : présent dans la page, jamais affiché. `hidden` ne
   masque pas un élément SVG — la règle du navigateur ne vise que le HTML. */
svg[hidden] { display: none; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- La marque ------------------------------------------------------------- */

/* Maquette « Front2 — Logo », option A : le symbole seul, grand, et le nom
   écrit à côté en vrai texte. Le logo complet réduit dans une vignette
   rendait son nom illisible ; il ne s'affiche plus qu'en grand format, sur
   les écrans d'entrée (.fm-logo-grand), et jamais sous 120 px.

   La hauteur de la barre ne dépend pas du thème : la marque tient 70 px au
   bureau, que le symbole y soit nu (clair) ou dans son carré (foncé). */
.fm-marque {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  min-height: 70px; text-decoration: none; color: var(--fm-texte);
}
body.ef a.fm-marque, body.ef a.fm-marque:hover { color: var(--fm-texte); }
/* 44 px au bureau, 36 au téléphone — jamais moins de 32. Le cadre vient des
   jetons : nul en clair, un carré blanc arrondi en foncé. */
.fm-logo {
  --fm-symbole: 44px;
  width: calc(var(--fm-symbole) + 2 * var(--fm-logo-cadre));
  height: calc(var(--fm-symbole) + 2 * var(--fm-logo-cadre));
  flex: none; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fm-logo-fond);
}
.fm-logo img { width: var(--fm-symbole); height: var(--fm-symbole);
  object-fit: contain; display: block; }
.fm-nom-marque {
  font-family: var(--fm-titre); font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700;
  letter-spacing: .08em; white-space: nowrap; line-height: 1.1;
}
/* Le grand format : connexion et accueil public. */
.fm-logo-grand { display: block; width: 160px; height: 160px;
  object-fit: contain; flex: none; }
.ef-entete .fm-logo-grand { margin-bottom: var(--e-3); }

.fm-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%;
  border: 1px solid var(--fm-bordure);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fm-action-pale); color: var(--fm-action-txt);
  font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700;
}
.fm-avatar.grand { width: 42px; height: 42px; font-size: calc(14px * var(--fm-echelle, 1)); }

/* --- La barre du membre ---------------------------------------------------- */

.mb .mb-haut {
  position: relative; z-index: 50;
  display: flex; align-items: stretch; gap: 26px; padding: 0 32px;
  background: var(--fm-surface); color: var(--fm-texte);
  border-bottom: 3px solid transparent; border-image: var(--fm-degrade) 1;
}
.mb-onglets { display: flex; align-items: stretch; gap: 2px; }
.mb-onglet {
  position: relative; display: flex; align-items: center; gap: 7px;
  padding: 0 13px; text-decoration: none; white-space: nowrap;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux);
  border-bottom: 2px solid transparent;
}
body.ef a.mb-onglet, body.ef a.mb-onglet:hover { color: var(--fm-texte-doux); }
body.ef a.mb-onglet:hover { color: var(--fm-texte); }
body.ef a.mb-onglet.actif { color: var(--fm-texte); }
.mb-onglet.actif { font-weight: 600; border-bottom-color: var(--fm-action-txt); }
.mb-onglet .fm-icone { width: 18px; height: 18px; flex: none;
  color: var(--fm-texte-doux); }
.mb-onglet.actif .fm-icone { color: var(--fm-action-txt); }
.mb-onglet[aria-expanded="true"] { background: var(--fm-surface-2); }
.mb-onglet-court { display: none; }
.fm-icone { display: block; }
.fm-chevron { width: 11px; height: 11px; flex: none; color: var(--fm-texte-doux); }

/* Messages : le nombre de non-lus, en magenta. */
.fm-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--fm-magenta-plein); color: var(--fm-sur-plein);
  font-family: var(--chiffres); font-size: calc(9px * var(--fm-echelle, 1)); font-weight: 600;
  line-height: 1;
}
/* Live : « direct », en brique, seulement pendant un direct. */
.fm-direct {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 5px;
  border-radius: var(--r-s); border: 1px solid var(--statut-bloquant-bord);
  background: var(--statut-attention-fond); color: var(--statut-bloquant);
  font-family: var(--chiffres); font-size: calc(9px * var(--fm-echelle, 1)); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
}
.fm-direct::before { content: ""; width: 5px; height: 5px; flex: none;
  border-radius: 50%; background: currentColor; }

.mb-outils { margin-left: auto; display: flex; align-items: center;
  gap: 12px; flex-shrink: 0; }
.fm-photo {
  position: relative; display: flex; align-items: center; gap: 8px;
  min-height: 44px; text-decoration: none;
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte);
}
body.ef a.fm-photo, body.ef a.fm-photo:hover { color: var(--fm-texte); }
.fm-photo.actif .fm-avatar,
.fm-photo[aria-expanded="true"] .fm-avatar {
  outline: 2px solid var(--fm-action-txt); outline-offset: 2px;
}
/* L'adresse non confirmée se signale sur la photo : sans elle, aucune
   notification n'arrive. */
.mb-signal {
  position: absolute; top: 2px; left: 20px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--statut-bloquant-plein, var(--statut-bloquant));
  color: #fff; font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--fm-surface);
}

/* --- Les menus : Plus et la photo ----------------------------------------- */

.fm-menu {
  position: absolute; top: calc(100% + 3px); z-index: 60; width: 320px;
  padding: 5px 0; background: var(--fm-surface); color: var(--fm-texte);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
}
.fm-menu[hidden] { display: none; }
.fm-menu-plus { left: 0; }
.fm-menu-compte { right: 32px; width: 280px; }
.fm-poignee { display: none; }
.fm-menu-groupe { list-style: none; margin: 0; padding: 2px 0; }
.fm-menu-groupe + .fm-menu-groupe { border-top: 1px solid var(--fm-bordure-fine); }
/* « Informations légales » : une seule ligne, sans intitulé (8 octobre 2026). */
.fm-menu-legal ul { list-style: none; margin: 0; padding: 0; }
.fm-menu-ligne {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 44px; padding: 10px 14px; text-align: left;
  text-decoration: none; color: var(--fm-texte);
  background: none; border: 0; font: inherit; cursor: pointer;
}
body.ef a.fm-menu-ligne, body.ef a.fm-menu-ligne:hover { color: var(--fm-texte); }
.fm-menu-ligne:hover { background: var(--fm-surface-2); }
.fm-menu-ligne[aria-current="page"] { background: var(--fm-action-pale); }
.fm-menu-ligne .fm-icone { width: 19px; height: 19px; flex: none;
  color: var(--fm-action-txt); }
.fm-menu-ligne .corps { flex: 1; min-width: 0; display: flex;
  flex-direction: column; }
.fm-menu-ligne .titre { font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 500; }
.fm-menu-ligne .resume { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4;
  color: var(--fm-texte-doux); }
/* « Se déconnecter » : la seule action qui fait sortir, en brique. */
.fm-menu-ligne.fm-sortie, .fm-menu-ligne.fm-sortie .fm-icone {
  color: var(--statut-bloquant); }
.fm-menu-ligne.fm-sortie .titre { font-weight: 600; }
.fm-menu form { margin: 0; }
.fm-menu-titulaire {
  display: flex; align-items: center; gap: 11px; padding: 10px 14px 12px;
  border-bottom: 1px solid var(--fm-bordure-fine);
}
.fm-menu-titulaire .corps { display: flex; flex-direction: column; min-width: 0; }
.fm-titulaire-nom { font-family: var(--fm-titre); font-size: calc(15px * var(--fm-echelle, 1));
  font-weight: 700; overflow-wrap: anywhere; }
.fm-titulaire-detail { font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); overflow-wrap: anywhere; }
/* « 1 à faire » : ce qui attend un geste, dans le code des statuts. */
.fm-a-faire {
  flex: none; padding: 2px 7px; border-radius: var(--r-s); white-space: nowrap;
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600; color: var(--statut-bloquant);
  background: var(--statut-attention-fond);
  border: 1px solid var(--statut-bloquant-bord);
}
.fm-appoint { flex: none; font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
/* Contact sous Plus, avec une réponse non lue (FO-DSC-04A) : son nom en gras
   et la pastille magenta, à la taille d'une ligne de menu. */
.fm-menu-ligne.non-lue .titre { font-weight: 700; }
.fm-menu-ligne .fm-badge { flex: none; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; font-size: calc(11px * var(--fm-echelle, 1)); }
.fm-voile { display: none; }

/* --- Téléphone : la barre en bas, Plus en feuille ------------------------- */

@media (max-width: 39.99rem) {
  .mb .mb-haut {
    position: fixed; left: 0; right: 0; bottom: 0;
    padding: 0 0 env(safe-area-inset-bottom); gap: 0;
    border-bottom: 0; border-image: none;
    border-top: 1px solid var(--fm-bordure-fine);
  }
  .mb-haut .fm-marque, .mb-outils { display: none; }
  .mb-onglets { flex: 1; }
  .mb-onglet {
    flex: 1; flex-direction: column; justify-content: center; gap: 4px;
    min-height: var(--mb-barre); padding: 9px 2px 11px; margin-top: -1px;
    /* La barre a sa hauteur (--mb-barre) : ses libellés grandissent avec le
       texte jusqu'à 110 %, pas au-delà — plus haut, ils la débordaient. */
    font-size: calc(10px * min(var(--fm-echelle, 1), 1.1)); text-align: center;
    border-bottom: 0; border-top: 2px solid transparent;
  }
  .mb-onglet .fm-icone { width: 20px; height: 20px; }
  .mb-onglet.actif { border-top-color: var(--fm-action-txt); }
  .mb-onglet[aria-expanded="true"] { background: none; }
  .mb-onglet .fm-chevron { display: none; }
  .mb-onglet-nom { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; max-width: 100%; }
  .mb-onglet .fm-badge { position: absolute; top: 5px; left: calc(50% + 5px); }
  /* Au pouce, « direct » devient un point sur l'icône. */
  .mb-onglet .fm-direct {
    position: absolute; top: 6px; left: calc(50% + 6px);
    width: 9px; height: 9px; padding: 0; border-radius: 50%;
    background: var(--statut-bloquant); border: 2px solid var(--fm-surface);
  }
  .mb-onglet .fm-direct::before { display: none; }
  .mb-onglet .fm-direct-texte {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }

  .fm-menu-plus {
    position: fixed; left: 0; right: 0; top: auto;
    bottom: calc(var(--mb-barre) + env(safe-area-inset-bottom));
    width: auto; max-height: calc(100vh - var(--mb-barre) - 48px);
    overflow-y: auto; padding: 0 2px 6px;
    border-radius: 14px 14px 0 0; border-bottom: 0;
  }
  .fm-poignee { display: flex; justify-content: center; padding: 9px 0 4px; }
  .fm-poignee::before { content: ""; width: 38px; height: 4px;
    border-radius: 2px; background: var(--fm-bordure); }
  .fm-menu-ligne { padding: 11px 14px; }
  .fm-menu-compte { display: none; }
  .fm-voile:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: var(--fm-voile);
  }
}
@media (min-width: 40rem) {
  .fm-seulement-mobile { display: none; }
}

/* --- La barre haute reste en place (9 octobre 2026) ----------------------
   Comme la barre du bas, elle ne part pas avec la page. Au téléphone, c'est
   la première barre de l'écran : le bandeau d'écran — retour, titre, photo —
   ou, pour le visiteur, sa tête (le logo, « Créer un compte »), sous laquelle
   le titre défile. Au-delà, la barre de navigation seule ; le titre de la
   page, lui, défile. `sticky` et non `fixed` : il n'y a pas de place à lui
   réserver, et rien ne saute quand le clavier s'ouvre. Le bandeau de
   recette, au-dessus, défile : collé, il prendrait la place pour rien. Sous
   le voile de Plus (45) et les menus. */
@media (max-width: 39.99rem) {
  body.fm .mb-ecran, body.fm .ef-entete, .fm-tete-mobile {
    position: sticky; top: 0; z-index: 30; }
  body.fm .fm-tete-mobile ~ .mb-ecran, body.fm .fm-tete-mobile ~ .ef-entete {
    position: static; }
  /* Collée, la barre enferme ce qu'elle porte sous son propre rang : une
     feuille qu'elle ouvre (la version, les réglages de la Bible) passerait
     sous la barre du bas. Tant qu'elle est ouverte, la barre passe devant. */
  body.fm .mb-ecran:has(details[open]) { z-index: 62; }
}
@media (min-width: 40rem) {
  .mb .mb-haut { position: sticky; top: 0; }
  .fm-tete-parcours { position: sticky; top: 0; z-index: 30; }
}
/* Une ancre — un verset, « Aller au contenu » — s'arrête sous la barre, et
   le lien d'évitement passe devant elle. */
html { scroll-padding-top: calc(var(--mb-haut, 0px) + 12px); }
body.fm .lien-evitement:focus { z-index: 70; }
/* Au téléphone, le symbole passe à 36 px et l'en-tête à 56 px, carré compris. */
@media (max-width: 39.99rem) {
  .fm-logo { --fm-symbole: 36px; }
  .fm-nom-marque { font-size: calc(13px * var(--fm-echelle, 1)); }
  .fm-marque { min-height: 44px; }
}

/* --- Tablette : barre haute, sans icônes, « Don » ------------------------- */

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .mb .mb-haut { gap: 14px; padding: 0 20px; }
  .fm-nom-marque { font-size: calc(13px * var(--fm-echelle, 1)); }
  .mb-onglet { padding: 0 10px; font-size: calc(13px * var(--fm-echelle, 1)); min-height: 44px; }
  .mb-onglet .fm-icone { display: none; }
  .mb-onglet-nom { display: none; }
  .mb-onglet-court { display: inline; }
  .fm-photo-prenom { display: none; }
  .fm-menu-compte { right: 20px; }
}
/* Les entrées du visiteur sont déjà courtes : elles gardent leur libellé. */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .fm-barre-visiteur .mb-onglet-nom { display: inline; }
}
/* Jusqu'à 760 px, cinq entrées, deux signaux et la photo ne laissent pas la
   place au nom : le symbole suffit. */
@media (min-width: 40rem) and (max-width: 47.99rem) {
  .fm-nom-marque { display: none; }
}

/* --- Le bandeau d'écran : au téléphone, la seule barre haute -------------- */

.fm-photo-mobile { display: none; }
@media (max-width: 39.99rem) {
  .mb-ecran { border-bottom: 3px solid transparent;
    border-image: var(--fm-degrade) 1; }
  .fm-photo-mobile { display: flex; margin-left: auto; flex: none;
    min-width: 44px; min-height: 44px; align-items: center;
    justify-content: flex-end; text-decoration: none; }
}

/* Le livre ouvert de la barre haute (maquette « Front2 - Menu », 10 octobre
   2026) : un raccourci vers la Bible, à gauche de la photo. Une cible de
   44 px, l'icône à 22, sans libellé ni pastille — pas un sixième onglet. */
.fm-raccourci-bible { display: flex; align-items: center; justify-content: center;
  flex: none; width: 44px; height: 44px; border-radius: var(--fm-r-carte);
  text-decoration: none; }
body.ef a.fm-raccourci-bible, body.ef a.fm-raccourci-bible:hover { color: var(--fm-action-txt); }
.fm-raccourci-bible .fm-icone { width: 22px; height: 22px; }
.fm-raccourci-bible:hover, .fm-raccourci-bible.actif { background: var(--fm-action-pale); }
/* Au téléphone, dans le bandeau d'écran ou la tête du visiteur : il pousse
   la photo (ou « Créer un compte ») à droite et s'y colle. */
.mb-ecran .fm-raccourci-bible { display: none; }
@media (max-width: 39.99rem) {
  .mb-ecran .fm-raccourci-bible { display: flex; margin-left: auto; }
  .mb-ecran .fm-raccourci-bible + .fm-photo-mobile { margin-left: 0; }
  .fm-tete-mobile .fm-raccourci-bible { margin-left: auto; margin-right: -4px; }
}
body.fm .mb-ecran h1 { font-family: var(--fm-titre); font-weight: 700;
  letter-spacing: -.01em; }
@media (max-width: 39.99rem) { body.fm .mb-ecran h1 { font-size: calc(17px * var(--fm-echelle, 1)); } }
@media (min-width: 40rem) { body.fm .mb-ecran h1 { font-size: calc(22px * var(--fm-echelle, 1)); } }
@media (min-width: 64rem) { body.fm .mb-ecran h1 { font-size: calc(28px * var(--fm-echelle, 1)); } }

/* L'en-tête de l'accueil au téléphone : le logo, la photo, le filet. */
.fm-ecran-marque { display: none; }
@media (max-width: 39.99rem) {
  .fm-ecran-marque { display: block; }
  .fm-ecran-marque .dedans { padding-top: 6px; padding-bottom: 6px; }
}

/* --- Contenu en nouvelle DA ------------------------------------------------ */

/* Montserrat : titres, surtitres en capitales, boutons — jamais le texte
   courant, qui reste en IBM Plex Sans. */
body.fm h1, body.fm h2, body.fm h3 { font-family: var(--fm-titre); }
body.fm .mb-bonjour h2 { font-size: calc(22px * var(--fm-echelle, 1)); font-weight: 700; }
@media (min-width: 64rem) { body.fm .mb-bonjour h2 { font-size: calc(28px * var(--fm-echelle, 1)); } }

/* Boutons : Montserrat 700, rayon 6. Violet pour l'action principale. */
body.fm .ef-btn, body.fm .mb-bouton, body.fm .mb-bouton-creux,
body.fm .sp-btn, body.fm .lien-bouton.fm-bouton {
  font-family: var(--fm-titre); font-weight: 700;
  border-radius: var(--fm-r-bouton);
}
body.fm .ef-btn { font-size: calc(14px * var(--fm-echelle, 1)); }
body.fm .ef-btn.secondaire, body.fm .mb-bouton-creux {
  border-width: 1.5px; border-color: var(--fm-action-txt);
}
body.fm .ef-btn.secondaire.bloquant, body.fm .mb-bouton-creux.alerte {
  border-color: var(--statut-bloquant); }
body.fm .ef-btn.danger { border-color: var(--statut-bloquant); }
/* Le don : magenta, et le seul magenta de l'écran. Il garde #C2185B en
   foncé — le magenta éclairci ne porte pas de blanc. */
body.fm .fm-don, body.fm a.fm-don, body.fm a.fm-don:hover {
  background: var(--fm-magenta-plein); color: var(--fm-sur-plein);
  border-color: var(--fm-magenta-plein);
}

/* Cartes : rayon 10. Pas d'ombre, pas de relief. */
body.fm .mb-tuile, body.fm .ef-carte,
body.fm .sp-carte, body.fm .ef-liste, body.fm .ef-tableau, body.fm .ef-recu,
body.fm .mb-maitre-detail, body.fm .ef-fiche, body.fm .ef-echeancier,
body.fm .ef-confirmation, body.fm .mb-coquille, body.fm .mb-direct,
body.fm .mb-lecteur, body.fm .sp-inscription {
  border-radius: var(--fm-r-carte);
}
body.fm .mb-tuile-tete h3, body.fm .sp-corps h2,
body.fm .ef-carte .nom {
  font-family: var(--fm-titre); font-weight: 700;
}
body.fm .sp-corps h2 { font-size: calc(18px * var(--fm-echelle, 1));
  line-height: 1.25; }

/* Surtitres en capitales : Montserrat, espacés. Pas `.mb-etiquette` : elle
   porte des dates, et un chiffre reste en IBM Plex Mono partout. */
body.fm .mb-tuile-tete .etiquette, body.fm .ef-section {
  font-family: var(--fm-titre); font-weight: 700; letter-spacing: .14em;
  font-size: calc(11px * var(--fm-echelle, 1));
}

/* Filtres en pastilles : l'active à l'encre, renversée en foncé. */
body.fm .mb-filtre, body.fm .sp-filtre { border-radius: var(--fm-r-pastille); }
body.fm .mb-filtre.actif, body.fm .sp-filtre.actif {
  background: var(--fm-texte); border-color: var(--fm-texte);
  color: var(--fm-fond);
}
body.fm a.mb-filtre.actif, body.ef.fm a.sp-filtre.actif { color: var(--fm-fond); }

/* Pastilles de catégorie d'un message : elles classent, elles ne disent rien
   d'un état. Rayon 12 — les courbes de la colombe. */
.fm-categorie {
  display: inline-flex; align-items: center; padding: 3px 8px;
  border-radius: var(--fm-r-pastille); border: 1px solid var(--fm-bordure);
  background: var(--fm-surface-2); color: var(--fm-texte-doux);
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600; white-space: nowrap;
}
.fm-categorie.violet { color: var(--fm-cat-violet);
  background: var(--fm-cat-violet-fond); border-color: var(--fm-cat-violet-bord); }
.fm-categorie.magenta { color: var(--fm-cat-magenta);
  background: var(--fm-cat-magenta-fond); border-color: var(--fm-cat-magenta-bord); }
.fm-categorie.lagon { color: var(--fm-cat-lagon);
  background: var(--fm-cat-lagon-fond); border-color: var(--fm-cat-lagon-bord); }
.fm-categorie.or { color: var(--fm-cat-or);
  background: var(--fm-cat-or-fond); border-color: var(--fm-cat-or-bord); }

/* L'or : ce que l'église met à part — l'épinglé, un verset. Un filet or, un
   surtitre en or profond. */
body.fm .fm-mis-a-part {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--fm-titre); font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fm-or-txt);
}
body.fm .fm-mis-a-part::before { content: ""; width: 3px; height: 14px;
  border-radius: 2px; background: var(--fm-or-deco); }

/* Le lecteur du live et la carte « Prochain live » : un fond nuit, du blanc
   dessus, dans les deux thèmes. */
body.fm .mb-direct, body.fm .mb-lecteur { background: var(--fm-nuit); }
body.fm .mb-direct h3, body.fm .mb-lecteur-pied h3 {
  font-family: var(--fm-titre); font-weight: 700; }
body.fm .mb-lecteur-image {
  background: repeating-linear-gradient(135deg,
    var(--fm-nuit-motif), var(--fm-nuit-motif) 8px,
    var(--fm-nuit) 8px, var(--fm-nuit) 16px);
}
body.fm .mb-direct .mb-bouton, body.fm .mb-direct a.mb-bouton,
body.fm .mb-lecteur-pied a.mb-rejoindre {
  font-family: var(--fm-titre); }

/* Liens et accents de lecture : le violet du texte. */
body.fm .mb-lien, body.fm .mb-tuile-tete .lien { font-weight: 600; }

/* --- Notifications › Apparence --------------------------------------------- */

.fm-themes { border: 0; margin: 0 0 var(--e-4); padding: 0;
  display: flex; flex-direction: column; gap: var(--e-2); }
.fm-theme {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  background: var(--fm-surface); color: var(--fm-texte);
}
.fm-theme:has(input:checked) { border: 1.5px solid var(--fm-action-txt);
  padding: 9.5px 11.5px; background: var(--fm-action-pale); }
.fm-theme:has(input:focus-visible) { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.fm-theme input { margin: 0; accent-color: var(--fm-action); }
.fm-theme .corps { display: flex; flex-direction: column; min-width: 0; }
.fm-theme .titre { font-weight: 600; }
.fm-theme .resume { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-theme-apercu {
  width: 36px; height: 36px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--fm-bordure);
  font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 700;
}
.fm-theme-apercu.clair { background: var(--fm-apercu-clair-fond);
  color: var(--fm-apercu-clair-texte); }
.fm-theme-apercu.fonce { background: var(--fm-apercu-fonce-fond);
  color: var(--fm-apercu-fonce-texte); }
.fm-theme-apercu.auto { color: transparent;
  background: linear-gradient(135deg, var(--fm-apercu-clair-fond) 50%,
    var(--fm-apercu-fonce-fond) 50%); }

/* --- Messages (maquettes « Front2 — Messages », MS1, MS2, MS5) -------------- */

/* « 2 non lus », à côté du titre de l'écran. */
.ms-non-lus { flex: none; font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* Le fil : des cartes au téléphone, des lignes dans la colonne du bureau. */
.ms-fil { display: flex; flex-direction: column; gap: var(--e-3); }
.ms-carte {
  position: relative; display: flex; flex-direction: column;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; overflow: hidden; text-decoration: none;
}
body.ef a.ms-carte, body.ef a.ms-carte:hover { color: var(--fm-texte); }
.ms-carte:hover, .ms-carte.epinglee { border-color: var(--fm-action-bord); }
/* Non lu : un point et un filet violets, le titre en gras — trois signaux
   qui ne se contredisent pas, jamais la couleur seule. */
.ms-carte.non-lu::before, .ms-carte.retenue::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--fm-action);
}
/* Important : l'encadré de brique. C'est la couleur des statuts — il n'y a
   pas d'autre couleur d'alerte —, et aucune couleur de texte ne la reprend. */
.ms-carte.important, .ms-carte.important:hover {
  border: 2px solid var(--statut-bloquant); }
.ms-carte-image { display: block; width: 100%; aspect-ratio: 12 / 5;
  object-fit: cover; background: var(--fm-surface-2); }
.ms-carte-corps { display: flex; flex-direction: column; gap: 7px;
  padding: 13px 14px; min-width: 0; }
.ms-carte-tete { display: flex; align-items: center; flex-wrap: wrap;
  gap: 7px; }
.ms-quand { margin-left: auto; font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux);
  white-space: nowrap; }
.ms-carte-titre { font-family: var(--fm-titre); font-size: calc(16px * var(--fm-echelle, 1));
  font-weight: 600; line-height: 1.3; color: var(--fm-texte-doux); }
.ms-carte.non-lu .ms-carte-titre { font-weight: 700; color: var(--fm-texte); }
.ms-point { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fm-action); margin-right: 7px; vertical-align: 2px; }
.ms-extrait { font-size: calc(14px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte-doux);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.ms-carte-pied { display: flex; align-items: center; gap: 12px;
  padding-top: 2px; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ms-reaction-resume { display: inline-flex; align-items: center; gap: 4px; }
.ms-reaction-resume .chiffre { font-size: calc(12px * var(--fm-echelle, 1)); }
/* Épinglé, archivé : des repères, en petites capitales violettes. */
.ms-epingle, .ms-archive {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fm-action-txt);
}
.ms-archive { margin-left: auto; }
.ms-epingle .fm-icone, .ms-archive .fm-icone { width: 13px; height: 13px; }
/* Retiré (décision du 18 octobre 2026) : un fait, pas une alerte — rien
   n'est à traiter. Le texte doux, sans couleur de statut. */
.ms-retire-carte { font-family: var(--chiffres);
  font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fm-texte-doux); }
.ms-retire { margin: 0 0 var(--e-3); padding: 10px 12px;
  font-size: var(--t-secondaire); color: var(--fm-texte);
  background: var(--fm-surface-2); border: 1px solid var(--fm-bordure-fine);
  border-radius: var(--r-m); }
.ms-important {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: 20px; border: 1px solid var(--statut-bloquant-bord);
  background: var(--statut-bloquant-fond); color: var(--statut-bloquant);
  font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.ms-important .fm-icone { width: 12px; height: 12px; }
/* La catégorie d'un message — Information, Rappel, Programme. Les teintes
   des pastilles de catégorie (--fm-cat-*), qui ont leur version foncée. */
.ms-categorie {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px;
  border-radius: 20px; border: 1px solid var(--fm-bordure);
  background: var(--fm-bordure-fine); color: var(--fm-texte);
  font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ms-categorie .fm-icone { width: 12px; height: 12px; }
.ms-categorie.information { color: var(--fm-cat-violet);
  background: var(--fm-cat-violet-fond); border-color: var(--fm-cat-violet-bord); }
.ms-categorie.rappel { color: var(--fm-cat-lagon);
  background: var(--fm-cat-lagon-fond); border-color: var(--fm-cat-lagon-bord); }
.ms-vide { padding: var(--e-5); border: 1px dashed var(--fm-bordure);
  border-radius: var(--fm-r-carte); background: var(--fm-surface); }
.ms-vide p { margin: 0 0 var(--e-1); }

/* Au-delà de 640 px : la liste à gauche, en lignes ; la lecture à droite,
   bornée à 700 px (MS5). */
@media (min-width: 40rem) {
  .ms-maitre-detail .ms-fil { gap: 0; border-right: 1px solid var(--fm-bordure); }
  .ms-maitre-detail .ms-carte {
    flex-direction: row; align-items: flex-start; gap: 12px;
    border: 0; border-bottom: 1px solid var(--fm-bordure-fine);
    border-radius: 0; padding: 14px 16px 14px 18px;
  }
  .ms-maitre-detail .ms-carte.important { border: 2px solid var(--statut-bloquant);
    background: var(--statut-bloquant-fond); }
  .ms-maitre-detail .ms-carte.retenue { background: var(--fm-action-pale); }
  .ms-maitre-detail .ms-carte-corps { padding: 0; flex: 1; gap: 4px; }
  .ms-maitre-detail .ms-carte-titre { font-size: calc(14px * var(--fm-echelle, 1)); }
  .ms-maitre-detail .ms-extrait { font-size: calc(13px * var(--fm-echelle, 1)); -webkit-line-clamp: 1; }
  .ms-maitre-detail .ms-carte-image { width: 64px; height: 52px;
    aspect-ratio: auto; border-radius: 6px; flex: none; }
  .ms-maitre-detail .ms-vide { border: 0; border-radius: 0; }
  .ms-maitre-detail .mb-lecture { background: var(--fm-fond);
    padding: var(--e-4); }
}

/* La lecture : une carte, en page au téléphone, en panneau au bureau. */
.mb-tuile.ms-page { border: 0; background: transparent; }
.ms-lecture { max-width: 700px; margin: 0 auto; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  overflow: hidden; }
.ms-lecture.important { border: 2px solid var(--statut-bloquant); }
.ms-lecture-tete { flex-wrap: wrap; padding: var(--e-2) var(--e-4); }
.ms-lecture-tete .fin { margin-left: auto; }
.ms-archiver {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 12px; border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-bouton); background: var(--fm-surface);
  color: var(--fm-texte); font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1));
  font-weight: 700; cursor: pointer;
}
.ms-archiver .fm-icone { width: 18px; height: 18px;
  color: var(--fm-action-txt); }
.ms-archiver.actif { border-color: var(--fm-action-bord);
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.ms-archiver:disabled, .ms-reaction:disabled { cursor: not-allowed;
  color: var(--fm-texte-doux); }
.ms-entete { display: block; width: 100%; aspect-ratio: 12 / 5;
  object-fit: cover; background: var(--fm-surface-2); }
.ms-lecture-corps { display: flex; flex-direction: column; gap: 14px;
  padding: 18px 18px 22px; }
.ms-lecture-meta { display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px; margin: 0; font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ms-lecture-titre { margin: 0; font-size: calc(23px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.25; }
@media (min-width: 64rem) { .ms-lecture-titre { font-size: calc(30px * var(--fm-echelle, 1)); } }
/* Le texte : les polices, tailles et marges de la DA, quelles que soient
   celles de l'auteur. Les liens restent soulignés : on les reconnaît sans
   la couleur. */
.ms-texte { padding-top: 14px; border-top: 1px solid var(--fm-bordure);
  font-size: calc(15px * var(--fm-echelle, 1)); line-height: 1.7; overflow-wrap: anywhere; }
.ms-texte > :first-child { margin-top: 0; }
.ms-texte p, .ms-texte ul, .ms-texte ol, .ms-texte blockquote {
  margin: 0 0 14px; }
.ms-texte ul, .ms-texte ol { padding-left: 1.3em; }
.ms-texte li::marker { color: var(--fm-action-txt); }
.ms-texte h2, .ms-texte h3, .ms-texte h4 { margin: 18px 0 8px;
  font-size: calc(18px * var(--fm-echelle, 1)); line-height: 1.3; }
.ms-texte blockquote { padding-left: 12px; font-style: italic;
  border-left: 3px solid var(--fm-action-bord); }
.ms-texte a { color: var(--fm-action-txt); text-decoration: underline;
  text-underline-offset: 3px; }
.ms-reactions { margin: 0; padding-top: 14px;
  border-top: 1px solid var(--fm-bordure); }
.ms-reactions-titre { margin: 0 0 8px; font-family: var(--fm-titre);
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fm-texte-doux); }
/* Les six sur une rangée dès 320 px de contenu, chacune à 44 px au moins ;
   le nombre sous l'émoticône, pour que la rangée ne bouge pas quand il
   change. */
.ms-reactions-liste { display: grid; gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
.ms-reaction {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; min-height: 52px; padding: 4px 2px;
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  background: var(--fm-surface); color: var(--fm-texte); font-size: calc(11px * var(--fm-echelle, 1));
  cursor: pointer;
}
.ms-reaction .ms-emoji { font-size: calc(20px * var(--fm-echelle, 1)); line-height: 1; }
.ms-reaction.mienne { border: 1.5px solid var(--fm-action-txt);
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.ms-reactions .note { margin: 8px 0 0; }
.ms-lecture .mb-note-encadree { margin: 0; }

/* Les six couleurs du texte, à la lecture : une classe, jamais un style
   (l'éditeur pose les mêmes, editeur-messages.css). */
.ms-texte .ms-c-encre { color: var(--fm-couleur-encre); }
.ms-texte .ms-c-violet { color: var(--fm-couleur-violet); }
.ms-texte .ms-c-magenta { color: var(--fm-couleur-magenta); }
.ms-texte .ms-c-lagon { color: var(--fm-couleur-lagon); }
.ms-texte .ms-c-vert { color: var(--fm-couleur-vert); }
.ms-texte .ms-c-brique { color: var(--fm-couleur-brique); }
.ms-texte .ms-image-texte { display: block; width: 100%; height: auto;
  border-radius: 10px; margin: 0 0 14px; }

/* --- Écrire (lot M2) — MS3, MS3B, MS6 ------------------------------------- */

/* « Écrire » : dans la barre d'écran au bureau, flottant au téléphone. Il
   n'existe que pour les auteurs. */
.ms-ecrire-bouton {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 0 16px; border-radius: 22px; background: var(--fm-action);
  color: var(--fm-sur-plein); font-family: var(--fm-titre); font-size: calc(14px * var(--fm-echelle, 1));
  font-weight: 700; text-decoration: none;
}
body.ef a.ms-ecrire-bouton, body.ef a.ms-ecrire-bouton:hover {
  color: var(--fm-sur-plein); }
.ms-ecrire-bouton .fm-icone { width: 18px; height: 18px; }
@media (max-width: 39.99rem) {
  .ms-ecrire-bouton { position: fixed; right: 16px; z-index: 5;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)); min-height: 52px;
    border-radius: 26px; }
}

/* Modifier, Supprimer : dans l'en-tête de la lecture, pour l'auteur. */
.ms-action { display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; border-radius: var(--fm-r-bouton);
  font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 700;
  text-decoration: none; }
body.ef a.ms-action, body.ef a.ms-action:hover { color: var(--fm-action-txt); }
body.ef a.ms-action.ms-action-alerte, body.ef a.ms-action.ms-action-alerte:hover {
  color: var(--statut-bloquant); }
.ms-action .fm-icone { width: 17px; height: 17px; }

.ms-ecrire { display: grid; gap: var(--e-4); }
.ms-ecrire [hidden] { display: none !important; }
.ms-depot-zone { position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: var(--e-5) var(--e-4);
  border: 1.5px dashed var(--fm-action-bord); border-radius: var(--fm-r-carte);
  background: var(--fm-surface); text-align: center; cursor: pointer; }
.ms-depot-zone:focus-within { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.ms-depot-zone.survol { border-style: solid; border-color: var(--fm-action-txt);
  background: var(--fm-fond); }
.ms-depot-zone.erreur { border-color: var(--statut-bloquant); }
.ms-depot-zone .fm-icone { width: 22px; height: 22px; color: var(--fm-action-txt); }
.ms-depot-titre { font-family: var(--fm-titre); font-weight: 700;
  color: var(--fm-action-txt); }
.ms-depot-zone input { position: absolute; inset: 0; width: 100%; height: 100%;
  clip-path: inset(50%); }
.ms-depot-fichier { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
@media (min-width: 64rem) {
  .ms-ecrire { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .ms-ecrire-cote { position: sticky; top: calc(var(--mb-haut) + var(--e-4)); }
}
.ms-ecrire-principal, .ms-ecrire-cote { display: flex; flex-direction: column;
  gap: var(--e-4); min-width: 0; }
.ms-surtitre { margin: 0 0 8px; font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fm-texte-doux); }
.ms-facultatif { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ms-depot-entete, .ms-importance, .ms-quand { margin: 0; padding: 0; border: 0;
  min-width: 0; }
.ms-entete-apercu { display: block; width: 100%; aspect-ratio: 12 / 5;
  object-fit: cover; border-radius: var(--fm-r-carte); margin: 0 0 8px; }
.ms-segments { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-segments-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms-segments-3 .ms-segment span { padding: 0 6px; font-size: calc(14px * var(--fm-echelle, 1)); }
.ms-segment { position: relative; display: flex; }
.ms-segment input { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ms-segment span { flex: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-bouton);
  background: var(--fm-surface); color: var(--fm-texte); font-weight: 600;
  cursor: pointer; }
.ms-segment span .fm-icone { width: 16px; height: 16px; }
.ms-segment input:checked + span { border: 1.5px solid var(--fm-action-txt);
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.ms-segment.important input:checked + span { border-color: var(--statut-bloquant);
  background: var(--statut-bloquant-fond); color: var(--statut-bloquant); }
.ms-segment input:focus-visible + span { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.ms-champ-titre input { width: 100%; min-height: 48px; font-family: var(--fm-titre);
  font-size: calc(20px * var(--fm-echelle, 1)); font-weight: 700; }
.ms-encart { padding: var(--e-4); display: flex; flex-direction: column;
  gap: var(--e-3); }
.ms-encart p { margin: 0; }
.ms-date-heure { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; }
.ms-raccourcis-dates { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin: 0; }
.ms-raccourcis-dates .ms-raccourci { min-height: 40px; padding: 4px 12px;
  border-radius: 20px; border: 1px solid var(--fm-bordure);
  background: var(--fm-surface); color: var(--fm-texte); font: inherit;
  font-size: calc(13px * var(--fm-echelle, 1)); cursor: pointer; }
.ms-case { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.ms-case input { width: 20px; height: 20px; accent-color: var(--fm-action); }
/* « n messages sont déjà épinglés » : prévenir sans bloquer — pas une couleur
   de statut, rien n'est à traiter. */
.ms-avertissement-epingles { padding: 10px 12px; font-size: var(--t-secondaire);
  color: var(--fm-texte); background: var(--fm-surface-2);
  border: 1px solid var(--fm-bordure-fine); border-radius: var(--r-m); }
.ms-avertissement-epingles ul { margin: 6px 0 0; padding-left: 1.2em; }
.ms-avertissement-epingles[hidden], [data-epingle-suite][hidden],
[data-retrait-suite][hidden] { display: none; }
.ms-ecrire-actions { display: flex; flex-direction: column; gap: 8px; }
.ms-supprimer { align-self: center; min-height: 44px; display: inline-flex;
  align-items: center; }
body.ef a.ms-supprimer { color: var(--statut-bloquant); }
.ms-erreur-generale { margin: 0; padding: var(--e-3); border-radius: var(--fm-r-carte);
  border: 1px solid var(--statut-bloquant-bord);
  background: var(--statut-bloquant-fond); color: var(--statut-bloquant); }
.ms-etat { margin: 0; min-height: 1.4em; }
.ms-confirmer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--e-3); }

/* La tuile « Épinglé » de l'accueil : les mêmes règles que le fil. */
.ms-epingle-accueil { display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; }
body.ef a.ms-epingle-accueil, body.ef a.ms-epingle-accueil:hover {
  color: var(--fm-texte); }
.ms-epingle-accueil .titre { font-weight: 600; }
.ms-epingle-accueil.non-lu .titre { font-weight: 700; }
.ms-epingle-accueil .note { margin: 0; }
.ms-epingle-accueil .ms-carte-image { border-radius: 8px; margin-bottom: 6px; }
.ms-epingle-accueil .ms-epingle-quand { display: flex; align-items: center; gap: 8px; }

/* --- Boutons de la marque -------------------------------------------------- */

/* « Créer un compte » en plein, « Se connecter » en creux : le premier est
   une décision, le second un chemin. */
.fm-bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 9px 15px; white-space: nowrap;
  border-radius: var(--fm-r-bouton); border: 1.5px solid var(--fm-action);
  background: var(--fm-action); color: var(--fm-sur-plein);
  font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
body.ef a.fm-bouton, body.ef a.fm-bouton:hover { color: var(--fm-sur-plein); }
.fm-bouton.creux { background: transparent; color: var(--fm-action-txt);
  border-color: transparent; }
body.ef a.fm-bouton.creux, body.ef a.fm-bouton.creux:hover {
  color: var(--fm-action-txt); }
.fm-bouton.petit { min-height: 36px; padding: 7px 12px; font-size: calc(12px * var(--fm-echelle, 1)); }
@media (pointer: coarse) { .fm-bouton.petit { min-height: 44px; } }
/* L'anneau de focus suit d'ordinaire la couleur du texte : sur un bouton
   plein, c'est le blanc du libellé, posé sur le blanc de la carte — invisible.
   Il prend ici la couleur d'action, lisible autour du bouton en clair comme en
   foncé. */
.fm-bouton:focus-visible { outline-color: var(--fm-action-txt); }

/* --- La barre du visiteur -------------------------------------------------- */

.fm-acces { gap: 10px; }
.fm-tete-mobile { display: none; }
@media (max-width: 39.99rem) {
  .fm-tete-mobile {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 6px 16px; background: var(--fm-surface);
    border-bottom: 3px solid transparent; border-image: var(--fm-degrade) 1;
  }
  /* La barre du bas ne doit rien cacher : le pied passe au-dessus. Un membre
     connecté n'a plus de pied (décision du 8 octobre 2026) : sous sa barre,
     c'est la page qui passe au-dessus — celles de l'espace membre
     (`.mb-page`) le font déjà. */
  body.mb .sp-pied, body.mb .ef-pied,
  body.mb .mb-haut:not(.fm-barre-visiteur) ~ #contenu:not(.mb-page) {
    padding-bottom: calc(var(--mb-barre) + var(--e-5) + env(safe-area-inset-bottom));
  }
}
@media (min-width: 40rem) {
  .fm-barre-visiteur .mb-onglet.fm-seulement-mobile { display: none; }
}

/* Le bouton « Signaler un problème » de l'équipe flotte au-dessus de la barre
   du bas, jamais dessus : posé sur elle, il cachait « Plus » — et l'entrée
   « Back-office » qu'il replie pour l'équipe. */
@media (max-width: 39.99rem) {
  body.mb .sv-flottant {
    bottom: calc(var(--mb-barre) + 12px + env(safe-area-inset-bottom));
  }
}

/* --- Les parcours : création de compte, responsable légal ------------------ */

.fm-tete-parcours {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4); padding: 0 32px; background: var(--fm-surface);
  border-bottom: 3px solid transparent; border-image: var(--fm-degrade) 1;
}
.fm-tete-parcours .mb-lien { font-size: var(--t-secondaire); }
@media (max-width: 39.99rem) {
  .fm-tete-parcours { display: none; }
  body.fm-parcours .ef-entete { border-bottom: 3px solid transparent;
    border-image: var(--fm-degrade) 1; }
}

/* Le bandeau d'écran des pages du compte : titre en Montserrat, surtitre en
   chasse fixe. */
body.fm .ef-entete h1 { font-family: var(--fm-titre); font-weight: 700; }
body.fm .ef-entete.neutre { border-bottom-color: var(--fm-bordure-fine); }
@media (min-width: 40rem) {
  body.fm .ef-entete h1 { font-size: calc(24px * var(--fm-echelle, 1)); }
}

/* Un choix retenu : bordure violette, fond violet très pâle (CO1). */
body.fm .ef-choix-options > label:has(input:checked),
body.fm .ef-choix input:checked + .ef-carte,
body.fm .ef-choix.retenue .ef-carte {
  border-color: var(--fm-action-txt); background: var(--fm-action-pale);
}
body.fm .ef-jalons > i.courante, body.fm .ef-etapes > i {
  background: var(--fm-action-txt); }

/* La photo : « Prendre une photo » ou « Choisir une photo », deux boutons de
   même poids (apps/identite/photo.PrendreOuChoisir). Le champ de fichier
   reste dans son bouton, `.visuellement-cache` mais atteignable au clavier :
   le contour passe au bouton. */
.fm-photo-boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); }
body.fm .fm-photo-bouton { position: relative; flex: 1 1 10rem; margin: 0;
  display: flex; align-items: center; justify-content: center; }
.fm-photo-bouton:focus-within { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.fm-photo-choisie { margin: var(--e-2) 0 0; }
.fm-photo-retirer { display: flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche-min); font-size: var(--t-secondaire); }
/* CO5 — le portrait : un cercle de 156 px, cerné de pointillés, la
   silhouette tant qu'aucune photo n'est choisie ; les deux boutons empilés
   dessous (maquette « Front2 — Création de compte »). */
.parcours-portrait { display: flex; flex-direction: column; gap: var(--e-3); }
.fm-portrait { align-self: center; display: flex; align-items: center;
  justify-content: center; width: 156px; height: 156px; border-radius: 50%;
  overflow: hidden; border: 1px dashed var(--fm-bordure);
  background: var(--fm-surface-2); color: var(--fm-texte-doux); }
.fm-portrait .fm-icone { width: 64px; height: 64px; }
.fm-portrait img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 20%; }
.parcours-portrait .fm-photo-boutons { flex-direction: column; }
body.fm .parcours-portrait .fm-photo-bouton { flex: none; }
.parcours-portrait .ef-note-gauche { margin: 0; }

/* Le code à six chiffres (CO2, CO3, et le numéro changé depuis le profil) :
   six cases en chasse fixe, un seul vrai champ posé par-dessus, transparent
   (code.js). Remplie ou à remplir, une case se cerne de violet. Sans
   script, le champ seul. */
.fm-code { position: relative; }
.fm-code > input { box-sizing: border-box; width: 100%;
  min-height: var(--touche-min); padding: 11px 12px;
  border: 1px solid var(--fm-bordure); border-radius: var(--r-m);
  background: var(--fm-surface); color: var(--fm-texte);
  font-family: var(--chiffres); font-size: calc(19px * var(--fm-echelle, 1)); letter-spacing: .3em; }
.fm-code.actif > input { position: absolute; inset: 0; z-index: 1;
  height: 100%; border-color: transparent; background: transparent;
  color: transparent; caret-color: transparent; }
.fm-code-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px; border-radius: 6px; }
.fm-code.actif:focus-within .fm-code-cases { outline: 2px solid var(--fm-action-txt);
  outline-offset: 3px; }
.fm-code-case { display: flex; align-items: center; justify-content: center;
  min-height: 52px; box-sizing: border-box; border: 1px solid var(--fm-bordure);
  border-radius: 5px; background: var(--fm-surface); font-family: var(--chiffres);
  font-size: calc(19px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-code-case.remplie, .fm-code-case.courante {
  border: 1.5px solid var(--fm-action-txt); }
.fm-code-case.remplie { color: var(--fm-texte); font-weight: 600; }
.champ.erreur .fm-code-case { border-color: var(--statut-bloquant); }

/* Un ordinateur ignore `capture` : « Prendre une photo » y ouvrirait la même
   fenêtre que « Choisir une photo ». */
@media (hover: hover) and (pointer: fine) {
  body.fm .fm-photo-bouton[data-photo-prendre] { display: none; }
}

/* --- Le site public -------------------------------------------------------- */

body.fm.site-public { background: var(--fm-fond); }
body.fm .sp-entete-page h1 { font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(28px * var(--fm-echelle, 1)); line-height: 1.15; letter-spacing: -.01em; }
@media (min-width: 64rem) { body.fm .sp-entete-page h1 { font-size: calc(32px * var(--fm-echelle, 1)); } }
body.fm .sp-entete-page p { font-size: calc(16px * var(--fm-echelle, 1)); line-height: 1.6; }
.fm-surtitre-or { margin: 0 0 var(--e-2); font-family: var(--chiffres);
  font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .14em; text-transform: uppercase;
  color: var(--fm-or-txt); }
.fm-surtitre { margin: 0 0 var(--e-2); font-family: var(--chiffres);
  font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fm-texte-doux); }
body.fm .sp-visuel .pastille { border-radius: var(--fm-r-pastille); }
body.fm .sp-section, body.fm .sp-question .titre { font-family: var(--fm-titre); }
body.fm .sp-fil { background: var(--fm-surface);
  border-bottom: 1px solid var(--fm-bordure-fine); }
.sp-fil .dedans { max-width: var(--sp-largeur); margin: 0 auto;
  padding: 10px var(--e-5); display: flex; align-items: center; gap: 8px; }

.fm-accueil { display: flex; flex-direction: column; gap: var(--e-6); }
.fm-accueil .sp-entete-page { max-width: 47.5rem; }
/* Écran d'entrée : le grand logo à côté de l'accueil, au-dessus au téléphone. */
.fm-accueil .fm-entete-entree { max-width: 62rem; display: flex;
  align-items: center; gap: 28px; }
@media (max-width: 39.99rem) {
  .fm-accueil .fm-entete-entree { flex-direction: column; align-items: flex-start;
    gap: 14px; }
}
.fm-bloc { display: flex; flex-direction: column; gap: 14px; }
.fm-bloc-tete { display: flex; align-items: baseline; gap: var(--e-3);
  flex-wrap: wrap; }
.fm-bloc-tete h2 { margin: 0; font-family: var(--fm-titre); font-size: calc(20px * var(--fm-echelle, 1));
  font-weight: 700; }
.fm-bloc-tete .mb-lien { margin-left: auto; }
.fm-bloc-texte { margin: 0; color: var(--fm-texte-doux); }
.fm-accueil-don .mb-tuile-corps { display: flex; align-items: center;
  flex-wrap: wrap; gap: var(--e-3) var(--e-5); }
.fm-accueil-don .mb-tuile-corps p { flex: 1 1 16rem; }

/* Le live en cours : toute la largeur, sur fond nuit. */
.fm-live {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: var(--fm-r-carte); background: var(--fm-nuit);
  color: var(--fm-sur-plein);
}
.fm-live-image {
  position: relative; min-height: 186px;
  background: repeating-linear-gradient(135deg,
    var(--fm-nuit-motif), var(--fm-nuit-motif) 8px,
    var(--fm-nuit) 8px, var(--fm-nuit) 16px);
}
.fm-live-image img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.fm-live-image .mb-pastille-direct { position: absolute; top: 11px; left: 11px;
  z-index: 1; }
.fm-live-corps { padding: 22px 26px; display: flex; flex-direction: column;
  justify-content: center; gap: 8px; }
.fm-live-corps h2 { margin: 0; font-family: var(--fm-titre); font-size: calc(22px * var(--fm-echelle, 1));
  font-weight: 700; line-height: 1.25; color: var(--fm-sur-plein); }
.fm-live-corps p { margin: 0; }
.fm-live-surtitre { font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--fm-sur-plein) 78%, transparent); }
.fm-live-detail { font-size: calc(14px * var(--fm-echelle, 1));
  color: color-mix(in srgb, var(--fm-sur-plein) 86%, transparent); }
@media (min-width: 52rem) {
  .fm-live { grid-template-columns: 420px minmax(0, 1fr); }
}
.fm-live-attente { display: grid; gap: var(--e-4); }
.fm-dernier-replay { padding: var(--e-4); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
@media (min-width: 52rem) {
  .fm-live-attente { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; }
}
.fm-colonnes-lives { display: grid; gap: var(--e-4); }
@media (min-width: 52rem) {
  .fm-colonnes-lives { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; }
  /* Sans réunion à venir, les rediffusions seules, sur toute la largeur. */
  .fm-colonnes-lives.seule { grid-template-columns: minmax(0, 1fr); }
}

/* Les replays : la recherche au-dessus de la liste — le dessin de celle de
   l'annuaire, la loupe en bouton. */
.fm-replays-chercher { margin: 0 0 var(--e-3); }
.fm-replays-recherche { display: flex; align-items: center; gap: 2px;
  height: 46px; padding: 0 2px 0 12px; background: var(--fm-surface);
  border: 1.5px solid var(--fm-action-txt); border-radius: 12px; }
.fm-replays-recherche input { flex: 1; min-width: 0; height: 100%; border: 0;
  background: transparent; color: var(--fm-texte); font: inherit;
  font-size: calc(16px * var(--fm-echelle, 1)); }
.fm-replays-recherche input:focus { outline: none; }
.fm-replays-recherche input::-webkit-search-cancel-button { -webkit-appearance: none;
  appearance: none; }
.fm-replays-recherche:focus-within { outline: 3px solid var(--fm-action-pale); }
.fm-replays-geste { display: flex; align-items: center; justify-content: center;
  flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--fm-texte-doux); cursor: pointer; }
.fm-replays-geste:hover { color: var(--fm-texte); }
.fm-replays-geste .fm-icone { width: 18px; height: 18px; }

/* L'invitation à créer un compte : une fois, après ce qu'on peut voir. */
.fm-invitation {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
  padding: var(--e-5); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
}
.fm-invitation > div:first-child { flex: 1 1 22rem; }
.fm-invitation h2 { margin: 0 0 6px; font-family: var(--fm-titre);
  font-size: calc(20px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-invitation p { margin: 0; color: var(--fm-texte-doux); }
.fm-invitation-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* « Pour vous inscrire, connectez-vous » — en page, et par-dessus la fiche. */
.fm-connexion-requise, .fm-dialogue {
  max-width: 30rem; padding: var(--e-5); color: var(--fm-texte);
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte);
}
.fm-connexion-requise { margin: 0 auto; }
.fm-connexion-requise h1, .fm-dialogue h2 { margin: 0 0 var(--e-2);
  font-family: var(--fm-titre); font-size: calc(20px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-dialogue { width: calc(100% - 32px); position: relative; }
.fm-dialogue::backdrop { background: var(--fm-voile); }
.fm-dialogue-fermer { position: absolute; top: 8px; right: 8px; margin: 0; }
.fm-dialogue-fermer button {
  min-width: 44px; min-height: 44px; border: 0; background: none;
  color: var(--fm-texte-doux); font-size: calc(22px * var(--fm-echelle, 1)); cursor: pointer;
}
body.fm .sp-entete-page .fm-surtitre-or { font-size: calc(11px * var(--fm-echelle, 1)); line-height: 1.4; }
body .sp-fil { display: block; }

/* --- Contact (maquette « Front2 — Contact ») -------------------------------

   Une colonne au téléphone et sur tablette : le symbole, le titre, la carte
   du formulaire, puis les coordonnées — en deux colonnes sur tablette. Au
   bureau, le symbole, le titre et les coordonnées à gauche, la carte de
   40 rem à droite : un champ de saisie plus large ne sert personne. */

.fm-symbole-grand {
  --fm-symbole-taille: 112px;
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--fm-symbole-taille); height: var(--fm-symbole-taille);
  padding: 8px; background: var(--fm-symbole-fond);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
}
.fm-symbole-grand img { display: block; width: 100%; height: 100%;
  object-fit: contain; }
@media (min-width: 40rem) { .fm-symbole-grand { --fm-symbole-taille: 132px; } }
@media (min-width: 64rem) { .ct-page .fm-symbole-grand { --fm-symbole-taille: 150px; } }
/* La coche de la confirmation : le vert plein de statut, le même dans les
   deux thèmes. */
.fm-symbole-coche {
  position: absolute; right: -8px; bottom: -8px; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid var(--fm-surface);
  background: var(--statut-ok-plein); color: var(--fm-sur-plein);
  font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700; line-height: 1;
}

.ct-page { display: grid; gap: var(--e-5); padding-top: var(--e-5);
  padding-bottom: var(--e-6); }
.ct-presentation { display: flex; flex-direction: column; align-items: center;
  gap: var(--e-3); text-align: center; }
.ct-presentation h1, .ct-presentation .ct-titre { margin: 0;
  font-family: var(--fm-titre); font-size: calc(22px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.2; color: var(--fm-texte); }
.ct-chapo { margin: 0; max-width: 34rem; color: var(--fm-texte-doux); }

.ct-carte { width: 100%; max-width: 40rem; margin: 0 auto;
  padding: var(--e-4); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
@media (min-width: 40rem) { .ct-carte { padding: var(--e-5); } }
.ct-titre-carte { margin: 0 0 var(--e-4); font-family: var(--fm-titre);
  font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 700; color: var(--fm-texte); }

.ct-coordonnees { display: grid; gap: var(--e-4); width: 100%;
  max-width: 40rem; margin: 0 auto; }
.ct-coordonnees section > p { margin: 0 0 4px; }
.ct-coordonnees .fm-surtitre { margin-bottom: var(--e-2); }
.ct-nom { font-weight: 600; color: var(--fm-texte); }
.ct-evenements { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--e-2); }
.ct-evenements li { display: flex; flex-direction: column; }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .ct-coordonnees { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 64rem) {
  .ct-page { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    grid-template-rows: auto 1fr; column-gap: 56px; align-items: start; }
  .ct-presentation { grid-column: 1; grid-row: 1; align-items: flex-start;
    text-align: left; }
  .ct-presentation h1, .ct-presentation .ct-titre { font-size: calc(34px * var(--fm-echelle, 1)); }
  .ct-coordonnees { grid-column: 1; grid-row: 2; margin: 0; }
  .ct-carte { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .ct-page.ct-sans-formulaire { grid-template-columns: minmax(0, 40rem); }
}

/* Le motif : deux colonnes au téléphone, trois au-delà. Le motif retenu
   garde son libellé en toutes lettres et prend une coche — la bordure seule
   ne suffirait pas en foncé. */
.ct-motifs { margin: 0 0 var(--e-4); padding: 0; border: 0; min-width: 0; }
.ct-motifs legend { padding: 0; margin-bottom: 6px; }
.ct-motifs .ef-choix-options { display: grid; gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .ct-motifs .ef-choix-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ct-motifs .ef-choix-options > label { justify-content: flex-start;
  text-align: left; font-size: var(--t-secondaire); color: var(--fm-texte); }
body.fm .ct-motifs .ef-choix-options > label:has(input:checked) {
  color: var(--fm-action-txt); }
/* La coche est un décor : le texte de remplacement vide la garde hors du nom
   que lit un lecteur d'écran, qui annonce déjà « coché ». La première
   déclaration sert aux navigateurs qui ignorent cette syntaxe. */
.ct-motifs .ef-choix-options > label:has(input:checked)::before {
  content: "✓"; content: "✓" / ""; font-weight: 700; }

.ct-paire { display: grid; column-gap: var(--e-4); }
@media (min-width: 40rem) {
  .ct-paire { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Une adresse est un identifiant : chasse fixe, comme dans la maquette. */
.ct-formulaire input[type="email"] { font-family: var(--chiffres); }
.ct-valeur { margin: 0; display: flex; align-items: center;
  justify-content: space-between; gap: var(--e-2);
  min-height: var(--touche-min); padding: 10px 12px;
  border: 1px solid var(--fm-bordure-fine); border-radius: var(--r-m);
  background: var(--fm-surface-2); color: var(--fm-texte);
  overflow-wrap: anywhere; }
.ct-marque { flex: none; max-width: 7rem; text-align: right;
  font-family: var(--chiffres); font-size: var(--t-meta);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
  color: var(--fm-texte-doux); }

.ct-message textarea { min-height: 7.5rem; resize: vertical; }
.ct-sous-message { display: flex; align-items: flex-start;
  justify-content: space-between; gap: var(--e-3); }
.ct-compteur { flex: none; font-size: var(--t-libelle);
  color: var(--fm-texte-doux); }
/* Sous le choix du motif : la marge est celle de l'avertissement montré, pour
   qu'un conteneur vide n'écarte rien. */
.ct-avertissement { margin: 0 0 var(--e-4); padding: 10px 12px;
  font-size: var(--t-secondaire); color: var(--fm-texte);
  background: var(--fm-surface-2); border: 1px solid var(--fm-bordure-fine);
  border-radius: var(--r-m); }
.ct-erreurs { margin: 0 0 var(--e-4); padding: 11px 13px;
  border-radius: var(--r-m); color: var(--statut-bloquant);
  background: var(--statut-bloquant-fond); font-size: var(--t-secondaire);
  font-weight: 600; }
.ct-erreurs p { margin: 0; }
.ct-envoyer { width: 100%; min-height: var(--touche-min); }

/* La confirmation (CT3, CT4). */
.ct-page-recu { display: flex; justify-content: center;
  padding: var(--e-6) 0; }
.ct-recu { width: 100%; max-width: 30rem; display: flex;
  flex-direction: column; align-items: center; gap: var(--e-3);
  padding: var(--e-5); text-align: center; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.ct-recu h1 { margin: 0; font-family: var(--fm-titre); font-size: calc(20px * var(--fm-echelle, 1));
  font-weight: 700; color: var(--fm-texte); }
.ct-conseil { margin: 0; font-size: var(--t-secondaire);
  color: var(--fm-texte-doux); }
.ct-recapitulatif { width: 100%; margin: 0; padding: var(--e-2) var(--e-4);
  text-align: left; border: 1px solid var(--fm-bordure);
  border-radius: var(--r-m); }
.ct-recapitulatif > div { display: flex; justify-content: space-between;
  gap: var(--e-3); padding: 5px 0; font-size: var(--t-secondaire); }
.ct-recapitulatif dt { color: var(--fm-texte-doux); }
.ct-recapitulatif dd { margin: 0; font-weight: 600; text-align: right;
  color: var(--fm-texte); }
.ct-recu-actions { width: 100%; display: flex; flex-direction: column;
  gap: var(--e-2); }
.ct-recu-actions .fm-bouton { width: 100%; min-height: var(--touche-min); }
/* La case de consentement : toute la phrase est la cible, et elle tient la
   hauteur minimale d'une cible tactile (ENF-7.6). */
@media (pointer: coarse) {
  .ct-formulaire .champ.ef-consentement > label {
    min-height: var(--touche-min); align-items: center; }
}


/* --- Les discussions de contact (maquette « Front2 — Discussions », lot D4) ---
   FO-DSC-01 la liste, FO-DSC-03 le fil. Au téléphone, chaque écran est en
   page : la liste seule sur « Contact », le fil seul sur une discussion. Au-
   delà de 640 px, la liste reste à gauche du fil. Le membre écrit à droite,
   sur le violet pâle de l'action ; l'équipe à gauche, sur la surface. Le
   magenta ne sert qu'à la réponse non lue. */
.ds-page { display: grid; gap: var(--e-5); padding-top: var(--e-4); }
.ds-colonne-fil { display: none; }
.ds-page.ds-avec-fil .ds-liste { display: none; }
.ds-page.ds-avec-fil .ds-colonne-fil { display: block; }
@media (min-width: 40rem) {
  .ds-page { grid-template-columns: 18rem minmax(0, 1fr); align-items: start; }
  .ds-page .ds-liste, .ds-page .ds-colonne-fil,
  .ds-page.ds-avec-fil .ds-liste { display: block; }
}
@media (min-width: 64rem) { .ds-page { grid-template-columns: 22rem minmax(0, 1fr); } }
.ds-tete { display: flex; flex-direction: column; gap: var(--e-2); }
.ds-titre { margin: 0; font-family: var(--fm-titre); font-size: calc(22px * var(--fm-echelle, 1));
  font-weight: 800; color: var(--fm-texte); }
.ds-chapo { margin: 0; color: var(--fm-texte-doux); }
.ds-nouvelle { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: var(--touche-min); }
.ds-nouvelle .fm-icone { flex: none; width: 18px; height: 18px; }
.ds-groupe { margin: var(--e-5) 0 var(--e-2); }
.ds-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--e-2); }
body.fm a.ds-ligne, body.fm a.ds-ligne:hover { color: var(--fm-texte); text-decoration: none; }
.ds-ligne { display: flex; flex-direction: column; gap: 3px; min-height: var(--touche-min);
  padding: var(--e-3) var(--e-4); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); background: var(--fm-surface); }
.ds-ligne:hover { border-color: var(--fm-action-bord); }
.ds-ligne.active { border-color: var(--fm-action-bord); border-left: 3px solid var(--fm-action); }
.ds-ligne-motif { display: flex; align-items: center; gap: var(--e-2); font-weight: 600; }
.ds-ligne.non-lue .ds-ligne-motif { font-weight: 800; }
.ds-point { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fm-magenta); }
.ds-ligne-ref { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-ligne-etat { font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-ligne.non-lue .ds-ligne-etat.reponse { color: var(--fm-magenta); font-weight: 600; }
/* « Enregistrée » : personne n'a pu être prévenu — l'ambre des statuts, comme
   la pastille du fil (FO-DSC-03D). */
.ds-ligne-etat.enregistree { color: var(--statut-attention); }
.ds-coordonnees { margin-top: var(--e-6); }
.ds-invitation { padding: var(--e-5); border: 1px dashed var(--fm-bordure);
  border-radius: var(--fm-r-carte); }
.ds-invitation p { margin: 0 0 var(--e-1); }
.ds-fil { display: flex; flex-direction: column; gap: var(--e-3); }
.ds-fil-ref { margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--e-2); font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-avertissement { margin: 0; font-size: calc(12px * var(--fm-echelle, 1));
  line-height: 1.5; color: var(--fm-texte-doux); }
.ds-bandeau { margin: 0; padding: var(--e-3); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); background: var(--fm-surface-2);
  font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte); }
.ds-bandeau.envoye { border-color: var(--statut-ok-bord); background: var(--statut-ok-fond); }
.ds-bandeau.attention { border-color: var(--statut-attention-bord);
  background: var(--statut-attention-fond); }
.ds-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: var(--e-3); }
.ds-jour { display: flex; align-items: center; gap: var(--e-2);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-jour::before, .ds-jour::after { content: ""; flex: 1; height: 1px; background: var(--fm-bordure); }
.ds-message { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ds-message.de-moi { align-items: flex-end; }
.ds-message-tete { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.ds-qui { font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.ds-message.de-moi .ds-qui { color: var(--fm-action-txt); }
.ds-heure { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-bulle { box-sizing: border-box; max-width: min(36rem, 88%); padding: 10px 13px;
  border: 1px solid var(--fm-bordure); border-radius: 14px 14px 14px 4px;
  background: var(--fm-surface); color: var(--fm-texte); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; }
.ds-message.de-moi .ds-bulle { border-color: var(--fm-action-bord); border-radius: 14px 14px 4px 14px;
  background: var(--fm-action-pale); }
.ds-ecrire { display: flex; flex-direction: column; gap: 7px; padding-top: var(--e-3);
  border-top: 1px solid var(--fm-bordure); }
.ds-libelle { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .1em; text-transform: uppercase; color: var(--fm-texte-doux); }
.ds-saisie { display: flex; align-items: flex-end; gap: 9px; }
.ds-saisie textarea { flex: 1; min-width: 0; min-height: 46px; box-sizing: border-box;
  padding: 11px 13px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  line-height: 1.45; color: var(--fm-texte); background: var(--fm-fond);
  border: 1.5px solid var(--fm-bordure); border-radius: 12px; resize: vertical; }
.ds-saisie textarea:focus { border-color: var(--fm-action-txt); }
.ds-envoyer { flex: none; min-height: 46px; }
.ds-sous-saisie { margin: 0; display: flex; justify-content: space-between; gap: var(--e-2);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ds-erreur { margin: 0; }
/* Le bandeau d'état et le champ d'écriture restent collés en bas du fil
   (FO-DSC-03) : au téléphone au-dessus de la barre, ailleurs au bas de
   l'écran. Le fil défile derrière, sur le fond de la page. */
.ds-bas { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column;
  gap: var(--e-3); padding: var(--e-2) 0 var(--e-3); background: var(--fm-fond); }
@media (max-width: 39.99rem) {
  .ds-bas { bottom: calc(var(--mb-barre) + env(safe-area-inset-bottom)); }
  /* Pendant la saisie, la barre du bas s'efface : le clavier prend déjà la
     moitié de l'écran (FO-DSC-02). Elle revient dès que le champ est quitté. */
  body.mb:has(.ds-saisie textarea:focus, .ds-nouvelle-page textarea:focus) .mb-haut { display: none; }
  body.mb:has(.ds-saisie textarea:focus) .ds-bas { bottom: 0; }
}
/* FO-DSC-02 : avec des discussions déjà ouvertes, le formulaire seul, en
   colonne centrée — la présentation et les coordonnées sont sur la liste. */
.ct-page.ds-nouvelle-page.ds-avec-discussions { grid-template-columns: minmax(0, 30rem);
  justify-content: center; }
.ct-page.ds-nouvelle-page.ds-avec-discussions .ct-carte { grid-column: 1; grid-row: auto; }


/* --- L'appli installée (Messages, lot M3) ------------------------------------
   La carte de Notifications, et la page hors ligne. Écrans non dessinés par
   les maquettes, conçus dans la DA. `hidden` cache toujours : la carte et ses
   variantes portent des classes qui fixent leur affichage. */
[data-appli][hidden], [data-appli] [hidden] { display: none !important; }
.fm-appli-entete { display: flex; align-items: center; gap: var(--e-3);
  margin: 0 0 var(--e-3); }
.fm-appli-entete img { flex: none; border-radius: 12px;
  border: 1px solid var(--fm-bordure-fine); }

.fm-hors-ligne { min-height: 100vh; margin: 0; display: grid;
  place-items: center; padding: var(--e-5) var(--e-4); background: var(--fm-fond);
  color: var(--fm-texte); }
.fm-hors-ligne-carte { max-width: 26rem; padding: var(--e-6) var(--e-5);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  background: var(--fm-surface); text-align: center; }
.fm-hors-ligne-carte h1 { margin: var(--e-4) 0 var(--e-3);
  font-family: var(--fm-titre); font-size: calc(22px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-hors-ligne-carte p { margin: 0 0 var(--e-5); color: var(--fm-texte-doux); }

/* --- Les avis de l'appli (Messages, lot M4) ----------------------------------
   Notifications › Avis : l'état de cet appareil, ce qu'on reçoit, les
   appareils du compte. Écran non dessiné par les maquettes. */
[data-avis] [hidden] { display: none !important; }
.fm-avis [data-avis-erreur] { margin: var(--e-2) 0 0; color: var(--statut-bloquant); }
.fm-avis h3 { margin: var(--e-5) 0 var(--e-2); }
.fm-avis h3:first-child { margin-top: 0; }
.fm-avis-choix { display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--e-2); margin: 0 0 var(--e-2); }
.fm-avis-appareils { list-style: none; margin: 0 0 var(--e-3); padding: 0; }
.fm-avis-appareils li { display: flex; align-items: center;
  justify-content: space-between; gap: var(--e-3); padding: var(--e-2) 0;
  border-bottom: 1px solid var(--fm-bordure-fine); }
.fm-avis-appareils form { margin: 0; }
.fm-avis-retirer { min-height: 44px; padding: 0; border: 0;
  background: transparent; font: inherit; font-weight: 600;
  color: var(--fm-action-txt); cursor: pointer; }

/* --- Installer l'appli : le bandeau (B2, B2T) --------------------------------
   Spec du 2 octobre 2026, maquettes « Front2 - Installation ». En bas de
   l'écran, juste au-dessus de la barre d'onglets au téléphone, sous le pouce ;
   seul, sur toute la largeur, à la tablette, dont la barre est en haut. Il ne
   pousse pas le contenu : la page lui garde sa hauteur en bas
   (`--fm-bandeau-appli`, mesurée par static/js/appli.js), et ce qui flottait
   au-dessus de la barre flotte au-dessus de lui. */

.fm-bandeau-appli {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--fm-surface-2); color: var(--fm-texte);
  border-top: 1px solid var(--fm-bordure);
}
.fm-bandeau-appli[hidden] { display: none; }
.fm-bandeau-appli-lien {
  display: flex; align-items: center; gap: 11px; min-height: 44px;
  padding: 8px 12px 8px 14px; text-decoration: none;
  font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.35;
}
body.ef a.fm-bandeau-appli-lien, body.ef a.fm-bandeau-appli-lien:hover {
  color: var(--fm-texte); }
.fm-bandeau-appli-lien strong { color: var(--fm-action-txt); font-weight: 700; }
.fm-bandeau-appli-lien .fm-icone { width: 18px; height: 18px; flex: none;
  color: var(--fm-action-txt); }
.fm-bandeau-appli-texte { flex: 1; min-width: 0; }
.fm-chevron-droite { width: 14px; height: 14px; flex: none;
  color: var(--fm-action-txt); }
/* « J'ai déjà installé la web app » : une ligne à part, de 44 px, pour qu'on
   ne la coche pas en voulant ouvrir la page. */
.fm-bandeau-appli-case {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 14px; border-top: 1px solid var(--fm-bordure);
  font-size: calc(13px * var(--fm-echelle, 1)); cursor: pointer;
}
.fm-bandeau-appli-case input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 20px; height: 20px; margin: 0; display: grid; place-content: center;
  border: 1.5px solid var(--fm-action-txt); border-radius: 5px;
  background: var(--fm-surface); cursor: pointer;
}
.fm-bandeau-appli-case input:checked { background: var(--fm-action-txt); }
.fm-bandeau-appli-case input:checked::after {
  content: ""; width: 10px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--fm-sur-action-txt);
  border-bottom: 2px solid var(--fm-sur-action-txt); transform: rotate(-45deg);
}
.fm-bandeau-appli-case input:focus-visible {
  outline: 2px solid var(--fm-action-txt); outline-offset: 2px; }

body.fm-avec-bandeau-appli { padding-bottom: var(--fm-bandeau-appli, 0px); }
body.fm-avec-bandeau-appli .sv-flottant { margin-bottom: var(--fm-bandeau-appli, 0px); }
@media (max-width: 39.99rem) {
  .fm-bandeau-appli {
    bottom: calc(var(--mb-barre) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }
  body.fm-avec-bandeau-appli .mb-total,
  body.fm-avec-bandeau-appli .ms-ecrire-bouton {
    margin-bottom: var(--fm-bandeau-appli, 0px); }
}

/* --- Installer l'appli : la page /installer (G0 à G10) ------------------------
   La barre de l'appli et le bandeau d'écran, comme partout (8 octobre 2026).
   Le bandeau porte l'adresse, en chasse fixe comme toute adresse. */

.ins-adresse {
  margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux);
}
body.ins-corps .mb-page { max-width: 834px; }

/* L'en-tête d'un écran : la tuile du symbole, blanche dans les deux thèmes —
   le liseré clair du détourage ne s'y voit pas —, le titre, la pastille et la
   durée. */
.ins-tete { display: flex; align-items: center; gap: 12px; padding: 2px 0 6px; }
.ins-tuile {
  width: 52px; height: 52px; flex: none; display: flex;
  align-items: center; justify-content: center;
  background: var(--fm-symbole-fond); border: 1px solid var(--fm-bordure);
  border-radius: 12px;
}
.ins-tuile img { width: 38px; height: 38px; object-fit: contain; display: block; }
.ins-tete-corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
body.fm .ins-titre { margin: 0; font-family: var(--fm-titre); font-size: calc(19px * var(--fm-echelle, 1));
  font-weight: 700; line-height: 1.25; color: var(--fm-texte); }
.ins-chapo { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.45;
  color: var(--fm-texte-doux); }
.ins-meta { margin: 0; display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; }
.ins-pastille {
  padding: 3px 9px; border-radius: var(--fm-r-pastille);
  background: var(--fm-surface-2); color: var(--fm-action-txt);
  border: 1px solid var(--fm-action-bord); font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600;
}
.ins-resume { font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }

/* Les étapes : un rond numéroté, un titre, une phrase, l'illustration. */
.ins-etapes { list-style: none; margin: 8px 0 4px; padding: 0;
  counter-reset: etape; }
.ins-etape {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0 14px 42px; border-top: 1px solid var(--fm-bordure-fine);
  counter-increment: etape;
}
.ins-etape::before {
  content: counter(etape); position: absolute; left: 0; top: 14px;
  width: 30px; height: 30px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center;
  background: var(--fm-action-txt); color: var(--fm-sur-action-txt);
  font-family: var(--fm-titre); font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 700;
}
.ins-etape > * { margin: 0; }
body.fm .ins-etape-titre { font-family: var(--ef-texte), "IBM Plex Sans", sans-serif;
  font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 600; line-height: 1.4; color: var(--fm-texte); }
.ins-etape-texte { font-size: calc(14px * var(--fm-echelle, 1)); line-height: 1.6; color: var(--fm-texte-doux); }

/* Le bouton du geste unique (Android) et « Copier le lien ». */
.ins-bouton {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; padding: 13px 15px; border: 0; border-radius: 12px;
  background: var(--fm-action); color: var(--fm-sur-plein); cursor: pointer;
  font-family: var(--fm-titre); font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 700;
}
.ins-bouton[hidden] { display: none; }
a.ins-bouton { text-decoration: none; }
.ins-bouton:focus-visible { outline: 2px solid var(--fm-action-txt); outline-offset: 2px; }
.ins-copie { display: flex; flex-direction: column; gap: 8px; }
.ins-lien {
  width: 100%; padding: 11px 12px; border: 1px solid var(--fm-bordure);
  border-radius: 10px; background: var(--fm-surface-2); color: var(--fm-texte);
  font-family: var(--chiffres); font-size: calc(13px * var(--fm-echelle, 1));
}
.ins-copie-retour { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* L'encadré : l'astuce d'un guide, l'aide de la liste. */
.ins-astuce {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 6px;
  padding: 11px 12px; border-radius: 10px; background: var(--fm-surface-2);
  color: var(--fm-texte); font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55;
}
.ins-astuce::before { content: ""; width: 6px; height: 6px; flex: none;
  margin-top: 7px; border-radius: 50%; background: var(--fm-action-txt); }
.ins-astuce p { margin: 0; }
.ins-astuce + .ins-illu { margin-top: 10px; }

/* Ouverte depuis l'appli installée : la réinstaller, en cas de problème
   (9 octobre 2026). */
.ins-dans-appli { display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 16px; padding: 14px; border-radius: 12px;
  background: var(--fm-surface-2); border: 1px solid var(--fm-action-bord); }
.ins-dans-appli[hidden] { display: none; }
.ins-dans-appli-etapes { margin: 0; padding-left: 20px; font-size: calc(14px * var(--fm-echelle, 1));
  line-height: 1.6; color: var(--fm-texte); }

.ins-autres {
  margin: 8px 0 0; padding: 4px 0 8px; text-align: center;
  border-top: 1px solid var(--fm-bordure-fine);
}
.ins-autres a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 4px; text-decoration: none;
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600;
}
body.ef .ins-autres a, body.ef .ins-autres a:hover { color: var(--fm-action-txt); }

/* G0 : la liste des méthodes, une ligne de 56 px par écran. */
.ins-groupes { display: flex; flex-direction: column; gap: 14px; margin: 12px 0; }
body.ef .ins-groupe-titre {
  margin: 0 0 7px; padding-left: 2px; font-family: var(--chiffres);
  font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fm-texte-doux);
}
.ins-lignes { list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; }
.ins-lignes li + li { border-top: 1px solid var(--fm-bordure-fine); }
.ins-ligne {
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 12px 14px; text-decoration: none;
}
body.ef a.ins-ligne, body.ef a.ins-ligne:hover { color: var(--fm-texte); }
.ins-ligne:hover { background: var(--fm-surface-2); }
.ins-ligne-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-ligne-titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; }
.ins-ligne-precision { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.ins-vous {
  margin-left: 4px; padding: 1px 7px; border-radius: 10px; white-space: nowrap;
  background: var(--fm-action-pale); color: var(--fm-action-txt);
  border: 1px solid var(--fm-action-bord); font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600;
}
.ins-code { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.ins-chevron { width: 15px; height: 15px; flex: none; color: var(--fm-action-txt); }

/* Tablette (G0T, G1T) et au-delà : la liste en deux colonnes, iPad et
   tablette Android ; les étapes en grille 2 × 2, qui tiennent sans défiler. */
@media (min-width: 40rem) {
  .ins-groupes { display: grid; grid-template-columns: 1fr 1fr;
    gap: 24px; align-items: start; }
  .ins-etapes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* --- Installer l'appli : les illustrations ------------------------------------
   L'écran du téléphone, à l'identique, et le bouton à toucher cerclé de
   violet : un contour, pas une ombre. */

.ins-illu {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--fm-illu-bord);
  border-radius: 12px; background: var(--fm-illu-fond);
  font-family: var(--fm-illu-police); color: var(--fm-illu-texte);
}
.ins-illu-barre { height: 52px; }
.ins-illu-menu { height: 124px; }
.ins-illu-feuille { height: 64px; }
.ins-illu-accueil { height: 92px; }
.ins-barre {
  position: absolute; left: 0; right: 0; height: 50px; display: flex;
  align-items: center; gap: 8px; padding: 0 10px;
  background: var(--fm-illu-barre); color: var(--fm-illu-encre);
}
.ins-illu-bas .ins-barre { bottom: 0; border-top: 1px solid var(--fm-illu-filet); }
.ins-illu-haut .ins-barre { top: 0; border-bottom: 1px solid var(--fm-illu-filet); }
.ins-touche {
  min-width: 34px; height: 34px; padding: 0 6px; flex: none; display: flex;
  align-items: center; justify-content: center; border-radius: 10px;
}
.ins-sys { width: 20px; height: 20px; flex: none; }
.ins-pale { color: var(--fm-illu-eteint); }
.ins-bleu { color: var(--fm-illu-ios); }
.ins-cible {
  background: var(--fm-illu-cible-fond);
  outline: 2.5px solid var(--fm-action-txt); outline-offset: 0;
}
.ins-champ {
  flex: 1; min-width: 0; padding: 7px 10px; border-radius: 16px;
  background: var(--fm-illu-champ); color: var(--fm-illu-encre);
  font-size: calc(12px * var(--fm-echelle, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ins-menu { width: 88%; margin: 0; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 3px; font-size: calc(13px * var(--fm-echelle, 1)); }
.ins-menu-ligne { display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; color: var(--fm-illu-doux); }
.ins-menu-ligne .ins-sys { width: 16px; height: 16px; }
.ins-menu-ligne.ins-cible { padding: 7px 10px; border-radius: 8px;
  font-weight: 600; color: var(--fm-illu-texte); }
.ins-menu-ligne.ins-cible .ins-sys { width: 18px; height: 18px; }
.ins-feuille { width: 90%; display: flex; align-items: center;
  justify-content: space-between; gap: 6px; font-size: calc(14px * var(--fm-echelle, 1)); }
.ins-feuille-titre { flex: 1; min-width: 0; text-align: center; font-size: calc(12px * var(--fm-echelle, 1));
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-feuille-ios .ins-systeme { color: var(--fm-illu-ios); }
.ins-feuille-android .ins-systeme { color: var(--fm-illu-android); }
.ins-feuille .ins-cible { font-weight: 600; }
.ins-ecran-accueil { display: flex; align-items: flex-end; gap: 14px; }
.ins-app { width: 42px; height: 42px; border-radius: 11px; }
.ins-app-verte { background: var(--fm-illu-app-verte); }
.ins-app-bleue { background: var(--fm-illu-app-bleue); }
.ins-app-amm { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ins-app-cadre { display: block; border-radius: 13px; }
.ins-tuile-app { width: 46px; height: 46px; border-radius: 11px; }
.ins-tuile-app img { width: 34px; height: 34px; }
.ins-app-nom { font-size: calc(10px * var(--fm-echelle, 1)); color: var(--fm-illu-texte); }

/* --- Événements : la liste et la fiche (FO-EVT-01, FO-EVT-02) ----------------
   Maquettes « Front2 - Evenements ». Une seule DA : l'image est le seul
   élément propre à un événement, il n'y a plus ni couleurs ni polices par
   événement (décision du 3 octobre 2026). Trois largeurs de référence :
   téléphone 375 px, tablette 834 px, bureau 1440 px. */

/* Les pastilles d'état du front : arrondies, en IBM Plex Sans — jamais la
   chasse fixe de l'image qu'elles recouvrent. */
body.fm .mb-etat { border-radius: 20px; padding: 3px 9px; font-size: calc(11px * var(--fm-echelle, 1));
  font-family: inherit; }
/* Les marges des paragraphes sont celles des composants : la règle
   générale de la page (`.ef-page p`) ne s'y applique pas. */
.ef-page .fm-evt-carte p, .ef-page .fm-evt-fiche p { margin: 0; }

.fm-evt-grille { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 40rem) {
  .fm-evt-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .fm-evt-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 80rem) {
  .fm-evt-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* L'image d'attente : des rayures pâles, sans texte — un « visuel » écrit
   sur la carte se lirait comme un oubli. */
.fm-evt-image, .fm-evt-banniere {
  position: relative; flex: none;
  background: repeating-linear-gradient(135deg,
    var(--fm-action-pale), var(--fm-action-pale) 8px,
    var(--fm-surface-2) 8px, var(--fm-surface-2) 16px);
}
.fm-evt-image img, .fm-evt-banniere img {
  display: block; width: 100%; height: 100%; object-fit: cover; }

.fm-evt-carte { position: relative; display: flex; flex-direction: column;
  overflow: hidden; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 12px; }
.fm-evt-image { height: 118px; }
.fm-evt-image .mb-etat { position: absolute; top: 10px; left: 10px; }
@media (min-width: 40rem) { .fm-evt-image { height: 120px; } }
@media (min-width: 64rem) { .fm-evt-image { height: 140px; } }
.fm-evt-corps { display: flex; flex-direction: column; gap: 7px; flex: 1;
  padding: 13px 14px; }
body.fm .fm-evt-corps h3 { margin: 0; font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.3; }
.fm-evt-surtitre { margin: 0; font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .08em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-evt-extrait { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5;
  color: var(--fm-texte-doux); }
.fm-evt-prix { display: flex; align-items: baseline; gap: 8px;
  margin-top: auto; padding-top: 8px; border-top: 1px solid var(--fm-bordure-fine); }
.fm-evt-prix .montant { font-family: var(--chiffres); font-size: calc(14px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-evt-prix .reste { margin-left: auto; }
.fm-evt-prix .reste, .fm-evt-montant .reste {
  font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-evt-prix .reste.attention, .fm-evt-montant .reste.attention,
.fm-evt-reperes dd.attention { color: var(--statut-attention); }

/* Toucher la carte ouvre la fiche : le lien du titre s'étend à toute la
   carte, et le bouton passe au-dessus. */
body.fm a.fm-evt-lien { color: var(--fm-texte); text-decoration: none; }
.fm-evt-lien::after { content: ""; position: absolute; inset: 0;
  border-radius: 12px; }
.fm-evt-lien:focus-visible { outline: none; }
.fm-evt-lien:focus-visible::after { outline: 2px solid var(--fm-action-txt);
  outline-offset: -2px; }
.fm-evt-action { position: relative; z-index: 1; margin-top: auto; }
.fm-evt-prix + .fm-evt-action { margin-top: 2px; }
.fm-evt-vide .note { margin: 4px 0 0; }

/* La fiche. L'image en tête, sous la barre haute — au téléphone, le bandeau
   d'écran et son retour (décision du 9 octobre 2026). Sans photo, pas de
   grand aplat rayé : pas d'image du tout. */
.fm-evt-banniere { height: 200px; }
@media (min-width: 40rem) { .fm-evt-banniere { height: 220px; } }
@media (min-width: 64rem) { .fm-evt-banniere { height: 300px; } }

.fm-evt-fiche { display: flex; flex-direction: column; gap: 20px;
  padding-bottom: max(76px, calc(var(--fm-barre-action, 0px) + 1px)); }
@media (min-width: 40rem) {
  .fm-evt-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 290px;
    gap: 28px; align-items: start; padding: var(--e-2) 0 0; }
}
@media (min-width: 64rem) {
  .fm-evt-fiche { grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; }
}
@media (min-width: 80rem) {
  .fm-evt-fiche { grid-template-columns: minmax(0, 1fr) 380px; }
}
.fm-evt-contenu { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 64rem) { .fm-evt-contenu { max-width: 720px; } }

.fm-evt-tete { display: flex; flex-direction: column; gap: 8px; }
.fm-evt-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center;
  gap: 7px; }
.fm-evt-type { font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  letter-spacing: .08em; text-transform: uppercase; color: var(--fm-texte-doux); }
body.fm .fm-evt-tete h1 { margin: 0; font-size: calc(24px * var(--fm-echelle, 1)); font-weight: 800;
  line-height: 1.15; color: var(--fm-texte); }
@media (min-width: 40rem) { body.fm .fm-evt-tete h1 { font-size: calc(28px * var(--fm-echelle, 1)); } }
@media (min-width: 64rem) { body.fm .fm-evt-tete h1 { font-size: calc(32px * var(--fm-echelle, 1)); } }
.fm-evt-promesse { margin: 0; font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 600;
  line-height: 1.4; color: var(--fm-action-txt); }
@media (min-width: 64rem) { .fm-evt-promesse { font-size: calc(18px * var(--fm-echelle, 1)); } }

/* Les quatre repères : dates, lieu, tarif, places — deux par ligne. */
.fm-evt-reperes { margin: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fm-evt-reperes > div { min-width: 0; padding: 10px 12px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); }
.fm-evt-reperes dt, body.fm .fm-evt-titre-section {
  font-family: var(--fm-titre); font-size: calc(10px * var(--fm-echelle, 1)); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-evt-reperes dd { margin: 2px 0 0; font-family: var(--chiffres);
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte);
  overflow-wrap: anywhere; }

.fm-evt-section { display: flex; flex-direction: column; gap: 10px; }
body.fm .fm-evt-titre-section { margin: 0; display: flex; align-items: baseline;
  gap: 8px; font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .14em; }
.fm-evt-compte { font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 400; letter-spacing: 0;
  text-transform: none; }
.fm-evt-texte { font-size: calc(15px * var(--fm-echelle, 1)); line-height: 1.7; color: var(--fm-texte); }
.ef-page .fm-evt-texte p { margin: 0 0 10px; }
.ef-page .fm-evt-texte > :last-child { margin-bottom: 0; }
.fm-evt-compris { list-style: none; margin: 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: 7px; }
.fm-evt-compris li { padding: 6px 11px; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte);
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 20px; }

/* La galerie : quatre vignettes, cinq au bureau ; la dernière dit combien
   d'autres suivent. */
.fm-evt-galerie { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.fm-evt-galerie li:nth-child(5) { display: none; }
.fm-evt-galerie a { position: relative; display: block; height: 66px;
  overflow: hidden; border-radius: 8px; border: 1px solid var(--fm-bordure);
  background: var(--fm-surface-2); }
.fm-evt-galerie img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fm-evt-reste { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; font-size: calc(13px * var(--fm-echelle, 1)); background: var(--fm-nuit);
  color: var(--fm-sur-plein); }
.fm-evt-reste.large { display: none; }
@media (min-width: 40rem) { .fm-evt-galerie a { height: 78px; } }
@media (min-width: 64rem) {
  .fm-evt-galerie { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fm-evt-galerie li:nth-child(5) { display: block; }
  .fm-evt-galerie a { height: 110px; }
  .fm-evt-reste.court { display: none; }
  .fm-evt-reste.large { display: flex; }
}

/* La visionneuse : plein écran, sur fond nuit dans les deux thèmes. */
.fm-visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--fm-nuit);
  color: var(--fm-sur-plein); }
.fm-visionneuse[open] { display: flex; flex-direction: column; }
.fm-visionneuse::backdrop { background: var(--fm-voile); }
.fm-visionneuse-tete { display: flex; align-items: center;
  justify-content: space-between; padding: 8px 12px 8px 16px; }
.fm-visionneuse-fermer { min-width: 44px; min-height: 44px; border: 0;
  background: none; color: var(--fm-sur-plein); font-size: calc(28px * var(--fm-echelle, 1)); line-height: 1;
  cursor: pointer; }
.fm-visionneuse-photos { flex: 1; min-height: 0; display: flex;
  align-items: center; justify-content: center; padding: 0 12px; }
.fm-visionneuse-photos figure { margin: 0; display: flex; flex-direction: column;
  align-items: center; gap: 8px; max-width: 100%; }
.fm-visionneuse-photos figure[hidden] { display: none; }
.fm-visionneuse-photos img { max-width: 100%; max-height: calc(100vh - 170px);
  object-fit: contain; }
.fm-visionneuse-photos figcaption { font-size: calc(13px * var(--fm-echelle, 1));
  color: color-mix(in srgb, var(--fm-sur-plein) 78%, transparent); }
.fm-visionneuse-pied { display: flex; justify-content: center; gap: 12px;
  padding: 12px 16px 20px; }
body.fm .fm-visionneuse .mb-bouton-creux { gap: 6px; color: var(--fm-sur-plein);
  border-color: var(--fm-sur-plein); }
.fm-visionneuse .fm-icone { width: 16px; height: 16px; }

/* L'inscription. Au téléphone : le prix, ce qui reste, et le bouton, collés
   au-dessus de la barre d'onglets. Au-delà : une colonne fixe, avec le
   tarif de la personne, les conditions de paiement et la durée. */
.fm-evt-montant { display: flex; flex-direction: column; min-width: 0; }
.fm-evt-montant .montant { font-family: var(--chiffres); font-size: calc(16px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-evt-montant .fm-evt-etat { font-family: var(--fm-titre); font-size: calc(14px * var(--fm-echelle, 1));
  font-weight: 700; }
.fm-evt-montant .note, .fm-evt-detail, .fm-evt-duree { display: none; }
.fm-evt-inscription .fm-evt-bouton { flex: none; margin-left: auto;
  padding: 14px 24px; }
/* Au téléphone, le prix ne se coupe jamais : quand le texte est grand, c'est
   le bouton qui passe sur deux lignes. */
@media (max-width: 39.99rem) {
  .fm-evt-montant { flex: none; }
  .fm-evt-montant .montant, .fm-evt-montant .reste { white-space: nowrap; }
  .fm-evt-inscription .fm-evt-bouton { flex: 0 1 auto; min-width: 0;
    text-align: center; }
}
@media (min-width: 40rem) {
  .fm-evt-inscription { gap: 12px; padding: 16px; border-radius: 12px;
    background: var(--fm-surface); border-color: var(--fm-bordure); }
  .fm-evt-montant { flex-direction: row; flex-wrap: wrap; align-items: baseline;
    gap: 2px 8px; }
  .fm-evt-montant .montant { font-size: calc(24px * var(--fm-echelle, 1)); }
  .fm-evt-montant .fm-evt-etat { font-size: calc(18px * var(--fm-echelle, 1)); }
  .fm-evt-montant .note { display: inline; font-size: calc(13px * var(--fm-echelle, 1));
    color: var(--fm-texte-doux); }
  .fm-evt-montant .reste { flex-basis: 100%; }
  .fm-evt-detail { display: block; margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55;
    color: var(--fm-texte-doux); }
  .fm-evt-inscription .fm-evt-bouton { margin-left: 0; padding: 15px;
    font-size: calc(16px * var(--fm-echelle, 1)); }
  .fm-evt-duree { display: block; margin: 0; font-size: calc(11px * var(--fm-echelle, 1)); text-align: center;
    color: var(--fm-texte-doux); }
}

/* « Être prévenu » : un formulaire, qui passe au-dessus du lien étendu de la
   carte comme un bouton ; une fois demandé, une phrase à sa place. */
form.fm-evt-action, form.fm-evt-formulaire { margin: 0; }
.fm-evt-prevenu { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.45;
  color: var(--statut-ok); }
.fm-evt-carte .fm-evt-prevenu { padding: 10px 0 2px; }
.fm-evt-inscription .fm-evt-prevenu { margin-left: auto; text-align: right;
  max-width: 60%; }
.fm-evt-inscription .fm-evt-prevenu p { margin: 0; }
.fm-evt-inscription .fm-evt-formulaire { flex: none; margin-left: auto; }
.fm-evt-formulaire .mb-bouton-creux { padding: 14px 24px; }
.fm-evt-retirer { min-height: var(--touche-min); padding: 0; border: 0;
  background: none; font: inherit; font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); text-decoration: underline; cursor: pointer; }
@media (min-width: 40rem) {
  .fm-evt-inscription .fm-evt-prevenu { margin-left: 0; text-align: left;
    max-width: none; }
  .fm-evt-inscription .fm-evt-formulaire { margin-left: 0; }
  .fm-evt-formulaire .mb-bouton-creux { padding: 15px; font-size: calc(16px * var(--fm-echelle, 1)); }
}


/* --- Le parcours d'inscription (FO-INS-01 à 04B) ------------------------------
   Maquettes « Front2 - Inscription ». Au téléphone, des segments sous le
   bandeau et une barre d'action collée en bas — le total et le bouton — à la
   place de la barre d'onglets. Au-delà, une colonne fixe à droite : l'image
   de l'événement, le récapitulatif, le bouton. Au bureau, les étapes sont
   nommées et numérotées, les terminées cochées. */

.fm-ins-etapes { display: none; }
@media (min-width: 64rem) {
  body.fm-parcours .ef-jalons { display: none; }
  .fm-ins-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0;
    list-style: none; margin: 0 auto; padding: 12px var(--e-5) 14px;
    max-width: var(--mb-large); }
  .fm-ins-etapes li { display: flex; align-items: center; gap: 8px;
    font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); white-space: nowrap; }
  .fm-ins-etapes li + li::before { content: ""; width: 28px; height: 2px;
    margin: 0 10px; background: var(--fm-bordure-fine); }
  .fm-ins-etapes .rond { display: inline-flex; align-items: center;
    justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--fm-bordure); font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600; }
  .fm-ins-etapes li.courante { color: var(--fm-texte); font-weight: 700; }
  .fm-ins-etapes li.courante .rond { border: 2px solid var(--fm-action-txt);
    color: var(--fm-action-txt); }
  .fm-ins-etapes li.fait .rond { border-color: var(--statut-ok);
    color: var(--statut-ok); }
}

.fm-ins { display: flex; flex-direction: column; gap: var(--e-5);
  padding-bottom: max(84px, calc(var(--fm-barre-action, 0px) + 9px)); }
.fm-ins-contenu { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ef-page .fm-ins-contenu p.fm-ins-chapeau { margin: -6px 0 0; }
body.fm .fm-ins-h2 { margin: 6px 0 0; font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); }
.fm-ins-chapeau { font-size: calc(14px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte-doux); }
.fm-ins-requis { color: var(--statut-attention); font-weight: 700; }
.fm-ins-manque { display: block; margin-top: 6px; font-size: calc(13px * var(--fm-echelle, 1));
  color: var(--statut-attention); }
.fm-ins-manque[hidden] { display: none; }
.fm-ins-retour { margin: 4px 0 0; }
.fm-ins-info { padding: 12px 14px; border-radius: var(--fm-r-carte);
  background: var(--fm-action-pale); border: 1px solid var(--fm-action-bord);
  font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55; color: var(--fm-texte); }
.ef-page .fm-ins-info p { margin: 0; }
.ef-page .fm-ins-info p + p { margin-top: 4px; }
.fm-ins-info .titre { font-weight: 700; }
/* Le code d'inscription, au paiement du solde d'une pré-inscription basculée. */
.fm-ins-code { margin-bottom: 16px; }

/* Les options : rayon 12, l'active cernée de violet sur son fond. */
body.fm.fm-parcours .ef-choix .ef-carte { border-radius: 12px; }
body.fm.fm-parcours .ef-choix input:checked + .ef-carte {
  border-color: var(--fm-action-txt); background: var(--fm-action-pale); }
body.fm.fm-parcours .ef-choix-options > label { border-radius: 20px; }
body.fm.fm-parcours .ef-choix-options > label:has(input:checked) {
  border-color: var(--fm-action-txt); background: var(--fm-action-pale);
  color: var(--fm-texte); }

/* La colonne de droite — au téléphone, la barre d'action. */
.fm-ins-recap { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--fm-surface); border-top: 1px solid var(--fm-bordure-fine); }
.fm-ins-evenement, .fm-ins-lignes { display: none; }
.ef-page .fm-ins-recap p { margin: 0; }
.fm-ins-total { display: flex; flex-direction: column; min-width: 0; }
.fm-ins-total > span:first-child { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ins-total .mb-chiffre { font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.fm-ins-bouton { flex: none; margin-left: auto; padding: 14px 22px; }
@media (max-width: 39.99rem) {
  /* La barre d'action remplace la barre d'onglets pendant les étapes. */
  body.fm-parcours-barre .mb-haut { display: none; }
  body.fm-avec-bandeau-appli.fm-parcours-barre .fm-ins-recap {
    margin-bottom: var(--fm-bandeau-appli, 0px); }
}
/* La confirmation n'a plus d'action à mener : la colonne redevient un bloc. */
.fm-ins-recap.libre { position: static; flex-direction: column; align-items: stretch;
  padding: 14px; border: 1px solid var(--fm-bordure); border-radius: 12px; }
.fm-ins-recap.libre .fm-ins-bouton { margin-left: 0; }
.fm-ins-recap.libre .fm-ins-ligne { display: flex; justify-content: space-between;
  gap: 12px; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ins-recap.libre .fm-ins-ligne .mb-chiffre { color: var(--fm-texte); }

@media (min-width: 40rem) {
  .fm-ins { display: grid; grid-template-columns: minmax(0, 1fr) 290px;
    gap: 28px; align-items: start; padding-bottom: 0; }
  .fm-ins-recap { position: sticky; top: calc(var(--mb-haut) + var(--e-4));
    left: auto; right: auto;
    bottom: auto; z-index: auto; flex-direction: column; align-items: stretch;
    gap: 12px; padding: 0; background: none; border: 0; }
  .fm-ins-evenement { display: block; overflow: hidden; background: var(--fm-surface);
    border: 1px solid var(--fm-bordure); border-radius: 12px; }
  .fm-ins-image { height: 120px; background: repeating-linear-gradient(135deg,
    var(--fm-action-pale), var(--fm-action-pale) 8px,
    var(--fm-surface-2) 8px, var(--fm-surface-2) 16px); }
  .fm-ins-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .fm-ins-evenement-corps { display: flex; flex-direction: column; gap: 4px;
    padding: 14px; }
  .fm-ins-dates { font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .08em; text-transform: uppercase;
    color: var(--fm-texte-doux); }
  .fm-ins-titre { font-family: var(--fm-titre); font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 800;
    color: var(--fm-texte); }
  .fm-ins-lieu { font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
  .fm-ins-lignes { display: flex; flex-direction: column; gap: 9px; padding: 14px;
    background: var(--fm-surface); border: 1px solid var(--fm-bordure);
    border-radius: 12px; }
  .fm-ins-ligne { display: flex; justify-content: space-between; gap: 12px;
    font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
  .fm-ins-ligne .mb-chiffre { color: var(--fm-texte); }
  .fm-ins-ligne.remise .mb-chiffre { color: var(--statut-ok); }
  .fm-ins-ligne.resultat { padding-top: 9px; border-top: 1px solid var(--fm-bordure-fine);
    font-weight: 600; }
  .fm-ins-total { flex-direction: row; justify-content: space-between;
    align-items: baseline; padding: 0 2px; }
  .fm-ins-total > span:first-child { font-size: calc(13px * var(--fm-echelle, 1)); }
  .fm-ins-total .mb-chiffre { font-size: calc(20px * var(--fm-echelle, 1)); }
  .fm-ins-bouton { margin-left: 0; padding: 15px; font-size: calc(16px * var(--fm-echelle, 1)); }
  .fm-ins-telephone { display: none; }
  .fm-ins-recap.libre { padding: 0; border: 0; }
  .fm-ins-recap.libre .fm-ins-ligne { padding: 0 2px; }
}
@media (min-width: 64rem) {
  .fm-ins { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
  .fm-ins-contenu { max-width: 640px; }
  .fm-ins-image { height: 150px; }
}
@media (min-width: 80rem) {
  .fm-ins { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* --- Annuaire (FO-ANN-01 à 08) ----------------------------------------------
   Maquettes « Front2 - Annuaire ». La liste au téléphone, la fiche en page ;
   au-delà de 40 rem, la liste à gauche (320 px, 420 px au bureau) et la fiche
   à droite, chargée par le script. Les écrans à une colonne (fiche seule,
   accès refusé) tiennent dans 480 px. Jetons seulement : les deux thèmes
   suivent. */

/* Les marges des paragraphes sont celles des composants (`.ef-page p` ne
   s'y applique pas). */
.fm-ann-tete p, .fm-ann-etat p, .fm-ann-tuile-tete p { margin: 0; }
/* `minmax(0, 1fr)`, pas `1fr` : une colonne `1fr` s'élargit jusqu'à sa plus
   longue ligne. En taille « Très grand », un nom et son titre ne tenaient plus
   en 375 px, et la liste en prenait 466 (10 octobre 2026). */
.fm-ann { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.fm-ann-liste { min-width: 0; }
.fm-ann-volet { display: none; }
@media (min-width: 40rem) {
  .fm-ann { grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
  .fm-ann-volet { display: block; position: sticky; top: calc(var(--mb-haut) + 16px);
    background: var(--fm-surface); border: 1px solid var(--fm-bordure);
    border-radius: 12px; padding: 22px 18px; min-height: 320px; }
  .fm-ann-volet:focus { outline: none; }
}
@media (min-width: 64rem) { .fm-ann { grid-template-columns: 420px minmax(0, 1fr); } }
.fm-ann-invite { margin: 40px 0 0; text-align: center; color: var(--fm-texte-doux);
  font-size: calc(14px * var(--fm-echelle, 1)); }

/* Le champ de recherche : 48 px, filet violet ; dessous, « Offices
   seulement » (case de 20 px, 44 px à toucher) et l'ordre, A–Z. */
.fm-ann-chercher { margin: 0; }
.fm-ann-recherche { display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 12px; background: var(--fm-surface);
  border: 1.5px solid var(--fm-action-txt); border-radius: 12px; }
.fm-ann-recherche .fm-icone { width: 19px; height: 19px; flex: none;
  color: var(--fm-texte-doux); }
.fm-ann-recherche input { flex: 1; min-width: 0; height: 100%; border: 0;
  background: transparent; color: var(--fm-texte); font: inherit; font-size: calc(16px * var(--fm-echelle, 1)); }
.fm-ann-recherche input:focus { outline: none; }
/* Une seule croix : celle de la maquette, que le script montre et cache. */
.fm-ann .fm-ann-recherche input::-webkit-search-cancel-button { -webkit-appearance: none;
  appearance: none; }
.fm-ann-recherche:focus-within { outline: 3px solid var(--fm-action-pale); }
.fm-ann-effacer { display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; color: var(--fm-texte-doux); }
.fm-ann-effacer .fm-icone { width: 17px; height: 17px; }
/* Ce que le filtre à la frappe cache : la règle l'emporte sur les `display`
   des lignes, des lettres et des états. */
.fm-ann [hidden] { display: none; }
.fm-ann-ligne.derniere { border-bottom: 0; }

.fm-ann-options { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px;
  margin-top: 2px; }
.fm-ann-offices { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 9px;
  min-height: 44px; cursor: pointer; font-size: calc(14px * var(--fm-echelle, 1));
  color: var(--fm-texte); }
.fm-ann-offices input { width: 20px; height: 20px; margin: 0; flex: none;
  accent-color: var(--fm-action); cursor: pointer; }
.fm-ann-ordre { margin-left: auto; font-family: var(--chiffres);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ann-chercher noscript .mb-bouton-creux { margin-top: 6px; }
/* « À valider » (diacres, administrateurs) : combien attendent. */
.fm-ann-compte { margin: 10px 0 6px; font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ann-lettre { margin: 14px 0 4px; font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  font-weight: 600; letter-spacing: .1em; color: var(--fm-texte-doux); }
.fm-ann-message { margin: 14px 2px; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ann-etat { margin: 18px 0; padding: 20px 16px; text-align: center;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-radius: 12px; }
.fm-ann-etat .titre { font-family: var(--fm-titre); font-weight: 700; font-size: calc(16px * var(--fm-echelle, 1));
  color: var(--fm-texte); }
.fm-ann-etat .note { margin-top: 6px; }
/* E5 — « Réessayer » respire sous le texte qui l'explique. */
.fm-ann-etat p:has(> [data-reessayer]) { margin-top: 14px; }

/* La ligne : 64 px au moins, photo ou initiales de 44 px, bouton d'appel de
   40 px. La ligne active, au-delà du téléphone, porte un filet violet. */
.fm-ann-lignes { list-style: none; margin: 0; padding: 0; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure-fine); border-radius: 12px; overflow: hidden; }
.fm-ann-ligne { display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 10px 16px; border-bottom: 1px solid var(--fm-bordure-fine);
  border-left: 3px solid transparent; }
.fm-ann-ligne:last-child { border-bottom: 0; }
.fm-ann-ligne.active { border-left-color: var(--fm-action-txt);
  background: var(--fm-action-pale); }
body.fm a.fm-ann-ouvrir, body.fm span.fm-ann-ouvrir { display: flex; align-items: center; gap: 12px; flex: 1;
  min-width: 0; color: var(--fm-texte); text-decoration: none; }
.fm-ann-ouvrir .corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-ann-ouvrir .nom { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.fm-ann-ouvrir .detail { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-ann-ouvrir .contact { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-ann-ouvrir:focus-visible { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; border-radius: 6px; }

.fm-ann-portrait { display: block; flex: none; border-radius: 50%;
  border: 1px solid var(--fm-bordure); object-fit: cover; object-position: 50% 20%; }
.fm-ann-portrait.initiales { display: flex; align-items: center; justify-content: center;
  background: var(--fm-action-pale); color: var(--fm-action-txt);
  font-family: var(--fm-titre); font-weight: 700; }
.fm-ann-portrait.petit { width: 44px; height: 44px; font-size: calc(15px * var(--fm-echelle, 1)); }
.fm-ann-portrait.grand { width: 132px; height: 132px; font-size: calc(42px * var(--fm-echelle, 1)); }
.fm-ann-fiche.diacre .fm-ann-portrait.grand { width: 112px; height: 112px; font-size: calc(38px * var(--fm-echelle, 1)); }

body.fm a.fm-ann-rond { display: flex; align-items: center; justify-content: center;
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
body.fm a.fm-ann-rond.grand { width: 44px; height: 44px; }
.fm-ann-rond .fm-icone { width: 19px; height: 19px; }

/* La fiche : photo ronde de 132 px (112 vue diacre), nom en Montserrat
   22 px, coordonnées en carte arrondie, boutons ronds de 44 px. */
.fm-ann-seule { max-width: 480px; margin: 0 auto; }
.fm-ann-tete { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 6px 0 16px; text-align: center; }
.fm-ann-tete .fm-ann-portrait.grand { border: 3px solid var(--fm-surface);
  outline: 1px solid var(--fm-bordure); }
body.fm .fm-ann-tete h2 { margin: 4px 0 0; font-size: calc(22px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.2; color: var(--fm-texte); }
.fm-ann-tete .detail { font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* L'ordre du 9 octobre 2026 : « Frère » ou « Sœur » en surtitre, le nom et
   son titre en pastille, l'église et son logo (16 px en ligne, 22 px sur la
   fiche) ; « Autre » : un cercle pointillé. */
.fm-ann-surtitre { font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600; letter-spacing: .04em;
  color: var(--fm-texte-doux); }
.fm-ann-tete .fm-ann-surtitre { margin: 0; padding-top: 4px; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-ann-ouvrir .nom-ligne { display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 7px; min-width: 0; }
/* En « Grand » et « Très grand », le nom, l'église et le contact passent à la
   ligne plutôt que d'être coupés : qui grossit le texte veut le lire en
   entier. Le titre et « Inscrit » descendent sous le nom s'il le faut. */
body.fm[data-taille="grand"] .fm-ann-ouvrir .nom,
body.fm[data-taille="tres_grand"] .fm-ann-ouvrir .nom,
body.fm[data-taille="grand"] .fm-ann-eglise .nom-eglise,
body.fm[data-taille="tres_grand"] .fm-ann-eglise .nom-eglise,
body.fm[data-taille="grand"] .fm-ann-ouvrir .contact,
body.fm[data-taille="tres_grand"] .fm-ann-ouvrir .contact {
  white-space: normal; overflow-wrap: anywhere; }
.fm-ann-ouvrir .nom-ligne .nom { min-width: 0; }
.fm-ann-titre { display: inline-flex; align-items: center; flex: none; padding: 2px 8px;
  border-radius: 20px; font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600; white-space: nowrap;
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.fm-ann-eglise { display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ann-eglise .nom-eglise { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-ann-eglise.grand { justify-content: center; gap: 7px; font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-ann-logo { display: block; flex: none; border-radius: 50%; }
.fm-ann-logo.petit { width: 16px; height: 16px; }
.fm-ann-logo.grand { width: 22px; height: 22px; }
.fm-ann-logo.autre { box-sizing: border-box; border: 1.5px dashed var(--fm-texte-doux); }
.fm-ann-tete > p { margin: 0; }
/* Dans la fiche seulement, le titre est plus grand qu'en liste : 16 px,
   Montserrat (maquette « Front2 - Annuaire 01 », 10 octobre 2026). */
.fm-ann-tete .fm-ann-titre { padding: 5px 14px; font-family: var(--fm-titre);
  font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 700; white-space: normal; }

/* FO-ANN-09 — la photo partagée s'ouvre en grand : une loupe la signale. */
button.fm-ann-agrandir { position: relative; padding: 0; border: 0; background: none;
  border-radius: 50%; cursor: zoom-in; }
button.fm-ann-agrandir:focus-visible { outline: 2px solid var(--fm-action-txt);
  outline-offset: 3px; }
.fm-ann-loupe { position: absolute; right: 2px; bottom: 4px; display: flex;
  align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--fm-action); color: var(--fm-sur-plein); }
.fm-ann-loupe .fm-icone { width: 16px; height: 16px; }
.fm-ann-photo { width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--fm-nuit);
  color: var(--fm-sur-plein); }
.fm-ann-photo[open] { display: flex; flex-direction: column; }
.fm-ann-photo::backdrop { background: var(--fm-voile); }
.fm-ann-photo-tete { display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 14px; }
.fm-ann-photo-echap { display: none; font-size: calc(12px * var(--fm-echelle, 1));
  color: color-mix(in srgb, var(--fm-sur-plein) 78%, transparent); }
.fm-ann-photo-fermer { display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--fm-sur-plein) 14%, transparent);
  color: var(--fm-sur-plein); }
.fm-ann-photo-fermer .fm-icone { width: 20px; height: 20px; }
.fm-ann-photo figure { flex: 1; min-height: 0; margin: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 0 18px 24px; }
.fm-ann-photo img { display: block; width: min(100%, 600px); aspect-ratio: 1;
  max-height: calc(100vh - 230px); object-fit: cover; object-position: 50% 20%;
  border-radius: 16px; -webkit-touch-callout: none; -webkit-user-select: none;
  user-select: none; }
.fm-ann-photo figcaption { display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; }
.fm-ann-photo figcaption .nom { font-family: var(--fm-titre); font-size: calc(20px * var(--fm-echelle, 1));
  font-weight: 800; }
.fm-ann-photo figcaption .detail { font-size: calc(13px * var(--fm-echelle, 1));
  color: color-mix(in srgb, var(--fm-sur-plein) 78%, transparent); }
.fm-ann-photo .fm-ann-titre { font-size: calc(12px * var(--fm-echelle, 1)); padding: 3px 10px;
  background: color-mix(in srgb, var(--fm-sur-plein) 16%, transparent);
  color: var(--fm-sur-plein); }
/* Le repère d'une photo que les membres ne voient pas, centré sous la
   légende (le `align-self` des lignes de liste ne vaut pas ici). */
.fm-ann-photo .fm-ann-pastille { align-self: center; }
.fm-ann-photo-indice { margin: 0; padding: 0 0 22px; text-align: center; font-size: calc(12px * var(--fm-echelle, 1));
  color: color-mix(in srgb, var(--fm-sur-plein) 78%, transparent); }
@media (min-width: 64rem) {
  .fm-ann-photo-echap { display: inline; }
  .fm-ann-photo-indice { display: none; }
  .fm-ann-photo figcaption { flex-direction: row; align-items: baseline; gap: 12px; }
  .fm-ann-photo figcaption .nom { font-size: calc(22px * var(--fm-echelle, 1)); }
}
.fm-ann-pastille { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 20px; font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--statut-attention); background: var(--statut-attention-fond);
  border: 1px solid var(--statut-attention-bord); }
.fm-ann-pastille .fm-icone { width: 13px; height: 13px; }
/* Dans une ligne de liste : le repère tient sous le nom, sans l'écraser. */
.fm-ann-pastille.petite { align-self: flex-start; padding: 2px 8px; font-size: calc(11px * var(--fm-echelle, 1)); }
.fm-ann-coordonnees { list-style: none; margin: 0; padding: 0; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 12px; overflow: hidden; }
.fm-ann-coordonnees li { display: flex; align-items: center; gap: 12px; min-height: 60px;
  padding: 12px 14px; border-bottom: 1px solid var(--fm-bordure-fine); }
.fm-ann-coordonnees li:last-child { border-bottom: 0; }
.fm-ann-coordonnees li > .fm-icone { width: 20px; height: 20px; flex: none;
  color: var(--fm-texte-doux); }
.fm-ann-coordonnees .corps { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.fm-ann-coordonnees .libelle { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .1em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-ann-coordonnees .valeur { font-family: var(--chiffres); font-size: calc(14px * var(--fm-echelle, 1));
  line-height: 1.45; color: var(--fm-texte); overflow-wrap: anywhere; }
.fm-ann-coordonnees .valeur.texte { font-family: inherit; }
.fm-ann-pied { margin-top: 12px; text-align: center; font-family: var(--chiffres);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* R41 — hors matrice : le responsable légal (diacres, groupe des
   informations d'un membre) et les inscriptions en cours (ce groupe seul),
   sous les coordonnées ; un repère dit qui voit le bloc. Les statistiques de
   la liste, sous la recherche. */
.fm-ann-bloc { margin-top: 18px; }
body.fm .fm-ann-bloc-titre { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px 10px; margin: 0 2px 8px; font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); }
.fm-ann-repere { margin-left: auto; font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fm-texte-doux); }
.fm-ann-bloc .fm-ann-message { margin: 0 2px; }
.fm-ann-inscriptions { list-style: none; margin: 0; padding: 0; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 12px; overflow: hidden; }
.fm-ann-inscriptions li { border-bottom: 1px solid var(--fm-bordure-fine); }
.fm-ann-inscriptions li:last-child { border-bottom: 0; }
body.fm .fm-ann-inscription { display: flex; align-items: center; gap: 10px; min-height: 60px;
  padding: 12px 14px; color: var(--fm-texte); text-decoration: none; }
.fm-ann-inscription .corps { display: flex; flex-direction: column; gap: 2px; flex: 1;
  min-width: 0; }
.fm-ann-inscription .nom { font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; }
.fm-ann-inscription .detail { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ann-inscription > .fm-icone { width: 16px; height: 16px; flex: none;
  color: var(--fm-texte-doux); }
a.fm-ann-inscription:focus-visible { outline: 2px solid var(--fm-action-txt);
  outline-offset: -2px; }
.fm-ann-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin: 10px 2px 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte); }

/* FO-ANN-08 — l'accès refusé, en colonne de 480 px. */
.fm-ann-reserve { display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-top: 24px; text-align: center; }
.fm-ann-reserve-icone { width: 44px; height: 44px; color: var(--fm-action-txt); }
.fm-ann-reserve .mb-tuile { width: 100%; text-align: left; }

/* E4 — pendant la recherche, un squelette de lignes, pas une rotation seule. */
.fm-ann-squelette { list-style: none; margin: 10px 0 0; padding: 0; }
.fm-ann-squelette li { display: flex; align-items: center; gap: 12px; height: 64px;
  padding: 10px 16px; }
.fm-ann-squelette .rond { width: 44px; height: 44px; border-radius: 50%;
  background: var(--fm-surface-2); }
.fm-ann-squelette .barre { height: 12px; border-radius: 6px; background: var(--fm-surface-2); }
.fm-ann-squelette .barres { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fm-ann-squelette .barre.courte { width: 55%; }
.fm-ann-tuile-tete { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; }

/* L'interrupteur (FO-ANN-03, 04) : une case à cocher annoncée comme
   interrupteur, piste de 50 × 30, cible de 44 px. Violet allumé. */
.fm-interrupteur { position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 44px; cursor: pointer; }
.fm-interrupteur > .fm-icone { width: 20px; height: 20px; flex: none;
  color: var(--fm-action-txt); }
.fm-interrupteur .texte { flex: 1; font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; line-height: 1.35;
  color: var(--fm-texte); }
.fm-interrupteur input { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; appearance: none; background: none; border: 0; }
.fm-interrupteur .piste { position: relative; flex: none; width: 50px; height: 30px;
  border-radius: 15px; background: var(--fm-bordure); }
.fm-interrupteur .piste::after { content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--fm-surface); }
.fm-interrupteur input:checked ~ .piste { background: var(--fm-action); }
.fm-interrupteur input:checked ~ .piste::after { left: 23px; background: var(--fm-sur-plein); }
.fm-interrupteur input:focus-visible ~ .piste { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
/* Bloqué : on apparaît dans l'annuaire, et seule l'équipe en retire (R29). */
.fm-interrupteur:has(input:disabled), .fm-interrupteur input:disabled { cursor: default; }

/* Les accords de l'annuaire, en cartes à cocher (maquette « Front2 —
   Création de compte », CO6C) : la case de 22 px devant la phrase ; cochée,
   la carte se cerne de violet sur violet très pâle. Grisée tant qu'on
   n'apparaît pas (annuaire-accords.js). */
.fm-accords { display: flex; flex-direction: column; gap: 10px; }
.fm-accord { display: flex; align-items: flex-start; gap: 12px;
  min-height: var(--touche-min); box-sizing: border-box; padding: 13px 14px;
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  font-size: calc(15px * var(--fm-echelle, 1)); line-height: 1.45; color: var(--fm-texte); cursor: pointer; }
.fm-accord input { flex: none; width: 22px; height: 22px; margin: 0;
  accent-color: var(--fm-action); cursor: pointer; }
.fm-accord:has(input:checked) { border: 1.5px solid var(--fm-action-txt);
  padding: 12.5px 13.5px; background: var(--fm-action-pale); }
.fm-accord:has(input:focus-visible) { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.fm-accord:has(input:disabled) { color: var(--fm-texte-doux); cursor: default;
  background: transparent; border: 1px solid var(--fm-bordure-fine);
  padding: 13px 14px; }
.fm-accord input:disabled { cursor: default; }
/* « Apparaître » est une condition du compte (R29) : la case le dit. */
.fm-accord .detail { display: block; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
/* La note d'un mineur sous les cartes, à la création du compte comme au
   profil ; et l'erreur d'une étape hors d'un champ (photo, annuaire), en
   brique comme toute erreur — `.champ .message-erreur` ne l'atteint pas. */
.fm-accords .phrase { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55;
  color: var(--fm-texte-doux); }
body.fm p.message-erreur { margin: 0; font-size: var(--t-libelle); font-weight: 600;
  color: var(--statut-bloquant); }

.fm-ann-bloc { display: flex; flex-direction: column; gap: 11px; margin: 14px 0;
  padding: 14px; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; }
.fm-ann-bloc form { display: flex; flex-direction: column; gap: 11px; }
.fm-ann-bloc .phrase { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55;
  color: var(--fm-texte-doux); }
.fm-ann-confirme { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--statut-ok); }
.fm-ann-confirme:empty { display: none; }
body.fm a.fm-ann-voir { display: inline-flex; align-items: center; gap: 7px;
  font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-action-txt); text-decoration: none; }
.fm-ann-voir .fm-icone { width: 18px; height: 18px; }

/* FO-ANN-06 — la feuille de confirmation : fond voilé, coins de 20 px,
   poignée, conséquence dans un encadré « bloquant », motif obligatoire,
   bouton plein brique. Au téléphone, collée en bas et par-dessus la barre ;
   au-delà, centrée, 480 px. */
.fm-ann-tete .fm-ann-portrait.moyen { width: 96px; height: 96px; font-size: calc(33px * var(--fm-echelle, 1)); }
.fm-ann-voile { position: fixed; inset: 0; z-index: 60; background: var(--fm-voile); }
.fm-ann-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  display: flex; flex-direction: column; gap: 13px; padding: 10px 18px 22px;
  background: var(--fm-surface); border-radius: 20px 20px 0 0; }
@media (min-width: 40rem) {
  .fm-ann-feuille { left: 50%; right: auto; bottom: auto; top: 50%;
    width: 480px; transform: translate(-50%, -50%); border-radius: 20px; }
}
.fm-ann-poignee { align-self: center; width: 40px; height: 4px; border-radius: 2px;
  background: var(--fm-bordure); }
body.fm .fm-ann-feuille h2 { margin: 0; font-size: calc(19px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.3; color: var(--fm-texte); }
.fm-ann-consequence { margin: 0; padding: 11px 12px; font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.55;
  color: var(--fm-texte); background: var(--statut-bloquant-fond);
  border: 1px solid var(--statut-bloquant-bord); border-radius: 10px; }
.fm-ann-feuille form { display: flex; flex-direction: column; gap: 6px; }
.fm-ann-motif { font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte-doux); }
.fm-ann-motif .obligatoire { color: var(--statut-bloquant); }
.fm-ann-feuille input[name="motif"] { padding: 12px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); background: var(--fm-fond);
  border: 1.5px solid var(--fm-action-txt); border-radius: 10px; }
.fm-ann-aide { margin: 0; font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ann-erreur { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--statut-bloquant); }
.fm-ann-bouton-brique { margin-top: 8px; padding: 14px; border: 0; border-radius: 12px;
  font-family: var(--fm-titre); font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700; cursor: pointer;
  color: var(--fm-sur-plein); background: var(--statut-bloquant-plein); }
.fm-ann-bouton-brique:disabled { cursor: not-allowed; color: var(--fm-texte-doux);
  background: var(--fm-surface-2); }
body.fm a.fm-ann-annuler { align-self: center; padding: 10px; font-size: calc(15px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-action-txt); text-decoration: none; }

/* Les gestes du diacre et de l'administrateur sur la fiche, et l'appel
   « N à valider ». Valider : le bouton plein, sur la largeur, et sa légende
   en chiffres (FO-ANN-02-DIA). */
.fm-ann-gestes { margin-top: 16px; }
.fm-ann-valider { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
body.fm .fm-ann-valider .mb-bouton { width: 100%; padding: 13px; border-radius: 12px;
  font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-ann-valider .fm-ann-pied { margin-top: 0; }
body.fm a.fm-ann-retirer { display: block; padding: 12px; text-align: center;
  border: 1.5px solid var(--statut-bloquant); border-radius: 12px;
  font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; color: var(--statut-bloquant); text-decoration: none; }
body.fm a.fm-ann-a-valider { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 12px 0 0; padding: 10px 14px; min-height: 44px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-radius: 12px;
  font-weight: 600; color: var(--fm-action-txt); text-decoration: none; }
.fm-ann-lignes form { margin: 0; flex: none; }


/* --- Le don en ligne (FO-OFF-01 à 04) -------------------------------------------
   Maquettes « Front2 - Offrande ». Une colonne, pour le membre comme pour le
   visiteur : la liste « Dons », le montant, puis le bouton magenta — le seul
   magenta de l'écran — qui répète le montant. L'or n'habille que le verset de
   la confirmation. La jauge d'une collecte est en couleur d'action : une
   collecte n'est ni « conforme » ni « à traiter ». */

.fm-dons { display: flex; flex-direction: column; gap: 14px;
  max-width: var(--mb-colonne); }
.fm-dons form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.ef-page .fm-dons p { margin: 0; }
.fm-dons .ef-choix .ef-carte { border-radius: 12px; }
.fm-dons .ef-choix input:checked + .ef-carte {
  border-color: var(--fm-action-txt); background: var(--fm-action-pale); }
.fm-dons .ef-choix-options > label { border-radius: 20px; }
.fm-dons .ef-choix-options > label:has(input:checked) {
  border-color: var(--fm-action-txt); background: var(--fm-action-pale);
  color: var(--fm-texte); }
.fm-don-montants > label:last-child { flex-basis: 100%; }
.fm-dons [data-si-autre][hidden], .fm-dons [data-si-mensuel][hidden] { display: none; }
.fm-dons .ef-choix-options > label:has(input:disabled) {
  color: var(--fm-texte-doux); border-style: dashed; cursor: not-allowed; }

/* L'image d'un autre don : la vignette carrée à gauche de sa carte
   (FO-OFF-01), le bandeau en tête de sa page (FO-OFF-02, 1200 × 500). */
.fm-dons .ef-choix .ef-carte.fm-don-type.avec-vignette {
  display: flex; flex-direction: row; align-items: center; gap: 12px; }
.fm-don-vignette { flex: none; display: block; width: 44px; height: 44px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--fm-bordure); }
.fm-don-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fm-don-corps { display: block; flex: 1; min-width: 0; }
.fm-don-bandeau { display: block; width: 100%; aspect-ratio: 1200 / 500;
  object-fit: cover; border-radius: 12px; border: 1px solid var(--fm-bordure); }
/* La description courte, sous le nom de chaque don de la liste. */
.fm-don-resume { display: block; margin-top: 4px; font-size: calc(13px * var(--fm-echelle, 1));
  line-height: 1.45; color: var(--fm-texte-doux); }
.fm-don-jauge { display: block; height: 6px; margin-top: 8px; border-radius: 3px;
  background: var(--fm-bordure-fine); overflow: hidden; }
.fm-don-jauge > i { display: block; height: 100%; background: var(--fm-action); }
.fm-don-avancement p { display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 4px 12px; margin-top: 8px; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-don-objectif { color: var(--fm-texte-doux); }

.fm-don-total { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-don-total .mb-chiffre { font-size: calc(18px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.fm-don-bouton { width: 100%; min-height: 48px; font-size: calc(15px * var(--fm-echelle, 1)); gap: 6px; }
.fm-don-note { font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte-doux); }
.fm-don-raisons { margin: 6px 0 0; padding-left: 18px; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-don-recap .detail + .detail { margin-top: 4px; }

.fm-don-merci { text-align: center; padding: 12px 0; color: var(--fm-texte); }
.fm-don-merci-titre { font-family: var(--fm-titre); font-size: calc(24px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-don-merci-montant { font-size: calc(30px * var(--fm-echelle, 1)); font-weight: 600; margin: 4px 0; }
.fm-don-verset { margin: 18px 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--fm-or-deco); color: var(--fm-or-txt);
  font-style: italic; font-size: calc(14px * var(--fm-echelle, 1)); line-height: 1.55; }
.fm-don-verset footer { margin-top: 6px; font-style: normal; font-size: calc(12px * var(--fm-echelle, 1)); }
.fm-don-faits { display: grid; gap: 8px; margin: 0; padding: 14px;
  border: 1px solid var(--fm-bordure); border-radius: 12px; }
.fm-don-faits > div { display: flex; justify-content: space-between; gap: 12px; }
.fm-don-faits dt { color: var(--fm-texte-doux); }
.fm-don-faits dd { margin: 0; color: var(--fm-texte); }
.fm-don-actions { display: flex; flex-direction: column; gap: 10px; }

/* --- Mon compte : le sommaire et ses rubriques (MC-01 à MC-03, FO-MC-*) ----
   Au téléphone, une seule des deux : le sommaire sur la page Mon compte, la
   rubrique sur la sienne, avec son retour. Dès la tablette, le sommaire reste
   en colonne à gauche (280 px, puis 360 au bureau) et la rubrique s'ouvre à
   droite. Montserrat ne se charge qu'en 600 et 700 : le 800 des maquettes
   devient 700. */

.fm-compte { display: flex; flex-direction: column; gap: 14px; }
.fm-compte-sommaire { display: flex; flex-direction: column; gap: 12px;
  min-width: 0; }
.fm-compte-volet { min-width: 0; }
@media (max-width: 39.99rem) {
  .fm-compte-rubrique .fm-compte-sommaire,
  .fm-compte-accueil .fm-compte-volet { display: none; }
}
@media (min-width: 40rem) {
  .fm-compte { display: grid; grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px; align-items: start; }
}
@media (min-width: 64rem) {
  .fm-compte { grid-template-columns: 360px minmax(0, 1fr); gap: 28px; }
  .fm-compte-volet { max-width: 760px; }
}

/* Qui je suis : la photo, le nom pris au registre, d'où l'on parle. */
.fm-compte-tete { display: flex; align-items: center; gap: 13px; }
.fm-compte-tete .corps { min-width: 0; }
.fm-avatar.compte { width: 52px; height: 52px; font-size: calc(17px * var(--fm-echelle, 1)); }
.fm-compte-nom { margin: 0; font-family: var(--fm-titre); font-size: calc(19px * var(--fm-echelle, 1));
  font-weight: 700; color: var(--fm-texte); overflow-wrap: anywhere; }
.fm-compte-detail { margin: 2px 0 0; font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4;
  color: var(--fm-texte-doux); }
@media (min-width: 64rem) {
  .fm-avatar.compte { width: 60px; height: 60px; font-size: calc(19px * var(--fm-echelle, 1)); }
  .fm-compte-nom { font-size: calc(20px * var(--fm-echelle, 1)); }
}

/* Les rubriques, en deux groupes : une ligne, une icône, un résumé. */
.fm-compte-nav { display: flex; flex-direction: column; gap: 12px; }
.fm-rubriques { list-style: none; margin: 0; padding: 0;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); overflow: hidden; }
.fm-rubriques li + li { border-top: 1px solid var(--fm-bordure-fine); }
.fm-rubrique { position: relative; display: flex; align-items: center;
  gap: 12px; min-height: 52px; padding: 8px 14px;
  color: var(--fm-texte); text-decoration: none; }
body.ef a.fm-rubrique, body.ef a.fm-rubrique:hover { color: var(--fm-texte); }
.fm-rubrique:hover { background: var(--fm-surface-2); }
/* La rubrique ouverte : fond violet pâle et filet violet à gauche (MC-03). */
.fm-rubrique[aria-current="page"] { background: var(--fm-action-pale); }
.fm-rubrique[aria-current="page"]::before { content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: 3px; background: var(--fm-action); }
.fm-rubrique-icone { flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.fm-rubrique-icone .fm-icone { width: 18px; height: 18px; }
.fm-rubrique .corps { flex: 1; min-width: 0; display: flex;
  flex-direction: column; }
.fm-rubrique .titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; }
.fm-rubrique .resume { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4;
  color: var(--fm-texte-doux); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Un solde, une pièce à signer, un accord qui n'est pas venu : ambre. Sur
   le fond violet pâle d'une ligne ouverte ou survolée, l'ambre tombe à 4,3:1
   en clair (MC-03 le montrait ainsi) : le résumé y reprend le gris doux. */
.fm-rubrique .resume.attention { color: var(--statut-attention); }
.fm-rubrique:hover .resume.attention,
.fm-rubrique[aria-current="page"] .resume.attention {
  color: var(--fm-texte-doux); }
.fm-rubrique-chevron { flex: none; width: 16px; height: 16px;
  color: var(--fm-texte-doux); }
/* À la tablette, la colonne de 280 px ne tient que le titre (FO-MC-*-M). */
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .fm-compte-nav .fm-rubrique .titre { font-size: calc(14px * var(--fm-echelle, 1)); }
  .fm-compte-nav .fm-rubrique .resume { display: none; }
}

/* « Se déconnecter » : la seule action qui fait sortir, en brique. */
.fm-compte-sortie { margin: 0; }
.fm-compte-sortie button { min-height: 44px; padding: 0 4px; background: none;
  border: 0; font: inherit; font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--statut-bloquant); cursor: pointer; }
@media (max-width: 39.99rem) { .fm-compte-sortie { text-align: center; } }

/* « À faire » : un manque, donc ambre (Fondations) ; une ligne par geste. */
.fm-afaire { display: flex; flex-direction: column; gap: 8px;
  padding: 11px 14px; background: var(--statut-attention-fond);
  border: 1px solid var(--statut-attention-bord);
  border-radius: var(--fm-r-carte); }
.fm-afaire-titre { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 700; color: var(--statut-attention); }
.fm-afaire-titre .fm-icone { width: 16px; height: 16px; flex: none; }
.fm-afaire-ligne { display: flex; align-items: center; gap: 10px; }
.fm-afaire-ligne + .fm-afaire-ligne { padding-top: 8px;
  border-top: 1px solid var(--statut-attention-bord); }
.fm-afaire-ligne .corps { flex: 1; min-width: 0; }
.fm-afaire-ligne p { margin: 0; }
.fm-afaire-ligne .titre { font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); }
.fm-afaire-ligne .note { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4;
  color: var(--fm-texte-doux); }
.fm-afaire-ligne form { margin: 0; flex: none; }
.fm-afaire-ligne .ef-btn { flex: none; }
.fm-afaire-lien { flex: none; display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 4px; background: none; border: 0;
  font: inherit; font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600; text-align: right;
  color: var(--fm-action-txt); text-decoration: none; cursor: pointer; }
body.ef a.fm-afaire-lien, body.ef a.fm-afaire-lien:hover {
  color: var(--fm-action-txt); }

/* Le titre de la rubrique ouverte. */
.fm-compte-titre { margin: 0 0 14px; font-size: calc(22px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); }
.fm-afaire + .fm-compte-titre { margin-top: 18px; }
@media (min-width: 64rem) { .fm-compte-titre { font-size: calc(24px * var(--fm-echelle, 1)); } }

/* Profil (FO-MC-PRO) : le portrait, puis des cartes de lignes — un libellé
   en capitales à chasse fixe, une valeur. « Vérifié » en vert des statuts ;
   « à confirmer », un manque, en ambre ; « non vérifié », un fait, en gris. */
.fm-profil-photo { display: flex; align-items: center; gap: 14px;
  margin: 0 0 14px; }
.fm-profil-photo:target { scroll-margin-top: 80px; }
.fm-profil-portrait { flex: none; width: 84px; height: 84px; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box;
  background: var(--fm-action-pale); color: var(--fm-action-txt);
  border: 1px solid var(--fm-bordure); font-family: var(--chiffres);
  font-size: calc(26px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-profil-photo .corps { display: flex; flex-direction: column; min-width: 0;
  flex: 1; gap: 8px; }
/* La photo du Profil se change sur place (décision du 18 octobre 2026) : le
   cercle montre la photo choisie, et un anneau tourne autour le temps de
   l'enregistrement. Sans mouvement pour qui l'a demandé : l'anneau reste,
   et la phrase sous les boutons dit l'attente. */
.fm-profil-cadre { position: relative; flex: none; align-self: flex-start; }
.fm-profil-portrait { overflow: hidden; }
.fm-profil-portrait img { width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 20%; }
.fm-sablier { display: none; position: absolute; inset: -5px;
  border-radius: 50%; border: 3px solid transparent;
  border-top-color: var(--fm-action-txt); border-right-color: var(--fm-action-txt);
  pointer-events: none; }
.fm-profil-photo.envoi .fm-sablier { display: block;
  animation: fm-tourne .9s linear infinite; }
.fm-profil-photo.envoi .fm-photo-bouton { cursor: progress; }
@keyframes fm-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fm-profil-photo.envoi .fm-sablier { animation: none;
    border-color: var(--fm-action-txt); }
}
.fm-profil-photo-titre { margin: 0; font-size: calc(13px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-profil-photo .fm-photo-boutons { flex-direction: column; }
body.fm .fm-profil-photo .fm-photo-bouton { flex: none; }
.fm-profil-photo .fm-photo-choisie { margin: 0; }
.fm-profil-photo-envoi { align-self: flex-start; }
.fm-fiche { margin: 0 0 14px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  overflow: hidden; }
.fm-fiche > div { padding: 11px 14px; }
.fm-fiche > div + div { border-top: 1px solid var(--fm-bordure-fine); }
.fm-fiche dt { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .1em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-fiche dd { margin: 2px 0 0; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte);
  overflow-wrap: anywhere; }
.fm-fiche-valeur { display: flex; align-items: baseline;
  justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.fm-verifie { display: inline-flex; align-items: center; gap: 3px;
  font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; color: var(--statut-ok); }
.fm-verifie .fm-icone { width: 13px; height: 13px; }
.fm-a-confirmer { font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--statut-attention); }
.fm-non-verifie { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* Réglages et sécurité (FO-MC-SET) : des cartes, des lignes comme celles du
   sommaire — sans icône —, le thème en trois segments, les interrupteurs de
   l'annuaire pour les notifications. */
.fm-reglages-carte { margin: 0 0 14px; padding: 14px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-reglages-carte .note { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-reglages-lignes { margin: 0 0 14px; }
.fm-rubrique .detail { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4; color: var(--fm-texte-doux); }
/* « Fermer mon compte » : une sortie, en brique comme les autres. */
.fm-rubrique.sortie .titre, .fm-rubrique.sortie .fm-rubrique-chevron {
  color: var(--statut-bloquant); }
.fm-connexion { display: flex; align-items: center; min-height: 52px;
  padding: 8px 14px; }
.fm-connexion .corps { display: flex; flex-direction: column; }
.fm-connexion .titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.fm-affichage { margin: 0 0 14px; }
.fm-affichage .note { margin: 6px 0 0; font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; margin: 0; padding: 4px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-segment { position: relative; display: flex; }
.fm-segment input { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer; appearance: none; background: none; border: 0; }
.fm-segment span { flex: 1; display: flex; align-items: center;
  justify-content: center; min-height: 40px; padding: 0 8px;
  border-radius: var(--fm-r-bouton); font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); text-align: center; line-height: 1.2; }
/* La taille du texte : quatre choix ; « Très grand » passe sur deux lignes
   plutôt que de déborder. */
.fm-segments.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fm-affichage-titre { margin: 14px 0 6px; font-size: calc(13px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-affichage-titre:first-of-type { margin-top: 0; }
.fm-segment input:checked + span { background: var(--fm-action);
  color: var(--fm-sur-plein); }
.fm-segment input:focus-visible + span { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.fm-interrupteur .texte .detail { display: block; font-size: calc(12px * var(--fm-echelle, 1));
  font-weight: 400; color: var(--fm-texte-doux); }
/* Dans les avis, l'interrupteur prend la largeur : la piste au bord droit. */
.fm-avis-choix .fm-interrupteur { align-self: stretch; }
.fm-compte-volet .mb-tuile { margin-bottom: 14px; }
.fm-reglages-sortie { margin: 18px 0 0; }
.fm-reglages-sortie .ef-btn { width: 100%; }
.fm-reglages-formulaire { max-width: var(--mb-colonne); }

/* Responsable légal (FO-MC-RL) : une carte pour la personne et son accord,
   les demandes en cours en lignes, ce qu'elle reçoit, puis le bouton. Un
   accord refusé bloque l'inscription : brique, comme tout blocage. */
.ef-etat.bloquant { color: var(--statut-bloquant);
  border-color: var(--statut-bloquant-bord); background: var(--statut-bloquant-fond); }
.fm-responsable { display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 14px; padding: 15px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-responsable-tete { display: flex; align-items: center; gap: 12px; }
.fm-responsable-icone, .fm-ligne-icone { flex: none; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 9px;
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.fm-responsable-icone { width: 42px; height: 42px; }
.fm-responsable-icone .fm-icone { width: 21px; height: 21px; }
.fm-responsable-tete .corps { flex: 1; min-width: 0; }
.fm-responsable-tete p { margin: 0; }
.fm-responsable-tete .nom { font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); overflow-wrap: anywhere; }
.fm-responsable-tete .lien { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-responsable-tete .ef-etat { flex: none; white-space: nowrap; }
.fm-responsable-contact { list-style: none; margin: 0; padding: 4px 0 0;
  display: flex; flex-direction: column; gap: 6px; }
.fm-responsable-contact li { display: flex; align-items: center; gap: 8px;
  font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte); overflow-wrap: anywhere; }
.fm-responsable-contact .fm-icone { flex: none; width: 15px; height: 15px;
  color: var(--fm-texte-doux); }
.fm-responsable-accord { margin: 0; font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.45;
  color: var(--fm-texte-doux); }
/* Des lignes dans une carte — les demandes en cours (FO-MC-RL), les
   documents à télécharger (FO-MC-DOC) : une icône, un titre, un détail, un
   geste à droite. */
.fm-lignes { list-style: none; margin: 0 0 14px; padding: 0;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); overflow: hidden; }
.fm-lignes > li + li { border-top: 1px solid var(--fm-bordure-fine); }
.fm-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  min-height: 44px; box-sizing: border-box; }
body.fm a.fm-ligne, body.fm a.fm-ligne:visited { color: var(--fm-texte);
  text-decoration: none; }
a.fm-ligne:hover { background: var(--fm-surface-2); }
.fm-ligne-icone { width: 32px; height: 32px; }
.fm-ligne-icone .fm-icone { width: 16px; height: 16px; }
.fm-ligne .corps { flex: 1; min-width: 0; }
.fm-ligne p { margin: 0; line-height: 1.4; }
.fm-ligne .titre { font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.fm-ligne .detail { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ligne span.titre, .fm-ligne span.detail { display: block; line-height: 1.4; }
/* Une demande en cours attend : ambre. */
.fm-ligne .detail.attente { color: var(--statut-attention); }
.fm-ligne form { margin: 0; flex: none; }
.fm-ligne-geste { flex: none; width: 18px; height: 18px; color: var(--fm-action-txt); }
.fm-recoit { list-style: none; margin: 0 0 14px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 8px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-recoit li { display: flex; align-items: flex-start; gap: 9px;
  font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte); }
.fm-recoit .fm-icone { flex: none; width: 15px; height: 15px; margin-top: 3px;
  color: var(--statut-ok); }
.fm-recoit li.non { color: var(--fm-texte-doux); }
.fm-recoit li.non > span { flex: none; width: 15px; text-align: center; }
/* « Changer de responsable légal » : un bouton creux pleine largeur ; le
   formulaire se déplie dessous, sans script. */
.fm-changer { margin: 0 0 14px; }
.fm-changer > summary { list-style: none; cursor: pointer; }
.fm-changer > summary::-webkit-details-marker { display: none; }
.fm-changer[open] > summary { margin-bottom: 14px; }
.fm-changer > summary, a.fm-changer-lien { display: flex; justify-content: center;
  width: 100%; box-sizing: border-box; }
.fm-changer-note { margin: 10px 0 0; font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.45;
  color: var(--fm-texte-doux); }

/* Mes documents (FO-MC-DOC) : ce qui est à signer, dans la carte ambre de
   « À faire », un crayon par pièce ; puis des lignes à télécharger. */
.fm-a-signer { margin-bottom: 14px; }
.fm-afaire-icone { flex: none; width: 18px; height: 18px;
  color: var(--statut-attention); }
.fm-afaire-ligne .detail { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4;
  color: var(--fm-texte-doux); }
.fm-documents-note { margin: 4px 0 0; font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.45;
  color: var(--fm-texte-doux); }

/* Mes inscriptions (FO-MC-INS) : une carte par inscription en cours —
   l'image et l'état comme sur la liste des événements, les cases
   d'affectation, l'argent, l'attente en ambre, puis les boutons ; les
   inscriptions passées en lignes, sous les cartes. */
.fm-mci-filtres { margin: 0 0 14px; }
.fm-mci-liste { display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 14px; }
.fm-mci-carte { display: flex; flex-direction: column; overflow: hidden;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; }
.fm-mci-carte .fm-evt-image { height: 120px; }
.fm-mci-corps { display: flex; flex-direction: column; gap: 12px;
  padding: 14px 15px; }
.ef-page .fm-mci-corps p { margin: 0; }
body.fm .fm-mci-corps h3 { margin: 0; font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.3; }
body.fm .fm-mci-corps h3 a, body.fm .fm-mci-corps h3 a:visited {
  color: var(--fm-texte); text-decoration: none; }
.fm-mci-dates { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-mci-note { font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-mci-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin: 0; }
.fm-mci-places > div { min-width: 0; padding: 8px 10px;
  background: var(--fm-fond); border-radius: 9px; }
.fm-mci-places dt { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .08em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-mci-places dd { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); overflow-wrap: anywhere; }
.fm-mci-argent p { display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 8px; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-mci-argent .montant { font-family: var(--chiffres); color: var(--fm-texte); }
.fm-mci-argent .reste { color: var(--statut-attention); white-space: nowrap; }
.fm-mci-argent .jauge { display: block; height: 6px; margin-top: 6px;
  border-radius: 3px; overflow: hidden; background: var(--fm-bordure-fine); }
.fm-mci-argent .jauge > i { display: block; height: 100%;
  background: var(--statut-ok); }
.fm-mci-attente { display: flex; align-items: center; gap: 9px;
  padding: 0 11px; background: var(--statut-attention-fond);
  border: 1px solid var(--statut-attention-bord);
  border-radius: var(--fm-r-carte); }
.fm-mci-attente .fm-icone { flex: none; width: 16px; height: 16px;
  color: var(--statut-attention); }
.fm-mci-attente p { flex: 1; min-width: 0; padding: 9px 0; font-size: calc(13px * var(--fm-echelle, 1));
  color: var(--fm-texte); }
.fm-mci-attente form { margin: 0; flex: none; }
.fm-mci-actions { display: flex; flex-direction: column; gap: 9px; }
body.fm a.fm-mci-billet { align-self: center; display: inline-flex;
  align-items: center; min-height: 44px; font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); text-decoration: none; }

/* Mes paiements (FO-MC-PAY) et Mes dons (FO-MC-DON) : trois chiffres en
   chasse fixe, sans cadre — réglé en vert, ce qui reste en ambre ; le solde
   qui attend dans une carte ambre ; l'historique en lignes, le montant et
   son reçu à droite. */
.fm-chiffres { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0 0 16px; }
.fm-chiffres > div { display: flex; flex-direction: column; }
.fm-chiffres .montant { font-family: var(--chiffres); font-size: calc(19px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-chiffres .montant.ok { color: var(--statut-ok); }
.fm-chiffres .montant.du { color: var(--statut-attention); }
.fm-chiffres .libelle { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-solde { display: flex; flex-direction: column; gap: 10px; margin: 0 0 14px;
  padding: 14px 15px; background: var(--statut-attention-fond);
  border: 1px solid var(--statut-attention-bord); border-radius: 14px; }
.ef-page .fm-solde p { margin: 0; }
.fm-solde .tete { display: flex; align-items: center; gap: 8px; }
.fm-solde .tete .fm-icone { flex: none; width: 16px; height: 16px;
  color: var(--statut-attention); }
.fm-solde .titre { flex: 1; min-width: 0; font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); }
.fm-solde .montant { flex: none; font-family: var(--chiffres); font-size: calc(15px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-solde .detail { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.45; color: var(--fm-texte-doux); }
.fm-solde-actions { display: flex; flex-direction: column; gap: 9px; }
.fm-mouvement-droite { flex: none; display: flex; flex-direction: column;
  align-items: flex-end; text-align: right; }
.fm-mouvement-droite .montant { font-family: var(--chiffres); font-size: calc(14px * var(--fm-echelle, 1));
  color: var(--fm-texte); white-space: nowrap; }
.fm-mouvement-droite .montant.ok { color: var(--statut-ok); }
body.fm a.fm-mouvement-recu { display: inline-flex; align-items: center;
  min-height: 32px; font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); text-decoration: none; }
.fm-mouvement-sans { display: inline-flex; align-items: center; min-height: 32px;
  font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-mensuels-note { margin: -4px 0 14px; }
.fm-pied-don { margin: 16px 0 0; }

/* Messages importants (FO-MC-ARC) : un chapeau, la recherche, une pastille
   par catégorie, puis les messages en cartes — catégorie et date, titre,
   début du texte, « Retirer des archives ». « Important » encadre de brique,
   comme dans le fil. */
.ef-page p.fm-importants-chapeau { margin: 0 0 14px; font-size: calc(13px * var(--fm-echelle, 1));
  line-height: 1.5; color: var(--fm-texte-doux); }
.fm-importants-recherche { position: relative; margin: 0 0 12px; }
.fm-importants-recherche .fm-icone { position: absolute; left: 13px; top: 50%;
  width: 17px; height: 17px; margin-top: -8.5px; color: var(--fm-texte-doux);
  pointer-events: none; }
.fm-importants-recherche input { width: 100%; box-sizing: border-box;
  min-height: 44px; padding: 10px 14px 10px 40px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 22px; }
.fm-importants-recherche input:focus-visible { outline: 2px solid var(--fm-action-txt);
  outline-offset: 1px; }
.fm-importants-filtres { margin: 0 0 14px; }
.fm-importants-carte { display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 10px; padding: 13px 14px 4px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-importants-carte.important { border-color: var(--statut-bloquant-bord); }
.ef-page .fm-importants-carte p { margin: 0; }
.fm-importants-carte .tete { display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 10px; }
.fm-importants-carte .ms-quand { margin-left: auto; }
body.fm .fm-importants-carte h3 { margin: 0; font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700;
  line-height: 1.35; }
body.fm .fm-importants-carte h3 a, body.fm .fm-importants-carte h3 a:visited {
  color: var(--fm-texte); text-decoration: none; }
.fm-importants-carte .extrait { font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5;
  color: var(--fm-texte-doux); }
.fm-importants-carte form { margin: 0; }
.fm-importants-carte .fm-afaire-lien { gap: 6px; padding: 0; }
.fm-importants-carte .fm-afaire-lien .fm-icone { width: 15px; height: 15px; }

/* --- L'accueil en attente de validation (FO-ATT-01, 6 octobre 2026) --------
   Le suivi à gauche, « Dès maintenant » à droite au-delà du téléphone. Les
   couleurs viennent toutes des jetons : le vert du jalon fait est celui des
   statuts, et sa variante éclaircie du thème foncé porte une coche à la
   couleur de la carte. */
.mb-attente { display: grid; gap: 16px; align-items: start; }
/* Le salut, puis la date juste dessous — pas à côté comme sur l'accueil
   complet. 24, 26 puis 30 px selon la largeur. */
body.fm .mb-bonjour.attente { flex-direction: column; align-items: flex-start;
  gap: 0; margin-bottom: 14px; }
body.fm .mb-bonjour.attente h2 { font-size: calc(24px * var(--fm-echelle, 1)); }
@media (min-width: 40rem) {
  .mb-attente { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  body.fm .mb-bonjour.attente { margin-bottom: 20px; }
  body.fm .mb-bonjour.attente h2 { font-size: calc(26px * var(--fm-echelle, 1)); }
}
/* Au bureau, le salut et les deux colonnes se centrent ensemble sur 936 px :
   les 1000 px de la maquette, moins ses deux marges de 32. */
@media (min-width: 64rem) {
  .mb-attente { gap: 24px; }
  .mb-attente, body.fm .mb-bonjour.attente { max-width: 936px; margin-inline: auto; }
  body.fm .mb-bonjour.attente h2 { font-size: calc(30px * var(--fm-echelle, 1)); }
}
body.fm .mb-validation .mb-tuile-corps { padding: 18px; }
body.fm .mb-validation h2 { font-size: calc(19px * var(--fm-echelle, 1)); font-weight: 800; line-height: 1.25;
  margin: 0 0 16px; }
/* Interligne serré : une étape tient en 51 px, jalon et trait compris, et les
   trois se lisent d'un coup d'œil (maquette). */
.mb-suivi { list-style: none; margin: 0 0 16px; padding: 0; line-height: 1.3; }
.mb-suivi li { display: flex; gap: 12px; position: relative; padding-bottom: 14px; }
.mb-suivi li:last-child { padding-bottom: 0; }
.mb-suivi li:not(:last-child)::before {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px;
  background: var(--fm-bordure);
}
.mb-suivi li.fait::before { background: var(--statut-ok); }
.mb-suivi-jalon { flex: none; width: 26px; height: 26px; border-radius: 50%;
  box-sizing: border-box; display: inline-flex; align-items: center;
  justify-content: center; border: 1.5px solid var(--fm-bordure);
  color: var(--fm-texte-doux); }
.mb-suivi-jalon .fm-icone { width: 14px; height: 14px; }
.mb-suivi li.fait .mb-suivi-jalon { background: var(--statut-ok);
  border-color: var(--statut-ok); color: var(--fm-surface); }
.mb-suivi li.en-cours .mb-suivi-jalon { background: var(--fm-action-pale);
  border: 2px solid var(--fm-action); color: var(--fm-action-txt); }
.mb-suivi-texte { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; }
.mb-suivi-titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte); }
.mb-suivi li.en-cours .mb-suivi-titre { font-weight: 700; }
.mb-suivi li.ferme .mb-suivi-titre { color: var(--fm-texte-doux); }
.mb-suivi-detail { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
/* L'accord du responsable légal d'un mineur (R17) : bloqué — à désigner,
   refusé, signalé —, il est en brique, comme tout blocage ; son lien mène à
   « Mon responsable légal ». */
.mb-suivi li.bloque .mb-suivi-jalon { background: var(--statut-bloquant-fond);
  border-color: var(--statut-bloquant); color: var(--statut-bloquant); }
.mb-suivi li.bloque .mb-suivi-detail { color: var(--statut-bloquant); }
body.fm a.mb-suivi-lien { align-self: flex-start; margin-top: 2px; font-size: calc(13px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-action-txt); }
.mb-suivi-ecrire { display: flex; align-items: center; justify-content: center; gap: 8px; }
.mb-suivi-ecrire .fm-icone { width: 16px; height: 16px; }
.mb-attente-maintenant { display: flex; flex-direction: column; gap: 12px; }
/* FO-DSC-04C — la discussion « Validation de mon compte » encore ouverte,
   rappelée au-dessus d'« Écrire à l'équipe », qui l'ouvre. */
.mb-suivi-discussion { display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  padding: 12px 14px; border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte);
  background: var(--fm-surface); }
.mb-suivi-discussion > .fm-icone { flex: none; width: 18px; height: 18px; color: var(--fm-action-txt); }
.mb-suivi-discussion .ds-non-lue { color: var(--fm-magenta); font-weight: 600; }
/* FO-DSC-04B — « Une réponse vous attend » : la surface, un filet magenta à
   gauche — le non-lu —, le lien en violet. Aucune ombre. */
.ds-carte-reponse { display: flex; align-items: flex-start; gap: 11px; padding: 13px 14px;
  border: 1px solid var(--fm-magenta-bord); border-left: 3px solid var(--fm-magenta);
  border-radius: var(--fm-r-carte); background: var(--fm-surface); }
.ds-carte-reponse > .fm-icone { flex: none; width: 20px; height: 20px; color: var(--fm-magenta); }
.ds-carte-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
body.fm .ds-carte-corps h2 { margin: 0; font-family: var(--fm-titre);
  font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700; color: var(--fm-texte); }
.ds-carte-corps p { margin: 0; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
body.fm .ds-carte-corps a { align-self: flex-start; padding-top: 3px;
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-action-txt); }
body.fm .mb-attente-surtitre { margin: 0; font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fm-texte-doux); }
.mb-actions { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 12px; }
.mb-action { display: flex; align-items: center; gap: 12px; padding: 14px;
  min-height: 44px; box-sizing: border-box; text-decoration: none;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); color: var(--fm-texte); }
.mb-action:hover { border-color: var(--fm-action-bord); }
/* Une ligne d'action se lit comme une carte, pas comme un lien : son titre
   reste à l'encre, visité ou non. */
body.fm a.mb-action, body.fm a.mb-action:visited, body.fm a.mb-action:hover {
  color: var(--fm-texte); text-decoration: none; }
.mb-action-icone { flex: none; width: 42px; height: 42px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fm-action-pale); color: var(--fm-action-txt); }
.mb-action-icone.don { background: var(--fm-magenta-plein); color: var(--fm-sur-plein); }
.mb-action-icone .fm-icone { width: 21px; height: 21px; }
.mb-action-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mb-action-titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700; }
.mb-action-detail { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.mb-action-chevron { flex: none; width: 16px; height: 16px; color: var(--fm-texte-doux); }

/* --- La confirmation d'inscription (décision du 7 octobre 2026) ------------ */
/* Le nom de l'événement en grand, en tête : FO-INS-04 ne l'affiche pas, c'est
   un écart assumé à la maquette. */
.fm-conf-evenement {
  margin: 0 0 var(--e-4); font-family: var(--fm-titre); font-weight: 800;
  font-size: calc(clamp(1.75rem, 7vw, 2.5rem) * var(--fm-echelle, 1)); line-height: 1.1;
  letter-spacing: -.01em; color: var(--fm-texte); text-wrap: balance;
}
/* Le QR code de réservation. Le cadre suit le thème ; le code, lui, reste
   noir sur blanc (jetons --fm-qr-*). */
.fm-qr {
  display: flex; align-items: center; gap: var(--e-4); margin: var(--e-4) 0;
  padding: var(--e-4); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); background: var(--fm-surface);
}
.fm-qr-code {
  flex: none; width: 168px; line-height: 0; border-radius: 6px;
  background: var(--fm-qr-fond); color: var(--fm-qr-encre);
}
.fm-qr-code svg { display: block; width: 100%; height: auto; }
.fm-qr-titre {
  margin: 0 0 4px; font-family: var(--fm-titre); font-weight: 700;
  color: var(--fm-texte);
}
.fm-qr-texte .ef-note-gauche { margin: 0 0 6px; }
@media (max-width: 420px) {
  .fm-qr { flex-direction: column; text-align: center; }
  .fm-qr-code { width: min(240px, 72vw); }
}


/* --- Bible (maquettes « Front2 - Bible 01 et 02 », 8 octobre 2026) --------
   Le texte en Source Serif (`--fm-lecture`), plus grand que le reste : 18 px
   au téléphone, 19 à la tablette, 20 au bureau, réglable de 15 à 26. Les
   numéros de versets en chasse fixe, en violet. Un fond de lecture
   légèrement chaud en clair (`--fm-lecture-fond`). Les surlignages ont leurs
   jetons ; les paroles de Jésus prennent la brique des textes de message,
   jamais celle des statuts. */
.fm-bib-accueil, .fm-bib-colonne { max-width: 760px; }
.fm-bib-icone-bouton { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; color: var(--fm-action-txt); cursor: pointer;
  list-style: none; }
.fm-bib-icone-bouton::-webkit-details-marker { display: none; }
.fm-bib-icone-bouton .fm-icone { width: 21px; height: 21px; }

/* Les champs de recherche du module : une pastille, la loupe dedans. */
.fm-bib-champ { position: relative; margin: 0 0 14px; }
.fm-bib-champ .fm-icone { position: absolute; left: 13px; top: 50%; width: 17px;
  height: 17px; margin-top: -8.5px; color: var(--fm-texte-doux); pointer-events: none; }
.fm-bib-champ input { width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 10px 14px 10px 40px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1)); color: var(--fm-texte);
  background: var(--fm-surface); border: 1.5px solid var(--fm-bordure); border-radius: 22px; }
.fm-bib-champ input:focus { border-color: var(--fm-action-txt); outline: none; }
.fm-bib-champ input:focus-visible { outline: 2px solid var(--fm-action-txt); outline-offset: 1px; }

/* FO-BIB-01 : reprendre, le Testament, les livres. */
.fm-bib-reprendre { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 12px 14px; background: var(--fm-action-pale);
  border: 1px solid var(--fm-action-bord); border-radius: var(--fm-r-carte); }
.fm-bib-reprendre[hidden] { display: none; }
body.fm a.fm-bib-reprendre, body.fm a.fm-bib-reprendre:visited { color: var(--fm-texte);
  text-decoration: none; }
.fm-bib-reprendre .corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fm-bib-reprendre .surtitre { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .12em; text-transform: uppercase; color: var(--fm-action-txt); }
.fm-bib-reprendre .titre { font-family: var(--fm-titre); font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 700; }
.fm-bib-testaments { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 14px; }
body.fm a.fm-bib-segment { display: flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 8px; border-radius: var(--fm-r-bouton); font-size: calc(14px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); text-decoration: none; }
body.fm a.fm-bib-segment.actif { background: var(--fm-action); color: var(--fm-sur-plein); }
.fm-bib-nb { flex: none; font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* FO-BIB-01B : les grilles de chapitres et de versets. */
.fm-bib-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
body.fm .fm-bib-grille a { display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: calc(15px * var(--fm-echelle, 1)); color: var(--fm-texte); text-decoration: none;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-radius: 10px; }
body.fm .fm-bib-grille a:hover { border-color: var(--fm-action-txt); }
body.fm .fm-bib-grille a.actif { background: var(--fm-action); border-color: var(--fm-action);
  color: var(--fm-sur-plein); font-weight: 600; }
.fm-bib-grille.compacte { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 5px; margin: 6px 0 8px; }
body.fm .fm-bib-grille.compacte a { min-height: 34px; font-size: calc(13px * var(--fm-echelle, 1)); border-radius: 7px; }

/* FO-BIB-02 : l'en-tête de lecture — la référence, le sigle, la recherche,
   les réglages. */
.fm-bib-tete .dedans { gap: 8px; }
.fm-bib-pastille { display: inline-flex; align-items: center; gap: 5px; min-height: 36px;
  box-sizing: border-box; padding: 6px 12px; border: 1px solid var(--fm-bordure);
  border-radius: 20px; background: var(--fm-fond); font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); cursor: pointer; list-style: none; white-space: nowrap; }
.fm-bib-pastille::-webkit-details-marker { display: none; }
body.fm a.fm-bib-pastille, body.fm a.fm-bib-pastille:visited { color: var(--fm-texte);
  text-decoration: none; }
.fm-bib-pastille .fm-icone { width: 15px; height: 15px; color: var(--fm-texte-doux); }
.fm-bib-ref { font-family: var(--fm-titre); font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.fm-bib-sigle { font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte-doux); }
.fm-bib-outils { display: flex; align-items: center; gap: 2px; margin-left: auto; }

/* Les menus (version, réglages) : une feuille au téléphone, un menu sous
   son bouton au-delà. Sans script, `<details>` les ouvre. */
.fm-bib-menu { position: relative; }
.fm-bib-panneau { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box;
  padding: 10px 16px 18px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); z-index: 62; overflow-y: auto; }
.fm-bib-menu:not([open]) .fm-bib-panneau { display: none; }
@media (max-width: 39.99rem) {
  .fm-bib-panneau { position: fixed; left: 0; right: 0; bottom: 0; max-height: 82vh;
    border-radius: 20px 20px 0 0; border-bottom: 0; }
}
@media (min-width: 40rem) {
  .fm-bib-panneau { position: absolute; top: calc(100% + 6px); right: 0; width: 360px;
    max-height: 70vh; border-radius: 14px; }
  .fm-bib-versions .fm-bib-panneau { left: 0; right: auto; }
  .fm-bib-panneau .fm-ann-poignee { display: none; }
}
.fm-bib-panneau-titre { display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-family: var(--fm-titre); font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 700; color: var(--fm-texte); }
.fm-bib-panneau-titre .nombre { margin-left: auto; font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 400;
  color: var(--fm-texte-doux); }
.fm-bib-panneau .ef-section { margin: 6px 0 0; }
.fm-bib-choix { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
body.fm a.fm-bib-option { display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--fm-bordure); border-radius: 12px;
  color: var(--fm-texte); text-decoration: none; }
body.fm a.fm-bib-option.actif { border: 1.5px solid var(--fm-action-txt);
  background: var(--fm-action-pale); }
.fm-bib-option .corps { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fm-bib-option .titre { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; }
.fm-bib-option .detail { font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.4; color: var(--fm-texte-doux); }
.fm-bib-coche { flex: none; width: 18px; height: 18px; color: var(--fm-action-txt); }
.fm-bib-taille { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.fm-bib-taille .petit, .fm-bib-taille .grand { font-family: var(--fm-lecture);
  color: var(--fm-texte); }
.fm-bib-taille .petit { font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-bib-taille .grand { font-size: calc(24px * var(--fm-echelle, 1)); }
.fm-bib-taille input { flex: 1; accent-color: var(--fm-action); }
.fm-bib-filtres { flex-wrap: wrap; margin: 0 0 12px; }

/* La page de lecture : une colonne au téléphone ; les livres à gauche dès
   la tablette ; le texte borné à 660 px et la colonne d'étude à droite au
   bureau. */
.fm-bib-lecture { display: block; }
.fm-bib-colonne-livres, .fm-bib-colonne-droite { display: none; }
@media (min-width: 40rem) {
  .fm-bib-lecture { display: grid; grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px; align-items: start; }
  .fm-bib-colonne-livres { display: block; position: sticky;
    top: calc(var(--mb-haut) + 12px);
    max-height: calc(100vh - var(--mb-haut) - 24px); overflow-y: auto; }
}
@media (min-width: 64rem) {
  .fm-bib-lecture { grid-template-columns: 220px minmax(0, 660px) minmax(260px, 1fr); }
  .fm-bib-colonne-droite { display: flex; flex-direction: column; gap: 16px;
    position: sticky; top: calc(var(--mb-haut) + 12px); }
}
.fm-bib-colonne-livres ul { list-style: none; margin: 0; padding: 0; }
.fm-bib-colonne-livres li > a { display: flex; align-items: center; min-height: 36px;
  padding: 0 10px; border-radius: 8px; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte);
  text-decoration: none; }
body.fm .fm-bib-colonne-livres li > a:hover { background: var(--fm-surface-2); }
body.fm .fm-bib-colonne-livres li.courant > a { font-weight: 700; color: var(--fm-action-txt); }

.fm-bib-page { padding: 18px 2px 10px; background: var(--fm-lecture-fond); }
@media (max-width: 39.99rem) {
  .fm-bib-page { margin: -4px calc(-1 * var(--e-4)) 0; padding: 18px var(--e-4) 10px; }
}
@media (min-width: 40rem) {
  .fm-bib-page { padding: 22px 26px 16px; border: 1px solid var(--fm-bordure-fine);
    border-radius: 14px; }
}
.fm-bib-chapitre-tete { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 0 0 14px; }
body.fm h2.fm-bib-chapitre-titre { margin: 0; font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1));
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fm-action-txt); }
.fm-bib-sigles { display: none; gap: 4px; margin-left: auto; }
@media (min-width: 64rem) { .fm-bib-sigles { display: flex; } }
.fm-bib-parallele .fm-bib-sigles { display: flex; }
body.fm .fm-bib-sigles a { display: inline-flex; align-items: center; min-height: 30px;
  padding: 0 8px; border-radius: 6px; font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte-doux); text-decoration: none; }
body.fm .fm-bib-sigles a.actif { background: var(--fm-action-pale); color: var(--fm-action-txt); }

.fm-bib-texte { margin: 0; font-family: var(--fm-lecture); font-size: calc(18px * var(--fm-echelle, 1));
  line-height: 1.75; color: var(--fm-texte); }
@media (min-width: 40rem) { .fm-bib-texte { font-size: calc(19px * var(--fm-echelle, 1)); } }
@media (min-width: 64rem) { .fm-bib-texte { font-size: calc(20px * var(--fm-echelle, 1)); } }
.fm-bib-numero { padding-right: 3px; font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); }
.fm-bib-verset { cursor: pointer; border-radius: 3px; -webkit-box-decoration-break: clone;
  box-decoration-break: clone; transition: background-color .6s; }
.fm-bib-verset:focus-visible { outline: 2px solid var(--fm-action-txt); outline-offset: 2px; }
.fm-bib-verset.surligne-jaune .fm-bib-mots { background: var(--fm-surligne-jaune); }
.fm-bib-verset.surligne-vert .fm-bib-mots { background: var(--fm-surligne-vert); }
.fm-bib-verset.surligne-violet .fm-bib-mots { background: var(--fm-surligne-violet); }
.fm-bib-mots { border-radius: 3px; -webkit-box-decoration-break: clone;
  box-decoration-break: clone; }
.fm-bib-verset.selectionne .fm-bib-mots { text-decoration: underline;
  text-decoration-color: var(--fm-action-txt); text-decoration-thickness: 2px;
  text-underline-offset: 5px; }
/* Le verset d'une adresse (`/bible/1jean/1/7/`) : mis en évidence deux
   secondes, puis le fond s'efface (`bible.js` retire la classe). */
.fm-bib-verset.cible { background: var(--fm-action-pale); }
.fm-bib-jesus { color: var(--fm-couleur-brique); }
.fm-bib-absent { font-family: var(--ef-texte), sans-serif; font-size: .8em;
  font-style: italic; color: var(--fm-texte-doux); }
.fm-bib-a-note { width: .75em; height: .75em; margin-left: 3px;
  color: var(--fm-action-txt); vertical-align: baseline; }
.fm-bib-repere { display: none; width: 5px; height: 5px; margin: 0 3px 2px 0;
  border-radius: 50%; background: var(--fm-action-txt); vertical-align: middle; }
/* Les réglages de lecture (FO-BIB-05), posés par `bible.js`. */
.fm-bib-texte.sans-numeros .fm-bib-numero { display: none; }
.fm-bib-texte.un-par-ligne .fm-bib-verset { display: block; margin: 0 0 .35em; }
.fm-bib-texte.reperes .fm-bib-repere { display: inline-block; }

.fm-bib-voisins { display: flex; justify-content: space-between; gap: 10px;
  margin: 22px 0 6px; }
body.fm .fm-bib-voisins a.fm-bib-pastille { min-height: 44px; color: var(--fm-action-txt);
  background: var(--fm-surface); }
.fm-bib-voisins .suivant { margin-left: auto; }
body.fm a.fm-bib-depuis { display: inline-flex; align-items: center; gap: 4px;
  min-height: 44px; margin: -10px 0 4px; font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); text-decoration: none; }
.fm-bib-depuis .fm-icone { width: 15px; height: 15px; }

/* La colonne de droite du bureau : le panneau d'étude du verset
   sélectionné, puis « Mes surlignages » du livre. */
.fm-bib-etude { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; }
.fm-bib-etude[hidden] { display: none; }
.fm-bib-onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--fm-bordure-fine); }
.fm-bib-onglets button, body.fm .fm-bib-onglets a { display: inline-flex; align-items: center;
  gap: 6px; min-height: 40px; padding: 0 10px; margin-bottom: -1px; font: inherit;
  font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte-doux); background: none;
  border: 0; border-bottom: 2px solid transparent; cursor: pointer; text-decoration: none; }
.fm-bib-onglets button.actif, body.fm .fm-bib-onglets a.actif {
  color: var(--fm-action-txt); border-bottom-color: var(--fm-action-txt); }
.fm-bib-etude-corps { max-height: 60vh; overflow-y: auto; }
.fm-bib-mes-surlignages .ef-section { margin-top: 0; }

/* FO-BIB-03 : la feuille d'un verset sélectionné — en bas de l'écran, à
   toutes les largeurs : le texte reste lisible au-dessus. */
.fm-bib-feuille { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61;
  display: flex; flex-direction: column; gap: 12px; padding: 10px 16px 18px;
  max-height: 80vh; overflow-y: auto; box-sizing: border-box;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-bottom: 0;
  border-radius: 18px 18px 0 0; }
.fm-bib-feuille[hidden] { display: none; }
@media (min-width: 40rem) {
  .fm-bib-feuille { left: 50%; right: auto; bottom: 16px; width: 480px;
    transform: translateX(-50%); border-bottom: 1px solid var(--fm-bordure);
    border-radius: 18px; }
}
.ef-page .fm-bib-feuille p, .fm-bib-feuille p { margin: 0; }
.fm-bib-feuille .tete { display: flex; align-items: center; gap: 8px; }
.fm-bib-feuille .tete .titre { flex: 1; font-family: var(--fm-titre); font-size: calc(15px * var(--fm-echelle, 1));
  font-weight: 700; color: var(--fm-texte); }
.fm-bib-feuille .tete .nombre { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-bib-fermer { display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -8px -10px -8px 0; background: none; border: 0;
  color: var(--fm-texte-doux); cursor: pointer; }
.fm-bib-fermer .fm-icone { width: 18px; height: 18px; }
.fm-bib-couleurs { display: flex; align-items: center; gap: 12px; margin: 0; }
.fm-bib-pastille-couleur { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--fm-bordure); }
.fm-bib-pastille-couleur.jaune { background: var(--fm-surligne-jaune); }
.fm-bib-pastille-couleur.vert { background: var(--fm-surligne-vert); }
.fm-bib-pastille-couleur.violet { background: var(--fm-surligne-violet); }
.fm-bib-pastille-couleur.effacer { background: none; border: 1.5px dashed var(--fm-texte-doux);
  color: var(--fm-texte-doux); }
.fm-bib-pastille-couleur.effacer .fm-icone { width: 15px; height: 15px; }
.fm-bib-pastille-couleur:focus-visible { outline: 2px solid var(--fm-action-txt);
  outline-offset: 2px; }
.fm-bib-invite { font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte-doux); }
.fm-bib-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fm-bib-action, body.fm a.fm-bib-action { display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; min-height: 44px; padding: 0 8px;
  font: inherit; font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-action-txt);
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-radius: 10px;
  cursor: pointer; text-decoration: none; }
.fm-bib-action .fm-icone { width: 17px; height: 17px; }
.fm-bib-liens { display: flex; flex-wrap: wrap; gap: 4px 16px; }
body.fm .fm-bib-liens a { display: inline-flex; align-items: center; min-height: 36px;
  font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-action-txt); }
.fm-bib-liens a[hidden] { display: none; }
.fm-bib-note { display: flex; flex-direction: column; gap: 6px; }
.fm-bib-note[hidden] { display: none; }
.fm-bib-note-libelle { font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; color: var(--fm-texte-doux); }
.fm-bib-note textarea { padding: 10px 12px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); background: var(--fm-fond);
  border: 1.5px solid var(--fm-action-txt); border-radius: 10px; resize: vertical; }
.fm-bib-notes { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; }
.fm-bib-notes:empty { display: none; }
.fm-bib-notes li { display: flex; align-items: center; gap: 8px; padding: 2px 0 2px 10px;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); border-left: 3px solid var(--fm-action-bord); }
.fm-bib-notes li .texte { flex: 1; white-space: pre-line; }
.fm-bib-notes form { margin: 0; flex: none; }
.fm-bib-message { font-size: calc(13px * var(--fm-echelle, 1)); color: var(--statut-ok); }
.fm-bib-message:empty { display: none; }

/* Les versets cités : résultats de recherche, références croisées. */
.fm-bib-citations .fm-ligne { align-items: flex-start; }
.fm-bib-ref-titre { font-family: var(--fm-titre); font-size: calc(13px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-action-txt); }
.fm-bib-ligne-cite, .fm-bib-extrait { display: block; font-family: var(--fm-lecture);
  font-size: calc(15px * var(--fm-echelle, 1)); line-height: 1.5; color: var(--fm-texte); }
.fm-bib-extrait mark { padding: 0 2px; border-radius: 2px; font-weight: 600;
  color: inherit; background: var(--fm-action-pale); }
.fm-bib-cite { margin: 0 0 14px; padding: 12px 14px; background: var(--fm-lecture-fond);
  border: 1px solid var(--fm-bordure-fine); border-radius: 12px; }
.fm-bib-cite-texte { margin: 0; font-family: var(--fm-lecture); font-size: calc(16px * var(--fm-echelle, 1));
  line-height: 1.6; color: var(--fm-texte); }
.fm-bib-cite-texte sup { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-action-txt); }
.fm-bib-refs-tete { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.fm-bib-refs-tete .titre { font-family: var(--fm-titre); font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700;
  color: var(--fm-texte); }
.fm-bib-refs-tete .ordre { margin-left: auto; font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* FO-BIB-09 : le verset dans les cinq versions, la version de lecture en
   tête et encadrée. */
.fm-bib-comparer { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 10px; }
body.fm .fm-bib-comparer a { display: flex; flex-direction: column; gap: 6px;
  padding: 11px 13px; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; color: var(--fm-texte); text-decoration: none; }
body.fm .fm-bib-comparer li.active a { border: 1.5px solid var(--fm-action-txt); }
.fm-bib-comparer .tete { display: flex; align-items: center; gap: 8px; }
.fm-bib-comparer .sigle { padding: 2px 6px; border-radius: 4px; font-size: calc(11px * var(--fm-echelle, 1));
  font-weight: 700; color: var(--fm-action-txt); background: var(--fm-action-pale); }
.fm-bib-comparer .libelle { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-bib-comparer .lecture { margin-left: auto; font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-action-txt); }
.fm-bib-comparer .texte { font-family: var(--fm-lecture); font-size: calc(16px * var(--fm-echelle, 1)); line-height: 1.55; }

/* FO-BIB-07 : un récit à la fois au téléphone, en onglets ; en colonnes
   dès la tablette. Les mots communs à tous les récits soulignés. */
.fm-bib-parallele-tete { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.fm-bib-parallele-tete .fm-bib-sigles { margin-left: auto; }
.fm-bib-recits-onglets { margin: 0 0 12px; overflow-x: auto; }
.fm-bib-recits { display: block; }
.fm-bib-recit { display: none; padding: 16px; background: var(--fm-lecture-fond);
  border: 1px solid var(--fm-bordure-fine); border-radius: 14px; }
.fm-bib-recit.courant { display: block; }
body.fm .fm-bib-recit h2 { margin: 0 0 10px; font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 700; }
body.fm .fm-bib-recit h2 a { color: var(--fm-action-txt); text-decoration: none; }
.fm-bib-recit .fm-bib-texte { font-size: calc(17px * var(--fm-echelle, 1)); }
@media (min-width: 40rem) {
  .fm-bib-recits-onglets { display: none; }
  .fm-bib-recits { display: grid; gap: 14px; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .fm-bib-recit { display: block; }
  .fm-bib-recit .fm-bib-texte { font-size: calc(16px * var(--fm-echelle, 1)); }
}
.fm-bib-commun { text-decoration: underline; text-decoration-color: var(--fm-action-txt);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* R43 — une photo demandée par l'église, en tête du Profil et au-dessus de
   « Ma fiche » : l'encart « À faire », avec sa marge. */
.fm-photo-demandee { margin-bottom: 14px; }

/* --- Suivi des offrandes (FO-OFA, R45) ---------------------------------------
   Maquette « Front2 - Suivi des offrandes ». Au téléphone, une carte de
   chiffres — la période, le total, la barre —, la recherche, les onglets, puis
   un don par carte. À la tablette, la même carte s'élargit (compteurs à
   gauche, répartition à droite) et la liste devient un tableau. Au bureau,
   deux cartes, une colonne « Moyen », les secondes, le statut et le détail
   dans un panneau à droite. Les couleurs des familles viennent de jetons.css
   (--fm-don-*) ; les statuts gardent les leurs. */
.fm-ofa { display: flex; flex-direction: column; gap: 14px; }
.fm-ofa .chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
.ef-page .fm-ofa p { margin: 0; }

/* L'âge des données, sous le titre (à côté au-delà du téléphone). */
.ef-page .fm-ofa-etat, .fm-ofa-etat { display: flex; align-items: center; gap: 6px; margin: 2px 0 0;
  font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ofa-etat .point { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--statut-ok); }
.fm-ofa-etat.hors-ligne { color: var(--statut-attention); }
.fm-ofa-etat.hors-ligne .point { background: var(--statut-attention); }
@media (min-width: 40rem) {
  body.fm .mb-ecran-titre:has(> .fm-ofa-etat) { display: flex; align-items: center;
    flex-wrap: wrap; gap: 4px 14px; }
}

/* La carte des chiffres. */
.fm-ofa-tete { background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; padding: 14px 15px; display: flex; flex-direction: column;
  gap: 12px; }
.fm-ofa-carte { min-width: 0; }
.fm-ofa-carte-total { display: flex; flex-direction: column; gap: 10px; }
.fm-ofa-total { font-size: calc(30px * var(--fm-echelle, 1)); font-weight: 600;
  line-height: 1.15; color: var(--fm-texte); letter-spacing: -.01em; }
.fm-ofa-compteurs { display: none; margin: 0; gap: 8px 18px; flex-wrap: wrap;
  align-items: flex-start; }
.fm-ofa-compteurs > div { display: flex; flex-direction: column-reverse; }
.fm-ofa-compteurs dd { margin: 0; font-size: calc(16px * var(--fm-echelle, 1));
  font-weight: 600; color: var(--fm-texte); }
.fm-ofa-compteurs dt { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ofa-compteurs .dont { display: block; font-size: calc(11px * var(--fm-echelle, 1)); }
.fm-ofa-surtitre { display: none; font-family: var(--chiffres);
  font-size: calc(10px * var(--fm-echelle, 1)); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-ofa-barre { display: flex; gap: 2px; height: 8px; border-radius: 4px;
  overflow: hidden; background: var(--fm-bordure-fine); }
.fm-ofa-barre i { display: block; height: 100%; }
.fm-ofa-barre .dime, .fm-ofa-type.dime::before, .fm-ofa-familles .dime::before {
  background: var(--fm-don-dime); }
.fm-ofa-barre .offrande, .fm-ofa-type.offrande::before, .fm-ofa-familles .offrande::before {
  background: var(--fm-don-offrande); }
.fm-ofa-barre .autres, .fm-ofa-type.autres::before, .fm-ofa-familles .autres::before {
  background: var(--fm-don-autres); }
.fm-ofa-familles { list-style: none; margin: 10px 0 0; padding: 0; display: flex;
  flex-wrap: wrap; gap: 4px 14px; font-size: calc(12px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ofa-familles li { display: flex; align-items: center; gap: 6px; }
.fm-ofa-familles li::before { content: ""; flex: none; width: 9px; height: 9px;
  border-radius: 2px; }
.fm-ofa-familles .montant { color: var(--fm-texte-doux); }
.fm-ofa-familles .exact, .fm-ofa-familles .part { display: none; }

/* La période : un bouton, et sa liste. */
.fm-ofa-periode { position: relative; align-self: flex-start; }
.fm-ofa-periode > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 6px; min-height: 36px; padding: 0 10px;
  border: 1px solid var(--fm-action-txt); border-radius: var(--fm-r-bouton);
  color: var(--fm-texte); font-family: var(--chiffres); font-weight: 700;
  font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .14em;
  text-transform: uppercase; }
.fm-ofa-periode > summary::-webkit-details-marker { display: none; }
.fm-ofa-periode > summary .fm-icone { width: 14px; height: 14px; transition: transform .15s; }
.fm-ofa-periode[open] > summary .fm-icone { transform: rotate(180deg); }
.fm-ofa-periodes { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40;
  width: 250px; max-width: calc(100vw - 48px); padding: 4px 0;
  background: var(--fm-surface); color: var(--fm-texte);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-ofa-periodes ul { list-style: none; margin: 0; padding: 0; }
.fm-ofa-periodes a, .fm-ofa-periodes .eteint, .fm-ofa-perso > summary {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  min-height: 44px; box-sizing: border-box; padding: 8px 12px;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte);
  text-decoration: none; }
body.fm .fm-ofa-periodes a, body.fm .fm-ofa-periodes a:visited { color: var(--fm-texte); }
.fm-ofa-periodes a:hover { background: var(--fm-surface-2); }
.fm-ofa-periodes a.actif { background: var(--fm-action-pale); font-weight: 700; }
.fm-ofa-periodes .precision { grid-column: 1; font-size: calc(11px * var(--fm-echelle, 1));
  font-weight: 400; color: var(--fm-texte-doux); }
.fm-ofa-periodes .coche { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px;
  color: var(--fm-action-txt); }
.fm-ofa-periodes .eteint { color: var(--fm-texte-doux); cursor: not-allowed; }
.fm-ofa-perso { border-top: 1px solid var(--fm-bordure-fine); margin-top: 4px; }
.fm-ofa-perso > summary { list-style: none; cursor: pointer; }
.fm-ofa-perso > summary::-webkit-details-marker { display: none; }
.fm-ofa-perso-champs { display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 12px; }
.fm-ofa-perso-champs label { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ofa-perso-champs input { min-height: 40px; padding: 0 8px; font: inherit;
  font-family: var(--chiffres); color: var(--fm-texte); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-bouton); }

/* La recherche et les filtres. */
.fm-ofa-filtres { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fm-ofa-recherche { position: relative; display: flex; align-items: center; }
.fm-ofa-recherche .fm-icone { position: absolute; left: 13px; width: 17px; height: 17px;
  color: var(--fm-texte-doux); pointer-events: none; }
.fm-ofa-recherche input { width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 0 12px 0 40px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-ofa-onglets { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.fm-ofa-onglets .mb-filtre { flex: none; }
.fm-ofa-choix { display: none; }
.fm-ofa-choix select { min-height: 44px; padding: 0 12px; font: inherit;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte);
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-carte); }

/* La liste. Au téléphone, chaque don est une carte : le donateur et le
   montant, puis le type, l'heure et le moyen, puis le statut s'il n'est pas
   « Payé ». */
.fm-ofa-liste { background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; overflow: hidden; }
.fm-ofa-table { width: 100%; border-collapse: collapse; }
.fm-ofa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.fm-ofa-table tbody, .fm-ofa-table tr { display: block; }
.fm-ofa-table tbody tr { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 3px 6px; padding: 11px 14px; border-top: 1px solid var(--fm-bordure-fine);
  position: relative; cursor: pointer; transition: background-color .6s; }
.fm-ofa-table tbody tr:first-child { border-top: 0; }
.fm-ofa-table tbody tr:hover { background: var(--fm-surface-2); }
.fm-ofa-table td { display: block; padding: 0; }
.fm-ofa-table td.donateur { order: 1; flex: 1 1 0; min-width: 0; }
.fm-ofa-table td.montant { order: 2; flex: 0 0 auto; margin-left: auto; text-align: right; }
/* Le retour à la ligne après le montant. */
.fm-ofa-table tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.fm-ofa-table td.type { order: 4; }
.fm-ofa-table td.heure { order: 5; }
.fm-ofa-table td.moyen { order: 6; }
.fm-ofa-table td.statut { order: 7; flex-basis: 100%; }
.fm-ofa-table td.statut:has(.paye) { display: none; }
.fm-ofa-table td.geste, .fm-ofa-table .moyen-sous, .fm-ofa-table .s { display: none; }
.fm-ofa-table .nom { font-weight: 700; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); text-decoration: none; overflow-wrap: anywhere; }
body.fm .fm-ofa-table a.nom, body.fm .fm-ofa-table a.nom:visited { color: var(--fm-texte); }
body.fm .fm-ofa-table a.nom.anonyme { font-weight: 400; color: var(--fm-texte-doux); }
.fm-ofa-table td.montant { font-weight: 600; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); white-space: nowrap; }
.fm-ofa-table tr.barre td.montant s { color: var(--fm-texte-doux); }
.fm-ofa-table td.heure, .fm-ofa-table td.moyen { font-family: var(--chiffres);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ofa-table td.statut { margin-top: 4px; }
/* Un don qui vient d'arriver : un point magenta et un fond léger, une minute. */
.fm-ofa-table tr.nouveau { background: var(--fm-don-nouveau-fond); }
.fm-ofa-table tr.nouveau td.donateur .nom::before { content: ""; display: inline-block;
  width: 7px; height: 7px; margin: 0 8px 2px -15px; border-radius: 50%;
  background: var(--fm-magenta); vertical-align: middle; }
.fm-ofa-table tr.nouveau td.donateur { padding-left: 15px; }

.fm-ofa-type { display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-ofa-type::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; }
.fm-ofa-statut { display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--fm-r-pastille); border: 1px solid var(--fm-bordure);
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700; white-space: nowrap;
  color: var(--fm-texte-doux); background: var(--fm-surface-2); }
.fm-ofa-statut.ok { color: var(--statut-ok); background: var(--statut-ok-fond);
  border-color: var(--statut-ok-bord); }
.fm-ofa-statut.attention { color: var(--statut-attention); background: var(--statut-attention-fond);
  border-color: var(--statut-attention-bord); }
.fm-ofa-statut.bloquant { color: var(--statut-bloquant); background: var(--statut-bloquant-fond);
  border-color: var(--statut-bloquant-bord); }

.fm-ofa-pied { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px;
  border-top: 1px solid var(--fm-bordure-fine);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
body.fm a.fm-ofa-plus { display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--fm-titre); font-weight: 700; font-size: calc(13px * var(--fm-echelle, 1));
  color: var(--fm-action-txt); text-decoration: none; }
.fm-ofa-vide { padding: 22px 16px; text-align: center;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* Le détail d'un don (FO-OFA-02). */
.fm-ofa-detail { display: flex; flex-direction: column; gap: 14px; }
.fm-ofa-detail-tete { display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 6px 0 2px; text-align: center; }
.fm-ofa-detail-montant { font-size: calc(38px * var(--fm-echelle, 1)); font-weight: 600;
  line-height: 1.1; color: var(--fm-texte); }
.fm-ofa-detail-montant s { color: var(--fm-texte-doux); }
.fm-ofa-rangees { margin: 0; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; overflow: hidden; }
.fm-ofa-rangees > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 11px 14px; }
.fm-ofa-rangees > div + div { border-top: 1px solid var(--fm-bordure-fine); }
.fm-ofa-rangees dt { flex: none; font-size: calc(14px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ofa-rangees dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-ofa-rangees dd.chiffre { font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-ofa-rangees dd.fort { font-weight: 700; }
.fm-ofa-note { font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5;
  color: var(--fm-texte-doux); }

/* Au bureau, le détail dans un panneau à droite de la liste : la liste se
   resserre, rien ne la recouvre. */
.fm-ofa-volet { box-sizing: border-box; padding: 0 18px 20px;
  background: var(--fm-surface-2); border: 1px solid var(--fm-bordure);
  border-radius: 14px; }
.fm-ofa-volet[hidden] { display: none; }
.fm-ofa-volet-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 0; background: var(--fm-surface-2); }
body.fm .fm-ofa-volet-tete h2 { margin: 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(18px * var(--fm-echelle, 1)); }
.fm-ofa-fermer { width: 44px; height: 44px; font-size: calc(26px * var(--fm-echelle, 1));
  line-height: 1; cursor: pointer;
  color: var(--fm-texte); background: none; border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-bouton); }

/* La page réservée (FO-OFA-03). */
.fm-ofa-reserve { display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 420px; margin: 24px auto 0; text-align: center; }
.fm-ofa-reserve-icone { display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--fm-action-pale);
  color: var(--fm-action-txt); }
.fm-ofa-reserve-icone .fm-icone { width: 24px; height: 24px; }
body.fm .fm-ofa-reserve h2 { margin: 6px 0 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(20px * var(--fm-echelle, 1)); }
.ef-page .fm-ofa-reserve p { margin: 0 0 8px; font-size: calc(15px * var(--fm-echelle, 1));
  line-height: 1.5; color: var(--fm-texte-doux); }

/* Tablette : la carte s'élargit, la liste devient un tableau. */
@media (min-width: 40rem) {
  .fm-ofa-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px 28px; align-items: start; }
  .fm-ofa-compteurs { display: flex; }
  .fm-ofa-familles { flex-direction: column; gap: 6px; font-size: calc(13px * var(--fm-echelle, 1));
    color: var(--fm-texte); }
  .fm-ofa-familles .nom { flex: 1; }
  .fm-ofa-familles .montant { color: var(--fm-texte); }
  .fm-ofa-familles .rond { display: none; }
  .fm-ofa-familles .exact { display: inline; }
  .fm-ofa-carte-repartition { padding-top: 6px; }

  .fm-ofa-table { display: table; }
  .fm-ofa-table thead { position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; display: table-header-group; }
  .fm-ofa-table tbody { display: table-row-group; }
  .fm-ofa-table tr, .fm-ofa-table tbody tr { display: table-row; padding: 0; }
  .fm-ofa-table tbody tr::after { content: none; }
  .fm-ofa-table th, .fm-ofa-table td { display: table-cell; padding: 12px 14px;
    vertical-align: middle; text-align: left; }
  .fm-ofa-table tbody td { border-top: 1px solid var(--fm-bordure-fine); }
  .fm-ofa-table tbody tr:first-child td { border-top: 0; }
  .fm-ofa-table th { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fm-texte-doux); background: var(--fm-surface-2); white-space: nowrap; }
  .fm-ofa-table th.montant, .fm-ofa-table td.montant { text-align: right; }
  .fm-ofa-table td.statut:has(.paye) { display: table-cell; }
  .fm-ofa-table th.moyen, .fm-ofa-table td.moyen, .fm-ofa-table th.geste { display: none; }
  .fm-ofa-table .moyen-sous { display: block; font-size: calc(11px * var(--fm-echelle, 1));
    color: var(--fm-texte-doux); }
  .fm-ofa-table td.heure { font-size: calc(13px * var(--fm-echelle, 1)); white-space: nowrap; }
  .fm-ofa-table td.statut { margin: 0; }
  .fm-ofa-table td.donateur { padding-left: 14px; }
  .fm-ofa-table tr.nouveau td.donateur { padding-left: 14px; }
  .fm-ofa-table tr.nouveau td.heure { position: relative; }
  .fm-ofa-table tr.nouveau td.donateur .nom::before { display: none; }
  .fm-ofa-table tr.nouveau td.heure::before { content: ""; position: absolute; left: 6px;
    top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
    background: var(--fm-magenta); }
  .fm-ofa-table td.heure { padding-left: 20px; }
}

/* Bureau : deux cartes, la colonne « Moyen », les secondes, le statut, le
   détail. Les sélecteurs de statut et d'autre don rejoignent la ligne. */
@media (min-width: 64rem) {
  .fm-ofa-tete { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;
    gap: 14px; padding: 0; background: none; border: 0; border-radius: 0; }
  .fm-ofa-carte { background: var(--fm-surface); border: 1px solid var(--fm-bordure);
    border-radius: 14px; padding: 16px 18px; }
  .fm-ofa-carte-total { flex: 0 1 280px; }
  .fm-ofa-carte-repartition { flex: 0 1 380px; padding-top: 16px; }
  .fm-ofa-surtitre { display: block; margin-bottom: 10px; }
  .fm-ofa-familles .part { display: inline; min-width: 3.5em; text-align: right;
    font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
  .fm-ofa-filtres { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fm-ofa-recherche { flex: 1 1 280px; }
  .fm-ofa-onglets { overflow: visible; flex-wrap: wrap; }
  .fm-ofa-choix { display: block; }
  .fm-ofa-table th.moyen, .fm-ofa-table td.moyen, .fm-ofa-table th.geste,
  .fm-ofa-table td.geste { display: table-cell; }
  .fm-ofa-table td.moyen { font-family: inherit; font-size: calc(13px * var(--fm-echelle, 1));
    color: var(--fm-texte); }
  .fm-ofa-table td.moyen .separe, .fm-ofa-table .moyen-sous { display: none; }
  .fm-ofa-table .s { display: inline; }
  .fm-ofa-table td.geste { text-align: right; white-space: nowrap; }
  body.fm .fm-ofa-table td.geste a { font-family: var(--fm-titre); font-weight: 700;
    font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-action-txt);
    text-decoration: none; }
  .fm-ofa-table tbody tr.ouvert { background: var(--fm-action-pale); }
  .fm-ofa-cadre:has(> .fm-ofa-volet:not([hidden])) { display: grid;
    grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
  .fm-ofa-cadre:has(> .fm-ofa-volet:not([hidden])) .fm-ofa-table .moyen { display: none; }
  .fm-ofa-volet { position: sticky; top: calc(var(--mb-haut) + 12px);
    max-height: calc(100vh - var(--mb-haut) - 24px); overflow-y: auto; }
}
@media (max-width: 63.99rem) {
  .fm-ofa-volet { display: none; }
}

/* --- Suivi des inscriptions (FO-INA, R46) -------------------------------------
   Maquette « Front2 - Suivi des inscriptions ». Au téléphone, le sélecteur
   d'événement, une carte de chiffres — les places prises et leur jauge, les
   statuts, l'argent —, la recherche, les filtres, puis un inscrit par carte.
   À la tablette, la liste devient un tableau ; au bureau, les chiffres
   tiennent sur une ligne, le sélecteur passe à droite, chaque
   colonne se trie et le détail s'ouvre dans un panneau à droite. Les
   couleurs de statut gardent les leurs. */
.fm-ina { display: flex; flex-direction: column; gap: 14px; }
.fm-ina .chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
.ef-page .fm-ina p { margin: 0; }
.ef-page .fm-ina .fm-ina-intro { font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ina-onglets { margin: 0; }

/* L'âge des données, sous le titre. */
.ef-page .fm-ina-etat, .fm-ina-etat { display: flex; align-items: center; gap: 6px; margin: 2px 0 0;
  font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ina-etat .point { flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--statut-ok); }
.fm-ina-etat.hors-ligne { color: var(--statut-attention); }
.fm-ina-etat.hors-ligne .point { background: var(--statut-attention); }
@media (min-width: 40rem) {
  body.fm .mb-ecran-titre:has(> .fm-ina-etat) { display: flex; align-items: center;
    flex-wrap: wrap; gap: 4px 14px; }
}

/* L'image d'un événement, ou son fond rayé. */
.fm-ina-image { display: block; flex: none; width: 56px; height: 56px; overflow: hidden;
  border-radius: 10px;
  background: repeating-linear-gradient(135deg,
    var(--fm-action-pale), var(--fm-action-pale) 8px,
    var(--fm-surface-2) 8px, var(--fm-surface-2) 16px); }
.fm-ina-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* FO-INA-01 — les cartes des événements. */
.fm-ina-evenements { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.fm a.fm-ina-evenement, body.fm a.fm-ina-evenement:visited { display: flex;
  align-items: center; gap: 14px; padding: 12px 14px; color: var(--fm-texte);
  text-decoration: none; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 14px; }
body.fm a.fm-ina-evenement:hover { border-color: var(--fm-action-txt); }
.fm-ina-evenement .corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fm-ina-evenement .titre { font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(16px * var(--fm-echelle, 1)); line-height: 1.25; }
.fm-ina-evenement .periode { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ina-evenement .places { font-family: var(--chiffres); font-size: calc(12px * var(--fm-echelle, 1)); }
.fm-ina-evenement .chevron { flex: none; width: 16px; height: 16px; color: var(--fm-texte-doux); }
@media (min-width: 40rem) {
  .fm-ina-evenements { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}

/* Le sélecteur d'événement, en tête de FO-INA-02. */
.fm-ina-selecteur { position: relative; }
.fm-ina-selecteur > summary { list-style: none; cursor: pointer; display: flex;
  align-items: center; gap: 12px; padding: 10px 14px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 14px; }
.fm-ina-selecteur > summary::-webkit-details-marker { display: none; }
.fm-ina-selecteur[open] > summary { border-color: var(--fm-action-txt); }
.fm-ina-selecteur .fm-ina-image { width: 40px; height: 40px; border-radius: 8px; }
.fm-ina-selecteur .libelle { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fm-ina-selecteur .surtitre { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .14em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-ina-selecteur .titre { font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(16px * var(--fm-echelle, 1)); color: var(--fm-texte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-ina-selecteur > summary .chevron { flex: none; width: 16px; height: 16px;
  color: var(--fm-texte-doux); transition: transform .15s; }
.fm-ina-selecteur[open] > summary .chevron { transform: rotate(180deg); }
.fm-ina-choix { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  padding: 4px 0; background: var(--fm-surface); color: var(--fm-texte);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-ina-choix ul { list-style: none; margin: 0; padding: 0; }
.fm-ina-choix li + li { border-top: 1px solid var(--fm-bordure-fine); }
.fm-ina-choix a { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 2px 10px; min-height: 52px; box-sizing: border-box; padding: 9px 14px;
  text-decoration: none; }
body.fm .fm-ina-choix a, body.fm .fm-ina-choix a:visited { color: var(--fm-texte); }
.fm-ina-choix a:hover { background: var(--fm-surface-2); }
.fm-ina-choix a.actif { background: var(--fm-action-pale); }
.fm-ina-choix .titre { font-weight: 700; font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-ina-choix a:not(.actif) .titre { font-weight: 400; }
.fm-ina-choix .precision { grid-column: 1; font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ina-choix .coche { grid-column: 2; grid-row: 1 / span 2; width: 16px; height: 16px;
  color: var(--fm-action-txt); }
body.fm a.fm-ina-tous { display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  border-top: 1px solid var(--fm-bordure-fine); font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-action-txt);
  text-decoration: none; }

/* La carte des chiffres. */
.fm-ina-chiffres { display: flex; flex-direction: column; gap: 12px; padding: 14px 15px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure); border-radius: 14px; }
.fm-ina-surtitre { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
  letter-spacing: .14em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-ina-places { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
.fm-ina-places .fort { font-size: calc(30px * var(--fm-echelle, 1)); font-weight: 600;
  line-height: 1.15; color: var(--fm-texte); }
.fm-ina-places .sur { font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ina-places .reste { margin-left: auto; font-size: calc(12px * var(--fm-echelle, 1));
  color: var(--statut-attention); }
.fm-ina-places .reste.complet { color: var(--fm-texte-doux); }
.fm-ina-barre { display: block; height: 6px; margin-top: 8px; border-radius: 3px;
  overflow: hidden; background: var(--fm-bordure-fine); }
.fm-ina-barre i { display: block; height: 100%; background: var(--fm-action-txt); }
.fm-ina-compteurs { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--fm-bordure-fine); }
.fm-ina-compteurs > div { display: flex; flex-direction: column-reverse; }
.fm-ina-compteurs dd { margin: 0; font-size: calc(17px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); }
.fm-ina-compteurs .ok dd { color: var(--statut-ok); }
.fm-ina-compteurs .attention dd { color: var(--statut-attention); }
.fm-ina-compteurs dt { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ina-argent { display: flex; flex-direction: column; gap: 4px; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--fm-bordure-fine); }
.fm-ina-argent > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fm-ina-argent dt { font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-ina-argent dd { margin: 0; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-ina-argent dd.fort { font-weight: 700; }
.fm-ina-argent dd.attention { color: var(--statut-attention); }
.fm-ina-argent dd.bloquant { color: var(--statut-bloquant); }

/* La recherche et les filtres. */
.fm-ina-filtres { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.fm-ina-recherche { position: relative; display: flex; align-items: center; }
.fm-ina-recherche .fm-icone { position: absolute; left: 13px; width: 17px; height: 17px;
  color: var(--fm-texte-doux); pointer-events: none; }
.fm-ina-recherche input { width: 100%; min-height: 44px; box-sizing: border-box;
  padding: 0 12px 0 40px; font: inherit; font-size: calc(15px * var(--fm-echelle, 1));
  color: var(--fm-texte); background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-carte); }
.fm-ina-filtres .fm-ina-onglets { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; }
.fm-ina-onglets .mb-filtre { flex: none; }
body.fm .fm-ina-filtre.bloquant:not(.actif) { color: var(--statut-bloquant);
  border-color: var(--statut-bloquant-bord); }
body.fm a.fm-ina-filtre.bloquant.actif { color: var(--fm-sur-plein);
  background: var(--statut-bloquant-plein); border-color: var(--statut-bloquant-plein); }
body.fm .fm-ina-filtre.discret:not(.actif) { color: var(--fm-texte-doux);
  border-style: dashed; }

/* La liste. Au téléphone, chaque inscrit est une carte : le portrait, le nom
   et le montant, puis Frère ou Sœur, l'âge et la catégorie, puis le statut et
   l'autorisation. */
.fm-ina-liste { background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; overflow: hidden; }
.fm-ina-table { width: 100%; border-collapse: collapse; }
.fm-ina-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.fm-ina-table tbody, .fm-ina-table tr { display: block; }
.fm-ina-table tbody tr { display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 10px; padding: 12px 14px;
  border-top: 1px solid var(--fm-bordure-fine); cursor: pointer; }
.fm-ina-table tbody tr:first-child { border-top: 0; }
.fm-ina-table tbody tr:hover { background: var(--fm-surface-2); }
.fm-ina-table td { display: block; padding: 0; }
.fm-ina-table td.participant { order: 1; flex: 1 1 0; min-width: 0; }
.fm-ina-table td.paye { order: 2; align-self: flex-start; margin-left: auto; padding-top: 2px;
  text-align: right; white-space: nowrap; font-size: calc(12px * var(--fm-echelle, 1)); }
/* Le retour à la ligne après le montant : le statut et l'autorisation
   dessous, alignés sur le nom. */
.fm-ina-table tbody tr::after { content: ""; order: 3; flex-basis: 100%; height: 0; }
.fm-ina-table td.statut { order: 4; margin-left: 54px; }
.fm-ina-table td.autorisation { order: 5; }
.fm-ina-table td.autorisation:has(.aucune) { display: none; }
.fm-ina-table td.age, .fm-ina-table td.eglise, .fm-ina-table td.inscrit { display: none; }
.fm-ina-table .qui { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fm-ina-table .identite { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fm-ina-table .nom { font-weight: 700; font-size: calc(15px * var(--fm-echelle, 1));
  text-decoration: none; overflow-wrap: anywhere; }
body.fm .fm-ina-table a.nom, body.fm .fm-ina-table a.nom:visited { color: var(--fm-texte); }
.fm-ina-table .sous { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-ina-table td.paye .ok { color: var(--statut-ok); }
.fm-ina-table td.paye .attention { color: var(--statut-attention); }

.fm-ina-portrait { display: block; flex: none; border-radius: 50%;
  border: 1px solid var(--fm-bordure); object-fit: cover; object-position: 50% 20%; }
.fm-ina-portrait.initiales { display: flex; align-items: center; justify-content: center;
  background: var(--fm-action-pale); color: var(--fm-action-txt);
  font-family: var(--fm-titre); font-weight: 700; }
.fm-ina-portrait.petit { width: 44px; height: 44px; font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-ina-portrait.grand { width: 72px; height: 72px; font-size: calc(24px * var(--fm-echelle, 1)); }

.fm-ina-statut { display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: var(--fm-r-pastille); border: 1px solid var(--fm-bordure);
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700; white-space: nowrap;
  color: var(--fm-texte-doux); background: var(--fm-surface-2); }
.fm-ina-statut.ok { color: var(--statut-ok); background: var(--statut-ok-fond);
  border-color: var(--statut-ok-bord); }
.fm-ina-statut.attention { color: var(--statut-attention); background: var(--statut-attention-fond);
  border-color: var(--statut-attention-bord); }
.fm-ina-statut.bloquant { color: var(--statut-bloquant); background: var(--statut-bloquant-fond);
  border-color: var(--statut-bloquant-bord); }
.fm-ina-autorisation { display: inline-flex; align-items: center; gap: 6px;
  font-size: calc(12px * var(--fm-echelle, 1)); }
.fm-ina-autorisation::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; }
.fm-ina-autorisation.ok { color: var(--statut-ok); }
.fm-ina-autorisation.bloquant { color: var(--statut-bloquant); }

.fm-ina-pied { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px;
  border-top: 1px solid var(--fm-bordure-fine);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
body.fm a.fm-ina-plus { display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--fm-titre); font-weight: 700; font-size: calc(13px * var(--fm-echelle, 1));
  color: var(--fm-action-txt); text-decoration: none; }
.fm-ina-vide { padding: 22px 16px; text-align: center;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* FO-INA-03 — le détail d'une inscription. */
.fm-ina-detail { display: flex; flex-direction: column; gap: 14px; }
.fm-ina-detail-tete { display: flex; align-items: center; gap: 14px; }
.fm-ina-detail-tete > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fm-ina-detail-tete .genre { font-family: var(--chiffres); font-size: calc(11px * var(--fm-echelle, 1));
  letter-spacing: .1em; text-transform: uppercase; color: var(--fm-texte-doux); }
.fm-ina-detail-tete .nom { font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(20px * var(--fm-echelle, 1)); line-height: 1.2; color: var(--fm-texte); }
.fm-ina-rangees { margin: 0; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 14px; overflow: hidden; }
.fm-ina-rangees > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 11px 14px; }
.fm-ina-rangees > div + div { border-top: 1px solid var(--fm-bordure-fine); }
.fm-ina-rangees dt { flex: none; max-width: 45%; font-size: calc(14px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-ina-rangees dd { margin: 0; min-width: 0; text-align: right; overflow-wrap: anywhere;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-ina-rangees dd.chiffre { font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-ina-rangees dd.ok { color: var(--statut-ok); }
.fm-ina-rangees dd.attention { color: var(--statut-attention); }
.fm-ina-rangees dd.bloquant { color: var(--statut-bloquant); }
.fm-ina-relance { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.fm-ina-note { font-size: calc(13px * var(--fm-echelle, 1)); line-height: 1.5;
  color: var(--fm-texte-doux); }

/* Au bureau, le détail dans un panneau à droite de la liste. */
.fm-ina-volet { box-sizing: border-box; padding: 0 18px 20px;
  background: var(--fm-surface-2); border: 1px solid var(--fm-bordure);
  border-radius: 14px; }
.fm-ina-volet[hidden] { display: none; }
.fm-ina-volet-tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 0; background: var(--fm-surface-2); }
body.fm .fm-ina-volet-tete h2 { margin: 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(18px * var(--fm-echelle, 1)); }
.fm-ina-fermer { width: 44px; height: 44px; font-size: calc(26px * var(--fm-echelle, 1));
  line-height: 1; cursor: pointer;
  color: var(--fm-texte); background: none; border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-bouton); }

/* FO-INA-04 — la page réservée. */
.fm-ina-reserve { display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 420px; margin: 24px auto 0; text-align: center; }
.fm-ina-reserve-icone { display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--fm-action-pale);
  color: var(--fm-action-txt); }
.fm-ina-reserve-icone .fm-icone { width: 24px; height: 24px; }
body.fm .fm-ina-reserve h2 { margin: 6px 0 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(20px * var(--fm-echelle, 1)); }
.ef-page .fm-ina-reserve p { margin: 0 0 8px; font-size: calc(15px * var(--fm-echelle, 1));
  line-height: 1.5; color: var(--fm-texte-doux); }

/* Tablette : les chiffres en deux colonnes, la liste devient un tableau. */
@media (min-width: 40rem) {
  .fm-ina-chiffres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 28px; }
  .fm-ina-jauge { grid-column: 1 / -1; }
  .fm-ina-compteurs { padding-top: 0; border-top: 0; }
  .fm-ina-argent { padding-top: 0; border-top: 0; }

  .fm-ina-table { display: table; }
  .fm-ina-table thead { position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; display: table-header-group; }
  .fm-ina-table tbody { display: table-row-group; }
  .fm-ina-table tr, .fm-ina-table tbody tr { display: table-row; padding: 0; }
  .fm-ina-table tbody tr::after { content: none; }
  .fm-ina-table th, .fm-ina-table td,
  .fm-ina-table td.statut, .fm-ina-table td.autorisation { display: table-cell; margin: 0;
    padding: 11px 12px; vertical-align: middle; text-align: left; }
  .fm-ina-table td.autorisation:has(.aucune) { display: table-cell; }
  .fm-ina-table td.autorisation .aucune { color: var(--fm-texte-doux); }
  .fm-ina-table tbody td { border-top: 1px solid var(--fm-bordure-fine); }
  .fm-ina-table tbody tr:first-child td { border-top: 0; }
  .fm-ina-table th { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
    font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--fm-texte-doux); background: var(--fm-surface-2); white-space: nowrap; }
  body.fm .fm-ina-table th a, body.fm .fm-ina-table th a:visited { color: inherit;
    text-decoration: none; }
  .fm-ina-table th[aria-sort] { color: var(--fm-texte); }
  .fm-ina-table th[aria-sort="ascending"] a::after { content: " ↑"; }
  .fm-ina-table th[aria-sort="descending"] a::after { content: " ↓"; }
  .fm-ina-table th.paye, .fm-ina-table td.paye { text-align: right; }
  .fm-ina-table td.autorisation { white-space: nowrap; }
  .fm-ina-table td.eglise { font-size: calc(13px * var(--fm-echelle, 1)); }
  .fm-ina-table td.inscrit { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
  .fm-ina-table th.age, .fm-ina-table td.age, .fm-ina-table th.eglise,
  .fm-ina-table th.inscrit { display: none; }
}

/* Bureau : le sélecteur à droite, les chiffres sur une ligne, toutes les
   colonnes, le détail dans un panneau. */
@media (min-width: 64rem) {
  .fm-ina-selecteur { align-self: flex-end; width: min(400px, 100%); }
  .fm-ina-chiffres { grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(0, .8fr)) minmax(240px, 1.4fr);
    align-items: start; padding: 16px 18px; }
  .fm-ina-jauge { grid-column: 1; }
  .fm-ina-compteurs { display: contents; }
  .fm-ina-compteurs > div { flex-direction: column; gap: 6px; }
  .fm-ina-compteurs dt { font-family: var(--chiffres); font-size: calc(10px * var(--fm-echelle, 1));
    letter-spacing: .12em; text-transform: uppercase; }
  .fm-ina-compteurs dd { font-size: calc(26px * var(--fm-echelle, 1)); }
  .fm-ina-argent { grid-column: -2; }
  .fm-ina-filtres { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .fm-ina-recherche { flex: 1 1 280px; }
  .fm-ina-filtres .fm-ina-onglets { overflow: visible; flex-wrap: wrap; }
  .fm-ina-table td.age, .fm-ina-table th.age, .fm-ina-table td.eglise, .fm-ina-table th.eglise,
  .fm-ina-table td.inscrit, .fm-ina-table th.inscrit { display: table-cell; }
  .fm-ina-table td.age { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
  .fm-ina-table .sous { display: none; }
  .fm-ina-table tbody tr.ouvert { background: var(--fm-action-pale); }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) { display: grid;
    grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-table .age,
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-table .inscrit { display: none; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-table .sous { display: block; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-table td.autorisation { white-space: normal; }
  /* Le panneau ouvert, la carte des chiffres reprend sa forme de tablette. */
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-chiffres {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-jauge { grid-column: 1 / -1; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-compteurs { display: flex; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-compteurs > div {
    flex-direction: column-reverse; gap: 0; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-compteurs dt {
    font-family: inherit; font-size: calc(11px * var(--fm-echelle, 1));
    letter-spacing: 0; text-transform: none; }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-compteurs dd {
    font-size: calc(17px * var(--fm-echelle, 1)); }
  .fm-ina-cadre:has(> .fm-ina-volet:not([hidden])) .fm-ina-argent { grid-column: auto; }
  .fm-ina-volet { position: sticky; top: calc(var(--mb-haut) + 12px);
    max-height: calc(100vh - var(--mb-haut) - 24px); overflow-y: auto; }
}
@media (max-width: 63.99rem) {
  .fm-ina-volet { display: none; }
}

/* --- Agenda du pasteur (FO-AGM, FO-AGP) ---------------------------------------
   Maquettes « Front2 - Agenda 01 membre » et « 02 pasteur ». Les types se
   distinguent par l'icône, jamais par une couleur : les couleurs sont aux
   statuts — vert confirmé, ambre en attente (bordure pointillée) et à
   reprogrammer, brique pour un conflit, neutre pour le reste. Un
   rendez-vous personnel vu par l'équipe ou le suivi est hachuré, sans
   texte. Rien ne s'éteint par la transparence. */
.fm-agd { display: flex; flex-direction: column; gap: 14px; }
.fm-agd .chiffre { font-family: var(--chiffres); font-variant-numeric: tabular-nums; }
.ef-page .fm-agd p { margin: 0; }
.fm-agd-carte { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; }
.fm-agd-carte h2, .fm-agd-carte h3 { margin: 0; font-family: var(--fm-titre);
  font-weight: 700; font-size: calc(17px * var(--fm-echelle, 1)); line-height: 1.3;
  color: var(--fm-texte); }
.fm-agd-intro p { color: var(--fm-texte-doux); font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd-surtitre { margin: 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(11px * var(--fm-echelle, 1)); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fm-texte-doux); }
/* Une phrase, qui peut porter un chiffre en chasse fixe : un bloc, jamais un
   flex — un flex ferait de chaque morceau une colonne. */
.fm-agd-note { display: block; font-size: calc(12px * var(--fm-echelle, 1)); line-height: 1.5;
  color: var(--fm-texte-doux); }
.fm-agd-note .fm-icone { display: inline-block; width: 14px; height: 14px;
  margin-right: 6px; vertical-align: -2px; }
.fm-agd-vide { padding: 12px 0; color: var(--fm-texte-doux);
  font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd .precision { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }

/* Un type : son icône et son nom. */
.fm-agd-type { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-type .fm-icone { width: 14px; height: 14px; }
.fm-agd-types { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* Un statut : quatre valeurs, et aucune autre. */
.fm-agd-statut { display: inline-flex; align-items: center; padding: 2px 8px;
  border: 1px solid var(--fm-bordure); border-radius: var(--fm-r-pastille);
  font-size: calc(11px * var(--fm-echelle, 1)); font-weight: 700; white-space: nowrap;
  color: var(--fm-texte-doux); background: var(--fm-surface-2); }
.fm-agd-statut.ok { color: var(--statut-ok); background: var(--statut-ok-fond);
  border-color: var(--statut-ok-bord); }
.fm-agd-statut.attention { color: var(--statut-attention);
  background: var(--statut-attention-fond); border-color: var(--statut-attention-bord); }
.fm-agd-statut.bloquant { color: var(--statut-bloquant);
  background: var(--statut-bloquant-fond); border-color: var(--statut-bloquant-bord); }
.fm-agd-echeance { font-size: calc(11px * var(--fm-echelle, 1)); color: var(--statut-attention); }

/* FO-AGM-01 — les lignes de « Mes rendez-vous ». */
.fm-agd-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
body.fm a.fm-agd-ligne, body.fm a.fm-agd-ligne:visited, .fm-agd-ligne { display: flex;
  align-items: center; gap: 14px; min-height: 44px; padding: 10px 14px;
  color: var(--fm-texte); text-decoration: none; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); border-radius: 12px; }
body.fm a.fm-agd-ligne:hover { border-color: var(--fm-action-txt); }
.fm-agd-ligne.passe { background: var(--fm-surface-2); }
.fm-agd-ligne .corps { flex: 1; min-width: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px 10px; }
.fm-agd-ligne .heure { font-weight: 600; font-size: calc(15px * var(--fm-echelle, 1)); }
.fm-agd-ligne .titre { font-weight: 600; }
.fm-agd-ligne .chevron { flex: none; width: 16px; height: 16px; color: var(--fm-texte-doux); }
.fm-agd-date { flex: none; display: flex; flex-direction: column; align-items: center;
  width: 44px; font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-date .jour { font-size: calc(20px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); }
.fm-agd-date-courte { flex: none; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-agd-passes > summary { cursor: pointer; list-style: none; margin-bottom: 8px; }
.fm-agd-passes > summary::-webkit-details-marker { display: none; }

/* FO-AGM-02 — la semaine en pastilles, puis les créneaux du jour. */
.fm-agd-mois { display: flex; align-items: center; gap: 8px; }
.fm-agd-mois h2 { margin: 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(15px * var(--fm-echelle, 1)); }
.fm-agd-fleches { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fm-agd-fleches a { display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; color: var(--fm-action-txt); }
.fm-agd-fleches .fm-icone { width: 20px; height: 20px; }
.fm-agd-semaine { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fm-agd-jour { display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 44px; padding: 8px 0 7px; border-radius: 10px;
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  font-size: calc(11px * var(--fm-echelle, 1)); color: var(--fm-texte-doux);
  text-decoration: none; }
.fm-agd-jour .chiffre { font-size: calc(16px * var(--fm-echelle, 1)); font-weight: 600;
  color: var(--fm-texte); }
.fm-agd-jour .point { width: 5px; height: 5px; border-radius: 50%; }
.fm-agd-jour.libre .point { background: var(--fm-action); }
body.fm a.fm-agd-jour.choisi { background: var(--fm-action); border-color: var(--fm-action);
  color: var(--fm-sur-plein); }
body.fm a.fm-agd-jour.choisi .chiffre { color: var(--fm-sur-plein); }
.fm-agd-jour.choisi .point { background: var(--fm-sur-plein); }
.fm-agd-jour.passe { background: var(--fm-surface-2); border-style: dashed; }
.fm-agd-plage-tete { display: flex; align-items: baseline; gap: 8px; }
.fm-agd-plage-tete .chiffre { margin-left: auto; font-size: calc(12px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-agd-creneaux { list-style: none; margin: 0; padding: 4px 0 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.fm .fm-agd-creneaux a { display: flex; align-items: center; justify-content: center;
  min-height: 44px; border-radius: 10px; background: var(--fm-surface);
  border: 1px solid var(--fm-bordure); color: var(--fm-texte); text-decoration: none;
  font-size: calc(14px * var(--fm-echelle, 1)); font-weight: 600; }
body.fm .fm-agd-creneaux a:hover, body.fm .fm-agd-creneaux a:focus-visible {
  background: var(--fm-action); border-color: var(--fm-action); color: var(--fm-sur-plein); }
@media (min-width: 40rem) {
  .fm-agd-creneaux { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}

/* FO-AGM-03 — le type et le motif. */
.fm-agd-recap { flex-direction: row; align-items: center; justify-content: space-between; }
.fm-agd-choix { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
.fm-agd-carte.fm-agd-choix { padding: 14px 16px; border: 1px solid var(--fm-bordure); }
.fm-agd-choix legend { padding: 0; margin-bottom: 8px; }
.fm-agd-option { display: flex; align-items: flex-start; gap: 10px; min-height: 44px;
  padding: 12px 14px; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; cursor: pointer; }
.fm-agd-option:has(input:checked) { border-color: var(--fm-action-txt);
  background: var(--fm-action-pale); }
.fm-agd-option.eteinte { cursor: default; background: var(--fm-surface-2);
  border-style: dashed; }
.fm-agd-option .corps { display: flex; flex-direction: column; gap: 3px; }
.fm-agd-option .fm-agd-type { color: var(--fm-texte); font-weight: 600;
  font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd-champ { display: flex; flex-direction: column; gap: 6px; }
.fm-agd textarea, .fm-agd input[type="text"], .fm-agd input:not([type]),
.fm-agd input[type="url"], .fm-agd input[type="date"], .fm-agd input[type="time"],
.fm-agd select { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px;
  font: inherit; font-size: calc(15px * var(--fm-echelle, 1)); color: var(--fm-texte);
  background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: var(--fm-r-bouton); }
.fm-agd input[type="date"], .fm-agd input[type="time"] { font-family: var(--chiffres); }
.fm-agd-encadre { display: block; padding: 10px 12px;
  border-radius: 10px; border: 1px solid var(--fm-action-bord);
  background: var(--fm-action-pale); font-size: calc(13px * var(--fm-echelle, 1));
  line-height: 1.5; color: var(--fm-texte); }
.fm-agd-encadre .fm-icone { display: inline-block; width: 16px; height: 16px;
  margin-right: 8px; vertical-align: -3px; }
.fm-agd-encadre.attention { border-color: var(--statut-attention-bord);
  background: var(--statut-attention-fond); }
.fm-agd-encadre.bloquant { border-color: var(--statut-bloquant-bord);
  background: var(--statut-bloquant-fond); }
.fm-agd-encadre.bloquant a { color: var(--statut-bloquant); }

/* FO-AGM-04 à 06 — l'annonce, puis les rangées du rendez-vous. */
.fm-agd-carte > .fm-agd-statut { align-self: flex-start; }
.fm-agd-annonce.attention { border-color: var(--statut-attention-bord); }
.fm-agd-message { margin: 0; padding: 8px 12px; border-left: 3px solid var(--fm-action-bord);
  background: var(--fm-surface-2); font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd-rangees { margin: 0; background: var(--fm-surface); border: 1px solid var(--fm-bordure);
  border-radius: 12px; }
.fm-agd-rangees > div { display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px; padding: 10px 14px; }
.fm-agd-rangees > div + div { border-top: 1px solid var(--fm-bordure-fine); }
.fm-agd-rangees dt { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-rangees dd { margin: 0; font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte);
  overflow-wrap: anywhere; }
.fm-agd-gestes { display: flex; flex-direction: column; gap: 10px; }
.fm-agd-gestes .mb-bouton-creux .fm-icone { width: 16px; height: 16px; margin-right: 6px; }
.fm-agd-feuille textarea { min-height: 72px; }
body.fm .mb-bouton.bloquant { background: var(--statut-bloquant-plein);
  border-color: var(--statut-bloquant-plein); color: var(--fm-sur-plein); }

/* FO-AGM-07A — la tuile d'accueil. */
body.fm a.fm-agd-tuile { display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px; align-items: center; color: var(--fm-texte); text-decoration: none; }
.fm-agd-tuile .surtitre { grid-column: 1; font-size: calc(11px * var(--fm-echelle, 1));
  color: var(--fm-texte-doux); }
.fm-agd-tuile .titre { grid-column: 1; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(16px * var(--fm-echelle, 1)); }
.fm-agd-tuile .ligne { grid-column: 1; display: flex; align-items: center; gap: 10px; }
.fm-agd-tuile .fm-agd-statut { grid-column: 1; justify-self: start; }
.fm-agd-tuile .chevron { grid-column: 2; grid-row: 1 / span 4; width: 16px; height: 16px;
  color: var(--fm-texte-doux); }

/* FO-AGP — la barre de l'agenda : période, flèches, vues, filtre. */
.fm-agd-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fm-agd-periode { font-size: calc(15px * var(--fm-echelle, 1)); font-weight: 600; }
.fm-agd-barre .fm-agd-fleches { margin-left: 0; }
.fm-agd-vues, .fm-agd-filtres, .fm-agd-natures { margin: 0; }
.fm-agd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fm-agd-actions .fm-icone { width: 16px; height: 16px; margin-right: 6px; }
.fm-agd-google { font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-agd-google .bloquant { color: var(--statut-bloquant); }
.fm-agd-legende { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 6px 14px; font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-legende li { display: inline-flex; align-items: center; gap: 6px; }
.fm-agd-legende .repere { width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--fm-bordure); background: var(--fm-surface); }
.fm-agd-legende .repere.ok { background: var(--statut-ok-fond); border-color: var(--statut-ok); }
.fm-agd-legende .repere.attention { background: var(--statut-attention-fond);
  border-color: var(--statut-attention); }
.fm-agd-legende .repere.attente { border-style: dashed; }
.fm-agd-legende .repere.plage { background: var(--fm-action-pale);
  border: 1px dashed var(--fm-action-txt); }
.fm-agd-legende .repere.indisponible, .fm-agd-personnel.indisponible {
  background: repeating-linear-gradient(135deg, var(--fm-surface-2), var(--fm-surface-2) 6px,
    var(--fm-bordure-fine) 6px, var(--fm-bordure-fine) 12px); }

/* Les jours : l'un sous l'autre en Jour et en Liste ; côte à côte en
   Semaine — la vue Jour répétée, qui se décale vers la droite. */
.fm-agd-cadre { display: grid; gap: 18px; align-items: start; }
.fm-agd-jours { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fm-agd-jours.vue-semaine { flex-direction: row; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 6px; }
.fm-agd-jours.vue-semaine > .fm-agd-journee { flex: 0 0 86%; scroll-snap-align: start; }
@media (min-width: 64rem) {
  .fm-agd-cadre:has(> .fm-agd-cote) { grid-template-columns: minmax(0, 1fr) 320px; }
  .fm-agd-jours.vue-semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px; overflow: visible; }
  .fm-agd-jours.vue-semaine .fm-agd-creneaux-pasteur a { min-height: 0; }
  /* La semaine au bureau : l'heure et le nom, comme la maquette. Le statut,
     le type et le motif restent lus par un lecteur d'écran ; ils s'ouvrent
     sur la fiche, ou dans la vue Jour. */
  .fm-agd-jours.vue-semaine .fm-agd-creneaux-pasteur .fm-agd-statut,
  .fm-agd-jours.vue-semaine .fm-agd-creneaux-pasteur .fm-agd-type,
  .fm-agd-jours.vue-semaine .fm-agd-creneaux-pasteur .motif,
  .fm-agd-jours.vue-semaine .fm-agd-creneaux-pasteur .precision,
  .fm-agd-jours.vue-semaine .fm-agd-plage-bloc > .fm-agd-note {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
}
.fm-agd-journee, .fm-agd-plage-bloc, .fm-agd-creneaux-pasteur li { min-width: 0; }
.fm-agd-creneaux-pasteur a, .fm-agd-personnel { overflow-wrap: anywhere; }
.fm-agd-journee { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fm-agd-journee-tete { margin: 0; font-family: var(--fm-titre); font-weight: 700;
  font-size: calc(13px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-journee.aujourdhui .fm-agd-journee-tete { color: var(--fm-action-txt); }
.fm-agd-personnel { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: 10px; border: 1px solid var(--fm-bordure); background: var(--fm-surface);
  color: var(--fm-texte); text-decoration: none; }
.fm-agd-personnel .heure { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-personnel .titre { font-weight: 600; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-agd-personnel.indisponible .titre { color: var(--fm-texte-doux); }
.fm-agd-plage-bloc { display: flex; flex-direction: column; gap: 6px; padding: 8px;
  border-radius: 10px; background: var(--fm-action-pale);
  border: 1px dashed var(--fm-action-txt); }
.fm-agd-plage-bloc.reportee { background: var(--statut-attention-fond);
  border-color: var(--statut-attention); }
.fm-agd-plage-bloc-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: calc(12px * var(--fm-echelle, 1)); font-weight: 600; }
.fm-agd-plage-bloc-tete a { color: var(--fm-action-txt); }
.fm-agd-creneaux-pasteur { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fm-agd-creneaux-pasteur li { border-radius: 8px; border: 1px solid var(--fm-bordure);
  background: var(--fm-surface); }
.fm-agd-creneaux-pasteur li.ok { border-color: var(--statut-ok-bord); background: var(--statut-ok-fond); }
.fm-agd-creneaux-pasteur li.attention { border-color: var(--statut-attention);
  background: var(--statut-attention-fond); }
.fm-agd-creneaux-pasteur li.attente { border-style: dashed; }
.fm-agd-creneaux-pasteur li.libre { display: flex; gap: 10px; padding: 8px 10px;
  background: transparent; border-style: dashed; color: var(--fm-texte-doux); }
.fm-agd-creneaux-pasteur a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  min-height: 44px; padding: 8px 10px; color: var(--fm-texte); text-decoration: none; }
.fm-agd-creneaux-pasteur .heure { font-weight: 600; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-agd-creneaux-pasteur .titre { font-weight: 600; font-size: calc(13px * var(--fm-echelle, 1)); }
.fm-agd-creneaux-pasteur .motif, .fm-agd-demande .motif { flex-basis: 100%;
  font-size: calc(12px * var(--fm-echelle, 1)); font-style: italic; color: var(--fm-texte-doux); }

/* Le côté : à valider, confiées à l'équipe, à reprogrammer. */
.fm-agd-cote { display: flex; flex-direction: column; gap: 16px; }
.fm-agd-cote section { display: flex; flex-direction: column; gap: 8px; }
.fm-agd-demandes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fm-agd-demande { gap: 6px; }
body.fm .fm-agd-demande .nom { font-weight: 700; color: var(--fm-texte); text-decoration: none; }
.fm-agd-demande .gestes { display: flex; gap: 8px; }
.fm-agd-demande .gestes form { margin: 0; }

/* FO-AGP-04 — la fiche d'un rendez-vous. */
.fm-agd-identite h2 { font-size: calc(20px * var(--fm-echelle, 1)); }
.fm-agd-notes h3 { display: flex; align-items: center; gap: 6px;
  font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd-notes h3 .fm-icone { width: 16px; height: 16px; }
.fm-agd-notes .note { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-radius: 8px; background: var(--fm-surface-2); font-size: calc(14px * var(--fm-echelle, 1)); }
.fm-agd-notes form, .fm-agd-geste { display: flex; flex-direction: column; gap: 8px; }

/* FO-AGP-05 et 07 — les formulaires du pasteur. */
.fm-agd-grille-champs { display: grid; gap: 6px; }
.fm-agd-grille-champs label { font-size: calc(12px * var(--fm-echelle, 1)); color: var(--fm-texte-doux); }
.fm-agd-case { display: flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: calc(14px * var(--fm-echelle, 1)); color: var(--fm-texte); }
.fm-agd-grille-champs label.fm-agd-case { color: var(--fm-texte); }
.fm-agd-type-plage { display: grid; gap: 6px; padding: 8px 0;
  border-top: 1px solid var(--fm-bordure-fine); }
.fm-agd-reglages > summary { cursor: pointer; }
.fm-agd-natures { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-agd-pastille-choix { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 12px; border-radius: var(--fm-r-pastille); border: 1px solid var(--fm-bordure);
  background: var(--fm-surface); font-size: calc(13px * var(--fm-echelle, 1)); cursor: pointer; }
.fm-agd-pastille-choix:has(input:checked) { border-color: var(--fm-action-txt);
  background: var(--fm-action-pale); }
@media (min-width: 40rem) {
  .fm-agd-grille-champs { grid-template-columns: 220px minmax(0, 1fr); align-items: center; }
  .fm-agd-grille-champs > .fm-agd-note, .fm-agd-grille-champs > .fm-agd-case,
  .fm-agd-grille-champs > h2, .fm-agd-grille-champs > button { grid-column: 1 / -1; }
}