/* ===========================================
   OPTIMISATIONS PERFORMANCE MOBILE
   =========================================== */

/* Media query pour téléphones (couvre 95%+ des appareils) */
@media (max-width: 576px) {
  
  /* 1. DÉSACTIVER LES TRANSITIONS GOURMANDES */
  
  /* Désactiver les transitions sur les transformations */
  .portfolio-wrap,
  .service-projet,
  .service-ponctuel,
  .btn-get-started,
  .icon-box {
    transition: none !important;
    transform: none !important;
  }
  
  /* Garder seulement les transitions essentielles (opacity, color) */
  .nav-link,
  .btn,
  a {
    transition: color 0.2s ease, background-color 0.2s ease !important;
  }
  
  /* 2. SIMPLIFIER LES ANIMATIONS */
  
  /* Désactiver les animations CSS coûteuses */
  [data-aos],
  .animate__animated {
    animation: none !important;
    transition: none !important;
  }
  
  /* Remplacer les animations up-down par de simples transitions */
  .service-ponctuel img {
    animation: none !important;
  }
  
  /* 3. OPTIMISER LES HOVER EFFECTS */
  
  /* Désactiver les hover effects sur mobile (touch devices) */
  @media (hover: none) {
    .portfolio-wrap:hover,
    .icon-box:hover,
    .btn:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }
  
  /* 4. OPTIMISER LES IMAGES */
  
  /* Forcer hardware acceleration pour les images importantes */
  .portfolio-wrap img,
  .icon-box img,
  .hero img {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
  }
  
  /* 5. RÉDUIRE LA COMPLEXITÉ VISUELLE */
  
  /* Simplifier les box-shadows sur mobile */
  .portfolio-wrap,
  .icon-box,
  .card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  /* 6. OPTIMISER LES POLICES */
  
  /* Utiliser font-display: swap pour un chargement plus rapide */
  @font-face {
    font-display: swap;
  }
  
  /* 7. PRÉFÉRENCES UTILISATEUR */
  
  /* Respecter les préférences de mouvement réduit */
  @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 GÉNÉRALES MOBILE
   =========================================== */

@media (max-width: 768px) {
  
  /* Optimiser le rendu des flexbox */
  .d-flex {
    will-change: auto;
  }
  
  /* Optimiser les grids Bootstrap */
  .row {
    margin: 0;
  }
  
  .col-lg-4,
  .col-md-6,
  .col-sm-6 {
    padding: 0.5rem;
  }
  
  /* Réduire la complexité des bordures */
  .section-title::after,
  .section-title::before {
    display: none;
  }
}

/* ===========================================
   CRITICAL LOADING OPTIMIZATIONS
   =========================================== */

/* Images lazy loading optimization */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s;
}

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

/* Optimiser le scroll */
html {
  scroll-behavior: auto;
}

@media (max-width: 576px) {
  html {
    scroll-behavior: auto !important;
  }
}

/* ===========================================
   PERFORMANCE HINTS
   =========================================== */

/* Indiquer au navigateur les éléments qui vont changer */
.back-to-top,
.mobile-nav-toggle,
#numero {
  will-change: transform;
}

/* Pour les éléments statiques */
.portfolio-item,
.service-projet {
  will-change: auto;
}