@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Light.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
*,
html,
body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", Calibri, "Trebuchet MS", arial, sans-serif;
    font-size: 14px;
}
body{height: 100%; overflow: hidden;}
/*body{background-color: #f4f3ef;}*/
h4.mb-3,
.needs-validation > h4,
.col-lg-10 > label {
    font-size: 1rem;
}
hr.my-4 {
    margin-top: 0.8rem !important;
    margin-bottom: 0.1rem !important;
}
.fd {
    background-color: black;
    color: white;
}
.fd {
    background-color: rgb(244, 243, 239);
    color: #575757;
}
.bord {
    border: 1px dashed black;
}
.bord_bas {
    border-bottom: 1px solid green;
}
.colW {
    color: white;
}
.colB {
    color: black;
}
.ft15 {
    font-size: 1.07143rem;
} /*  15/14  */
.ft20 {
    font-size: 1.43rem;
} /*  20/14  */
h1,
h2,
h3 {
    font-weight: normal;
    font-size: 1rem;
}
.wrapper {
    display: block;
    width: 100%;
    height: 99.5vmax;
    border: 1px dashed black;
    position: relative;
    border-radius: 0 0 50px 50px;
    background-color: #f4f3ef;
    clip-path: fill-box;
}
.hemicirc {
    position: absolute;
    top: 86%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100px;
    width: 200px;
    border-radius: 150px 150px 0 0;
    background: radial-gradient(
        circle at 50% 100%,
        rgb(208, 239, 156) 45%,
        rgb(162, 204, 92) 45%,
        rgb(162, 204, 92) 60%,
        rgb(149, 185, 87) 60%,
        rgb(149, 185, 87) 100%
    );
    box-shadow: 0 0 0 15px rgb(222, 199, 98);
}
.bt_jour {
    display: block;
    margin: auto;
    width: 90vw;
    height: 90vw;
    border-radius: 45vw;
    text-align: center;
    cursor: pointer;
}
.bt_label {
    display: block;
    height: 45vw;
    font-size: 2rem;
    text-align: center;
    padding: 36vw 22.5vw;
    cursor: pointer;
    user-select: none;
}
.bt_option1,
.bt_option2 {
    position: absolute;
    display: none;
    right: 3vw;
    top: 25.5vw;
    width: 35vw;
    height: 35vw;
    border-radius: 17.5vw;
    text-align: center;
    cursor: pointer;
}
.bt_option2 {
    left: 3vw;
}
.bt_option1_label,
.bt_option2_label {
    display: block;
    height: 27vw;
    font-size: 1.2rem;
    text-align: center;
    padding: 13vw 10vw;
    cursor: pointer;
    user-select: none;
}
.bt_option1_label {
    text-shadow: 0 0 3px #3d310f;
}
.bt_option2_label {
    padding: 13vw 7.5vw;
}

.bt_vert {
    box-shadow: 0 0 1.5rem 1.5rem rgba(232, 247, 188, 0.75);
    background: #95b957;
    background: radial-gradient(
        ellipse at center,
        rgba(100, 193, 86, 1) 0%,
        rgba(100, 193, 86, 1) 40%,
        rgba(134, 212, 126, 1) 40%,
        rgba(134, 212, 126, 1) 45%,
        rgba(159, 218, 149, 1) 45%,
        rgba(159, 218, 149, 1) 60%,
        rgba(179, 226, 172, 1) 60%,
        rgba(179, 226, 172, 1) 75%,
        rgba(200, 238, 185, 0.9) 75%,
        rgba(200, 238, 185, 0.9) 100%
    );
}
.bt_jaune {
    background: #b9b657;
    background: radial-gradient(
        ellipse at center,
        rgba(230, 164, 0, 1) 0%,
        rgba(230, 164, 0, 1) 40%,
        rgba(242, 192, 3, 0.95) 40%,
        rgba(242, 192, 3, 0.95) 45%,
        rgba(247, 208, 16, 0.9) 45%,
        rgba(247, 208, 16, 0.9) 60%,
        rgba(251, 220, 37, 0.85) 60%,
        rgba(251, 220, 37, 0.85) 75%,
        rgba(255, 234, 51, 0.5) 75%,
        rgba(255, 234, 51, 0.2) 100%
    );
}
.bt_bleu {
    box-shadow: 0 0 1.5rem 1.5rem rgba(188, 192, 247, 0.75);
    background: #0b5dba;
    background: radial-gradient(
        ellipse at center,
        rgba(9, 91, 184, 1) 0%,
        rgba(9, 91, 184, 1) 40%,
        rgba(32, 104, 186, 0.95) 40%,
        rgba(32, 104, 186, 0.95) 45%,
        rgba(97, 145, 237, 0.9) 45%,
        rgba(97, 145, 237, 0.9) 60%,
        rgba(129, 165, 249, 0.85) 60%,
        rgba(129, 165, 249, 0.85) 75%,
        rgba(162, 198, 254, 0.5) 75%,
        rgba(162, 198, 254, 0.2) 100%
    );
}
.bt_violet {
    background: #5400ba;
    background: radial-gradient(
        ellipse at center,
        rgb(84, 0, 166) 0%,
        rgba(84, 0, 166, 1) 40%,
        rgba(94, 0, 212, 0.95) 40%,
        rgba(94, 0, 212, 0.95) 45%,
        rgba(105, 0, 222, 0.9) 45%,
        rgba(105, 0, 222, 0.9) 60%,
        rgba(118, 0, 240, 0.85) 60%,
        rgba(118, 0, 240, 0.85) 75%,
        rgba(156, 1, 252, 0.5) 75%,
        rgba(156, 1, 252, 0.2) 100%
    );
}

.head_p0 {
    display: block;
    margin: auto;
    text-align: center;
    width: 100vw;
    padding-top: 1.5rem;
}
.hmn {
    font-size: 3.5rem;
    margin: 0 auto;
}
.graph_p0 {
    display: block;
    position: relative;
    width: 92vw;
    height: 46vw;
    margin: 3rem 5vw 0;
    border-radius: 40vw 40vw 0 0;
}
.p1,
.p2 {
    display: block;
    position: absolute;
    top: 0;
    left: 100vw;
}
.head_p1,
.head_p2 {
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
    width: 90vw;
    height: 1rem;
    padding-top: 2rem;
}
.head_p1 > h1,
.head_p2 > h1 {
    font-size: 1.3rem;
}
.valheures {
    position: absolute;
    top: 11.0rem;
    left: 0.5rem;
    text-align: center;
    width: 100%;
}
.heuredeb,
.heurefin {
    display: block;
    position: absolute;
    bottom: -4.8rem;
}
.heuredeb {
    left: 3rem;
}
.heurefin {
    right: 4rem;
}
.open_stats {
    position: absolute;
    bottom: -4.0rem;
    left: 13rem;
    text-align: center;
}

/*NOUVELLE TECHNO POUR LE TEMPS GRAPHIQUE - ABANDON DU CANVAS*/
.cvblock {
    height: min-content;
    padding-top: 2.0rem;
    position: relative;
}
.adapt_graph0,
.adapt_graph1,
.adapt_graph2 {
    display: block;
    width: 40em;
    height: 40em;
    border-radius: 20em;
    margin: 0 auto;
}
.adapt_graph0 {
    font-size: 8px;
    position: relative;
    background-color: #c4bcb0;
    clip-path: inset(0 0 31.25% 0);
    transform: scale(0.99);
}
.adapt_graph1 {
    font-size: 8px;
    position: absolute;
    background: conic-gradient(from -116deg, rgba(255, 255, 255, 0.5), rgb(115, 204, 121) 359deg 360deg);
    /*background: conic-gradient(from 4deg, rgba(255, 255, 255, 0.5), rgb(115, 204, 121) 359deg 360deg);*/
    /*transform-origin: 20em 20em;
    transform: rotate(0deg);*/ /*-115*/
}
.adapt_graph2 {
    font-size: 7px;
    position: absolute;
    background-color: rgb(244, 243, 239);
    transform: scale(0.88);
}

/****************************************AFFICHAGE SUR UN ORDINATEUR*********************************************/
@media screen and (width >400px) {
    .cvblock {
        padding-top: 1rem;
    }
    .open_stats {
        bottom: -3.0rem;
        left: 11.5rem;
    }
    .valheures {
        top: 10.2rem;
    }
    .heuredeb,
    .heurefin {
        bottom: -3.5rem;
    }
    .heuredeb {
        left: 3.5rem;
    }
    .heurefin {
        right: 4.2rem;
    }
    .adapt_graph0 {
        transform: scale(0.82);
    }
    .adapt_graph2 {
        transform: scale(0.88);
    }
    .head_p1 > h1,
    .head_p2 > h1 {
        font-size: 1.2rem;
    }
    .bt_jour {
        width: 22rem;
        height: 22rem;
        margin: 1em;
    }
    .bt_label {
        height: 11rem;
        padding: 8rem 5.5rem;
        font-size: 1.7rem;
    }
    .head_p0,
    .head_p1,
    .head_p2 {
        width: 24rem;
        margin: 0;
    }
    .graph_p0 {
        width: 22rem;
        height: 11rem;
        margin: 5rem 0.5rem 0 1rem;
    }
    body.fd {
        background-color: black;
    }
    .wrapper {
        width: 24rem;
        height: 54rem;
        margin: 1rem auto;
        border: none;
        background-color: #f4f3ef;
    }

    .p1,
    .p2 {
        top: -1rem;
        left: 25rem;
        margin: 1rem auto;
    }
    h4.mb-3 {
        margin-top: 0 !important;
    }
    .bt_option1,
    .bt_option2 {
        right: 0.8rem;
        top: 8.2rem;
        width: 8.8rem;
        height: 8.8rem;
        border-radius: 4.4rem;
    }
    .bt_option2 {
        left: 0.87rem;
    }
    .bt_option1_label,
    .bt_option2_label {
        height: 3rem;
        font-size: 1.1rem;
        text-align: center;
        padding: 3.2rem 0 0 0.2rem;
        cursor: pointer;
        user-select: none;
    }
    .bt_option2_label {
        padding: 3.2rem 0 0 0.2rem;
    }
}