/* Styles pour la sidebar */
  .sidebar {
    width: 260px;
    height: 100vh;
    background-color: #fff;
    margin: 20px;
    box-sizing: border-box;
    border-radius: 20px;
  }

  .logo {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 50px; 
    padding: 20px;
  }
  
  .logo img {
    max-width: 85%;
  }
  .menu {
    margin-top: 20px;
    padding: 0;
    list-style: none;
  }
  
  .menu li {
    margin-bottom: 10px;
  }
  
  .menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
    vertical-align: middle;
    width: 95%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  .menu a:hover {
    background-color: #000000;
    color: #fff;
  }

  .menu i{
    margin-right: 5px;
    margin-left: 5px;
    vertical-align: middle;
  }
  .menu i:hover{
    color: #fff;
  }

  /** Responsive **/
  @media only screen and (max-width: 767px){
    .wrapper{
      flex-direction: column-reverse;
    }
    .sidebar{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      width: 95%;
      margin-bottom: 20px;
      height: 90px;
      border: 1px solid black;
    }
    .logo{
      display: none;
    }
    .menu{
      text-align: center;
    }
    .menu li{
      display: inline-block;
    }
    .menu span{
      display: none;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 992px) {
    .sidebar{
      width: 90px;
    }
    .menu a{
      text-align: center;
    }
    .menu span{
      display: none;
    }
  }
   /** End Responsive **/