/*
 * CORRECTIF MOBILE - Superposition éléments bleus
 * Fichier: /www/definition/mobile-fix.css
 * Version: 1.0
 * Date: Janvier 2025
 * 
 * Problème résolu:
 * - Débordement hero-section bleue sur le contenu
 * - Superposition bouton langue / texte
 * - Contextes d'empilement conflictuels
 */

@media (max-width: 768px) {
  
  /* ============================================
     1. ISOLATION HERO SECTION
     ============================================ */
  
  .hero-section {
    /* Forcer l'isolation pour empêcher débordement visuel */
    isolation: isolate !important;
    
    /* S'assurer que le contenu ne déborde pas */
    overflow: hidden !important;
    
    /* Réduire z-index pour être sous les tabs */
    z-index: 1 !important;
    
    /* Forcer position relative stable */
    position: relative !important;
  }
  
  /* ============================================
     2. TABS CONTAINER AU PREMIER PLAN
     ============================================ */
  
  .tabs-container {
    /* Augmenter z-index pour être au-dessus */
    z-index: 200 !important;
    
    /* Forcer isolation */
    isolation: isolate !important;
    
    /* Fond plus opaque pour masquer débordements */
    background: rgba(255, 255, 255, 0.95) !important;
    
    /* S'assurer d'être au-dessus de hero-section */
    position: sticky !important;
  }
  
  /* ============================================
     3. BOUTONS LANGUE - RÉDUIRE TRANSPARENCE
     ============================================ */
  
  .lang-btn {
    /* Forcer opacité à 1 pour éviter transparence */
    opacity: 1 !important;
    
    /* Fond blanc opaque pour boutons non actifs */
    background: rgba(255, 255, 255, 1) !important;
  }
  
  .lang-btn.active {
    /* S'assurer que le fond bleu est bien visible et opaque */
    background: #3b82f6 !important;
    opacity: 1 !important;
    color: white !important;
  }
  
  /* ============================================
     4. MAIN > SECTIONS - ISOLATION GLOBALE
     ============================================ */
  
  main > section {
    /* Isolation sur toutes les sections */
    isolation: isolate !important;
    
    /* Position relative pour créer contexte d'empilement propre */
    position: relative !important;
    
    /* Z-index minimal pour être sous tabs */
    z-index: auto !important;
  }
  
  /* ============================================
     5. PANELS ACTIFS - FOND OPAQUE
     ============================================ */
  
  .tab-panel[aria-hidden="false"] {
    /* Fond blanc quasi-opaque pour masquer débordements */
    background: rgba(255, 255, 255, 0.98) !important;
    
    /* Isolation */
    isolation: isolate !important;
    
    /* Z-index élevé mais sous tabs-container */
    z-index: 10 !important;
    
    /* Position relative */
    position: relative !important;
    
    /* S'assurer qu'il n'y a pas de débordement */
    overflow: visible !important;
  }
  
  /* ============================================
     6. QUOTE-BOX - ISOLATION RENFORCÉE
     ============================================ */
  
  .quote-box {
    /* Déjà isolé dans le CSS principal, mais forcer */
    isolation: isolate !important;
    position: relative !important;
    z-index: 5 !important;
    
    /* Fond légèrement plus opaque */
    background: linear-gradient(to right, rgba(59, 130, 246, 0.12), transparent) !important;
  }
  
  /* ============================================
     7. HEADER - S'ASSURER Z-INDEX ÉLEVÉ
     ============================================ */
  
  header {
    /* Header doit être au-dessus de tout */
    z-index: 300 !important;
    isolation: isolate !important;
  }
  
  /* ============================================
     8. LANGUAGE SELECTOR CONTAINER
     ============================================ */
  
  .language-selector {
    /* Isolation du sélecteur de langue */
    isolation: isolate !important;
    z-index: 350 !important;
    position: relative !important;
  }
  
  /* ============================================
     9. BACKDROP FILTERS - OPTIMISATION
     ============================================ */
  
  /* Réduire blur sur mobile pour meilleures perfs */
  main > section {
    backdrop-filter: blur(6px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(180%) !important;
  }
  
  .hero-section {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
  
  .tabs-container {
    backdrop-filter: blur(6px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(180%) !important;
  }
  
  /* ============================================
     10. CANVAS ANIMATION - RÉDUIRE VISIBILITÉ
     ============================================ */
  
  #background-graph {
    /* Déjà à 0.6 dans le CSS principal, mais s'assurer */
    opacity: 0.5 !important;
    
    /* S'assurer qu'il est bien en arrière-plan */
    z-index: -1 !important;
  }
  
  /* ============================================
     11. READING PROGRESS - ISOLATION
     ============================================ */
  
  #reading-progress {
    isolation: isolate !important;
    position: relative !important;
    z-index: 15 !important;
  }
  
  /* ============================================
     12. DEBUG - BORDURES TEMPORAIRES
     ============================================ */
  
  /* Décommenter pour visualiser les zones problématiques
  
  .hero-section {
    border: 3px solid red !important;
  }
  
  .tabs-container {
    border: 3px solid green !important;
  }
  
  .tab-panel[aria-hidden="false"] {
    border: 3px solid blue !important;
  }
  
  .lang-btn {
    border: 2px solid orange !important;
  }
  
  */
  
  /* ============================================
     13. STICKY NOTICE - S'ASSURER VISIBILITÉ
     ============================================ */
  
  .sticky-notice {
    z-index: 9998 !important;
    isolation: isolate !important;
  }
  
  /* ============================================
     14. BACK TO TOP BUTTON
     ============================================ */
  
  .back-to-top-btn {
    z-index: 9997 !important;
    isolation: isolate !important;
  }
}

/* ============================================
   NOTES DE MAINTENANCE
   ============================================
   
   Ce fichier corrige spécifiquement les problèmes
   de superposition sur mobile causés par:
   
   1. Contextes d'empilement multiples (backdrop-filter)
   2. Z-index conflictuels
   3. Isolation insuffisante
   4. Opacité/transparence créant des artefacts visuels
   
   ORDRE Z-INDEX (du plus bas au plus haut):
   -1   : Canvas animation (fond)
   1    : Hero section
   auto : Sections main
   5    : Quote boxes
   10   : Panel actif
   15   : Reading progress
   200  : Tabs container
   300  : Header
   350  : Language selector
   9997 : Back to top
   9998 : Sticky notice
   
   TESTS À EFFECTUER APRÈS MODIFICATION:
   - Clear cache navigateur
   - Test viewport 375px (iPhone SE)
   - Test viewport 768px (iPad)
   - Vérifier hero section ne déborde pas
   - Vérifier boutons langue visibles
   - Vérifier contenu tabs lisible
   
   ============================================ */