/*--------------------------------   Menu Général   ---------------------------------*/

.page-actuelle
{
    color: rgb(25, 118, 210);
    text-decoration: none;
}
.menu-statique
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-color: rgb(100, 181, 246);
    margin: 0;
    padding: 0;
    position: sticky;
    list-style: none;
    top: 0;
    overflow: hidden;
    z-index: 1000;
    border-bottom:solid 0.8vh rgb(25, 118, 210);
    width: 100%;
    height: 9vh;
}

.menu-statique li
{
    padding-bottom: 1%;
    padding-top: 1%;
}

.menu-statique li:first-child
{
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 3%;
}

.menu-statique li img
{
    width: 100%;
    border-radius: 100%;
}

.menu-navigation
{   
    position: fixed;
    overflow: hidden;
    top: 9.7vh;
    font-family: Georgia, 'Times New Roman', Times, serif;;
    font-size: 4vh;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: rgb(100, 181, 246);
    margin: 0;
    padding: 0;
    width: 0;
    height: 91.3%;
    transition: width 0.5s ease;
    z-index: 2000; 
}

.menu-navigation li a:not(.page-actuelle)
{
    color: rgb(250,250,248);
    text-decoration: none;
}

/*Sélectionne les élément li impair.*/
.menu-navigation li:nth-child(odd) 
{
    width: 100%;
    text-align: center;
}

.divider
{ 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 0;
    padding: 0;
}

.divider img
{
    width: 100%;
    display: block;
    margin: auto;
}

/*--------------------------------   Affichage second menu   ---------------------------------*/

 .icone-menu 
 {
  display: inline-block;
  cursor: pointer;
  padding-left: 0;
  padding-right: 0;
  margin-right: 3%;
}

.barre1, .barre2, .barre3 
{
  width: 12vmin;
  height: 2vmin;
  background-color: rgb(25, 118, 210);
  margin: 1.5vw auto;
  transition: 0.4s;
}

/* Rotation Première barre */
.change .barre1 {
  transform: translate(0, 3.5vw) rotate(-45deg);
}

/* Disparition Seconde Barre */
.change .barre2 
{
    opacity: 0;
}

/* Rotation Troisième Barre*/
.change .barre3 
{
  transform: translate(0, -3.5vw) rotate(45deg);
}


/* Quand le menu est ouvert */
.menu-navigation.open 
{
  width: 100%;     
}

/* Pour éviter le scroll du corps quand le menu est ouvert */
body.menu-open 
{
  overflow: hidden;
}