#ON_DEVELOPMENT{
   
   
    background: rgb(18, 109, 255);
    z-index: 1000;
   
    height: 16px;
    display: flex;
    flex-direction: column;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    justify-content: center;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#ON_DEVELOPMENT h4 {
    font-size: 0.8em;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    color: #ffffff;
}

main {
    /* background-color: white; */
    width: 100vw;
    max-width: 100vw;
    min-height: 100vh;
    padding-top: 25vh;
}

main.no_headered {
    padding-top: 100px;
}

main section#home {
    min-width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    display: row;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    position: relative;
    background-image: url('assets/graphics/fond_3.png');
    background-size: 100% 30%;
    background-repeat: no-repeat;
    background-position: center 100%;
    margin-bottom: 0px;
}

main section#home>img {
    width: auto;
    min-height: 90vh;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: -20px;
    right: 7em;
    z-index: 10;
}

main section#home .hero {
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: absolute;
    top: 5%;
    left: 16%;
    width: 42%;
    height: 70%;
}

main section#home .hero h2 {
    font-size: 3.5em;
    margin-bottom: 5px;
    font-weight: 800;
    color: #00ff0d;
}

main section#home .hero p {
    font-size: 1em;
    margin-top: 5px;
}

main section#home button {
    max-width: 50%;
}

main section#Localisation {
    min-width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background-color: #99582a;
    margin-top: 0px;
    position: relative;
}

main section#Localisation .hero {
    z-index: 10;
    min-width: 80%;
    max-width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    background-image: linear-gradient(to right, #94ff99, #87ff8a, #79ff79, #6bff67, #5cff53, #63ff50, #69ff4c, #6fff49, #85ff59, #98ff68, #a9ff77, #b7ff85);
    position: relative;
}

main section#Localisation .hero .hero-line {
    min-width: 90%;
    max-width: 90%;
    min-height: 80%;
    max-height: 80%;
    background: none;
    border: solid 6px #000;
    position: absolute;
    top: 10%;
    left: 5%;
    z-index: 10;
}

main section#Localisation .text-part {
    min-width: 40%;
    max-width: 40%;
    min-height: 90%;
    max-height: 90%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    z-index: 11;
}

main section#Localisation .action-part {
    min-width: 45%;
    max-width: 45%;
    min-height: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 11;
}

main section#Localisation .action-part button {
    min-width: 50%;
    max-width: 90%;
    padding: 1.5em;
    background: #000;
}

main section#Localisation .hero iframe {
    border: 0;
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.2em;
}

/* Responsive styles for mobile phones */
@media (max-width: 900px) {
    main {
        padding-top: 22vh;
    }

    main section#home {
        overflow-x: hidden;
        background-size: 300% 30%;
        max-width: 100vw;
        min-width: 100vw;
    }

    main section#home>img {
        min-height: 60vh;
        max-height: 60vh;
        top: 85px;
        right: -8em;
        z-index: 10;
    }


    main section#home .hero {
        align-items: center;
        position: absolute;
        top: 2%;
        left: 2%;
        width: 90%;
        height: 70%;
    }

    main section#home .hero h2 {
        font-size: 3em;
        margin-bottom: 5px;
        margin-top: 5px;
        font-weight: 800;
        color: #00ff0d;
        text-align: center;
    }

    main section#home .hero p {
        font-size: 1em;
        margin-top: 5px;
        text-align: justify;
        max-width: 70%;
    }


    main section#Localisation .hero {

        min-width: 90%;
        max-width: 90%;
        min-height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }
    
main section#Localisation .text-part {
    min-width: 80%;
    max-width: 80%;
    min-height: 25vh;
    max-height: 200vh;
}

main section#Localisation .action-part {
     min-width: 80%;
    max-width: 80%;
    min-height: 25vh;
    max-height: 200vh;
}
}
/* Responsive styles for mobile phones */
@media (max-width: 1200px ) and (min-width: 900px ) {
main {   
    padding-top: 17vh;
}
main section#home>img {
    width: auto;
    min-height: 80vh;
    max-height: 80vh;
    top: 140px;
    right: -5em;
    z-index: 10;
}
main section#home .hero {
    z-index: 11;
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: absolute;
    top: 5%;
    left: 10%;
    width: 70%;
    height: 70%;
}

main section#home .hero h2 {
    font-size: 4em;
}

main section#home .hero p {
    font-size: 2em;
    margin-top: 5px;
}

main section#home button {
    max-width: 50%;
    font-size: 2em;
}



main section#Localisation .hero {
    z-index: 10;
    min-width: 80%;
    max-width: 80%;
    min-height: 80vh;
}
    main section#Localisation .hero {

        min-width: 90%;
        max-width: 90%;
        min-height: 90vh;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        margin-top:5em;
        margin-bottom:5em;
    }
    
main section#Localisation .text-part {
    min-width: 80%;
    max-width: 80%;
    min-height: 25vh;
    max-height: 200vh;
}

main section#Localisation .action-part {
     min-width: 80%;
    max-width: 80%;
    min-height: 25vh;
    max-height: 200vh;
}

 main section#Localisation .hero h2 {
        font-size: 3em;
    }
 main section#Localisation .hero p {
        font-size: 2em;
    }
    
main section#Localisation .hero iframe {
    border-radius: 0px;
    width: 60vw;
    height: 40vw;
    max-width: 70vw;
}

main section#Localisation .action-part button {
    font-size: 2em;
}
}