/* ============================================================================
   lock.css — the full-screen « Service suspendu » / « Service momentanément
   indisponible » pages (ui/lock-screen.js), shown instead of the app when the
   platform will not open the company. Self-sufficient on tokens.css + base.css.
   ========================================================================== */

.lock {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center;
  padding: var(--s-5) var(--s-4);
  background: var(--bg);
  color: var(--ink);
  overflow: auto;
}
.lock__card {
  width: min(100%, 460px);
  display: grid; justify-items: center; text-align: center; gap: var(--s-3);
  padding: var(--s-8) var(--s-6) var(--s-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.lock__logo .brandmark { width: 200px; }
.lock__icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  margin-top: var(--s-2);
}
.lock__icon--suspended { background: var(--danger-soft); color: var(--danger-ink); }
.lock__icon--unavailable { background: var(--warning-soft); color: var(--warning-ink); }
.lock__title { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-semi); letter-spacing: -.02em; line-height: 1.2; }
.lock__text { margin: 0; font-size: var(--fs-base); line-height: 1.5; max-width: 40ch; }
.lock__hint { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: 44ch; }
.lock__code { display: inline-block; margin-left: var(--s-1); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--muted); }
.lock__contact { margin: 0; font-size: var(--fs-md); }
.lock__contact a { color: var(--accent); text-decoration: none; }
.lock__contact a:hover { text-decoration: underline; }
.lock__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-3); margin-top: var(--s-2); }
.lock__next { font-size: var(--fs-sm); color: var(--muted); min-width: 10ch; }
.lock__bar { width: 190px; height: 3px; border-radius: 99px; background: var(--border); overflow: hidden; margin-top: var(--s-2); }
.lock__bar i { display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--warning); animation: bootSlide 1.15s var(--ease) infinite; }
@media (max-width: 420px) {
  .lock__card { padding: var(--s-6) var(--s-4); }
  .lock__actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lock__bar i { animation: none; width: 100%; } }