/* Toasts Bootstrap — une seule pile, pas de chevauchement */
.wa-bs-toasts {
  position: fixed;
  top: calc(var(--topbar-h, 72px) + 12px);
  right: 16px;
  left: auto;
  z-index: 10060;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
.wa-bs-toasts .toast {
  pointer-events: auto;
  margin-bottom: 8px;
}
.wa-bs-toasts .toast.show {
  opacity: 1;
}

/* Fallback si Bootstrap JS n'est pas encore chargé */
.wa-toast-fallback {
  display: flex;
  align-items: center;
  min-width: 280px;
  padding: 0;
  border-radius: 12px;
  color: #fff;
  background: #0f766e;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.22);
}
.wa-toast-fallback.wa-toast--error,
.wa-toast-fallback.text-bg-danger {
  background: #b91c1c;
}
.wa-toast-row,
.wa-toast-fallback .wa-toast-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 12px 14px;
}
.wa-toast-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.4;
}
.wa-toast-close {
  background: transparent;
  border: 0;
  color: inherit;
  opacity: .8;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

/* Rappel upgrade — toast + bannière profil (sans bootstrap.min.css) */

/* ── Toast invitation offre supérieure ── */
.premium-upgrade-toasts {
  position: fixed;
  top: calc(var(--nav-h, 64px) + 12px);
  right: 16px;
  left: auto;
  z-index: 10055;
  max-width: min(440px, calc(100vw - 24px));
  pointer-events: none;
}

.dashboard-app .premium-upgrade-toasts {
  top: calc(var(--topbar-h, 72px) + 12px);
}

.premium-upgrade-toast {
  pointer-events: auto;
  width: 100%;
  border: 0;
  border-radius: var(--radius-lg, 0.75rem);
  background: linear-gradient(135deg, #0f766e 0%, #4a6287 100%);
  color: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  opacity: 0;
  transform: translateX(calc(100% + 28px)) scale(0.96);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
  will-change: transform, opacity;
}

.premium-upgrade-toast.showing,
.premium-upgrade-toast.show:not(.hide) {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.premium-upgrade-toast.hide {
  opacity: 0;
  transform: translateX(calc(100% + 28px)) scale(0.96);
}

.premium-upgrade-toast__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 14px 14px 16px;
}

.premium-upgrade-toast__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.45;
}

.premium-upgrade-toast__body > i {
  font-size: 1.125rem;
  opacity: 0.95;
}

.premium-upgrade-toast__message {
  display: block;
}

.premium-upgrade-toast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.premium-upgrade-toast__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.premium-upgrade-toast__btn:hover {
  transform: translateY(-1px);
}

.premium-upgrade-toast__btn--primary {
  background: #fff;
  color: #0f766e;
}

.premium-upgrade-toast__btn--ghost {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.premium-upgrade-toast__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.premium-upgrade-toast__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* ── Bannière upgrade (dashboard) ── */
.upgrade-profil-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 24px 20px;
  padding: 18px 20px;
  border-radius: var(--radius-lg, 0.75rem);
  border: 1px solid var(--brand-light, #99f6e4);
  background: linear-gradient(135deg, var(--brand-muted, #f0fdfa) 0%, var(--surface, #fff) 100%);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.06));
}

.upgrade-profil-banner__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand, #0d9488);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.upgrade-profil-banner__content {
  flex: 1;
  min-width: 200px;
}

.upgrade-profil-banner__content h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink, #0f172a);
}

.upgrade-profil-banner__content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.5;
}

.upgrade-profil-banner__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 768px) {
  .premium-upgrade-toasts {
    right: 12px;
    left: 12px;
    max-width: none;
  }

  .upgrade-profil-banner {
    margin: 0 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-upgrade-toast,
  .premium-upgrade-toast.showing,
  .premium-upgrade-toast.show:not(.hide),
  .premium-upgrade-toast.hide {
    transform: none;
    transition: opacity 0.15s ease;
  }
}

/* Sous-ensemble Bootstrap 5 — toasts Django messages (ne pas charger bootstrap.min.css) */
.wa-bs-toasts {
  position: fixed;
  top: calc(var(--nav-h, 64px) + 12px);
  right: 16px;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 24px));
  pointer-events: none;
}
.landing-page .wa-bs-toasts,
.adm-app .wa-bs-toasts {
  top: calc(var(--topbar-h, var(--nav-h, 64px)) + 12px);
}

.wa-bs-toasts .toast {
  --bs-toast-zindex: 10050;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 10px;
  --bs-toast-max-width: 100%;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: #fff;
  --bs-toast-bg: rgba(255, 255, 255, 0.95);
  --bs-toast-border-width: 0;
  --bs-toast-border-color: transparent;
  --bs-toast-border-radius: 0.625rem;
  --bs-toast-box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
  opacity: 0;
  transform: translateX(calc(100% + 28px)) scale(0.96);
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease;
  will-change: transform, opacity;
}

.wa-bs-toasts .toast.showing,
.wa-bs-toasts .toast.show:not(.hide) {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.wa-bs-toasts .toast.hide {
  opacity: 0;
  transform: translateX(calc(100% + 28px)) scale(0.96);
  transition:
    transform 0.34s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.28s ease;
}

@media (prefers-reduced-motion: reduce) {
  .wa-bs-toasts .toast,
  .wa-bs-toasts .toast.showing,
  .wa-bs-toasts .toast.show:not(.hide),
  .wa-bs-toasts .toast.hide {
    transform: none;
    transition: opacity 0.15s ease;
  }
}

.wa-bs-toasts .toast .d-flex {
  display: flex !important;
  align-items: center !important;
  gap: 0;
}
.wa-bs-toasts .toast-body {
  flex: 1 1 auto;
  padding: 0.75rem 0.5rem 0.75rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.45;
  word-break: break-word;
}
.wa-bs-toasts .text-bg-success { color: #fff !important; background-color: #198754 !important; }
.wa-bs-toasts .text-bg-danger  { color: #fff !important; background-color: #dc3545 !important; }
.wa-bs-toasts .text-bg-warning { color: #212529 !important; background-color: #ffc107 !important; }
.wa-bs-toasts .text-bg-info    { color: #055160 !important; background-color: #0dcaf0 !important; }
.wa-bs-toasts .text-bg-primary { color: #fff !important; background-color: #0d9488 !important; }

.wa-bs-toasts .btn-close {
  box-sizing: content-box;
  width: 1em; height: 1em;
  padding: 0.65em;
  color: inherit;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.65;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.wa-bs-toasts .btn-close:hover { opacity: 1; }
.wa-bs-toasts .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}
.wa-bs-toasts .text-bg-warning .btn-close {
  filter: none;
  opacity: 0.55;
}