list without animation

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,8 +1,8 @@
-/* Styles de base (mobile) */
 .container {
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
+  margin-top: 50px;
 }
 
 .profileboard {
@@ -10,19 +10,33 @@
   padding: 15px;
   border-radius: 10px;
   box-sizing: border-box;
+  margin-top: 3%;
+  position: relative;
 }
 
-.contentWrapper {
+.mainContent {
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.basicInfo {
+  flex: 1;
+}
+
+.expandedContent {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
   width: 100%;
 }
 
 .profilePictureContainer {
   width: 120px;
   height: 120px;
-  margin-bottom: 15px;
+  margin-right: 20px;
 }
 
 .profilePicture {
@@ -32,97 +46,67 @@
   object-fit: cover;
 }
 
-.description {
-  width: 100%;
-  text-align: left;
-  margin-left: 4%;
-}
-
-.topDescription {
+.textInfo {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  margin-bottom: 15px;
+  flex: 1;
 }
 
-.infoBlock {
-  width: 100%;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.event {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 10px;
-  border-radius: 8px;
-}
-
-.eventTasks {
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.3s ease-out, opacity 0.2s ease;
-  opacity: 0;
-  padding-left: 20px;
-}
-
-.eventTasks.expanded {
-  max-height: 500px;
-  opacity: 1;
+.contactInfo {
   margin-top: 10px;
 }
 
-.description h2 {
-  font-size: 30px;
-  margin-bottom: 2%;
+.contactInfo p {
+  margin: 5px 0;
 }
 
-.description button {
-  width: 50px;
-  height: 50px;
+.expandButton {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background: transparent;
+  border: none;
+  font-size: 16px;
+  margin-left: 10px;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.voirPlus {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  color: #007bff;
+  text-decoration: none;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.voirPlus:hover {
+  text-decoration: underline;
 }
 
-/* Tablette (768px et plus) */
 @media screen and (min-width: 768px) {
-  .contentWrapper {
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
   .profilePictureContainer {
     width: 150px;
     height: 150px;
-    margin-right: 20px;
-    margin-bottom: 0;
   }
-
-  .description {
-    width: calc(100% - 170px);
-    margin-left: 4%;
-  }
-
-  .topDescription {
-    flex-direction: row;
-    justify-content: space-between;
-  }
-
-  .infoBlock {
-    width: 48%;
-  }
-
-  .event {
-    padding: 15px;
+  .voirPlus{
+    text-align: right;
   }
 }
 
-/* Desktop (1024px et plus) */
 @media screen and (min-width: 1024px) {
   .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
+    margin-top:50px;
+    margin-bottom: 50px;
   }
 
   .profileboard {
@@ -133,19 +117,9 @@
     width: 200px;
     height: auto;
   }
-
-  .description {
-    width: calc(100% - 220px);
-    margin-left: 4%;
-    display:flex;
-    flex-direction: column;
-  }
-  .topDescription{
-    display:flex;
-    flex-direction: column;
-  }
-
-  .event {
-    padding: 18px;
-  }
 }
+
+
+
+
+