/* #region Fonts */
@font-face {
    font-family: 'Roboto-Thin';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/Roboto-Thin.eot');
    src: local(''), url('fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
    url('fonts/Roboto-Thin.woff2') format('woff2'),
    url('fonts/Roboto-Thin.woff') format('woff'),
    url('fonts/Roboto-Thin.ttf') format('truetype'),
    url('fonts/Roboto-Thin.svg#Roboto-Thin') format('svg');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v20-latin-regular.eot');
    src: local(''), url('fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/roboto-v20-latin-regular.woff2') format('woff2'),
    url('fonts/roboto-v20-latin-regular.woff') format('woff'),
    url('fonts/roboto-v20-latin-regular.ttf') format('truetype'),
    url('fonts/roboto-v20-latin-regular.svg#Roboto') format('svg');
}
/* #endregion */

/* #region CSS divers */

body {
    width: auto;
    height:100%;
    margin: 0;
    padding: 0;
    font-size: 0.09259vh;
  }
  
p {
    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

.interface_color_svg {
    fill: #dbad55;
}

.svg_white {
    fill: #fff;
}

.svg_transparent {
    fill: rgba(0, 0, 0, 0);
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pointer {
    cursor: pointer;
}
/* #endregion */

#contact_bouton_envoyer {
    width:124em;
    height:auto;
    transition: all 0.3s linear 0s;
}
#contact_bouton_envoyer:hover {
    transform:scale(0.95);
}

.contact_form {
    position:absolute;  
    top:32.41%;  
    left:14%;
    width:58%;
}
.contact_form p{
    font-family:"Roboto";
    font-size:20em;
    line-height: 1.5em;
}

.contact_input {    
    width:35%;
    font-family:"Roboto";
    font-size:26em;
    line-height: 1.5em;
    border:0;
    border-bottom: 1px #dbad55 solid;    
    outline:none;
}

.contact_input :focus{
    border:0;
    border-bottom: 1px red solid;    
    outline:none;
}

.contact_input_box {
    width:100%;
    height:13.426vh;
    font-family:"Roboto";
    font-size:26em;
    border: 1px #dbad55 solid;    
    outline:none; 
    resize: none;
}

.contact_input_box :focus{
    border: 1px red solid;    
    outline:none;   
}

.contact_text {
    font-family:"Roboto";
    font-size:26em;
    line-height: 1.5em;
}

#contact_titre {
    position:absolute;
    left:-12.775%;
    top:25.185%;
    font-family: "Roboto";
    color: #dbad55;
    font-size: 45em;
    letter-spacing: 0.243em;
    margin:0;
}

#contact_error_residence, #contact_error_nom, #contact_error_prenom, #contact_error_mail, #contact_error_message {
    font-family:"Roboto";
    font-size:26em;
    color: red;
    opacity:0;
}
#contact_error_info {
    font-family:"Roboto";
    font-size:15em;
    color: red;
    display:none;
}


/* #region Bouton retour */
#contact_back {
    position: absolute;
    left: 10%;
    top: 2.8%;
    height: 1.944%;
    margin: 0;
    cursor: pointer;
  }
  .plans_fleche {
    fill: #fff;
    stroke: #dbad55;
    stroke-miterlimit: 10;
  }
  
  .plans_precedent_text {
    font-size: 13px;
    fill: #dbad55;
    font-family: 'Roboto-Thin', 'Roboto';
    font-weight: 200;
    letter-spacing: 0.09em;
  }
  
  .plans_precedent_text_spacing {
    letter-spacing: 0.08em;
  }
  /* #endregion */

/* #region Modal popups */

#contact_modal_container {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color: rgba(255,255,255,0.6);
    display:none;
}

#contact_modal_message {
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%, -50%);
    padding-left:1.5em;
    padding-right:1.5em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    border:2px solid #dbad55;
    max-width:50%;
    display:none;
}
#contact_modal_message_text {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size:26em;
    margin-bottom: 0.5em;
    text-align: center;
}
#contact_modal_message_load_container {
    text-align: center;
    width:100%;
}

.lds-ring {
    display: inline-block;
    width: 2.5em;
    height: 2.5em;
}
.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 2em;
    height: 2em;
    margin: 0.25em;
    border: 0.25em solid #c9c9c9;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #c9c9c9 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#contact_modal_valid {
    position:absolute;
    left:50%;top:50%;
    transform:translate(-50%, -50%);
    padding-left:1.5em;
    padding-right:1.5em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    border:2px solid #dbad55;
    max-width:50%;
    display:none;
}
#contact_modal_valid_text {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size:1.2em;
    margin-bottom: 0.5em;
    text-align: center;
}
#contact_modal_valid_button_container {
    text-align: center;
    width:100%;
}
#contact_modal_valid_button {
    display:inline-block;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    font-size:1.1em;
    color:white;
    background-color: #dbad55;
    padding-top:0.3em;
    padding-bottom:0.3em;
    padding-left:1.0em;
    padding-right:1.0em;
    margin-top:0.5em;
}

/* #endregion */