/*==================================================
FORMS
EvaaOrakel Premium
==================================================*/

/*----------------------------------
Bloc formulaire
----------------------------------*/

.contact-form{

    background:#fff;

    border-radius:30px;

    padding:45px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    margin-top:50px;

}

.contact-form h3{

    font-size:2rem;

    color:#241c44;

    margin-bottom:30px;

    text-align:center;

}

/*----------------------------------
Grille
----------------------------------*/

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

/*----------------------------------
Champs
----------------------------------*/

.contact-form input,
.contact-form textarea,
.contact-form select{

    width:100%;

    padding:16px 20px;

    margin-bottom:20px;

    border:1px solid #ddd;

    border-radius:16px;

    background:#fff;

    font-size:1rem;

    color:#241c44;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;

}

/*----------------------------------
Focus
----------------------------------*/

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{

    outline:none;

    border-color:#6d28d9;

    box-shadow:0 0 0 4px rgba(109,40,217,.15);

}

/*----------------------------------
Placeholder
----------------------------------*/

.contact-form input::placeholder,
.contact-form textarea::placeholder{

    color:#999;

}

/*----------------------------------
Textarea
----------------------------------*/

.contact-form textarea{

    resize:vertical;

    min-height:180px;

}

/*----------------------------------
Select
----------------------------------*/

.contact-form select{

    cursor:pointer;

}

/*----------------------------------
Checkbox
----------------------------------*/

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:20px 0 30px;

    font-size:.95rem;

    line-height:1.6;

    color:#555;

}

.checkbox input{

    width:20px;

    height:20px;

    margin-top:2px;

    accent-color:#6d28d9;

}

/*----------------------------------
Bouton
----------------------------------*/

.contact-form .btn{

    width:100%;

    border:none;

    cursor:pointer;

    font-size:1rem;

    padding:16px;

    border-radius:50px;

}

/*----------------------------------
Validation
----------------------------------*/

.contact-form input:valid,
.contact-form textarea:valid{

    border-color:#dadada;

}

.contact-form input:invalid:focus,
.contact-form textarea:invalid:focus{

    border-color:#e63946;

}

/*----------------------------------
Autofill Chrome
----------------------------------*/

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#241c44;

}

/*----------------------------------
Responsive
----------------------------------*/

@media(max-width:768px){

.form-grid{

    grid-template-columns:1fr;

}

.contact-form{

    padding:30px;

}

}