/* ==========================================================================
   OPTIMISATIONS MOBILE - RÉDUCTION SURCHARGE D'INFOS
   À ajouter APRÈS landing-base.css
   ========================================================================== */

/* ==========================================================================
   1. NAVIGATION RAPIDE - RÉDUCTION ITEMS VISIBLES
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Masquer les items moins prioritaires sur mobile */
  .nav-rapide-item:nth-child(n+6) {
    display: none !important;
  }
  
  /* Garder uniquement : Vidéo, Dates/Tarifs, Programme, Avis, FAQ */
  .nav-rapide-grid {
    justify-content: space-around !important;
    padding: 8px 10px 8px !important;
    gap: 5px !important;
  }
  
  .nav-rapide-item {
    min-width: 70px !important;
    padding: 8px 6px !important;
    font-size: 11px !important;
  }
  
  .nav-rapide-icon {
    font-size: 18px !important;
    margin-bottom: 4px !important;
  }
  
  .nav-rapide-title {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }
}

/* ==========================================================================
   2. HERO - SIMPLIFICATION DRASTIQUE
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Réduire hauteur hero */
  .modele-landing .hero-mystique,
  .modele-landing .hero-premium {
    min-height: 85vh !important;
    padding-top: 20px !important;
  }
  
  /* Masquer le breadcrumb sur mobile */
  .hero-header-row {
    display: none !important;
  }
  
  /* Badge plus compact */
  .badge-premium,
  .hero-badge {
    padding: 5px 12px !important;
    font-size: 11px !important;
    margin-bottom: 15px !important;
  }
  
  /* Titre plus petit */
  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.1 !important;
    margin-bottom: 15px !important;
  }
  
  .hero-subtitle-line {
    font-size: 1.05rem !important;
    margin-top: 8px !important;
  }
  
  /* Description plus courte */
  .hero-description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Limite à 4 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* MASQUER les stats sur mobile (trop d'espace) */
  .hero-stats,
  .stats-mystiques {
    display: none !important;
  }
  
  /* CTA Hero : 1 seul bouton visible */
  .cta-row--hero {
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 20px !important;
  }
  
  /* Cacher le bouton secondaire sur hero mobile */
  .cta-row--hero .btn-secondary {
    display: none !important;
  }
  
  .cta-row--hero .btn-primary {
    width: 100% !important;
    max-width: 320px !important;
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }
}

/* ==========================================================================
   3. SECTION MICRO-CTA - MASQUER SUR MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  /* Cette section répète le hero, on la masque */
  .section-micro-cta {
    display: none !important;
  }
}

/* ==========================================================================
   4. VIDÉO - SIMPLIFICATION
   ========================================================================== */
@media (max-width: 768px) {
  
  .section-video-presentation {
    padding: 40px 0 !important;
  }
  
  .section-video-presentation .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* Masquer les highlights de vidéo sur mobile */
  .video-highlights {
    display: none !important;
  }
  
  /* Simplifier le footer vidéo */
  .video-footer-zen {
    margin-top: 20px !important;
  }
  
  .zen-text {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }
}

/* ==========================================================================
   5. COMPARATIF - MASQUER OU SIMPLIFIER
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Option 1 : Masquer complètement (recommandé) */
  .section-comparatif {
    display: none !important;
  }
  
  /* Option 2 : Si vous voulez le garder, au moins simplifier */
  .split-content .check-list li,
  .split-content .list-gold li {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Masquer l'intro des colonnes */
  .split-content .col-intro {
    display: none !important;
  }
}

/* ==========================================================================
   6. SECTION APPROCHE HOLISTIQUE - RÉDUIRE
   ========================================================================== */
@media (max-width: 768px) {
  
  #approche-holistique {
    padding: 40px 15px !important;
  }
  
  /* Réduire texte explicatif */
  #approche-holistique .split-content p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  #approche-holistique .check-list li {
    font-size: 0.85rem !important;
    padding-left: 25px !important;
  }
}

/* ==========================================================================
   7. BLOC RÉSERVATION - SIMPLIFICATION
   ========================================================================== */
@media (max-width: 768px) {
  
  #bloc-reservation {
    padding: 40px 15px !important;
  }
  
  /* Masquer les bénéfices détaillés sur mobile */
  #bloc-reservation .check-list {
    display: none !important;
  }
  
  /* Garder uniquement le formulaire WooCommerce */
  .carte-inscription-wc {
    padding: 20px 18px !important;
  }
  
  .carte-inscription-note {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   7b. FORMULAIRE RÉSERVATION - CORRECTION DÉBORDEMENT MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  /* Forcer la grille en une seule colonne */
  .calendrier-grid {
    display: block !important;
  }

  /* La carte prend toute la largeur sans dépasser */
  .calendrier-carte {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 20px;
    overflow-x: hidden;
  }

  .carte-inscription-wc {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 15px !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* Tableau des variations : s'adapte à l'écran */
  .gfe-variations-table {
    width: 100%;
    table-layout: fixed;
  }

  .gfe-variation-label {
    width: 35%;
    white-space: normal;
    word-wrap: break-word;
  }

  .gfe-variation-value {
    width: 65%;
  }

  /* Selects et inputs pleine largeur */
  .gfe-variations-form select,
  .gfe-variations-form input[type="number"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Zone quantité */
  .gfe-qty-wrapper {
    width: 100%;
    margin-bottom: 10px;
  }

  .gfe-qty-wrapper input {
    width: 100%;
  }

  /* Bouton d'ajout au panier */
  .gfe-add-to-cart-button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Empêcher tout débordement horizontal du conteneur parent */
  .container {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
  }
}


/* ==========================================================================
   8. PROGRAMME - ACCORDÉON FERMÉ PAR DÉFAUT
   ========================================================================== */
@media (max-width: 768px) {
  
  #programme-n1 {
    padding: 40px 15px !important;
  }
  
  .carte-parcours {
    padding: 20px 15px !important;
  }
  
  .carte-titre {
    font-size: 1.1rem !important;
  }
  
  /* Réduire les listes dans les cartes */
  .carte-contenu ul li {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
  }
  
  /* Cacher la description longue, garder que les puces */
  .carte-description {
    display: none !important;
  }
}

/* ==========================================================================
   9. GALERIE - MASQUER OU RÉDUIRE
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Option 1 : Masquer complètement (recommandé) */
  #galerie-n1 {
    display: none !important;
  }
  
  /* Option 2 : Garder 1 seule image */
  .galerie-grid .galerie-item:nth-child(n+2) {
    display: none !important;
  }
}

/* ==========================================================================
   10. TÉMOIGNAGES - LIMITER À 2
   ========================================================================== */
@media (max-width: 768px) {
  
  #temoignages-n1 {
    padding: 40px 15px !important;
  }
  
  /* Masquer les vidéos témoignages après la 2ème */
  #temoignages-n1 > section:nth-of-type(n+3) {
    display: none !important;
  }
  
  /* Réduire subtitle */
  #temoignages-n1 .section-subtitle {
    font-size: 0.9rem !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ==========================================================================
   11. FAQ - LIMITER ITEMS VISIBLES
   ========================================================================== */
@media (max-width: 768px) {
  
  #faq-section {
    padding: 40px 15px !important;
  }
  
  /* Masquer le sommaire sur mobile */
  .faq-sommaire {
    display: none !important;
  }
  
  /* Afficher seulement les 4 premières questions */
  .faq-item:nth-child(n+5) {
    display: none !important;
  }
  
  /* Bouton "Voir plus de questions" */
  .faq-container::after {
    content: "📋 Voir toutes les questions";
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 12px 20px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    color: var(--turquoise-clair);
    font-weight: 600;
    font-size: 0.9rem;
  }
  
  /* Réduire taille texte FAQ */
  .faq-question h3 {
    font-size: 0.95rem !important;
  }
  
  .faq-answer p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
}

/* ==========================================================================
   12. SECTIONS "RESSOURCES" & "AUTRES FORMATIONS" - MASQUER
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Ces sections sont utiles mais surchargent sur mobile */
  #ressources-niveau1,
  #autres-formations-n1 {
    display: none !important;
  }
}

/* ==========================================================================
   13. STICKY CTA - OPTIMISATION
   ========================================================================== */
@media (max-width: 768px) {
  
  .sticky-mobile-cta {
    bottom: 15px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 6px !important;
    gap: 8px !important;
  }
  
  /* 1 seul bouton sur le sticky en mode étroit */
  @media (max-width: 380px) {
    .sticky-mobile-cta .btn-secondary {
      display: none !important;
    }
    
    .sticky-mobile-cta .btn-primary {
      flex: 1 !important;
    }
  }
}

/* ==========================================================================
   14. SECTIONS GÉNÉRALES - ESPACEMENT RÉDUIT
   ========================================================================== */
@media (max-width: 768px) {
  
  .modele-landing .section {
    padding: 50px 15px !important;
  }
  
  .section-header {
    margin-bottom: 30px !important;
  }
  
  .section-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }
  
  .section-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
  }
  
  .section-badge {
    font-size: 11px !important;
    padding: 6px 14px !important;
    margin-bottom: 12px !important;
  }
}

/* ==========================================================================
   15. CONTENEUR GÉNÉRAL - PADDING RÉDUIT
   ========================================================================== */
@media (max-width: 768px) {
  
  .modele-landing .container {
    padding: 0 15px !important;
  }
  
  /* Éviter le débordement horizontal */
  .modele-landing {
    overflow-x: hidden !important;
  }
  
  .modele-landing * {
    max-width: 100%;
  }
}

/* ==========================================================================
   16. MODALES - OPTIMISATION MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  
  .rdv-modal-dialog {
    max-width: 95vw !important;
    padding: 20px 15px !important;
    max-height: 85vh !important;
  }
  
  .rdv-modal-title {
    font-size: 1.2rem !important;
    padding-right: 30px !important;
  }
  
  .rdv-modal-intro {
    font-size: 0.85rem !important;
  }
}

/* ==========================================================================
   17. BOUTONS - TAILLE TACTILE OPTIMALE
   ========================================================================== */
@media (max-width: 768px) {
  
  .btn-landing {
    min-height: 44px !important; /* Taille minimale tactile recommandée */
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
  }
  
  .btn-large {
    padding: 14px 25px !important;
    font-size: 1rem !important;
  }
}

/* ==========================================================================
   18. CORRECTIF PADDING BOTTOM - ESPACE POUR STICKY
   ========================================================================== */
@media (max-width: 768px) {
  
  .modele-landing#main {
    padding-bottom: 100px !important; /* Espace pour le sticky CTA */
  }
}

/* ==========================================================================
   19. OPTIMISATION PERFORMANCES - LAZY SECTIONS
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Sections non critiques en display: none initialement */
  /* JavaScript peut les activer au scroll */
  
  .section-lazy-mobile {
    display: none !important;
  }
  
  .section-lazy-mobile.is-visible {
    display: block !important;
  }
}

/* ==========================================================================
   20. TYPOGRAPHIE - LISIBILITÉ MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  
  /* Augmenter légèrement la taille de base pour lisibilité */
  .modele-landing p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }
  
  /* Listes plus compactes */
  .modele-landing ul li,
  .modele-landing ol li {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
  }
}
/* ==========================================================================
   STICKY CTA - CORRECTION CLIC & VISIBILITÉ
   ========================================================================== */
@media (max-width: 768px) {
  .sticky-mobile-cta {
    z-index: 999999 !important;
    pointer-events: auto !important;
    background: rgba(15, 23, 42, 0.98) !important;
    border: 2px solid var(--dore-lumineux, #f59e0b) !important;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.5) !important;
  }

  .sticky-mobile-cta .btn-landing {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative;
    z-index: 1000000;
  }

  @media (max-width: 380px) {
    .sticky-mobile-cta {
      padding: 8px !important;
    }
    .sticky-mobile-cta .btn-landing {
      font-size: 0.8rem !important;
      padding: 10px 5px !important;
    }
  }
}