/* ==========================================
   1. TABLET LANDSCAPE (max-width: 1024px)
   ========================================== */
@media (max-width: 1024px) {
    .grid-services, .grid-projects {
        margin-top: 20px;
    }
    .service-card {
        flex: 1 1 calc(50% - 20px);
        padding: 20px 20px;
    }

    .carousel-btn {
        display: none;
    }

    .project-detail {
        padding: 10px;
    }
    .nav-arrow {
        display: none;
    }
}

/* ==========================================
   2. TABLET PROTRAIT (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {
    .burger-menu {
        display: flex; /* Apparaît sur petit écran */
        position: fixed;   /* Il ne bouge plus au scroll */
        top: 40px;
        right: 40px;
    }
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%; /* Caché à droite par défaut */
        height: 100vh;
        width: fit-content; 
        min-width: 200px;
        background: linear-gradient(135deg, rgba(10, 10, 10, 0.8) 0%, rgba(20, 10, 30, 0.8) 100%);
        backdrop-filter: blur(15px) saturate(150%); /* Saturation pour booster les couleurs derrière */
        /* Ombre portée blanche/bleutée très diffuse sur la gauche */
        box-shadow: -10px 0 30px rgba(255, 255, 255, 0.05), 
                    -2px 0 5px rgba(255, 255, 255, 0.1);
        /* Une petite bordure fine pour le côté "fini" */
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 100px;
        padding-left: 40px;
        padding-right: 60px;
        align-items: center;
        transition: 0.4s ease-in-out;
        z-index: 50;
    }
    /* Classe qui sera ajoutée par JS */
    .nav-links.active {
        right: 0; /* Entre sur l'écran */
    }
    .nav-links li {
        margin: 20px 0;
    }
    /* Animation du burger en "X" quand actif */
    .burger-menu.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .burger-menu.active span:nth-child(2) { opacity: 0; }
    .burger-menu.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .hero h1 {
        letter-spacing: 2px;
    }
    .hero-simple h1 {
        letter-spacing: 2px;
    }

    .grid-services, .grid-projects {
        margin-top: 40px;
    }
    .service-card {
        padding: 40px 20px;
    }

    .footer-block h3 {
        font-size: 1rem;
    }
    .footer-block p {
        font-size: 0.8rem;
    }
    .footer-block a {
        font-size: 0.8rem;
    }
    .copyright p {
        font-size: 0.6rem;
    }

    .project-detail {
        padding: 10px;
    }
    .nav-arrow {
        display: none;
    }
}