/* Sign-in page: one centred column on a plain page. Colours are the --lg-* tokens at the top of app.css (light, dark, dark by system). */
body, .app.bare { background:var(--lg-bg); }
.app.bare .contentbar .logo { display:none; }
.app.bare .contentbar { justify-content:center; }
.app.bare .pad { padding:16px; display:flex; flex-direction:column; justify-content:flex-start; padding-top:60px; min-height:calc(100dvh / var(--ui-scale)); box-sizing:border-box; }
.app.bare .contentbar { margin-bottom:10px; }
.app.bare main { width:100%; }
/* A static page on a tall enough screen: nothing scrolls. Below that height the page scrolls from the top, so nothing is ever cut off. */
@media (min-height: 800px) { html { height:100dvh; overflow:hidden; } body, .app.bare { height:calc(100dvh / var(--ui-scale)); overflow:hidden; } }
.login { width:100%; max-width:340px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; color:var(--lg-text); }
.login h1 { font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.2; text-align:center; margin:0 0 48px; color:var(--lg-text); }
.login-card { padding:24px; font-size:14px; border:1px solid var(--lg-card-border); border-radius:16px; background:var(--lg-card); box-shadow:0 1px 2px rgba(0,0,0,.04); }
.login-home { display:block; width:72px; margin:0 auto 14px; border-radius:16px; text-decoration:none; }
.login-home img { display:block; width:100%; height:auto; }
.login-stack { display:flex; flex-direction:column; gap:12px; }
.login-btn { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; height:36px; padding:0 12px; border:1px solid var(--lg-border); border-radius:8px;
  background:var(--lg-btn); color:var(--lg-text); font:inherit; font-size:14px; text-decoration:none; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
.login-btn:hover { border-color:var(--lg-grey); text-decoration:none; }
.login-btn svg { flex:none; }
.login a:focus-visible, .login button:focus-visible, .login input:focus-visible { outline:2px solid var(--link); outline-offset:2px; }
.login-form { display:flex; flex-direction:column; }
.login-sep { display:flex; align-items:center; gap:12px; margin:18px 0; font-size:13px; color:var(--lg-grey); }
.login-sep::before, .login-sep::after { content:""; flex:1; height:1px; background:var(--lg-border); }
.login-legal { font-size:13px; line-height:1.45; color:var(--lg-grey); text-align:center; margin:36px 0 0; }
.login-legal a { color:var(--lg-grey); text-decoration:underline; }
.login-form label { font-size:13px; font-weight:500; color:var(--lg-label); margin:0 0 6px; }
.login-form input:not([type="hidden"]) { height:36px; min-height:36px; padding:0 12px; margin-bottom:14px; border:1px solid var(--lg-border); border-radius:8px; background:var(--lg-btn); color:var(--lg-text); font:inherit; font-size:14px; width:100%; }
.login-primary { display:flex; align-items:center; justify-content:center; width:100%; height:36px; min-height:36px; margin-top:4px; border:0; border-radius:8px; background:var(--lg-primary); color:var(--lg-onprimary); font:inherit; font-size:14px; font-weight:500; cursor:pointer; }
.login-primary:hover { opacity:.88; }
.login-note { font-size:13px; line-height:1.45; color:var(--lg-grey); text-align:center; margin:14px 0 0; }
.login .err { text-align:center; margin:0; }
.login-js .login-pw:not(.open) { display:none; }
.login-demo { margin-top:60px; text-align:center; }
.login-demo p { font-size:14px; color:var(--lg-label); margin:0 0 8px; }
.login-secondary { display:inline-flex; align-items:center; justify-content:center; height:36px; min-height:36px; padding:0 16px; border:1px solid var(--lg-border); border-radius:8px; background:transparent;
  color:var(--lg-text); font-size:14px; font-weight:500; text-decoration:none; transition:border-color .15s ease, background-color .15s ease; }
.login-secondary:hover { border-color:var(--lg-grey); background:var(--lg-btn); text-decoration:none; }
.login-foot { margin-top:26px; text-align:center; }
.login-foot p { font-size:13px; color:var(--lg-grey); margin:0 0 8px; }
.login-lang { display:flex; justify-content:center; gap:14px; }
.login-lang button { background:none; border:0; padding:4px 2px; font:inherit; font-size:13px; color:var(--lg-grey); cursor:pointer; }
.login-lang button:hover { color:var(--lg-text); }
.login-lang button[aria-current="true"] { color:var(--lg-text); font-weight:700; cursor:default; }
@media (prefers-reduced-motion: reduce) { .login-btn, .login-secondary { transition:none; } }
/* Short screens (a small laptop): somewhat tighter, but still airy; below the height that truly fits, the page scrolls instead of cramming. */
@media (max-height: 860px) {
  .login-home { margin-bottom:14px; }
  .login h1 { font-size:20px; margin-bottom:46px; }
  .login-card { padding:20px 24px; }
  .login-sep { margin:18px 0; }
  .login-form input:not([type="hidden"]) { margin-bottom:12px; }
  .login-legal { margin-top:30px; }
  .login-demo { margin-top:56px; }
  .login-foot { margin-top:22px; }
}
/* Very short screens (1366x700): the block moves up and the gap under the card shrinks a little. */
@media (max-height: 740px) {
  .app.bare .pad { padding-top:22px; }
  .login-home { margin-bottom:11px; }
  .login h1 { margin-bottom:30px; }
  .login-demo { margin-top:40px; }
  .login-foot { margin-top:16px; }
}
/* Phones: 20px side margins, a tighter card, inputs at 16px (iOS zooms below that). Never overflow:hidden here: with the on-screen keyboard
   open the page must stay scrollable so « Se connecter » can always be reached. It fits without scrolling in its first state on 360x740,
   375x667 and 390x844; the password field or an error message may need a small scroll on the shortest screens. */
@media (max-width: 599px) {
  html, body, .app.bare { height:auto; overflow:visible; }
  .app.bare .pad { padding:12px 20px; }
  .app.bare .contentbar { margin-bottom:6px; }
  .app.bare .demo-pill { padding:5px 12px; font-size:12px; gap:6px; }
  .login-home { width:40px; margin-bottom:12px; }
  .login-card { padding:20px; }
  .login h1 { font-size:19px; margin-bottom:14px; }
  .login-stack { gap:10px; }
  .login-sep { margin:12px 0; }
  .login-form input:not([type="hidden"]) { font-size:16px; margin-bottom:10px; }
  .login-form label { margin-bottom:4px; }
  .login-note, .login-legal { margin-top:10px; }
  .login-demo { margin-top:14px; }
  .login-demo p { margin-bottom:6px; }
  .login-foot { margin-top:10px; }
  .app.bare .flash { padding:6px 12px; margin-bottom:6px; }
}