body{
   font-family: calibri;
   margin: 0;
   height: 100vh;
   display: flex;
}
#auth{
   background-color: #9ee3ff;
   align-items: center;
   justify-content: center;
}
#h2-auth{
   margin-top: 0;
   font-size: 2em;
}

/*Pour la page connexion*/
.champ-erreur{
   border-color : red;
}
.texte-erreur-auth{
   color: red;
   font-style: italic;
}
form{
   display: flex;
   flex-direction: column;
   width: 20em;
   height: 19em;
   align-items: center;
   gap: 0.5em;
   background-color: white;
   padding: 2.5em;
   justify-content: flex-start;
   padding-top: 6em;
   box-shadow: 10px 12px 20px rgba(0, 0, 0, 0.3);
   border: 1px solid #0000004f;
   transition: transform 0.3s ease;
}
form:hover{
   transform: scale(1.02);
   box-shadow: -12px -10px 10px rgba(255, 254, 254, 0.6);
}
#champ-mdp{
   display: flex;
   border: 1px solid black;
   border-radius: 3%;
   width: 100%;
   padding: 2%;
}
#mdp{
   border: 0;
   width: 95%;
   font-size: 1em;
   font-style: italic;
}
#ident{
   width: 100%; 
   font-size: 1em;
   padding: 2%;
   font-style: italic;
}
#voir_mdp {
   font-size: 100%;
   cursor: pointer;

}
input {
   border: 1px solid black;
   padding: 0;
}
#valider-auth {
   background-color: #3498db;
   color: white;
   border: none;
   padding: 0.6em 1.2em;
   font-size: 1em;
   font-weight: 600;
   border-radius: 8px;
   cursor: pointer; 
   box-shadow: 0 4px 8px rgba(0,0,0,0.15); 
   transition: all 0.3s ease; 
}

#valider-auth:hover {
   background-color: #2c80b4;
   transform: translateY(-2px); 
   box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

#valider-auth:active {
   transform: translateY(0); 
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/*------*/