feat(r4.3): file d'écriture, verrou optimiste D2, Synchro & conflits

Serveur : updatedAt exposé au détail OT ; baseUpdatedAt optionnel sur
transition/coche/bilan → 409 « Conflit de version » contextualisé (qui,
quand) ; toute écriture secondaire (coche, bilan, commentaire, conso,
MO) fait avancer la version — sans version fournie, le web est
inchangé. ADR-003 : sécurité & protocole de routage mobile (qui vit où
sur l'appareil, purge complète à la déconnexion — correctif réel : la
file et le cache persisté survivaient au logout).

Mobile : file persistée AsyncStorage rejouée dans l'ordre — succès →
propagation de la version fraîche aux saisies restantes du même OT
(nos écritures ne se conflictent pas entre elles, un écart étranger
reste détecté) ; coupure → tout attend ; refus → CONFLIT, la file
s'arrête, l'humain tranche (voir l'OT / rejouer sur version à jour /
abandonner). Transitions, coches, bilan et photos (D5, compressées
~1600 px) passent par la file avec patch optimiste du cache ; écran
Synchro (badge tabbar ambre/rouge) ; préchargement parc + référentiels
(le bilan hors-ligne a ses vocabulaires).

Recette « mode avion » 13/13 en Expo web piloté : gestes hors-ligne →
3 en file → modification concurrente de Salma → conflit tranché →
serveur Terminé avec bilan. 17 tests jest-expo, 74 tests API.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/mobile/app/ot/[id]/index.tsx

@@ -1,45 +1,70 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { router, useLocalSearchParams } from 'expo-router';
-import { Alert, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   WORK_ORDER_PRIORITY_LABELS,
   WORK_ORDER_TYPE_LABELS,
 } from '@siop/shared';
-import { useTransition, useWorkOrder } from '@/api/exploitation';
+import { useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { BoutonTel, Carte, ChipStatut, EnteteFiche, LigneInfo } from '@/composants/ui';
+import { CartePhotos } from '@/composants/carte-photos';
+import { enfilerTransition } from '@/file/actions';
+import { useFile } from '@/file/store';
 import { progression } from '@/lib/checklist';
 import { useTokens } from '@/theme/tokens';
 
 const fmt = new Intl.NumberFormat('fr-FR');
 
 /** Écran 2 de la maquette R4 : la même machine à états que le web — UN
- *  bouton principal selon l'état, la garde de clôture visible. En R4.2 les
- *  écritures restent en ligne (la file arrive en R4.3 — assumé à l'écran). */
+ *  bouton principal selon l'état. Depuis R4.3, chaque geste part en file
+ *  (D1) : l'écran montre l'état local tout de suite, la synchro suit. */
 export default function PageFicheOT() {
   const t = useTokens();
   const horsLigne = useHorsLigne();
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
-  const transition = useTransition(id);
+  const queryClient = useQueryClient();
+  const file = useFile();
 
   if (!ot) return null;
 
   const grille = progression(ot.checklist);
+  const enFile = file.filter((s) => s.otId === ot.id);
   const peutDemarrer = ot.allowedTransitions.includes('IN_PROGRESS');
   const peutCloturer = ot.allowedTransitions.includes('DONE');
   const peutSuspendre = ot.allowedTransitions.includes('ON_HOLD');
 
-  const demarrer = () =>
-    transition.mutate(
-      { to: 'IN_PROGRESS' },
-      { onError: (e) => Alert.alert('Transition refusée', e.message) },
-    );
+  const demarrer = () => enfilerTransition(queryClient, ot, 'IN_PROGRESS');
 
   return (
     <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
       <ScrollView contentContainerStyle={{ padding: 14, gap: 10 }}>
-        <EnteteFiche titre={ot.reference} apres={<ChipStatut statut={ot.status} />} />
+        <EnteteFiche
+          titre={ot.reference}
+          apres={
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {enFile.length ? (
+                <Text
+                  style={{
+                    fontFamily: 'Manrope_800ExtraBold',
+                    fontSize: 10,
+                    color: t.stAttente,
+                    backgroundColor: t.stAttenteFond,
+                    paddingHorizontal: 7,
+                    paddingVertical: 2,
+                    borderRadius: 999,
+                    overflow: 'hidden',
+                  }}
+                >
+                  {enFile.length} en file
+                </Text>
+              ) : null}
+              <ChipStatut statut={ot.status} />
+            </View>
+          }
+        />
         <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 17, color: t.encre }}>
           {ot.title}
         </Text>
@@ -54,7 +79,7 @@ export default function PageFicheOT() {
             }}
           >
             <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
-              ⚠ Hors-ligne — lecture seule pour l’instant : les saisies hors réseau arrivent en R4.3 (file).
+              ⚠ Hors-ligne — vos gestes partent en file et se synchroniseront au retour du réseau.
             </Text>
           </View>
         ) : null}
@@ -129,7 +154,6 @@ export default function PageFicheOT() {
         {peutDemarrer ? (
           <BoutonTel
             libelle={ot.status === 'ON_HOLD' ? 'Reprendre' : 'Démarrer'}
-            desactive={horsLigne || transition.isPending}
             surAppui={demarrer}
           />
         ) : null}
@@ -137,7 +161,6 @@ export default function PageFicheOT() {
           <BoutonTel
             libelle="Clôturer l'intervention"
             variante="vert"
-            desactive={horsLigne}
             surAppui={() => router.push(`/ot/${ot.id}/cloture`)}
           />
         ) : null}
@@ -145,16 +168,12 @@ export default function PageFicheOT() {
           <BoutonTel
             libelle="Mettre en attente"
             variante="contour"
-            desactive={horsLigne || transition.isPending}
-            surAppui={() =>
-              transition.mutate(
-                { to: 'ON_HOLD' },
-                { onError: (e) => Alert.alert('Transition refusée', e.message) },
-              )
-            }
+            surAppui={() => enfilerTransition(queryClient, ot, 'ON_HOLD')}
           />
         ) : null}
 
+        <CartePhotos ot={ot} />
+
         <Carte titre="Activité">
           {ot.events.slice(0, 5).map((e) => (
             <View key={e.id} style={{ gap: 1 }}>