:root {
    --ciele: #48cae4;
    --herbe: #38b000;
    --desieme_pland_montagnie_goche: #36910c;
    --desieme_pland_montagnie_centrale: #008000;
    --troisiem_pland_montagnie_goche: #007200;
    --soleil_reyon: #ffd60a;
    --route: gray;
    --route_ligne_blanche: white;
    --chemain_de_terre: rgb(184, 134, 11);
    --tuiles: rgb(184, 134, 11);
    --mure_milieux: rgb(240, 230, 140);
    --murs_bas: rgb(255, 215, 0);
}

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

p.cursive {
    font-family: cursive;
    transform: rotate(1deg);
}

a.cursive {
    font-family: cursive;
    transform: rotate(1deg);
}

.fond {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 100;
}

.fond .cielle {
    height: 100%;
    width: 100%;
    background-color: var(--ciele);
}

.fond .soleil {
    position: fixed;
    top: 6%;
    right: 5%;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    background: radial-gradient(orange, yellow);
    filter: drop-shadow(0px 0px 25px var(--soleil_reyon));
}

.fond .herbe {
    position: fixed;
    background-color: var(--herbe);
    height: 100%;
    width: 100%;
    z-index: 110;
}

.fond .route {
    position: fixed;
    background-color: var(--route);
    height: 150%;
    width: 200%;
    z-index: 120;
    top: -10%;
    left: -20%;
    transform: rotate(-40deg);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.fond .route .ligne_blanche {
    position: absolute;
    background-color: white;
    height: 20px;
    width: 400px;
}








.troisieme_plant {
    position: fixed;
    bottom: 0px;
    height: 65%;
    width: 100%;
    z-index: 200;
}

.troisieme_plant .herbe {
    position: fixed;
    bottom: 0px;
    height: 20%;
    width: 100%;
    background-color: var(--herbe);
}

.troisieme_plant .montagnie_un_bas_droit {
    position: fixed;
    bottom: 25%;
    right: 0px;
    background-color: var(--herbe);
    height: 18%;
    width: 55%;
    border-radius: 1000% 10% / 1000% 0 0 0;
    z-index: 225;
}

.troisieme_plant .montagnie_deux_bas_goche {
    position: fixed;
    bottom: 25%;
    left: 0px;
    background-color: var(--desieme_pland_montagnie_goche);
    height: 10%;
    width: 50%;
    border-radius: 100% 50% / 50% 100% 0 0;
    z-index: 220;
}

.troisieme_plant .montagnie_trois_centre_enctre {
    position: fixed;
    bottom: 25%;
    left: calc(((100% - 50%) / 2) + 3%);
    background-color: var(--desieme_pland_montagnie_centrale);
    height: 25%;
    width: 60%;
    border-radius: 800% 800% / 3000% 4000% 0 0;
    z-index: 215;
}

.troisieme_plant .montagnie_quatre_haut_goche {
    position: fixed;
    bottom: 25%;
    left: 0px;
    background-color: var(--troisiem_pland_montagnie_goche);
    height: 35%;
    width: 40%;
    border-radius: 0 1000% / 0 1000% 0 0;
    z-index: 210;
}

.troisieme_plant .montagnie_cinque_haut_droite {
    position: fixed;
    bottom: 25%;
    right: 0px;
    background-color: var(--troisiem_pland_montagnie_goche);
    height: 30%;
    width: 15%;
    border-radius: 1000% 0 / 1000% 0% 0 0;
    z-index: 205;
}

.segond_plant {
    position: fixed;
    width: 100%;
    height: 50%;
    bottom: 0px;
    z-index: 300;
}

.segond_plant .route {
    display: flex;
    position: fixed;
    bottom: 5%;
    width: 100%;
    height: 20%;
    background-color: var(--route);
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}

.segond_plant .route .ligne_blanche {
    height: 5%;
    width: 170px;
    background-color: var(--route_ligne_blanche);
    -webkit-transform: skew(50deg);
}

.premiet_plant {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 400;
    cursor: grabbing;
}

.premiet_plant a {
    cursor: pointer;
}

.premiet_plant a img {
    position: fixed;
    width: 500px;
    bottom: 10%;
    left: 20%;
}

.premiet_plant a svg {
    position: fixed;
    width: 500px;
    height: auto;
    bottom: 10%;
    left: 20%;
}

.premiet_plant header {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 3%;
    right: 200px;
}

.premiet_plant header .poto {
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 250px;
    width: 25px;
    background-color: saddlebrown;
    border: solid 0.1px rgb(87, 44, 13);
    font-weight: bolder;
    border-top: solid rgb(87, 44, 13) 2px;
    border-left: solid rgb(87, 44, 13) 2px;
}

.premiet_plant header .poto a {
    display: flex;
    height: 50px;
    width: 150px;
    margin-top: 10px;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    background-color: saddlebrown;
    border: solid 0.1px rgb(87, 44, 13);
    font-weight: bolder;
    border-top: solid rgb(87, 44, 13) 2px;
    border-left: solid rgb(87, 44, 13) 2px;
    color: white;
    cursor: pointer;
}

.premiet_plant .poto_horaire {
    display: flex;
    flex-direction: column;
    bottom: 0px;
    right: calc(50% - (170px/2));
    position: fixed;
    align-items: center;
    flex-direction: column;
    height: 100%;
    width: 170px;
    background-color: saddlebrown;
    border: solid 0.1px rgb(87, 44, 13);
    font-weight: bolder;
    border-top: solid rgb(87, 44, 13) 2px;
    border-left: solid rgb(87, 44, 13) 2px;
    justify-content: center;
    align-items: center;
}

.premiet_plant .pano {
    position: fixed;
    display: flex;
    flex-direction: column;
    position: fixed;
    margin-top: 10px;
    background-color: saddlebrown;
    border: solid 0.1px rgb(87, 44, 13);
    font-weight: bolder;
    border-top: solid rgb(87, 44, 13) 2px;
    border-left: solid rgb(87, 44, 13) 2px;
    height: 70%;
    width: 70%;
}

.premiet_plant .pano a.fermer {
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 25px;
    background-color: rgb(0, 0, 0);
    height: 40px;
    width: 40px;
}

.premiet_plant .pano .affichage_horaire {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow-x: auto;
    width: 100%;
}

.premiet_plant .pano .affichage_info {
    overflow-y: auto;
}

.premiet_plant .pano .affichage_info p {
    color: white;
    font-size: 30px;
}

.premiet_plant .pano .affichage_info p.titre {
    display: flex;
    font-size: 35px;
    text-decoration: underline;
    justify-content: center;
}

.premiet_plant .pano .affichage_info a {
    color: black;
    background-color: rgba(255, 00, 00, 0.1);
    font-size: 30px;
    font-weight: bolder;
    margin-top: 10px;
    margin-left: 10px;
    text-decoration: underline overline red;
}

.premiet_plant .pano .affichage_info .horaire_presante {
    display: flex;
    flex-wrap: wrap;
}

.premiet_plant .pano .affichage_horaire .horaire_presante {
    display: flex;
    flex-wrap: wrap;
}

.premiet_plant .pano .affichage_horaire p {
    color: white;
    font-size: 50px;
    margin-top: 10px;
}

.premiet_plant .telephone {
    position: fixed;
    background-color: black;
    height: 70%;
    width: 30%;
    border: grey 3px solid;
    border-radius: 40px;
    padding: 15px;
    top: calc(((100% - 70%) / 2) + 5%);
    left: calc((100% - 30%) / 2);
}

.premiet_plant .telephone .camera {
    position: absolute;
    background-color: rgb(27, 39, 48);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    left: calc((100% - 6px) / 2);
    top: 4px;
}

.premiet_plant .telephone .ecrant {
    height: 100%;
    width: 100%;
    border-radius: 25px;
    background-color: #005464;
}

.premiet_plant .telephone .ecrant .barre_navigateur {
    background-color: white;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.premiet_plant .telephone .ecrant .barre_navigateur a {
    color: #052fd8;
    font-size: 30px;
    font-weight: bolder;
    position: absolute;
    left: 30px;
}

.premiet_plant .telephone .ecrant .barre_navigateur input {
    border: none;
    background-color: gray;
    padding: 5px;
    width: 100%;
    text-align: center;
    border-radius: 2px;
    font-size: larger;
}

.premiet_plant .telephone .ecrant form.bas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bolder;
    height: calc(100% - 40px);
    overflow-y: auto;
}

.premiet_plant .telephone .ecrant form.bas input {
    font-size: 30px;
    margin-top: 5px;
    margin-bottom: 20px;
    font-weight: bolder;
    border-radius: 3px;
    border: none;
    width: 80%;
    background-color: white;
    color: black;
}

.premiet_plant .telephone .ecrant .witche_barre {
    background-color: white;
    height: 5px;
    width: 25%;
    border-radius: 2.5px;
    position: absolute;
    bottom: 18px;
    left: calc((100% - 25%) / 2);
}












.transmition {
    fill: rgb(68, 68, 68);
}

.chaine {
    fill: rgb(90, 90, 90);
}

.cadre_arriere {
    fill: orange;
}

.cadre_avant {
    fill: rgb(0, 195, 255);
}

.selle_guidon_roue {
    fill: black;
}




@media screen and (max-width: 1600px) {
    .premiet_plant .pano .affichage_horaire p {
        font-size: 30px;
        margin-top: 5px;
    }
}

@media screen and (max-width: 1200px) {
    .fond .soleil {
        top: 5%;
        right: 4%;
        height: 170px;
        width: 170px;
    }

    .segond_plant .route {
        justify-content: center;
    }

    .segond_plant .route .ligne_blanche {
        position: static;
        min-width: 170px;
        margin-right: 50px;
        margin-left: 50px;
    }

    .premiet_plant header {
        right: 150px;
    }

    .premiet_plant .pano .affichage_horaire p {
        font-size: 30px;
        margin-top: 5px;
    }

    .troisieme_plant .montagnie_quatre_haut_goche {
        position: none;
        visibility: hidden;
    }

    .troisieme_plant .montagnie_cinque_haut_droite {
        position: none;
        visibility: hidden;
    }

    .premiet_plant a img {
        position: fixed;
        width: 400px;
        bottom: 10%;
        left: 15%;
    }

    .premiet_plant a svg {
        position: fixed;
        width: 400px;
        height: auto;
        bottom: 10%;
        left: 15%;
    }

    .premiet_plant .telephone {
        height: 80%;
        width: 40%;
        top: calc((100% - 80%) / 2);
        left: calc((100% - 40%) / 2);
    }
}

@media screen and (max-width: 950px) {
    .premiet_plant .pano .affichage_horaire p {
        font-size: 20px;
        margin-top: 5px;
    }

    .troisieme_plant .montagnie_un_bas_droit {
        position: inherit;
        bottom: 25%;
        right: -50px;
        height: 18%;
        width: 65%;
    }

    .troisieme_plant .montagnie_deux_bas_goche {
        position: inherit;
        bottom: 25%;
        left: -100px;
        height: 10%;
        width: 50%;
    }

    .troisieme_plant .montagnie_trois_centre_enctre {
        position: inherit;
        bottom: 25%;
        left: -25px;
        height: 25%;
        width: 100%;
    }

    .premiet_plant .telephone {
        height: 80%;
        width: 50%;
        top: calc((100% - 80%) / 2);
        left: calc((100% - 50%) / 2);
    }
}

@media screen and (max-width: 800px) {
    .fond .soleil {
        top: -3%;
        right: -2%;
        height: 150px;
        width: 150px;
    }

    .premiet_plant header {
        right: 110px;
    }

    .troisieme_plant .montagnie_un_bas_droit {
        position: inherit;
        bottom: 25%;
        right: -100px;
        height: 18%;
        width: 70%;
    }

    .troisieme_plant .montagnie_deux_bas_goche {
        position: inherit;
        bottom: 25%;
        left: -130px;
        height: 10%;
        width: 70%;
    }

    .troisieme_plant .montagnie_trois_centre_enctre {
        position: inherit;
        bottom: 25%;
        left: -50px;
        height: 25%;
        width: 120%;
    }

    .premiet_plant a img {
        position: fixed;
        width: 350px;
        bottom: 10%;
        left: 10%;
    }

    .premiet_plant a svg {
        position: fixed;
        width: 350px;
        height: auto;
        bottom: 10%;
        left: 10%;
    }

    .premiet_plant .telephone {
        height: 100%;
        width: 100%;
        top: 0px;
        left: 0px;
        border: none;
        padding: 0px;
    }

    .premiet_plant .telephone .ecrant {
        border-radius: 0px;
    }

    .premiet_plant .telephone .camera {
        position: none;
        visibility: hidden;
    }

    .premiet_plant .telephone .ecrant .barre_navigateur {
        border-radius: 0px;
    }

    .premiet_plant .telephone .ecrant .witche_barre {
        width: 50%;
        left: calc((100% - 50%) / 2);
    }
}

@media screen and (max-width: 500px) {
    .fond .soleil {
        top: -10%;
        right: -10%;
        height: 120px;
        width: 120px;
    }

    .premiet_plant header {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0px;
        bottom: none;
        left: calc(50% - (150px/2));
        right: 50%;
    }

    .premiet_plant header .poto {
        display: flex;
        align-items: center;
        flex-direction: column;
        height: 200px;
        width: 150px;
        background-color: transparent;
        border: none;
    }

    .premiet_plant header .poto a {
        z-index: 450;
    }

    .premiet_plant header .poto .chaine {
        position: fixed;
        background-color: gray;
        height: 150px;
        width: 5px;
        z-index: 440;
    }

    .premiet_plant header .poto .chaine.chaine_goche {
        left: calc((50% - (150px / 2)) + 5px);
    }

    .premiet_plant header .poto .chaine.chaine_droite {
        right: calc((50% - (150px / 2)) + 5px);
    }

    .premiet_plant .pano {
        padding: 10px;
        height: 100%;
        width: 100%;
        left: 0px;
        right: calc(50% - (70%/2));
    }

    .premiet_plant .pano .affichage_horaire p {
        font-size: 20px;
        margin-top: 5px;
    }

    .troisieme_plant .montagnie_un_bas_droit {
        position: inherit;
        bottom: 25%;
        right: -100px;
        height: 18%;
        width: 70%;
    }

    .troisieme_plant .montagnie_deux_bas_goche {
        position: inherit;
        bottom: 25%;
        left: -200px;
        height: 10%;
        width: 70%;
    }

    .troisieme_plant .montagnie_trois_centre_enctre {
        position: inherit;
        bottom: 25%;
        left: -50px;
        height: 25%;
        width: 120%;
    }

    .premiet_plant a img {
        position: fixed;
        width: 300px;
        bottom: 10%;
        left: calc((100% - 300px) / 2);
    }

    .premiet_plant a svg {
        position: fixed;
        width: 300px;
        height: auto;
        bottom: 10%;
        left: calc((100% - 300px) / 2);
    }
}