:root {
  --toast-radius: 8px;
  --toast-shadow: 0 4px 16px rgba(0,0,0,0.08);
  --toast-gap: 12px;
  --toast-padding: 12px 16px;
  --toast-font: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  --toast-z: 99999;

  --toast-bg: #F2F2F2;   /* clair forcé */
  --toast-fg: #111827;   /* texte noir */
  --toast-muted: #6b7280;/* texte gris */
  --toast-border: #e5e7eb;

  --toast-success: #10b981;
  --toast-info: #3b82f6;
  --toast-warning: #f59e0b;
  --toast-error: #ef4444;
}

/* Conteneur root */
#toast-root {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--toast-z);
}

/* Piles */
.toast-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;  /* centré par défaut pour *center */
  gap: var(--toast-gap);
  width: 100%;
  pointer-events: none;
  padding: 12px;
}

/* Positions center (déjà en place) */
.toast-stack.pos-top-center { top: 0; left: 0; right: 0; }
.toast-stack.pos-bottom-center { bottom: 0; left: 0; right: 0; }

/* NOUVELLES positions pour coins */
.toast-stack.pos-top-right {
  top: 0; right: 0; left: auto;
  align-items: flex-end;
}
.toast-stack.pos-bottom-right {
  bottom: 0; right: 0; left: auto;
  align-items: flex-end;
}
.toast-stack.pos-top-left {
  top: 0; left: 0; right: auto;
  align-items: flex-start;
}
.toast-stack.pos-bottom-left {
  bottom: 0; left: 0; right: auto;
  align-items: flex-start;
}

/* Carte toast */
.toast {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  min-width: min(360px, 92vw);  /* 75% de 480px */
  max-width: min(360px, 92vw);
  background: var(--toast-bg);
  color: var(--toast-fg);
  border: 1px solid var(--toast-border);
  border-left: none; /* supprime la bordure gauche */

  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
  padding: var(--toast-padding);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Trait coloré à gauche */
.toast::before {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  border-top-left-radius: var(--toast-radius);
  border-bottom-left-radius: var(--toast-radius);
}
.toast.success::before { background: var(--toast-success); }
.toast.info::before    { background: var(--toast-info); }
.toast.warning::before { background: var(--toast-warning); }
.toast.error::before   { background: var(--toast-error); }

.toast.show { opacity: 1; transform: translateY(0); }

/* Contenu sobre */
.toast .icon, .toast .badge { display: none; }
.toast .content {
  display: grid;
  gap: 4px;
  background: transparent !important;
  padding: 0; margin: 0; border: 0; box-shadow: none;
}
.toast .title {
  font-weight: 600; font-size: 0.95rem; color: var(--toast-fg);
}
.toast .message {
  font-size: 0.9rem; color: var(--toast-muted);
}

/* Bouton fermer */
.toast .close {
  border: none; background: transparent; cursor: pointer;
  font-size: 1rem; opacity: 0.6; color: inherit;
}
.toast .close:hover { opacity: 1; }

/* Progression fine */
.toast .progress {
  grid-column: 1 / -1;
  height: 2px;
  background: transparent;
}
.toast .progress > div {
  height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(1); opacity: 0.9;
}
.toast.success .progress > div { background: var(--toast-success); }
.toast.info .progress > div    { background: var(--toast-info); }
.toast.warning .progress > div { background: var(--toast-warning); }
.toast.error .progress > div   { background: var(--toast-error); }

/* Responsive */
@media (max-width: 380px) {
  .toast { min-width: 96vw; max-width: 96vw; }
}

/* Animation d'entrée/sortie différente si la pile est en haut */
.toast-stack.pos-top-right .toast,
.toast-stack.pos-top-left .toast,
.toast-stack.pos-top-center .toast {
  transform: translateY(-10px); /* démarre un peu plus haut */
}

.toast-stack.pos-top-right .toast.show,
.toast-stack.pos-top-left .toast.show,
.toast-stack.pos-top-center .toast.show {
  transform: translateY(0); /* arrive en place */
}

.toast-stack.pos-top-right .toast.hiding,
.toast-stack.pos-top-left .toast.hiding,
.toast-stack.pos-top-center .toast.hiding {
  transform: translateY(-10px); /* repart vers le haut */
  opacity: 0;
}