/* Conteneur principal qui regroupe tous les éléments de connexion */
.title-container {
    
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
}
.login-container {
    
display: flex; /* Arrange les éléments horizontalement */
    
align-items: center; /* Centre verticalement les éléments */
    
justify-content: flex-end; /* Espace entre le formulaire et l'image */
    
background-color: #fff;
    
padding: 10px;
    
border-radius: 8px;
    
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    
max-width: 700px;
    
max-height: 500px;
    
margin: auto;
    
height: 90%;
    
margin-top: 8vh;
    
margin-bottom: 8vh;
    
width: 95%;
    
text-align: center;
}
/* Style de l'icône de connexion */
.login-icon {
    width: 280px;
    position: relative;
    border-radius: 10px;
    min-height: 450px;
    margin-left: 10px; /* Espacement entre l'image et le titre */
}
/* Ajustements pour le titre de connexion */

/* Pseudo-élément pour l'ombre */
.login-container::after {
    
content: ''; /* Nécessaire pour afficher le pseudo-élément */
    
top: 0;
    
left: 0;
    
right: 0;
    
bottom: 0;
    
z-index: -1; /* Placer l'ombre derrière le conteneur */
    
box-shadow: 0 0px 70px rgba(87, 82, 208, 0.56); /* Ombre colorée */
    
border-radius: 8px; /* Assurer que l'ombre respecte les bords arrondis */
}

/* Titre de la page de connexion */
.login-title {
    
    font-family: Manrope;
    font-size: 2em;
    color: #333;
    
}

/* Message d'erreur */
.error-message {
    color: red;
    font-size: 14px;
}
.info-echo{
    color: white;
    background-color: rgba(87, 82, 208, 0.56);
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
}
#info-echo ul {
    list-style-type: none;  /* Supprime les puces de la liste */
    padding-left: 0;        /* Enlève l'indentation */
}

/* Style des champs de saisie */
/* Positionner le label au-dessus de l'input */
/* Positionner le label au-dessus de l'input */
.input-label {
    
    font-family: Manrope;
    background-color: white;
    margin-left: 10px;
    padding: 5px;
    display: flex; /* Garder le flex pour le label */
    margin-top: -20px; /* Réduire l'espace entre le label et l'input */
    font-size: 1em;
    color: black;
    text-align: left; /* Alignement du texte à gauche */
    position: absolute; /* Positionner le label au-dessus de l'input */
    z-index: 2; /* Mettre le label au-dessus de l'input */
    width: auto; /* La largeur s'ajustera en fonction du contenu */
}



/* Style du champ de saisie */
.input-field {
    
    font-family: Manrope;
    font-family: Manrope;
    width: 100%; /* Prendre toute la largeur du conteneur parent */
    padding: 10px;
    margin-bottom: 20px; /* Espacement en bas du champ pour séparer les éléments */
    border: 2px solid #4f4f4f;
    border-radius: 4px;
    box-sizing: border-box; /* Empêche que le padding augmente la taille totale de l'élément */
    color: black;

    z-index: 1; /* Assure que l'input est en arrière-plan */
}

/* Focus sur le champ de saisie */
.input-field:focus {
    border-color: #5757d0; /* Changer la couleur de la bordure au focus */
    outline: none; /* Enlever l'encadrement par défaut */
}
.login-form{
    
    width: 100%;
    max-width: 500px;
    min-height: 300px;
    height: 80%;
    max-height: 400px;
}

/* Style du bouton de soumission */
.submit-btn {
    font-family: Manrope;
    padding: 10px 15px;
    background-color: rgba(87, 82, 208, 1);
    color: #fff;
    border: none;
    font-size: 1.1em;
    font-weight:600;
    letter-spacing: 0.1em;
    font-family: Manrope;
    border-radius: 4px;
    cursor: pointer;
    width: 80%;
}

.submit-btn:hover {
    background-color: rgb(87 82 208 / 95%);
}

/* Conteneur pour l'icône du mot de passe */
.password-container {
    position: relative;
    width: 100%; /* S'assurer que le conteneur occupe toute la largeur */
}

/* Style des champs de saisie avec icône */
.input-field {
    padding-right: 40px; /* Laisser de l'espace supplémentaire pour l'icône */
}

/* Style des icônes d'œil (cacher / afficher le mot de passe) */
.toggle-password img {
    opacity: 50%;
    position: absolute;
    right: 10px;
    top: 30%;
    transform: translateY(-50%); /* Centrer verticalement l'icône */
    cursor: pointer;
    width: 20px; /* Ajuste la taille de l'icône si nécessaire */
    height: auto;
    transition: all 0.1s ease;
}

.toggle-password img:hover {
    opacity: 80%;
    transform: translateY(-50%) scale(1.05); /* Agrandir légèrement l'icône lors du survol */
}

.inscription-redirection{
    color: black;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    footer {

        margin-top: 50px; /* Utilisation de margin-top: auto pour pousser le footer vers le bas */
    }
    .login-container{
        justify-content: center;
        max-height: 500px;
        /* position: relative; */ /* Utiliser position relative pour permettre le positionnement du pseudo-élément */
        margin-top: 8vh;
        /* transform: translate(-50%, -0%); */
    }
    .login-icon{
        display: none;
    }
    .login-container::after {
    box-shadow: 0 0px 40px rgba(87, 82, 208, 0.56); /* Ombre colorée */
    }

}
.titre-en-couleur a {
    font-weight: 600;
    text-decoration: none;
    color: #5752D0;
    position: relative; /* Pour que le pseudo-élément se positionne par rapport à l'élément a */
}

.titre-en-couleur a::after {
    
    content: ""; /* Nécessaire pour afficher le pseudo-élément */
    position: absolute;
    bottom: 0; /* Placer la bordure en bas de l'élément */
    left: 10%; /* Début à 10% de la largeur pour centrer la bordure à 80% */
    width: 80%; /* Largeur de la bordure à 80% */
    border-bottom: 2px solid #5752D0; /* Appliquer la bordure */
}

.container_verify {
    position: absolute;  /* Utilisation de la position absolue */
    top: 40%;            /* Positionner à 50% de la hauteur du viewport */
    left: 50%;           /* Positionner à 50% de la largeur du viewport */
    transform: translate(-50%, -50%); /* Décalage de la div de 50% de sa taille pour centrer précisément */
    background-color: #35353514;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 95%;
    max-width: 1000px;
}


main{
        height: 100vh;
}