/* CORRECTIONS FORCÉES POUR LE CENTRAGE MOBILE DE LA SECTION APPLICATION */

@media (max-width: 768px) {
  /* Forcer le centrage de tous les éléments de la section application */
  #application .application-container,
  #application .application-layout,
  #application .application-content-column,
  #application .application-video-column,
  #application .application-intro,
  #application .features-grid,
  #application .feature-card-premium,
  #application .feature-content,
  #application .video-showcase,
  #application .video-container,
  #application .application-cta-section {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  }
  
  /* Forcer le centrage des titres et textes */
  #application .section-title,
  #application .section-subtitle,
  #application .application-intro h3,
  #application .application-intro p,
  #application .feature-card-premium h4,
  #application .feature-card-premium p,
  #application .cta-title,
  #application .cta-description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Annuler toutes les transformations qui pourraient décaler */
  #application .slide-left,
  #application .slide-left.animate-in,
  #application .app-feature-reveal,
  #application .app-feature-reveal.animate-in {
    transform: none !important;
    opacity: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Centrer les icônes et boutons */
  #application .feature-icon,
  #application .play-pause-btn,
  #application .cta-button,
  #application .video-fullscreen-btn {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Forcer la largeur et le centrage des éléments flexbox */
  #application .features-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    width: 100% !important;
  }
  
  #application .feature-card-premium {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
  }
  
  #application .video-metadata {
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }
  
  #application .metadata-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Correction spécifique pour les très petits écrans */
  @media (max-width: 480px) {
    #application .application-container {
      padding: 0 1rem !important;
    }
    
    #application .feature-card-premium {
      max-width: 350px !important;
    }
    
    #application .video-frame {
      max-width: 300px !important;
    }
  }
}