/* === ENCRALYS – Flairs + TMDB box === */
/*
   ➜ Styles pour :
     - le bloc de recherche TMDB dans le formulaire de création de groupe,
     - la barre de flairs (année / genre / type) sous le titre du groupe,
     - ajustements d’espacement et d’alignement AniList,
     - le bloc de cast (liens acteurs),
     - la description du groupe recentrée.
*/

#encralys-tmdb-box {
  margin: 18px 0 8px;
  background: #f8f8f9;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
}

#encralys-tmdb-box h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

#encralys-tmdb-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

#encralys-tmdb-results {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

#encralys-tmdb-results ul { list-style: none; margin: 0; padding: 0; }
#encralys-tmdb-results li { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
#encralys-tmdb-results li:hover { background: #f8fafc; }

#encralys-tmdb-none {
  color: #6b7280;
  font-size: 13px;
  padding: 6px 2px;
}

/* ========================================================== */
/* =======   BARRE DE FLAIRS ET ALIGNEMENT ANILIST   ========= */
/* ========================================================== */

/* Ligne sous le titre (AniList ou TMDB) */
.encralys-group-director {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 2px;            /* 🔧 quasi collé au titre */
  font-size: 15px;
  line-height: 1.35;          /* 🔧 un peu plus dense */
}

/* Flair "Type" (Manga / Anime) dans cette ligne si présent */
.encralys-group-director .encralys-flair--type {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border: 1px solid var(--bb-border, #e5e7eb);
  background: var(--bb-surface, #fff);
  color: var(--bb-text, #111827);
}

/* Les flairs suivent immédiatement la ligne "Réalisé/Mangaka" */
.encralys-group-director + .encralys-meta-row {
  margin-top: 2px !important; /* 🔧 écart minimal */
}

/* Conteneur des flairs */
#item-header-content .encralys-flairs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;                  /* 🔧 pas de marge supplémentaire */
}

/* Ligne contenant les flairs (avant la description) */
#item-header-content .encralys-meta-row {
  margin-top: 0 !important;
  margin-bottom: 4px !important;  /* 🔧 rapproche la description */
}

/* Pour éviter que le bloc d’actions ne pousse trop vers les flairs */
body.single-item.groups #item-header-content .group-actions-absolute {
  margin-bottom: 0 !important;
}

/* Style des flairs individuels */
.encralys-flair {
  display: inline-flex;
  align-items: center;
  padding: .18rem .5rem;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  border: 1px solid var(--bb-border, #e5e7eb);
  background: var(--bb-surface, #fff);
  color: var(--bb-text, #111827);
}

/* Variantes de couleur */
.encralys-flair--year  { background:#f5f3ff; border-color:#e9d5ff; color:#7c3aed; }
.encralys-flair--genre { background:#eef6ff; border-color:#dbeafe; color:#1d4ed8; }
.encralys-flair--type  { background:#ecfdf5; border-color:#d1fae5; color:#047857; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .encralys-flair { border-color:#333; background:#1f1f1f; color:#ddd; }
  .encralys-flair--year  { background:#241a35; border-color:#6d28d9; color:#e9d5ff; }
  .encralys-flair--genre { background:#13233b; border-color:#1e3a8a; color:#c3dafe; }
  .encralys-flair--type  { background:#0f2a20; border-color:#065f46; color:#a7f3d0; }
}

/* ========================================================== */
/* ======================   CAST   =========================== */
/* ========================================================== */

.encralys-cast {
  margin-top: 8px;            /* 🔧 compact */
  color: var(--bb-text, #111827);
}
.encralys-cast .encralys-cast-link { text-decoration: none; border-bottom: 1px dashed currentColor; }
.encralys-cast .encralys-cast-link:hover { opacity:.85; }

/* ========================================================== */
/* =======   DESCRIPTION CENTRÉE (ESPACEMENT AJUSTÉ)   ======= */
/* ========================================================== */

#item-header-content .group-description {
  max-width: 500px;
  margin: 4px auto 0;         /* 🔧 très proche des flairs */
  text-align: justify;
}