/* ==========================================================================
   Toast (.toast) — Notifications temporaires (popups)

   Structure BEM :
   - .toast                → Bloc racine (toast générique)
   - .toast--info          → Modificateur information (forme de base)
   - .toast--success       → Modificateur succès (forme de base)
   - .toast--warning       → Modificateur avertissement (triangle)
   - .toast--error         → Modificateur erreur (triangle)
   - .toast--sticky        → Ne disparaît pas seul
   - .toast__icon          → Élément icône (vide = triangle pour warning/error)
   - .toast__content       → Élément contenu (titre + message)
   - .toast__title         → Élément titre (optionnel)
   - .toast__message       → Élément message principal
   - .toast__close         → Élément bouton fermer (SVG ×)
   - .toast__progress      → Barre de progression temporelle

   Position et empilement : organisms/toast-container.css.

   Usage :
   <div class="toast toast--success" role="status">
     <span class="toast__icon" aria-hidden="true"></span>
     <div class="toast__content">
       <p class="toast__message">Enregistré pour les deux.</p>
     </div>
     <button class="toast__close" aria-label="Fermer">…svg…</button>
   </div>

   Accessibilité :
   - role="alert" pour notification importante
   - aria-live="polite" pour mise à jour d'état
   - Timeout automatique (5s défaut) avec barre de progression
   - Bouton fermer accessible clavier

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon ». Les maquettes ne dessinent pas de toast : il suit la
   règle des alertes (jamais de fond noir, aucune ombre) — surface et filet
   encre 1,5 px, qui le détachent du calendrier sans ombre portée ; aucune
   couleur par variante. Réécrite sans imbrication CSS (cible iOS 16.4) et sans
   bloc sombre propre ; le positionnement, défini en double dans la
   bibliothèque, ne vit plus que dans toast-container.css.
   ========================================================================== */

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  box-sizing: border-box;

  width: 100%;
  padding: var(--space-sm) var(--space-xs) var(--space-sm) var(--space-md);
  overflow: hidden;

  background-color: var(--color-surface);
  border: var(--border-control) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);

  pointer-events: auto;

  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);

  animation: toast-in var(--duration-normal) ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.toast__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 3px;
}

.toast__icon:empty {
  display: none;
}

.toast--warning .toast__icon:empty,
.toast--error .toast__icon:empty {
  display: inline-flex;
}

.toast--warning .toast__icon:empty::before,
.toast--error .toast__icon:empty::before {
  content: '';
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1L8 1.5Z M7.2 6v3.5h1.6V6Z M7.2 11.2v1.4h1.6v-1.4Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5 15 14H1L8 1.5Z M7.2 6v3.5h1.6V6Z M7.2 11.2v1.4h1.6v-1.4Z' fill-rule='evenodd'/%3E%3C/svg%3E") center / contain no-repeat;
}

.toast__content {
  flex: 1;
  min-width: 0;
  align-self: center;
}

.toast__title {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  color: inherit;
}

.toast__message {
  margin: 0;
  color: var(--color-text-primary);
}

.toast__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: -10px 0;
  padding: 0;

  background: none;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
}

.toast__close:hover {
  background-color: var(--color-surface-hover);
}

.toast__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -4px;
}

/* Barre de progression : trait encre de 2 px en bas */
.toast__progress {
  --toast-duration: 5s;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  transform-origin: left;
  animation: toast-progress linear forwards;
  animation-duration: var(--toast-duration);
}

@keyframes toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

.toast--sticky .toast__progress,
.toast.is-sticky .toast__progress {
  display: none;
}