Notifications

Alerts inline

Intégrées dans le contenu de la page. Pour les états globaux, les erreurs de formulaire, les avertissements contextuels.

<div class="alert alert-success">
  <svg class="h-4 w-4 flex-shrink-0 mt-0.5"><!-- icône --></svg>
  <div>
    <div class="font-accent font-bold">Commande enregistrée</div>
    <div class="text-xs mt-0.5">Description...</div>
  </div>
</div>

<!-- Variants: alert-success / alert-error / alert-warning / alert-info -->

Toasts

Notifications éphémères en haut à droite. Auto-dismiss après 4s. Pour les confirmations d'action et les erreurs non-bloquantes. Ne pas abuser — réserver aux retours d'action utilisateur direct.

<!-- Container -->
<div class="fixed top-4 right-4 z-50 space-y-2 w-72">
  <!-- Toast -->
  <div class="bg-white border border-gray-200 rounded-lg shadow-lg flex items-start gap-3 p-3">
    <div class="w-1.5 rounded-full bg-mc-green self-stretch flex-shrink-0"></div>
    <div class="flex-1 min-w-0">
      <div class="font-accent font-bold text-mc-navy text-sm">Titre</div>
      <div class="text-xs text-gray-500 mt-0.5">Description</div>
    </div>
    <button class="text-gray-400 hover:text-mc-navy" aria-label="Fermer">✕</button>
  </div>
</div>

<!-- Couleur de la barre selon le type -->
<!-- Succès : bg-mc-green · Erreur : bg-red-500 · Warning : bg-amber-400 · Info : bg-blue-400 -->

Flash message (post-soumission)

Pour les redirections après soumission de formulaire (pattern PRG). Placé en haut du contenu, sous le header.