:root{
	--cinq_C: blue;
    --six_A: green;
    --six_B: rgb(192, 186, 2);
    --six_C: rgb(255, 123, 0);
    --sept_A: rgb(159, 0, 149);
    --sept_B: rgb(187, 4, 4);

    --voie-height: 3vh;
    --img-height: 20vh;
    --img-margins: .5vh;
}

@font-face {
    font-family: park;
    src: url(fonts/NationalPark-VariableVF.ttf);
}

html,
body {
    margin: 0px;
    /* font-family: Helvetica, sans-serif; */
    font-family: park;
    font-size: 110%;
}

.voie-title{
    margin-left: 1%;
    font-weight: 600;
}

#voies {
    top: .7vw;
    width: 100vw;
    height: 78vh;
    position: fixed;
    overflow-y: scroll;
}

#gestion {
    padding-top: 2vh;
    position: fixed;
    bottom: 0px;
    height: fit-content;
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 95%, rgba(255, 255, 255, 0) 100%);
z-index: 10;
}

#graphique {
    position: relative;
    bottom: 0px;
    margin-bottom: 1vw;
    height: fit-content;
}

#boutons {
    height: 5vh;
    width: 100vw;
    position: relative;
    display: flex;
    flex-direction: row;
    z-index: 1;
}

#barre-cinq-c {
    background-color: var(--cinq_C); 
}
#barre-six-a {
    background-color: var(--six_A); 
}
#barre-six-b {
    background-color: var(--six_B); 
}
#barre-six-c {
    background-color: var(--six_C); 
}
#barre-sept-a {
    background-color: var(--sept_A); 
}
#barre-sept-b {
    background-color: var(--sept_B); 
}
#apercu-de-site{
    display: none;
    position: absolute;
    z-index: 100;
    height: 15vw;
}
#retour{
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 30;
    height: fit-content;
    width: fit-content;
    margin: 1vw;
    writing-mode: vertical-lr;
}

.jauge {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nom-barre {
    display: inline-block;
    margin-left: 2vw;
    font-size: 80%;
}

.barre {
    border-radius: 100px;
    transition: width 1s;
    width: 0;
    display: inline-block;
    height: .3vw;
    margin-left: .5vw;
}
.nombre{
    font-size: 80%;
    margin-left: .2vw;
}
.bouton {
    color: black;
    padding-top: 0.5vw;
    padding-bottom: 1vw;
    position: relative;
    height: 100%;
    width: 25%;
    display: inline-block;
    text-align: start;
    transition: .2s;
    font-weight: bold;
    margin-left: 1.5vw;
}

.fleche {
    transition: .2s;
}

.fleche:hover {
    color: rgb(0, 0, 0);
    text-decoration: underline;
    cursor: pointer;
}

#retour:hover{
    color: rgb(0, 0, 0);
    cursor: pointer;
    text-decoration: underline;
}

.voie {
    height: var(--voie-height);
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    overflow: hidden;
    transition: .2s;
}
/* ---------------hover des voies ---------------------- */
.voie:hover {
    /* border-bottom: 2.2px dotted gray;
    border-top: 2.2px dotted gray; */
    cursor: pointer;
}

.wip p .pastille{
    color: black;
}
.voie.wip:hover{
    border-bottom: 2.2px dotted black !important;
    border-top: 2.2px dotted black !important;
}

.voie.cinq-c:hover, .voie.cinq-c-plus:hover{
    border-bottom: 2.2px dotted var(--cinq_C);
    border-top: 2.2px dotted var(--cinq_C);
}

.voie.six-a:hover, .voie.six-a-plus:hover{
    border-bottom: 2.2px dotted var(--six_A);
    border-top: 2.2px dotted var(--six_A);
}
.voie.six-b:hover, .voie.six-b-plus:hover{
    border-bottom: 2.2px dotted var(--six_B);
    border-top: 2.2px dotted var(--six_B);
}
.voie.six-c:hover, .voie.six-c-plus:hover{
    border-bottom: 2.2px dotted var(--six_C);
    border-top: 2.2px dotted var(--six_C);
}
.voie.sept-a:hover, .voie.sept-a-plus:hover{
    border-bottom: 2.2px dotted var(--sept_A);
    border-top: 2.2px dotted var(--sept_A);
}
.voie.sept-b:hover, .voie.sept-b-plus:hover{
    border-bottom: 2.2px dotted var(--sept_B);
    border-top: 2.2px dotted var(--sept_B);
}
/* -------------------------------- ---------------------- */
.voie .cinq-c, .voie .cinq-c-plus{
    color: var(--cinq_C);
}
.voie .six-a, .voie .six-a-plus{
    color: var(--six_A);
}
.voie .six-b, .voie .six-b-plus{
    color: var(--six_B);
}
.voie .six-c, .voie .six-c-plus{
    color: var(--six_C);
}
.voie .sept-a, .voie .sept-a-plus{
    color: var(--sept_A);
}
.voie .sept-b, .voie .sept-b-plus{
    color: var(--sept_B);
}

.voie > div{
    width: 25%;
    height: var(--voie-height);
}

.img-site > img{
    transition: .3s;
    height: var(--img-height);
    display: none;

    margin-bottom: var(--img-margins);
}

.closingCross{
    height: fit-content;
    width: fit-content !important;
    transition: .5s;
    margin-right: 1vw;
    transform: translateX(300%);
}

.closingCross:hover{
    font-weight: bold;
}

#blank{
    width: 1.1vw !important;
}

.wip{
    opacity: 40%;
    background: linear-gradient(45deg, black 1%, #fff 1%, #fff 49%, black 49%, black 51%, #fff 51%, #fff 99%, black 99%);
  background-size: 6px 6px;
  background-position: 50px 50px;
      
}


.additionnellesinfos{
    opacity: 40%;
    /* display: none; */
}

.no-flash{
    display: none;
}

.flash{
    vertical-align: baseline;
  font-size: 60%;
  font-weight: bold;
}

.duotone{
    transition: 0s;
    width: fit-content;
}

div.duotone:hover{
    background: none !important;
} 

.duotone img:hover{
    mix-blend-mode: none;
    -webkit-filter: grayscale(0%) contrast(100%);
    filter: grayscale(0%) contrast(100%);
    opacity: 100%;
}

.duotone img{
    transition: 0s;
    mix-blend-mode: screen;
    -webkit-filter: grayscale(100%) contrast(200%);
    filter: grayscale(100%) contrast(200%);
    opacity: 1;
}

div.duotone.cinq-c, div.duotone.cinq-c-plus{
    background: var(--cinq_C);
}

div.duotone.six-a, div.duotone.six-a-plus{
    background: var(--six_A);
}

div.duotone.six-b, div.duotone.six-b-plus{
    background: var(--six_B);
}

div.duotone.six-c, div.duotone.six-c-plus{
    background: var(--six_C);
}

div.duotone.sept-a, div.duotone.sept-a-plus{
    background: var(--sept_A);
}

div.duotone.sept-b, div.duotone.sept-b-plus{
    background: var(--sept_B);
}