.gauche{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 33vw;
    background-color: rgb(108,108,108);;
  	text-align: center;
    position: fixed;
    height: 100%;
    border-right: 1px solid #cfcfcf;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.73, 0.11, 0.67, 0.84);
    z-index: 10;
    overflow-y: scroll;
}
.gauche.active {
    transform: translate(0);
}
.gauche_header a{
    text-decoration: none;
}
.nav-toggler {
    position: relative;
    z-index: 10;
    /*top: 10px;
    left: 10px;*/
    height: 50px;
    width: 50px;  
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}
.line {
    position: absolute;
    display: block;
    width: 100%;
    height: 3px;
    background: red/*#f1f1f1*/;
    transition: transform 0.3s ease-out,
    opacity 0.1s ease-out;
}

.nav-toggler:not(.active):hover .line{
    height: 4px;
    box-shadow: 2px 2px 2px white;
}
.nav-toggler.active:hover .line{
    height: 5px;
}

.l1 { transform: translateY(-10px)}
.l3 { transform: translateY(10px)}
.nav-toggler.active .l1 { transform: translateY(0px) rotate(135deg);}
.nav-toggler.active .l2 { opacity: 0; }
.nav-toggler.active .l3 { transform: translateY(0px) rotate(-135deg);}

.gauche_header{
	background: linear-gradient(0.25turn, black, white, black);
}

.gauche img{width: 40%;}
nav{ width: 50%;  margin: auto; min-width: 200px; max-width: 300px;}
nav ul {margin: 10px auto 10px auto;}
nav ul li{	list-style: none; width: 80%; height: 25px; margin: 5px auto 0px auto; background-color: white; border-radius: 2px; border: 1px solid red; color: red;}
nav ul li[data-nb]{width: 60%;}
nav ul li a{text-decoration: none; color: red;display: block; }			
nav ul li:hover{ background: linear-gradient(45deg, red, red, red, white); border: 1px solid white; color: white; cursor: pointer; }
nav ul li:hover a{color: white;}
nav ul li[title^="  "]{ background: linear-gradient(45deg, red, red, red, white); color: white; border: 1px solid white; }
nav ul li[title^="  "] a{color: white;}
/*La page qui est ouverte est celle dont le title du nav li commence par deux blancs*/


.anciennete{margin: 10px auto; width: 50%; border: 1px solid white; border-radius: 2px; box-shadow: 3px 3px 3px white;
        background-color: silver; padding: 2px; color: rgb(0,102,153); font-style: italic; font-size: 1rem; font-weight: bold; cursor: help;}

.bulle{ display: table; width: 80%; border: 1px solid white; border-radius: 2px; box-shadow: 3px 3px 3px white;
		background-color: silver; padding: 2px; color: rgb(0,102,153); font-style: italic; font-size: 1rem; cursor: help;}

.bulle_menu{margin: 10px auto; min-height: 100px;}
.bulle_menu span{ display: table-cell; min-height: 100px; vertical-align: middle; }

.gauche_footer{
	background-color: red;
	color: white;
}

.gauche_footer div{text-align: center;}
.gauche_footer div a{text-decoration: none; font-weight: bold; color: white;}
.gauche_footer div a:hover{color: white;}

@media screen and (max-width: 900px){
	.bulle_menu {  display: none;	}
    .gauche {      width: 75vw; }
    nav {          width: 80%;}
}

li[title^="Des outils"], li[title^="Calendrier"]{
    display: none;
}