add colors variables from lib

sae-csc/src/styles/_sae-lib-imports.scss

@@ -1,9 +0,0 @@
-/**
- * Fichier centralisé pour importer les styles de sae-lib
- * À utiliser dans les composants avec: @use '@sae-lib/src/styles/_variables' as variables;
- */
-
-@forward '@sae-lib/src/styles/_variables.scss';
-@forward '@sae-lib/src/styles/_forms.scss';
-@forward '@sae-lib/src/styles/_global.scss';
-@forward '@sae-lib/src/styles/_shadows.scss';

sae-csc/src/styles/_variables-barrel.scss

@@ -1,5 +1,2 @@
 // Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
-@forward 'sae-lib/src/styles/_variables.scss';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_forms';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_global';
-//@forward '../../my-workspace/projects/sae-lib/src/styles/_shadows';
+@forward 'sae-lib/src/styles/variables.scss';

sae-csc/src/styles/app/styles/pages/_main.scss

@@ -0,0 +1,125 @@
+@use '../../../../styles/variables-barrel' as variables;
+
+#main_page {
+  main {
+    padding: 50px 64px;
+
+    .title {
+      font-size: 20px;
+      font-weight: 600;
+    }
+
+    .helper {
+      text-align: center;
+      margin-bottom: 16px;
+
+      color: #000;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 140%; /* 22.4px */
+
+      span {
+        margin-right: 12px;
+        margin-left: 12px;
+
+      }
+    }
+
+    .delete-button{
+      border: 0;
+      border-radius: 100%;
+      background: #F2F2F2;
+      color: grey;
+      cursor: pointer;
+      padding: 10px;
+      position: relative;
+      left: 92%;
+      top: 50px;
+      width: 37px;
+      &:hover{
+        background: #888;
+        color: #222;
+      }
+    }
+    textarea {
+      width: 648px;
+      height: 236px;
+      flex-shrink: 0;
+      border-radius: 4px;
+      background: #FFF;
+      box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
+      border-width: 0;
+      padding: 11px 14px;
+    }
+
+  }
+
+  #question_alaysis {
+    margin-top: 50px;
+  }
+}
+
+
+.filter-group {
+
+  .search{
+    display: flex;
+    min-height: 42px;
+    max-height: 42px;
+    padding: var(--Spacing-Spacing-30, 12px) var(--Spacing-Spacing-40, 16px);
+    align-items: center;
+    gap: var(--Spacing-Spacing-20, 8px);
+    align-self: stretch;
+  }
+  .chips-listing {
+    margin-top: 16px;
+    border-radius: 4px;
+    background: variables.$csc-filters-box-color;
+    width: 100%;
+    height: 400px;
+    padding: 12px;
+
+
+    .chips {
+      background: variables.$csc-chips-bg-color;
+      color: white;
+      border-radius: 100px;
+      padding: 12px 16px;
+      border: solid 1px variables.$csc-chips-bg-color;
+      width: 100%;
+    }
+  }
+}
+
+.fixed-navigation {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  padding: 16px 64px 16px 1181px;
+  justify-content: flex-end;
+  align-items: center;
+  background: white;
+
+  .next-step {
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 5px;
+    border: 1px solid white;
+    border-radius: 8px;
+    background: linear-gradient(145deg, #55BCEC -21.82%, #005AA2 82.35%), #FFF;
+    min-width: 200px;
+
+
+    color: var(--color-text-invert, #FFF);
+    text-align: center;
+    font-size: var(--Font-Base, 14px);
+    font-style: normal;
+    font-weight: 600;
+
+    letter-spacing: 1.12px;
+
+  }
+}

sae-csc/src/styles/main.scss

@@ -1,45 +1,2 @@
-/*
- * Fichier principal pour les styles globaux
- * Il contient les variables et styles réutilisables dans toute l'application
- */
 
-// Définir les couleurs de base de l'application
-$primary-color: #3f51b5;
-$secondary-color: #ff4081;
-$bg-color-nav: #333333;
-$text-color: #ffffff;
-
-// Autres variables globales
-$spacing-unit: 8px;
-$border-radius: 4px;
-
-// Mixins utiles
-@mixin flex-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-@mixin shadow-light {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-// Styles globaux
-body {
-  font-family: 'Roboto', sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-// Classes d'utilité
-.text-center {
-  text-align: center;
-}
-
-.mt-1 {
-  margin-top: $spacing-unit;
-}
-
-.mb-1 {
-  margin-bottom: $spacing-unit;
-}
+@use  "app/styles/pages/main.scss";