/**
 * SIMPLE MOBILE THUMBNAILS CSS
 * Styles pour les thumbnails mobiles uniquement
 */

/* ================================
   THUMBNAILS MOBILE UNIQUEMENT
=============================== */

@media (max-width: 768px) {
  
  /* Optimiser l'affichage des vidéos avec thumbnails */
  #book video,
  #application video,
  #hero video {
    background-color: #1a1a2e !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: opacity 0.3s ease !important;
  }
  
  /* Masquer les contrôles natifs sur mobile */
  #book video::-webkit-media-controls,
  #application video::-webkit-media-controls,
  #hero video::-webkit-media-controls {
    display: none !important;
  }
  
  #book video::-webkit-media-controls-panel,
  #application video::-webkit-media-controls-panel,
  #hero video::-webkit-media-controls-panel {
    display: none !important;
  }
  
  /* Optimiser les performances de rendu */
  #book video,
  #application video,
  #hero video {
    transform: translateZ(0) !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
  }
  
  /* Indicateur de chargement */
  .simple-thumbnails-loaded #book video,
  .simple-thumbnails-loaded #application video,
  .simple-thumbnails-loaded #hero video {
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Boutons de lecture améliorés */
  #book .play-pause-btn,
  #application .play-pause-btn,
  #hero .play-pause-btn {
    background: rgba(138, 76, 255, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 24px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(138, 76, 255, 0.4) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 10 !important;
  }
  
  #book .play-pause-btn:hover,
  #application .play-pause-btn:hover,
  #hero .play-pause-btn:hover {
    background: rgba(138, 76, 255, 1) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(138, 76, 255, 0.6) !important;
  }
  
  #book .play-pause-btn i,
  #application .play-pause-btn i,
  #hero .play-pause-btn i {
    margin-left: 2px !important;
  }
}

/* ================================
   MODE DESKTOP - PAS DE THUMBNAILS
=============================== */

@media (min-width: 769px) {
  
  /* S'assurer qu'il n'y a pas de poster en mode desktop */
  #book video,
  #application video,
  #hero video {
    /* Pas de poster en mode desktop */
    background-image: none !important;
    /* Vidéos visibles sans thumbnail */
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
  }
  
  /* Boutons de lecture normaux en desktop */
  #book .play-pause-btn,
  #application .play-pause-btn,
  #hero .play-pause-btn {
    /* Styles par défaut en desktop */
    background: rgba(138, 76, 255, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 20px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(138, 76, 255, 0.3) !important;
    z-index: 10 !important;
  }
  
  #book .play-pause-btn:hover,
  #application .play-pause-btn:hover,
  #hero .play-pause-btn:hover {
    background: rgba(138, 76, 255, 1) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 15px rgba(138, 76, 255, 0.5) !important;
  }
}