From 91d5b0714428d20b655802cde31dd9c80dd14c0b Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Mon, 20 Oct 2025 14:26:23 +0200
Subject: [PATCH] FEATURE Refactoring forms and introducing infolettre styles

---
 resources/css/app.css                         |   3 +-
 resources/css/base/forms.css                  |   0
 resources/css/blocks/subscribe-infolettre.css |   3 +
 resources/css/forms/form-infolettre.css       |   7 +
 resources/css/forms/forms.css                 | 297 +-----------------
 resources/css/forms/gravity-forms.css         | 297 ++++++++++++++++++
 6 files changed, 321 insertions(+), 286 deletions(-)
 create mode 100644 resources/css/base/forms.css
 create mode 100644 resources/css/forms/form-infolettre.css
 create mode 100644 resources/css/forms/gravity-forms.css

diff --git a/resources/css/app.css b/resources/css/app.css
index 619fc3f..28990f2 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -16,6 +16,8 @@
 @import './forms/forms.css';
 @import './forms/form-contributions.css';
 @import './forms/form-contact.css';
+@import './forms/gravity-forms.css';
+@import './forms/form-infolettre.css';
 
 /* ########### COMPONENTS ############ */
 @import './components/buttons.css';
@@ -60,6 +62,5 @@
 @import './blocks/card-grid.css';
 @import './blocks/sitemap.css';
 
-
 /* ########### LIBS ############ */
 @import './libs/swiper.css';
diff --git a/resources/css/base/forms.css b/resources/css/base/forms.css
new file mode 100644
index 0000000..e69de29
diff --git a/resources/css/blocks/subscribe-infolettre.css b/resources/css/blocks/subscribe-infolettre.css
index aa20984..004f8f4 100644
--- a/resources/css/blocks/subscribe-infolettre.css
+++ b/resources/css/blocks/subscribe-infolettre.css
@@ -2,6 +2,9 @@
   @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%;
diff --git a/resources/css/forms/form-infolettre.css b/resources/css/forms/form-infolettre.css
new file mode 100644
index 0000000..8a7986e
--- /dev/null
+++ b/resources/css/forms/form-infolettre.css
@@ -0,0 +1,7 @@
+.subscribe-infolettre form {
+  @apply form-carhop form-carhop--dark;
+
+  div:has(input[type='email']) {
+    @apply mt-6;
+  }
+}
diff --git a/resources/css/forms/forms.css b/resources/css/forms/forms.css
index 5285274..14e2bc2 100644
--- a/resources/css/forms/forms.css
+++ b/resources/css/forms/forms.css
@@ -1,297 +1,24 @@
-:root {
-  --form-text-color: var(--wp--preset--color--carhop-green);
-  --form-border-color: var(--wp--preset--color--carhop-green);
-
-  /* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
-  --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
-  --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
+.form-carhop {
 }
-body.front-end {
-  .gform-theme--api,
-  .gform-theme--framework {
-    --gf-ctrl-desc-font-size: 1.1rem;
-    --gf-ctrl-desc-font-weight: 200;
-    --gf-ctrl-desc-color: rgba(255, 255, 255, 0.9);
-    --gf-ctrl-desc-color-focus: rgba(255, 255, 255, 0.9);
-    --gf-ctrl-desc-color-hover: rgba(255, 255, 255, 0.9);
-
-    --gf-font-weight-secondary: 300;
-    --gf-ctrl-font-size-secondary: 3.25rem;
-    --gf-ctrl-label-font-size-secondary: 1.35rem;
-    --gf-ctrl-label-font-weight-secondary: 200;
-
-    --gf-ctrl-label-font-size-req: 1rem;
-    --gf-ctrl-label-font-weight-req: 400;
-
-    --gf-ctrl-desc-color-error: white;
-
-    --gf-ctrl-radius: 0;
-
-    --gf-ctrl-btn-radius: 0;
-    --gf-ctrl-btn-bg-color-primary: transparent;
-    --gf-ctrl-btn-bg-color-primary-focus: white;
-    --gf-ctrl-btn-bg-color-primary-hover: white;
-    --gf-ctrl-btn-border-color-primary: white;
-
-    --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
-    --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
-    --gf-ctrl-btn-bg-color-primary-disabled-focus: var(--wp--preset--color--carhop-green);
-    --gf-ctrl-btn-bg-color-primary-disabled-hover: var(--wp--preset--color--carhop-green);
-    --gf-ctrl-btn-bg-color-primary-disabled-active: var(
-      --wp--preset--color--carhop-green
-    );
-    --gf-ctrl-btn-bg-color-hover-primary: white;
-    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--carhop-green);
-    --gf-ctrl-outline-color-focus: white;
-    --gf-ctrl-outline-offset: 4px;
-
-    --gf-ctrl-btn-font-size: 3.25rem;
-
-    --gf-ctrl-btn-font-weight: 300;
-    --gf-color-in-ctrl-primary: red;
-    --gf-ctrl-choice-check-color: white;
-
-    /* ERRORS */
-    --gf-color-danger: white;
-    /* --gf-color-danger-rgb: white; */
-    --gf-form-validation-border-color: transparent;
-    --gf-form-validation-heading-color: white;
-    --gf-form-validation-heading-font-weight: 600;
-    --gf-ctrl-bg-color-error: white;
-    --gf-form-validation-bg-color: transparent;
-    --gf-ctrl-desc-font-size-error: 1rem;
-    --gf-form-validation-heading-font-size: 1rem;
-    --gf-form-validation-heading-font-weight: 300;
-    --gf-form-validation-radius: 0;
-    --gf-form-validation-margin-y: 30px;
-    --gf-form-validation-padding-x: 0;
-
-    --gf-ctrl-bg-color-error: transparent;
-    --gf-form-validation-padding-y: 16px;
-    --gf-form-validation-shadow: none;
-
-    h2.gform_submission_error {
-      @apply justify-center;
-    }
-    .gform-icon--circle-error {
-      @apply 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;
-      &:before {
-        content: none;
-      }
-    }
-    .gfield_validation_message {
-      @apply flex items-center  bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
-      &:before {
-        content: '';
-        background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
-        @apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
-        border-radius: 50%;
-
-        margin-right: 0.5rem;
-      }
-
-      &.validation_message--hidden-on-empty {
-        @apply hidden;
-        &:before {
-          content: none;
-          @apply hidden;
-        }
-      }
-    }
-
-    .gfield:has(.gfield_validation_message) {
-      .ginput_container {
-        @apply relative;
-
-        &:before {
-          content: '';
-          @apply absolute block top-1/2 right-3 w-6 h-6 text-red-800  text-2xl  -translate-y-1/2;
-          background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
-        }
-      }
-
-      .ginput_container_textarea:before,
-      .ginput_container_fileupload:before {
-        @apply top-8;
-      }
-    }
-
-    input[type='submit'] {
-      --gf-ctrl-btn-font-size: 1.25rem;
-      --gf-ctrl-btn-padding-x: 2rem;
-      --gf-ctrl-btn-padding-y: 1rem;
-
-      @apply !mt-8 !mb-6;
-
-      /* --gf-ctrl-btn-bg-color-primary: transparent;
-      --gf-ctrl-btn-bg-color-primary-focus: white;
-      --gf-ctrl-btn-bg-color-primary-hover: white;
-      --gf-ctrl-btn-border-color-primary: white;
-
-      --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
-      --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
-      --gf-ctrl-btn-bg-color-primary-disabled-focus: var(
-        --wp--preset--color--carhop-green
-      );
-      --gf-ctrl-btn-bg-color-primary-disabled-hover: var(
-        --wp--preset--color--carhop-green
-      );
-      --gf-ctrl-btn-bg-color-primary-disabled-active: var(
-        --wp--preset--color--carhop-green
-      ); */
-    }
-    input[type='checkbox'] + label {
-      --gf-ctrl-label-font-size-secondary: 1.25rem;
-      --gf-ctrl-label-font-weight-secondary: 300;
-      @apply tracking-normal;
-    }
-
-    .gform_required_legend {
-      @apply hidden;
-    }
-
-    .gform_fields {
-      --gf-form-gap-x: 2rem;
-      --gf-form-gap-y: 3.4rem;
-    }
-    textarea::placeholder,
-    input::placeholder {
-      --gf-ctrl-placeholder-color: white;
-      --gf-ctrl-placeholder-color-focus: white;
-      --gf-ctrl-placeholder-color-hover: white;
-
-      color: white;
-    }
-    textarea,
-    input {
-      --gf-ctrl-bg-color: transparent;
-      --gf-ctrl-bg-color-focus: transparent !important;
-      --gf-ctrl-bg-color-hover: transparent !important;
-
-      --gf-ctrl-color: white;
-      --gf-ctrl-color-focus: white;
-      --gf-ctrl-color-hover: white;
-
-      --gf-ctrl-font-size: 1.2rem;
-      --gf-ctrl-font-weight: 300;
-
-      --gf-ctrl-border-color: white;
-      --gf-ctrl-border-color-focus: white;
-      --gf-ctrl-border-color-hover: white;
-      --gf-ctrl-padding-x: 1rem;
-      --gf-ctrl-padding-y: 2rem;
-    }
-
-    .gfield_description {
-      /* --gf-ctrl-desc-color: white;
-      --gf-ctrl-desc-color-focus: white;
-      --gf-ctrl-desc-color-hover: white; */
-    }
-    p {
-      @apply !pb-0;
-    }
-
-    /* input::placeholder {
-      color: red !important;
-    } */
-  }
-
-  /* .gfield:has(input[aria-required='true']) {
-    @apply relative;
-    &:after {
-      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
-      line-height: 1;
-    }
-  } */
-
-  select,
+.form-carhop--dark {
   input,
+  select,
   textarea {
-    @apply bg-transparent border border-primary p-4;
-    border-color: var(--form-border-color, #f1fcf9);
-    &::placeholder {
-      color: var(--form-text-color);
-      @apply !text-lg !font-light;
-      opacity: 0.6;
-    }
+    @apply border-white !p-4 font-light text-xl;
   }
-
-  .nf-field-element:has(input[aria-required='true']) {
-    @apply relative;
-    &:after {
-      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
-      line-height: 1;
-    }
+  input::placeholder,
+  select::placeholder,
+  textarea::placeholder {
+    @apply text-white opacity-60;
   }
 
   input[type='submit'] {
-    @apply text-white  w-12 h-12 relative block !mx-auto;
+    @apply bg-white text-primary cursor-pointer;
+    transition: transform 0.3s ease;
 
     &:hover {
-      @apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
-    }
-  }
-
-  .content-box {
-    --form-border-color: var(--content-box-text-color);
-    --form-text-color: var(--content-box-text-color);
-  }
-
-  /* label {
-    @apply sr-only;
-  } */
-
-  .nf-form-fields-required {
-  }
-
-  .nf-before-form-content {
-    .nf-form-fields-required {
-      @apply text-lg pb-12;
-      color: var(--form-text-color);
-      opacity: 0.9;
+      @apply bg-white text-primary;
+      transform: scale(1.02);
     }
   }
 }
-
-.gfield {
-  @apply !relative;
-
-  --gf-ctrl-label-color-primary: white;
-  --gf-ctrl-label-color-req: white;
-  --gf-ctrl-label-color-secondary: white;
-
-  .gfield_label {
-    @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
-    transition: all 0.15s ease-out;
-  }
-}
-.gfield:has(input:focus, textarea:focus),
-.gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
-  .gfield_label {
-    @apply !opacity-100;
-
-    top: -40px;
-  }
-  --gf-ctrl-placeholder-color: transparent;
-
-  #placeholder,
-  input::placeholder {
-    @apply !opacity-0;
-  }
-}
-.gfield_description a {
-  @apply underline underline-offset-8;
-  text-decoration-thickness: 1px;
-}
-
-.gform_wrapper {
-  @apply mt-12;
-}
-
-.gform_confirmation_wrapper {
-  @apply bg-white rounded-3xl px-8 py-4 text-primary;
-}
diff --git a/resources/css/forms/gravity-forms.css b/resources/css/forms/gravity-forms.css
new file mode 100644
index 0000000..5285274
--- /dev/null
+++ b/resources/css/forms/gravity-forms.css
@@ -0,0 +1,297 @@
+:root {
+  --form-text-color: var(--wp--preset--color--carhop-green);
+  --form-border-color: var(--wp--preset--color--carhop-green);
+
+  /* --gf-ctrl-focus-bg-color: var(--wp--preset--color--carhop-green);
+  --gf-ctrl-focus-color: var(--wp--preset--color--carhop-green);
+  --gf-ctrl-focus-border-color: var(--wp--preset--color--carhop-green); */
+}
+body.front-end {
+  .gform-theme--api,
+  .gform-theme--framework {
+    --gf-ctrl-desc-font-size: 1.1rem;
+    --gf-ctrl-desc-font-weight: 200;
+    --gf-ctrl-desc-color: rgba(255, 255, 255, 0.9);
+    --gf-ctrl-desc-color-focus: rgba(255, 255, 255, 0.9);
+    --gf-ctrl-desc-color-hover: rgba(255, 255, 255, 0.9);
+
+    --gf-font-weight-secondary: 300;
+    --gf-ctrl-font-size-secondary: 3.25rem;
+    --gf-ctrl-label-font-size-secondary: 1.35rem;
+    --gf-ctrl-label-font-weight-secondary: 200;
+
+    --gf-ctrl-label-font-size-req: 1rem;
+    --gf-ctrl-label-font-weight-req: 400;
+
+    --gf-ctrl-desc-color-error: white;
+
+    --gf-ctrl-radius: 0;
+
+    --gf-ctrl-btn-radius: 0;
+    --gf-ctrl-btn-bg-color-primary: transparent;
+    --gf-ctrl-btn-bg-color-primary-focus: white;
+    --gf-ctrl-btn-bg-color-primary-hover: white;
+    --gf-ctrl-btn-border-color-primary: white;
+
+    --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
+    --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
+    --gf-ctrl-btn-bg-color-primary-disabled-focus: var(--wp--preset--color--carhop-green);
+    --gf-ctrl-btn-bg-color-primary-disabled-hover: var(--wp--preset--color--carhop-green);
+    --gf-ctrl-btn-bg-color-primary-disabled-active: var(
+      --wp--preset--color--carhop-green
+    );
+    --gf-ctrl-btn-bg-color-hover-primary: white;
+    --gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--carhop-green);
+    --gf-ctrl-outline-color-focus: white;
+    --gf-ctrl-outline-offset: 4px;
+
+    --gf-ctrl-btn-font-size: 3.25rem;
+
+    --gf-ctrl-btn-font-weight: 300;
+    --gf-color-in-ctrl-primary: red;
+    --gf-ctrl-choice-check-color: white;
+
+    /* ERRORS */
+    --gf-color-danger: white;
+    /* --gf-color-danger-rgb: white; */
+    --gf-form-validation-border-color: transparent;
+    --gf-form-validation-heading-color: white;
+    --gf-form-validation-heading-font-weight: 600;
+    --gf-ctrl-bg-color-error: white;
+    --gf-form-validation-bg-color: transparent;
+    --gf-ctrl-desc-font-size-error: 1rem;
+    --gf-form-validation-heading-font-size: 1rem;
+    --gf-form-validation-heading-font-weight: 300;
+    --gf-form-validation-radius: 0;
+    --gf-form-validation-margin-y: 30px;
+    --gf-form-validation-padding-x: 0;
+
+    --gf-ctrl-bg-color-error: transparent;
+    --gf-form-validation-padding-y: 16px;
+    --gf-form-validation-shadow: none;
+
+    h2.gform_submission_error {
+      @apply justify-center;
+    }
+    .gform-icon--circle-error {
+      @apply 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;
+      &:before {
+        content: none;
+      }
+    }
+    .gfield_validation_message {
+      @apply flex items-center  bg-white border border-carhop-red-700 border-solid text-carhop-red-700 font-normal w-fit py-1 px-4 rounded-full mt-4;
+      &:before {
+        content: '';
+        background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+        @apply block w-5 h-5 bg-no-repeat bg-center bg-contain;
+        border-radius: 50%;
+
+        margin-right: 0.5rem;
+      }
+
+      &.validation_message--hidden-on-empty {
+        @apply hidden;
+        &:before {
+          content: none;
+          @apply hidden;
+        }
+      }
+    }
+
+    .gfield:has(.gfield_validation_message) {
+      .ginput_container {
+        @apply relative;
+
+        &:before {
+          content: '';
+          @apply absolute block top-1/2 right-3 w-6 h-6 text-red-800  text-2xl  -translate-y-1/2;
+          background-image: url('../resources/img/icons/carhop-attention-rouge.svg');
+        }
+      }
+
+      .ginput_container_textarea:before,
+      .ginput_container_fileupload:before {
+        @apply top-8;
+      }
+    }
+
+    input[type='submit'] {
+      --gf-ctrl-btn-font-size: 1.25rem;
+      --gf-ctrl-btn-padding-x: 2rem;
+      --gf-ctrl-btn-padding-y: 1rem;
+
+      @apply !mt-8 !mb-6;
+
+      /* --gf-ctrl-btn-bg-color-primary: transparent;
+      --gf-ctrl-btn-bg-color-primary-focus: white;
+      --gf-ctrl-btn-bg-color-primary-hover: white;
+      --gf-ctrl-btn-border-color-primary: white;
+
+      --gf-ctrl-btn-bg-color-primary-active: var(--wp--preset--color--carhop-green);
+      --gf-ctrl-btn-bg-color-primary-disabled: var(--wp--preset--color--carhop-green);
+      --gf-ctrl-btn-bg-color-primary-disabled-focus: var(
+        --wp--preset--color--carhop-green
+      );
+      --gf-ctrl-btn-bg-color-primary-disabled-hover: var(
+        --wp--preset--color--carhop-green
+      );
+      --gf-ctrl-btn-bg-color-primary-disabled-active: var(
+        --wp--preset--color--carhop-green
+      ); */
+    }
+    input[type='checkbox'] + label {
+      --gf-ctrl-label-font-size-secondary: 1.25rem;
+      --gf-ctrl-label-font-weight-secondary: 300;
+      @apply tracking-normal;
+    }
+
+    .gform_required_legend {
+      @apply hidden;
+    }
+
+    .gform_fields {
+      --gf-form-gap-x: 2rem;
+      --gf-form-gap-y: 3.4rem;
+    }
+    textarea::placeholder,
+    input::placeholder {
+      --gf-ctrl-placeholder-color: white;
+      --gf-ctrl-placeholder-color-focus: white;
+      --gf-ctrl-placeholder-color-hover: white;
+
+      color: white;
+    }
+    textarea,
+    input {
+      --gf-ctrl-bg-color: transparent;
+      --gf-ctrl-bg-color-focus: transparent !important;
+      --gf-ctrl-bg-color-hover: transparent !important;
+
+      --gf-ctrl-color: white;
+      --gf-ctrl-color-focus: white;
+      --gf-ctrl-color-hover: white;
+
+      --gf-ctrl-font-size: 1.2rem;
+      --gf-ctrl-font-weight: 300;
+
+      --gf-ctrl-border-color: white;
+      --gf-ctrl-border-color-focus: white;
+      --gf-ctrl-border-color-hover: white;
+      --gf-ctrl-padding-x: 1rem;
+      --gf-ctrl-padding-y: 2rem;
+    }
+
+    .gfield_description {
+      /* --gf-ctrl-desc-color: white;
+      --gf-ctrl-desc-color-focus: white;
+      --gf-ctrl-desc-color-hover: white; */
+    }
+    p {
+      @apply !pb-0;
+    }
+
+    /* input::placeholder {
+      color: red !important;
+    } */
+  }
+
+  /* .gfield:has(input[aria-required='true']) {
+    @apply relative;
+    &:after {
+      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
+      line-height: 1;
+    }
+  } */
+
+  select,
+  input,
+  textarea {
+    @apply bg-transparent border border-primary p-4;
+    border-color: var(--form-border-color, #f1fcf9);
+    &::placeholder {
+      color: var(--form-text-color);
+      @apply !text-lg !font-light;
+      opacity: 0.6;
+    }
+  }
+
+  .nf-field-element:has(input[aria-required='true']) {
+    @apply relative;
+    &:after {
+      @apply content-['*'] absolute top-3 right-3 text-red-800 text-2xl;
+      line-height: 1;
+    }
+  }
+
+  input[type='submit'] {
+    @apply text-white  w-12 h-12 relative block !mx-auto;
+
+    &:hover {
+      @apply bg-carhop-green-900 border border-carhop-green-900 cursor-pointer;
+    }
+  }
+
+  .content-box {
+    --form-border-color: var(--content-box-text-color);
+    --form-text-color: var(--content-box-text-color);
+  }
+
+  /* label {
+    @apply sr-only;
+  } */
+
+  .nf-form-fields-required {
+  }
+
+  .nf-before-form-content {
+    .nf-form-fields-required {
+      @apply text-lg pb-12;
+      color: var(--form-text-color);
+      opacity: 0.9;
+    }
+  }
+}
+
+.gfield {
+  @apply !relative;
+
+  --gf-ctrl-label-color-primary: white;
+  --gf-ctrl-label-color-req: white;
+  --gf-ctrl-label-color-secondary: white;
+
+  .gfield_label {
+    @apply !opacity-0 absolute top-1/2 left-4 text-white !text-lg !font-light;
+    transition: all 0.15s ease-out;
+  }
+}
+.gfield:has(input:focus, textarea:focus),
+.gfield:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) {
+  .gfield_label {
+    @apply !opacity-100;
+
+    top: -40px;
+  }
+  --gf-ctrl-placeholder-color: transparent;
+
+  #placeholder,
+  input::placeholder {
+    @apply !opacity-0;
+  }
+}
+.gfield_description a {
+  @apply underline underline-offset-8;
+  text-decoration-thickness: 1px;
+}
+
+.gform_wrapper {
+  @apply mt-12;
+}
+
+.gform_confirmation_wrapper {
+  @apply bg-white rounded-3xl px-8 py-4 text-primary;
+}