/* ============================================================================
   REFONTE APP — Écran FEU (fil « Tout le feu ») fidèle maquette 03.
   Restyle 100% CSS du fil existant (garde like/commentaire/partage). Scopé
   html.apprefonte + ≤768px + body.page-feu-de-camp. Additif/réversible.
   Chargé après zz-*.css (ordre alpha) → prime. Requiert site.feu.feed=1.
   ============================================================================ */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ---- En-tête : garder cloche + avatar, retirer marque / menu / phare (maquette) ---- */
  html.apprefonte body.page-feu-de-camp .pub-topbrand,
  html.apprefonte body.page-feu-de-camp .pub-menu-btn,
  html.apprefonte body.page-feu-de-camp .pub-phare-wrap,
  html.apprefonte body.page-feu-de-camp .pub-mysecu { display: none !important; }
  html.apprefonte body.page-feu-de-camp .pub-topbar { background: transparent !important; border: 0 !important; box-shadow: none !important; }
  html.apprefonte body.page-feu-de-camp .pub-actions { margin-left: auto; }

  /* ---- Palette maquette appliquée au fil (recolore tout d'un coup) ---- */
  html.apprefonte body.page-feu-de-camp .feu-wrap {
    --fx-card: #0D2233; --fx-card2: #102B40;
    --fx-bd: rgba(246,240,223,.08); --fx-bd2: rgba(246,240,223,.12);
    --fx-text: #F6F0DF; --fx-muted: #9BB1BF;
    --fx-cyan: #35D7D1; --fx-fire: #FFB65A;
  }
  /* Fond sombre uni (pas la vidéo de feu) */
  html.apprefonte body.page-feu-de-camp .feu-fire-bg { display: none !important; }

  /* ---- En-tête d'écran (hero) ---- */
  html.apprefonte body.page-feu-de-camp .feu-hero { margin: 6px 0 14px; }
  html.apprefonte body.page-feu-de-camp .feu-hero-txt h1 { font: 800 27px/1.05 'Inter',system-ui,sans-serif; color: #F6F0DF; letter-spacing: -.3px; }
  html.apprefonte body.page-feu-de-camp .feu-hero-txt p { color: #9BB1BF; font-size: 13.5px; }

  /* ---- Masquer le superflu (widget voisins + bandeaux visibilité) ---- */
  html.apprefonte body.page-feu-de-camp .vaf { display: none !important; }
  html.apprefonte body.page-feu-de-camp .feu-vismsg { display: none !important; }

  /* ---- Onglets : pastilles horizontales (au lieu du menu déroulant) ---- */
  html.apprefonte body.page-feu-de-camp .feu-secmenu { display: none !important; }
  html.apprefonte body.page-feu-de-camp .feu-secbar {
    display: flex !important; flex-wrap: nowrap; gap: 9px; overflow-x: auto; overflow-y: hidden;
    margin: 2px -14px 16px; padding: 2px 14px 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  html.apprefonte body.page-feu-de-camp .feu-secbar::-webkit-scrollbar { display: none; }
  html.apprefonte body.page-feu-de-camp .feu-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px;
    background: #0D2233; border: 1px solid rgba(246,240,223,.12); color: #9BB1BF; font-weight: 600; font-size: 14px; white-space: nowrap;
  }
  html.apprefonte body.page-feu-de-camp .feu-chip.active,
  html.apprefonte body.page-feu-de-camp .feu-chip[aria-selected="true"] {
    color: #FFB65A; border-color: rgba(255,182,90,.6); background: rgba(255,182,90,.10);
  }

  /* ---- Cartes du fil : mise en page verticale + photo pleine largeur (maquette) ---- */
  html.apprefonte body.page-feu-de-camp .feu-feed { gap: 16px; }
  html.apprefonte body.page-feu-de-camp .feu-card {
    display: block !important; padding: 16px !important; border-radius: 20px !important;
    background: #0D2233 !important; border: 1px solid rgba(246,240,223,.09) !important; border-left-width: 1px !important;
  }
  html.apprefonte body.page-feu-de-camp .feu-card-head { display: flex !important; align-items: center; gap: 11px; margin-bottom: 10px; }
  html.apprefonte body.page-feu-de-camp .feu-av { width: 46px !important; height: 46px !important; border-radius: 50% !important; flex: 0 0 auto; }
  html.apprefonte body.page-feu-de-camp .feu-head-main { flex: 1; min-width: 0; }
  html.apprefonte body.page-feu-de-camp .feu-author { font-weight: 800; font-size: 16px; color: #F6F0DF; }
  html.apprefonte body.page-feu-de-camp .feu-badge {
    display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px;
    background: rgba(224,140,255,.14); color: #e0a8ff; border: 1px solid rgba(224,140,255,.3); font-size: 11.5px; font-weight: 700;
  }
  html.apprefonte body.page-feu-de-camp .feu-title { font: 800 19px/1.3 'Inter',system-ui,sans-serif; color: #F6F0DF; margin: 2px 0 6px; }
  html.apprefonte body.page-feu-de-camp .feu-text { color: #cdd8e0; font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
  html.apprefonte body.page-feu-de-camp .feu-media {
    display: block !important; width: 100% !important; float: none !important; margin: 12px 0 !important;
    border-radius: 14px !important; aspect-ratio: 16/10; overflow: hidden;
  }
  html.apprefonte body.page-feu-de-camp .feu-media img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
  html.apprefonte body.page-feu-de-camp .feu-metarow { color: #9BB1BF; font-size: 12.5px; margin: 0 0 10px; }

  /* ---- Pied de carte : boutons d'action en pastilles (Participer / Répondre / Partager) ---- */
  html.apprefonte body.page-feu-de-camp .feu-card-foot { display: flex !important; gap: 10px; flex-wrap: wrap; border-top: 1px solid rgba(246,240,223,.08); padding-top: 12px; margin-top: 4px; }
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-btn,
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-cta {
    flex: 1 1 auto; justify-content: center; padding: 11px 12px; border-radius: 12px;
    background: transparent; border: 1px solid rgba(246,240,223,.14); color: #35D7D1; font-weight: 700; font-size: 13.5px;
  }
  html.apprefonte body.page-feu-de-camp .feu-card-foot .feu-cta { background: rgba(53,215,209,.10); border-color: rgba(53,215,209,.4); }
}