/*
 * Pages de compte Identity (générées par le modèle .NET) : leurs classes d'origine Bootstrap
 * sont restylées ici avec les tokens du design system. Portée limitée à .account-pages.
 */

.account-pages { --stack-gap: var(--space-4); }

.account-pages h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.account-pages h2 { font-size: var(--text-md); color: var(--color-text-muted); font-weight: var(--weight-regular); margin-bottom: var(--space-5); }
.account-pages h3, .account-pages h4 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.account-pages p { margin-bottom: var(--space-3); color: var(--color-text-muted); }
.account-pages ol, .account-pages ul.list { padding-left: var(--space-5); color: var(--color-text-muted); }
.account-pages li { margin-bottom: var(--space-3); }
.account-pages hr { margin: var(--space-5) 0; }

/* Grille simplifiée : les colonnes s'empilent, la largeur reste confortable */
.account-pages .row { display: flex; flex-direction: column; gap: var(--space-6); }
.account-pages [class*="col-"] { width: 100%; max-width: 560px; }
.account-pages .col-md-12 { max-width: none; }

.account-pages .mb-3 { margin-bottom: var(--space-4); }
.account-pages .mt-2 { margin-top: var(--space-2); }
.account-pages .mx-auto { margin-left: auto; margin-right: auto; }
.account-pages .w-100 { width: 100%; }
.account-pages .d-flex { display: flex; }
.account-pages .flex-column { flex-direction: column; }
.account-pages .h-100 { height: 100%; }
.account-pages .font-weight-bold { font-weight: var(--weight-semibold); }

.account-pages .text-danger { color: var(--color-danger-text); font-size: var(--text-sm); }
.account-pages .text-success { color: var(--color-success-text); }
.account-pages .text-info { color: var(--color-info-text); }
.account-pages .text-secondary { color: var(--color-text-subtle); }
.account-pages ul.text-danger, .account-pages .validation-summary-errors ul { padding-left: var(--space-5); margin: 0 0 var(--space-3); }

/* Champs : libellé au-dessus, plus lisible qu'un libellé flottant */
.account-pages .form-floating { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.account-pages .form-floating > .text-danger { order: -1; }
.account-pages .form-label,
.account-pages .control-label,
.account-pages label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}

.account-pages .form-control {
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--control-padding-x);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.account-pages .form-control::placeholder { color: var(--color-text-subtle); }
.account-pages .form-control:hover { border-color: var(--color-text-subtle); }
.account-pages .form-control:focus { border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.account-pages .form-control:disabled { background: var(--color-surface-subtle); color: var(--color-text-muted); }

.account-pages .input-group { display: flex; align-items: stretch; }
.account-pages .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.account-pages .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-success-soft);
    color: var(--color-success-text);
}

.account-pages .checkbox label,
.account-pages .form-check-input + * { font-weight: var(--weight-regular); }
.account-pages input[type="checkbox"] { accent-color: var(--color-accent); width: 16px; height: 16px; margin-right: var(--space-2); vertical-align: -3px; }

/* Boutons */
.account-pages .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--weight-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}

.account-pages .btn:hover { background: var(--color-surface-hover); text-decoration: none; }
.account-pages .btn-lg { height: 2.75rem; font-size: var(--text-md); }
.account-pages .btn-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.account-pages .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.account-pages .btn-danger { background: var(--color-danger); border-color: var(--color-danger); color: #fff; }
.account-pages .btn-danger:hover { filter: brightness(0.95); background: var(--color-danger); }
.account-pages .btn-link { border-color: transparent; background: transparent; color: var(--color-accent); }
.account-pages .btn-link:hover { background: var(--color-accent-soft); }

/* Alertes */
.account-pages .alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}

.account-pages .alert p { color: inherit; margin: 0; }
.account-pages .alert-success { background: var(--color-success-soft); color: var(--color-success-text); }
.account-pages .alert-danger { background: var(--color-danger-soft); color: var(--color-danger-text); }
.account-pages .alert-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.account-pages .alert-info { background: var(--color-info-soft); color: var(--color-info-text); }
.account-pages .glyphicon { display: none; }

/* Tableaux (passkeys) */
.account-pages .table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-4); }
.account-pages .table th, .account-pages .table td { text-align: left; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); }
.account-pages .table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); }

.account-pages kbd, .account-pages .recovery-code {
    font-family: var(--font-mono);
    padding: 2px 6px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Menu de navigation des paramètres du compte */
.account-pages .nav { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--space-1); }
.account-pages .nav.flex-column { flex-direction: column; }
.account-pages .nav-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}

.account-pages .nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.account-pages .nav-link.active { background: var(--color-accent-soft); color: var(--color-accent-text); }