body{
    font-size: var(--upSize);

}


#presentation{
    display: block;
    position: fixed;
    top: 0;
    font-size : 1.3vw;

    left: 0;
    padding: var(--marge);
    padding-top: 1.25vw;
    padding-left: 4.75vw;
    width: 50vw;
}

#presentation a{
    display: block;
    font-size: var(--upSize);
}

#presentation p::after{
    display: block;
    white-space: pre;
    content: " ";
}

#presentation a:first-of-type{
    margin: calc(var(--marge) / 2 ) 0;
}

#presentation a img{
        display: inline-block;
        vertical-align: baseline;
        width: .5vw;
        margin-right: .4vw;
        height: auto;
}

#liste{
    display: block;
    position: relative;
    top: 0;
    width: 32vw;
    margin-left: 63vw;
    font-size: var(--upSize);
    line-height: 1.2;
    padding-bottom: var(--marge);
}

#liste sup{
    display: block;
    margin-left: 10%;
    width: 89%;
    margin-top: var(--marge) ;
    margin-bottom: .5vw;
}

#liste sup:first-of-type{
    margin-top: 1.25vw
}

.yob{
    display: block;
}

.year{
    display: inline-block;
    vertical-align: top;
    width: 9%;
}

.obj{
    display: inline-block;
    width: 89%;
    vertical-align: top;
}


#colophon{
    display: block;
    position: fixed;
    bottom: 0;
    cursor: default;
    left: 0;
    padding: var(--marge);
    padding-top: 0;
}

#colophon:hover #colophonText{
    display: block;
}

#colophonText{
    display: none;
}

#colophonText::after{
    display: block;
    content: " ";
    white-space: pre;

}

@media (orientation:portrait){

    #presentation{
        display: block;
        position: relative;
        top: 0;
        left: 0;
        margin: calc(var(--marge));
        font-size: var(--upSize);
        padding: 0;
        padding-bottom: calc(4* var(--marge));
        width: calc(100% - 4 * var(--marge) );
        margin: calc(2* var(--marge));
        margin-bottom: 0;
    }

    #presentation p:first-of-type{
        padding-bottom: calc(2* var(--marge));
    }

    #presentation a:first-of-type{
        margin-top: 0;
    }

    #presentation a img{
        width: 2vw;
        margin-right: 2vw;
    }
    

    #liste sup{
        margin-left: 15%;
        width: 83%;
        margin-top: calc(var(--marge)*1.5) ;
        margin-bottom: var(--marge);
    }


    #liste{
        display: block;
        position: relative;
        top: 0;
        width: calc(100% - 4 * var(--marge) );
        margin-left: 0;
        line-height: 1.2;
        margin: calc(2* var(--marge));
        padding-bottom: var(--marge);
    }

    .year{
   
        width: 14%;
    }
    
    .obj{
        width: 84%;
    }


    #colophon{
        display: block;
        position: relative;
        bottom: unset;
        cursor: default;
        left: 0;
        padding: calc(var(--marge)*2);
        padding-top: 0;
    }

    #colophon:hover #colophonText{
        display: none;
    }

    #colophonTexM{
        padding-top: var(--marge);
    }

}