docs: the picture comes before the button

Founder rule: the illustration always sits above "Install from your browser".
A page should show the thing before it asks you to install it — the render is
what tells you whether you want the box at all.

TigerScale and TigerPOD had it the other way round: buttons under the intro,
picture further down. TigerSpool and Tiger Studio were already right. All four
product pages now open on their illustration, in both languages.

Author: BenGlut

docs/products/tigerpod.md

@@ -8,6 +8,10 @@ A free, open-source 3D-printable stand holding **two** USB NFC readers **facing
 each other**: place a spool, it identifies itself in Tiger Studio; place a blank
 chip, encode it. As natural as tapping a phone, but hands-free on the desktop.
 
+<img src="../assets/tigerpod-grey.png" width="480" alt="A TigerPOD on a desk, a red filament spool resting on it" />
+
+*Put the spool down; it introduces itself.*
+
 <div class="ts-cta">
 <a class="ts-cta-primary" href="https://tigersystem.io/tigerpod">Get a TigerPOD</a>
 <a href="https://makerworld.com/fr/models/1289152-tigerpod-for-openspool-tigertag-rfid-filament#profileId-1318958">Print it — free STL</a>
@@ -17,9 +21,6 @@ chip, encode it. As natural as tapping a phone, but hands-free on the desktop.
 <a href="https://github.com/TigerTag-Project/TigerPOD"><img src="../assets/icons/github.svg" alt="" /> Sources</a>
 </div>
 
-<img src="../assets/tigerpod-grey.png" width="480" alt="A TigerPOD on a desk, a red filament spool resting on it" />
-
-*Put the spool down; it introduces itself.*
 
 ## Why two readers, facing each other
 

docs/products/tigerscale.md

@@ -6,6 +6,12 @@
 spool on the open-source ESP32 scale and the live weight flows straight into
 your inventory — no manual entry, no shaking the spool next to your ear.
 
+<img src="../assets/tigerscale-v3.webp" width="480" alt="A TigerScale V3 with a spool resting on it, its screen showing the weight, the filament it recognised and how much is left" />
+
+*The spool goes on, and the scale already knows what it is: the chip gives the
+brand, the material and the colour, the load cell gives the grams. Nothing
+typed, nothing guessed.*
+
 <div class="ts-cta ts-cta--hero">
 <a class="ts-cta-primary" href="https://tigertag-project.github.io/Tiger-Scale-V3/">Install from your browser</a>
 </div>
@@ -20,11 +26,6 @@ your inventory — no manual entry, no shaking the spool next to your ear.
 > *left*.** Together they make the inventory actually true: identity from
 > [TigerTag](./tigertag.md), live quantity from TigerScale.
 
-<img src="../assets/tigerscale-v3.webp" width="480" alt="A TigerScale V3 with a spool resting on it, its screen showing the weight, the filament it recognised and how much is left" />
-
-*The spool goes on, and the scale already knows what it is: the chip gives the
-brand, the material and the colour, the load cell gives the grams. Nothing
-typed, nothing guessed.*
 
 ## TigerScale V3 — the current generation
 

i18n/fr/products/tigerpod.md

@@ -1,5 +1,5 @@
 ---
-sourceHash: 2d1ee57c457b28ee9b81225286da42eea243969063ebffc037dd98ebf1b175fa
+sourceHash: 6fbb56a78285184413e7aa07bc55e881d16be6ba2a102f42337a3a0a09637ee9
 sourcePath: docs/products/tigerpod.md
 ---
 
@@ -9,6 +9,10 @@ sourcePath: docs/products/tigerpod.md
 
 **Le premier « lecteur CD » pour bobines de filament intelligentes.** TigerPOD
 pose un scanner de bobines sur votre bureau — et c'est vous qui l'imprimez.
+<img src="../assets/tigerpod-grey.png" width="480" alt="Un TigerPOD sur un bureau, une bobine de filament rouge posée dessus" />
+
+*On pose la bobine ; elle se présente d'elle-même.*
+
 <div class="ts-cta">
 <a class="ts-cta-primary" href="https://tigersystem.io/tigerpod">Obtenir un TigerPOD</a>
 <a href="https://makerworld.com/fr/models/1289152-tigerpod-for-openspool-tigertag-rfid-filament#profileId-1318958">L'imprimer — STL gratuit</a>
@@ -23,9 +27,6 @@ lecteurs NFC USB **face à face** : posez une bobine, elle se présente dans Tig
 Studio ; posez une puce vierge, encodez-la. Aussi naturel que d'approcher un
 téléphone, mais mains libres sur le bureau.
 
-<img src="../assets/tigerpod-grey.png" width="480" alt="Un TigerPOD sur un bureau, une bobine de filament rouge posée dessus" />
-
-*On pose la bobine ; elle se présente d'elle-même.*
 
 ## Pourquoi deux lecteurs, face à face
 

i18n/fr/products/tigerscale.md

@@ -1,5 +1,5 @@
 ---
-sourceHash: 86cf9e1f2ee53c824cd2698825b997c3d3b714101c76d72ec9335e62b38d367d
+sourceHash: b7ae6d6d22dd6018a90d8d2b1a76fba0e5eca8f36eb88077de357dfa32ece126
 sourcePath: docs/products/tigerscale.md
 ---
 
@@ -12,6 +12,12 @@ Posez une bobine sur cette balance ESP32 open source et le poids en direct
 part droit dans votre inventaire — aucune saisie manuelle, plus besoin de
 secouer la bobine près de son oreille.
 
+<img src="../assets/tigerscale-v3.webp" width="480" alt="Une TigerScale V3 avec une bobine posée dessus, son écran affichant le poids, le filament reconnu et ce qu'il en reste" />
+
+*On pose la bobine, et la balance sait déjà ce que c'est : la puce donne la
+marque, la matière et la couleur, la cellule de charge donne les grammes. Rien
+de saisi, rien de deviné.*
+
 <div class="ts-cta ts-cta--hero">
 <a class="ts-cta-primary" href="https://tigertag-project.github.io/Tiger-Scale-V3/">Installer depuis le navigateur</a>
 </div>
@@ -26,11 +32,6 @@ secouer la bobine près de son oreille.
 > *reste*.** Ensemble, ils rendent l'inventaire réellement juste : l'identité
 > vient de [TigerTag](./tigertag.md), la quantité en direct de TigerScale.
 
-<img src="../assets/tigerscale-v3.webp" width="480" alt="Une TigerScale V3 avec une bobine posée dessus, son écran affichant le poids, le filament reconnu et ce qu'il en reste" />
-
-*On pose la bobine, et la balance sait déjà ce que c'est : la puce donne la
-marque, la matière et la couleur, la cellule de charge donne les grammes. Rien
-de saisi, rien de deviné.*
 
 ## TigerScale V3 — la génération actuelle