@media only screen and (max-width: 800px) {
    body {
        height: 100svh;
    }

    #aide {
        display: none;
    }
    #credits {
        display: none;
    }
    #div-retour {
        display: none;
    }
    html, body {
        overflow-x: hidden;
      }
      body {
        position: relative;
        overflow:auto;
      }

      #image-track>.image {
        width: 40vmin;
        height: 56vmin;
        object-fit: cover;
        object-position: 50% 50%;
        cursor:pointer;
    }

    #div-qm7 > .title-piece-court {
        font-size: 2.3vh;
    }

    .page-piece > .synopsis-piece {
        width:80vw;
        font-size: 1.6vh;
    }

    .page-piece > .duree-piece {
        width:80vw;
        font-size: 1.6vh;
    }

    .page-piece > .prochaines-dates {
        width:80vw;
        font-size: 1.6vh;
    }

    .ensavoirplus {
        display: flex;
        width: 23vw;
        height: 7vh;
        text-align: center;
    }

    .dossier-piece {
        width: 23vw;
        height: 7vh;
    }

    .page-piece > #duree-faust {
        top: 71%;
    }

    .page-piece > .faust-desc {
        width:80vw;
        font-size: 1.6vh;
    }

    #page-faust-2 > #faust-desc-0 {
        top: 28%;
    }

    #page-faust-3 > .faust-desc {
        width:80vw;
        font-size: 1.6vh;
    }

    #page-faust-3 > #faust-desc-2 {
        top: 27%
    }
    #page-faust-3 > #faust-desc-3 {
        top: 58%
    }

    #page-faust-4 > .faust-desc {
        width:80vw;
        font-size: 1.5vh;
    }

    #page-faust-4 > #faust-desc-4 {
        top: 28%;
    }

    #page-faust-4 > #faust-desc-5 {
        top: 70%;
    }

    .page-piece > .title-piece-long {
        width: 80vw;
        font-size: 2vh;
    }

    #page-qm7 > #title-qm7-long {
        top: 23%;
    }

    #page-qm7 > .synopsis-piece {
        top: 52%;
    }
    
    #page-qm7 > .duree-piece {
        top: 70%;
    }

    #page-qm7 > .prochaines-dates {
        top: 80%;
    }

    .accueil-desc {
        width: 80vw;
        font-size: 1.8vh;
    }

    #div-accueil.show {
        right: 0vw;
        visibility: visible;
    }
    
    #div-accueil.hide {
        right: 110vw;
        visibility: hidden;
    }

    .apropos-desc {
        width: 80vw;
        font-size: 1.8vh;
    }

    #div-apropos.show {
        left: 0vw;
        visibility: visible;
    }
    
    #div-apropos.hide {
        left: 110vw;
        visibility: hidden;
    }
    
    #div-retour.show {
        left: 8vw;
    }
    
    #div-retour.hide {
        left: -15vw;
    }
    
    .page-piece-prem.show {
        visibility: visible;
        top: 0vh;
    }
    
    .page-piece-prem.hide {
        visibility : hidden;
        top: 100vh;
    }
    
    .page-piece-sup.show {
        visibility: visible;
        top: 0vh;
        opacity: 100%;
    }
    .page-piece-sup.hide {
        visibility : hidden;
        top: 0vh;
        opacity: 0%;
    }
    
    .title-piece-long.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .title-piece-long.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .synopsis-piece.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .synopsis-piece.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .duree-piece.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .duree-piece.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .prochaines-dates.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .prochaines-dates.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .boutons-bas.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    .boutons-bas.quickshow {
        visibility: visible;
        opacity: 100%;
    }
    .boutons-bas.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    .boutons-bas.quickhide {
        opacity: 0%;
        visibility: collapse;
    }
    
    .div-piece > div.show {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
    
    .div-piece > div.hide {
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    
    .div-piece.hide {
        visibility: collapse;
    }
    
    #image-track>.image.fullscreen {
        width: 100vw;
        max-height: 100vh;
        height: 100vh;
        top: 0;
        left: 0;
    }
    
    #image-track>.image.normal {
        width: 40vmin;
        height: 56vmin;
        max-height: auto;
        top: auto;
        left: auto;
    }
    
    #image-track>.img-hide {
        width: 0px;
    }
    
    #image-track>.img-show {
        width: 40vmin;
    }
    
    #image-track.fullscreen {
        gap:0;
    }
    
    #image-track.normal {
        gap:4vmin;
    }

    .boutons-bas {
        font-size: 1.8vh;
    }
    
    
}

@media only screen and (max-width: 800px) and (max-height: 900px) {
    .boutons-bas {
        font-size: 1.6vh;
    }
}