/* !===========================================================================
   LA VISIONNEUSE PLEIN ECRAN
   ===========================================================================
   Ouverte au clic sur une image `.zoom-trigger`, par themes/eman/javascripts/
   lightbox.js, qui pose .is-zoomed sur le conteneur et .zoomed sur l'image.
   Feuille commune a tout le site : c'est le comportement par defaut des images
   cliquables.
   ========================================================================= */

/* Le theme fait de tout bloc direct de #content une feuille blanche posee sur
   le papier de la page (cf. cards.css). La visionneuse n'est pas du contenu :
   c'est une surcouche, masquee au repos, qui pose son propre fond. */
#image-lightbox-overlay {
  background: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* Tant que la visionneuse est ouverte, la page dessous ne defile plus : sa
   barre de defilement disparait donc de l'ecran. Le JS reporte sa largeur en
   padding pour que la page ne saute pas lateralement a l'ouverture. */
body.lightbox-open {
  overflow: hidden;
}

#image-lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Au-dessus de tout : editeur XML, modale d'import, en-tete du theme. */
  z-index: 100000;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.95);
  /* Le fond n'est pas une zone de zoom : un clic dessus ferme. */
  cursor: default;
}

/* Le grand padding lateral donne de la place au deplacement a la souris quand
   l'image est agrandie. */
#panning-container {
  display: inline-block;
  box-sizing: border-box;
  min-width: 100%;
  min-height: 100%;
  padding: 25px 150px;
  text-align: center;
}

#lightbox-target-img {
  display: inline-block;
  max-width: 90%;
  max-height: 90vh;
  /* Le pointeur annonce ce que fera le clic : ici, agrandir. */
  cursor: zoom-in;
  user-select: none;
  transform: scale(1);
  /* Origine en haut : sinon l'image agrandie est coupee par le haut. */
  transform-origin: center top;
  transition: transform 0.2s ease;
}

#lightbox-target-img.zoomed {
  max-height: none;
  transform: scale(2);
  /* Agrandie, le clic reduit ; le glissement, lui, deplace. */
  cursor: zoom-out;
}

/* Pose par le JS pendant un glissement : le clic ne zoomera pas, on deplace. */
#lightbox-target-img.is-panning {
  cursor: grabbing;
  transition: none;
}

/* Fermeture : carree, posee en haut a droite, au-dessus de l'image. */
#lightbox-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#lightbox-close:hover,
#lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
  outline: none;
}

/* Une image cliquable annonce ce qu'elle fera. */
.zoom-trigger {
  cursor: zoom-in;
}