@font-face {
    font-family: manifont-bold;
    src: url('fonts/ManifontGroteskBold-webfont.woff');
}

@font-face {
    font-family: manifont-txt;
    src: url('fonts/ManifontGroteskBook-webfont.woff');
}

@font-face {
    font-family: manifont-txt-it;
    src: url('fonts/ManifontGroteskBookItalic-webfont.woff');
}

*{
    font-family: manifont-bold;
    scroll-behavior: smooth;
}

*:hover{
    cursor: default;
}

:root{
    --rose : #FFB9B9;
    --gris : #707070;
}

body{
    overflow-x: hidden;
    margin: 0px;
    padding: 0px;
    background-color: var(--rose);
    padding-bottom: 10vh;
}

@media(orientation: landscape){
    #header section{
        z-index: 3;
        position: fixed;
        top: 0px;
        left: 0px;
        padding: .8vw;
        height: fit-content;
        overflow: visible;
        width: calc(100% - 1.6vw);
        display: flex;
        justify-content: space-between;
        font-size: 2vw;
        color: var(--rose);
        text-shadow: -.22vw 0 var(--gris), 0 .22vw var(--gris), .22vw 0 var(--gris), 0 -.22vw var(--gris);
        background: linear-gradient(180deg,var(--gris) 0%, rgba(255, 255, 255, 0) 100%);
    }

    #header a{
        transition:.1s ease-in-out;
        text-decoration: none;
        color: var(--rose);
    }

    #header a:hover{
        cursor: pointer;
        color: var(--gris);
        text-shadow: -.35vw 0 var(--rose), 0 .35vw var(--rose), .35vw 0 var(--rose), 0 -.35vw var(--rose);
    }

    #accueil{
        width: 100vw;
        height: 100vh;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
    }

    #accueil  img {
        width: 100%;
        height: fit-content;
        position: relative;
        z-index: -1;
        left: 50%;
        transform: translateX(-50%);
    }

    h2{
        font-size: 4vw;
        text-align: center;

        margin: 0px;
        padding: 3vw;
    }

    p{
        font-size: 1.6vw;
    }



    .center{
        text-align: center;
    }

    #le-trace h2{
        color: var(--rose);
        text-shadow: -.7vw 0 var(--gris), 0 .7vw var(--gris), .7vw 0 var(--gris), 0 -.7vw var(--gris);
    }

    #les-regles h2{
        color: var(--gris);
        text-shadow: -.7vw 0 var(--rose), 0 .7vw var(--rose), .7vw 0 var(--rose), 0 -.7vw var(--rose);
    }

    #pantheon h2{
        color: var(--rose);
        text-shadow: -.7vw 0 var(--gris), 0 .7vw var(--gris), .7vw 0 var(--gris), 0 -.7vw var(--gris);
    }

    #participer h2{
        color: var(--gris);
        text-shadow: -.7vw 0 var(--rose), 0 .7vw var(--rose), .7vw 0 var(--rose), 0 -.7vw var(--rose);
    }


    #le-trace{
            z-index: 1;
            padding-left: 20vw;
            padding-right: 20vw;
            padding-top: 2vw;
            width: 60vw;
            color: var(--gris);
            background-color: var(--rose);
            position: relative;
        padding-bottom: 10vh;
    }

    #les-regles{
        color: var(--rose);
        z-index: 1;
        position: relative;
        padding-top: 2vw;

        padding-left: 20vw;
        padding-right: 20vw;
        padding-bottom: 7vw;

        width: 60vw;
        background-color: var(--gris);

        height: fit-content;
    }

    #pantheon{
        z-index: 1;
        position: relative;
        padding-top: 2vw;

        padding-left: 20vw;
        padding-right: 20vw;
        padding-bottom: 7vw;
        width: 60vw;
        background-color: var(--rose);

        height: fit-content;
    }

    #participer{
        z-index: 1;
        position: relative;
        padding-top: 2vw;

        padding-left: 20vw;
        padding-right: 20vw;
        width: 60vw;
        background-color: var(--gris);

        height: 100vh;
    }

    #map{
        height: 65vh;
        margin-top: 4vw;
        border: .2vw solid var(--gris);
    }



    .mapboxgl-ctrl{
        display: none;
    }

    .mapboxgl-touch-drag-pan{
        width: 100%;
        height: 100%;
    }

    #telecharger{
        border-radius: 1.5vw;
        corner-shape: bevel;
        border: .2vw solid var(--gris);
        color: var(--gris);
        text-decoration: none;
        text-align: center;
        width: fit-content;
        font-size: 2vw;
        padding: .9vw;
        padding-top: 1.5vw;
        margin-top: 3vw;
        display: block;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
        font-family: manifont-txt;
    }

    #telecharger:hover{
        color: var(--rose);
        background-color: var(--gris);
    }

    .custom-marker{
        width: fit-content;
        height: fit-content;
        background-color: var(--rose);
        border: .15vw var(--gris) solid;
        border-radius: 3vw;
        padding: .35vw;
        padding-top: .55vw;
        line-height: 1;
    }

    h3{
        text-align: center;
        font-family: manifont-bold;
        font-size: 3vw;
        margin-bottom: 0px;
        margin-top: 5vw;
    }

    .lien-topo{
        font-family: manifont-txt;
        text-align: center;
        position: relative;
        font-size: 2vw;
        width: 100%;
        display: block;
    }

    .lien-topo:hover{
        cursor: pointer;
        text-decoration: underline;
    }

    #logo{
        position: fixed;
        bottom: 0px;
        left: 50vw;
        transform: translateX(-50%);
        padding: 2vw;
        z-index: 9999999;
        width: 12vw;
        height: auto;
    }

    #logo:hover svg{
        cursor: pointer;
        fill: var(--gris);
        stroke: var(--rose);
    }


    #logo svg{
        transition: .1s ease-in-out;
        stroke: var(--gris);
        fill: var(--rose);
        stroke-width: .5vw;
        /* fill: transparent; */
        text-shadow: -.22vw 0 var(--gris), 0 .22vw var(--gris), .22vw 0 var(--gris), 0 -.22vw var(--gris);
    }

    #header h1{
        width: 100%;
        text-align: center;
        color: var(--rose);
        font-size: 7.8vw;
        text-shadow: -.8vw 0 var(--gris), 0 .8vw var(--gris), .8vw 0 var(--gris), 0 -.8vw var(--gris);
        margin-top: 1vw;
        position: fixed;
        z-index: 1;
        transform: translateY(40%);
    }

    a{
        text-decoration: none;
        color: var(--gris);
    }

    .participation{
        border: .2vw solid var(--gris);
        corner-shape: bevel;
        border-radius: 2vw;
        padding: 2vw;
        color: var(--gris);

        display: flex;
        flex-direction: column;
    }  

    .participation p{
        margin: 0px;
    }

    .pantheon-tableau{
        margin-bottom: 10vh;
    }

    .pantheon-temps-date{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 1vw;
    }

    .pantheon-coureur{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
    }

    .pantheon-coureur-title{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }

    .liste-voies{
        width: 100%;
        text-align: end;
        /* margin-bottom: 1vw;
        margin-top: .5vw; */
        transition: margin-top .4s, margin-bottom .4s, max-height .2s ease-in-out;
        max-height: 0px;
        overflow: hidden;
    }

    .liste-voies p{
        font-family: manifont-txt-it;
        margin-bottom: .7%;
    }

    .participation:hover .liste-voies {
        margin-bottom: 1vw;
        margin-top: .5vw;
        max-height: 100vh;
    }

    .participation:hover .imgs-pantheon{
        max-height: 100vh;
    }


    .participation:hover{
        color: var(--rose);
        background-color: var(--gris);
    }

    .imgs-pantheon{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-height: 0px;
        overflow: hidden;
        transition: .2s ease-in-out;
    }

    .imgs-pantheon img{
        width: calc(100%/4.3);
        margin: .8%;
        margin-bottom: .6%;
        height: fit-content;
        corner-shape: bevel;
        border-radius: 1vw;
        filter: url(#gradient-map);
    }
}


/* ---------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------- */
/* ------------------------  MOBILE  ------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------- */

@media(orientation: portrait){
    #header section{
        z-index: 3;
        position: fixed;
        bottom: 0px;
        left: 0px;
        padding: 2.5vw;
        height: fit-content;
        overflow: visible;
        width: calc(100vw - 5vw);
        flex-wrap: wrap;
        display: flex;
        justify-content: space-between;
        align-content: space-between;
        font-size: 6vw;
        color: var(--rose);
        text-shadow: -1vw 0 var(--gris), 0 1vw var(--gris), 1vw 0 var(--gris), 0 -1vw var(--gris);
        background: linear-gradient(0deg,var(--gris) 0%, rgba(255, 255, 255, 0) 100%);
    }
    
    #header a{
        transition:.1s ease-in-out;
        text-decoration: none;
        color: var(--rose);
        height: fit-content;
        width: 50%;
        margin-bottom: 1.5vw;
    }

    #header section a:last-of-type{
        text-align: end;
        margin-bottom: .5vw;
    }

    #header section > :nth-child(2) {
        text-align: end;
    }

    #header section > :nth-child(3) {
        margin-bottom: .5vw;
    }
    
    #header a:hover{
        cursor: pointer;
        color: var(--gris);
        text-shadow: -.35vw 0 var(--rose), 0 .35vw var(--rose), .35vw 0 var(--rose), 0 -.35vw var(--rose);
    }
    
    #accueil{
        width: 100vw;
        height: 100vh;
    
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    
    #accueil img{
        height: 100%;
        transform: translateX(-20%);
    }
    
    h2{
        font-weight: normal;
        font-size: 8vw;
        text-align: center;
    
        margin: 0px;
        padding: 3vw;
    }
    
    p{
        font-size: 4vw;
    }
    
    
    
    .center{
        text-align: center;
    }
    
    #le-trace h2{
        color: var(--rose);
        text-shadow: -1.1vw 0 var(--gris), 0 1.1vw var(--gris), 1.1vw 0 var(--gris), 0 -1.1vw var(--gris);
    }
    
    #les-regles h2{
        color: var(--gris);
        text-shadow: -1.1vw 0 var(--rose), 0 1.1vw var(--rose), 1.1vw 0 var(--rose), 0 -1.1vw var(--rose);
    }
    
    #pantheon h2{
        color: var(--rose);
        text-shadow: -1.1vw 0 var(--gris), 0 1.1vw var(--gris), 1.1vw 0 var(--gris), 0 -1.1vw var(--gris);
    }
    
    #participer h2{
        color: var(--gris);
        text-shadow: -1.1vw 0 var(--rose), 0 1.1vw var(--rose), 1.1vw 0 var(--rose), 0 -1.1vw var(--rose);
    }
    
    
    #le-trace{
            z-index: 1;
            padding-left: 5vw;
            padding-right: 5vw;
            padding-top: 2vw;
            width: 90vw;
            color: var(--gris);
            background-color: var(--rose);
            position: relative;
            padding-bottom: 10vh;
    }
    
    #les-regles{
        color: var(--rose);
        z-index: 1;
        position: relative;
        padding-top: 2vw;
    
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 7vw;
    
        width: 90vw;
        background-color: var(--gris);
    
        height: fit-content;
    }
    
    #pantheon{
        z-index: 1;
        position: relative;
        padding-top: 2vw;
    
        padding-left: 5vw;
        padding-right: 5vw;
        padding-bottom: 7vw;
        width: 90vw;
        background-color: var(--rose);
    
        height: fit-content;
    }
    
    #participer{
        z-index: 1;
        position: relative;
        padding-top: 2vw;
    
        padding-left: 20vw;
        padding-right: 20vw;
        width: 60vw;
        background-color: var(--gris);
    
        height: 100vh;
    }
    
    #map{
        height: 50vh;
        margin-top: 4vw;
        border: .2vw solid var(--gris);
    }
    
    
    
    .mapboxgl-ctrl{
        display: none;
    }
    
    .mapboxgl-touch-drag-pan{
        width: 100%;
        height: 100%;
    }
    
    #telecharger{
        border-radius: 5vw;
        corner-shape: bevel;
        border: .2vw solid var(--gris);
        color: var(--gris);
        text-decoration: none;
        text-align: center;
        width: fit-content;
        font-size: 4.5vw;
        padding: .9vw;
        padding-top: 2vw;
        padding-right: 1.9vw;
        padding-left: 1.9vw;
        margin-top: 3vw;
        display: block;
        left: 50%;
        transform: translateX(-50%);
        position: relative;
        font-family: manifont-txt;
    }
    
    #telecharger:hover{
        color: var(--rose);
        background-color: var(--gris);
    }
    
    .custom-marker{
        width: fit-content;
        height: fit-content;
        background-color: var(--rose);
        border: .5vw var(--gris) solid;
        border-radius: 6svw;
        padding: 1.15vw;
        padding-top: 1.7vw;
        line-height: 1;
    }
    
    h3{
        font-weight: normal;
        text-align: center;
        font-family: manifont-bold;
        font-size: 6vw;
        margin-bottom: 0px;
        margin-top: 9vw;
    }
    
    .lien-topo{
        font-family: manifont-txt;
        text-align: center;
        position: relative;
        font-size: 4.5vw;
        width: 100%;
        display: block;
    }
    
    .lien-topo:hover{
        cursor: pointer;
        text-decoration: underline;
    }
    
    #logo{
        display: none;

        position: fixed;
        bottom: 0px;
        left: 50vw;
        transform: translateX(-50%);
        padding: 2vw;
        z-index: 9999999;
        width: 12vw;
        height: auto;
    }
    
    #logo:hover svg{
        cursor: pointer;
        fill: var(--gris);
        stroke: var(--rose);
    }
    
    
    #logo svg{
        transition: .1s ease-in-out;
        stroke: var(--gris);
        fill: var(--rose);
        stroke-width: .5vw;
        /* fill: transparent; */
        text-shadow: -.22vw 0 var(--gris), 0 .22vw var(--gris), .22vw 0 var(--gris), 0 -.22vw var(--gris);
    }
    
    #header h1{
        font-weight: normal;
        width: 100%;
        text-align: center;
        color: var(--rose);
        font-size: 14vw;
        text-shadow: -1.5vw 0 var(--gris), 0 1.5vw var(--gris), 1.5vw 0 var(--gris), 0 -1.5vw var(--gris);
        top: 0px;
        padding-top: 4vw;
        position: fixed;
        z-index: 1;
        margin: 0px;
    }
    
    a{
        text-decoration: none;
        color: var(--gris);
    }
    
    .participation{
        border: .2vw solid var(--gris);
        corner-shape: bevel;
        border-radius: 2vw;
        padding: 2vw;
        color: var(--gris);
    
        display: flex;
        flex-direction: column;
    }  
    
    .participation p{
        margin: 0px;
    }
    
    .pantheon-tableau{
        margin-bottom: 10vh;
    }
    
    .pantheon-temps-date{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-bottom: 1vw;
    }
    
    .pantheon-coureur{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
    }
    
    .pantheon-coureur-title{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }
    
    .liste-voies{
        width: 100%;
        text-align: end;
        /* margin-bottom: 1vw;
        margin-top: .5vw; */
        transition: margin-top .4s, margin-bottom .4s, max-height .2s ease-in-out;
        max-height: 0px;
        overflow: hidden;
    }
    
    .liste-voies p{
        font-family: manifont-txt-it;
        margin-bottom: .7%;
    }
    
    .participation:hover .liste-voies {
        margin-bottom: 1vw;
        margin-top: .5vw;
        max-height: 100vh;
    }
    
    .participation:hover .imgs-pantheon{
        max-height: 400vh;
    }
    
    
    .participation:hover{
        color: var(--rose);
        background-color: var(--gris);
    }
    
    .imgs-pantheon{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        max-height: 0px;
        overflow: hidden;
        transition: .2s ease-in-out;
    }
    
    .imgs-pantheon img{
        width: calc(100%/2.1);
        margin: 1.1%;
        margin-bottom: .6%;
    
        corner-shape: bevel;
        border-radius: 1vw;
        filter: url(#gradient-map);
    }
}