/* ------------------------------------------------------------
   snackbar.css — notification éphémère, une seule à la fois (lot 01)
   Référence : handoffs/01-composants/screenshots/08-snackbars.png
   ------------------------------------------------------------ */

.toast-zone {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 4px + 68px + 12px);
  display: flex;
  justify-content: center;
  z-index: 50;
  pointer-events: none;
}

@media (min-width: 960px) {
  .toast-zone { left: 50%; right: auto; transform: translateX(-50%); width: 480px; }
}

/* Écran sans barre de navigation (ex. outil, lot 04) : la snackbar se pose
   juste au-dessus de la zone de sécurité, pas au-dessus d'une barre absente. */
.toast-zone.no-nav {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.snackbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 56px;
  width: 100%;
  max-width: 480px;
  padding: 0 6px 0 14px;
  border-radius: var(--r-lg);
  background: var(--snack-bg);
  color: var(--snack-fg);
  box-shadow: var(--shadow-nav);
  font-family: var(--font-text);
  font-size: 14px;
  animation: snackbar-in .2s ease-out;
}

@keyframes snackbar-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .snackbar { animation: snackbar-fade .2s ease-out; }
  @keyframes snackbar-fade { from { opacity: 0; } }
}

.snackbar .icon { width: 20px; height: 20px; flex: none; }
.snackbar--error .icon { color: var(--snack-error); }
.snackbar__text { flex: 1; min-width: 0; }

.snackbar__action {
  height: 44px;
  padding: 0 12px;
  background: transparent;
  border: 0;
  color: var(--snack-action);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.snackbar__close {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--snack-fg);
  cursor: pointer;
}