/* Styles pour optimisations de performance */

/* Transition douce pour les images qui se chargent */
img {
    transition: opacity 0.3s ease-in-out;
}

img:not(.loaded) {
    opacity: 0.7;
}

img.loaded {
    opacity: 1;
}

/* Placeholder pour images en cours de chargement */
img[src*="data:image/svg+xml"] {
    background-color: #f8f9fa;
    background-image: linear-gradient(45deg, #e9ecef 25%, transparent 25%),
                      linear-gradient(-45deg, #e9ecef 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #e9ecef 75%),
                      linear-gradient(-45deg, transparent 75%, #e9ecef 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Optimisation pour les fonts */
@font-face {
    font-display: swap; /* Améliore le rendu des fonts */
}

/* Préchargement critique - sera appliqué par le JS */
.preload-critical {
    display: none;
}

/* Spinner discret pour le lazy loading */
.loading-placeholder {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}