/* * MS-GROUP AFRIQUE (MSGA) - Fichier responsive.css
 * Thème : Business Premium (Blanc & Bleu Royal)
 * Mise à jour : 6 Avril 2026
 */

/* 1. TABLETTES ET GRANDS MOBILES (Max 1024px) */
@media screen and (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }

    .contact-grid, .about-grid {
        gap: 40px;
    }
}

/* 2. PETITES TABLETTES (Max 992px) */
@media screen and (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .service-block {
        gap: 40px;
    }

    .service-info h2 {
        font-size: 2rem;
    }
}

/* 3. MOBILES STANDARDS (Max 768px) */
@media screen and (max-width: 768px) {
    /* Navigation Mobile (Menu Tiroir) */
    .nav-links {
        position: fixed;
        right: -100%;
        top: 0;
        height: 100vh;
        width: 80%;
        background: var(--white); 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: var(--transition);
        box-shadow: -10px 0 30px rgba(0, 86, 179, 0.15); 
        z-index: 999;
    }

    .nav-links.nav-active {
        right: 0;
    }

    .nav-links li {
        margin: 25px 0;
        opacity: 0; /* Animé via JS */
    }

    .burger {
        display: block;
        cursor: pointer;
        z-index: 1001;
    }

    .burger div {
        width: 28px;
        height: 3px;
        background-color: var(--gold); 
        margin: 6px;
        border-radius: 5px;
        transition: var(--transition);
    }

    /* Hero Section Mobile */
    .hero {
        padding: 0 20px;
        height: 90vh; /* Ajusté pour éviter les problèmes de barre d'adresse mobile */
    }

    .hero-content h1 {
        font-size: 2.2rem;
        line-height: 1.3;
    }

    .hero-btns {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .btn-outline {
        margin-left: 0;
    }

    /* Sections de contenu */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-block, .service-block.reverse {
        flex-direction: column;
        text-align: center;
        padding: 60px 0;
    }

    .service-image {
        order: 2;
        margin-top: 30px;
    }

    .service-info {
        order: 1;
    }

    .service-list li {
        justify-content: center;
    }

    /* Contact & Formulaire */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .contact-form-container {
        padding: 30px 20px;
    }
}

/* 4. PETITS MOBILES (Max 480px) */
@media screen and (max-width: 480px) {
    .navbar {
        padding: 10px 5%;
    }

    .navbar .logo {
        font-size: 1.1rem;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 2rem;
    }

    /* Optimisation des boutons pour le pouce */
    .btn-gold, .btn-outline, .btn-gold-full {
        width: 100%;
        text-align: center;
        padding: 16px 20px;
    }

    .stat-item h3 {
        font-size: 3rem;
    }

    .footer-content {
        gap: 40px;
    }
}

/* 5. FIX POUR LES ECRANS LANDSCAPE MOBILES */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero { height: auto; padding: 100px 0; }
    .nav-links { overflow-y: auto; padding: 50px 0; }
}
@media (max-width: 1100px) {
    .nav-links {
        gap: 15px; /* On réduit l'espace entre les liens avant de passer au burger */
    }
    .logo-text {
        font-size: 0.9rem;
    }
}

@media (max-width: 992px) {
    .navbar {
        top: 0; /* On colle la navbar en haut sur tablette/mobile */
        height: 70px;
    }
    .top-bar {
        display: none; /* On cache la top-bar pour gagner de l'espace */
    }
}