/*
 * ============================================
 * FIXES SPÉCIFIQUES macOS (Safari + Chrome)
 * ============================================
 *
 * Problème : backdrop-filter cause du flickering massif
 * sur macOS avec écrans Retina (2x/3x pixels)
 *
 * Solution : Désactiver backdrop-filter sur macOS
 * et utiliser des backgrounds solides à la place
 * ============================================
 */

/*
 * Détection macOS via media queries
 * - Retina displays (min 2x)
 * - macOS utilise toujours Retina depuis 2012
 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  /* ========================================
   * FIX 1: DÉSACTIVATION BACKDROP-FILTER
   * ======================================== */

  /* Tous les backdrop-blur */
  .backdrop-blur-sm,
  .backdrop-blur,
  .backdrop-blur-md,
  .backdrop-blur-lg,
  .backdrop-blur-xl,
  .backdrop-blur-2xl,
  .backdrop-blur-3xl,
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Remplacements par backgrounds solides optimisés */
  .backdrop-blur-sm {
    background-color: rgba(255, 255, 255, 0.98) !important;
  }

  .backdrop-blur,
  .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.97) !important;
  }

  .backdrop-blur-lg,
  .backdrop-blur-xl {
    background-color: rgba(255, 255, 255, 0.96) !important;
  }

  /* Backgrounds colorés avec backdrop */
  .bg-white\/90.backdrop-blur-sm,
  .bg-white\/90.backdrop-blur-xl {
    background-color: rgba(255, 255, 255, 0.98) !important;
  }

  .bg-white\/95.backdrop-blur-sm {
    background-color: rgba(255, 255, 255, 0.99) !important;
  }

  .bg-white\/80.backdrop-blur-sm {
    background-color: rgba(255, 255, 255, 0.95) !important;
  }

  /* Backgrounds orange avec backdrop */
  .bg-orange-50\/80.backdrop-blur-sm {
    background-color: rgba(255, 247, 237, 0.95) !important;
  }

  /* Backgrounds colorés divers */
  .bg-blue-50\/80.backdrop-blur-sm {
    background-color: rgba(239, 246, 255, 0.95) !important;
  }

  .bg-green-50\/80.backdrop-blur-sm {
    background-color: rgba(240, 253, 244, 0.95) !important;
  }

  .bg-red-50\/80.backdrop-blur-sm {
    background-color: rgba(254, 242, 242, 0.95) !important;
  }

  .bg-purple-50\/80.backdrop-blur-sm {
    background-color: rgba(250, 245, 255, 0.95) !important;
  }

  /* ========================================
   * FIX 2: OPTIMISATION ANIMATIONS
   * ======================================== */

  /* Réduire la durée des animations pour réduire le flicker */
  .transition-all {
    transition-duration: 0.15s !important;
  }

  /* Forcer GPU acceleration sur les éléments animés */
  .hover\:scale-105:hover,
  .hover\:scale-\[1\.01\]:hover,
  .hover\:scale-\[1\.02\]:hover,
  [class*="hover:scale"]:hover {
    transform: translate3d(0, 0, 0) scale(var(--tw-scale-x, 1)) scale(var(--tw-scale-y, 1)) !important;
    -webkit-transform: translate3d(0, 0, 0) scale(var(--tw-scale-x, 1)) scale(var(--tw-scale-y, 1)) !important;
  }

  /* Optimiser will-change pour les éléments animés */
  .transition-all,
  .transition-transform,
  [class*="transition-"] {
    will-change: transform, opacity;
  }

  /* ========================================
   * FIX 3: OPTIMISATION SHADOWS
   * ======================================== */

  /* Les shadows avec backdrop-blur sont très lourds sur macOS */
  /* On réduit légèrement l'intensité */
  .shadow-xl {
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08) !important;
  }

  .shadow-2xl {
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1) !important;
  }

  /* ========================================
   * FIX 4: SMOOTH SCROLLING
   * ======================================== */

  /* Désactiver smooth scroll sur macOS (peut causer du lag) */
  html {
    scroll-behavior: auto !important;
  }

  /* Optimiser overflow scroll */
  .overflow-y-auto,
  .overflow-x-auto,
  .overflow-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
  }

  /* ========================================
   * FIX 5: FONT RENDERING
   * ======================================== */

  /* Améliorer le rendu des fonts sur macOS */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  /* ========================================
   * FIX 6: IMAGE OPTIMIZATION
   * ======================================== */

  /* Forcer GPU rendering pour les images */
  img {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
  }

  /* ========================================
   * FIX 7: BORDER RADIUS OPTIMIZATION
   * ======================================== */

  /* Les border-radius combinés à backdrop-filter sont lourds */
  /* Forcer isolation sur ces éléments */
  .rounded-2xl.backdrop-blur-sm,
  .rounded-3xl.backdrop-blur-xl,
  .rounded-xl.backdrop-blur {
    isolation: isolate;
  }
}

/*
 * ============================================
 * FIXES ADDITIONNELS TOUS NAVIGATEURS
 * ============================================
 */

/* Optimiser les animations globalement */
@media (prefers-reduced-motion: no-preference) {
  * {
    /* Empêcher les animations pendant le scroll */
    animation-play-state: running;
  }
}

/* Désactiver animations si préférence utilisateur */
@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;
  }
}

/*
 * ============================================
 * DEBUG MODE (décommenter pour tester)
 * ============================================
 */

/* Mettre un border rouge sur tous les éléments avec backdrop-filter
 * pour identifier visuellement les éléments concernés
 */

/*
@media (-webkit-min-device-pixel-ratio: 2) {
  [class*="backdrop-blur"]::before {
    content: "🔴 backdrop disabled";
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    z-index: 99999;
  }
}
*/