/* ==========================================================
   ❤️ FAVORIS — BOUTON UNIVERSEL (BASE SAINE)
   - SVG piloté par currentColor
   - États : normal / actif / loading
   - Compatible cartes + hero + listes
   ========================================================== */

/* Les cartes doivent être un contexte positionné */
.carousel-film-card,
.film-card{
  position: relative;
}

/* ----------------------------------------------------------
   Bouton Favoris (par défaut : posé sur une carte)
   ---------------------------------------------------------- */
.action-btn[data-action="favoris"]{
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  border-radius: 999px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);

  padding: 0;
  line-height: 0;
  cursor: pointer;

  /* La couleur du SVG vient d’ici */
  color: #aaa;

  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease,
    color .2s ease;
}

/* Hover */
.action-btn[data-action="favoris"]:hover{
  background: rgba(255,255,255,1);
  transform: scale(1.06);
}

/* ----------------------------------------------------------
   Icônes SVG
   ---------------------------------------------------------- */
.action-btn[data-action="favoris"] .icon-heart,
.action-btn[data-action="favoris"] .icon-x{
  width: 22px;
  height: 22px;
  display: block;
}

/* Cœur vide (contour) */
.action-btn[data-action="favoris"] .icon-heart--empty path{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Cœur plein */
.action-btn[data-action="favoris"] .icon-heart--full path{
  fill: currentColor;
  stroke: none;
}

/* ----------------------------------------------------------
   État ACTIF (favori)
   ---------------------------------------------------------- */
.action-btn.is-fav{
  color: #e63946; /* rouge cœur */
}

/* ----------------------------------------------------------
   État LOADING
   ---------------------------------------------------------- */
.action-btn.is-loading .icon-heart,
.action-btn.is-loading .icon-x{
  opacity: .55;
  transform: scale(.95);
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 768px){
  .action-btn[data-action="favoris"]{
    width: 34px;
    height: 34px;
    top: 15px;
    right: 15px;
  }

  .action-btn[data-action="favoris"] .icon-heart,
  .action-btn[data-action="favoris"] .icon-x{
    width: 20px;
    height: 20px;
  }
}


/* ==========================================================
   ✅ FIX : en .is-fav le coeur est TOUJOURS plein (fill),
   même si le SVG "empty" est encore présent
   À COLLER TOUT EN BAS
   ========================================================== */

/* État normal : contour (vide) */
.action-btn[data-action="favoris"] .icon-heart path{
  fill: none !important;
  stroke: currentColor !important;
}

/* État favori : plein (rempli) */
.action-btn.is-fav .icon-heart path{
  fill: currentColor !important;
  stroke: none !important;
}


@media (max-width: 768px){

  .btn-trailer-float{
    right: 14px !important;
    bottom: 14px !important;
    width: 52px !important;
    height: 52px !important;
    z-index: 9998 !important;
  }

  /* ✅ SEULEMENT le bouton favoris du HERO */
  .js-fav-hero{
    position: fixed !important;
    right: 14px !important;
    bottom: calc(14px + 52px + 12px) !important;
    top: auto !important;
    left: auto !important;

    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;

    z-index: 9999 !important;

    pointer-events: auto !important;
    touch-action: manipulation;
  }

  .js-fav-hero .icon-heart,
  .js-fav-hero .icon-x{
    width: 22px !important;
    height: 22px !important;
    display:block;
  }
}

@media (max-width: 768px){
  #wpz-fav-hero{
    position: fixed !important;
    right: 14px !important;
    bottom: calc(14px + 52px + 12px) !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}