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/(tabs)/_layout.tsx

@@ -1,5 +1,7 @@
 import { Tabs } from 'expo-router';
 import { Text, type ColorValue } from 'react-native';
+import { useAssets, useReferenceValues } from '@/api/exploitation';
+import { useFile } from '@/file/store';
 import { useTokens } from '@/theme/tokens';
 
 /** La tabbar de la maquette R4. Les onglets à venir restent visibles
@@ -12,6 +14,12 @@ function Pic({ glyphe, couleur }: { glyphe: string; couleur: ColorValue }) {
 
 export default function CoquilleTabs() {
   const t = useTokens();
+  const file = useFile();
+  const conflits = file.some((s) => s.statut === 'CONFLIT');
+  // D1 « lecture locale » : le parc (scan D4) et les référentiels du bilan
+  // se préchargent dès l'entrée — le sous-sol n'attend pas qu'on y pense.
+  useAssets();
+  useReferenceValues();
   return (
     <Tabs
       screenOptions={{
@@ -49,6 +57,13 @@ export default function CoquilleTabs() {
         options={{
           title: 'Synchro',
           tabBarIcon: ({ color }) => <Pic glyphe="⇅" couleur={color} />,
+          tabBarBadge: file.length || undefined,
+          tabBarBadgeStyle: {
+            backgroundColor: conflits ? t.prioBloque : t.stAttente,
+            color: '#fff',
+            fontFamily: 'Manrope_800ExtraBold',
+            fontSize: 10,
+          },
         }}
       />
     </Tabs>

apps/mobile/app/(tabs)/synchro.tsx

@@ -1,11 +1,182 @@
-import { AVenir } from '@/composants/a-venir';
+import { useQueryClient } from '@tanstack/react-query';
+import { router } from 'expo-router';
+import { FlatList, Pressable, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useHorsLigne } from '@/auth/session';
+import { BoutonTel } from '@/composants/ui';
+import { useFile, type Saisie } from '@/file/store';
+import { abandonnerSaisie, rejouer, rejouerSurVersionAJour } from '@/file/synchro';
+import { useTokens } from '@/theme/tokens';
+
+/** Écran 7 de la maquette R4 : la file VISIBLE et honnête. Rejeu dans
+ *  l'ordre ; un conflit (verrou D2) arrête la file sur l'élément, montre le
+ *  message de l'API (qui, quand) et VOUS tranchez — rien n'est écrasé ni
+ *  perdu en silence. */
+
+const ICONES: Record<Saisie['type'], string> = {
+  TRANSITION: '🏁',
+  COCHE: '✓',
+  BILAN: '📋',
+  PHOTO: '🖼',
+};
 
 export default function PageSynchro() {
+  const t = useTokens();
+  const horsLigne = useHorsLigne();
+  const file = useFile();
+  const queryClient = useQueryClient();
+
+  const conflit = file.find((s) => s.statut === 'CONFLIT');
+  const heure = (iso: string) =>
+    new Intl.DateTimeFormat('fr-FR', { hour: '2-digit', minute: '2-digit' }).format(new Date(iso));
+
   return (
-    <AVenir
-      titre="Synchro"
-      release="R4.3"
-      detail="La file d'attente visible et honnête : vos saisies hors-ligne, rejouées dans l'ordre — et les conflits que VOUS tranchez (verrou optimiste, décision D2)."
-    />
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.fond }} edges={['top']}>
+      <View style={{ flex: 1, padding: 14, gap: 10 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 8 }}>
+          <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 19, color: t.encre }}>
+            Synchro
+          </Text>
+          <Text style={{ marginLeft: 'auto', fontFamily: 'Manrope_600SemiBold', fontSize: 11, color: t.encre3 }}>
+            {conflit ? 'arrêtée sur le conflit' : file.length ? 'rejouée dans l’ordre' : ''}
+          </Text>
+        </View>
+
+        {conflit ? (
+          <View
+            style={{
+              backgroundColor: t.prioBloqueFond,
+              borderColor: t.danger,
+              borderWidth: 1.5,
+              borderRadius: 12,
+              padding: 12,
+              gap: 8,
+            }}
+          >
+            <Text style={{ color: t.danger, fontFamily: 'Manrope_800ExtraBold', fontSize: 13 }}>
+              ⚠ Conflit sur {conflit.otReference}
+            </Text>
+            <Text style={{ color: t.encre, fontFamily: 'Manrope_600SemiBold', fontSize: 12.5 }}>
+              {conflit.erreur ?? 'L’OT a été modifié pendant que vous étiez hors-ligne.'}
+            </Text>
+            <Text style={{ color: t.encre2, fontFamily: 'Manrope_400Regular', fontSize: 11.5 }}>
+              Votre saisie (« {conflit.libelle} », {heure(conflit.creeA)}) est conservée telle
+              quelle dans la file — rien n’est perdu.
+            </Text>
+            <BoutonTel
+              libelle="Voir l’OT à jour"
+              variante="contour"
+              surAppui={() => router.push(`/ot/${conflit.otId}`)}
+            />
+            <BoutonTel
+              libelle="Rejouer ma saisie sur la version à jour"
+              surAppui={() => void rejouerSurVersionAJour(conflit.id, queryClient)}
+            />
+            <BoutonTel
+              libelle="Abandonner ma saisie"
+              variante="gris"
+              surAppui={() => void abandonnerSaisie(conflit.id, queryClient)}
+            />
+          </View>
+        ) : null}
+
+        <FlatList
+          data={file}
+          keyExtractor={(s) => s.id}
+          contentContainerStyle={{ gap: 8, paddingBottom: 12 }}
+          ListEmptyComponent={
+            <View style={{ padding: 24, alignItems: 'center', gap: 6 }}>
+              <Text style={{ fontFamily: 'Manrope_800ExtraBold', fontSize: 15, color: t.encre }}>
+                Rien en attente
+              </Text>
+              <Text
+                style={{
+                  fontFamily: 'Manrope_400Regular',
+                  fontSize: 12.5,
+                  color: t.encre2,
+                  textAlign: 'center',
+                }}
+              >
+                Toutes vos saisies sont sur le serveur. Les gestes faits hors-ligne apparaîtront
+                ici, rejoués dans l’ordre au retour du réseau.
+              </Text>
+            </View>
+          }
+          renderItem={({ item: s }) => (
+            <View
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                backgroundColor: t.surface,
+                borderColor: s.statut === 'CONFLIT' ? t.danger : t.bordure,
+                borderWidth: 1,
+                borderRadius: 10,
+                paddingHorizontal: 12,
+                paddingVertical: 10,
+              }}
+            >
+              <View
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 8,
+                  backgroundColor: t.surface2,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text style={{ fontSize: 13 }}>{ICONES[s.type]}</Text>
+              </View>
+              <View style={{ flex: 1 }}>
+                <Text numberOfLines={1} style={{ fontFamily: 'Manrope_700Bold', fontSize: 12.5, color: t.encre }}>
+                  {s.libelle}
+                </Text>
+                <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 11, color: t.encre2 }}>
+                  {s.otReference} · {heure(s.creeA)}
+                </Text>
+              </View>
+              <Text
+                style={{
+                  fontFamily: 'Manrope_700Bold',
+                  fontSize: 10.5,
+                  paddingHorizontal: 8,
+                  paddingVertical: 2,
+                  borderRadius: 999,
+                  overflow: 'hidden',
+                  color:
+                    s.statut === 'CONFLIT' ? t.danger : s.statut === 'ENVOI' ? t.stOuvert : t.stAttente,
+                  backgroundColor:
+                    s.statut === 'CONFLIT'
+                      ? t.prioBloqueFond
+                      : s.statut === 'ENVOI'
+                        ? t.stOuvertFond
+                        : t.stAttenteFond,
+                }}
+              >
+                {s.statut === 'CONFLIT' ? 'conflit' : s.statut === 'ENVOI' ? 'envoi…' : 'en attente'}
+              </Text>
+            </View>
+          )}
+        />
+
+        {file.length && !horsLigne ? (
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => void rejouer(queryClient)}
+            style={{ backgroundColor: t.primaire, borderRadius: 10, padding: 12, alignItems: 'center' }}
+          >
+            <Text style={{ color: '#fff', fontFamily: 'Manrope_700Bold', fontSize: 14 }}>
+              Rejouer la file maintenant
+            </Text>
+          </Pressable>
+        ) : null}
+        {horsLigne ? (
+          <Text style={{ color: t.stAttente, fontFamily: 'Manrope_600SemiBold', fontSize: 12, textAlign: 'center' }}>
+            Hors-ligne — la file repartira seule au retour du réseau.
+          </Text>
+        ) : null}
+      </View>
+    </SafeAreaView>
   );
 }

apps/mobile/app/_layout.tsx

@@ -14,6 +14,8 @@ import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
 import { useEffect, useState } from 'react';
 import { HorsLigneProvider } from '@/auth/session';
+import { chargerFile } from '@/file/store';
+import { rejouer } from '@/file/synchro';
 import { useTokens } from '@/theme/tokens';
 
 /** Racine de l'app (D1 validée) : le cache TanStack est PERSISTÉ dans
@@ -46,15 +48,16 @@ export default function RacineApp() {
     Manrope_800ExtraBold,
   });
 
-  useEffect(
-    () =>
-      NetInfo.addEventListener((etat) => {
-        const enLigne = !!etat.isConnected;
-        onlineManager.setOnline(enLigne);
-        setHorsLigne(!enLigne);
-      }),
-    [],
-  );
+  useEffect(() => {
+    // D1 : la file survit au redémarrage — on la recharge avant tout.
+    void chargerFile().then(() => rejouer(queryClient));
+    return NetInfo.addEventListener((etat) => {
+      const enLigne = !!etat.isConnected;
+      onlineManager.setOnline(enLigne);
+      setHorsLigne(!enLigne);
+      if (enLigne) void rejouer(queryClient); // le retour du réseau vide la file
+    });
+  }, []);
 
   if (!polices) return null;
 

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

@@ -1,6 +1,6 @@
 import { router, useLocalSearchParams } from 'expo-router';
 import { useState } from 'react';
-import { Alert, ScrollView, Text, View } from 'react-native';
+import { ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
   BILAN_FIELD_LABELS,
@@ -9,16 +9,27 @@ import {
   type BilanField,
   type ReportUpsert,
 } from '@siop/shared';
-import { useBilan, useReferenceValues, useTransition, useWorkOrder } from '@/api/exploitation';
+import { useQueryClient } from '@tanstack/react-query';
+import { useReferenceValues, useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { BoutonTel, Carte, ChoixTel, EnteteFiche } from '@/composants/ui';
+import { enfilerBilan, enfilerTransition } from '@/file/actions';
 import { useTokens } from '@/theme/tokens';
 
 /** Écran 3 de la maquette R4 : le bilan codé R2 au pouce — 3 champs requis,
- *  garde visible et bloquante (les MESSAGES viennent de l'API : une seule
- *  source de vérité, comme le web). Clôture en ligne en R4.2. */
+ *  garde visible et bloquante. Depuis R4.3, bilan et clôture partent EN
+ *  FILE (D1) : hors-ligne, l'OT passe localement à « Terminé (en file) »
+ *  et le serveur tranchera au rejeu (verrou D2 si l'OT a bougé). */
 
-const CHAMP_VERS_ID: Record<BilanField, keyof ReportUpsert> = {
+type ChampBilanId =
+  | 'doorStateId'
+  | 'cabinPositionId'
+  | 'anomalyId'
+  | 'externalCauseId'
+  | 'actionTakenId'
+  | 'componentConcernedId';
+
+const CHAMP_VERS_ID: Record<BilanField, ChampBilanId> = {
   DOOR_STATE: 'doorStateId',
   CABIN_POSITION: 'cabinPositionId',
   ANOMALY: 'anomalyId',
@@ -41,8 +52,7 @@ export default function PageCloture() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
   const { data: valeurs } = useReferenceValues();
-  const bilan = useBilan(id);
-  const transition = useTransition(id);
+  const queryClient = useQueryClient();
   const [choix, setChoix] = useState<Partial<Record<BilanField, string | null>>>({});
 
   if (!ot) return null;
@@ -61,27 +71,23 @@ export default function PageCloture() {
     return ot.report?.[CHAMP_VERS_VALEUR[champ]] ?? null;
   };
 
-  const enregistrer = (apres?: () => void) => {
+  const enregistrer = () => {
     const corps: ReportUpsert = {};
+    const labels: Parameters<typeof enfilerBilan>[3] = {};
     for (const champ of BILAN_FIELDS) {
-      if (champ in choix) corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
+      if (champ in choix) {
+        corps[CHAMP_VERS_ID[champ]] = choix[champ] ?? null;
+        labels[CHAMP_VERS_ID[champ]] = valeurDe(champ);
+      }
     }
-    bilan.mutate(corps, {
-      onSuccess: apres,
-      onError: (e) => Alert.alert('Bilan refusé', e.message),
-    });
+    enfilerBilan(queryClient, ot, corps, labels);
   };
 
-  const cloturer = () =>
-    enregistrer(() =>
-      transition.mutate(
-        { to: 'DONE' },
-        {
-          onSuccess: () => router.replace(`/ot/${id}`),
-          onError: (e) => Alert.alert('Clôture bloquée', e.message),
-        },
-      ),
-    );
+  const cloturer = () => {
+    enregistrer();
+    enfilerTransition(queryClient, ot, 'DONE');
+    router.replace(`/ot/${id}`);
+  };
 
   const manquants = REQUIRED_BILAN_FIELDS.filter((c) => !valeurDe(c));
 
@@ -116,26 +122,29 @@ export default function PageCloture() {
         </Carte>
 
         <BoutonTel
-          libelle={bilan.isPending ? 'Enregistrement…' : 'Enregistrer le bilan'}
+          libelle="Enregistrer le bilan"
           variante="contour"
-          desactive={horsLigne || bilan.isPending}
-          surAppui={() => enregistrer()}
+          surAppui={() => {
+            enregistrer();
+            router.replace(`/ot/${id}`);
+          }}
         />
         <BoutonTel
           libelle={
             manquants.length
               ? 'Clôturer (bilan incomplet)'
-              : transition.isPending
-                ? 'Clôture…'
+              : horsLigne
+                ? 'Clôturer — partira à la synchro'
                 : "Clôturer l'intervention"
           }
           variante={manquants.length ? 'gris' : 'vert'}
-          desactive={horsLigne || manquants.length > 0 || bilan.isPending || transition.isPending}
+          desactive={manquants.length > 0}
           surAppui={cloturer}
         />
         {horsLigne ? (
           <Text style={{ color: t.stAttente, fontFamily: 'Manrope_600SemiBold', fontSize: 12 }}>
-            Hors-ligne : la clôture en file arrive en R4.3 — pour l’instant, revenez au réseau.
+            Hors-ligne : la clôture est enregistrée sur le téléphone et sera rejouée telle quelle
+            au retour du réseau. Si l’OT a changé entre-temps, VOUS trancherez (écran Synchro).
           </Text>
         ) : null}
       </ScrollView>

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

@@ -1,30 +1,38 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { useLocalSearchParams } from 'expo-router';
-import { Alert, Pressable, ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useCocheChecklist, useWorkOrder } from '@/api/exploitation';
+import { useWorkOrder } from '@/api/exploitation';
 import { useHorsLigne } from '@/auth/session';
 import { EnteteFiche } from '@/composants/ui';
+import { enfilerCoche } from '@/file/actions';
+import { useFile } from '@/file/store';
 import { prochainEtat, progression } from '@/lib/checklist';
 import { useTokens } from '@/theme/tokens';
 
 /** Écran 6 de la maquette R4 : la grille au pouce. Appui simple = coche,
- *  appui long = non-applicable. En R4.2 chaque coche part immédiatement à
- *  l'API (hors-ligne : lecture seule — la file individuelle arrive en R4.3). */
+ *  appui long = non-applicable. Chaque coche part en file INDIVIDUELLEMENT
+ *  (D1) : 7 coches faites = 7 coches sauvées, réseau ou pas. */
 export default function PageGrille() {
   const t = useTokens();
   const horsLigne = useHorsLigne();
   const { id } = useLocalSearchParams<{ id: string }>();
   const { data: ot } = useWorkOrder(id);
-  const coche = useCocheChecklist(id);
+  const queryClient = useQueryClient();
+  const file = useFile();
 
   if (!ot) return null;
   const { faits, total, pct } = progression(ot.checklist);
+  const enFile = new Set(
+    file.flatMap((s) => (s.otId === ot.id && s.type === 'COCHE' ? [s.payload.itemId] : [])),
+  );
 
-  const basculer = (itemId: string, etat: Parameters<typeof prochainEtat>[0], versNA = false) => {
-    if (horsLigne) return;
-    coche.mutate(
-      { itemId, state: versNA ? (etat === 'NA' ? 'PENDING' : 'NA') : prochainEtat(etat) },
-      { onError: (e) => Alert.alert('Coche refusée', e.message) },
+  const basculer = (item: { id: string; label: string }, etat: Parameters<typeof prochainEtat>[0], versNA = false) => {
+    enfilerCoche(
+      queryClient,
+      ot,
+      item,
+      versNA ? (etat === 'NA' ? 'PENDING' : 'NA') : prochainEtat(etat),
     );
   };
 
@@ -55,8 +63,7 @@ export default function PageGrille() {
             }}
           >
             <Text style={{ color: t.stAttente, fontFamily: 'Manrope_700Bold', fontSize: 12 }}>
-              ⚠ Hors-ligne — les coches en file arrivent en R4.3 ; pour l’instant la grille est en
-              lecture.
+              ⚠ Hors-ligne — chaque coche part en file et se synchronisera au retour du réseau.
             </Text>
           </View>
         ) : null}
@@ -66,9 +73,8 @@ export default function PageGrille() {
             accessibilityRole="checkbox"
             aria-checked={item.state === 'DONE'}
             accessibilityLabel={item.label}
-            disabled={horsLigne || coche.isPending}
-            onPress={() => basculer(item.id, item.state)}
-            onLongPress={() => basculer(item.id, item.state, true)}
+            onPress={() => basculer(item, item.state)}
+            onLongPress={() => basculer(item, item.state, true)}
             style={{
               flexDirection: 'row',
               alignItems: 'center',
@@ -109,7 +115,21 @@ export default function PageGrille() {
             >
               {item.label}
             </Text>
-            {item.doneBy ? (
+            {enFile.has(item.id) ? (
+              <Text
+                style={{
+                  fontFamily: 'Manrope_800ExtraBold',
+                  fontSize: 9,
+                  color: t.stAttente,
+                  backgroundColor: t.stAttenteFond,
+                  paddingHorizontal: 6,
+                  borderRadius: 999,
+                  overflow: 'hidden',
+                }}
+              >
+                en file
+              </Text>
+            ) : item.doneBy ? (
               <Text style={{ fontFamily: 'Manrope_400Regular', fontSize: 10.5, color: t.encre3 }}>
                 {item.doneBy.displayName.split(' ')[0]}
               </Text>

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 }}>