@media (orientation: landscape) {

/* ------------------- intro --------------------- */
    #intro{
        background-color: var(--marron);
        height: 100vh;
        width: calc(100vw - 2 * var(--margin-border));
        color: var(--blanc);
        padding-right: var(--margin-border);
        padding-left: var(--margin-border);
        padding-top: 2vw;
    }

    #intro p{
        font-family: Vercors;
        font-size: 25vw;
        line-height: 0.45;
        width: 100%;
        pointer-events: scroll;
    }

    #intro p:last-of-type{
        font-family: Diois;
        font-size: 25vw;
        line-height: 0.45;
        text-align: end;
    }

    #intro p:nth-of-type(2){
        font-family: Vercors;
        font-size: 25vw;
        line-height: 0.4;
        text-align: center;
    }
    
    #wraper-intro{
        width: calc(100vw - 2 * var(--margin-border));
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
        position: absolute;
        bottom: 2vw;
    }

    #intro img{
        width: 50%;
        height: auto;
        position: relative;
        right: 0px;
        mix-blend-mode: screen;
        -webkit-filter: grayscale(100%) contrast(200%);
        filter: grayscale(100%) contrast(200%);
        opacity: 1;
    }

    #wraper-intro a{
        font-family: Barronies;
        font-size: 5vw;
        line-height: .45;
        color: var(--blanc);
    }

    #wraper-intro a:hover{
        color: var(--vert);
    }
/* ------------------- about --------------------- */

#about{
    margin-top: calc(var(--margin-border)/3);
    margin-bottom: calc(var(--margin-border)/3);
    width: calc(100vw - 2 * var(--margin-border));
    margin-left: var(--margin-border);
   
    display: flex;
    flex-direction: row;
}

#about section:nth-child(1){
    width: 70%;
    font-size: 1.3vw;
    font-family: eterne-text;
    line-height: 1.2;
}

#about section:nth-child(2){
    width: 27.5%;
    margin-left: 2.5%;
    font-size: .8vw;
    font-family: eterne-text;
    line-height: 1;
    /* word-break: break-all; */
}

.titre-source:hover{
    color: var(--vert);
}

.titre-source{
    text-decoration: underline;
    width: 100%;
    margin-left: 5%;
}

.auteur-source{
    text-align: start;
    width: 100%;
}

/* ------------------- index --------------------- */
    #index{
        margin-right: var(--margin-border);
        margin-left: var(--margin-border);
        padding-bottom: var(--margin-border);
    }

    .wraper-index{
        border-top: 3px dotted black;
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-bottom: calc(var(--margin-border)/6);
        justify-content: space-between;
        padding-top: 1vw;
    }

    .wraper-index a:hover{
        color: var(--vert);
        cursor: pointer;
    }

    .wraper-index:first-of-type{
        margin-top: calc(var(--margin-border)/6);
    }

    .infos-index{
        display: flex;
        flex-direction: row;
        font-family: eterne-bold;
        line-height: 1;
        font-size: 1.2vw;
    }

    .infos-index div{
        margin-left: 1vw;
        margin-top: .5vw;
    }

    .wraper-index a:first-of-type{
        display: flex;
        flex-direction: row;
        transition: .2s;
    }

    .wraper-index div section:first-of-type{
        display: flex;
        flex-direction: column;
    }

    .wraper-index section:last-of-type{
        display: flex;
        flex-direction: column;
    }

    .site-index{
        font-family: vercors;
        font-size: 11vw;
        line-height: .45;
    }

    .localisation-index{
        font-family: diois;
        font-size: 11vw;
        line-height: .45;
    }

    .btn-index{
        font-family: royans;
        font-size: 3vw;
        line-height: .45;
        display: flex;
        color: black !important;
        flex-direction: column !important;
    }

    .btn-index div:hover{
        color: var(--vert);
        cursor: pointer;
    }

    .btn-index a:hover{
        color: var(--vert);
        cursor: pointer;
    }

    a{
        color: black;
        text-decoration: none;
    }
}