style: component css

src/app/modules/profile/profile-info/profile-info.component.css

-.body {
+.corps {
+    height: 100%;
     background-image: url(../../../../../public/BACKGROUND_Home.png);
     background-size: cover;
     background-position: center;
@@ -12,7 +13,6 @@ h3,
 h4,
 p {
     font-family: 'Roboto';
-
 }
 
 p {
@@ -46,9 +46,6 @@ h1 {
 }
 
 .grid {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 9fr;
     height: 100%;
 }
 
@@ -61,15 +58,15 @@ h1 {
 }
 
 .container {
-    display: grid;
+    display: flex;
     flex-direction: column;
-    align-items: center;
+
     border-radius: 25px;
     background-color: #fff;
     box-shadow: 0 0 0.5% rgba(0, 0, 0, 0.1);
-    padding-left: 5%;
     width: 100%;
     height: 100%;
+    flex-grow: 0;
 
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -77,6 +74,13 @@ h1 {
     border: 1vmin solid #F3F3F3;
 }
 
+.list-wrapper {
+    /* max-height: 95%; */
+    overflow-y: auto;
+    overflow-x: hidden;
+
+}
+
 .form-group {
     display: grid;
     grid-template-columns: 2fr 1fr;
@@ -109,13 +113,7 @@ button {
     color: black;
 }
 
-.list {
-    height: 100%;
-    margin: 0;
-}
-
 .profile_info,
-.container,
 .profile_stats {
     display: flex;
     /* padding-left: 5%; */
@@ -129,6 +127,11 @@ button {
     align-items: center;
 }
 
+.new-quiz {
+    align-self: center;
+    flex-shrink: 0;
+}
+
 .created-quizzes_list {
     overflow-x: hidden;
     overflow-y: scroll;
@@ -145,9 +148,7 @@ button {
     width: 95%;
 }
 
-.new-quiz {
-    height: 10%;
-}
+
 
 .quiz-button p {
     margin: 0;

src/app/shared/quiz-list/quiz-list.component.css

+.list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 3;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-wrap: nowrap;
+    /* scrollbar-color: rebeccapurple gray; */
+    --sb-track-color: #f3f3f3;
+    --sb-thumb-color: #ffffff;
+    --sb-size: 14px;
+
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
+
 /* Styles génériques */
 button {
+    width: 100%;
+    /* margin-bottom: 1%; */
+    width: 90%;
+    flex-shrink: 0;
+    margin: 1%;
     font-size: 1rem;
-    padding: 0.5rem 1rem;
+    padding: 0.5vmin 1vmin;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     transition: background-color 0.3s ease;
+
+    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+    font-family: 'Roboto';
+    margin: 0;
+}
+
+h4 {
+    font-weight: bold;
 }
 
 button:disabled {
@@ -15,28 +53,22 @@ button:disabled {
 
 /* Variantes de style */
 .btn-primary {
-    background-color: #007bff;
-    color: #fff;
+    background-color: #F3F3F3;
+    color: #000000;
 }
 
 .btn-primary:hover:not(:disabled) {
-    background-color: #0056b3;
+    background-color: #D1D1D1;
+    /* Couleur légèrement plus foncée */
+    color: #333333;
 }
 
-.btn-secondary {
-    background-color: #6c757d;
-    color: #fff;
+.btn-selected {
+    background-color: #F3F3F3;
+    color: #2B73FE;
+    font-weight: bold;
 }
 
-.btn-secondary:hover:not(:disabled) {
+.btn-selected:hover:not(:disabled) {
     background-color: #565e64;
-}
-
-.btn-danger {
-    background-color: #dc3545;
-    color: #fff;
-}
-
-.btn-danger:hover:not(:disabled) {
-    background-color: #a71d2a;
 }
\ No newline at end of file

src/styles.css

 /* You can add global styles to this file, and also import other style files */
-html {
-    margin: 0;
-    padding: 0;
-}
-
+html,
 body {
     font-family: 'Roboto', sans-serif;
     margin: 0;
@@ -25,7 +21,7 @@ body {
     font-size: 5vmin;
     border-radius: 10px;
     border-color: #2B73FE;
-    border-width: 4px;  
+    border-width: 4px;
     border-style: solid;
     height: 100px;
     width: 100%;
@@ -67,4 +63,4 @@ body {
     margin: 2%;
     padding: 20px;
     font-size: 2vmin;
-  }
\ No newline at end of file
+}
\ No newline at end of file