#realisation-filter {
  display: flex;
  justify-content:center;
  flex-wrap:wrap;
}
#realisation-filter label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  margin: 4px 6px;
  transition: 0.3s ease;
  padding: 6px 14px;
  text-align: center;
  justify-content: center;
  align-items:center;
  color:var(--color-2);
}
#realisation-filter label:before {
  content: '×';
  display: block;
  position: relative;
  z-index: 9;
  margin-left: 0;
  transition: 0.3s ease;
  font-size: 0;
  order:2;
}
#realisation-filter label.active:before{
  margin-left: 8px;
  font-size: inherit;
}
#realisation-filter label:after{
  content:'';
  display:block;
  position:absolute;
  height:100%;
  width:100%;
  border-radius:10px;
  bottom:0;
  background-color:rgb(0 0 0 / 20%);
  transition:0.3s ease;
}
#realisation-filter label:hover:after{
  background-color:rgb(0 0 0 / 40%);
}
#realisation-filter label.active:after,
#realisation-filter label.active:hover:after{
  background-color:var(--color-1);
}
#realisation-filter label input{
  display:none;
}
#realisation-filter label span{
  position:relative;
  z-index:9;
  order:1;
}
#clear-filters button {
  padding: 6px 15.141px;
  border: none;
  background-color: var(--color-1);
  color: var(--color-2);
  border-radius: 10px;
  line-height: inherit;
  font-size: inherit;
  cursor:pointer;
}
#toggle-filters{
  width:100%;
}
#toggle-filters button{
  padding: 6px 14px;
  border: none;
  background-color: var(--color-1);
  color: var(--color-2);
  border-radius: 10px;
  line-height: inherit;
  font-size: inherit;
  cursor:pointer;
  width:100%;
  display:flex;
  justify-content:space-between;
  transition:0.3s ease;
}
#toggle-filters.active button{
  border-radius:10px 10px 0 0;
}

@media (min-width: 1121px) {
  #realisation-filter {
    display: flex !important;
  }
  #toggle-filters {
    display: none;
  }
}

@media (max-width: 1120px) {
  #realisation-filter {
    display: none;
    background-color: var(--color-2);
    border-radius: 0;
    padding: 10px;
  }
  #toggle-filters {
    display: block;
  }
  #clear-filters{
    width:100%;
  }
  #clear-filters button{
    width:100%;
    border-radius: 0 0 10px 10px;
  }
  #clear-filters button:disabled{
    background-color:#cccccc;
    color:#eeeeee;
  }
}