/* ==========================================================================
   OPTIMISATION DES IMAGES POUR MOBILE
   Corrections spécifiques pour les problèmes d'affichage des images
   ========================================================================== */

/* ===== IMAGES RESPONSIVE GLOBALES ===== */

@media (max-width: 768px) {
  /* Reset de base pour toutes les images */
  img, picture, figure {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }
  
  /* Images dans les conteneurs flexbox */
  .row img, .column img, .grid img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
}

/* ===== CORRECTIONS SPÉCIFIQUES AUX SECTIONS ===== */

@media (max-width: 768px) {
  /* Hero sections - images de couverture */
  .xl-10-parallax-container {
    position: relative !important;
    width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    margin: 20px 0 !important;
  }
  
  .xl-10-back.xl-10-parallax {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }
  
  /* Animation containers sur mobile */
  .xl-10-animation-container {
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
  }
}

/* ===== IMAGES DANS LES GRILLES ===== */

@media (max-width: 768px) {
  /* Modern grid images */
  .modern-grid img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
  }
  
  /* Column images spécifiques */
  .column-4 img, .column-5 img, .column-6 img {
    width: 100% !important;
    height: auto !important;
    max-height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Images dans les colonnes étroites */
  .column-2 img, .column-3 img {
    width: 100% !important;
    height: auto !important;
    max-height: 150px !important;
    object-fit: cover !important;
  }
}

/* ===== GALERIES ET PORTFOLIOS ===== */

@media (max-width: 768px) {
  /* Images de galerie */
  .gallery img, .portfolio img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
  }
  
  /* Images en mode liste */
  .list-item img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
}

/* ===== IMAGES DE BACKGROUND RESPONSIVE ===== */

@media (max-width: 768px) {
  /* Conversion des background-images en images inline pour mobile */
  [style*="background-image"] {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    min-height: 200px !important;
    border-radius: 8px !important;
  }
  
  /* Hero backgrounds */
  .hero[style*="background-image"],
  .banner[style*="background-image"] {
    min-height: 250px !important;
    border-radius: 12px !important;
    margin: 20px 0 !important;
  }
}

/* ===== LAZY LOADING ET PERFORMANCE ===== */

@media (max-width: 768px) {
  /* Images lazy loading */
  img[loading="lazy"] {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
  }
  
  img[loading="lazy"].loaded {
    opacity: 1 !important;
  }
  
  /* Placeholder pour images en cours de chargement */
  img:not([src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: loading 1.5s infinite !important;
  }
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== IMAGES DANS LES SECTIONS SPÉCIALES ===== */

@media (max-width: 768px) {
  /* Financing header images */
  .financing-header-image {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
    object-fit: cover !important;
  }
  
  /* Insights images */
  .insights-story-model-image {
    height: 180px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  
  .insights-story-model-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
    position: static !important;
  }
  
  /* Blog et article images */
  .insights-index-blog-post-item img {
    aspect-ratio: 16/9 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
  }
}

/* ===== LOGOS ET ICÔNES ===== */

@media (max-width: 768px) {
  /* Logo principal */
  nav .logo img {
    width: auto !important;
    height: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
  }
  
  /* Icônes dans le contenu */
  .icon img, .svg-icon {
    width: 24px !important;
    height: 24px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }
  
  /* Icônes sociales */
  .social-icon img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 4px !important;
  }
}

/* ===== ASPECT RATIOS FIXES ===== */

@media (max-width: 768px) {
  /* Container avec ratio fixe 16:9 */
  .ratio-16-9 {
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  
  .ratio-16-9 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Container avec ratio fixe 4:3 */
  .ratio-4-3 {
    aspect-ratio: 4/3 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  
  .ratio-4-3 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Container avec ratio carré */
  .ratio-1-1 {
    aspect-ratio: 1/1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
  }
  
  .ratio-1-1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* ===== CORRECTIONS POUR LES DÉBORDEMENTS ===== */

@media (max-width: 768px) {
  /* Prévenir les débordements horizontaux */
  .slide img, .page img {
    max-width: calc(100vw - 40px) !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Images dans les conteneurs avec padding */
  .container img, .wrapper img {
    max-width: calc(100% - 40px) !important;
    margin: 20px auto !important;
  }
  
  /* Images full-width */
  .full-width-image {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    max-width: 100vw !important;
    height: auto !important;
    border-radius: 0 !important;
  }
}

/* ===== IMAGES AVEC TEXTE (SIDE BY SIDE) ===== */

@media (max-width: 768px) {
  /* Container image + texte devient vertical */
  .image-text-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .image-text-container img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    order: -1 !important; /* Image en premier sur mobile */
  }
  
  .image-text-container .text {
    order: 1 !important;
    padding: 0 20px !important;
  }
}

/* ===== OPTIMISATIONS WEBP ET FORMATS MODERNES ===== */

@media (max-width: 768px) {
  /* Support pour les formats modernes avec fallback */
  picture source {
    display: none !important;
  }
  
  picture img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* ===== CORRECTIONS SAFARI MOBILE ===== */

@supports (-webkit-appearance: none) {
  @media (max-width: 768px) {
    /* Fix pour object-fit sur Safari */
    img {
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
    }
    
    /* Fix pour les images dans les flex containers */
    .flex img {
      flex-shrink: 0 !important;
      min-height: 0 !important;
      min-width: 0 !important;
    }
  }
}

/* ===== ÉTATS DE CHARGEMENT DES IMAGES ===== */

@media (max-width: 768px) {
  /* Skeleton loader pour les images */
  .image-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite !important;
    border-radius: 8px !important;
    min-height: 150px !important;
  }
  
  /* Animation de shimmer */
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  /* État d'erreur pour les images */
  .image-error {
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 150px !important;
    border: 1px dashed #ccc !important;
    border-radius: 8px !important;
    color: #666 !important;
    font-size: 14px !important;
  }
  
  .image-error::after {
    content: "Image non disponible" !important;
  }
}