/*
 * Page de connexion.
 *
 * Elle emprunte les jetons de `app.css` — même bleu de panneau, mêmes filets —
 * pour qu'on reconnaisse l'outil avant même d'y entrer. Elle ne redéfinit que
 * ce qui lui est propre : une carte centrée sur un fond plein.
 */

.page-connexion {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--panneau);
  color: var(--panneau-texte);
}

.carte-connexion {
  width: min(26rem, calc(100vw - 2rem));
  padding: 2rem 2rem 1.5rem;
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  /* Une ombre portée plutôt qu'un filet : sur un fond aussi sombre, un trait
     d'un ton voisin disparaît, et un trait clair fait bague. */
  box-shadow: 0 18px 40px rgb(0 0 0 / 45%);
}

/* Le logotype est une boîte flexible : c'est `justify-content` qui le centre,
   `text-align` n'a plus prise dessus. Un peu plus grand qu'en barre — c'est le
   seul objet de la page. */
.carte-connexion h1 {
  margin: 0;
  justify-content: center;
  font-size: 1.45rem;
}

.carte-connexion .accroche {
  margin: 0.25rem 0 1.75rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.875rem;
}

.carte-connexion .field {
  display: block;
  margin-bottom: 1rem;
}

.carte-connexion .field span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.carte-connexion input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.65rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.carte-connexion input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.carte-connexion .primary {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem;
  font: inherit;
  font-weight: 600;
}

/* Pendant l'envoi : le bouton reste lisible mais n'invite plus au clic. Le
   curseur d'attente vaut mieux qu'un bouton qui semble ne rien faire. */
.carte-connexion .primary[disabled] {
  opacity: 0.65;
  cursor: progress;
}

.carte-connexion .erreur {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}

.carte-connexion .aide {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.carte-connexion .aide code {
  display: block;
  margin-top: 0.35rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.7188rem;
  color: var(--text);
  background: var(--bg);
  border-radius: 4px;
  /* La commande est longue : elle se replie plutôt que de forcer une barre de
     défilement horizontale sur toute la carte. */
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   MOT DE PASSE OUBLIÉ

   Deux pages de plus sur la même carte : demander un lien, puis s'en servir.
   Rien de neuf dans la mise en page — c'est la carte de connexion, et le
   parcours doit se lire comme une suite du même écran, pas comme un détour.
   --------------------------------------------------------------------------- */

/* Le lien d'oubli est SOUS le bouton : à côté du champ, on le lit avant d'avoir
   essayé. On ne le cherche qu'après un refus. */
.carte-connexion .lien-oubli {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
}
.carte-connexion .lien-oubli a,
.carte-connexion .aide a { color: var(--muted); }
.carte-connexion .lien-oubli a:hover,
.carte-connexion .aide a:hover { color: var(--accent); }

/* Ce qui REMPLACE le formulaire quand il n'y a plus rien à saisir : le lien
   parti, le lien mort, le mot de passe changé. */
.oubli-parti { margin: 0.25rem 0 0; }
.oubli-titre {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.oubli-dit {
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
}
.oubli-dit:last-child { margin-bottom: 0; }
.oubli-dit a { color: var(--accent); }

/* La règle du mot de passe, sous les deux champs qu'elle gouverne : au-dessus,
   on la lit avant de savoir de quoi il s'agit ; dans le message d'erreur
   seulement, on ne l'apprend qu'après s'être trompé. */
.carte-connexion .aide-champ {
  margin: -0.35rem 0 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
}

/* LA LANGUE, discrète en bas de carte : on ne la change qu'une fois. Voir
   `selecteurDeLangue` dans `textes.js`. */
.carte-connexion .langue-connexion {
  margin: 0.9rem 0 0;
  text-align: center;
}
.carte-connexion .choix-langue {
  font: inherit;
  font-size: 0.8125rem;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border, rgba(127, 127, 127, 0.3));
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
}

/* ---------------------------------------------------------------------------
   L'ÉCRAN D'ACTIVATION — là où renvoie le mur du bail. La même carte : on
   n'est pas dans l'application, on est à sa porte.
   --------------------------------------------------------------------------- */
.carte-connexion .activation-titre { margin: 0 0 0.5rem; font-weight: 600; }
.carte-connexion .activation-dit { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.carte-connexion .activation-envoi { display: grid; gap: 0.6rem; margin: 0 0 1rem; font-size: 0.8125rem; }
.carte-connexion .activation-hors-ligne { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.carte-connexion .activation-paires { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0 0 0.75rem; font-size: 0.8125rem; }
.carte-connexion .activation-paires dt { color: var(--muted); }
.carte-connexion .activation-paires dd { margin: 0; }
.carte-connexion .activation-m { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.carte-connexion textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }