/* iniatialisation pour tout navigateur */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
  }


.sidebar{
  position : fixed;
  top : 0;
  left: 0;
  width : 80px;
  height : 100%;
  background: transparent;
  backdrop-filter : blur(40px);
  padding : 6px 14px;
  transition : .5s;
  border-right : 2px solid rgba(255,255,255,.2);
  box-shadow : 0 0 10px rgba(0,0,0,.2);
  z-index: 1;
}

.sidebar.active{
    width : 260px;
    z-index: 1;
}

.sidebar .logo-menu{
  display : flex;
  align-items : center;
  width : 100%;
  height: 70px;
}

.sidebar .logo-menu .logo{
  font-size: 25px;
  color : #212F3C;
  pointer-events: none;
  opacity : 0;
  transition :.3s;
}

.sidebar.active .logo-menu .logo{
  opacity:1;
  transition-delay : .2s;
}

.sidebar .logo-menu .toggle-btn{
  position : absolute;
  width : 40px;
  left : 50%;
  transform : translateX(-50%);
  height : 40px;
  font-size : 22px;
  color : #212F3C;
  text-align : center;
  line-height : 40px;
  cursor : pointer;
  transition :.5s;
}

.sidebar.active .logo-menu .toggle-btn{
  left : 90%;
}

.sidebar .list{
  margin-top : 10px;
}

.list .list-item{
  list-style : none;
  width : 100%;
  height : 50px;
  margin : 5px 0;
  line-height : 50px;
}

.list .list-item a {
  display : flex;
  align-items : center;
  font-size : 18px;
  color: #212F3C;
  text-decoration: none;
  border-radius: 6px;
  white-space : nowrap;
  transition : .5s;
}

.list .list-item.active a,.list .list-item a:hover {
   background : rgba(189, 189, 189, 0.349);
}

.list .list-item a i{
  min-width : 50px;
  height: 50px;
  text-align : center;
  line-height : 50px;
}

.sidebar .link-name{
  opacity : 0;
  pointer-events : none;
  transition: opacity .3s;
}

.sidebar.active .link-name{
  opacity : 1;
  pointer-events : auto;
  transition-delay : clac(.1s * var (--i));
}

.sidebar.resp{
  background-color: #FAFAFA;
  border-right : 2px solid rgba(255,255,255,.2);
  box-shadow : 0 0 10px rgba(0,0,0,.2);
  z-index: 2;
}

@media screen and (max-width : 1040px) {

  /* Supprimer des conditions pour avoir que le menue hamburger */
  .sidebar{
    backdrop-filter : none;
    box-shadow : none;
    border : none;
  }

   /* Cacher la liste de texte + icons */
  .list{
    display : none;
  }

  /* Ajout de resp avec le java pour faire apparaître le menu  */
   /* Lorsque l'on clic sur les traits*/
  .sidebar.active.resp{
    background-color: #FAFAFA;
    border-right : 2px solid rgba(255,255,255,.2);
    box-shadow : 0 0 10px rgba(0,0,0,.2);
    z-index: 1;
  }

  /* Faire réaparâitre la liste comme la sidebar */
  .list.resp{
    display : block;
  }


  .sidebar .logo-menu .toggle-btn{
    width : 40px;
    left : 70%;
    transform : translateX(-110%);
    height : 40px;
    font-size : 50px;
    color : #fafafa;
    text-shadow: 2px 2px 3px black;
    text-align : center;
    line-height : 40px;
    cursor : pointer;
    transition :.5s;
  }
  
}