/* Page de connexion de la démo — mêmes couleurs que l'interface (RuncaisseTab). */
:root { --fond: #505050; --panneau: #39393A; --texte: #fff; --discret: #a9a9a9; --valider: #4CAF50; --valider-appui: #3A833D;
  --erreur: #ffb3ab; color-scheme: dark; font-family: Roboto, "Segoe UI", system-ui, sans-serif; }
* { box-sizing: border-box; }
body.connexion { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 16px;
  background: var(--fond); color: var(--texte); }
.carte { width: min(100%, 380px); background: var(--panneau); border-radius: 14px; padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.4); }
.carte h1 { margin: 0; font-size: 1.6rem; }
.sous-titre { margin: .25rem 0 1.25rem; color: var(--discret); }
form { display: grid; gap: .4rem; }
label { font-size: .9rem; margin-top: .5rem; }
input { min-height: 46px; border: 1px solid #666; border-radius: 10px; background: #2b2b2c; color: var(--texte);
  padding: 0 .8rem; font: inherit; }
input:focus-visible { outline: 3px solid #40C4FF; outline-offset: 1px; border-color: transparent; }
button { margin-top: 1rem; min-height: 50px; border: 0; border-radius: 999px; background: var(--valider); color: #fff;
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; }
button:active { background: var(--valider-appui); }
button:focus-visible { outline: 3px solid #40C4FF; outline-offset: 2px; }
.erreur { color: var(--erreur); margin: .5rem 0 0; }
.note { margin: 1.25rem 0 0; font-size: .85rem; color: var(--discret); line-height: 1.4; }