/* Animations d'apparition pour le hero */
@keyframes heroFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* État initial des éléments du hero */
.hero-badge, .hero-title, .hero-subtitle, .hero-buttons {
  opacity: 0;
  transform: translateY(30px);
}

/* Animations désactivées - gérées par JavaScript pour éviter les conflits */
/*
.hero-badge.animate-in {
  animation: heroFadeInUp 1s ease-out forwards;
  animation-delay: 0s;
}

.hero-title.animate-in {
  animation: heroFadeInUp 1s ease-out forwards;
  animation-delay: 0.15s;
}

.hero-subtitle.animate-in {
  animation: heroFadeInUp 1s ease-out forwards;
  animation-delay: 0.3s;
}

.hero-buttons.animate-in {
  animation: heroFadeInUp 1s ease-out forwards;
  animation-delay: 0.45s;
}
*/

/* Délais pour les éléments stagger */
.stagger-delay-1 { transition-delay: 0.1s !important; }
.stagger-delay-2 { transition-delay: 0.2s !important; }
.stagger-delay-3 { transition-delay: 0.3s !important; }
.stagger-delay-4 { transition-delay: 0.4s !important; }
.stagger-delay-5 { transition-delay: 0.5s !important; }
.stagger-delay-6 { transition-delay: 0.6s !important; }

/* Délais personnalisés */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }
.delay-400 { transition-delay: 0.4s !important; }
.delay-500 { transition-delay: 0.5s !important; }
.delay-600 { transition-delay: 0.6s !important; }
.delay-700 { transition-delay: 0.7s !important; }
.delay-800 { transition-delay: 0.8s !important; }

/* Gestion des boutons fullscreen selon l'appareil - RÈGLES ULTRA-SPÉCIFIQUES */
@media (max-width: 768px) {
  /* Masquer TOUS les boutons fullscreen custom sur mobile */
  #heroFullscreen,
  #bookVideo1Fullscreen,
  #bookVideo2Fullscreen,
  #bookVideo3Fullscreen,
  #bookVideo4Fullscreen,
  #applicationVideoFullscreen,
  #book .video-fullscreen-btn:not(.mobile-fullscreen-btn) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  /* Afficher TOUS les boutons fullscreen natifs sur mobile */
  #heroFullscreenNative,
  #bookVideo1FullscreenNative,
  #bookVideo2FullscreenNative,
  #bookVideo3FullscreenNative,
  #bookVideo4FullscreenNative,
  #applicationVideoFullscreenNative,
  #book .mobile-fullscreen-btn,
  .application-video-column .mobile-fullscreen-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

@media (min-width: 769px) {
  /* Masquer TOUS les boutons fullscreen natifs sur desktop */
  #heroFullscreenNative,
  #bookVideo1FullscreenNative,
  #bookVideo2FullscreenNative,
  #bookVideo3FullscreenNative,
  #bookVideo4FullscreenNative,
  #applicationVideoFullscreenNative,
  #book .mobile-fullscreen-btn,
  .application-video-column .mobile-fullscreen-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* Afficher TOUS les boutons fullscreen custom sur desktop */
  #heroFullscreen,
  #bookVideo1Fullscreen,
  #bookVideo2Fullscreen,
  #bookVideo3Fullscreen,
  #bookVideo4Fullscreen,
  #applicationVideoFullscreen,
  #book .video-fullscreen-btn:not(.mobile-fullscreen-btn) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Styles spécifiques pour le bouton mobile */
.mobile-fullscreen-btn {
  background: rgba(138, 76, 255, 0.9) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 15px rgba(138, 76, 255, 0.3) !important;
}

.mobile-fullscreen-btn:hover {
  background: rgba(138, 76, 255, 1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(138, 76, 255, 0.4) !important;
}


/* Styles spécifiques pour les boutons mobile dans la section application */
.application-video-column .mobile-fullscreen-btn {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  z-index: 1000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* display sera géré par les media queries */
}

/* RÈGLES SPÉCIFIQUES POUR FORCER LA VISIBILITÉ DES BOUTONS BOOK */
/* Sur desktop, masquer les boutons natifs et afficher les boutons custom */
@media (min-width: 769px) {
  #book .book-item-1 #bookVideo1FullscreenNative,
  #book .book-item-2 #bookVideo2FullscreenNative,
  #book .book-item-3 #bookVideo3FullscreenNative,
  #book .book-item-4 #bookVideo4FullscreenNative {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  #book .book-item-1 #bookVideo1Fullscreen,
  #book .book-item-2 #bookVideo2Fullscreen,
  #book .book-item-3 #bookVideo3Fullscreen,
  #book .book-item-4 #bookVideo4Fullscreen {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Sur mobile, afficher les boutons natifs et masquer les boutons custom */
@media (max-width: 768px) {
  #book .book-item-1 #bookVideo1Fullscreen,
  #book .book-item-2 #bookVideo2Fullscreen,
  #book .book-item-3 #bookVideo3Fullscreen,
  #book .book-item-4 #bookVideo4Fullscreen {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  #book .book-item-1 #bookVideo1FullscreenNative,
  #book .book-item-2 #bookVideo2FullscreenNative,
  #book .book-item-3 #bookVideo3FullscreenNative,
  #book .book-item-4 #bookVideo4FullscreenNative {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}