/* ===== COMPATIBILITÉ MOBILE RENFORCÉE ===== */

/* Support pour les anciens navigateurs mobiles */
@supports not (display: grid) {
  .hero-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  
  .benefits-content,
  .info-content,
  .reassurance-content {
    display: flex !important;
    flex-direction: column;
  }
  
  .audience-grid,
  .testimonials-grid {
    display: flex !important;
    flex-direction: column;
  }
}

/* Support pour les navigateurs sans variables CSS */
@supports not (color: var(--primary-blue)) {
  body {
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
  }
  
  .hero {
    padding: 3rem 0 !important;
    background-color: #1e293b !important;
  }
  
  .container {
    padding: 0 1rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }
  
  .hero-title {
    color: #ffffff !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  .hero-subtitle {
    color: #f1f5f9 !important;
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }
  
  .btn-primary {
    background: linear-gradient(135deg, #d00, #f97316) !important;
    color: #ffffff !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
  }
  
  .btn-primary:hover {
    background: linear-gradient(135deg, #b00, #e5650e) !important;
    transform: translateY(-2px) !important;
  }
  
  .special-offer-banner {
    background: #1e293b !important;
    color: #ffffff !important;
    padding: 0.75rem 0 !important;
    text-align: center !important;
  }
  
  /* Sections principales */
  .section {
    padding: 4rem 0 !important;
  }
  
  .section-header h2 {
    color: #1e293b !important;
    font-size: 1.875rem !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
  }
  
  .section-header p {
    color: #64748b !important;
    font-size: 1.125rem !important;
  }
  
  /* Grilles et layouts */
  .benefits-grid,
  .audience-grid,
  .testimonials-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
  }
  
  /* Cards et éléments */
  .benefit-card,
  .audience-card,
  .testimonial-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Couleurs d'accent */
  .highlight {
    color: #d8a127 !important;
  }
  
  .text-primary {
    color: #1e293b !important;
  }
  
  .text-secondary {
    color: #64748b !important;
  }
}

/* Fixes spécifiques pour iOS Safari */
@supports (-webkit-appearance: none) {
  .hero {
    /* Évite les problèmes de viewport sur iOS */
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Fix pour les fonts sur iOS */
  body, * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Fixes pour Android WebView */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .hero-background {
    /* Améliore les performances sur Android */
    transform: translateZ(0);
    will-change: transform;
  }
}

/* Media queries pour très petits écrans */
@media (max-width: 320px) {
  .container {
    padding: 0 0.75rem !important;
  }
  
  .hero {
    padding: 60px 0 2rem !important;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  .btn-primary {
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

/* Fixes pour les problèmes de couleurs */
.hero-title,
.hero-subtitle {
  /* Force les couleurs même si les variables ne marchent pas */
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-features .feature-item {
  color: #f1f5f9;
}

.hero-features .feature-item i {
  color: #d8a127;
}

/* Assure que le logo s'affiche correctement */
.hero-logo-img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Force l'affichage du hero même en cas de problème */
.hero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #1e293b !important; /* Fallback si l'image ne charge pas */
}

.hero-content {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}