/* ================================================
   OPTIMISATIONS DE PERFORMANCE POUR VERCEL
   ================================================ */

/* Critical CSS - Chargement prioritaire */
:root {
    font-display: swap;
}

/* Lazy Loading des images */
img {
    loading: lazy;
    decoding: async;
}

img:not([src]) {
    visibility: hidden;
}

/* Optimisation du rendu */
.hero-image,
.carousel-image-teranga,
.dislab-screenshot,
.portfolio-image-wrapper img {
    will-change: transform;
    contain: layout style paint;
}

/* Réduction des reflows */
.portfolio-grid,
.expertise-grid,
.plugins-grid,
.services-grid {
    contain: layout;
}

/* Optimisation des animations */
@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;
    }
}

/* Désactivation des effets complexes sur mobile */
@media (max-width: 768px) {
    * {
        will-change: auto !important;
    }
    
    .floating-card {
        animation: none !important;
        position: static;
        display: none;
    }
    
    body::after {
        display: none;
    }
}

/* Optimisation du scroll */
.portfolio-section,
.expertise-section,
.plugins-section,
.services-section {
    -webkit-overflow-scrolling: touch;
}

/* Compression des ombres complexes */
@media (max-width: 768px) {
    * {
        box-shadow: none !important;
    }
    
    .hero-image,
    .phone-mockup-container,
    .browser-mockup,
    .expertise-card,
    .plugin-card,
    .portfolio-item,
    .service-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Optimisation des gradients */
@media (max-width: 768px) {
    .hero {
        background: #f8fafc;
    }
    
    .stats-section {
        background: var(--primary);
    }
    
    .btn-primary,
    .btn-teranga-primary,
    .btn-dislab-primary {
        background: var(--primary);
    }
}

/* Accélération GPU sélective */
.slider-nav-btn,
.filter-btn,
.btn-primary,
.btn-secondary {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prévention des repaints inutiles */
.hero-image-container,
.phone-mockup-container,
.browser-mockup {
    transform: translateZ(0);
}

/* Optimisation des transitions */
@media (max-width: 768px) {
    * {
        transition-duration: 0.2s !important;
    }
}

/* Intersection Observer pour lazy loading */
.portfolio-item {
    content-visibility: auto;
    contain-intrinsic-size: 0 400px;
}

/* Font display optimization */
@font-face {
    font-display: swap;
}

/* Préchargement critique */
link[rel="preload"] {
    as: font;
    crossorigin: anonymous;
}

/* Suppression des filtres backdrop sur mobile */
@media (max-width: 768px) {
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Optimisation du carousel */
@media (max-width: 768px) {
    .carousel-track {
        transform: translateZ(0);
    }
    
    .carousel-slide {
        transform: translateZ(0);
    }
}

/* Cache des polices */
@supports (font-display: swap) {
    * {
        font-display: swap;
    }
}

/* Prévention des layouts shifts */
.portfolio-image-wrapper {
    aspect-ratio: 1 / 1;
}

.phone-mockup-container {
    aspect-ratio: 340 / 680;
}

.browser-mockup {
    aspect-ratio: 16 / 10;
}

/* Optimisation des iframe */
iframe {
    loading: lazy;
}

@media (max-width: 768px) {
    iframe {
        height: 250px !important;
    }
}

/* Réduction de la complexité des sélecteurs */
.stat-item .stat-number,
.stat-item .stat-label {
    color: white;
}

/* Optimisation du menu mobile */
@media (max-width: 968px) {
    .main-nav {
        transform: translateZ(0);
        transition: left 0.3s ease;
    }
}

/* Désactivation des effets 3D sur mobile */
@media (max-width: 768px) {
    * {
        transform-style: flat !important;
        perspective: none !important;
    }
}

/* Optimisation des images portfolio */
.portfolio-grid img {
    max-height: 300px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .portfolio-grid img {
        max-height: 250px;
    }
}

/* Simplification du rendering */
@media (max-width: 768px) {
    .expertise-card,
    .plugin-card,
    .service-card,
    .portfolio-item {
        transform: none !important;
    }
    
    .expertise-card:hover,
    .plugin-card:hover,
    .service-card:hover,
    .portfolio-item:hover {
        transform: none !important;
    }
}

/* Optimisation des listes */
.expertise-grid,
.plugins-grid,
.services-grid,
.portfolio-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Réduction des calculs CSS */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 2rem;
    }
    
    .section-header h2 {
        font-size: 1.75rem;
    }
}

/* Optimisation du scroll snap */
@media (max-width: 768px) {
    .projects-slider-container {
        scroll-snap-type: x mandatory;
        overflow-x: hidden;
    }
    
    .project-slide {
        scroll-snap-align: start;
    }
}

/* Critical rendering path */
.hero,
.site-header {
    contain: layout style;
}

/* Préchargement des ressources critiques */
link[rel="preconnect"] {
    dns-prefetch: on;
}

/* Optimisation des polices */
@media (max-width: 768px) {
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
    }
}

/* Réduction du nombre de reflows */
.container {
    width: 100%;
    max-width: 1200px;
}

@media (max-width: 768px) {
    .container {
        max-width: 100%;
    }
}

/* Optimisation des nth-child */
@media (max-width: 768px) {
    .browser-dots span:nth-child(1),
    .browser-dots span:nth-child(2),
    .browser-dots span:nth-child(3) {
        background: #ddd;
    }
}

/* Cache des ressources statiques */
img,
video,
audio {
    cache-control: public, max-age=31536000, immutable;
}

/* Compression des assets */
@media (max-width: 768px) {
    .hero-image,
    .carousel-image-teranga {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Optimisation du paint */
.portfolio-item,
.expertise-card,
.plugin-card,
.service-card {
    isolation: isolate;
}

/* Réduction des layers */
@media (max-width: 768px) {
    * {
        z-index: auto !important;
    }
    
    .site-header {
        z-index: 1000 !important;
    }
    
    .main-nav {
        z-index: 999 !important;
    }
}

/* Optimisation du loading */
@supports (content-visibility: auto) {
    .portfolio-section,
    .expertise-section,
    .plugins-section,
    .services-section {
        content-visibility: auto;
        contain-intrinsic-size: 0 800px;
    }
}

/* Performance des animations */
@media (max-width: 768px) {
    @keyframes fadeInUp {
        from {
            opacity: 0.8;
        }
        to {
            opacity: 1;
        }
    }
}