/* DS Formation - Scaling viewport pour ratio 1920x1080
 * Adapte la présentation à toute résolution d'écran sans modifier le design.
 * Retirer le link vers ce fichier + le script JS pour revenir à l'état original.
 */

html {
  background: #000;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  width: 1920px !important;
  height: 1080px !important;
  transform-origin: top left;
  /* transform dynamique défini par responsive-scale.js */
}

/* Zoombox modale : force un affichage à 85% du viewport au lieu de la taille
 * naturelle de l'image (qui paraît petite sur grands écrans) */
#zoombox .zoombox_container {
  width: 85vw !important;
  height: 85vh !important;
  top: 7.5vh !important;
  left: 7.5vw !important;
  transform-origin: center center;
}

#zoombox .zoombox_content {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#zoombox .zoombox_content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
}

/* Animation d'entrée : déclenchée par la classe .ds-animate-in posée par le JS
 * à chaque ouverture (le plugin ne recrée pas #zoombox, on force le replay) */
@keyframes dsZoomboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes dsZoomboxContainerEnter {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

#zoombox.ds-animate-in .zoombox_mask {
  animation: dsZoomboxFadeIn 0.2s ease-out;
}

#zoombox.ds-animate-in .zoombox_container {
  animation: dsZoomboxContainerEnter 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}