/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Critical CSS - Above the fold */

/* Prevent layout shift */
img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lazy loading placeholder */
img[loading="lazy"],
video[loading="lazy"] {
    background: rgba(255, 255, 255, 0.05);
}

/* Reduce repaints */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* GPU acceleration for animations */
.hero,
.category-card,
.prestation-card,
.btn,
.nav__menu {
    will-change: transform;
    transform: translateZ(0);
}

/* Optimize fonts */
@font-face {
    font-family: 'Poppins';
    font-display: swap;
    font-weight: 300 700;
}

@font-face {
    font-family: 'Playfair Display';
    font-display: swap;
    font-weight: 400 700;
}

/* Reduce animation complexity on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Optimize background gradients */
.hero::before,
.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(226, 76, 58, 0.1), rgba(83, 52, 164, 0.1));
    pointer-events: none;
    will-change: opacity;
}

/* Optimize shadows */
.category-card,
.prestation-card,
.btn {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.category-card:hover,
.prestation-card:hover {
    box-shadow: 0 10px 20px rgba(226, 76, 58, 0.2);
}

/* Contain layout shifts */
.nav {
    contain: layout style;
}

.footer {
    contain: layout style;
}

/* Optimize images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce paint areas */
.section {
    contain: layout paint;
}

/* Optimize scrolling */
.nav__menu,
.time-slots {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

/* Defer non-critical CSS */
.footer,
.faq-answer,
.contact-form {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

/* Optimize calendar rendering */
.calendar-grid {
    contain: layout style paint;
}

.calendar-day {
    contain: layout style;
}

/* Reduce complexity of gradients on mobile */
@media (max-width: 768px) {
    .hero::before,
    .cta-section::before {
        background: rgba(226, 76, 58, 0.05);
    }
    
    .btn {
        background: var(--color-accent);
    }
    
    .btn--secondary {
        background: var(--color-secondary);
    }
}

/* Optimize video playback */
video {
    object-fit: cover;
    background: #000;
}

/* Prevent flash of unstyled content */
html {
    visibility: visible;
    opacity: 1;
}

body {
    visibility: visible;
    opacity: 1;
}

/* Optimize form inputs */
input,
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
}

/* Reduce motion for better performance */
@media (prefers-reduced-motion: reduce) {
    .hero__slider,
    .category-card,
    .nav__menu {
        animation: none !important;
        transition: none !important;
    }
}

/* Critical rendering path optimization */
.above-fold {
    contain: layout style paint;
}

/* Optimize background images */
.hero,
.category-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Reduce JavaScript execution */
.no-js .nav__menu {
    display: none;
}

/* Optimize calendar performance */
.time-slot {
    contain: layout style;
    will-change: background-color, border-color;
}

/* Reduce layout thrashing */
.prestation-grid,
.contact-grid,
.footer__content {
    contain: layout;
}

/* Optimize hover states */
@media (hover: hover) {
    .btn:hover,
    .category-card:hover,
    .nav__link:hover {
        will-change: transform, box-shadow;
    }
}

/* Prevent layout shift from fonts */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Optimize iframe loading */
iframe {
    loading: lazy;
    importance: low;
}

/* Reduce paint on scroll */
.nav {
    position: sticky;
    top: 0;
    contain: layout style;
}

/* Optimize transitions */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduce complexity on low-end devices */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
    .hero__slider {
        animation-duration: 8s;
    }
}

/* Optimize calendar grid */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
    contain: strict;
}

/* Prevent CLS (Cumulative Layout Shift) */
.hero {
    min-height: 100vh;
}

.section {
    min-height: 400px;
}

/* Optimize form rendering */
.form-group {
    contain: layout style;
}

/* Reduce reflow */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    contain: layout;
}

/* Optimize footer rendering */
.footer__content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    contain: layout style;
}

/* Prevent font loading shift */
@font-face {
    font-family: 'Poppins';
    src: local('Poppins');
    font-display: swap;
    size-adjust: 100%;
}

/* Optimize critical path */
.nav,
.hero {
    contain: layout style paint;
}