/* ============================================================================
   feu-messages.css — LOT « Feu de camp & Messages » (refonte app 2026-08-14)
   ----------------------------------------------------------------------------
   • Habillage additif des écrans Feu (fil « Tout le feu ») et Messages, pour
     les rapprocher de leurs maquettes (03-feu.png / 04-messages.png).
   • RÉUTILISE les tokens de app-refonte.css (--ar-*). Aucun token redéfini.
   • 100 % ADDITIF & RÉVERSIBLE. Aucune modif de logique / requête / CSRF /
     permission / DOM. Uniquement du CSS.
   • Ne s'active QUE sous html.apprefonte ET ≤768px (mobile/app). Le BUREAU
     (>768px) n'est JAMAIS touché : toutes les règles vivent dans le @media.
   • Palette imposée : thème sombre unique, cyan = exploration/communication,
     ambre = engagement, rouge = 112/destructif seulement. Aucun bleu/vert/
     violet/teal/brun/dégradé introduit ; on neutralise ceux hérités des pages.
   • GARDIEN (classes ai, gw, gardien) et ÉTINCELLES : jamais touchés ici.
     [16/08 FIX : l'ancien commentaire contenait une sequence fermant le commentaire CSS
      trop tot, ce qui rendait TOUT ce fichier inerte. Corrige.]
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ==========================================================================
     A) FEU DE CAMP — fil « Tout le feu » (feu-de-camp.php + feu-feed-*.php)
     Maquette 03-feu : en-tête « Feu de camp », rangée de chips défilable,
     cartes de post (avatar rond + nom + badge + heure, titre, texte, image,
     actions Participer / Pas pour moi / Partager).
     ========================================================================== */

  /* A0) Re-thème du fil : on remappe les variables locales du feed (--fx-*)
     vers les tokens du design system. Un seul point d'entrée re-colore chips,
     cartes, badges, boutons et frises. Placé DANS le @media → bureau intact. */
  html.apprefonte .feu-page,
  html.apprefonte .feu-wrap,
  html.apprefonte body.page-feu-de-camp .feu-feed {
    --fx-cyan:  var(--ar-cyan);
    --fx-fire:  var(--ar-amber);      /* « feu » → ambre = engagement (pas d'orange hors palette) */
    --fx-text:  var(--ar-ink);
    --fx-muted: var(--ar-ink-soft);
    --fx-card:  var(--ar-surface);
    --fx-card2: var(--ar-surface-2);
    --fx-bd:    var(--ar-hairline);
    --fx-bd2:   var(--ar-cyan-40);
  }

  /* A0-bis) Décor feu de fond : rendu PLAT. On garde une ambiance très discrète
     (marque « feu de camp ») sans neon/glow marqué. */
  html.apprefonte .feu-fire-bg video,
  html.apprefonte .feu-fire-bg img { opacity: .10 !important; filter: saturate(.9) !important; }
  html.apprefonte .feu-fire-bg::after { opacity: .5; }

  /* A1) En-tête de page (« Le feu de camp » + sous-titre). */
  html.apprefonte .feu-hero { margin: 2px 0 12px; gap: 12px; }
  html.apprefonte .feu-hero-txt h1 {
    font: 700 24px/1.15 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .feu-hero-txt p {
    font-size: 13.5px !important; color: var(--ar-ink-soft) !important;
  }

  /* A2) Chips de sections : la maquette montre une rangée DÉFILABLE de chips,
     pas le menu déroulant. On rétablit .feu-secbar en scroll horizontal et on
     masque le menu compact .feu-secmenu (les deux existent toujours au DOM). */
  html.apprefonte .feu-secmenu { display: none !important; }
  html.apprefonte .feu-secbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 2px -16px 14px;            /* déborde jusqu'aux bords, plein-largeur */
    padding: 2px 16px 4px;
    scroll-snap-type: x proximity;
  }
  html.apprefonte .feu-secbar::-webkit-scrollbar { display: none; }
  html.apprefonte .feu-secbar .feu-more-wrap { flex: 0 0 auto; }
  html.apprefonte .feu-chip {
    flex: 0 0 auto; scroll-snap-align: start;
    min-height: var(--ar-tap);
    padding: 8px 15px !important;
    border-radius: var(--ar-r-pill) !important;
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
    font: 600 14px/1 'Inter', system-ui, sans-serif !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Chip active = cyan (exploration). L'onglet « Tout » actif = ambre (maquette). */
  html.apprefonte .feu-chip.active {
    background: var(--ar-cyan-10) !important;
    border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .feu-chip.feu-all.active {
    background: var(--ar-amber-10) !important;
    border-color: var(--ar-amber-40) !important;
    color: var(--ar-amber) !important;
  }
  /* Pastille « en direct » de l'onglet Discussion : reste lisible, sans halo rouge. */
  html.apprefonte .feu-chip-live { animation: none !important; box-shadow: none !important; }
  html.apprefonte .feu-livetag { color: var(--ar-amber) !important; }
  html.apprefonte .feu-livetag::before { background: var(--ar-amber) !important; box-shadow: none !important; }

  /* A3) Bloc app « Voyageurs autour du feu » (.vaf, accordéon) → tokens DS,
     badge « en ligne » recoloré en cyan (le vert est hors palette). */
  html.apprefonte .vaf {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .vaf-head { min-height: var(--ar-tap); color: var(--ar-ink) !important; }
  html.apprefonte .vaf-total {
    background: var(--ar-cyan-10) !important;
    border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .vaf-head .chev,
  html.apprefonte .vaf-line .chev { color: var(--ar-cyan) !important; }
  html.apprefonte .vaf-line { min-height: var(--ar-tap); }
  html.apprefonte .vaf-line .cnt {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
  }
  html.apprefonte .vaf-mav { background: var(--ar-surface-2) !important; color: var(--ar-cyan) !important; }
  html.apprefonte .vaf-md { color: var(--ar-cyan) !important; }
  html.apprefonte .vaf-b.pass {
    background: var(--ar-cyan-10) !important; border-color: var(--ar-cyan-40) !important; color: var(--ar-cyan) !important;
    min-height: 40px; display: inline-flex; align-items: center;
  }
  html.apprefonte .vaf-b.chat {
    background: var(--ar-amber-10) !important; border-color: var(--ar-amber-40) !important; color: var(--ar-amber) !important;
    min-height: 40px; display: inline-flex; align-items: center;
  }

  /* A4) Carte de post : surface plate, rayon DS, liséré d'accent neutralisé
     en cyan (les accents inline par section peuvent sortir de la palette). */
  html.apprefonte .feu-card {
    --accent: var(--ar-cyan) !important;   /* uniformise badge + liséré + frise en cyan */
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-left: 3px solid var(--ar-cyan) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-card) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    padding: 14px 16px !important;
  }
  html.apprefonte .feu-card.open { border-color: var(--ar-cyan-40) !important; box-shadow: var(--ar-sh-card) !important; }

  /* Tête de carte : avatar rond neutre + nom + méta. */
  html.apprefonte .feu-av {
    width: 44px; height: 44px;
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .feu-author {
    font: 700 15px/1.2 'Inter', system-ui, sans-serif !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .feu-sub { color: var(--ar-ink-soft) !important; }
  /* Badge de section (« Souvenir », « Sortie »…) : pastille cyan discrète
     (le violet/vert des maquettes est hors palette). */
  html.apprefonte .feu-badge {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
    padding: 3px 9px !important;
  }
  /* Bouton ouvrir/replier : cible 44px, look DS. */
  html.apprefonte .feu-open {
    width: var(--ar-tap); height: var(--ar-tap);
    border-radius: var(--ar-r-sm) !important;
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-cyan) !important;
  }

  /* Titre / texte / média. */
  html.apprefonte .feu-title {
    font: 700 17px/1.3 'Inter', system-ui, sans-serif !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .feu-text { color: var(--ar-ink-soft) !important; font-size: 14.5px !important; }
  html.apprefonte .feu-media {
    border-radius: var(--ar-r-md) !important;
    border: 1px solid var(--ar-hairline) !important;
  }
  html.apprefonte .feu-metarow { color: var(--ar-ink-soft) !important; }

  /* A5) Mention de visibilité (« Public — visible par… ») : bandeau plat DS.
     On garde le rouge SEULEMENT pour « Privé » (sémantique destructive/fermée). */
  html.apprefonte .feu-vismsg {
    --vc: var(--ar-cyan);
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-ink-soft) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .feu-vismsg b { color: var(--ar-ink) !important; }
  html.apprefonte .feu-vismsg .feu-vismsg-ic { color: var(--ar-cyan) !important; }
  html.apprefonte .feu-vis-private {
    background: var(--ar-danger-10) !important; border-color: var(--ar-danger) !important;
  }
  html.apprefonte .feu-vis-private b,
  html.apprefonte .feu-vis-private .feu-vismsg-ic { color: var(--ar-danger) !important; }

  /* A6) Pied d'actions : la maquette montre les actions TOUJOURS visibles
     (Participer / Pas pour moi / Partager), pas cachées derrière un menu ☰.
     On masque le bouton ☰ et on ré-affiche le pied. Sélecteurs alignés sur la
     spécificité des règles d'origine (0,4,x) pour primer proprement. */
  html.apprefonte .feu-card:not(.feu-card-teaser) .feu-vismsg .feu-actmenu-btn { display: none !important; }
  html.apprefonte .feu-card:not(.feu-card-teaser) .feu-vismsg ~ .feu-card-foot { display: flex !important; }
  html.apprefonte .feu-card:not(.feu-card-teaser) .feu-vismsg ~ .feu-foot-particip { display: grid !important; }
  html.apprefonte .feu-card:not(.feu-card-teaser) .feu-vismsg.actopen ~ .feu-card-foot > * { width: auto; }

  html.apprefonte .feu-card-foot { border-top: 1px dashed var(--ar-hairline) !important; }
  /* Boutons du pied uniformisés en « fantôme » DS (aucune action pleine ici :
     l'action de création est portée par le FAB, hors de la carte). */
  html.apprefonte .feu-card-foot .feu-btn,
  html.apprefonte .feu-card-foot .feu-share,
  html.apprefonte .feu-foot-particip .feu-cta {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: 40px;
    font-weight: 600 !important;
  }
  html.apprefonte .feu-card-foot .feu-btn svg,
  html.apprefonte .feu-card-foot .feu-share svg { color: var(--ar-cyan) !important; }
  /* État « choisi » (J'aime / je participe) = accent cyan doux. */
  html.apprefonte .feu-card-foot .feu-btn.on {
    background: var(--ar-cyan-10) !important;
    border-color: var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
  }
  /* « Pas pour moi » activé : gris neutre (pas de couleur d'alerte). */
  html.apprefonte .feu-card-foot .feu-vote-btn[data-reaction="dislike"].on {
    background: var(--ar-surface-2) !important;
    border-color: var(--ar-border) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .feu-cta { color: var(--ar-cyan) !important; }

  /* A7) Zone commentaires + champs. */
  html.apprefonte .feu-comments { border-top-color: var(--ar-hairline) !important; }
  html.apprefonte .feu-com {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .feu-cform textarea {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-sm) !important; font-size: 16px !important;
  }

  /* A8) États : vide / voir plus / invitation visiteur. */
  html.apprefonte .feu-empty {
    background: var(--ar-surface) !important;
    border: 1px dashed var(--ar-border) !important;
    border-radius: var(--ar-r-lg) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte .feu-more {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h);
  }
  html.apprefonte .feu-invite {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-amber-40) !important;
    border-left: 3px solid var(--ar-amber) !important;
    border-radius: var(--ar-r-md) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .feu-invite b { color: var(--ar-amber) !important; }
  html.apprefonte .feu-invite a {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h); display: inline-flex; align-items: center;
  }

  /* A9) Barre d'écriture des salons (Discussion/Entraide/… via .feu-compose). */
  html.apprefonte .feu-compose {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-left: 3px solid var(--ar-amber) !important;
    border-radius: var(--ar-r-md) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte .feu-compose textarea,
  html.apprefonte .feu-compose-row input,
  html.apprefonte .feu-compose-row select {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important; border-radius: var(--ar-r-sm) !important; font-size: 16px !important;
  }
  /* Publier = engagement → ambre plein (action unique de ce sous-écran). */
  html.apprefonte .feu-compose-row button {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h); font-weight: 700 !important;
  }

  /* A10) « Remonter en haut » : puce plate cyan, au-dessus de la bottom-nav. */
  html.apprefonte .feu-totop {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; box-shadow: var(--ar-sh-fab) !important;
    bottom: calc(var(--ar-navh) + var(--ar-safe-b) + 14px) !important;
  }

  /* A11) Repli — page Feu HORS fil (site.feu.feed=0) : ancien rendu .fc-*.
     Reskin sobre pour éviter un écran hors-charte si le fil est désactivé.
     (Le chemin nominal reste le fil « Tout le feu » ci-dessus.) */
  html.apprefonte body.page-feu-de-camp .fc-center-col {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
    box-shadow: var(--ar-sh-card) !important;
  }
  html.apprefonte body.page-feu-de-camp .fc-center-col::after,
  html.apprefonte body.page-feu-de-camp .fc-screen-glow,
  html.apprefonte body.page-feu-de-camp .fc-screen-topred,
  html.apprefonte body.page-feu-de-camp .fc-screen-logoveil,
  html.apprefonte body.page-feu-de-camp .fc-screen-logoveil-r { display: none !important; }
  html.apprefonte body.page-feu-de-camp .fc-screen-bg { opacity: .10 !important; }
  html.apprefonte body.page-feu-de-camp .fc-post {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte body.page-feu-de-camp .fc-post-av,
  html.apprefonte body.page-feu-de-camp .fc-beacon-av {
    background: var(--ar-surface) !important; color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-hairline) !important;
  }
  html.apprefonte body.page-feu-de-camp .fc-mood-pill {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important;
  }


  /* ==========================================================================
     B) MESSAGES (messages.php — « Pigeons voyageurs »)
     Maquette 04-messages : titre, liste de conversations en carte arrondie
     (avatar, nom, aperçu, heure, pastille non-lu cyan), fil de bulles, saisie.
     NB : la recherche, l'onglet « Demandes » et le FAB de la maquette ne sont
     pas au DOM de cette page — non fabriqués ici (voir risques du rapport).
     ========================================================================== */

  /* B1) En-tête de page. */
  html.apprefonte body.page-messages .pub-pagetitle {
    font: 700 24px/1.18 'Inter', system-ui, sans-serif !important; color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-messages .pub-pagesub { color: var(--ar-ink-soft) !important; }

  /* B2) Grille : déjà 1 colonne <760px (règle propre à la page). On aère. */
  html.apprefonte body.page-messages .msg-grid { gap: 14px !important; }

  /* B3) Les deux cartes (boîte + conversation) : app-refonte force padding:16px
     sur .adm-card ; ici on RESTAURE le padding:0 attendu (rangées/entête bord à
     bord). Surface + rayon DS conservés. */
  html.apprefonte body.page-messages .msg-grid > aside.adm-card,
  html.apprefonte body.page-messages .msg-grid > section.adm-card {
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--ar-r-lg) !important;
  }

  /* B4) Bloc « Mes compagnons » (en tête de boîte, présent seulement s'il y a
     des compagnons) : teinte DS via son wrapper inline (border-bottom). */
  html.apprefonte body.page-messages aside.adm-card > div:first-child[style*="border-bottom"] {
    background: var(--ar-cyan-10) !important;
    border-bottom: 1px solid var(--ar-hairline) !important;
  }

  /* B5) En-tête « Boîte de réception » (pliable en app). */
  html.apprefonte body.page-messages .msg-inbox-head {
    min-height: var(--ar-tap);
    border-bottom: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
  }
  html.apprefonte body.page-messages .msg-inbox-chev { color: var(--ar-ink-soft) !important; }

  /* B6) Rangées de conversation (liens inline-stylés → !important requis).
     Cible ≥60px, séparateur hairline, nom + aperçu, survol/actif cyan. */
  html.apprefonte body.page-messages .msg-inbox-body > a {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    padding: 11px 16px !important;
    border-bottom: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-messages .msg-inbox-body > a:active { background: var(--ar-cyan-10) !important; }
  /* Ligne « nom + pastille non-lu ». */
  html.apprefonte body.page-messages .msg-inbox-body > a > div:first-child span:first-child {
    font-size: 15px !important; color: var(--ar-ink) !important;
  }
  /* Aperçu du dernier message. */
  html.apprefonte body.page-messages .msg-inbox-body > a > div:last-child {
    font-size: 13px !important; color: var(--ar-ink-soft) !important;
  }
  /* Pastille non-lu = pastille cyan pleine (comme la maquette). */
  html.apprefonte body.page-messages .msg-inbox-body .adm-pill {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important;
    min-width: 22px; height: 22px; padding: 0 6px !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ar-r-pill) !important; font-weight: 700 !important;
  }

  /* B7) En-tête de conversation. */
  html.apprefonte body.page-messages .msg-conv-head {
    border-bottom: 1px solid var(--ar-hairline) !important;
    min-height: var(--ar-topbar-h);
  }
  /* Avatar initiale : fond neutre + encre cyan (le dégradé doré est hors palette). */
  html.apprefonte body.page-messages .msg-conv-head .mch-av {
    background: var(--ar-surface-2) !important;
    color: var(--ar-cyan) !important;
    border: 1px solid var(--ar-hairline) !important;
  }
  html.apprefonte body.page-messages .msg-conv-head .mch-name { color: var(--ar-ink) !important; }
  /* Actions d'en-tête : contour DS, cible 44px. Couleurs sémantiques inline
     (ambre « Signaler », rouge « Bloquer/Supprimer ») laissées telles quelles. */
  html.apprefonte body.page-messages .msg-conv-head .adm-btn-outline {
    min-height: 40px; border-radius: var(--ar-r-pill) !important;
    border: 1px solid var(--ar-border) !important; background: transparent !important;
  }

  /* B8) Fil de bulles. Distinction envoyé/reçu par la valeur inline d'align-self.
     « Mien » : le bleu #16415f est hors palette → teinte cyan douce. */
  html.apprefonte body.page-messages #msgThread > div[style*="flex-end"] {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte body.page-messages #msgThread > div[style*="flex-start"] {
    background: var(--ar-surface-2) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-md) !important;
  }
  /* Accusé « Lu » = cyan (info/communication). */
  html.apprefonte body.page-messages #msgThread span[title^="Lu"] { color: var(--ar-cyan) !important; }

  /* B9) Zone d'écriture : champ DS + « Envoyer » = cyan (communication).
     Sur cet écran, envoyer est l'action unique → un seul plein, en cyan. */
  html.apprefonte body.page-messages form textarea[name="body"] {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-sm) !important;
    font-size: 16px !important;
  }
  html.apprefonte body.page-messages form textarea[name="body"]:focus {
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 2px; border-color: var(--ar-cyan) !important;
  }
  html.apprefonte body.page-messages form .adm-btn-primary {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important;
    border: 0 !important; border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-btn-h) !important; padding: 0 20px !important;
    font-weight: 700 !important;
  }
  html.apprefonte body.page-messages form .adm-btn-primary:active { background: var(--ar-cyan-press) !important; }

  /* B10) Bandeaux « bloqué / indisponible » + état vide conversation. */
  html.apprefonte body.page-messages #msgThread ~ div[style*="border-top"] { color: var(--ar-ink-soft) !important; }

  /* B11) Liste des membres bloqués (carte bas de page). */
  html.apprefonte body.page-messages > .adm-card [style*="border-top"] { border-top-color: var(--ar-hairline) !important; }
}