nav.responsive { position: relative; z-index: 9999; }
#nav_menu {
    position: fixed; top: 0; left: -305px; width: 305px; height: 100vh;
    background: #333; z-index: 9999; overflow-y: auto;
    visibility: hidden; /* inatteignable au clavier quand fermé */
    transition: left .3s ease, visibility 0s linear .3s;
}
body.menu-open #nav_menu {
    left: 0; visibility: visible;
    transition: left .3s ease, visibility 0s;
}
.nav-close-item { list-style: none; text-align: right; }
.nav-close-btn { background: none; border: 0; color: #fff; font-size: 22px; padding: 10px 15px; cursor: pointer; }
.nav-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 9998; display: none; }
body.menu-open .nav-overlay { display: block; }
.hamburger button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }

/* ===== Lien d'évitement ===== */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; padding: 8px 12px; }
.skip-link:focus { left: 0; }

/* ===== Bannière de recherche ===== */
.top-banner { position: relative; z-index: 1; }
.top-banner .btn.btn-default { flex-direction: column; }
.select-group { position: relative; z-index: 1; }
.select-group.open, .select-group:hover { z-index: 1000 !important; }
.dropdown-menu { z-index: 1001 !important; background: #fff !important; }

@media (max-width: 369px) {
    .banner-search .btn-my-position-desktop { display: none !important; }
    .banner-search .btn-my-position-mobile {
        background-color: #FFF; color: #777 !important; border: 0; font-size: 16px; font-weight: 400;
        width: 100%; text-align: left; padding: 10px; height: 58px; border-radius: 5px; margin-bottom: 10px;
    }
    .banner-search .btn-my-position-mobile span,
    .banner-search .btn-my-position-mobile i { color: #000; text-align: left; }
    .top-banner { height: 500px; }
    .top-banner .banner-search { width: 100%; height: 450px; }
    .top-banner .banner-search > form.banner-search-form > .input-group,
    .banner-search-form .input-group,
    .banner-search .select-group,
    .banner-search-form { width: 100%; }
    .banner-search .btn-primary { width: 100%; margin-top: 10px; }
}
@media (min-width: 370px) {
    .banner-search .btn-my-position-mobile { display: none !important; }
}
@media (min-width: 770px) and (max-width: 1058px) {
    .top-banner .banner-search > form.banner-search-form > .btn.btn-primary { padding: 5px !important; }
}

/* ===== Réseaux sociaux (mobile) ===== */
@media (max-width: 768px) {
    .socialMedia.header { display: flex; gap: 5px; justify-content: center; align-items: center; }
    .socialMedia.header a {
        transform: translateZ(0); backface-visibility: hidden;
        transition: background-color .3s ease, opacity .3s ease;
        -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
        -webkit-user-select: none; user-select: none;
    }
    .socialMedia.header a:hover, .socialMedia.header a:focus { background: #8a0c63; opacity: .9; }
}

/* ===== Copyright ===== */
.copyright { background: #222; color: #ccc; padding: 15px 0; text-align: center; border-top: 1px solid #333; margin-top: 0; }
.copyright p { margin: 0; font-size: 14px; }
.copyright a { color: #ccc; text-decoration: none; }
.copyright a:hover { color: #fff; text-decoration: underline; }


@media (max-width: 500px) {
    .mobile-footer-hidden {
        display: block;
    }
   
    
    .desktop-footer {
        display: none;
    }
}

@media (min-width: 501px) {
    .mobile-footer-hidden {
        display: none;
    }
    
    .desktop-footer {
        display: block;
    }
}

/* Styles pour le footer mobile compact */
footer.mobile-footer-hidden {
    background: #333;
    color: white;
    padding: 20px 0;
    padding-bottom:900px !important;
    height:500px !important;
}

.mobile-footer-hidden .mobile-compact h2 {
    font-size: 16px;
    margin-bottom: 15px;
    color: white;
}

.mobile-footer-hidden .mobile-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-footer-hidden .mobile-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    padding: 5px 0;
}

.mobile-footer-hidden .mobile-links a:hover {
    color: white;
}

.mobile-footer-hidden .mobile-social {
    margin-top: 15px;
}

.mobile-footer-hidden .mobile-social a {
    margin: 0 10px;
    font-size: 20px;
}
.copyright {
    background: #222;
    color: #ccc;
    padding: 15px 0;
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 0;
}

.copyright p {
    margin: 0;
    font-size: 14px;
}

.copyright a {
    color: #ccc;
    text-decoration: none;
}

.copyright a:hover {
    color: white;
    text-decoration: underline;
}


/* ===== Bascule desktop / mobile à 900px ===== */
@media (max-width: 999px) {
    .computer, #header-computer, nav.computer { display: none !important; }
    #header-mobile, nav.responsive { display: block !important; }
    .hamburger button {
    background: none;
    border: 0;
    padding: 5%;
    color: inherit;
    cursor: pointer;
}
}
@media (min-width: 1000px) {
    #header-mobile, nav.responsive { display: none !important; }
    #header-computer { display: block !important; }
}

@media(max-width:999px){

            @media(min-width:769px){
                 .socialMedia.header {
                    display: fixed !important;
                    gap: 8px !important;
                    align-items: right !important;
                   margin-top:-70px;
                   padding-right: 10%;
                      
             }

              #nav_menu li, #nav_menu li a {
                            text-align: left;
                            width: 100%;
                            color: #111;
                            display: inline-block;
                        }
            }
             @media(max-width:768px){
                 
                   .socialMedia.header {
                    display: flex !important;
                    gap: 5px !important;
                    justify-content: center !important;
                    align-items: center !important;
                    }
             
            }
           



         .socialMedia.header a {
    
    
    
        /* Stabilisation */
        transform: translateZ(0);
        backface-visibility: hidden;
        will-change: background-color, opacity;
        transition: background-color 0.3s ease, opacity 0.3s ease;
    
        /* Mobile */
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        }

    .socialMedia.header a:hover,
    .socialMedia.header a:focus {
    background: #8a0c63;
    opacity: 0.9;
}
}