mermaid.md

@@ -72,11 +72,36 @@ flowchart LR
 :key: Les mots clefs pour les styles sont : 
 - classDef : définit le style pour une classe `classDef green fill:#9f6,stroke:#333,stroke-width:2px`
 - class: affecte une classe à des id `class sq,e green`
-- style : crée et affecte à la volée `style S3 color:#f66`
+- style : crée et affecte à la volée un style pour un objet `style S3 color:#f66`
 - `:::` : affecte une classe à la création de l'objet `S1(("((brass))")):::brass;`
 - linkstyle i : définit un style  pour le lien numéro i (de 0 à N)
 - linkstyle i,j,k : définit un style  pour les liens numéro i,j,k :warning: pas d'espace entre les chiffres et les virgules
 
+```mermaid
+flowchart LR
+   id1("classDef style1 fill:#f9f,stroke:#333")
+   id11("id11")
+   id12("id12")
+    
+   id13(("id13:::style1")):::style1
+
+   id2("classDef style2 fill:#bbf,stroke:#f66,color:#fff, défini mais non utilisé") 
+
+   id3["style défini en fin de script juste pour ce noeud <br> style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray: 1,1"]
+
+   id1-->  |style affecté en fin de script avec <br> class style1 id1,id11,id12| id11
+   id1-->  |style affecté par la même ligne| id12
+   id1 -.->  |style affecté à la création du noeud|id13
+  
+classDef style1 fill:#f9f,stroke:#333,stroke-width:4px
+classDef style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5,5 
+%%class id1 style1 ;  
+style id3 fill:#ff0,stroke:#f82,stroke-width:4px,color:#66f,stroke-dasharray: 1,1
+class id1,id11,id12 style1
+
+linkStyle 0,1 stroke:blue,stroke-width:2px,color:red;
+```
+
 #### code des couleurs : couleurs nommées et hexa sur 3 'chiffres', et astuces pour les visualiser
 :rainbow: Les couleurs peuvent être nommées  ou définies en hexadécimal sur 3 chiffres, en anglais red/green/blue (rgb) et en français rouge/vert/bleu (rvb). Le code `#rvb` correspond à `#rrvvbb` codé  sur 6.
 Les 16 "chiffres" de la base hexadécimale vont de 0 à f.
@@ -95,7 +120,7 @@ Utilisons-les ici pour présenter le principe du code :
 
 - couleurs complémentaires à Rouge, Vert et Bleu = `#0FF`,  `#F0F`,  `#FF0`
 
-- variations sur deux axes, motif xvx:
+- exemple de 'nuancier' avec variations sur deux axes, motif xvx:
 -  `#020` , `#222` , `#424` , `#828` ,  `#a2a` ,  `#c2c`, `#e2e`
 -  `#040` , `#242` , `#444` , `#848` ,  `#a4a` ,  `#c4c`, `#e4e`
 -  `#060` , `#262` , `#464` , `#868` ,  `#a6a` ,  `#c6c`, `#e6e`
@@ -105,14 +130,12 @@ Utilisons-les ici pour présenter le principe du code :
 -  `#0e0` , `#2e2` , `#4e4` , `#8e8` ,  `#aea` ,  `#cec`, `#eee`
 -  `#0f0` , `#2f2` , `#4f4` , `#8f8` ,  `#afa` ,  `#cfc`, `#efe`
 
-#### Exemple de colorchips 
-  -  `#080` , `#282` , `#484` , `#888` ,  `#a8a` ,  `#c8c`, `#e8e`
-  -  `#5fc` ,  `#5ef`, `#58a`
-  -  `#66f` , `#6f6` 
-  -  `#9f6`
-  -  `#bbf`
-  -  `#c97` , `#c55` ,`#c5c`
-  -  `#ff1`, `#f0d` , `#fcc`, `#fa0`, `#f88` , `#f66` , `#f96`
+#### Exemple de colorchips pour utilisation 
+  -  `#6f6` , `#9f6`,`#080` , `#282` , `#484`  
+  -  `#5fc` ,  `#5ef`, `#66f` ,`#58a`  
+  -  `#a8a` ,  `#c8c`, `#e8e`, `#bbf`,`#c97` , `#c55` 
+  -  `#c5c`, `#f0d` , `#fcc`
+  -  `#ff1`, `#fa0`, `#f88` , `#f66` , `#f96`
 
 
 ##### Autres astuces pour trouver des palettes ou tester une couleur
@@ -122,11 +145,20 @@ Utilisons-les ici pour présenter le principe du code :
 ![Capture_d_écran_ColorPickerWriter](uploads/fe1ea6dacc7d5b2c54455a54de6dabc5/Capture_d_écran_ColorPickerWriter.png)
 
 - l'éditeur mermaid, soit en ligne, https://mermaid-js.github.io/mermaid-live-editor/ soit dans une page markdown.
+
+`classDef mon_style1 fill:#f9f,stroke:#333,stroke-width:4px `
+`classDef mon_style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5,5`
+
 ```mermaid
 flowchart LR
-   id1("fill:#f9f,stroke:#333")-->id2("fill:#bbf,stroke:#f66",color:#fff")
-    style id1 fill:#f9f,stroke:#333,stroke-width:4px
-    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+   id1("mon_style1 affecté avec :::"):::mon_style1
+   id2("mon_style2 affecté avec class")
+      
+classDef mon_style1 fill:#f9f,stroke:#333,stroke-width:4px
+classDef mon_style2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5,5 
+
+class id2 mon_style2
+
 ```
 
 
@@ -314,8 +346,6 @@ graph TB
   end 
   %% SideBar --> Pages
 
-
-  
 classDef blue fill:#58a;
 classDef brass fill:#c97;
 classDef Ao_green fill:#080;