fix(mobile): migrate to Expo SDK 54, replace NativeWind with StyleSheet

- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5
- Remove NativeWind/Tailwind dependencies
- Fix babel.config.js: presets babel-preset-expo only
- Rewrite all screens with StyleSheet.create (no className)
- Add lucide-react-native + react-native-svg
- Export design tokens C from _layout.tsx for shared usage
- Install node_modules (702 packages)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

memento-mobile/app/(tabs)/_layout.tsx

@@ -1,55 +1,22 @@
 import { Tabs } from 'expo-router'
 import { BookOpen, Search, Home, User } from 'lucide-react-native'
+import { C } from '../_layout'
 
 export default function TabsLayout() {
   return (
     <Tabs
       screenOptions={{
         headerShown: false,
-        tabBarActiveTintColor: '#A47148',
-        tabBarInactiveTintColor: '#8A8A82',
-        tabBarStyle: {
-          backgroundColor: '#FAFAF8',
-          borderTopColor: '#E8E6E0',
-          borderTopWidth: 1,
-          paddingBottom: 4,
-          height: 60,
-        },
-        tabBarLabelStyle: {
-          fontSize: 10,
-          fontWeight: '600',
-          marginTop: -2,
-        },
+        tabBarActiveTintColor: C.brand,
+        tabBarInactiveTintColor: C.concrete,
+        tabBarStyle: { backgroundColor: C.paper, borderTopColor: C.border, borderTopWidth: 1, paddingBottom: 4, height: 60 },
+        tabBarLabelStyle: { fontSize: 10, fontWeight: '600', marginTop: -2 },
       }}
     >
-      <Tabs.Screen
-        name="home"
-        options={{
-          title: 'Accueil',
-          tabBarIcon: ({ color, size }) => <Home size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="notebooks"
-        options={{
-          title: 'Carnets',
-          tabBarIcon: ({ color, size }) => <BookOpen size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="search"
-        options={{
-          title: 'Recherche',
-          tabBarIcon: ({ color, size }) => <Search size={size} color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="profile"
-        options={{
-          title: 'Profil',
-          tabBarIcon: ({ color, size }) => <User size={size} color={color} />,
-        }}
-      />
+      <Tabs.Screen name="home" options={{ title: 'Accueil', tabBarIcon: ({ color, size }) => <Home size={size} color={color} /> }} />
+      <Tabs.Screen name="notebooks" options={{ title: 'Carnets', tabBarIcon: ({ color, size }) => <BookOpen size={size} color={color} /> }} />
+      <Tabs.Screen name="search" options={{ title: 'Recherche', tabBarIcon: ({ color, size }) => <Search size={size} color={color} /> }} />
+      <Tabs.Screen name="profile" options={{ title: 'Profil', tabBarIcon: ({ color, size }) => <User size={size} color={color} /> }} />
     </Tabs>
   )
 }

memento-mobile/app/(tabs)/home.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import {
   View, Text, ScrollView, TouchableOpacity,
-  ActivityIndicator, RefreshControl,
+  ActivityIndicator, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
@@ -9,6 +9,7 @@ import { CalendarDays, Sparkles, BookOpen } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { useAuthStore } from '@/lib/store'
+import { C } from '../_layout'
 
 interface Note {
   id: string
@@ -48,85 +49,73 @@ export default function HomeScreen() {
     }
   }
 
-  const formatDate = (iso: string) => {
-    const d = new Date(iso)
-    return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
-  }
+  const formatDate = (iso: string) =>
+    new Date(iso).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
+    <SafeAreaView style={s.safe}>
       <ScrollView
-        className="flex-1"
-        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+        style={{ flex: 1 }}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
       >
-        {/* Header */}
-        <View className="px-5 pt-4 pb-2">
-          <Text className="text-2xl font-serif italic text-ink">
+        <View style={s.headerBlock}>
+          <Text style={s.greeting}>
             Bonjour{user?.name ? `, ${user.name.split(' ')[0]}` : ''} 👋
           </Text>
-          <Text className="text-[13px] text-concrete mt-0.5">
+          <Text style={s.date}>
             {new Date().toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' })}
           </Text>
         </View>
 
-        {/* Quick actions */}
-        <View className="flex-row gap-3 px-5 mt-4">
-          <TouchableOpacity
-            onPress={handleDailyNote}
-            className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
-          >
-            <CalendarDays size={22} color="#A47148" />
-            <Text className="text-[12px] font-semibold text-ink">Note du jour</Text>
+        <View style={s.quickRow}>
+          <TouchableOpacity onPress={handleDailyNote} style={s.quickBtn}>
+            <CalendarDays size={22} color={C.brand} />
+            <Text style={s.quickLabel}>Note du jour</Text>
           </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => router.push('/(tabs)/notebooks')}
-            className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
-          >
-            <BookOpen size={22} color="#A47148" />
-            <Text className="text-[12px] font-semibold text-ink">Carnets</Text>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/notebooks')} style={s.quickBtn}>
+            <BookOpen size={22} color={C.brand} />
+            <Text style={s.quickLabel}>Carnets</Text>
           </TouchableOpacity>
-          <TouchableOpacity
-            onPress={() => router.push('/(tabs)/search')}
-            className="flex-1 bg-white border border-border rounded-2xl p-4 items-center gap-2"
-          >
-            <Sparkles size={22} color="#A47148" />
-            <Text className="text-[12px] font-semibold text-ink">Recherche IA</Text>
+          <TouchableOpacity onPress={() => router.push('/(tabs)/search')} style={s.quickBtn}>
+            <Sparkles size={22} color={C.brand} />
+            <Text style={s.quickLabel}>Recherche IA</Text>
           </TouchableOpacity>
         </View>
 
-        {/* Recent notes */}
-        <View className="px-5 mt-6">
-          <Text className="text-[11px] font-bold uppercase tracking-widest text-concrete mb-3">
-            Récentes
-          </Text>
-
-          {loading ? (
-            <ActivityIndicator color="#A47148" />
-          ) : recentNotes.length === 0 ? (
-            <Text className="text-concrete text-[14px]">Aucune note pour l'instant.</Text>
-          ) : (
-            recentNotes.map((note) => (
-              <TouchableOpacity
-                key={note.id}
-                onPress={() => router.push(`/note/${note.id}`)}
-                className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
-              >
-                <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
-                  {note.title || 'Sans titre'}
-                </Text>
-                <View className="flex-row items-center gap-2 mt-1">
-                  {note.notebookName && (
-                    <Text className="text-[11px] text-concrete">{note.notebookName}</Text>
-                  )}
-                  <Text className="text-[11px] text-concrete/60">{formatDate(note.updatedAt)}</Text>
-                </View>
-              </TouchableOpacity>
-            ))
-          )}
+        <View style={s.recentBlock}>
+          <Text style={s.sectionLabel}>Récentes</Text>
+          {loading
+            ? <ActivityIndicator color={C.brand} />
+            : recentNotes.length === 0
+              ? <Text style={s.empty}>Aucune note pour l'instant.</Text>
+              : recentNotes.map((note) => (
+                  <TouchableOpacity key={note.id} onPress={() => router.push(`/note/${note.id}`)} style={s.noteCard}>
+                    <Text style={s.noteTitle} numberOfLines={1}>{note.title || 'Sans titre'}</Text>
+                    <View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
+                      {note.notebookName && <Text style={s.noteMeta}>{note.notebookName}</Text>}
+                      <Text style={s.noteMeta}>{formatDate(note.updatedAt)}</Text>
+                    </View>
+                  </TouchableOpacity>
+                ))}
         </View>
-
-        <View className="h-8" />
+        <View style={{ height: 32 }} />
       </ScrollView>
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  headerBlock: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
+  greeting: { fontSize: 22, fontWeight: '700', fontStyle: 'italic', color: C.ink },
+  date: { fontSize: 13, color: C.concrete, marginTop: 2 },
+  quickRow: { flexDirection: 'row', gap: 10, paddingHorizontal: 20, marginTop: 16 },
+  quickBtn: { flex: 1, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 14, alignItems: 'center', gap: 8 },
+  quickLabel: { fontSize: 11, fontWeight: '600', color: C.ink, textAlign: 'center' },
+  recentBlock: { paddingHorizontal: 20, marginTop: 24 },
+  sectionLabel: { fontSize: 10, fontWeight: '800', letterSpacing: 2, textTransform: 'uppercase', color: C.concrete, marginBottom: 12 },
+  empty: { color: C.concrete, fontSize: 14 },
+  noteCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
+  noteTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
+  noteMeta: { fontSize: 11, color: C.concrete },
+})

memento-mobile/app/(tabs)/notebooks.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react'
 import {
   View, Text, FlatList, TouchableOpacity,
-  ActivityIndicator, RefreshControl,
+  ActivityIndicator, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
 import { ChevronRight } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
+import { C } from '../_layout'
 
 interface Notebook {
   id: string
@@ -39,40 +40,46 @@ export default function NotebooksScreen() {
 
   if (loading) {
     return (
-      <SafeAreaView className="flex-1 bg-paper items-center justify-center">
-        <ActivityIndicator color="#A47148" />
+      <SafeAreaView style={[s.safe, { alignItems: 'center', justifyContent: 'center' }]}>
+        <ActivityIndicator color={C.brand} />
       </SafeAreaView>
     )
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <View className="px-5 pt-4 pb-2">
-        <Text className="text-2xl font-serif italic text-ink">Carnets</Text>
+    <SafeAreaView style={s.safe}>
+      <View style={s.header}>
+        <Text style={s.title}>Carnets</Text>
       </View>
-
       <FlatList
         data={notebooks}
         keyExtractor={(item) => item.id}
-        contentContainerClassName="px-5 pb-8"
-        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor="#A47148" />}
+        contentContainerStyle={s.list}
+        refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
         renderItem={({ item }) => (
-          <TouchableOpacity
-            onPress={() => router.push(`/notebook/${item.id}`)}
-            className="flex-row items-center bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
-          >
-            <Text className="text-2xl mr-3">{item.icon ?? '📓'}</Text>
-            <View className="flex-1">
-              <Text className="text-[15px] font-semibold text-ink">{item.name}</Text>
-              <Text className="text-[12px] text-concrete">{item._count?.notes ?? 0} notes</Text>
+          <TouchableOpacity onPress={() => router.push(`/notebook/${item.id}`)} style={s.card}>
+            <Text style={s.icon}>{item.icon ?? '📓'}</Text>
+            <View style={{ flex: 1 }}>
+              <Text style={s.cardTitle}>{item.name}</Text>
+              <Text style={s.cardMeta}>{item._count?.notes ?? 0} notes</Text>
             </View>
-            <ChevronRight size={16} color="#8A8A82" />
+            <ChevronRight size={16} color={C.concrete} />
           </TouchableOpacity>
         )}
-        ListEmptyComponent={
-          <Text className="text-concrete text-center mt-12">Aucun carnet.</Text>
-        }
+        ListEmptyComponent={<Text style={s.empty}>Aucun carnet.</Text>}
       />
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  header: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
+  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink },
+  list: { paddingHorizontal: 20, paddingTop: 8, paddingBottom: 32 },
+  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
+  icon: { fontSize: 24, marginRight: 12 },
+  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
+  cardMeta: { fontSize: 12, color: C.concrete, marginTop: 2 },
+  empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
+})

memento-mobile/app/(tabs)/profile.tsx

@@ -1,7 +1,8 @@
-import { View, Text, TouchableOpacity, ScrollView, Alert } from 'react-native'
+import { View, Text, TouchableOpacity, ScrollView, Alert, StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { LogOut, CreditCard, Globe } from 'lucide-react-native'
 import { useAuthStore } from '@/lib/store'
+import { C } from '../_layout'
 
 const TIER_LABELS: Record<string, string> = {
   FREE: 'Gratuit',
@@ -13,6 +14,7 @@ const TIER_LABELS: Record<string, string> = {
 
 export default function ProfileScreen() {
   const { user, logout } = useAuthStore()
+  const initial = (user?.name?.[0] ?? user?.email?.[0] ?? '?').toUpperCase()
 
   const handleLogout = () => {
     Alert.alert(
@@ -26,48 +28,57 @@ export default function ProfileScreen() {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <ScrollView className="flex-1 px-5">
-        <Text className="text-2xl font-serif italic text-ink pt-4 pb-6">Profil</Text>
+    <SafeAreaView style={s.safe}>
+      <ScrollView style={{ flex: 1, paddingHorizontal: 20 }}>
+        <Text style={s.title}>Profil</Text>
 
-        {/* User info */}
-        <View className="bg-white border border-border rounded-2xl p-5 mb-4">
-          <View className="w-14 h-14 rounded-full bg-brand/10 items-center justify-center mb-3">
-            <Text className="text-2xl font-bold text-brand">
-              {user?.name?.[0]?.toUpperCase() ?? user?.email?.[0]?.toUpperCase() ?? '?'}
-            </Text>
+        <View style={s.card}>
+          <View style={s.avatar}>
+            <Text style={s.avatarText}>{initial}</Text>
           </View>
-          <Text className="text-[17px] font-semibold text-ink">{user?.name ?? 'Utilisateur'}</Text>
-          <Text className="text-[13px] text-concrete mt-0.5">{user?.email}</Text>
+          <Text style={s.name}>{user?.name ?? 'Utilisateur'}</Text>
+          <Text style={s.email}>{user?.email}</Text>
           {user?.tier && (
-            <View className="mt-3 self-start bg-brand/10 px-3 py-1 rounded-full">
-              <Text className="text-[11px] font-bold text-brand uppercase tracking-wider">
-                {TIER_LABELS[user.tier] ?? user.tier}
-              </Text>
+            <View style={s.badge}>
+              <Text style={s.badgeText}>{TIER_LABELS[user.tier] ?? user.tier}</Text>
             </View>
           )}
         </View>
 
-        {/* Actions */}
-        <View className="bg-white border border-border rounded-2xl overflow-hidden mb-4">
-          <TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 border-b border-border active:bg-border/20">
-            <CreditCard size={18} color="#8A8A82" />
-            <Text className="text-[15px] text-ink flex-1">Abonnement</Text>
+        <View style={s.actionsCard}>
+          <TouchableOpacity style={[s.actionRow, s.actionRowBorder]}>
+            <CreditCard size={18} color={C.concrete} />
+            <Text style={s.actionText}>Abonnement</Text>
           </TouchableOpacity>
-          <TouchableOpacity className="flex-row items-center gap-3 px-4 py-3.5 active:bg-border/20">
-            <Globe size={18} color="#8A8A82" />
-            <Text className="text-[15px] text-ink flex-1">Ouvrir memento-note.com</Text>
+          <TouchableOpacity style={s.actionRow}>
+            <Globe size={18} color={C.concrete} />
+            <Text style={s.actionText}>Ouvrir memento-note.com</Text>
           </TouchableOpacity>
         </View>
 
-        <TouchableOpacity
-          onPress={handleLogout}
-          className="bg-white border border-rose-200 rounded-2xl flex-row items-center gap-3 px-4 py-3.5 active:opacity-70"
-        >
-          <LogOut size={18} color="#e11d48" />
-          <Text className="text-[15px] text-rose-600 font-medium">Se déconnecter</Text>
+        <TouchableOpacity onPress={handleLogout} style={s.logoutBtn}>
+          <LogOut size={18} color={C.rose} />
+          <Text style={s.logoutText}>Se déconnecter</Text>
         </TouchableOpacity>
       </ScrollView>
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, paddingTop: 16, paddingBottom: 24 },
+  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, padding: 20, marginBottom: 16 },
+  avatar: { width: 56, height: 56, borderRadius: 28, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center', marginBottom: 12 },
+  avatarText: { fontSize: 22, fontWeight: '700', color: C.brand },
+  name: { fontSize: 17, fontWeight: '600', color: C.ink },
+  email: { fontSize: 13, color: C.concrete, marginTop: 2 },
+  badge: { marginTop: 12, alignSelf: 'flex-start', backgroundColor: '#f3ece4', paddingHorizontal: 12, paddingVertical: 4, borderRadius: 20 },
+  badgeText: { fontSize: 11, fontWeight: '800', color: C.brand, letterSpacing: 1, textTransform: 'uppercase' },
+  actionsCard: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 20, overflow: 'hidden', marginBottom: 16 },
+  actionRow: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  actionRowBorder: { borderBottomWidth: 1, borderBottomColor: C.border },
+  actionText: { fontSize: 15, color: C.ink, flex: 1 },
+  logoutBtn: { backgroundColor: C.white, borderWidth: 1, borderColor: C.roseBorder, borderRadius: 20, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 14 },
+  logoutText: { fontSize: 15, color: C.rose, fontWeight: '500' },
+})

memento-mobile/app/(tabs)/search.tsx

@@ -1,13 +1,14 @@
 import { useState } from 'react'
 import {
   View, Text, TextInput, FlatList,
-  TouchableOpacity, ActivityIndicator,
+  TouchableOpacity, ActivityIndicator, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { Search as SearchIcon, X } from 'lucide-react-native'
 import { useRouter } from 'expo-router'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
+import { C } from '../_layout'
 
 interface SearchResult {
   id: string
@@ -40,67 +41,59 @@ export default function SearchScreen() {
   }
 
   return (
-    <SafeAreaView className="flex-1 bg-paper">
-      <View className="px-5 pt-4 pb-2">
-        <Text className="text-2xl font-serif italic text-ink mb-4">Recherche</Text>
-
-        <View className="flex-row items-center bg-white border border-border rounded-xl px-3 py-2.5 gap-2">
-          <SearchIcon size={16} color="#8A8A82" />
+    <SafeAreaView style={s.safe}>
+      <View style={s.top}>
+        <Text style={s.title}>Recherche</Text>
+        <View style={s.inputRow}>
+          <SearchIcon size={16} color={C.concrete} />
           <TextInput
-            value={query}
-            onChangeText={setQuery}
+            value={query} onChangeText={setQuery}
             placeholder="Chercher dans vos notes…"
-            className="flex-1 text-[15px] text-ink"
-            placeholderTextColor="#8A8A82"
-            returnKeyType="search"
-            onSubmitEditing={handleSearch}
+            style={s.input} placeholderTextColor={C.concrete}
+            returnKeyType="search" onSubmitEditing={handleSearch}
           />
           {query.length > 0 && (
             <TouchableOpacity onPress={() => { setQuery(''); setResults([]); setSearched(false) }}>
-              <X size={14} color="#8A8A82" />
+              <X size={14} color={C.concrete} />
             </TouchableOpacity>
           )}
         </View>
       </View>
 
-      {loading ? (
-        <View className="flex-1 items-center justify-center">
-          <ActivityIndicator color="#A47148" />
-        </View>
-      ) : (
-        <FlatList
-          data={results}
-          keyExtractor={(item) => item.id}
-          contentContainerClassName="px-5 pt-3 pb-8"
-          renderItem={({ item }) => (
-            <TouchableOpacity
-              onPress={() => router.push(`/note/${item.id}`)}
-              className="bg-white border border-border rounded-2xl p-4 mb-2.5 active:opacity-70"
-            >
-              <Text className="text-[15px] font-semibold text-ink" numberOfLines={1}>
-                {item.title || 'Sans titre'}
+      {loading
+        ? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
+        : <FlatList
+            data={results}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={s.list}
+            renderItem={({ item }) => (
+              <TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
+                <Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
+                {item.snippet && <Text style={s.snippet} numberOfLines={2}>{item.snippet}</Text>}
+                {item.notebookName && <Text style={s.nb}>{item.notebookName}</Text>}
+              </TouchableOpacity>
+            )}
+            ListEmptyComponent={
+              <Text style={s.empty}>
+                {searched ? `Aucun résultat pour "${query}"` : 'Tapez votre recherche puis appuyez sur Entrée'}
               </Text>
-              {item.snippet && (
-                <Text className="text-[12px] text-concrete mt-1" numberOfLines={2}>
-                  {item.snippet}
-                </Text>
-              )}
-              {item.notebookName && (
-                <Text className="text-[11px] text-concrete/60 mt-1">{item.notebookName}</Text>
-              )}
-            </TouchableOpacity>
-          )}
-          ListEmptyComponent={
-            searched ? (
-              <Text className="text-concrete text-center mt-12">Aucun résultat pour "{query}"</Text>
-            ) : (
-              <Text className="text-concrete text-center mt-12 text-[13px]">
-                Tapez votre recherche puis appuyez sur Entrée
-              </Text>
-            )
-          }
-        />
-      )}
+            }
+          />}
     </SafeAreaView>
   )
 }
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  top: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8 },
+  title: { fontSize: 22, fontStyle: 'italic', fontWeight: '700', color: C.ink, marginBottom: 16 },
+  inputRow: { flexDirection: 'row', alignItems: 'center', backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 12, paddingHorizontal: 12, paddingVertical: 10, gap: 8 },
+  input: { flex: 1, fontSize: 15, color: C.ink },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  list: { paddingHorizontal: 20, paddingTop: 12, paddingBottom: 32 },
+  card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
+  cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
+  snippet: { fontSize: 12, color: C.concrete, marginTop: 4 },
+  nb: { fontSize: 11, color: C.concrete, marginTop: 4, opacity: 0.7 },
+  empty: { textAlign: 'center', color: C.concrete, marginTop: 48, fontSize: 13 },
+})