/* ============================================================================
   zzzz-feu.css — FINITION écran « Feu (fil) » vers maquette 03-feu.
   Role : dernier passage CSS (charge apres zz-feu-app.css / feu-messages.css →
   prime). Rapproche : filtres en pilules cyan (« Tout » = ambre), carte plate a
   bord uniforme, PHOTO pleine largeur SOUS le texte, rangee d'actions sur 1 ligne.
   ADDITIF & REVERSIBLE : supprimer ce fichier = retour a l'etat precedent.
   Scope strict : html.apprefonte + body.page-feu-de-camp, dans le @media app.
   Ne cible NI Gardien NI Etincelles. N'utilise que des classes reellement
   presentes (feu-feed-render.php / feu-feed-page.php).
   ============================================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ---- 1) Filtres en pilules : inactif = cyan ; « Tout » actif = ambre (maquette) ---- */
  html.apprefonte body.page-feu-de-camp .feu-chip{
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    color: var(--ar-cyan, #35D7D1) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Section active (hors « Tout ») = cyan plein discret. */
  html.apprefonte body.page-feu-de-camp .feu-chip.active{
    background: rgba(53,215,209,.10) !important;
    border-color: rgba(53,215,209,.55) !important;
    color: var(--ar-cyan, #35D7D1) !important;
  }
  /* Onglet « Tout » actif = ambre (engagement). */
  html.apprefonte body.page-feu-de-camp .feu-chip.feu-all.active{
    background: rgba(255,182,90,.10) !important;
    border-color: rgba(255,182,90,.70) !important;
    color: var(--ar-amber, #FFB65A) !important;
  }

  /* ---- 2) Carte de fil : surface plate, bord UNIFORME (pas de lisere d'accent), coins 20 ---- */
  html.apprefonte body.page-feu-de-camp .feu-card{
    background: var(--ar-surface, #0D2233) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  /* Bouton d'ouverture/repli (haut-droite) : discret, sans cadre (rappelle le « ... » de la maquette). */
  html.apprefonte body.page-feu-de-camp .feu-open{
    background: transparent !important;
    border: 0 !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
  }

  /* ---- 3) PHOTO pleine largeur DANS la carte, SOUS le texte ---- */
  html.apprefonte body.page-feu-de-camp .feu-media{
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 12px 0 14px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    overflow: hidden;
  }
  html.apprefonte body.page-feu-de-camp .feu-media img{
    width: 100% !important; height: 100% !important; object-fit: cover !important;
  }

  /* ---- 4) Rangee d'actions : pilules fantomes cyan sur UNE ligne (Participer / Pas pour moi / Partager) ----
     Le fil « Tout » rend le pied en grille 2x2 (.feu-foot-particip), impose par une regle voisine
     de feu-messages.css. On passe en flex (specificite superieure : + body.page-feu-de-camp) sans rien
     masquer (le lien « Voir → » reste, il passe en dernier). */
  html.apprefonte body.page-feu-de-camp .feu-card-foot,
  html.apprefonte body.page-feu-de-camp .feu-card .feu-vismsg ~ .feu-card-foot,
  html.apprefonte body.page-feu-de-camp .feu-foot-particip,
  html.apprefonte body.page-feu-de-camp .feu-card .feu-vismsg ~ .feu-foot-particip{
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    grid-template-columns: none !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 12px;
    margin-top: 2px;
  }
  /* Boutons d'action = pilules fantomes cyan, reparties sur la ligne. */
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-btn,
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-share,
  html.apprefonte body.page-feu-de-camp .feu-foot-particip .feu-btn,
  html.apprefonte body.page-feu-de-camp .feu-foot-particip .feu-share{
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 12px !important;
    color: var(--ar-cyan, #35D7D1) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
  }
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-btn svg,
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-share svg,
  html.apprefonte body.page-feu-de-camp .feu-foot-particip .feu-share svg{
    color: var(--ar-cyan, #35D7D1) !important;
  }
  /* « Je participe » choisi = accent cyan doux. */
  html.apprefonte body.page-feu-de-camp .feu-vote-btn[data-reaction="like"].on{
    background: rgba(53,215,209,.12) !important;
    border-color: rgba(53,215,209,.45) !important;
    color: var(--ar-cyan, #35D7D1) !important;
  }
  /* « J'aimerais pas » choisi = neutre (pas de couleur d'alerte). */
  html.apprefonte body.page-feu-de-camp .feu-vote-btn[data-reaction="dislike"].on{
    background: rgba(255,255,255,.05) !important;
    border-color: rgba(255,255,255,.16) !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
  }
  /* Lien « Voir → » : conserve (fonction), passe en dernier, pleine largeur, discret. */
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-cta,
  html.apprefonte body.page-feu-de-camp .feu-foot-particip .feu-cta{
    order: 9;
    flex: 1 1 100%;
    justify-content: center;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ar-ink-soft, #9BB1BF) !important;
    font-weight: 600 !important;
  }
}