/* Tout arrive en haut à droite, sauf défi de carrière et palier du passe, centrés selon leur
   nature (pas leur tonalité : ne pas les fusionner avec `success`). La largeur est portée par le
   toast, pas par le conteneur : sinon un enfant centré resterait à droite. */
.vz-toast-container {
  position: fixed;
  top: 1.25rem;
  left: 0;
  right: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.7rem;
  padding-inline: 1.25rem;
  pointer-events: none;
}

.vz-toast {
  position: relative;
  width: min(360px, calc(100vw - 2.5rem));
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-100);
  background: var(--bg-elevated);
  background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  cursor: pointer;
  opacity: 0;
  transform: translateX(120%) scale(0.98);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  pointer-events: auto;
}

.vz-toast.show { opacity: 1; transform: translateX(0) scale(1); }
.vz-toast.hide {
  opacity: 0;
  transform: translateX(120%) scale(0.98);
  transition-timing-function: ease-in;
}

.vz-toast::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--vz-toast-accent, var(--text-60));
}

.vz-toast__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--vz-toast-accent, var(--text-100));
  background: var(--vz-toast-tint, rgba(255, 255, 255, 0.08));
}
.vz-toast__icon svg { width: 15px; height: 15px; display: block; }

.vz-toast__msg {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
}

.vz-toast__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  background: var(--vz-toast-accent, var(--text-60));
  opacity: 0.6;
  animation: vz-toast-progress linear forwards;
}

@keyframes vz-toast-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.vz-toast--success { --vz-toast-accent: var(--green); --vz-toast-tint: var(--green-dim); }

.vz-toast--error   { --vz-toast-accent: var(--color-error); --vz-toast-tint: var(--color-error-dim); }
.vz-toast--warning { --vz-toast-accent: #fb923c; --vz-toast-tint: rgba(251, 146, 60, 0.15); }
.vz-toast--info    { --vz-toast-accent: var(--brand); --vz-toast-tint: var(--brand-dim); }

/* Élément centré : entrée verticale plutôt que glissement depuis le bord droit. */
.vz-toast--challenge,
.vz-toast--tier {
  --vz-toast-accent: var(--green);
  --vz-toast-tint: var(--green-dim);
  align-self: center;
  transform: translateY(-140%) scale(0.98);
}
.vz-toast--challenge.show,
.vz-toast--tier.show { transform: translateY(0) scale(1); }
.vz-toast--challenge.hide,
.vz-toast--tier.hide { transform: translateY(-140%) scale(0.98); }

/* Dès 720 px : entre 480 et 720, l'entrée latérale sortait le toast de l'écran par la droite. */
@media (max-width: 720px) {
  .vz-toast-container {
    top: 1rem;
    padding-inline: 1rem;
    /* Pleine largeur : l'entrée verticale devient la seule lisible, pour tous. */
    align-items: stretch;
  }
  .vz-toast { width: auto; transform: translateY(-140%) scale(0.98); }
  .vz-toast.show { transform: translateY(0) scale(1); }
  .vz-toast.hide { transform: translateY(-140%) scale(0.98); }
  /* `align-self` de l'enfant l'emporterait sur `align-items`. */
  .vz-toast--challenge,
  .vz-toast--tier { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .vz-toast { transition: opacity 0.2s ease; transform: none; }
  .vz-toast.show, .vz-toast.hide { transform: none; }
  .vz-toast__progress { animation: none; }
}

/* Événements live (M_LiveEvents). */
.vz-toast--goal         { --vz-toast-accent: var(--green); --vz-toast-tint: var(--green-dim); }
.vz-toast--substitution { --vz-toast-accent: var(--brand); --vz-toast-tint: var(--brand-dim); }
.vz-toast--yellow_card  { --vz-toast-accent: var(--card-yellow, #eab308); --vz-toast-tint: rgba(234, 179, 8, 0.15); }
.vz-toast--red_card     { --vz-toast-accent: var(--color-error); --vz-toast-tint: var(--color-error-dim); }
.vz-toast__emoji { font-size: 1rem; line-height: 1; }