/* ==================================================
   PAGE CONTACT
================================================== */

.contact-page{
    width:100%;
}


.contact{
    width:100%;
    max-width:750px;

    margin:0 auto;

    padding:50px 20px 80px;
}


/* ==================================================
   INTRO
================================================== */

.contact-intro{
    margin-bottom:40px;

    text-align:center;
}


.contact-intro h1{
    margin:0 0 15px;

    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:42px;
    line-height:1;
}


.contact-intro p{
    max-width:550px;

    margin:0 auto;

    color:#1e1553;

    font-size:18px;
    line-height:1.2;
}


/* ==================================================
   MESSAGE DE RETOUR
================================================== */

.contact-message{
    margin:0 0 35px;
    padding:15px 20px;

    border-radius:15px;

    font-size:16px;
    line-height:1.4;

    text-align:center;
}


.contact-message-success{
    background:#36e983;

    color:#1e1553;
}


.contact-message-error{
    background:#ff4381;

    color:#fffdef;
}


/* ==================================================
   FORMULAIRE
================================================== */

.contact-form{
    display:flex;
    flex-direction:column;

    gap:25px;
}


/* ==================================================
   CHAMPS
================================================== */

.contact-field{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.contact-field label{
    color:#772faf;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;
}


.contact-field input,
.contact-field textarea{
    width:100%;

    padding:15px 18px;

    border:3px solid #772faf;
    border-radius:15px;

    outline:none;

    background:#fffdef;

    color:#1e1553;

    font-family:Arial, sans-serif;
    font-size:16px;

    transition:
        border-color .2s ease,
        transform .2s ease;
}


.contact-field textarea{
    resize:vertical;

    min-height:180px;
}


/* Focus */

.contact-field input:focus,
.contact-field textarea:focus{
    border-color:#36e983;

    transform:scale(1.01);
}


/* ==================================================
   HONEYPOT
================================================== */

.contact-honeypot{
    position:absolute;

    width:1px;
    height:1px;

    overflow:hidden;

    clip:rect(0 0 0 0);
    clip-path:inset(50%);

    white-space:nowrap;
}


/* ==================================================
   BOUTON
================================================== */

.contact-submit{
    align-self:center;

    margin-top:10px;

    padding:14px 25px;

    border:0;
    border-radius:50px;

    background:#772faf;

    color:#fffdef;

    font-family:'Tovari Sans', sans-serif;
    font-size:20px;

    cursor:pointer;

    transition:
        background-color .2s ease,
        transform .2s cubic-bezier(.22,1.4,.36,1);
}


.contact-submit:hover{
    background:#36e983;

    transform:
        scale(1.08)
        rotate(-2deg);
}


/* ==================================================
   DESKTOP
================================================== */

@media(min-width:1040px){

    .contact{
        padding:80px 20px 120px;
    }


    .contact-intro{
        margin-bottom:50px;
    }


    .contact-intro h1{
        font-size:56px;
    }


    .contact-intro p{
        font-size:20px;
    }

}