.auth-page,
.auth-page *,
.auth-page *::before,
.auth-page *::after {
    box-sizing: border-box;
}

.auth-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(48px, 9vh, 104px) var(--t-space-5);
    font-family: var(--t-font-base);
    color: var(--t-color-text);
    overflow-x: hidden;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-card.is-wide { max-width: 560px; }

.auth-visual { display: none; }

.auth-head {
    margin-bottom: var(--t-space-8);
    text-align: center;
}

.auth-page h1 {
    margin: 0 0 var(--t-space-3);
    font-size: var(--t-text-4xl);
    font-weight: var(--t-weight-extralight);
    letter-spacing: var(--t-tracking-wider);
    text-transform: uppercase;
    color: var(--t-color-black);
}

.auth-sub {
    margin: 0 auto;
    max-width: 36ch;
    font-size: var(--t-text-base);
    line-height: var(--t-leading-normal);
    color: var(--t-color-text-muted);
}

.auth-alert {
    margin-bottom: var(--t-space-6);
    padding: var(--t-space-4) var(--t-space-5);
    border: var(--t-border-width-1) solid var(--t-color-red);
    border-left-width: 3px;
    background: rgba(219, 2, 29, 0.05);
    color: var(--t-color-red-dark);
    font-size: var(--t-text-base);
}

.auth-form {
    display: flex;
    flex-direction: column;
}

.auth-field { margin-bottom: var(--t-space-6); }

.auth-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--t-space-5);
}

.auth-field > label,
.auth-label {
    display: block;
    margin-bottom: var(--t-space-2);
    font-size: var(--t-text-xs);
    font-weight: var(--t-weight-medium);
    letter-spacing: var(--t-tracking-wide);
    text-transform: uppercase;
    color: var(--t-gray-600);
}

.auth-field > label.required::after,
.auth-label.required::after {
    content: " *";
    color: var(--t-color-red);
}

.auth-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--t-space-2) var(--t-space-3);
}

.auth-inline-link {
    font-size: var(--t-text-sm);
    font-weight: var(--t-weight-regular);
    letter-spacing: var(--t-tracking-normal);
    text-transform: none;
    color: var(--t-color-text-muted);
    text-decoration: none;
}

.auth-inline-link:hover {
    color: var(--t-color-red);
    text-decoration: underline;
}

.form-input {
    width: 100%;
    height: 48px;
    padding: 0 var(--t-space-4);
    font-family: inherit;
    font-size: var(--t-text-lg);
    color: var(--t-color-black);
    background: var(--t-color-white);
    border: var(--t-border-width-1) solid var(--t-gray-75);
    border-radius: var(--t-radius-none);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t-duration-fast) var(--t-ease-default),
                box-shadow var(--t-duration-fast) var(--t-ease-default);
}

.form-input::placeholder { color: var(--t-gray-200); }

.form-input:hover { border-color: var(--t-gray-300); }

.form-input:focus {
    border-color: var(--t-color-black);
    box-shadow: inset 0 0 0 var(--t-border-width-1) var(--t-color-black);
}

select.form-input {
    line-height: normal;
    padding-right: var(--t-space-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23212529'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--t-space-4) center;
}

.form-password { position: relative; }

.form-password .form-input { padding-right: 48px; }

.form-password__toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--t-gray-300);
    cursor: pointer;
    transition: color var(--t-duration-fast) var(--t-ease-default);
}

.form-password__toggle:hover { color: var(--t-color-black); }

.form-password__toggle:focus-visible {
    color: var(--t-color-black);
    box-shadow: inset 0 0 0 var(--t-border-width-2) var(--t-color-black);
}

.form-password__toggle .icon-eye-off { display: none; }
.form-password__toggle.is-revealed .icon-eye { display: none; }
.form-password__toggle.is-revealed .icon-eye-off { display: inline-block; }

.form-hint {
    margin-top: var(--t-space-2);
    font-size: var(--t-text-sm);
    color: var(--t-color-text-muted);
}

.form-phone {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: var(--t-space-3);
}

.form-phone__code { padding: 0 var(--t-space-3); }

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: var(--t-space-3);
    margin-bottom: var(--t-space-4);
    padding: 0;
}

.auth-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--t-color-red);
    cursor: pointer;
}

.auth-check label {
    margin: 0;
    font-size: var(--t-text-base);
    font-weight: var(--t-weight-regular);
    line-height: var(--t-leading-normal);
    letter-spacing: normal;
    text-transform: none;
    color: var(--t-color-text);
    cursor: pointer;
}

.auth-check label.required::after {
    content: " *";
    color: var(--t-color-red);
}

.auth-check a { color: var(--t-color-black); text-underline-offset: 2px; }
.auth-check a:hover { color: var(--t-color-red); }

.submit-button {
    width: 100%;
    min-height: 52px;
    margin-top: var(--t-space-2);
    padding: var(--t-space-4) var(--t-space-5);
    font-family: inherit;
    font-size: var(--t-text-sm);
    font-weight: var(--t-weight-medium);
    letter-spacing: var(--t-tracking-wider);
    text-transform: uppercase;
    color: var(--t-color-white);
    background-color: var(--t-color-black);
    border: var(--t-border-width-1) solid var(--t-color-black);
    border-radius: var(--t-radius-none);
    cursor: pointer;
    transition: background-color var(--t-duration-md) var(--t-ease-default),
                border-color var(--t-duration-md) var(--t-ease-default),
                color var(--t-duration-md) var(--t-ease-default);
}

.submit-button:hover {
    background-color: var(--t-color-red);
    border-color: var(--t-color-red);
}

.submit-button:focus-visible {
    box-shadow: 0 0 0 var(--t-focus-ring-offset) var(--t-color-white),
                0 0 0 calc(var(--t-focus-ring-offset) + var(--t-focus-ring-width)) var(--t-color-black);
}

.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: var(--t-space-4) var(--t-space-8);
    font-size: var(--t-text-sm);
    font-weight: var(--t-weight-medium);
    letter-spacing: var(--t-tracking-wider);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--t-color-black);
    background: var(--t-color-white);
    border: var(--t-border-width-1) solid var(--t-color-black);
    border-radius: var(--t-radius-none);
    transition: background-color var(--t-duration-md) var(--t-ease-default),
                border-color var(--t-duration-md) var(--t-ease-default),
                color var(--t-duration-md) var(--t-ease-default);
}

.ghost-button:hover {
    color: var(--t-color-white);
    background: var(--t-color-red);
    border-color: var(--t-color-red);
}

.ghost-button:focus-visible {
    box-shadow: 0 0 0 var(--t-focus-ring-offset) var(--t-color-white),
                0 0 0 calc(var(--t-focus-ring-offset) + var(--t-focus-ring-width)) var(--t-color-black);
}

.auth-divider {
    margin: var(--t-space-7) 0 var(--t-space-5);
    border: 0;
    border-top: var(--t-border-width-1) solid var(--t-gray-75);
}

.auth-alt {
    text-align: center;
    font-size: var(--t-text-base);
    color: var(--t-color-text-muted);
}

.auth-alt a {
    color: var(--t-color-black);
    font-weight: var(--t-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-alt a:hover { color: var(--t-color-red); }

.auth-confirm { text-align: center; }

.auth-confirm__icon {
    display: inline-flex;
    margin-bottom: var(--t-space-5);
    color: var(--t-color-black);
}

.auth-confirm p {
    margin-bottom: var(--t-space-4);
    font-size: var(--t-text-lg);
    line-height: var(--t-leading-relaxed);
    color: var(--t-color-text);
}

.auth-confirm .auth-note {
    font-size: var(--t-text-base);
    color: var(--t-color-text-muted);
}

.auth-confirm a {
    color: var(--t-color-black);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-confirm a:hover { color: var(--t-color-red); }

.auth-confirm .ghost-button {
    margin-top: var(--t-space-5);
    color: var(--t-color-black);
    text-decoration: none;
}

.form-error,
.auth-form ul li {
    color: var(--t-color-red);
    font-size: var(--t-text-sm);
    margin-top: var(--t-space-2);
}

.auth-form ul { padding: 0; margin: 0; list-style: none; }

@media (min-width: 576px) {
    .auth-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 992px) {
    .auth-page {
        display: grid;
        grid-template-columns: 42% 1fr;
        align-items: stretch;
        padding: 0;
        min-height: 680px;
    }

    .auth-visual {
        display: block;
        margin: clamp(40px, 6vh, 72px) clamp(24px, 2vw, 40px) clamp(40px, 6vh, 72px) clamp(40px, 4vw, 72px);
        border: var(--t-border-width-1) solid var(--t-gray-75);
        background-image: url("../images/atelier/tussor-authentification-_QbnXjl.webp");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .auth-card {
        justify-self: start;
        align-self: center;
        margin: clamp(48px, 8vh, 96px) clamp(64px, 8vw, 150px);
    }
}