/* =========================================================
           VARIABLES OFFICIELLES DIGISCALE-PRO
        ========================================================= */

        :root {

            --black: #01030A;
            --blue-black: #020713;
            --blue-dark: #041126;
            --blue: #071A36;

            --gold-shadow: #806217;
            --gold-dark: #A88322;
            --gold: #C6A23A;
            --gold-light: #E4C96A;
            --gold-white: #F5E7AE;

            --white: #FFFFFF;
            --text: #E9EBF0;
            --muted: #9299A7;

            --page-bg: #01030A;
            --card-bg: rgba(2, 7, 19, 0.88);
            --input-bg: rgba(7, 26, 54, 0.72);

            --border: rgba(228, 201, 106, 0.18);
            --border-strong: rgba(198, 162, 58, 0.30);

            --shadow:
                0 30px 80px rgba(0, 0, 0, 0.50);

            --gold-glow:
                0 0 45px rgba(198, 162, 58, 0.10);
        }


        /* =========================================================
           MODE CLAIR
        ========================================================= */

        body.light {

            --page-bg: #F0F2F6;
            --card-bg: rgba(255, 255, 255, 0.92);
            --input-bg: #E8ECF3;

            --text: #071A36;
            --muted: #596274;

            --border: rgba(128, 98, 23, 0.18);
            --border-strong: rgba(128, 98, 23, 0.28);

            --shadow:
                0 25px 65px rgba(4, 17, 38, 0.12);

            --gold-glow:
                0 0 35px rgba(198, 162, 58, 0.08);

            background:
                radial-gradient(
                    circle at 15% 0%,
                    rgba(228, 201, 106, 0.08),
                    transparent 30%
                ),
                linear-gradient(
                    145deg,
                    #E8ECF3,
                    #EEF1F6 52%,
                    #F1EEDC
                );
        }


        /* =========================================================
           RESET
        ========================================================= */

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }


        html {
            min-height: 100%;
        }


        body {

            min-height: 100vh;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 30px 18px;

            color: var(--text);

            background:
                radial-gradient(
                    circle at 50% -10%,
                    rgba(7, 26, 54, 0.90),
                    transparent 42%
                ),
                radial-gradient(
                    circle at 85% 85%,
                    rgba(128, 98, 23, 0.08),
                    transparent 30%
                ),
                linear-gradient(
                    145deg,
                    var(--black),
                    var(--blue-black) 48%,
                    var(--blue-dark)
                );

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            transition:
                background 0.3s ease,
                color 0.3s ease;
        }


        /* =========================================================
           DÉCORATION
        ========================================================= */

        .background-glow {

            position: fixed;

            width: 420px;
            height: 420px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(198, 162, 58, 0.10),
                    transparent 68%
                );

            filter: blur(10px);

            pointer-events: none;

            top: -180px;
            left: 50%;

            transform: translateX(-50%);
        }


        .background-glow-bottom {

            position: fixed;

            width: 350px;
            height: 350px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(7, 26, 54, 0.80),
                    transparent 70%
                );

            pointer-events: none;

            right: -150px;
            bottom: -150px;
        }


        /* =========================================================
           CONTENEUR
        ========================================================= */

        .page {

            width: 100%;
            max-width: 470px;

            position: relative;

            z-index: 2;
        }


        /* =========================================================
           RETOUR ACCUEIL
        ========================================================= */

        .back-link {

            display: inline-flex;

            align-items: center;
            gap: 8px;

            margin-bottom: 18px;

            color: var(--muted);

            text-decoration: none;

            font-size: 13px;
            font-weight: 700;

            transition:
                color 0.2s ease,
                transform 0.2s ease;
        }


        .back-link:hover {

            color: var(--gold-light);

            transform: translateX(-3px);
        }


        body.light .back-link:hover {
            color: var(--gold-dark);
        }


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

        .login-card {

            position: relative;

            padding: 42px 38px 34px;

            background: var(--card-bg);

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

            border-radius: 22px;

            box-shadow:
                var(--shadow),
                var(--gold-glow);

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

            overflow: hidden;
        }


        .login-card::before {

            content: "";

            position: absolute;

            top: 0;
            left: 0;
            right: 0;

            height: 1px;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(228, 201, 106, 0.70),
                    transparent
                );
        }


        .login-card::after {

            content: "";

            position: absolute;

            width: 180px;
            height: 180px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    rgba(198, 162, 58, 0.07),
                    transparent 70%
                );

            top: -110px;
            right: -80px;

            pointer-events: none;
        }


        /* =========================================================
           LOGO
        ========================================================= */

        .brand {

            text-align: center;

            margin-bottom: 30px;
        }


        .brand-logo {

            width: 76px;
            height: 76px;

            margin: 0 auto 17px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 20px;

            background:
                linear-gradient(
                    145deg,
                    rgba(7, 26, 54, 0.95),
                    rgba(2, 7, 19, 0.98)
                );

            border: 1px solid
                rgba(228, 201, 106, 0.24);

            box-shadow:
                0 12px 35px rgba(0, 0, 0, 0.35),
                0 0 28px rgba(198, 162, 58, 0.08);

            color: var(--gold-light);

            font-size: 25px;
            font-weight: 900;
            letter-spacing: -1px;
        }


        body.light .brand-logo {

            background:
                linear-gradient(
                    145deg,
                    #FFFFFF,
                    #E8ECF3
                );

            border-color:
                rgba(128, 98, 23, 0.22);

            box-shadow:
                0 12px 30px rgba(4, 17, 38, 0.10);
        }


        .brand-name {

            color: var(--gold-light);

            font-size: 22px;

            font-weight: 900;

            letter-spacing: 1.4px;
        }


        body.light .brand-name {
            color: var(--gold-dark);
        }


        .brand-subtitle {

            margin-top: 7px;

            color: var(--muted);

            font-size: 12px;

            letter-spacing: 1.2px;

            text-transform: uppercase;
        }


        /* =========================================================
           TITRE
        ========================================================= */

        .title {

            text-align: center;

            margin-bottom: 7px;

            color: var(--text);

            font-size: 26px;

            font-weight: 800;

            letter-spacing: -0.5px;
        }


        .description {

            text-align: center;

            margin-bottom: 29px;

            color: var(--muted);

            font-size: 13px;

            line-height: 1.6;
        }


        /* =========================================================
           FORMULAIRE
        ========================================================= */

        .form-group {

            margin-bottom: 19px;
        }


        .form-label {

            display: block;

            margin-bottom: 8px;

            color: var(--text);

            font-size: 12px;

            font-weight: 800;

            letter-spacing: 0.3px;
        }


        .input-wrap {

            position: relative;
        }


        .input-icon {

            position: absolute;

            left: 15px;
            top: 50%;

            transform: translateY(-50%);

            color: var(--gold);

            font-size: 15px;

            pointer-events: none;
        }


        .form-input {

            width: 100%;

            height: 50px;

            padding:
                0 15px 0 43px;

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

            border-radius: 11px;

            outline: none;

            background: var(--input-bg);

            color: var(--text);

            font-size: 14px;

            transition:
                border-color 0.2s ease,
                box-shadow 0.2s ease,
                background 0.2s ease;
        }


        .form-input::placeholder {
            color: var(--muted);
            opacity: 0.75;
        }


        .form-input:focus {

            border-color:
                rgba(228, 201, 106, 0.60);

            box-shadow:
                0 0 0 3px
                rgba(198, 162, 58, 0.08),
                0 0 20px
                rgba(198, 162, 58, 0.05);
        }


        body.light .form-input:focus {

            border-color:
                rgba(128, 98, 23, 0.48);

            box-shadow:
                0 0 0 3px
                rgba(198, 162, 58, 0.08);
        }


        /* =========================================================
           MOT DE PASSE
        ========================================================= */

        .password-toggle {

            position: absolute;

            right: 13px;
            top: 50%;

            transform: translateY(-50%);

            border: 0;

            background: transparent;

            color: var(--muted);

            cursor: pointer;

            font-size: 12px;

            font-weight: 700;

            padding: 5px;
        }


        .password-toggle:hover {
            color: var(--gold-light);
        }


        body.light .password-toggle:hover {
            color: var(--gold-dark);
        }


        #password {
            padding-right: 70px;
        }


        /* =========================================================
           OPTIONS
        ========================================================= */

        .form-options {

            display: flex;

            align-items: center;
            justify-content: space-between;

            gap: 10px;

            margin:
                -2px 0 23px;
        }


        .remember {

            display: flex;

            align-items: center;

            gap: 8px;

            color: var(--muted);

            font-size: 12px;

            cursor: pointer;
        }


        .remember input {

            appearance: none;

            width: 15px;
            height: 15px;

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

            border-radius: 4px;

            background: var(--input-bg);

            cursor: pointer;

            position: relative;
        }


        .remember input:checked {

            background:
                linear-gradient(
                    135deg,
                    var(--gold-dark),
                    var(--gold-light)
                );

            border-color: var(--gold);
        }


        .remember input:checked::after {

            content: "✓";

            position: absolute;

            left: 50%;
            top: 50%;

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

            color: #01030A;

            font-size: 10px;
            font-weight: 900;
        }


        .forgot-link {

            color: var(--gold-light);

            font-size: 12px;

            font-weight: 700;

            text-decoration: none;
        }


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


        body.light .forgot-link {
            color: var(--gold-dark);
        }


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

        .submit-button {

            width: 100%;

            height: 52px;

            border: 0;

            border-radius: 11px;

            cursor: pointer;

            background:
                linear-gradient(
                    135deg,
                    var(--gold-dark),
                    var(--gold-light)
                );

            color: #01030A;

            font-size: 13px;

            font-weight: 900;

            letter-spacing: 0.7px;

            box-shadow:
                0 10px 25px
                rgba(128, 98, 23, 0.20);

            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                filter 0.2s ease;
        }


        .submit-button:hover {

            transform: translateY(-2px);

            box-shadow:
                0 15px 32px
                rgba(128, 98, 23, 0.30);

            filter: brightness(1.04);
        }


        .submit-button:active {
            transform: translateY(0);
        }


        /* =========================================================
           SÉPARATEUR
        ========================================================= */

        .separator {

            display: flex;

            align-items: center;

            gap: 12px;

            margin: 26px 0 21px;

            color: var(--muted);

            font-size: 11px;

            text-transform: uppercase;

            letter-spacing: 1px;
        }


        .separator::before,
        .separator::after {

            content: "";

            height: 1px;

            flex: 1;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    var(--border),
                    transparent
                );
        }


        /* =========================================================
           INSCRIPTION
        ========================================================= */

        .register-text {

            text-align: center;

            color: var(--muted);

            font-size: 13px;

            line-height: 1.6;
        }


        .register-link {

            color: var(--gold-light);

            font-weight: 800;

            text-decoration: none;

            margin-left: 4px;
        }


        .register-link:hover {
            text-decoration: underline;
        }


        body.light .register-link {
            color: var(--gold-dark);
        }


        /* =========================================================
           PIED DE PAGE
        ========================================================= */

        .footer {

            margin-top: 18px;

            text-align: center;

            color: var(--muted);

            font-size: 10px;

            opacity: 0.75;
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 520px) {

            body {
                padding: 20px 14px;
            }


            .login-card {

                padding:
                    34px 22px 27px;

                border-radius: 18px;
            }


            .brand-logo {

                width: 68px;
                height: 68px;

                border-radius: 18px;
            }


            .brand-name {
                font-size: 20px;
            }


            .title {
                font-size: 23px;
            }


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