From 65a95309d5f5d39fb27058aa7a8f3cfce6121dc5 Mon Sep 17 00:00:00 2001
From: ouidade <ouidade@figureslibres.io>
Date: Fri, 16 May 2025 13:52:02 +0200
Subject: [PATCH] css fichier unique filtres

---
 .../custom/eql/dist/assets/css/bundle.css     | 361 +++++-------------
 .../custom/eql/scss/pages/_lesprojets.scss    | 147 +------
 .../custom/eql/scss/pages/ressources.scss     | 125 ------
 .../custom/eql/scss/partials/_filtres.scss    |  89 +++++
 web/themes/custom/eql/scss/styles.scss        |   1 +
 5 files changed, 201 insertions(+), 522 deletions(-)
 create mode 100644 web/themes/custom/eql/scss/partials/_filtres.scss

diff --git a/web/themes/custom/eql/dist/assets/css/bundle.css b/web/themes/custom/eql/dist/assets/css/bundle.css
index e229148..423caba 100644
--- a/web/themes/custom/eql/dist/assets/css/bundle.css
+++ b/web/themes/custom/eql/dist/assets/css/bundle.css
@@ -3983,8 +3983,9 @@ svg.ext {
 }
 .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters {
   margin-top: 4rem;
+  padding-left: 0.5rem;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
 }
 @media (max-width: 479px) {
   .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters {
@@ -3996,6 +3997,8 @@ svg.ext {
   content: "Filtrer par :";
   margin-right: 2rem;
   margin-bottom: 1rem;
+  margin-left: 0.5rem;
+  font-weight: 900;
   min-width: fit-content;
 }
 @media (max-width: 479px) {
@@ -4003,140 +4006,6 @@ svg.ext {
     padding-bottom: 1rem;
   }
 }
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  position: relative;
-  align-content: center;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 .form-item {
-  margin-right: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  align-content: center;
-}
-@media (max-width: 550px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 .form-item {
-    width: 100%;
-    margin: auto;
-  }
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 select, .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input {
-  padding: 0.3rem;
-  margin: 0.5rem;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input, .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 label {
-  margin: 0.5rem;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper legend {
-  display: none;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper .js-form-item-field-neuf-rehabilitation-value:first-of-type {
-  display: none;
-}
-@media (max-width: 479px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-neuf-rehabilitation-value--wrapper {
-    padding-bottom: 1rem;
-    padding-top: 1rem;
-    margin-inline-start: 0px;
-  }
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper legend {
-  display: none;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper .js-form-item-field-encours-fini-value:first-of-type {
-  display: none;
-}
-@media (max-width: 479px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-encours-fini-value--wrapper {
-    padding-bottom: 1rem;
-    margin-inline-start: 0px;
-  }
-}
-@media (max-width: 479px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-field-etape-du-projet-value {
-    max-width: 60vw;
-  }
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 .js-form-type-textfield label {
-  display: none;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=radio] {
-  display: none;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=radio] + label::before {
-  content: "";
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-  background: #fff;
-  border-radius: 0px;
-  border-color: black;
-  border-style: solid;
-  border-width: 1px;
-  margin-right: 0.5rem;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=radio]:checked + label::before {
-  background: rgb(0, 158, 227);
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 label {
-  padding-right: 1rem;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-submit-projets {
-  background-color: rgb(0, 158, 227);
-  color: white;
-  text-transform: uppercase;
-  border: none;
-  padding: 0.3rem 0.7rem;
-}
-@media (max-width: 479px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-submit-projets {
-    margin-left: 0rem;
-    margin-right: 2rem;
-  }
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-reset {
-  background-color: rgb(0, 158, 227);
-  color: white;
-  text-transform: uppercase;
-  border: none;
-  padding: 0.3rem 0.7rem;
-  margin-left: 1rem;
-}
-@media (min-width: 1495px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-reset {
-    position: absolute;
-    right: 0px;
-  }
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=checkbox] {
-  display: none;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=checkbox] + label::before {
-  content: "";
-  display: inline-block;
-  width: 15px;
-  height: 15px;
-  background: #fff;
-  border-radius: 0px;
-  border-color: black;
-  border-style: solid;
-  border-width: 1px;
-  margin-right: 0.5rem;
-}
-.path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 input[type=checkbox]:checked + label::before {
-  background: rgb(0, 158, 227);
-}
-@media (max-width: 479px) {
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 {
-    flex-direction: column;
-  }
-  .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-filters #views-exposed-form-projets-block-1 #edit-actions {
-    width: 100%;
-    margin: auto;
-  }
-}
 .path-projets .region-content #block-contenudelapageprincipale .layout--onecol .block-region-content .block-views-blockprojets-block-1 .view-projets .view-content {
   margin-top: 2rem;
   display: flex;
@@ -5496,126 +5365,6 @@ svg.ext {
     padding-bottom: 1rem;
   }
 }
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-}
-@media (max-width: 479px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 {
-    justify-content: center;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-item {
-  display: flex;
-  flex-direction: column;
-  max-width: 100%;
-  margin-bottom: 1rem;
-  padding: 0.5rem;
-  align-items: baseline;
-  border: solid black 0.5px;
-}
-@media (max-width: 810px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-item {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-item label {
-  flex: 2 1 auto;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-item input {
-  flex: 2 1 auto;
-  max-width: 55%;
-}
-@media (max-width: 810px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-item input {
-    max-width: 100%;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-select {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  padding-top: 0.5rem;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-select label {
-  width: 60%;
-  text-transform: lowercase;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-select select {
-  background-color: white;
-  border: none;
-  width: 50%;
-  padding-bottom: 0.2rem;
-}
-@media (max-width: 810px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-select select {
-    width: 100%;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield {
-  flex-direction: column;
-  padding-top: 0.8rem;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield label {
-  text-transform: lowercase;
-  padding-bottom: 0.2rem;
-  flex: 2 1 auto;
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 .js-form-type-textfield input {
-  flex: 2 1 auto;
-  max-width: 55%;
-}
-@media (max-width: 810px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1.js-form-item {
-    flex-direction: column;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-self: center;
-  margin-left: auto;
-}
-@media (max-width: 479px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions {
-    justify-content: center;
-    margin: auto;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions #edit-submit-base-de-donnees {
-  background-color: rgb(0, 158, 227);
-  color: white;
-  text-transform: uppercase;
-  border: none;
-  padding: 0.3rem 0.7rem;
-  margin-left: 2rem;
-}
-@media (max-width: 479px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions #edit-submit-base-de-donnees {
-    margin: auto;
-    margin-top: 1rem;
-  }
-}
-.path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions #edit-reset {
-  background-color: rgb(0, 158, 227);
-  color: white;
-  text-transform: uppercase;
-  border: none;
-  padding: 0.3rem 0.7rem;
-  margin-top: 1rem;
-  margin-left: 1rem;
-}
-@media (max-width: 479px) {
-  .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-filters #views-exposed-form-base-de-donnees-block-1 #edit-actions #edit-reset {
-    margin: auto;
-    margin-top: 1rem;
-  }
-}
 .path-ressources .layout-content .region-content #block-contenudelapageprincipale .layout--onecol .layout__region--content .block-region-content .block-views-blockbase-de-donnees-block-1 .view-base-de-donnees .view-content {
   display: flex;
   flex-direction: row;
@@ -6477,4 +6226,106 @@ html.js body.node-type-actualite.node-id-88.path-node.page-node-type-actualite d
 .slick-dots li.slick-active button:before {
   color: black;
   opacity: 0.75;
+}
+
+#views-exposed-form-projets-block-1 {
+  flex-direction: row;
+  position: relative;
+  align-items: center;
+}
+
+#views-exposed-form-base-de-donnees-block-1 {
+  flex-direction: column;
+  margin-top: 1rem;
+}
+@media (max-width: 479px) {
+  #views-exposed-form-base-de-donnees-block-1 {
+    justify-content: center;
+  }
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item {
+  flex-direction: column !important;
+  margin-right: 0 !important;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item input,
+#views-exposed-form-base-de-donnees-block-1 .js-form-item select {
+  width: 100%;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item label {
+  padding-right: 0 !important;
+}
+
+#views-exposed-form-base-de-donnees-block-1,
+#views-exposed-form-projets-block-1 {
+  display: flex;
+  flex-wrap: wrap;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item,
+#views-exposed-form-projets-block-1 .js-form-item {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  margin-right: 1rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  align-items: baseline;
+  border: solid black 0.5px;
+  justify-content: space-evenly;
+}
+@media (max-width: 810px) {
+  #views-exposed-form-base-de-donnees-block-1 .js-form-item,
+  #views-exposed-form-projets-block-1 .js-form-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item label,
+#views-exposed-form-projets-block-1 .js-form-item label {
+  flex: 2 1 auto;
+  padding-right: 2rem;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item label::after,
+#views-exposed-form-projets-block-1 .js-form-item label::after {
+  content: " : ";
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item input,
+#views-exposed-form-projets-block-1 .js-form-item input {
+  flex: 2 1 auto;
+  max-width: 55%;
+}
+@media (max-width: 810px) {
+  #views-exposed-form-base-de-donnees-block-1 .js-form-item input,
+  #views-exposed-form-projets-block-1 .js-form-item input {
+    max-width: 100%;
+  }
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item .form-checkbox,
+#views-exposed-form-projets-block-1 .js-form-item .form-checkbox {
+  margin-right: 1rem;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-item .select-wrapper,
+#views-exposed-form-projets-block-1 .js-form-item .select-wrapper {
+  margin: 0;
+}
+#views-exposed-form-base-de-donnees-block-1 .js-form-type-checkbox label::after,
+#views-exposed-form-projets-block-1 .js-form-type-checkbox label::after {
+  content: none;
+}
+#views-exposed-form-base-de-donnees-block-1 .form-actions input,
+#views-exposed-form-projets-block-1 .form-actions input {
+  color: white;
+  font-weight: 600;
+  text-transform: uppercase;
+  padding: 0.3rem 0.7rem;
+  background-color: rgb(0, 158, 227);
+  border: none;
+}
+#views-exposed-form-base-de-donnees-block-1 input, #views-exposed-form-base-de-donnees-block-1 select,
+#views-exposed-form-projets-block-1 input,
+#views-exposed-form-projets-block-1 select {
+  border: none;
+  background-color: transparent;
+  font-family: "Marianne";
+  font-size: 1rem;
 }
\ No newline at end of file
diff --git a/web/themes/custom/eql/scss/pages/_lesprojets.scss b/web/themes/custom/eql/scss/pages/_lesprojets.scss
index 9999a61..e059314 100644
--- a/web/themes/custom/eql/scss/pages/_lesprojets.scss
+++ b/web/themes/custom/eql/scss/pages/_lesprojets.scss
@@ -126,8 +126,9 @@
                                   }
                                 .view-filters{
                                     margin-top: 4rem;
+                                    padding-left: 0.5rem;
                                     display: flex;
-                                    flex-direction: row;
+                                    flex-direction: column;
                                     @media (max-width: 479px){
                                         flex-direction: column;
                                         padding-bottom: 3rem;
@@ -137,152 +138,14 @@
                                         content: 'Filtrer par :';
                                         margin-right: 2rem;
                                         margin-bottom: 1rem;
+                                        margin-left: 0.5rem;
+                                        font-weight: 900;
                                         // width: 160px;
                                         min-width: fit-content;
                                         @media (max-width: 479px){
                                             padding-bottom: 1rem;
                                         }
-                                    }
-
-                                    #views-exposed-form-projets-block-1{
-                                        
-                                        display: flex;
-                                        flex-direction: row;
-                                        flex-wrap: wrap;
-                                        position: relative;
-                                        align-content: center;
-                                        
-                                        .form-item{
-                                            margin-right: 1rem;
-                                            margin-bottom: 1rem;
-                                            display: flex;
-                                            align-content: center;
-                                            @media (max-width: 550px) {
-                                                width: 100%;
-                                                margin: auto;
-                                            }
-                                        }
-                                        select, input{
-                                            padding: 0.3rem;
-                                            margin:0.5rem;
-                                        }
-                                        input, label{
-                                            margin: 0.5rem;
-                                        }
-                                        #edit-field-neuf-rehabilitation-value--wrapper{
-                                            legend{display: none;}
-                                            .js-form-item-field-neuf-rehabilitation-value:first-of-type{
-                                                display: none;
-                                            }
-                                            @media (max-width: 479px){
-                                                padding-bottom: 1rem;
-                                                padding-top: 1rem;
-                                                margin-inline-start: 0px;
-                                            }
-                                        }
-                                        #edit-field-encours-fini-value--wrapper{
-                                            legend{display: none;}
-                                            .js-form-item-field-encours-fini-value:first-of-type{
-                                                display: none;
-                                            }
-                                            @media (max-width: 479px){
-                                                padding-bottom: 1rem;
-                                                margin-inline-start: 0px;
-                                            }
-                                        }
-                                        #edit-field-etape-du-projet-value{
-                                            @media (max-width: 479px){
-                                                max-width: 60vw;
-                                            }
-                                        }
-                                        .js-form-type-textfield{
-                                            label{display: none;}
-                                        }
-                                        input[type="radio"]{
-                                            display: none;
-                                        }
-                                        input[type="radio"] + label::before{
-                                            content:"";
-                                            display:inline-block;
-                                            width: 15px;
-                                            height: 15px;
-                                            background:#fff;
-                                            border-radius:0px;
-                                            border-color: rgba($color: #000000, $alpha: 1);
-                                            border-style: solid;
-                                            border-width: 1px;
-                                            margin-right: 0.5rem;
-
-                                        }
-                                        input[type="radio"]:checked + label::before{
-                                            background:$blue-light;
-                                        }
-                                        label{
-                                            padding-right: 1rem;
-                                        }
-                                        #edit-submit-projets{
-                                            // display: inline-block;
-                                            background-color: $blue-light; 
-                                            color: white;
-                                            text-transform: uppercase;
-                                            border: none;
-                                            padding: 0.3rem 0.7rem;
-                                            // margin-left: 2rem;
-                                            @media (max-width: 479px){
-                                                margin-left: 0rem;
-                                                margin-right: 2rem;
-                                            }
-                                            @media (min-width:1495px) {
-                                                // margin-left: 0;
-                                                // position: absolute;
-                                                // right: 150px;
-                                                // // justify-content: flex-end;
-                                                // margin-left: auto;
-                                            }
-                                        }
-                                        #edit-reset{
-                                            background-color: $blue-light; 
-                                            color: white;
-                                            text-transform: uppercase;
-                                            border: none;
-                                            padding: 0.3rem 0.7rem;
-                                            margin-left: 1rem;
-                                            @media (min-width:1495px) {
-                                                position: absolute;
-                                                right: 0px;
-                                            }
-
-                                        }
-
-                                        input[type="checkbox"]{
-                                            display: none;
-                                        }
-                                        input[type="checkbox"] + label::before{
-                                            content:"";
-                                            display:inline-block;
-                                            width: 15px;
-                                            height: 15px;
-                                            background:#fff;
-                                            border-radius:0px;
-                                            border-color: rgba($color: #000000, $alpha: 1);
-                                            border-style: solid;
-                                            border-width: 1px;
-                                            margin-right: 0.5rem;
-
-                                        }
-                                        input[type="checkbox"]:checked + label::before{
-                                            background:$blue-light;
-                                        }
-                                        @media (max-width: 479px){
-                                            flex-direction: column;
-                                            #edit-actions{
-                                                width: 100%;
-                                                margin: auto;
-                                            }
-                                        }
-                                    }
-            
-            
+                                    }            
                                 }
             
                                 //grille de projets
diff --git a/web/themes/custom/eql/scss/pages/ressources.scss b/web/themes/custom/eql/scss/pages/ressources.scss
index 5c374be..aa319b5 100644
--- a/web/themes/custom/eql/scss/pages/ressources.scss
+++ b/web/themes/custom/eql/scss/pages/ressources.scss
@@ -144,124 +144,6 @@
                                                 padding-bottom: 1rem;
                                             }
                                         }
-                                        #views-exposed-form-base-de-donnees-block-1{
-
-                                            // max-width: 20%;
-                                            display: flex;
-                                            flex-direction: column;
-                                            flex-wrap: wrap;
-                                            margin-top: 1rem;
-                                            @media (max-width: 479px){
-                                                justify-content: center;
-                                            }
-
-                                            .js-form-item{
-                                                display: flex;
-                                                flex-direction: column;
-                                                max-width: 100%;
-                                                margin-bottom: 1rem;
-                                                padding: 0.5rem;
-                                                align-items: baseline;
-                                                border: solid black 0.5px ;
-
-                                
-                                                @media(max-width: 810px){
-                                                    display: flex;
-                                                    flex-direction: row;
-                                                    justify-content: space-between;
-                                                }
-                                                label{
-                                                    flex: 2 1 auto;
-                                                }
-                                                input{
-                                                    flex: 2 1 auto;
-                                                    max-width: 55%;
-                                                    @media(max-width: 810px){
-                                                        max-width: 100%;
-                                                    }
-                                                }
-                                            }
-                                            .js-form-type-select{
-                                                display: flex;
-                                                flex-direction: row;
-                                                justify-content: space-evenly;
-                                                padding-top: 0.5rem;
-                                                label{
-                                                    width: 60%;
-                                                    text-transform: lowercase;
-                                                }
-                                                select{
-                                                    background-color: white;
-                                                    border: none;
-                                                    width: 50%;
-                                                    padding-bottom: 0.2rem;
-                                                    @media(max-width: 810px){
-                                                        width: 100%;
-                                                    }
-                                                }
-                                                
-                                            }
-                                            .js-form-type-textfield{
-                                                flex-direction: column;
-                                                padding-top: 0.8rem;
-                                               
-                                                label{
-                                                    text-transform: lowercase;
-                                                    padding-bottom: 0.2rem;
-                                                    flex: 2 1 auto;
-                                                }  
-                                               
-                                                input{
-                                                    flex: 2 1 auto;
-                                                    max-width: 55%;
-                                                }
-                                            }
-
-                                            &.js-form-item{
-                                                @media(max-width: 810px){
-                                                flex-direction: column;
-                                                }
-                                            }
-                                            #edit-actions{
-                                                display: flex;
-                                                flex-direction: column;
-                                                justify-content: space-between;
-                                                align-self: center;
-                                                margin-left: auto;
-                                                @media (max-width: 479px){
-                                                    justify-content: center;
-                                                    margin: auto;
-                                                }
-                                                #edit-submit-base-de-donnees{
-                                                    background-color: $blue-light; 
-                                                    color: white;
-                                                    text-transform: uppercase;
-                                                    border: none;
-                                                    padding: 0.3rem 0.7rem;
-                                                    margin-left: 2rem;
-
-                                                    @media (max-width: 479px){
-                                                        margin: auto;
-                                                        margin-top: 1rem;
-                                                    }
-                                                }
-                                                #edit-reset{
-                                                    background-color: $blue-light; 
-                                                    color: white;
-                                                    text-transform: uppercase;
-                                                    border: none;
-                                                    padding: 0.3rem 0.7rem;
-                                                    margin-top: 1rem;
-                                                    margin-left: 1rem;
-                                                    @media (max-width: 479px){
-                                                        margin: auto;
-                                                        margin-top: 1rem;
-                                                    }
-                                                }    
-                                            }
-                                            
-                                        }
-
 
                                     }
                                     .view-content{
@@ -461,19 +343,12 @@
                                                             }
                                                             .field--name-field-images{
                                                                 grid-column: 1;
-                                                                // display: none;
-                                                                // width: 30%;
-                                                                // width: fit-content;
-                                                                
-                                                                // height: 100px;
                                                                 .field__item{
                                                                     height: 100px;
                                                                 }
                                                                 img{
                                                                     height: 100%;
                                                                     width: auto;
-                                                                    // width: 100%;
-                                                                    // height: auto;
                                                                 }
                                                             }
                                                             .field--name-field-date-de-parution{
diff --git a/web/themes/custom/eql/scss/partials/_filtres.scss b/web/themes/custom/eql/scss/partials/_filtres.scss
new file mode 100644
index 0000000..ffbc56e
--- /dev/null
+++ b/web/themes/custom/eql/scss/partials/_filtres.scss
@@ -0,0 +1,89 @@
+#views-exposed-form-projets-block-1{
+    flex-direction: row;
+    position: relative;
+    align-items: center;
+}
+
+#views-exposed-form-base-de-donnees-block-1{
+    flex-direction: column;
+    margin-top: 1rem;
+    @media (max-width: 479px){
+        justify-content: center;
+    }
+    .js-form-item{
+        flex-direction: column !important;
+        margin-right: 0 !important;
+        input,
+        select{
+            width: 100%;
+        }
+        label{
+            padding-right: 0 !important;
+        }
+
+    }
+
+}
+
+#views-exposed-form-base-de-donnees-block-1, 
+#views-exposed-form-projets-block-1{
+    display: flex;
+    flex-wrap: wrap;
+    .js-form-item{
+        display: flex;
+        flex-direction: row;
+        max-width: 100%;
+        margin-right: 1rem;
+        margin-bottom: 1rem;
+        padding: 0.5rem 1rem;
+        align-items: baseline;
+        border: solid black 0.5px ;
+        justify-content: space-evenly;
+        @media(max-width: 810px){
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+        label{
+            flex: 2 1 auto;
+            padding-right: 2rem;
+            &::after{
+                content: ' : ';
+            }
+        }
+        input{
+            flex: 2 1 auto;
+            max-width: 55%;
+            @media(max-width: 810px){
+                max-width: 100%;
+            }
+        }
+        .form-checkbox{
+            margin-right: 1rem;
+        }
+        .select-wrapper{
+            margin: 0;
+        }
+    }
+    .js-form-type-checkbox label{
+        &::after{
+            content: none;
+        }
+    }
+    .form-actions{
+        input{
+            color: white;
+            font-weight: 600;
+            text-transform: uppercase;
+            padding: 0.3rem 0.7rem;
+            background-color: $blue-light; 
+            border: none;
+        }
+    }
+    input, select{
+        border: none;
+        background-color: transparent;
+        font-family: "Marianne";
+        font-size: 1rem;
+    }
+}
\ No newline at end of file
diff --git a/web/themes/custom/eql/scss/styles.scss b/web/themes/custom/eql/scss/styles.scss
index 6dce406..21fe475 100644
--- a/web/themes/custom/eql/scss/styles.scss
+++ b/web/themes/custom/eql/scss/styles.scss
@@ -61,4 +61,5 @@
 @import "partials/_slick_custom.scss";
 @import "partials/_slick";
 @import "partials/_slick-theme";
+@import "partials/_filtres";
 // @import "partials/_block_third_ressources_liees";