/*
 * Notafacto Client — pages publiques (login / activation / inscription /
 * connexion SuperPDP). Carte centrée, tokens nf uniquement (notafacto.css).
 * Chargé via le front-matter `css` des pages sur le layout `guest-nf`.
 */

/* ===== Layout centré ===== */
.login-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--surface);
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--menu-elevation);
  padding: 40px 32px;
}

.login-logo {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
  text-align: center;
  margin-bottom: 4px;
  text-decoration: none;
  display: block;
}
.login-logo span { color: var(--accent); font-style: normal; }

.login-subtitle {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 32px;
}

/* Formulaire : champs nf espacés + bouton pleine largeur. */
.login-form .nf-field + .nf-field,
.login-form .nf-field { margin-bottom: 16px; }
.login-form .nf-btn { width: 100%; justify-content: center; margin-top: 8px; }
.login-form .nf-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Message d'information centré (page « lien expiré ») + CTA pleine largeur hors formulaire. */
.login-message {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  margin-bottom: 24px;
}
.login-card > .nf-btn { width: 100%; justify-content: center; }

/* Lien d'appoint sous le formulaire (« déjà un compte ? »). */
.entry-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 16px;
}
.entry-hint a { color: var(--accent); }

/* ===== Activation — règles de mot de passe ○/gris → ✓/vert ===== */
.pw-rules {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pw-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.4;
  transition: color 100ms ease;
}
.pw-rules li.is-ok { color: var(--success-text); }
.pw-check {
  display: inline-flex;
  width: 14px;
  height: 14px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}
.pw-mismatch {
  margin: 4px 0 0;
  color: var(--error-text);
  font-size: 13px;
}
.activate-error-title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--text);
}

/* ===== Inscription — succès + recherche d'entreprise par SIRET ===== */
.signup-success { text-align: center; }
.signup-validate { margin-bottom: 16px; }
.signup-form-error { margin-bottom: 8px; }
.signup-lookup { margin-bottom: 16px; }
.signup-lookup-status { margin: 0; color: var(--text-2); font-size: 13px; }
.signup-lookup-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.signup-lookup-name { margin: 0; font-weight: 600; color: var(--text); }
.signup-lookup-addr { margin: 0; color: var(--text-2); font-size: 13px; }
.signup-lookup-card .nf-btn { margin-top: 4px; }
.signup-lookup-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-2);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.signup-lookup-link:hover { color: var(--text); }

/* ===== Connexion SuperPDP — icônes d'état ===== */
.nf-auth__icon {
  font-size: 3rem;
  color: var(--text-3);
  margin-bottom: 8px;
}
.nf-auth__icon--success { color: var(--success-text); }

/* ===== Accueil « / » — carte de bienvenue (cf. entry.js) ===== */
.entry-email {
  margin: -8px 0 32px;
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
}
.entry-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== Pages d'erreur 404 / 500 (cf. error-quips.js) ===== */
.error-card { text-align: center; }
.error-code {
  font-family: var(--serif);
  font-style: italic;
  font-size: 5rem;
  line-height: 1;
  color: var(--accent);
  margin: 0 0 8px;
}
.error-heading {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--text);
  margin: 0 0 8px;
}
.error-message {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 32px;
}
.error-actions .nf-btn { width: 100%; justify-content: center; }