/* Lead Desk unique — ce que l'écran commun ajoute aux styles repris des deux applications */

/* Thème SerruDesk : encre et laiton, comme l'application d'origine */
body[data-metier="serrurerie"] {
  --green: #12181f;
  --green-deep: #000000;
  --green-soft: #FDF3D6;
}

[hidden] { display: none !important; }
.pre { white-space: pre-line; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .04em; }
.ecran-charge { padding: 48px 16px; text-align: center; color: var(--soft); }

/* Connexion par étapes : mot de passe, code, enrôlement */
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.login-card .check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--soft); text-align: left; }
.secret-totp { background: var(--bg); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 12px; font-size: 15px; word-break: break-all; }
.codes-secours { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 14px; margin: 12px 0; text-align: center; }
.codes-secours span { background: var(--bg); border-radius: 8px; padding: 6px 4px; font-size: 14px; }
.etapes { display: flex; gap: 6px; justify-content: center; margin: 10px 0 2px; }
.etapes span { width: 22px; height: 4px; border-radius: 2px; background: var(--border); }
.etapes span.on { background: var(--green); }

/* Confirmation d'une action définitive */
.confirmation { position: fixed; inset: 0; z-index: 60; background: rgba(20, 22, 24, .45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.confirmation .card { width: 100%; max-width: 460px; margin: 0 0 env(safe-area-inset-bottom); }
.confirmation .actions { margin-top: 14px; }
@media (min-width: 640px) { .confirmation { align-items: center; } }

/* Message furtif après une action */
.toast {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 16px; font-size: 14px; max-width: 92vw;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); animation: rise .35s cubic-bezier(.16, 1, .3, 1) both;
}
.toast.erreur { background: var(--danger); }

/* Transfert à l'acheteur : le lien s'ouvre d'une seconde touche */
.transfert-pret { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Comptes : création et secrets montrés une fois */
.secret-unique { background: #FFF8E6; border: 1px solid #F1D68B; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.secret-unique strong { display: block; margin-bottom: 4px; }
.form-grille { display: grid; gap: 10px; }
.form-grille .sources { display: flex; flex-wrap: wrap; gap: 10px; }
.pastille-role { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green-deep); }

/* Statistiques : barres de répartition */
.repartition { display: grid; gap: 8px; }
.repartition div { display: grid; grid-template-columns: 120px 1fr 42px; gap: 10px; align-items: center; font-size: 13.5px; }
.repartition i { display: block; height: 8px; border-radius: 4px; background: var(--green); }

/* Notification push : état de l'appareil */
.push-etat { margin-top: 4px; }