/* ============================================================
   Déploiement 2.0 — Règles de coque (shell + responsive)
   Complète tokens.css / mantu.css (design system repris tel quel).
   ============================================================ */

[x-cloak] { display: none !important; }

.app-hamb { display: none; }

.app-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 14, 24, 0.45);
  z-index: 5500;
}

/* Sous 900px : la barre latérale devient un tiroir (hamburger + overlay). */
@media (max-width: 900px) {
  .app-shell aside {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 6000;
    transform: translateX(-100%);
    transition: transform 0.26s ease;
  }
  .app-shell.nav-open aside {
    transform: translateX(0);
    box-shadow: 0 0 70px rgba(8, 14, 24, 0.5);
  }
  .app-hamb { display: inline-flex !important; }
}

@media (min-width: 901px) {
  .app-overlay { display: none !important; }
}

/* Écran de connexion : masque le panneau de marque sur petit écran. */
@media (max-width: 820px) {
  .auth-brand { display: none !important; }
}

/* Champs de saisie partagés (login, MFA, formulaires de coque). */
.d2-field {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14.5px;
  font-family: var(--font-ui);
  outline: none;
}
.d2-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}