@media (orientation: landscape) {
    :root{
        --largeur-left: 60%
    }

    #informations-btn{
        display: none;
    }

    #main{
        width: 100vw;
        margin-top: var(--padding);
        padding-bottom: 10vh;
    }

    #frame-informations{
        height: 100vh;
        position: fixed;
        top: 0px;
        background-color: var(--black);
        transition: .2s;
        overflow: scroll;
        padding-bottom: 10vh;
    }

    .frame-informations-active{
        width: calc(100% - var(--largeur-left));
        right: 0px;
    }

    .frame-informations-unactive{
        width: 0%;
        right: calc(100% - var(--largeur-left) );
    }

    #frame-informations div{
        width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
        color: var(--white);
        font-size: var(--font-size-1);
        margin: var(--padding);
        padding-bottom: 10vh;

    }

    #frame-informations section{
        margin-bottom: var(--padding);
    }

    .infos{
        width: calc(var(--largeur-left) - 2 * var(--padding));
        display: flex;
        flex-direction: row;
        padding-left: var(--padding);
        padding-right: var(--padding);
        height: fit-content;
    } 

    .cotation{
        width: 12% !important;
        color: var(--white);
        height: fit-content;
    }

    .cotation div{
        background-color: var(--black);
        padding-left: 5%;
        padding-right: 5%;
        width: fit-content;
    }

    .flash{
        margin-right: calc(var(--padding));
        background: var(--black);
        color: var(--white);
        line-height: 1;
    }

    .nom{
        margin-right: calc(var(--padding));
        white-space: nowrap;
    }

    .site{
        margin-right: calc(var(--padding));
    }

    .reste{
        display: flex;
        flex-direction: row;
        opacity: 30%;
        height: fit-content;
    }

    .flex-wraper{
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        width: 70%;
        justify-content: start;
        height: fit-content;
    }

    .graph{
        width: 23%;
        text-align: end;
        height: fit-content;
    }

    .voie{
        background-color: var(--white);
        line-height: 1;

        display: flex;
        flex-direction: row;
        margin-bottom: .4%;
        height: fit-content;
        font-size: var(--font-size-1);
    }

    .voie:hover{
        cursor: default;
        filter: invert(1);
    }

    .contenuAd img{
        filter: contrast(110%) grayscale(0%) brightness(1.1) invert(1)
    }

    .contenuAd{
        width: calc(100% - var(--largeur-left));
        height: fit-content;
        margin-bottom: -5px;
        overflow: hidden;
    }

    .contenuAd .portrait{
        width: 50%;
        filter:contrast(150%) grayscale(100%) brightness(1.4);
    }

    .contenuAd .landscape{
        width: 80%;
        filter:contrast(150%) grayscale(100%) brightness(1.4);
    }

    .wip .infos{
        background-color: var(--black);
        opacity: var(--opacity);
        color: var(--white)
    }

    .datas{
        margin-left: calc(2 * var(--padding));
    }

    .contenuAd img:hover{
        transition: .3s;
        filter: invert(1) !important;
    }
}

@media (orientation: portrait) {
    #main{
        width: 100vw;
        margin-top: var(--padding);
        padding-bottom: 10vh;
    }

    #frame-informations{
        height: 100dvh;
        position: fixed;
        top: 0px;
        background-color: var(--black);
        transition: .2s;
        overflow: scroll;
        padding-bottom: 10vh;
    }

    .frame-informations-active{
        width: 80%;
        right: 0px;
    }

    .frame-informations-unactive{
        width: 0%;
        right: 0%;
    }

    #frame-informations div{
        width: calc(100% - 2 * var(--padding));
        overflow-x: hidden;
        overflow-y: scroll;
        color: var(--white);
        font-size: var(--font-size-1);
        margin: calc(2 * var(--padding));
        padding-bottom: 10vh;

    }

    #frame-informations section{
        margin-bottom: calc(var(--padding)*4);
    }

    .infos{
        width: calc(100% - 2 * var(--padding));
        display: flex;
        flex-direction: row;
        padding-left: var(--padding);
        padding-right: var(--padding);
        height: fit-content;
    } 

    .cotation{
        width: 12% !important;
        color: var(--white);
        height: fit-content;
    }

    .cotation div{
        background-color: var(--black);
        padding-left: 5%;
        padding-right: 5%;
        width: fit-content;
    }

    .flash{
        margin-right: calc(var(--padding));
        background: var(--black);
        color: var(--white);
        line-height: 1;
        height: fit-content;
    }

    .nom{
        margin-right: calc(var(--padding));
        white-space: nowrap;
    }

    .site{
        margin-right: calc(var(--padding));
    }

    .reste{
        display: flex;
        flex-direction: row;
        opacity: 30%;
        height: fit-content;
    }

    .flex-wraper{
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        width: 66%;
        justify-content: start;
        height: fit-content;
    }

    .graph{
        width: 27%;
        text-align: end;
        height: fit-content;
    }

    .voie{
        background-color: var(--white);
        line-height: 1;

        display: flex;
        flex-direction: column;
        margin-bottom: 2%;
        height: fit-content;
        font-size: var(--font-size-1);
        width: 100%;
    }

    .voie:hover{
        cursor: default;
        filter: invert(1);
    }

    /* .contenuAd img:hover{
        filter: invert(1) !important;
    } */

    .contenuAd img{
        filter: contrast(110%) grayscale(0%) brightness(1.1) invert(1)
    }

    .contenuAd{
        width: 100%;
        height: fit-content;
        margin-bottom: -5px;
        overflow: hidden;
    }

    .contenuAd .portrait{
        width: 50%;
        filter:contrast(150%) grayscale(100%) brightness(1.4);
    }

    .contenuAd .landscape{
        width: 80%;
        filter:contrast(150%) grayscale(100%) brightness(1.4);
    }

    .wip .infos{
        background-color: var(--black);
        opacity: var(--opacity);
        color: var(--white)
    }

    .datas{
        margin-left: calc(2 * var(--padding));
    }
    
}