Refactor tool catalog into documentation layout

DESIGN_SYSTEM.md

@@ -267,7 +267,26 @@ Style courant :
 - pas de hover sur les panneaux de lecture ;
 - implementation via le mixin `gold-panel-frame` dans `website/src/styles/_mixins.scss`.
 
-## 10. Boutons
+## 10. Catalogue Documentation
+
+La page catalogue des outils utilise un layout de documentation.
+
+Regles :
+
+- hero court, puis contenu principal en deux colonnes sur desktop ;
+- sommaire a gauche en panneau sticky, avec categories puis liens d'outils de la categorie active ;
+- une seule categorie d'usage est affichee a droite a la fois ;
+- la categorie active commence par un mini-hero descriptif, sans compteur decoratif ;
+- chaque fiche commence par le titre, l'icone, le badge de categorie et une description directe de l'outil ;
+- l'exemple interactif reste visible en permanence et centre horizontalement ;
+- les reperes de boutons propres a l'outil sont places a gauche de l'exemple, puis empiles au-dessus sur mobile ;
+- les reperes sont groupes par categorie de controles de l'outil, avec apercu visuel du bouton et label court ;
+- les descriptions de reperes sont reservees aux comportements non evidents, par exemple un bouton qui agit sur toute la ligne ou une action de drag & drop ;
+- les fonctionnalites detaillees et formats d'import texte sont presentes sous l'exemple dans un panneau repliable pour ne pas alourdir la lecture avant manipulation ;
+- les controles propres au catalogue, comme la reinitialisation d'une demo, ne sont pas documentes comme fonctionnalites de l'outil ;
+- sur mobile, le sommaire devient un bloc normal place avant les fiches, sans position sticky.
+
+## 11. Boutons
 
 ### Primary