/* =====================================================================
   HC Facturation — lot « auth »
   =====================================================================
   Ce fichier ne contient QUE ce que base.css ne sait pas faire : la
   colonne étroite de l'écran de connexion et la ligne « mot de passe +
   bouton Afficher ». Tout le reste (carte, champ, bouton, bandeau,
   tableau, badge) vient du système de design et n'est jamais redéfini
   ici.

   Aucune couleur ni aucun espacement en dur : uniquement les variables
   du système.
   ===================================================================== */

/* --- Colonne des écrans sans navigation propre ---------------------- */
/* Connexion et confirmation forte : une seule colonne, centrée, assez
   étroite pour que l'œil n'ait rien d'autre à faire que lire les trois
   champs. */
.auth-colonne {
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.auth-carte {
  padding: var(--espace-6);
}

.auth-carte__entete {
  margin-bottom: var(--espace-5);
}

.auth-carte__entete .sous-titre {
  margin-bottom: 0;
}

/* Pied de carte : la mention porte .info-secondaire pour la couleur et
   la taille, et cette classe-ci pour le filet de séparation. */
.auth-carte__pied {
  display: block;
  margin-top: var(--espace-5);
  padding-top: var(--espace-4);
  border-top: 1px solid var(--bordure);
}

/* --- Mot de passe et bouton « Afficher » ---------------------------- */
/* Le bouton n'est PAS compact : sa zone cliquable fait déjà 44 px et ne
   déborde donc sur rien. Il reste à hauteur de champ, à droite. */
.auth-mdp {
  display: flex;
  align-items: stretch;
  gap: var(--espace-2);
}

.auth-mdp .saisie {
  flex: 1;
  min-width: 0;
}

.auth-mdp__bascule {
  flex: none;
  white-space: nowrap;
}

/* Sous 390 px, le bouton passe sous le champ plutôt que de l'écraser. */
@media (max-width: 420px) {
  .auth-mdp {
    flex-direction: column;
    align-items: stretch;
  }
}