/* Connexion, shared by every subdomain. */

.login {
    padding: 38px var(--fgg-space-5);
}

.login__card {
    /* 400px of content plus the card's own horizontal padding, as in the maquette. */
    max-width: calc(400px + 2 * var(--fgg-space-10));
    margin: 0 auto;
    padding: var(--fgg-space-10) var(--fgg-space-10) 26px;
    background: var(--fgg-surface);
    border-radius: var(--fgg-radius);
}

.login__title {
    margin: 0 0 var(--fgg-space-9);
    padding-bottom: var(--fgg-space-4);
    color: var(--fgg-ink);
    font-size: var(--fgg-display-size);
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid var(--fgg-info-border);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--fgg-space-7);
}

.login-form__error {
    margin: 0;
}

.login-form__submit {
    margin-top: var(--fgg-space-2);
}

/* Invitation : le même carton, deux lignes d'explication de plus. */

.login-form__intro {
    display: flex;
    align-items: flex-start;
    gap: var(--fgg-space-3);
    margin: 0;
    font-size: var(--fgg-font-size-sm);
    color: var(--fgg-ink-muted);
}

.login-form__intro .icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.login-form .notice {
    margin: 0;
}

.login-form__hint {
    margin: var(--fgg-space-3) 0 0;
    font-size: var(--fgg-font-size-xs);
    color: var(--fgg-ink-faint);
}