/* Empêche le scroll de la page quand la popup est ouverte */
html.encralys-actor-open {
  overflow: hidden;
}

/* Conteneur du modal */
#encralys-actor-modal {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  z-index: 9999;
  display: none;           /* caché par défaut */
  pointer-events: none;    /* désactivé tant qu’il n’est pas ouvert */
}

/* Quand la classe .is-open est ajoutée par le JS */
#encralys-actor-modal.is-open {
  display: block;
  pointer-events: auto;
}

/* Fond sombre derrière la popup */
.encralys-actor-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7); /* noir bleuâtre transparent */
  backdrop-filter: blur(2px);
}

/* Fenêtre principale */
.encralys-actor-dialog {
  position: relative;
  max-width: 960px;
  max-height: 90vh;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mode sombre (si ton site supporte prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
  .encralys-actor-dialog {
    background: #020617;
    color: #e5e7eb;
  }
}

/* Contenu scrollable */
.encralys-actor-content {
  padding: 16px 18px;
  overflow-y: auto;
  max-height: calc(90vh - 48px); /* hauteur de la popup - header boutons */
}

/* =======================
   Boutons en haut à droite
   ======================= */

.encralys-actor-close,
.encralys-actor-fullscreen-toggle {
  position: absolute;
  top: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
  font-size: 0; /* on masque le texte interne pour ne garder que l’icône ::before */
}

/* Position des deux boutons */
.encralys-actor-fullscreen-toggle {
  right: 56px;
}
.encralys-actor-close {
  right: 12px;
}

/* Hover : effet lumineux + léger zoom */
.encralys-actor-close:hover,
.encralys-actor-fullscreen-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.05);
}

/* Icône de fermeture (croix) */
.encralys-actor-close::before {
  content: "✕";
  font-size: 16px;
  line-height: 1;
}

/* Icône d’agrandissement (plein écran) */
.encralys-actor-fullscreen-toggle::before {
  content: "⛶";
  font-size: 16px;
  line-height: 1;
}

/* Variante en mode clair : fond plus foncé, texte sombre */
@media (prefers-color-scheme: light) {
  .encralys-actor-close,
  .encralys-actor-fullscreen-toggle {
    background: rgba(0, 0, 0, 0.08);
    color: #111827;
  }

  .encralys-actor-close:hover,
  .encralys-actor-fullscreen-toggle:hover {
    background: rgba(0, 0, 0, 0.15);
  }
}

/* Mode plein écran (quand le JS ajoute .is-fullscreen) */
.encralys-actor-dialog.is-fullscreen {
  margin: 0;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  border-radius: 0;
}

/* Responsive : sur mobile, popup plus compacte */
@media (max-width: 768px) {
  .encralys-actor-dialog {
    margin: 10px;
    max-width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .encralys-actor-content {
    padding: 12px 12px 16px;
  }
}

/* Petit loader simple */
.encralys-actor-loading {
  padding: 40px 0;
  text-align: center;
  font-size: 15px;
  opacity: 0.8;
}

/* ================================
   Ajustements spécifiques au mode popup
   (on ne touche qu'au contenu dans la popup)
   ==================================== */

/* En popup : on enlève les gros marges de la page */
.encralys-actor-content .encralys-person {
  max-width: 100%;
  margin: 0;
  padding: 0 8px 12px;
}

/* Header plus compact */
.encralys-actor-content .encralys-person__header {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
}

.encralys-actor-content .encralys-person__photo img,
.encralys-actor-content .encralys-person__placeholder {
  width: 110px;
  height: 165px;
}

/* Titre + infos plus denses */
.encralys-actor-content .encralys-person__name {
  font-size: 1.2rem;
  margin: 0 0 4px;
}

.encralys-actor-content .encralys-person__facts {
  gap: 8px;
  font-size: 0.9rem;
}

/* Sections un peu resserrées */
.encralys-actor-content .encralys-person__section {
  margin-top: 18px;
}

/* Texte dans les cartes : un peu plus petit */
.encralys-actor-content .encralys-card__title {
  font-size: 0.9rem;
}

.encralys-actor-content .encralys-card__sub {
  font-size: 0.8rem;
}

/* Sur mobile, encore plus compact */
@media (max-width: 600px) {
  .encralys-actor-content .encralys-person__header {
    grid-template-columns: 90px 1fr;
  }

  .encralys-actor-content .encralys-person__photo img,
  .encralys-actor-content .encralys-person__placeholder {
    width: 90px;
    height: 135px;
  }
}

/* ================================
   CARTES HORIZONTALES DANS LA POPUP
   (filmographie & participations)
   ==================================== */

/* La grille devient une colonne de lignes horizontales */
.encralys-actor-content .encralys-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Chaque item (a ou div) occupe toute la largeur */
.encralys-actor-content .encralys-grid > a,
.encralys-actor-content .encralys-grid > div {
  width: 100% !important;
}

/* La carte devient un flex horizontal */
.encralys-actor-content .encralys-card {
  display: flex !important;
  align-items: flex-start !important;
  padding: 8px !important;
  border-radius: 10px !important;
}

/* Poster à gauche, petit */
.encralys-actor-content .encralys-card__poster {
  width: 80px !important;
  height: 120px !important;
  flex-shrink: 0 !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* Texte à droite */
.encralys-actor-content .encralys-card__meta {
  padding: 2px 0 2px 10px !important;
}

/* Titre + sous-titre plus compacts */
.encralys-actor-content .encralys-card__title {
  font-size: 0.95rem !important;
  line-height: 1.3 !important;
}

.encralys-actor-content .encralys-card__sub {
  font-size: 0.8rem !important;
  opacity: 0.85 !important;
}

/* Sur mobile, encore plus petit */
@media (max-width: 600px) {
  .encralys-actor-content .encralys-card__poster {
    width: 70px !important;
    height: 105px !important;
  }

  .encralys-actor-content .encralys-card {
    padding: 6px !important;
  }
}