/*******************************************STRUCTURE PRINCIPALE*/

body {
    font-family: "Nunito",sans-serif;
    margin: 0;
}

div#Div_Contenu {
    max-width: 1400px;
    margin: 0 auto;
}

body
{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    align-items: center;
}
/************************************************HEADER*/

header {
    display: grid;
    height: 50px;
    align-items: center;
    margin: 0;
    background-color: orange;
}

    header a {
        color: white;
        font-weight: 700;
        text-decoration: none;
        /*text-transform: uppercase;*/
        margin-left: 10px;
    }



        header a:hover, footer a:hover {
            text-decoration: underline;
        }
/*******************************************FOOTER*/

footer {
    background: orange;
    color: white;
}

    footer ul {
        display: flex;
        flex-flow: wrap;
        list-style-type: none;
        justify-content: flex-end;
    }

        footer ul li {
            align-items: center;
            text-align: center;
            margin: 0 10px;
        }

    footer a {
        color: white;
        font-weight: 700;
        text-decoration: none;
        /*text-transform: uppercase;*/
    }


/*******************************************REGISTER*/

#Register {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin: 25px;
    column-gap: 25px;
    /*align-items: end;*/
    align-items: start;
}


section.Register_Left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    section.Register_Left img, #LogIn img {
        display: block;
        margin: 0 auto;
    }

section.Register_Right form.Register_Form {
    display: flex;
    flex-direction: column;
}

.Register_Form_Content, .Login_Form_Content {
    display: flex;
    flex-direction: column;
}

.Register_Form input, .Login_Form input {
    border: none;
    background-color: #ffffff;
    padding: 0 10px;
}

    .Register_Form input:focus-visible, .Login_Form input:focus-visible .Reset, .ResetPassword_Form_Content input:focus-visible {
        outline: none;
    }

.Register_Form_Content > div {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,auto);
    grid-auto-flow: column;
    column-gap: 20px;
    margin-bottom: 20px;
}

    .Register_Form_Content > div > div, .Login_Form_Content > div, .ForgotPassword_Email, .ResetPassword_Form_Content > div {
        border-radius: 20px;
        border: 2px solid black;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: 40px;
        align-items: center;
        padding: 0 10px;
        column-gap: 10px;
    }



button[type=submit] {
    height: 45px !important;
    font-size: 12pt !important;
    border: 2px solid orange;
    text-align: center;
    text-decoration: none;
    padding: 5px !important;
    cursor: pointer;
    border-radius: 20px !important;
    background-color: orange;
    color: white !important;
    text-transform: uppercase;
    align-self: flex-end;
    margin-top: 20px;
}

#Register .Register_LogIn, #LogIn .LogIn_Register {
    margin-top: 50px;
    text-align: center;
}

    #Register .Register_LogIn a, #LogIn .LogIn_Register a {
        font-weight: 700;
        color: orange;
        text-decoration: none;
        margin-left: 10px;
    }

        #Register .Register_LogIn a:hover, #LogIn .LogIn_Register a:hover {
            text-decoration: underline;
        }

#Register .field-validation-error, #LogIn .field-validation-error, #ResetPassword .field-validation-error {
    margin: 5px 0 5px 0;
    color: red;
    font-weight: 600;
}

    #Register .field-validation-error::before, 
    #LogIn .field-validation-error::before, 
    #LogIn div.LoginError li::before/*, 
    #ResetPassword .field-validation-error::before*/ {
        margin-right: 5px;
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f06a";
        font-size: 1.5rem;
        vertical-align: middle;
    }

    input
    {
        border:none;
        
    }
    input:focus-visible
    {
        outline:none;
    }

div.Register_Email {
    grid-column-start: span 2;
}
/*******************************************TEMPORAIRE*/
/*******************************************REGISTER RESPONSIVE*/
@media only screen and (max-width : 768px) {
    #Register {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2,auto);
        row-gap: 40px;
    }

    section.Register_Left {
        margin-left: 25px;
    }

    section.Register_Right {
        margin-right: 25px;
    }
}


@media only screen and (max-width : 530px) {
    .Register_Form_Content > div {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6,auto);
        grid-auto-flow: column;
        margin-bottom: 20px;
        row-gap: 10px;
    }

        .Register_Form_Content > div label:last-child {
            margin-top: 20px;
        }

    .Register_Form_Content > div {
        margin-bottom: 0px;
    }

    #Register {
        margin: 0;
    }

    section.Register_Left, section.Register_Right {
        margin: 10px 25px;
    }

        section.Register_Right button {
            margin-top: 10px;
        }
}
/*******************************************LOGIN*/
main#LogIn {
    max-width: 800px;
    margin: 0 auto;
}

.Login_Form label {
    margin-bottom: 5px;
    margin-top: 15px;
}

.Login_Form_Content > div.Login_Remember_ForgotPassword {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    justify-content: space-between;
    border: none;
    align-items: center;
    margin-bottom: 5px;
    padding: 0;
    width: 100%;
}

.Login_Form_Content > div.LoginError {
    border: none;
}

.Login_Remember_ForgotPassword label, .Login_Remember_ForgotPassword p {
    margin: 10px 0;
}

.Login_Remember_ForgotPassword label {
    margin-right: 15px;
}

.Login_Remember_ForgotPassword p {
    margin-left: 15px;
    text-align: right;
}

.Login_Remember_ForgotPassword a {
    color: #000;
    text-decoration: none;
    font-weight: 700;
}

    .Login_Remember_ForgotPassword a:hover {
        text-decoration: underline;
    }

#LogIn div.LoginError ul {
    list-style-type: none;
    color: red;
    padding: 0;
}


/*******************************************LOGIN RESPONSIVE*/

/* typical phone screen resolution */
@media only screen and (max-width : 667px) {
    main#LogIn {
        margin: 0 25px;
    }
}

/* typical phone screen resolution */
@media only screen and (max-width : 375px) {
    main#LogIn {
        margin:25px;

    }
    
    .Login_Remember_ForgotPassword {
        /*flex-direction: column;*/
    }

        .Login_Remember_ForgotPassword label, .Login_Remember_ForgotPassword p {
            margin: 5px 0;
        }

        .Login_Remember_ForgotPassword label {
            align-self: flex-start;
        }

        .Login_Remember_ForgotPassword p {
            align-self: flex-end;
        }
}

/*******************************************FORGOT PASSWORD*/
main#ForgotPassword form
{
    display:flex;
    flex-direction:column;

}

/*******************************************RESET PASSWORD*/
main#ResetPassword .ResetPassword_Form_Content {
    display: flex;
    flex-direction: column;
}

#ResetPasswordForm label {
    margin-bottom: 5px;
    margin-top: 5px;
}