@font-face {
    font-family: Vercors;
    src: url(fonts/Drome-Vercors.woff2);
}

@font-face {
    font-family: Ardeche;
    src: url(fonts/Drome-Ardeche.woff2);
}

@font-face {
    font-family: Barronies;
    src: url(fonts/Drome-Barronies.woff2);
}

@font-face {
    font-family: Royans;
    src: url(fonts/Drome-Royans.woff2);
}

@font-face {
    font-family: Diois;
    src: url(fonts/Drome-Diois.woff2);
}

@font-face {
    font-family: eterne-text;
    src: url(fonts/eterne-text.woff2);
}

@font-face {
    font-family: eterne-bold;
    src: url(fonts/eterne-text-1.woff2);
}

:root{
    --vert: #000000;
    --marron: #2d1b0b;
    --blanc: rgb(255, 255, 255);
    --margin-border: 6vw;
}

@media print {
    @page {
     /* format */
     size: 210mm 148mm;
     /* marks: crop; */

     /* Margin  */
     margin-top: 4mm;
     margin-left: 4mm;
     margin-right: 4mm;
     margin-bottom: 4mm;

     /* Color */
     color: black;
     font-family: eterne-text;
     font-size: 9pt;
     line-height: 1.1;
    }

    .gray{
        opacity: 50%;
    }

    #titre, #lieu-dit{
        font-size: 250px;
        text-align: center;
        margin: 0px;
        line-height: .45;

        opacity: 25%;
        z-index: 100;
        position: relative;
    }

    #titre{
        font-family: vercors;
    }

    #lieu-dit{
        font-family: diois;
    }

    .barronnies{
        font-family: barronies;
        font-size: 50pt;
        line-height: .45;
    }
    /* ------------------- note --------------------- */

    hr{
        color: black;
    }

    /* ------------------- boutons modules --------------------- */
    .button{
        z-index: 1000;
        width: 10mm;
        position: absolute;
        filter: brightness(0%) saturate(100%);
    }

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

    #btn-2{
        bottom: 0px;
        left: 0px;
    }
    #btn-3{
        top: 0px;
        right: 0px;
    }

    #btn-3 > p{
        width: 100mm;
        position: absolute;
        right: 0px;
        text-align: end;
    }

    #btn-4{
        right: 0px;
        bottom: 0px;
    }
    #btn-5{
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* layout page 1 */

    #bloc-2{
        width: 100%;
        display: flex;
        flex-direction: row;
        position: absolute;
        bottom: 5mm;
        justify-content: space-between;
        break-after: always;
    }

    #bloc-2 section{
        width: 40%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    #bloc-2 img{
        /* width: 59%; */
        max-height: 100mm;
        filter: grayscale(100%) contrast(400%);
    }

    /* ------------------------ contribution ------------------------ */
    .contributions{
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
        break-before: always;
        bottom: 0px;
    }

    .img-wrapper-contribution{
        width: 100%;
        height: 127.24px;

        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 100%;

        overflow: hidden;
    }

    .contribution{
        width: calc(100%/3)
    }

    .contribution img{
        width: 100%;
        height: auto;
        filter: contrast(150%) grayscale(100%);
        transform: translateY(-25%);
    }

    .infos-contribution{
        margin-left: 1mm;
        margin-right: 1mm;
        display: flex;
        justify-content: space-between;
        font-size: 7.5pt;
    }

    #colophon{
        position: absolute;
        bottom: 0px;
        width: 100%;
        text-align: center;
    }

/* ------------------------ secteurs ------------------------ */
    .secteur{
        break-after: always;
        font-size: 10pt;
        page: folio;
    }

    .header-secteur{
        break-after: always;
    }

    .wraper-svg-img{
        height: 140mm;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
        page: none;

    }

    .wraper-svg-img img{
        max-height: calc(148mm - 2 * 4mm);
        max-width: 100%;
        position: absolute;

        filter: grayscale(100%) contrast(150%);
    }

    .wraper-svg-img svg{
        top: 0;
        left: 0;
        width: 212mm;
        height: 140mm;
        position: absolute;
        overflow: visible;
    }

    text{
        font-family: eterne-bold;
        line-height: 1;
        font-size: 3mm;
        /* transform: translateY(.11%); */
    }

    h1{
        margin: 0px;
        margin-bottom: 2%;
    }

    .wraper-infos-secteur{
        margin-bottom: 2%;
    }

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