/* Réinitialisation du mot de passe - Feuille de style */

/* Réinitialisation des styles par défaut */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Style du corps de la page */
  body {
    font-family: Arial, sans-serif;
    background-color: #fff; /* Fond bleu clair */
    margin: 0;
    padding: 0;
  }

  /* Style de la bande horizontale en haut */
  .header-bar {
    background-color: #13226e; /* Bande bleue */
    height: calc(33vh - 20px); /* 1/4 de la hauteur de l'écran */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Style de la bande centrale */
  .middle-bar {
    background-color: #fff; /* Bande blanche */
    margin-top: 20px; /* Espace entre la bande horizontale et la bande centrale */
    margin-bottom: 20px; /* Espace entre la bande centrale et le bas de la page */
    padding: 20px;
  }

  /* Style de la zone de saisie */
  .form-container {
    text-align: center;
  }

  /* Style de l'image */
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .image-container img {
    width: 12vw; /* Utilisation de 7% de la largeur de l'écran */
    height: auto;
    margin-bottom: 20px; /* Espace sous l'image */
  }

  /* Style du texte en bas de page */
.footer {
    text-align: center;
    margin-top: 20px; /* Espace entre la bande centrale et le bas de la page */
  }

  .small-text {
    font-size: 0.9em; /* Taille de police légèrement plus petite */
    font-style: italic; /* Texte en italique */
    font-family: 'Franklin Gothic', sans-serif;
}
/* Style du bouton personnalisé */
.custom-button {
    background-color: #4CAF50; /* Couleur de fond du bouton */
    border: none;
    color: white; /* Couleur du texte */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    padding: 10px 20px; /* Espacement du texte à l'intérieur du bouton */
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 8px; /* Bords arrondis */
    border: 2px solid #4CAF50; /* Bordure du bouton */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre */
  }

  /* Effet de survol du bouton */
  .custom-button:hover {
    background-color: white;
    color: #4CAF50;
  }

/* Style du champ de saisie unique */
.custom-input {
    width: 25vw; /* Un quart de la largeur de l'écran */
    max-width: 300px; /* Largeur maximale pour assurer la lisibilité */
    padding: 10px; /* Espacement interne */
    margin: 0 auto; /* Centre le champ de saisie horizontalement */
    margin-bottom: 15px; /* Espacement en bas du champ de saisie */
    border: 2px solid #ccc; /* Bordure */
    border-radius: 5px; /* Bords arrondis */
    box-sizing: border-box; /* Boîte incluant le padding et la bordure dans la largeur */
    font-size: 16px; /* Taille de police */
  }

  /* Effet de survol/focus sur le champ de saisie */
  .custom-input:focus {
    outline: none; /* Suppression du contour par défaut */
    border-color: #4CAF50; /* Changement de couleur de la bordure lors du focus */
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Effet d'ombre sur le focus */
  }

  /* Style du message de validation */
.validation-message {
    width: 25vw; /* Un quart de la largeur de l'écran */
    max-width: 300px; /* Largeur maximale pour assurer la lisibilité */
    padding: 10px; /* Espacement interne */
    margin: 0 auto; /* Centre le message horizontalement */
    border: 2px solid #4CAF50; /* Bordure */
    border-radius: 5px; /* Bords arrondis */
    box-sizing: border-box; /* Boîte incluant le padding et la bordure dans la largeur */
    font-size: 16px; /* Taille de police */
    text-align: center; /* Centrage du texte */
  }