.header{
    position: absolute;
    display: flex;
    flex:1;
    height: auto;
    width: 100%;
    padding-top: 50px;
    font-size: medium;
}

.bottom-header{
    position: absolute;
    bottom: 0px;
    display: inline-block;
    height: 50px;
    text-align: center;
    width: inherit;
}

.sous-menu ul {
	display: none; /** Cache les sous-boutons de la classe categorie */
	position: absolute; /** Permet de ne pas faire bouger la page lorsque les sous-boutons apparaissent */
	top: 100%;
    padding: 0;
	margin: 0;
	list-style: none;
    text-align: right;
}

/**
Permet d'afficher les sous-boutons lorsqu'on passe la souris sur le bouton correspondant à la classe categorie
*/
.sous-menu:hover ul {
	display: block;
}

.sous-menu-ul {
	width: 12%;
}

.btn {
	padding: 1em;
	font-size:30px;
    Color:RGB(48,55,63);
    text-decoration: none;
    border: none;
    background-color : transparent;
    cursor: pointer;
}

.principale{
    position: relative;
    width: 100%;
    padding:3%;
    height: 46px;
}

.principale:hover,.secondaire:hover {
    Color:RGB(214,222,232);
    text-decoration: underline;
    
}

.secondaire{
    padding: 10%;
    padding-right: 30px;
    width: 100%;
    font-size:30px;
    background-color: rgba(0,130,255,0.95);
}

.nav{
    display: inline-block;
    margin:0% 0.5%;
    padding-bottom: 0.5%;
}

.active {
    Color:RGB(214,222,232);
}

.bg-cover{
    background-color: RGB(0,130,255);
    min-height: 100px;
    height: auto;
}
.principale, .secondaire{
    font-size: x-large;
}

.icone-navbar ,.btn i{
    display: none;
}

.img-header{
    margin-left: auto;
    margin-right: auto;
    width: 300px;
    height: auto;
}

@media screen and (max-width: 670px) {
    .icone-navbar{
        background-image: url(/photo/hamburger.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        width:40px;
        height: 50px;
    }
    .bottom-header .nav{
        display: none;
    }
    .principale:hover,.secondaire:hover {
        Color:RGB(0,130,255);
        text-decoration: none;
    }
    .active {
        Color:RGB(0,130,255);
    }
    .btn i{
        display: initial;
    }
    .secondaire{
        width: 96%;
    }
    
}

@media screen and (max-width: 670px) {
    .responsive {
        display:flex;
        flex-direction: column;
        box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
        height: 100vh;
        width: 100%;
        position: fixed;
        justify-content: center;
        background-color: white;
    }
    .responsive .nav {
        display: flex;
    }

    .responsive .icone-navbar{
        background-image: url(/photo/remove-button.png);
        display: flex;
        min-height: 46px;
        margin-left: auto;
        margin-right: auto;
    }

    .sous-menu-actif{
        display:flex;
        flex-direction: column;
    }

    .sous-menu-actif .btn{
        display: block;
    }

    .sous-menu-actif ul{
        display: block;
        position: inherit;
    }

    .sous-menu-actif li .btn{
        display: block;
        padding: 2%;
        margin: 2%;
        background-color: white;
    }

    .sous-menu-actif i{
        display: none;
    }

}