diff --git a/packages/base/Resources/Public/Scss/components/_text.scss b/packages/base/Resources/Public/Scss/components/_text.scss
new file mode 100644
index 0000000..f7d409d
--- /dev/null
+++ b/packages/base/Resources/Public/Scss/components/_text.scss
@@ -0,0 +1,43 @@
+$marker-size: 1.5rem;
+$gap-y: 2rem;
+
+ol {
+  @apply list-none m-0 p-0;
+  counter-reset: step;
+
+  > li {
+    @apply relative;
+    padding-left: calc(#{$marker-size} + .5rem);
+    margin-bottom: $gap-y;
+    counter-increment: step;
+
+    // the two‑digit number
+    &::before {
+      content: counter(step, decimal-leading-zero);
+      position: absolute;
+      top: .5rem;
+      left: 0;
+      @apply text-primary font-bold text-2xl leading-none;
+    }
+
+    // the dashed connector, now stretches over the gap too
+    &::after {
+      content: "";
+      position: absolute;
+      top: calc(#{$marker-size} + 1rem);
+      bottom: -$gap-y;              // extend past the li’s bottom margin
+      left: calc(#{$marker-size} / 2);
+      transform: translateX(-50%);
+      @apply border-l-2 border-dashed border-gray-300;
+    }
+
+    // last item: no connector & no extra bottom margin
+    &:last-child {
+      margin-bottom: 0;
+
+      &::after {
+        @apply hidden;
+      }
+    }
+  }
+}
diff --git a/packages/base/Resources/Public/Scss/main.scss b/packages/base/Resources/Public/Scss/main.scss
index bdf9548..25ff5b4 100644
--- a/packages/base/Resources/Public/Scss/main.scss
+++ b/packages/base/Resources/Public/Scss/main.scss
@@ -14,6 +14,7 @@
 /* @import 'components/news'; */
 /* @import "components/news_detail"; */
 /* @import 'components/footer'; */
+@import 'components/text';
 @import 'components/buttons';
 @import 'components/form';
 @import 'layouts/home-page';