/* Écran de connexion. Page autonome : elle n'hérite pas de _layout,
   dont l'en-tête suppose un technicien connecté. */
    body { font-family: var(--font); background: var(--chip-2); color: var(--fg);
           display: grid; place-items: center; min-height: 100vh; margin: 0; }
    /* Halo discret derrière la carte, pour que l'écran ne soit pas un aplat. */
    body::before { content: ''; position: fixed; inset: 0; pointer-events: none;
                   background: radial-gradient(60rem 32rem at 50% -12%,
                               var(--halo), transparent 70%); }
    /* 380 px, comme la refonte. La carte flotte sur un fond ARDOISE CLAIR et
       non blanc : c'est le seul écart de valeur qui la fait exister, et c'est
       la même règle que sur les écrans de l'application. */
    .card { background: var(--elev); padding: 2rem; border-radius: var(--r-3);
            width: min(380px, calc(100vw - 2rem));
            border: 1px solid var(--line); box-shadow: var(--shadow-3);
            position: relative; }
    .brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
    .brand .i { width: 1.9rem; height: 1.9rem; color: var(--accent); }
    h1 { margin: 0; font-size: var(--fs-4); }
    .sub { color: var(--fg-3); font-size: var(--fs-2); margin-bottom: 1.5rem; }
    label { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-1);
            margin: .75rem 0 .25rem; color: var(--fg-2); }
    label .i { width: .9em; height: .9em; color: var(--fg-4); }
    input { width: 100%; padding: .6rem; border-radius: var(--r-1); border: 1px solid var(--line-2);
            background: var(--field-bg); color: var(--fg); box-sizing: border-box;
            font-family: inherit; }
    input:focus { outline: none; border-color: var(--line-3); }
    /* Pleine largeur et 38 px de haut : sur cet écran il n'y a qu'un geste, il
       n'a donc aucune raison d'être plus petit que le champ qu'il valide. */
    button { width: 100%; margin-top: 1.35rem; height: 38px; padding: 0;
             border: 0; border-radius: var(--r-1);
             background: var(--accent-btn); color: var(--on-accent); font-weight: 600; cursor: pointer;
             display: inline-flex; align-items: center; justify-content: center;
             gap: .45rem; font-size: var(--fs-3); font-family: inherit; }
    button:hover { background: var(--accent-btn-hi); }
    button .i { width: 1em; height: 1em; }
    .flash { background: var(--danger-bg); color: var(--danger); padding: .5rem .75rem; border-radius: var(--r-1);
             font-size: var(--fs-2); margin-bottom: 1rem; display: flex; gap: .5rem;
             align-items: flex-start; }
    .flash .i { width: 1em; height: 1em; flex: none; margin-top: .12em; }
    .i { vertical-align: -.14em; flex: none; }
    .theme-toggle { position: fixed; top: 1rem; right: 1rem; background: none;
                    border: 1px solid var(--line-2); color: var(--fg-3); cursor: pointer;
                    border-radius: var(--r-1); padding: .4rem .5rem; display: inline-flex;
                    width: auto; margin: 0; }
    .theme-toggle:hover { color: var(--fg); border-color: var(--line-3); background: none; }
    :root[data-theme="light"] .only-light,
    :root[data-theme="dark"] .only-dark { display: inline-flex; }
    :root[data-theme="light"] .only-dark,
    :root[data-theme="dark"] .only-light { display: none; }

    /* Ce que la page est, sous le bouton : discret, mais pas absent. */
    .note { margin: .9rem 0 0; font-size: var(--fs-0); color: var(--fg-4);
            text-align: center; }