/**
 * CORRECTIF MOBILE V3 - BOUTONS VISIBLES
 * Les boutons restent fixes en bas de l'écran
 * 
 * REMPLACE mobile-fix-v2.css par ce fichier
 */

/* ========================================
   MOBILE : BOUTONS FIXES EN BAS
   ======================================== */

@media (max-width: 768px) {
  
  /* Container : scroll avec espace pour les boutons fixes */
  .livre-modal.active .modal-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 auto !important;
    border-radius: 0 !important;
    padding-bottom: 180px !important; /* Espace pour les boutons fixes */
  }
  
  /* Contenu scrollable */
  .livre-modal.active .modal-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 15px !important;
    padding-bottom: 20px !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Colonnes en flex column */
  .livre-modal.active .modal-left,
  .livre-modal.active .modal-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Image plus petite */
  .livre-modal.active .modal-cover {
    max-height: 30vh !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  
  /* Titre */
  .livre-modal.active .modal-title {
    font-size: 1.1em !important;
    padding: 10px !important;
  }
  
  /* Description : hauteur limitée avec scroll si besoin */
  .livre-modal.active .modal-argumentaire {
    max-height: 35vh !important;
    overflow-y: auto !important;
    font-size: 0.95em !important;
    line-height: 1.6 !important;
    padding: 15px !important;
  }
  
  /* === BOUTONS FIXES EN BAS === */
  .livre-modal.active .modal-actions {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, 
      rgba(15, 23, 42, 1) 0%, 
      rgba(15, 23, 42, 0.98) 70%,
      rgba(15, 23, 42, 0.9) 100%) !important;
    padding: 15px 20px !important;
    padding-bottom: 20px !important;
    z-index: 10000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5) !important;
    border-top: 2px solid rgba(251, 191, 36, 0.3) !important;
  }
  
  /* Bouton chapitre gratuit */
  .livre-modal.active .btn-receive-chapter {
    padding: 14px !important;
    font-size: 1em !important;
    min-height: 50px !important;
  }
  
  /* Boutons Amazon côte à côte */
  .livre-modal.active .btn-amazon-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .livre-modal.active .btn-amazon-half {
    padding: 12px 8px !important;
    font-size: 0.9em !important;
    min-height: 48px !important;
  }
  
  /* Cacher le bouton Acheter et Tarifs */
  .livre-modal.active #btnBuyDirect,
  .livre-modal.active #tarifsSection {
    display: none !important;
  }
  
  /* === INPUTS TACTILES === */
  .email-input,
  #formEmail {
    font-size: 16px !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    min-height: 48px !important;
  }
  
  /* Section email */
  .livre-modal.active .email-section {
    padding: 12px !important;
  }
  
  /* Section newsletter (optionnel) - compacte */
  .livre-modal.active .details-section {
    margin-bottom: 10px !important;
  }
}

/* ========================================
   DESKTOP : Cacher bouton Acheter et Tarifs aussi
   ======================================== */
@media (min-width: 769px) {
  #btnBuyDirect,
  #tarifsSection {
    display: none !important;
  }
  
  /* S'assurer que les boutons Amazon sont visibles */
  #btnAmazonSplitFinal {
    display: grid !important;
  }
}

/* ========================================
   iOS SAFARI FIX
   ======================================== */
@supports (-webkit-touch-callout: none) {
  .livre-modal.active .modal-container {
    max-height: -webkit-fill-available;
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }
  
  .livre-modal.active .modal-actions {
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
}