/* © 2026 Yoann Crom — Vicious Studio. Logiciel propriétaire, tous droits réservés (LICENSE). Réf. VS-2026-8EFE48 */
/* Les bulles d'erreur (2026-10-11, amélioration n° 14 validée par Yoann, page/app-erreurs.js) : elles restent jusqu'au ✕
   et portent le bouton qui règle le problème ; une petite fête quand c'est réglé. Jamais de son, rien qui se répète,
   et rien qui bouge quand l'écran préfère le calme (prefers-reduced-motion). */
.toast { position: relative; }
.toast.erreur, .toast.toast-a-dire { padding-right: 42px; }
.toast-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.toast-fermer {
  position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: var(--doux); font-size: 14px; line-height: 1;
}
.toast-fermer::before { content: "✕"; }
.toast-fermer:hover { background: var(--surface-2); color: var(--texte); }
.toast-fermer:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; color: var(--texte); }
.toast .a-dire {
  margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--accent); border-radius: 6px;
  background: var(--surface-2); font-size: 13px; user-select: text;
}
.toast.fete { border-left-color: var(--ok); }
.coche-fete {
  display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 4px; border-radius: 50%;
  background: var(--ok); color: #06140d; font-size: 12px; font-weight: 800; vertical-align: -3px;
  animation: coche-fete .45s cubic-bezier(.2, 1.6, .4, 1) both;
}
@keyframes coche-fete { from { transform: scale(0) rotate(-40deg); } }
/* le bloc où mène le bouton brille une fois, puis plus rien */
.a-regarder { animation: a-regarder 1.6s ease-out 1; }
@keyframes a-regarder {
  0% { box-shadow: 0 0 0 0 rgba(220,60,128,.8); }
  40% { box-shadow: 0 0 0 7px rgba(220,60,128,.35); }
  100% { box-shadow: 0 0 0 14px rgba(220,60,128,0); }
}
.bouton-erreur { margin-left: 6px; }
/* une liste vide dit quoi faire et porte le bouton pour le faire */
.vide-action { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vide-action p { margin: 0; }
.vide-action p:first-child { color: var(--texte); font-size: 15px; font-weight: 600; }
.toasts { max-width: min(420px, calc(100vw - 36px)); }   /* sur un téléphone, la bulle ne sort jamais de l'écran */
@media (max-width: 560px) { .toasts { bottom: 80px; } }   /* ni sous la bulle 💬 de l'aide (en bas à gauche) */
@media (prefers-reduced-motion: reduce) {
  .toast, .coche-fete { animation: none; }
  .a-regarder { animation: none; outline: 2px solid var(--accent); outline-offset: 3px; }
}