/* ============================================================================
   KIT — parts/toast.css        Dépend de : tokens.css, motion.css

   Le message fugace : « Compte créé », « Marek t'invite à une partie d'UNO ».
   Empilés en bas à droite, au-dessus de tout, sans jamais bloquer un clic
   ailleurs (la pile est `pointer-events: none`, chaque toast le réactive).

     <div class="pile-toasts" id="toasts"></div>

   Le JS (ui/toast.js, étape 2) y injecte les toasts et gère leur retrait.
   ========================================================================= */

.pile-toasts {
  position: fixed;
  z-index: 9000;
  right: var(--gouttiere);
  bottom: var(--gouttiere);
  display: flex;
  flex-direction: column-reverse;   /* le plus récent en bas, près de l'œil */
  gap: var(--pas-2);
  width: min(23rem, calc(100vw - 2 * var(--gouttiere)));
  pointer-events: none;
}

/* Sur mobile : pleine largeur, en bas, au-dessus des barres flottantes. */
@media (max-width: 560px) {
  .pile-toasts {
    left: var(--gouttiere);
    right: var(--gouttiere);
    bottom: calc(var(--gouttiere) + env(safe-area-inset-bottom, 0px));
    width: auto;
  }
}

.toast {
  --teinte: var(--encre);

  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--pas-3);

  padding: var(--pas-3) var(--pas-4);
  background: var(--surface-haute);
  border: 1px solid var(--trait);
  border-radius: var(--r-md);
  box-shadow: var(--pose-3);

  animation: toast-entrer var(--ample) var(--sortie) both;
}

@keyframes toast-entrer {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Le JS pose data-sortie="oui" puis attend la fin de l'animation. */
.toast[data-sortie="oui"] {
  animation: toast-sortir var(--pose) var(--franc) both;
}
@keyframes toast-sortir {
  from { opacity: 1; transform: none; max-height: 12rem; }
  to   { opacity: 0; transform: translate3d(0, 8px, 0) scale(0.97); max-height: 0; }
}

.toast .embleme {
  font-size: 1.15rem;
  line-height: 1.35;
  flex-shrink: 0;
}

.toast .contenu { min-width: 0; flex: 1; }
.toast .titre {
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--t-500);
  line-height: 1.3;
  color: var(--teinte);
}
.toast .texte {
  font-size: var(--t-300);
  line-height: 1.45;
  color: var(--encre-2);
  margin-top: 0.15rem;
}
.toast .actions { margin-top: var(--pas-2); gap: var(--pas-2); }

.toast .fermer {
  flex-shrink: 0;
  margin: -0.2rem -0.35rem 0 0;
}

.toast.succes { --teinte: var(--succes); border-color: var(--succes-trait); }
.toast.alerte { --teinte: var(--alerte); border-color: var(--alerte-trait); }
.toast.danger { --teinte: var(--danger); border-color: var(--danger-trait); }
.toast.accent { --teinte: var(--laiton); border-color: var(--laiton-trait); }

/* La jauge de vie : une barre fine qui s'épuise avant le retrait auto.
   `--duree` est posée par le JS pour rester d'accord avec son minuteur.     */
.toast .jauge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--teinte);
  opacity: 0.4;
  transform-origin: left center;
  animation: jauge-vider var(--duree, 5s) linear both;
}
.toast { position: relative; overflow: hidden; }
@keyframes jauge-vider {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
.toast:hover .jauge { animation-play-state: paused; }