.body > #top,
.body > footer {
    display: none;
}

#page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#top {
    background-color: var(--color-white);
}

#top .navbar {
    --bs-navbar-padding-y: 10px;
    box-shadow: 1px 1px 10px #ccc;
}

#top img.logo {
    width: 150px !important;
}

#auth-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.auth-layout {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    background-color: var(--color-white);
    margin-left: auto;
    padding-inline: 40px;
    padding-block: 40px;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .auth-layout {
        padding-inline: 100px;
        min-width: 768px;
        max-width: 50%;
    }
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
}

.auth-main-inner {
    width: 100%;
    max-width: 550px;
}

.auth-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 22px;
}

.auth-desc {
    margin-bottom: 34px !important;
}

/* Auth tabs */

.auth-tabs-wrapper {
    --auth-tabs-wrapper-border: 1px;
    margin-bottom: 35px;
    border-bottom: var(--auth-tabs-wrapper-border) solid #e5e5e5;
    box-sizing: border-box;
}

.auth-tabs {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--auth-tabs-items), auto);
    width: fit-content;
    --gap: 25px;
    gap: var(--gap);
}

.auth-tabs a {
    font-weight: 500;
    padding: 10px 0;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.auth-tabs .auth-tabs-indicator {
    --index: 0;

    position: absolute;
    bottom: 0;
    transform: translateY(calc(50% + (var(--auth-tabs-wrapper-border) / 2)));
    left: var(--left);
    width: var(--width);
    background: var(--reemploi-color);
    height: 3px;
    transition: left 200ms, width 200ms;
    border-radius: 3px;
}

.auth-tabs > a#show-login-tab-link.active ~ .auth-tabs-indicator {
    --index: 1;
    --left: 0;
    --width: var(--show-login-tab-width);
}

.auth-tabs > a#show-register-tab-link.active ~ .auth-tabs-indicator {
    --index: 2;
    --left: calc(var(--show-login-tab-width) + var(--gap));
    --width: var(--show-register-tab-width);
}

.fs-14 {
    font-size: 14px !important;
}




/* Formulaires */

.auth-forms {
    overflow: hidden;
}

.auth-form-wrapper {
    display: flex;
    --gap: 40px;
    column-gap: var(--gap);
    transition: transform 400ms cubic-bezier(0.77, 0, 0.175, 1);
}

.auth-form-wrapper.active {
    transform: translateX(calc(-100% - var(--gap)));
}

.login-options {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 15px;
    row-gap: 8px;
    margin-bottom: 26px;
}

.login-forgot-link {
    color: var(--reemploi-color);
    text-decoration: underline;
}

.alert-success {
    --bs-alert-color: #155724 !important;
    --bs-alert-bg: #d4edda !important;
    --bs-alert-border-color: #c3e6cb !important;
}

.auth-form-container {
    flex: 0 0 100%;
    height: fit-content;
}

form > p {
    margin-bottom: 18px !important;
}

form > p.hiddenfield {
    margin-bottom: 0 !important;
}

form label {
    width: 100%;
    font-weight: 500;
    margin-bottom: 8px;
}

form input {
    width: 100%;
    color: var(--text-color);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 11px;
    border: 1px solid #e5e5e5;
    outline: none;
}

form input::placeholder {
    color: #a7aaba;
}

form input[type="checkbox"],
form input[type="checkbox"] ~ label {
    width: fit-content;
    cursor: pointer;
    vertical-align: middle;
}

form input[type="checkbox"] ~ label {
    margin: 0 0 0 5px;
}

form input[type="submit"] {
    border-color: var(--text-color);
    background-color: var(--text-color);
    color: var(--color-white);
    font-weight: 500;
}

form input[type="submit"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

form .hint {
    display: block;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    color: var(--reemploi-color);
}

form .captcha-info {
    margin: 0;
    font-size: 12px;
}

.underline {
    text-decoration: underline !important;
}

/* Footer */

.footer {
    padding: 32px 0 0 0 !important;
}

footer > .container {
    padding: 0 !important;
}