/**
 * Optimisations pour mobile et desktop
 * Améliore la stabilité et les performances sur tous les appareils
 * Certaines optimisations sont renforcées spécifiquement pour mobile
 */

/* Éviter les layout shifts */
* {
    box-sizing: border-box;
}

/* Optimisations de performance */
body {
    /* Éviter les reflows */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    
    /* Éviter le zoom sur focus (iOS) */
    touch-action: manipulation;
}

/* Images - dimensions fixes pour éviter CLS */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Lazy loading des images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Navigation sticky optimisée */
nav {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Éviter les reflows */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Conteneur principal avec hauteur minimale */
.main-content {
    /* Éviter les sauts de layout */
    min-height: calc(100vh - 200px);
    
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Optimisations pour les boutons et liens */
a, button {
    /* Éviter le highlight bleu sur tap (mobile) */
    -webkit-tap-highlight-color: transparent;
    
    /* Améliorer la réactivité */
    touch-action: manipulation;
}

/* Optimisations pour les formulaires */
input, textarea, select {
    /* Éviter le zoom sur focus (iOS) */
    font-size: 16px;
    
    /* Améliorer la réactivité */
    touch-action: manipulation;
}

/* Smooth scrolling optimisé */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Désactiver les animations pour les utilisateurs qui préfèrent */
@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;
    }
}

/* Optimisations pour les cartes et conteneurs */
.card, .rounded-xl, .rounded-2xl {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Préchargement des polices */
@font-face {
    font-family: 'Poppins';
    font-display: swap;
}

/* Optimisations pour les vidéos */
video {
    max-width: 100%;
    height: auto;
}

/* Éviter les layout shifts sur les iframes */
iframe {
    max-width: 100%;
    display: block;
}

/* Optimisations pour les tableaux */
table {
    width: 100%;
    table-layout: fixed;
}

/* Améliorer les performances de scroll */
.overflow-auto, .overflow-y-auto, .overflow-x-auto {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* Optimisations pour les modales */
.modal, [role="dialog"] {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
}

/* Indicateur de chargement AJAX */
#ajax-loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
}

#ajax-loading-indicator > div {
    height: 100%;
    background: linear-gradient(90deg, #1e40af 0%, #fbbf24 50%, #1e40af 100%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Optimisations pour les grilles */
.grid {
    /* Éviter les reflows */
    contain: layout;
}

/* Optimisations pour Flexbox */
.flex {
    /* Éviter les reflows */
    contain: layout;
}

/* Optimisations pour les listes */
ul, ol {
    /* Éviter les reflows */
    contain: layout;
}

/* Media queries pour mobile */
@media (max-width: 768px) {
    /* Réduire les animations sur mobile */
    * {
        transition-duration: 0.15s !important;
    }
    
    /* Optimiser les espacements */
    .space-y-6 > * + * {
        margin-top: 1rem;
    }
    
    /* Optimiser les paddings */
    .p-8 {
        padding: 1rem;
    }
    
    /* Optimiser les marges */
    .mb-8 {
        margin-bottom: 1.5rem;
    }
}

/* Optimisations pour les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    /* Augmenter les zones de tap */
    a, button {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}