feat:map libre maps

src/lib/components/Header.svelte

@@ -20,27 +20,36 @@
 </script>
 
 <header class="app-header">
-	<h1 class="app-title">Serengo</h1>
-	<div class="profile-container">
-		<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
-		<ProfilePanel
-			username={user.username}
-			id={user.id}
-			isOpen={showProfilePanel}
-			onClose={closeProfilePanel}
-		/>
+	<div class="header-content">
+		<h1 class="app-title">Serengo</h1>
+		<div class="profile-container">
+			<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
+			<ProfilePanel
+				username={user.username}
+				id={user.id}
+				isOpen={showProfilePanel}
+				onClose={closeProfilePanel}
+			/>
+		</div>
 	</div>
 </header>
 
 <style>
 	.app-header {
+		width: 100%;
+		position: relative;
+		z-index: 10;
+		background-color: rgba(255, 255, 255, 0.2);
+		backdrop-filter: blur(10px);
+	}
+
+	.header-content {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: 16px 20px;
-		max-width: 1200px;
 		margin: 0 auto;
-		position: relative;
+		max-width: 1200px;
 	}
 
 	.profile-container {