/* ========================================
   Optimisations de performance
   ======================================== */

/* Désactiver les animations sur les appareils qui préfèrent réduire les mouvements */
@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;
    }
}

/* Optimisation GPU pour les éléments animés */
.capability-card,
.forfait-card,
.portfolio-item,
.hero-content,
.portfolio-image img {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

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

/* Lazy loading natif pour les images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Optimisation des scrolls */
* {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Conteneur principal avec isolation */
.container {
    contain: layout style;
}

/* Optimisation des sections */
section {
    contain: layout;
}

/* Désactiver les animations complexes sur mobile */
@media (max-width: 768px) {
    .cube-3d {
        animation: none !important;
        transform: rotateY(45deg);
    }
    
    .ui-button {
        animation: none !important;
    }
    
    .hero-content {
        transform: none !important;
    }
    
    /* Réduire les particules Three.js sur mobile */
    #hero-canvas {
        opacity: 0.5;
    }
}

/* Optimisation des transitions au hover */
@media (hover: hover) and (pointer: fine) {
    .capability-card:hover,
    .forfait-card:hover,
    .portfolio-item:hover {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Désactiver les hovers sur tactile */
@media (hover: none) {
    .capability-card:hover,
    .forfait-card:hover,
    .portfolio-item:hover {
        transform: none;
    }
}

/* Note: Les polices utilisent font-display: swap dans leur chargement Google Fonts */

/* Conteneur pour les animations coûteuses */
.performance-container {
    will-change: auto;
}

.performance-container.animating {
    will-change: transform, opacity;
}

/* Optimisation des ombres */
.capability-card,
.forfait-card,
.portfolio-item {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.capability-card:hover,
.forfait-card:hover,
.portfolio-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Réduire la complexité des dégradés sur mobile */
@media (max-width: 768px) {
    .gradient-primary,
    [style*="gradient"] {
        background: var(--color-primary) !important;
    }
}

/* Optimisation du rendu du texte */
body {
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
}

/* Conteneur de canvas optimisé */
#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    will-change: auto;
}

/* Optimisation des overlays */
.portfolio-overlay {
    will-change: opacity;
}

/* Désactiver les animations pendant le scroll rapide */
.scrolling * {
    pointer-events: none;
    animation-play-state: paused !important;
}

/* Optimisation de la performance globale */
* {
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}