/* Login — kit autonome (photo plein écran + box rectangulaire).
   Rebrandable : changez les variables :root et l'image assets/login_bg.jpg. */
:root{
  --fg:#1a2338; --mut:#6a7488; --line:#e1e6ee; --line2:#eef1f6; --panel2:#f6f8fb;
  --brand:#001e60;    /* couleur principale : titre, focus */
  --accent:#9c0a4b;   /* boutons primaires + halo de focus */
  --on:#ee7f01;       /* badge / accent secondaire */
  --fault-bg:#fde7e9;
  /* Fond du login : photo + voile dégradé (par-dessus la photo) */
  --login-photo:url('login_bg.jpg');
  --login-tint:linear-gradient(120deg,rgba(0,30,96,.55),rgba(0,30,96,.15) 45%,rgba(156,10,75,.25));
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:14px/1.5 "Segoe UI",Arial,Helvetica,sans-serif;background:#001e60;color:var(--fg)}
a{color:var(--accent);text-decoration:none}

/* Saisies */
input[type=text],input[type=password],input[type=email]{
  font:inherit;width:100%;color:var(--fg);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:9px 11px;line-height:1.35;height:40px;transition:border-color .12s,box-shadow .12s}
::placeholder{color:#9aa6b8}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(156,10,75,.12)}

/* Boutons */
button,.btn{font:inherit;border:1px solid var(--line);background:#fff;color:var(--fg);border-radius:8px;
  padding:6px 11px;cursor:pointer;font-weight:600;font-size:12.5px;text-decoration:none;display:inline-block}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover{filter:brightness(1.08)}

/* Messages */
.flash{padding:10px 14px;border-radius:8px;font-size:13.5px;font-weight:500}
.flash.ok{background:#eafaf0;color:#0b6b3a;border:1px solid #c7e6d3}
.flash.err{background:var(--fault-bg);color:#a31423;border:1px solid #f3c9cf}
.note{font-size:12.5px;color:var(--mut)}

/* ── Login : photo plein écran + box rectangulaire ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;
  background:#001e60 var(--login-photo) center/cover no-repeat}
.login-wrap::before{content:"";position:absolute;inset:0;background:var(--login-tint)}
.login-box{position:relative;width:520px;max-width:100%;background:#fff;border-radius:12px;
  box-shadow:0 24px 70px rgba(0,0,0,.45);overflow:hidden}
.login-box .lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px;border-bottom:1px solid var(--line2)}
.login-box .lb-head .t{font-weight:700;font-size:15px;color:var(--brand)}
.login-box .lb-head .tag{font-size:11px;font-weight:700;letter-spacing:.5px;color:#fff;background:var(--on);
  padding:3px 9px;border-radius:20px;text-transform:uppercase}
.login-box .lb-body{padding:26px 24px 20px}
.login-box .lb-logo{text-align:center;margin-bottom:22px}
.login-box .lb-logo img{height:40px;width:auto}
.login-box .lb-logo .sub{display:block;color:var(--mut);font-size:12.5px;margin-top:8px}
.field{position:relative;margin-bottom:12px}
.field input{height:46px;padding:12px 42px 12px 14px;font-size:14.5px}
.field .fic{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.5}
.login-box .lb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 24px;border-top:1px solid var(--line2);background:var(--panel2)}
.login-box .lb-foot .hint{font-size:12.5px;color:var(--mut)}
.login-box .lb-foot button{padding:9px 22px;border-radius:22px}
.login-box .lb-err{margin:16px 24px -6px}