/* ============================
   Styles globaux
============================= */
body, html {
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les paddings par défaut */
  height: 100%; /* Définit la hauteur totale pour le viewport */
}

/* ============================
   Conteneur principal
============================= */
.reset-password-container {
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: center; 
  padding: 20px; 
   /* margin: 280px auto; */
  /* max-width: 930px;  */
  border: 2px solid #f29c38; 
  border-radius: 8px; 
  /* background-color: #fff;  */
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
  height: auto; /* Hauteur automatique pour s'adapter au contenu */
  position: relative;
  bottom: 37px;
}

/* ============================
   Conteneur de l'icône
============================= */
.reset-password-icon {
  display: flex; /* Active Flexbox pour centrer le contenu */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  width: 80px; /* Largeur de l'icône circulaire */
  height: 80px; /* Hauteur de l'icône circulaire */
  margin: 0 auto 20px auto; /* Centre le cercle avec une marge inférieure */
  border-radius: 50%; /* Forme circulaire */
  border: 2px solid #ffffff; /* Bordure blanche */
  background-color: transparent; /* Fond transparent */
  transition: background-color 0.3s ease; /* Transition douce pour le changement de fond */
}

.reset-password-icon:hover {
  color: #f29c38; /* Change le fond en orange au survol */
}

/* ============================
   Image dans le cercle
============================= */
.reset-password-key {
  width: 68px; /* Largeur de l'image */
  height: auto; /* Hauteur automatique pour garder les proportions */
  display: block; /* Rend l'image un bloc */
  background: none; /* Pas de fond */
  pointer-events: none; /* Désactive les interactions souris */
  transition: filter 0.3s ease; /* Transition douce pour le filtre */
}

/* .reset-password-icon:hover .reset-password-key {
  filter: brightness(0) invert(1); Change l'image en blanc au survol
} */

/* ============================
   Titre
============================= */
.reset-password-title {
  font-size: 1.6rem; /* Taille du texte */
  font-weight: bold; /* Texte en gras */
  color: #f29c38 /* Couleur bleu foncé */
 
}

/* ============================
   Description
============================= */
.reset-password-description {
  font-size: 1.5rem; /* Taille du texte */
  color: var(--text-color); /* Couleur bleu foncé */
  line-height: 1.5; /* Interligne pour une meilleure lisibilité */
  margin-bottom: 12px; /* Espacement inférieur */
}

/* ============================
   Formulaire
============================= */
.reset-password-form {
  display: flex; /* Active Flexbox pour agencer les champs */
  flex-direction: column; /* Dispose les champs verticalement */
  align-items: center; /* Centre horizontalement les champs */
  justify-content: center; /* Centre verticalement */
  gap: 15px; /* Espacement entre les champs */
  width: 100%; /* Prend toute la largeur disponible */
  max-width: 400px; /* Limite la largeur maximale */
  margin: 0 auto; /* Centre le formulaire */
}

/* ============================
   Label
============================= */
.reset-password-label {
  align-self: center; /* Centre le label horizontalement */
  width: 100%; /* Prend toute la largeur disponible */
  font-size: 1.5rem; /* Taille standard de la police */
  color: #05204a; /* Couleur bleu foncé */
  margin-bottom: 5px; /* Espacement sous le label */
  text-align: center; /* Centre le texte */
}

/* ============================
   Input
============================= */
.reset-password-input {
  width: 100%; /* Prend toute la largeur disponible */
  padding: 12px; /* Ajoute de l'espace interne */
  font-size: 1rem; /* Taille standard de la police */
  border: 1px solid #f29c38; /* Bordure orange */
  border-radius: 5px; /* Coins arrondis */
  background-color: #f9f9f9; /* Fond gris clair */
  text-align: center; /* Centre le texte à l'intérieur */
  box-sizing: border-box; /* Inclut le padding dans la taille totale */
  transition: box-shadow 0.3s ease; /* Transition douce pour l'ombre */
}

.reset-password-input:focus {
  border-color: #f29c38; /* Change la bordure en orange au focus */
  box-shadow: 0 0 5px rgba(242, 156, 56, 0.5); /* Ajoute une ombre au focus */
}

/* ============================
   Bouton de soumission
============================= */
.reset-password-button {
  width: 78%; /* Prend toute la largeur disponible */
  max-width: 374px; /* Limite la largeur maximale */
  padding: 10px; /* Ajoute de l'espace interne */
  font-size: 1rem; /* Taille standard de la police */
  color: #fff; /* Texte blanc */
  background-color: #f29c38; /* Fond orange */
  border: 2px solid #f29c38; /* Bordure orange */
  border-radius: 5px; /* Coins arrondis */
  cursor: pointer; /* Change le curseur au survol */
  text-align: center; /* Centre le texte */
  transition: all 0.3s ease; /* Transition douce pour tous les effets */
  font-weight: bold; /* Texte en gras */
}

.reset-password-button:hover,
.reset-password-button:focus {
  background-color: #fff; /* Fond blanc au hover/focus */
  color: #f29c38; /* Texte orange au hover/focus */
  border: 2px solid #f29c38; /* Bordure orange */
  box-shadow: 0 0 8px rgba(242, 156, 56, 0.3); /* Ombre légère au hover */
}
.login-button1 {
  padding: 0px 12px;
  font-size: 1rem;
  color: #fff;
  background-color: #f29c38;
  border: 2px solid #f29c38;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

/* ============================
   Texte non-wrap
============================= */
.no-wrap {
  white-space: nowrap; /* Empêche le retour à la ligne */
}

/* ============================
   Media Queries : Téléphone (max-width: 768px)
============================= */
@media (max-width: 768px) {
  .reset-password-container {
    padding: 15px;
    margin: 100px auto;
    max-width: 93%;
    margin-top: 4rem;
}
  h1 {
    font-size: 1.5rem;
}

  .reset-password-title {
    font-size: 1.3rem; /* Réduit la taille du titre */
    margin-top: 20px; /* Ajoute un espace supérieur */
    white-space: nowrap; /* Empêche le retour à la ligne */
  }

  .reset-password-description {
    font-size: 1rem; /* Réduit la taille de la description */
    line-height: 1.4; /* Ajuste l'interligne */
    margin-bottom: 20px; /* Réduit l'espacement inférieur */
    white-space: nowrap; /* Empêche le retour à la ligne */
  }

  .reset-password-input,
  .reset-password-button {
    font-size: 0.9rem; /* Réduit légèrement la taille des champs et boutons */
    padding: 8px; /* Réduit le padding */
    max-width: 100%; /* Prend toute la largeur disponible */
  }
}