feat : début de EventCard

README.md

@@ -1,6 +1,14 @@
-# Welcome to your Expo app 👋
+# Bahla - On sort où ? Bah là !
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+Ne râtez plus les meilleurs événement prêt de chez vous !
+Bahla vous propose différents moyens de vous divertir avec vos potes ou en famille.
+
+## Organisation
+### Stratégie d'image
+- Utilisation de `expo-image`
+- Un placeholder sombre avec des points généré aléatoirement avec un blur
+- Dimensions données par le backend
+- Image toujours en couverture (object-fit)
 
 ## Get started
 
@@ -24,33 +32,3 @@ In the output, you'll find options to open the app in a
 - [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
 
 You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
-```
-
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
-
-### Other setup steps
-
-- To set up ESLint for linting, run `npx expo lint`, or follow our guide on ["Using ESLint and Prettier"](https://docs.expo.dev/guides/using-eslint/)
-- If you'd like to set up unit testing, follow our guide on ["Unit Testing with Jest"](https://docs.expo.dev/develop/unit-testing/)
-- Learn more about the TypeScript setup in this template in our guide on ["Using TypeScript"](https://docs.expo.dev/guides/typescript/)
-
-## Learn more
-
-To learn more about developing your project with Expo, look at the following resources:
-
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
-
-## Join the community
-
-Join our community of developers creating universal apps.
-
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

app.json

@@ -1,12 +1,12 @@
 {
   "expo": {
-    "name": "bahla_front",
-    "slug": "bahla_front",
+    "name": "bahla",
+    "slug": "bahla",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
-    "scheme": "bahlafront",
-    "userInterfaceStyle": "automatic",
+    "scheme": "bahla",
+    "userInterfaceStyle": "dark",
     "ios": {
       "icon": "./assets/expo.icon"
     },
@@ -18,7 +18,7 @@
         "monochromeImage": "./assets/images/android-icon-monochrome.png"
       },
       "predictiveBackGestureEnabled": false,
-      "package": "com.anonymous.bahla_front"
+      "package": "com.anonymous.bahla"
     },
     "web": {
       "output": "static",
@@ -35,7 +35,10 @@
             "imageWidth": 76
           }
         }
-      ]
+      ],
+      "expo-image",
+      "expo-font",
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

package.json

@@ -3,24 +3,33 @@
   "main": "expo-router/entry",
   "version": "1.0.0",
   "dependencies": {
+    "@expo-google-fonts/inter": "^0.4.2",
+    "@expo-google-fonts/jetbrains-mono": "^0.4.1",
+    "@expo-google-fonts/space-grotesk": "^0.4.1",
     "@expo/ui": "~56.0.14",
-    "@react-navigation/elements": "^2.9.19",
-    "@react-navigation/native": "^7.2.5",
-    "@react-navigation/native-stack": "^7.16.0",
+    "@react-navigation/bottom-tabs": "^7.18.18",
+    "@tanstack/react-query": "^5.102.8",
+    "axios": "^1.20.0",
     "expo": "~56.0.5",
+    "expo-blur": "~56.0.4",
     "expo-constants": "~56.0.16",
     "expo-dev-client": "~56.0.16",
     "expo-device": "~56.0.4",
-    "expo-font": "~56.0.5",
+    "expo-font": "~56.0.7",
     "expo-glass-effect": "~56.0.4",
-    "expo-image": "~56.0.9",
+    "expo-haptics": "~56.0.3",
+    "expo-image": "~56.0.12",
+    "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",
     "expo-system-ui": "~56.0.5",
     "expo-web-browser": "~56.0.5",
+    "lucide-react": "^1.38.0",
+    "lucide-react-native": "^1.38.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
     "react-native": "0.85.3",
@@ -28,8 +37,11 @@
     "react-native-reanimated": "4.3.1",
     "react-native-safe-area-context": "~5.7.0",
     "react-native-screens": "4.25.2",
+    "react-native-svg": "15.15.4",
     "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.8.3"
+    "react-native-worklets": "0.8.3",
+    "zod": "^4.5.4",
+    "zustand": "^5.0.15"
   },
   "devDependencies": {
     "@types/react": "~19.2.2",

src/api/client.ts

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+import { API_BASE_URL } from './config';
+
+export const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});

src/api/config.ts

@@ -0,0 +1,4 @@
+export const API_BASE_URL = process.env.EXPO_PUBLIC_API_BASE_URL ?? 'http://localhost:3000';
+
+// Toggle once here to switch all API functions between mocks and real backend.
+export const API_USE_MOCKS = (process.env.EXPO_PUBLIC_API_USE_MOCKS ?? 'true') === 'true';

src/api/entities/animators.ts

@@ -0,0 +1,9 @@
+import type { Animator } from '@/models';
+import { mockAnimators } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const animatorsApi = createResourceApi<Animator>({
+  endpoint: 'animators',
+  mockData: mockAnimators,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/comment_likes.ts

@@ -0,0 +1,9 @@
+import { mockCommentLikes } from '@/mocks';
+import type { CommentLike } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const comment_likesApi = createResourceApi<CommentLike>({
+  endpoint: 'comment_likes',
+  mockData: mockCommentLikes,
+  resolveMockKey: (item) => `${item.user_id}:${item.comment_id}`,
+});

src/api/entities/comments.ts

@@ -0,0 +1,9 @@
+import type { Comment } from '@/models';
+import { mockComments } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const commentsApi = createResourceApi<Comment>({
+  endpoint: 'comments',
+  mockData: mockComments,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/event_external_links.ts

@@ -0,0 +1,9 @@
+import type { EventExternalLink } from '@/models';
+import { mockEventExternalLinks } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_external_linksApi = createResourceApi<EventExternalLink>({
+  endpoint: 'event_external_links',
+  mockData: mockEventExternalLinks,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/event_hashtags.ts

@@ -0,0 +1,9 @@
+import { mockEventHashtags } from '@/mocks';
+import type { EventHashtag } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_hashtagsApi = createResourceApi<EventHashtag>({
+  endpoint: 'event_hashtags',
+  mockData: mockEventHashtags,
+  resolveMockKey: (item) => `${item.event_id}:${item.hashtag_id}`,
+});

src/api/entities/event_images.ts

@@ -0,0 +1,9 @@
+import type { EventImage } from '@/models';
+import { mockEventImages } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_imagesApi = createResourceApi<EventImage>({
+  endpoint: 'event_images',
+  mockData: mockEventImages,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/event_lineup.ts

@@ -0,0 +1,9 @@
+import type { EventLineup } from '@/models';
+import { mockEventLineup } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_lineupApi = createResourceApi<EventLineup>({
+  endpoint: 'event_lineup',
+  mockData: mockEventLineup,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/event_stats_snapshots.ts

@@ -0,0 +1,9 @@
+import type { EventStatsSnapshot } from '@/models';
+import { mockEventStatsSnapshots } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_stats_snapshotsApi = createResourceApi<EventStatsSnapshot>({
+  endpoint: 'event_stats_snapshots',
+  mockData: mockEventStatsSnapshots,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/event_themes.ts

@@ -0,0 +1,9 @@
+import { mockEventThemes } from '@/mocks';
+import type { EventTheme } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const event_themesApi = createResourceApi<EventTheme>({
+  endpoint: 'event_themes',
+  mockData: mockEventThemes,
+  resolveMockKey: (item) => `${item.event_id}:${item.theme_id}`,
+});

src/api/entities/events.ts

@@ -0,0 +1,9 @@
+import type { Event } from '@/models';
+import { mockEvents } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const eventsApi = createResourceApi<Event>({
+  endpoint: 'events',
+  mockData: mockEvents,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/hashtags.ts

@@ -0,0 +1,9 @@
+import type { Hashtag } from '@/models';
+import { mockHashtags } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const hashtagsApi = createResourceApi<Hashtag>({
+  endpoint: 'hashtags',
+  mockData: mockHashtags,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/index.ts

@@ -0,0 +1,29 @@
+export * from './animators';
+export * from './comment_likes';
+export * from './comments';
+export * from './event_external_links';
+export * from './event_hashtags';
+export * from './event_images';
+export * from './event_lineup';
+export * from './event_stats_snapshots';
+export * from './event_themes';
+export * from './events';
+export * from './hashtags';
+export * from './organizer_members';
+export * from './organizer_subscriptions';
+export * from './organizers';
+export * from './plans';
+export * from './post_likes';
+export * from './post_media';
+export * from './posts';
+export * from './search_history';
+export * from './social_auth_providers';
+export * from './themes';
+export * from './tickets';
+export * from './user_animator_follows';
+export * from './user_event_interactions';
+export * from './user_event_shares';
+export * from './user_organizer_follows';
+export * from './user_theme_preferences';
+export * from './users';
+

src/api/entities/organizer_members.ts

@@ -0,0 +1,9 @@
+import type { OrganizerMember } from '@/models';
+import { mockOrganizerMembers } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const organizer_membersApi = createResourceApi<OrganizerMember>({
+  endpoint: 'organizer_members',
+  mockData: mockOrganizerMembers,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/organizer_subscriptions.ts

@@ -0,0 +1,9 @@
+import type { OrganizerSubscription } from '@/models';
+import { mockOrganizerSubscriptions } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const organizer_subscriptionsApi = createResourceApi<OrganizerSubscription>({
+  endpoint: 'organizer_subscriptions',
+  mockData: mockOrganizerSubscriptions,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/organizers.ts

@@ -0,0 +1,9 @@
+import type { Organizer } from '@/models';
+import { mockOrganizers } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const organizersApi = createResourceApi<Organizer>({
+  endpoint: 'organizers',
+  mockData: mockOrganizers,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/plans.ts

@@ -0,0 +1,9 @@
+import type { Plan } from '@/models';
+import { mockPlans } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const plansApi = createResourceApi<Plan>({
+  endpoint: 'plans',
+  mockData: mockPlans,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/post_likes.ts

@@ -0,0 +1,9 @@
+import { mockPostLikes } from '@/mocks';
+import type { PostLike } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const post_likesApi = createResourceApi<PostLike>({
+  endpoint: 'post_likes',
+  mockData: mockPostLikes,
+  resolveMockKey: (item) => `${item.user_id}:${item.post_id}`,
+});

src/api/entities/post_media.ts

@@ -0,0 +1,9 @@
+import type { PostMedia } from '@/models';
+import { mockPostMedia } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const post_mediaApi = createResourceApi<PostMedia>({
+  endpoint: 'post_media',
+  mockData: mockPostMedia,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/posts.ts

@@ -0,0 +1,9 @@
+import type { Post } from '@/models';
+import { mockPosts } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const postsApi = createResourceApi<Post>({
+  endpoint: 'posts',
+  mockData: mockPosts,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/search_history.ts

@@ -0,0 +1,9 @@
+import type { SearchHistory } from '@/models';
+import { mockSearchHistory } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const search_historyApi = createResourceApi<SearchHistory>({
+  endpoint: 'search_history',
+  mockData: mockSearchHistory,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/social_auth_providers.ts

@@ -0,0 +1,9 @@
+import type { SocialAuthProvider } from '@/models';
+import { mockSocialAuthProviders } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const social_auth_providersApi = createResourceApi<SocialAuthProvider>({
+  endpoint: 'social_auth_providers',
+  mockData: mockSocialAuthProviders,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/themes.ts

@@ -0,0 +1,9 @@
+import type { Theme } from '@/models';
+import { mockThemes } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const themesApi = createResourceApi<Theme>({
+  endpoint: 'themes',
+  mockData: mockThemes,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/tickets.ts

@@ -0,0 +1,9 @@
+import type { Ticket } from '@/models';
+import { mockTickets } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const ticketsApi = createResourceApi<Ticket>({
+  endpoint: 'tickets',
+  mockData: mockTickets,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/user_animator_follows.ts

@@ -0,0 +1,9 @@
+import { mockUserAnimatorFollows } from '@/mocks';
+import type { UserAnimatorFollow } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const user_animator_followsApi = createResourceApi<UserAnimatorFollow>({
+  endpoint: 'user_animator_follows',
+  mockData: mockUserAnimatorFollows,
+  resolveMockKey: (item) => `${item.user_id}:${item.animator_id}`,
+});

src/api/entities/user_event_interactions.ts

@@ -0,0 +1,9 @@
+import { mockUserEventInteractions } from '@/mocks';
+import type { UserEventInteraction } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const user_event_interactionsApi = createResourceApi<UserEventInteraction>({
+  endpoint: 'user_event_interactions',
+  mockData: mockUserEventInteractions,
+  resolveMockKey: (item) => `${item.user_id}:${item.event_id}`,
+});

src/api/entities/user_event_shares.ts

@@ -0,0 +1,9 @@
+import type { UserEventShare } from '@/models';
+import { mockUserEventShares } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const user_event_sharesApi = createResourceApi<UserEventShare>({
+  endpoint: 'user_event_shares',
+  mockData: mockUserEventShares,
+  resolveMockKey: (item) => item.id,
+});

src/api/entities/user_organizer_follows.ts

@@ -0,0 +1,9 @@
+import { mockUserOrganizerFollows } from '@/mocks';
+import type { UserOrganizerFollow } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const user_organizer_followsApi = createResourceApi<UserOrganizerFollow>({
+  endpoint: 'user_organizer_follows',
+  mockData: mockUserOrganizerFollows,
+  resolveMockKey: (item) => `${item.user_id}:${item.organizer_id}`,
+});

src/api/entities/user_theme_preferences.ts

@@ -0,0 +1,9 @@
+import { mockUserThemePreferences } from '@/mocks';
+import type { UserThemePreference } from '@/models';
+import { createResourceApi } from '../resourceFactory';
+
+export const user_theme_preferencesApi = createResourceApi<UserThemePreference>({
+  endpoint: 'user_theme_preferences',
+  mockData: mockUserThemePreferences,
+  resolveMockKey: (item) => `${item.user_id}:${item.theme_id}`,
+});

src/api/entities/users.ts

@@ -0,0 +1,9 @@
+import type { User } from '@/models';
+import { mockUsers } from '@/mocks';
+import { createResourceApi } from '../resourceFactory';
+
+export const usersApi = createResourceApi<User>({
+  endpoint: 'users',
+  mockData: mockUsers,
+  resolveMockKey: (item) => item.id,
+});

src/api/index.ts

@@ -0,0 +1,33 @@
+export * from './client';
+export * from './config';
+export * from './resourceFactory';
+export * from './types';
+export * from './entities/animators';
+export * from './entities/comment_likes';
+export * from './entities/comments';
+export * from './entities/event_external_links';
+export * from './entities/event_hashtags';
+export * from './entities/event_images';
+export * from './entities/event_lineup';
+export * from './entities/event_stats_snapshots';
+export * from './entities/event_themes';
+export * from './entities/events';
+export * from './entities/hashtags';
+export * from './entities/organizer_members';
+export * from './entities/organizer_subscriptions';
+export * from './entities/organizers';
+export * from './entities/plans';
+export * from './entities/post_likes';
+export * from './entities/post_media';
+export * from './entities/posts';
+export * from './entities/search_history';
+export * from './entities/social_auth_providers';
+export * from './entities/themes';
+export * from './entities/tickets';
+export * from './entities/user_animator_follows';
+export * from './entities/user_event_interactions';
+export * from './entities/user_event_shares';
+export * from './entities/user_organizer_follows';
+export * from './entities/user_theme_preferences';
+export * from './entities/users';
+

src/api/mockStore.ts

@@ -0,0 +1,90 @@
+type KeyResolver<T> = (item: T) => string;
+
+type MockStoreOptions<T> = {
+  data: T[];
+  resolveKey: KeyResolver<T>;
+};
+
+const clone = <T>(value: T): T => {
+  if (typeof globalThis.structuredClone === 'function') {
+    return globalThis.structuredClone(value);
+  }
+
+  return JSON.parse(JSON.stringify(value)) as T;
+};
+
+const createMockId = (): string => {
+  const random = Math.random().toString(16).slice(2, 10).padEnd(8, '0');
+  return `00000000-0000-4000-8000-${random}`;
+};
+
+const ensureHasId = <T>(payload: Partial<T>): Partial<T> => {
+  if ('id' in payload && typeof payload.id === 'string' && payload.id.length > 0) {
+    return payload;
+  }
+
+  return {
+    ...payload,
+    id: createMockId(),
+  };
+};
+
+export const createMockStore = <T>(options: MockStoreOptions<T>) => {
+  const { resolveKey } = options;
+  const records = [...options.data];
+
+  const findIndex = (id: string): number => records.findIndex((item) => resolveKey(item) === id);
+
+  return {
+    list: async (): Promise<T[]> => clone(records),
+    get: async (id: string): Promise<T> => {
+      const index = findIndex(id);
+      if (index === -1) {
+        throw new Error(`Mock record not found for id "${id}"`);
+      }
+
+      return clone(records[index]);
+    },
+    create: async (payload: Partial<T>): Promise<T> => {
+      const next = ensureHasId(payload) as T;
+      records.push(next);
+      return clone(next);
+    },
+    update: async (id: string, payload: Partial<T>): Promise<T> => {
+      const index = findIndex(id);
+      if (index === -1) {
+        throw new Error(`Mock record not found for id "${id}"`);
+      }
+
+      const next = {
+        ...records[index],
+        ...payload,
+      };
+
+      records[index] = next;
+      return clone(next);
+    },
+    patch: async (id: string, payload: Partial<T>): Promise<T> => {
+      const index = findIndex(id);
+      if (index === -1) {
+        throw new Error(`Mock record not found for id "${id}"`);
+      }
+
+      const next = {
+        ...records[index],
+        ...payload,
+      };
+
+      records[index] = next;
+      return clone(next);
+    },
+    remove: async (id: string): Promise<void> => {
+      const index = findIndex(id);
+      if (index === -1) {
+        throw new Error(`Mock record not found for id "${id}"`);
+      }
+
+      records.splice(index, 1);
+    },
+  };
+};

src/api/resourceFactory.ts

@@ -0,0 +1,66 @@
+import type { AxiosInstance } from 'axios';
+
+import { apiClient } from './client';
+import { API_USE_MOCKS } from './config';
+import { createMockStore } from './mockStore';
+import type { CreatePayload, CrudApi, UpdatePayload } from './types';
+
+type CreateResourceApiOptions<T> = {
+  endpoint: string;
+  mockData: T[];
+  resolveMockKey: (item: T) => string;
+  client?: AxiosInstance;
+  useMocks?: boolean;
+};
+
+export const createResourceApi = <T>(options: CreateResourceApiOptions<T>): CrudApi<T> => {
+  const {
+    endpoint,
+    mockData,
+    resolveMockKey,
+    client = apiClient,
+    useMocks = API_USE_MOCKS,
+  } = options;
+
+  const mockStore = createMockStore<T>({
+    data: mockData,
+    resolveKey: resolveMockKey,
+  });
+
+  if (useMocks) {
+    return {
+      list: () => mockStore.list(),
+      get: (id) => mockStore.get(id),
+      create: (payload) => mockStore.create(payload),
+      update: (id, payload) => mockStore.update(id, payload),
+      patch: (id, payload) => mockStore.patch(id, payload),
+      remove: (id) => mockStore.remove(id),
+    };
+  }
+
+  return {
+    list: async () => {
+      const response = await client.get<T[]>(`/${endpoint}`);
+      return response.data;
+    },
+    get: async (id: string) => {
+      const response = await client.get<T>(`/${endpoint}/${id}`);
+      return response.data;
+    },
+    create: async (payload: CreatePayload<T>) => {
+      const response = await client.post<T>(`/${endpoint}`, payload);
+      return response.data;
+    },
+    update: async (id: string, payload: UpdatePayload<T>) => {
+      const response = await client.put<T>(`/${endpoint}/${id}`, payload);
+      return response.data;
+    },
+    patch: async (id: string, payload: UpdatePayload<T>) => {
+      const response = await client.patch<T>(`/${endpoint}/${id}`, payload);
+      return response.data;
+    },
+    remove: async (id: string) => {
+      await client.delete(`/${endpoint}/${id}`);
+    },
+  };
+};

src/api/types.ts

@@ -0,0 +1,13 @@
+export type EntityWithId = { id: string };
+
+export type CreatePayload<T> = Partial<T>;
+export type UpdatePayload<T> = Partial<T>;
+
+export type CrudApi<T> = {
+  list: () => Promise<T[]>;
+  get: (id: string) => Promise<T>;
+  create: (payload: CreatePayload<T>) => Promise<T>;
+  update: (id: string, payload: UpdatePayload<T>) => Promise<T>;
+  patch: (id: string, payload: UpdatePayload<T>) => Promise<T>;
+  remove: (id: string) => Promise<void>;
+};

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,60 @@
+import { useRouter } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function HomeTabScreen() {
+	const router = useRouter();
+
+	return (
+		<View style={styles.container}>
+			<Text style={styles.title}>Accueil</Text>
+			<Text style={styles.description}>Base ecran accueil tab</Text>
+			<View style={styles.actions}>
+				<Button
+					label="Voir la démo des inputs"
+					variant="secondary"
+					onPress={() => router.push('/index-old')}
+					accessibilityLabel="Ouvrir la page d'exemple des champs"
+				/>
+				<Button
+					label="Voir la démo du switch"
+					variant="secondary"
+					onPress={() => router.push('/switch-demo')}
+					accessibilityLabel="Ouvrir la page de démonstration du switch"
+				/>
+				<Button
+					label="Voir la démo des cards"
+					variant="secondary"
+					onPress={() => router.push('/card-demo')}
+					accessibilityLabel="Ouvrir la page de présentation des cards"
+				/>
+			</View>
+		</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,
+	},
+	actions: {
+		marginTop: spacing[16],
+		gap: spacing[8],
+	},
+});

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,39 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Header } from '@/components/ui/Header';
+import { Screen } from '@/components/ui/Screen';
+
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function MyEventsTabScreen() {
+	return (
+		<Screen>
+			<Header variant="large" overline="12 événements" title="Mes events" />
+
+			<View style={styles.container}>
+				<Text style={styles.title}>My Events</Text>
+				<Text style={styles.description}>Base ecran mes events</Text>
+			</View>
+		</Screen>
+	);
+}
+
+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,5 +1,62 @@
-import { Stack } from "expo-router";
+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 { GestureHandlerRootView } from 'react-native-gesture-handler';
+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() {
-  return <Stack />;
+  const [fontsLoaded] = useAppFonts();
+  const hydrated = useAuth((state) => state.hydrated);
+  const hydrate = useAuth((state) => state.hydrate);
+
+  useEffect(() => {
+    hydrate();
+  }, [hydrate]);
+
+  const ready = hydrated && fontsLoaded;
+
+  useEffect(() => {
+    if (ready) SplashScreen.hideAsync();
+  }, [ready]);
+
+  useEffect(() => {
+    SystemUI.setBackgroundColorAsync(colors.deepBackground);
+  }, []);
+
+  if (!ready) return null;
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <QueryClientProvider client={queryClient}>
+        <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="switch-demo" />
+            <Stack.Screen name="card-demo" />
+            <Stack.Screen name="event/[id]" />
+            <Stack.Screen name="create/event" options={{ presentation: 'modal' }} />
+            <Stack.Screen name="create/post"  options={{ presentation: 'modal' }} />
+          </Stack>
+        </SafeAreaProvider>
+      </QueryClientProvider>
+    </GestureHandlerRootView>
+  );
 }

src/app/card-demo.tsx

@@ -0,0 +1,80 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import Card from '@/components/Card';
+import { Screen } from '@/components/ui/Screen';
+import { mockEvents } from '@/mocks';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+const cardParticipants = [
+  {
+    id: 'lea',
+    source:
+      'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=80',
+    name: 'Lea Martin',
+  },
+  {
+    id: 'yanis',
+    source:
+      'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=80',
+    name: 'Yanis Belaid',
+  },
+  {
+    id: 'omar',
+    source:
+      'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=240&q=80',
+    name: 'Omar Khelifi',
+  },
+];
+
+export default function CardDemoScreen() {
+  const demoEvent = mockEvents[0];
+
+  if (!demoEvent) {
+    return (
+      <Screen contentContainerStyle={styles.content}>
+        <Text style={styles.emptyState}>Aucun événement de démo disponible.</Text>
+      </Screen>
+    );
+  }
+
+  return (
+    <Screen contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.kicker}>DESIGN SYSTEM · CARD</Text>
+        <Text style={styles.title}>Page de présentation Card</Text>
+      </View>
+
+      <Card
+        variant="hero"
+        event={demoEvent}
+        avatarStack={cardParticipants}
+        onPress={() => undefined}
+      />
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: spacing[16],
+    paddingTop: spacing[24],
+  },
+  header: {
+    gap: spacing[8],
+    marginBottom: spacing[8],
+  },
+  kicker: {
+    ...typography.sectionLabel,
+    color: colors.textSecondary,
+  },
+  title: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+  emptyState: {
+    ...typography.body,
+    color: colors.textSecondary,
+  },
+});

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-old.tsx

@@ -0,0 +1,144 @@
+import { Mail } from 'lucide-react-native';
+import { useMemo, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { FormField, Input, PasswordInput, SearchInput, TextArea } from '@/components/form';
+import { Screen } from '@/components/ui/Screen';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+function computePasswordStrength(value: string): 0 | 1 | 2 | 3 {
+  if (!value) {
+    return 0;
+  }
+
+  const hasLower = /[a-z]/.test(value);
+  const hasUpper = /[A-Z]/.test(value);
+  const hasNumber = /\d/.test(value);
+  const hasSpecial = /[^A-Za-z0-9]/.test(value);
+
+  const criteria = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean)
+    .length;
+
+  if (value.length < 6 || criteria <= 1) {
+    return 1;
+  }
+
+  if (value.length >= 10 && criteria >= 3) {
+    return 3;
+  }
+
+  return 2;
+}
+
+export default function InputExamplesScreen() {
+  const [email, setEmail] = useState('lea.mercier@example.ch');
+  const [password, setPassword] = useState('');
+  const [search, setSearch] = useState('néon');
+  const [debouncedSearch, setDebouncedSearch] = useState('néon');
+  const [description, setDescription] = useState('');
+
+  const emailError = useMemo(() => {
+    if (email.length === 0) {
+      return 'Adresse e-mail requise';
+    }
+
+    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    return isValid ? undefined : 'Adresse e-mail invalide';
+  }, [email]);
+
+  const passwordStrength = useMemo(() => computePasswordStrength(password), [password]);
+
+  return (
+    <Screen contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.kicker}>DESIGN SYSTEM · FORM INPUTS</Text>
+        <Text style={styles.title}>Page d'exemple des champs</Text>
+      </View>
+
+      <FormField
+        label="E-mail"
+        required
+        error={emailError}
+        counter={{ value: email.length, max: 120 }}
+      >
+        <Input
+          accessibilityLabel="E-mail"
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          autoCorrect={false}
+          state={emailError ? 'error' : 'default'}
+          placeholder="lea.mercier@example.ch"
+          left={<Mail color={colors.textSecondary} size={20} />}
+        />
+      </FormField>
+
+      <FormField label="Mot de passe" helper="6 caractères minimum">
+        <PasswordInput
+          accessibilityLabel="Mot de passe"
+          value={password}
+          onChangeText={setPassword}
+          placeholder="••••••••"
+          strength={passwordStrength}
+        />
+      </FormField>
+
+      <FormField label="Recherche" helper={`Terme debouncé: ${debouncedSearch || '—'}`}>
+        <SearchInput
+          accessibilityLabel="Recherche"
+          value={search}
+          onChangeText={setSearch}
+          onDebouncedChange={setDebouncedSearch}
+          debounceMs={300}
+          placeholder="techno la chaux"
+        />
+      </FormField>
+
+      <FormField
+        label="Description d'événement"
+        helper="Ajoute le contexte, l'entrée et les horaires"
+        counter={{ value: description.length, max: 280 }}
+      >
+        <TextArea
+          accessibilityLabel="Description d'événement"
+          value={description}
+          onChangeText={setDescription}
+          rows={4}
+          maxLength={280}
+          placeholder="Il reste 40 places en prévente pour ce soir..."
+        />
+      </FormField>
+
+      <FormField label="Champ désactivé" helper="Exemple d'état non éditable">
+        <Input
+          accessibilityLabel="Champ désactivé"
+          editable={false}
+          value="Néon session"
+          onChangeText={() => undefined}
+        />
+      </FormField>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: spacing[16],
+    paddingTop: spacing[24],
+  },
+  header: {
+    gap: spacing[8],
+    marginBottom: spacing[8],
+  },
+  kicker: {
+    ...typography.sectionLabel,
+    color: colors.textSecondary,
+  },
+  title: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+});

src/app/index-old2.tsx

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

src/app/index.tsx

@@ -1,17 +0,0 @@
-import { Text, View, StyleSheet } from "react-native";
-
-export default function Index() {
-  return (
-    <View style={styles.container}>
-      <Text>Edit src/app/index.tsx to edit this screen.</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

src/app/switch-demo.tsx

@@ -0,0 +1,342 @@
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from '@/components/Button';
+import { FormField, Switch } from '@/components/form';
+import { AttendeeSummary, Avatar, AvatarStack, RangeSlider, Screen, Slider } from '@/components/ui';
+import { colors } from '@/theme/colors';
+import { spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export default function SwitchDemoScreen() {
+  const [pushEnabled, setPushEnabled] = useState(true);
+  const [weeklyDigestEnabled, setWeeklyDigestEnabled] = useState(false);
+  const [locationEnabled, setLocationEnabled] = useState(true);
+  const [autoPlayEnabled, setAutoPlayEnabled] = useState(false);
+  const [radiusKm, setRadiusKm] = useState(25);
+  const [resultCount, setResultCount] = useState(128);
+  const [priceRange, setPriceRange] = useState<[number, number]>([0, 65]);
+
+  const attendees = [
+    {
+      id: 'lea',
+      source:
+        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=240&q=80',
+      name: 'Lea Martin',
+    },
+    {
+      id: 'yanis',
+      source:
+        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=240&q=80',
+      name: 'Yanis Belaid',
+    },
+    {
+      id: 'omar',
+      source:
+        'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=240&q=80',
+      name: 'Omar Khelifi',
+    },
+  ];
+
+  const attendeesWithFallbacks = [
+    { id: 'nora', source: null, name: 'Nora Salem' },
+    { id: 'idris', source: null, name: 'Idris Khan' },
+    {
+      id: 'mila',
+      source:
+        'https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=240&q=80',
+      name: 'Mila Chen',
+    },
+  ];
+
+  const formatKm = (v: number) => `${v} km`;
+  const formatChf = (v: number) => `${v} CHF`;
+  const formatPriceRange = (minValue: number, maxValue: number) => {
+    const left = minValue === 0 ? 'Gratuit' : `${minValue} CHF`;
+    return `${left} - ${maxValue} CHF`;
+  };
+
+  return (
+    <Screen contentContainerStyle={styles.content}>
+      <View style={styles.header}>
+        <Text style={styles.kicker}>DESIGN SYSTEM · SWITCH & SLIDER</Text>
+        <Text style={styles.title}>Demos phase 4</Text>
+      </View>
+
+      <FormField
+        label="Notifications push"
+        helper="Switch custom basé sur Expo/React Native"
+      >
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Activer les alertes de nouveaux événements</Text>
+            <Text style={styles.switchHint}>
+              {pushEnabled ? 'Activé' : 'Désactivé'}
+            </Text>
+          </View>
+          <Switch
+            accessibilityLabel="Activer les notifications push"
+            value={pushEnabled}
+            onValueChange={setPushEnabled}
+          />
+        </View>
+      </FormField>
+
+      <FormField
+        label="Digest hebdo"
+        helper="Exemple de taille large"
+      >
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Recevoir un recap chaque lundi</Text>
+            <Text style={styles.switchHint}>
+              {weeklyDigestEnabled ? 'Activé' : 'Désactivé'}
+            </Text>
+          </View>
+          <Switch
+            accessibilityLabel="Activer le digest hebdomadaire"
+            value={weeklyDigestEnabled}
+            onValueChange={setWeeklyDigestEnabled}
+            size="lg"
+          />
+        </View>
+      </FormField>
+
+      <FormField label="Etat desactive" helper="Le switch est non interactif">
+        <View style={styles.switchRow}>
+          <View style={styles.switchLabelWrap}>
+            <Text style={styles.switchLabel}>Mode maintenance</Text>
+            <Text style={styles.switchHint}>Indisponible</Text>
+          </View>
+          <Switch
+            accessibilityLabel="Switch desactive"
+            value
+            disabled
+          />
+        </View>
+      </FormField>
+
+      <FormField
+        label="Exemples rapides"
+        helper="Cas d'usage supplementaires"
+      >
+        <View style={styles.switchStack}>
+          <View style={styles.switchRowCompact}>
+            <Text style={styles.switchLabel}>Localisation precise</Text>
+            <Switch
+              accessibilityLabel="Activer la localisation precise"
+              value={locationEnabled}
+              onValueChange={setLocationEnabled}
+            />
+          </View>
+
+          <View style={styles.switchRowCompact}>
+            <Text style={styles.switchLabel}>Lecture auto des extraits</Text>
+            <Switch
+              accessibilityLabel="Activer la lecture automatique"
+              value={autoPlayEnabled}
+              onValueChange={setAutoPlayEnabled}
+              size="lg"
+            />
+          </View>
+
+          <View style={styles.inlineActions}>
+            <Button
+              label="Reset switches"
+              variant="secondary"
+              onPress={() => {
+                setPushEnabled(true);
+                setWeeklyDigestEnabled(false);
+                setLocationEnabled(true);
+                setAutoPlayEnabled(false);
+              }}
+            />
+          </View>
+        </View>
+      </FormField>
+
+      <View style={styles.sectionDivider} />
+
+      <FormField
+        label="B3 · Rayon de recherche"
+        helper={`Resultats: ${resultCount}`}
+      >
+        <Slider
+          label="Distance"
+          value={radiusKm}
+          onChange={setRadiusKm}
+          onChangeEnd={(v) => {
+            const nextCount = Math.max(12, 220 - v * 4);
+            setResultCount(nextCount);
+          }}
+          min={1}
+          max={50}
+          step={1}
+          formatValue={formatKm}
+          showBounds
+          ticks={[1, 10, 25, 50]}
+        />
+      </FormField>
+
+      <FormField label="B3 · Fourchette de prix" helper="0 a 100 CHF">
+        <RangeSlider
+          label="Prix"
+          value={priceRange}
+          onChange={setPriceRange}
+          min={0}
+          max={100}
+          step={1}
+          minGap={1}
+          formatValue={formatChf}
+          formatRange={formatPriceRange}
+          showBounds
+          ticks={[0, 25, 50, 75, 100]}
+        />
+      </FormField>
+
+      <FormField label="Curseur desactive" helper="Exemple disabled">
+        <Slider
+          label="Quota"
+          value={40}
+          onChange={() => undefined}
+          min={0}
+          max={100}
+          step={1}
+          formatValue={(v) => `${v}%`}
+          disabled
+          showBounds
+        />
+      </FormField>
+
+      <View style={styles.sectionDivider} />
+
+      <FormField
+        label="Avatar / Stack / Summary"
+        helper="Design system phase 4"
+      >
+        <View style={styles.avatarStack}>
+          <View style={styles.exampleRow}>
+            <Text style={styles.exampleLabel}>1) B1 · Stack 3 sur 12 (+9)</Text>
+            <AvatarStack items={attendees} max={3} total={12} size="sm" />
+          </View>
+
+          <View style={styles.exampleRow}>
+            <Text style={styles.exampleLabel}>2) B1 · Meme stack sans bulle</Text>
+            <AvatarStack items={attendees} max={3} total={12} size="sm" showOverflow={false} />
+          </View>
+
+          <View style={styles.exampleRow}>
+            <Text style={styles.exampleLabel}>3) C3 · Avatar XL gradient + live</Text>
+            <Avatar
+              size="xl"
+              ring="border"
+              shape='rounded'
+              ringColor={colors.primary}
+              badge="online"
+              source="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=300&q=80"
+              name="Studio Bahla"
+            />
+          </View>
+
+          <View style={styles.exampleRow}>
+            <Text style={styles.exampleLabel}>4) Summary 0 puis 142 dont 3 amis</Text>
+            <View style={styles.summaryStack}>
+              <AttendeeSummary items={[]} total={0} size="sm" />
+              <AttendeeSummary
+                items={attendees}
+                total={142}
+                max={3}
+                size="sm"
+                highlight="dont 3 amis"
+              />
+            </View>
+          </View>
+
+          <View style={styles.exampleRow}>
+            <Text style={styles.exampleLabel}>5) Stack avec fallback initiales</Text>
+            <AvatarStack items={attendeesWithFallbacks} max={3} total={3} size="sm" />
+          </View>
+        </View>
+      </FormField>
+    </Screen>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    gap: spacing[16],
+    paddingTop: spacing[24],
+  },
+  header: {
+    gap: spacing[8],
+    marginBottom: spacing[8],
+  },
+  kicker: {
+    ...typography.sectionLabel,
+    color: colors.textSecondary,
+  },
+  title: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+  switchRow: {
+    minHeight: 56,
+    borderWidth: 1,
+    borderColor: colors.inputBorder,
+    borderRadius: 14,
+    backgroundColor: colors.inputBackground,
+    paddingHorizontal: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[12],
+  },
+  switchLabelWrap: {
+    flex: 1,
+    gap: 2,
+  },
+  switchLabel: {
+    ...typography.body,
+    color: colors.textPrimary,
+  },
+  switchHint: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+  switchStack: {
+    gap: spacing[8],
+  },
+  switchRowCompact: {
+    minHeight: 56,
+    borderWidth: 1,
+    borderColor: colors.inputBorder,
+    borderRadius: 14,
+    backgroundColor: colors.inputBackground,
+    paddingHorizontal: 14,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[12],
+  },
+  inlineActions: {
+    marginTop: spacing[4],
+  },
+  sectionDivider: {
+    height: 1,
+    backgroundColor: colors.divider,
+    marginVertical: spacing[4],
+  },
+  avatarStack: {
+    gap: spacing[12],
+  },
+  exampleRow: {
+    gap: spacing[8],
+  },
+  exampleLabel: {
+    ...typography.metadata,
+    color: colors.textSecondary,
+  },
+  summaryStack: {
+    gap: spacing[8],
+  },
+});

src/components/Badge.tsx

@@ -0,0 +1,245 @@
+import { Check, type LucideIcon } from 'lucide-react-native';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+    Animated,
+    StyleSheet,
+    Text,
+    View,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { borderRadius } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+export type BadgeVariant = 'verified' | 'tonight' | 'free' | 'complete' | 'draft' | 'pro' | 'date';
+
+export type BadgeDate = {
+  day: string;
+  month: string;
+};
+
+type BadgeProps = {
+  variant?: BadgeVariant;
+  label?: string;
+  icon?: LucideIcon;
+  date?: BadgeDate;
+  compact?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+};
+
+const DEFAULT_LABELS: Record<BadgeVariant, string> = {
+  verified: 'Vérifié',
+  tonight: 'Ce soir',
+  free: 'Gratuit',
+  complete: 'Complet',
+  draft: 'Brouillon',
+  pro: 'Pro',
+  date: 'Date',
+};
+
+export function Badge({
+  variant = 'verified',
+  label,
+  icon,
+  date,
+  compact = true,
+  style,
+  textStyle,
+}: BadgeProps) {
+  const pulse = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (variant !== 'tonight') {
+      return;
+    }
+
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 1.04,
+          duration: 640,
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 0.98,
+          duration: 640,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [pulse, variant]);
+
+  const config = useMemo(() => {
+    if (variant === 'verified') {
+      return {
+        backgroundColor: 'rgba(40, 224, 240, 0.12)',
+        borderColor: 'rgba(40, 224, 240, 0.6)',
+        textColor: '#A9F4FF',
+      };
+    }
+
+    if (variant === 'tonight') {
+      return {
+        backgroundColor: 'rgba(255, 46, 136, 0.18)',
+        borderColor: 'rgba(255, 46, 136, 0.7)',
+        textColor: '#FFD0E3',
+      };
+    }
+
+    if (variant === 'free') {
+      return {
+        backgroundColor: colors.successSoft,
+        borderColor: colors.successBorder,
+        textColor: '#A6F5CD',
+      };
+    }
+
+    if (variant === 'complete') {
+      return {
+        backgroundColor: 'rgba(255, 255, 255, 0.06)',
+        borderColor: 'rgba(255, 255, 255, 0.12)',
+        textColor: '#F4F5FA',
+      };
+    }
+
+    if (variant === 'draft') {
+      return {
+        backgroundColor: colors.warningSoft,
+        borderColor: 'rgba(255, 196, 120, 0.55)',
+        textColor: '#FFE0AE',
+      };
+    }
+
+    if (variant === 'pro') {
+      return {
+        backgroundColor: colors.secondarySoft,
+        borderColor: 'rgba(123, 61, 255, 0.55)',
+        textColor: '#DCCBFF',
+      };
+    }
+
+    return {
+      backgroundColor: 'rgba(255, 255, 255, 0.04)',
+      borderColor: 'rgba(255, 255, 255, 0.12)',
+      textColor: colors.textPrimary,
+    };
+  }, [colors, variant]);
+
+  if (variant === 'date' || date) {
+    const day = date?.day ?? '04';
+    const month = date?.month ?? 'sept';
+
+    return (
+      <View
+        style={[
+          styles.dateBadge,
+          {
+            backgroundColor: 'rgba(255, 255, 255, 0.02)',
+            borderColor: 'rgba(255, 255, 255, 0.12)',
+          },
+          style,
+        ]}
+      >
+        <Text
+          style={[
+            styles.dateDay,
+            {
+              color: '#F5F7FF',
+            },
+          ]}
+        >
+          {day}
+        </Text>
+        <Text
+          style={[
+            styles.dateMonth,
+            {
+              color: '#DFE3F2',
+            },
+          ]}
+        >
+          {month}
+        </Text>
+      </View>
+    );
+  }
+
+  const Icon = icon ?? (variant === 'verified' ? Check : undefined);
+  const resolvedLabel = (label ?? DEFAULT_LABELS[variant] ?? '').toUpperCase();
+
+  const badgeStyle: ViewStyle = {
+    backgroundColor: config.backgroundColor,
+    borderColor: config.borderColor,
+    borderWidth: 1,
+    borderRadius: borderRadius.chip,
+    paddingHorizontal: compact ? 12 : 16,
+    paddingVertical: compact ? 8 : 10,
+    minHeight: compact ? 30 : 34,
+    alignSelf: 'flex-start',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    ...(variant === 'tonight'
+      ? { shadowColor: '#FF2E88', shadowOffset: { width: 0, height: 0 }, shadowOpacity: 0.45, shadowRadius: 12, elevation: 6 }
+      : {}),
+  };
+
+  const textStyleResolved: TextStyle = {
+    color: config.textColor,
+    ...typography.badge,
+    letterSpacing: 1.45,
+    opacity: 1,
+    fontWeight: '600',
+  };
+
+  return (
+    <Animated.View
+      style={[
+        badgeStyle,
+        variant === 'tonight' ? { transform: [{ scale: pulse }] } : null,
+        style,
+      ]}
+    >
+      {Icon ? <Icon color={config.textColor} size={12} strokeWidth={2.5} /> : null}
+      <Text style={[textStyleResolved, textStyle]}>{resolvedLabel}</Text>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  dateBadge: {
+    width: 54,
+    aspectRatio: 1,
+    borderRadius: 14,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    paddingVertical: 6,
+  },
+  dateDay: {
+    fontFamily: 'SpaceGrotesk_700Bold',
+    fontSize: 18,
+    lineHeight: 20,
+    letterSpacing: -0.24,
+    textAlign: 'center',
+  },
+  dateMonth: {
+    fontFamily: 'JetBrainsMono_500Medium',
+    fontSize: 9,
+    lineHeight: 10,
+    letterSpacing: 1.2,
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    marginTop: 1,
+  },
+});

src/components/Button.tsx

@@ -0,0 +1,263 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import type { LucideIcon } from 'lucide-react-native';
+import { useCallback, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  type GestureResponderEvent,
+  Pressable,
+  type StyleProp,
+  StyleSheet,
+  Text,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { borderRadius } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+
+const BUTTON_HEIGHT = 52;
+const PRESSED_SCALE = 0.97;
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
+type IconOnlyShape = 'round' | 'default';
+
+type ButtonProps = {
+	label?: string;
+	variant?: ButtonVariant;
+	disabled?: boolean;
+	loading?: boolean;
+	loadingLabel?: string;
+	autoLoading?: boolean;
+	iconOnly?: boolean;
+	iconOnlyShape?: IconOnlyShape;
+	icon?: LucideIcon;
+	leftIcon?: LucideIcon;
+	rightIcon?: LucideIcon;
+	iconSize?: number;
+	iconStrokeWidth?: number;
+	fullWidth?: boolean;
+	onPress?: (event: GestureResponderEvent) => void | Promise<void>;
+	style?: StyleProp<ViewStyle>;
+	textStyle?: StyleProp<TextStyle>;
+	accessibilityLabel?: string;
+	testID?: string;
+};
+
+export function Button({
+	label,
+	variant = 'primary',
+	disabled = false,
+	loading = false,
+	loadingLabel,
+	autoLoading = false,
+	iconOnly = false,
+	iconOnlyShape = 'round',
+	icon,
+	leftIcon,
+	rightIcon,
+	iconSize = 20,
+	iconStrokeWidth = 2,
+	fullWidth = true,
+	onPress,
+	style,
+	textStyle,
+	accessibilityLabel,
+	testID,
+}: ButtonProps) {
+	const [internalLoading, setInternalLoading] = useState(false);
+	const [isPressed, setIsPressed] = useState(false);
+
+	const isLoading = loading || internalLoading;
+	const isDisabled = disabled || isLoading;
+	const scale = useSharedValue(1);
+
+	const animatedStyle = useAnimatedStyle(() => ({
+		transform: [{ scale: scale.value }],
+	}));
+
+	const handlePressIn = useCallback(() => {
+		if (isDisabled) {
+			return;
+		}
+
+		setIsPressed(true);
+		scale.value = withTiming(PRESSED_SCALE, { duration: 120 });
+	}, [isDisabled, scale]);
+
+	const handlePressOut = useCallback(() => {
+		setIsPressed(false);
+		scale.value = withTiming(1, { duration: 140 });
+	}, [scale]);
+
+	const handlePress = useCallback(
+		async (event: GestureResponderEvent) => {
+			if (!onPress || isDisabled) {
+				return;
+			}
+
+			const result = onPress(event);
+
+			if (!autoLoading || !(result instanceof Promise)) {
+				return;
+			}
+
+			setInternalLoading(true);
+			try {
+				await result;
+			} finally {
+				setInternalLoading(false);
+			}
+		},
+		[autoLoading, isDisabled, onPress],
+	);
+
+	const labelColor = useMemo(() => {
+		if (isDisabled) {
+			return colors.textDisabled;
+		}
+
+		if (variant === 'primary') {
+			return colors.textPrimary;
+		}
+
+		if (variant === 'destructive') {
+			return colors.danger;
+		}
+
+		if (variant === 'ghost') {
+			return colors.tertiary;
+		}
+
+		return colors.textPrimary;
+	}, [colors, isDisabled, variant]);
+
+	const loadingColor = variant === 'primary' && !isDisabled ? colors.textPrimary : labelColor;
+	const iconOnlyRadius = iconOnlyShape === 'round' ? BUTTON_HEIGHT / 2 : borderRadius.button;
+	const sideIconColor = !isDisabled && variant === 'secondary' ? colors.tertiary : labelColor;
+	const iconOnlyColor = labelColor;
+
+	const IconOnly = icon;
+	const LeftIcon = leftIcon;
+	const RightIcon = rightIcon;
+
+	const containerStyle: ViewStyle = {
+		width: fullWidth && !iconOnly ? '100%' : BUTTON_HEIGHT,
+		height: BUTTON_HEIGHT,
+		borderRadius: iconOnly ? iconOnlyRadius : borderRadius.button,
+		overflow: 'hidden',
+	};
+
+	const baseFillStyle: ViewStyle = {
+		flex: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+		gap: 8,
+		borderRadius: iconOnly ? iconOnlyRadius : borderRadius.button,
+	};
+
+	const variantFillStyle: ViewStyle = (() => {
+		if (isDisabled) {
+			return {
+				backgroundColor: colors.surface,
+				borderWidth: 1,
+				borderColor: colors.border,
+			};
+		}
+
+		if (variant === 'secondary') {
+			return {
+				backgroundColor: colors.surfaceElevated,
+				borderWidth: 1,
+				borderColor: colors.border,
+			};
+		}
+
+		if (variant === 'ghost') {
+			return {
+				backgroundColor: 'transparent',
+			};
+		}
+
+		if (variant === 'destructive') {
+			return {
+				backgroundColor: 'rgba(255, 77, 109, 0.08)',
+				borderWidth: 1,
+				borderColor: colors.danger,
+			};
+		}
+
+		return {
+			backgroundColor: colors.surface,
+		};
+	})();
+
+	const contentPaddingStyle: ViewStyle = {
+		paddingHorizontal: iconOnly ? 0 : 24,
+	};
+
+	const textStyles: TextStyle = {
+		...typography.button,
+		color: labelColor,
+	};
+
+	const content = (
+		<>
+			{isLoading ? <ActivityIndicator color={loadingColor} size="small" /> : null}
+			{!isLoading && iconOnly && IconOnly ? (
+				<IconOnly color={iconOnlyColor} size={iconSize} strokeWidth={iconStrokeWidth} />
+			) : null}
+			{!iconOnly && !isLoading && LeftIcon ? (
+				<LeftIcon color={sideIconColor} size={iconSize} strokeWidth={iconStrokeWidth} />
+			) : null}
+			{!iconOnly && label ? <Text style={[textStyles, textStyle]}>{isLoading && loadingLabel ? loadingLabel : label}</Text> : null}
+			{!iconOnly && !isLoading && RightIcon ? (
+				<RightIcon color={sideIconColor} size={iconSize} strokeWidth={iconStrokeWidth} />
+			) : null}
+		</>
+	);
+
+	const fillNode =
+		variant === 'primary' && !isDisabled ? (
+			<LinearGradient
+				colors={isPressed ? gradients.signaturePressed : gradients.signature}
+				start={gradientDirection.start}
+				end={gradientDirection.end}
+				style={[baseFillStyle, contentPaddingStyle]}
+			>
+				{content}
+			</LinearGradient>
+		) : (
+			<View style={[baseFillStyle, contentPaddingStyle, variantFillStyle]}>{content}</View>
+		);
+
+	return (
+		<AnimatedPressable
+			testID={testID}
+			accessibilityRole="button"
+			accessibilityState={{ disabled: isDisabled, busy: isLoading }}
+			accessibilityLabel={accessibilityLabel ?? label}
+			disabled={isDisabled}
+			onPress={handlePress}
+			onPressIn={handlePressIn}
+			onPressOut={handlePressOut}
+			style={[styles.root, containerStyle, animatedStyle, style]}
+		>
+			{fillNode}
+		</AnimatedPressable>
+	);
+}
+
+export default Button;
+
+const styles = StyleSheet.create({
+	root: {
+		alignSelf: 'stretch',
+	},
+});

src/components/Card.tsx

@@ -0,0 +1,88 @@
+import { Event } from '@/models/events';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Badge } from './Badge';
+import { Button } from './Button';
+import { AvatarStack, AvatarStackItem } from './ui/AvatarStack';
+
+import { typography } from '@/theme';
+import { colors } from '@/theme/colors';
+import { borderRadius } from '@/theme/spacing';
+
+import { Heart, MapPin } from 'lucide-react-native';
+
+export type CardVariant = 'hero' | 'list' | 'compact';
+
+export type CardProps = {
+  variant: CardVariant;
+  event: Event;
+  avatarStack?: AvatarStackItem[];
+  onPress?: () => void;
+};
+
+function Card({
+    variant, 
+    event, 
+    avatarStack,
+    onPress 
+}: CardProps) {
+  const eventDate = event.start_date;
+  const badgeDate = {
+    day: eventDate.getDate().toString().padStart(2, '0'),
+    month: new Intl.DateTimeFormat('fr-FR', { month: 'short' })
+      .format(eventDate)
+      .replace('.', ''),
+  };
+  
+  return (
+    <View
+      style={styles.card}
+    >
+        <View style={styles.header}>
+            <Badge variant='date' date={badgeDate} />
+            <Button variant='ghost' icon={Heart} iconOnly onPress={onPress} />
+        </View>
+
+        <View style={styles.content}>
+            <Badge variant='tonight' label='CE SOIR' />
+            <Text style={styles.title}>
+            {event.name}
+            </Text>
+            <Text style={styles.subtitle}>
+                <MapPin size={16} color={colors.textBody} />{' '}
+            {event.address}, {event.city} - 18 km
+            </Text>
+            {avatarStack && <AvatarStack items={avatarStack} />}
+        </View>
+        
+    </View>
+  ); 
+}
+
+const styles = StyleSheet.create({
+    card: {
+        borderRadius: borderRadius.card,
+        backgroundColor: colors.surface, 
+        height: 230,
+        padding: 16,
+    },
+    header: {
+        flex: 1,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    content: {
+        flex: 3,
+        justifyContent: 'flex-end',
+    },
+    title: {
+        ...typography.cardTitle,
+        color: colors.textPrimary,
+    },
+    subtitle: {
+        ...typography.label,
+        color: colors.textBody
+    }
+});
+
+export default Card;

src/components/ParticipationSegment.tsx

@@ -0,0 +1,373 @@
+import * as Haptics from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Check, Heart } from 'lucide-react-native';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+    ActivityIndicator,
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+import Animated, {
+    Easing,
+    interpolate,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated';
+
+import { colors, glow, gradientDirection, gradients } from '@/theme/colors';
+import { borderRadius } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+type ParticipationValue = {
+  going: boolean;
+  interested: boolean;
+};
+
+type ParticipationSegmentProps = {
+  value?: ParticipationValue;
+  defaultValue?: Partial<ParticipationValue>;
+  onChange?: (nextValue: ParticipationValue) => void;
+  onToggleGoing?: (nextGoing: boolean) => void;
+  onToggleInterested?: (nextInterested: boolean) => void;
+  disabled?: boolean;
+  loadingGoing?: boolean;
+  loadingInterested?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+};
+
+const BUTTON_HEIGHT = 52;
+const TRANSITION_DURATION = 180;
+const ICON_SIZE = 16;
+const SPINNER_SIZE = 18;
+
+const AnimatedView = Animated.createAnimatedComponent(View);
+
+export function ParticipationSegment({
+  value,
+  defaultValue,
+  onChange,
+  onToggleGoing,
+  onToggleInterested,
+  disabled = false,
+  loadingGoing = false,
+  loadingInterested = false,
+  style,
+  testID,
+}: ParticipationSegmentProps) {
+
+  const [internalValue, setInternalValue] = useState<ParticipationValue>({
+    going: defaultValue?.going ?? false,
+    interested: defaultValue?.interested ?? false,
+  });
+
+  const resolvedValue = value ?? internalValue;
+
+  const goingProgress = useSharedValue(resolvedValue.going ? 1 : 0);
+  const interestedProgress = useSharedValue(resolvedValue.interested ? 1 : 0);
+
+  useEffect(() => {
+    goingProgress.value = withTiming(resolvedValue.going ? 1 : 0, {
+      duration: TRANSITION_DURATION,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [goingProgress, resolvedValue.going]);
+
+  useEffect(() => {
+    interestedProgress.value = withTiming(resolvedValue.interested ? 1 : 0, {
+      duration: TRANSITION_DURATION,
+      easing: Easing.out(Easing.cubic),
+    });
+  }, [interestedProgress, resolvedValue.interested]);
+
+  const commitChange = useCallback(
+    (nextValue: ParticipationValue) => {
+      if (!value) {
+        setInternalValue(nextValue);
+      }
+
+      onChange?.(nextValue);
+    },
+    [onChange, value],
+  );
+
+  const emitHaptic = useCallback(async (nextSelected: boolean) => {
+    try {
+      if (nextSelected) {
+        await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        return;
+      }
+
+      await Haptics.selectionAsync();
+    } catch {
+      // Haptics can fail on unsupported devices, the toggle should still work.
+    }
+  }, []);
+
+  const handleToggleGoing = useCallback(async () => {
+    if (disabled || loadingGoing) {
+      return;
+    }
+
+    const nextGoing = !resolvedValue.going;
+    const nextValue = {
+      ...resolvedValue,
+      going: nextGoing,
+    };
+
+    await emitHaptic(nextGoing);
+    commitChange(nextValue);
+    onToggleGoing?.(nextGoing);
+  }, [commitChange, disabled, emitHaptic, loadingGoing, onToggleGoing, resolvedValue]);
+
+  const handleToggleInterested = useCallback(async () => {
+    if (disabled || loadingInterested) {
+      return;
+    }
+
+    const nextInterested = !resolvedValue.interested;
+    const nextValue = {
+      ...resolvedValue,
+      interested: nextInterested,
+    };
+
+    await emitHaptic(nextInterested);
+    commitChange(nextValue);
+    onToggleInterested?.(nextInterested);
+  }, [commitChange, disabled, emitHaptic, loadingInterested, onToggleInterested, resolvedValue]);
+
+  const goingGlowStyle = useAnimatedStyle(() => ({
+    shadowOpacity: interpolate(goingProgress.value, [0, 1], [glow.primary.shadowOpacity ?? 0, 0]),
+    elevation: interpolate(goingProgress.value, [0, 1], [glow.primary.elevation ?? 0, 0]),
+  }));
+
+  const goingIdleLayerStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(goingProgress.value, [0, 1], [1, 0]),
+  }));
+
+  const goingSelectedLayerStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(goingProgress.value, [0, 1], [0, 1]),
+  }));
+
+  const interestedIdleLayerStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(interestedProgress.value, [0, 1], [1, 0]),
+  }));
+
+  const interestedSelectedLayerStyle = useAnimatedStyle(() => ({
+    opacity: interpolate(interestedProgress.value, [0, 1], [0, 1]),
+  }));
+
+  const goingAccessibilityLabel = useMemo(
+    () => (resolvedValue.going ? 'Se desinscrire de la participation' : 'Participer a cet evenement'),
+    [resolvedValue.going],
+  );
+
+  const interestedAccessibilityLabel = useMemo(
+    () =>
+      resolvedValue.interested
+        ? 'Retirer ce marqueur interesse'
+        : 'Marquer cet evenement comme interesse',
+    [resolvedValue.interested],
+  );
+
+  const buttonRadius = borderRadius.button;
+
+  return (
+    <View style={[styles.row, style]} testID={testID}>
+      <AnimatedView
+        style={[
+          styles.buttonShell,
+          {
+            borderRadius: buttonRadius,
+            shadowColor: glow.primary.shadowColor,
+            shadowOffset: glow.primary.shadowOffset,
+            shadowRadius: glow.primary.shadowRadius,
+          },
+          !disabled ? goingGlowStyle : null,
+        ]}
+      >
+        <Pressable
+          onPress={handleToggleGoing}
+          disabled={disabled || loadingGoing}
+          accessibilityRole="button"
+          accessibilityState={{ selected: resolvedValue.going, disabled: disabled || loadingGoing, busy: loadingGoing }}
+          accessibilityLabel={goingAccessibilityLabel}
+          style={styles.pressable}
+        >
+          {disabled ? (
+            <View
+              style={[
+                styles.layer,
+                {
+                  borderRadius: buttonRadius,
+                  backgroundColor: colors.surfaceElevated,
+                  borderColor: colors.border,
+                  borderWidth: 1.5,
+                  opacity: 0.45,
+                },
+              ]}
+            >
+              <Check color={colors.textDisabled} size={ICON_SIZE} strokeWidth={2} />
+              <Text style={[typography.button, { color: colors.textDisabled }]}>Je participe</Text>
+            </View>
+          ) : (
+            <>
+              <AnimatedView style={[styles.layer, { borderRadius: buttonRadius }, goingIdleLayerStyle]}>
+                <LinearGradient
+                  colors={gradients.signature}
+                  start={gradientDirection.start}
+                  end={gradientDirection.end}
+                  style={[styles.fill, { borderRadius: buttonRadius }]}
+                >
+                  {loadingGoing ? (
+                    <ActivityIndicator size={SPINNER_SIZE} color={colors.textPrimary} />
+                  ) : (
+                    <>
+                      <Check color={colors.textPrimary} size={ICON_SIZE} strokeWidth={2} />
+                      <Text style={[typography.button, { color: colors.textPrimary }]}>Je participe</Text>
+                    </>
+                  )}
+                </LinearGradient>
+              </AnimatedView>
+
+              <AnimatedView style={[styles.layer, { borderRadius: buttonRadius }, goingSelectedLayerStyle]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      borderRadius: buttonRadius,
+                      backgroundColor: colors.successSoft,
+                      borderWidth: 1.5,
+                      borderColor: colors.successBorder,
+                    },
+                  ]}
+                >
+                  {loadingGoing ? (
+                    <ActivityIndicator size={SPINNER_SIZE} color={colors.success} />
+                  ) : (
+                    <>
+                      <Check color={colors.success} size={ICON_SIZE} strokeWidth={2} />
+                      <Text style={[typography.button, { color: colors.success }]}>Inscrit</Text>
+                    </>
+                  )}
+                </View>
+              </AnimatedView>
+            </>
+          )}
+        </Pressable>
+      </AnimatedView>
+
+      <View style={[styles.buttonShell, { borderRadius: buttonRadius }]}> 
+        <Pressable
+          onPress={handleToggleInterested}
+          disabled={disabled || loadingInterested}
+          accessibilityRole="button"
+          accessibilityState={{ selected: resolvedValue.interested, disabled: disabled || loadingInterested, busy: loadingInterested }}
+          accessibilityLabel={interestedAccessibilityLabel}
+          style={styles.pressable}
+        >
+          {disabled ? (
+            <View
+              style={[
+                styles.layer,
+                {
+                  borderRadius: buttonRadius,
+                  backgroundColor: colors.surfaceElevated,
+                  borderColor: colors.border,
+                  borderWidth: 1.5,
+                  opacity: 0.45,
+                },
+              ]}
+            >
+              <Heart color={colors.textDisabled} size={ICON_SIZE} strokeWidth={1.7} />
+              <Text style={[typography.button, { color: colors.textDisabled }]}>Interesse</Text>
+            </View>
+          ) : (
+            <>
+              <AnimatedView style={[styles.layer, { borderRadius: buttonRadius }, interestedIdleLayerStyle]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      borderRadius: buttonRadius,
+                      backgroundColor: colors.surfaceElevated,
+                      borderWidth: 1.5,
+                      borderColor: colors.border,
+                    },
+                  ]}
+                >
+                  {loadingInterested ? (
+                    <ActivityIndicator size={SPINNER_SIZE} color={colors.textPrimary} />
+                  ) : (
+                    <>
+                      <Heart color={colors.textPrimary} size={ICON_SIZE} strokeWidth={1.7} fill="none" />
+                      <Text style={[typography.button, { color: colors.textPrimary }]}>Interesse</Text>
+                    </>
+                  )}
+                </View>
+              </AnimatedView>
+
+              <AnimatedView style={[styles.layer, { borderRadius: buttonRadius }, interestedSelectedLayerStyle]}>
+                <View
+                  style={[
+                    styles.fill,
+                    {
+                      borderRadius: buttonRadius,
+                      backgroundColor: colors.primarySoft,
+                      borderWidth: 1.5,
+                      borderColor: colors.primaryBorder,
+                    },
+                  ]}
+                >
+                  {loadingInterested ? (
+                    <ActivityIndicator size={SPINNER_SIZE} color={colors.primary} />
+                  ) : (
+                    <>
+                      <Heart color={colors.primary} size={ICON_SIZE} strokeWidth={0} fill={colors.primary} />
+                      <Text style={[typography.button, { color: colors.primary }]}>Interesse</Text>
+                    </>
+                  )}
+                </View>
+              </AnimatedView>
+            </>
+          )}
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+export type { ParticipationSegmentProps, ParticipationValue };
+
+export default ParticipationSegment;
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 12,
+    alignItems: 'center',
+  },
+  buttonShell: {
+    flex: 1,
+    height: BUTTON_HEIGHT,
+    overflow: 'hidden',
+  },
+  pressable: {
+    flex: 1,
+  },
+  layer: {
+    ...StyleSheet.absoluteFill,
+  },
+  fill: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+});

src/components/ThemeChip.tsx

@@ -0,0 +1,132 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { X } from 'lucide-react-native';
+import { useCallback } from 'react';
+import {
+    Pressable,
+    type StyleProp,
+    StyleSheet,
+    Text,
+    type TextStyle,
+    View,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { borderRadius } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+
+export type ThemeChipSelectedVariant = 'gradient' | 'accent';
+
+export type ThemeChipProps = {
+  label: string;
+  value?: string;
+  selected?: boolean;
+  selectedVariant?: ThemeChipSelectedVariant;
+  disabled?: boolean;
+  showCross?: boolean;
+  showRemoveIcon?: boolean;
+  onSelect?: (value: string, nextSelected: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  testID?: string;
+  accessibilityLabel?: string;
+};
+
+const CHIP_HEIGHT = 34;
+
+export function ThemeChip({
+  label,
+  value,
+  selected = false,
+  selectedVariant = 'accent',
+  disabled = false,
+  showCross,
+  showRemoveIcon = true,
+  onSelect,
+  style,
+  textStyle,
+  testID,
+  accessibilityLabel,
+}: ThemeChipProps) {
+  const resolvedValue = value ?? label;
+  const isGradient = selected && selectedVariant === 'gradient';
+  const showSelectedIcon = selected && (showCross ?? showRemoveIcon);
+
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    onSelect?.(resolvedValue, !selected);
+  }, [disabled, onSelect, resolvedValue, selected]);
+
+  const containerStyle: ViewStyle = {
+    minHeight: CHIP_HEIGHT,
+    borderRadius: borderRadius.chip,
+    paddingHorizontal: 14,
+    borderWidth: 1,
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    opacity: disabled ? 0.45 : 1,
+  };
+
+  const accentSelectedStyle: ViewStyle = {
+    backgroundColor: colors.primarySoft,
+    borderColor: colors.primary,
+  };
+
+  const idleStyle: ViewStyle = {
+    backgroundColor: colors.surface,
+    borderColor: '#2A2A3C',
+  };
+
+  const textColor = isGradient
+    ? colors.textPrimary
+    : selected
+      ? colors.textOnPrimarySoft
+      : colors.textPrimary;
+
+  return (
+    <Pressable
+      testID={testID}
+      disabled={disabled}
+      onPress={handlePress}
+      accessibilityRole="button"
+      accessibilityState={{ disabled, selected }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      style={[styles.root, style]}
+    >
+      {isGradient ? (
+        <LinearGradient
+          colors={gradients.signature}
+          start={gradientDirection.start}
+          end={gradientDirection.end}
+          style={[containerStyle, { borderColor: 'transparent' }]}
+        >
+          <Text style={[styles.label, typography.chip, { color: textColor }, textStyle]}>{label}</Text>
+          {showSelectedIcon ? <X color={textColor} size={12} strokeWidth={2.3} /> : null}
+        </LinearGradient>
+      ) : (
+        <View style={[containerStyle, selected ? accentSelectedStyle : idleStyle]}>
+          <Text style={[styles.label, typography.chip, { color: textColor }, textStyle]}>{label}</Text>
+          {showSelectedIcon ? <X color={textColor} size={12} strokeWidth={2.3} /> : null}
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+export default ThemeChip;
+
+const styles = StyleSheet.create({
+  root: {
+    alignSelf: 'flex-start',
+  },
+  label: {
+    fontWeight: '600',
+  },
+});

src/components/form/FormField.tsx

@@ -0,0 +1,110 @@
+import type { ReactNode } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+
+export type FieldCounter = {
+  value: number;
+  max: number;
+};
+
+export type FormFieldProps = {
+  label?: string;
+  required?: boolean;
+  helper?: string;
+  error?: string;
+  counter?: FieldCounter;
+  children: ReactNode;
+};
+
+const FormField = ({
+  label,
+  required = false,
+  helper,
+  error,
+  counter,
+  children,
+}: FormFieldProps) => {
+  const message = error ?? helper;
+  const isCounterOverflow =
+    typeof counter?.value === 'number' && typeof counter?.max === 'number'
+      ? counter.value > counter.max
+      : false;
+
+  return (
+    <View style={styles.container}>
+      {label ? (
+        <Text style={styles.label}>
+          {label}
+          {required ? <Text style={styles.required}> *</Text> : null}
+        </Text>
+      ) : null}
+
+      {children}
+
+      {message || counter ? (
+        <View style={styles.bottomRow}>
+          {message ? (
+            <Text
+              style={[styles.message, error ? styles.errorMessage : null]}
+              accessibilityLiveRegion={error ? 'polite' : undefined}
+            >
+              {message}
+            </Text>
+          ) : (
+            <View style={styles.messageSpacer} />
+          )}
+
+          {counter ? (
+            <Text
+              style={[styles.counter, isCounterOverflow ? styles.counterError : null]}
+            >
+              {counter.value} / {counter.max}
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  label: {
+    ...typography.inputLabel,
+    color: colors.textBody,
+  },
+  required: {
+    color: colors.primary,
+  },
+  bottomRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  message: {
+    ...typography.helper,
+    color: colors.textSecondary,
+    flex: 1,
+  },
+  errorMessage: {
+    color: colors.danger,
+  },
+  messageSpacer: {
+    flex: 1,
+  },
+  counter: {
+    ...typography.metadataSm,
+    color: colors.textSecondary,
+    fontFamily: fontFamily.mono,
+  },
+  counterError: {
+    color: colors.danger,
+  },
+});
+
+export default FormField;

src/components/form/Input.tsx

@@ -0,0 +1,143 @@
+import type { ReactNode } from 'react';
+import {
+    forwardRef,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type TextInputProps,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+export type InputSize = 'md' | 'lg';
+export type InputState = 'default' | 'error' | 'success';
+
+export type InputProps = Omit<TextInputProps, 'style'> & {
+  size?: InputSize;
+  state?: InputState;
+  left?: ReactNode;
+  right?: ReactNode;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const HEIGHT_BY_SIZE: Record<InputSize, number> = {
+  md: 48,
+  lg: 56,
+};
+
+const Input = forwardRef<TextInput, InputProps>(function Input(
+  {
+    size = 'md',
+    state = 'default',
+    left,
+    right,
+    containerStyle,
+    editable = true,
+    onFocus,
+    onBlur,
+    placeholderTextColor = colors.inputPlaceholder,
+    ...textInputProps
+  },
+  ref,
+) {
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  const handleFocus: NonNullable<TextInputProps['onFocus']> = (event) => {
+    setIsFocused(true);
+    onFocus?.(event);
+  };
+
+  const handleBlur: NonNullable<TextInputProps['onBlur']> = (event) => {
+    setIsFocused(false);
+    onBlur?.(event);
+  };
+
+  const borderColor =
+    state === 'error'
+      ? colors.danger
+      : isFocused
+        ? colors.inputBorderFocus
+        : state === 'success'
+          ? colors.success
+          : colors.inputBorder;
+
+  return (
+    <Pressable
+      onPress={() => {
+        if (editable) {
+          inputRef.current?.focus();
+        }
+      }}
+      style={[
+        styles.container,
+        {
+          height: HEIGHT_BY_SIZE[size],
+          borderColor,
+          backgroundColor: editable ? colors.inputBackground : colors.surface,
+          opacity: editable ? 1 : 0.5,
+        },
+        isFocused && state !== 'error' ? styles.focusRing : null,
+        containerStyle,
+      ]}
+    >
+      {left ? <View style={styles.slot}>{left}</View> : null}
+      <TextInput
+        ref={inputRef}
+        {...textInputProps}
+        editable={editable}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        placeholderTextColor={placeholderTextColor}
+        style={styles.input}
+      />
+      {right ? <View style={styles.slot}>{right}</View> : null}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    gap: 10,
+  },
+  input: {
+    ...typography.input,
+    flex: 1,
+    alignSelf: 'stretch',
+    height: '100%',
+    color: colors.textPrimary,
+    paddingVertical: 0,
+  },
+  slot: {
+    minWidth: 20,
+    minHeight: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  focusRing: {
+    shadowColor: colors.focusRing,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 1,
+    shadowRadius: 10,
+    elevation: 2,
+  },
+});
+
+export default Input;

src/components/form/PasswordInput.tsx

@@ -0,0 +1,117 @@
+import { Eye, EyeOff } from 'lucide-react-native';
+import { forwardRef, useState } from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    TextInput,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type PasswordStrength = 0 | 1 | 2 | 3;
+
+export type PasswordInputProps = Omit<InputProps, 'right' | 'secureTextEntry'> & {
+  strength?: PasswordStrength;
+  strengthContainerStyle?: StyleProp<ViewStyle>;
+};
+
+const SEGMENT_COUNT = 3;
+
+function getStrengthColor(strength: PasswordStrength): string {
+  if (strength <= 1) {
+    return colors.danger;
+  }
+
+  if (strength === 2) {
+    return colors.warning;
+  }
+
+  return colors.success;
+}
+
+const PasswordInput = forwardRef<TextInput, PasswordInputProps>(
+  function PasswordInput({ strength, strengthContainerStyle, ...props }, ref) {
+    const [revealed, setRevealed] = useState(false);
+    const strengthColor =
+      typeof strength === 'number' ? getStrengthColor(strength) : colors.divider;
+
+    return (
+      <View style={styles.wrapper}>
+        <Input
+          ref={ref}
+          secureTextEntry={!revealed}
+          autoCapitalize="none"
+          autoCorrect={false}
+          textContentType="password"
+          autoComplete="current-password"
+          right={
+            <Pressable
+              onPress={() => setRevealed((prev) => !prev)}
+              style={styles.toggleButton}
+              hitSlop={8}
+              accessibilityRole="button"
+              accessibilityLabel={
+                revealed
+                  ? 'Masquer le mot de passe'
+                  : 'Afficher le mot de passe'
+              }
+            >
+              {revealed ? (
+                <EyeOff color={colors.textSecondary} size={20} />
+              ) : (
+                <Eye color={colors.textSecondary} size={20} />
+              )}
+            </Pressable>
+          }
+          {...props}
+        />
+
+        {typeof strength === 'number' ? (
+          <View style={[styles.strengthRow, strengthContainerStyle]}>
+            {Array.from({ length: SEGMENT_COUNT }).map((_, index) => (
+              <View
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}
+                style={[
+                  styles.strengthSegment,
+                  {
+                    backgroundColor:
+                      index < strength ? strengthColor : colors.divider,
+                  },
+                ]}
+              />
+            ))}
+          </View>
+        ) : null}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    gap: 8,
+  },
+  toggleButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  strengthRow: {
+    flexDirection: 'row',
+    gap: 4,
+  },
+  strengthSegment: {
+    flex: 1,
+    height: 3,
+    borderRadius: 999,
+  },
+});
+
+export default PasswordInput;

src/components/form/SearchInput.tsx

@@ -0,0 +1,84 @@
+import { Search, X } from 'lucide-react-native';
+import {
+    forwardRef,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    type ReactNode,
+} from 'react';
+import { Pressable, StyleSheet, TextInput } from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+import Input, { type InputProps } from './Input';
+
+export type SearchInputProps = Omit<InputProps, 'left' | 'right'> & {
+  onDebouncedChange?: (value: string) => void;
+  debounceMs?: number;
+};
+
+const SearchInput = forwardRef<TextInput, SearchInputProps>(function SearchInput(
+  { onDebouncedChange, debounceMs = 300, value, onChangeText, ...props },
+  ref,
+) {
+  const inputRef = useRef<TextInput>(null);
+  const valueAsString = typeof value === 'string' ? value : '';
+
+  useImperativeHandle(ref, () => inputRef.current as TextInput);
+
+  useEffect(() => {
+    if (!onDebouncedChange) {
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      onDebouncedChange(valueAsString);
+    }, debounceMs);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [debounceMs, onDebouncedChange, valueAsString]);
+
+  const clearButton: ReactNode =
+    valueAsString.length > 0 ? (
+      <Pressable
+        onPress={() => {
+          onChangeText?.('');
+          inputRef.current?.clear();
+          inputRef.current?.focus();
+        }}
+        style={styles.clearButton}
+        hitSlop={8}
+        accessibilityRole="button"
+        accessibilityLabel="Vider la recherche"
+      >
+        <X color={colors.textSecondary} size={20} />
+      </Pressable>
+    ) : null;
+
+  return (
+    <Input
+      ref={inputRef}
+      value={value}
+      onChangeText={onChangeText}
+      left={<Search color={colors.textSecondary} size={20} />}
+      right={clearButton}
+      returnKeyType="search"
+      autoCorrect={false}
+      clearButtonMode="never"
+      {...props}
+    />
+  );
+});
+
+const styles = StyleSheet.create({
+  clearButton: {
+    width: 44,
+    height: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default SearchInput;

src/components/form/Switch.tsx

@@ -0,0 +1,151 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { useEffect, useRef } from 'react';
+import {
+    Animated,
+    Easing,
+    Pressable,
+    StyleSheet,
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors } from '@/theme/colors';
+
+export type SwitchSize = 'md' | 'lg';
+
+export type SwitchProps = {
+  value: boolean;
+  onValueChange?: (value: boolean) => void;
+  disabled?: boolean;
+  testID?: string;
+  accessibilityLabel?: string;
+  size?: SwitchSize;
+  containerStyle?: StyleProp<ViewStyle>;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SIZE_BY_VARIANT: Record<
+  SwitchSize,
+  { width: number; height: number; thumb: number; padding: number }
+> = {
+  md: { width: 56, height: 34, thumb: 26, padding: 4 },
+  lg: { width: 64, height: 38, thumb: 30, padding: 4 },
+};
+
+function Switch({
+  size = 'md',
+  value,
+  disabled,
+  onValueChange,
+  testID,
+  accessibilityLabel,
+  containerStyle,
+  style,
+}: SwitchProps) {
+  const metrics = SIZE_BY_VARIANT[size];
+  const travel = metrics.width - metrics.padding * 2 - metrics.thumb;
+  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(progress, {
+      toValue: value ? 1 : 0,
+      duration: 180,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start();
+  }, [progress, value]);
+
+  const thumbTranslateX = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, travel],
+  });
+
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: value, disabled }}
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={() => onValueChange?.(!value)}
+      style={[
+        styles.container,
+        {
+          width: metrics.width,
+          height: metrics.height,
+          borderRadius: metrics.height / 2,
+          opacity: disabled ? 0.5 : 1,
+        },
+        containerStyle,
+      ]}
+    >
+      {value ? (
+        <LinearGradient
+          colors={[colors.secondary, colors.primary]}
+          start={{ x: 0, y: 0.5 }}
+          end={{ x: 1, y: 0.5 }}
+          style={[
+            styles.trackFill,
+            { borderRadius: metrics.height / 2, borderColor: 'rgba(255,255,255,0.18)' },
+          ]}
+          pointerEvents="none"
+        />
+      ) : (
+        <View
+          style={[
+            styles.trackFill,
+            styles.trackOff,
+            { borderRadius: metrics.height / 2 },
+          ]}
+          pointerEvents="none"
+        />
+      )}
+
+      <Animated.View
+        style={[
+          styles.thumb,
+          {
+            width: metrics.thumb,
+            height: metrics.thumb,
+            borderRadius: metrics.thumb / 2,
+            top: metrics.padding,
+            left: metrics.padding,
+            transform: [{ translateX: thumbTranslateX }],
+            backgroundColor: value ? '#FFFFFF' : colors.textStrong,
+          },
+          style,
+        ]}
+      />
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  trackFill: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    borderWidth: 1,
+  },
+  trackOff: {
+    backgroundColor: colors.surfaceElevated,
+    borderColor: colors.inputBorder,
+  },
+  thumb: {
+    position: 'absolute',
+    shadowColor: '#000000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+});
+
+export default Switch;

src/components/form/TextArea.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { TextInput, type StyleProp, type ViewStyle } from 'react-native';
+
+import { typography } from '@/theme/typography';
+
+import Input, { type InputProps } from './Input';
+
+export type TextAreaProps = Omit<
+  InputProps,
+  'multiline' | 'textAlignVertical' | 'containerStyle'
+> & {
+  rows?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+const TextArea = forwardRef<TextInput, TextAreaProps>(function TextArea(
+  { rows = 4, containerStyle, ...props },
+  ref,
+) {
+  const lineHeight =
+    typeof typography.input.lineHeight === 'number'
+      ? typography.input.lineHeight
+      : 22;
+  const minHeight = rows * lineHeight + 24;
+
+  return (
+    <Input
+      ref={ref}
+      multiline
+      textAlignVertical="top"
+      containerStyle={[
+        {
+          minHeight,
+          alignItems: 'flex-start',
+          paddingVertical: 12,
+        },
+        containerStyle,
+      ]}
+      {...props}
+    />
+  );
+});
+
+export default TextArea;

src/components/form/index.ts

@@ -0,0 +1,14 @@
+export { default as FormField } from './FormField';
+export { default as Input } from './Input';
+export { default as PasswordInput } from './PasswordInput';
+export { default as SearchInput } from './SearchInput';
+export { default as Switch } from './Switch';
+export { default as TextArea } from './TextArea';
+
+export type { FieldCounter, FormFieldProps } from './FormField';
+export type { InputProps, InputSize, InputState } from './Input';
+export type { PasswordInputProps, PasswordStrength } from './PasswordInput';
+export type { SearchInputProps } from './SearchInput';
+export type { SwitchProps, SwitchSize } from './Switch';
+export type { TextAreaProps } from './TextArea';
+

src/components/navigation/BahlaTabBar copy.tsx

@@ -0,0 +1,278 @@
+/* ------------------------------------------------------------------ *
+ * 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}
+      blurMethod='dimezisBlurViewSdk31Plus'
+      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/navigation/BahlaTabBar.tsx

@@ -0,0 +1,280 @@
+/* ------------------------------------------------------------------ *
+ * 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 { LinearGradient } from 'expo-linear-gradient';
+import { Tabs } from 'expo-router';
+import { useCallback, type ComponentProps } from 'react';
+import {
+  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 = 72;
+const FAB_RADIUS = 24;
+const FAB_LIFT = 40;
+
+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 (
+    <View
+      style={[
+        styles.bar,
+        {
+          height: TAB_BAR_BASE_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          backgroundColor: colors.deepBackground,
+        },
+      ]}
+    >
+      {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}>
+              <View style={styles.fabShell}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={fabAccessibilityLabel}
+                onPress={onFabPress}
+                style={styles.fabPressable}
+              >
+                {({ pressed }) => (
+                  <LinearGradient
+                    colors={gradients.signature}
+                    start={gradientDirection.start}
+                    end={gradientDirection.end}
+                    style={[
+                      styles.fabGradient,
+                      pressed && styles.fabGradientPressed,
+                    ]}
+                  >
+                    <Plus size={28} color={colors.onPrimary} />
+                  </LinearGradient>
+                )}
+              </Pressable>
+              </View>
+            </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>
+        );
+      })}
+    </View>
+  );
+}
+
+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: 96,
+    alignItems: 'center',
+    overflow: 'visible',
+    zIndex: 20,
+  },
+
+  fabShell: {
+    width: FAB_SIZE,
+    height: FAB_SIZE,
+    aspectRatio: 1,
+    borderRadius: FAB_RADIUS,
+    // Remonte au-dessus de la barre et découpe un anneau dans le fond.
+    marginTop: -FAB_LIFT,
+    overflow: 'hidden',
+    alignSelf: 'center',
+    zIndex: 20,
+    borderWidth: 3,
+    borderColor: colors.deepBackground,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 16 },
+    shadowOpacity: 0.9,
+    shadowRadius: 20,
+    elevation: 18,
+  },
+
+  fabPressable: {
+    width: '100%',
+    height: '100%',
+    borderRadius: FAB_RADIUS,
+    overflow: 'hidden',
+  },
+
+  fabGradient: {
+    width: '100%',
+    height: '100%',
+    aspectRatio: 1,
+    borderRadius: FAB_RADIUS,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  fabGradientPressed: {
+    transform: [{ scale: 0.96 }],
+    opacity: 0.92,
+  },
+});
+
+export default BahlaTabBar;

src/components/organizer/CreateActionSheet.tsx

@@ -0,0 +1,184 @@
+/* ------------------------------------------------------------------ *
+ * 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 { MessageSquare, 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();
+
+  /* TODO - rendre dynamique en fonction du club connecté */
+  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} />
+
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.modalTitle,
+          ]}
+        >
+          Créer - Club Vertige 
+        </Text> 
+
+        
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreateEvent}
+          style={styles.rowPressable}
+        >
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed, { borderColor: colors.primary, borderWidth: 0.5 }]}>
+              <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>
+            </View>
+          )}
+        </Pressable>
+
+        <Pressable
+          accessibilityRole="button"
+          onPress={onCreatePost}
+          style={styles.rowPressable}
+        >
+          {({ pressed }) => (
+            <View style={[styles.row, pressed && styles.rowPressed]}>
+              <View style={[styles.iconBox, styles.iconBoxPlain]}>
+                <MessageSquare 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>
+            </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,
+  },
+
+  rowPressable: {
+    borderRadius: 18,
+  },
+
+  rowPressed: {
+    opacity: 0.7,
+  },
+
+  iconBox: {
+    width: 48,
+    height: 48,
+    borderRadius: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  iconBoxPlain: {
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+  },
+
+  modalTitle: {
+    ...typography.sectionLabel,
+    color: colors.textPrimary,
+    fontSize: 14,
+    marginBottom: 10,
+  },
+
+  rowText: { flex: 1, gap: 2 },
+
+  rowTitle: {
+    ...typography.label,
+    fontSize: 16,
+    color: colors.textPrimary,
+  },
+
+  rowSub: {
+    ...typography.caption,
+    color: colors.textSecondary,
+  },
+});
+
+export default CreateActionSheet;

src/components/ui/AttendeeSummary.tsx

@@ -0,0 +1,85 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { fontFamily, typography } from '@/theme/typography';
+
+import { AvatarStack, type AvatarStackProps } from './AvatarStack';
+
+export type AttendeeSummaryProps = Pick<
+  AvatarStackProps,
+  'items' | 'max' | 'size' | 'ringColor'
+> & {
+  total: number;
+  formatLabel?: (n: number) => string;
+  highlight?: string;
+  onPress?: () => void;
+};
+
+function defaultFormatLabel(n: number): string {
+  if (n === 0) {
+    return 'Sois le premier';
+  }
+
+  if (n === 1) {
+    return '1 participant';
+  }
+
+  return `${n} participants`;
+}
+
+export function AttendeeSummary({
+  items,
+  max,
+  size,
+  ringColor,
+  total,
+  formatLabel = defaultFormatLabel,
+  highlight,
+  onPress,
+}: AttendeeSummaryProps) {
+  const label = formatLabel(total);
+  const accessibilityLabel = highlight ? `${label}, ${highlight}` : label;
+  const Root = onPress ? Pressable : View;
+
+  return (
+    <Root
+      onPress={onPress}
+      accessibilityRole={onPress ? 'button' : undefined}
+      accessibilityLabel={onPress ? accessibilityLabel : undefined}
+      style={styles.row}
+    >
+      <AvatarStack
+        items={items}
+        max={max}
+        size={size}
+        ringColor={ringColor}
+        total={total}
+        ring="border"
+      />
+
+      <Text numberOfLines={1} style={styles.label}>
+        {label}
+        {highlight ? <Text style={styles.highlight}> {highlight}</Text> : null}
+      </Text>
+    </Root>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  label: {
+    ...typography.metadata,
+    color: colors.textSecondary,
+    flexShrink: 1,
+  },
+  highlight: {
+    color: colors.primary,
+    fontFamily: fontFamily.bodySemi,
+  },
+});
+
+export default AttendeeSummary;

src/components/ui/Avatar.tsx

@@ -0,0 +1,232 @@
+import { Image } from 'expo-image';
+import { LinearGradient } from 'expo-linear-gradient';
+import { User } from 'lucide-react-native';
+import { useEffect, useMemo, useState } from 'react';
+import {
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type ImageSourcePropType,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { fontFamily } from '@/theme/typography';
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export const AVATAR_SIZES: Record<AvatarSize, number> = {
+  xs: 20,
+  sm: 26,
+  md: 34,
+  lg: 48,
+  xl: 72,
+};
+
+export type AvatarProps = {
+  source?: ImageSourcePropType | string | null;
+  name?: string;
+  size?: AvatarSize;
+  shape?: 'circle' | 'rounded';
+  ring?: 'none' | 'border' | 'gradient';
+  ringColor?: string;
+  badge?: 'none' | 'online' | 'live';
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+function getInitials(name?: string): string {
+  if (!name) {
+    return '';
+  }
+
+  const words = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2);
+
+  if (words.length === 0) {
+    return '';
+  }
+
+  return words
+    .map((word) => word.charAt(0))
+    .join('')
+    .toUpperCase();
+}
+
+export function Avatar({
+  source,
+  name,
+  size = 'md',
+  shape = 'circle',
+  ring = 'none',
+  ringColor,
+  badge = 'none',
+  onPress,
+  style,
+}: AvatarProps) {
+  const [hasImageError, setHasImageError] = useState(false);
+
+  const diameter = AVATAR_SIZES[size];
+  const radius = shape === 'rounded' ? Math.round(diameter * 0.3) : diameter / 2;
+  const innerRadius = ring === 'gradient' ? Math.max(0, radius - 2) : radius;
+  const fallbackInitials = useMemo(() => getInitials(name), [name]);
+  const normalizedSource =
+    typeof source === 'string' ? { uri: source } : (source ?? null);
+
+  useEffect(() => {
+    setHasImageError(false);
+  }, [source]);
+
+  const shouldShowImage = normalizedSource !== null && !hasImageError;
+  const badgeSize = Math.max(8, Math.round(diameter * 0.26));
+  const fallbackTextSize = Math.round(diameter * 0.38);
+  const iconSize = Math.round(diameter * 0.5);
+  const minTouchSize = 44;
+  const hitSlopPadding = diameter < minTouchSize ? Math.ceil((minTouchSize - diameter) / 2) : 0;
+
+  const frameStyle: ViewStyle = {
+    width: diameter,
+    height: diameter,
+    borderRadius: radius,
+  };
+
+  const innerStyle: ViewStyle = {
+    flex: 1,
+    borderRadius: innerRadius,
+    overflow: 'hidden',
+    backgroundColor: colors.surfaceElevated,
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  const borderStyle: ViewStyle =
+    ring === 'border'
+      ? {
+          borderWidth: 2,
+          borderColor: ringColor ?? colors.border,
+        }
+      : {};
+
+  const badgeColor = badge === 'online' ? colors.success : colors.primary;
+
+  const innerContentNode = shouldShowImage ? (
+    <Image
+      source={normalizedSource}
+      style={styles.media}
+      contentFit="cover"
+      transition={180}
+      onError={() => setHasImageError(true)}
+    />
+  ) : fallbackInitials ? (
+    <Text
+      style={{
+        fontFamily: fontFamily.bodySemi,
+        fontSize: fallbackTextSize,
+        color: colors.textPrimary,
+        lineHeight: fallbackTextSize,
+      }}
+    >
+      {fallbackInitials}
+    </Text>
+  ) : (
+    <User size={iconSize} color={colors.textSecondary} strokeWidth={1.9} />
+  );
+
+  const avatarNode =
+    ring === 'gradient' ? (
+      <LinearGradient
+        colors={gradients.signature}
+        start={gradientDirection.start}
+        end={gradientDirection.end}
+        style={[frameStyle, styles.gradientFrame]}
+      >
+        <View style={innerStyle}>{innerContentNode}</View>
+        {badge !== 'none' ? (
+          <View
+            style={[
+              styles.badge,
+              {
+                width: badgeSize,
+                height: badgeSize,
+                borderRadius: badgeSize / 2,
+                backgroundColor: badgeColor,
+              },
+            ]}
+          />
+        ) : null}
+      </LinearGradient>
+    ) : (
+      <View style={[frameStyle, styles.frame, borderStyle]}>
+        <View style={innerStyle}>{innerContentNode}</View>
+        {badge !== 'none' ? (
+          <View
+            style={[
+              styles.badge,
+              {
+                width: badgeSize,
+                height: badgeSize,
+                borderRadius: badgeSize / 2,
+                backgroundColor: badgeColor,
+              },
+            ]}
+          />
+        ) : null}
+      </View>
+    );
+
+  if (!onPress) {
+    return (
+      <View style={style} accessible={false}>
+        {avatarNode}
+      </View>
+    );
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      accessibilityRole="button"
+      accessibilityLabel={name ? `Avatar de ${name}` : 'Avatar'}
+      hitSlop={
+        hitSlopPadding > 0
+          ? {
+              top: hitSlopPadding,
+              right: hitSlopPadding,
+              bottom: hitSlopPadding,
+              left: hitSlopPadding,
+            }
+          : undefined
+      }
+      style={style}
+    >
+      {avatarNode}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  media: {
+    width: '100%',
+    height: '100%',
+  },
+  gradientFrame: {
+    padding: 2,
+  },
+  frame: {
+    backgroundColor: colors.surfaceElevated,
+  },
+  badge: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    borderWidth: 2,
+    borderColor: colors.surface,
+  },
+});
+
+export default Avatar;

src/components/ui/AvatarStack.tsx

@@ -0,0 +1,138 @@
+import { Pressable, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+
+import { colors } from '@/theme/colors';
+import { fontFamily } from '@/theme/typography';
+
+import { AVATAR_SIZES, Avatar, type AvatarSize } from './Avatar';
+
+export type AvatarStackItem = { id: string; source?: string | null; name?: string };
+
+export type AvatarStackProps = {
+  items: AvatarStackItem[];
+  max?: number;
+  size?: AvatarSize;
+  overlap?: number;
+  showOverflow?: boolean;
+  total?: number;
+  ring?: 'border' | 'none';
+  ringColor?: string;
+  onPress?: () => void;
+};
+
+function formatParticipantsLabel(count: number): string {
+  return count === 1 ? '1 participant' : `${count} participants`;
+}
+
+export function AvatarStack({
+  items,
+  max = 3,
+  size = 'sm',
+  overlap = 0.34,
+  showOverflow = true,
+  total,
+  ring = 'border',
+  ringColor,
+  onPress,
+}: AvatarStackProps) {
+  if (items.length === 0) {
+    return null;
+  }
+
+  const diameter = AVATAR_SIZES[size];
+  const visibleCount = Math.max(0, Math.min(max, items.length));
+  const visibleItems = items.slice(0, visibleCount);
+  const effectiveTotal = total ?? items.length;
+  const overflowCount = Math.max(0, effectiveTotal - visibleCount);
+  const borderColor = ringColor ?? colors.surface;
+
+  type StackSlot =
+    | { key: string; kind: 'overflow'; value: number }
+    | { key: string; kind: 'avatar'; item: AvatarStackItem };
+
+  const slots: StackSlot[] = [];
+
+  if (showOverflow !== false && overflowCount > 0) {
+    slots.push({ key: 'overflow', kind: 'overflow', value: overflowCount });
+  }
+
+  visibleItems
+    .slice()
+    .reverse()
+    .forEach((item) => {
+      slots.push({ key: item.id, kind: 'avatar', item });
+    });
+
+  const rootStyle: ViewStyle = {
+    flexDirection: 'row-reverse',
+    alignItems: 'center',
+  };
+
+  const StackRoot = onPress ? Pressable : View;
+
+  return (
+    <StackRoot
+      onPress={onPress}
+      accessibilityRole={onPress ? 'button' : 'image'}
+      accessibilityLabel={formatParticipantsLabel(effectiveTotal)}
+      accessible
+      style={rootStyle}
+    >
+      {slots.map((slot, index) => {
+        const offsetStyle = index === 0 ? null : { marginLeft: -(diameter * overlap) };
+
+        if (slot.kind === 'overflow') {
+          return (
+            <View
+              key={slot.key}
+              style={[
+                styles.overflow,
+                {
+                  width: diameter,
+                  height: diameter,
+                  borderRadius: diameter / 2,
+                  borderWidth: ring === 'border' ? 2 : 0,
+                  borderColor: ring === 'border' ? borderColor : 'transparent',
+                },
+                offsetStyle,
+              ]}
+              accessible={false}
+            >
+              <Text
+                style={{
+                  fontFamily: fontFamily.monoMedium,
+                  fontSize: Math.round(diameter * 0.36),
+                  lineHeight: Math.round(diameter * 0.38),
+                  color: colors.textSecondary,
+                }}
+              >
+                +{slot.value}
+              </Text>
+            </View>
+          );
+        }
+
+        return (
+          <Avatar
+            key={slot.key}
+            source={slot.item.source ?? null}
+            name={slot.item.name}
+            size={size}
+            ring={ring === 'border' ? 'border' : 'none'}
+            ringColor={ring === 'border' ? borderColor : undefined}
+            style={offsetStyle}
+          />
+        );
+      })}
+    </StackRoot>
+  );
+}
+
+const styles = StyleSheet.create({
+  overflow: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.surfaceElevated,
+  },
+});
+
+export default AvatarStack;

src/components/ui/Header.tsx

@@ -0,0 +1,91 @@
+/* ------------------------------------------------------------------ *
+ * Header — trois variantes : large, compact, overlay.
+ * ------------------------------------------------------------------ */
+import { useRouter } from 'expo-router';
+import { ChevronLeft } from 'lucide-react-native';
+import { ReactNode } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+import { typography } from '@/theme/typography';
+
+type Props = {
+  title?: string;
+  /** Overline mono au-dessus du titre (variante large uniquement). */
+  overline?: string;
+  variant?: 'large' | 'compact' | 'overlay';
+  /** Flèche retour. Auto : true sauf en `large`. */
+  back?: boolean;
+  onBack?: () => void;
+  /** Actions à droite — icônes 44×44 déjà encapsulées par l'appelant. */
+  right?: ReactNode;
+};
+
+export function Header({ title, overline, variant = 'large', back, onBack, right }: Props) {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+  const showBack = back ?? variant !== 'large';
+  const glass = variant === 'overlay';
+
+  return (
+    <View
+      style={[
+        styles.row,
+        variant === 'overlay' && [styles.absolute, { paddingTop: insets.top + 8 }],
+        variant === 'compact' && styles.compactRow,
+      ]}
+    >
+      {showBack && (
+        <Pressable
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Retour"
+          onPress={onBack ?? (() => router.back())}
+          style={[styles.iconButton, glass && styles.iconButtonGlass]}
+        >
+          <ChevronLeft size={22} color={colors.textPrimary} strokeWidth={1.8} />
+        </Pressable>
+      )}
+
+      <View style={[styles.titleWrap, variant === 'compact' && styles.titleWrapCentered]}>
+        {overline && variant === 'large' && <Text style={styles.overline}>{overline}</Text>}
+        {title && (
+          <Text
+            numberOfLines={1}
+            style={variant === 'large' ? styles.titleLarge : styles.titleCompact}
+          >
+            {title}
+          </Text>
+        )}
+      </View>
+
+      {right ?? (showBack && variant === 'compact' ? <View style={styles.spacer} /> : null)}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingTop: 6, paddingBottom: 14 },
+  compactRow: { paddingBottom: 10 },
+  absolute: { position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, paddingHorizontal: 20 },
+
+  titleWrap: { flex: 1, minWidth: 0, gap: 2 },
+  titleWrapCentered: { alignItems: 'center' },
+  overline: { ...typography.overlineSm, color: colors.textSecondary },
+  titleLarge: { ...typography.screenTitleLg, color: colors.textPrimary },
+  titleCompact: { ...typography.cardTitle, color: colors.textPrimary },
+
+  iconButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 14,
+    backgroundColor: colors.surface,
+    borderWidth: 1,
+    borderColor: colors.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonGlass: { backgroundColor: colors.glassFill, borderColor: 'transparent' },
+  spacer: { width: 44 },
+});

src/components/ui/RangeSlider.tsx

@@ -0,0 +1,619 @@
+import * as Haptics from 'expo-haptics';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+    LayoutChangeEvent,
+    StyleSheet,
+    Text,
+    View,
+    type AccessibilityActionEvent,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+} from 'react-native-reanimated';
+
+import { colors } from '@/theme/colors';
+import { sliderMetrics, sliderMotion, spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+import { SliderFill, SliderThumb, SliderTrack, sliderSizes } from './sliderParts';
+
+export type RangeSliderProps = {
+  value: [number, number];
+  onChange: (v: [number, number]) => void;
+  onChangeEnd?: (v: [number, number]) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  minGap?: number;
+  label?: string;
+  formatValue?: (v: number) => string;
+  formatRange?: (a: number, b: number) => string;
+  showBounds?: boolean;
+  ticks?: number[];
+  disabled?: boolean;
+  haptics?: boolean;
+};
+
+const accessibilityActions = [{ name: 'increment' }, { name: 'decrement' }] as const;
+
+type ThumbKey = 'min' | 'max';
+
+function clamp(value: number, min: number, max: number): number {
+  'worklet';
+  return Math.min(max, Math.max(min, value));
+}
+
+function safeStep(step: number): number {
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+
+function quantize(value: number, min: number, max: number, step: number): number {
+  'worklet';
+  const q = Math.round((value - min) / step) * step + min;
+  return clamp(q, min, max);
+}
+
+function valueToX(value: number, min: number, max: number, trackWidth: number): number {
+  'worklet';
+  if (trackWidth <= 0 || max <= min) {
+    return 0;
+  }
+
+  const ratio = (value - min) / (max - min);
+  return clamp(ratio, 0, 1) * trackWidth;
+}
+
+function xToValue(x: number, min: number, max: number, step: number, trackWidth: number): number {
+  'worklet';
+  if (trackWidth <= 0 || max <= min) {
+    return min;
+  }
+
+  const clampedX = clamp(x, 0, trackWidth);
+  const raw = min + (clampedX / trackWidth) * (max - min);
+  return quantize(raw, min, max, step);
+}
+
+function normalizeRange(
+  range: [number, number],
+  min: number,
+  max: number,
+  step: number,
+  minGap: number,
+): [number, number] {
+  const start = quantize(range[0], min, max, step);
+  const end = quantize(range[1], min, max, step);
+  const boundedMinGap = Math.max(minGap, step);
+  const normalizedStart = clamp(start, min, end - boundedMinGap);
+  const normalizedEnd = clamp(end, normalizedStart + boundedMinGap, max);
+
+  return [normalizedStart, normalizedEnd];
+}
+
+export function RangeSlider({
+  value,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  minGap = 1,
+  label,
+  formatValue,
+  formatRange,
+  showBounds = false,
+  ticks,
+  disabled = false,
+  haptics = true,
+}: RangeSliderProps) {
+  const normalizedStep = safeStep(step);
+  const boundedMinGap = Math.max(minGap, normalizedStep);
+  const formatSingle = formatValue ?? ((v: number) => String(v));
+  const formatPair = formatRange ?? ((a: number, b: number) => `${a} – ${b}`);
+
+  const normalizedRange = useMemo(
+    () => normalizeRange(value, min, max, normalizedStep, boundedMinGap),
+    [boundedMinGap, max, min, normalizedStep, value],
+  );
+
+  const trackWidth = useSharedValue(0);
+  const minX = useSharedValue(0);
+  const maxX = useSharedValue(0);
+  const minValue = useSharedValue(normalizedRange[0]);
+  const maxValue = useSharedValue(normalizedRange[1]);
+  const startX = useSharedValue(0);
+  const activeThumb = useSharedValue<0 | 1 | 2>(0);
+  const minScale = useSharedValue(1);
+  const maxScale = useSharedValue(1);
+
+  const lastReportedRef = useRef<[number, number]>(normalizedRange);
+
+  const emitHaptic = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => undefined);
+  }, []);
+
+  const emitChange = useCallback(
+    (nextMin: number, nextMax: number) => {
+      const [prevMin, prevMax] = lastReportedRef.current;
+      if (prevMin === nextMin && prevMax === nextMax) {
+        return;
+      }
+
+      lastReportedRef.current = [nextMin, nextMax];
+      onChange([nextMin, nextMax]);
+      if (haptics) {
+        emitHaptic();
+      }
+    },
+    [emitHaptic, haptics, onChange],
+  );
+
+  const emitChangeEnd = useCallback(
+    (nextMin: number, nextMax: number) => {
+      onChangeEnd?.([nextMin, nextMax]);
+    },
+    [onChangeEnd],
+  );
+
+  const syncFromProp = useCallback(() => {
+    if (trackWidth.value <= 0 || activeThumb.value !== 0) {
+      minValue.value = normalizedRange[0];
+      maxValue.value = normalizedRange[1];
+      return;
+    }
+
+    const nextMinX = valueToX(normalizedRange[0], min, max, trackWidth.value);
+    const nextMaxX = valueToX(normalizedRange[1], min, max, trackWidth.value);
+
+    minValue.value = normalizedRange[0];
+    maxValue.value = normalizedRange[1];
+    minX.value = withSpring(nextMinX, {
+      damping: sliderMotion.springDamping,
+      stiffness: sliderMotion.springStiffness,
+      mass: sliderMotion.springMass,
+    });
+    maxX.value = withSpring(nextMaxX, {
+      damping: sliderMotion.springDamping,
+      stiffness: sliderMotion.springStiffness,
+      mass: sliderMotion.springMass,
+    });
+  }, [activeThumb, max, maxValue, maxX, min, minValue, minX, normalizedRange, trackWidth]);
+
+  useEffect(() => {
+    lastReportedRef.current = normalizedRange;
+    syncFromProp();
+  }, [normalizedRange, syncFromProp]);
+
+  const onTrackLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const nextWidth = event.nativeEvent.layout.width;
+      trackWidth.value = nextWidth;
+
+      minValue.value = normalizedRange[0];
+      maxValue.value = normalizedRange[1];
+      minX.value = valueToX(normalizedRange[0], min, max, nextWidth);
+      maxX.value = valueToX(normalizedRange[1], min, max, nextWidth);
+    },
+    [max, maxValue, maxX, min, minValue, minX, normalizedRange, trackWidth],
+  );
+
+  const minPan = Gesture.Pan()
+    .enabled(!disabled)
+    .hitSlop({
+      left: sliderSizes.thumbHitSlop,
+      right: sliderSizes.thumbHitSlop,
+      top: sliderSizes.thumbHitSlop,
+      bottom: sliderSizes.thumbHitSlop,
+    })
+    .onStart((event) => {
+      if (trackWidth.value <= 0) {
+        return;
+      }
+
+      const distanceBetweenThumbs = Math.abs(maxX.value - minX.value);
+      const touchX = event.x;
+      const minCenter = minX.value;
+      const maxCenter = maxX.value;
+      const distToMin = Math.abs(touchX - minCenter);
+      const distToMax = Math.abs(touchX - maxCenter);
+      const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
+
+      if (distToMin > draggableRadius) {
+        return;
+      }
+
+      if (distanceBetweenThumbs < sliderMetrics.closeThumbThresholdPx && distToMin > distToMax) {
+        return;
+      }
+
+      activeThumb.value = 1;
+      startX.value = minX.value;
+      minScale.value = withSpring(sliderMotion.activeScale, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    })
+    .onUpdate((event) => {
+      if (activeThumb.value !== 1 || trackWidth.value <= 0) {
+        return;
+      }
+
+      const limitMaxValue = maxValue.value - boundedMinGap;
+      const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
+      const rawValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
+      const nextMinValue = clamp(rawValue, min, limitMaxValue);
+      const snappedX = valueToX(nextMinValue, min, max, trackWidth.value);
+
+      if (nextMinValue !== minValue.value) {
+        minValue.value = nextMinValue;
+        minX.value = snappedX;
+        runOnJS(emitChange)(nextMinValue, maxValue.value);
+      }
+    })
+    .onEnd(() => {
+      if (activeThumb.value !== 1) {
+        return;
+      }
+
+      activeThumb.value = 0;
+      minScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+      runOnJS(emitChangeEnd)(minValue.value, maxValue.value);
+    })
+    .onFinalize(() => {
+      if (activeThumb.value === 1) {
+        activeThumb.value = 0;
+      }
+      minScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    });
+
+  const maxPan = Gesture.Pan()
+    .enabled(!disabled)
+    .hitSlop({
+      left: sliderSizes.thumbHitSlop,
+      right: sliderSizes.thumbHitSlop,
+      top: sliderSizes.thumbHitSlop,
+      bottom: sliderSizes.thumbHitSlop,
+    })
+    .onStart((event) => {
+      if (trackWidth.value <= 0) {
+        return;
+      }
+
+      const distanceBetweenThumbs = Math.abs(maxX.value - minX.value);
+      const touchX = event.x;
+      const minCenter = minX.value;
+      const maxCenter = maxX.value;
+      const distToMin = Math.abs(touchX - minCenter);
+      const distToMax = Math.abs(touchX - maxCenter);
+      const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
+
+      if (distToMax > draggableRadius) {
+        return;
+      }
+
+      if (distanceBetweenThumbs < sliderMetrics.closeThumbThresholdPx && distToMax > distToMin) {
+        return;
+      }
+
+      activeThumb.value = 2;
+      startX.value = maxX.value;
+      maxScale.value = withSpring(sliderMotion.activeScale, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    })
+    .onUpdate((event) => {
+      if (activeThumb.value !== 2 || trackWidth.value <= 0) {
+        return;
+      }
+
+      const limitMinValue = minValue.value + boundedMinGap;
+      const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
+      const rawValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
+      const nextMaxValue = clamp(rawValue, limitMinValue, max);
+      const snappedX = valueToX(nextMaxValue, min, max, trackWidth.value);
+
+      if (nextMaxValue !== maxValue.value) {
+        maxValue.value = nextMaxValue;
+        maxX.value = snappedX;
+        runOnJS(emitChange)(minValue.value, nextMaxValue);
+      }
+    })
+    .onEnd(() => {
+      if (activeThumb.value !== 2) {
+        return;
+      }
+
+      activeThumb.value = 0;
+      maxScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+      runOnJS(emitChangeEnd)(minValue.value, maxValue.value);
+    })
+    .onFinalize(() => {
+      if (activeThumb.value === 2) {
+        activeThumb.value = 0;
+      }
+      maxScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    });
+
+  const tapGesture = Gesture.Tap()
+    .enabled(!disabled)
+    .onStart((event) => {
+      if (trackWidth.value <= 0) {
+        return;
+      }
+
+      const tapX = clamp(event.x, 0, trackWidth.value);
+      const distToMin = Math.abs(tapX - minX.value);
+      const distToMax = Math.abs(tapX - maxX.value);
+      const target: ThumbKey = distToMin <= distToMax ? 'min' : 'max';
+
+      const tappedValue = xToValue(tapX, min, max, normalizedStep, trackWidth.value);
+
+      if (target === 'min') {
+        const nextMin = clamp(tappedValue, min, maxValue.value - boundedMinGap);
+        minValue.value = nextMin;
+        minX.value = withSpring(valueToX(nextMin, min, max, trackWidth.value), {
+          damping: sliderMotion.springDamping,
+          stiffness: sliderMotion.springStiffness,
+          mass: sliderMotion.springMass,
+        });
+        runOnJS(emitChange)(nextMin, maxValue.value);
+        runOnJS(emitChangeEnd)(nextMin, maxValue.value);
+        return;
+      }
+
+      const nextMax = clamp(tappedValue, minValue.value + boundedMinGap, max);
+      maxValue.value = nextMax;
+      maxX.value = withSpring(valueToX(nextMax, min, max, trackWidth.value), {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+      runOnJS(emitChange)(minValue.value, nextMax);
+      runOnJS(emitChangeEnd)(minValue.value, nextMax);
+    });
+
+  const gesture = Gesture.Simultaneous(minPan, maxPan, tapGesture);
+
+  const fillStyle = useAnimatedStyle(() => ({
+    left: minX.value,
+    width: Math.max(maxX.value - minX.value, 0),
+  }));
+
+  const minThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: minX.value }, { scale: minScale.value }],
+  }));
+
+  const maxThumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: maxX.value }, { scale: maxScale.value }],
+  }));
+
+  const visualTicks = useMemo(() => {
+    if (!ticks || ticks.length === 0 || max <= min) {
+      return [];
+    }
+
+    return ticks
+      .map((tickValue) => {
+        const ratio = (tickValue - min) / (max - min);
+        const clampedRatio = Math.min(1, Math.max(0, ratio));
+        return { key: String(tickValue), left: `${clampedRatio * 100}%` };
+      });
+  }, [max, min, ticks]);
+
+  const applyAccessibilityStep = useCallback(
+    (thumb: ThumbKey, direction: 1 | -1) => {
+      const [currentMin, currentMax] = normalizedRange;
+
+      if (thumb === 'min') {
+        const nextMin = clamp(
+          quantize(currentMin + direction * normalizedStep, min, max, normalizedStep),
+          min,
+          currentMax - boundedMinGap,
+        );
+
+        if (nextMin === currentMin) {
+          return;
+        }
+
+        onChange([nextMin, currentMax]);
+        onChangeEnd?.([nextMin, currentMax]);
+      } else {
+        const nextMax = clamp(
+          quantize(currentMax + direction * normalizedStep, min, max, normalizedStep),
+          currentMin + boundedMinGap,
+          max,
+        );
+
+        if (nextMax === currentMax) {
+          return;
+        }
+
+        onChange([currentMin, nextMax]);
+        onChangeEnd?.([currentMin, nextMax]);
+      }
+
+      if (haptics) {
+        emitHaptic();
+      }
+    },
+    [boundedMinGap, emitHaptic, haptics, max, min, normalizedRange, normalizedStep, onChange, onChangeEnd],
+  );
+
+  const onAccessibilityActionMin = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
+      applyAccessibilityStep('min', direction);
+    },
+    [applyAccessibilityStep],
+  );
+
+  const onAccessibilityActionMax = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
+      applyAccessibilityStep('max', direction);
+    },
+    [applyAccessibilityStep],
+  );
+
+  const trackTop = (sliderSizes.minTouchSize - sliderSizes.trackHeight) / 2;
+  const thumbTop = (sliderSizes.minTouchSize - sliderSizes.thumbSize) / 2;
+
+  return (
+    <View style={[styles.root, disabled && styles.disabled]}>
+      {(label || formatPair) ? (
+        <View style={styles.headerRow}>
+          <Text style={styles.headerLabel}>{label ?? ''}</Text>
+          <Text style={styles.headerValue}>
+            {formatPair(normalizedRange[0], normalizedRange[1])}
+          </Text>
+        </View>
+      ) : null}
+
+      <GestureDetector gesture={gesture}>
+        <View onLayout={onTrackLayout} style={styles.railContainer}>
+          <SliderTrack style={[styles.track, { top: trackTop }]}>
+            <SliderFill style={[styles.fillBase, fillStyle]} />
+          </SliderTrack>
+
+          {visualTicks.length > 0 ? (
+            <View pointerEvents="none" style={styles.ticksRow}>
+              {visualTicks.map((tick) => (
+                <View key={tick.key} style={[styles.tickMark, { left: tick.left }]} />
+              ))}
+            </View>
+          ) : null}
+
+          <Animated.View
+            style={[styles.thumbPosition, { top: thumbTop, left: -sliderSizes.thumbRadius }, minThumbStyle]}
+            accessible
+            accessibilityRole="adjustable"
+            accessibilityLabel="Prix minimum"
+            accessibilityActions={accessibilityActions as never}
+            onAccessibilityAction={onAccessibilityActionMin}
+            accessibilityValue={{
+              min,
+              max,
+              now: normalizedRange[0],
+              text: formatSingle(normalizedRange[0]),
+            }}
+          >
+            <SliderThumb />
+          </Animated.View>
+
+          <Animated.View
+            style={[styles.thumbPosition, { top: thumbTop, left: -sliderSizes.thumbRadius }, maxThumbStyle]}
+            accessible
+            accessibilityRole="adjustable"
+            accessibilityLabel="Prix maximum"
+            accessibilityActions={accessibilityActions as never}
+            onAccessibilityAction={onAccessibilityActionMax}
+            accessibilityValue={{
+              min,
+              max,
+              now: normalizedRange[1],
+              text: formatSingle(normalizedRange[1]),
+            }}
+          >
+            <SliderThumb />
+          </Animated.View>
+        </View>
+      </GestureDetector>
+
+      {showBounds ? (
+        <View style={styles.boundsRow}>
+          <Text style={styles.boundsText}>{formatSingle(min)}</Text>
+          <Text style={styles.boundsText}>{formatSingle(max)}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    gap: spacing[8],
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[8],
+  },
+  headerLabel: {
+    ...typography.overlineSm,
+    color: colors.textSecondary,
+    flexShrink: 1,
+  },
+  headerValue: {
+    ...typography.cardTitle,
+    color: colors.textPrimary,
+  },
+  railContainer: {
+    minHeight: sliderSizes.minTouchSize,
+    justifyContent: 'center',
+  },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  fillBase: {
+    position: 'absolute',
+  },
+  thumbPosition: {
+    position: 'absolute',
+  },
+  ticksRow: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: sliderSizes.minTouchSize - sliderMetrics.trackHeight,
+    height: spacing[12],
+  },
+  tickMark: {
+    position: 'absolute',
+    width: spacing[2],
+    height: spacing[6],
+    borderRadius: spacing[2],
+    marginLeft: -spacing[2] / 2,
+    backgroundColor: colors.inputBorder,
+  },
+  boundsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  boundsText: {
+    ...typography.metadataSm,
+    fontFamily: typography.overlineSm.fontFamily,
+    color: colors.textSecondary,
+  },
+});
+
+export default RangeSlider;

src/components/ui/Screen.tsx

@@ -0,0 +1,75 @@
+/* ------------------------------------------------------------------ *
+ * Screen — enveloppe d'écran. Fond, zone sûre, padding de tab bar.
+ * ------------------------------------------------------------------ */
+import { ReactNode } from 'react';
+import { ScrollView, StyleSheet, View, ViewStyle } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { colors } from '@/theme/colors';
+
+/** Hauteur de la tab bar custom, hors safe-area. Source unique. */
+import { TAB_BAR_BASE_HEIGHT } from '@/components/navigation/BahlaTabBar';
+export const TAB_BAR_HEIGHT = TAB_BAR_BASE_HEIGHT;
+
+type Props = {
+  children: ReactNode;
+  /** `scroll` enveloppe dans un ScrollView, `static` en View simple. */
+  layout?: 'scroll' | 'static';
+  /** Applique le padding haut de la zone sûre. false pour un écran à image plein bord. */
+  edgeToEdge?: boolean;
+  /** Réserve la hauteur de la tab bar en bas. false sur les écrans modaux / (org)/create. */
+  tabBar?: boolean;
+  /** Halo violet décoratif en haut à gauche (B1, C1). */
+  halo?: boolean;
+  /** Padding horizontal des enfants. 20 par défaut, 0 pour du plein bord. */
+  gutter?: number;
+  contentContainerStyle?: ViewStyle;
+};
+
+export function Screen({
+  children,
+  layout = 'scroll',
+  edgeToEdge = false,
+  tabBar = true,
+  halo = false,
+  gutter = 20,
+  contentContainerStyle,
+}: Props) {
+  const insets = useSafeAreaInsets();
+
+  const padding: ViewStyle = {
+    paddingTop: edgeToEdge ? 0 : insets.top,
+    paddingHorizontal: gutter,
+    paddingBottom: tabBar ? TAB_BAR_HEIGHT + insets.bottom + 24 : insets.bottom + 24,
+  };
+
+  return (
+    <View style={styles.root}>
+      {halo && <View pointerEvents="none" style={styles.halo} />}
+      {layout === 'scroll' ? (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[padding, contentContainerStyle]}
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        <View style={[styles.flex, padding, contentContainerStyle]}>{children}</View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1, backgroundColor: colors.deepBackground },
+  flex: { flex: 1 },
+  halo: {
+    position: 'absolute',
+    width: 380,
+    height: 380,
+    borderRadius: 190,
+    top: -140,
+    left: -60,
+    backgroundColor: colors.secondarySoft,
+  },
+});

src/components/ui/Slider.tsx

@@ -0,0 +1,415 @@
+import * as Haptics from 'expo-haptics';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import {
+    LayoutChangeEvent,
+    StyleSheet,
+    Text,
+    View,
+    type AccessibilityActionEvent
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withSpring,
+} from 'react-native-reanimated';
+
+import { colors } from '@/theme/colors';
+import { sliderMetrics, sliderMotion, spacing } from '@/theme/spacing';
+import { typography } from '@/theme/typography';
+
+import { SliderFill, SliderThumb, SliderTrack, sliderSizes } from './sliderParts';
+
+export type SliderProps = {
+  value: number;
+  onChange: (v: number) => void;
+  onChangeEnd?: (v: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  label?: string;
+  formatValue?: (v: number) => string;
+  showBounds?: boolean;
+  ticks?: number[];
+  disabled?: boolean;
+  haptics?: boolean;
+};
+
+const accessibilityActions = [{ name: 'increment' }, { name: 'decrement' }] as const;
+
+function clamp(value: number, min: number, max: number): number {
+  'worklet';
+  return Math.min(max, Math.max(min, value));
+}
+
+function safeStep(step: number): number {
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+
+function quantize(value: number, min: number, max: number, step: number): number {
+  'worklet';
+  const q = Math.round((value - min) / step) * step + min;
+  return clamp(q, min, max);
+}
+
+function valueToX(value: number, min: number, max: number, trackWidth: number): number {
+  'worklet';
+  if (trackWidth <= 0 || max <= min) {
+    return 0;
+  }
+
+  const ratio = (value - min) / (max - min);
+  return clamp(ratio, 0, 1) * trackWidth;
+}
+
+function xToValue(x: number, min: number, max: number, step: number, trackWidth: number): number {
+  'worklet';
+  if (trackWidth <= 0 || max <= min) {
+    return min;
+  }
+
+  const clampedX = clamp(x, 0, trackWidth);
+  const raw = min + (clampedX / trackWidth) * (max - min);
+  return quantize(raw, min, max, step);
+}
+
+export function Slider({
+  value,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  formatValue,
+  showBounds = false,
+  ticks,
+  disabled = false,
+  haptics = true,
+}: SliderProps) {
+  const normalizedStep = safeStep(step);
+  const format = formatValue ?? ((v: number) => String(v));
+  const normalizedValue = useMemo(
+    () => quantize(value, min, max, normalizedStep),
+    [max, min, normalizedStep, value],
+  );
+
+  const trackWidth = useSharedValue(0);
+  const thumbX = useSharedValue(0);
+  const currentValue = useSharedValue(normalizedValue);
+  const startX = useSharedValue(0);
+  const thumbScale = useSharedValue(1);
+  const isDragging = useSharedValue(false);
+
+  const lastReportedRef = useRef(normalizedValue);
+
+  const emitHaptic = useCallback(() => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => undefined);
+  }, []);
+
+  const emitChange = useCallback(
+    (next: number) => {
+      if (lastReportedRef.current === next) {
+        return;
+      }
+
+      lastReportedRef.current = next;
+      onChange(next);
+      if (haptics) {
+        emitHaptic();
+      }
+    },
+    [emitHaptic, haptics, onChange],
+  );
+
+  const emitChangeEnd = useCallback(
+    (next: number) => {
+      onChangeEnd?.(next);
+    },
+    [onChangeEnd],
+  );
+
+  const syncFromProp = useCallback(() => {
+    if (trackWidth.value <= 0 || isDragging.value) {
+      currentValue.value = normalizedValue;
+      return;
+    }
+
+    const x = valueToX(normalizedValue, min, max, trackWidth.value);
+    currentValue.value = normalizedValue;
+    thumbX.value = withSpring(x, {
+      damping: sliderMotion.springDamping,
+      stiffness: sliderMotion.springStiffness,
+      mass: sliderMotion.springMass,
+    });
+  }, [currentValue, isDragging, max, min, normalizedValue, thumbX, trackWidth]);
+
+  useEffect(() => {
+    lastReportedRef.current = normalizedValue;
+    syncFromProp();
+  }, [normalizedValue, syncFromProp]);
+
+  const onTrackLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const nextWidth = event.nativeEvent.layout.width;
+      trackWidth.value = nextWidth;
+      currentValue.value = normalizedValue;
+      thumbX.value = valueToX(normalizedValue, min, max, nextWidth);
+    },
+    [currentValue, max, min, normalizedValue, thumbX, trackWidth],
+  );
+
+  const panGesture = Gesture.Pan()
+    .enabled(!disabled)
+    .hitSlop({
+      left: sliderSizes.thumbHitSlop,
+      right: sliderSizes.thumbHitSlop,
+      top: sliderSizes.thumbHitSlop,
+      bottom: sliderSizes.thumbHitSlop,
+    })
+    .onStart((event) => {
+      if (trackWidth.value <= 0) {
+        return;
+      }
+
+      const centerX = thumbX.value;
+      const distance = Math.abs(event.x - centerX);
+      const draggableRadius = sliderSizes.thumbSize / 2 + sliderSizes.thumbHitSlop;
+
+      if (distance > draggableRadius) {
+        isDragging.value = false;
+        return;
+      }
+
+      isDragging.value = true;
+      startX.value = thumbX.value;
+      thumbScale.value = withSpring(sliderMotion.activeScale, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    })
+    .onUpdate((event) => {
+      if (!isDragging.value || trackWidth.value <= 0) {
+        return;
+      }
+
+      const rawX = clamp(startX.value + event.translationX, 0, trackWidth.value);
+      const nextValue = xToValue(rawX, min, max, normalizedStep, trackWidth.value);
+      const snappedX = valueToX(nextValue, min, max, trackWidth.value);
+
+      if (nextValue !== currentValue.value) {
+        currentValue.value = nextValue;
+        thumbX.value = snappedX;
+        runOnJS(emitChange)(nextValue);
+      }
+    })
+    .onEnd(() => {
+      if (!isDragging.value) {
+        return;
+      }
+
+      isDragging.value = false;
+      thumbScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+      runOnJS(emitChangeEnd)(currentValue.value);
+    })
+    .onFinalize(() => {
+      isDragging.value = false;
+      thumbScale.value = withSpring(1, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+    });
+
+  const tapGesture = Gesture.Tap()
+    .enabled(!disabled)
+    .onStart((event) => {
+      if (trackWidth.value <= 0) {
+        return;
+      }
+
+      const nextValue = xToValue(event.x, min, max, normalizedStep, trackWidth.value);
+      const snappedX = valueToX(nextValue, min, max, trackWidth.value);
+
+      currentValue.value = nextValue;
+      thumbX.value = withSpring(snappedX, {
+        damping: sliderMotion.springDamping,
+        stiffness: sliderMotion.springStiffness,
+        mass: sliderMotion.springMass,
+      });
+
+      runOnJS(emitChange)(nextValue);
+      runOnJS(emitChangeEnd)(nextValue);
+    });
+
+  const gesture = Gesture.Race(panGesture, tapGesture);
+
+  const fillStyle = useAnimatedStyle(() => ({
+    width: thumbX.value,
+  }));
+
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: thumbX.value }, { scale: thumbScale.value }],
+  }));
+
+  const visualTicks = useMemo(() => {
+    if (!ticks || ticks.length === 0 || max <= min) {
+      return [];
+    }
+
+    return ticks
+      .map((tickValue) => {
+        const ratio = (tickValue - min) / (max - min);
+        const clampedRatio = Math.min(1, Math.max(0, ratio));
+        return { key: String(tickValue), left: `${clampedRatio * 100}%` };
+      });
+  }, [max, min, ticks]);
+
+  const handleAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const direction = event.nativeEvent.actionName === 'increment' ? 1 : -1;
+      const next = quantize(
+        normalizedValue + direction * normalizedStep,
+        min,
+        max,
+        normalizedStep,
+      );
+
+      if (next === normalizedValue) {
+        return;
+      }
+
+      onChange(next);
+      onChangeEnd?.(next);
+      if (haptics) {
+        emitHaptic();
+      }
+    },
+    [emitHaptic, haptics, max, min, normalizedStep, normalizedValue, onChange, onChangeEnd],
+  );
+
+  const trackTop = (sliderSizes.minTouchSize - sliderSizes.trackHeight) / 2;
+  const thumbTop = (sliderSizes.minTouchSize - sliderSizes.thumbSize) / 2;
+
+  return (
+    <View style={[styles.root, disabled && styles.disabled]}>
+      {(label || format) ? (
+        <View style={styles.headerRow}>
+          <Text style={styles.headerLabel}>{label ?? ''}</Text>
+          <Text style={styles.headerValue}>{format(normalizedValue)}</Text>
+        </View>
+      ) : null}
+
+      <GestureDetector gesture={gesture}>
+        <View
+          onLayout={onTrackLayout}
+          style={styles.railContainer}
+          accessible
+          accessibilityRole="adjustable"
+          accessibilityLabel={label ?? 'Curseur'}
+          accessibilityActions={accessibilityActions as never}
+          onAccessibilityAction={handleAccessibilityAction}
+          accessibilityValue={{
+            min,
+            max,
+            now: normalizedValue,
+            text: format(normalizedValue),
+          }}
+        >
+          <SliderTrack style={[styles.track, { top: trackTop }]}>
+            <SliderFill style={fillStyle} />
+          </SliderTrack>
+
+          {visualTicks.length > 0 ? (
+            <View pointerEvents="none" style={styles.ticksRow}>
+              {visualTicks.map((tick) => (
+                <View key={tick.key} style={[styles.tickMark, { left: tick.left }]} />
+              ))}
+            </View>
+          ) : null}
+
+          <Animated.View style={[styles.thumbPosition, { top: thumbTop }, thumbStyle]}>
+            <SliderThumb />
+          </Animated.View>
+        </View>
+      </GestureDetector>
+
+      {showBounds ? (
+        <View style={styles.boundsRow}>
+          <Text style={styles.boundsText}>{format(min)}</Text>
+          <Text style={styles.boundsText}>{format(max)}</Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    gap: spacing[8],
+  },
+  disabled: {
+    opacity: 0.45,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing[8],
+  },
+  headerLabel: {
+    ...typography.overlineSm,
+    color: colors.textSecondary,
+    flexShrink: 1,
+  },
+  headerValue: {
+    ...typography.cardTitle,
+    color: colors.textPrimary,
+  },
+  railContainer: {
+    minHeight: sliderSizes.minTouchSize,
+    justifyContent: 'center',
+  },
+  track: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  thumbPosition: {
+    position: 'absolute',
+    left: -sliderSizes.thumbRadius,
+  },
+  ticksRow: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: sliderSizes.minTouchSize - sliderMetrics.trackHeight,
+    height: spacing[12],
+  },
+  tickMark: {
+    position: 'absolute',
+    width: spacing[2],
+    height: spacing[6],
+    borderRadius: spacing[2],
+    marginLeft: -spacing[2] / 2,
+    backgroundColor: colors.inputBorder,
+  },
+  boundsRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  boundsText: {
+    ...typography.metadataSm,
+    fontFamily: typography.overlineSm.fontFamily,
+    color: colors.textSecondary,
+  },
+});
+
+export default Slider;

src/components/ui/index.ts

@@ -0,0 +1,14 @@
+export { AttendeeSummary } from './AttendeeSummary';
+export { Avatar, AVATAR_SIZES } from './Avatar';
+export { AvatarStack } from './AvatarStack';
+export { Header } from './Header';
+export { RangeSlider } from './RangeSlider';
+export { Screen } from './Screen';
+export { Slider } from './Slider';
+
+export type { AttendeeSummaryProps } from './AttendeeSummary';
+export type { AvatarProps, AvatarSize } from './Avatar';
+export type { AvatarStackItem, AvatarStackProps } from './AvatarStack';
+export type { RangeSliderProps } from './RangeSlider';
+export type { SliderProps } from './Slider';
+

src/components/ui/sliderParts.tsx

@@ -0,0 +1,80 @@
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import { colors, gradientDirection, gradients } from '@/theme/colors';
+import { borderRadius, sliderMetrics, sliderShadow } from '@/theme/spacing';
+
+export const sliderSizes = {
+  trackHeight: sliderMetrics.trackHeight,
+  thumbSize: sliderMetrics.thumbSize,
+  thumbRadius: sliderMetrics.thumbSize / 2,
+  thumbBorderWidth: sliderMetrics.thumbBorderWidth,
+  minTouchSize: sliderMetrics.minTouchSize,
+  trackRadius: borderRadius.chip,
+  thumbHitSlop: (sliderMetrics.minTouchSize - sliderMetrics.thumbSize) / 2,
+} as const;
+
+type SliderTrackProps = {
+  style?: StyleProp<ViewStyle>;
+  children?: React.ReactNode;
+};
+
+export function SliderTrack({ style, children }: SliderTrackProps) {
+  return <View style={[styles.track, style]}>{children}</View>;
+}
+
+type SliderFillProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export function SliderFill({ style }: SliderFillProps) {
+  return (
+    <Animated.View pointerEvents="none" style={[styles.fillMask, style]}>
+      <LinearGradient
+        colors={gradients.signature}
+        start={gradientDirection.start}
+        end={gradientDirection.end}
+        style={styles.fillGradient}
+      />
+    </Animated.View>
+  );
+}
+
+type SliderThumbProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export function SliderThumb({ style }: SliderThumbProps) {
+  return <Animated.View pointerEvents="none" style={[styles.thumb, style]} />;
+}
+
+const styles = StyleSheet.create({
+  track: {
+    height: sliderSizes.trackHeight,
+    borderRadius: sliderSizes.trackRadius,
+    backgroundColor: colors.surfaceElevated,
+    overflow: 'hidden',
+  },
+  fillMask: {
+    height: sliderSizes.trackHeight,
+    borderRadius: sliderSizes.trackRadius,
+    overflow: 'hidden',
+  },
+  fillGradient: {
+    flex: 1,
+  },
+  thumb: {
+    width: sliderSizes.thumbSize,
+    height: sliderSizes.thumbSize,
+    borderRadius: sliderSizes.thumbRadius,
+    borderWidth: sliderSizes.thumbBorderWidth,
+    borderColor: colors.primary,
+    backgroundColor: colors.onPrimary,
+    shadowColor: colors.primary,
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: sliderShadow.opacity,
+    shadowRadius: sliderShadow.radius,
+    elevation: sliderShadow.elevation,
+  },
+});

src/hooks/api/animators.ts

@@ -0,0 +1,5 @@
+import type { Animator } from '@/models';
+import { animatorsApi } from '@/api/entities/animators';
+import { createCrudHooks } from './createCrudHooks';
+
+export const animatorsHooks = createCrudHooks<Animator>('animators', animatorsApi);

src/hooks/api/comment_likes.ts

@@ -0,0 +1,5 @@
+import type { CommentLike } from '@/models';
+import { comment_likesApi } from '@/api/entities/comment_likes';
+import { createCrudHooks } from './createCrudHooks';
+
+export const comment_likesHooks = createCrudHooks<CommentLike>('comment_likes', comment_likesApi);

src/hooks/api/comments.ts

@@ -0,0 +1,5 @@
+import type { Comment } from '@/models';
+import { commentsApi } from '@/api/entities/comments';
+import { createCrudHooks } from './createCrudHooks';
+
+export const commentsHooks = createCrudHooks<Comment>('comments', commentsApi);

src/hooks/api/createCrudHooks.ts

@@ -0,0 +1,102 @@
+import type { CrudApi } from '@/api/types';
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+  type UseMutationOptions,
+  type UseQueryOptions,
+} from '@tanstack/react-query';
+
+type ResourceId = string;
+type ListKey = [string, 'list'];
+type DetailKey = [string, 'detail', ResourceId];
+
+export const createCrudHooks = <T>(resourceKey: string, api: CrudApi<T>) => {
+  const listKey: ListKey = [resourceKey, 'list'];
+
+  const useListQuery = (options?: Omit<UseQueryOptions<T[], Error, T[], ListKey>, 'queryKey' | 'queryFn'>) =>
+    useQuery({
+      queryKey: listKey,
+      queryFn: () => api.list(),
+      ...options,
+    });
+
+  const useDetailQuery = (
+    id: ResourceId,
+    options?: Omit<UseQueryOptions<T, Error, T, DetailKey>, 'queryKey' | 'queryFn'>,
+  ) =>
+    useQuery({
+      queryKey: [resourceKey, 'detail', id],
+      queryFn: () => api.get(id),
+      enabled: id !== undefined && id !== null && (options?.enabled ?? true),
+      ...options,
+    });
+
+  const useCreateMutation = (
+    options?: UseMutationOptions<T, Error, Partial<T>>,
+  ) => {
+    const queryClient = useQueryClient();
+    return useMutation({
+      mutationFn: (data) => api.create(data),
+      ...options,
+      onSuccess: (data, variables, onMutateResult, context) => {
+        queryClient.invalidateQueries({ queryKey: listKey });
+        options?.onSuccess?.(data, variables, onMutateResult, context);
+      },
+    });
+  };
+
+  const useUpdateMutation = (
+    options?: UseMutationOptions<T, Error, { id: ResourceId; data: Partial<T> }>,
+  ) => {
+    const queryClient = useQueryClient();
+    return useMutation({
+      mutationFn: ({ id, data }) => api.update(id, data),
+      ...options,
+      onSuccess: (data, variables, onMutateResult, context) => {
+        queryClient.invalidateQueries({ queryKey: listKey });
+        queryClient.invalidateQueries({ queryKey: [resourceKey, 'detail', variables.id] });
+        options?.onSuccess?.(data, variables, onMutateResult, context);
+      },
+    });
+  };
+
+  const usePatchMutation = (
+    options?: UseMutationOptions<T, Error, { id: ResourceId; data: Partial<T> }>,
+  ) => {
+    const queryClient = useQueryClient();
+    return useMutation({
+      mutationFn: ({ id, data }) => api.patch(id, data),
+      ...options,
+      onSuccess: (data, variables, onMutateResult, context) => {
+        queryClient.invalidateQueries({ queryKey: listKey });
+        queryClient.invalidateQueries({ queryKey: [resourceKey, 'detail', variables.id] });
+        options?.onSuccess?.(data, variables, onMutateResult, context);
+      },
+    });
+  };
+
+  const useDeleteMutation = (
+    options?: UseMutationOptions<void, Error, ResourceId>,
+  ) => {
+    const queryClient = useQueryClient();
+    return useMutation({
+      mutationFn: (id) => api.remove(id),
+      ...options,
+      onSuccess: (data, variables, onMutateResult, context) => {
+        queryClient.invalidateQueries({ queryKey: listKey });
+        queryClient.invalidateQueries({ queryKey: [resourceKey, 'detail', variables] });
+        options?.onSuccess?.(data, variables, onMutateResult, context);
+      },
+    });
+  };
+
+  return {
+    useListQuery,
+    useDetailQuery,
+    useCreateMutation,
+    useUpdateMutation,
+    usePatchMutation,
+    useDeleteMutation,
+  };
+};

src/hooks/api/event_external_links.ts

@@ -0,0 +1,5 @@
+import type { EventExternalLink } from '@/models';
+import { event_external_linksApi } from '@/api/entities/event_external_links';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_external_linksHooks = createCrudHooks<EventExternalLink>('event_external_links', event_external_linksApi);

src/hooks/api/event_hashtags.ts

@@ -0,0 +1,5 @@
+import type { EventHashtag } from '@/models';
+import { event_hashtagsApi } from '@/api/entities/event_hashtags';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_hashtagsHooks = createCrudHooks<EventHashtag>('event_hashtags', event_hashtagsApi);

src/hooks/api/event_images.ts

@@ -0,0 +1,5 @@
+import type { EventImage } from '@/models';
+import { event_imagesApi } from '@/api/entities/event_images';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_imagesHooks = createCrudHooks<EventImage>('event_images', event_imagesApi);

src/hooks/api/event_lineup.ts

@@ -0,0 +1,5 @@
+import type { EventLineup } from '@/models';
+import { event_lineupApi } from '@/api/entities/event_lineup';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_lineupHooks = createCrudHooks<EventLineup>('event_lineup', event_lineupApi);

src/hooks/api/event_stats_snapshots.ts

@@ -0,0 +1,5 @@
+import type { EventStatsSnapshot } from '@/models';
+import { event_stats_snapshotsApi } from '@/api/entities/event_stats_snapshots';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_stats_snapshotsHooks = createCrudHooks<EventStatsSnapshot>('event_stats_snapshots', event_stats_snapshotsApi);

src/hooks/api/event_themes.ts

@@ -0,0 +1,5 @@
+import type { EventTheme } from '@/models';
+import { event_themesApi } from '@/api/entities/event_themes';
+import { createCrudHooks } from './createCrudHooks';
+
+export const event_themesHooks = createCrudHooks<EventTheme>('event_themes', event_themesApi);

src/hooks/api/events.ts

@@ -0,0 +1,5 @@
+import type { Event } from '@/models';
+import { eventsApi } from '@/api/entities/events';
+import { createCrudHooks } from './createCrudHooks';
+
+export const eventsHooks = createCrudHooks<Event>('events', eventsApi);

src/hooks/api/hashtags.ts

@@ -0,0 +1,5 @@
+import type { Hashtag } from '@/models';
+import { hashtagsApi } from '@/api/entities/hashtags';
+import { createCrudHooks } from './createCrudHooks';
+
+export const hashtagsHooks = createCrudHooks<Hashtag>('hashtags', hashtagsApi);

src/hooks/api/index.ts

@@ -0,0 +1,30 @@
+export * from './createCrudHooks';
+export * from './animators';
+export * from './comment_likes';
+export * from './comments';
+export * from './event_external_links';
+export * from './event_hashtags';
+export * from './event_images';
+export * from './event_lineup';
+export * from './event_stats_snapshots';
+export * from './event_themes';
+export * from './events';
+export * from './hashtags';
+export * from './organizer_members';
+export * from './organizer_subscriptions';
+export * from './organizers';
+export * from './plans';
+export * from './post_likes';
+export * from './post_media';
+export * from './posts';
+export * from './search_history';
+export * from './social_auth_providers';
+export * from './themes';
+export * from './tickets';
+export * from './user_animator_follows';
+export * from './user_event_interactions';
+export * from './user_event_shares';
+export * from './user_organizer_follows';
+export * from './user_theme_preferences';
+export * from './users';
+