first commit

assets/scss/components/_badge.scss

@@ -0,0 +1,52 @@
+@use "../core/variables" as *;
+@use "../core/mixins" as *;
+
+// =============================================================
+// Badges — bloc composant .badge pour rôles utilisateur et catégories
+// =============================================================
+
+.badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-xs;
+    padding: $spacing-2xs $spacing-sm;
+    border-radius: $radius-sm;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    line-height: $line-height-tight;
+    text-decoration: none;
+}
+
+.badge--admin {
+    color: $color-warning-text;
+    background: $color-warning-bg;
+}
+
+.badge--editor {
+    color: $color-info-text;
+    background: $color-info-bg;
+}
+
+.badge--user {
+    color: $color-text-muted;
+    background: $color-bg-light;
+}
+
+// Badge catégorie — affiché sur les cartes d'articles et les pages de détail
+// Cliquable : redirige vers la liste filtrée par catégorie
+.badge--category {
+    color: $color-primary;
+    background: $color-primary-bg;
+    vertical-align: middle;
+
+    @include interactive-transition;
+
+    &:hover {
+        background: $color-primary-bg-hover;
+    }
+
+    &:focus-visible {
+        @include focus-ring;
+    }
+}