amelioration graphique + responsive

src/pages/Stat/StatPage.module.css

@@ -27,6 +27,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  height:fit-content;
 }
 
 .participationHeader {
@@ -35,25 +36,53 @@
   margin-bottom: 20px;
   width: 100%;
 }
+.partiText{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.participationHeader label{
+  font-size:20px;
+  text-align: center;
+}
 
 .monthsDropdown {
-  margin-left: 10px;
-  padding: 5px;
+  width:25%;
   border-radius: 5px;
-  border: 1px solid #ccc;
+  opacity: 1;
+  background-color: transparent;
+  border:none;
 }
 
+
 .chartContainer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
+  
+  max-width: 80%;
+  margin: 0 auto;
+  position: relative;
 }
 
-.donutChart {
-  width: 150px;
-  height: 150px;
+
+.circularProgress {
+  width: 100%;
+  height: 100%;
 }
 
+.progressBackground {
+  opacity: 0.3;
+}
+
+.progressBar {
+  transition: stroke-dasharray 0.5s ease; 
+  stroke-linecap: round;
+}
+
+.progressText {
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+
+
 .rightSection {
   width: 60%;
   display: flex;
@@ -107,27 +136,11 @@
 .buttonGroup {
   display: flex;
   gap: 10px;
+  justify-content: right;
 }
 
-.validateButton {
-  background-color: #15ef1c;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 15px;
-  cursor: pointer;
-  width:200px;
-}
 
-.rejectButton {
-  background-color: #ff1100;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 15px;
-  cursor: pointer;
-  width:200px;
-}
+
 
 @media screen and (max-width: 760px) {
   .container {
@@ -138,6 +151,7 @@
   .leftBlock {
     width: 100%;
     margin-bottom: 20px;
+    height:fit-content;
   }
 
   .rightSection {