.sidebar-right{
  position: fixed;
  width: 20%;
  height: 100%;
  right: calc( -20% + 0.5rem);
  top: 0;
  transition: 0.3s right ease;
  #icone_list{
    z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
  }
  .list-projets{
    height: 100%;
    overflow: auto;
    .container{
      margin: auto;
    ul{
      text-align: left;
      margin: 0;
      span.cat{
        display: block;
        line-height: 3rem;
        font-weight: bold;
        padding-left: 23px;
      }
      li{
        display: inline-flex;
        width: 100%;
        margin-top: -6px;
        position: relative;
        &::before{
          position: absolute;
          content: " ";
          display: inline-block;
          min-width: 10px;
          height: 100%;

        }
        &.culturelle{
          &::before{
            background: $color_culturelle;
          }
        }
        &.sociale{
          &::before{
            background: $color_sociale;
          }
        }
        &.publique{
          &::before{
            background: $color_publique;
          }
        }
        &:hover{
          &::before{
            min-width: 100%;
            transition: 0.6s min-width;
          }
        }
      }
      a{
        color: black;
        display: block;
        padding-left: 1rem;
        z-index: 999;
        width: 100%;
        &.active{
          color: black;
        }
      }
    }
    }
  }
  &.is-active{
      right: 0;
      transition: 0.3s right ease;
  }
}