refining css for chapitrage thematique

css/app.css

@@ -1192,28 +1192,23 @@ summary {
 }
 
 .filter-acoustique-coproprietes {
-  filter: invert(27%) sepia(88%) saturate(1302%)
+  filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%);
-    hue-rotate(206deg) brightness(105%) contrast(114%);
 }
 
 .filter-energies-urbanisme {
-  filter: invert(28%) sepia(89%) saturate(1188%)
+  filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%);
-    hue-rotate(131deg) brightness(95%) contrast(98%);
 }
 
 .filter-isolation-quotidien {
-  filter: invert(21%) sepia(94%) saturate(3059%)
+  filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%);
-    hue-rotate(26deg) brightness(98%) contrast(98%);
 }
 
-.filter-patrimoine {
+.filter-patrimoine-renovation {
-  filter: invert(25%) sepia(79%) saturate(6075%)
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
-    hue-rotate(263deg) brightness(99%) contrast(96%);
 }
 
-.filter-location {
+.filter-location-renovation-circulaire {
-  filter: invert(13%) sepia(71%) saturate(4425%)
+  filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%);
-    hue-rotate(338deg) brightness(109%) contrast(117%);
 }
 
 /* ########### COMPONENTS ############ */
@@ -1374,28 +1369,23 @@ summary {
 }
 
 &.card-acoustique:hover .cta_arrow_button,  &.card-petites-coproprietes:hover .cta_arrow_button {
-  filter: invert(27%) sepia(88%) saturate(1302%)
+  filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%);
-    hue-rotate(206deg) brightness(105%) contrast(114%);
 }
 
 &.card-au-quotidien:hover .cta_arrow_button,  &.card-isolation:hover .cta_arrow_button {
-  filter: invert(21%) sepia(94%) saturate(3059%)
+  filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%);
-    hue-rotate(26deg) brightness(98%) contrast(98%);
 }
 
 &.card-energies:hover .cta_arrow_button,  &.card-urbanisme:hover .cta_arrow_button {
-  filter: invert(28%) sepia(89%) saturate(1188%)
+  filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%);
-    hue-rotate(131deg) brightness(95%) contrast(98%);
 }
 
 &.card-location:hover .cta_arrow_button {
-  filter: invert(13%) sepia(71%) saturate(4425%)
+  filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%);
-    hue-rotate(338deg) brightness(109%) contrast(117%);
 }
 
 &.card-patrimoine:hover .cta_arrow_button {
-  filter: invert(25%) sepia(79%) saturate(6075%)
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
-    hue-rotate(263deg) brightness(99%) contrast(96%);
 }
 
 .card-large-content-container {
@@ -1988,28 +1978,23 @@ summary {
 }
 
 .card-frequent-question.card-acoustique:hover .cta_arrow_button,  .card-frequent-question.card-petites-coproprietes:hover .cta_arrow_button {
-  filter: invert(27%) sepia(88%) saturate(1302%)
+  filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%);
-    hue-rotate(206deg) brightness(105%) contrast(114%);
 }
 
 .card-frequent-question.card-au-quotidien:hover .cta_arrow_button,  .card-frequent-question.card-isolation:hover .cta_arrow_button {
-  filter: invert(21%) sepia(94%) saturate(3059%)
+  filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%);
-    hue-rotate(26deg) brightness(98%) contrast(98%);
 }
 
 .card-frequent-question.card-energies:hover .cta_arrow_button,  .card-frequent-question.card-urbanisme:hover .cta_arrow_button {
-  filter: invert(28%) sepia(89%) saturate(1188%)
+  filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%);
-    hue-rotate(131deg) brightness(95%) contrast(98%);
 }
 
 .card-frequent-question.card-location:hover .cta_arrow_button {
-  filter: invert(13%) sepia(71%) saturate(4425%)
+  filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%);
-    hue-rotate(338deg) brightness(109%) contrast(117%);
 }
 
 .card-frequent-question.card-patrimoine:hover .cta_arrow_button {
-  filter: invert(25%) sepia(79%) saturate(6075%)
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
-    hue-rotate(263deg) brightness(99%) contrast(96%);
 }
 
 .card-thematique {
@@ -2084,28 +2069,23 @@ summary {
 }
 
 .card-thematique.card-acoustique:hover .cta_arrow_button,  .card-thematique.card-petites-coproprietes:hover .cta_arrow_button {
-  filter: invert(27%) sepia(88%) saturate(1302%)
+  filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%);
-    hue-rotate(206deg) brightness(105%) contrast(114%);
 }
 
 .card-thematique.card-au-quotidien:hover .cta_arrow_button,  .card-thematique.card-isolation:hover .cta_arrow_button {
-  filter: invert(21%) sepia(94%) saturate(3059%)
+  filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%);
-    hue-rotate(26deg) brightness(98%) contrast(98%);
 }
 
 .card-thematique.card-energies:hover .cta_arrow_button,  .card-thematique.card-urbanisme:hover .cta_arrow_button {
-  filter: invert(28%) sepia(89%) saturate(1188%)
+  filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%);
-    hue-rotate(131deg) brightness(95%) contrast(98%);
 }
 
 .card-thematique.card-location:hover .cta_arrow_button {
-  filter: invert(13%) sepia(71%) saturate(4425%)
+  filter: invert(13%) sepia(71%) saturate(4425%) hue-rotate(338deg) brightness(109%) contrast(117%);
-    hue-rotate(338deg) brightness(109%) contrast(117%);
 }
 
 .card-thematique.card-patrimoine:hover .cta_arrow_button {
-  filter: invert(25%) sepia(79%) saturate(6075%)
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
-    hue-rotate(263deg) brightness(99%) contrast(96%);
 }
 
 .post-conseils-chapter-header {
@@ -3285,6 +3265,10 @@ body.petites-coproprietes .post-conseils-chapter-header time,  .entry-content--p
   color: rgb(36 94 242 / var(--tw-text-opacity));
 }
 
+body.petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--petites-coproprietes .homegrade-blocks-lien-chapitre__cta:hover,  body.acoustique .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--acoustique .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--acoustique .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--acoustique .homegrade-blocks-lien-chapitre__cta:hover {
+  filter: invert(27%) sepia(88%) saturate(1302%) hue-rotate(206deg) brightness(105%) contrast(114%);
+}
+
 /* PETITES COPROPRIÉTÉS — SPECIFIC */
 
 body.petites-coproprietes .post-conseils-chapter-header, .entry-content--petites-coproprietes .post-conseils-chapter-header, .post-conseil-page--petites-coproprietes .post-conseils-chapter-header, .post-question-page--petites-coproprietes .post-conseils-chapter-header {
@@ -3446,6 +3430,10 @@ body.urbanisme .post-conseils-chapter-header time,  .entry-content--urbanisme .p
   color: rgb(2 126 80 / var(--tw-text-opacity));
 }
 
+body.urbanisme .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--urbanisme .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--urbanisme .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--urbanisme .homegrade-blocks-lien-chapitre__cta:hover,  body.energies .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--energies .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--energies .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--energies .homegrade-blocks-lien-chapitre__cta:hover {
+  filter: invert(28%) sepia(89%) saturate(1188%) hue-rotate(131deg) brightness(95%) contrast(98%);
+}
+
 /* URBANISME — SPECIFIC */
 
 body.urbanisme .post-conseils-chapter-header, .entry-content--urbanisme .post-conseils-chapter-header, .post-conseil-page--urbanisme .post-conseils-chapter-header, .post-question-page--urbanisme .post-conseils-chapter-header {
@@ -3592,6 +3580,10 @@ body.au-quotidien .post-conseils-chapter-header time,  .entry-content--au-quotid
   color: rgb(194 69 3 / var(--tw-text-opacity));
 }
 
+body.au-quotidien .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--au-quotidien .homegrade-blocks-lien-chapitre__cta:hover,  body.isolation .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--isolation .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--isolation .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--isolation .homegrade-blocks-lien-chapitre__cta:hover {
+  filter: invert(21%) sepia(94%) saturate(3059%) hue-rotate(26deg) brightness(98%) contrast(98%);
+}
+
 /* AU QUOTIDIEN — SPECIFIC */
 
 body.au-quotidien .post-conseils-chapter-header, .entry-content--au-quotidien .post-conseils-chapter-header, .post-conseil-page--au-quotidien .post-conseils-chapter-header, .post-question-page--au-quotidien .post-conseils-chapter-header {
@@ -3690,6 +3682,10 @@ body.patrimoine .post-conseils-chapter-header time,  .entry-content--patrimoine
   color: rgb(139 47 247 / var(--tw-text-opacity));
 }
 
+body.patrimoine .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--patrimoine .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--patrimoine .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--patrimoine .homegrade-blocks-lien-chapitre__cta:hover {
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
+}
+
 body.renovation .post-conseils-chapter-header, .entry-content--newpurplethematic .post-conseils-chapter-header, .post-conseil-page--newpurplethematic .post-conseils-chapter-header, .post-question-page--newpurplethematic .post-conseils-chapter-header {
   background: var(--wp--preset--gradient--gradient-purple);
 }
@@ -3832,6 +3828,10 @@ body.location .post-conseils-chapter-header time,  .entry-content--location .pos
   color: rgb(223 0 43 / var(--tw-text-opacity));
 }
 
+body.location .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--location .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--location .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--location .homegrade-blocks-lien-chapitre__cta:hover,  body.renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover,  .entry-content--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover,  .post-conseil-page--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover,  .post-question-page--renovation-circulaire .homegrade-blocks-lien-chapitre__cta:hover {
+  filter: invert(25%) sepia(79%) saturate(6075%) hue-rotate(263deg) brightness(99%) contrast(96%);
+}
+
 /* RENOVATION CIRCULAIRE — SPECIFIC */
 
 body.renovation-circulaire .post-conseils-chapter-header, .entry-content--renovation-circulaire .post-conseils-chapter-header, .post-conseil-page--renovation-circulaire .post-conseils-chapter-header, .post-question-page--renovation-circulaire .post-conseils-chapter-header {
@@ -4780,13 +4780,46 @@ article > *:not(.entry-content, .chapter-header-block),
   height: fit-content;
   width: 100%;
   border-radius: 1.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
   aspect-ratio: 1/1;
-  background-color: red;
 }
 
 .homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cover img {
-  max-width: 86%;
+  max-width: 76%;
-  max-height: 86%;
+  max-height: 76%;
+}
+
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 2rem;
+  font-weight: 700;
+}
+
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta::after {
+  position: absolute;
+  content: var(--tw-content);
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta:hover {
+  opacity: 1;
+}
+
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta {
+  transition: font-weight 0.3s ease-in-out;
+}
+
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-chapitre-thematique__cta .cta_arrow_button {
+  display: block;
+  width: 50px;
+  height: 50px;
 }
 
 .homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre {
@@ -4803,6 +4836,10 @@ article > *:not(.entry-content, .chapter-header-block),
   font-weight: 700;
 }
 
+.homegrade-blocks-chapitrage-thematique .homegrade-blocks-lien-chapitre__cta {
+  font-weight: 700;
+}
+
 /* ########### PAGE ############ */
 
 .demo-components .title {

resources/css/blocks/chapitrage-thematique.css

@@ -5,12 +5,28 @@
       @apply mt-0;
     }
     &__cover {
-      @apply rounded-3xl w-full h-fit;
+      @apply rounded-3xl w-full h-fit bg-white shadowed;
       aspect-ratio: 1/1;
-      background-color: red;
+
       img {
-        max-width: 86%;
+        max-width: 76%;
-        max-height: 86%;
+        max-height: 76%;
+      }
+    }
+    &__cta {
+      @apply after:absolute 
+			after:inset-0
+			font-bold
+			hover:opacity-100
+			pt-8
+			flex
+			items-center
+			justify-between;
+      transition: font-weight 0.3s ease-in-out;
+      .cta_arrow_button {
+        @apply block;
+        width: 50px;
+        height: 50px;
       }
     }
   }
@@ -20,5 +36,8 @@
     &__title {
       @apply text-xl font-bold pb-3;
     }
+    &__cta {
+      @apply font-bold;
+    }
   }
 }