/* Pages de compte (connexion, inscription, mot de passe, Mon compte).
   Ces pages restent des formulaires HTML classiques (pages statiques d'Identity) :
   cette feuille les habille pour qu'ils ressemblent aux champs MudBlazor, avec les couleurs du thème.
   Tout est limité au bloc .ea-account, pour ne rien toucher ailleurs. */

.ea-account {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 24px 20px;
}

.ea-account h1, .ea-account h2, .ea-account h3 {
    font-family: var(--mud-typography-h4-family);
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 16px;
}
.ea-account h1 { font-size: 1.6rem; }
.ea-account h2, .ea-account h3 { font-size: 1.25rem; }
.ea-account p { margin: 0 0 12px; }
.ea-account hr { border: 0; border-top: 1px solid var(--mud-palette-lines-default); margin: 20px 0; }

/* Mise en colonnes de l'ancien gabarit : on empile tout (carte étroite). */
.ea-account .row, .ea-account [class*="col-"] { display: block; width: 100%; }

/* Champ avec son libellé : le libellé (placé après le champ dans le HTML) est affiché au-dessus. */
.ea-account .form-floating { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.ea-account .form-floating > label { order: -1; font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); }

.ea-account .form-control {
    width: 100%; min-height: 44px; padding: 8px 12px;
    font: inherit; color: var(--mud-palette-text-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
}
.ea-account .form-control:focus {
    outline: none; border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}
.ea-account .form-control:disabled { color: var(--mud-palette-text-disabled); border-style: dashed; }
.ea-account .form-control::placeholder { color: var(--mud-palette-text-disabled); }

.ea-account .checkbox label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.ea-account .form-check-input { width: 18px; height: 18px; accent-color: var(--mud-palette-primary); }

.ea-account .form-text, .ea-account .text-secondary { color: var(--mud-palette-text-secondary); font-size: .9rem; }
.ea-account .text-danger, .ea-account .validation-message, .ea-account .validation-errors { color: var(--mud-palette-error); font-size: .85rem; }
.ea-account ul.validation-errors { margin: 0 0 12px; padding-left: 20px; }

/* Boutons */
.ea-account .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 20px;
    font: inherit; font-weight: 700; cursor: pointer;
    border: 0; border-radius: var(--mud-default-borderradius);
}
.ea-account .btn-lg { min-height: 48px; font-size: 1.05rem; }
.ea-account .btn-primary { background: var(--mud-palette-primary); color: var(--mud-palette-primary-text); }
.ea-account .btn-primary:hover { background: var(--mud-palette-primary-darken); }
.ea-account .btn:focus-visible { outline: 2px solid var(--mud-palette-secondary); outline-offset: 2px; }
.ea-account .w-100 { width: 100%; }
.ea-account .mb-3 { margin-bottom: 16px; }

/* Messages */
.ea-account .alert { padding: 12px 16px; border-radius: var(--mud-default-borderradius); margin-bottom: 16px; }
.ea-account .alert-danger { color: var(--mud-palette-error); background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.ea-account .alert-success { color: var(--mud-palette-success); background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }

/* Choix du thème (Mon compte) */
.ea-account .ea-choice { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.ea-account .ea-choice label {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; cursor: pointer;
    border: 1px solid var(--mud-palette-lines-inputs); border-radius: var(--mud-default-borderradius);
}
.ea-account .ea-choice input { accent-color: var(--mud-palette-primary); }

/* Titre et onglets de « Mon compte » */
.ea-account .ea-account-title { margin-bottom: 8px; }
.ea-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.ea-tab {
    padding: 10px 14px; font-weight: 600; color: var(--mud-palette-text-secondary);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ea-tab.active { color: var(--mud-palette-primary); border-bottom-color: var(--mud-palette-primary); }
.ea-account fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.ea-account legend { font-size: .85rem; font-weight: 600; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }