#signup {
    font-family: familjen-grotesk, familjen grotesk, sans-serif;
    background-color: rgb(200, 230, 236);
    padding: 40px 20px;
    width: 50%;
    max-width: 500px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    position: relative;
    transition: all 0.3s ease;
    transform: translateY(0px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: none; /* Masquer par défaut */
    height: 80%;
    justify-content: center;
    align-items: center;
}

#signup.show {
    display: flex; /* Afficher lorsque la classe show est ajoutée */
    opacity: 1; /* Assurez-vous que l'opacité est également définie sur 1 lorsque la classe show est ajoutée */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100vh; /* Occuper toute la hauteur de la vue */
}

#signup h1 {
    color: rgb(36, 159, 187);
    margin-top: -10px;
    margin-bottom: 20px;
}

#signup .div-row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85%;
    flex-direction: row;

}

#signup .div-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%; /* Ajuster la largeur pour que les colonnes tiennent sur une ligne */
    margin: 0 2.5%; /* Ajouter de la marge pour espacer les colonnes */
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
}

.div-login {
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrer les éléments horizontalement */
    width: 80%;
    margin: 20px auto;
}

.div-login input[type="text"],
.div-login input[type="email"],
.div-login input[type="password"] {
    width: 100%;
    background-color: #f9f9f9;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: 1px solid rgb(36, 159, 187);
    border-radius: 5px;
    padding: 10px;
    transition: border 0.3s ease;
    box-sizing: border-box; /* Inclure le padding dans la largeur totale */
}

.div-login input[type="text"]:focus,
.div-login input[type="email"]:focus,
.div-login input[type="password"]:focus {
    border-color: rgb(44 130 149);
    outline: none;
}

.div-login input[type="text"]:hover,
.div-login input[type="email"]:hover,
.div-login input[type="password"]:hover {
    border-color: rgb(44 130 149);
}

.iconFont::placeholder {
    font-family: 'Font Awesome 5 Free', sans-serif;
    font-weight: 700;
}

.iconFont {
    font-family: familjen-grotesk, familjen grotesk, sans-serif;
}

#signup button[type="submit"] {
    border: none;
    background-color: rgb(36, 159, 187);
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;

    transition: background-color 0.3s ease;
    cursor: pointer;
}

#signup button[type="submit"]:hover {
    background-color: rgb(44 130 149);
}

#close-signup {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

@media (max-width: 650px) {
    #signup {
        width: 80%;
        height: 70%;
    }
    
    #signup .div-row {
        flex-direction: column;
    }
    
    #signup .div-column {
        width: 100%;
        margin: 10px 0;
    }
    #signup h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }
    #nomprenom input[type="text"] {
        width: 130% !important;
    }

    .div-login input[type="text"],
    .div-login input[type="email"],
    .div-login input[type="password"] {
        width: 140%;
    }
}

@media (max-width: 900px) and (min-width: 650px) {
    #signup {
        width: 70%;
    }
    #signup h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }
}


#LoginText{
    margin-bottom: auto;
    font-size: 15px;
    color: rgb(36 159 187);
    text-align: center;
}

#connexion   {
    color: rgb(44 130 149);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}
#connexion  :hover {
    color: rgb(28, 97, 112);
}







/* Styles pour le formulaire de mot de passe oublié */
#forgot-password {
    font-family: familjen-grotesk, familjen grotesk, sans-serif;
    background-color: rgb(200, 230, 236);
    padding: 40px 20px;
    width: 50%;
    max-width: 500px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    position: relative;
    transition: all 0.3s ease;
    transform: translateY(0px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: none; /* Masquer par défaut */
    height: 80%;
    justify-content: center;
    align-items: center;
}

#forgot-password h1 {
    color: rgb(36, 159, 187);
    margin-top: -10px;
    margin-bottom: 20px;
}

@media (max-width: 650px) {
    #forgot-password {
        width: 80%;
        height: 70%;
    }
    

    #forgot-password h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }


    #forgot-password input[type="text"]{
        width: 100%;
    }
}

@media (max-width: 900px) and (min-width: 650px) {
    #forgot-password {
        width: 70%;
    }
    #forgot-password h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }
}




#div-retour-connexion {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}


#close-forgot-password {
        position: absolute;
    top: 10px;
    right: 10px;
}

#forgot-password h1 {
    margin-bottom: 10%;
}

#emailForgot {
    width: 100%;
}

#divForgot {
    width: 100%;
}

#submitForgot {
    border: none;
    background-color: rgb(36, 159, 187);
    color: white;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

#submitForgot:hover {
    background-color: rgb(44 130 149);
}

#backToLogin {
    color: rgb(44 130 149);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
    margin-left: 5px;
}
#backToLogin:hover {
    color: rgb(28, 97, 112);
}


#backToLoginText {
    font-size: 15px;
    color: rgb(36 159 187);
}


/*animation: horizontal-shaking 0.35s 0.70s;*/

  
  @keyframes horizontal-shaking {
    0% { transform: translateX(0) }
    25% { transform: translateX(5px) }
    50% { transform: translateX(-5px) }
    75% { transform: translateX(5px) }
    100% { transform: translateX(0) }
  }
  

  #confirmation-signup {    
    font-family: familjen-grotesk, familjen grotesk, sans-serif;
    background-color: rgb(200, 230, 236);
    padding: 40px 20px;
    width: 50%;
    max-width: 500px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: none;
    position: relative;
    transition: all 0.3s ease;
    /* transform: translateY(-50px); */
    /* opacity: 0; */
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80%;
}



#confirmation-signup h1 {
    color: rgb(36, 159, 187);
    margin-top: -10px;
    margin-bottom: 20px;
}

#confirmation-signup p {
    color: rgb(44, 130, 149);
    font-size: 16px;
}

#close-confirmation-signup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}

@media (max-width: 650px) {
    #confirmation-signup {
        width: 80%;
        height: 70%;
    }
    
    #confirmation-signup h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }
}

@media (max-width: 900px) and (min-width: 650px) {
    #confirmation-signup {
        width: 70%;
    }
    #confirmation-signup h1 {
        color: rgb(36, 159, 187);
        margin-top: 0px;
        margin-bottom: 10px;
    }
}