front groupe activation + fix Modal qui dépasse de l'écran (petit bug visuel mais ça marche)

front_end/src/App.css

@@ -242,9 +242,9 @@ textarea::placeholder {
 
 /* Select */
 select {
+  background-color: var(--tint2);
   color: var(--text);
-  background-color: var(--tint3);
-  border: 2px solid var(--tint5);
+  border: 1px solid var(--tint4);
   border-radius: 8px;
   padding: 10px 14px;
   cursor: pointer;
@@ -260,6 +260,7 @@ select:focus {
 select option {
   background-color: var(--tint2);
   color: var(--text);
+  border-radius: 5px;
 }
 
 /* Buttons */
@@ -364,7 +365,7 @@ button.add:hover,
 }
 
 /* Modal */
-.modal {
+.modalContent {
   background-color: var(--tint2);
   padding: 20px;
   min-width: 300px;
@@ -373,8 +374,22 @@ button.add:hover,
   border: 2px solid var(--green-primary);
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
   position: relative;
+  max-height:100%;
+  overflow-y: auto;
 }
 
+.modal {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    max-height:100%;
+  }
+
+
 .modal-overlay {
   position: fixed;
   inset: 0;