Design System

Référence de design à lire avant toute création ou modification de vue. Ces règles s'appliquent à tous les modules sauf exception explicite documentée.

---

Stack UI

Élément	Version	Source
Bootstrap	5.3.3	CDN jsDelivr
Bootstrap Icons	1.11.3	CDN jsDelivr
Assets custom	Vite	resources/js/app.js

---

Palette de couleurs

Rôle	Valeur
Primaire / navbar / accents	#0d6efd (Bootstrap primary)
Sidebar background	#212529 (Bootstrap dark)
Sidebar hover / active	#343a40
Sidebar texte inactif	#adb5bd
Contenu background (admin)	#f8f9fa
Contenu background (dashboard)	#f4f6f9
Contenu background (apps métier)	#f5f7fb
Card / surface blanche	#ffffff
Footer / zones grises claires	#f0f2f5
Bordures	#dee2e6
Labels de section sidebar	#6c757d

---

Variables CSS globales

:root {
    --navbar-h: 44px;
    --footer-h: 31px;
}

---

Badges et statuts

État	Classe Bootstrap
Actif	badge bg-success
Inactif	badge bg-warning text-dark
Archivé / neutre	badge bg-secondary
Externe / info	badge bg-info text-dark
Critique / danger	badge bg-danger
Accès global	badge bg-success-subtle text-success border border-success-subtle
Label light	badge bg-light text-dark border

---

Flash messages

{{-- Succès --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

{{-- Erreur --}}
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

---

Accessibilité minimale

• title="..." sur tous les boutons icône seule
• aria-hidden="true" sur les modales Bootstrap
• role="alert" sur les flash messages
• Contraste : ne pas utiliser text-muted sur fond coloré