FEATURE handling mobile scrollbar behaviour

resources/css/components/article-revues-toolbar.css

@@ -4,8 +4,42 @@
 
   .tablist {
     @apply flex items-center overflow-x-scroll lg:overflow-x-visible gap-4 md:gap-8 lg:gap-12 border-b border-primary;
+    position: relative;
+
+    @media screen and (max-width: 1024px) {
+      border-bottom: none;
+      padding-bottom: 1em;
+      /* Ligne de 1px à 5px du bord du bas */
+      background: linear-gradient(
+          to right,
+          var(--wp--preset--color--primary, #136f63),
+          var(--wp--preset--color--primary, #136f63)
+        )
+        bottom 2em center / 100% 1px no-repeat;
+
+      &::-webkit-scrollbar {
+        width: 2em;
+        height: 1em;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #cef9ee;
+        border-radius: 100vw;
+        margin-block: 0.5em;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        @apply bg-primary;
+        border-radius: 100vw;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background: hsl(120 100% 10% / 1);
+      }
+    }
+
     button {
-      @apply text-base md:text-lg  lg:text-lg  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left;
+      @apply text-base md:text-lg  lg:text-lg  mt-8  nunito pb-4 flex flex-col lg:flex-row  items-center gap-2 lg:gap-4 text-left shrink-0;
       grid-template-columns: auto 1fr;
       /* white-space: normal;
       word-wrap: break-word; */

template-parts/revues/revue-recommandation-card.php

@@ -2,8 +2,7 @@
 $title = $args['title'];
 $ID = $args['ID'];
 $thumbnail = get_the_post_thumbnail($ID, 'full');
-
-
+$alt = get_post_meta($ID, 'alt_text', true);
 
 ?>
 
@@ -19,7 +18,6 @@ $thumbnail = get_the_post_thumbnail($ID, 'full');
 	<?php endif; ?>
 
 
-
 	<div class="cta cta--go cta--primary">
 		<img src="<?php echo get_template_directory_uri(); ?>/resources/img/carhop-fleche-full.svg" alt="<?php echo $alt; ?>">
 	</div>