feat : Première navigation

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",
@@ -2867,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",
@@ -9666,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",
@@ -10191,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",

src/app/(org)/_layout.tsx

@@ -1,12 +1,78 @@
+import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
+import { CreateActionSheet } from '@/components/organizer/CreateActionSheet';
 import { useAuth } from '@/stores/authStore';
-import { Redirect, Stack } from 'expo-router';
+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 <Stack screenOptions={{ headerShown: false }} />;
+    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/(tabs)/_layout.tsx

@@ -1,5 +1,8 @@
+import { BahlaTabBar } from '@/components/navigation/BahlaTabBar';
 import { useAuth } from '@/stores/authStore';
-import { Redirect, Stack } from 'expo-router';
+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);
@@ -8,5 +11,42 @@ export default function TabsLayout() {
 
     if (session.role === 'org') return <Redirect href="../(org)" />;
 
-    return <Stack screenOptions={{ headerShown: false}} />;
+    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/_layout.tsx

@@ -1,28 +1,27 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { Stack } from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { StatusBar } from 'expo-status-bar';
+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();
-
-  if (!fontsLoaded) {
-    return null;
-  }
-
   const hydrated = useAuth((state) => state.hydrated);
   const hydrate = useAuth((state) => state.hydrate);
 
-  useEffect(() => { hydrate(); }, []);
+  useEffect(() => {
+    hydrate();
+  }, [hydrate]);
 
   const ready = hydrated && fontsLoaded;
 
@@ -30,13 +29,21 @@ export default function RootLayout() {
     if (ready) SplashScreen.hideAsync();
   }, [ready]);
 
+  useEffect(() => {
+    SystemUI.setBackgroundColorAsync(colors.deepBackground);
+  }, []);
+
   if (!ready) return null;
 
   return (
     <QueryClientProvider client={queryClient}>
       <SafeAreaProvider>
-        <StatusBar style="auto" />
+        <StatusBar
-        <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: '#0B0B12' } }}>
+          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)" />

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

@@ -8,6 +8,14 @@ export type Session = {
     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
@@ -23,8 +31,18 @@ export const useAuth = create<AuthState>((set) => ({
     hydrated: false,
     
     hydrate: async () => {
+        if (DEV_MOCK_SESSION_ENABLED) {
+            set({ session: DEV_MOCK_SESSION, hydrated: true });
+            return;
+        }
+
         const session = await SecureStore.getItemAsync(KEY);
-        set({ session: session ? JSON.parse(session) : null, hydrated: true });
+        if (session) {
+            set({ session: JSON.parse(session), hydrated: true });
+            return;
+        }
+
+        set({ session: null, hydrated: true });
     },
 
     signIn: async (s: Session) => {