/**
 * DWESTA - Optimisation des Images
 * Améliore le chargement et l'affichage des images
 */

/* ========================================
   1. LAZY LOADING OPTIMIZATION
   ======================================== */

/* Placeholder pendant le chargement */
img[loading="lazy"] {
    /* Transition douce lors de l'apparition */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Image chargée */
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
    opacity: 1;
}

/* Éviter le layout shift */
img {
    /* Réserver l'espace avant le chargement */
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
}

/* ========================================
   2. PERFORMANCE CSS
   ======================================== */

/* Accélération matérielle GPU */
img {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Optimisation du rendu */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Pour les photos (meilleure qualité) */
img[alt*="photo"],
img[src*="equipes"],
img[src*="IMG-contact"] {
    image-rendering: auto;
    image-rendering: high-quality;
}

/* ========================================
   3. PLACEHOLDER / SKELETON
   ======================================== */

/* Fond de remplacement pendant le chargement */
img:not([src]),
img[src=""],
img[loading="lazy"]:not(.loaded) {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s ease-in-out infinite;
}

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

/* ========================================
   4. CONTENEURS D'IMAGES RESPONSIVES
   ======================================== */

/* Conteneur pour maintenir le ratio */
.image-container {
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
}

.image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ratios communs */
.image-container.ratio-16-9 {
    padding-bottom: 56.25%; /* 9/16 * 100 */
}

.image-container.ratio-4-3 {
    padding-bottom: 75%; /* 3/4 * 100 */
}

.image-container.ratio-1-1 {
    padding-bottom: 100%; /* 1/1 * 100 */
}

/* ========================================
   5. BLUR-UP TECHNIQUE (Progressive Loading)
   ======================================== */

/* Image floue pendant le chargement */
.progressive-image {
    position: relative;
    overflow: hidden;
}

.progressive-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.progressive-image-main {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}

.progressive-image-main.loaded {
    opacity: 1;
}

.progressive-image-main.loaded ~ .progressive-image-placeholder {
    opacity: 0;
}

/* ========================================
   6. INTERSECTION OBSERVER OPTIMIZATION
   ======================================== */

/* Préchargement des images proches */
img[data-preload] {
    /* L'image sera préchargée avant d'être visible */
    content-visibility: auto;
}

/* ========================================
   7. RESPONSIVE IMAGES
   ======================================== */

/* Images adaptatives par taille d'écran */
@media (max-width: 640px) {
    img {
        /* Éviter les images trop grandes sur mobile */
        max-width: 100vw;
    }
}

/* ========================================
   8. PRINT OPTIMIZATION
   ======================================== */

@media print {
    img {
        /* Optimiser pour l'impression */
        max-width: 100% !important;
        page-break-inside: avoid;
    }
}

/* ========================================
   9. DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    img:not([src*=".svg"]) {
        /* Réduire la luminosité des images en mode sombre */
        filter: brightness(0.9);
    }
}

/* ========================================
   10. ACCESSIBILITY
   ======================================== */

/* Réduire les animations si préférence utilisateur */
@media (prefers-reduced-motion: reduce) {
    img {
        animation: none !important;
        transition: none !important;
    }
}

/* Indiquer visuellement les images sans alt */
img:not([alt]),
img[alt=""] {
    /* Bordure rouge en développement */
    outline: 3px solid red;
    outline-offset: 3px;
}

/* Supprimer l'outline en production */
body:not(.debug-mode) img:not([alt]),
body:not(.debug-mode) img[alt=""] {
    outline: none;
}

/* ========================================
   11. MODERN FORMATS SUPPORT
   ======================================== */

/* Support pour WebP avec fallback */
.webp img[data-src-webp] {
    content: url(attr(data-src-webp));
}

.no-webp img[data-src-webp] {
    content: url(attr(src));
}

/* ========================================
   12. PERFORMANCE HINTS
   ======================================== */

/* Hero images (chargement prioritaire) */
.hero img,
img[loading="eager"] {
    /* Priorité maximale */
    content-visibility: visible;
    contain-intrinsic-size: 1920px 1080px;
}

/* Images de fond (chargement différé) */
.background-image,
img[loading="lazy"] {
    /* Chargement en basse priorité */
    content-visibility: auto;
}

/* ========================================
   13. ERREURS DE CHARGEMENT
   ======================================== */

/* Style pour les images qui ne chargent pas */
img[onerror] {
    position: relative;
}

img[onerror]::after {
    content: "Image non disponible";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #999;
    text-align: center;
}

/* ========================================
   14. UTILITIES
   ======================================== */

/* Classe pour forcer le rechargement */
.force-load {
    content-visibility: visible !important;
}

/* Classe pour désactiver lazy loading */
.no-lazy {
    loading: eager !important;
}

/* Préchargement des images critiques */
.preload-image {
    position: absolute;
    top: -9999px;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}