/* =========================================================================
   TOASTER — plugin de notifications toast (jQuery / Vanilla JS)
   Auteur : conçu pour un usage universel (Laravel / Bootstrap / n'importe quel projet)
   Dépendances : aucune. FontAwesome facultatif (pour les icônes FA).
   ========================================================================= */

/* ---- Conteneurs (un par position) ------------------------------------- */
.toaster-container{
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 92vw;
  pointer-events: none;          /* le conteneur ne bloque pas les clics */
  padding: 4px;
}
.toaster-container > *{ pointer-events: auto; }

.toaster-top-left     { top: 18px;  left: 18px;  align-items: flex-start; }
.toaster-top-center   { top: 18px;  left: 50%;   transform: translateX(-50%); align-items: center; }
.toaster-top-right    { top: 18px;  right: 18px; align-items: flex-end; }
.toaster-bottom-left  { bottom: 18px; left: 18px;  align-items: flex-start; }
.toaster-bottom-center{ bottom: 18px; left: 50%;   transform: translateX(-50%); align-items: center; }
.toaster-bottom-right { bottom: 18px; right: 18px; align-items: flex-end; }

/* ---- Carte toast ------------------------------------------------------- */
.toaster-item{
  --tc: #2563eb;                       /* couleur d'accent (par type) */
  --tc-soft: rgba(37,99,235,.12);
  --tc-track: rgba(37,99,235,.18);

  position: relative;
  width: 336px;
  max-width: 100%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.06);
  border-left: 4px solid var(--tc);
  box-shadow: 0 8px 24px -8px rgba(17,24,39,.22), 0 2px 6px -2px rgba(17,24,39,.10);
  overflow: hidden;
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform .40s cubic-bezier(.22,1,.36,1),
    opacity   .32s ease,
    height    .30s ease,
    margin    .30s ease,
    padding   .30s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Thèmes par type */
.toaster--success{ --tc:#16a34a; --tc-soft:rgba(22,163,74,.12);  --tc-track:rgba(22,163,74,.18);  }
.toaster--error  { --tc:#dc2626; --tc-soft:rgba(220,38,38,.12);  --tc-track:rgba(220,38,38,.18);  }
.toaster--warning{ --tc:#d97706; --tc-soft:rgba(217,119,6,.14);  --tc-track:rgba(217,119,6,.20);  }
.toaster--info   { --tc:#2563eb; --tc-soft:rgba(37,99,235,.12);  --tc-track:rgba(37,99,235,.18);  }

/* ---- Positions de départ (entrée) ------------------------------------- */
.toaster-item.entrance-right { transform: translateX(118%); }
.toaster-item.entrance-left  { transform: translateX(-118%); }
.toaster-item.entrance-top   { transform: translateY(-135%); }
.toaster-item.entrance-bottom{ transform: translateY(135%); }

/* Etat affiché : glisse jusqu'à sa place */
.toaster-item.toaster-in{ transform: none; opacity: 1; }

/* Etat de fermeture : collapse propre de la pile */
.toaster-item.toaster-collapsing{ overflow: hidden; }

/* ---- Shake horizontal (animation 2, sur l'axe X) ---------------------- */
.toaster-shake{ display: block; }
@keyframes toaster-shake-x{
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px);  }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px);  }
}
.toaster-shake-play{ animation: toaster-shake-x .5s cubic-bezier(.36,.07,.19,.97) both; }

/* ---- Corps ------------------------------------------------------------ */
.toaster-body{
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 12px 12px 13px;
}

.toaster-icon{
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--tc-soft);
  color: var(--tc);
  font-size: 15px;
  margin-top: 1px;
}
.toaster-icon img{ width: 100%; height: 100%; object-fit: cover; border-radius: 9px; display: block; }

.toaster-content{ flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.toaster-title{
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
  margin: 0 0 2px;
  letter-spacing: -.01em;
}
.toaster-message{
  font-size: 12.75px;
  line-height: 1.45;
  color: #4b5563;
  margin: 0;
  overflow-wrap: anywhere;
}
.toaster-action{
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--tc-soft);
  color: var(--tc);
  border: 0;
  font-size: 12px; font-weight: 700;
  padding: 5px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.toaster-action:hover{ filter: brightness(.94); }
.toaster-action:active{ transform: translateY(1px); }

.toaster-close{
  flex: 0 0 auto;
  width: 24px; height: 24px;
  margin: -2px -2px 0 0;
  display: grid; place-items: center;
  background: transparent;
  border: 0; border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.toaster-close:hover{ background: rgba(17,24,39,.06); color: #374151; }

.toaster-clickable .toaster-body{ cursor: pointer; }

/* ---- Progress bar (fond de couleur qui se vide) ----------------------- */
.toaster-progress{
  height: 3px;
  width: 100%;
  background: var(--tc-track);
  overflow: hidden;
}
.toaster-progress-bar{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--tc);
  transform-origin: left center;
}

/* ---- Dark mode (auto) -------------------------------------------------- */
@media (prefers-color-scheme: dark){
  .toaster-item{
    background: #1f2430;
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,.6), 0 2px 6px -2px rgba(0,0,0,.4);
  }
  .toaster-title{ color: #f3f4f6; }
  .toaster-message{ color: #b6bcc9; }
  .toaster-close{ color: #8b93a3; }
  .toaster-close:hover{ background: rgba(255,255,255,.08); color: #e5e7eb; }
}
.toaster-item.toaster-theme-dark{
  background: #1f2430; border-color: rgba(255,255,255,.06);
}
.toaster-item.toaster-theme-dark .toaster-title{ color:#f3f4f6; }
.toaster-item.toaster-theme-dark .toaster-message{ color:#b6bcc9; }

/* ---- Accessibilité : mouvement réduit --------------------------------- */
@media (prefers-reduced-motion: reduce){
  .toaster-item{ transition: opacity .2s ease; transform: none !important; }
  .toaster-item.entrance-right,
  .toaster-item.entrance-left,
  .toaster-item.entrance-top,
  .toaster-item.entrance-bottom{ transform: none; }
  .toaster-shake-play{ animation: none; }
}

/* ---- Responsive mobile ------------------------------------------------- */
@media (max-width: 480px){
  .toaster-container{ left: 10px !important; right: 10px !important; transform: none !important; align-items: stretch; max-width: none; }
  .toaster-top-center, .toaster-bottom-center{ left: 10px; }
  .toaster-item{ width: 100%; }
}