MOVING the files

resources/css/app.css

@@ -7,11 +7,11 @@
 /* ########### BASE ############ */
 @import './base/base.css';
 @import './base/typography.css';
-@import './base/buttons.css';
-@import './base/swiper.css';
+@import './base/filters.css';
+/* @import './base/swiper.css'; */
 
 /* ########### COMPONENTS ############ */
-@import './components/cta.css';
+@import './components/buttons.css';
 @import './components/post-card-dbmod.css';
 @import './components/news-card.css';
 @import './components/article-card.css';
@@ -20,7 +20,6 @@
 @import './components/article-tag.css';
 @import './components/page-header.css';
 
-
 /* ########### LAYOUT ############ */
 @import './layout/nav.css';
 @import './layout/footer.css';
@@ -41,3 +40,6 @@
 
 /* Home */
 @import '../../template-blocks/home/home-header/home-header.css';
+
+/* ########### LIBS ############ */
+@import './libs/swiper.css';

resources/css/base/base.css

@@ -2,3 +2,7 @@ a {
   text-decoration: none;
   @apply text-primary;
 }
+
+main {
+  overflow: hidden;
+}

resources/css/base/filters.css

@@ -0,0 +1,5 @@
+.filter-primary {
+  filter: brightness(0) saturate(100%) invert(35%)
+    sepia(26%) saturate(1165%) hue-rotate(123deg)
+    brightness(93%) contrast(93%);
+}

resources/css/base/swiper.css

@@ -1,16 +0,0 @@
-:root {
-  --swiper-pagination-bullet-border-radius: 0;
-  --swiper-pagination-bullet-height: 2px;
-  --swiper-pagination-bullet-width: 30px;
-  --swiper-pagination-bullet-horizontal-gap: 10px;
-  --swiper-theme-color: var(
-    --wp--preset--color--primary
-  ) !important;
-  --swiper-pagination-color: var(
-    --color-primary
-  ) !important;
-}
-
-.swiper-pagination-bullet {
-  @apply bg-primary;
-}

resources/css/blocks/dernieres-dynamiques.css

@@ -1,9 +1,6 @@
 .block-dernieres-dynamiques {
   @apply bg-primary text-white  pt-20;
   overflow: visible !important;
-  *:not(.article-card *) {
-    @apply text-white;
-  }
 
   &__inner {
     @apply max-w-screen-2xl mx-auto;
@@ -141,4 +138,10 @@
       @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito text-primary text-center mx-auto block mt-12;
     }
   }
+
+  :is(p, span, h1, h2, h3, h4, h5, h6):not(
+      .article-card *
+    ) {
+    @apply text-white;
+  }
 }

resources/css/blocks/revues-precedentes.css

@@ -23,7 +23,7 @@
   }
 
   .card-revue {
-    @apply grid  gap-y-12 2xl:gap-y-16 pb-24 gap-x-12 2xl:gap-x-24;
+    @apply grid  gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24;
     grid-template-columns: 61.8fr 38.2fr;
 
     .content-meta {

resources/css/components/article-card.css

@@ -38,4 +38,7 @@
   &__tags {
     @apply flex flex-wrap gap-4 pt-4;
   }
+  .cta--go {
+    @apply text-primary;
+  }
 }

resources/css/components/article-caroussel.css

@@ -1,3 +1,15 @@
 .article-caroussel {
+  &--grid {
     @apply grid grid-cols-2 gap-12;
   }
+  &--slider {
+    /* @apply swiper; */
+
+    .swiper {
+      @apply pb-12;
+    }
+    .article-card {
+      @apply h-auto;
+    }
+  }
+}

resources/css/components/article-tag.css

@@ -5,6 +5,6 @@
     @apply bg-primary text-white;
   }
 }
-.article-tags {
-  @apply flex gap-2;
+.article-tags-list {
+  @apply flex flex-wrap gap-2;
 }

resources/css/components/buttons.css

@@ -26,6 +26,19 @@
   &--mailing {
   }
 
+  &--go {
+    @apply bg-transparent filter-primary border-none px-0 py-6;
+
+    img {
+      @apply w-24;
+      transition: transform 0.3s ease-in-out;
+    }
+
+    &:hover img {
+      @apply translate-x-2;
+    }
+  }
+
   &--has-icon {
     @apply flex items-center gap-4;
 

resources/css/libs/swiper.css

@@ -0,0 +1,36 @@
+:root {
+  --swiper-pagination-bullet-border-radius: 0;
+  --swiper-pagination-bullet-height: 2px;
+  --swiper-pagination-bullet-width: 100%;
+  --swiper-pagination-bullet-horizontal-gap: 0px;
+  --swiper-theme-color: var(
+    --wp--preset--color--primary
+  ) !important;
+  --swiper-pagination-color: var(
+    --color-primary
+  ) !important;
+}
+
+.swiper-pagination {
+  @apply h-fit flex gap-12 !static mt-12;
+  top: unset !important;
+  bottom: 0px !important;
+  z-index: 100 !important;
+}
+
+.swiper-pagination-bullet {
+  @apply bg-primary w-full;
+}
+
+.swiper-controls {
+  @apply flex justify-start gap-6 pt-12 static;
+  .swiper-button-next,
+  .swiper-button-prev {
+    @apply static block border border-primary p-12  rounded-full;
+    &:after {
+      @apply left-1/2 top-1/2 block  w-fit;
+
+      transform: translate(-50%, -50%);
+    }
+  }
+}

template-parts/components/cta--go.php

@@ -0,0 +1,8 @@
+<?php
+$url = $args['url'] ?? '#';
+$alt = $args['alt'] ?? 'Lire la suite';
+$target = $args['target'] ?? '_self';
+?>
+<a href="<?php echo $url; ?>" class="cta cta--go cta--primary" target="<?php echo $target; ?>">
+	<img src="<?php echo get_template_directory_uri(); ?>/resources/img/carhop-fleche-full.svg" alt="<?php echo $alt; ?>">
+</a>