/* ═════════════════════════════════════════════════════════════
   LIGHTBOX.CSS
   Visionneuse modale pour photos : affichage fullscreen avec
   animations fluides, navigation clavier/souris, captions.
   ═════════════════════════════════════════════════════════════ */

/* ─ MODAL LIGHTBOX FULLSCREEN ──────────────────────────────────– */
.lightbox {
  display: none; /* Caché par défaut, affiché au clic */
  position: fixed; /* Couvre toute la fenêtre */
  z-index: 9999; /* Priorité maximale */
  inset: 0; /* Remplir top/right/bottom/left */
  background: rgba(0, 0, 0, 0.95); /* Fond noir semi-transparent */
  justify-content: center; /* Centrer horizontalement */
  align-items: center; /* Centrer verticalement */
  flex-direction: column; /* Empiler image/caption verticallement */
  padding: var(--spacing-xxl); /* 40px d'espace */
}

/* ─ CONTENEUR IMAGE (pour gestion transitions) ─────────────────– */
.lightbox-img-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 90%; /* Ne dépasse pas 90% de la fenêtre */
  max-height: 80vh; /* Ne dépasse pas 80% en hauteur */
}

/* ─ IMAGE AFFICHÉE ────────────────────────────────────────────– */
.lightbox-content {
  max-width: 100%; /* Remplit le wrapper */
  max-height: 80vh; /* Resp hauteur écran */
  border-radius: var(--border-radius); /* Coins arrondis */
  box-shadow: var(--box-shadow); /* Ombre */
  display: block;
  transition: opacity 0.1s ease; /* Vitesse de transitions */
}

.lightbox-content.is-transitioning {
  opacity: 0; /* Disparition lors changement d'image */
}

/* ─ CAPTION (titre/description) ────────────────────────────────– */
.lightbox-caption {
  margin-top: var(--spacing-xl); /* 32px sous l'image */
  color: var(--color-text-secondary); /* Gris clair */
  font-size: 0.9em; /* Réduit */
  text-align: center;
  transition: opacity 0.3s ease; /* Animation même que l'image */
}

.lightbox-caption.is-transitioning {
  opacity: 0; /* Disparaît avec l'image */
}

/* ─ ANIMATION ENTRÉE INITIALE ─────────────────────────────────– */
@keyframes lightboxFadeIn {
  from {
    opacity: 0; /* Invisible au départ */
    transform: scale(0.98); /* Légèrement réduit */
  }
  to {
    opacity: 1; /* Visible à la fin */
    transform: scale(1); /* Taille normale */
  }
}

.lightbox-content.initial-load {
  animation: lightboxFadeIn var(--transition); /* 0.2s ease */
}

/* ─ BOUTON FERMETURE (X) ───────────────────────────────────────– */
.lightbox-close {
  position: absolute; /* Pos absolue dans le lightbox */
  top: 25px; /* 25px du haut */
  right: 40px; /* 40px de la droite */
  font-size: 40px; /* Grande croix */
  color: var(--color-header); /* Blanc cassé */
  cursor: pointer;
  transition: opacity var(--transition); /* 0.2s ease */
  line-height: 1; /* Pas d'espacement vertical */
  user-select: none; /* Non sélectionnable */
}

.lightbox-close:hover {
  opacity: 0.6; /* Légèrement transparent au survol */
}

/* ─ FLÈCHES DE NAVIGATION (DESKTOP) ────────────────────────────– */
.lightbox-prev,
.lightbox-next {
  position: absolute; /* Pos absolue aux côtés */
  top: 50%; /* Centré verticalement */
  transform: translateY(-50%);
  font-size: 20px; /* Taille bouton */
  background: rgba(255, 255, 255, 0.12); /* Très transparent */
  backdrop-filter: blur(6px); /* Flou vitreux */
  -webkit-backdrop-filter: blur(6px); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Bordure subtile */
  border-radius: 50px; /* Pilule arrondie */
  color: white;
  cursor: pointer;
  width: 52px; /* Carré 52x52 */
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease; /* Animations */
  line-height: 1;
}

.lightbox-prev {
  left: 24px; /* 24px de la gauche */
}

.lightbox-next {
  right: 24px; /* 24px de la droite */
}

/* Survol des flèches : fond opaque, effet de mouvement */
.lightbox-prev:hover {
  background: rgba(255, 255, 255, 0.26); /* Plus opaque */
  border-color: rgba(255, 255, 255, 0.45); /* Bordure plus visible */
  transform: translateY(-50%) translateX(-2px); /* Recule légèrement */
}

.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-50%) translateX(2px); /* Avance légèrement */
}

/* ─ RESPONSIVE MOBILE (≤ 600px) ────────────────────────────────– */
@media (max-width: 600px) {
  .lightbox {
    padding: var(--spacing-md); /* Moins d'espace sur mobile */
  }

  .lightbox-img-wrapper {
    max-width: 100%; /* Pleine largeur */
    max-height: 70vh; /* Un peu moins de hauteur */
  }

  .lightbox-content {
    max-height: 70vh; /* Adjust hauteur max */
  }

  /* Fermeture mobile : plus haut et petit */
  .lightbox-close {
    top: 12px;
    right: 16px;
    font-size: 28px; /* Croix plus petite */
  }

  /* Flèches mobiles : plus petites, plus opaques */
  .lightbox-prev,
  .lightbox-next {
    font-size: 22px;
    padding: 0;
    width: 44px; /* 44x44 au lieu de 52x52 */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18); /* Plus opaque */
    backdrop-filter: blur(4px); /* Moins de flou */
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%; /* Cercle parfait */
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition:
      background var(--transition),
      opacity var(--transition);
  }

  .lightbox-prev:hover,
  .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.32); /* Au survol : plus opaque */
    opacity: 1;
  }

  .lightbox-prev {
    left: 10px; /* Plus proche du bord */
  }

  .lightbox-next {
    right: 10px;
  }
}