/* ============================
   Styles globaux
============================= */
.body {
  overflow: hidden; /* Désactive le scroll pour empêcher l'utilisateur de scroller sur la page */
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centre verticalement */
  align-items: center; /* Centre horizontalement */
  background-color: #f5f5f5; /* Fond gris clair */
}

main {
  flex: 1; /* Prend tout l'espace restant */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================
 Conteneur du formulaire
============================= */
/* Centrer le formulaire */
.signup-form-container {
  width: 100%;
  max-width: 542px;
  padding: 18px;
  background-color: var(--bg-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #f29c38;
  display: flex;
  flex-direction: column;
  bottom: 44px;
  position: relative;
}

/* ============================
 Titre du formulaire
============================= */
.signup-form-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f29c38;
  text-align: center;
  margin-bottom: -84px;
  position: relative;
  top: -104px;
}

/* ============================
 Champs du formulaire
============================= */
.signup-form-inputs {
  display: flex;
  flex-direction: column;
  gap: 0px;
  text-align: left;
  margin-left: 49px;
}

.signup-label {
font-size: 1rem; /* Taille standard pour les étiquettes */
color: #333; /* Couleur grise pour le texte */
margin-bottom: 1px; /* Espacement sous l'étiquette */
text-align: left; /* Aligne le texte à gauche */
}
/* Aligner les labels et inputs côte à côte */
.signup-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Espacement optimal */
  width: 100%;
  margin-bottom: 10px;
}

/* Ajuste la largeur des labels */
.signup-form-row label {
  font-size: 1rem;
  color: var(--text-color);
  /*width: 26%;  Largeur fixe pour aligner les labels */
  text-align: right;
  padding-right: 7px;
}
.signup-input {
  width: 70%;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  background-color: #f9f9f9;
  outline: none;
  position: relative;
  right: 53px;
}

/* Effet de focus sur les champs */
.signup-input:focus {
border-color: #f29c38; /* Change la bordure en orange au focus */
}

/* ============================
 Footer du formulaire
============================= */
.signup-form-footer {
text-align: center; /* Centre le texte horizontalement */
margin-top: 9px;  
font-size: 14px; /* Taille de la police */
color: #878787; /* Couleur grise claire */

}

.signup-highlight {
color: #f29c38; /* Couleur orange pour mettre en avant certains textes */
font-weight: bold; /* Texte en gras */
}

.signup-link {
text-decoration: none; /* Supprime le soulignement des liens */
color: #5398be; /* Couleur bleue pour les liens */
font-weight: bold; /* Texte en gras */
}

/* Effet hover sur les liens */
.signup-link:hover {
text-decoration: underline; /* Ajoute un soulignement au hover */
}

/* ============================
 Boutons
============================= */
.signup-form-submit {
text-align: center; /* Centre le contenu horizontalement */
margin-top: 2px; /* Ajoute un espacement au-dessus */
}

.signup-button {
padding: 8px 4px; /* Ajoute de l'espace interne autour du texte */
font-size: 1rem; /* Taille standard de la police */
color: #fff; /* Texte blanc par défaut */
background-color: #f29c38; /* Fond orange par défaut */
border: 2px solid #f29c38; /* Bordure orange */
border-radius: 5px; /* Coins arrondis */
cursor: pointer; /* Change le curseur en pointeur */
transition: all 0.3s ease; /* Transition douce pour les effets */
font-weight: bold; /* Texte en gras */
}

/* Effet hover sur le bouton */
.signup-button:hover {
background-color: #fff; /* Change le fond en blanc au hover */
color: #f29c38; /* Change le texte en orange au hover */
border: 2px solid #f29c38; /* Garde la bordure orange */
}


/* ============================
   Responsive : Téléphone (max-width: 768px)
============================= */

@media (max-width: 768px) {
  .signup-form-container {
    width: 90%; /* Évite que le formulaire soit trop large */
    max-width: 400px; /* Largeur max */
    padding: 20px;
  }
  
  .signup-form-title {
    font-size: 1.5rem; /* Réduit la taille du titre */
  }

  .signup-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 0px;
    text-align: left;
    margin-right: -56px;
}
.signup-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
}
.signup-form-row label {
  font-size: 1rem;
  color: var(--text-color);
  text-align: right;
  padding-right: -1px;
  position: relative;
  right: 26px;
}
  .signup-button {
    font-size: 0.9rem;
    padding: 10px 15px;
  }
  

}
/* ============================
   Responsive : Tablette (769px à 992px)
============================= */
@media (min-width: 769px) and (max-width: 992px) {
  .signup-form-container {
      width: 100%;
      max-width: 550px;
      padding: 18px;
      background-color: var(--bg-color);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border: 2px solid #f29c38;
      display: flex;
      flex-direction: column;
      margin-bottom: 64px;
    }
  }

  .signup-form-title {
    font-size: 1.6rem; /* Réduit légèrement la taille du titre */
  }

  .signup-input {
    width: 61%;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    background-color: #fff;
    outline: none;
    position: relative;
    right: 57px;
}

.signup-form-inputs {
    display: flex
;
    flex-direction: column;
    gap: 0px;
    text-align: left;
    margin-left: 16px;
}
  .signup-button {
    font-size: 1rem; /* Taille standard */
    padding: 10px 20px; /* Ajuste légèrement le padding */
  }