/*
 * CORRECTIONS MOBILES DRASTIQUES POUR PAGE D'ACCUEIL
 * ====================================================
 * Réduction maximale des éléments pour adaptation mobile complète
 * Appliqué spécifiquement à la page d'accueil AptoraAI
 */

/* ==========================================
   1. RESET MOBILE GLOBAL - Prévention débordement
   ========================================== */
@media (max-width: 768px) {
    /* Reset général pour éviter tout débordement */
    html, body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Box-sizing universel */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* ==========================================
       2. SECTION HERO - Réduction drastique
       ========================================== */
    
    /* Hero section - Réduction hauteur et padding */
    section[style*="min-height: 100vh"],
    .hero-section,
    section:first-of-type {
        min-height: auto !important;
        height: auto !important;
        padding: 1rem 0.5rem !important;
        margin: 0 !important;
    }

    /* Titres Hero - Réduction taille 50% */
    section:first-of-type h1,
    .hero-section h1,
    h1:first-child {
        font-size: 1.25rem !important; /* ~20px au lieu de 48px */
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }

    section:first-of-type h2,
    .hero-section h2 {
        font-size: 1.125rem !important; /* ~18px au lieu de 36px */
        line-height: 1.35 !important;
        margin-bottom: 0.5rem !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }

    /* Paragraphes Hero - Réduction */
    section:first-of-type p,
    .hero-section p {
        font-size: 0.8125rem !important; /* ~13px au lieu de 18px */
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        padding: 0 0.5rem !important;
        text-align: center !important;
    }

    /* ==========================================
       3. TITRES GLOBAUX - Réduction 40-50%
       ========================================== */
    
    h1, .text-5xl, .text-6xl {
        font-size: 1.25rem !important; /* ~20px */
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
    }

    h2, .text-4xl {
        font-size: 1.125rem !important; /* ~18px */
        line-height: 1.35 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }

    h3, .text-3xl {
        font-size: 1rem !important; /* ~16px */
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 600 !important;
    }

    h4, .text-2xl {
        font-size: 0.9375rem !important; /* ~15px */
        line-height: 1.4 !important;
        margin-bottom: 0.4rem !important;
    }

    h5, h6, .text-xl {
        font-size: 0.875rem !important; /* ~14px */
        line-height: 1.4 !important;
        margin-bottom: 0.4rem !important;
    }

    /* ==========================================
       4. TEXTES ET PARAGRAPHES - Réduction
       ========================================== */
    
    p, .text-base, .text-lg {
        font-size: 0.8125rem !important; /* ~13px */
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    .text-sm {
        font-size: 0.75rem !important; /* ~12px */
        line-height: 1.3 !important;
    }

    .text-xs {
        font-size: 0.6875rem !important; /* ~11px */
        line-height: 1.3 !important;
    }

    /* ==========================================
       5. CARTES - Réduction padding et marges
       ========================================== */
    
    .card,
    .card-hover,
    .card-feature,
    .card-container,
    div[class*="card"],
    [class*="rounded"] {
        padding: 0.625rem !important; /* ~10px au lieu de 24-32px */
        margin-bottom: 0.625rem !important;
        border-radius: 0.5rem !important;
    }

    /* Cartes avec background */
    .bg-white,
    .bg-blue-50,
    .bg-purple-50,
    .bg-green-50,
    .bg-gray-50 {
        padding: 0.625rem !important;
        margin: 0.5rem 0 !important;
    }

    /* ==========================================
       6. ICÔNES - Réduction drastique 60%
       ========================================== */
    
    /* Conteneurs d'icônes */
    .icon-container,
    .w-12, .h-12,
    .w-16, .h-16,
    .w-20, .h-20,
    .w-24, .h-24,
    [class*="w-"][class*="h-"] {
        width: 1.75rem !important; /* ~28px au lieu de 64-96px */
        height: 1.75rem !important;
        min-width: 1.75rem !important;
        min-height: 1.75rem !important;
        padding: 0.25rem !important;
    }

    /* Icônes Font Awesome */
    i, .fa, .fas, .far, .fal, .fad, .fab {
        font-size: 0.9375rem !important; /* ~15px au lieu de 32-48px */
        width: auto !important;
        height: auto !important;
    }

    /* Icônes dans cartes/sections */
    .card i,
    .card-hover i,
    div[class*="card"] i,
    section i {
        font-size: 0.875rem !important; /* ~14px */
    }

    /* ==========================================
       7. IMAGES - Réduction hauteur max
       ========================================== */
    
    img {
        max-width: 100% !important;
        height: auto !important;
        max-height: 100px !important; /* Hauteur max 100px au lieu de 200-400px */
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto 0.5rem auto !important;
    }

    /* Images dans hero section */
    section:first-of-type img,
    .hero-section img {
        max-height: 80px !important;
        max-width: 140px !important;
        margin: 0 auto 0.5rem auto !important;
    }

    /* Logo Meta Business Partner */
    .meta-partner-logo-hero,
    img[alt*="Meta"],
    img[src*="meta"] {
        width: 100px !important;
        max-width: 100px !important;
        height: auto !important;
        margin: 0 auto 0.5rem auto !important;
    }

    /* Images dans cartes */
    .card img,
    .card-hover img {
        max-height: 70px !important;
    }

    /* ==========================================
       8. BOUTONS - Réduction taille
       ========================================== */
    
    button,
    .btn,
    a[class*="btn"],
    input[type="submit"],
    input[type="button"],
    [role="button"] {
        padding: 0.5rem 0.875rem !important; /* ~8px 14px */
        font-size: 0.8125rem !important; /* ~13px */
        min-height: 36px !important; /* Au lieu de 44px */
        border-radius: 0.375rem !important;
        margin: 0.25rem 0 !important;
        width: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Boutons Hero en pleine largeur */
    section:first-of-type button,
    section:first-of-type a[class*="btn"],
    .hero-section button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.375rem 0 !important;
    }

    /* Groupe de boutons */
    .flex.gap-4 button,
    .space-x-4 button,
    div[style*="display: flex"] button {
        flex: 1 !important;
        min-width: 0 !important;
    }

    /* ==========================================
       9. ESPACEMENTS - Réduction 60-70%
       ========================================== */
    
    /* Sections - padding réduit */
    section {
        padding: 1rem 0.5rem !important;
        margin: 0.5rem 0 !important;
    }

    /* Containers */
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    [style*="max-width: 1200px"] {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Padding classes Tailwind */
    .p-4, .p-6, .p-8, .p-10, .p-12 {
        padding: 0.625rem !important; /* ~10px */
    }

    .px-4, .px-6, .px-8, .px-10, .px-12 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .py-4, .py-6, .py-8, .py-10, .py-12, .py-16, .py-20 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    /* Margin classes Tailwind */
    .m-4, .m-6, .m-8, .m-10, .m-12 {
        margin: 0.5rem !important;
    }

    .mb-4, .mb-6, .mb-8, .mb-10, .mb-12 {
        margin-bottom: 0.5rem !important;
    }

    .mt-4, .mt-6, .mt-8, .mt-10, .mt-12 {
        margin-top: 0.5rem !important;
    }

    /* Gap pour grilles */
    .gap-4, .gap-6, .gap-8, .gap-10, .gap-12 {
        gap: 0.5rem !important;
    }

    .space-y-4 > * + *,
    .space-y-6 > * + *,
    .space-y-8 > * + * {
        margin-top: 0.5rem !important;
    }

    /* ==========================================
       10. GRILLES - Force colonne unique
       ========================================== */
    
    .grid,
    [style*="display: grid"],
    [style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        grid-template-columns: none !important;
    }

    /* Grilles Tailwind */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* Grilles inline styles */
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: 1fr !important;
    }

    /* ==========================================
       11. FLEX - Force colonne
       ========================================== */
    
    .flex,
    [style*="display: flex"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: stretch !important;
    }

    /* Sauf pour navigation */
    nav .flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    /* ==========================================
       12. NAVIGATION - Optimisation mobile
       ========================================== */
    
    nav {
        padding: 0.5rem !important;
        margin: 0 !important;
    }

    nav .logo,
    nav h1,
    nav .brand {
        font-size: 1rem !important;
        margin: 0 !important;
    }

    nav button,
    nav a {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.8125rem !important;
    }

    /* Menu mobile */
    .mobile-menu {
        width: 100% !important;
        padding: 0.5rem !important;
    }

    /* ==========================================
       13. STATISTIQUES - Réduction
       ========================================== */
    
    .stat-card,
    .stat-container,
    [class*="stat"] {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .stat-number,
    .counter {
        font-size: 1.25rem !important; /* ~20px */
        font-weight: 700 !important;
    }

    .stat-label {
        font-size: 0.75rem !important; /* ~12px */
    }

    /* ==========================================
       14. BADGES - Réduction
       ========================================== */
    
    .badge,
    .tag,
    [class*="badge"],
    span[class*="px-"][class*="py-"] {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important; /* ~11px */
        border-radius: 0.25rem !important;
    }

    /* ==========================================
       15. FOOTER - Réduction
       ========================================== */
    
    footer {
        padding: 1rem 0.5rem !important;
        margin-top: 1rem !important;
    }

    footer h3,
    footer h4 {
        font-size: 0.875rem !important;
        margin-bottom: 0.375rem !important;
    }

    footer p,
    footer a,
    footer li {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }

    /* Logo footer */
    footer img {
        max-width: 80px !important;
        max-height: 40px !important;
    }

    /* ==========================================
       16. ÉLÉMENTS FIXES - Repositionnement mobile
       ========================================== */
    
    /* Réseaux sociaux fixes */
    section[style*="position: fixed"][style*="right"],
    .social-fixed {
        position: fixed !important;
        bottom: 10px !important;
        right: 10px !important;
        top: auto !important;
        left: auto !important;
        flex-direction: row !important;
        gap: 0.375rem !important;
        z-index: 1000 !important;
        max-width: calc(100vw - 20px) !important;
    }

    /* Boutons réseaux sociaux réduits */
    section[style*="position: fixed"] a,
    .social-fixed a {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        font-size: 13px !important;
        padding: 0.25rem !important;
    }

    /* ==========================================
       17. ANIMATIONS - Désactivation pour performance
       ========================================== */
    
    *,
    *::before,
    *::after {
        animation-duration: 0.1s !important;
        animation-delay: 0s !important;
        transition-duration: 0.15s !important;
    }

    [style*="animation:"] {
        animation: none !important;
    }

    .animate-pulse,
    .animate-bounce,
    .animate-ping {
        animation: none !important;
    }

    /* ==========================================
       18. FORMULAIRES - Optimisation
       ========================================== */
    
    input,
    select,
    textarea {
        width: 100% !important;
        padding: 0.5rem !important;
        font-size: 0.875rem !important; /* 14px pour éviter zoom iOS */
        margin-bottom: 0.5rem !important;
        border-radius: 0.375rem !important;
    }

    label {
        font-size: 0.8125rem !important;
        margin-bottom: 0.25rem !important;
        display: block !important;
    }

    /* ==========================================
       19. MODALES - Plein écran mobile
       ========================================== */
    
    .modal,
    .modal-dialog {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        max-width: 100% !important;
    }

    .modal-content {
        padding: 1rem !important;
        border-radius: 0 !important;
    }

    /* ==========================================
       20. TABLEAUX - Scroll horizontal
       ========================================== */
    
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 0.75rem !important;
    }

    th, td {
        padding: 0.375rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* ==========================================
       21. VIDÉOS ET IFRAMES - Responsive
       ========================================== */
    
    video,
    iframe {
        max-width: 100% !important;
        max-height: 180px !important;
        height: auto !important;
    }

    /* ==========================================
       22. PRÉVENTION DÉBORDEMENT HORIZONTAL
       ========================================== */
    
    /* Force tous les éléments à rester dans viewport */
    * {
        max-width: 100vw !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }

    /* Éléments avec largeur fixe inline */
    [style*="width: 200px"],
    [style*="width: 300px"],
    [style*="width: 400px"],
    [style*="width: 500px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ==========================================
       23. PERFORMANCE - Simplification effets
       ========================================== */
    
    /* Désactiver backdrop-filter */
    [style*="backdrop-filter"],
    .backdrop-filter {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Simplifier shadows */
    [style*="box-shadow"] {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* ==========================================
       24. BACKGROUNDS - Simplification
       ========================================== */
    
    /* Backgrounds animés - masquer sur mobile */
    .absolute.inset-0,
    [class*="absolute"][class*="inset"] {
        display: none !important;
    }
}

/* ==========================================
   25. ÉCRANS TRÈS PETITS (≤480px) - Réduction supplémentaire
   ========================================== */
@media (max-width: 480px) {
    /* Réduction encore plus drastique */
    h1 { font-size: 1.125rem !important; } /* ~18px */
    h2 { font-size: 1rem !important; } /* ~16px */
    h3 { font-size: 0.9375rem !important; } /* ~15px */
    p { font-size: 0.75rem !important; } /* ~12px */

    /* Cartes ultra-compactes */
    .card,
    .card-hover,
    .bg-white {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Icônes encore plus petites */
    .icon-container,
    .w-12, .w-16, .w-20, .w-24 {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    i, .fa, .fas {
        font-size: 0.8125rem !important;
    }

    /* Images ultra-compactes */
    img {
        max-height: 70px !important;
    }

    section:first-of-type img,
    .hero-section img {
        max-height: 60px !important;
        max-width: 100px !important;
    }

    /* Boutons compacts */
    button, .btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
        min-height: 32px !important;
    }

    /* Spacing minimal */
    section {
        padding: 0.75rem 0.375rem !important;
    }

    .container {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
    }

    /* Réseaux sociaux mini */
    section[style*="position: fixed"] a {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }
}

/* ==========================================
   26. GARANTIES FINALES - Sécurité overflow
   ========================================== */
@media (max-width: 768px) {
    /* Empêcher absolument tout débordement */
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }

    /* Tous les conteneurs */
    div, section, article, main, aside, header, footer, nav {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ==========================================
   27. ACCESSIBILITÉ - Respect prefers-reduced-motion
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}