/* ===============================
   AUTH – STYLE MMORPG PIXEL
================================ */

.login-page {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(252,213,80,.15), transparent 55%),
                linear-gradient(180deg, #050507, #020203);
    color: #fff;
}

/* CARD */
.auth-card {
    position: relative;
    background: transparent;
    padding: 36px;
}

.auth-card::before {
    content: "";
    position: absolute;
    inset: -180px;
    background-image: url("../img/ui/login-frame.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.auth-card > * {
    position: relative;
    z-index: 2;
}

/* FORM */
.auth-card form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===============================
   INPUTS AVEC ICÔNES
================================ */

.auth-input {
    width: 100%;
    max-width: 360px;
    height: 56px;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #1a1a1c, #0e0e10);
    border-radius: 10px;
    padding: 0 18px;
    margin-bottom: 22px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.auth-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #dcdcdc;
    font-size: 1rem;
    padding-left: 14px;
}

.auth-input input::placeholder {
    color: #9a9a9a;
}

/* ICÔNES */
.auth-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .85;
}

.auth-icon.user {
    background-image: url("../img/ui/icon-user.png");
}

.auth-icon.key {
    background-image: url("../img/ui/icon-key.png");
}

/* ===============================
   OPTIONS (ESPACE AJOUTÉ)
================================ */

.auth-options {
    width: 100%;
    max-width: 360px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px; /* espace global */
}

.form-check {
    display: flex;
    align-items: center;
    gap: 6px;
}

.forgot-link {
    margin-left: 12px; /* ✅ ESPACE ENTRE LES DEUX */
    color: #fcd550;
    font-weight: 600;
    text-decoration: none;
}

.forgot-link:hover {
    color: #ffea9f;
    text-decoration: underline;
}

/* ACTIONS */
.auth-actions {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* BOUTON IMAGE */
.btn-login-img {
    width: 100%;
    aspect-ratio: 360 / 56;
    background-image: url("../img/ui/btn-login.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}
.btn-login-img:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}
/* REGISTER */
.link-register {
    color: #4aa3ff;
    font-weight: 600;
    text-decoration: none;
}

.link-register:hover {
    color: #78bdff;
    text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {
    .auth-card::before {
        inset: -120px;
    }
}
/* AUCUNE ANIMATION SUR LA CARD */
.auth-card,
.auth-card * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}
/* SUPPRIME LE FOND BLANC AUTOCOMPLETE */
.auth-input input:-webkit-autofill,
.auth-input input:-webkit-autofill:hover,
.auth-input input:-webkit-autofill:focus,
.auth-input input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #0e0e10 inset !important;
    -webkit-text-fill-color: #dcdcdc !important;
    caret-color: #ffffff;
    transition: background-color 9999s ease-out 0s;
}

/* ===============================
   REGISTER SPECIFIQUE (NE CASSE PAS LOGIN)
================================ */

/* Frame différente pour register */
.auth-card.register::before {
    background-image: url("../img/ui/register-frame.png");
}

/* Grille 2 colonnes pour register */
.register-grid {
    width: 100%;
    max-width: 740px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 22px;
}

/* Inputs en grid prennent toute la largeur */
.register-grid .auth-input {
    max-width: 100%;
    margin-bottom: 0;
}

/* Bouton register */
.btn-register-img {
    width: 100%;
    aspect-ratio: 360 / 56;
    background-image: url("../img/ui/btn-register.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
}

.btn-register-img:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Mobile : repasse en 1 colonne */
@media (max-width: 768px) {
    .register-grid {
        grid-template-columns: 1fr;
    }
}
/* ===============================
   RESET PASSWORD (EMAIL)
================================ */

/* Texte après envoi du mail */
.auth-reset-text {
    max-width: 360px;
    text-align: center;
    font-size: 0.95rem;
    color: #fcd550;
    margin-bottom: 22px;
}

/* Reset = même frame que login */
.auth-card.reset::before {
    background-image: url("../img/ui/login-frame.png");
}