/* ========================================
   COMPATIBILITÉ NAVIGATEURS - SIMECO.CI
   Préfixes vendor et fallbacks pour 
   meilleure compatibilité cross-browser
   ======================================== */

/* ===== BACKDROP-FILTER (Safari iOS nécessite -webkit-) ===== */
.backdrop-blur-md,
[class*="backdrop-blur"] {
  /* Préfixe Safari/WebKit */
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Fallback pour navigateurs sans support backdrop-filter */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .backdrop-blur-md,    
  [class*="backdrop-blur"] {
    background-color: rgba(255, 255, 255, 0.9) !important;
  }
    
  /* Fallback spécifique pour éléments avec background-color déjà défini */
  .backdrop-blur-md[style*="background-color"] {
    /* Utiliser l'opacité du background existant mais plus opaque */
    background-color: rgba(235, 232, 228, 0.95) !important;
  }
  
  .hero-buttons-container.backdrop-blur-md[style*="background-color"] {
    background-color: rgba(64, 70, 73, 0.7) !important;
  }
}

/* ===== CSS GRID FALLBACK (IE11) ===== */
/* Si Grid n'est pas supporté, utiliser Flexbox */
@supports not (display: grid) {
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .grid > * {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* ===== GAP PROPERTY (IE11 fallback) ===== */
@supports not (gap: 1rem) {
  /* Les règles de fallback pour gap sont définies ci-dessous */
  
  /* Ajout de margin via JavaScript serait idéal, mais CSS uniquement ici */
  .flex.gap-3 > * + *,
  .grid.gap-3 > * + * {
    margin-left: 0.75rem;
  }
  
  .flex.gap-4 > * + *,
  .grid.gap-4 > * + * {
    margin-left: 1rem;
  }
  
  .flex.gap-8 > * + *,
  .grid.gap-8 > * + * {
    margin-left: 2rem;
  }
}

/* ===== TRANSFORM 3D (Performance) ===== */
/* Activation de l'accélération matérielle pour meilleures performances */
.transition-transform,
[class*="transition"] {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

/* ===== SCROLL BEHAVIOR SMOOTH (Safari) ===== */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Momentum scrolling iOS */
}

/* Fallback pour navigateurs sans support scroll-behavior */
@supports not (scroll-behavior: smooth) {
  html {
    scroll-behavior: auto;
  }
}

/* ===== FLEXBOX FALLBACK (Très anciens navigateurs) ===== */
/* Pas vraiment nécessaire pour les navigateurs modernes, mais bon à avoir */
.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEEN - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

/* ===== TEXT FILL COLOR (WebKit gradient text) ===== */
/* Déjà présent mais s'assurer que c'est bien appliqué */
[style*="-webkit-text-fill-color"],
[class*="text-gradient"] {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== TOUCH ACTION (Mobile) ===== */
/* Optimisation pour interactions tactiles */
button,
a,
[role="button"],
.mobile-menu-btn,
.sectors-nav-btn,
.services-nav-btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation; /* Évite le double-tap zoom sur iOS */
}

/* ===== VIEWPORT HEIGHT FIX (iOS Safari) ===== */
/* Fix pour 100vh sur iOS qui ne prend pas en compte la barre d'adresse */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari */
  .h-screen,
  [style*="height: 100vh"] {
    height: -webkit-fill-available;
    /* Alternative avec JavaScript recommandée */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* ===== OBJECT-FIT (IE11 fallback) ===== */
/* Polyfill JavaScript déjà présent, mais CSS fallback */
@supports not (object-fit: cover) {
  img[style*="object-fit"] {
    width: 100%;
    height: 100%;
  }
}

/* ===== CSS VARIABLES FALLBACK ===== */
/* Le fichier css-variables-fix.js gère déjà cela, mais CSS de base */
:root {
  /* Valeurs par défaut si variables non supportées */
  --brand-primary: #080054;
  --brand-accent: #ff9100;
}

@supports not (--css: variables) {
  /* Fallback pour très anciens navigateurs */
  .bg-brand-primary {
    background-color: #080054 !important;
  }
  
  .text-brand-primary {
    color: #080054 !important;
  }
  
  .bg-brand-accent {
    background-color: #ff9100 !important;
  }
  
  .text-brand-accent {
    color: #ff9100 !important;
  }
}

/* ===== BORDER RADIUS (Très anciens navigateurs) ===== */
.rounded-lg,
.rounded-xl,
.rounded-2xl,
[class*="rounded"] {
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  border-radius: inherit;
}

/* ===== BOX SHADOW (Compatibilité) ===== */
.shadow-soft,
.shadow-xl,
[class*="shadow"] {
  -webkit-box-shadow: inherit;
  -moz-box-shadow: inherit;
  box-shadow: inherit;
}

/* ===== OPACITY TRANSITIONS (Performance) ===== */
/* Optimisation pour transitions d'opacité */
[class*="opacity"],
.opacity-50,
.opacity-75 {
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

/* ===== WILL-CHANGE (Performance hints) ===== */
/* Indique au navigateur quels éléments vont changer */
.carousel-container,
#sectorsTrack,
#servicesTrack,
[class*="carousel"],
[class*="track"] {
  will-change: transform;
  -webkit-will-change: transform;
}

/* Retirer will-change après animation pour économiser les ressources */
.animation-complete {
  will-change: auto;
  -webkit-will-change: auto;
}

/* ===== FILTER PROPERTIES (IE11 fallback) ===== */
@supports not (filter: blur(5px)) {
  [style*="filter:"] {
    /* Fallback : désactiver le filtre si non supporté */
    filter: none;
  }
}

/* ===== POSITION STICKY (Safari ancien) ===== */
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/* ===== FLEXBOX GAP POLYFILL MANUAL (IE11) ===== */
/* Note: Gap est bien supporté maintenant, mais pour IE11 */
@supports not (gap: 1rem) {
  .flex.gap-3 > *:not(:last-child) {
    margin-right: 0.75rem;
  }
  
  .flex.gap-4 > *:not(:last-child) {
    margin-right: 1rem;
  }
  
  .flex.gap-8 > *:not(:last-child) {
    margin-right: 2rem;
  }
  
  /* Pour grid avec gap */
  .grid.gap-3 > * {
    margin: 0.375rem;
  }
  
  .grid.gap-4 > * {
    margin: 0.5rem;
  }
  
  .grid.gap-8 > * {
    margin: 1rem;
  }
}

/* ===== ANIMATION PERFORMANCE ===== */
/* Utiliser transform et opacity pour meilleures performances */
@keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ===== SAFARI SPECIFIC FIXES ===== */
@supports (-webkit-appearance: none) {
  /* Fix pour Safari */
  input,
  textarea,
  select,
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
  
  /* Fix pour les bordures arrondies sur Safari */
  button,
  input,
  textarea {
    border-radius: inherit;
    -webkit-border-radius: inherit;
  }
}

/* ===== PRINT STYLES (Compatibilité) ===== */
@media print {
  .backdrop-blur-md,
  [class*="backdrop-blur"] {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: white !important;
  }
  
  /* Désactiver les animations en impression */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}