/* css/responsive.css */
@media (max-width: 768px) {
    /* CORRECTION DU RECTANGLE NOIR SUR LE LOGO */
    header {
        /* On désactive le flou qui casse la transparence du logo */
        backdrop-filter: none;
        background: rgba(15, 23, 42, 0.95);
    }

    header .container { padding: 0 20px; }
    
    .nav-links {
        position: absolute;
        right: 0px;
        top: var(--header-height);
        height: calc(100vh - var(--header-height));
        background-color: var(--dark-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 40px;
        gap: 30px;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        border-top: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 10px 10px rgba(0,0,0,0.05);
        z-index: 999;
    }

    .nav-links li { opacity: 0; }
    .burger { display: block; }
    .nav-active { transform: translateX(0%); }

    @keyframes navLinkFade {
        from { opacity: 0; transform: translateX(50px); }
        to { opacity: 1; transform: translateX(0); }
    }

    .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
    .toggle .line2 { opacity: 0; }
    .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }

    .hero {
        padding: 120px 0 100px 0;
        min-height: auto;
        background-attachment: scroll;
    }

    .hero h1 { font-size: 2.2rem; }
    
    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 20px;
    }

    .btn-secondary { 
        margin-left: 0; 
        width: 100%;
        max-width: 280px;
    }
    .btn-primary { width: 100%; max-width: 280px; }
    
    .header-content { justify-content: space-between; }
    
    .simulator-form { flex-direction: column; align-items: stretch; }
    .input-group { width: 100%; }
    
    .contact-box { padding: 40px 20px; }

    .pricing-card { flex-direction: column; }
    
    .pricing-header {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        align-items: center;
        text-align: center;
        padding: 40px 20px;
    }

    .pricing-body { padding: 30px 20px; }

    .calculation-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .opt2-layout {
        flex-direction: column-reverse;
        text-align: center;
        gap: 30px;
    }
    
    .pricing-features { margin: 0 auto; }
    
    .price-tag { text-align: center; min-width: auto; }

    .logo {
        height: 100px; 
        margin-top: 5px;
    }
    
    .services-grid, .advantages-grid {
        flex-direction: column !important; 
        align-items: center;
    }

    .advantage-item, .card, .pricing-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px; 
        flex: none !important; 
    }
    
    .container { overflow-x: hidden; }
}