/* Écrans d'authentification et de démarrage */
.auth { min-height: 100vh; display: flex; flex-direction: column; }
.demo-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 20px; background: #fff; border-bottom: 1px dashed #CBD3DD; }
.demo-bar a { height: 30px; padding: 0 10px; border: 1px solid #DCE1E8; border-radius: var(--r-full); background: #fff; font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); display: inline-flex; align-items: center; text-decoration: none; }
.demo-bar a[aria-current="page"] { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.auth-center { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 16px; }
.auth-card { width: 440px; max-width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1), 0 12px 32px rgba(15, 23, 42, .06); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.auth-card.wide { width: 620px; }
.auth-card .input { height: 44px; }
.auth-card .btn { height: 44px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--brand-900); }
.auth-title { font-size: 22px; font-weight: var(--fw-bold); letter-spacing: -.02em; color: var(--brand-900); }
.steps { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); }
.steps .step { display: flex; align-items: center; gap: 6px; }
.steps .step b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); background: var(--neutral-bg); color: var(--neutral-fg); }
.steps .step[aria-current="step"] { color: var(--brand-900); font-weight: 600; }
.steps .step[aria-current="step"] b { background: var(--action-600); color: #fff; }
.steps .step.done b { background: var(--success-fg); color: #fff; }
.steps .line { flex: 1; height: 1px; background: var(--border); min-width: 20px; }
.check-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); }
.check-item .dot { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #B7C3D3; flex: none; display: grid; place-items: center; }
.check-item.done .dot { background: var(--success-fg); border-color: var(--success-fg); color: #fff; }
.check-item .t { flex: 1; display: flex; flex-direction: column; }
.auth-foot { text-align: center; font-size: var(--fs-sm); color: var(--text-faint); padding: 0 16px 24px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 96px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 32px; }
@media (max-width: 520px) { .auth-card { padding: 22px; } }