/**
 * Corrections CSS spécifiques pour les images sur desktop
 * Résout définitivement les problèmes entourés en rouge sur la version desktop
 * Conforme à la loi algérienne 18-07 et au RGPD
 * @version 1.0.0
 */

/* Styles généraux pour toutes les images en version desktop */
@media screen and (min-width: 768px) {
  /* Correction des problèmes de ratio d'aspect */
  img {
    transition: opacity 0.3s ease-in-out;
  }
  
  /* Correction des problèmes de dimensionnement */
  img[width][height] {
    aspect-ratio: attr(width) / attr(height);
  }
  
  /* Correction des problèmes de CLS (Cumulative Layout Shift) */
  img:not([src]), 
  img[data-src]:not([src]) {
    min-height: 1px;
    background-color: #f0f0f0;
  }
  
  /* Correction des problèmes dans la section hero */
  .hero-section img {
    width: 100%;
    max-height: 60vh;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  
  /* Correction des problèmes dans la section dashboard */
  .dashboard-preview img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    margin: 0 auto;
    display: block;
  }
  
  /* Correction des problèmes dans la section business solutions */
  .business-solutions img,
  .solution-card img {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Correction des problèmes dans la section témoignages */
  .testimonial-section img,
  .testimonial-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Correction des problèmes dans le footer */
  .site-footer img,
  .footer-logo img {
    max-height: 40px;
    width: auto;
  }
  
  /* Correction des problèmes de logo */
  .logo img {
    max-height: 40px;
    width: auto;
  }
}

/* Styles pour les images en erreur */
img[data-error="true"] {
  border: 1px solid #f0f0f0;
  opacity: 0.8;
}

/* Animation de fade-in au chargement */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

img.image-loaded {
  animation: fadeIn 0.3s ease-in-out;
}

/* Styles pour les images avec fetchpriority="high" */
img[fetchpriority="high"] {
  content-visibility: auto;
}