/* =========================================================
   VARIABLES
========================================================= */

:root {

    --text: #f1f1f1;

    --text-secondary: #9b9b9f;

    --border:
        rgba(255, 255, 255, 0.12);

    --red:
        #76232b;

    --red-hover:
        #932d37;

}


/* =========================================================
   PAGE
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;

    min-height: 100%;

}


body {

    margin: 0;

    min-height: 100vh;

    background: #000000;

    color: var(--text);

    font-family:
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}



/* =========================================================
   DARKRAI
========================================================= */

.background-image {

    position: fixed;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    width:
        min(600px, 55vw);

    pointer-events: none;

    user-select: none;

    z-index: 0;

}


.background-image img {

    display: block;

    width: 100%;

    height: auto;

}



/* =========================================================
   WRAPPER
========================================================= */

.login-wrapper {

    position: relative;

    z-index: 10;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

}



/* =========================================================
   CARTE LOGIN
========================================================= */

.login-card {

    width: 100%;

    max-width: 390px;

    padding: 30px;

    border-radius: 18px;

    background:

        linear-gradient(
            180deg,
            rgba(17, 17, 18, 0.55),
            rgba(5, 5, 6, 0.50)
        );

    border:
        1px solid var(--border);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.48);

}



/* ligne rouge */

.login-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 45px;

    right: 45px;

    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(118, 35, 43, 0.85),
            transparent
        );

}



/* =========================================================
   HEADER
========================================================= */

.login-header {

    text-align: center;

    margin-bottom: 26px;

}


.login-header h1 {

    margin:
        0 0 7px;

    font-size:
        24px;

    font-weight:
        600;

    letter-spacing:
        -0.03em;

}


.login-header p {

    margin: 0;

    color:
        var(--text-secondary);

    font-size:
        11px;

}



/* =========================================================
   LABEL
========================================================= */

.form-label {

    margin-bottom:
        6px;

    color:
        #aaaaae;

    font-size:
        11px;

}



/* =========================================================
   INPUT
========================================================= */

.form-control {

    min-height:
        44px;

    padding:
        8px 13px;

    border-radius:
        10px;

    border:
        1px solid var(--border);

    background:
        rgba(0, 0, 0, 0.55);

    color:
        #ffffff;

    font-size:
        12px;

    box-shadow:
        none;

}


.form-control:focus {

    background:
        rgba(0, 0, 0, 0.72);

    color:
        #ffffff;

    border-color:
        var(--red);

    box-shadow:

        0 0 0 3px
        rgba(118, 35, 43, 0.12);

}



/* =========================================================
   BOUTON
========================================================= */

.btn-login {

    width: 100%;

    min-height:
        44px;

    border-radius:
        9px;

    border:
        1px solid #77232c;

    background:
        rgba(80, 23, 29, 0.88);

    color:
        #eeeeee;

    font-size:
        12px;

    font-weight:
        600;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;

}


.btn-login:hover {

    background:
        rgba(105, 31, 39, 0.95);

    border-color:
        var(--red-hover);

}



/* =========================================================
   MESSAGES
========================================================= */

.login-error,
.login-success {

    margin-bottom:
        18px;

    padding:
        10px 12px;

    border-radius:
        8px;

    font-size:
        11px;

}


.login-error {

    background:
        rgba(118, 35, 43, 0.18);

    border:
        1px solid rgba(150, 48, 58, 0.35);

    color:
        #d68b92;

}


.login-success {

    background:
        rgba(65, 153, 101, 0.14);

    border:
        1px solid rgba(101, 199, 141, 0.25);

    color:
        #82d3a3;

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .background-image {

        width:
            90vw;

    }


    .login-card {

        max-width:
            360px;

        padding:
            24px;

    }

}