STYLE Refining aspect

resources/css/blocks/subscribe-infolettre.css

@@ -1,18 +1,14 @@
 .subscribe-infolettre {
   @apply relative !text-white lg:px-24 px-4 md:px-12 !mb-32 !mt-0;
-
   z-index: 5;
 
-
-  
   &:after {
     @apply content-[""] absolute inset-0 bg-carhop-green-800 z-0 w-full h-full;
     left: 50%;
     transform: perspective(800px) rotateY(3deg) rotateX(1deg) translateX(-50%);
   }
-
   &__inner {
-    @apply max-w-screen-3xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-y-12 2xl:gap-x-32 py-24 xl:py-32 2xl:py-40 items-center relative z-10;
+    @apply max-w-screen-3xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-12 2xl:gap-x-32 py-24 xl:py-32 2xl:py-40 items-center relative z-10;
   }
   h1,
   h2,

resources/css/forms/form-infolettre.css

@@ -1,7 +1,21 @@
 .subscribe-infolettre form {
-  @apply form-carhop form-carhop--dark;
+  @apply form-carhop form-carhop--dark !pt-20;
+  li.parsley-required {
+    @apply bg-white text-red-700 rounded-full px-4 py-2 w-fit font-medium  text-base flex items-center mt-4;
 
+    &:before {
+      content: ' ';
+      @apply block border-none;
+      background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+      @apply bg-no-repeat bg-center bg-contain text-carhop-red-700   rounded-full text-3xl  w-6 h-6;
+
+      margin-right: 0.5rem;
+    }
+  }
   div:has(input[type='email']) {
     @apply mt-6;
   }
+  input[type='submit'] {
+    @apply !block !mt-12;
+  }
 }

resources/css/forms/forms.css

@@ -1,24 +1,49 @@
 .form-carhop {
+  input,
+  select,
+  textarea {
+    @apply !p-4 font-light text-xl;
+
+    &:focus-visible {
+      outline-style: solid;
+      outline-offset: 6px;
+      outline-color: white;
+      outline-width: 3px !important;
+      backdrop-filter: brightness(1.05) blur(10.2px);
+    }
+  }
+
+  input::placeholder,
+  select::placeholder,
+  textarea::placeholder {
+    @apply opacity-60;
+  }
+  input[type='submit'] {
+    @apply cursor-pointer font-medium !w-fit !ml-auto !mx-auto;
+    transition: transform 0.3s ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
 }
 .form-carhop--dark {
   input,
   select,
   textarea {
-    @apply border-white !p-4 font-light text-xl;
+    @apply border-white;
   }
   input::placeholder,
   select::placeholder,
   textarea::placeholder {
-    @apply text-white opacity-60;
+    @apply text-white;
   }
 
   input[type='submit'] {
     @apply bg-white text-primary cursor-pointer;
-    transition: transform 0.3s ease;
 
     &:hover {
       @apply bg-white text-primary;
-      transform: scale(1.02);
     }
   }
 }