/* ---------------------------------------------------------------------------
   Se connecter (login.php) et créer un compte (signup.php).

   Le reste — les champs, les boutons, les bandeaux, les pastilles — vient de
   la charte (tools/assets/css/style.css). Ici, seulement ce que ces deux
   pages ajoutent : le fil des étapes, la force d'un mot de passe, le code
   reçu par courriel, la liste des établissements qui se complète.

   Les huit cents lignes de css/auth_modal.css sont parties avec la fenêtre
   qu'elles habillaient : elles redessinaient des champs, des boutons et des
   onglets que la charte dessine déjà, avec leurs propres couleurs, hors du
   thème sombre.
   --------------------------------------------------------------------------- */

/* Une colonne étroite : un formulaire de deux champs n'a pas besoin de mille
   pixels, et une ligne de saisie trop large se lit mal. */
.formpage--auth {
  max-width: 620px;
}

.auth-bascule {
  margin-top: 1.6rem;
  text-align: center;
  font-size: .9rem;
  color: var(--text-2);
}

/* ---------- le fil des étapes --------------------------------------------- */

/* Trois temps, et l'on sait toujours lequel : celui où l'on est porte
   l'accent, ceux qu'on a passés restent lisibles, celui qui vient recule.
   Sur téléphone, le fil glisse plutôt que de passer à la ligne. */
.etapes {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1.2rem 0 .2rem;
  /* Le retrait qu'un navigateur donne à toute liste : la charte le retire
     dans ses pages, mais la fenêtre d'inscription se pose hors d'elles, et le
     fil s'y décalait d'un cran sur le titre. */
  padding: 0 0 .2rem;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.etapes::-webkit-scrollbar {
  display: none;
}

.etape {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  font-size: .85rem;
  color: var(--text-3);
  white-space: nowrap;
}

.etape__n {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .78rem;
}

.etape.est-faite {
  color: var(--text-2);
}

.etape.est-faite .etape__n {
  background: var(--ok-soft);
  border-color: transparent;
  color: var(--ok);
}

.etape.est-courante {
  color: var(--text);
  font-weight: 600;
}

.etape.est-courante .etape__n {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
}

/* Le trait entre deux étapes : il dit qu'elles se suivent. */
.etape:not(:last-child)::after {
  content: "";
  width: 1.2rem;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- l'adresse reconnue -------------------------------------------- */

/* Ce que le serveur a reconnu de l'adresse saisie : une école, un compte qui
   existe déjà. Une phrase sous le champ, de la couleur de ce qu'elle dit. */
.auth-dit {
  display: block;
  margin-top: .4rem;
  font-size: .84rem;
  color: var(--text-2);
}

.auth-dit--ok {
  color: var(--ok);
}

.auth-dit--attention {
  color: var(--warn);
}

/* ---------- le code reçu --------------------------------------------------- */

.auth-code {
  max-width: 11rem;
  font-family: var(--font-mono);
  letter-spacing: .28em;
}

.auth-verifie {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border-radius: var(--r-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-size: .82rem;
  font-weight: 600;
}

/* ---------- la force d'un mot de passe ------------------------------------- */

/* Elle se mesure à ce qu'on a tapé, et se dit en un mot : un compte à trois
   caractères n'est pas « faible », il est refusé — la barre n'est là que pour
   ce qui passe. */
.auth-force {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .5rem;
}

.auth-force__barre {
  flex: 1 1 auto;
  height: .3rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.auth-force__part {
  display: block;
  height: 100%;
  width: 0;
  background: var(--warn);
  transition: width var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.auth-force[data-force="2"] .auth-force__part {
  background: var(--accent);
}

.auth-force[data-force="3"] .auth-force__part {
  background: var(--ok);
}

.auth-force__mot {
  flex: none;
  font-size: .78rem;
  color: var(--text-3);
}

/* ---------- la liste qui se complète --------------------------------------- */

.auth-cherche {
  position: relative;
}

.auth-liste {
  position: absolute;
  z-index: 20;
  top: calc(100% + .25rem);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.auth-liste__item {
  display: block;
  width: 100%;
  padding: .45rem .55rem;
  border: 0;
  border-radius: var(--r-control);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}

.auth-liste__item:hover,
.auth-liste__item[aria-selected="true"] {
  background: var(--surface-2);
}

.auth-liste__vide {
  padding: .5rem .55rem;
  font-size: .85rem;
  color: var(--text-3);
}

/* ---------- téléphone ------------------------------------------------------ */

@media (max-width: 600px) {
  /* Seule l'étape où l'on se trouve garde son nom : les deux autres tiennent
     dans leur numéro, et le fil reste sur une ligne. */
  .etape:not(.est-courante) span:not(.etape__n) {
    display: none;
  }

  .etape:not(:last-child)::after {
    width: .8rem;
  }

  .formactions--calme > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ---------- champs verrouillés pour invitations administratives ---------- */

.input--locked,
.input[readonly] {
  background-color: var(--surface-2, rgba(148, 163, 184, 0.12)) !important;
  color: var(--text-2, #64748b) !important;
  cursor: not-allowed !important;
  border-color: var(--line, rgba(148, 163, 184, 0.3)) !important;
  user-select: none;
  font-weight: 500;
}

.check--disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}