diff --git a/README.md b/README.md
index c67b006867a431b11f321cbbe863fc4cbe5d8797..af0504e6ea1fa8b9da72a5689ded7c0807522b2a 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,9 @@
 # blob-analysis-lab-demo
 Un projet temporaire qick'n'dirty de démo d'analyse de photos de blobs
 
+## Mod'Op
+[Mode opératoire](docs/README.md)
+
 ## Commandes
 * `npm run serve` : lancer un serveur pour tests en local
 * `npm build -- --config webpack.staging.js` : construction pour tests
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..637841858fd6889f89740b0117b23cc274be8d77
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,114 @@
+# Mode opératoire
+## Présentation
+**Cet outil vous accompagne - pas à pas - dans l'analyse des photos de blobs**, afin de fournir les mesures nécessaires à l'apprentissage du _Machine Learning_. 
+
+L'analyse se déroule en **4 étapes** :
+
+[1. Charger une photo](#étape-1--charger-une-photo) <br>
+[2. Positionner la règle](#étape-2--positioner-la-règle) <br>
+[3. Positionner la boîte de Petri](#étape-3--positionner-la-boîte-de-petri) <br>
+[4. Détourer le blob à main levée](#étape-4--détourer-le-blob) <br>
+[5. Télécharger les fichiers de mesures](#étape-5--télécharger-les-résultats) <br>
+
+Chaque étape est décrite dans la partie droite du _lab_. Il est possible de revenir à tout moment
+en arrière en cliquant sur le titre de l'étape.
+
+C'est parti...
+
+---
+
+## Étape 1 : charger une photo
+
+**Charger une photo** à analyser - située sur l'ordinateur - avec le **bouton "Parcourir..."**.
+
+![img.png](file_panel.png)
+
+Une fois la photo chargée, **l'étape 2 est automatiquement activée**.
+
+Mais avant...
+
+> ### Comment zoomer et déplacer la photo
+> Pour prendre les mesures avec le plus de précision, il est possible de :
+> * **zoomer/dézoomer (agrandir/rétrécir) la photo** avec la molette de la souris
+> * **déplacer la photo** : tout en appuyant sur la touche contrôle (le curseur devient des flèches), cliquer sur la photo et la déplacer avec la souris
+> 
+> La barre de boutons de zoom sur le haut de la page permet d'ajuster l'affichage :
+> * ![img.png](zoom_in.png) : agrandir la photo
+> * ![img_1.png](zoom_out.png) : rétrécir la photo
+> * ![img_2.png](zoom_fit.png) : ajuster la photo à l'écran et la repositionner au centre (:sparkles: bien utile si l'on perd la photo de vue)
+> * ![img.png](zoom_1-1.png) : afficher la photo en taille réelle
+
+Maintenant au travail !
+
+---
+
+## Étape 2 : positioner la règle
+Cette étape permet au logiciel de déterminer l'échelle de la photo.
+
+**Déplacer la ligne jaune à l'aide des 2 "poignées"** (petits carrés blancs) à chacune de ses extrémités afin de 
+**couvrir 10cm de la règle**. 
+![](ruler_handles.png)
+
+Pour s'assurer que 10 centimètres sont bien couverts, **les petits points "détrompeurs" doivent tomber sur chaque centimètre**.
+
+![](ruler_pokayoke.png)
+
+Pour placer la règle avec plus de précision, utiliser le bouton ![Zoom règle](zoom_object.png) (en jaune ci-dessous).
+
+![](ruler_panel.png)
+
+Une fois la règle placée, **passer à l'étape suivante en appuyant sur le bouton "Terminé !"** (en vert ci-dessus).
+
+---
+
+## Étape 3 : positionner la boîte de Petri
+
+Tout comme la règle, **placer la boîte de Petri à l'aide des poignées**, et utiliser le bouton ![Zoom boîte de Petri](zoom_object.png)
+pour la placer avec précision.
+
+![Poignées de la boîte de Petri](petri_handles.png)
+
+>
+>
+> Au début on y va à tâtons, mais on prend vite le coup de main.
+>
+> 
+
+![](petri_panel.png)
+
+Une fois la boîte de Petri correctement positionnée, **passer à l'étape suivante en appuyant sur "C'est fini !"**
+
+---
+
+## Étape 4 : détourer le blob
+
+Lors de cette étape, **entourer d'une ligne jaune le blob** (dessiner en maintenant le bouton de la souris pressé).
+
+![](blob_draw.png)
+
+>
+> **Oh non !** Si près de la fin
+>
+> ![](https://i.giphy.com/media/JuFwy0zPzd6jC/giphy.webp)
+> ![](blob_scrambled.png)
+> 
+> Il est possible de revenir en arrière sur les derniers points du tracé avec le bouton  ![](blob_back_button.png)
+> 
+> ![](blob_back_panel.png)
+>
+
+Lorsque l'on a rejoint le point de départ marqué par un carré blanc, **le contour est terminé et colorié en jaune**.
+
+![Fini !](blob_closed.png)
+
+Le bouton  ![](blob_done.png) s'active et permet de **passer à l'étape suivante**.
+
+---
+
+### Étape 5 : Télécharger les résultats
+
+![](download_panel.png)
+
+**Télécharger les fichiers un à un** avec ![](download_button.png).
+
+Les fichiers sont stockés dans le répertoire "Téléchargements" du navigateur, **les transmettre par [la plateforme de dépôt de données](https://blob.cnrs.fr/)**.  
diff --git a/docs/blob_back_button.png b/docs/blob_back_button.png
new file mode 100644
index 0000000000000000000000000000000000000000..b7eafa85eb4dff5d7ae29c8f29d709c411df0979
Binary files /dev/null and b/docs/blob_back_button.png differ
diff --git a/docs/blob_back_panel.png b/docs/blob_back_panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..fea1de29da55a820082c457335db5270451000db
Binary files /dev/null and b/docs/blob_back_panel.png differ
diff --git a/docs/blob_closed.png b/docs/blob_closed.png
new file mode 100644
index 0000000000000000000000000000000000000000..cdd8601bd3df167c018e7923f203733ad7fa0a89
Binary files /dev/null and b/docs/blob_closed.png differ
diff --git a/docs/blob_done.png b/docs/blob_done.png
new file mode 100644
index 0000000000000000000000000000000000000000..5c371b091f7ee966a54d4026c2d9e59f279e5805
Binary files /dev/null and b/docs/blob_done.png differ
diff --git a/docs/blob_draw.png b/docs/blob_draw.png
new file mode 100644
index 0000000000000000000000000000000000000000..074d1e0c2c59302a4f4e9c951fbfdf4fb1af67d6
Binary files /dev/null and b/docs/blob_draw.png differ
diff --git a/docs/blob_scrambled.png b/docs/blob_scrambled.png
new file mode 100644
index 0000000000000000000000000000000000000000..37ac7bb214f75c0588281b979554404127f43308
Binary files /dev/null and b/docs/blob_scrambled.png differ
diff --git a/docs/download_button.png b/docs/download_button.png
new file mode 100644
index 0000000000000000000000000000000000000000..190f7514fad34b492bb98728894722e81e9551be
Binary files /dev/null and b/docs/download_button.png differ
diff --git a/docs/download_panel.png b/docs/download_panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..cde7960a2b029609ea3af5a6b5e5e31f45e30387
Binary files /dev/null and b/docs/download_panel.png differ
diff --git a/docs/file_panel.png b/docs/file_panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..72e9defe8e14374831e0ab3a7e1fadad237fe448
Binary files /dev/null and b/docs/file_panel.png differ
diff --git a/docs/petri_handles.png b/docs/petri_handles.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d1f2ae8184a4e5f41f79b0795d8fdbf172bd875
Binary files /dev/null and b/docs/petri_handles.png differ
diff --git a/docs/petri_panel.png b/docs/petri_panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..a503abd73fc6f6410cb09628a9618ed8792b758a
Binary files /dev/null and b/docs/petri_panel.png differ
diff --git a/docs/ruler_handles.png b/docs/ruler_handles.png
new file mode 100644
index 0000000000000000000000000000000000000000..417ae30716dc6f16d09ff28df57ff4c0ebe35637
Binary files /dev/null and b/docs/ruler_handles.png differ
diff --git a/docs/ruler_panel.png b/docs/ruler_panel.png
new file mode 100644
index 0000000000000000000000000000000000000000..e72765f14b8aa57ea69dbb8255301edfbe27fa34
Binary files /dev/null and b/docs/ruler_panel.png differ
diff --git a/docs/ruler_pokayoke.png b/docs/ruler_pokayoke.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b9c6a27264c35f05155981c96126779df43d958
Binary files /dev/null and b/docs/ruler_pokayoke.png differ
diff --git a/docs/zoom_1-1.png b/docs/zoom_1-1.png
new file mode 100644
index 0000000000000000000000000000000000000000..644df083fed358a56c9789d90303d7c71e7fd81a
Binary files /dev/null and b/docs/zoom_1-1.png differ
diff --git a/docs/zoom_fit.png b/docs/zoom_fit.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5c70fe9a32f9bf7548205e1fb312335ec1c7353
Binary files /dev/null and b/docs/zoom_fit.png differ
diff --git a/docs/zoom_in.png b/docs/zoom_in.png
new file mode 100644
index 0000000000000000000000000000000000000000..7240e97f33405a87aebaf4fd5e1328317b6193cf
Binary files /dev/null and b/docs/zoom_in.png differ
diff --git a/docs/zoom_object.png b/docs/zoom_object.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0404507f798f79fb1453bf4509f7854d9ff6c24
Binary files /dev/null and b/docs/zoom_object.png differ
diff --git a/docs/zoom_out.png b/docs/zoom_out.png
new file mode 100644
index 0000000000000000000000000000000000000000..faca9d2616e29384cda3b306f49542fef8ebd8aa
Binary files /dev/null and b/docs/zoom_out.png differ