feat: mobile app complet + flashcards fixes + drag handle améliorations

Mobile app:
- Révision flashcards : liste decks, session flip-card SM-2, couleurs harmonisées web
- Génération flashcards depuis note (FlashcardSheet + route /api/mobile/flashcards/generate)
- Audio Whisper : hook useAudioRecorder reécrit, MicButton avec erreurs
- IA : AISheet (améliorer/clarifier/résumer), TitleSheet (titre automatique)
- Suppression note (soft delete + confirmation Alert)
- Note du jour : titre lisible + HTML (plus JSON TipTap brut)
- Parser TipTap→HTML côté mobile (tipTapToHtml)
- Icône 🎓 dans header note → génération flashcards
- Endpoint flashcardGenerate dans config.ts

Web fixes:
- Bug flashcards groupées par carnet → deck par note (migration + schema)
- Bug filtre 'cartes dues' ignoré (suppression fallback buildSessionQueue)
- Suppression UI création deck manuelle (inutile)
- Fix setViewType is not defined dans home-client.tsx

Drag handle menu:
- Fix : clearNodes() avant transformation (heading→liste/code/citation)
- Ajout : option 'Texte' (paragraphe) dans Transformer en
- Ajout : Monter / Descendre le bloc
- Ajout : Copier le contenu du bloc
- Fix : sous-menu hover stable (délai 200ms)
- Fix : Supprimer en rouge via classe --danger (plus :first-child)
- i18n : nouvelles clés dans 15 locales

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

memento-mobile/app/(auth)/login.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import {
   View, Text, TextInput, TouchableOpacity,
   KeyboardAvoidingView, Platform, ActivityIndicator,
@@ -20,34 +20,35 @@ export default function LoginScreen() {
   const [googleLoading, setGoogleLoading] = useState(false)
   const { login, loginWithToken } = useAuthStore()
 
-  // Écoute le deep link memento://auth?token=...
-  useEffect(() => {
-    const handleUrl = async (event: { url: string }) => {
-      const parsed = Linking.parse(event.url)
-      if (parsed.scheme === 'memento' && parsed.path === 'auth') {
-        const p = parsed.queryParams as Record<string, string> | undefined
-        if (p?.error) {
-          Alert.alert('Connexion Google échouée', p.error === 'unauthorized' ? 'Non autorisé' : 'Erreur serveur')
-          setGoogleLoading(false)
-          return
-        }
-        if (p?.token && p?.id) {
-          await loginWithToken(p.token, {
-            id: p.id,
-            name: p.name || null,
-            email: p.email || '',
-            tier: p.tier || 'FREE',
-          })
-        }
-        setGoogleLoading(false)
-      }
-    }
+  // Traitement du deep link OAuth — mémorisé pour éviter les re-créations
+  const handleOAuthCallback = useCallback(async (url: string) => {
+    const parsed = Linking.parse(url)
+    // memento://auth?token=... → scheme='memento', hostname='auth', path=''
+    if (parsed.scheme !== 'memento' || parsed.hostname !== 'auth') return
 
-    const sub = Linking.addEventListener('url', handleUrl)
-    // Vérifier si l'app a été lancée via un deep link
-    Linking.getInitialURL().then((url) => { if (url) handleUrl({ url }) })
+    const p = parsed.queryParams as Record<string, string> | undefined
+    if (p?.error) {
+      Alert.alert('Connexion Google échouée', p.error === 'unauthorized' ? 'Non autorisé' : 'Erreur serveur')
+      setGoogleLoading(false)
+      return
+    }
+    if (p?.token && p?.id) {
+      await loginWithToken(p.token, {
+        id: p.id,
+        name: p.name || null,
+        email: p.email || '',
+        tier: p.tier || 'FREE',
+      })
+    }
+    setGoogleLoading(false)
+  }, [loginWithToken])
+
+  // Écoute le deep link (Android + app lancée via deep link)
+  useEffect(() => {
+    const sub = Linking.addEventListener('url', (event) => handleOAuthCallback(event.url))
+    Linking.getInitialURL().then((url) => { if (url) handleOAuthCallback(url) })
     return () => sub.remove()
-  }, [])
+  }, [handleOAuthCallback])
 
   const handleLogin = async () => {
     if (!email.trim() || !password.trim()) return
@@ -71,11 +72,13 @@ export default function LoginScreen() {
     try {
       const url = `${API_URL}/api/mobile/auth/google-start`
       const result = await WebBrowser.openAuthSessionAsync(url, 'memento://auth')
-      // Si l'utilisateur ferme sans terminer
-      if (result.type !== 'success') {
+      if (result.type === 'success') {
+        // iOS : le deep link est capturé dans result.url, pas via Linking.addEventListener
+        await handleOAuthCallback(result.url)
+      } else {
+        // Annulé par l'utilisateur
         setGoogleLoading(false)
       }
-      // Si succès, le deep link listener prend le relais
     } catch (e: any) {
       Alert.alert('Erreur', e.message)
       setGoogleLoading(false)

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

@@ -1,5 +1,5 @@
 import { Tabs } from 'expo-router'
-import { BookOpen, Search, Home, User } from 'lucide-react-native'
+import { BookOpen, Search, Home, User, GraduationCap } from 'lucide-react-native'
 import { C } from '@/lib/theme'
 
 export default function TabsLayout() {
@@ -15,6 +15,7 @@ export default function TabsLayout() {
     >
       <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="revision" options={{ title: 'Révision', tabBarIcon: ({ color, size }) => <GraduationCap 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,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import {
-  View, Text, ScrollView, TouchableOpacity,
+  View, Text, ScrollView, TouchableOpacity, Alert,
   ActivityIndicator, RefreshControl, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
@@ -42,10 +42,18 @@ export default function HomeScreen() {
   useEffect(() => { load() }, [])
 
   const handleDailyNote = async () => {
-    const res = await apiFetch(ENDPOINTS.dailyNote)
-    if (res.ok) {
+    try {
+      const res = await apiFetch(ENDPOINTS.dailyNote)
+      if (!res.ok) {
+        Alert.alert('Erreur', 'Impossible de charger la note du jour.')
+        return
+      }
       const data = await res.json()
-      router.push({ pathname: '/note/[id]', params: { id: data.id } })
+      const id = data.id ?? data.note?.id
+      if (!id) { Alert.alert('Erreur', 'Note introuvable.'); return }
+      router.push({ pathname: '/note/[id]', params: { id } })
+    } catch {
+      Alert.alert('Erreur réseau', 'Vérifiez votre connexion.')
     }
   }
 
@@ -79,13 +87,13 @@ export default function HomeScreen() {
             </View>
             <Text style={s.quickLabel}>Note du jour</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/search' })} style={s.quickCard} activeOpacity={0.7}>
+          <TouchableOpacity onPress={() => router.push({ pathname: '/note/create' })} style={s.quickCard} activeOpacity={0.7}>
             <View style={[s.quickIcon, { backgroundColor: '#edf0f7' }]}>
               <PenLine size={20} color="#5b7ec7" />
             </View>
             <Text style={s.quickLabel}>Nouvelle note</Text>
           </TouchableOpacity>
-          <TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/search' })} style={s.quickCard} activeOpacity={0.7}>
+          <TouchableOpacity onPress={() => router.push({ pathname: '/(tabs)/revision' })} style={s.quickCard} activeOpacity={0.7}>
             <View style={[s.quickIcon, { backgroundColor: '#eef7ed' }]}>
               <GraduationCap size={20} color="#4a9b61" />
             </View>

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

@@ -5,7 +5,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useRouter } from 'expo-router'
-import { ChevronRight, BookOpen, Folder } from 'lucide-react-native'
+import { ChevronRight, BookOpen, Folder, Plus } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '@/lib/theme'
@@ -65,6 +65,12 @@ export default function NotebooksScreen() {
         <BookOpen size={18} color={C.brand} style={{ marginRight: 8 }} />
         <Text style={s.title}>Carnets</Text>
         <Text style={s.count}>{notebooks.length}</Text>
+        <TouchableOpacity
+          onPress={() => router.push({ pathname: '/note/create' })}
+          style={s.newNoteBtn}
+        >
+          <Plus size={18} color={C.brand} />
+        </TouchableOpacity>
       </View>
       <FlatList
         data={notebooks}
@@ -98,7 +104,8 @@ const s = StyleSheet.create({
   safe: { flex: 1, backgroundColor: C.paper },
   header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 16, paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: C.border },
   title: { fontSize: 20, fontWeight: '700', color: C.ink, flex: 1 },
-  count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden' },
+  count: { fontSize: 12, color: C.concrete, backgroundColor: C.border, paddingHorizontal: 8, paddingVertical: 2, borderRadius: 10, overflow: 'hidden', marginRight: 8 },
+  newNoteBtn: { width: 34, height: 34, borderRadius: 17, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
   list: { padding: 12 },
   card: { flexDirection: 'row', alignItems: 'center', gap: 12, backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 14, padding: 14, marginBottom: 8 },
   iconWrap: { width: 38, height: 38, borderRadius: 10, alignItems: 'center', justifyContent: 'center' },

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

@@ -0,0 +1,174 @@
+import { useEffect, useState, useCallback } from 'react'
+import {
+  View, Text, StyleSheet, FlatList, TouchableOpacity,
+  ActivityIndicator, RefreshControl,
+} from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { useRouter } from 'expo-router'
+import { GraduationCap, BookOpen, ChevronRight, Clock } from 'lucide-react-native'
+import { C } from '@/lib/theme'
+import { apiFetch } from '@/lib/api'
+import { ENDPOINTS } from '@/lib/config'
+
+interface Deck {
+  id: string
+  name: string
+  notebookName: string | null
+  totalCards: number
+  dueCount: number
+  masteredCount: number
+}
+
+export default function RevisionScreen() {
+  const router = useRouter()
+  const [decks, setDecks] = useState<Deck[]>([])
+  const [loading, setLoading] = useState(true)
+  const [refreshing, setRefreshing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const load = useCallback(async (silent = false) => {
+    if (!silent) setLoading(true)
+    setError(null)
+    try {
+      const res = await apiFetch(ENDPOINTS.flashcardDecks)
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error ?? `Erreur ${res.status}`)
+      setDecks(data.decks ?? [])
+    } catch (e: any) {
+      setError(e.message ?? 'Erreur de chargement')
+    } finally {
+      setLoading(false)
+      setRefreshing(false)
+    }
+  }, [])
+
+  useEffect(() => { load() }, [load])
+
+  const totalDue = decks.reduce((s, d) => s + d.dueCount, 0)
+
+  if (loading) return (
+    <SafeAreaView style={s.center}>
+      <ActivityIndicator color={C.brand} size="large" />
+    </SafeAreaView>
+  )
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* Header */}
+      <View style={s.header}>
+        <View style={s.headerLeft}>
+          <GraduationCap size={22} color={C.brand} />
+          <Text style={s.title}>Révision</Text>
+        </View>
+        {totalDue > 0 && (
+          <View style={s.badge}>
+            <Text style={s.badgeTxt}>{totalDue} à revoir</Text>
+          </View>
+        )}
+      </View>
+
+      {error ? (
+        <View style={s.center}>
+          <Text style={s.errorTxt}>{error}</Text>
+          <TouchableOpacity onPress={() => load()} style={s.retryBtn}>
+            <Text style={s.retryTxt}>Réessayer</Text>
+          </TouchableOpacity>
+        </View>
+      ) : decks.length === 0 ? (
+        <View style={s.center}>
+          <GraduationCap size={48} color={C.concrete} />
+          <Text style={s.emptyTitle}>Aucun paquet</Text>
+          <Text style={s.emptyHint}>
+            Générez des flashcards depuis une note (bouton ✦ dans l'éditeur) pour commencer à réviser.
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={decks}
+          keyExtractor={(d) => d.id}
+          refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load(true) }} tintColor={C.brand} />}
+          contentContainerStyle={s.list}
+          renderItem={({ item }) => <DeckCard deck={item} onPress={() => router.push({ pathname: '/revision/session', params: { deckId: item.id, deckName: item.name } })} />}
+        />
+      )}
+    </SafeAreaView>
+  )
+}
+
+function DeckCard({ deck, onPress }: { deck: Deck; onPress: () => void }) {
+  const progress = deck.totalCards > 0 ? deck.masteredCount / deck.totalCards : 0
+
+  return (
+    <TouchableOpacity style={s.card} onPress={onPress} activeOpacity={0.8}>
+      <View style={s.cardLeft}>
+        <View style={s.deckIcon}>
+          <BookOpen size={18} color={C.brand} />
+        </View>
+        <View style={s.cardInfo}>
+          <Text style={s.deckName} numberOfLines={1}>{deck.name}</Text>
+          {deck.notebookName && <Text style={s.deckSub} numberOfLines={1}>{deck.notebookName}</Text>}
+          <View style={s.progressBar}>
+            <View style={[s.progressFill, { width: `${Math.round(progress * 100)}%` }]} />
+          </View>
+          <Text style={s.progressTxt}>
+            {deck.masteredCount}/{deck.totalCards} maîtrisées
+          </Text>
+        </View>
+      </View>
+      <View style={s.cardRight}>
+        {deck.dueCount > 0 ? (
+          <View style={s.duePill}>
+            <Clock size={11} color="#e11d48" />
+            <Text style={s.dueTxt}>{deck.dueCount}</Text>
+          </View>
+        ) : (
+          <Text style={s.upToDate}>✓</Text>
+        )}
+        <ChevronRight size={16} color={C.concrete} style={{ marginTop: 4 }} />
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  header: {
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    paddingHorizontal: 20, paddingTop: 12, paddingBottom: 16,
+    borderBottomWidth: 1, borderBottomColor: C.border,
+  },
+  headerLeft: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  title: { fontSize: 20, fontWeight: '700', color: C.ink },
+  badge: { backgroundColor: '#fee2e2', paddingHorizontal: 10, paddingVertical: 4, borderRadius: 20 },
+  badgeTxt: { fontSize: 12, fontWeight: '600', color: '#e11d48' },
+  list: { padding: 16, gap: 10 },
+  card: {
+    backgroundColor: C.surface, borderRadius: 14, padding: 14,
+    flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',
+    borderWidth: 1, borderColor: C.border,
+  },
+  cardLeft: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 12, marginRight: 8 },
+  deckIcon: {
+    width: 40, height: 40, borderRadius: 12,
+    backgroundColor: '#f0f7ff', alignItems: 'center', justifyContent: 'center',
+  },
+  cardInfo: { flex: 1 },
+  deckName: { fontSize: 15, fontWeight: '600', color: C.ink, marginBottom: 2 },
+  deckSub: { fontSize: 12, color: C.concrete, marginBottom: 6 },
+  progressBar: { height: 4, backgroundColor: C.border, borderRadius: 2, marginBottom: 4 },
+  progressFill: { height: 4, backgroundColor: C.brand, borderRadius: 2 },
+  progressTxt: { fontSize: 11, color: C.concrete },
+  cardRight: { alignItems: 'flex-end', gap: 2 },
+  duePill: {
+    flexDirection: 'row', alignItems: 'center', gap: 3,
+    backgroundColor: '#fee2e2', paddingHorizontal: 8, paddingVertical: 3, borderRadius: 10,
+  },
+  dueTxt: { fontSize: 12, fontWeight: '700', color: '#e11d48' },
+  upToDate: { fontSize: 16, color: C.brand, fontWeight: '700' },
+  emptyTitle: { fontSize: 18, fontWeight: '700', color: C.ink, marginTop: 16, marginBottom: 8 },
+  emptyHint: { fontSize: 14, color: C.concrete, textAlign: 'center', lineHeight: 20 },
+  errorTxt: { fontSize: 15, color: '#e11d48', textAlign: 'center', marginBottom: 12 },
+  retryBtn: { backgroundColor: C.brand, paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10 },
+  retryTxt: { color: '#fff', fontWeight: '600' },
+})

memento-mobile/app/_layout.tsx

@@ -25,9 +25,11 @@ export default function RootLayout() {
 
   if (loading) {
     return (
-      <View style={s.loader}>
-        <ActivityIndicator size="large" color={C.brand} />
-      </View>
+      <SafeAreaProvider>
+        <View style={s.loader}>
+          <ActivityIndicator size="large" color={C.brand} />
+        </View>
+      </SafeAreaProvider>
     )
   }
 

memento-mobile/app/note/[id].tsx

@@ -1,15 +1,20 @@
 import { useEffect, useState } from 'react'
 import {
   View, Text, ActivityIndicator,
-  TouchableOpacity, Share, StyleSheet,
+  TouchableOpacity, Share, Alert,
+  TextInput, StyleSheet,
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useLocalSearchParams, useRouter } from 'expo-router'
-import { ArrowLeft, Share2 } from 'lucide-react-native'
+import { ArrowLeft, Share2, Pencil, Check, Trash2, GraduationCap } from 'lucide-react-native'
 import { WebView } from 'react-native-webview'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '@/lib/theme'
+import { AISheet } from '@/components/AISheet'
+import { MicButton } from '@/components/MicButton'
+import { FlashcardSheet } from '@/components/FlashcardSheet'
+import { useAudioRecorder } from '@/lib/useAudioRecorder'
 
 interface Note {
   id: string
@@ -19,37 +24,71 @@ interface Note {
   notebookName?: string
 }
 
-// Le contenu TipTap est stocké en HTML — on l'enveloppe dans un style CSS propre
+const AI_MODES = [
+  { key: 'improve', label: '✨ Améliorer le style' },
+  { key: 'fix_grammar', label: '🔤 Corriger la grammaire' },
+  { key: 'shorten', label: '✂️ Raccourcir' },
+  { key: 'clarify', label: '💡 Clarifier' },
+]
+
+/** Extrait le texte brut depuis le HTML TipTap */
+function htmlToPlainText(html: string): string {
+  return html
+    .replace(/<br\s*\/?>/gi, '\n')
+    .replace(/<\/p>/gi, '\n')
+    .replace(/<\/h[1-6]>/gi, '\n')
+    .replace(/<\/li>/gi, '\n')
+    .replace(/<[^>]+>/g, '')
+    .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim()
+}
+
+function tipTapToHtml(node: any): string {
+  if (!node) return ''
+  if (node.type === 'doc') return (node.content ?? []).map(tipTapToHtml).join('')
+  if (node.type === 'text') {
+    let t = (node.text ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    if (node.marks?.some((m: any) => m.type === 'bold')) t = `<strong>${t}</strong>`
+    if (node.marks?.some((m: any) => m.type === 'italic')) t = `<em>${t}</em>`
+    if (node.marks?.some((m: any) => m.type === 'code')) t = `<code>${t}</code>`
+    return t
+  }
+  const inner = (node.content ?? []).map(tipTapToHtml).join('')
+  switch (node.type) {
+    case 'paragraph': return `<p>${inner || '&#8203;'}</p>`
+    case 'heading': return `<h${node.attrs?.level ?? 1}>${inner}</h${node.attrs?.level ?? 1}>`
+    case 'bulletList': return `<ul>${inner}</ul>`
+    case 'orderedList': return `<ol>${inner}</ol>`
+    case 'listItem': return `<li>${inner}</li>`
+    case 'blockquote': return `<blockquote>${inner}</blockquote>`
+    case 'codeBlock': return `<pre><code>${inner}</code></pre>`
+    case 'hardBreak': return '<br>'
+    default: return inner
+  }
+}
+
 function buildHtml(content: string, title: string) {
   const safeTitle = title.replace(/</g, '&lt;').replace(/>/g, '&gt;')
-  // Détecter si le contenu est déjà du HTML ou du texte brut
-  const isHtml = content.trimStart().startsWith('<')
-  const body = isHtml ? content : `<p>${content.replace(/\n/g, '<br>')}</p>`
+  let body: string
+  const trimmed = content.trimStart()
+  if (trimmed.startsWith('<')) {
+    body = content
+  } else if (trimmed.startsWith('{')) {
+    try { body = tipTapToHtml(JSON.parse(content)) } catch { body = `<p>${content.replace(/\n/g, '<br>')}</p>` }
+  } else {
+    body = `<p>${content.replace(/\n/g, '<br>')}</p>`
+  }
 
   return `<!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3">
 <style>
-  :root {
-    --brand: #A47148;
-    --ink: #1A1A18;
-    --paper: #FAFAF8;
-    --concrete: #8A8A82;
-    --border: #E8E6E0;
-    --code-bg: #f0ede8;
-  }
+  :root { --brand: #A47148; --ink: #1A1A18; --paper: #FAFAF8; --concrete: #8A8A82; --border: #E8E6E0; --code-bg: #f0ede8; }
   * { box-sizing: border-box; margin: 0; padding: 0; -webkit-text-size-adjust: 100%; }
-  body {
-    font-family: -apple-system, 'Helvetica Neue', sans-serif;
-    font-size: 16px; line-height: 1.75; color: var(--ink);
-    background: var(--paper); padding: 20px 20px 80px;
-    word-break: break-word;
-  }
-  .note-title {
-    font-size: 24px; font-weight: 800; letter-spacing: -0.5px;
-    color: var(--ink); margin-bottom: 4px; line-height: 1.3;
-  }
+  body { font-family: -apple-system, 'Helvetica Neue', sans-serif; font-size: 16px; line-height: 1.75; color: var(--ink); background: var(--paper); padding: 20px 20px 80px; word-break: break-word; }
+  .note-title { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--ink); margin-bottom: 4px; line-height: 1.3; }
   .note-sep { border: none; border-top: 1px solid var(--border); margin: 16px 0 20px; }
   h1 { font-size: 22px; font-weight: 700; margin: 24px 0 10px; }
   h2 { font-size: 19px; font-weight: 700; margin: 20px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
@@ -75,15 +114,10 @@ function buildHtml(content: string, title: string) {
   del, s { text-decoration: line-through; color: var(--concrete); }
   mark { background: #fff3cd; padding: 1px 3px; border-radius: 3px; }
   input[type=checkbox] { accent-color: var(--brand); margin-right: 6px; width: 16px; height: 16px; }
-  /* TipTap task list */
   ul[data-type="taskList"] { list-style: none; padding-left: 4px; }
   ul[data-type="taskList"] li { display: flex; align-items: flex-start; gap: 8px; }
   ul[data-type="taskList"] li > label { margin-top: 2px; }
-  /* TipTap nœuds spéciaux cachés sur mobile */
-  [data-type="liveBlock"], [data-type="structuredViewBlock"] { 
-    border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; 
-    margin: 8px 0; background: #f8f6f2; color: var(--concrete); font-size: 13px;
-  }
+  [data-type="liveBlock"], [data-type="structuredViewBlock"] { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: #f8f6f2; color: var(--concrete); font-size: 13px; }
 </style>
 </head>
 <body>
@@ -99,50 +133,155 @@ export default function NoteScreen() {
   const [note, setNote] = useState<Note | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
+  const [editMode, setEditMode] = useState(false)
+  const [editTitle, setEditTitle] = useState('')
+  const [editContent, setEditContent] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [aiSheetOpen, setAiSheetOpen] = useState(false)
+  const [flashcardSheetOpen, setFlashcardSheetOpen] = useState(false)
   const router = useRouter()
 
+  // Audio en mode édition
+  const { state: audioState, startRecording, stopAndTranscribe, cancelRecording } = useAudioRecorder(
+    (text) => setEditContent((prev) => prev ? prev + ' ' + text : text)
+  )
+
   useEffect(() => {
     if (!id) return
     apiFetch(ENDPOINTS.note(id as string))
-      .then((r) => {
-        if (!r.ok) throw new Error(`Erreur ${r.status}`)
-        return r.json()
-      })
+      .then((r) => { if (!r.ok) throw new Error(`Erreur ${r.status}`); return r.json() })
       .then((data) => setNote(data.note ?? null))
       .catch((e) => setError(e.message))
       .finally(() => setLoading(false))
   }, [id])
 
+  const handleEdit = () => {
+    if (!note) return
+    setEditTitle(note.title)
+    setEditContent(htmlToPlainText(note.content ?? ''))
+    setEditMode(true)
+  }
+
+  const handleSave = async () => {
+    if (!note || !editTitle.trim()) return
+    setSaving(true)
+    try {
+      const res = await apiFetch(ENDPOINTS.note(note.id), {
+        method: 'PUT',
+        body: JSON.stringify({ title: editTitle.trim(), content: editContent }),
+      })
+      if (!res.ok) throw new Error('Erreur de sauvegarde')
+      setNote((prev) => prev ? { ...prev, title: editTitle.trim(), content: editContent } : prev)
+      setEditMode(false)
+    } catch (e: any) {
+      Alert.alert('Erreur', e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleMic = () => {
+    if (audioState === 'idle' || audioState === 'error') startRecording()
+    else if (audioState === 'recording') stopAndTranscribe()
+    else cancelRecording()
+  }
+
   const handleShare = async () => {
     if (!note) return
     await Share.share({ title: note.title, message: `${note.title}\nhttps://memento-note.com` })
   }
 
+  const handleDelete = () => {
+    if (!note) return
+    Alert.alert(
+      'Supprimer la note',
+      `Mettre "${note.title}" à la corbeille ?`,
+      [
+        { text: 'Annuler', style: 'cancel' },
+        {
+          text: 'Supprimer', style: 'destructive',
+          onPress: async () => {
+            try {
+              const res = await apiFetch(ENDPOINTS.note(note.id), { method: 'DELETE' })
+              if (!res.ok) throw new Error(`Erreur ${res.status}`)
+              router.back()
+            } catch (e: any) {
+              Alert.alert('Erreur', e.message ?? 'Impossible de supprimer la note')
+            }
+          },
+        },
+      ]
+    )
+  }
+
   return (
     <SafeAreaView style={s.safe}>
       <View style={s.header}>
-        <TouchableOpacity onPress={() => router.back()} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+        <TouchableOpacity onPress={() => { if (editMode) setEditMode(false); else router.back() }} style={s.backBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
           <ArrowLeft size={22} color={C.ink} />
         </TouchableOpacity>
-        <Text style={s.headerTitle} numberOfLines={1}>{note?.title ?? '…'}</Text>
-        {note && (
-          <TouchableOpacity onPress={handleShare} style={s.shareBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
-            <Share2 size={18} color={C.concrete} />
+        <Text style={s.headerTitle} numberOfLines={1}>{editMode ? (editTitle || '…') : (note?.title ?? '…')}</Text>
+        {note && !editMode && (
+          <>
+            <TouchableOpacity onPress={handleEdit} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <Pencil size={18} color={C.concrete} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={() => setFlashcardSheetOpen(true)} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <GraduationCap size={18} color={C.concrete} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={handleShare} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <Share2 size={18} color={C.concrete} />
+            </TouchableOpacity>
+            <TouchableOpacity onPress={handleDelete} style={s.iconBtn} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+              <Trash2 size={18} color="#e11d48" />
+            </TouchableOpacity>
+          </>
+        )}
+        {editMode && (
+          <TouchableOpacity onPress={handleSave} disabled={saving || !editTitle.trim()} style={[s.saveBtn, (!editTitle.trim() || saving) && { opacity: 0.35 }]}>
+            {saving ? <ActivityIndicator size="small" color={C.white} /> : <Check size={18} color={C.white} />}
           </TouchableOpacity>
         )}
       </View>
 
       {loading && <View style={s.center}><ActivityIndicator color={C.brand} size="large" /></View>}
-      {error && <View style={s.center}><Text style={{ color: C.rose }}>{error}</Text></View>}
+      {error && <View style={s.center}><Text style={{ color: '#e11d48' }}>{error}</Text></View>}
       {!loading && !error && !note && <View style={s.center}><Text style={{ color: C.concrete }}>Note introuvable.</Text></View>}
-      {note && (
+
+      {/* Mode lecture */}
+      {note && !editMode && (
         <WebView
           source={{ html: buildHtml(note.content ?? '', note.title ?? '') }}
           style={{ flex: 1, backgroundColor: C.paper }}
-          javaScriptEnabled={true}
-          scrollEnabled={true}
-          showsVerticalScrollIndicator={false}
-          originWhitelist={['*']}
+          javaScriptEnabled scrollEnabled showsVerticalScrollIndicator={false} originWhitelist={['*']}
+        />
+      )}
+
+      {/* Mode édition */}
+      {note && editMode && (
+        <View style={{ flex: 1 }}>
+          <TextInput value={editTitle} onChangeText={setEditTitle} style={s.editTitle} placeholder="Titre…" placeholderTextColor={C.border} />
+          <View style={s.editDivider} />
+          <TextInput value={editContent} onChangeText={setEditContent} style={s.editContent} placeholder="Contenu…" placeholderTextColor={C.concrete} multiline textAlignVertical="top" scrollEnabled />
+          {/* Barre outils */}
+          <View style={s.toolbar}>
+            <MicButton state={audioState} onPress={handleMic} />
+            {audioState === 'recording'
+              ? <Text style={s.recordHint}>● Enregistrement… Appuyez pour arrêter</Text>
+              : <TouchableOpacity onPress={() => setAiSheetOpen(true)} disabled={!editContent.trim()} style={[s.aiBtn, !editContent.trim() && { opacity: 0.35 }]} activeOpacity={0.8}>
+                  <Text style={s.aiBtnText}>✨ Améliorer avec l'IA</Text>
+                </TouchableOpacity>}
+          </View>
+        </View>
+      )}
+
+      <AISheet visible={aiSheetOpen} onClose={() => setAiSheetOpen(false)} text={editContent} onApply={(t) => setEditContent(t)} />
+      {note && (
+        <FlashcardSheet
+          visible={flashcardSheetOpen}
+          onClose={() => setFlashcardSheetOpen(false)}
+          noteId={note.id}
+          noteTitle={note.title}
         />
       )}
     </SafeAreaView>
@@ -151,9 +290,17 @@ export default function NoteScreen() {
 
 const s = StyleSheet.create({
   safe: { flex: 1, backgroundColor: C.paper },
-  header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: C.paper },
+  header: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border, backgroundColor: C.paper },
   backBtn: { padding: 4 },
   headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink },
-  shareBtn: { padding: 4 },
+  iconBtn: { padding: 4 },
+  saveBtn: { backgroundColor: C.brand, padding: 7, borderRadius: 10 },
   center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  editTitle: { fontSize: 24, fontWeight: '800', color: C.ink, paddingHorizontal: 20, paddingTop: 16, paddingBottom: 8, letterSpacing: -0.5 },
+  editDivider: { height: 1, backgroundColor: C.border, marginHorizontal: 20, marginBottom: 12 },
+  editContent: { flex: 1, fontSize: 16, color: C.ink, lineHeight: 26, paddingHorizontal: 20, paddingBottom: 80 },
+  toolbar: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 16, paddingVertical: 12, borderTopWidth: 1, borderTopColor: C.border, backgroundColor: C.paper },
+  recordHint: { flex: 1, fontSize: 13, color: '#e11d48', fontWeight: '500' },
+  aiBtn: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: C.ink, paddingVertical: 11, paddingHorizontal: 14, borderRadius: 12, justifyContent: 'center' },
+  aiBtnText: { color: C.white, fontWeight: '600', fontSize: 14 },
 })

memento-mobile/app/note/create.tsx

@@ -0,0 +1,177 @@
+import { useState, useRef } from 'react'
+import {
+  View, Text, TextInput, TouchableOpacity, ScrollView,
+  KeyboardAvoidingView, Platform, ActivityIndicator,
+  Alert, StyleSheet,
+} from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { useRouter, useLocalSearchParams } from 'expo-router'
+import { Sparkles, X } from 'lucide-react-native'
+import { apiFetch } from '@/lib/api'
+import { ENDPOINTS } from '@/lib/config'
+import { C } from '@/lib/theme'
+import { AISheet } from '@/components/AISheet'
+import { TitleSheet } from '@/components/TitleSheet'
+import { MicButton } from '@/components/MicButton'
+import { useAudioRecorder } from '@/lib/useAudioRecorder'
+
+export default function CreateNoteScreen() {
+  const router = useRouter()
+  const { notebookId } = useLocalSearchParams<{ notebookId?: string }>()
+
+  const [title, setTitle] = useState('')
+  const [content, setContent] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [aiSheetOpen, setAiSheetOpen] = useState(false)
+  const [titleSheetOpen, setTitleSheetOpen] = useState(false)
+  const contentRef = useRef<TextInput>(null)
+
+  // Audio
+  const { state: audioState, startRecording, stopAndTranscribe, cancelRecording } = useAudioRecorder(
+    (text) => setContent((prev) => prev ? prev + ' ' + text : text)
+  )
+
+  const handleMic = () => {
+    if (audioState === 'idle' || audioState === 'error') startRecording()
+    else if (audioState === 'recording') stopAndTranscribe()
+    else cancelRecording()
+  }
+
+  const handleSave = async () => {
+    if (!title.trim()) {
+      Alert.alert('Titre requis', 'Donnez un titre à votre note.')
+      return
+    }
+    setSaving(true)
+    try {
+      const res = await apiFetch(ENDPOINTS.createNote, {
+        method: 'POST',
+        body: JSON.stringify({ title: title.trim(), content, notebookId }),
+      })
+      if (!res.ok) {
+        const d = await res.json().catch(() => ({}))
+        throw new Error(d.error ?? 'Erreur serveur')
+      }
+      const { note } = await res.json()
+      router.replace({ pathname: '/note/[id]', params: { id: note.id } })
+    } catch (e: any) {
+      Alert.alert('Erreur', e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <SafeAreaView style={s.safe}>
+      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={{ flex: 1 }}>
+
+        {/* Header */}
+        <View style={s.header}>
+          <TouchableOpacity onPress={() => router.back()} style={s.cancelBtn}>
+            <X size={20} color={C.concrete} />
+          </TouchableOpacity>
+          <Text style={s.headerTitle}>Nouvelle note</Text>
+          <TouchableOpacity
+            onPress={handleSave}
+            disabled={saving || !title.trim()}
+            style={[s.saveBtn, (!title.trim() || saving) && s.saveBtnDisabled]}
+          >
+            {saving
+              ? <ActivityIndicator size="small" color={C.white} />
+              : <Text style={s.saveBtnText}>Enregistrer</Text>}
+          </TouchableOpacity>
+        </View>
+
+        <ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps="handled">
+          {/* Titre */}
+          <View style={s.titleRow}>
+            <TextInput
+              value={title}
+              onChangeText={setTitle}
+              placeholder="Titre de la note…"
+              style={s.titleInput}
+              placeholderTextColor={C.border}
+              returnKeyType="next"
+              onSubmitEditing={() => contentRef.current?.focus()}
+              autoFocus
+            />
+            {content.trim().length >= 10 && (
+              <TouchableOpacity onPress={() => setTitleSheetOpen(true)} style={s.sparkleBtn} activeOpacity={0.8}>
+                <Sparkles size={16} color={C.brand} />
+              </TouchableOpacity>
+            )}
+          </View>
+
+          <View style={s.divider} />
+
+          {/* Contenu */}
+          <TextInput
+            ref={contentRef}
+            value={content}
+            onChangeText={setContent}
+            placeholder="Commencez à écrire…"
+            style={s.contentInput}
+            placeholderTextColor={C.concrete}
+            multiline
+            textAlignVertical="top"
+            scrollEnabled={false}
+          />
+        </ScrollView>
+
+        {/* Barre outils bas */}
+        <View style={s.toolbar}>
+          <MicButton state={audioState} onPress={handleMic} />
+          {audioState === 'recording' && (
+            <Text style={s.recordingHint}>● Enregistrement… Appuyez pour arrêter</Text>
+          )}
+          {audioState !== 'recording' && (
+            <TouchableOpacity
+              onPress={() => setAiSheetOpen(true)}
+              disabled={!content.trim()}
+              style={[s.aiBtn, !content.trim() && s.aiBtnDisabled]}
+              activeOpacity={0.8}
+            >
+              <Sparkles size={15} color={C.white} />
+              <Text style={s.aiBtnText}>Améliorer avec l'IA</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+      </KeyboardAvoidingView>
+
+      {/* Modaux propres */}
+      <AISheet
+        visible={aiSheetOpen}
+        onClose={() => setAiSheetOpen(false)}
+        text={content}
+        onApply={(improved) => setContent(improved)}
+      />
+      <TitleSheet
+        visible={titleSheetOpen}
+        onClose={() => setTitleSheetOpen(false)}
+        content={content}
+        onSelect={(t) => setTitle(t)}
+      />
+    </SafeAreaView>
+  )
+}
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
+  cancelBtn: { padding: 4, marginRight: 4 },
+  headerTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: C.ink, textAlign: 'center' },
+  saveBtn: { backgroundColor: C.brand, paddingHorizontal: 14, paddingVertical: 7, borderRadius: 10 },
+  saveBtnDisabled: { opacity: 0.35 },
+  saveBtnText: { color: C.white, fontWeight: '700', fontSize: 13 },
+  titleRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 8, gap: 8 },
+  titleInput: { flex: 1, fontSize: 26, fontWeight: '800', color: C.ink, letterSpacing: -0.5, lineHeight: 32 },
+  sparkleBtn: { padding: 8, borderRadius: 10, backgroundColor: '#f3ece4' },
+  divider: { height: 1, backgroundColor: C.border, marginHorizontal: 20, marginBottom: 16 },
+  contentInput: { flex: 1, fontSize: 16, color: C.ink, lineHeight: 26, paddingHorizontal: 20, paddingBottom: 120, minHeight: 300 },
+  toolbar: { flexDirection: 'row', alignItems: 'center', gap: 10, paddingHorizontal: 16, paddingVertical: 12, borderTopWidth: 1, borderTopColor: C.border, backgroundColor: C.paper },
+  recordingHint: { flex: 1, fontSize: 13, color: '#e11d48', fontWeight: '500' },
+  aiBtn: { flex: 1, flexDirection: 'row', alignItems: 'center', gap: 6, backgroundColor: C.ink, paddingVertical: 11, paddingHorizontal: 14, borderRadius: 12, justifyContent: 'center' },
+  aiBtnDisabled: { opacity: 0.35 },
+  aiBtnText: { color: C.white, fontWeight: '600', fontSize: 14 },
+})

memento-mobile/app/notebook/[id].tsx

@@ -4,7 +4,7 @@ import {
 } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { useLocalSearchParams, useRouter } from 'expo-router'
-import { ArrowLeft } from 'lucide-react-native'
+import { ArrowLeft, Plus } from 'lucide-react-native'
 import { apiFetch } from '@/lib/api'
 import { ENDPOINTS } from '@/lib/config'
 import { C } from '@/lib/theme'
@@ -46,6 +46,12 @@ export default function NotebookScreen() {
           <ArrowLeft size={22} color={C.ink} />
         </TouchableOpacity>
         <Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
+        <TouchableOpacity
+          onPress={() => router.push({ pathname: '/note/create', params: { notebookId: id } })}
+          style={s.addBtn}
+        >
+          <Plus size={20} color={C.brand} />
+        </TouchableOpacity>
       </View>
 
       {loading
@@ -73,6 +79,7 @@ const s = StyleSheet.create({
   safe: { flex: 1, backgroundColor: C.paper },
   header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
   headerTitle: { fontSize: 17, fontWeight: '600', color: C.ink, flex: 1 },
+  addBtn: { width: 34, height: 34, borderRadius: 17, backgroundColor: '#f3ece4', alignItems: 'center', justifyContent: 'center' },
   center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
   list: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32 },
   card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },

memento-mobile/app/revision/session.tsx

@@ -0,0 +1,237 @@
+import { useState, useCallback, useRef } from 'react'
+import {
+  View, Text, StyleSheet, TouchableOpacity, ActivityIndicator,
+  Animated, ScrollView,
+} from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { useLocalSearchParams, useRouter } from 'expo-router'
+import { ArrowLeft, GraduationCap } from 'lucide-react-native'
+import { C } from '@/lib/theme'
+import { apiFetch } from '@/lib/api'
+import { ENDPOINTS } from '@/lib/config'
+import { useFocusEffect } from 'expo-router'
+
+interface Card {
+  id: string
+  front: string
+  back: string
+  interval: number
+  type?: string
+}
+
+type SessionState = 'loading' | 'reviewing' | 'done' | 'error'
+
+const GRADE_LABELS: { grade: 1 | 2 | 3 | 4; label: string; color: string; bg: string; border: string }[] = [
+  { grade: 1, label: 'Oublié',   color: '#dc2626', bg: 'rgba(239,68,68,0.10)',  border: 'rgba(239,68,68,0.30)' },
+  { grade: 2, label: 'Difficile',color: '#b45309', bg: 'rgba(245,158,11,0.10)', border: 'rgba(245,158,11,0.30)' },
+  { grade: 3, label: 'Bien',     color: '#047857', bg: 'rgba(16,185,129,0.10)', border: 'rgba(16,185,129,0.30)' },
+  { grade: 4, label: 'Parfait',  color: '#A47148', bg: 'rgba(164,113,72,0.10)', border: 'rgba(164,113,72,0.30)' },
+]
+
+export default function SessionScreen() {
+  const router = useRouter()
+  const params = useLocalSearchParams<{ deckId: string; deckName: string }>()
+  const { deckId, deckName } = params
+
+  const [state, setState] = useState<SessionState>('loading')
+  const [cards, setCards] = useState<Card[]>([])
+  const [index, setIndex] = useState(0)
+  const [flipped, setFlipped] = useState(false)
+  const [reviewed, setReviewed] = useState(0)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+
+  // Animation flip
+  const flipAnim = useRef(new Animated.Value(0)).current
+  const frontInterp = flipAnim.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] })
+  const backInterp = flipAnim.interpolate({ inputRange: [0, 1], outputRange: ['180deg', '360deg'] })
+
+  const loadSession = useCallback(async () => {
+    if (!deckId) return
+    setState('loading')
+    setIndex(0)
+    setFlipped(false)
+    setReviewed(0)
+    flipAnim.setValue(0)
+    try {
+      const res = await apiFetch(ENDPOINTS.flashcardSession(deckId))
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error ?? `Erreur ${res.status}`)
+      setCards(data.cards ?? [])
+      setState(data.cards?.length === 0 ? 'done' : 'reviewing')
+    } catch (e: any) {
+      setErrorMsg(e.message ?? 'Erreur')
+      setState('error')
+    }
+  }, [deckId])
+
+  useFocusEffect(useCallback(() => { loadSession() }, [loadSession]))
+
+  const flip = () => {
+    if (flipped) return
+    setFlipped(true)
+    Animated.spring(flipAnim, { toValue: 1, useNativeDriver: true, friction: 8 }).start()
+  }
+
+  const grade = async (g: 1 | 2 | 3 | 4) => {
+    const card = cards[index]
+    if (!card) return
+    try {
+      await apiFetch(ENDPOINTS.flashcardReview, {
+        method: 'POST',
+        body: JSON.stringify({ cardId: card.id, grade: g }),
+      })
+    } catch { /* silencieux — on avance quand même */ }
+
+    const next = index + 1
+    setReviewed((r) => r + 1)
+    if (next >= cards.length) {
+      setState('done')
+    } else {
+      setIndex(next)
+      setFlipped(false)
+      Animated.timing(flipAnim, { toValue: 0, duration: 0, useNativeDriver: true }).start()
+    }
+  }
+
+  const current = cards[index]
+  const progress = cards.length > 0 ? index / cards.length : 0
+
+  return (
+    <SafeAreaView style={s.safe}>
+      {/* Header */}
+      <View style={s.header}>
+        <TouchableOpacity onPress={() => router.back()} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}>
+          <ArrowLeft size={22} color={C.ink} />
+        </TouchableOpacity>
+        <Text style={s.headerTitle} numberOfLines={1}>{deckName ?? 'Révision'}</Text>
+        {state === 'reviewing' && (
+          <Text style={s.counter}>{index + 1}/{cards.length}</Text>
+        )}
+      </View>
+
+      {/* Barre de progression */}
+      {state === 'reviewing' && (
+        <View style={s.progressBarWrap}>
+          <View style={[s.progressBarFill, { width: `${Math.round(progress * 100)}%` }]} />
+        </View>
+      )}
+
+      {/* Contenu */}
+      {state === 'loading' && (
+        <View style={s.center}>
+          <ActivityIndicator color={C.brand} size="large" />
+        </View>
+      )}
+
+      {state === 'error' && (
+        <View style={s.center}>
+          <Text style={s.errorTxt}>{errorMsg}</Text>
+          <TouchableOpacity onPress={loadSession} style={s.retryBtn}>
+            <Text style={s.retryTxt}>Réessayer</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {state === 'done' && (
+        <View style={s.center}>
+          <GraduationCap size={56} color={C.brand} />
+          <Text style={s.doneTitle}>Session terminée !</Text>
+          <Text style={s.doneSub}>
+            {reviewed > 0 ? `${reviewed} carte${reviewed > 1 ? 's' : ''} révisée${reviewed > 1 ? 's' : ''}` : 'Tout est à jour 🎉'}
+          </Text>
+          <TouchableOpacity onPress={() => router.back()} style={s.doneBtn}>
+            <Text style={s.doneBtnTxt}>Retour aux paquets</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {state === 'reviewing' && current && (
+        <View style={s.sessionWrap}>
+          {/* Carte flip */}
+          <TouchableOpacity activeOpacity={0.95} onPress={flip} style={s.cardWrap}>
+            {/* Face avant */}
+            <Animated.View style={[s.card, s.cardFront, { transform: [{ rotateY: frontInterp }] }]}>
+              <ScrollView contentContainerStyle={s.cardContent} showsVerticalScrollIndicator={false}>
+                <Text style={s.cardLabel}>Question</Text>
+                <Text style={s.cardText}>{current.front}</Text>
+              </ScrollView>
+              {!flipped && (
+                <View style={s.tapHint}>
+                  <Text style={s.tapTxt}>Appuyez pour révéler la réponse</Text>
+                </View>
+              )}
+            </Animated.View>
+
+            {/* Face arrière */}
+            <Animated.View style={[s.card, s.cardBack, { transform: [{ rotateY: backInterp }] }]}>
+              <ScrollView contentContainerStyle={s.cardContent} showsVerticalScrollIndicator={false}>
+                <Text style={s.cardLabel}>Réponse</Text>
+                <Text style={s.cardText}>{current.back}</Text>
+              </ScrollView>
+            </Animated.View>
+          </TouchableOpacity>
+
+          {/* Boutons de note (visibles seulement après flip) */}
+          {flipped && (
+            <View style={s.gradeRow}>
+              {GRADE_LABELS.map(({ grade: g, label, color, bg, border }) => (
+                <TouchableOpacity
+                  key={g}
+                  style={[s.gradeBtn, { backgroundColor: bg, borderColor: border }]}
+                  onPress={() => grade(g)}
+                  activeOpacity={0.8}
+                >
+                  <Text style={[s.gradeNum, { color }]}>{g}</Text>
+                  <Text style={[s.gradeLbl, { color }]}>{label}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          )}
+        </View>
+      )}
+    </SafeAreaView>
+  )
+}
+
+const s = StyleSheet.create({
+  safe: { flex: 1, backgroundColor: C.paper },
+  header: {
+    flexDirection: 'row', alignItems: 'center', gap: 12,
+    paddingHorizontal: 20, paddingVertical: 14,
+    borderBottomWidth: 1, borderBottomColor: C.border,
+  },
+  headerTitle: { flex: 1, fontSize: 17, fontWeight: '700', color: C.ink },
+  counter: { fontSize: 13, color: C.concrete, fontWeight: '600' },
+  progressBarWrap: { height: 3, backgroundColor: C.border },
+  progressBarFill: { height: 3, backgroundColor: C.brand },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
+  sessionWrap: { flex: 1, padding: 20, justifyContent: 'space-between' },
+  cardWrap: { flex: 1, marginBottom: 16 },
+  card: {
+    position: 'absolute', inset: 0,
+    borderRadius: 18, borderWidth: 1, borderColor: C.border,
+    backgroundColor: C.surface,
+    backfaceVisibility: 'hidden',
+    padding: 24,
+  },
+  cardFront: { zIndex: 1 },
+  cardBack: { backgroundColor: '#f0f7ff' },
+  cardContent: { flexGrow: 1, justifyContent: 'center', alignItems: 'center', paddingBottom: 48 },
+  cardLabel: { fontSize: 11, fontWeight: '700', color: C.brand, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 16 },
+  cardText: { fontSize: 20, color: C.ink, textAlign: 'center', lineHeight: 30, fontWeight: '500' },
+  tapHint: { position: 'absolute', bottom: 20, left: 0, right: 0, alignItems: 'center' },
+  tapTxt: { fontSize: 12, color: C.concrete, fontStyle: 'italic' },
+  gradeRow: { flexDirection: 'row', gap: 8 },
+  gradeBtn: {
+    flex: 1, alignItems: 'center', paddingVertical: 12, borderRadius: 14, borderWidth: 1.5,
+  },
+  gradeNum: { fontSize: 18, fontWeight: '800' },
+  gradeLbl: { fontSize: 10, fontWeight: '600', marginTop: 2 },
+  doneTitle: { fontSize: 24, fontWeight: '800', color: C.ink, marginTop: 20, marginBottom: 8 },
+  doneSub: { fontSize: 15, color: C.concrete, marginBottom: 32 },
+  doneBtn: { backgroundColor: C.brand, paddingHorizontal: 28, paddingVertical: 14, borderRadius: 14 },
+  doneBtnTxt: { color: '#fff', fontWeight: '700', fontSize: 16 },
+  errorTxt: { fontSize: 15, color: '#e11d48', textAlign: 'center', marginBottom: 12 },
+  retryBtn: { backgroundColor: C.brand, paddingHorizontal: 20, paddingVertical: 10, borderRadius: 10 },
+  retryTxt: { color: '#fff', fontWeight: '600' },
+})