@media (orientation: landscape) {
  .titre-projet:hover{
    /* letter-spacing: 1%; */
  opacity: .5;
  cursor: pointer;
  }

  .titre-projet{
  transition: .15s;
  }
  
  .projet{
    cursor: pointer;
    /* transition: .2s; */
    width: auto;
    transition: .15s;
  }
  
  #frame{
    position: fixed;
  
    background-color: white;
    border-right: 0px;
    border-bottom: 0px;
  
    border-top: 0px;
    border-left: 0px;
  
    top: 0%;
    left: 0%;
  
    font-family:sono;
    font-size: .7vw;
  
    overflow:hidden;
  
    transition: opacity .2s;
  
    width: 100vw;
    height: 70vh;
    max-height: 95vh !important;
    /* max-height: 100vh !important; */
  
    background-color: transparent;
  }
  
  .gris{
    opacity: 50%;
  }
  
  #a-propos{
    opacity: 50%;
    margin-left: 2vw;
  }
  
  #a-propos:hover{
    opacity: 100%;
    cursor: pointer;
  }
  
  #retour{
    opacity: 50%;
    margin-left: 2vw;
    text-decoration: none;
    mix-blend-mode: difference;
    color: black;
  }
  
  #retour:hover{
    opacity: 100%;
    cursor: pointer;
  }
  
  #infos{
    display: none;
    padding: .4vw;
    border-right: .5px solid black;
    position: fixed;
    top: 0px;
    left: 65vw;
    height: 100vh;
    width: 35vw;
    background-color: white;
    font-family: sono;
    font-size: .8vw;
    font-weight: 500;
  } 

  .close{
    pointer-events: none;
    display: none;
    opacity: 0%;
  }
  
  .open{
    pointer-events: all;
    display: block;
    opacity: 100%;
  } 

  #filtres{
    position: fixed;
    top: 0px;
    right: 0px;
    margin: .4vw;
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  .filtre{
    opacity: 50%;
    transition: .15s;
  }
  .filtre:hover{
    opacity: 200%;
  }
  .active{
    /* opacity: 100%; */
    transform: translateX(-1vw);
    opacity: 1;
  }

  .filtre-btn{
    margin-top: .2vw;
  }

  .filtre-btn:hover{
    cursor: pointer;
  }

  #reset{
    opacity: .5;
    font-weight: 500;
  }
  #reset:hover{
    opacity: 1;
    cursor: pointer;
    transition: .15s;
  }

  .margin-mobile{
    transition: .15s;
    margin-bottom: .7vw;
}
}

@media (orientation: portrait) {
  .titre-projet:hover{
    /* letter-spacing: 1%; */
  opacity: .5;
  cursor: pointer;
  }
  
  .projet{
    cursor: pointer;
    /* transition: .2s; */
    width: auto;
  }
  
.margin-mobile{
    margin-bottom: 7vw;
}

#frame{
  display: block;
  position: fixed;

  background-color: white;
  border-right: 0px;
  border-bottom: 0px;

  border-top: 0px;
  border-left: 0px;

  top: 0%;
  left: 0%;

  font-family:sono;
  font-size: .7vw;

  overflow:hidden;

  transition: opacity .2s;

  width: 100vw;
  height: 100dvh;

  background-color: transparent;
}
  
  .gris{
    opacity: 50%;
  }
  
  #a-propos{
    opacity: 50%;
    margin-left: 2vw;
  }
  
  #a-propos:hover{
    opacity: 100%;
    cursor: pointer;
  }
  
  #retour{
    opacity: 50%;
    margin-left: 2vw;
    text-decoration: none;
    mix-blend-mode: difference;
    color: white;
  }
  
  #retour:hover{
    opacity: 100%;
    cursor: pointer;
  }
  
  .close{
    pointer-events: none;
    display: none;
    opacity: 0%;
  }
  
  .open{
    pointer-events: all;
    display: block;
    opacity: 100%;
  } 

  .active{
    /* opacity: 100%; */
    transform: translateX(-5vw);
    opacity: 1;
  }

  #filtres{
    width: fit-content;
    text-align: center;
    position: fixed;
    bottom: 0px !important;
    align-items: flex-end;
    right: 0px;
    padding-right: .8vw;
  }

  .filtre-btn{
    transition: .15s;
    text-align: end;
    background-color: white;
    width: fit-content;
  }

  .noDisplay{
    margin-left: 2vw;
  }
}