SAE-BUT2/src/pages/Stat/StatPage.module.css

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  gap: 20px;
}



.block {
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
}

.leftBlock {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
}

.participationHeader {
  display: flex;
  align-items: center;
  /*justify-content: center;*/
  text-align: center;
  margin-bottom: 0px;
  width: 100%;
}
.participationHeader #months{
  text-align:center;
}

.partiText {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2%;
  margin-top: 2%;
  animation: slideInEvent 2s;
}

.partiText label {
  transition: all 0.3s ease;
}


.participationHeader label {
  font-size: 20px;
  text-align: right;
}
.participationHeader p{
  width:fit-content;
}


.chartContainer {
  max-width: 80%;
  margin: 0 auto;
  position: relative;

  animation: slideEvent2 2s;
}

@keyframes slideEvent2 {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.chartWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.chartPercentage {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 60px;
  font-weight: bold;
  color: #333;
}

.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;
  flex-direction: column;
  gap: 20px;
}

.rightBlock {
  width: 100%;
}

.rightBlock > h2 {
  font-size: 29px;
}

.eventsContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

/* Style de la scrollbar horizontale */
.eventsContainer::-webkit-scrollbar {
  height: 8px;
}

.eventsContainer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.eventsContainer::-webkit-scrollbar-thumb {
  background: rgba(30, 96, 249, 0.5);
  border-radius: 10px;
}

.eventsContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(30, 96, 249, 0.7);
}

.eventCard {
  min-width: calc((100% - 20px) / 3);
  max-width: calc((100% - 20px) / 3);
  flex-shrink: 0;
  padding: 10px;
  text-align: center;
  padding-bottom: 200px;
  box-sizing: border-box;
  opacity: 0;
  transform: translateX(20px);
  animation: slideInEvent 1s ease forwards;
}

/* animation card */
.eventCard:nth-child(1) {
  animation-delay: 0s;
}

.eventCard:nth-child(2) {
  animation-delay: 0.1s;
}

.eventCard:nth-child(3) {
  animation-delay: 0.2s;
}

.eventCard:nth-child(4) {
  animation-delay: 0.3s;
}

.eventCard:nth-child(5) {
  animation-delay: 0.4s;
}

.eventCard:nth-child(6) {
  animation-delay: 0.5s;
}


@keyframes slideInEvent {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.eventCard > h3 {
  font-size: 24px;
}

.membersContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 15px;
  max-height: 181px;
  overflow-y: auto;
  padding-right: 5px;
  scroll-behavior: smooth;
}

/* style scrollbar */ 
.membersContainer.membersContainer::-webkit-scrollbar {
  width: 8px;
}

.membersContainer.membersContainer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.membersContainer.membersContainer::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

.membersContainer.membersContainer::-webkit-scrollbar-thumb:hover {
  background: rgba(125, 249, 30, 0.7);
}

/*//////*/
.memberCard {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInMember 0.5s ease forwards;
}

.memberCard:nth-child(1) {
  animation-delay: 0s;
}

.memberCard:nth-child(2) {
  animation-delay: 0.1s;
}

.memberCard:nth-child(3) {
  animation-delay: 0.2s;
}




@keyframes slideInMember {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.memberCard p {
  font-weight: bold;
  font-size: 20px;
}

.buttonGroup {
  display: flex;
  gap: 10px;
  justify-content: right;
}

@media screen and (max-width: 760px) {
  .container {
    flex-direction: column;
     width:100%;
     padding: 0 0 0 0;
  /*  padding: 10px;*/
  }
  
  .leftBlock {
    width: 100%;
    margin-top:20px;
    height: fit-content;
  }
  
  .rightSection {
    width: 100%;
    margin:0 0 0 0;
    margin-bottom: 15px;
  }
  .rightBlock{
    width:100%;
    margin-bottom: 0px;
  }

  .rightBlock h2 {
  font-size: 20px;
}
  
  .eventCard {
    width: 100%;
    height:200px;
  }
  .eventCard h3{
    font-size:17px;
  }
  .donutChart {
    width: 120px;
    height: 120px;
  }
  .membersContainer {
    max-height: 200px;
  }
  .partiText{
    flex-direction: column;
    justify-content: center;
  }
  .partiText label{
    text-align: center;
  }
  .formControl {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .formDesign {
    margin: 0 auto;
    width: fit-content;
  }
    }