first commit

assets/scss/components/_pagination.scss

@@ -0,0 +1,86 @@
+@use "../core/variables" as *;
+@use "../core/mixins" as *;
+
+// =============================================================
+// Pagination
+// =============================================================
+// Bloc partagé car rendu via un partial Twig utilisé sur plusieurs écrans.
+
+.pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacing-sm;
+    margin-top: $spacing-lg;
+}
+
+.pagination__summary {
+    color: $color-text-muted;
+    font-size: $font-size-sm;
+    line-height: $line-height-base;
+}
+
+.pagination__pages {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $spacing-sm;
+}
+
+.pagination__link,
+.pagination__control {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    text-decoration: none;
+
+    @include interactive-transition;
+
+    &:focus-visible {
+        @include focus-ring;
+    }
+}
+
+.pagination__link {
+    padding: $spacing-xs $spacing-sm;
+    border: 1px solid $color-border;
+    border-radius: $radius-md;
+    color: $color-text;
+    background: $color-bg-white;
+
+    &:hover {
+        border-color: $color-primary;
+        color: $color-primary;
+    }
+
+    &--current {
+        border-color: $color-primary;
+        color: $color-primary;
+        background: $color-primary-bg;
+        font-weight: $font-weight-semibold;
+    }
+}
+
+.pagination__control--disabled {
+    color: $color-text-subtle;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+@include mobile {
+    .pagination {
+        align-items: stretch;
+    }
+
+    .pagination__summary,
+    .pagination__control {
+        width: 100%;
+    }
+
+    .pagination__pages {
+        width: 100%;
+        justify-content: center;
+    }
+}