fix reglage css

src/components/ui/Modal/Modal.module.css

@@ -14,19 +14,14 @@
 }
 
 .modal {
-    padding: 20px 20px 20px 20px;
     border-radius: 20px;
     min-width: 300px;
     max-width: 70%;
     max-height: none;
     position: relative;
-    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
     width: clamp(300px, 50vw, 600px);
-    border: 1px solid rgba(200, 200, 200, 0.3);
-    background: rgba(255, 255, 255, 0.5);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    color: #000;
     outline: none;
 }
 

src/components/ui/Modal/Modal.tsx

@@ -23,7 +23,7 @@ const Modal = ({ open, onClose, children, title }: ModalProps) => {
 
   return createPortal(
     <div className={styles.overlay} onClick={handleOverlayClick}>
-      <div className={styles.modal} onClick={handleModalClick}>
+      <div className={`glassCard ${styles.modal}`} onClick={handleModalClick}>
         {title && <h2>{title}</h2>}
         {children}
         <div className={styles.modalFooter}>

src/pages/Profile/ProfilePage.module.css

@@ -12,7 +12,7 @@
     box-sizing: border-box;
 }
 
-.settingImage {
+.settingAccount {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -126,7 +126,7 @@
   box-sizing: border-box;
 }
 
-.settingImage {
+.settingAcount {
   width: 100%;
   display: flex;
   justify-content: center;

src/pages/Profile/ProfilePage.tsx

@@ -144,6 +144,11 @@ function ProfilePage() {
               {user?.isAdmin && profileUser && !isOwnProfile && (
                 <ManageMember userToManage={profileUser} />
               )}
+              {isOwnProfile && (
+                  <div className={styles.settingAccount}>
+                    <SettingsModal />
+                  </div>
+              )}
             </div>
 
             <div className={styles.topDescription}>
@@ -157,11 +162,6 @@ function ProfilePage() {
                 <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
               </div>
 
-              {isOwnProfile && (
-                <div className={styles.settingImage}>
-                  <SettingsModal />
-                </div>
-              )}
             </div>
 
             <h2>Tâches :</h2>

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -89,18 +89,7 @@ export default function SettingsModal() {
             >
                 <div className={styles.content}>
                     <div className={`glassBorder ${styles.section}`}>
-                        <h3>Compte</h3>
+                        <h3>Modifier les informations du compte</h3>
-
-                        <Button variant="danger" onClick={handleLogout}>
-                            Déconnexion
-                        </Button>
-
-                        <Button
-                            variant="danger"
-                            onClick={() => setIsDelete(true)}
-                        >
-                            Supprimer le compte
-                        </Button>
                         <div className={styles.test}>
                             <h4>Changer de Prénom</h4>
                             <TextInput
@@ -140,6 +129,21 @@ export default function SettingsModal() {
                         <h3>Apparence</h3>
                         <ThemeSwitcher/>
                     </div>
+
+                    <div className={`glassBorder ${styles.section}`}>
+                        <h3>Sécurité du compte</h3>
+
+                        <Button variant="danger" onClick={handleLogout}>
+                            Déconnexion
+                        </Button>
+
+                        <Button
+                            variant="danger"
+                            onClick={() => setIsDelete(true)}
+                        >
+                            Supprimer le compte
+                        </Button>
+                    </div>
                 </div>
             </Modal>