/* app/static/css/auth.css
   Écrans hors du système de gabarits PC/mobile (connexion, inscription,
   mot de passe oublié, assistant de création) : aucune maquette de
   référence pour ces écrans — le cahier des charges §1 le dit explicitement
   ("il ne dit rien de la charte graphique... c'était volontaire"). Design
   fonctionnel minimal, entièrement sur les jetons de tokens.css : aucune
   valeur n'est inventée hors de ce fichier. */

.auth-page {
  min-height: 100vh;
  /* iOS Safari : 100vh compte la page entiere, barre d'adresse/outils
     dynamiques comprises -- le contenu centre se retrouve partiellement
     masque derriere elles. 100dvh (hauteur REELLEMENT visible, supporte
     depuis iOS 15.4) ecrase la ligne du dessus la ou disponible ; navigateurs
     sans dvh gardent silencieusement 100vh (audit iOS/Safari 2026-09-06). */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: var(--pageX);
}

.auth-carte {
  width: 100%;
  max-width: 480px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: var(--cardB);
  box-shadow: var(--shadowPanel);
}

.auth-logo { font-size: 13px; font-weight: 700; color: var(--acc); margin-bottom: 18px; }
.auth-titre, .assistant-titre { font-size: 21px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 16px; }

.auth-champ, .assistant-champ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--mut);
  margin-bottom: 14px;
}

.auth-champ input, .assistant-champ input, .assistant-champ select {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--txt);
  font-family: inherit;
  font-size: 13px;
}

.auth-erreur { color: var(--bad); font-size: 11px; }

.auth-bouton {
  width: 100%;
  background: var(--acc);
  color: var(--accTxt);
  border: 0;
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.auth-bouton-google {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--line3);
  border-radius: 12px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  cursor: pointer;
}

.auth-lien {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: var(--txt2);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.assistant-progression { display: flex; gap: 6px; margin-bottom: 10px; }
.assistant-pastille { flex: 1; height: 4px; border-radius: 999px; background: var(--line3); }
.assistant-pastille.est-active { background: var(--acc); }
.assistant-etape-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--mut2); margin: 0 0 12px; }

.assistant-actions { display: flex; gap: 10px; margin-top: 8px; }
.assistant-actions .auth-bouton, .assistant-actions .auth-lien { margin-top: 0; }

.assistant-invitations { list-style: none; padding: 0; margin: 0 0 14px; }
.assistant-invitation-ligne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--line2);
  font-size: 12.5px;
}
.assistant-invitation-ligne form { margin: 0; }
.assistant-invitation-ligne .auth-lien { width: auto; margin: 0; }

.assistant-recap { font-size: 13px; }
.assistant-recap dt { color: var(--mut); font-size: 11px; text-transform: uppercase; margin-top: 10px; }
.assistant-recap dd { margin: 4px 0 0; }

.assistant-import { display: flex; gap: 8px; margin-bottom: 18px; }
.assistant-import input {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--txt);
  font-family: inherit;
}
.assistant-import .auth-lien { width: auto; margin: 0; white-space: nowrap; }

.assistant-flash {
  background: var(--accFaint);
  border: 1px solid var(--accLine);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--txt2);
  margin-bottom: 14px;
}
.assistant-flash p { margin: 0; }