/* ============================================
   CORRECTIONS RESPONSIVE - MOBILE
   ============================================ */

/* 1. CORRECTION GLOBALE - Empêcher le débordement horizontal */
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
}

body {
    position: relative;
}

/* 2. CORRECTION DES SLIDES */
.slide {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 3. CORRECTION DES TITRES H1 QUI DÉBORDENT */
@media (max-width: 600px) {
    h1 {
        font-size: 1.8rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* Titre hero spécifique */
    .slide h1[style*="font-size: 4.5rem"] {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.6rem !important;
    }
    
    .slide h1[style*="font-size: 4.5rem"] {
        font-size: 1.9rem !important;
    }
}

/* 4. CORRECTION DES H2 */
@media (max-width: 600px) {
    h2 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 400px) {
    h2 {
        font-size: 1.1rem !important;
    }
}

/* 5. CORRECTION DES PARAGRAPHES LONGS */
@media (max-width: 600px) {
    p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    .slide p[style*="font-size: 1.4rem"] {
        font-size: 1.1rem !important;
    }
    
    .slide p[style*="font-size: 1.3rem"] {
        font-size: 1rem !important;
    }
}

/* 6. CORRECTION DU PADDING DES SLIDES */
@media (max-width: 600px) {
    .slide {
        padding: 60px 20px !important;
    }
}

@media (max-width: 400px) {
    .slide {
        padding: 50px 15px !important;
    }
}

/* 7. CORRECTION DE LA NAVIGATION FIXE */
@media (max-width: 600px) {
    .nav {
        padding: 10px 15px !important;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    .logo-container img {
        max-width: 150px !important;
        height: auto;
    }
}

@media (max-width: 400px) {
    .nav {
        padding: 8px 10px !important;
    }
    
    .logo-container img {
        max-width: 120px !important;
    }
    
    .tag-launch {
        font-size: 0.6rem !important;
        padding: 5px 10px !important;
    }
}

/* 8. CORRECTION DES GRIDS QUI DÉBORDENT */
@media (max-width: 600px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        max-width: 100%;
    }
}

/* 9. CORRECTION DES CARDS */
@media (max-width: 600px) {
    .card {
        padding: 20px !important;
        max-width: 100%;
    }
}

/* 10. CORRECTION DU PRICE-BOX */
@media (max-width: 600px) {
    .price-box {
        padding: 25px 15px !important;
        max-width: 100%;
    }
    
    .price-box h2 {
        font-size: 1.8rem !important;
    }
    
    .new-price {
        font-size: 2.5rem !important;
    }
    
    .old-price {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 400px) {
    .price-box {
        padding: 20px 12px !important;
    }
    
    .price-box h2 {
        font-size: 1.5rem !important;
    }
    
    .new-price {
        font-size: 2rem !important;
    }
}

/* 11. CORRECTION DES BOUTONS */
@media (max-width: 600px) {
    .btn-sign {
        font-size: 0.95rem !important;
        padding: 16px 30px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        max-width: 100%;
    }
}

@media (max-width: 400px) {
    .btn-sign {
        font-size: 0.85rem !important;
        padding: 14px 25px !important;
    }
}

/* 12. CORRECTION DE LA COMPARISON TABLE */
@media (max-width: 600px) {
    .comparison-table {
        font-size: 0.75rem !important;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 12px 8px !important;
        white-space: nowrap;
    }
}

/* 13. CORRECTION DES STAT-BOX */
@media (max-width: 600px) {
    .stat-box {
        padding: 20px 15px !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
    }
    
    .stat-label {
        font-size: 0.85rem !important;
    }
}

/* 14. CORRECTION DU CAROUSEL */
@media (max-width: 600px) {
    .carousel-wrapper {
        padding: 20px 0 !important;
        margin: 0 -15px !important;
    }
    
    .carousel-track {
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    .carousel-item {
        flex: 0 0 280px !important;
    }
    
    .carousel-nav {
        width: 35px !important;
        height: 35px !important;
        font-size: 1.1rem !important;
    }
    
    .carousel-prev {
        left: 5px !important;
    }
    
    .carousel-next {
        right: 5px !important;
    }
}

@media (max-width: 400px) {
    .carousel-item {
        flex: 0 0 260px !important;
    }
    
    .carousel-nav {
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
    }
}

/* 15. CORRECTION DES PHONE MOCKUPS */
@media (max-width: 600px) {
    .phone-mockup {
        width: 220px !important;
        height: 440px !important;
        border: 8px solid #1a1a1a !important;
    }
    
    .splash-logo-area {
        width: 90px !important;
        height: 90px !important;
        font-size: 0.9rem !important;
    }
    
    .splash-logo-area::after {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 400px) {
    .phone-mockup {
        width: 200px !important;
        height: 400px !important;
        border: 6px solid #1a1a1a !important;
    }
    
    .splash-logo-area {
        width: 80px !important;
        height: 80px !important;
        font-size: 0.8rem !important;
    }
}

/* 16. CORRECTION DU FORMULAIRE */
@media (max-width: 600px) {
    #sponsorContactForm input,
    #sponsorContactForm textarea,
    #sponsorContactForm select {
        font-size: 0.95rem !important;
        padding: 12px !important;
    }
    
    #sponsorContactForm > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* 17. CORRECTION DES IMAGES */
@media (max-width: 600px) {
    img {
        max-width: 100%;
        height: auto;
    }
}

/* 18. CORRECTION DE L'URGENCY BANNER */
@media (max-width: 600px) {
    .urgency-banner {
        font-size: 0.95rem !important;
        padding: 15px 12px !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 400px) {
    .urgency-banner {
        font-size: 0.85rem !important;
        padding: 12px 10px !important;
    }
}

/* 19. CORRECTION DU RIBBON */
@media (max-width: 600px) {
    .ribbon {
        font-size: 0.7rem !important;
        padding: 6px 40px !important;
        top: 20px !important;
        right: -35px !important;
    }
}

/* 20. CORRECTION DES DIVS AVEC STYLE INLINE */
@media (max-width: 600px) {
    div[style*="font-size: 4.5rem"],
    div[style*="font-size: 6rem"] {
        font-size: 2rem !important;
    }
    
    div[style*="font-size: 2.8rem"],
    div[style*="font-size: 3rem"] {
        font-size: 1.5rem !important;
    }
    
    div[style*="font-size: 2rem"] {
        font-size: 1.2rem !important;
    }
}

@media (max-width: 400px) {
    div[style*="font-size: 4.5rem"],
    div[style*="font-size: 6rem"] {
        font-size: 1.7rem !important;
    }
    
    div[style*="font-size: 2.8rem"],
    div[style*="font-size: 3rem"] {
        font-size: 1.3rem !important;
    }
}

/* 21. FIX POUR LES ÉLÉMENTS QUI CAUSENT LE SCROLL HORIZONTAL */
* {
    box-sizing: border-box !important;
}

.slide > * {
    max-width: 100%;
}

/* 22. CORRECTION SPÉCIFIQUE POUR LE HERO SECTION */
@media (max-width: 600px) {
    section[style*="min-height: 80vh"] h1 {
        font-size: 2rem !important;
        margin-bottom: 15px !important;
    }
    
    section[style*="min-height: 80vh"] p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

@media (max-width: 400px) {
    section[style*="min-height: 80vh"] h1 {
        font-size: 1.7rem !important;
    }
    
    section[style*="min-height: 80vh"] p {
        font-size: 0.9rem !important;
    }
}

/* 23. CORRECTION DES FLEX CONTAINERS */
@media (max-width: 600px) {
    div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
}

/* 24. GARANTIE BADGE RESPONSIVE */
@media (max-width: 600px) {
    .guarantee-badge {
        padding: 25px 20px !important;
    }
    
    .guarantee-badge h3 {
        font-size: 1.3rem !important;
    }
    
    .guarantee-badge p {
        font-size: 0.95rem !important;
    }
}

/* 25. TESTIMONIAL RESPONSIVE */
@media (max-width: 600px) {
    .testimonial {
        padding: 18px 15px !important;
        font-size: 0.95rem !important;
    }
}

/* ============================================
   FIX FINAL - FORCE LE CONTENU À RESTER DANS L'ÉCRAN
   ============================================ */
@media (max-width: 600px) {
    body, html, .slide, section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
    }
    
    /* Exception pour les éléments qui ont besoin de déborder (carousel) */
    .carousel-wrapper,
    .carousel-track {
        max-width: none !important;
    }
}