/* ===== ENCRALYS – Alignement actions header ===== */
/*
   ➜ Ajuste l’alignement des actions dans le header du groupe :
     - ligne "Réalisé par..." + actions,
     - bloc Organisateur / Rejoindre / cloche,
     - colonne des boutons bleus (bande-annonce / watchlist / vu).
*/

/* Réduit l’espace entre “Réalisé par …” et les actions */
#item-header-content .encralys-group-director {
  margin-bottom: 4px !important;  /* mets 0 si tu veux tout coller */
}

/* Conteneur : Organisateur + cloche + colonne des boutons bleus */
body.single-item.groups #item-header-content .group-actions-absolute {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;

  /* 🔹 remonte TOUT le bloc (Organisateur + cloche + colonne) */
  margin-top: -18px !important;  /* joue avec -14 / -20 / -22 selon ton goût */
}

/* Colonne bleue (Bande-annonce / Watchlist / Déjà vu) */
body.single-item.groups #item-header-content .group-actions-absolute .encralys-trailer-action {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% - 80px) !important;  /* plus petit = plus proche d’Organisateur */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 10px !important;
}

/* Largeur & style homogènes des 3 boutons bleus */
body.single-item.groups #item-header-content .encralys-trailer-action .button,
body.single-item.groups #item-header-content .encralys-trailer-action .encralys-btn-seen {
  width: 200px !important;
  max-width: 100% !important;
  text-align: center !important;
  border-radius: 999px !important;
}

/* ENCRALYS – Remonter uniquement "Organisateur" + cloche 
   (meta sans la colonne bleue) */
body.single-item.groups #item-header-content .group-actions-absolute
  > .bp-generic-meta.groups-meta.action:not(.encralys-trailer-action) {
  margin-top: -150px !important;  /* essaye -8, -10, -12 selon le rendu */
}


/* === ENCRALYS – Bouton "Suivre le groupe" (aligné verticalement avec les autres) === */
/*
   ➜ Style détaillé du bouton "Rejoindre / Quitter / Organisateur" + 
     repositionnement de la colonne de boutons bleus et suppression de la cloche.
*/

/* Conteneur global du bouton + cloche */
body.single-item.groups #item-header-content .group-actions-absolute {
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important; /* ✅ centré verticalement */
  gap: 12px !important;
  margin-top: 40px !important; /* 🔹 remonté depuis 25px → 10px */
}

/* Bouton "Rejoindre le groupe" (état non membre) */
body.single-item.groups #item-header-content .group-actions-absolute .group-button.join-group {
  background: #3b5bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, transform 0.2s ease;
  width: 200px !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1 !important;
  margin-right: 0 !important;
}

/* Hover */
body.single-item.groups #item-header-content .group-actions-absolute .group-button.join-group:hover {
  background: #5f78ff !important;
  transform: translateY(-1px);
}

/* États "Membre" / "Quitter le groupe" / "Organisateur" */
body.single-item.groups #item-header-content .group-actions-absolute .group-button.leave-group,
body.single-item.groups #item-header-content .group-actions-absolute .group-button.organizer {
  background: #3b5bff !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  transition: background 0.2s ease, transform 0.2s ease;
  width: 200px !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1 !important;
  margin-right: -15px !important; /* 🔹 léger décalage à droite */
}

/* Hover neutre pour "Quitter" etc. */
body.single-item.groups #item-header-content .group-actions-absolute .group-button.leave-group:hover {
  background: #e5e7eb !important;
}

/* Colonne des boutons bleus (Bande-annonce / Watchlist / Vu) */
body.single-item.groups #item-header-content .group-actions-absolute .encralys-trailer-action {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% - 50px) !important; /* rapproche la colonne du bouton principal */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

/* Largeur uniforme pour tous les boutons */
body.single-item.groups #item-header-content .group-actions-absolute .encralys-trailer-action .button,
body.single-item.groups #item-header-content .group-actions-absolute .encralys-trailer-action .encralys-btn-seen {
  width: 200px !important;
  max-width: 100% !important;
  text-align: center !important;
  border-radius: 999px !important;
}

/* Supprime le bouton cloche (désabonnement / notification) */
body.single-item.groups #item-header-content .group-actions-absolute .group-subscription {
  display: none !important;
}