main{
    display: flex;
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
}

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

blockquote{
    margin-left: 25%;
}

.mcOffice{
    margin:var(--marge);
    display: inline-block;
    width: 50%;
}

#info{

    text-transform: uppercase;
    
}

.line{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

#lUn span{
    grid-column: span 2;
}


#lUn span:first-of-type{
    grid-column: span 2;
}

#lUn span:nth-of-type(2){
    grid-column: span 1;
}
#lUn span:nth-of-type(3){
    grid-column: span 3;
}

#lUn span:last-of-type{
    grid-column: span 6;
}

#lDeux span:first-of-type{
    grid-column: span 3;
}

#lDeux span:last-of-type{
    grid-column: span 9;
}

#lTrois span:first-of-type{
    grid-column: span 2;
}

#lTrois span:nth-of-type(2){
    grid-column: span 4;
}

#lTrois span:last-of-type{
    grid-column: span 5;
}


#lQuatre span:first-of-type{
    grid-column: span 2;
}

#lQuatre span:nth-of-type(2){
    grid-column: span 4;
}

#lQuatre span:last-of-type{
    grid-column: span 5;
}

#credits{
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    margin: var(--marge);
}


@media (orientation:portrait){
    main{
        display: flex;
        top: unset;
        transform: unset;
        margin-top: 15vh;
        flex-direction: column;
        position: relative;
    }

    .mcOffice{
        width: calc(100% - ( 2 * var(--marge)));
        margin: calc(2 * var(--marge)) var(--marge);
    }

    blockquote{
        margin-left: 15%;
    }

    #credits{
        position: relative;
        margin-top: 25vh;
        bottom: unset;
    }

    #credits span{
        display: block;
    }

    #credits span:first-of-type::after{
        display: block;
        content: " ";
        white-space: pre;
    }




#lUn span:first-of-type{
    grid-column: span 3;
}

#lUn span:nth-of-type(2){
    grid-column: span 1;
}
#lUn span:nth-of-type(3){
    grid-column: span 3;
}

#lUn span:last-of-type{
    grid-column: span 5;
}

#lDeux span:first-of-type{
    grid-column: span 3;
}

#lDeux span:last-of-type{
    grid-column: span 9;
}

#lTrois span:first-of-type{
    grid-column: span 3;
}

#lTrois span:nth-of-type(2){
    grid-column: span 6;
}

#lTrois span:last-of-type{
    grid-column: span 10;
    text-align: right;
}


#lQuatre span:first-of-type{
    grid-column: span 2;
}

#lQuatre span:nth-of-type(2){
    grid-column: span 6;

}

#lQuatre span:last-of-type{
    grid-column: span 5;
    grid-row-start: 2;
    grid-column-start: 3;
}


}