/* =====================================================================
   BackOffice-IN — Connexion / Réinitialisation
   DA "Operation Commercial" : Inter, bleu marine #102c79.
   Palette
     --navy-700  #0a1f5a   fond profond
     --navy-600  #102c79   primaire
     --navy-500  #143394   primaire clair / dégradé
     --blue-link #2a57bf   liens
     --green     #37a516   succès (accent pharmacie)
   ===================================================================== */

:root {
  --navy-700: #0a1f5a;
  --navy-600: #102c79;
  --navy-500: #143394;
  --blue-link: #2a57bf;
  --green: #37a516;
  --ink: #102c79;
  --muted: #8793ad;
  --line: #d9e0ee;
  --field-bg: #fafbfe;
  --radius-card: 26px;
  --radius-field: 13px;
  --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--navy-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ---------- Mise en page + décor de fond ---------- */
.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  overflow: hidden;
  background: linear-gradient(150deg, #143394 0%, #102c79 45%, #0a1f5a 100%);
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.bg-blob--a {
  top: -180px; left: -120px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(99, 138, 235, .32), transparent 65%);
}
.bg-blob--b {
  bottom: -220px; right: -140px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(70, 184, 27, .14), transparent 68%);
}
.bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1.3px, transparent 1.5px);
  background-size: 28px 28px;
}

/* ---------- Carte ---------- */
.card {
  position: relative;
  z-index: 2;
  width: 440px;
  max-width: 100%;
  background: #fff;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(2, 8, 40, .5);
}

.card__header {
  position: relative;
  text-align: center;
  padding: 34px 40px 28px;
  background: linear-gradient(160deg, #1a3a8f, #102c79);
  overflow: hidden;
}
.card__header-glow {
  position: absolute;
  top: -90px; right: -70px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 138, 235, .4), transparent 70%);
}
.logo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(2, 8, 40, .32);
}
.logo-badge img {
  width: 48px; height: 48px;
  object-fit: contain;
  display: block;
}
.brand {
  position: relative;
  margin: 14px 0 0;
  font-weight: 800;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.card__body { padding: 32px 40px 38px; }

/* ---------- Écrans ---------- */
.screen { display: none; animation: fade .35s ease; }
.screen.is-active { display: block; }

@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.screen__head { text-align: center; margin-bottom: 24px; }
.screen__head h2 {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
}
.screen__head p {
  margin: 0 auto;
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}
.screen__head-narrow { max-width: 300px; }

/* ---------- Champs ---------- */
.field {
  position: relative;
  margin-bottom: 14px;
}
.field__icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  color: var(--muted);
}
.field__icon svg { width: 20px; height: 20px; }

.field input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  padding: 0 16px 0 44px;
  font: 500 14px var(--font);
  color: var(--ink);
}
.field--pwd input { padding-right: 48px; }
.field input::placeholder { color: #8c98b1; }
.field input:focus {
  outline: none;
  border-color: #7aa6da;
  box-shadow: 0 0 0 3px rgba(122, 166, 218, .22);
  background: #fff;
}

.field__eye {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.field__eye svg { width: 22px; height: 22px; }

/* ---------- Ligne checkbox / lien ---------- */
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 22px;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 13px var(--font);
  color: #48608e;
  cursor: pointer;
}
.checkbox input {
  width: 16px; height: 16px;
  accent-color: var(--navy-600);
  cursor: pointer;
}
.link {
  font: 600 13px var(--font);
  color: var(--blue-link);
  text-decoration: none;
}
.link:hover { text-decoration: underline; }
.link--muted { color: #6176af; }

.center { text-align: center; }

/* ---------- Boutons ---------- */
.btn {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 999px;
  font: 700 15px var(--font);
  letter-spacing: .2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: filter .15s ease, transform .08s ease, background .15s ease;
}
.btn:disabled { opacity: .8; cursor: default; }

.btn--primary {
  background: linear-gradient(135deg, #143394, #102c79);
  color: #fff;
  box-shadow: 0 14px 28px rgba(16, 44, 121, .35);
}
.btn--primary:not(:disabled):hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn--ghost {
  height: 48px;
  background: #f7faff;
  border: 1px solid #d2e1f3;
  color: #2f4f80;
  font-size: 14px;
}
.btn--ghost:not(:disabled):hover { background: #eef3ff; }

/* ---------- Spinner ---------- */
.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin .7s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Alerte ---------- */
.alert {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fdecec;
  border: 1px solid #f7c9c9;
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 14px;
  font: 600 12.5px/1.3 var(--font);
  color: #c0392b;
}
.alert[hidden] { display: none; }
.alert::before {
  content: "";
  flex: none;
  width: 16px; height: 16px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Variante succès (message Django de réussite) */
.alert--ok {
  background: #e7f7e3;
  border-color: #bfe6b2;
  color: #2c7a1b;
}
.alert--ok::before {
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c7a1b' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Icônes de statut ---------- */
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  margin-bottom: 18px;
  animation: pop .4s ease;
}
.status-icon svg { width: 34px; height: 34px; }
.status-icon--info { background: #eaf2ff; color: var(--blue-link); }
.status-icon--ok { background: #e7f7e3; color: var(--green); }

@keyframes pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- OTP ---------- */
.otp-row {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
}
.otp-cell {
  width: 46px; height: 56px;
  text-align: center;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-field);
  background: var(--field-bg);
  font: 700 22px var(--font);
  color: var(--ink);
  padding: 0;
}
.otp-cell:focus {
  outline: none;
  border-color: var(--blue-link);
  box-shadow: 0 0 0 3px rgba(42, 87, 191, .18);
  background: #fff;
}
.otp-row.shake { animation: shake .4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* ---------- Jauge de robustesse ---------- */
.strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.strength__track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #eaeef6;
  overflow: hidden;
}
.strength__bar {
  height: 100%;
  width: 6%;
  border-radius: 999px;
  background: var(--line);
  transition: width .25s ease, background .25s ease;
}
.strength__label {
  font: 700 11px var(--font);
  color: var(--muted);
  min-width: 42px;
  text-align: right;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .card__body { padding: 28px 24px 32px; }
  .card__header { padding: 30px 24px 26px; }
  .otp-cell { width: 42px; height: 52px; font-size: 20px; }
}