/* Gabarit commun des écrans d'authentification (L6).
   Les tokens de base (`--misaju-*`), le reset, `.c-skip-link` et `.visually-hidden`
   proviennent de global.css, chargé juste avant. */

:root {
    --auth-card-max-width: 30rem;
    --auth-card-radius: 0.75rem;
    --auth-card-background: #171717;
    --auth-border-color: #3a3a3a;
    --auth-field-background: #101010;
    --auth-muted-text-color: #b3ada4;
    --auth-status-color: #7fd1a4;
    --auth-error-color: #f08a8a;
    --auth-focus-outline-width: 2px;
}

.p-auth {
    min-height: 100vh;
}

.p-auth__main {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--misaju-spacing-lg) var(--misaju-spacing-md);
}

.p-auth__card {
    width: 100%;
    max-width: var(--auth-card-max-width);
    padding: var(--misaju-spacing-lg);
    border: 1px solid var(--auth-border-color);
    border-radius: var(--auth-card-radius);
    background-color: var(--auth-card-background);
}

.p-auth__title {
    margin: 0 0 var(--misaju-spacing-sm);
    color: var(--misaju-color-accent);
    font-size: 1.5rem;
}

.p-auth__intro,
.p-auth__notice {
    margin: 0 0 var(--misaju-spacing-md);
    color: var(--auth-muted-text-color);
    font-size: 0.9375rem;
}

.p-auth__status {
    margin: 0 0 var(--misaju-spacing-md);
    color: var(--auth-status-color);
}

.p-auth__errors {
    margin: 0 0 var(--misaju-spacing-md);
    padding: var(--misaju-spacing-sm) var(--misaju-spacing-md);
    border-left: 3px solid var(--auth-error-color);
    color: var(--auth-error-color);
}

.p-auth__errors-title {
    margin: 0 0 var(--misaju-spacing-sm);
    font-weight: 600;
}

.p-auth__errors-list {
    margin: 0;
    padding-left: var(--misaju-spacing-md);
}

.p-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--misaju-spacing-md);
}

.p-auth__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.p-auth__field--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--misaju-spacing-sm);
}

.p-auth__label {
    font-size: 0.875rem;
    font-weight: 600;
}

.p-auth__input {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--auth-border-color);
    border-radius: 0.375rem;
    background-color: var(--auth-field-background);
    color: var(--misaju-color-text);
    font-family: inherit;
    font-size: 1rem;
}

.p-auth__input:focus-visible,
.p-auth__checkbox:focus-visible,
.p-auth__submit:focus-visible,
.p-auth__link:focus-visible {
    outline: var(--auth-focus-outline-width) solid var(--misaju-color-accent);
    outline-offset: 2px;
}

.p-auth__hint {
    margin: 0;
    color: var(--auth-muted-text-color);
    font-size: 0.8125rem;
}

.p-auth__submit {
    padding: 0.75rem;
    border: 0;
    border-radius: 0.375rem;
    background-color: var(--misaju-color-accent);
    color: var(--misaju-color-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.p-auth__submit:hover {
    background-color: var(--misaju-color-secondary);
    color: var(--misaju-color-text);
}

.p-auth__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--misaju-spacing-md);
    margin-top: var(--misaju-spacing-lg);
    font-size: 0.9375rem;
}