handling parcours renovateur blocks styles

resources/css/app.css

@@ -111,6 +111,9 @@
 @import './blocks/client-satisfaction.css';
 @import './blocks/post-card.css';
 @import './blocks/shortcuts.css';
+@import './blocks/parcours-step.css';
+@import './blocks/parcours-chapter.css';
+@import './blocks/parcours-renovateur.css';
 
 /* Home */
 @import './blocks/home-header.css';

resources/css/blocks/parcours-chapter.css

@@ -0,0 +1,39 @@
+.parcours-chapter {
+  @apply p-4 pb-12 grid;
+  grid-template-columns: 42% 16% 42%;
+  &:nth-child(even) {
+    .parcours-chapter__cover {
+      @apply order-3;
+    }
+
+    .parcours-chapter__content {
+      order: -1;
+    }
+  }
+  &__cover {
+    /* @apply w-full h-full bg-green-300; */
+    justify-self: center;
+    img {
+      @apply w-full h-auto;
+      max-width: 380px;
+      max-height: 330px;
+    }
+  }
+  &__icon {
+    @apply h-24 w-24  shadowed-lg p-5 bg-white rounded-3xl;
+    justify-self: center;
+  }
+  &__content {
+    .section_titling {
+      @apply !pb-3;
+      &__title {
+        @apply text-black !text-2xl font-bold mt-0;
+        text-transform: unset;
+        letter-spacing: unset;
+      }
+      &__subtitle {
+        @apply !text-base font-normal;
+      }
+    }
+  }
+}

resources/css/blocks/parcours-renovateur.css

@@ -0,0 +1,9 @@
+.parcours-renovateur {
+  @apply relative;
+  &:before {
+    @apply block absolute w-10 h-full rounded-full bg-secondary opacity-10;
+    z-index: -1;
+    content: '';
+    left: 49%;
+  }
+}

resources/css/blocks/parcours-step.css

@@ -0,0 +1,26 @@
+.parcours-step-card {
+  @apply !p-6 rounded-2xl flex gap-8 items-center shadowed my-6;
+  text-decoration: none !important;
+  transition: transform 0.3s ease;
+
+  &:first-of-type {
+    @apply mt-0;
+  }
+  &:hover {
+    @apply translate-x-3;
+  }
+  &__title {
+    @apply py-0 !my-0 text-black font-bold !text-lg no-underline;
+    line-height: 1.2 !important;
+  }
+  &__icon {
+    @apply h-16 w-16;
+  }
+
+  &:after {
+    @apply block h-4 w-4  shrink-0 bg-contain bg-no-repeat bg-center ml-auto;
+    @apply filter-secondary;
+    content: '';
+    background-image: url('../resources/img/graphic-assets/chevron_right.svg');
+  }
+}