/**
 * CORRECTIF MOBILE V2 - RÉORGANISATION DU LAYOUT
 * L'email et les boutons apparaissent ENSEMBLE après la description
 * 
 * À inclure dans books.html : <link rel="stylesheet" href="/assets/css/mobile-fix-v2.css">
 */

/* ========================================
   MOBILE : RÉORGANISATION COMPLÈTE
   Ordre : Image → Description → Email → Boutons
   ======================================== */

@media (max-width: 768px) {
  
  /* Container principal : une seule colonne flex */
  .livre-modal.active .modal-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 15px !important;
    padding-bottom: 30px !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  /* Le container scroll, pas les enfants */
  .livre-modal.active .modal-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 96vh !important;
    max-height: 96vh !important;
  }
  
  /* === COLONNE GAUCHE : Image + Titre seulement === */
  .livre-modal.active .modal-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    order: 1 !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* Image : plus compacte */
  .livre-modal.active .modal-cover-container {
    order: 1 !important;
  }
  
  .livre-modal.active .modal-cover {
    max-height: 35vh !important;
    width: auto !important;
    margin: 0 auto !important;
  }
  
  /* Titre */
  .livre-modal.active .modal-title {
    order: 2 !important;
    font-size: 1.2em !important;
    padding: 10px !important;
  }
  
  /* CACHER la section email dans modal-left sur mobile */
  .livre-modal.active .modal-left .email-section {
    display: none !important;
  }
  
  /* === COLONNE DROITE : Description → Email → Boutons === */
  .livre-modal.active .modal-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    order: 2 !important;
    overflow: visible !important;
    height: auto !important;
  }
  
  /* 1. DESCRIPTION en premier (dans modal-right) */
  .livre-modal.active .modal-argumentaire {
    order: 1 !important;
    flex: none !important;
    max-height: none !important;
    overflow: visible !important;
    font-size: 0.95em !important;
    line-height: 1.7 !important;
    padding: 20px !important;
  }
  
  /* 2. EMAIL en deuxième - CLONE visible sur mobile */
  .livre-modal.active .email-section-mobile {
    display: block !important;
    order: 2 !important;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1)) !important;
    border: 2px solid #fbbf24 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3) !important;
  }
  
  /* 3. SECTIONS EXTENSIBLES après l'email */
  .livre-modal.active .details-section {
    order: 3 !important;
  }
  
  .livre-modal.active .tarifs-section {
    order: 4 !important;
  }
  
  /* 4. BOUTONS en dernier - mais juste après l'email visuellement */
  .livre-modal.active .modal-actions {
    order: 5 !important;
    position: sticky !important;
    bottom: 0 !important;
    background: linear-gradient(to top, rgba(15, 23, 42, 1) 80%, transparent) !important;
    padding: 15px 0 !important;
    margin: 0 -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    z-index: 100 !important;
  }
  
  /* === INPUTS TACTILES === */
  .email-input,
  #formEmail,
  #formEmailMobile,
  .form-input {
    font-size: 16px !important;
    touch-action: manipulation !important;
    -webkit-appearance: none !important;
    min-height: 50px !important;
    padding: 14px 16px !important;
  }
  
  /* === BOUTONS PLUS GRANDS === */
  .btn,
  .btn-receive-chapter,
  .btn-buy,
  .btn-amazon-half {
    min-height: 54px !important;
    font-size: 1.05em !important;
    touch-action: manipulation !important;
  }
  
  /* Boutons Amazon côte à côte */
  .btn-amazon-split {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  
}

/* ========================================
   DESKTOP : Comportement normal
   ======================================== */
@media (min-width: 769px) {
  .email-section-mobile {
    display: none !important;
  }
}

/* ========================================
   iOS SAFARI FIX
   ======================================== */
@supports (-webkit-touch-callout: none) {
  .livre-modal.active .modal-container {
    max-height: -webkit-fill-available;
  }
  
  .email-input,
  #formEmail,
  #formEmailMobile {
    transform: translateZ(0);
  }
}