/* Écran de connexion.
 *
 * Extrait du `<style>` inline de l'ancienne page : la CSP tolère
 * `'unsafe-inline'` sur les styles, mais un fichier séparé se met en cache avec
 * une empreinte, et se partage avec les autres écrans de connexion Arven le
 * jour où il y en aura plusieurs.
 *
 * Les variables (--navy, --bg, --radius-sm…) viennent de `global.css`.
 */
body { overflow: auto; }

/* La part de largeur du panneau sombre, écrite UNE fois : le formulaire prend
   le reste, et la mention de propriété s'aligne dessus pour se centrer sous la
   marque. Trois valeurs à tenir d'accord si elles étaient recopiées. */
:root { --part-marque: 46%; }

.login-split { display: flex; min-height: 100vh; position: relative; }

.login-brand {
    flex: 1 1 var(--part-marque);
    background: var(--navy);
    color: #fff;
    display: flex;
    padding: 48px;
    position: relative;
    overflow: hidden;
}
.login-brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 90% at 100% 0%, rgba(232, 237, 243, .12), transparent 55%);
    pointer-events: none;
}
/* La marque est le SEUL contenu du panneau, donc elle est centrée — et non
   plus répartie en haut/milieu/bas comme quand elle encadrait un argumentaire. */
.login-brand-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: auto;
    position: relative;
    z-index: 1;
}
.login-brand-logo { width: 72px; height: 72px; }
.login-brand-nom {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
    text-align: center;
}

.login-eyebrow {
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: 11px;
}

/* Hors des deux panneaux dans le HTML, pour n'être écrit qu'une fois : posé
   ici en bas du panneau sombre, remis dans le flux sous le formulaire au
   passage en colonne (voir la requête média). */
.login-copyright {
    position: absolute;
    left: 0;
    /* Largeur du panneau sombre, pas de la page : centrée ainsi, la mention
       tombe sous le logo et le nom plutôt qu'au milieu de l'écran, à cheval
       sur la césure des deux moitiés. */
    width: var(--part-marque);
    bottom: 40px;
    z-index: 2;
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
}

.login-panel {
    flex: 1 1 calc(100% - var(--part-marque));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    background: var(--bg);
}
.login-form { width: 100%; max-width: 352px; }
.login-form .login-eyebrow { color: var(--muted); }
.login-form h1 {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: -.02em;
    color: var(--text);
    margin: 10px 0 6px;
}
.login-sub { font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.login-form label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 6px;
}
.login-form input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 14px;
    margin-bottom: 16px;
    background: var(--alpine-mist);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--text);
    transition: border-color .12s, background .12s;
}
.login-form input:focus { outline: none; background: #fff; border-color: var(--navy); }
.login-form input::placeholder { color: var(--muted); }
.login-form button {
    width: 100%;
    height: 44px;
    margin-top: 8px;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s;
}
.login-form button:hover { background: var(--navy-soft); }
.login-error {
    background: var(--red-bg);
    border: 1px solid #FCA5A5;
    color: #B91C1C;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    margin-bottom: 18px;
    line-height: 1.4;
}
.login-hint { font-size: 11.5px; color: var(--muted); margin: -8px 0 14px; line-height: 1.45; }

/* ⚠️ LE PANNEAU DE MARQUE ÉTAIT `display: none` SOUS 860 px. Sur téléphone —
   c'est-à-dire là où l'outil est le plus consulté — la page de connexion
   n'affichait donc AUCUN logo : un formulaire nu sur fond blanc, sans rien qui
   dise chez qui on se connecte. Il devient un bandeau en haut plutôt que de
   disparaître. */
@media (max-width: 860px) {
    .login-split { flex-direction: column; }
    .login-brand {
        flex: none;
        padding: 34px 22px 30px;
        justify-content: center;
    }
    .login-brand-inner { gap: 14px; }
    .login-brand-logo { width: 52px; height: 52px; }
    .login-brand-nom { font-size: 22px; }

    .login-panel { flex: 1 0 auto; padding: 38px 22px; align-items: flex-start; }

    /* Remise dans le flux, sous le formulaire : en haut, collée au logo, une
       mention de propriété se lirait comme un sous-titre de la marque. */
    .login-copyright {
        position: static;
        width: auto;          /* la largeur du panneau sombre n'a plus de sens en colonne */
        order: 3;
        padding: 4px 22px 26px;
        color: var(--muted);
    }
}
@media (max-width: 480px) { .login-panel { padding: 32px 22px; } }