/* ============================================
   OPTIMISATIONS CRITIQUES MOBILE - À PROPOS
   Correction NO_FCP et performances
   ============================================ */

/* ============================================
   RÉDUCTION CLS - RÉSERVATION ESPACE
   ============================================ */

/* Assurer que le contenu est visible immédiatement (anti NO_FCP) */
body {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Réserver l'espace pour main dès le chargement */
main {
    min-height: 100vh;
    contain: layout style;
}

/* Réserver espace pour le breadcrumb */
.breadcrumb {
    min-height: 2rem;
    display: block;
}

/* Réserver espace pour les titres */
.page-title,
h1 {
    min-height: 3rem;
    contain: layout;
}

/* Optimisation polices - éviter reflow */
body {
    font-family: 'Montserrat', Arial, Helvetica, system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* ============================================
   ANIMATIONS COMPOSÉES UNIQUEMENT
   ============================================ */

/* Force les animations GPU sur mobile */
@media (max-width: 768px) {
    
    /* Surcharge globale pour animations composées */
    .atout-item,
    .timeline-item,
    .value-card,
    .team-card,
    .section-encadré {
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
    
    /* Will-change optimisé */
    .atout-item:hover,
    .timeline-item:hover,
    .value-card:hover,
    .team-card:hover {
        will-change: transform;
    }
    
    /* Réinitialiser will-change après animation */
    .atout-item,
    .timeline-item,
    .value-card,
    .team-card {
        will-change: auto;
    }
    
    /* Forcer le compositing GPU pour les éléments critiques */
    header,
    main,
    .section-encadré,
    .atout-item {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* Autoriser uniquement les animations sur propriétés composées */
    @media (prefers-reduced-motion: no-preference) {
        .atout-item:hover {
            transform: translateY(-2px) translateZ(0);
        }
    }
}

/* ============================================
   OPTIMISATIONS BAS DE GAMME
   ============================================ */

/* Optimisation pour appareils bas de gamme */
@media (max-width: 480px) and (max-resolution: 1.5dppx) {
    
    /* Réduire la durée des transitions */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Désactiver certaines animations complexes */
    .atout-item:hover {
        transform: none !important;
    }
}

/* ============================================
   MODE ÉCONOMIE D'ÉNERGIE
   ============================================ */

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

/* ============================================
   OPTIMISATION CONTENEUR
   ============================================ */

/* Containment pour limiter les reflows */
.section-encadré {
    contain: layout style paint;
}

.atouts-container {
    contain: layout;
}

/* ============================================
   PRÉCHARGEMENT VISUEL
   ============================================ */

/* Skeleton screen pour chargement progressif */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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