html {
	scroll-behavior: smooth;
}

/* Icône interactive du menu */
label{
     width: 40px;
     cursor: pointer;
     position: fixed;
     margin: 40px;
     z-index: 5;
}
/* Case à cocher pour ouvrir le menu */
input[type="checkbox"]{
     display: none;
}
/* Ensembles des barres du menu */
.barre{
  position: absolute;
  top:10px;
  left:20px;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 80px;
  cursor: pointer;
}
/* Barre du milieu */
.hamburger
{
  width: 40px;
  height: 4px;
  background: #fff;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(67,67,67,1);
  transition: .5s;
}
/* Barres autour de la principale */
.hamburger:before, .hamburger:after
{
  content: '';
  position: absolute;
  width: 40px;
  height: 4px;
  background:#fff;
  box-shadow: 0 2px 5px rgba(67,67,67,1);
  transition: .5s;
}
/* Barre du haut */
.hamburger:before
{
  top: -10px;
}
/* Barre du bas */
.hamburger:after
{
  top:10px;
}
/* Barre du milieu après clic */
.barre.active .hamburger
{
  background: rgba(0,0,0,0);
  box-shadow: 0 2px 5px rgba(67,67,67,0);
}
/* Barre du haut après clic */
.barre.active .hamburger:before
{
  top: 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 5px rgba(67,67,67,0);
}
/* Barre du bas après clic*/
.barre.active .hamburger:after
{
  top: 0;
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(67,67,67,0);
}

/* Barre de navigation */
nav{
     background-color: rgba(0, 133, 117.5);
     width:120px;
     left: -120px;
     position: fixed;
     transition: all .5s;
     z-index: 4;
     -webkit-border-radius: 0 0 40px 0;
     border-radius: 0 0 40px 0;
}
/* Barre de navigation lors de l'ouverture */
input[type="checkbox"]:checked ~ nav{
     transform: translateX(120px);
}
/* Liste de la barre de navigation */
nav ul{
     display: block;
     margin-top: 90px;
     margin-bottom: 40px;
}
/* Lien de la barre de navigation */
nav a{
     display: block;
     padding: auto;
     padding-top: 10px;
     padding-bottom: 10px;
     text-align: center;
     color: #ffffff;
     font-size: 15px;
     text-decoration: none;
     text-transform: uppercase;
     font-family: 'Roboto', sans-serif;
     font-weight: 700;
     font-size: 15pt;
}
/* Lien de la barre de navigation survolé */
nav div ul li:hover > a:first-of-type{
     background-color:white;
     color: #008575;
}

/* Lien courrant de la page visité */
nav a.current{
	 background-color: #ff5e0e;
}

/* Lien courrant de la page visité survolé */
nav div ul li:hover > a.current:first-of-type{
	 color: #ff5e0e;
}


/* Image du logo dans la barre de navigation */
nav li img{
     display: block;
     margin: auto;
     margin-top: 10px;
     margin-bottom: 10px;
     width:90px;
	 height: 90px;
}

/* Grande catégorie */
nav div ul li {
  display:flex;
}

/* Lien grande catégorie DYN */
nav div ul li:nth-of-type(2) a{
  padding-left:  2.25em;
  padding-right: 1.79em;
}

/* Lien grande catégorie COM */
nav div ul li:nth-of-type(3) a{
  padding-left:  2em;
  padding-right: 1.775em;
}

/* Sous menu caché */
nav div ul li > div{
	display:flex;
	flex-direction: row;
}

/* Catégories du sous-menu */
nav div ul li > div div{
  display:none;
}

/* Lien catégories du sous-menu */
nav div ul li:nth-of-type(2) > div div a, nav div ul li:nth-of-type(3) > div div a{
	background-color:#008575;
	color: white;
	padding-left:  1em;
    padding-right: 1em;
	text-transform: capitalize;
}

/* Segment arrondi à la fin des catégories du sous-menu */
nav div ul li > div div:last-of-type a{
	-webkit-border-radius: 0 0 40px 0;
	border-radius: 0 0 40px 0;
}

/* Lien catégories du sous-menu survolé */
nav div ul li > div div a:hover{
	background-color:white;
	color: #008575;
}

/* Catégories du sous menu lors du survolement */
nav div ul li:hover > div div{
display: block;
}