/* MonShashibo.fr - Optimisations Performance */

/* Lazy loading styles */
.lazy {
    opacity: 0;
    transition: opacity 0.3s ease;
    filter: blur(5px);
}

.lazy-loaded {
    opacity: 1;
    filter: blur(0);
}

.lazy-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Optimisation des images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent Cumulative Layout Shift (CLS) */
.aspect-ratio-16-9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.aspect-ratio-4-3 {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.aspect-ratio-1-1 {
    aspect-ratio: 1/1;
    object-fit: cover;
}

/* Préchargement critique */
.critical-resource {
    font-display: swap;
}

/* Optimisation du rendering */
.will-change-transform {
    will-change: transform;
}

.will-change-scroll {
    will-change: scroll-position;
}

/* Cache des animations coûteuses sur mobile */
@media (max-width: 768px) {
    .reduce-motion {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Désactiver les animations parallax sur mobile */
    .mobile-no-parallax {
        transform: none !important;
    }
}

/* Styles pour les états de chargement */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.skeleton-text {
    height: 1em;
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.skeleton-text:nth-child(odd) {
    width: 85%;
}

.skeleton-text:nth-child(even) {
    width: 95%;
}

.skeleton-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.skeleton-card {
    height: 200px;
    border-radius: 8px;
}

/* Optimisation des fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Optimisation des transitions */
.gpu-acceleration {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000;
}

/* Optimisation du scroll */
.smooth-scroll {
    scroll-behavior: smooth;
}

/* Container queries pour une meilleure responsivité */
@supports (container-type: inline-size) {
    .product-grid {
        container-type: inline-size;
    }
    
    @container (max-width: 600px) {
        .product-card {
            flex-direction: column;
        }
    }
}

/* Styles pour les Core Web Vitals */
.prevent-cls {
    min-height: 200px; /* Réserve l'espace pour éviter le CLS */
}

.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: 200px; /* Estimation de la taille */
}

/* Optimisation des images de fond */
.bg-optimized {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><rect width="1" height="1" fill="%23f8fafc"/></svg>');
    background-size: cover;
    background-position: center;
}

/* Preload hints via CSS */
.preload-critical {
    position: relative;
}

.preload-critical::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background: url('/static/assets/images/hero-bg.webp') no-repeat -9999px -9999px;
}

/* Optimisation des animations */
.animate-optimized {
    animation-fill-mode: both;
    animation-play-state: paused;
}

.animate-optimized.in-view {
    animation-play-state: running;
}

/* Styles pour les metrics de performance */
.metric-lcp {
    /* Styles pour l'élément LCP (Largest Contentful Paint) */
    contain: layout style paint;
}

.metric-fid {
    /* Styles pour améliorer le FID (First Input Delay) */
    pointer-events: auto;
    touch-action: manipulation;
}

/* Progressive enhancement */
.no-js .requires-js {
    display: none !important;
}

.js .no-js-fallback {
    display: none !important;
}

/* Optimisation pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .retina-optimized {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Styles pour le mode sombre (performance) */
@media (prefers-color-scheme: dark) {
    .auto-dark {
        filter: invert(1) hue-rotate(180deg);
    }
    
    .auto-dark img,
    .auto-dark video {
        filter: invert(1) hue-rotate(180deg);
    }
}