/* 
 * AptoraAI Homepage - Professional Frontend Fixes
 * Design System Implementation
 */

/* ==========================================
   1. DESIGN TOKENS - Système de Design
   ========================================== */
:root {
    /* Espacement cohérent - Scale 8px */
    --spacing-1: 0.5rem;   /* 8px */
    --spacing-2: 1rem;     /* 16px */
    --spacing-3: 1.5rem;   /* 24px */
    --spacing-4: 2rem;     /* 32px */
    --spacing-5: 2.5rem;   /* 40px */
    --spacing-6: 3rem;     /* 48px */
    --spacing-8: 4rem;     /* 64px */
    --spacing-10: 5rem;    /* 80px */
    --spacing-12: 6rem;    /* 96px */
    
    /* Typographie cohérente */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Couleurs avec opacité réelle */
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* Blues */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;
    
    /* Purples */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-300: #d8b4fe;
    --purple-500: #a855f7;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --purple-800: #6b21a8;
    --purple-900: #581c87;
    
    /* Greens */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-300: #86efac;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    
    /* Oranges */
    --orange-50: #fff7ed;
    --orange-100: #ffedd5;
    --orange-200: #fed7aa;
    --orange-300: #fdba74;
    --orange-500: #f97316;
    --orange-600: #ea580c;
    --orange-700: #c2410c;
    
    /* Reds */
    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-300: #fca5a5;
    --red-500: #ef4444;
    --red-600: #dc2626;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --red-900: #7f1d1d;
    
    /* Grays */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
}

/* ==========================================
   2. SECTION SPACING - Espacement uniforme
   ========================================== */
.section-spacing {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

.section-spacing-lg {
    padding-top: var(--spacing-10);
    padding-bottom: var(--spacing-10);
}

.section-spacing-sm {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

/* ==========================================
   3. CARD SYSTEM - Système de cartes cohérent
   ========================================== */
.card-feature {
    background: var(--color-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-4);
    box-shadow: var(--shadow-lg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.card-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2xl);
}

/* Cartes colorées avec backgrounds opaques */
.card-blue {
    background: linear-gradient(135deg, var(--blue-100), var(--blue-200));
    border-color: var(--blue-500);
}

.card-purple {
    background: linear-gradient(135deg, var(--purple-100), var(--purple-200));
    border-color: var(--purple-500);
}

.card-green {
    background: linear-gradient(135deg, var(--green-100), var(--green-200));
    border-color: var(--green-500);
}

.card-orange {
    background: linear-gradient(135deg, var(--orange-100), var(--orange-200));
    border-color: var(--orange-500);
}

.card-red {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.4), rgba(153, 27, 27, 0.3));
    border-color: var(--red-500);
    backdrop-filter: blur(10px);
}

/* ==========================================
   4. ICON CONTAINERS - Conteneurs d'icônes
   ========================================== */
.icon-container {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-3);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease;
}

.icon-container:hover {
    transform: scale(1.1);
}

.icon-container i {
    font-size: var(--font-size-2xl);
    color: var(--color-white);
}

.icon-container-blue {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
}

.icon-container-purple {
    background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
}

.icon-container-green {
    background: linear-gradient(135deg, var(--green-600), var(--green-700));
}

.icon-container-orange {
    background: linear-gradient(135deg, var(--orange-600), var(--orange-700));
}

.icon-container-red {
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
}

/* ==========================================
   5. TYPOGRAPHY - Hiérarchie cohérente
   ========================================== */
.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-4);
    color: var(--gray-900);
}

@media (min-width: 768px) {
    .section-title {
        font-size: var(--font-size-5xl);
    }
}

.section-subtitle {
    font-size: var(--font-size-lg);
    line-height: 1.7;
    color: var(--gray-600);
    max-width: 65ch;
    margin: 0 auto var(--spacing-6);
}

.card-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: var(--spacing-2);
    color: var(--gray-900);
}

.card-text {
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--gray-700);
}

/* ==========================================
   6. BADGES - Badges cohérents
   ========================================== */
.badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.badge-blue {
    background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
    color: var(--color-white);
}

.badge-purple {
    background: linear-gradient(135deg, var(--purple-600), var(--purple-700));
    color: var(--color-white);
}

.badge-green {
    background: linear-gradient(135deg, var(--green-600), var(--green-700));
    color: var(--color-white);
}

.badge-orange {
    background: linear-gradient(135deg, var(--orange-600), var(--orange-700));
    color: var(--color-white);
}

/* ==========================================
   7. GRID SYSTEM - Grilles cohérentes
   ========================================== */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-5);
    }
}

@media (min-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-6);
    }
}

/* ==========================================
   8. CONTAINER WIDTHS - Largeurs cohérentes
   ========================================== */
.container-narrow {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--spacing-2);
}

.container-medium {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 var(--spacing-2);
}

.container-wide {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 var(--spacing-2);
}

/* ==========================================
   9. COMPARISON CARDS - Cartes de comparaison
   ========================================== */
.comparison-card {
    width: 100%;
    height: 12rem;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-card-traditional {
    background: linear-gradient(135deg, var(--red-200), var(--orange-300));
}

.comparison-card-aptoraai {
    background: linear-gradient(135deg, var(--blue-200), var(--blue-300));
}

.comparison-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-1);
}

/* ==========================================
   10. ACCESSIBILITY - Contrastes WCAG AA
   ========================================== */
.text-on-light {
    color: var(--gray-800);
}

.text-on-dark {
    color: var(--color-white);
}

.text-muted-light {
    color: var(--gray-600);
}

.text-muted-dark {
    color: rgba(255, 255, 255, 0.8);
}

/* ==========================================
   11. RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .section-spacing {
        padding-top: var(--spacing-6);
        padding-bottom: var(--spacing-6);
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .card-feature {
        padding: var(--spacing-3);
    }
    
    .icon-container {
        width: 3.5rem;
        height: 3.5rem;
    }
}

@media (max-width: 480px) {
    .section-spacing {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-4);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .card-feature {
        padding: var(--spacing-2);
    }
}

/* ==========================================
   12. SPECIFIC FIXES - Corrections spécifiques
   ========================================== */

/* Section "Pourquoi AptoraAI" */
#section-pourquoi-aptoraai {
    margin-bottom: var(--spacing-8);
}

/* Section "Les bénéfices" */
#section-benefices {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

/* Section "Sans AptoraAI" */
#section-sans-aptoraai {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

/* Correction des gaps de grilles */
.grid-gap-consistent {
    gap: var(--spacing-4);
}

@media (min-width: 768px) {
    .grid-gap-consistent {
        gap: var(--spacing-5);
    }
}

/* Uniformisation des paddings de cartes */
.card-padding-consistent {
    padding: var(--spacing-4);
}

/* ==========================================
   13. UTILITY CLASSES
   ========================================== */
.mb-section {
    margin-bottom: var(--spacing-8);
}

.mb-content {
    margin-bottom: var(--spacing-4);
}

.mb-small {
    margin-bottom: var(--spacing-2);
}

.text-center {
    text-align: center;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   14. ANIMATIONS CONSOLIDÉES - Éviter les conflits
   ========================================== */

/* Désactiver toutes les animations par défaut sur mobile pour performance */
@media (max-width: 768px) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
        scroll-behavior: auto !important;
    }
    
    /* Réduire les animations complexes sur mobile */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Désactiver les animations Tailwind sur mobile */
    .animate-pulse,
    .animate-bounce,
    .animate-ping {
        animation: none !important;
    }
    
    /* Réduire les animations inline */
    [style*="animation:"] {
        animation-duration: 0.3s !important;
        animation-iteration-count: 1 !important;
    }
}

/* Animations consolidées pour desktop uniquement */
@media (min-width: 769px) {
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes fadeInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-30px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes countUp {
        from {
            opacity: 0;
            transform: scale(0.5);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }
}

/* ==========================================
   15. CORRECTIONS SECTION RÉSEAUX SOCIAUX MOBILE
   ========================================== */

/* Sur mobile, cacher ou repositionner la section réseaux sociaux fixe */
@media (max-width: 768px) {
    /* Section réseaux sociaux fixe - repositionner en bas */
    section[style*="position: fixed"][style*="right: 20px"] {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important;
        right: 10px !important;
        left: auto !important;
        transform: none !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        z-index: 999 !important;
        max-width: calc(100vw - 20px) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    section[style*="position: fixed"][style*="right: 20px"]::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Réduire la taille des boutons réseaux sociaux sur mobile */
    section[style*="position: fixed"] a {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        flex-shrink: 0 !important;
    }
    
    /* Désactiver les animations complexes sur mobile */
    section[style*="position: fixed"] a[style*="animation:"] {
        animation: none !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Effet hover simplifié sur mobile */
    section[style*="position: fixed"] a:active {
        transform: scale(0.95) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }
}

/* Sur très petits écrans, masquer complètement ou réduire encore */
@media (max-width: 480px) {
    section[style*="position: fixed"][style*="right: 20px"] {
        bottom: 10px !important;
        right: 5px !important;
        gap: 0.375rem !important;
    }
    
    section[style*="position: fixed"] a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
}

/* ==========================================
   16. CORRECTIONS GRID LAYOUT MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Forcer toutes les grilles en colonne unique sur mobile */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Section hero avec grille 2 colonnes -> 1 colonne - cibler spécifiquement */
    div[style*="display: grid"][style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(2"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        grid-template-columns: none !important;
    }
    
    /* Grilles avec 3 colonnes -> 1 colonne */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Grilles avec 4 colonnes -> 2 colonnes max sur mobile */
    [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* Grilles auto-fit responsive */
    [style*="grid-template-columns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Espacement réduit dans les grilles */
    .grid,
    [style*="display: grid"] {
        gap: 1rem !important;
    }
    
    /* Grilles Tailwind dans sections */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    
    /* Grilles avec classes responsive Tailwind */
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================
   17. CORRECTIONS ANIMATIONS INLINE
   ========================================== */

/* Réduire les animations inline sur mobile */
@media (max-width: 768px) {
    /* Désactiver les animations fadeInUp multiples */
    [style*="animation: fadeInUp"] {
        animation: fadeInUp 0.3s ease-out !important;
        animation-delay: 0s !important;
    }
    
    /* Simplifier les animations avec délai */
    [style*="animation-delay"] {
        animation-delay: 0s !important;
    }
    
    /* Réduire les animations de background */
    [style*="animation: pulse"] {
        animation: none !important;
        opacity: 0.7 !important;
    }
}

/* ==========================================
   18. CORRECTIONS ELEMENTS HERO MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Section hero avec min-height réduit */
    section[style*="min-height: 100vh"] {
        min-height: auto !important;
        padding: 2rem 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Forcer la grille hero en colonne unique sur mobile */
    section[style*="min-height: 100vh"] > div > div[style*="grid-template-columns: repeat(2"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        grid-template-columns: none !important;
    }
    
    /* Titres hero réduits - cibler styles inline */
    section[style*="min-height: 100vh"] h1[style*="font-size: 3rem"],
    section[style*="min-height: 100vh"] h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    
    section[style*="min-height: 100vh"] h2[style*="font-size: 2.25rem"],
    section[style*="min-height: 100vh"] h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.75rem !important;
        text-align: center !important;
    }
    
    section[style*="min-height: 100vh"] p[style*="font-size: 1.125rem"],
    section[style*="min-height: 100vh"] p {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        max-width: 100% !important;
    }
    
    /* Logo Meta responsive */
    section[style*="min-height: 100vh"] img[style*="width: 200px"],
    section[style*="min-height: 100vh"] .meta-partner-logo-hero {
        width: 150px !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto 1rem auto !important;
    }
    
    /* Boutons hero en colonne - cibler le div avec flex-direction */
    section[style*="min-height: 100vh"] [style*="display: flex"][style*="flex-direction: column"],
    section[style*="min-height: 100vh"] .space-x-4,
    section[style*="min-height: 100vh"] [style*="display: flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
    
    /* Boutons hero pleine largeur - cibler tous les styles inline */
    section[style*="min-height: 100vh"] a[style*="background: #2563eb"],
    section[style*="min-height: 100vh"] a[style*="background: #7c3aed"],
    section[style*="min-height: 100vh"] a[style*="background: #f1f5f9"],
    section[style*="min-height: 100vh"] a[style*="display: inline-flex"] {
        width: 100% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.875rem !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        margin: 0 !important;
    }
    
    /* Background animé réduit ou masqué */
    section[style*="min-height: 100vh"] .absolute.inset-0 {
        display: none !important;
    }
    
    /* Statistiques en grille réduite - cibler le style inline */
    section[style*="min-height: 100vh"] [style*="grid-template-columns: repeat(3, 1fr)"],
    section[style*="min-height: 100vh"] [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        display: grid !important;
    }
    
    /* Cards de statistiques */
    section[style*="min-height: 100vh"] [style*="text-align: center"][style*="background: #eff6ff"],
    section[style*="min-height: 100vh"] [style*="text-align: center"][style*="background: #f0fdf4"],
    section[style*="min-height: 100vh"] [style*="text-align: center"][style*="background: #faf5ff"] {
        padding: 0.75rem !important;
        margin: 0 !important;
    }
    
    /* Interface simulée - masquer ou réduire sur mobile */
    section[style*="min-height: 100vh"] [style*="position: relative"][style*="animation: fadeInRight"] {
        order: -1 !important;
        margin-bottom: 2rem !important;
    }
    
    section[style*="min-height: 100vh"] [style*="background: white"][style*="border-radius: 1rem"] {
        padding: 1rem !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Container max-width responsive */
    section[style*="min-height: 100vh"] [style*="max-width: 1200px"] {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ==========================================
   19. CORRECTIONS CONTAINERS MOBILE
   ========================================== */

@media (max-width: 768px) {
    /* Containers avec padding réduit - cibler tous les styles inline */
    [style*="max-width: 1200px"],
    [style*="max-width: 1200px"] *,
    div[style*="max-width: 1200px"] {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Images responsive - toutes les images */
    img {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Images avec largeur fixe inline */
    img[style*="width: 200px"],
    img[style*="width: 300px"],
    img[style*="width: 400px"] {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* Prévention overflow - global */
    body,
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }
    
    /* Sections avec overflow hidden */
    section {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Force box-sizing - global */
    *,
    *::before,
    *::after {
        box-sizing: border-box !important;
    }
    
    /* Prévention débordement horizontal */
    .container,
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ==========================================
   20. PERFORMANCE MOBILE - Réduction des effets
   ========================================== */

@media (max-width: 768px) {
    /* Désactiver backdrop-filter sur mobile (performance) */
    [style*="backdrop-filter"],
    .backdrop-filter {
        backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Réduire les box-shadows complexes */
    [style*="box-shadow: 0 25px"] {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Simplifier les transitions */
    * {
        transition-duration: 0.2s !important;
        transition-timing-function: ease !important;
    }
    
    /* Désactiver les hover effects complexes sur mobile */
    @media (hover: none) {
        *:hover {
            transform: none !important;
        }
    }
}

/* ==========================================
   21. ÉCRANS TRÈS PETITS (≤480px) - Optimisations supplémentaires
   ========================================== */

@media (max-width: 480px) {
    /* Hero section - encore plus compact */
    section[style*="min-height: 100vh"] {
        padding: 1.5rem 0 !important;
    }
    
    section[style*="min-height: 100vh"] h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    section[style*="min-height: 100vh"] h2 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    section[style*="min-height: 100vh"] p {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Logo Meta encore plus petit */
    section[style*="min-height: 100vh"] img[style*="width: 200px"],
    section[style*="min-height: 100vh"] .meta-partner-logo-hero {
        width: 120px !important;
    }
    
    /* Boutons encore plus compacts */
    section[style*="min-height: 100vh"] a[style*="display: inline-flex"] {
        padding: 0.75rem 1rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Statistiques - grille encore plus serrée */
    section[style*="min-height: 100vh"] [style*="grid-template-columns: repeat(3"] {
        gap: 0.5rem !important;
    }
    
    /* Réseaux sociaux encore plus petits sur très petits écrans */
    section[style*="position: fixed"][style*="right: 20px"] a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    /* Containers padding réduit */
    [style*="max-width: 1200px"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Sections avec padding minimal */
    section {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ==========================================
   22. ACCESSIBILITÉ - Respect prefers-reduced-motion
   ========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   23. GARANTIE RESPONSIVE - Règles de sécurité finales
   ========================================== */

/* Assurer que rien ne dépasse sur mobile */
@media (max-width: 768px) {
    /* Tous les éléments avec largeur fixe */
    [style*="width: 200px"],
    [style*="width: 300px"],
    [style*="width: 400px"],
    [style*="width: 500px"],
    [style*="width: 600px"] {
        max-width: 100% !important;
        width: auto !important;
    }
    
    /* Tous les éléments avec min-width problématique */
    [style*="min-width: 200px"],
    [style*="min-width: 300px"] {
        min-width: auto !important;
    }
    
    /* Prévention scroll horizontal */
    * {
        max-width: 100vw !important;
    }
    
    /* Flex items qui pourraient déborder */
    [style*="display: flex"] {
        flex-wrap: wrap !important;
    }
    
    /* Textes qui pourraient déborder */
    * {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}