/* ═══════════════════════════════════════════════════════════════
   ATLAS Visio — Flux d'inscription & vérification email (auth-flow)
   Pages concernées :
     • inscription.html        (formulaire d'inscription sécurisé)
     • verification-email.html (vérifiez votre boîte mail)
     • compte-active.html      (compte activé avec succès)
   Complète styles.css / responsive-mobile.css / hamburger.css —
   réutilise les variables et classes existantes (sv-auth, sv-btn, …).
   ═══════════════════════════════════════════════════════════════ */

/* ── Rangée de champs (Prénom / Nom côte à côte sur desktop) ── */
.sv-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ── Messages sous les champs ── */
.sv-field-msg { display: none; font-size: 0.8rem; margin-top: 6px; color: #E08B7B; line-height: 1.4; }
.sv-field-msg.sv-visible { display: block; }
.sv-field-msg--ok { color: var(--gold-400); }
.sv-input.sv-input-error { border-color: rgba(224, 139, 123, 0.65); }
.sv-input.sv-input-ok { border-color: rgba(196, 163, 90, 0.55); }

/* ── Checklist des exigences du mot de passe (ANSSI) ── */
.sv-pw-box {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 8px;
}
.sv-pw-label {
  font-size: 0.72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}
.sv-pw-list { list-style: none; display: grid; gap: 5px; }
.sv-pw-list li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 0.82rem; color: var(--text-2);
  transition: color 0.2s;
}
.sv-pw-list li.sv-ok { color: var(--cream-200); }
.sv-pw-ico {
  width: 16px; min-width: 16px; text-align: center;
  color: var(--text-3); font-weight: 700;
  transition: color 0.2s;
}
.sv-pw-list li.sv-ok .sv-pw-ico { color: var(--gold-500); }
.sv-pw-list em { font-style: italic; color: var(--text-3); }

/* ── Conseils ANSSI (bloc informatif sous la checklist) ── */
.sv-pw-advice {
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: 10px;
}
.sv-pw-advice p { font-size: 0.8rem; color: var(--text-2); line-height: 1.55; margin: 0; }
.sv-pw-advice .sv-pw-label { margin-bottom: 4px; }

/* ── Jauge de robustesse du mot de passe ── */
.sv-pw-strength {
  height: 4px; border-radius: 999px;
  background: var(--bg-4);
  margin-top: 10px; overflow: hidden;
}
.sv-pw-strength-bar {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: #8A4A3A;
  transition: width 0.3s ease, background 0.3s ease;
}
.sv-pw-strength-bar.sv-strength-2 { background: var(--gold-600); }
.sv-pw-strength-bar.sv-strength-3 { background: var(--gold-400); }
.sv-pw-strength-bar.sv-strength-4 { background: #7BA05B; }

/* ── Case à cocher (CGU / confidentialité) ── */
.sv-check {
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer; font-size: 0.85rem; color: var(--text-2); line-height: 1.5;
  margin-bottom: 18px;
}
.sv-check input {
  width: 20px; height: 20px; min-width: 20px;
  margin-top: 2px; accent-color: var(--gold-500); cursor: pointer;
}
.sv-check a { color: var(--gold-300); text-decoration: underline; }
.sv-check a:hover { color: var(--gold-400); }

/* ── Honeypot anti-spam (invisible pour l'humain) ── */
.sv-hp {
  position: absolute !important;
  left: -9999px !important; top: -9999px !important;
  width: 1px; height: 1px; opacity: 0; overflow: hidden;
  pointer-events: none;
}

/* ── Bandeau d'information (ex. « un lien d'activation sera envoyé ») ── */
.sv-alert {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-3);
  border: 1px solid var(--border-gold);
  border-left: 3px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.85rem; color: var(--cream-200); line-height: 1.55;
  margin-bottom: 20px;
}
.sv-alert svg { flex-shrink: 0; margin-top: 2px; color: var(--gold-500); }
.sv-alert strong { color: var(--cream-50); }

/* ── Grande icône centrale (email, succès) ── */
.sv-big-icon {
  width: 76px; height: 76px; margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  background: var(--bg-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold-500);
}
.sv-big-icon svg { width: 34px; height: 34px; }

/* ── Prochaines étapes (page succès) ── */
.sv-steps { list-style: none; display: grid; gap: 12px; margin-top: 22px; text-align: left; }
.sv-steps li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 0.88rem; color: var(--text-2); line-height: 1.5;
}
.sv-steps li strong { color: var(--cream-100); }
.sv-step-num {
  width: 26px; height: 26px; min-width: 26px;
  border-radius: 50%;
  border: 1px solid var(--border-gold);
  color: var(--gold-400);
  font-size: 0.8rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ── Bouton désactivé (formulaire incomplet) ── */
.sv-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Compte à rebours (renvoi d'email) ── */
.sv-countdown {
  font-size: 0.85rem; color: var(--text-2);
  margin-top: 12px; text-align: center; min-height: 1.3em;
}

/* ── Mobile : tout en une colonne, cibles tactiles confortables ── */
@media (max-width: 600px) {
  .sv-field-row { grid-template-columns: 1fr; gap: 0; }
  .sv-big-icon { width: 68px; height: 68px; }
  .sv-big-icon svg { width: 30px; height: 30px; }
  .sv-alert { padding: 11px 12px; font-size: 0.82rem; }
  .sv-pw-list li { font-size: 0.84rem; }
}