/* Menu */
.topnav {
    overflow: hidden;
    background-color: var(--object-background-color);
}

.topnav ul {
    margin: 0;
}

.topnav img,
.topnav li {
    float: left;
    display: block;
}

.topnav .has-submenu {
    cursor: pointer;
}

.topnav li {
    color: #f2f2f2;
    text-align: center;
    font-size: 17px;
}

.topnav a, .topnav .has-submenu {
    color: #f2f2f2;
    padding: 14px 16px;
    text-decoration: none;
}

.topnav a:hover {
    background-color: #b8be05;
}

.topnav li.current {
    background-color: var(--color-selected);
    color: white;
}

.topnav .icon {
    display: none;
}

/*
/* Gestion des sous-menu 
/*
/**/

/* Masquer les sous-menus par défaut */
.topnav ul ul {
    padding: 0;
    display: none;
    background-color: #c9cf00;
    min-width: 160px;
}

/* Afficher les sous-menus au survol, ou sur activation du parent */
.topnav ul li:hover>ul, .topnav ul li>ul.active {
    display: block;
}

@media screen and (max-width: 600px) {
    .topnav ul li {
        display: none;
    }

    .topnav ul li ul:not(.active) li {
        display: none;
    }

    .topnav .icon {
        font-size: 20px;
        padding: 14px 16px;
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive>ul {
        padding-top: 50px;
    }

    .topnav.responsive a,
    .topnav.responsive li {
        float: none;
        display: block;
        text-align: left;
    }

    /*
    /* Gestion des sous-menu 
    /*
    /**/
    .topnav ul ul {
        width: 100%;
    }
}

@media screen and (min-width: 601px) {

    /* Positionnement des sous-menus */
    .topnav ul ul {
        position: absolute;
        z-index: 1;
    }

    .topnav ul ul li {
        float: none;
        text-align: left;
    }

    /* Pour éviter que le sous-menu dépasse du conteneur */
    .topnav ul ul ul {
        top: 0;
        left: 100%;
    }

    .topnav a, .topnav .has-submenu {
        display: block;
    }
}