body { display: flex; justify-content: center; align-items: center; height: 100vh; /* Utiliser 100% de la hauteur de la fenêtre */ margin: 0; /* Supprimez les marges par défaut */ background-color: rgb(240, 240, 240); /* Ajoutez une couleur de fond pour le contraste */ } label { font-weight:700; } .form_main { width: 80%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgb(255, 255, 255); padding: 30px; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.062); position: relative; overflow: hidden; border-radius: 10px; /* Ajout d'arrondi */ } .form_main::before { position: absolute; content: ""; width: 300px; height: 300px; background-color: rgb(209, 193, 255); transform: rotate(45deg); left: -180px; bottom: 30px; z-index: 1; border-radius: 30px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082); } .heading { font-size: 2em; color: #2e2e2e; font-weight: 700; margin: 5px 0 10px 0; z-index: 2; text-align: center; padding-bottom: 30px; } .inputContainer { width: 100%; position: relative; display: flow-root; text-align: center; z-index: 2; margin-bottom: 30px; } .inputIcon { position: absolute; left: 10px; /* Ajustement de la position de l'icône */ } .inputField { width: 100%; height: 20px; background-color: transparent; border: none; border-bottom: 2px solid rgb(173, 173, 173); margin: 10px 0; color: black; font-size: 0.9em; /* Ajustement de la taille de la police */ font-weight: 500; box-sizing: border-box; padding-left: 30px; /* Pour laisser de l'espace pour l'icône */ text-align: center; } .inputField:focus { outline: none; border-bottom: 2px solid rgb(199, 114, 255); } .inputField::placeholder { color: rgb(80, 80, 80); font-size: 1em; font-weight: 500; } .errors { color: red; } .button { z-index: 2; position: relative; width: 100%; border: none; background-color: rgb(162, 104, 255); height: 30px; color: white; font-size: 0.8em; font-weight: 500; letter-spacing: 1px; margin: 10px 0; cursor: pointer; border-radius: 5px; /* Ajout d'arrondi au bouton */ transition: background-color 0.3s; } .button:hover { background-color: rgb(126, 84, 255); } .forgotLink { z-index: 2; font-size: 0.7em; font-weight: 500; color: rgb(44, 24, 128); text-decoration: none; padding: 8px 15px; border-radius: 20px; }