@media (max-width: 672px)  {
    .tabContent .tabTop>div, .tabContent .tabBottom>div, .tabContent .tabMiddle>div {
        padding: 1em 1em;
    }
    .tabContent{
        padding: 1em;
    }
    #tabButton, #tabButton0{
        position: fixed;
        right: -50%;
        width: 50%;
        margin-top: 2%;
        z-index: 100;
    }
    #tabButton{
        top: 10%;
        padding: 1.2em 1em 3em 1em;
        height: 90%;
        background-color: var(--vertTresFonce);
    }
    #tabButton0{
        top: 0;
        height: 10%;
        padding: 0em !important;
    }
    #descPost{
        width: 40%;
        padding: 0.5em;
    }
    #descPost h1{
        width: 100%;
        text-align: center;
        font-size: 5vw !important;
    }
    #title{
        font-size: 0.6em;
        width: 60%;
    }

    .zone{
        width: 100%;
    }
    #mainZone{
        flex-direction: column;
    }
    #letterR{
        height: auto;
    }
    .jeu{
        flex-direction: column !important;
    }
    .jeu>*{
        width: 100%;
    }
    .jeu>div>a{
        text-align: center;
    }
    .musique{
        flex-direction: row !important;
        flex: none !important;
        max-width: none !important;
        gap: 2em !important;
    }
    .musiqueImg{
        height: 30vw !important;
        width: 30% !important;
    }
}

@media (max-height: 500px){
    .content{
        padding: 1em;
    }
    #tabContent{
        height: 90%;
    }
    button{
        font-size: 1em;
    }
    #tabButton6, #copyright{
        height: 8% !important;
    }
    #title{
        font-size: 0.5em;
    }
    #descPost>h1{
        font-size: 2em !important;
    }
    #topZone{
        height: 13%;
        margin-bottom: 1.4%;
    }
}