/* =========================================
   RESPONSIVE FLUIDE & LUXE
   ========================================= */

@media (max-width: 1200px) {
    .container { width: 94%; }
    .hero h1 { font-size: 3rem; }
    .kiosk-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .videos-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}

@media (max-width: 992px) {
    .mobile-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;
        width: 44px;
        height: 44px;
        cursor: pointer;
        z-index: 1001;
        background: transparent;
        border: none;
        align-items: flex-end;
    }
    
    .mobile-toggle .bar {
        width: 28px;
        height: 2.5px;
        background: var(--text-main);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
        border-radius: 4px;
    }

    .mobile-toggle.active .bar1 { transform: translateY(8.5px) rotate(45deg); background: var(--color-rose); }
    .mobile-toggle.active .bar2 { opacity: 0; transform: translateX(10px); }
    .mobile-toggle.active .bar3 { transform: translateY(-8.5px) rotate(-45deg); background: var(--color-rose); }

    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 40px;
        gap: 25px;
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1000;
        box-shadow: -15px 0 40px rgba(0, 0, 0, 0.08);
    }
    
    .nav-links.active { transform: translateX(0); }
    
    .nav-links a {
        font-size: 1.15rem;
        font-weight: 700;
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(11, 15, 23, 0.6);
        backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }

    .mobile-overlay.active { opacity: 1; pointer-events: auto; }
    
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .videos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .contact-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 768px) {
    .section-padding { padding: 50px 0; }
    .section-title { font-size: 2rem; }
    
    .hero { min-height: 75vh; padding: 90px 15px 50px; }
    .hero h1 { font-size: 2.2rem; line-height: 1.2; margin-bottom: 15px; }
    .hero p { font-size: 0.98rem; margin-bottom: 25px; }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        padding: 10px 20px;
        font-size: 0.82rem;
    }
    
    .news-grid, .kiosk-grid, .videos-grid, .contact-cards-grid { grid-template-columns: 1fr; gap: 20px; }
    .contact-pro-form .form-row { grid-template-columns: 1fr; gap: 0; }
    .contact-form-wrapper { padding: 25px 20px; }
    .search-box { display: none; }
    
    /* Responsive FAQ */
    .faq-section { padding: 50px 0; }
    .faq-title { font-size: 2rem; margin-bottom: 1.5rem; }
    .faq-question { padding: 1.1rem; font-size: 1rem; }
    .faq-answer { padding: 0 1.1rem 1.1rem 1.1rem; font-size: 0.88rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.85rem; }
    .section-title { font-size: 1.65rem; }
    .kiosk-img-wrapper, .news-img-wrapper { height: 260px; }
    .social-circles-container { gap: 15px; }
    .social-circle { width: 52px; height: 52px; font-size: 1.3rem; }
    
    /* Tweaks très petit écran pour FAQ et Footer */
    .faq-title { font-size: 1.65rem; }
    .faq-question { font-size: 0.95rem; }
    .compact-footer { padding: 0.85rem; }
    .footer-email { font-size: 0.82rem; }
}