:root{
    --largeur-gauche: 75vw;
}

@media (orientation: landscape){
    #main{
        display: block;
        position: fixed;
        left: 0px;
        top: 0px;
        height: calc(90vh - 2 * var(--padding));
        width: calc(var(--largeur-gauche) - 2 * var(--padding));
        overflow: scroll;
        padding: var(--padding);
        padding-bottom: 10vh !important;
    }

    #infos{
        display: block;
        position: fixed;
        left: var(--largeur-gauche);
        height: calc(100vh - 2 * var(--padding));
        width: calc(25vw - 2 * var(--padding));
        overflow: scroll;
        background-color: black;
        color: white;
        padding: var(--padding);
        font-size: var(--font-size-1);
    }

    .header-sortie{
        display: flex;
        flex-direction: column;
        margin-bottom: calc(var(--padding)/2);
    }

    .header-sortie section:first-of-type{
        display: grid;
        grid-template-columns: repeat(8, 1fr);
    }

    .riviere-header-sortie{
        grid-column-start: 2;
    }

    .nb-poissons-header-sortie{
        grid-column-start: 4;
    }

    .conditions-header-sortie{
        grid-column-start: 6;
        grid-column-end: 9  ;
    }

    .bloc-img-body-sortie{
        padding-right: var(--padding);
        padding-bottom: var(--padding);
    }

    .bloc-img-body-sortie img{
        width: 100%;
    }
    .bloc-img-body-sortie video{
        width: 100%;
    }

    .body-sortie{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .taille-body-sortie{
        margin: 0px;
    }

    .notes-header-sortie{
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    .notes-header-sortie section:last-of-type{
        max-height: 0px;
        overflow: hidden;
        transition: .2s;
    }

    .note-btn{
        text-decoration: underline;
    }

    .note-btn:hover{
        text-decoration: none;
        opacity: 50%;
        cursor: pointer;
    }
}

@media (orientation: portrait){
    #main{
        display: block;
        position: fixed;
        left: 0px;
        top: 0px;
        height: calc(90dvh - 2 * var(--padding));
        width: calc(100vw - 2 * var(--padding));
        overflow: scroll;
        padding: var(--padding);
        padding-bottom: 10vh !important;
    }

    #infos{
        display: block;
        position: fixed;
        left: var(--largeur-gauche);
        height: calc(100vh - 2 * var(--padding));
        width: 0vw;
        overflow: scroll;
        background-color: black;
        color: white;
        /* padding: var(--padding); */
        font-size: var(--font-size-1);
    }

    .header-sortie{
        display: flex;
        flex-direction: column;
        margin-bottom: calc(var(--padding)/2);
    }

    .header-sortie section:first-of-type{
        display: flex;
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: space-between;
    }

    .riviere-header-sortie{
        margin-right: 2vw;
    }

    .nb-poissons-header-sortie{
        margin-left: 2vw;
    }

    .conditions-header-sortie{
        margin-right: 2vw;

    }

    .bloc-img-body-sortie{
        padding-right: var(--padding);
        padding-bottom: var(--padding);
    }

    .bloc-img-body-sortie img{
        width: 100%;
    }
    .bloc-img-body-sortie video{
        width: 100%;
    }

    .body-sortie{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .taille-body-sortie{
        margin: 0px;
    }

    .notes-header-sortie{
        display: flex;
        flex-direction: column;
        height: fit-content;
    }

    .notes-header-sortie section:last-of-type{
        max-height: 0px;
        overflow: hidden;
        transition: .2s;
    }

    .note-btn{
        text-decoration: underline;
    }

    .note-btn:hover{
        text-decoration: none;
        opacity: 50%;
        cursor: pointer;
    }
}