From 159389498be96aaca0a37811830fd516f993571f Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 13 Oct 2025 13:00:16 +0200
Subject: [PATCH] EQ stepper and select style

---
 eqlair/src/app/app.scss                       |  4 +++
 eqlair/src/app/pages/home/home.html           | 27 +++++++++----------
 eqlair/src/app/pages/home/home.scss           | 11 ++++++++
 .../projects/sae-lib/stepper/stepper.html     |  6 +++++
 .../projects/sae-lib/stepper/stepper.scss     | 22 +++++++++++++--
 5 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/eqlair/src/app/app.scss b/eqlair/src/app/app.scss
index 9f8997a..945ce17 100644
--- a/eqlair/src/app/app.scss
+++ b/eqlair/src/app/app.scss
@@ -46,6 +46,10 @@ textarea {
   border-radius: 6px;
 }
 
+select {
+  min-width: 235px;
+}
+
 // forms
 select, input {
   padding: 10px 16px;
diff --git a/eqlair/src/app/pages/home/home.html b/eqlair/src/app/pages/home/home.html
index 6256b56..1ef1acf 100644
--- a/eqlair/src/app/pages/home/home.html
+++ b/eqlair/src/app/pages/home/home.html
@@ -63,19 +63,18 @@
     name="keywords"
     placeholder="Saisir des mots clés pour affiner votre rechrche"
     type="text">
-  <sae-wip-block>
-    rechercher
-    <br>
-    <sae-m-button
-      [disabled]="disableSearch"
-      kind="secondary"
-      label="Réinitialiser"
-    ></sae-m-button>
-    <sae-m-button
-      [disabled]="disableSearch"
-      kind="primary"
-      label="Rechercher des cas similaires"
-    ></sae-m-button>
+  <br>
+  <sae-m-button
+    [disabled]="disableSearch"
+    kind="secondary"
+    label="Réinitialiser"
+    size="medium"
+  ></sae-m-button>
+  <sae-m-button
+    [disabled]="disableSearch"
+    kind="primary"
+    label="Rechercher des cas similaires"
+    size="medium"
+  ></sae-m-button>
 
-  </sae-wip-block>
 </div>
diff --git a/eqlair/src/app/pages/home/home.scss b/eqlair/src/app/pages/home/home.scss
index 1c268f9..0328813 100644
--- a/eqlair/src/app/pages/home/home.scss
+++ b/eqlair/src/app/pages/home/home.scss
@@ -1,6 +1,17 @@
 :host {
+  sae-stepper {
+    display: block;
+    width: 100%;
+    margin-bottom: 1rem;
+    height: 50px;
+  }
+
   textarea {
     margin: 1rem 0;
     width: 100%;
   }
+
+  .optionnal {
+    color: grey;
+  }
 }
diff --git a/my-workspace/projects/sae-lib/stepper/stepper.html b/my-workspace/projects/sae-lib/stepper/stepper.html
index b3e2954..eebf41c 100644
--- a/my-workspace/projects/sae-lib/stepper/stepper.html
+++ b/my-workspace/projects/sae-lib/stepper/stepper.html
@@ -1,7 +1,13 @@
 <div class="stepper">
   @for (ii of stepArray; track ii) {
+
+    @if (ii > 0) {
+      <div class="separator"></div>
+    }
     <div class="step {{ currentStep >= ii ? 'is-active' : 'is-inactive'}}">
+      <span class="label">
       {{ ii }}
+      </span>
     </div>
   }
 </div>
diff --git a/my-workspace/projects/sae-lib/stepper/stepper.scss b/my-workspace/projects/sae-lib/stepper/stepper.scss
index 11e5ac9..aa0745c 100644
--- a/my-workspace/projects/sae-lib/stepper/stepper.scss
+++ b/my-workspace/projects/sae-lib/stepper/stepper.scss
@@ -1,8 +1,25 @@
 :host {
+  .separator {
+    width: 100px;
+    background: grey;
+    height: 4px;
+    border-radius: 3px;
+
+    &.is-active {
+      background: blue;
+    }
+  }
+
   .step {
-    border-radius: 1px solid grey;
-    padding: 1rem;
+    border-radius: 100px;
+    border: solid 2px grey;
+    padding: 1rem 1.5rem;
     background: white;
+    width: 1.5rem;
+    float: left;
+    display: flex;
+    margin-right: 1rem;
+
 
     &.is-active {
       color: black;
@@ -11,6 +28,7 @@
 
     &.is-inactive {
       background: grey;
+      border-color: black;
       color: white;
     }
   }