body{
    background-color: #f5f6f7;
}

.returnError{
    height: fit-content;
    padding: 1em;
    text-align: center;
    color: #ff4d4d;
    font-weight: bold;
}

.titre{
    font-size: 1.5em;
    font-weight: bold;
    min-height: 2em;
    border-radius: 0.4em;
    margin-top: 1em;
    background-color: white;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.sectionForm{
    border-radius: 0.4em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: white;
    padding: 1em;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.sectionIntForm3Col{
    min-width: max-content;
}
.sectionIntForm3Col .position1{
    text-align: center;
    transform: translate(-3em);
}
.sectionIntForm3Col .position2{
    text-align: center;
    transform: translate(-2em);
}
.sectionIntForm3Col .position3{
    text-align: center;
    transform: translate(-1em);
}

.inputText{
    width: 100%;
    color: rgb(36, 35, 42);
    font-size: 16px;
    line-height: 20px;
    min-height: 28px;
    border-radius: 4px;
    padding: 8px 16px;
    border: 2px solid transparent;
    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    background: rgb(251, 251, 251);
    transition: all 0.1s ease 0s;
}

.inputText:focus{
    transition-duration: 0.5s;
    outline: none;
}

.inputNumber{
    color: rgba(0,0,0,.87);
    box-sizing: border-box;
    transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid black;
    border-radius: 0.2em 0.2em 0 0;
    background: rgb(245, 245, 245);
    width: fit-content;
}

.inputNumber:hover{
    border-bottom-color: rgba(0,0,0,.87);
    background: #ececec;
}
.inputNumber:focus{
    outline: none;
}
.inputRadio{
    min-width: 1.5em;
    min-height: 1.5em;
}

.choiceColumn{
    display: flex;
    margin-left: 1em;
    padding: 1em;
    border-radius: 0.4em;
    margin-bottom: 1em;
}

.choiceRow{
    display: flex;
    margin-top: 1em;
    margin-bottom: 1em;
}
.choiceRow b{
    margin-left: 0.5em;
}

.inputText.autre{
    width: 50%;
    margin-left: 0.5em;
}

#mapLink img{
    width:  3em;
}
#mapLink img:hover{
    transform: scale(1.1);
transition-duration: 0.5s;filter: drop-shadow(1px 1px 1px #2222228f);
}

#photoPreview img{
    box-shadow: rgb(0 0 0 / 12%) 0px 1px 3px, rgb(0 0 0 / 24%) 0px 1px 2px;
    border-radius: 0.4em;
}

.spinner {
    border: 4px solid rgb(45,175,131);
    border-left-color: rgb(182, 255, 231);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}




.formFormulaire.aqua .titre{
    border-top: solid 0.2em aqua;
}
.formFormulaire.aqua .inputText:focus{
    border: 2px solid aqua;
}
.formFormulaire.aqua .inputNumber:focus{
    border-color: aqua;
}
.formFormulaire.aqua .inputRadio{
    accent-color: aqua;
}
.formFormulaire.aqua .choiceColumn{
    background-color: azure;
}

.formFormulaire.aqua.pro .titre{
    border-top: solid 0.2em rgb(31, 190, 190);
}
.formFormulaire.aqua.pro .inputText:focus{
    border: 2px solid rgb(31, 190, 190);
}
.formFormulaire.aqua.pro .inputNumber:focus{
    border-color: rgb(31, 190, 190);
}
.formFormulaire.aqua.pro .inputRadio{
    accent-color: rgb(31, 190, 190);
}
.formFormulaire.aqua.pro .choiceColumn{
    background-color: rgb(206, 239, 236);
}



.formFormulaire.green .titre{
    border-top: solid 0.2em rgb(0, 255, 157);
}
.formFormulaire.green .inputText:focus{
    border: 2px solid rgb(0, 255, 157);
}
.formFormulaire.green .inputNumber:focus{
    border-color: rgb(0, 255, 157);
}
.formFormulaire.green .inputRadio{
    accent-color: rgb(0, 255, 157);
}
.formFormulaire.green .choiceColumn{
    background-color: rgb(240, 255, 246);
}

.formFormulaire.green.pro .titre{
    border-top: solid 0.2em rgb(19, 215, 140);
}
.formFormulaire.green.pro .inputText:focus{
    border: 2px solid rgb(19, 215, 140);
}
.formFormulaire.green.pro .inputNumber:focus{
    border-color: rgb(19, 215, 140);
}
.formFormulaire.green.pro .inputRadio{
    accent-color: rgb(19, 215, 140);
}
.formFormulaire.green.pro .choiceColumn{
    background-color: rgb(206, 239, 218);
}


.formFormulaire.yellow .titre{
    border-top: solid 0.2em rgb(251, 255, 0);
}
.formFormulaire.yellow .inputText:focus{
    border: 2px solid rgb(251, 255, 0);
}
.formFormulaire.yellow .inputNumber:focus{
    border-color: rgb(251, 255, 0);
}
.formFormulaire.yellow .inputRadio{
    accent-color: rgb(251, 255, 0);
}
.formFormulaire.yellow .choiceColumn{
    background-color: rgb(254, 255, 240);
}

.formFormulaire.yellow.pro .titre{
    border-top: solid 0.2em rgb(215, 202, 19);
}
.formFormulaire.yellow.pro .inputText:focus{
    border: 2px solid rgb(215, 202, 19);
}
.formFormulaire.yellow.pro .inputNumber:focus{
    border-color: rgb(215, 202, 19);
}
.formFormulaire.yellow.pro .inputRadio{
    accent-color: rgb(215, 202, 19);
}
.formFormulaire.yellow.pro .choiceColumn{
    background-color: rgb(239, 234, 206);
}

.formFormulaire.red .titre{
    border-top: solid 0.2em rgb(244, 67, 64);
}
.formFormulaire.red .inputText:focus{
    border: 2px solid rgb(244, 67, 64);
}
.formFormulaire.red .inputNumber:focus{
    border-color: rgb(244, 67, 64);
}
.formFormulaire.red .inputRadio{
    accent-color: rgb(244, 67, 64);
}
.formFormulaire.red .choiceColumn{
    background-color: rgb(255, 240, 240);
}

.formFormulaire.red.pro .titre{
    border-top: solid 0.2em rgb(228, 49, 46);
}
.formFormulaire.red.pro .inputText:focus{
    border: 2px solid rgb(228, 49, 46);
}
.formFormulaire.red.pro .inputNumber:focus{
    border-color: rgb(228, 49, 46);
}
.formFormulaire.red.pro .inputRadio{
    accent-color: rgb(228, 49, 46);
}
.formFormulaire.red.pro .choiceColumn{
    background-color: rgb(239, 206, 206);
}


@media (max-width: 	800px){
    .sectionForm.Form3Col {
        overflow-x: scroll;
    }
}

@media (max-width: 	500px){
    .textEndPhone{
        display: flex;
        justify-content: end;
    }
}