/* Styles propres au template — le design system (copié du SSO) fournit les
   variables et composants ; ici seulement l'habillage spécifique. */

.app-navbar {
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
}

.app-main { max-width: 1100px; }

.btn-nav-pill {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}
.btn-nav-pill:hover { background: rgba(255, 255, 255, 0.22); }

.user-badge {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--clr-primary-light); color: var(--clr-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem;
}

/* Wizard */
.setup-steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.setup-step {
  flex: 1; text-align: center; padding: 0.6rem 0.25rem;
  border-radius: var(--r-md, 8px); font-size: 0.8rem; font-weight: 600;
  background: #f1f5f9; color: #64748b;
}
.setup-step.active { background: var(--clr-primary, #4f46e5); color: #fff; }
.setup-step.done   { background: var(--clr-success-light, #dcfce7); color: var(--clr-success, #16a34a); }

.check-line { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }

code.copy-value {
  background: #f1f5f9; padding: 0.3rem 0.6rem; border-radius: 6px;
  font-size: 0.85rem; color: #334155; user-select: all;
}

/* ── RDV rapide en deux temps : panneau qui glisse depuis la gauche ─────── */
.rdv-viewport { overflow: hidden; }
.rdv-panels {
  display: flex; width: 200%;
  transition: transform 0.35s ease;
}
.rdv-panel { width: 50%; flex-shrink: 0; padding-right: 2px; padding-left: 2px; }
/* L'étape 2 vit À GAUCHE de l'étape 1 dans le flux : au départ on regarde
   l'étape 1 (décalé de -50%), continuer ramène à 0 → l'étape 2 ARRIVE DE LA
   GAUCHE (demande Maxime). */
.rdv-panels { flex-direction: row-reverse; transform: translateX(-50%); }
.rdv-card.rdv-on-step2 .rdv-panels { transform: translateX(0); }