/* ============================================
   Pages Auth — Connexion, Inscription
   ============================================ */

.auth-page {
    min-height: calc(100vh - var(--header-height));
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
}

.auth-card {
    width: 100%; max-width: 440px;
    background: var(--bg-glass-strong); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); padding: 2.5rem;
}

.auth-card h1 {
    font-size: 1.8rem; text-align: center; margin-bottom: 0.5rem;
}

.auth-card .auth-subtitle {
    text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem;
}

.auth-card .form-group { margin-bottom: 1.25rem; }

.auth-card .btn-primary { width: 100%; margin-top: 0.5rem; }

.auth-footer {
    text-align: center; margin-top: 1.5rem; font-size: 0.85rem; color: var(--text-muted);
}
.auth-footer a { color: var(--accent-primary); font-weight: 500; }

/* Google button */
.btn-google {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    padding: 0.65rem; background: #fff; color: #333; border: 1px solid #ddd;
    border-radius: var(--radius-md); font-weight: 500; font-size: 0.9rem;
    transition: all var(--transition-base);
}
.btn-google:hover { background: #f5f5f5; box-shadow: var(--shadow-sm); }

/* Password strength */
.password-strength {
    display: flex; gap: 4px; margin-top: 0.5rem;
}
.password-strength .bar {
    flex: 1; height: 4px; border-radius: 2px;
    background: var(--border-glass); transition: background 0.3s;
}
.password-strength.weak .bar:nth-child(1) { background: var(--accent-danger); }
.password-strength.medium .bar:nth-child(-n+2) { background: var(--accent-warning); }
.password-strength.strong .bar:nth-child(-n+3) { background: var(--accent-success); }
.password-strength.very-strong .bar { background: var(--accent-success); }

@media (max-width: 480px) {
    .auth-card { padding: 1.5rem; border-radius: var(--radius-lg); }
}