/* ===== CUSTOMVIEWER CSS OPTIMISÉ - SETTINGS CONFIGURABLES ===== */

/* Variables CSS pour contrôle total depuis le CSS */
:root {
  /* DURÉES D'ANIMATION */
  --viewer-fade-in-duration: 0s;           /* Durée fade d'entrée */
  --viewer-fade-out-duration: 1s;          /* Durée fade de sortie */
  --viewer-return-animation-duration: 0.3s; /* Durée animation de retour */
  
  /* OPACITÉ ET TRANSPARENCE */
  --viewer-background-opacity: 0.3;        /* Opacité du fond (0-1) */
  --viewer-return-fade-threshold: 0.5;     /* Seuil début fade retour (0-1) */
  
  /* POSITIONS ET LAYOUT */
  --viewer-zoom-indicator-top: 20px;       /* Position Y indicateur zoom */
  --viewer-zoom-indicator-left: 20px;      /* Position X indicateur zoom */
  --viewer-close-button-size: 24px;        /* Taille bouton fermer */
  --viewer-close-button-hover-zone: 60px;  /* Zone hover bouton fermer */
  
  /* COURBES ET TRANSITIONS */
  --viewer-return-curve-intensity: 0.4;    /* Intensité courbe retour (0-1) */
  --viewer-transition-start-factor: 1.2;   /* Facteur début transition retour */
  
  /* COULEURS ET APPARENCE */
  --viewer-loader-color: #fff;             /* Couleur du loader */
  --viewer-zoom-bg: rgba(0, 0, 0, 0.8);    /* Fond indicateur zoom */
  --viewer-zoom-color: white;              /* Couleur texte zoom */
  --viewer-close-bg: #ccc;                 /* Fond bouton fermer */
  --viewer-close-hover-bg: #ddd;           /* Fond bouton fermer hover */
  --viewer-close-border: #000;             /* Bordure bouton fermer */
  
  /* RESPONSIVE */
  --viewer-mobile-zoom-size: 11px;         /* Taille police zoom mobile */
  --viewer-mobile-close-size: 20px;        /* Taille bouton fermer mobile */
}

/* APPARENCE GÉNÉRALE - Contrôle l'overlay principal et la transparence */
#custom-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* SETTING: Transparence du fond - contrôlé par variable CSS */
  background: rgba(0, 0, 0, var(--viewer-background-opacity));
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
  /* SETTING: Durée du fade d'entrée/sortie - contrôlé par variables CSS */
  transition: opacity var(--viewer-fade-out-duration) ease-out;
}

/* CONTENEUR PRINCIPAL - Zone de drag invisible autour de l'image */
#custom-viewer-container {
  position: relative;
  /* SETTING: Taille de la zone de drag invisible - couvre tout l'écran */
  width: 100vw;
  height: 100vh;
  background: transparent; /* Invisible pour voir l'interface dessous */
  overflow: hidden;
  cursor: grab;
  /* SETTING: Contrôle le blur autour de l'image */
  backdrop-filter: blur(0px); /* Modifiable pour effet blur */
}

#custom-viewer-container:active {
  cursor: grabbing;
}

/* IMAGE PRINCIPALE - Contrôle le rendu et la qualité */
#custom-viewer-img {
  position: absolute;
  will-change: transform;
  max-width: none;
  max-height: none;
  pointer-events: auto;
  user-drag: none;
  -webkit-user-drag: none;
  transform-origin: 0 0;
  /* SETTING: Qualité du rendu - configurable */
  image-rendering: auto; /* auto | crisp-edges | pixelated */
  /* SETTING: Durée du fade d'opacité pour l'image - instantané pour contrôle JS */
  transition: opacity 0s ease-out;
  /* Optimisations anti-aliasing */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* LOADER - Indicateur de chargement */
#custom-viewer-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* SETTING: Apparence du loader - contrôlé par variables CSS */
  color: var(--viewer-loader-color);
  font-size: 1.5em;
  font-family: 'UnifontExMono', monospace, sans-serif;
  z-index: 2;
  /* SETTING: Style du conteneur loader */
  background: rgba(0, 0, 0, 0);
  padding: 10px 20px;
  border-radius: 8px;
  /* Animation de pulsation pour le loader */
  animation: loaderPulse 1.5s ease-in-out infinite alternate;
}

@keyframes loaderPulse {
  from { opacity: 0.6; }
  to { opacity: 1; }
}

/* INDICATEUR DE ZOOM - Petite pillule avec le niveau de zoom */
#custom-viewer-zoom-indicator {
  /* SETTING: Position de l'indicateur de zoom - contrôlé par variables CSS */
  position: absolute;
  top: var(--viewer-zoom-indicator-top);
  left: var(--viewer-zoom-indicator-left);
  /* EXEMPLE: Pour centrer horizontalement: left: calc(50vw - 50px); */
  /* EXEMPLE: Pour centrer verticalement: top: calc(50vh - 15px); */
  
  /* SETTING: Apparence de la pillule de zoom - contrôlé par variables CSS */
  background: var(--viewer-zoom-bg);
  color: var(--viewer-zoom-color);
  padding: 6px 12px;
  border-radius: 15px;
  
  /* SETTING: Police et taille du texte de zoom */
  font-family: 'UnifontExMono', monospace, sans-serif;
  font-size: 12px;
  font-weight: normal;
  z-index: 3;
  pointer-events: none;
  
  /* SETTING: Animation de l'indicateur */
  transition: opacity 0.2s ease-out;
  backdrop-filter: blur(4px);
  
  /* Effet de slide-in depuis le haut */
  animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* BOUTON FERMER - Croix discrète dans le style des infobox */
#custom-viewer-close {
  /* SETTING: Position du bouton fermer (sera ajustée par JS) */
  position: absolute;
  
  /* SETTING: Apparence du bouton - contrôlé par variables CSS */
  background: var(--viewer-close-bg);
  border: 1px solid var(--viewer-close-border);
  
  /* SETTING: Taille du bouton fermer - contrôlé par variable CSS */
  width: var(--viewer-close-button-size);
  height: var(--viewer-close-button-size);
  
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  
  /* SETTING: Police et taille de la croix */
  font-family: 'UnifontExMono', monospace, sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: #000;
  user-select: none;
  
  /* SETTING: Animation du bouton fermer */
  transition: opacity 0.3s ease-out, background-color 0.3s ease-out, transform 0.2s ease-out;
  opacity: 0; /* Invisible par défaut */
  
  /* Effet de scale au hover */
  transform: scale(1);
}

#custom-viewer-close:hover {
  /* SETTING: Couleur au hover du bouton fermer - contrôlé par variable CSS */
  background: var(--viewer-close-hover-bg);
  transform: scale(1.1);
}

#custom-viewer-close:active {
  transform: scale(0.95);
}

/* ANIMATION FADE IN/OUT - Classes pour les transitions */
.custom-viewer-fade-in {
  opacity: 0;
  animation: fadeIn var(--viewer-fade-in-duration) ease-out forwards;
}

.custom-viewer-fade-out {
  opacity: 1;
  animation: fadeOut var(--viewer-fade-out-duration) ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ÉTATS SPÉCIAUX */

/* Mode retour - peut être utilisé pour des effets visuels spéciaux */
#custom-viewer-container.returning-to-gallery {
  /* Effet optionnel quand en mode retour */
}

#custom-viewer-container.returning-to-gallery #custom-viewer-img {
  /* Image en mode retour - pourrait avoir des effets spéciaux */
}

/* Mode scroll désactivé - indication visuelle optionnelle */
#custom-viewer-container.scroll-disabled {
  /* Indication visuelle que le scroll est désactivé */
  cursor: not-allowed;
}

/* RESPONSIVE - Ajustements mobiles */
@media (max-width: 768px) {
  :root {
    /* Variables spécifiques mobile */
    --viewer-zoom-indicator-top: 15px;
    --viewer-zoom-indicator-left: 15px;
    --viewer-close-button-size: var(--viewer-mobile-close-size);
  }
  
  #custom-viewer-zoom-indicator {
    /* SETTING: Ajustements mobiles pour l'indicateur de zoom */
    font-size: var(--viewer-mobile-zoom-size);
    padding: 4px 8px;
  }
  
  #custom-viewer-close {
    /* SETTING: Ajustements mobiles pour le bouton fermer */
    font-size: 12px;
  }
  
  #custom-viewer-loader {
    font-size: 1.2em;
  }
}

/* RESPONSIVE ULTRA-MOBILE */
@media (max-width: 480px) {
  :root {
    --viewer-zoom-indicator-top: 10px;
    --viewer-zoom-indicator-left: 10px;
    --viewer-close-button-size: 18px;
  }
  
  #custom-viewer-zoom-indicator {
    font-size: 10px;
    padding: 3px 6px;
  }
}

/* THÈMES OPTIONNELS */

/* Thème sombre (classe optionnelle) */
.custom-viewer-dark {
  --viewer-background-opacity: 0.9;
  --viewer-loader-color: #fff;
  --viewer-zoom-bg: rgba(255, 255, 255, 0.2);
  --viewer-zoom-color: white;
  --viewer-close-bg: rgba(255, 255, 255, 0.2);
  --viewer-close-hover-bg: rgba(255, 255, 255, 0.3);
  --viewer-close-border: rgba(255, 255, 255, 0.4);
}

/* Thème clair (classe optionnelle) */
.custom-viewer-light {
  --viewer-background-opacity: 0.5;
  --viewer-loader-color: #333;
  --viewer-zoom-bg: rgba(255, 255, 255, 0.9);
  --viewer-zoom-color: #333;
  --viewer-close-bg: #f0f0f0;
  --viewer-close-hover-bg: #e0e0e0;
  --viewer-close-border: #999;
}

/* CROSS-BROWSER COMPATIBILITY */

/* Chrome/Webkit opacity fix - align with Firefox rendering */
.chrome-browser .custom-viewer-overlay,
.webkit-browser .custom-viewer-overlay {
  --viewer-background-opacity: 0.5; /* Chrome needs higher opacity to match Firefox visual */
}

/* ACCESSIBILITÉ */

/* Préférences utilisateur pour les animations */
@media (prefers-reduced-motion: reduce) {
  :root {
    --viewer-fade-in-duration: 0s;
    --viewer-fade-out-duration: 0s;
    --viewer-return-animation-duration: 0s;
  }
  
  #custom-viewer-zoom-indicator {
    animation: none;
  }
  
  #custom-viewer-loader {
    animation: none;
  }
  
  #custom-viewer-close {
    transition: opacity 0.3s ease-out;
  }
}

/* Contraste élevé */
@media (prefers-contrast: high) {
  :root {
    --viewer-zoom-bg: #000;
    --viewer-zoom-color: #fff;
    --viewer-close-bg: #fff;
    --viewer-close-hover-bg: #f0f0f0;
    --viewer-close-border: #000;
  }
}