/* Corrections pour garantir la visibilité des images
   sur tous les thèmes et toutes les tailles d'écran */

/* ========================================
   RÈGLES GLOBALES POUR TOUTES LES IMAGES
   ======================================== */

/* Toutes les images doivent être visibles */
img,
.img-fluid,
.img-responsive,
.card-img,
.card-img-top,
.card-img-bottom {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
    height: auto;
}

/* Images dans les conteneurs */
.container img,
.container-fluid img,
section img,
.card img,
.row img,
[class*="col-"] img {
    display: block !important;
    visibility: visible !important;
}

/* Images de fond (background-image) */
[style*="background-image"],
.bg-image,
.hero-image {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   CORRECTIONS PAR TYPE D'IMAGE
   ======================================== */

/* Images dans les cartes */
.card .card-img,
.card .card-img-top,
.card .card-img-bottom,
.card img {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Images dans les galeries */
.gallery img,
.image-gallery img,
.photo-gallery img,
[class*="gallery"] img {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Images dans les grilles */
.grid img,
.row img,
[class*="col-"] img {
    display: block !important;
    visibility: visible !important;
}

/* Images dans les sections hero */
.hero-section img,
.hero-image img,
.banner img {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    height: auto;
}

/* Thumbnails et miniatures */
.thumbnail img,
.img-thumbnail,
.preview img {
    display: block !important;
    visibility: visible !important;
}

/* Images dans les listes */
ul img,
ol img,
li img {
    display: inline-block !important;
    visibility: visible !important;
}

/* Images dans les tableaux */
table img,
td img,
th img {
    display: inline-block !important;
    visibility: visible !important;
    max-width: 100%;
}

/* ========================================
   MODE CLAIR SPÉCIFIQUE
   ======================================== */

[data-theme="light"] img,
.light-mode img,
body:not([data-theme="dark"]) img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

[data-theme="light"] .card img,
.light-mode .card img {
    display: block !important;
    visibility: visible !important;
}

[data-theme="light"] section img,
.light-mode section img {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   MODE SOMBRE SPÉCIFIQUE
   ======================================== */

[data-theme="dark"] img,
.dark-mode img {
    display: block !important;
    visibility: visible !important;
    opacity: 0.95 !important;
}

[data-theme="dark"] img:hover,
.dark-mode img:hover {
    opacity: 1 !important;
}

[data-theme="dark"] .card img,
.dark-mode .card img {
    display: block !important;
    visibility: visible !important;
}

[data-theme="dark"] section img,
.dark-mode section img {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 575.98px) {
    /* Toutes les images visibles sur mobile */
    img,
    .card img,
    section img,
    .gallery img {
        display: block !important;
        visibility: visible !important;
        max-width: 100%;
        height: auto;
    }
    
    /* Images dans les cartes - hauteur maximale pour mobile */
    .card-img,
    .card-img-top {
        max-height: 250px;
        object-fit: cover;
        display: block !important;
    }
    
    /* Galeries sur mobile - images empilées */
    .gallery img,
    .image-gallery img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
        margin-bottom: 1rem;
        display: block !important;
    }
    
    /* Hero images adaptées */
    .hero-section img,
    .hero-image img {
        max-height: 300px;
        width: 100%;
        object-fit: cover;
        display: block !important;
    }
    
    /* Thumbnails sur mobile */
    .thumbnail,
    .img-thumbnail {
        max-width: 150px;
        display: inline-block !important;
    }
}

/* ========================================
   RESPONSIVE - TABLETTE
   ======================================== */

@media (min-width: 576px) and (max-width: 991.98px) {
    /* Images sur tablette */
    img {
        display: block !important;
        visibility: visible !important;
        max-width: 100%;
        height: auto;
    }
    
    .card-img,
    .card-img-top {
        max-height: 350px;
        object-fit: cover;
        display: block !important;
    }
    
    .gallery img,
    .image-gallery img {
        max-height: 300px;
        object-fit: cover;
        display: block !important;
    }
    
    .hero-section img {
        max-height: 400px;
        display: block !important;
    }
}

/* ========================================
   RESPONSIVE - DESKTOP
   ======================================== */

@media (min-width: 992px) {
    /* Images sur desktop - pleine qualité */
    img {
        display: block !important;
        visibility: visible !important;
        max-width: 100%;
        height: auto;
    }
    
    .card-img,
    .card-img-top {
        max-height: 450px;
        object-fit: cover;
        display: block !important;
    }
    
    .gallery img,
    .image-gallery img {
        max-height: 400px;
        object-fit: cover;
        display: block !important;
    }
    
    .hero-section img {
        max-height: 600px;
        display: block !important;
    }
}

/* ========================================
   CORRECTIONS POUR ÉLÉMENTS SPÉCIAUX
   ======================================== */

/* Images avec lazy loading */
img[loading="lazy"],
img[data-src] {
    display: block !important;
    visibility: visible !important;
}

/* Images avec srcset */
img[srcset] {
    display: block !important;
    visibility: visible !important;
}

/* Images SVG */
svg,
img[src$=".svg"],
img[src*=".svg"] {
    display: inline-block !important;
    visibility: visible !important;
}

/* Figure et figcaption */
figure img {
    display: block !important;
    visibility: visible !important;
    width: 100%;
    height: auto;
}

figcaption {
    display: block !important;
    visibility: visible !important;
    color: var(--text-secondary);
}

/* Picture element */
picture img {
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   CORRECTIONS POUR LES FRAMEWORKS
   ======================================== */

/* Bootstrap */
.img-fluid {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    display: inline-block !important;
    visibility: visible !important;
}

/* Carousel images */
.carousel img,
.carousel-item img {
    display: block !important;
    visibility: visible !important;
    width: 100%;
}

/* Modal images */
.modal img {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
}

/* Dropdown images */
.dropdown img {
    display: inline-block !important;
    visibility: visible !important;
}

/* ========================================
   ANTI-PATTERNS À CORRIGER
   ======================================== */

/* Empêcher display:none sur les images */
img[style*="display: none"],
img[style*="display:none"] {
    display: block !important;
    visibility: visible !important;
}

/* Empêcher visibility:hidden sur les images */
img[style*="visibility: hidden"],
img[style*="visibility:hidden"] {
    visibility: visible !important;
}

/* Empêcher opacity:0 sur les images chargées */
img[src]:not([data-loading]) {
    opacity: 1 !important;
}

/* ========================================
   PLACEHOLDERS ET LOADING
   ======================================== */

/* Placeholder pendant le chargement */
img:not([src]),
img[src=""],
img[src="#"] {
    background-color: var(--bg-tertiary);
    min-height: 150px;
    display: block !important;
}

/* Loading state */
img.loading {
    opacity: 0.5;
    display: block !important;
    visibility: visible !important;
}

/* Loaded state */
img.loaded {
    opacity: 1;
    display: block !important;
    visibility: visible !important;
}

/* ========================================
   PRINT
   ======================================== */

@media print {
    img {
        display: block !important;
        visibility: visible !important;
        max-width: 100%;
        page-break-inside: avoid;
    }
    
    .card img,
    section img {
        display: block !important;
    }
}