#wrapper_filtres {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  line-height: 45px;
  display: flex;
  justify-content: center;
  /* backdrop-filter: blur(5px); */
  /* background: rgba(100, 100, 100, 0.3); */
}
#filtres {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 1100px;
  line-height: 75px;
}
#filtres a {
text-shadow: 1px 1px 1px black;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  position: relative;
}
/* #filtres .filtre::before {
  width: 0;
  content: "";
  display: block;
  transition: all 0.15s linear;
} */
/* #filtres .filtre:hover::before,
#filtres .filtre.active::before{
  background-color: #fff;
  width: 100%;
  position: absolute;
  height: 1px;
  bottom: 20px;
} */
#filtres .filtre:hover,
#filtres .filtre.active
{
  font-weight: 900;
}
#main-work {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  height: var(--doc-height);
}
#main-work .ecran {
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;  height: var(--doc-height);
  opacity: 1;

}
#main-work::-webkit-scrollbar {
  display: none;
}
#main-work .ecran.hidden {
  /* transition: all 0.15s linear; */
  display: none;
  width: 0;
  height: 0;
}
.text-black {
  color: black !important;
}.ecran .titles{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: none;
}
.ecran video{min-width: 100%;
  min-height: max-content;}

/* .ecran img{max-height: 100%;} */


.grand_ecran{
  height: auto;
}

.moyen_ecran,.petit_ecran{
  display: none;
}
@media(max-width:1125px){
 #filtres{
  padding-right: 70px;
 } 
}
@media(max-width:960px){
  .grand_ecran{
    display: none;
  }
  .moyen_ecran{
    display: block;
    /* height: auto;
    min-height: 100%;
    width: auto; */
    /* min-width: 100%;
    height: auto; */
    display: block;
    height: 100%;
    width: auto;
  }
}
@media (max-width:800px){
  #wrapper_filtres{    top: auto;
  bottom: 0;
}
#filtres{
  padding-right: 0;
 } 
.ecran .titles{
  padding-bottom: 40px;
}
}
@media(max-width:480px){
  .grand_ecran,.moyen_ecran{
    display: none;
  }
  .petit_ecran{
    display: block;
    display: block;
    min-height: 100%;
    width: auto;
    height: 100%;
  }
}


@media(max-height:700px) AND (max-width:1180px){
  .grand_ecran{
    /* width: 100%;
    height: auto; */
    min-width: 100%;
    min-height: 100%;
  }
  .moyen_ecran{
    min-width: 100%;
    min-height: 100%;
  }
}