/* ==========================================================================
   Toast Container (.toast-container) — Empilement de notifications toast

   Structure BEM :
   - .toast-container                  → Bloc racine (position fixe à l'écran)
   - .toast-container--top-right       → Modificateur position (défaut)
   - .toast-container--top-left        → Modificateur position
   - .toast-container--bottom-right    → Modificateur position
   - .toast-container--bottom-left     → Modificateur position
   - .toast-container--top-center      → Modificateur position
   - .toast-container--bottom-center   → Modificateur position

   Contient des instances de l'atom .toast (voir components/atoms/toast.css).
   L'entrée/sortie de chaque toast est animée individuellement par .toast
   (transform + opacity) ; ce conteneur gère uniquement l'empilement.

   Usage :
   <div class="toast-container toast-container--top-right" role="region" aria-label="Notifications" aria-live="polite">
     <div class="toast toast--success" role="status">Modifications enregistrées.</div>
     <div class="toast toast--error" role="alert">Échec de l'envoi.</div>
   </div>
   ========================================================================== */

.toast-container {
  position: fixed;
  z-index: var(--z-toast, 600);

  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  width: min(24rem, calc(100vw - var(--space-lg) * 2));
  max-height: calc(100vh - var(--space-lg) * 2);
  overflow: hidden;

  pointer-events: none;
}

.toast-container > * {
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   POSITIONS
   -------------------------------------------------------------------------- */
.toast-container--top-right {
  top: var(--space-lg);
  right: var(--space-lg);
}

.toast-container--top-left {
  top: var(--space-lg);
  left: var(--space-lg);
}

.toast-container--bottom-right {
  bottom: var(--space-lg);
  right: var(--space-lg);
  flex-direction: column-reverse;
}

.toast-container--bottom-left {
  bottom: var(--space-lg);
  left: var(--space-lg);
  flex-direction: column-reverse;
}

.toast-container--top-center {
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
}

.toast-container--bottom-center {
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column-reverse;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — Pleine largeur sur mobile
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .toast-container {
    left: var(--space-sm);
    right: var(--space-sm);
    width: auto;
    transform: none;
  }
}