feat : Première navigation

app.json

@@ -38,7 +38,8 @@
         }
       ],
       "expo-image",
-      "expo-font"
+      "expo-font",
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

package-lock.json

@@ -12,6 +12,7 @@
         "@expo-google-fonts/jetbrains-mono": "^0.4.1",
         "@expo-google-fonts/space-grotesk": "^0.4.1",
         "@expo/ui": "~56.0.14",
+        "@react-navigation/bottom-tabs": "^7.18.18",
         "@tanstack/react-query": "^5.102.8",
         "axios": "^1.20.0",
         "babel-preset-expo": "^57.0.9",
@@ -27,6 +28,7 @@
         "expo-linear-gradient": "~56.0.4",
         "expo-linking": "~56.0.12",
         "expo-router": "~56.2.7",
+        "expo-secure-store": "~56.0.4",
         "expo-splash-screen": "~56.0.10",
         "expo-status-bar": "~56.0.4",
         "expo-symbols": "~56.0.5",
@@ -2866,6 +2868,96 @@
         }
       }
     },
+    "node_modules/@react-navigation/bottom-tabs": {
+      "version": "7.18.18",
+      "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-7.18.18.tgz",
+      "integrity": "sha512-8XEvMG7SeBEY1zPSM3Bt3T12db1Q+j9qAMakdoSVkbFBXo5+rbrsdz4kOVtCs7vXOEeJfOEIZlubgDb4zRFHAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-navigation/elements": "^2.9.40",
+        "color": "^4.2.3",
+        "sf-symbols-typescript": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^7.3.18",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 4.0.0",
+        "react-native-screens": ">= 4.0.0"
+      }
+    },
+    "node_modules/@react-navigation/core": {
+      "version": "7.21.13",
+      "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-7.21.13.tgz",
+      "integrity": "sha512-d1syMXra7RlJjGsjsIxEA14F6U+awFtQJeOfDc+V7x3y1mPqYQVTYnqnt3PR+fBBouUKaKsgKZsSR3MP5919Xg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-navigation/routers": "^7.6.4",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.3.11",
+        "query-string": "^7.1.3",
+        "react-is": "^19.1.0",
+        "use-latest-callback": "^0.2.4",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0"
+      }
+    },
+    "node_modules/@react-navigation/elements": {
+      "version": "2.9.40",
+      "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-2.9.40.tgz",
+      "integrity": "sha512-x2fCMVKU23YeQvHSCFq2mVRYAbHqYNqb8kfWSEfIQ+XUX7dBXWd93/pr0w5jLjALDHDxQUaJKh4mIqr8q3zAwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color": "^4.2.3",
+        "use-latest-callback": "^0.2.4",
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@react-native-masked-view/masked-view": ">= 0.2.0",
+        "@react-navigation/native": "^7.3.18",
+        "react": ">= 18.2.0",
+        "react-native": "*",
+        "react-native-safe-area-context": ">= 4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-masked-view/masked-view": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-navigation/native": {
+      "version": "7.3.18",
+      "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-7.3.18.tgz",
+      "integrity": "sha512-5lLYl0Kt85jcpEYxXzj2ecIKta+yo4EcAIOZoJe6jU9lbR0lu6sAQsotU3rlVAYL1VBY/xLemxs4WQ2LJs4Oew==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@react-navigation/core": "^7.21.13",
+        "escape-string-regexp": "^4.0.0",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^3.3.11",
+        "standard-navigation": "^0.0.8",
+        "use-latest-callback": "^0.2.4"
+      },
+      "peerDependencies": {
+        "react": ">= 18.2.0",
+        "react-native": "*"
+      }
+    },
+    "node_modules/@react-navigation/routers": {
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-7.6.4.tgz",
+      "integrity": "sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.27.10",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.10.tgz",
@@ -5124,6 +5216,15 @@
         }
       }
     },
+    "node_modules/expo-secure-store": {
+      "version": "56.0.4",
+      "resolved": "https://registry.npmjs.org/expo-secure-store/-/expo-secure-store-56.0.4.tgz",
+      "integrity": "sha512-hjEi/gmpdFFJ9lYbdp3k3p/WchV7Gi0Qt8jt/m/0WJadqQrskafHAlDxbZkII1cN3Yd7zp9Lvkeq3UfGhSwirQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-server": {
       "version": "56.0.4",
       "resolved": "https://registry.npmjs.org/expo-server/-/expo-server-56.0.4.tgz",
@@ -9656,6 +9757,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/standard-navigation": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/standard-navigation/-/standard-navigation-0.0.8.tgz",
+      "integrity": "sha512-TyVbo7INUDWtsUWDFn8RR7kwR87U0S4xHfLfbbnyeC581TmmyqQ+eM+nPw8rQTSD8QitRVcYfPaSHr/QJiUy1g==",
+      "license": "MIT",
+      "peer": true,
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -10181,6 +10292,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",

package.json

@@ -7,6 +7,7 @@
     "@expo-google-fonts/jetbrains-mono": "^0.4.1",
     "@expo-google-fonts/space-grotesk": "^0.4.1",
     "@expo/ui": "~56.0.14",
+    "@react-navigation/bottom-tabs": "^7.18.18",
     "@tanstack/react-query": "^5.102.8",
     "axios": "^1.20.0",
     "babel-preset-expo": "^57.0.9",
@@ -22,6 +23,7 @@
     "expo-linear-gradient": "~56.0.4",
     "expo-linking": "~56.0.12",
     "expo-router": "~56.2.7",
+    "expo-secure-store": "~56.0.4",
     "expo-splash-screen": "~56.0.10",
     "expo-status-bar": "~56.0.4",
     "expo-symbols": "~56.0.5",

src/app/(auth)/_layout.tsx

@@ -0,0 +1,13 @@
+import { useAuth } from '@/stores/authStore';
+import { Redirect, Stack } from 'expo-router';
+
+export default function AuthLayout() {
+    const session = useAuth((state) => state.session);
+
+    if (session) {
+        const href = (session.role === 'org' ? '/(org)' : '/(tabs)') as any;
+        return <Redirect href={href} />;
+    }
+
+    return <Stack screenOptions={{ headerShown: false}} />;
+}

src/app/(auth)/interets.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function InteretsScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Interets</Text>
+			<Text style={styles.description}>Base ecran interets</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(auth)/login.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function LoginScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Login</Text>
+			<Text style={styles.description}>Base ecran login</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(auth)/onboarding.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function OnboardingScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Onboarding</Text>
+			<Text style={styles.description}>Base ecran onboarding</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(org)/_layout.tsx

@@ -0,0 +1,78 @@
+import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
+import { CreateActionSheet } from '@/components/organizer/CreateActionSheet';
+import { useAuth } from '@/stores/authStore';
+import { colors } from '@/theme/colors';
+import { Redirect, Tabs, router } from 'expo-router';
+import { CalendarDays, ChartColumn, LayoutDashboard, UserRound } from 'lucide-react-native';
+import { useState } from 'react';
+
+export default function OrgLayout() {
+    const session = useAuth((state) => state.session);
+    const [createOpen, setCreateOpen] = useState(false);
+    
+    if (!session) return <Redirect href="../(auth)/login" />;
+
+    if (session.role !== 'org') return <Redirect href="../(tabs)" />;
+
+    return (
+        <>
+        <Tabs
+            screenOptions={{
+                headerShown: false,
+                sceneStyle: { backgroundColor: colors.deepBackground },
+            }}
+            tabBar={(props) => <BahlaTabBar {...props}
+                fabRouteName='create'
+                fabAccessibilityLabel='Créer un événement ou un post'
+                onFabPress={() => setCreateOpen(true)} />}
+        >
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: 'Tableau',
+                    tabBarIcon: ({ color, size }) => <LayoutDashboard color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="events"
+                options={{
+                    title: 'Events',
+                    tabBarIcon: ({ color, size }) => <CalendarDays color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="create"
+                options={{ title: 'Créer' }}
+                listeners={{ tabPress: (e) => e.preventDefault() }}
+            />
+            <Tabs.Screen
+                name="stats"
+                options={{
+                    title: 'Stats',
+                    tabBarIcon: ({ color, size }) => <ChartColumn color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="profile"
+                options={{
+                    title: 'Profil',
+                    tabBarIcon: ({ color, size }) => <UserRound color={color} size={size} />,
+                }}
+            />
+        </Tabs>
+
+        <CreateActionSheet
+            visible={createOpen}
+            onClose={() => setCreateOpen(false)}
+            onCreateEvent={() => {
+            setCreateOpen(false);
+            router.push('/create/event');
+            }}
+            onCreatePost={() => {
+            setCreateOpen(false);
+            router.push('/create/post');
+            }}
+        />
+        </>
+    );
+}

src/app/(org)/create.tsx

@@ -0,0 +1,7 @@
+/* ------------------------------------------------------------------ *
+ * Route factice : réserve l'emplacement central de la tab bar.
+ * Elle n'est jamais atteinte — le listener de (org)/_layout la bloque.
+ * ------------------------------------------------------------------ */
+export default function CreatePlaceholder() {
+  return null;
+}

src/app/(org)/events.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function OrgEventsScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Org Events</Text>
+			<Text style={styles.description}>Base ecran events organisateur</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(org)/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function OrgHomeScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Org Home</Text>
+			<Text style={styles.description}>Base ecran organisation</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(org)/profile.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function OrgProfileScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Org Profile</Text>
+			<Text style={styles.description}>Base ecran profil organisateur</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(org)/stats.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function OrgStatsScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Org Stats</Text>
+			<Text style={styles.description}>Base ecran statistiques organisateur</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(tabs)/_layout.tsx

@@ -0,0 +1,52 @@
+import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
+import { useAuth } from '@/stores/authStore';
+import { colors } from '@/theme/colors';
+import { Redirect, Tabs } from 'expo-router';
+import { Compass, Map, Ticket, UserRound } from 'lucide-react-native';
+
+export default function TabsLayout() {
+    const session = useAuth((state) => state.session);
+
+    if (!session) return <Redirect href="../(auth)/login" />;
+
+    if (session.role === 'org') return <Redirect href="../(org)" />;
+
+    return (
+        <Tabs
+            screenOptions={{
+                headerShown: false,
+                sceneStyle: { backgroundColor: colors.deepBackground },
+            }}
+            tabBar={(props) => <BahlaTabBar {...props} />}
+        >
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: 'Découvrir',
+                    tabBarIcon: ({ color, size }) => <Compass color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="map"
+                options={{
+                    title: 'Carte',
+                    tabBarIcon: ({ color, size }) => <Map color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="my-events"
+                options={{
+                    title: 'Mes events',
+                    tabBarIcon: ({ color, size }) => <Ticket color={color} size={size} />,
+                }}
+            />
+            <Tabs.Screen
+                name="profile"
+                options={{
+                    title: 'Profil',
+                    tabBarIcon: ({ color, size }) => <UserRound color={color} size={size} />,
+                }}
+            />
+        </Tabs>
+    );
+}

src/app/(tabs)/index.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function HomeTabScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Accueil</Text>
+			<Text style={styles.description}>Base ecran accueil tab</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(tabs)/map.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function MapTabScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Map</Text>
+			<Text style={styles.description}>Base ecran carte</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(tabs)/my-events.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function MyEventsTabScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>My Events</Text>
+			<Text style={styles.description}>Base ecran mes events</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/(tabs)/profile.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function ProfileTabScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Profile</Text>
+			<Text style={styles.description}>Base ecran profil tab</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/_layout.tsx

@@ -1,19 +1,58 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Stack } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import * as SystemUI from 'expo-system-ui';
+import { useEffect } from 'react';
+import { StatusBar } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import { queryClient } from '../hooks/queryClient';
 import { useAppFonts } from '../theme/typography';
 
+import { useAuth } from '@/stores/authStore';
+import colors from '@/theme/colors';
+
+SplashScreen.preventAutoHideAsync();
+
 export default function RootLayout() {
   const [fontsLoaded] = useAppFonts();
+  const hydrated = useAuth((state) => state.hydrated);
+  const hydrate = useAuth((state) => state.hydrate);
 
-  if (!fontsLoaded) {
+  useEffect(() => {
-    return null;
+    hydrate();
-  }
+  }, [hydrate]);
+
+  const ready = hydrated && fontsLoaded;
+
+  useEffect(() => {
+    if (ready) SplashScreen.hideAsync();
+  }, [ready]);
+
+  useEffect(() => {
+    SystemUI.setBackgroundColorAsync(colors.deepBackground);
+  }, []);
+
+  if (!ready) return null;
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Stack />
+      <SafeAreaProvider>
+        <StatusBar
+          barStyle="light-content"
+          backgroundColor={colors.deepBackground}
+          translucent={false}
+        />
+        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: colors.deepBackground } }}>
+          <Stack.Screen name="(auth)" />
+          <Stack.Screen name="(tabs)" />
+          <Stack.Screen name="(org)" />
+          <Stack.Screen name="event/[id]" />
+          <Stack.Screen name="create/event" options={{ presentation: 'modal' }} />
+          <Stack.Screen name="create/post"  options={{ presentation: 'modal' }} />
+        </Stack>
+        
+      </SafeAreaProvider>
     </QueryClientProvider>
   );
 }

src/app/create/event.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function CreateEventScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Create Event</Text>
+			<Text style={styles.description}>Base ecran creation event</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/create/post.tsx

@@ -0,0 +1,32 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function CreatePostScreen() {
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Create Post</Text>
+			<Text style={styles.description}>Base ecran creation post</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+});

src/app/event/[id].tsx

@@ -0,0 +1,41 @@
+import { useLocalSearchParams } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function EventDetailScreen() {
+	const { id } = useLocalSearchParams<{ id?: string | string[] }>();
+	const eventId = Array.isArray(id) ? id[0] : id;
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Event Detail</Text>
+			<Text style={styles.description}>Base ecran detail event</Text>
+			<Text style={styles.meta}>ID: {eventId ?? 'non defini'}</Text>
+		</View>
+	);
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: colors.deepBackground,
+		padding: spacing[24],
+		justifyContent: 'center',
+		gap: spacing[8],
+	},
+	title: {
+		...typography.screenTitle,
+		color: colors.textPrimary,
+	},
+	description: {
+		...typography.body,
+		color: colors.textSecondary,
+	},
+	meta: {
+		...typography.metadata,
+		color: colors.textStrong,
+	},
+});

src/app/index-old2.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from 'expo-router';
+
+export default function IndexRoute() {
+  return <Redirect href="/(tabs)" />;
+}

src/components/navigation/BahlaTabBar.tsx

@@ -0,0 +1,277 @@
+/* ------------------------------------------------------------------ *
+ * BahlaTabBar — barre d'onglets floutée, partagée par (tabs) et (org).
+ *
+ * Une seule implémentation pour les deux parcours : le verre dépoli,
+ * le calcul de safe area, le rendu des items et l'accessibilité sont
+ * identiques. Seul le bouton central change, et il est optionnel.
+ *
+ * Usage :
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} />}>                    // utilisateur
+ *   <Tabs tabBar={(p) => <BahlaTabBar {...p} fabRouteName="create"   // organisateur
+ *                          onFabPress={openCreateSheet} />}>
+ *
+ * Dépendances : expo-blur · expo-linear-gradient ·
+ *               react-native-safe-area-context · react-native-svg
+ * ------------------------------------------------------------------ */
+import { BlurView } from 'expo-blur';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Tabs } from 'expo-router';
+import { useCallback, type ComponentProps } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+import { Plus } from 'lucide-react-native';
+
+/** Hauteur de la barre hors safe area. La hauteur réelle y ajoute l'inset bas. */
+export const TAB_BAR_BASE_HEIGHT = 52;
+const FAB_SIZE = 62;
+
+/**
+ * expo-blur ne rend rien d'exploitable sous Android 9 : sans ce repli on
+ * obtient un rectangle transparent et des libellés illisibles.
+ */
+const SUPPORTS_BLUR = Platform.OS === 'ios' || Number(Platform.Version) >= 28;
+
+type ExpoRouterTabBarProps = Parameters<
+  NonNullable<ComponentProps<typeof Tabs>['tabBar']>
+>[0];
+
+type Props = ExpoRouterTabBarProps & {
+  /**
+   * Nom de la route factice qui occupe l'emplacement central.
+   * Absent côté utilisateur — il n'y a pas de bouton flottant.
+   */
+  fabRouteName?: string;
+  /** Appelé à la place d'une navigation quand on presse le bouton central. */
+  onFabPress?: () => void;
+  /** Libellé lu par les lecteurs d'écran sur le bouton central. */
+  fabAccessibilityLabel?: string;
+};
+
+export function BahlaTabBar({
+  state,
+  descriptors,
+  navigation,
+  fabRouteName,
+  onFabPress,
+  fabAccessibilityLabel = 'Créer',
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const handlePress = useCallback(
+    (routeKey: string, routeName: string, isFocused: boolean) => {
+      const event = navigation.emit({
+        type: 'tabPress',
+        target: routeKey,
+        canPreventDefault: true,
+      });
+      if (isFocused || event.defaultPrevented) return;
+      navigation.navigate(routeName as never);
+    },
+    [navigation],
+  );
+
+  const handleLongPress = useCallback(
+    (routeKey: string) => {
+      navigation.emit({ type: 'tabLongPress', target: routeKey });
+    },
+    [navigation],
+  );
+
+  return (
+    <BlurView
+      tint="dark"
+      intensity={SUPPORTS_BLUR ? 20 : 0}
+      style={[
+        styles.bar,
+        {
+          height: TAB_BAR_BASE_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          // Sans flou, le fond translucide ne suffit pas : on opacifie.
+          backgroundColor: SUPPORTS_BLUR
+            ? colors.deepBackground
+            : 'rgba(10,10,18,0.96)',
+        },
+      ]}
+    >
+      {state.routes.map((route: (typeof state.routes)[number], index: number) => {
+        const { options } = descriptors[route.key];
+        const isFocused = state.index === index;
+        const tint = isFocused ? colors.primary : colors.textSecondary;
+
+        /* --- Emplacement central : bouton flottant, pas un onglet ---- */
+        if (fabRouteName && route.name === fabRouteName) {
+          return (
+            <View key={route.key} style={styles.fabSlot}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={fabAccessibilityLabel}
+                onPress={onFabPress}
+                style={({ pressed }) => [
+                  styles.fab,
+                  pressed && styles.fabPressed,
+                ]}
+              >
+                <LinearGradient
+                  colors={gradients.signature}
+                  start={gradientDirection.start}
+                  end={gradientDirection.end}
+                  style={styles.fabGradient}
+                >
+                  <Plus size={28} color={colors.onPrimary} />
+                </LinearGradient>
+              </Pressable>
+            </View>
+          );
+        }
+
+        /* --- Onglet ordinaire ---------------------------------------- */
+        const label =
+          typeof options.tabBarLabel === 'string'
+            ? options.tabBarLabel
+            : (options.title ?? route.name);
+
+        return (
+          <Pressable
+            key={route.key}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? { selected: true } : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel ?? label}
+            onPress={() => handlePress(route.key, route.name, isFocused)}
+            onLongPress={() => handleLongPress(route.key)}
+            style={styles.item}
+          >
+            <View>
+              {options.tabBarIcon?.({
+                focused: isFocused,
+                color: tint,
+                size: 23,
+              })}
+              {options.tabBarBadge != null && (
+                <View style={styles.badge}>
+                  <Text style={styles.badgeText} numberOfLines={1}>
+                    {options.tabBarBadge}
+                  </Text>
+                </View>
+              )}
+            </View>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.label,
+                {
+                  color: tint,
+                  fontFamily: isFocused
+                    ? fontFamily.bodySemi
+                    : fontFamily.bodyMedium,
+                },
+              ]}
+            >
+              {label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </BlurView>
+  );
+}
+
+const styles = StyleSheet.create({
+  bar: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingTop: 8,
+    borderTopWidth: StyleSheet.hairlineWidth * 2,
+    borderTopColor: colors.border,
+    overflow: 'visible',
+  } as ViewStyle,
+
+  item: {
+    flex: 1,
+    alignItems: 'center',
+    gap: 5,
+    // La zone tactile couvre toute la hauteur de la barre.
+    alignSelf: 'stretch',
+    paddingTop: 2,
+  },
+
+  label: {
+    ...typography.tabLabel,
+    fontFamily: undefined, // remplacé plus haut selon l'état
+  },
+
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -8,
+    minWidth: 16,
+    height: 16,
+    paddingHorizontal: 4,
+    borderRadius: 999,
+    backgroundColor: colors.primary,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  badgeText: {
+    ...typography.overlineSm,
+    fontSize: 9,
+    lineHeight: 16,
+    letterSpacing: 0,
+    color: colors.onPrimary,
+  },
+
+  /* Le créneau central est plus étroit que les onglets : 84 px fixes,
+     comme la colonne du même nom dans la maquette. */
+  fabSlot: {
+    width: 84,
+    alignItems: 'center',
+  },
+
+  fab: {
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    aspectRatio: 1,
+    borderRadius: 15,
+    // Remonte au-dessus de la barre et découpe un anneau dans le fond.
+    marginTop: -30,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    borderWidth: 3,
+    borderColor: colors.deepBackground,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 14 },
+    shadowOpacity: 0.85,
+    shadowRadius: 17,
+    elevation: 12,
+  },
+
+  fabPressed: {
+    transform: [{ scale: 0.94 }],
+    shadowOpacity: 0.5,
+  },
+
+  fabGradient: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default BahlaTabBar;

src/components/organizer/CreateActionSheet.tsx

@@ -0,0 +1,150 @@
+/* ------------------------------------------------------------------ *
+ * CreateActionSheet — le choix ouvert par le bouton central.
+ * Deux actions, rien d'autre : créer un événement, publier un post.
+ * ------------------------------------------------------------------ */
+import { LinearGradient } from 'expo-linear-gradient';
+import {
+    Modal,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+import { Plus } from 'lucide-react-native';
+
+type Props = {
+  visible: boolean;
+  onClose: () => void;
+  onCreateEvent: () => void;
+  onCreatePost: () => void;
+};
+
+export function CreateActionSheet({
+  visible,
+  onClose,
+  onCreateEvent,
+  onCreatePost,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.scrim} onPress={onClose} accessibilityLabel="Fermer" />
+      <View style={[styles.sheet, { paddingBottom: insets.bottom + 24 }]}>
+        <View style={styles.handle} />
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreateEvent}
+          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+        >
+          <LinearGradient
+            colors={gradients.signature}
+            start={gradientDirection.start}
+            end={gradientDirection.end}
+            style={styles.iconBox}
+          >
+            <Plus size={22} color={colors.onPrimary} />
+          </LinearGradient>
+          <View style={styles.rowText}>
+            <Text style={styles.rowTitle}>Créer un événement</Text>
+            <Text style={styles.rowSub}>Date, lieu, line-up, billetterie</Text>
+          </View>
+        </Pressable>
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreatePost}
+          style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+        >
+          <View style={[styles.iconBox, styles.iconBoxPlain]}>
+            <Plus size={22} color={colors.tertiary} />
+          </View>
+          <View style={styles.rowText}>
+            <Text style={styles.rowTitle}>Publier un post</Text>
+            <Text style={styles.rowSub}>Sur un de tes événements à venir</Text>
+          </View>
+        </Pressable>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrim: {
+    flex: 1,
+    backgroundColor: 'rgba(6,6,12,0.62)',
+  } as ViewStyle,
+
+  sheet: {
+    backgroundColor: colors.surface,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    gap: 10,
+  },
+
+  handle: {
+    width: 44,
+    height: 5,
+    borderRadius: 999,
+    backgroundColor: colors.border,
+    alignSelf: 'center',
+    marginBottom: 10,
+  },
+
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 14,
+    padding: 12,
+    borderRadius: 18,
+    backgroundColor: colors.surfaceElevated,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+
+  rowPressed: { opacity: 0.7 },
+
+  iconBox: {
+    width: 48,
+    height: 48,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  iconBoxPlain: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+
+  rowText: { flex: 1, gap: 2 },
+
+  rowTitle: {
+    ...typography.label,
+    fontSize: 16,
+    color: colors.textPrimary,
+  },
+
+  rowSub: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+});
+
+export default CreateActionSheet;

src/hooks/useTabBarHeight.ts

@@ -0,0 +1,18 @@
+/* ------------------------------------------------------------------ *
+ * useTabBarHeight — hauteur réelle de la BahlaTabBar.
+ *
+ * La barre est en position absolue au-dessus du contenu. Tout écran qui
+ * défile doit réserver cette hauteur, sinon sa dernière carte finit
+ * masquée derrière le verre dépoli :
+ *
+ *   <FlatList contentContainerStyle={{ paddingBottom: useTabBarHeight() + 24 }} />
+ * ------------------------------------------------------------------ */
+import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export function useTabBarHeight() {
+  const insets = useSafeAreaInsets();
+  return TAB_BAR_BASE_HEIGHT + insets.bottom;
+}
+
+export default useTabBarHeight;

src/stores/authStore.ts

@@ -0,0 +1,57 @@
+import * as SecureStore from 'expo-secure-store';
+import { create } from 'zustand';
+
+export type Role = 'user' | 'org';
+export type Session = {
+    userId: string;
+    token: string;
+    role: Role;
+}
+
+// Temporaire: bypass de l'auth pour avancer sur la navigation.
+const DEV_MOCK_SESSION_ENABLED = true;
+const DEV_MOCK_SESSION: Session = {
+    userId: 'dev-user',
+    token: 'dev-token',
+    role: 'org',
+};
+
+type AuthState = {
+    session: Session | null;
+    hydrated: boolean; // Le disque a été lu, la réponse est fiable
+    hydrate: () => Promise<void>;
+    signIn: (session: Session) => Promise<void>;
+    signOut: () => Promise<void>;
+};
+
+const KEY = 'bahla.session';
+
+export const useAuth = create<AuthState>((set) => ({
+    session: null,
+    hydrated: false,
+    
+    hydrate: async () => {
+        if (DEV_MOCK_SESSION_ENABLED) {
+            set({ session: DEV_MOCK_SESSION, hydrated: true });
+            return;
+        }
+
+        const session = await SecureStore.getItemAsync(KEY);
+        if (session) {
+            set({ session: JSON.parse(session), hydrated: true });
+            return;
+        }
+
+        set({ session: null, hydrated: true });
+    },
+
+    signIn: async (s: Session) => {
+        await SecureStore.setItemAsync(KEY, JSON.stringify(s));
+        set({ session: s });
+    },
+    
+    signOut: async () => {
+        await SecureStore.deleteItemAsync(KEY);
+        set({ session: null });
+    },
+}));