/* ==========================================================================
   STRUCTURE PRINCIPALE DU MODAL (FOND NOIR)
   ========================================================================== */
.modal {
  display: none;        /* Caché par défaut, géré par le JS */
  position: fixed !important; 
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0a0a0a !important; 
  /* AJUSTEMENT : Bordure blanche réduite de 15px à 6px pour gagner de la place */
  border: 6px solid white !important; 
  z-index: 99999 !important; 
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Version affichée du modal */
.modal.show {
  display: block !important;
}

/* Conteneur interne */
.modal-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100000 !important;
}

/* ==========================================================================
   STRUCTURE PRINCIPALE DU MODAL (FOND NOIR)
   ========================================================================== */
.modal {
  display: none;        /* Caché par défaut, géré par le JS */
  position: fixed !important; 
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0a0a0a !important; 
  /* AJUSTEMENT : Bordure blanche réduite de 15px à 6px pour gagner de la place */
  border: 6px solid white !important; 
  z-index: 99999 !important; 
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Version affichée du modal */
.modal.show {
  display: block !important;
}

/* Conteneur interne */
.modal-inner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 100000 !important;
}

/* ==========================================================================
   GESTION DE L'IMAGE (TAILLE MAXIMISÉE ET TRANSITIONS)
   ========================================================================== */
.modal-content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  /* AJUSTEMENT : Augmenté de 85% à 96% pour que l'image occupe presque tout l'espace */
  max-width: 96.5% !important;
  max-height: 96.5% !important;
  
  /* L'image commence légèrement réduite pour l'effet de zoom */
  transform: translate(-50%, -50%) scale(0.95) !important;
  
  /* L'image par défaut (invisible et prête à bouger) */
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 0.8s ease-in-out;

  z-index: 100001 !important;
  border: 4px solid white;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Fondu Entrant ET Zoom final (Quand la photo s'affiche) */
.modal-content.fade-in {
  opacity: 1;
  /* L'image prend sa taille normale (scale 1) en même temps qu'elle devient visible */
  transform: translate(-50%, -50%) scale(1) !important;
  transition: opacity 2.2s ease-in-out, transform 1.2s ease-out !important;
}

/* ==========================================================================
   ÉLÉMENTS DE CONTRÔLE ET TEXTES (POSITIONNEMENT)
   ========================================================================== */

/* Flèches de navigation (Gauche / Droite) */
.modal-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 60px !important; 
  color: #ffffff !important;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.8); /* Ombre pour rester visible sur les photos claires */
  cursor: pointer !important;
  user-select: none !important;
  padding: 10px !important;
  z-index: 100010 !important; 
}
/* AJUSTEMENT : Rapprochées du bord (de 40px à 15px) pour ne pas empiéter sur l'image */
.modal-arrow.left { left: 15px !important; }
.modal-arrow.right { right: 15px !important; }

/* Bouton AUTO / PAUSE (En bas à droite) */
.auto-btn {
  position: absolute !important;
  /* AJUSTEMENT : Rapproché des bords (de 40px à 20px) */
  bottom: 20px !important;
  right: 20px !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #000000 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  z-index: 100010 !important;
}

/* Légende sous l'image */
.modal-caption {
  position: absolute !important;
  /* AJUSTEMENT : Descendue un peu (de 45px à 20px) */
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #ffffff !important;
  text-align: center !important;
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  background: rgba(0, 0, 0, 0.75) !important;
  padding: 6px 18px !important;
  border-radius: 5px !important;
  transition: opacity 0.5s ease !important;
  opacity: 0 !important;
  z-index: 100010 !important;
}
.modal-caption.show {
  opacity: 1 !important;
}

/* Croix de fermeture (En haut à droite) */
.close {
  position: absolute !important;
  /* AJUSTEMENT : Rapprochée des angles (de 30px/40px à 15px/20px) */
  top: 15px !important;
  right: 20px !important;
  font-size: 50px !important;
  color: #ffffff !important;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
  cursor: pointer !important;
  z-index: 100010 !important;
  line-height: 1 !important;
}

/* Message indicatif "AUTO" (En haut au milieu) */
.info {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 16px !important;
  color: #e0e0e0 !important;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
  text-align: center !important;
  font-family: Arial, sans-serif !important;
  z-index: 100010 !important;
  width: 70% !important;
}

/* ==========================================================================
   ADAPTATION SMARTPHONES
   ========================================================================== */
@media (max-width: 600px) {
  .modal-arrow { font-size: 30px !important; }
  .modal-caption { font-size: 16px !important; bottom: 80px !important; }
  .auto-btn { bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; }
  .modal-inner { padding: 5px !important; } /* Correction de la coquille ici */
}

/* ==========================================================================
   ÉLÉMENTS DE CONTRÔLE ET TEXTES (POSITIONNEMENT)
   ========================================================================== */

/* Flèches de navigation (Gauche / Droite) */
.modal-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 60px !important; 
  color: #ffffff !important;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.8); /* Ombre pour rester visible sur les photos claires */
  cursor: pointer !important;
  user-select: none !important;
  padding: 10px !important;
  z-index: 100010 !important; 
}
/* AJUSTEMENT : Rapprochées du bord (de 40px à 15px) pour ne pas empiéter sur l'image */
.modal-arrow.left { left: 15px !important; }
.modal-arrow.right { right: 15px !important; }

/* Bouton AUTO / PAUSE (En bas à droite) */
.auto-btn {
  position: absolute !important;
  /* AJUSTEMENT : Rapproché des bords (de 40px à 20px) */
  bottom: 20px !important;
  right: 20px !important;
  padding: 10px 22px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #000000 !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  z-index: 100010 !important;
}

/* Légende sous l'image */
.modal-caption {
  position: absolute !important;
  /* AJUSTEMENT : Descendue un peu (de 45px à 20px) */
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #ffffff !important;
  text-align: center !important;
  font-size: 20px !important;
  font-family: Arial, sans-serif !important;
  background: rgba(0, 0, 0, 0.75) !important;
  padding: 6px 18px !important;
  border-radius: 5px !important;
  transition: opacity 0.5s ease !important;
  opacity: 0 !important;
  z-index: 100010 !important;
}
.modal-caption.show {
  opacity: 1 !important;
}

/* Croix de fermeture (En haut à droite) */
.close {
  position: absolute !important;
  /* AJUSTEMENT : Rapprochée des angles (de 30px/40px à 15px/20px) */
  top: 15px !important;
  right: 20px !important;
  font-size: 50px !important;
  color: #ffffff !important;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
  cursor: pointer !important;
  z-index: 100010 !important;
  line-height: 1 !important;
}

/* Message indicatif "AUTO" (En haut au milieu) */
.info {
  position: absolute !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 16px !important;
  color: #e0e0e0 !important;
  text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
  text-align: center !important;
  font-family: Arial, sans-serif !important;
  z-index: 100010 !important;
  width: 70% !important;
}

/* ==========================================================================
   ADAPTATION SMARTPHONES
   ========================================================================== */
@media (max-width: 600px) {
  .modal-arrow { font-size: 30px !important; }
  .modal-caption { font-size: 16px !important; bottom: 80px !important; }
  .auto-btn { bottom: 20px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; }
  .padding: 5px;
}