/* Styles personnalisés pour la page de login */
body {
  overflow-x: hidden;
}

/* Masquer le bouton natif de révélation du mot de passe (Edge/IE) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

/* Bouton toggle mot de passe : aligner la bordure sur celle de l'input Bootstrap */
#btnTogglePasswd {
  border-color: var(--bs-border-color, #dee2e6);
  color: var(--bs-secondary-color, #6c757d);
}

#btnTogglePasswd:hover,
#btnTogglePasswd:focus,
#btnTogglePasswd:active {
  border-color: #86b7fe; /* couleur focus Bootstrap */
  box-shadow: none;
}

/* Animation pour le gradient de fond */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.min-vh-100 {
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

/* Card compacte */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;
}

/* Animation des inputs au focus */
.form-control:focus,
.form-floating>.form-control:focus {
  border-color: #003D77;
  box-shadow: 0 0 0 0.25rem rgba(0, 61, 119, 0.25);
}

/* Bouton principal avec couleur FFHandball */
#blogin {
  background: linear-gradient(135deg, #003D77 0%, #002855 100%);
  border: none;
  transition: all 0.3s ease;
}

#blogin:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(0, 61, 119, 0.4);
  background: linear-gradient(135deg, #004d99 0%, #003366 100%);
}

#blogin:active {
  transform: translateY(0);
}

/* Alerts compacts */
.alert {
  padding: 0.5rem 0.75rem;
}

/* Form floating labels */
.form-floating>label {
  font-size: 0.9rem;
}

.form-floating>.form-control {
  font-size: 0.95rem;
}

/* Responsive - encore plus compact sur mobile */
@media (max-width: 576px) {
  .card-body {
    padding: 1rem !important;
  }

  .card-header {
    padding: 0.75rem !important;
  }

  .card-header img {
    max-height: 50px !important;
  }

  .h4 {
    font-size: 1.1rem;
  }

  .form-floating>label {
    font-size: 0.85rem;
  }
}

/* Hauteur minimale ajustée */
@media (min-height: 600px) {
  .min-vh-100 {
    display: flex;
    align-items: center;
  }
}

@media (max-height: 599px) {
  .min-vh-100 {
    padding: 1rem 0;
    min-height: auto !important;
  }
}

/* Icônes animées */
.fa-info-circle,
.fa-cookie-bite {
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}