:root{
            --blue:#14253A;
            --blue-2:#1e3a5f;
            --green:#4CAF50;
            --green-dark:#388E3C;
            --bg:#f5f7f9;
            --text:#14253A;
            --muted:#718096;
            --border:#e3e8ed;
            --danger:#dc3545;
        }

        *{box-sizing:border-box}

        html,body{margin:0;min-height:100%;}

        body{
            font-family:Inter,"Segoe UI",Arial,sans-serif;
            background:var(--bg);
            color:var(--text);
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:24px;
        }

        .login-shell{
            width:min(960px,100%);
            min-height:570px;
            background:#fff;
            border-radius:22px;
            overflow:hidden;
            display:grid;
            grid-template-columns:42% 58%;
            box-shadow:0 18px 55px rgba(20,37,58,.12);
            border:1px solid rgba(20,37,58,.06);
        }

        /* Panneau gauche */
        .brand-panel{
            background:var(--blue);
            color:#fff;
            padding:48px 42px;
            position:relative;
            overflow:hidden;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }

        .brand-panel:before{
            content:"";
            position:absolute;
            width:300px;
            height:300px;
            border-radius:50%;
            right:-170px;
            top:-120px;
            background:rgba(76,175,80,.12);
        }

        .brand-panel:after{
            content:"";
            position:absolute;
            width:230px;
            height:230px;
            border-radius:50%;
            left:-150px;
            bottom:-120px;
            background:rgba(255,255,255,.035);
        }

        .brand-content,.security-note{
            position:relative;
            z-index:1;
        }

        .logo{
            width:min(170px,100%);
            height:auto;
            display:block;
            object-fit:contain;
            margin-bottom:42px;
        }

        .brand-kicker{
            color:#8edb91;
            text-transform:uppercase;
            letter-spacing:1.8px;
            font-size:11px;
            font-weight:800;
            margin-bottom:13px;
        }

        .brand-panel h1{
            font-size:31px;
            line-height:1.15;
            letter-spacing:-.7px;
            margin:0 0 15px;
            max-width:330px;
        }

        .brand-panel p{
            color:#b9c6d3;
            font-size:14px;
            line-height:1.7;
            max-width:340px;
            margin:0;
        }

        /* Formulaire */
        .form-panel{
            padding:46px 54px;
            display:flex;
            align-items:center;
        }

        .form-content{
            width:100%;
            max-width:470px;
            margin:auto;
        }

        .mobile-logo{
            display:none;
            width:150px;
            height:auto;
            margin:0 auto 26px;
        }

        .topline{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:15px;
            margin-bottom:9px;
        }

        .topline h2{
            margin:0;
            font-size:28px;
            letter-spacing:-.5px;
            color:var(--blue);
        }

        .home-link{
            width:38px;
            height:38px;
            border:1px solid var(--border);
            border-radius:10px;
            display:grid;
            place-items:center;
            text-decoration:none;
            color:#607080;
            font-size:19px;
            transition:.2s;
        }

        .home-link:hover{
            border-color:#b9dcb9;
            color:var(--green-dark);
            background:#f4faf4;
        }

        .intro{
            margin:0 0 28px;
            color:var(--muted);
            font-size:13px;
            line-height:1.6;
        }

        .field{
            margin-bottom:18px;
        }

        label{
            display:block;
            margin-bottom:7px;
            color:#334155;
            font-size:12px;
            font-weight:700;
        }

        .input-wrap{position:relative}

        input{
            width:100%;
            height:48px;
            padding:0 14px;
            border:1px solid var(--border);
            border-radius:10px;
            background:#fff;
            color:var(--text);
            font-size:14px;
            outline:none;
            transition:.2s;
        }

        input:focus{
            border-color:#8ccf8f;
            box-shadow:0 0 0 3px rgba(76,175,80,.10);
        }

        input::placeholder{color:#a3adb8}

        .password-input{padding-right:48px}

        .toggle-password{
            position:absolute;
            right:12px;
            top:50%;
            transform:translateY(-50%);
            border:0;
            background:transparent;
            width:42px;
            height:42px;
            display:grid;
            place-items:center;
            color:#64748b;
            cursor:pointer;
            padding:0;
            margin:0;
        }

        .toggle-password:hover{color:var(--blue)}

        .forgot{
            text-align:right;
            margin-top:-7px;
            margin-bottom:22px;
        }

        .forgot a{
            color:#337ab7;
            font-size:12px;
            text-decoration:none;
        }

        .forgot a:hover{text-decoration:underline}

        .submit-btn{
            width:100%;
            height:49px;
            border:0;
            border-radius:10px;
            background:#22C55E;
            color:#fff;
            font-size:14px;
            font-weight:800;
            cursor:pointer;
            transition:.2s;
        }

        .submit-btn:hover{background:#16A34A}

        .submit-btn:disabled{
            opacity:.65;
            cursor:not-allowed;
        }


        .attempt-message{
            display:flex;
            align-items:center;
            gap:10px;
            padding:11px 13px;
            margin:-7px 0 18px;
            border-radius:10px;
            font-size:12px;
            line-height:1.45;
        }

        .attempt-message.warning{
            color:#8a5a13;
            background:#fff8ed;
            border:1px solid #f1d7a8;
        }

        .attempt-message.error{
            color:#b4232f;
            background:#fff5f6;
            border:1px solid #f2c7cc;
        }

        .attempt-message i{
            font-size:15px;
            flex:none;
        }

        .lock-message{
            display:flex;
            align-items:flex-start;
            gap:12px;
            margin:-7px 0 20px;
            padding:13px 14px;
            border-radius:10px;
            background:#fff8ed;
            border:1px solid #f1d7a8;
            color:#8a5a13;
            font-size:12px;
            line-height:1.55;
        }

        .lock-message > i{
            margin-top:2px;
            font-size:16px;
            flex:none;
        }

        .lock-message strong{
            display:block;
            margin-bottom:3px;
        }

        .lock-message b{
            font-variant-numeric:tabular-nums;
        }

        .toggle-password i{
            font-size:17px;
            pointer-events:none;
        }
@media(max-width:760px){
            .register-box{
                margin-top:14px;
            }
        }

        .attempt-counter{
            text-align:center;
            color:#8793a0;
            font-size:11px;
            margin-top:9px;
        }

        .message{
            margin-top:16px;
            padding:12px 14px;
            border-radius:10px;
            font-size:12px;
            line-height:1.5;
            border:1px solid #f2c7cc;
            background:#fff5f6;
            color:#b4232f;
        }

        .lock-message{
            margin-bottom:18px;
            padding:13px 14px;
            border-radius:10px;
            background:#fff8ed;
            border:1px solid #f1d7a8;
            color:#8a5a13;
            font-size:12px;
            line-height:1.55;
        }

        .lock-message strong{
            display:block;
            margin-bottom:3px;
        }

        .footer-info{
            margin-top:26px;
            padding-top:18px;
            border-top:1px solid #edf0f2;
            text-align:center;
            color:#98a3ae;
            font-size:10px;
            line-height:1.7;
        }

        .footer-info a{
            color:#657789;
            text-decoration:none;
        }

        .footer-info a:hover{text-decoration:underline}

        @media(max-width:760px){
            body{
                padding:0;
                align-items:stretch;
                background:#fff;
            }

            .login-shell{
                min-height:100vh;
                border-radius:0;
                box-shadow:none;
                border:0;
                display:block;
            }

            .brand-panel{
                min-height:235px;
                padding:27px 24px 25px;
                justify-content:flex-start;
            }

            .brand-panel .logo{display:none}

            .mobile-logo{
                display:block;
            }

            .brand-kicker{font-size:10px;margin-bottom:8px}

            .brand-panel h1{
                font-size:25px;
                margin-bottom:8px;
            }

            .brand-panel p{
                font-size:12px;
                line-height:1.55;
            }

            .security-note{
                display:none;
            }

            .form-panel{
                padding:31px 23px 28px;
                display:block;
            }

            .form-content{max-width:500px}

            .topline h2{font-size:24px}

            .intro{margin-bottom:24px}
        }

        @media(max-width:420px){
            .brand-panel{min-height:220px}
            .form-panel{padding:28px 19px 24px}
        }


    

        /* Bouton d'inscription — uniquement dans la partie sombre */
        .register-dark{
            margin-top:28px;
            position:relative;
            z-index:2;
        }

        .register-dark p{
            margin:0 0 11px;
            color:#d7e0e8;
            font-family:Arial, Helvetica, sans-serif;
            font-size:13px;
            line-height:1.5;
        }

        .register-dark-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-width:135px;
            height:43px;
            padding:0 20px;
            border:0;
            border-radius:9px;
            background:#22C55E;
            color:#ffffff !important;
            text-decoration:none;
            font-family:Arial, Helvetica, sans-serif;
            font-size:13px;
            font-weight:700;
            box-shadow:0 5px 14px rgba(0,0,0,.18);
            transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        .register-dark-btn i{
            font-size:14px;
        }

        .register-dark-btn:hover{
            background:#16A34A;
            color:#ffffff !important;
            transform:translateY(-1px);
            box-shadow:0 7px 17px rgba(0,0,0,.22);
        }

        .register-dark-btn:active{
            transform:translateY(0);
        }

        .brand-kicker{
            font-family:Arial, Helvetica, sans-serif !important;
        }

        /* Police nette pour le libellé ESPACE SÉCURISÉ */
        .secure-label,
        .security-label,
        .hero-badge,
        .badge,
        .eyebrow{
            font-family:Arial, Helvetica, sans-serif !important;
            letter-spacing:1.2px;
        }


        @media(max-width:760px){
            .register-dark{
                margin-top:18px;
            }
            .register-dark-btn{
                width:100%;
                max-width:180px;
            }
        }


/* Comptabilité : message de réussite (déconnexion) */
.attempt-message.success{ background:#f3faf3; border:1px solid #c6e3c8; color:#256c2b; }