/* ============================================================
       RÉSEAUX SOCIAUX - STYLES DE BASE
    ============================================================ */
.navbar-social-links {
    display: none;
}

.navbar-social-links .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.navbar-social-links .social-link:hover {
    transform: scale(1.1);
    color: #fff;
}

.navbar-social-links .social-link.whatsapp {
    background: #25d366;
}

.navbar-social-links .social-link.telegram {
    background: #0088cc;
}

.navbar-social-links .social-link.youtube {
    background: #ff0000;
}

.navbar-social-links .social-link.facebook {
    background: #1877f2;
}

.navbar-social-links .social-link.tiktok {
    background: #000000;
}

.navbar-social-links .social-link.twitter {
    background: #000000;
}

.navbar-social-links .social-link.linkedin {
    background: #0a66c2;
}

.navbar-social-links .social-link.instagram {
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
}

/* ============================================================
       MENU MOBILE PLEIN ÉCRAN
       (remplace entièrement le comportement Bootstrap collapse)
    ============================================================ */
@media (max-width: 991.98px) {
    /* Le toggler et le brand restent cliquables par-dessus l'overlay */
    .navbar-toggler,
    .navbar-brand {
        position: relative;
        z-index: 1060;
    }

    .navbar-toggler {
        z-index: 99999;
    }

    /* Overlay plein écran */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh !important;
        max-height: 100vh;

        /* Fond totalement opaque — masque le site */
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        /* Glissement depuis la droite */
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);

        z-index: 9999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Espace pour la navbar en haut + padding bas */
        padding: 72px 0 32px;

        display: flex !important;
        flex-direction: column;
    }

    /* Bootstrap ajoute .show lors de l'ouverture */
    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* ---- Navigation items ---- */
    .navbar-nav {
        width: 100%;
        flex-direction: column;
        padding: 0;
    }

    .navbar-nav .nav-item {
        width: 100%;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
    }

    .navbar-nav .nav-link {
        padding: 15px 20px;
        font-size: 16px;
        color: #111 !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .navbar-nav .nav-link.active {
        color: #0d6efd !important;
        font-weight: 500;
    }

    /* ---- Dropdowns statiques dans le menu mobile ---- */
    .navbar-nav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: rgba(0, 0, 0, 0.03);
        border-left: 3px solid #0d6efd;
        margin: 0 0 0 20px;
        padding: 0;
        /* Toujours visible sur mobile — pas de display:none à déjouer */
        display: block !important;
    }

    .navbar-nav .dropdown-menu .dropdown-item {
        padding: 12px 16px;
        font-size: 14px;
        color: #555;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
    }

    .navbar-nav .dropdown-menu .dropdown-item.active,
    .navbar-nav .dropdown-menu .dropdown-item:active {
        background: transparent;
        color: #0d6efd;
        font-weight: 500;
    }

    /* ---- Bouton Soutenir ---- */
    .nav-link.fw-bold.text-white.bg-primary {
        display: block;
        text-align: center;
        margin: 20px 20px 0;
        border-radius: 10px !important;
        padding: 14px 20px !important;
        font-size: 16px;
    }

    /* ---- Widget Google Translate ---- */
    .navbar-nav .nav-item.nav-link {
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.07);
        padding: 10px 20px;
    }

    /* ---- Réseaux sociaux — collés en bas ---- */
    .navbar-social-links {
        display: flex !important;
        justify-content: center;
        padding: 20px 0;
        gap: 12px;
        border-top: 0.5px solid rgba(0, 0, 0, 0.08);
        margin-top: auto;
        /* pousse vers le bas */
    }

    .navbar-social-links .social-link {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/* ============================================================
       DESKTOP — comportement inchangé
    ============================================================ */
@media (min-width: 992px) {
    .navbar-social-links {
        display: none !important;
    }

    .nav-link.fw-bold.text-white.bg-primary {
        margin-left: 10px;
    }
}