:root {
  /*CHANGER LA FONT SIZE MODIFIE LA TAILLE DE TOUS LES ELEMENTS*/
  --text-primary: #FFFFFF;
  --text-secondary: #141418;
  --navbar-close-size: 3.5em;
  --navbar-open-size: 16em;
  --menu_colums_size: 14em;
  /*--menu_colums_bg_color: #EEEEEE;*/
  --menu_colums_bg_color: #F6F6F6;
  --menu-icon-size: 1.3em;
  --rightbar-open-size: 20%;
  --navbar-primary: #1E59A1;
  --navbar-hover: #4D91D0;
  --bg-secondary: #141418;
  --transition-speed: 600ms;
}

body {
  margin: 0;
  padding: 0;
}

/*LA TAILLE DU MENU DE DROITE*/
.divlien2{
  width: var(--rightbar-open-size);
}




#btnControl {
  display: none;
  /*PERMET DE RENDRE INVISIBLE LA CHECKBOX */
}

.divlien .navbar {
  width: var(--navbar-open-size);
}
/*#btnControl:checked+.divlien .navbar {
  width: var(--navbar-open-size);
}
*/


  /*#btnControl:checked+.divlien #menuIcon {
    animation: rotation 200ms ease;
    animation-fill-mode: forwards;*/
    /*MAINTIENT L'IMAGE SUR SA POSITION FINALE */
  /*}*/

 /* #btnControl:checked+.divlien .menu_list {
    margin-left: var(--navbar-open-size);
  } */
  .divlien .menu_list {
    margin-left: var(--navbar-open-size);
  }



/*  #btnControl:checked ~ #DivContenu {
    margin-left: var(--navbar-open-size);
    width: calc(100% - var(--navbar-open-size));
    animation-fill-mode: forwards;
  }*/


#DivContenu {
  margin-left: var(--navbar-open-size);
  width: calc(100% - var(--navbar-open-size));
  animation-fill-mode: forwards;
}

    #DivContenu .divlien2 {
      transition-duration: 200ms;
    }
  
  #btnControl:checked ~ #DivContenu .divlien2 {
  width:0%;
}

    #btnControl:checked ~ #DivContenu .divlien2 #divlien2ssdiv {
      display: none;
    }


.navbar {
  width: var(--navbar-close-size);
  height: 100vh;
  display: Flex;
  position: fixed;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--navbar-primary);
  transition: 200ms ease;
  z-index: 101;
}



.navbar ul {
  padding: 0;
  /*PERMET DE MAINTENIR LES ICON DU MENU A GAUCHE*/
  overflow: hidden;
  /*PERMET DE CACHER LE TEXT */
  list-style: none;
}

.navbar ul>li {
  display: inline-flex;
  width: var(--navbar-open-size);
}

.navbar ul>li>a>div>i,
.menuButton label>i {
  vertical-align: middle;
  text-align:center;
  font-size: var(--menu-icon-size) !important;
}


  .navbar ul > li:hover {
    background-color: var(--navbar-hover);
  }

.navbar ul>li:hover .menu_list {
  visibility: visible;
  animation: opacity 400ms ease;
  animation-fill-mode: forwards;
}

.main-menu > ul > li > a{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /*PERMET DE RETIRER LA LIGNE SOUS LE LIEN*/
  color: var(--text-primary);
  padding: 1em 0.2em 1em 0.2em;
  /*PERMET DE CENTRER L'IMAGE SUR LE MENU FERMÉ*/
}


.menuButton>a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /*PERMET DE RETIRER LA LIGNE SOUS LE LIEN*/
  color: var(--text-primary);
  padding: calc((var(--navbar-close-size) / 2) - (var(--menu-icon-size)/2));
    /*PERMET DE CENTRER L'IMAGE SUR LE MENU FERMÉ*/
}



.navbar ul > .menuButton:hover {
  background-color: #1E59A1;
  /*PAS DE CHANGEMENT DE COULEUR AU SURVOL POUR LE BOUTON MENU*/
  color: #ececec;
}


.navbar img {
  max-width: 60%;
}

.menu_image {
  flex-basis: 25%;
  /*LA PARTIE IMAGES OCCUPE 25% DE LA BARRE*/
  align-self: center;
}

.menu_text {
  flex-basis: 75%;
  /*LA PARTIE TEXT OCCUPE 75% DE LA BARRE*/
  align-self: center;
}

.menu_list {
  display: flex;
  position: absolute;
  /*LE POSITION ABSOLUTE PERMET D'AFFICHER LES SOUS-LISTE DANS LE OVERFLOW HIDDEN*/
  visibility: hidden;
  /*INVISIBLE SI LE MENU N'EST PAS SURVOLÉ */
  background-color: var(--menu_colums_bg_color);
  margin-left: var(--navbar-close-size);
  list-style-type: none;
  border: 1px 1px 1px 0px solid black;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.menu_list>ul {
  width: var(--menu_colums_size);
  border-right: 1px solid #DDDDDD;
  display: table;
}

.menu_list>ul>li {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align:left;
  color: var(--text-secondary);
  padding: calc(var(--menu-icon-size)/2);
}

  .menu_list > ul > li:hover {
    background-color: var(--navbar-hover);
    color: var(--text-primary);
  }

.menu_list>ul>li>a {
  color: inherit;
  text-decoration: none;
}


#logo {
  max-width: 20%;
}


/*ANIMATIONS*/

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(90deg);
  }
}

@keyframes opacity {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-exit {

  from {
    padding-right: var(--rightbar-open-size);
  }

  to {
    padding-right: 0;
  }
}