:root {
    --main-color: #E45E5E;
    --second-color: #9ED3CA;
    --third-color: #FBC76C;
    --fourth-color: #13233A;
}

body {
    min-height: calc(100vh);
    display: flex;
    flex-direction: column;
}

body > #main {
    margin-top: 120px;
}

.box {
    background-color: transparent !important;
    box-shadow: none !important;
}

.box > div:not(.box_body_specific) {
    background-color: white;
    border-radius: 6px;
}

.box > .box_title {
    padding: 32px 16px 64px 16px;
    text-align: start !important;
    font-weight: bold;
    font-size: 28px;
    background-image: url(/media/com_genius/images/v2/public/boxoverlay-title-public.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}

.box > .box_body {
    padding: 16px;
    margin-top: 16px;
}

.box_body_confirm {
    padding: 16px;
    margin-top: 16px;
    text-align: center;
    font-weight: bold;
}

.box_body_confirm > h2 {
    margin: 24px;
}

.box > .box_body > .box_body_text_alone {
    text-align: center;
    font-weight: bold;
}

.information_banner {
    background-color: var(--second-color);
    justify-content: center;
    top: 80px;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 1000;
    font-weight: bold;
}

.accueil {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--fourth-color);
    margin-top: 80px;
}

.accueil.accueil_with_banner {
    margin-top: 120px;
}

.accueil .page {
    width: 70%;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.accueil .page::-webkit-scrollbar {
    display: none;
}

.accueil .page #p1 {
    position: relative;
    background-image: url(/media/com_genius/images/v2/public/home_fade.jpg);
    background-size: cover;
    background-position-y: top;
    background-position-x: center;
    background-repeat: no-repeat;
    padding-top: 150px;
}

.accueil .page #p1 > img {
    position: absolute;
    width: 100%;
    z-index: 0;
}

.accueil .page #p1 > img:first-of-type {
    top: 0;
    right: 0;
}

.accueil .page #p1 > img:last-of-type {
    bottom: 0;
    left: 0;
}

.accueil #p1 #title {
    width: 765px;
    margin: auto;
    margin-bottom: 80px;
}

.accueil #p1 #title > p {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    letter-spacing: 2px;
    word-spacing: 2px;
}

.accueil #p1 div.div_submit > input {
    background-color: var(--main-color) !important;
    color: black !important;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    padding: 16px 32px;
    border: 1px solid transparent;
}

.accueil #p1 #connexiondiv {
    position: relative;
    z-index: 10;
}

.questionnaire_container {
    width: 100%;
}

@media screen and (max-width: 1200px) and (min-width: 800px) {

    .accueil #p1 .accueilblock_div {
        display: flex;
        flex-direction: column;
        width: fit-content;
        height: fit-content;
        padding-bottom: 10px;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .accueil #p1 .accueilblock_div form {
        display: flex;
        flex-direction: row;
    }
}

@media screen and (max-width: 1100px) and (min-width: 800px) {
    .accueil #p1 #title {
        width: 549px;
        margin: auto;
        margin-bottom: 80px;
    }
    .accueil #p1 .accueilblock_div form {
        width: 90%;
        flex-direction: column;
        margin: auto;
    }

    .accueil #p1 .accueilblock_div form .padding-search-accueil {
        display: block;
        margin: auto;
        margin-bottom: 16px;
    }

    .accueil #p1 .accueilblock_div form .accueilblock_div2 {
        display: block;
        margin: auto;
        background-color: #f7f7f7;
        width: 259px;
        border-radius: 6px;
        height: 56px;
        line-height: 56px;
        vertical-align: middle;
        border: 1px solid #979797;
        margin-bottom: 16px;
    }

    .accueil #p1 .accueilblock_div form .div_submit {
        display: block;
        margin: auto;
    }

    .accueil #p1 .accueilblock_div .accueilblock_p {
        white-space: nowrap!important;
    }
}

@media screen and (max-width: 800px) {
    .accueil #p1 #title {
        width: 96%;
        margin: auto;
        margin-bottom: 20px;
    }

    .accueil #p1 .accueilblock_div .axetripublic li:not([id=defaut]) {
        display: none;
    }

    .accueil .page {
        overflow-x: initial;
        overflow-y: initial;
        -ms-overflow-style: initial;
        overflow: initial;
    }

    .accueil .page #p1 {
        background-image: initial;
    }

    .accueil .page #p1 > img {
        display: none;
    }

    .accueil #p1 #title > p {
        color: #000000;
        font-size: 18px;
        letter-spacing: initial;
        word-spacing: initial;
    }

    .accueil #p1 {
        background: linear-gradient(135deg, var(--second-color), white)!important;
    }

    .questionnaire_container {
        width: initial;
    }
}

.accueil #p1 #title > p:first-of-type {
    text-align: left;
}

.accueil #p1 #title > p:last-of-type {
    text-align: right;
}


.accueil .connectContainer {
    background-image: url(/media/com_genius/images/v2/public/connect-background.png);
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - 130px);
    position: fixed;
    right: 0;
    top: 80px;
    width: 30%;
}

.connectBlock {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 16px;
    border-radius: 6px;
    background-color: white;
    min-width: 50%;
}

.connectBlock > .connectTitle {
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.connectBlock > form {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.connectBlock > form > input {
    flex: 1;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid black;
    margin: 16px 0;
}

.connectBlock > #forgetPassword {
    color: var(--fourth-color);
    text-decoration: underline;
    margin-bottom: 16px;
}

.connectBlock > hr {
    border: none;
    height: 1px;
    background-color: var(--fourth-color);
    margin: 8px 0;
}

.connectBlock > button {
    margin: 8px 0;
}

.btn {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 16px 32px;
    border: 1px solid transparent;
}

.btn-primary {
    background-color: var(--main-color) !important;
    color: black !important;
}

.btn-outline-primary {
    border: 1px solid var(--main-color) !important;
    color: var(--main-color) !important;
    background-color: white;
}

.btn-secondary {
    background-color: var(--fourth-color) !important;
    color: var(--fourth-color) !important;
}

.btn-outline-secondary {
    border: 1px solid var(--fourth-color) !important;
    color: var(--fourth-color) !important;
    background-color: white;
}

.header {
    background-color: #13233A !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px !important;
    padding: 0 16px !important;
    position: fixed;
    top: 0;
    z-index: 100;
    width: calc(100% - 32px);
}

.header > a {
    margin-left: 0 !important;
}

.header > a > img {
    margin-left: 0 !important;
    margin-top: 0 !important;
}


.header > div {
    float: initial !important;
    margin-right: 0 !important;
}

.header > div > p {
    color: black;
    margin-left: 0 !important;
    margin-top: 0 !important;
    background-color: #B6BBC2 !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 6px;
    font-weight: bold;
    padding: 0 20px;
    margin: 0 16px;
}


.header > div > a > p {
    margin-left: 0 !important;
    margin-top: 0 !important;
    background-color: #E45E5E !important;
    color: black !important;
    height: 40px !important;
    line-height: 40px !important;
}

.header > div > div {
    display: none !important;
}

#main {
    height: initial !important;
    flex-grow: 1 !important;
}

.center {
    margin-right: auto;
    margin-left: auto;
    max-width: 1170px;
}

#footer_public_finder {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    background-color: var(--fourth-color) !important;
    min-height: 50px;
    position: sticky;
    width: 100%;
    bottom: 0;
    left: 0;
    margin-top: auto;
    z-index: 9999;
}

#footer_public_finder > div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.mentions_public {
    color: white !important;
    margin: 0 16px;
    text-align: center;
    display: inline-block;
}

#explain_reset_password {
    font-weight: bold;
}

#not_exist_reset_password {
    text-align: center;
    color: var(--main-color);
    font-weight: bold;
}

#reset_password_resquest_form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#reset_password_resquest_form > input {
    flex: 1;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid black;
    margin: 16px 0;
    margin-right: 16px;
}

#reset_password_resquest_form > button {
    border-radius: 50rem;
    margin: 16px 0;
}

#result1 > .box {
    background-color: #fff;
}

.showMap.demander1.notvisible_mobile {
    background-color: var(--fourth-color);
}

.select2.select2-container.select2-container {
    z-index: 9;
}

.js-dmd-devis {
    background-color: var(--fourth-color);
    color: #FFFFFF;
    height: 48px;
    border-radius: 6px;
    margin-right: 32px;
    margin-bottom: 8px;
    align-items: center;
    display: inline-flex;
    padding-right: 8px;
    padding-left: 8px;
}

.w-100 {
    width: 100% !important;
}

.box_body_specific {
    display: flex;
    background-color: transparent;
    flex-wrap: wrap;
    margin-top: 16px;
    align-items:flex-start;
    align-content:flex-start;
}

.box_body_specific > .signIn {
    border-radius: 6px;
    background-color: #13233A;
    min-width: 30%;
    margin-right: 16px;
    background-image: url(/media/com_genius/images/v2/public/connect-background.png);
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.box_body_specific > .signUp {
    border-radius: 6px;
    flex: 1;
    background-color: white;
}

.signIn > .connectTitle {
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    width: 60%;
    margin: 32px auto;
}

.signUp > .signUpTitle {
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    margin: 32px auto;
}

.signIn > .connectBlock {
    margin-top: 32px;
    margin-bottom: 64px;
    flex: 1;
}

.subBlock {
    border: 1px solid #b9b9b9;
    margin-bottom: 16px;
    border-radius: 6px;
    padding: 16px;
}

.subBlockTitle {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
}

.signUpContent {
    margin: 16px 32px;
}

.signUpContent button {
    border-radius: 50rem;
    margin: 16px 0;
}

.subBlockSubTitle {
    font-size: 12px;
}

.signIn form, .signUp form {
    display: flex;
}

.signUp input, .signUp textarea, .signUp select, .signUp .inputTerritory {
    flex: 1;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #b9b9b9;
    margin: 16px 8px;
    min-width: 45%;
}

#evenementnom {
    flex: 1 100%;
}

.signUp textarea {
    resize: vertical;
}

.informationsForm {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.projectForm {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.submitBlock {
    text-align: end;
}

.box_body_specific > .contactFormContainer {
    border-radius: 6px;
    flex: 1;
    background-color: white;
}

.box_body_specific > .contactContainer {
    border-radius: 6px;
    background-color: white;
    width: 30%;
    margin-left: 16px;
}

.contactFields {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.contactFormContainer {
    padding: 16px;
}

.contactFormContainer input, .contactFormContainer textarea, .contactFormContainer select {
    flex-grow: 1;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #b9b9b9;
    margin: 16px 8px;
    min-width: 45%;
}

.contactFormContainer textarea {
    resize: vertical;
}

.contactFormExplain {
    margin: 16px 0 32px 0;
    font-size: 12px;
}

.contactBlock {
    padding: 16px;
}

.contactBlock > .phoneBlock {
    display: flex;
    align-items: center;
    font-weight: bold;
    word-spacing: 2px;
}

.phoneBlock img {
    margin: 16px;
}

.contactInfo a {
    text-decoration: underline;
    color: #E45E5E;
}

.inputTerritory .select2-selection__placeholder:after {
    content: " *";
}

#villeContainer {
    display: flex;
    flex-grow: 2;
    margin: 16px 8px;
    min-width: 45%;
    padding: 12px 8px;
    border-radius: 6px;
    border: 1px solid #b9b9b9;
}

#villeContainer > span {
    border: 0;
    padding: 0;
}

#villeContainer > label {
    display: none;
}

#form_search_type {
    background-color: #F7F7F7;
}

.megaphoneBanner {
    flex: 1;
    display: flex;
    justify-content: end;
}

.hideBanner {
    flex: 1;
    display: flex;
    justify-content: end;
    margin-right: 8px;
    margin-left: 8px;
    cursor: pointer;
}

@media (min-width: 801px) {
    header {
        display: none;
    }

    .box {
        width: 1170px;
        min-width: 800px;
        max-width: 90%;
    }

    .accueil .connectContainer.connectContainerWithBanner {
        top: 120px;
        min-height: calc(100% - 170px);
    }

    .div3blockv2result {
        width: 100% !important;
    }

    .div4blockv2result {
        width: 33% !important;
    }

    .div3blockv2result .div4blockv2result .js-dmd-devis {
        margin-left: 20px;
        margin-right: 0;
    }

    form[name="research"] {
        display: flex;
    }
}

@media (max-width: 800px) {

    header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        background-color: #13233A;
        padding: 16px;
    }

    header > div:last-child > a {
        color: black;
        display: inline-block;
        background-color: #E45E5E !important;
        height: 40px !important;
        line-height: 40px !important;
        border-radius: 6px;
        font-weight: bold;
        padding: 0 20px;
    }

    body > #main {
        margin-top: 0;
    }

    .information_banner {
        position: absolute;
        top: 0;
    }

    .accueil .page {
        width: 100%;
        order: 2;
    }

    .accueil .connectContainer {
        width: 100%;
        min-height: calc(100vh - 80px);
        order: 1;
        position: initial;
    }

    #footer_public_finder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 16px;
        height: 106px;
        min-height: initial;
        position: initial;
    }

    .accueilblock_p {
        font-size: 16px;
        text-align: left!important;
        margin-left: 16px;
    }

    .padding-search-accueil {
        position: relative;
        height: 60px;
    }

    .axetripublic {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        right: 56px !important;
        width: initial !important;
    }

    #arrowDownPhase {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        margin-left: initial !important;
        width: 56px;
    }

    .axetripublic li:not(.default) {
        float: left;
        width: 100%;
        display: none;
        background: white;
        -webkit-appearance: textarea;
        cursor: pointer;
        box-shadow: 0 8px 8px 0 rgb(14 49 169 / 30%);
        list-style-type: none;
        line-height: 35px;
        text-align: left;
        padding-left: 8px;
    }

    .padding-search-accueil,
    .accueilblock_div2,
    .div_submit input {
        width: 96%!important;
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .blockv2type {
        margin-top: 16px;
    }

    .signUpContent {
        margin: 16px;
    }

    .box_body_specific > .signIn {
        width: 100%;
        margin-right: initial;
        margin-bottom: 16px;
    }

    .signUp input, .signUp textarea, .signUp select, .signUp .inputTerritory {
        margin: 8px;
    }

    .contactFormContainer input, .contactFormContainer textarea, .contactFormContainer select {
        margin: 8px;
    }

    .box_body_specific > .contactContainer {
        width: 100%;
        margin-left: initial;
        margin-bottom: 16px;
        order: 1;
    }

    .box_body_specific > .contactFormContainer {
        order: 2;
    }

    .accueil, .accueil.accueil_with_banner {
        margin-top: 0;
    }

    #form_search_type {
        width: 100% !important;
    }

}