/* Pages plein écran hors coquille (lot 5) : connexion, activation, Caisse, installation.
   Composants communs dans ui.css ; ici seulement la mise en page de ces pages. */

.ui.auth { min-height: 100vh; min-height: 100dvh; }
.ui .hidden { display: none !important; }

.ui .auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: max(var(--s-5), env(safe-area-inset-top)) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
}
.ui .auth-card {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: var(--s-4);
}
.ui .auth-center { align-items: center; text-align: center; }
.ui .auth-center .btn { margin-top: var(--s-2); }

/* En-tête : logo ou avatar, titre, consigne */
.ui .auth-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; }
.ui .auth-logo { width: 72px; height: 72px; border-radius: 18px; margin-bottom: var(--s-3); object-fit: contain; }
.ui .auth-title { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.2; }
.ui .auth-sub { margin: 0; color: var(--c-muted); }
.ui .auth-avatar {
  width: 64px; height: 64px; border-radius: 50%; margin-bottom: var(--s-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-active-bg); color: var(--c-active);
  font-size: 22px; font-weight: 800;
}
.ui .auth-topbar { display: flex; margin: calc(var(--s-2) * -1) 0 0 calc(var(--s-3) * -1); }
.ui .auth-error { min-height: 1.2em; justify-content: center; text-align: center; margin: 0; }
.ui .auth-actions { display: flex; flex-direction: column; gap: var(--s-3); }
.ui .auth-link { margin: 0; text-align: center; font-size: var(--f-small); color: var(--c-muted); }
.ui .auth-link a { color: var(--c-active); font-weight: 700; }
.ui .auth-note { margin: 0; text-align: center; font-size: var(--f-small); color: var(--c-muted); }
.ui .auth-note strong { color: var(--c-text); }
.ui .auth-state {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
}
.ui .auth-state .icon { width: 32px; height: 32px; }
.ui .auth-state.is-ok { background: var(--c-ok-bg); color: var(--c-ok); }
.ui .auth-state.is-bad { background: var(--c-bad-bg); color: var(--c-bad); }

/* Numéro : « +221 » fixe, puis les 9 chiffres en cours de saisie */
.ui .phone-box {
  display: flex; align-items: baseline; justify-content: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-input); border: 1.5px solid var(--c-input-line); border-radius: var(--r-md);
}
.ui .phone-prefix { font-size: 20px; font-weight: 700; color: var(--c-muted); }
.ui .phone-display { display: flex; gap: var(--s-3); font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ui .pd-g { display: inline-flex; gap: 2px; }
.ui .pd-e { color: var(--c-muted); font-weight: 600; }

/* Code secret : 4 points */
.ui .pin-dots { display: flex; justify-content: center; gap: var(--s-4); padding: var(--s-2) 0; }
.ui .pin-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--c-input-line); background: transparent;
  transition: background-color .12s, border-color .12s;
}
.ui .pin-dot.filled { background: var(--c-action); border-color: var(--c-action); }
.ui .pin-dots.shake { animation: auth-shake .35s var(--ease-out); }
@keyframes auth-shake {
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Clavier à chiffres */
.ui .keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  width: 100%; max-width: 320px; margin: 0 auto;
}
.ui .key {
  min-height: 60px; border-radius: var(--r-md);
  border: 1.5px solid var(--c-line); background: var(--c-card); color: var(--c-text);
  font: inherit; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .12s, transform .1s;
}
.ui .key:hover:not(:disabled) { background: var(--c-line-soft); }
.ui .key:active:not(:disabled) { transform: scale(.96); background: var(--c-active-bg); }
.ui .key:disabled { opacity: .5; cursor: not-allowed; }
.ui .key .icon { width: 24px; height: 24px; color: var(--c-muted); }
.ui .key-del { background: transparent; border-color: transparent; }

/* Clé d'accès de la Caisse */
.ui .ck-input { text-align: center; font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ui .ck-input::placeholder { letter-spacing: normal; font-weight: 600; text-transform: none; }
.ui .auth-card .field-hint { text-align: center; }