/* ============================================================================
   refonte-lots/zz-entraide-app.css — ENTRAIDE, liste fidèle maquette 11
   ----------------------------------------------------------------------------
   • Habille les cartes .en-card générées par entraide.js EN MODE APP (branche
     renderCardApp, gardée html.apprefonte). Le haut de l'écran (header cœur, 112,
     3 cartes d'action, sous-onglets) est déjà fait (zz-polish.css + entraide-actions.js).
   • 100 % ADDITIF / RÉVERSIBLE : aucune logique/CSRF/permission touchée. Bureau (>768px)
     et pages hors refonte inchangés. Spécificité .en-card.ar-enc → prime sur zz-polish.
   • Modèle de données SANS photo → tuile emoji par catégorie (provisoire, cf.
     DESSINS_A_FOURNIR_REFONTE_APP.md : vraies photos par catégorie à fournir).
   • Palette : Demande = ambre (engagement), Offre = vert (don), tokens --ar-*.
   ============================================================================ */

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

  /* Liste : colonne de cartes espacées. */
  html.apprefonte body.page-entraide #enList {
    display: flex !important; flex-direction: column; gap: 12px;
  }

  /* --- Carte fidèle : [tuile catégorie] + [contenu] ; formulaires en pied --- */
  html.apprefonte body.page-entraide .en-card.ar-enc {
    display: flex !important; flex-wrap: wrap; align-items: flex-start; gap: 14px;
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: 16px !important;
    box-shadow: var(--ar-sh-card) !important;
    padding: 14px !important;
  }

  /* Tuile « photo » de catégorie + légende « Lieu approximatif ». */
  html.apprefonte body.page-entraide .ar-enc-photo {
    flex: 0 0 92px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  }
  html.apprefonte body.page-entraide .ar-enc-emoji {
    width: 92px; height: 92px; border-radius: 14px; display: grid; place-items: center;
    font-size: 42px; line-height: 1; border: 1px solid var(--ar-hairline);
    background: linear-gradient(160deg, rgba(53,215,209,.14), rgba(53,215,209,.04));
  }
  html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="need"] .ar-enc-emoji {
    background: linear-gradient(160deg, rgba(255,182,90,.18), rgba(255,182,90,.05));
    border-color: rgba(255,182,90,.28);
  }
  html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-emoji {
    background: linear-gradient(160deg, rgba(58,210,154,.18), rgba(58,210,154,.05));
    border-color: rgba(58,210,154,.28);
  }
  html.apprefonte body.page-entraide .ar-enc-approx {
    font: 400 11px/1.2 'Inter', system-ui, sans-serif; color: var(--ar-ink-soft); text-align: center;
  }

  /* Contenu droit. */
  html.apprefonte body.page-entraide .ar-enc-body {
    flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  }
  html.apprefonte body.page-entraide .ar-enc-badge {
    align-self: flex-start; font: 700 12px/1 'Inter', system-ui, sans-serif;
    padding: 5px 12px; border-radius: 999px;
    color: var(--ar-amber); background: var(--ar-amber-10); border: 1px solid var(--ar-amber-40);
  }
  html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-badge {
    color: #35d29a; background: rgba(58,210,154,.10); border-color: rgba(58,210,154,.34);
  }
  html.apprefonte body.page-entraide .ar-enc-title {
    margin: 0; font: 700 17px/1.25 'Inter', system-ui, sans-serif; color: var(--ar-ink);
  }
  html.apprefonte body.page-entraide .ar-enc-lines { display: flex; flex-direction: column; gap: 4px; }
  html.apprefonte body.page-entraide .ar-enc-line {
    font: 400 13.5px/1.3 'Inter', system-ui, sans-serif; color: var(--ar-ink-soft);
  }

  /* Actions : CTA plein (ambre pour Demande, vert pour Offre) + geste discret. */
  html.apprefonte body.page-entraide .ar-enc-actions {
    display: flex; align-items: center; gap: 8px; margin-top: 4px;
  }
  html.apprefonte body.page-entraide .en-card.ar-enc .ar-enc-cta {
    flex: 1 1 auto; min-height: 46px; padding: 0 18px !important; border-radius: 12px !important;
    font: 700 15px/1 'Inter', system-ui, sans-serif !important;
    border: 0 !important; box-shadow: none !important;
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
    justify-content: center;
  }
  html.apprefonte body.page-entraide .en-card.ar-enc[data-kind="offer"] .ar-enc-cta {
    background: #2fae82 !important; color: #ffffff !important;
  }
  html.apprefonte body.page-entraide .en-card.ar-enc .ar-enc-ghost {
    flex: 0 0 auto; min-height: 46px; min-width: 46px; padding: 0 12px !important;
    border-radius: 12px !important; font-size: 15px !important;
    background: transparent !important; color: var(--ar-ink-soft) !important;
    border: 1px solid var(--ar-border) !important;
  }

  /* Formulaires réponse / signalement : pleine largeur sous la carte (inchangés). */
  html.apprefonte body.page-entraide .en-card.ar-enc .en-inline-form { flex: 1 1 100%; margin-top: 6px; }

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