/**
 * Optimisations de performance pour MS Images
 * Améliore le rendu et les animations
 */


/* Optimisations pour les connexions lentes */

.slow-connection * {
    animation-duration: 0.1s !important;
    transition-duration: 0.1s !important;
}


/* Placeholders pour le lazy loading */

.image-placeholder,
.video-placeholder {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    animation: placeholder-shimmer 1.5s infinite linear;
}

@keyframes placeholder-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}


/* Optimisations pour les images */

.lazy-image {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
    opacity: 1;
}


/* Optimisations pour les vidéos */

.lazy-video {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.lazy-video.loaded {
    opacity: 1;
}


/* Optimisations pour le carousel */

.carousel-media {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}


/* Optimisations pour les animations */

.tg-item {
    will-change: transform, opacity;
    transform: translateZ(0);
}


/* Optimisations pour les polices */

@font-face {
    font-family: 'ArcaMajora2-Heavy';
    src: url('/assets/fonts/ArcaMajora2-Heavy.otf') format('opentype');
    font-display: swap;
    font-weight: 900;
}

@font-face {
    font-family: 'ArcaMajora3-Bold';
    src: url('/assets/fonts/ArcaMajora3-Bold.otf') format('opentype');
    font-display: swap;
    font-weight: 700;
}


/* Optimisations pour le scroll */

html {
    scroll-behavior: smooth;
}


/* Optimisations pour les transitions */

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* Optimisations pour les images responsives */

img {
    max-width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}


/* Optimisations pour les vidéos */

video {
    max-width: 100%;
    height: auto;
}


/* Optimisations pour les boutons */

button,
.btn {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}


/* Optimisations pour les liens */

a {
    -webkit-tap-highlight-color: transparent;
}


/* Optimisations pour les formulaires */

input,
textarea,
select {
    -webkit-appearance: none;
    border-radius: 0;
}


/* Optimisations pour les animations CSS */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* Optimisations pour les écrans haute densité */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .lazy-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Optimisations pour les connexions lentes */

@media (max-width: 768px) {
    .lazy-image,
    .lazy-video {
        transition-duration: 0.1s;
    }
}


/* Optimisations pour les connexions très lentes */

@media (max-width: 480px) {
    .image-placeholder,
    .video-placeholder {
        background-size: 10px 10px;
    }
}


/* Optimisations pour les écrans tactiles */

@media (hover: none) and (pointer: coarse) {
    .tg-item:hover {
        transform: none;
    }
    .carousel-media:hover {
        transform: none;
    }
}


/* Optimisations pour les écrans de bureau */

@media (hover: hover) and (pointer: fine) {
    .tg-item:hover {
        transform: scale(1.02);
        transition: transform 0.3s ease-in-out;
    }
}


/* Optimisations pour les animations de chargement */

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Optimisations pour les erreurs de chargement */

.error-placeholder {
    background: #f8f9fa;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-align: center;
    padding: 20px;
}


/* Optimisations pour les performances de rendu */

.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* Optimisations pour les images WebP */

.webp .lazy-image {
    background-image: url('data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAADsAD+JaQAA3AAAAAA');
}


/* Optimisations pour les images AVIF */

.avif .lazy-image {
    background-image: url('data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgABogQEAwgMg8f8D///8WfhwB8+ErK42A=');
}