@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

:root { 
   --primary-font:'Montserrat' , sans-serif;
   --second-font: 'Poppins', serif; 
   --font-al: 'Abril Fatface', cursive;
}

body { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.flex_1 { 
    display: none;
}
.flex_2, .form1, .btn, .reset, .form2, .form3 { 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.flex_2 { 
    border: solid 1px #794405;
    border-radius: 10px;
    margin: 30px 10px;
}
.logo img, .reset img { 
    width: 300px;
    height: 150px;
    padding-top: 20px;
}
.logo p, .reset h3 { 
    text-align: center;
    font-size: 15px;
    font-family: var(--second-font);
    padding-bottom: 15px;
    font-weight: bold;
}
.form1 input, .form2 input, .form3 input, textarea { 
    width: 300px;
    margin: 5px;
    padding: 15px;
    background-color: #D9D9D9;
    border: solid 1px #FFFFFF;
    border-radius: 10px;
}
input[placeholder], textarea[placeholder] { 
    font-family: var(--second-font);
    font-size: 14px;
}
.validation-btn { 
    border: solid 1px #ac804a;
    border-radius: 10px;
    background-color: #ac804a;
    margin: 50px;
    padding: 10px;
    color: #FFFFFF;
    font-family: var(--second-font);
    width: 200px;
    font-size: 15px;
}
.mtp { 
    color: #000000;
    text-decoration: none;
    font-family: var(--second-font);
    margin-left: -45%;
}
.validation-direct { 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 80%;
    border: solid 1px #ac804a;
    border-radius: 10px;
    background-color: #ac804a;
    margin: 5px;
    padding: 5px;
}
.validation-direct:hover, .validation-btn:hover { 
    background-color: #794405;
}
.validation-direct a { 
    color: #FFFFFF;
    font-family: var(--second-font);
    text-decoration: none;
    margin: 0 10px;
    font-size: 15px;
}
.facebook { 
    width: 30px;
    height: auto;
}
.champs p { 
    font-size: 15px;
    text-align: center;
    font-family: var(--second-font);
}
.champs p > a { 
    text-decoration: none;
    color: #000000;
}
.champs p > a:hover { 
    color: #794405;
    font-weight: bold;
}
.carte { 
    overflow: hidden;
}
.carte iframe { 
    width: 100vw;
    height: 300px;
}
.p1 { 
    text-align: center;
    font-family: var(--second-font);
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
}
.mdp img { 
    position: absolute;
    margin-left: 130px;
    margin-top: -35px;
    width: 20px;
    cursor: pointer;
}
.erreur h2 { 
    font-size: 20px;
    text-align: center;
    font-family: var(--second-font);
    color: red;
    font-weight: bold;
    padding-bottom: 10px;
}
.form3 { 
    padding-top: 120px;
}
.p2 { 
    padding: 20px 10px 20px;
    text-align: center;
}

@media screen and (min-width: 620px) and (max-width: 1023px) {
    .form1 input{ 
        width: 600px;
    }
    textarea, .form3 input { 
        width: 500px;
    }
    .form2 input { 
        width: 500px; 
    }
    .mtp { 
        margin-left: -70%;
    }
    .carte iframe {
        width: 100vw;
        height: 450px;
    }
    .validation-btn { 
        width: 25%;
    }
    .mdp img { 
        margin-left: 270px;
    }
    .flex_2 { 
        border: none;
    }
}
@media screen and (min-width: 1024px) {
    .flex_1 { 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 500px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        border: solid 1px #794405;
        height: 850px;
        background-color: #794405;
        color: #FFFFFF;
        font-family: var(--second-font);
    }
    .flex_1 p { 
        text-align: center;
    }
    .flex_2 { 
        width: 500px;
        height: 850px;
        border-radius: 0;
        border-bottom-right-radius: 20px;
        border-top-right-radius: 20px;
        margin: 0;
    }
    .flex { 
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 150px;
    }
    .form2 input { 
        width: 700px; 
    }
    .carte iframe { 
        width: 100vw;
        height: 550px;
    }
    textarea, .form3 input { 
        width: 600px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1080px) { 
    .card { 
        padding-right: 300px;
    }
}