/* ============ LOGIN ============ */
.seuil-icon-login {border: solid 1px #EE9355; border-radius: 8px}

.login-split{display:flex;min-height:100vh}
.login-art{flex:1 1 46%;background:linear-gradient(155deg,#0E6E61 0%,#0A4F46 60%,#093e37 100%);
    color:#fff;position:relative;overflow:hidden;display:flex;flex-direction:column;
    padding:54px 56px;justify-content:space-between}
.login-art .brandmark{display:flex;align-items:center;gap:11px;position:relative;z-index:2}
.login-art .wordmark{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em}
.login-art .pitch{position:relative;z-index:2;max-width:420px}
.login-art .pitch h1{font-family:var(--display);font-weight:600;font-size:38px;line-height:1.1;letter-spacing:-.025em;margin-bottom:18px}
.login-art .pitch h1 em{font-style:normal;color:var(--warm);text-decoration:underline;text-decoration-color:rgba(238,147,85,.5);text-underline-offset:6px;text-decoration-thickness:2px}
.login-art .pitch p{color:rgba(255,255,255,.72);font-size:15.5px;max-width:380px}
.login-mobile-header .foot, .login-art .foot{position:relative;z-index:2;font-size:12.5px;color:rgba(255,255,255,.5)}

/* thread motif */
.thread-motif{position:absolute;inset:0;z-index:1;opacity:.9}
.login-form-wrap{flex:1 1 54%;display:flex;align-items:center;justify-content:center;padding:40px}
.login-card{width:100%;max-width:380px}
.login-card .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:10px}
.login-card h2{font-family:var(--display);font-size:27px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.login-card .sub{color:var(--ink-soft);margin-bottom:30px;font-size:14.5px}
.login-error{background:var(--danger-soft);color:#b43c23;font-size:13px;font-weight:550;
    padding:11px 13px;border-radius:var(--r-sm);margin-bottom:20px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.field input{width:100%;padding:12px 14px;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
    font-size:14.5px;background:var(--surface);transition:border-color .15s,box-shadow .15s;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3.5px var(--brand-soft)}
.field input::placeholder{color:var(--ink-faint)}
.field .lbl-row{display:flex;justify-content:space-between;align-items:baseline}
.field .lbl-row a{font-size:12.5px;color:var(--brand);text-decoration:none;font-weight:500}
.field .lbl-row a:hover{text-decoration:underline}

.login-sep{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--ink-faint);font-size:12.5px}
.login-sep::before,.login-sep::after{content:"";height:1px;background:var(--line);flex:1}

.login-foot-note{margin-top:26px;font-size:12.5px;color:var(--ink-faint);text-align:center}

/* ============ LOGIN MOBILE ============ */
.login-mobile-header { display: none; }
.login-app-version { display: none;}

@media (max-width: 860px) {
    .login-page {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
    }
    .brendmark-wordmark {
        display: flex;
        flex-direction: row-reverse;
        gap: 20px;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .login-art{display:none}
    .login-mobile-header {
        display: flex;
        flex-direction: column;
        gap: 10px;
        background: linear-gradient(155deg, #0E6E61 0%, #0A4F46 100%);
        color: #fff;
        padding: 25px 25px 10px;
    }
    .login-mobile-header .foot {
        text-align: center;
    }
    .login-app-version { display: block; text-align: center;}
    .login-mobile-header p {
        margin: auto;
        text-align: center;
        width: 60%;
    }
    .login-mobile-header .lmh-motif { position: absolute; inset: 0; z-index: 1; }
    .login-mobile-header .brandmark {
        position: relative; z-index: 2;
        display: flex; align-items: center; gap: 11px; margin-bottom: 16px;
    }
    .login-mobile-header .lmh-icon {
        width: 38px; height: 38px; border-radius: 11px;
        background: rgba(255, 255, 255, .14); display: grid; place-items: center;
    }
    .login-mobile-header .lmh-icon img { width: 22px; height: 22px; }
    .login-mobile-header .wordmark {
        font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.02em;
    }
    .login-mobile-header h1 {
        position: relative; z-index: 2; margin: 0; max-width: 24ch;
        font-family: var(--display); font-weight: 600; font-size: 22px;
        line-height: 1.15; letter-spacing: -.02em;
    }
    .login-mobile-header h1 em {
        font-style: normal; color: var(--warm);
        text-decoration: underline; text-decoration-color: rgba(238, 147, 85, .5);
        text-underline-offset: 5px; text-decoration-thickness: 2px;
    }

    .login-card .sub {
        display: none;
    }
    /* Optionnel : évite un grand vide sous le bandeau (le split force 100vh).
       Retire cette ligne si tu ne veux vraiment pas influer sur .login-split :
       le bandeau fonctionnera quand même, avec un peu de défilement. */
    .login-split { min-height: auto; }
}

@media(max-width:680px) {
    .login-form-wrap {
        padding: 26px
    }

    .login-mobile-header {
        padding: 15px 20px 15px;
    }
    .login-mobile-header p {
        display: none;
    }
}