:root {
  /*CHANGER LA FONT SIZE MODIFIE LA TAILLE DE TOUS LES ELEMENTS*/
  --menu_colums_size: 14em;
  /*--menu_colums_bg_color: #EEEEEE;*/
  --menu-icon-size: 1.3em;
  --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 */
}

  #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);
  }


body:has(#btnControl:checked) .divpiedpage {
  padding-left: var(--navbar-open-size);
}

body:has(#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-close-size);
  width: calc(100% - var(--navbar-close-size));
  transition-duration: 200ms;
}

  #DivContenu .divlien2 {
    transition-duration: 200ms;
  }

body:has(#btnControl:checked) #DivContenu .divlien2 {
  width: 0%;
}
  body:has(#btnControl:checked) #DivContenu .divlien2 #divlien2ssdiv {
    display: none;
  }


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

.navbarTmp {
  display:none;
}
@media screen and (max-width: 1042px) {
  .navbarTmp {
    display: block;
  }
}
  @media screen and (max-width: 1080px) {
    .navbar {
      min-height: 100vh;
    }
  }

  .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-menu-primary);
  padding: 1em 0.2em 1em 0.3em;
  /*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-menu-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: var(--navbar-hover);
  /*PAS DE CHANGEMENT DE COULEUR AU SURVOL POUR LE BOUTON MENU*/
  color: var(--text-menu-primary);
}


  .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-menu-secondary);
        padding: calc(var(--menu-icon-size)/2);
      }

        .menu_list > ul > li:hover {
          background-color: var(--navbar-hover);
          color: var(--text-menu-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;
    }
  }