/* ═══════════════════════════════════════════════════════════════════
   porte.css — l'habillage des écrans sans session, dans la langue de
   Propulse WORK (l'aurore). Il vient APRÈS `app.css`, dont il reprend
   tous les jetons : aucune couleur, aucune durée, aucune police n'est
   réinventée ici.

   POURQUOI CE FICHIER EXISTE PLUTÔT QU'UNE RÉÉCRITURE DES GABARITS.
   Les cinq écrans de sécurité (connexion, second facteur, et les trois
   du mot de passe oublié) portent les classes de l'ancienne console :
   `.card`, `.input`, `.btn`, `.field`… Réécrire leur markup, c'est
   risquer de perdre un détail qui a été payé cher — le message
   d'étranglement qui ne dit pas « identifiants invalides », le bouton
   « Annuler » en POST parce qu'un lien GET renvoyait une 405. On garde
   donc le markup, et on change ce que ces classes VEULENT DIRE.

   Quand les écrans de la console seront remplacés un par un (étape 4),
   ce fichier rétrécira tout seul.
   ═══════════════════════════════════════════════════════════════════ */

/* ── la scène : la carte est centrée, elle ne colle pas au bas ─────── */
.auth {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--marge) 40px;
}

/* ── la carte : pas de cadre, la structure vient de l'espace ──────── */
.card, .auth-card { max-width: 26rem; }
.card-h { margin-bottom: 26px; }
.card-h h3 {
  margin: 0; font: 700 clamp(30px, 4vw, 40px)/1.08 var(--titre); letter-spacing: -.026em; color: var(--encre);
}
/* la phrase sous le titre : elle dit ce qu'il y a derrière la porte */
.porte-d { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--encre-2); }
.card-b { display: flex; flex-direction: column; }
/* le bouton respire : il ne colle pas au dernier champ */
.card-b .btn { margin-top: 22px; }
.card-b .gap-t.btn, .card-b form .btn { margin-top: 18px; }

/* ── les champs ───────────────────────────────────────────────────── */
.stack-md { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3);
}
.input {
  width: 100%; background: rgb(7 7 12 / .55); border: 1px solid var(--trait); border-radius: 16px;
  padding: 14px 15px; color: var(--encre); font: 400 16px/1.5 var(--texte);
}
.input::placeholder { color: var(--encre-3); }
.input:focus { outline: none; border-color: var(--ac); }
/* le code du second facteur : six chiffres, espacés, en chasse fixe */
.code-input {
  font: 500 22px var(--mono); letter-spacing: .34em; text-align: center; padding: 16px 15px;
}

/* ── les boutons : les mêmes que sur l'écran du matin ──────────────── */
.btn {
  display: block; border: 1px solid rgb(245 243 255 / .26); background: var(--voile);
  border-radius: var(--r); padding: 16px 24px; font: 600 16px var(--texte); color: var(--encre);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: background var(--t) var(--courbe), border-color var(--t) var(--courbe), transform var(--t) var(--courbe);
}
.btn:hover { background: var(--voile-2); border-color: rgb(245 243 255 / .4); }
.btn:active { transform: scale(.985); }
.btn.full { width: 100%; }
.btn.primary { background: var(--ac); border-color: var(--ac); color: #1a0d02; }
.btn.primary:hover { background: var(--ac); filter: brightness(1.06); }
.btn.ghost { background: none; border-color: var(--trait); color: var(--encre-3); font-weight: 400; font-size: 14px; padding: 13px 24px; }
.btn.ghost:hover { color: var(--encre-2); background: rgb(245 243 255 / .05); }

/* ── ce que le serveur répond ──────────────────────────────────────── */
.pcrm-state, .auth-msg, .mot {
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: var(--voile); border: 1px solid rgb(245 243 255 / .1);
  font-size: 14px; line-height: 1.5; color: var(--encre-2);
}
.pcrm-state--error, .mot--dur { border-color: var(--ac); color: var(--encre); }
.mots { position: relative; z-index: 3; padding: 14px var(--marge) 0; }
.mots .mot { max-width: 26rem; }

/* ── le reste du vocabulaire hérité ───────────────────────────────── */
.gap-b { margin-bottom: 14px; }
.gap-t { margin-top: 10px; }
.auth-links { margin-top: 16px; text-align: center; }
.lnk { color: var(--encre-3); text-decoration: none; border-bottom: 1px solid rgb(245 243 255 / .2); }
.lnk:hover { color: var(--ac); border-bottom-color: var(--ac); }
.txt-sm, .hint { font-size: 13px; line-height: 1.55; color: var(--encre-3); }
.hint { margin: 10px 0 0; }
.muted { color: var(--encre-3); }

/* ── le lapin ne pousse pas la carte sur un petit écran ───────────── */
@media (max-width: 899px) {
  .lapin { bottom: 12px; height: min(17vh, 118px); opacity: .8; }
}
@media (min-width: 900px) {
  .auth { padding-right: clamp(300px, 30vw, 460px); }
  .card, .auth-card { max-width: 28rem; }
}