/* Fichier versionné physiquement pour contourner le cache des WebView GEARS. */
:root {
    --auth-red: #a90b16;
    --auth-red-deep: #450005;
    --auth-ink: #0a0a0c;
    --auth-panel: #17171a;
    --auth-copy: #f6f6f6;
    --auth-muted: #aaaab0;
}

.gears-auth-body {
    height: 100dvh;
    overflow: hidden;
    background: #08080a;
}

.gears-auth-body::before,
.gears-auth-body::after {
    opacity: 0;
}

.gears-auth-page {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    overflow: auto;
    /* Le bandeau FFA est en position fixed en bas : on lui reserve sa place
       pour qu'il ne soit plus imprime par-dessus le bas de la carte. */
    padding: 32px 18px 150px;
    color: var(--auth-copy);
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 18%, rgba(141, 4, 14, .24), transparent 28rem),
        radial-gradient(circle at 85% 82%, rgba(94, 0, 7, .18), transparent 30rem),
        linear-gradient(135deg, #111114 0%, #070709 54%, #101014 100%);
}

.gears-auth-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("/css/images/watermark_gears.png") center center / min(820px, 86vw) auto no-repeat;
    opacity: .34;
    filter: saturate(.82) brightness(.72) contrast(1.2);
}

.gears-auth-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .22;
    background-image: repeating-linear-gradient(115deg, transparent 0 18px, rgba(255, 255, 255, .018) 19px 20px);
}

.gears-auth-shell {
    position: relative;
    width: min(100%, 980px);
    height: min(750px, calc(100dvh - 196px));
    min-height: min(600px, calc(100dvh - 196px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(29, 29, 33, .9), rgba(17, 17, 20, .9));
    box-shadow:
        26px 26px 70px rgba(0, 0, 0, .74),
        -14px -14px 45px rgba(255, 255, 255, .045),
        inset 1px 1px 0 rgba(255, 255, 255, .055);
    transition: border-radius .58s cubic-bezier(.7, 0, .22, 1);
}

.gears-auth-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("/css/images/watermark_gears.png") 25% center / min(430px, 42vw) auto no-repeat;
    opacity: .72;
    filter: brightness(.76) saturate(.82) contrast(1.16);
    transition: background-position .58s cubic-bezier(.7, 0, .22, 1);
}

.gears-auth-shell--register::before {
    background-position: 75% center;
}

.gears-auth-shell--login {
    height: min(750px, calc(100dvh - 196px));
    border-radius: 28px 110px 110px 28px;
}

.gears-auth-shell--register {
    border-radius: 110px 28px 28px 110px;
}

.gears-auth-panel {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 0;
    padding: clamp(32px, 4vw, 58px);
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 255, .035), transparent 23rem),
        linear-gradient(145deg, rgba(29, 29, 33, .72), rgba(16, 16, 19, .78));
}

.gears-auth-panel--login {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

.gears-auth-panel--register {
    grid-column: 2;
    grid-row: 1;
    overflow-y: auto;
    padding-bottom: 120px;
    scrollbar-width: thin;
    scrollbar-color: rgba(169, 11, 22, .72) rgba(0, 0, 0, .22);
}

.gears-auth-panel--register::-webkit-scrollbar {
    width: 7px;
}

.gears-auth-panel--register::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: rgba(169, 11, 22, .76);
}

.gears-auth-panel--preview {
    display: block;
    overflow: hidden;
    opacity: 1;
}

.gears-auth-shell--login .gears-auth-panel--preview {
    grid-column: 2;
}

.gears-auth-shell--register .gears-auth-panel--preview {
    grid-column: 1;
    grid-row: 1;
}

/* Sur grand ecran les deux panneaux occupent chacun une moitie et la bande
   rouge passe par-dessus. Ses coins arrondis (110px) laissaient voir le
   formulaire du dessous : on masque carrement le panneau inactif. Le panneau
   qui arrive s'affiche tout de suite (il est encore sous la bande), celui qui
   part ne disparait qu'une fois la bande posee dessus (delai = duree du
   glissement), donc rien ne clignote. */
@media (min-width: 841px) {
    .gears-auth-panel--login,
    .gears-auth-panel--register {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0s linear .6s, visibility 0s linear .6s;
    }

    .gears-auth-shell--login .gears-auth-panel--login,
    .gears-auth-shell--register .gears-auth-panel--register {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
}

.gears-auth-heading {
    margin-bottom: 1.5rem;
}

.gears-auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .65rem;
    color: #df6069;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.gears-auth-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    border-radius: 4px;
    background: var(--auth-red);
    box-shadow: 0 0 10px rgba(169, 11, 22, .65);
}

.gears-auth-title {
    margin: 0;
    color: #fff;
    font-family: "Gears Of Peace", system-ui, sans-serif;
    font-size: clamp(1.8rem, 3.2vw, 2.65rem);
    font-weight: 400;
    letter-spacing: .035em;
    line-height: 1.08;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

.gears-auth-subtitle {
    margin: .65rem 0 0;
    color: var(--auth-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.gears-auth-card {
    width: 100%;
}

.gears-auth-card .form-label,
.gears-auth-card .form-check-label {
    color: rgba(255, 255, 255, .82);
    font-size: .84rem;
    font-weight: 700;
}

.gears-auth-card .form-control,
.gears-auth-card input:not([type="checkbox"]),
.gears-auth-card select,
.gears-auth-card textarea {
    min-height: 48px;
    appearance: none;
    -moz-appearance: none;
    color: #fff !important;
    color-scheme: dark;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 12px;
    background: #111114 !important;
    background-color: #111114 !important;
    box-shadow:
        inset 5px 5px 12px rgba(0, 0, 0, .55),
        inset -3px -3px 9px rgba(255, 255, 255, .025) !important;
}

.gears-auth-card .form-control:focus,
.gears-auth-card input:not([type="checkbox"]):focus,
.gears-auth-card select:focus,
.gears-auth-card textarea:focus {
    border-color: rgba(169, 11, 22, .88) !important;
    box-shadow:
        inset 5px 5px 12px rgba(0, 0, 0, .55),
        0 0 0 .2rem rgba(169, 11, 22, .19),
        0 0 22px rgba(169, 11, 22, .1) !important;
}

.gears-auth-card input:-webkit-autofill,
.gears-auth-card input:-webkit-autofill:hover,
.gears-auth-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    box-shadow: 0 0 0 1000px #111114 inset !important;
}

.gears-auth-card .form-floating > label {
    color: rgba(255, 255, 255, .62);
}

.gears-auth-card .form-floating > label::after {
    background: transparent !important;
}

.gears-auth-card form ul,
.gears-auth-card .invalid-feedback,
.gears-auth-card .form-error-message,
.gears-auth-card .gears-live-error {
    display: block !important;
    margin: .25rem 0 0;
    padding-left: 0;
    list-style: none;
    color: #ff8c97 !important;
    font-size: .79rem;
    line-height: 1.28;
}

.gears-auth-card .gears-live-error:empty {
    display: none !important;
}

.gears-auth-pass-row {
    position: relative;
}

.gears-auth-pass-row .gears-auth-eye {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.gears-auth-pass-row .gears-auth-eye,
.gears-register-pass .gears-auth-eye {
    width: 52px !important;
    min-width: 52px;
    border-radius: 0 12px 12px 0;
}

.gears-register-pass {
    display: flex;
}

.gears-register-pass > input {
    border-radius: 12px 0 0 12px !important;
}

.gears-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: 1rem 0 1.15rem;
    font-size: .8rem;
}

.gears-auth-options a,
.gears-auth-link {
    color: #ff8c97;
    text-decoration: none;
}

.gears-auth-options a:hover,
.gears-auth-link:hover {
    color: #ffc0c6;
    text-decoration: underline;
}

.gears-auth-primary {
    min-height: 50px;
    border: 0 !important;
    border-radius: 13px;
    color: #fff !important;
    font-weight: 900;
    letter-spacing: .02em;
    background: linear-gradient(145deg, #b90d1a, #650208) !important;
    box-shadow:
        8px 8px 18px rgba(0, 0, 0, .48),
        -3px -3px 10px rgba(255, 255, 255, .06),
        inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.gears-auth-primary:hover,
.gears-auth-primary:focus-visible {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 10px 12px 24px rgba(0, 0, 0, .52), 0 0 24px rgba(169, 11, 22, .22) !important;
}

.gears-auth-primary:active {
    transform: translateY(0);
}

.gears-auth-secondary {
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 12px;
    background: #151518 !important;
    color: #fff !important;
    box-shadow: 5px 5px 12px rgba(0, 0, 0, .42), -2px -2px 7px rgba(255, 255, 255, .035);
}

.gears-auth-links {
    display: grid;
    gap: .65rem;
    margin-top: .85rem;
}

.gears-auth-discover {
    margin-top: 1rem;
    text-align: center;
    font-size: .82rem;
}

.gears-auth-discover a {
    color: rgba(255, 255, 255, .64);
    text-decoration: none;
}

.gears-auth-discover a:hover {
    color: #fff;
}

.gears-auth-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 4;
    width: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: clamp(34px, 5vw, 68px);
    text-align: center;
    background:
        radial-gradient(ellipse at 30% 7%, rgba(255, 83, 90, .25), transparent 31%),
        radial-gradient(ellipse at 82% 88%, rgba(20, 0, 2, .62), transparent 48%),
        linear-gradient(145deg, #a80b16 0%, #75040b 48%, #3d0105 100%);
    box-shadow:
        18px 0 36px rgba(0, 0, 0, .24),
        inset 1px 1px 0 rgba(255, 255, 255, .2),
        inset -10px -10px 30px rgba(73, 0, 7, .24);
    /* On anime « left » d'un etat a l'autre : une seule transition CSS, pas de
       translation suivie d'un recalage en JavaScript. C'est ce recalage qui
       produisait la coupure au milieu du glissement. */
    transition: left .58s cubic-bezier(.7, 0, .22, 1), border-radius .58s ease;
    will-change: left;
}

.gears-auth-shell--login .gears-auth-cover {
    left: 50%;
    border-radius: 110px;
}

.gears-auth-shell--register .gears-auth-cover {
    left: 0;
    border-radius: 110px;
}

.gears-auth-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background: url("/css/images/gears_skull_detail.png") center 74% / 125% auto no-repeat;
    filter: contrast(1.3) brightness(.65);
}

.gears-auth-cover::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: inherit;
    pointer-events: none;
}

.gears-auth-cover-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: clamp(34px, 5vw, 68px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease;
}

/* Le texte qui part s'efface tout de suite, celui qui arrive apparait pendant
   que la bande glisse : simple fondu croise, pilote par la meme bascule de
   classe que le glissement. */
.gears-auth-shell--login .gears-auth-cover-content--login,
.gears-auth-shell--register .gears-auth-cover-content--register {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: .28s;
}

.gears-auth-emblem {
    width: clamp(132px, 16vw, 176px);
    aspect-ratio: 1;
    height: auto;
    margin-bottom: 1.3rem;
    border: 3px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 16px 28px rgba(71, 0, 8, .42),
        0 0 0 8px rgba(0, 0, 0, .09),
        inset 0 0 20px rgba(0, 0, 0, .6);
}

.gears-auth-cover h2 {
    margin: 0;
    color: #fff;
    font-family: "Gears Of Peace", system-ui, sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 400;
    letter-spacing: .035em;
}

.gears-auth-cover p {
    max-width: 320px;
    margin: .9rem auto 1.6rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.55;
}

.gears-auth-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 999px;
    color: #fff;
    padding: .7rem 1.4rem;
    font-weight: 900;
    text-decoration: none;
    background: rgba(82, 0, 8, .16);
    box-shadow: 7px 7px 16px rgba(82, 0, 8, .3), -3px -3px 10px rgba(255, 255, 255, .1);
    transition: background .18s ease, transform .18s ease;
}

.gears-auth-switch:hover,
.gears-auth-switch:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, .13);
    transform: translateY(-2px);
}

.gears-auth-preview-content {
    width: 100%;
}

.gears-auth-preview-content--login {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: flex-start;
}

.gears-auth-preview-form {
    display: grid;
    gap: .55rem;
}

.gears-auth-preview-label {
    color: rgba(255, 255, 255, .82);
    font-size: .84rem;
    font-weight: 700;
}

.gears-auth-preview-field {
    display: flex;
    min-height: 48px;
    align-items: center;
    margin-bottom: .3rem;
    padding: .7rem 1rem;
    border-radius: 12px;
    color: rgba(255, 255, 255, .48);
    background: #111114;
    box-shadow: inset 5px 5px 12px rgba(0, 0, 0, .55), inset -3px -3px 9px rgba(255, 255, 255, .025);
}

.gears-auth-preview-options {
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
}

.gears-auth-preview-options b {
    color: #ff8c97;
    font-weight: 400;
}

.gears-auth-preview-button {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: .45rem;
    border-radius: 13px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(145deg, #b90d1a, #650208);
    box-shadow: 8px 8px 18px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.gears-auth-mobile-brand,
.gears-auth-mobile-switch {
    display: none;
}

.gears-register-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .85rem;
}

.gears-register-grid .gears-register-wide {
    grid-column: 1 / -1;
}

.gears-auth-card .form-check-input {
    min-height: 0;
    box-shadow: none !important;
}

.gears-auth-card .form-check-input:checked {
    border-color: var(--auth-red) !important;
    background-color: var(--auth-red) !important;
}

.auth-contact-modal .modal-content {
    color: #fff;
    background: rgba(14, 14, 16, .98) !important;
}

.auth-contact-modal .form-control {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .2) !important;
    background: #111114 !important;
}

.gears-auth-body .gears-affiliation-footer {
    position: fixed;
    top: auto;
    right: auto;
    bottom: 4px;
    left: 50%;
    z-index: 8;
    width: auto;
    padding: .25rem .75rem .35rem;
    gap: .2rem;
    transform: translateX(-50%);
}

.gears-auth-body .gears-affiliation-footer > a:first-child {
    padding: .55rem .8rem;
    border-radius: 8px;
}

.gears-auth-body .gears-affiliation-footer img {
    width: min(420px, 86vw);
    max-height: 72px;
}

.gears-auth-body .gears-affiliation-footer > a:last-child {
    display: inline-flex;
}

@media (max-width: 840px) {
    .gears-auth-page {
        display: block;
        height: 100dvh;
        min-height: 0;
        overflow: hidden;
        /* Meme raison qu'en grand ecran : on laisse sa place au bandeau FFA
           fixe, sinon il s'imprime par-dessus le bas du formulaire. */
        padding: 12px 10px 137px;
    }

    .gears-auth-page::before {
        background: url("/css/images/watermark_gears.png") center / min(520px, 132vw) auto no-repeat;
        opacity: .18;
    }

    .gears-auth-shell,
    .gears-auth-shell--login,
    .gears-auth-shell--register {
        width: min(100%, 560px);
        height: min(750px, calc(100dvh - 153px));
        min-height: 0;
        margin: 0 auto;
        display: block;
        position: relative;
        border-radius: 22px;
    }

    .gears-auth-shell::before,
    .gears-auth-shell--register::before {
        background-position: center 68%;
        background-size: min(430px, 105vw) auto;
        opacity: .46;
    }

    .gears-auth-panel {
        position: absolute;
        inset: 230px 0 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px 20px 116px;
        opacity: 0;
        transition: transform .46s cubic-bezier(.7, 0, .22, 1), opacity .22s ease;
    }

    .gears-auth-shell--login .gears-auth-panel--login,
    .gears-auth-shell--register .gears-auth-panel--register {
        opacity: 1;
        transform: translateX(0);
    }

    .gears-auth-shell--login .gears-auth-panel--register {
        transform: translateX(100%);
    }

    .gears-auth-shell--register .gears-auth-panel--login {
        transform: translateX(-100%);
    }

    .gears-auth-cover,
    .gears-auth-shell--login .gears-auth-cover,
    .gears-auth-shell--register .gears-auth-cover {
        inset: 0 0 auto;
        left: 0;
        width: 100%;
        height: 230px;
        display: block;
        padding: 12px 18px;
        border-radius: 22px 22px 58px 58px;
        transform: none;
    }

    .gears-auth-cover-content {
        padding: 12px 20px;
    }

    .gears-auth-emblem {
        width: 76px;
        margin-bottom: .35rem;
        border-width: 2px;
    }

    .gears-auth-cover h2 {
        font-size: clamp(1.25rem, 6vw, 1.65rem);
    }

    .gears-auth-cover p {
        max-width: 390px;
        margin: .3rem auto .55rem;
        font-size: .78rem;
        line-height: 1.3;
    }

    .gears-auth-switch {
        min-width: 168px;
        min-height: 36px;
        padding: .42rem 1rem;
        font-size: .83rem;
    }

    .gears-auth-mobile-brand,
    .gears-auth-mobile-switch {
        display: none;
    }
}

@media (max-width: 520px) {
    .gears-register-grid {
        grid-template-columns: 1fr;
    }

    .gears-register-grid .gears-register-wide {
        grid-column: auto;
    }

    .gears-auth-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Windows « effets d'animation : desactives » fait remonter prefers-reduced-motion.
   On ne coupe plus le glissement de la bande (sinon elle se teleporte pendant
   que la carte, elle, continue de se deformer : c'est la coupure signalee) ;
   seuls les petits effets de survol sont neutralises. */
@media (prefers-reduced-motion: reduce) {
    .gears-auth-switch,
    .gears-auth-primary {
        scroll-behavior: auto;
        transition-duration: .01ms !important;
    }
}