.contact-wrapper
{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    box-shadow: 0px 0px 30px #00000029;
    border-radius: 20px;
    background-color: white;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
}

.contact-wrapper *
{
    transition: all .5s;
}

/* COORDONNEES */

.contact-coordonnees
{
    flex: 0 0 50%;
    text-align: center;
}

.contact-coordonnees p
{
    font-family: 'Lora', serif;
    font-size: 24px;
    padding-bottom: 10px;
    color: #707070;
}

.contact-coordonnees p:first-child
{
    font-family: 'Tusker Grotesk', sans-serif;
    font-size: 42px;
    color: #333333;
    padding-bottom: 40px;
}

.contact-ville
{
    padding-bottom: 40px !important;
}

.contact-coordonnees a
{
    font-family: 'Lora', serif;
    text-decoration: none;
    color: #5ECCA9;
    padding-left: 10px;
    padding-right: 10px;
}

/* FORMULAIRE */

.form-contact
{
    flex: 0 0 50%;
}

.row-contact
{
    margin-left: 0;
    margin-right: 0;
}

.form-floating
{
    flex: 1 0 0%;
    position: relative;
    margin-bottom: 1.5rem;
}

.form-floating-one
{
    padding-right: .5rem;
}

.form-floating-two
{
    padding-left: .5rem;
}

.form-control
{
    display: block;
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #292929;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #9c9c9c;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out;
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem .75rem;
    font-family: 'Lora', sans-serif;
}

.form-control:focus
{
    border-color: #5ECCA9;
    outline: none;
}

.invalid-feedback
{
    display: none;
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545; 
}

textarea
{
    height: 250px !important; 
    resize: none;
    min-height: calc(1.5em + (.75rem + 2px));
    font-family: 'Lora', sans-serif;
}

.button-contact
{
    gap: .5rem;
    display: flex;
    justify-content: flex-end;
}

.button-contact i
{
    margin-right: .5rem;
}

.was-validated .form-control:valid
{
    border-color: #198754;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.was-validated .form-control:invalid
{
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.was-validated :invalid ~ .invalid-feedback
{
    display: block;
}

.alert 
{
    display: flex;
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    align-items: center;
}

.alert-success 
{
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-danger 
{
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert div
{
    margin-right: .5rem;
    margin-left: .5rem; 
    font-family: 'Reem Kufi', sans-serif;
}

.formulaire-alert 
{
    margin-top: 1rem;
    color: #ff0000;
    font-style: italic;
}

.formulaire-alert span
{
    font-weight: bold;
}

@media (max-width: 767px)
{
    .contact-wrapper
    {
        flex-direction: column;
        padding: 40px;
    }

    .contact-coordonnees
    {
        margin-bottom: 60px;
    }

    .button-contact
    {
        display: grid;
        width: 100%;
        justify-content: initial;
    }
}