/* =====================================================
   B&L DATA SECURITY - Version 1.0 (Responsive)
===================================================== */

/* 1. TABLETTES ET ÉCRANS INTERMÉDIAIRES (Moins de 992px) */
@media (max-width: 992px) {
    section {
        padding: 60px 0;
    }

    h2 {
        font-size: 28px;
    }

    .hero-content p {
        font-size: 1.1rem;
    }
}

/* 2. SMARTPHONES (Moins de 768px) */
@media (max-width: 768px) {
    /* Ajustements globaux */
    .container {
        width: 92%;
    }

    /* Menu de navigation mobile */
    header {
        padding: 15px 0;
    }

    header .container {
        flex-direction: column;
        gap: 15px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    nav ul li a {
        padding: 8px 12px;
        font-size: 15px;
    }

    /* Structure des grilles (Cartes, Zone, Footer) */
    .cards, 
    .zone-list, 
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .card {
        padding: 30px 20px;
    }

    /* Section Hero */
    .hero {
        min-height: 70vh;
        padding: 60px 15px;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        gap: 12px;
    }

    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 14px 20px;
    }

    /* Formulaire de Contact */
    .contact-form form {
        gap: 12px;
    }

    .contact-form input,
    .contact-form textarea {
        padding: 12px;
    }

    /* Footer Bas */
    .footer-links {
        gap: 10px;
    }
    
    .footer-col {
        text-align: center;
    }
}