/* ============================================================================
   zz-polish.css — RETOUCHES PALETTE / FIDÉLITÉ (main Claude, passe peaufinage)
   ----------------------------------------------------------------------------
   Chargé EN DERNIER (tri alphabétique du loader glob → « zz » après les lots),
   donc prime sur les fichiers de lot. 100% additif/réversible, scopé apprefonte
   + ≤768px. On NE TOUCHE JAMAIS le Gardien (.gw-*, .ai-*, gardien-*) ni Étincelles.
   ============================================================================ */

/* Vue mobile Messages : masquée hors mode app (desktop = grille d'origine inchangée). */
html.apprefonte .ar-msg { display: none; }

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

  /* ---- Accueil (maquette 02) : pas de menu ☰ dans la barre. Uniquement sur
     l'accueil (body.page-dashboard) ; les autres pages gardent le menu. Les sections
     restent accessibles via le Passeport « Mes accès » + la feuille de raccourcis. */
  html.apprefonte body.page-dashboard .pub-menu-btn { display: none !important; }

  /* ---- Feu de camp : CTA bleus (dégradés) → palette. -----------------------
     .fc-cta-btn = action principale d'engagement (Rejoindre le feu / Publier) → AMBRE plein.
     .fc-write-send / .fc-chat-send = envoi (communication) → CYAN plein.
     (⚠️ .gw-send est le bouton du GARDIEN : volontairement EXCLU, jamais recoloré.) */
  html.apprefonte .fc-cta-btn {
    background: var(--ar-amber) !important;
    background-image: none !important;
    color: var(--ar-on-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  html.apprefonte .fc-cta-btn:active { background: var(--ar-amber-press) !important; }

  html.apprefonte .fc-write-send:not(.gw-send),
  html.apprefonte .fc-chat-send:not(.gw-send) {
    background: var(--ar-cyan) !important;
    background-image: none !important;
    color: var(--ar-on-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* ---- create-sortie : le select natif invisible (.cs2-native, opacity:0) déborde
     de ~36px à droite (right:-34.8px) → 36px de scroll horizontal. On le pin au
     conteneur (aucun impact visuel : il est transparent, sert de cible tactile). */
  html.apprefonte .cs2-native {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* =========================================================================
     MESSAGES — vue mobile reconstruite (maquette 04). L'ancienne grille et le
     pagehead « Pigeons voyageurs » sont masqués en vue LISTE (quand .ar-msg existe). */
  html.apprefonte:has(.ar-msg) .pub-pagehead,
  html.apprefonte:has(.ar-msg) .msg-grid { display: none !important; }

  html.apprefonte .ar-msg { display: block; padding-bottom: calc(var(--ar-navh) + var(--ar-safe-b) + 80px); }
  html.apprefonte .ar-msg-head { display: flex; align-items: center; gap: 10px; margin: 2px 0 14px; }
  html.apprefonte .ar-msg-title { flex: 1 1 auto; font: 800 27px/1 'Inter',system-ui,sans-serif; color: var(--ar-ink); letter-spacing: .2px; }
  html.apprefonte .ar-msg-hact { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
  html.apprefonte .ar-ic {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ar-surface); border: 1px solid var(--ar-hairline); color: var(--ar-ink); text-decoration: none;
  }
  html.apprefonte .ar-ic svg { width: 20px; height: 20px; }
  html.apprefonte .ar-ic-accent { background: var(--ar-cyan-10); border-color: var(--ar-cyan-40); color: var(--ar-cyan); }
  html.apprefonte .ar-msg-me { background: var(--ar-cyan); border: 0; color: var(--ar-on-accent); font: 800 13px/1 'Inter',sans-serif; }

  html.apprefonte .ar-msg-search {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; margin-bottom: 14px;
    background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: var(--ar-r-pill);
  }
  html.apprefonte .ar-msg-search svg { width: 20px; height: 20px; color: var(--ar-ink-soft); flex: 0 0 auto; }
  html.apprefonte .ar-msg-search input[type="search"] {
    flex: 1 1 auto; min-width: 0; background: transparent !important; border: 0 !important; outline: none !important;
    min-height: 0 !important; height: auto !important; padding: 0 !important; color: var(--ar-ink) !important; font-size: 15px !important;
  }

  html.apprefonte .ar-msg-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  html.apprefonte .ar-msg-tab {
    display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 15px; white-space: nowrap;
    background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: var(--ar-r-pill);
    color: var(--ar-ink-soft); font: 600 13.5px/1 'Inter',sans-serif; text-decoration: none;
  }
  html.apprefonte .ar-msg-tab svg { flex: 0 0 auto; }
  html.apprefonte .ar-msg-tab svg { width: 18px; height: 18px; }
  html.apprefonte .ar-msg-tab.is-active { background: var(--ar-cyan-10); border-color: var(--ar-cyan-40); color: var(--ar-cyan); }
  html.apprefonte .ar-msg-filter { margin-left: auto; }

  html.apprefonte .ar-msg-list {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: var(--ar-r-lg);
  }
  html.apprefonte .ar-conv { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 11px 14px; text-decoration: none; color: var(--ar-ink); border-bottom: 1px solid var(--ar-hairline); }
  html.apprefonte .ar-conv:last-child { border-bottom: 0; }
  html.apprefonte .ar-conv:active { background: var(--ar-surface-2); }
  html.apprefonte .ar-conv-av {
    position: relative; width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--ar-surface-2), #1c4a63); color: var(--ar-ink); font: 800 18px/1 'Inter',sans-serif;
  }
  html.apprefonte .ar-dot { position: absolute; right: 0; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--ar-surface); }
  html.apprefonte .ar-dot-on { background: #3ad29a; }
  html.apprefonte .ar-dot-recent { background: var(--ar-amber); }
  html.apprefonte .ar-dot-off { background: #6b7684; }
  html.apprefonte .ar-conv-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  html.apprefonte .ar-conv-name { font: 700 15.5px/1.2 'Inter',sans-serif; color: var(--ar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.apprefonte .ar-conv-last { font-size: 13.5px; color: var(--ar-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html.apprefonte .ar-conv-last.is-unread { color: var(--ar-ink); font-weight: 600; }
  html.apprefonte .ar-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
  html.apprefonte .ar-conv-time { font-size: 12px; color: var(--ar-ink-soft); }
  html.apprefonte .ar-conv-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ar-cyan); color: var(--ar-on-accent); font: 800 12px/22px 'Inter',sans-serif; text-align: center; }
  html.apprefonte .ar-msg-empty { padding: 30px 16px; text-align: center; color: var(--ar-ink-soft); }
  html.apprefonte .ar-msg-empty a { color: var(--ar-cyan); }

  /* Empilé AU-DESSUS du lanceur Gardien (qui reste en place, jamais touché). */
  html.apprefonte .ar-msg-fab {
    position: fixed; right: 14px; bottom: calc(var(--ar-navh) + var(--ar-safe-b) + 88px);
    width: 56px; height: 56px; border-radius: 50%; z-index: 900;
    display: flex; align-items: center; justify-content: center;
    background: var(--ar-cyan); color: var(--ar-on-accent); box-shadow: var(--ar-sh-fab);
  }
  html.apprefonte .ar-msg-fab svg { width: 24px; height: 24px; }

  /* =========================================================================
     ENTRAIDE — rapprochement maquette 11. Le panneau est piloté par JS (vues
     par onglets) : on RE-STYLE seulement (header cœur + 112 rouge + 3 cartes
     d'action), AUCUN changement de comportement. La liste de demandes (.en-card,
     rendue par entraide.js) hérite du thème ; sa mise en page fine = passe data. */
  html.apprefonte body.page-entraide .en-fallback { display: none !important; }   /* paragraphe redondant */
  /* La rangée « changer la ville » (champ + Voir + Partout) doit rester REPLIÉE
     tant qu'on n'a pas cliqué « Changer la ville » : on respecte l'attribut hidden
     (une règle .en-around-edit{display:flex} le forçait visible). */
  html.apprefonte body.page-entraide .en-around-edit[hidden] { display: none !important; }
  html.apprefonte body.page-entraide .en-around-ctx {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; padding: 12px 14px !important; margin: 0 14px 12px !important;
  }
  html.apprefonte body.page-entraide .en-around-ref { flex: 1 1 auto; color: var(--ar-ink); }
  html.apprefonte body.page-entraide #enAroundCity { color: var(--ar-cyan); font-weight: 700; }
  html.apprefonte body.page-entraide #enAroundChange { margin-left: auto; background: transparent !important; border: 0 !important; color: var(--ar-cyan) !important; font-weight: 600; }
  html.apprefonte body.page-entraide .en-panel {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important; box-shadow: none !important; margin: 0 0 24px !important;
  }
  html.apprefonte body.page-entraide .en-head { padding: 14px 14px 4px !important; display: flex; align-items: flex-start; gap: 12px; }
  html.apprefonte body.page-entraide .en-head-icon {
    width: auto !important; height: auto !important; border-radius: 0 !important; flex: 0 0 auto;
    background: transparent !important; color: var(--ar-cyan) !important;
    display: inline-flex; align-items: center; justify-content: center;
  }
  html.apprefonte body.page-entraide .en-head-icon svg { width: 40px !important; height: 40px !important; }
  html.apprefonte body.page-entraide .en-head-title { font: 800 22px/1.1 'Inter',sans-serif !important; color: var(--ar-ink) !important; }
  html.apprefonte body.page-entraide .en-head-title small { display: block; font: 400 13px/1.35 'Inter',sans-serif; color: var(--ar-ink-soft); margin-top: 4px; }

  html.apprefonte body.page-entraide .en-security {
    background: var(--ar-danger-10) !important; border: 1px solid rgba(229,84,75,.42) !important;
    color: #f0a79f !important; border-radius: var(--ar-r-md) !important; margin: 6px 14px 12px !important;
    padding: 12px 14px !important; text-align: center; font-weight: 600;
  }
  html.apprefonte body.page-entraide .en-security strong { color: var(--ar-danger) !important; }

  /* Les 3 onglets d'action d'origine sont MASQUÉS (remplacés par .ar-en-actions injecté
     en JS, fidèle maquette). « Mes publications / Mes réponses » restent en pilules. */
  html.apprefonte body.page-entraide #enTab_list,
  html.apprefonte body.page-entraide #enTab_need,
  html.apprefonte body.page-entraide #enTab_offer { display: none !important; }
  html.apprefonte body.page-entraide .en-tabs {
    display: flex !important; flex-wrap: wrap; gap: 10px; padding: 2px 14px 14px !important;
    border: 0 !important; background: transparent !important;
  }
  html.apprefonte body.page-entraide #enTab_mine,
  html.apprefonte body.page-entraide #enTab_responses {
    flex: 1 1 45% !important; min-height: 46px !important; padding: 0 12px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important; border-radius: var(--ar-r-md) !important;
    font: 600 13px/1 'Inter',sans-serif !important;
  }
  html.apprefonte body.page-entraide #enTab_mine.is-active,
  html.apprefonte body.page-entraide #enTab_responses.is-active { color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important; }

  /* 3 cartes d'action injectées — fidèles maquette : icône ronde colorée + titre + description. */
  html.apprefonte body.page-entraide .ar-en-actions {
    display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; padding: 4px 14px 12px;
  }
  html.apprefonte body.page-entraide .ar-en-act {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
    min-height: 150px; padding: 16px 9px; border-radius: 16px; border: 1px solid var(--ar-hairline);
    background: var(--ar-surface-2); color: var(--ar-ink); font-family: 'Inter',system-ui,sans-serif;
  }
  html.apprefonte body.page-entraide .ar-en-ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
  html.apprefonte body.page-entraide .ar-en-ic svg { width: 24px; height: 24px; }
  html.apprefonte body.page-entraide .ar-en-t { font: 700 14px/1.2 'Inter',sans-serif; color: var(--ar-ink); }
  html.apprefonte body.page-entraide .ar-en-d { font: 400 11.5px/1.35 'Inter',sans-serif; color: var(--ar-ink-soft); }
  html.apprefonte body.page-entraide .ar-en-teal  { background: rgba(53,215,209,.08); border-color: rgba(53,215,209,.26); }
  html.apprefonte body.page-entraide .ar-en-teal .ar-en-ic  { background: rgba(53,215,209,.18); color: #57e0db; }
  html.apprefonte body.page-entraide .ar-en-blue  { background: rgba(61,140,255,.10); border-color: rgba(61,140,255,.30); }
  html.apprefonte body.page-entraide .ar-en-blue .ar-en-ic  { background: #2f7ef7; color: #fff; }
  html.apprefonte body.page-entraide .ar-en-green { background: rgba(58,210,154,.10); border-color: rgba(58,210,154,.30); }
  html.apprefonte body.page-entraide .ar-en-green .ar-en-ic { background: rgba(58,210,154,.20); color: #3ad29a; }
  html.apprefonte body.page-entraide .ar-en-act.is-active { box-shadow: 0 0 0 2px var(--ar-cyan-40) inset; }

  /* Cartes de demande/offre (rendues par JS) : thème DS. */
  html.apprefonte body.page-entraide .en-card {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; box-shadow: none !important;
  }
}