.auth-card.card{
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  background: var(--panel);
}
.auth-card .form-control:focus{
  box-shadow: none;
  border-color: rgba(var(--bs-primary-rgb), .4);
}
#togglePass{ padding: 0; }


.alert-info {
  --bs-alert-color:#2b251d !important;
  --bs-alert-bg:#fcefcf !important;
  --bs-alert-border-color:#d09f94 !important;
  --bs-alert-link-color:#000 !important;
}


a {
  color:rgb(37, 57, 87) !important;
}



/* Carte du login */
.auth-card.card {
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  background: var(--bs-body-bg); /* clair pour contraster avec le fond sombre */
}

/* Form control focus */
.auth-card .form-control:focus {
  box-shadow: none;
  border-color: rgba(var(--bs-primary-rgb), .4);
}

/* Logo */
.auth-logo img {
  display:block;
  width:min(300px,76vw);
  max-height:200px;
  object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

.auth-logo{
  display:grid;
  min-height:100px;
  place-items:center;
}

.auth-outer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* ⬅️ place le contenu en haut */
  min-height: 100vh !important;
  padding-top: 5vh !important;          /* espace au-dessus */
  background: transparent !important;
}

/* Fond sombre avec dégradé subtil */
body, .auth-outer, auth-wrap {
  background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
  padding: 24px;
}

/* Carte du login (blanche pour contraste) */
.auth-card.card {
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  background: #fff;
}

/* Bouton principal en bleu nuit */
.btn-primary {
  background-color: #111827 !important;
  border-color: #111827 !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #1e293b !important; /* un peu plus clair pour hover */
  border-color: #1e293b !important;
}


/* Forcer labels en foncé */
.auth-card .form-label, .form-check-label {
  color: #111827 !important; /* bleu nuit utilisé ailleurs */
  font-weight: 500;
}

/* Bouton de login */
.auth-card .btn-primary {
  background: linear-gradient(135deg, #0f172a, #1e293b);
  border: none;
  color: #fff;
}

/* Bouton "Afficher" du champ mot de passe */
#togglePass {
  color: #55678e !important;   /* bleu nuit */
  font-weight: 500;
}

/* Lien "Mot de passe oublié ?" */
.auth-card a.small {
  color: #55678e !important;   /* bleu nuit */
  text-decoration: none;
}

.auth-card a.small:hover {
  text-decoration: underline;  /* un petit feedback au survol */
}

.auth-client-help{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:.7rem;
  margin-bottom:1rem;
  padding:.75rem .85rem;
  border:1px solid #dbe3ee;
  border-radius:.8rem;
  color:#334155;
  background:#f5f7fa;
}

.auth-client-help[hidden],
#forgotSubmit[hidden]{
  display:none;
}

.auth-client-help>i{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:.65rem;
  color:#475569;
  background:#e7ecf3;
}

.auth-client-help>div{
  display:grid;
  gap:.1rem;
}

.auth-client-help strong{
  color:#172033;
  font-size:.82rem;
}

.auth-client-help span{
  font-size:.76rem;
  line-height:1.35;
}

body.login-page {
  background-color: #15181d;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(245, 158, 11, .14) 0, transparent 34%),
    radial-gradient(circle at 88% 14%, rgba(59, 130, 246, .13) 0, transparent 38%),
    radial-gradient(circle at 72% 88%, rgba(139, 92, 246, .09) 0, transparent 40%),
    linear-gradient(135deg, #292d35 0%, #181b21 48%, #0d0f12 100%);
  background-attachment: fixed;
  min-height: 100vh;
}