first commit

assets/scss/modules/post/_listing.scss

@@ -0,0 +1,69 @@
+@use "../../core/variables" as *;
+@use "../../core/mixins" as *;
+
+// =============================================================
+// Page d'accueil — liste des articles
+// =============================================================
+// Les styles de structure des cartes sont dans components/_card.scss.
+// Ce fichier surcharge uniquement les éléments spécifiques au contexte blog.
+
+// Lien d'action "Lire la suite →" — élément BEM dédié plutôt qu'un sélecteur
+// descendant sur <a>, pour respecter BEM et éviter les collisions de styles
+.card__actions-link {
+    font-size: $font-size-sm;
+    color: $color-primary;
+    text-decoration: none;
+
+    @include interactive-transition;
+
+    &:hover {
+        text-decoration: underline;
+    }
+
+    &:focus-visible {
+        @include focus-ring;
+        border-radius: $radius-sm;
+    }
+}
+
+// =============================================================
+// Barre de filtre par catégorie
+// =============================================================
+
+// Conteneur de la liste de liens de filtre
+.category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $spacing-sm;
+    margin-bottom: $spacing-lg;
+    padding-bottom: $spacing-md;
+    border-bottom: 1px solid $color-border;
+}
+
+// Lien de filtre individuel
+.category-filter__item {
+    padding: $spacing-xs $spacing-sm;
+    border-radius: $radius-sm;
+    font-size: $font-size-sm;
+    text-decoration: none;
+    color: $color-text-muted;
+    border: 1px solid $color-border;
+
+    @include interactive-transition;
+
+    &:hover {
+        color: $color-primary;
+        border-color: $color-primary;
+    }
+
+    &:focus-visible {
+        @include focus-ring;
+    }
+}
+
+// État actif — catégorie sélectionnée
+.category-filter__item--active {
+    color: $color-primary;
+    border-color: $color-primary;
+    font-weight: $font-weight-bold;
+}