@media (orientation: landscape) {
    body{
        overflow-x: hidden;
    }

    *{
        scroll-behavior: smooth;
    }
/* ------------------- boutons modules --------------------- */
    .button{
        z-index: 1000;
        margin: 1.5vw;
        width: 5vw;
        position: fixed;
    }

    .button img{
        width: 100%;
    }

    #btn-1{
        top: 0px;
        left: 0px;
    }

    #btn-2{
        bottom: 0px;
        left: 0px;
    }
    #btn-3{
        top: 0px;
        right: 0px;
    }
    #btn-4{
        right: 0px;
        bottom: 0px;
    }
    #btn-5{
        bottom: 0px;
        left: 50vw;
        transform: translateX(-50%);
    }
/* ------------------- intro --------------------- */
    #intro{
        height: 100vh;
        background-color: var(--marron);
        height: fit-content;
        width: calc(100vw - 2 * var(--margin-border));
        color: var(--blanc);
        padding-right: var(--margin-border);
        padding-left: var(--margin-border);
        padding-top: 2vw;
    }

    #dessin-intro {
        position: relative;
        width: 0px;
        height: 0px;
        filter: invert(1) contrast(200%);
        mix-blend-mode: screen;
    }

    #dessin-intro > img{
        width: 80vw;
    }

    #titre{
        font-family: Vercors;
        font-size: 25vw;
        line-height: 0.4;
        width: 100%;
        text-align: start;
    }

    #lieu-dit{
        font-family: Diois;
        font-size: 25vw;
        line-height: 0.4;
        width: 100%;
        text-align: end;
    }
    
    #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{
        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 span{
        font-family: Barronies;
        font-size: 5vw;
        line-height: .45;
    }

    #wraper-infos{
        width: 25%;
        font-family: eterne-bold;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: start;
        color: var(--vert);
        margin-right: 5%;
    }

    #wraper-infos section{
        width: calc(100%);
        text-align: start;
        font-size: 1.3vw;
        line-height: 1;
        margin-bottom: calc(var(--margin-border)/10);
    }

    #informations-site{
        font-family: eterne-text;
        font-size: 1.3vw;
        line-height: 1.1;
        width: 75%;
    }

    #bloc-2{
        display: flex;
        flex-direction: row;
        width: 100%;
        padding-bottom: calc(var(--margin-border)/2);
    }
/* ------------------- contributions --------------------- */

    #contributions{
        width: calc(100vw - 2 * var(--margin-border));
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        padding-bottom: calc(var(--margin-border)/2);
        margin-left: calc((-1) * var(--margin-border));
        margin-top: -5%;
        overflow: visible;
        pointer-events: none;
        padding-left: var(--margin-border);
        position: relative;
    }

    #carroussel{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: start;
        align-items: flex-start;
        margin-left: calc((-1) * var(--margin-border));
        overflow-x: scroll;
        pointer-events: none;
        padding-left: var(--margin-border);
        position: relative;
    }

    #fleches{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        position: absolute;
        top: 50%;
        transform: translate(-3.2%, -50%);
    }

    .contribution{
        height: fit-content;
        width: fit-content;
        margin-right: calc(var(--margin-border)/6);
    }

    .contribution img{
        height: auto;
        width: calc(100vw / 4);
    }

    .btn-contributions{
        font-family: royans;
        color: var(--blanc);
        font-size: 5vw;
        line-height: .45;
        /* position: absolute; */
        z-index: 1;
        pointer-events: all;
        mix-blend-mode: unset;
        -webkit-filter: unset;
        filter: unset;
        width: fit-content;
    }

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

    .contribution-contributeur{
        margin-top: 2%;
        font-family: eterne-bold;
        font-size: 1vw;
        line-height: 1;
        width: 98%;
        margin-left: 1%;
    }
    .contribution-date{
        font-family: eterne-bold;
        font-size: 1vw;
        line-height: 1;
        width: 98%;
        margin-left: 1%;
        margin-bottom: 2%;
    }
    .contribution-texte{
        font-family: eterne-text;
        font-size: 1vw;
        line-height: 1;
        width: calc(100vw / 4);
        margin-left: 1%;
    }

/* ------------------- index --------------------- */
    #secteurs{
        height: fit-content;
        width: calc(100vw - 2 * var(--margin-border));
        padding-right: var(--margin-border);
        padding-left: var(--margin-border);
        padding-bottom: var(--margin-border);
    }

/* ------------------- secteur img --------------------- */

    .wraper-svg-img{
        background-color: var(--marron);
        position: relative;
        height: fit-content;
        width: fit-content;
        left: 50%;
        transform: translate(-50%);
        margin-top: calc(var(--margin-border)/4);
    }
    
    
    .wraper-svg-img img{
        height: 85vh;
        display: block;
        width: auto;
        mix-blend-mode: screen;
        -webkit-filter: grayscale(100%) contrast(200%);
        filter: grayscale(100%) contrast(200%);
        opacity: 1;
        
    }
    
    .wraper-svg-img svg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }
    
    /* g:hover{
        cursor: pointer;
        fill: var(--marron);
        stroke: var(--marron); */
    /* } */
    
    .indexPath{
        position: absolute;
    }   

    text{
        font-family: eterne-bold;
        font-size: 1vw;
        line-height: 1;
        color: black;
        transform: translateY(-.4%);
    }

/* ------------------- secteur --------------------- */
    h1{
        text-align: start;
        font-family: vercors;
        line-height: .45;
        font-size: 11vw;
        margin: 0px;
        font-weight: unset;
        margin-bottom: calc(var(--margin-border)/6);
        width: 75%;
    }


    h2{
        text-align: start;
        font-weight: unset;
        font-family: eterne-text;
        font-size: 1.3vw;
        line-height: 1.1;
        margin: 0px;
        max-width: 65ch;
        position: relative;
    }

    .secteur{
        padding-top: calc(var(--margin-border)/3);
        padding-bottom: calc(var(--margin-border)/4);
    }

    .header-secteur{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .liste-voies{
        margin-top: calc(var(--margin-border)/4);
        column-count: 2;
        padding-bottom: calc(var(--margin-border)/3);
        border-bottom: 3px dotted black;
    }

    .liste-voies:last-of-type{
        border-bottom: none;
    }

    .liste-voies span{
        line-height: 1;
        font-size: 1.3vw;
    }

    .index-voie{
        font-family: eterne-text;
    }

    .nom-voie{
        font-family: eterne-bold;
    }

    .cotation-voie{
        font-family: eterne-text;
    }

    .wraper-infos-secteur{
        max-width: 25%;
        width: fit-content;
        display: flex;
        flex-direction: column;
        font-family: eterne-bold;
        line-height: 1;
        font-size: 1.3vw;
        margin-bottom: calc(var(--margin-border)/4);
    }

    #secteurs-sommaire{
        color: var(--blanc);
        display: flex;
        flex-direction: column;
        width: 100%;
        font-family: eterne-text;
        font-size: 1.3vw;
        align-items: start;
        padding-bottom: calc(var(--margin-border)/2);
    }

    #secteurs-sommaire a{
        color: var(--blanc);
        font-family: barronies !important;
        line-height: .45;
        font-size: 5vw;
        margin-left: 2%;
        text-decoration: none;
    }

    #secteurs-sommaire a:hover{
        cursor: pointer;
        color: var(--vert);
    }

    /* --------- formulaire ------------ */
    #contribuer{
        font-family: eterne-text;
        font-size: 1.3vw;
        width: 100%;
        color: var(--vert);
        padding-bottom: calc(var(--margin-border)/2);
        display: flex;
        flex-direction: row;
        height: 45vh;
    }

    form{
        display: flex;
        flex-direction: column;
        width: 25%;
    }

    form input{
        font-family: eterne-text;
        font-size: .9vw;
        padding: 1%;
        padding-left: 2%;
        padding-right: 2%;
        border-radius: 12px;
        border: none;
        border: 2px solid var(--blanc);
        margin-top: 3%;
        width: fit-content;
    }

    input[type="text"]:focus, input[type="textarea"]:focus{
        outline: none;
    }

    input[type="textarea"]{
        width: 100%;
        height: 4vw;
        text-align: start;
    }

    input[type="textarea"], input[type="text"]{
        background-color: var(--marron);
        color: var(--blanc);
    }

    input[type="file"]{
        border: 2px solid var(--vert);
    }

    input[type="submit"] {
        background-color: var(--vert);
        cursor: pointer;
        color: var(--marron);
        border: 2px solid var(--vert);
    }

    input[type="submit"]:hover {
        background-color: var(--blanc);
        border: 2px solid var(--blanc);
    }

    input[type="file"]:hover {
        background-color: var(--blanc);
        border: 2px solid var(--blanc);
        cursor: pointer;
    }

    input::file-selector-button {
        font-family: eterne-text;
        font-size: .9vw;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: .8%;
        padding-bottom: .8%;
        border-radius: 12px;
        border: none;
        color: var(--marron);
        background-color: var(--vert);
      }

/* -------------------carte ---------------------- */
    #map{
        width: 70%;
        height: auto;
        margin-left: 5%;
    }
    
    .custom-marker{
        background-color: var(--marron);
        border: 3px solid var(--blanc);
        width: 1vw;
        height: 1vw;
        border-radius: 100px;
    }
    
    .custom-marker:hover{
        background-color: var(--vert);
        cursor: pointer;
    }

    .mapboxgl-ctrl-bottom-right{
        display: none;
    }

/* -------------------acces ---------------------- */
    #acces{
        color: var(--vert);
        display: flex;
        padding-bottom: calc(var(--margin-border)/2);
        padding-top: calc(var(--margin-border)/2);
        font-family: eterne-text;
        font-size: 1.3vw;
        line-height: 1.1;
        border-bottom: 3px dotted black;
        width: 100%;
    }

    #acces p{
        width: 75%;
    }

    #acces img{
        height: 100%;
        max-width: 100% ;
        mix-blend-mode: screen;
        -webkit-filter: grayscale(100%) contrast(400%);
        filter: grayscale(100%) contrast(400%);
        opacity: 1;
        position: relative;
    }

    #acces #wraper{
        position: relative;
        background-color: var(--vert);
        display: inline-block;
        width: 55%;
        margin-right: 3%;
    }

    #acces-title{
        color: var(--vert);
        padding-top: calc(var(--margin-border)/2);
        text-align: center;
        width: 100%;
    }
}