/* ============================
   Importation de la police
============================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); /* Importation de la police Roboto */

/* ============================
   Style global du body
============================= */
body {
  font-family: 'Roboto', sans-serif; /* Applique la police Roboto au document */
  margin: 0; /* Supprime les marges par défaut */
  padding: 0; /* Supprime les paddings par défaut */
  background-color: var(--bg-color); /* Applique un fond gris clair */
}

/* ============================
   Conteneur général du formulaire
============================= */
.login-form-container {
  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;
  max-width: 40%;
  min-width: 567px;
  margin: auto;
  padding: 16px;
  bottom: 48px;
  position: relative;
}

/* ============================
   Titre du formulaire
============================= */
.login-form-title {
  font-size: 1.8rem;
  font-weight: bold;
  color: #f29c38;
  text-align: center;
  margin-bottom: -96px;
  position: relative;
  top: -106px;
}
/* ============================
   Section des réseaux sociaux
============================= */
.login-form-social {
  display: flex; /* Active Flexbox pour l'agencement horizontal */
  justify-content: center; /* Centre les icônes horizontalement */
  gap: 15px; /* Espacement entre les icônes */
  margin-bottom: 0px; /* Espacement en dessous de la section */
}

.login-social-icon {
  width: 40px; /* Largeur de chaque icône */
  height: 40px; /* Hauteur de chaque icône */
  border-radius: 50%; /* Forme circulaire */
  border: 1px solid #f29c38; /* Bordure grise légère */
  display: flex; /* Flexbox pour centrer le contenu */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  color: var(--border-color);/* Couleur grise des icônes */
  cursor: pointer; /* Change le curseur en pointeur au survol */
  transition: background-color 0.3s, color 0.3s; /* Transition fluide sur le fond et la couleur */
}

.login-social-icon:hover {
  background-color: #f29c38; /* Fond orange au survol */
  color: #fff; /* Texte blanc au survol */
}

/* ============================
   Texte séparateur
============================= */
.login-form-separator {
  text-align: center; /* Centre le texte */
  margin: 7px 0; /* Espacement vertical autour du texte */
  font-size: 1rem; /* Taille du texte */
  color: var(--text-color); /* Couleur grise foncée */
}

/* ============================
   Champs du formulaire
============================= */
.login-form-inputs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.login-label {
  font-size: 1rem; /* Taille standard de la police */
  color: #333; /* Couleur grise foncée */
  margin-bottom: 5px; /* Espacement sous l'étiquette */
  text-align: left; /* Alignement du texte à gauche */
}

.login-input {
  padding: 12px; /* Ajoute de l'espace interne */
  border: 1px solid #ddd; /* Bordure grise légère */
  border-radius: 5px; /* Coins arrondis */
  font-size: 1rem; /* Taille standard du texte */
  background-color: var(--bg-color); /* Couleur de fond gris clair */
  outline: none; /* Supprime le contour par défaut */
  transition: border-color 0.3s; /* Transition fluide pour la bordure */
}

.login-input:focus {
  border-color: #f29c38; /* Change la bordure en orange au focus */
}

/* Groupe label + input */
.login-field-group {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 700px; /* Ajustement pour éviter trop de largeur */
  gap: 15px; /* Espacement entre le label et l’input */
  margin-bottom: 15px; /* Ajoute un espace entre les lignes */
}

/* Alignement du label */
.login-field-label {
  text-align: left;
  width: 158px; /* Largeur fixe pour un bon alignement */
  font-weight: bold;
}


/* Alignement des champs */
.login-field-input {
  border-radius: 5px;
  font-size: 1rem;
  background-color: #ddd;
  outline: none;
  width: 60%;
  padding: 5px;
  border: 1px solid #ddd;
}

/* ============================
   Footer du formulaire
============================= */
.login-form-footer {
  text-align: center; /* Centre le texte */
  margin-top: 20px; /* Espacement au-dessus */
  font-size: 14px; /* Taille du texte */
  color: #878787; /* Couleur grise claire */
}

.login-highlight {
  color: #f29c38; /* Texte orange pour attirer l'attention */
  font-weight: bold; /* Texte en gras */
}

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

.login-link:hover {
  text-decoration: underline; /* Ajoute un soulignement au survol */
}

/* ============================
   Bouton de soumission
============================= */
.login-form-submit {
  text-align: center;
  margin-top: 20px;
}

.login-button {
  padding: 12px 25px;
  font-size: 1rem;
  color: #fff;
  background-color: #f29c38;
  border: 2px solid #f29c38;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.login-button:hover {
  background-color: #fff; /* Change le fond en blanc au survol */
  color: #f29c38; /* Change le texte en orange au survol */
  border: 2px solid #f29c38; /* Maintient la bordure orange */
}

/* ============================
   Footer général
============================= */
footer {
  position: fixed; /* Fixe le footer en bas de l'écran */
  bottom: 0; /* Positionné au bas de la fenêtre */
  left: 0; /* Aligné à gauche */
  width: 100%; /* Occupe toute la largeur */
  background-color: #f29c38; /* Fond orange */
  color: white; /* Texte blanc */
  text-align: center; /* Centre le texte */
  padding: 10px 0; /* Espacement vertical */
  z-index: 10; /* Priorité visuelle pour rester au-dessus des autres éléments */
}


/* ============================
   Responsive Design
============================= */

/* Téléphones (max-width: 768px) */
@media (max-width: 768px) {
  .login-form-container {
    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;
    max-width: 40%;
    min-width: 397px;
    margin: auto;
    padding: 13px;
    bottom: 39px;
    position: relative;
}
.login-field-input {
  width: 51%;
  max-width: 400px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  background-color: var(--bg-color);
  outline: none;
  margin-left: -20px;
}
  .login-form-title {
    font-size: 1.5rem; /* Réduit la taille du titre */
  }

  .login-form-social {
    gap: 10px; /* Réduit l'espacement entre les icônes */
  }

  .login-social-icon {
    width: 35px; /* Réduit la taille des icônes */
    height: 35px;
  }

  .login-input {
    font-size: 0.9rem; /* Réduit légèrement la taille des champs */
    padding: 10px; /* Réduit le padding */
  }

  .login-button {
    font-size: 0.9rem; /* Réduit la taille du texte */
    padding: 10px 20px; /* Réduit le padding du bouton */
  }

  footer {
    flex-direction: column; /* Aligne les éléments verticalement */
    padding: 5px 10px; /* Réduit le padding global */
    font-size: 0.8rem; /* Réduit la taille du texte */
  }

  .social-media {
    justify-content: center; /* Centre les icônes des réseaux sociaux */
    gap: 5px; /* Réduit l'espacement entre les icônes */
  }
}

/* Tablettes (769px à 992px) */
@media (min-width: 769px) and (max-width: 992px) {

  .login-form-container {
    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;
    max-width: 40%;
    min-width: 500px;
    margin: auto;
    padding: 16px;
    bottom: 48px;
    position: relative;
  }

  .login-form-title {
    font-size: 1.7rem; /* Taille légèrement réduite */
  }

  .login-input {
    font-size: 1rem; /* Taille standard des champs */
    padding: 12px; /* Padding standard */
  }

  .login-button {
    font-size: 1rem; /* Taille normale du texte */
    padding: 12px 25px; /* Ajuste le padding */
  }

  footer {
    flex-direction: row; /* Aligne les éléments horizontalement */
    justify-content: space-between; /* Espace entre les sections */
    padding: 10px 20px; /* Padding modéré */
  }

  .social-media {
    justify-content: flex-start; /* Réalignement à gauche */
    gap: 10px; /* Espacement standard entre les icônes */
  }
}