/* ============================================================================
   refonte-lots/entraide-troc.css — LOT « ENTRAIDE »
   (volet Favoris retiré le 29/08/2026 · volet Troc retiré le 29/08/2026)
   ----------------------------------------------------------------------------
   ⚠️ LE NOM DU FICHIER MENT, ET IL EST GARDÉ EXPRÈS : ce fichier ne contient
      plus que l'habillage de l'ENTRAIDE, module bien vivant. Le Troc entre
      membres a été supprimé le 29/08/2026. Le fichier n'est NI renommé NI
      supprimé : son adresse est appelée ailleurs. Ne pas s'y tromper.
   • Habillage (skin) additif du design system « version app » (charte maquette
     11-entraide). Réutilise UNIQUEMENT les tokens --ar-*
     définis dans app-refonte.css (aucune redéfinition de token ici).
   • 100 % ADDITIF et RÉVERSIBLE : aucune logique, requête, CSRF ni permission
     n'est modifiée. On ne touche qu'à l'apparence. Supprimer ce fichier = retour
     à l'état précédent.
   • Portée STRICTE : chaque règle est préfixée html.apprefonte ET enfermée dans
     @media (max-width:768px). Le bureau (>768px) et les pages hors mode refonte
     ne changent JAMAIS. Palette sombre unique : cyan = exploration/communication,
     ambre = engagement (1 seule action pleine/écran), rouge = 112/destructif.
   • GARDIEN (.ai-*, .gw-*, gardien-*) et ÉTINCELLES : NON touchés.
   ============================================================================ */

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

  /* =========================================================================
     ÉCRAN 1 — (29/08/2026) LE TROC ENTRE MEMBRES A ÉTÉ SUPPRIMÉ.
     ---------------------------------------------------------------------
     Cet écran habillait la liste des annonces du Troc (don · prêt · échange ·
     recherche d'objets) : .tp3 (aside filtres · section annonces · aside
     activité), les cartes .tl-* , le bouton .tp-filtrer, la colonne .ta-* et
     les tuiles .tp-passeport / .tp-tip. Ces écrans n'existent plus, leurs
     règles sont parties avec eux.

     ⚠️ ATTENTION POUR LA SUITE — NE PAS SE TROMPER DE PAGE :
     « partenaires.php » n'est PLUS le Troc. Depuis le 23/08/2026 c'est la
     page « PARTENAIRES DU FEU », qui est VIVANTE, qui n'utilise aucune des
     classes ci-dessus (elle est en .pf-*) et qui a sa propre feuille de style
     assets/css/partenaires-feu.css. Ne rien rebrancher ici pour elle.

     ⚠️ LES 4 RÈGLES CONSERVÉES CI-DESSOUS NE SONT PAS DU TROC :
     « .pub-pagehead » est l'en-tête COMMUN de plusieurs pages bien vivantes
     (passeport.php, messages.php, moments.php, sortir.php, carnet-route.php,
     my-requests.php). Ces règles ont été écrites en pensant à l'en-tête du
     Troc, mais elles s'appliquent aujourd'hui à ces pages-là : les retirer
     changerait leur affichage en mode app. On les GARDE telles quelles.
     À revoir un jour avec l'écran sous les yeux, jamais à l'aveugle.
     ========================================================================= */

  /* En-tête commun des pages publiques : la pastille d'icône (span en style
     inline, dégradé bleu hors palette) devient une tuile cyan mate.
     !important car style inline. */
  html.apprefonte .pub-pagehead > div:first-child > span:first-child {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-md) !important;
  }
  /* Rangée d'actions de l'en-tête : les boutons s'empilent (action pleine sur
     toute la largeur, actions secondaires en contour sur une ligne partagée). */
  html.apprefonte .pub-pagehead > div:last-child {
    width: 100%; display: flex; flex-wrap: wrap; gap: 8px;
  }
  html.apprefonte .pub-pagehead .adm-btn-primary { flex: 1 1 100%; }
  html.apprefonte .pub-pagehead .adm-btn-outline { flex: 1 1 calc(50% - 4px); }


  /* =========================================================================
     ÉCRAN 2 — ENTRAIDE  (includes/entraide-modal.php · maquette 11-entraide)
     DOM réel : .en-panel / .en-head / .en-security / .en-tabs>.en-tab /
     .en-around-ctx / .en-filters>.en-chip / .en-list (cartes .en-card) /
     formulaires .en-form-group … + radar .er-*
     ========================================================================= */

  /* Panneau : surface mate (le bord bleu + ombre bleue de la page sont annulés).
     Spécificité html.apprefonte body.page-entraide > override de la page. */
  html.apprefonte body.page-entraide .en-panel,
  html.apprefonte .en-panel {
    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;
  }

  /* En-tête du panneau. */
  html.apprefonte .en-head-icon {
    background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .en-head-title { color: var(--ar-ink) !important; font-family: 'Inter',system-ui,sans-serif !important; }
  html.apprefonte .en-head-title small { color: var(--ar-ink-soft) !important; }

  /* Bandeau sécurité 112 : rouge autorisé (urgence uniquement).
     (audit 24/08) L'ENCRE était var(--ar-danger) = #DC352F sur le fond #222433 :
     3,36:1 mesuré, pour un texte de 12 px. C'est le message le plus important de
     la page — « En cas d'urgence réelle, contactez le 112 » — et c'était l'un des
     moins lisibles. Le CADRE et le FOND gardent exactement le rouge d'origine ;
     seule l'écriture passe à un rouge clair, qui atteint 5,1:1.
     RETOUR ARRIÈRE : remettre color: var(--ar-danger) sur les deux règles. */
  html.apprefonte .en-security {
    background: var(--ar-danger-10) !important;
    border: 1px solid var(--ar-danger) !important;
    color: #FF8A80 !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .en-security strong { color: #FF8A80 !important; }

  /* Onglets de section : contrôle segmenté défilable, actif = cyan. */
  html.apprefonte .en-tabs {
    display: flex !important; gap: 6px; overflow-x: auto; scrollbar-width: none;
    background: transparent !important; border: 0 !important; padding-bottom: 2px;
  }
  html.apprefonte .en-tabs::-webkit-scrollbar { display: none; }
  html.apprefonte .en-tab {
    flex: 0 0 auto; min-height: var(--ar-tap); padding: 0 14px !important;
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-pill) !important;
    font: 600 14px/1 'Inter',system-ui,sans-serif !important; white-space: nowrap;
  }
  html.apprefonte .en-tab.is-active {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }

  /* « Autour de : … / Changer la ville ». */
  html.apprefonte .en-around-ctx { color: var(--ar-ink-soft) !important; }
  html.apprefonte .en-around-ref strong { color: var(--ar-cyan) !important; }

  /* Puces filtre Tous / Demandes / Offres. */
  html.apprefonte .en-filters .en-chip {
    min-height: var(--ar-tap); padding: 8px 14px !important;
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .en-filters .en-chip.is-selected,
  html.apprefonte .en-filters .en-chip[aria-pressed="true"] {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .en-view-intro { color: var(--ar-ink-soft) !important; }

  /* --- Cartes de la liste (générées par entraide.js) --- */
  html.apprefonte .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;
  }
  html.apprefonte .en-card-icon {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .en-card-type { color: var(--ar-ink) !important; }
  html.apprefonte .en-card-time { color: var(--ar-ink-soft) !important; }
  html.apprefonte .en-card-msg { color: var(--ar-ink) !important; }
  html.apprefonte .en-card-meta { color: var(--ar-ink-soft) !important; }
  /* Étiquette Demande/Offre : Demande = ambre (engagement), Offre = cyan. */
  html.apprefonte .en-card-kind {
    background: var(--ar-amber-10) !important; color: var(--ar-amber) !important;
    border: 1px solid var(--ar-amber-40) !important; border-radius: var(--ar-r-pill) !important;
    padding: 2px 10px !important;
  }
  html.apprefonte .en-card.is-offer .en-card-kind {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important;
  }
  /* Boutons compacts de carte : contour par défaut ; « Répondre » mis en avant
     (cyan = communication) ; « Signaler » discret ; « résolue » neutre. */
  html.apprefonte .en-btn-mini {
    min-height: var(--ar-tap); padding: 0 14px !important;
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-pill) !important;
    font: 600 14px/1 'Inter',system-ui,sans-serif !important;
  }
  html.apprefonte .en-btn-mini.js-reply {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .en-btn-mini.is-signal { color: var(--ar-ink-soft) !important; }
  html.apprefonte .en-resp {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .en-resp-msg { color: var(--ar-ink) !important; }
  html.apprefonte .en-resp-meta { color: var(--ar-ink-soft) !important; }
  html.apprefonte .en-empty { color: var(--ar-ink-soft) !important; }

  /* --- Formulaires « Demander » / « Proposer » --- */
  html.apprefonte .en-label { color: var(--ar-ink-soft) !important; font-size: 14px !important; font-weight: 500 !important; }
  html.apprefonte .en-input,
  html.apprefonte .en-textarea {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-sm) !important;
    font-size: 16px !important; /* anti-zoom iOS */
  }
  html.apprefonte .en-input:focus,
  html.apprefonte .en-textarea:focus {
    outline: 2px solid var(--ar-cyan) !important; outline-offset: 2px; border-color: var(--ar-cyan) !important;
  }
  /* Chips de formulaire (types, rayon, durée, dispo). */
  html.apprefonte .en-chips .en-chip {
    min-height: var(--ar-tap); padding: 8px 14px !important;
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .en-chips .en-chip.is-selected,
  html.apprefonte .en-chips .en-chip[aria-pressed="true"] {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border-color: var(--ar-cyan-40) !important;
  }
  /* Boutons position (secondaires) : contour. */
  html.apprefonte .en-pos-btn {
    min-height: var(--ar-tap);
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-pill) !important;
  }
  html.apprefonte .en-pos-note { color: var(--ar-ink-soft) !important; }
  /* CTA « Publier ma demande / mon aide » : action pleine unique = AMBRE. */
  html.apprefonte .en-cta {
    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) !important; font: 700 16px/1 'Inter',system-ui,sans-serif !important;
    box-shadow: none !important;
  }
  html.apprefonte .en-cta:active { background: var(--ar-amber-press) !important; }
  /* Récap avant publication + toasts. */
  html.apprefonte .en-recap {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .en-recap-go {
    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);
  }
  html.apprefonte .en-recap-edit {
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-pill) !important; min-height: var(--ar-btn-h);
  }
  html.apprefonte .en-toast {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-sm) !important;
  }
  /* Bandeau d'édition + bloc partage (repris en surface mate). */
  html.apprefonte .en-edit-bar,
  html.apprefonte .en-shareblock {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .en-shareblock-btn {
    background: transparent !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-border) !important; border-radius: var(--ar-r-md) !important; min-height: var(--ar-tap);
  }
  /* Overlay « Partager cette demande » : carte mate. */
  html.apprefonte .en-shov-card {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-xl) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .en-shov-act,
  html.apprefonte .en-shov-ch {
    background: var(--ar-surface-2) !important; color: var(--ar-ink) !important;
    border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .en-shov-send {
    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);
  }

  /* --- RADAR « Membres autour de moi » (.er-*) : recolorisation palette --- */
  /* Le vert/bleu d'origine (hors palette) passe en cyan ; le dessin/comportement
     (balayage, zoom, déplacement) est INCHANGÉ — on ne touche qu'aux couleurs. */
  html.apprefonte .er-wrap {
    background: var(--ar-surface) !important; border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .er-ico {
    background: var(--ar-cyan-10) !important; border: 1px solid var(--ar-cyan-40) !important;
  }
  html.apprefonte .er-title { color: var(--ar-ink) !important; }
  html.apprefonte .er-sub,
  html.apprefonte .er-state,
  html.apprefonte .er-priv,
  html.apprefonte .er-zoomhint { color: var(--ar-ink-soft) !important; }
  html.apprefonte .er-chip {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-hairline) !important;
  }
  html.apprefonte .er-chip.is-on {
    background: var(--ar-cyan) !important; color: var(--ar-on-accent) !important; border-color: transparent !important;
  }
  html.apprefonte .er-radar { background: radial-gradient(circle at center, var(--ar-cyan-10), var(--ar-bg)) !important; }
  html.apprefonte .er-ring { border-color: var(--ar-cyan-40) !important; }
  html.apprefonte .er-cross { background: var(--ar-hairline) !important; }
  html.apprefonte .er-sweep { background: conic-gradient(from 0deg, var(--ar-cyan-40), rgba(53,215,209,0) 40%) !important; }
  html.apprefonte .er-me { background: var(--ar-cyan) !important; box-shadow: 0 0 10px var(--ar-cyan) !important; }
  html.apprefonte .er-blip { background: var(--ar-amber) !important; box-shadow: 0 0 8px var(--ar-amber-40) !important; border-color: var(--ar-bg) !important; }
  html.apprefonte .er-zb {
    background: var(--ar-surface) !important; color: var(--ar-cyan) !important; border: 1px solid var(--ar-cyan-40) !important;
  }
  html.apprefonte .er-row {
    background: var(--ar-surface-2) !important; border: 1px solid var(--ar-hairline) !important; border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .er-av { background: var(--ar-surface) !important; color: var(--ar-ink) !important; }
  html.apprefonte .er-name { color: var(--ar-ink) !important; }
  html.apprefonte .er-meta { color: var(--ar-ink-soft) !important; }
  html.apprefonte .er-dot { background: var(--ar-cyan) !important; box-shadow: 0 0 6px var(--ar-cyan) !important; }
  html.apprefonte .er-b {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important; border: 1px solid var(--ar-cyan-40) !important;
  }
  html.apprefonte .er-empty {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important; border: 1px dashed var(--ar-hairline) !important;
  }


  /* =========================================================================
     ÉCRAN 3 — (29/08/2026) BLOC SUPPRIMÉ : il habillait mes-favoris.php,
     page du Marché qui n'existe plus (.fav-page / .fav-title / .fav-grid /
     .fav-card / .fav-empty). L'écran 2 (Entraide) ci-dessus est INCHANGÉ :
     c'est désormais le seul contenu utile de ce fichier.
     ========================================================================= */

} /* fin @media (max-width:768px) */