/* Toast « ✓ Enregistré » du tunnel de scénario (auto-save, ADR-019).

   L'éditeur enregistre en temps réel, sans bouton « Enregistrer ». Ce toast
   discret rassure l'utilisateur : il est injecté HORS-BANDE (hx-swap-oob) après
   chaque écriture, puis apparaît et s'efface tout seul.

   CSS pur : la CSP du projet (style-src 'self', script-src 'self') interdit le
   style inline ET le JS inline ; l'animation évite donc tout JavaScript. Styling
   autonome (pas de classes Tailwind) pour ne pas dépendre du JIT de tailwind.css. */

@keyframes toast-enregistre-apparition {
  0%   { opacity: 0; transform: translateX(8px); }
  10%  { opacity: 1; transform: translateX(0); }
  75%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

.toast-enregistre {
  /* Ancré en haut à droite de l'en-tête du scénario (.mb-6.relative), au niveau
     du badge de statut. Absolu = hors du flux, donc aucun décalage de mise en page. */
  position: absolute;
  top: 0.25rem;
  right: 0;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  color: #15803d;                 /* vert « success » discret */
  background: #dcfce7;
  border: 1px solid #86efac;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.10);
  pointer-events: none;           /* purement informatif, ne capte pas la souris */
  animation: toast-enregistre-apparition 2.4s ease forwards;
}

.toast-enregistre__icone {
  width: 0.9rem;
  height: 0.9rem;
}

/* Accessibilité : sans le glissement vertical pour qui réduit les animations. */
@media (prefers-reduced-motion: reduce) {
  .toast-enregistre { animation: toast-enregistre-fondu 2.4s ease forwards; }
  @keyframes toast-enregistre-fondu {
    0% { opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; }
  }
}

/* Boutons d'export de la carte scénario (PDF / MarkDown / JSON).
   Sable / taupe doux : pastel et natif à la palette chaude du projet, mais d'une
   teinte NEUTRE ; donc distinct du pêche du badge « Finalisé » et du rouge
   « Supprimer ». Défini ici en CSS pur (charte non exposée en classes JIT). */
.btn-export {
  color: #5d574c;            /* muted (texte doux, lisible) */
  background: #f4efe6;       /* sable très doux */
  border: 1px solid #e6ddce; /* taupe clair */
}
.btn-export:hover {
  background: #ece5d8;       /* un cran plus soutenu */
  border-color: #d8cdba;
}

/* Variante ERREUR du toast (ex. titre refusé, vide ou déjà pris) : rouge,
   affichée plus longtemps pour laisser lire le message. */
.toast-erreur {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
  animation-duration: 4.5s;
}

/* Création séquence/scénario : le sélecteur de référentiel ne s'affiche que
   quand « rattaché(e) à un référentiel » est choisi. Sans JS (CSP) : :has().
   Sans CSS, le sélecteur reste visible ; dégradation sans perte. */
[data-choix-referentiel]:has(input[name="mode_referentiel"][value="hors"]:checked) .champ-referentiel {
    display: none;
}

/* Message de GARDE éphémère (ex. décochage refusé dans les Compétences de la
   séance) : visible 5 s puis fondu et retrait du flux ; CSS pur (CSP). */
@keyframes garde-ephemere {
  0%    { opacity: 1; max-height: 8rem; }
  90%   { opacity: 1; max-height: 8rem; }
  100%  { opacity: 0; max-height: 0; margin: 0; padding: 0; border-width: 0; }
}
.message-garde {
  overflow: hidden;
  animation: garde-ephemere 5.5s ease forwards;
}