:root {
  --purple-color: #6277ef;
  --hover-color: #586bd7;
  --text-color: #5b5b5b;
  --background-color:  #f0f0f7;
  --form-background-color: #ffffff;
  --button-hover-color: #495bc3;
}

body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: var(--background-color);
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a {
  text-decoration: none;
  color: inherit; /* Assurez que la couleur du texte des liens s'adapte au contexte */
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--purple-color);
  color: white;
  padding: 10px 20px; /* Ajouté un espace à droite */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.navbar-icons a {
  margin: 0 15px; /* Augmenté l'espacement entre les icônes */
  transition: transform 0.2s ease-in-out;
}

.navbar-icons a:hover {
  transform: scale(1.1);
}

.navbar-icons img, .navbar-icons .fa-solid {
  height: 35px; /* Taille des icônes augmentée */
  width: 35px; /* Assurez-vous que cette propriété s'applique correctement aux icônes FontAwesome */
}

/* Ajustements pour FontAwesome si utilisé */
.navbar-icons .fa-solid {
  font-size: 1.5rem; /* Augmente la taille des icônes FontAwesome */
}

.logo {
  height: 75px; /* Ajustez selon la taille de votre logo */
}

form {
  background: var(--form-background-color);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 80px auto 40px;
  text-align: center;
  width: 60%;
  max-width: 500px;
}

form input[type="text"] {
  width: 100%;
  padding: 15px; 
  margin: 20px 0; 
  border: 1px solid #ddd;
  border-radius: 20px; 
  box-sizing: border-box;
  transition: border-color 0.3s;
}

form input[type="text"]:focus {
  border-color: var(--purple-color);
  outline: none;
}

form button {
  padding: 10px 20px;
  cursor: pointer;
  background: linear-gradient(45deg, var(--purple-color), var(--button-hover-color));
  color: white;
  border: none;
  border-radius: 20px;
  transition: background-color 0.3s;
}

form button:hover {
  background: linear-gradient(45deg, var(--button-hover-color), var(--purple-color));
}

/* Utilisez FontAwesome pour les icônes */
.fa-solid {
  transition: color 0.3s;
}

.navbar-icons a:hover .fa-solid {
  color: var(--hover-color);
}

/*
--------------------------------------------
FORMULAIRE
--------------------------------------------
*/
.formu {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .login-container {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
  }
  
  .login-container h2 {
    margin-bottom: 1.5rem;
  }
  
  .login-form .form-group {
    margin-bottom: 1rem;
  }
  
  .login-form input {
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
  }
  
  button {
    width: 100%;
    padding: 0.7rem;
    border: none;
    background: var(--purple-color);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
  }
  
  button:hover {
    background: var(--hover-color);
  }
  
  .form-footer {
    margin-top: 1rem;
  }
  
  .form-footer a {
    text-decoration: none;
    color: #5b5b5b;
    display: block;
    margin-top: 0.5rem;
  }
  
  .form-footer a:hover {
    text-decoration: underline;
  }