/* =====================================================================
   Page de connexion (templates/security/login.html.twig)
   S'appuie sur public/css/missions.css (couleurs « bkm- », boutons).
   ===================================================================== */
.bkl { padding: 0; min-height: calc(100vh - var(--bk-nav-h, 72px)); display: flex; }
.bkl-shell { flex: 1; display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .bkl-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Panneau de présentation */
.bkl-side {
  display: none; position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(600px 400px at 100% 0%, rgba(103, 186, 202, .45), transparent 60%),
    radial-gradient(500px 360px at 0% 100%, rgba(224, 36, 36, .35), transparent 60%),
    var(--bkm-ink);
}
@media (min-width: 960px) { .bkl-side { display: flex; align-items: center; } }
.bkl-side-inner { max-width: 440px; margin: 0 auto; padding: 56px 40px; }
.bkl-side-logo { width: 64px; height: 64px; border-radius: 16px; background: #fff; padding: 6px; }
.bkl-side h2 { font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 28px 0 12px; color: #fff; }
.bkl-side p { font-size: 17px; line-height: 1.6; color: #c9cee0; margin: 0 0 28px; }
.bkl-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.bkl-side li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
.bkl-side li span { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .14); font-size: 13px; }

/* Formulaire */
.bkl-main { display: flex; align-items: center; justify-content: center; padding: 48px 20px; }
.bkl-card { width: 100%; max-width: 420px; }
.bkl-card h1 { font-size: 32px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; color: var(--bkm-ink); }
.bkl-sub { font-size: 15px; color: var(--bkm-muted); margin: 0 0 24px; }
.bkl-link { color: var(--bkm-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bkl-link:hover { color: #165d6b; }
.bkl-small { font-size: 13px; }
.bkl-card .bkm-flash { margin: 0 0 18px; }

.bkl-form { display: grid; gap: 18px; }
.bkl-field label { display: block; font-size: 14px; font-weight: 600; color: var(--bkm-ink); margin-bottom: 6px; }
.bkl-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bkl-field input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid #d5dae5; border-radius: 12px; background: #fff;
  font-size: 15px; color: var(--bkm-ink); transition: border-color .15s ease, box-shadow .15s ease;
}
.bkl-field input:focus { outline: none; border-color: var(--bkm-teal-light); box-shadow: 0 0 0 3px rgba(103, 186, 202, .25); }
.bkl-field input.has-error { border-color: var(--bkm-red); }
.bkl-field input.has-error:focus { box-shadow: 0 0 0 3px rgba(224, 36, 36, .18); }
.bkl-error { margin: 6px 0 0; font-size: 13px; font-weight: 500; color: #b91c1c; }

.bkl-password { position: relative; }
.bkl-password input { padding-right: 92px; }
.bkl-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--bkm-bg); color: var(--bkm-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.bkl-toggle:hover { background: #e9ecf3; }

.bkl-remember { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bkm-muted); cursor: pointer; }
.bkl-remember input { width: 18px; height: 18px; accent-color: var(--bkm-teal); }

.bkl-submit { width: 100%; height: 50px; font-size: 16px; border-radius: 12px; }
.bkl-foot { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--bkm-muted); }
.bkl-already { display: grid; gap: 14px; justify-items: center; }

@media (max-width: 959px) {
  .bkl { min-height: 0; }
  .bkl-main { align-items: flex-start; padding: 36px 20px 56px; }
}

/* ---------- Page d'inscription (registration/register.html.twig) ---------- */
.bkl-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .bkl-row { grid-template-columns: 1fr 1fr; } }
.bkl-field ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: #b91c1c; }
.bkl-field:empty, .bkl-field > ul:empty { display: none; }
.bkl-remember a { font-size: inherit; }
.bkl-remember input[type="checkbox"] { flex-shrink: 0; }
.bkl-welcome { display: grid; gap: 4px; margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; background: var(--bkm-green-soft); border-left: 4px solid var(--bkm-green); font-size: 14px; line-height: 1.5; color: #1f4d30; }
.bkl-welcome[hidden] { display: none; }
.bkl-welcome strong { font-size: 15px; color: var(--bkm-green); }

/* ---------- Mot de passe oublié, réinitialisation, vérification de l'e-mail ---------- */
.bkl-hint { margin: 6px 0 0; font-size: 13px; color: var(--bkm-muted); }
.bkl-field > ul { list-style: none; padding: 0; margin: 6px 0 0; font-size: 13px; font-weight: 500; color: #b91c1c; }
.bkl-mail-icon { width: 60px; height: 60px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; background: var(--bkm-teal-soft); color: var(--bkm-teal); font-size: 26px; }
.bkl-mail-icon.is-ok { background: var(--bkm-green-soft); color: var(--bkm-green); }
.bkl-tip { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; background: var(--bkm-amber-soft); font-size: 14px; line-height: 1.5; color: #6b4500; }
.bkl-tip i { margin-top: 2px; color: var(--bkm-amber); }
.bkl-resend { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bkm-line); }
.bkl-resend summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--bkm-teal); text-decoration: underline; margin-bottom: 14px; }
.bkl-resend[open] summary { margin-bottom: 16px; }