@keyframes pop {
    from{
        opacity : 0%;
    }
    to{
        opacity: 100%;
    }
}

@media (orientation: landscape) {
    #left{
        width: calc(var(--largeur-colonne-gauche) * 0.7 - 2%) !important;
    }

    #right{
        width: calc(100vw - var(--largeur-colonne-gauche) * 0.7 - 2vw) !important;
        left: calc(var(--largeur-colonne-gauche) * 0.7) !important;

        height: 100vh !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    #bloc-1{
        display: flex;
        flex-direction: row;
        width: 100%;
        margin-top: 3%;
        height: 70%;
    }
    #boulon{
        height: 14vh;
        margin-right: 5%;
        width: fit-content;
    }
    
    #boulon img{
        height: 100%;
    }
    
    #presentation{
        pointer-events: none;
    
        font-size: var(--font-size-big);
        /* width: 100%; */
        width: 100%;
        height: 25%;
    
        margin-top: 2.3%;
        /* font-family: archivo-bold; */
        display: flex;
        flex-direction: column;
    }
    
    #definition{
        width: fit-content;
        position: relative;
        display: flex;
        flex-direction: row;
        left: 5%;
        /* font-family: 'Courier New', Courier, monospace; */
        justify-content: space-around;
        font-size: var(--font-size-little);

    }
    
    #synopsis{
        text-align: start;
        hyphens: auto;
        width: 98%;
        left: 1%;
        position: relative;
        height: 25%;
        margin: 0px !important;
    }

    #wraper-img-accueil{
        width: 50%;
        position: relative;
        overflow: hidden;
        height: 93%;
    }

    #img-accueil{
        width: 100%;
        position: relative;
    }
}

@media (orientation: portrait){
    #bloc-1{
        margin-top: 6vh;
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    #img-accueil{
        width: 90%;
        left: 5%;
        position: relative;
        margin-top: 6vh;
        padding-bottom: 6vh;
    }

    #right{
        margin-top: 2vw !important;
	padding-bottom: 10vh !important;
    }

    #boulon{
        height: 10vh;
        width: fit-content;
    }
    
    #boulon img{
        height: 100%;
        margin-right: 4vw;
    }
    
    #presentation{
        pointer-events: none;
        margin-top: 9vw;
    
        font-size: var(--font-size-project);
        /* width: 100%; */
        width: 100%;
    
        /* font-family: archivo-bold; */
        display: flex;
        flex-direction: column;
    }
    
    #definition{
        width: 90%;
        left: 5%;
        position: relative;
        display: flex;
        flex-direction: row;
        /* font-family: 'Courier New', Courier, monospace; */
        justify-content: center;
        font-size: var(--font-size-little);
    }
    
    #synopsis{
        text-align: start;
        hyphens:auto;
        width: 90%;
        left: 5%;
        position: relative;
        font-size: var(--font-size-big);
    }

}