/* ==================================================================
   MPYBS — page de connexion (kit réutilisable)
   Style commun SERVICES / INVESTIGATIONS / FORMS : palette BLEUE + mode nuit.
   À déposer dans le dossier public de l'app (ex. assets/connexion.css) et à
   lier dans la page de connexion : <link rel="stylesheet" href="assets/connexion.css">
   Aucun style en ligne (compatible CSP stricte : style-src 'self').
   ================================================================== */

:root{
  --accent:#0f66fb;          /* bouton principal, liens, focus */
  --accent-fonce:#0b4fc4;
  --accent-doux:rgba(15,102,251,.09);
  --fond:#f0f3f7;            /* fond de page */
  --carte:#ffffff;           /* fond de la carte */
  --bord:#e4e7ec;
  --bord-champ:#cfd4dc;
  --champ:#ffffff;           /* fond des champs */
  --encre:#273244;           /* texte principal */
  --gris:#5f6c85;            /* texte secondaire */
  --erreur:#b42318;  --erreur-fond:#fef3f2;  --erreur-bord:#fecdca;
  --pied-texte:#6b6b6b;
  --bouton-fond:#0f66fb;  --bouton-survol:#0b4fc4;
  --police:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Mode nuit : <html data-theme="auto|clair|sombre"> + light-dark().
   « auto » suit l'appareil. Navigateur trop ancien pour light-dark : reste en clair. */
@supports (color:light-dark(#000,#fff)){
  :root{color-scheme:light}
  :root[data-theme="sombre"]{color-scheme:dark}
  :root[data-theme="auto"]{color-scheme:light dark}
  :root{
    --fond:light-dark(#f0f3f7,#0f1620);
    --carte:light-dark(#ffffff,#18212d);
    --champ:light-dark(#ffffff,#111a24);
    --bord:light-dark(#e4e7ec,#2b3747);
    --bord-champ:light-dark(#cfd4dc,#3d4b5c);
    --encre:light-dark(#273244,#e6ebf2);
    --gris:light-dark(#5f6c85,#a3aec0);
    --accent:light-dark(#0f66fb,#78a9ff);
    --accent-fonce:light-dark(#0b4fc4,#a4c5ff);
    --erreur:light-dark(#b42318,#ff8b81);  --erreur-fond:light-dark(#fef3f2,#3a1715);  --erreur-bord:light-dark(#fecdca,#6e2b25);
    --pied-texte:light-dark(#6b6b6b,#8f9bad);
    --bouton-fond:light-dark(#0f66fb,#2f7bff);  --bouton-survol:light-dark(#0b4fc4,#4f93ff);
  }
}

*{box-sizing:border-box}
:focus-visible{outline:3px solid rgba(15,102,251,.45);outline-offset:2px}

body.page-login{margin:0;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:24px;background:var(--fond);color:var(--encre);font-family:var(--police);font-size:14px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.carte-login{width:100%;max-width:380px;background:var(--carte);border:1px solid var(--bord);border-radius:16px;
  padding:28px 26px;display:flex;flex-direction:column;gap:18px}

.login-marque{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.login-marque img{width:56px;height:56px;object-fit:contain}
.login-marque strong{font-size:20px}
.login-marque small{color:var(--gris)}

.carte-login form{display:flex;flex-direction:column;gap:14px;margin:0}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ label{font-weight:600;font-size:13.5px}
input[type=text],input[type=password],input[type=number]{
  width:100%;min-height:46px;padding:0 12px;border:1px solid var(--bord-champ);border-radius:12px;
  background-color:var(--champ);color:var(--encre);font:inherit;font-size:16px}
input:focus{border-color:var(--accent)}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:46px;padding:0 22px;
  border:0;border-radius:12px;background:var(--bouton-fond);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.bouton:hover{background:var(--bouton-survol)}

.alerte{display:flex;align-items:center;gap:8px;margin:0;padding:12px 14px;border-radius:12px;font-weight:600}
.alerte.erreur{background:var(--erreur-fond);color:var(--erreur);border:1px solid var(--erreur-bord)}

/* La case « Faire confiance » et la note « code non requis » sont CENTRÉES sous les champs. */
.case-ligne{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:400;font-size:13.5px;cursor:pointer}
.case-ligne input{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.note{margin:0;color:var(--gris);font-size:13px;text-align:center}

.login-pied{text-align:center;color:var(--pied-texte);font-size:12px}