Récupération du cours SVG

2025-10-30 13:08:21 +01:00
commit aae4193595
171 changed files with 15661 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,249 @@
+---
+layout: layouts/page.njk
+title: SVG
+date: Last Modified
+---
+
+> ***Objectif :*** Concevoir des éléments graphiques redimensionnables sans perte de qualité. Interagir avec les propriétés graphiques. Animer les éléments.
+{.objectif}
+
+## Image matricielle / vectorielle
+
+L'**image matricielle** ou bitmap est le type d'image la plus utilisée. Elle est constituée d'une grille (matrice) de millions de points de couleur. Chaque point, élément de l'image est appelé pixel (picture element). Il est défini par sa propre couleur indépendamment des autres pixels qui l'entoure. L'image matricielle est utilisée de préférence en photographie car elle rend parfaitement les millers de nuance de couleur.
+
+Avantages :
+- réalisme des images (couleurs, ombres, nuances, dégradés, flous)
+- fidelité par rapport à la scène originale
+- palette de couleur très étendue
+- format par défaut des appareils photos et scanners
+
+Inconvénients :
+- Perte de qualité lors du redimensionnement
+- Approximation au pixel près des éléments géométriques
+- Poids du fichier constitué de millions d'éléménts (pixels).
+
+L'**image vectorielle**, quand à elle, est utilisé dans les dessins ou les illustrations. L'image est constituée de courbes, de lignes et de formes géométriques. Le rendu de l'illustration est calculé à chaque affichage par le navigateur.
+
+Avantages :
+- Redimensionnement infini
+- Précision des éléments géométriques
+- Poids du fichier réduit même pour de grandes surface d'affichage (pour une illustration simple)
+- Modification des éléments de l'illustration par programmation (changement de couleur, animation)
+- Sous sélection de parties de l'illustration
+
+Inconvénients :
+- Difficulté décrire des scènes complexes, réelles
+- Poids du fichier croissant avant le détail de l'image
+- Calcul de rendu à chaque affichage
+
+<div style="display:flex; justify-content: space-between;">
+<figure>
+  <img src="wasp.png" width="350" height="215">
+  <figcaption>image matricielle jpg<br>photo réaliste<br>11 ko</figcaption>
+</figure>
+<figure>
+  <img src="wasp.svg" width="350" height="215">
+  <figcaption>image vectorielle<br>illustration<br>212 ko</figcaption>
+</figure>
+</div>
+
+<div style="display:flex; justify-content: space-between;">
+<figure>
+  <img src="wasp-illustration.svg" width="350" height="215">
+  <figcaption>image vectorielle<br>illustration<br>79 ko</figcaption>
+</figure>
+<figure>
+  <img src="wasp-simple.svg" width="350" height="215">
+  <figcaption>image vectorielle<br>illustration<br>5 ko</figcaption>
+</figure>
+</div>
+
+### Mise à l'échelle
+
+<div style="display:flex; justify-content: space-between;">
+<figure>
+  <img src="mexico.png" width="265" height="240">
+  <figcaption>image matricielle<br>png 66ko</figcaption>
+</figure>
+<figure>
+  <img src="mexico.svg" width="265" height="240">
+  <figcaption>image vectorielle<br>158ko</figcaption>
+</figure>
+</div>
+
+<div style="display:flex; justify-content: space-between;">
+<figure>
+  <img src="mexico-1400.png" width="300" height="300">
+  <figcaption>image matricielle x 14</figcaption>
+</figure>
+<figure>
+  <img src="mexico.svg#svgView(viewBox(421, 189, 21, 21))" width="300" height="300">
+  <figcaption>image vectorielle x 14</figcaption>
+</figure>
+</div>
+
+## Programmation procédurale / descriptive
+
+La **programmation procédurale** est une séquence d'appels à des fonctions permettant d'obtenir le résultat attendu.
+
+L'interface de programmation Canvas (API) ajouté à l'HTML5 permet de dessiner via un programme JavaScript. Le développeur définit précisément, dans le code du programme, chacune des étapes à exécuter par le navigateur pour aboutir au résultat.
+
+> Programation **procédurale** ou impérative = **Comment**
+{.definition}
+
+```javascript
+var ctx = document.getElementById("dessin").getContext("2d");
+
+ctx.fillStyle = '#0039a6';
+ctx.fillRect(0, 0, 50, 100);
+
+ctx.fillStyle = '#d72b1f';
+ctx.fillRect(0, 50, 150, 50);
+
+ctx.fillStyle = '#fff';
+ctx.beginPath();
+ctx.moveTo(36.8882, 21.1373);
+ctx.lineTo(17.6527, 35.1127);
+ctx.lineTo(25.0000, 12.5000);
+ctx.lineTo(32.3473, 35.1127);
+ctx.lineTo(13.1118, 21.1373);
+ctx.fill();
+```
+<canvas id="dessin"></canvas>
+<script>
+var ctx = document.getElementById("dessin").getContext("2d");
+ctx.fillStyle = '#0039a6';
+ctx.fillRect(0, 0, 50, 100);
+ctx.fillStyle = '#d72b1f';
+ctx.fillRect(0, 50, 150, 50);
+ctx.fillStyle = '#fff';
+ctx.beginPath();
+ctx.moveTo(36.8882000, 21.1373000);
+ctx.lineTo(17.6527000, 35.1127000);
+ctx.lineTo(25.0000000, 12.5000000);
+ctx.lineTo(32.3473000, 35.1127000);
+ctx.lineTo(13.1118000, 21.1373000);
+ctx.fill();
+</script>
+
+La **programmation descriptive** décrit à l'aide de mots clés (balises, attribut, propriétés) le résultat final souhaité. Plutôt que d’énoncer les différentes étapes à mettre en œuvre, un moteur d'interprétation se charge d'appeler automatiquement les fonctions nécessaires à la composition de l'image.
+La programmation déclarative se concentre directement sur l’objectif à atteindre.
+
+> Programation **déclarative** ou descriptive = **Quoi**
+{.definition}
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewbox="0 0 1500 1000">
+<rect width="1500" height="1000" fill="#fff"/>
+<rect width="500" height="1000"  fill="#0039a6"/>
+<rect x="0" y="500" width="1500" height="500" fill="#d72b1f"/>
+<path d="M368.882 211.373L176.527 351.127 250 125l73.473 226.127-192.355-139.754" fill="#fff"/>
+</svg>
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="100" viewbox="0 0 1500 1000">
+<rect width="1500" height="1000" fill="#fff"/>
+<rect width="500" height="1000"  fill="#0039a6"/>
+<rect x="0" y="500" width="1500" height="500" fill="#d72b1f"/>
+<path d="M368.882 211.373L176.527 351.127 250 125l73.473 226.127-192.355-139.754" fill="#fff"/>
+</svg>
+
+## SVG : Scalable Vector Graphics
+
+Les fichiers svg Scalable Vector Graphics (en français « graphique vectoriel adaptable ») sont des fichiers texte formaté en xml. Ils sont valides et bien formés. Nous pouvons utiliser un éditeur de texte pour créer des illustrations.
+
+
+1- Installer l'extension SVG de *jock* pour Visual Studio Code.
+
+2- Créer un document SVG (xml). Puis cliquer sur l'icône de prévisualition en haut à droite.
+
+```svg
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+</svg>
+```
+
+3- Tracer un cercle de rayon 30 pixels dont le centre est situé à x = 150px et y = 75px. Remplir ce cercle avec la couleur orange
+
+```svg
+<circle cx="150" cy="75" r="30" fill="orange" />
+```
+
+Notez que comme pour tout document **xml valide**, les balises doivent être fermées ou auto fermées par une barre finale `/>`
+
+4- Ajouter une ligne depuis dont les extrémités 1 et 2 sont situées aux coordonnées 150/45 et 150/20. Cette ligne a une épaisseur de 6 px, elle est de couleur orange et les extrémités sont arrondies.
+
+```svg
+<line x1="150" y1="45" x2="150" y2="20"
+  stroke-width="6" stroke="orange" stroke-linecap="round" />
+```
+
+5- Dupliquer cetee ligne et appliquer une transformation pour effecuer une rotation de 45° en prenant comme centre de rotation, le centre du cercle (150/75)
+
+```svg
+<line x1="150" y1="45" x2="150" y2="20"
+  stroke-width="6" stroke="orange" stroke-linecap="round"
+  transform="rotate(45 150 75)" />
+```
+6- Recommencez l'opération et ajouter des lignes tout les 45° autour du cercle
+
+7- Créer un groupe d'éléments `g` et placez y toutes les lignes
+
+```svg
+<g>
+...
+</g>
+```
+
+
+8- Ajouter une animation de transformation à l'intérieur du groupe. La transformation éffecue une rotation de 360° en 8 secondes de manière linéaire. La rotation a pour origine le centre du cercle (150/75).
+
+```css
+<animateTransform attributeName="transform"
+  attributeType="XML"
+  type="rotate"
+  from="0 150 75"
+  to="360 150 75"
+  dur="8s"
+  repeatCount="indefinite"/>
+```
+
+
+<svg xmlns="http://www.w3.org/2000/svg">
+  <circle cx="150" cy="75" r="20" fill="orange" />
+  <g>
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(90 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(45 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(135 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+    transform="rotate(180 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(225 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(270 150 75)" />
+    <line stroke="orange" x1="150"  y1="45" x2="150" y2="20"
+      stroke-linecap="round" stroke-width="6"
+      transform="rotate(315 150 75)" />
+    <animateTransform attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        from="0 150 75"
+        to="360 150 75"
+        dur="8s"
+        repeatCount="indefinite"/>
+  </g>
+</svg>
+
+Et voilà votre première animation SVG.
+Maintenant regardons plus en détail les [éléments](formes) SVG
--- a/animation/coeur.svg
+++ b/animation/coeur.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="500"
+   height="250"
+   version="1.1"
+   id="svg839"
+   sodipodi:docname="coeur.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
+  <metadata
+     id="metadata845">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs843" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     id="namedview841"
+     showgrid="false"
+     inkscape:zoom="2.46"
+     inkscape:cx="250"
+     inkscape:cy="125"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg839" />
+  <path
+     d="M 208.2973,14.715129 C 185.39768,14.65422 164.52772,28.889805 154.73861,51.247982 143.08285,23.886964 115.30037,9.0531113 88.093707,15.664365 60.887043,22.275619 41.664912,48.531651 41.983458,78.647627 c 0,66.976923 112.348652,-21.158101 112.348652,-21.158101 0,0 113.16163,88.135024 113.16163,21.158101 0,-35.308942 -26.50315,-63.932494 -59.19644,-63.932498 z"
+     id="path837"
+     inkscape:connector-curvature="0"
+     style="fill:#3ed124"
+     sodipodi:nodetypes="ccsccsc">
+    <path
+       d="M 50,150     C 100,50 225,100 350,150     Z"
+       fill="#3ed124"
+       id="path831" />
+    <line
+       x1="50"
+       y1="150"
+       x2="100"
+       y2="50"
+       stroke="#f00000"
+       stroke-width="3"
+       id="line833" />
+    <line
+       x1="350"
+       y1="150"
+       x2="225"
+       y2="100"
+       stroke="#f00000"
+       stroke-width="3"
+       id="line835" />
+  </path>
+</svg>
--- a/animation/index.md
+++ b/animation/index.md
@@ -0,0 +1,174 @@
+---
+layout: layouts/page.njk
+title: Animation
+date: Last Modified
+---
+
+Il exite plusieurs méthodes pour animer des éléments SVG.
+
+### Javascript
+Il est possible d'agir avec du javascript sur les propriétés des éléments. Il est nécessaire d'utiliser des librairies tierces pour faciliter la programmation des animations (Comme JQuery par exemple). Cette méthode n'est pas la plus simple, ni la plus rapide à mettre en oeuvre.
+
+### CSS
+Les animations en CSS ont l'avantage de pouvoir être utilisées sur n'importe quel élement d'une page html. C'est la méthode la plus utilisée car elle est versatile et elle est la seule à pouvoir être utilisée sur des éléments aussi bien html que SVG.
+
+### SMIL
+
+Le SMIL (Synchronized Multimedia Integration Language) est un langage de description au format xml Il définit des balises pour synchroniser, animer, mettre en page et établir des transitions sur des éléments multimédias tels que du texte, des images, de la vidéo, de l'audio. Le SMIL était le format d'échange des messages multimédias MMS (Multimedia Messaging Service) qui est un équivalent vidéo et image du service de message court (SMS : Short Message Service).
+
+Le langage SMIL n'est plus guère utilisé de manière autonome, il a été intégré au format SVG.
+
+Pourtant très simple il n'est pas aussi utilisée que les animations CSS, pourtant certaines animation ne peuvent s'effectuer qu'avec SMIL.
+
+
+## Animation d'attribut
+
+la balise animate prend plusieurs paramètres pour effectuer l'opération
+
+`attributeName` : l'attribut pris en compte\
+`from` : valeur de départ\
+`to` : valeur d'arrivée\
+`values`: la liste des valeurs successives de la propriété à animer, si il ya plus de 2 valeurs et que les balises `from` et `to` sont insuffisantes
+
+### minutage
+`begin` : début de l'animation\
+`end` : fin de l'animation\
+`dur` : durée de l'animation\
+`min` : durée minimale (dans le cas où la durée de l'animation est calculée à partir d'autres éléments)\
+`max` : durée maximale\
+`restart` : indique quand l'animation peut être rejouée : `always` (toujours), `whenNotActive` (quand la forme n'est pas en cours d'une autre animation) ou `never` (jamais)\
+`repeatCount` : Le nombre de fois que l'animation doit se répéter ou `indefinite` pour une animation infinie\
+`repeatDur` : la durée totale en comptant toutes les répétitions\
+`fill` : état final de l'animation : `freeze` garde l'animation dans son état finale ou `remove` retourne à l'état initial.
+
+###
+`calcMode` :  `discrete`, `linear`, `paced` ou `spline` défini comment sont calculés les points intermédiare de l'animation, l'accélération de celle-ci
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="340px" height="140px">
+<circle r="50" cx="60" cy="60" fill="red">
+<animate
+    attributeName="fill"
+    values="green;orange;red;green"
+    dur="10s"
+    calcMode="discrete"
+    repeatCount="indefinite"
+/>
+</circle>
+<text x="60" y="130" text-anchor="middle">discrete</text>
+<circle r="50" cx="200" cy="60" fill="red">
+<animate
+    attributeName="fill"
+    values="green;orange;red;green"
+    dur="10s"
+    calcMode="linear"
+    repeatCount="indefinite"
+/>
+</circle>
+<text x="200" y="130" text-anchor="middle">linear</text>
+</svg>
+
+### interaction
+
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120px" height="120px">
+<rect x="10" y="10" width="100" height="100" fill="#3ed124">
+    <animate attributeName="rx" values="0;30;0" dur="5s" repeatCount="indefinite"
+    onplaying="console.log('pmaying')"
+    onprogress="console.log('p')"
+    ontimeupdate="console.log('d')"
+    onplay="console.log('c')"
+     onbegin="console.log('begin')"
+      onend="console.log('end')"
+       onrepeat="console.log('repeat')"
+    />
+</rect>
+</svg>
+
+```svg
+<rect x="10" y="10" width="100" height="100" rx="5" ry="5" fill="3ed124">
+<animate
+    attributeName="rx"
+    values="0;30;0"
+    dur="5s"
+    repeatCount="indefinite"
+/>
+</rect>
+```
+
+La balise animate est incluse dans la balise de la forme à animer.
+
+
+## Animation de forme (Morphing)
+
+L'animation de forme n'est qu'une simple animation d'attribut. Seulement dans ce cas la propriété qui est animée est la propriété `d` d'une balise `path`.
+
+Il est important que tous les chemins de l'animation possède le même nombre de poins, sinon l'animation ne peut pas être calculée.
+
+Dessiner un chemin à l'aide de la balise path, dessiner un 2e chemin avec un nombre de point identique, puis un troisième, quatrième ....
+
+```svg
+<animate
+    attributeName="d"
+    attributeType="XML"
+    values=" ; ; ; ;"
+/>
+```
+
+```svg
+<animate
+    attributeName="d"
+    attributeType="XML"
+    from=" "
+    to=" "
+/>
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="250px" viewBox="0 0 500 250">
+<path id="p1"
+    d="M 100 100"
+    stroke="red" fill="none"
+    stroke-width="2" >
+<animate xlink:href="#p1"
+    attributeName="d"
+    attributeType="XML"
+    values="M 208.2973,14.715129 A 59.083692,63.810728 0 0 0 154.73861,51.247982 59.083692,63.810728 0 0 0 41.983458,78.647627 c 0,66.976923 112.755152,155.264663 112.755152,155.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 59.196446,63.932505 0 0 0 208.2973,14.715129 Z;
+    M 8.2973,14.715129 A 59.083692,63.810728 0 0 0 14.73861,51.247982 59.083692,63.810728 0 0 0 41.983458,78.647627 c 100,66.976923 112.755152,155.264663 112.755152,155.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 59.196446,63.932505 0 0 0 208.2973,14.715129 Z;M 208.2973,14.715129 A 90.083692,63.810728 0 0 0 154.73861,51.247982 59.083692,63.810728 0 0 0 72.983458,78.647627 c 0,66.976923 112.755152,155.264663 112.755152,135.264663 0,0 112.75513,-88.28774 112.75513,-155.264663 A 0.196446,63.932505 0 0 0 208.2973,14.715129 Z"
+    dur="10s"
+    repeatCount="indefinite" />
+        </path>
+</svg>
+
+## Animation de déplacement
+
+L'animation de déplacement permet de déplacer une forme suivant un chemin
+
+```svg
+<animateMotion dur="10s"
+    repeatCount="indefinite"
+    rotate="auto"
+    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+```
+
+Dans le cas d'un chemin deja existant
+
+```svg
+<animateMotion dur="10s" repeatCount="indefinite">
+  <mpath href="#cheminexistant"/>
+</animateMotion>
+```
+
+## Animation de transformation
+
+
+
+
+
+https://la-cascade.io/guide-des-animations-svg/
+
+https://css-tricks.com/guide-svg-animations-smil/
+
+SMIL
+: Synchronized Multimedia Integration Language
+
+MMS
+: Multimedia Messaging Service
--- a/animation/motion/bee
+++ b/animation/motion/bee
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
+<defs>
+<symbol id="bee" viewBox="0 0 510 510" preserveAspectRatio="xMidYMid">
+	<g>
+   <g fill="#2C2F38" id="svg_2">
+    <path d="m83.292,-123.495c-2.777,-0.005 -5.391,-1.315 -7.058,-3.536c-1.667,-2.222 -2.193,-5.097 -1.421,-7.765l24.013,-82.448c0.738,-3.031 0.242,-6.231 -1.379,-8.897c-1.548,-2.476 -4.036,-4.217 -6.892,-4.823l-28.759,-4.487c-3.119,-0.484 -5.743,-2.596 -6.881,-5.541s-0.616,-6.273 1.368,-8.728c1.984,-2.455 5.128,-3.664 8.246,-3.171l29.306,4.59c7.715,1.536 14.453,6.19 18.621,12.862c4.184,6.818 5.416,15.044 3.414,22.789l-24.108,82.793c-1.097,3.766 -4.547,6.358 -8.47,6.362z" id="svg_3"/>
+    <path d="m246.184,-43.258c-4.343,-0.006 -8.036,-3.171 -8.707,-7.461l-4.59,-29.306c-0.69,-2.648 -2.386,-4.921 -4.728,-6.336c-2.759,-1.649 -6.074,-2.09 -9.168,-1.22l-82.091,23.849c-3.03,0.883 -6.301,0.08 -8.579,-2.104c-2.278,-2.184 -3.217,-5.418 -2.462,-8.483c0.754,-3.064 3.087,-5.493 6.119,-6.37l82.362,-23.923c7.801,-2.142 16.139,-0.984 23.06,3.203c6.567,4.029 11.2,10.568 12.823,18.099l4.694,29.858c0.397,2.55 -0.341,5.147 -2.02,7.107c-1.679,1.961 -4.131,3.088 -6.713,3.087l0,0z" id="svg_4"/>
+   </g>
+   <g>
+    <path d="m232.866,158.896c-1.059,34.957 -22.157,60.557 -49.699,77.241c-23.837,15.965 -53.708,20.037 -80.949,11.034c18.68,-7.865 33.345,-23.008 40.607,-41.931c2.408,-6.231 4.096,-12.718 5.032,-19.332c11.299,-75.211 -49.523,-150.334 -105.754,-183.261c-7.668,-5.099 -15.726,-9.585 -24.099,-13.418c10.112,0.483 20.175,1.722 30.102,3.708c6.533,0.971 13.241,2.207 20.039,3.884c8.642,1.933 17.161,4.38 25.512,7.327c3.354,1.148 6.797,2.383 10.152,3.708c57.997,22.687 114.317,67.266 127.117,129.148c1.432,7.205 2.083,14.545 1.94,21.892z" fill="#D1D4D1" id="svg_6"/>
+    <path d="m147.857,185.908c-0.935,6.615 -2.624,13.101 -5.032,19.332c-7.262,18.923 -21.927,34.066 -40.607,41.931c-7.61,3.403 -15.617,5.835 -23.834,7.239c-62.676,11.299 -91.719,-37.606 -103.724,-69.385c-3.221,-8.215 -5.732,-16.691 -7.503,-25.335c0,0 -27.542,-81.302 19.244,-143.978l0.177,-0.177c9.973,-7.574 18.854,-16.485 26.394,-26.483c0.177,-0.088 0.265,-0.265 0.441,-0.353c0.706,-0.53 2.295,-0.265 4.326,0.53c0.088,-0.088 0.088,0 0.177,0l0.088,0c8.373,3.833 16.431,8.319 24.099,13.418c56.231,32.927 117.053,108.05 105.754,183.261z" fill="#BDC3C7" id="svg_7"/>
+    <path d="m12.971,-10.947c-7.54,9.998 -16.422,18.909 -26.394,26.483c7.514,-10.021 16.399,-18.936 26.394,-26.483z" fill="#BDC3C7" id="svg_8"/>
+    <path d="m13.324,-11.389c-0.088,0.177 -0.265,0.265 -0.353,0.441c-9.995,7.547 -18.881,16.462 -26.394,26.483l-0.177,0.177c-62.588,46.786 -143.978,19.244 -143.978,19.244c-8.578,-1.766 -16.994,-4.246 -25.159,-7.415c-31.691,-12.005 -80.86,-41.048 -69.561,-103.901c1.404,-8.189 3.836,-16.167 7.239,-23.746l0,-0.088c7.918,-18.644 23.043,-33.291 41.931,-40.607c6.231,-2.409 12.718,-4.097 19.332,-5.032c75.211,-11.299 150.334,49.523 183.172,105.754c5.099,7.668 9.585,15.726 13.418,24.099l0,0.177c0.795,2.119 1.06,3.708 0.53,4.414z" fill="#BDC3C7" id="svg_9"/>
+    <path d="m12.795,-15.979c-3.833,-8.373 -8.319,-16.431 -13.418,-24.099c-32.839,-56.232 -107.962,-117.054 -183.173,-105.755c-6.615,0.935 -13.101,2.623 -19.332,5.032c-18.888,7.316 -34.013,21.963 -41.931,40.607c-9.015,-27.24 -4.943,-57.116 11.034,-80.949c16.596,-27.63 42.284,-48.728 77.153,-49.788c7.382,-0.087 14.751,0.623 21.981,2.119c61.97,12.712 106.549,69.12 129.059,127.206l0,0.088c1.324,3.354 2.56,6.621 3.708,9.975l0.088,0.088c2.947,8.351 5.394,16.87 7.327,25.512c1.623,6.547 2.891,13.178 3.796,19.862c2.068,9.914 3.308,19.983 3.708,30.102z" fill="#D1D4D1" id="svg_10"/>
+   </g>
+   <g fill="#2C2F38">
+    <path d="m-185.895,218.244c-25.011,4.739 -47.931,17.131 -65.592,35.464c18.331,-17.667 30.721,-40.591 35.458,-65.605l30.134,30.141z" id="svg_12"/>
+    <path d="m-56.679,206.211l0,0.088c-20.079,11.867 -42.061,20.169 -64.971,24.541c-3.392,-27.186 -15.793,-52.453 -35.222,-71.768c-19.292,-19.462 -44.57,-31.868 -71.768,-35.222c4.407,-22.955 12.77,-44.969 24.717,-65.059c37.145,5.402 71.531,22.719 97.986,49.346c26.656,26.46 43.95,60.893 49.258,98.074z" id="svg_13"/>
+    <path d="m68.144,-3.179c-6.797,-1.677 -13.506,-2.913 -20.039,-3.884c-9.927,-1.985 -19.99,-3.224 -30.102,-3.708l-0.088,0c-0.088,0 -0.088,-0.088 -0.177,0c-2.03,-0.794 -3.619,-1.059 -4.326,-0.53c-0.177,0.088 -0.265,0.265 -0.441,0.353c0.088,-0.177 0.265,-0.265 0.353,-0.441c0.53,-0.706 0.265,-2.295 -0.53,-4.414l0,-0.177c-0.4,-10.119 -1.64,-20.188 -3.708,-30.102c-0.905,-6.684 -2.173,-13.315 -3.796,-19.862l0.088,0c32.308,5.119 57.646,30.458 62.766,62.765l0,0z" id="svg_14"/>
+   </g>
+   <g fill="#F0C419">
+    <path d="m146.268,-72.122c-0.971,24.806 -5.738,50.229 -19.245,63.735c-6.704,6.76 -14.567,12.262 -23.216,16.243c-3.354,-1.324 -6.797,-2.56 -10.152,-3.708c-8.351,-2.947 -16.87,-5.394 -25.512,-7.327c-5.118,-32.308 -30.457,-57.646 -62.764,-62.764l-0.088,0c-1.933,-8.642 -4.38,-17.161 -7.327,-25.512l-0.088,-0.088c-1.148,-3.354 -2.383,-6.621 -3.708,-9.975l0,-0.088c4.088,-8.657 9.643,-16.542 16.419,-23.305c13.506,-13.506 38.93,-18.273 63.735,-19.156c17.061,-0.36 34.123,0.643 51.023,3.001c9.427,0.805 17.046,8.021 18.361,17.39c2.137,17.097 2.993,34.33 2.562,51.554z" id="svg_16"/>
+    <path d="m-121.65,230.84c-34.428,6.179 -65.589,-0.265 -86.157,-20.833c-20.568,-20.568 -27.012,-51.641 -20.833,-86.157c27.198,3.354 52.476,15.76 71.768,35.222c19.43,19.316 31.83,44.582 35.222,71.768z" id="svg_17"/>
+    <path d="m-32.844,159.69c1.772,8.644 4.282,17.12 7.503,25.335l-0.088,0c-9.91,7.808 -20.352,14.917 -31.25,21.274l0,-0.088c-5.309,-37.181 -22.603,-71.615 -49.258,-98.074c-26.455,-26.628 -60.842,-43.945 -97.986,-49.346c6.274,-10.929 13.356,-21.375 21.186,-31.25c8.165,3.169 16.58,5.65 25.159,7.415c0,0 81.39,27.542 143.978,-19.244c-46.786,62.676 -19.244,143.978 -19.244,143.978z" id="svg_18"/>
+   </g>
+  </g>
+</symbol>
+</defs>
+<path fill="none" stroke="lightgrey"
+  d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+<use href="#bee" width="30" height="30">
+<!--
+  <animateMotion dur="10s"
+    repeatCount="indefinite"
+    rotate="0"
+    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+		-->
+</use>
+</svg>
--- a/animation/motion/bee.svg
+++ b/animation/motion/bee.svg
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
+<defs>
+<symbol id="bee" viewBox="0 0 510 510" preserveAspectRatio="xMidYMid">
+	<g>
+        <g>
+            <path d="M335.543,132.618c-2.781,-0.054 -5.377,-1.412 -7.008,-3.666c-1.631,-2.255 -2.107,-5.144 -1.287,-7.803l25.494,-82.166c0.793,-3.023 0.352,-6.237 -1.225,-8.936c-1.508,-2.507 -3.969,-4.294 -6.82,-4.951l-28.728,-4.998c-3.116,-0.539 -5.707,-2.7 -6.796,-5.67c-1.088,-2.97 -0.507,-6.294 1.523,-8.719c2.03,-2.424 5.201,-3.58 8.315,-3.032l29.275,5.11c7.701,1.674 14.369,6.453 18.427,13.209c4.072,6.903 5.162,15.164 3.022,22.887l-25.596,82.51c-1.165,3.753 -4.666,6.289 -8.596,6.225Z" style="fill:#2c2f38;fill-rule:nonzero;"/>
+            <path d="M497.305,215.837c-4.35,-0.082 -7.994,-3.317 -8.591,-7.626l-4.086,-29.435c-0.644,-2.665 -2.304,-4.971 -4.625,-6.429c-2.734,-1.7 -6.047,-2.2 -9.162,-1.383l-82.645,22.454c-3.05,0.831 -6.313,-0.03 -8.557,-2.258c-2.243,-2.227 -3.127,-5.483 -2.317,-8.54c0.809,-3.056 3.188,-5.448 6.24,-6.274l82.918,-22.523c7.852,-2.009 16.183,-0.703 23.043,3.612c6.507,4.151 11.034,10.781 12.528,18.353l4.18,29.99c0.353,2.562 -0.432,5.15 -2.148,7.084c-1.716,1.935 -4.192,3.021 -6.778,2.975Z" style="fill:#2c2f38;fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M480.43,418.096c-1.672,34.997 -23.253,60.271 -51.133,76.501c-24.156,15.575 -54.148,19.132 -81.277,9.637c18.849,-7.551 33.803,-22.463 41.408,-41.291c2.521,-6.199 4.325,-12.667 5.379,-19.276c12.632,-75.139 -46.978,-151.451 -102.727,-185.417c-7.592,-5.241 -15.585,-9.876 -23.905,-13.861c10.121,0.66 20.179,2.077 30.088,4.24c6.527,1.087 13.224,2.442 20.004,4.241c8.623,2.087 17.113,4.687 25.427,7.785c3.339,1.209 6.767,2.506 10.104,3.892c57.697,23.739 113.332,69.377 125.072,131.586c1.308,7.243 1.832,14.606 1.56,21.963Z" style="fill:#d1d4d1;fill-rule:nonzero;"/>
+            <path d="M394.807,443.667c-1.053,6.61 -2.858,13.077 -5.379,19.276c-7.605,18.828 -22.559,33.74 -41.408,41.291c-7.682,3.276 -15.745,5.572 -24,6.835c-62.979,10.222 -91.215,-39.273 -102.685,-71.315c-3.082,-8.285 -5.449,-16.819 -7.072,-25.508c-0,-0 -26.167,-81.92 21.793,-143.883l0.181,-0.174c10.122,-7.412 19.173,-16.183 26.901,-26.066c0.179,-0.085 0.27,-0.261 0.448,-0.346c0.716,-0.518 2.303,-0.225 4.324,0.607c0.089,-0.087 0.088,0.001 0.177,0.003l0.088,0.002c8.32,3.985 16.313,8.62 23.905,13.861c55.749,33.966 115.359,110.278 102.727,185.417Z" style="fill:#bdc3c7;fill-rule:nonzero;"/>
+            <path d="M263.137,244.124c-7.728,9.883 -16.78,18.654 -26.901,26.066c7.701,-9.906 16.757,-18.681 26.901,-26.066Z" style="fill:#bdc3c7;fill-rule:nonzero;"/>
+            <path d="M263.498,243.688c-0.091,0.175 -0.27,0.261 -0.361,0.435c-10.144,7.385 -19.201,16.16 -26.901,26.066l-0.181,0.174c-63.51,45.77 -144.555,16.759 -144.555,16.759c-8.561,-1.919 -16.948,-4.55 -25.071,-7.867c-31.534,-12.579 -80.278,-42.531 -67.861,-105.291c1.549,-8.178 4.125,-16.127 7.666,-23.659l0.002,-0.088c8.257,-18.537 23.663,-32.944 42.711,-39.942c6.283,-2.304 12.811,-3.882 19.452,-4.703c75.535,-10.003 149.72,52.235 181.629,109.134c4.974,7.77 9.327,15.92 13.02,24.374l-0.004,0.177c0.76,2.136 0.997,3.733 0.454,4.431Z" style="fill:#bdc3c7;fill-rule:nonzero;"/>
+            <path d="M263.049,239.081c-3.693,-8.454 -8.046,-16.604 -13.02,-24.374c-31.91,-56.9 -106.095,-119.138 -181.63,-109.135c-6.642,0.821 -13.169,2.399 -19.452,4.703c-19.048,6.998 -34.454,21.405 -42.711,39.942c-8.554,-27.444 -3.953,-57.298 12.468,-80.892c17.106,-27.386 43.206,-48.07 78.152,-48.522c7.396,0.042 14.765,0.882 21.981,2.507c61.851,13.816 105.518,71.098 127.051,129.675l-0.002,0.088c1.268,3.383 2.449,6.677 3.54,10.057l0.086,0.089c2.806,8.417 5.108,16.993 6.894,25.683c1.511,6.586 2.665,13.251 3.455,19.962c1.898,9.966 2.964,20.074 3.188,30.217Z" style="fill:#d1d4d1;fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M59.931,470.222c-25.136,4.309 -48.311,16.321 -66.322,34.376c18.671,-17.376 31.482,-40.122 36.665,-65.095l29.657,30.719Z" style="fill:#2c2f38;fill-rule:nonzero;"/>
+            <path d="M189.574,460.428l-0.002,0.088c-20.32,11.536 -42.484,19.467 -65.509,23.446c-2.922,-27.291 -14.902,-52.817 -34.026,-72.504c-18.984,-19.832 -44.087,-32.701 -71.272,-36.536c4.816,-22.916 13.578,-44.821 25.896,-64.735c37.113,6.06 71.253,24.007 97.287,51.141c26.238,26.971 42.959,61.764 47.626,99.1Z" style="fill:#2c2f38;fill-rule:nonzero;"/>
+            <path d="M318.266,252.87c-6.779,-1.799 -13.477,-3.154 -20.004,-4.241c-9.909,-2.162 -19.967,-3.579 -30.088,-4.24l-0.088,-0.002c-0.088,-0.002 -0.087,-0.09 -0.177,-0.003c-2.02,-0.831 -3.607,-1.124 -4.324,-0.607c-0.179,0.085 -0.27,0.261 -0.448,0.346c0.091,-0.176 0.27,-0.261 0.361,-0.435c0.543,-0.698 0.306,-2.295 -0.454,-4.431l0.004,-0.177c-0.224,-10.143 -1.29,-20.251 -3.188,-30.217c-0.79,-6.711 -1.944,-13.376 -3.455,-19.962l0.088,0.002c32.272,5.692 57.21,31.516 61.773,63.967Z" style="fill:#2c2f38;fill-rule:nonzero;"/>
+        </g>
+        <g>
+            <path d="M397.726,185.178c-1.406,24.83 -6.625,50.212 -20.391,63.505c-6.834,6.654 -14.806,12.027 -23.539,15.864c-3.336,-1.385 -6.764,-2.683 -10.104,-3.892c-8.314,-3.098 -16.804,-5.698 -25.427,-7.785c-4.561,-32.452 -29.5,-58.275 -61.771,-63.966l-0.088,-0.002c-1.786,-8.69 -4.088,-17.266 -6.894,-25.683l-0.086,-0.089c-1.091,-3.38 -2.271,-6.674 -3.54,-10.057l0.002,-0.088c4.246,-8.6 9.948,-16.401 16.853,-23.057c13.765,-13.292 39.315,-17.623 64.177,-18.074c17.096,-0.062 34.169,1.241 51.056,3.898c9.429,0.972 16.934,8.333 18.087,17.741c1.842,17.163 2.398,34.439 1.665,51.685Z" style="fill:#f0c419;fill-rule:nonzero;"/>
+            <path d="M124.063,483.962c-34.593,5.587 -65.694,-1.412 -85.937,-22.374c-20.242,-20.962 -26.154,-52.2 -19.361,-86.666c27.185,3.835 52.288,16.704 71.272,36.536c19.125,19.688 31.104,45.213 34.026,72.504Z" style="fill:#f0c419;fill-rule:nonzero;"/>
+            <path d="M214.262,414.246c1.624,8.689 3.99,17.223 7.072,25.508l-0.088,-0.001c-10.063,7.647 -20.647,14.586 -31.674,20.763l0.002,-0.088c-4.668,-37.336 -21.389,-72.13 -47.626,-99.1c-26.034,-27.135 -60.175,-45.082 -97.287,-51.141c6.475,-10.838 13.752,-21.178 21.768,-30.932c8.123,3.317 16.509,5.949 25.071,7.867c0,0 81.045,29.011 144.555,-16.759c-47.96,61.963 -21.793,143.883 -21.793,143.883Z" style="fill:#f0c419;fill-rule:nonzero;"/>
+        </g>
+    </g>
+</symbol>
+</defs>
+<path fill="none" stroke="lightgrey"
+  d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+<use href="#bee" width="30" height="30" transform="translate(-15 -15)">
+  <animateMotion dur="10s"
+    repeatCount="indefinite"
+    rotate="auto"
+    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
+</use>
+</svg>
--- a/bibliotheque/index.md
+++ b/bibliotheque/index.md
@@ -0,0 +1,127 @@
+---
+layout: layouts/page.njk
+title: Bibliothèque
+date: Last Modified
+---
+
+## Réutilisation des éléments
+
+Chaque objet référencé avec un identifiant `id` peut être dupliquer et réutiliser n'importe où dans le document à l'aide de la balise `<use>`.
+
+<svg>
+  <circle id="cercle" fill="#3ed124" cx="50" cy="50" r="25" />
+  <use href="#cercle" x="75" y="0">
+</svg>
+
+```svg
+<svg>
+  <circle id="cercle" fill="#3ed124" cx="50" cy="50" r="25" />
+  ...
+  <use href="#cercle" x="75" y="0">
+</svg>
+```
+
+Cete méthode n'est pas une bonne pratique car le code est difficilement lisibile et maintenable.
+
+## Bibliothèque d'éléments
+
+À la place, nous pouvons stoker les éléments réutilisables dans une bibliothèque avec la balise `<defs>`. Les éléments ne sont alors plus affichés directement.
+
+Lorsque l'on utilise le SVG en mode inline incorporé directement dans la page HTML, les éléments de la bibliothèque peuvent être utilisés dans le canvas ou dans un autre élément SVG de la même page.
+
+```svg
+<!-- Cette illustration SVG ne sera pas visible dans la page -->
+<svg width="0" height="0">
+<defs>
+  <line id="ligneverte" stroke="#3ed124" x1="-50" y1="0" x2="50" y2="0"
+    stroke-linecap="round" stroke-width="12" />
+</defs>
+</svg>
+...
+<!-- Une autre illustration plus loin dans la page HTML -->
+<svg>
+  <use href="#ligneverte" x="100" y="50"/>
+</svg>
+```
+
+<svg width="0" height="0">
+<defs>
+  <pattern id="tenthGrid" width="25" height="25" patternUnits="userSpaceOnUse">
+    <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
+  </pattern>
+  <pattern id="fiftygrid" width="50" height="50" patternUnits="userSpaceOnUse">
+    <rect width="50" height="50" fill="url(#tenthGrid)"/>
+    <path d="M 50 0 L 0 0 0 50" fill="none" stroke="gray" stroke-width="1"/>
+  </pattern>
+  <symbol id="grid">
+    <rect width="100%" height="100%" fill="url(#fiftygrid)"/>
+    <path d="M 500 0 L 500 250 0 250" fill="none" stroke="gray" stroke-width="1"/>
+  </symbol>
+  <line id="ligneverte" stroke="#3ed124" x1="-50" y1="0" x2="50" y2="0"
+    stroke-linecap="round" stroke-width="12" />
+</defs>
+</svg>
+
+<svg>
+<use href="#grid"/>
+<use href="#ligneverte" x="100" y="50"/>
+</svg>
+
+La bibliothèque permet des stocker des formes mais aussi des dégradés, des motifs, des masques, des marqueurs etc. 
+
+### Symboles
+
+L'élément `symbol` permet de définir une nouvelle zone de dessin indépendante et qui sera utilisée comme modèle (template).
+
+<svg>
+<defs>
+<symbol id="etoile" viewBox="271 443 12240 12005">
+  <path d="M6760 12443 c-137 -26 -302 -163 -453 -375 -207 -293 -384 -645 -802
+    -1598 -347 -790 -486 -1070 -667 -1337 -211 -311 -357 -373 -878 -374 -303 0
+    -573 22 -1315 106 -310 36 -666 73 -930 97 -191 17 -792 17 -905 0 -359 -56
+    -525 -174 -538 -382 -7 -128 43 -265 161 -442 197 -294 514 -612 1317 -1323
+    955 -845 1247 -1174 1290 -1452 37 -234 -95 -656 -453 -1458 -364 -816 -430
+    -963 -490 -1110 -252 -611 -352 -998 -318 -1236 31 -222 145 -333 357 -346
+    311 -21 768 169 1699 704 749 431 885 508 1051 596 451 240 718 338 924 341
+    121 1 161 -10 310 -84 265 -133 574 -380 1300 -1040 1006 -916 1405 -1206
+    1752 -1276 102 -21 173 -13 255 27 103 50 160 135 204 304 21 81 23 111 23
+    315 0 125 -5 267 -12 320 -51 379 -107 674 -253 1335 -229 1034 -279 1327
+    -279 1647 0 162 16 260 55 346 101 221 462 490 1275 952 661 375 831 473 1005
+    578 739 446 1065 761 1065 1027 0 155 -96 273 -306 378 -300 150 -748 236
+    -1764 342 -1052 108 -1334 148 -1637 225 -387 100 -514 201 -648 515 -117 276
+    -211 629 -391 1482 -135 644 -212 973 -289 1237 -115 398 -240 668 -380 824
+    -94 105 -221 156 -335 135z"/>
+</symbol>
+</defs>
+<use href="#grid"/>
+<use href="#etoile" x="100" y="25" width="100" height="100" fill="#3ed124"/>
+</defs>
+</svg>
+
+
+```svg
+<svg>
+<defs>
+<symbol id="etoile" viewBox="271 443 12240 12005">
+  <path d="M6760 12443 c-137 -2 ..." />
+</symbol>
+</defs>
+.
+<use href="#etoile" x="100" y="25" width="100" height="100" fill="#3ed124"/>
+```
+
+L'intérêt du symbole est que l'on peut définir la [surface de travail](../zone) à l'aide de la propriété viewBox. Dans notre cas la zone commence à 271 px à gauche, 443 px en haut et fait 12240 px de largeur et 12005 px de hauteur !
+
+Lors de son utilisation dans l'illustration SVG la taille du symbole est mise à l'échelle pour ne faire plus que 100 px, sa position est définie à l'aide des propriété x et y, la couleur de remplissage est de la balise use est propagée au symbole.
+
+Attention un symbole appelé avec la balise `<use>` est affiché dans une zone shadow dom inaccessible au javascript et aux changements de style css.
+
+Les seules propriétés qui peuvent traverser après la création du shadow dom sont : les propriétés fill, stroke et color.
+
+la propriété css color doit être utilisée en svg avec la valeur `currentColor` par exemple `fill="currentColor"` la propriété color peut être utilisée soit pour le remplissage, soit pour le contour à condition d'utiliser la valeur currentColor
+
+![](shadow.png)
+
+Références
+- https://la-cascade.io/utiliser-svg-use/
+- https://caniuse.com/mdn-svg_elements_symbol
--- a/bibliotheque/shadow.png
+++ b/bibliotheque/shadow.png
--- a/couleur.md
+++ b/couleur.md
@@ -0,0 +1,162 @@
+---
+layout: layouts/page.njk
+title: Couleurs
+---
+<svg width="0" height="0">
+  <defs>
+    <pattern id="tenthGrid" width="25" height="25" patternUnits="userSpaceOnUse">
+      <path d="M 25 0 L 0 0 0 25" fill="none" stroke="gray" stroke-width="0.5"/>
+    </pattern>
+    <pattern id="fiftygrid" width="50" height="50" patternUnits="userSpaceOnUse">
+      <rect width="50" height="50" fill="url(#tenthGrid)"/>
+      <path d="M 50 0 L 0 0 0 50" fill="none" stroke="gray" stroke-width="1"/>
+    </pattern>
+    <symbol id="grid">
+      <rect width="100%" height="100%" fill="url(#fiftygrid)"/>
+      <path d="M 500 0 L 500 250 0 250" fill="none" stroke="gray" stroke-width="1"/>
+    </symbol>
+  </defs>
+</svg>
+
+## Couleurs simples
+
+Le SVG utilise le même système de couleur que les feuilles de style css à savoir les couleurs nommées (black, white, red, ...) les couleurs hexadécimale, les couleur rgb et hsl
+
+## Dégradé linéaire 
+
+Le gradient est défini à l'intérieur d'une zone d'1px de longueur. Une mise à l'échelle est opérée pour remplir ensuite la zone de remplissage.
+
+Trés souvent les coordonnées s'expriment en pourcentage
+
+<svg width="500" height="250">
+  <use href="#grid"/>
+  <defs>
+    <linearGradient id="degrade">
+		<stop offset="0" stop-color="red"/>
+		<stop offset="0.1357" stop-color="orange"/>
+		<stop offset="0.2959" stop-color="yellow"/>
+		<stop offset="0.4686" stop-color="green"/>
+		<stop offset="0.6501" stop-color="blue"/>
+		<stop offset="0.8364" stop-color="indigo"/>
+		<stop offset="1" stop-color="violet"/>
+	  </linearGradient>
+  </defs>
+    <rect x="50" y="50" width="400" height="150" fill="url(#degrade)" />
+</svg>
+
+```svg
+<defs>
+<linearGradient id="degrade">
+  <stop  offset="0" stop-color="red"/>
+  <stop  offset="0.1357" stop-color="orange"/>
+  <stop  offset="0.2959" stop-color="yellow"/>
+  <stop  offset="0.4686" stop-color="green"/>
+  <stop  offset="0.6501" stop-color="blue"/>
+  <stop  offset="0.8364" stop-color="indigo"/>
+  <stop  offset="1" stop-color="violet"/>
+</linearGradient>
+</defs>
+<rect ... fill="url(#degrade)" />
+```
+
+Les propriétés x1 y1 ; x2 y2 définissent un vecteur de direction pour le dégradé
+
+```svg
+<linearGradient id="degrade" x1="0" x2="1" y1="0" y2="1">
+``` 
+
+## Dégradé radial 
+
+Le dégradé se propage depuis le centre d'un cercle vers l'extérieur.
+
+<svg width="500" height="250">
+  <use href="#grid"/>
+  <defs>
+    <radialGradient id="degrade2">
+		<stop  offset="0" stop-color="red"/>
+		<stop  offset="0.5" stop-color="orange"/>
+    <stop  offset="1" stop-color="yellow"/>
+	  </radialGradient>
+  </defs>
+    <rect x="50" y="50" width="400" height="150" fill="url(#degrade2)" />
+</svg>
+
+```svg
+<defs>
+<radialGradient id="degrade2">
+  <stop offset="0" stop-color="red"/>
+  <stop offset="0.5" stop-color="orange"/>
+  <stop offset="1" stop-color="yellow"/>
+</radialGradient>
+</defs>
+<rect ... fill="url(#degrade2)" />
+</svg>
+```
+
+## gradientUnits
+
+`userSpaceOnUse` le dégradé s'étend sur toute la surface de l'illustration. La couleur à l'intérieur des objets dépend de leur position
+
+<svg width="550" height="250">
+<defs>
+  <linearGradient id="userSpaceOnUse" gradientUnits="userSpaceOnUse">
+		<stop  offset="0" style="stop-color:red"/>
+		<stop  offset="1" style="stop-color:green;"/>
+	</linearGradient>
+</defs>
+  <rect width="100" height="195" fill="url(#userSpaceOnUse)" />
+  <rect x="150" width="100" height="195" fill="url(#userSpaceOnUse)" />
+  <rect x="300" width="100" height="195" fill="url(#userSpaceOnUse)" />
+  <rect x="450" width="100" height="195" fill="url(#userSpaceOnUse)" />
+  <rect x=0 y="200" width="550" height="50" fill="url(#userSpaceOnUse)" />
+</svg>
+
+`objectBoundingBox` le dégradé s'etend dans les limites de l'objet
+
+<svg width="550" height="250">
+<defs>
+  <linearGradient id="objectBoundingBox" gradientUnits="objectBoundingBox">
+		<stop  offset="0" style="stop-color:red"/>
+		<stop  offset="1" style="stop-color:green;"/>
+	</linearGradient>
+</defs>
+  <rect width="100" height="195" fill="url(#objectBoundingBox)" />
+  <rect x="150" width="100" height="195" fill="url(#objectBoundingBox)" />
+  <rect x="300" width="100" height="195" fill="url(#objectBoundingBox)" />
+  <rect x="450" width="100" height="195" fill="url(#objectBoundingBox)" />
+</svg>
+
+## Motifs
+
+Pour le remplissage en plus de la couleur il est possible d'utliser un motif qui servira à remplir la forme
+
+<svg width="600" height="300">
+  <defs>
+    <pattern id="star" viewBox="271 443 12240 12005" width="0.2" height="0.2" x="0.13" y="0">
+  <path d="M6760 12443 c-137 -26 -302 -163 -453 -375 -207 -293 -384 -645 -802
+    -1598 -347 -790 -486 -1070 -667 -1337 -211 -311 -357 -373 -878 -374 -303 0
+    -573 22 -1315 106 -310 36 -666 73 -930 97 -191 17 -792 17 -905 0 -359 -56
+    -525 -174 -538 -382 -7 -128 43 -265 161 -442 197 -294 514 -612 1317 -1323
+    955 -845 1247 -1174 1290 -1452 37 -234 -95 -656 -453 -1458 -364 -816 -430
+    -963 -490 -1110 -252 -611 -352 -998 -318 -1236 31 -222 145 -333 357 -346
+    311 -21 768 169 1699 704 749 431 885 508 1051 596 451 240 718 338 924 341
+    121 1 161 -10 310 -84 265 -133 574 -380 1300 -1040 1006 -916 1405 -1206
+    1752 -1276 102 -21 173 -13 255 27 103 50 160 135 204 304 21 81 23 111 23
+    315 0 125 -5 267 -12 320 -51 379 -107 674 -253 1335 -229 1034 -279 1327
+    -279 1647 0 162 16 260 55 346 101 221 462 490 1275 952 661 375 831 473 1005
+    578 739 446 1065 761 1065 1027 0 155 -96 273 -306 378 -300 150 -748 236
+    -1764 342 -1052 108 -1334 148 -1637 225 -387 100 -514 201 -648 515 -117 276
+    -211 629 -391 1482 -135 644 -212 973 -289 1237 -115 398 -240 668 -380 824
+    -94 105 -221 156 -335 135z"/>
+    </pattern>
+  </defs>
+  <rect x="0"  y="0" width="250" height="200" fill="url(#star)"/>
+  <rect x="300"  y="0" width="250" height="200" stroke-width="20" stroke="url(#star)" fill="none"/>
+</svg>
+
+```svg
+<defs>
+  <pattern id="star" viewBox="271 443 12240 12005" width="0.2" height="0.2" x="0.13" y="0">
+  <path d="M6760 ..." /> 
+</pattern>
+```
--- a/découpe/index.md
+++ b/découpe/index.md
@@ -0,0 +1,111 @@
+---
+layout: layouts/page.njk
+title: Découpe et masquage
+---
+
+## Découpage
+
+Le découpage (clipping) agit comme un pochoir. les éléments sont découpés par les bords de la forme.
+
+L'élement clipPath est défini à l'intérieur d'une zone de définition. Il contient le tracé personalisé de ce qui va servir à découper.
+
+```svg
+<defs>
+  <clipPath id="pochoir">
+    <rect x="0" y="0" width="230" height="80" />
+  </clipPath>
+</defs>
+```
+Pour découper une illustration il faut faire référence à la définition du clipPath
+
+```svg
+<g clip-path="url(#pochoir)" />
+```
+
+## Découpages simples
+
+Lorsque le découpage est une forme simple il est possible d'utiliser des raccourcis.
+
+### Rectangle intérieur
+
+`inset` défini les marges enhaut à droite, en bas et à gauche d'un rectangle. Les marges sont exprimés en px ou en pourcentage.
+
+```svg
+<g clip-path="inset(5% 30px 50px 8%)">
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="260" viewBox="0 0 500 260">
+  <image x="20" y="3" href="panda.webp" height="250" clip-path="inset(5% 30px 50px 8%)" />
+  <rect x="20" y="3" width="375" height="250" stroke-width="5" stroke="red" fill="none" />
+</svg>
+
+
+### Cercle
+
+```svg
+<g clip-path="circle(30% at 45% 40%)">
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="260" viewBox="0 0 500 260">
+  <image x="20" y="3" href="panda.webp" height="250" clip-path="circle(30% at 45% 40%)" />
+  <rect x="20" y="3" width="375" height="250" stroke-width="5" stroke="red" fill="none" />
+</svg>
+
+### Ellipse
+
+```svg
+<g clip-path="ellipse(100px 60px at 45% 35%)">
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="260" viewBox="0 0 500 260">
+  <image x="20" y="3" href="panda.webp" height="250" clip-path="ellipse(100px 60px at 45% 35%)" />
+  <rect x="20" y="3" width="375" height="250" stroke-width="5" stroke="red" fill="none" />
+</svg>
+
+### Polygone
+
+```svg
+<g clip-path="polygon(175px 10px, 90% 70%, 20% 80%)">
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="260" viewBox="0 0 500 260">
+  <image x="20" y="3" href="panda.webp" height="250" clip-path="polygon(175px 10px, 90% 70%, 20% 80%)" />
+  <rect x="20" y="3" width="375" height="250" stroke-width="5" stroke="red" fill="none" />
+</svg>
+
+### Chemin
+
+```svg
+<g clip-path="path('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z'">
+```
+
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="260" viewBox="0 0 500 260">
+  <image x="20" y="3" href="panda.webp" height="250" clip-path="path('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z'" />
+  <rect x="20" y="3" width="375" height="250" stroke-width="5" stroke="red" fill="none" />
+</svg>
+
+[https://bennettfeely.com/clippy/](https://bennettfeely.com/clippy/)
+
+## Masquage
+
+Le masquage permet des effets plus fins. Les élements apparaissent progressivement en transparence suivant l'intensité de noir ou blanc de la forme.
+
+L'intérêt du masquage est d'utiliser des dégradés.
+
+```svg
+ <defs>
+ <linearGradient id="Gradient">
+    <stop offset="0" stop-color="white" stop-opacity="0" />
+    <stop offset="1" stop-color="white" stop-opacity="1" />
+</linearGradient>
+<mask id="masque">
+  <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
+</mask>
+ </defs>
+```
+
+Comme le découpage il faut faire référnce à la définition du masque
+
+```svg
+<g mask="url(#masque)" />
+```
--- a/découpe/panda.webp
+++ b/découpe/panda.webp
--- a/examen/chemical.svg
+++ b/examen/chemical.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="200" height="160" viewBox="0 0 51 40" xmlns="http://www.w3.org/2000/svg">
+  <g>
+    <path d="m 25.000998,4.417569 q 0,1.204709 -0.690338,1.915352 -0.690339,0.707259 -1.908584,0.707259 -1.214861,0 -1.9052,-0.707259 -0.690338,-0.710643 -0.690338,-1.915352 0,-1.214861 0.690338,-1.918736 0.690339,-0.707258 1.9052,-0.707258 1.211477,0 1.9052,0.707258 0.693722,0.703875 0.693722,1.918736 z M 23.278536,5.693342 Q 23.46804,5.463229 23.559409,5.1519 q 0.09137,-0.314713 0.09137,-0.737715 0,-0.453458 -0.104904,-0.771555 Q 23.44097,3.324533 23.27177,3.12826 23.099185,2.925219 22.872456,2.833851 q -0.223345,-0.09137 -0.466994,-0.09137 -0.247033,0 -0.466994,0.08798 -0.216577,0.08798 -0.399313,0.291025 -0.169201,0.189505 -0.27749,0.524522 -0.104904,0.331633 -0.104904,0.771555 0,0.450074 0.10152,0.768171 0.104905,0.314714 0.274105,0.51437 0.169201,0.199657 0.39593,0.29441 0.226729,0.09475 0.477146,0.09475 0.250417,0 0.477146,-0.09475 0.226729,-0.09814 0.39593,-0.301178 z" />
+    <path d="m 6.0336,36.1679 c 0,0.8031 -0.23012,1.4416 -0.69034,1.9153 -0.46023,0.4715 -1.09642,0.7073 -1.90859,0.7073 -0.8099,0 -1.44497,-0.2358 -1.9052,-0.7073 -0.46022,-0.4737 -0.690334,-1.1122 -0.690334,-1.9153 0,-0.8099 0.230114,-1.4495 0.690334,-1.9188 0.46023,-0.4715 1.0953,-0.7072 1.9052,-0.7072 0.80766,0 1.44272,0.2357 1.9052,0.7072 0.46249,0.4693 0.69373,1.1089 0.69373,1.9188 z m -1.72247,1.2758 c 0.12634,-0.1535 0.21996,-0.3339 0.28088,-0.5415 0.06091,-0.2098 0.09137,-0.4557 0.09137,-0.7377 0,-0.3023 -0.03497,-0.5595 -0.10491,-0.7716 C 4.50854,35.1809 4.41717,35.0094 4.30437,34.8786 4.18931,34.7432 4.05621,34.6451 3.90505,34.5842 3.75616,34.5232 3.60049,34.4928 3.43806,34.4928 c -0.16469,0 -0.32035,0.0293 -0.46699,0.088 -0.14439,0.0586 -0.27749,0.1556 -0.39932,0.291 -0.1128,0.1263 -0.20529,0.3012 -0.27749,0.5245 -0.06993,0.2211 -0.1049,0.4783 -0.1049,0.7716 0,0.3 0.03384,0.5561 0.10152,0.7681 0.06994,0.2099 0.1613,0.3813 0.2741,0.5144 0.1128,0.1331 0.24478,0.2313 0.39593,0.2944 0.15116,0.0632 0.31021,0.0948 0.47715,0.0948 0.16694,0 0.32599,-0.0316 0.47715,-0.0948 0.15115,-0.0654 0.28313,-0.1658 0.39593,-0.3012 z" />
+    <path d="m 20.507792,26.305676 1.186491,0.376204 q -0.272851,0.992188 -0.909505,1.47588 -0.63252,0.479557 -1.608172,0.479557 -1.207161,0 -1.984375,-0.822689 -0.777214,-0.826823 -0.777214,-2.257228 0,-1.513086 0.781348,-2.348178 0.781348,-0.839225 2.054656,-0.839225 1.112077,0 1.806608,0.657324 0.413412,0.388607 0.620118,1.116212 l -1.211296,0.289388 q -0.107487,-0.471289 -0.450619,-0.744141 -0.338997,-0.272852 -0.826823,-0.272852 -0.673861,0 -1.095541,0.483692 -0.417546,0.483691 -0.417546,1.56683 0,1.149284 0.413412,1.63711 0.413412,0.487826 1.07487,0.487826 0.487826,0 0.839226,-0.310059 0.3514,-0.310059 0.504362,-0.975651 z" />
+    <path d="M 22.748483,28.533964 V 22.47335 h 1.223698 v 2.385385 h 2.397788 V 22.47335 h 1.223698 v 6.060614 h -1.223698 v -2.649968 h -2.397788 v 2.649968 z" />
+  </g>
+  <g stroke-width="1.5" stroke="#000" fill="none">
+    <path d="M 6.9733452,33.412659 13.244533,29.795344" />
+    <path d="M 8.0355432,35.381701 14.306731,31.764386" />
+    <path d="m 45.982475,25.184051 -4.771276,6.15314" />
+    <path d="m 22.276053,14.916495 9.492472,5.118973 0.0497,10.38705 -8.746987,5.765061 -9.740963,-5.168675 -0.198795,-11.132531 z" />
+    <path d="m 34.014267,21.015128 v 8.645019" />
+    <path d="m 31.768525,20.035468 9.769737,-3.096852 7.309612,8.645019 -6.817617,8.293595 -10.212033,-3.454712 z" />
+    <path d="m 21.047772,8.243898 -0.07028,7.239325" />
+    <path d="m 23.756232,8.153026 v 7.309609" />
+  </g>
+</svg>
--- a/examen/co2.svg
+++ b/examen/co2.svg
--- a/examen/dust.svg
+++ b/examen/dust.svg
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:20.2046;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+      
+       cx="61.427711"
+       cy="58.34639"
+       r="2.9819276" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:20.2046;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="47.114456"
+       cy="72.560242"
+       r="2.9819276" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="13.804102"
+       cy="41.138439"
+       r="6.6599627" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="36.401459"
+       cy="12.943628"
+       r="6.6599627" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="30.519949"
+       cy="86.744881"
+       r="6.6599627" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="30.578447"
+       cy="61.888687"
+       rx="3.5114081"
+       ry="3.5114067" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="13.915663"
+       cy="101.48495"
+       rx="3.5114081"
+       ry="3.5114067" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="42.555859"
+       cy="39.424835"
+       rx="3.511409"
+       ry="3.5114086" />
+    <circle cx="67.391556" cy="32.552711" r="1.689759" />
+    <circle cx="68.28614"  cy="45.225906" r="0.99397588" />
+    <circle cx="9.7409639" cy="11.92771"  r="1.689759" />
+    <circle cx="28.8253"   cy="28.228914" r="1.689759" />
+    <circle cx="48.506023" cy="58.445786" r="1.689759" />
+    <circle cx="57.849396" cy="44.132534" r="1.689759" />
+    <circle cx="68.783134" cy="68.981934" r="1.689759" />
+    <circle cx="42.542168" cy="100.59036" r="1.689759" />
+    <circle cx="10.138554" cy="78.921684" r="1.689759" />
+    <circle cx="68.385536" cy="21.867472" r="0.99397588" />
+    <circle cx="73.554222" cy="56.259033" r="0.99397588" />
+    <circle cx="65.602409"
+       cy="79.518074"
+       r="0.99397588" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+
+       cx="87.469879"
+       cy="43.337349"
+       r="6.6599627" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       cx="75.54216" cy="88.662651" r="6.6599627" />
+    <circle cx="86.674698" cy="67.192772" r="2.9819276" />
+    <circle cx="60.036144" cy="14.313253" r="2.9819276" />
+    <circle cx="82.301201" cy="22.265059" r="2.9819276" />
+    <circle cx="14.710844" cy="61.626503" r="1.689759" />
+    <circle cx="86.674698" cy="77.530121" r="1.689759" />
+    <circle cx="52.481926" cy="87.469887" r="0.99397588" />
+    <circle cx="51.686745" cy="28.626505" r="0.99397588" />
+    <circle cx="30.614458" cy="52.879517" r="0.99397588" />
+    <circle cx="15.903614" cy="22.662649" r="0.99397588" />
+</svg>
--- a/examen/humidity.svg
+++ b/examen/humidity.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1260" height="1785" viewBox="0 0 1260 1785" xmlns="http://www.w3.org/2000/svg">
+  <path d="m 695.96646,1662.6513 c 37,-74 132,-228 252,-406 C 1216.9664,855.65125 1249.0708,759.63475 1248.9664,582.65125 1248.7458,208.87999 967.99454,7.1355249 637.14475,9.6334231 306.29496,12.131321 25.804761,209.82614 24.966461,592.65126 c -0.359,163.92342 168.725599,472.08794 284.999999,643.00004 171,250 229,343 286,462 l 41,85 z m -318,-711.00005 c -9,-8 -16,-20 -16,-25.99999 0,-7.00001 269,-365.00001 451,-600.00001 12,-15.99999 23,-18.99999 43,-14 45,11 33,45.00001 -57,162.00001 -46,59.99999 -149,195.99999 -231,301.99999 -81,105.00001 -153,192.00001 -161,192.00001 -7,0 -21,-7 -29,-16.00001 z m 339,-38.99999 c -90,-68.00001 -86,-199.00001 9,-269.00001 41,-30.99999 139,-29 185,3 37,27 70,90 71,136 0,50.00001 -40,117.00001 -85,143.00001 -55,31.99999 -129,27 -180,-13 z m -353,-322.00001 c -67,-50 -90,-131 -58,-206.99999 35,-83.00001 150,-120.00001 231,-74 46,25.99999 85,92.99999 85,145.99999 0,61.00001 -49,130.00001 -110,155 -30,13 -121,1.00001 -148,-20 z"/>
+  <path d="m 858.96646,855.65125 c 27,-13 47,-60 39,-93 -24,-96 -166,-80 -166,20 0,66 64,103 127,73 z"/>
+  <path d="m 470.42196,533.9497 c 46.7622,1.97139 67.1147,-59.02674 68.8647,-81.65174 1.75,-22.625 -13.8382,-81.80553 -77.4616,-83.54206 -63.6235,-1.73653 -89.8586,11.39535 -89.8586,83.89535 0,72.5 51.6932,79.32706 98.4555,81.29845 z"/>
+</svg>
--- a/examen/index.md
+++ b/examen/index.md
@@ -0,0 +1,48 @@
+---
+layout: layouts/page.njk
+title: Évaluation 1
+---
+
+> Concevoir une interface pour une centrale de mesure d'ambiance.
+{.objectif}
+
+![](panneau.png)
+
+### Ressources
+
+- <a href="chemical.svg" download>polluants chimiques</a>
+- <a href="co2.svg" download>co2</a>
+- <a href="dust.svg" download>poussière et allergènes uv</a>
+- <a href="humidity.svg" download>taux d'humidité</a>
+- <a href="sound.svg" download>niveau sonore</a>
+- <a href="temperature.svg" download>temperature</a>
+- <a href="uv.svg" download>exposition uv</a>
+
+### Énoncé
+
+1. Le panneau de contrôle est un **rectangle** de 300px de large est de 600px de haut. Les coins du panneau sont arrondis suivant un rayon de 10px.
+
+2. Le remplissage du panneau est effectué par un **dégradé** qui commence à 10% en couleur hsl 25 / 100% / 50% ; à 50% la couleur est hsl 0 / 95% / 45% ; à 90% la couleur hsl est 0 / 100% / 35%
+
+La direction du dégradé est en diagonal du coin en haut à droite au coin en bas à gauche 
+
+3. Un **titre** centré au milieu du panneau écrit en majuscule à 30px du haut. La police est de l'Arial de taille 20px. Le texte est écit en blanc. Un filtre ombre portée est ajoutée au texte. Les paramètres de l'ombre portée sont un déplacement en x et en y de 1px, l'opacité est de 30% et la déviation standard de 1px.
+
+4. Une **ligne arrondie** en bas du panneau part de x 0 / y 470 et rejoint l'autre côté en  x 300 / y 470 le point d'inflexion de la courbe quadratique est situé au milieu du panneau et 50px plus haut que les côtés. L'épaisseur du contour est de 3px, la couleur est blanche.
+
+5. Ajouter **2 icones** (humidité et co2)  dans une bibliothèque de définition
+
+6. Ajouter un **cercle** centré en dans le panneau et situé à 180px du haut.  Le cercle a un rayon de 90px et une épaisseur de 20px. La couleur de remplissage est blanc aavec une opacité de 50%
+
+Un deuxieme **cercle partiel** recouvre le premier cercle sont opacité est de 100%. L' origine est situé à -135°, la longeur de l'arc est de 150°
+
+Pour vous aider voici un tutoriel qui offre une solution approchante [https://css-tricks.com/building-progress-ring-quickly/](https://css-tricks.com/building-progress-ring-quickly/)
+
+7. Ajouter un **texte** dans le cerle de taille 60px
+
+8. Ajouter **deux petits cercle** en bas de page de rayon 30px, l'épaisseur du contour est de 7px l'opacité de 50% ajouter un **symbole** de la bibliotèque à l'intérieur des cercles. La taille du symbole est de 30px / 30px. Les cercles sont situés à 75px du bas du panneau
+
+9. Ajouter un **graphique** en barre pour chaque jour de la semaien (7 barres). Les barres sont aligné à 390 px du haut du panneau. Les barres ont une largeur de 15px elles sont espacées de 24 px et la première commence à 25.5px du bord gauche. Les hauteurs sont variables comprise en 35px et 60px;
+
+10. Ajouter dans chaque barre **l'initiale du jour** de la semaine (L M M J V S D) centré au milieu de la barre. La taille du texte est de 8px.
+
--- a/examen/panneau.png
+++ b/examen/panneau.png
--- a/examen/reponse.svg
+++ b/examen/reponse.svg
--- a/examen/sound.svg
+++ b/examen/sound.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="127" height="100" viewBox="0 0 127 100" xmlns="http://www.w3.org/2000/svg">
+  <path d="m 102.99079,25.517775 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m -100.9499989,8.5 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 31.49 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m 14.4199999,-8.5 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m 14.48,-9.42 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 v 67.34 c 0,2.08 -1.67,3.76 -3.72,3.76 -2.06,0 -3.72,-1.68 -3.72,-3.76 z m 14.36,-10.12 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 87.57 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m 43.27,28.04 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 31.49 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m -14.42,-8.5 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m -14.37,-9.42 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 v 67.34 c 0,2.08 -1.67,3.76 -3.72,3.76 -2.06,0 -3.72,-1.68 -3.72,-3.76 v -67.34 z m 57.689999,0 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 v 67.34 c 0,2.08 -1.67,3.76 -3.72,3.76 -2.06,0 -3.72,-1.68 -3.72,-3.76 z" />
+</svg>
--- a/examen/temperature.svg
+++ b/examen/temperature.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="96" height="236" viewBox="0 0 96 236" xmlns="http://www.w3.org/2000/svg">
+  <rect width="23.781258" height="87.047188" x="37.868927" y="61.541382" />
+  <path d="m 66.985927,151.79938 h 0.771 V 25.096376 c 0,-11.129 -9.023,-20.1520002 -20.153,-20.1520002 -11.13,0 -20.152,9.0230002 -20.152,20.1520002 V 151.79938 h 0.771 c -14.135,7.106 -23.8399999,21.73 -23.8399999,38.63 0,23.871 19.3509999,43.222 43.2219999,43.222 23.871,0 43.222,-19.351 43.222,-43.222 -0.001,-16.9 -9.706,-31.524 -23.841,-38.63 z m -30.361,19.218 c -1.844,0.942 -17.594,9.677 -10.484,29.58 0.929,2.601 -0.427,5.462 -3.027,6.391 -0.556,0.199 -1.123,0.293 -1.682,0.293 -2.054,0 -3.979,-1.275 -4.709,-3.319 -8.2109999,-22.987 6.505,-37.452 15.433,-41.89 2.474,-1.228 5.475,-0.22 6.703,2.252 1.225,2.466 0.225,5.458 -2.234,6.693 z m 1.244,-22.42881 V 27.002376 c 0,-5.368 4.367,-9.735 9.735,-9.735 5.368,0 9.735,4.367 9.735,9.735 V 148.58857 Z"/>
+</svg>
--- a/examen/uv.svg
+++ b/examen/uv.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="350" height="378" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3500 3780">
+  <path d="m1374.6996,20.4356c-2,8 -21,96 -41,195c-20,99 -45,207 -56,240c-36,112 -132,207 -242,240c-62,18 -169,19 -220.00002,0l-38,-13l8,41c4,23 8,74 8,113c0,61 -5,81 -38,147c-40,82 -90,133 -167,171c-63,32 -72,34 -337,61c-129,13 -236,25 -238,27c-1,2 77,73 174,159c195,172 229,218.00007 250,334.00007c21,111 -19,238 -101,321c-42,44 -42,48 9,59c46,9 143,75 176,118c16,21 40,63 55,95c23,49 27,70 27,147l-1,90.00004l-83,185c-46,102 -94,208 -107,237l-23,51l42,-13c450.00002,-148 470.00002,-152 586.00002,-116c118,37 222,145 252,261l12,49l44,-39c77,-67 125,-85 233,-85c109,0 160,18 228,79c25,23 111,150 224,329c115,183.99999 184,283.99999 185,271.99999c2,-11 19,-151 38,-311.99999c40,-340 52,-382 129,-458c76,-75 132,-99 236,-100c47,0 100,4 118,8l34,9l-8,-49c-24,-143 8,-247 105,-344c92,-92.00004 124,-102.00004 397,-129.00004c120,-11 232,-24 247,-28c27,-7 22,-12 -140,-155c-231,-203 -270,-267 -261,-426c6,-95 37,-168 104,-236.00007c37,-38 41,-47 26,-52c-61,-22 -87,-37 -133,-80c-28,-26 -63,-70 -77,-98c-24,-45 -27,-61 -27,-155c0,-84 4,-112 19,-140c10,-19 104,-173 207,-342c104,-168 189,-309 189,-311c0,-3 -145,58 -322,135c-178,77 -350,149 -383,160c-79,26 -172,20 -249,-17c-68,-32 -148,-117 -171,-182c-34,-96 -27,-91 -72,-50c-22,20 -67,49 -99,64c-51,24 -71,28 -154,28c-82,0 -103,-4 -151,-26c-83,-39 -124,-81 -262,-272c-171,-235 -155,-215 -161,-197zm524,825c152,14 359,108 500,227c131,111 252,305 302,484c32,115.00007 32,373.00007 0,489.00007c-74,269 -263,500.00004 -507,620.00004c-382,187 -826,109 -1121,-196.00004c-124,-129 -203,-271 -246.00002,-446c-30,-123 -31,-322 -1,-443.00007c87.00002,-345 337.00002,-609 670.00002,-705c92,-27 230,-45 298,-39c22,2 69,6 105,9z" />
+  <path d="m1101.6996,1688.43567c5,278 13,318 77,391c54,61 110,82 217,81c107,0 182,-35 230,-107c45,-68 53,-121 53,-372l0,-225.00007l-90,0l-90,0l0,231.00007c0,188 -3,237 -15,264c-35,72 -134,72 -173,1c-14,-26 -18,-69 -20,-269l-3,-237.00007l-96,0l-95,0l5,242.00007z" />
+  <path d="m1798.6996,1459.4356c0,3 24,81 54,173.00007c30,93 79,249 110,346l57,178l98,0l99,0l36,-103c20,-56 74,-214 120,-350l84,-248.00007l-100,3l-100,3l-59,200.00007c-32,110 -59,208 -59,217c0,10 -4,18 -10,18c-5,0 -10,-8 -11,-18c0,-9 -26,-107 -58,-217l-58,-200.00007l-101,-3c-56,-1 -102,-1 -102,1z" />
+</svg>
--- a/examen2/avion.svg
+++ b/examen2/avion.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="540" height="1122" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .body { fill:#fff; stroke: #666; }
+      .exit { fill:#666; stroke:none}
+      .motor{ fill:#f2f2f2; stroke: none; }
+      .wings { fill:#f2f2f2; stroke: none; }
+      .fret { fill:#800080 }
+      .glass { fill:#000; }
+      .nose { fill:none; stroke:#000; stroke-width:1px }
+      .closet { fill:#008080; stroke-width:1.08978; }
+      @media (prefers-color-scheme:dark) {
+        .body { fill:#333; stroke: #888; }
+        .exit { fill:#888; stroke:none}
+        .motor{ fill:#222; stroke: #444; }
+        .wings { fill:#222; stroke: #444; }
+        .fret { fill:#600060 }
+        .glass { fill:#000; }
+        .nose { fill:none; stroke:#000; stroke-width:1px }
+        .closet { fill:#006060; stroke-width:1.08978; }
+      }
+    </style>
+  </defs>
+  <g class="motor">
+    <path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-424.983 27.81)"/>
+    <path style="stroke-width:1.17754px" d="M424.983 321.926H578.19" transform="translate(-424.983 27.81)"/>
+    <path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-39.828 27.39)"/>
+    <path style="stroke-width:1.18px" d="M424.983 321.926H578.19" transform="translate(-39.828 27.39)"/>
+  </g>
+  <path class="wings" d="m353.383 421.355-312.89 1.69v139.894L352.864 564l152.813-.242V423.133z" />
+  <path class="body" d="M270.318.5c-16.4 0-51.1 76.9-81 181.7-1 4-1.5 8.1-1.5 12.2v579.7c0 4.1.5 8.1 1.5 12.1 23.735 93.102 44.226 177.891 59.99 232.075L73.06 1044.293l-.567 77.137 412.34-.352-1.031-76.07-187.166-26.635c13.412-54.18 30.992-139.019 54.682-232.174 1-4 1.5-8 1.5-12.1V194.5c0-4.2-.602-8.3-1.602-12.3C320.716 79 286.518.5 270.318.5Z"/>
+  <path class="nose" d="m234.722 52.646 70.463-.182"/>
+  <path class="glass" d="m178.214 145.202-.258 29.56c15.464-11.893 24.525-13.296 32.528-13.554 0-6.325.258-29.043.258-29.043-9.748-.26-21.445 4.62-32.528 13.037zm-31.231 82.92c1.576-31.27 10.327-63.27 28.66-80.503l.364 28.842c-8.253 11.314-16.287 32.621-18.62 51.66zm129.519 0c-1.577-31.27-10.328-63.27-28.66-80.503l-.365 28.842c8.253 11.314 16.288 32.621 18.62 51.66zm-31.232-82.92.259 29.56c-15.464-11.893-24.526-13.296-32.529-13.554 0-6.325-.258-29.043-.258-29.043 9.748-.26 21.446 4.62 32.529 13.037z" transform="translate(58.017 -29.5)"/>
+  <g class="exit">
+    <path d="m182.117 247.6 7-8.3h7.1l-7.1 8.3 7.1 8.3h-7.1z"/>
+    <path d="m192.317 247.6 7.1-8.3h7l-7 8.3 7 8.3h-7z"/>
+  </g>
+  <path class="closet" d="M286.217 212.6h61.3c.7 0 1.3.712 1.3 1.543v35.154c0 .832-.6 1.544-1.3 1.544h-61.3c-.7 0-1.3-.712-1.3-1.544v-35.154c.1-.95.6-1.544 1.3-1.544z"/>
+  <path class="fret" d="m348.116 685.2-155.4.6-.56 95.233 44.932 121.029 70.669.012 40.75-122.378z"/>
+</svg>
--- a/examen2/index.md
+++ b/examen2/index.md
@@ -0,0 +1,30 @@
+---
+layout: layouts/page.njk
+title: Évaluation 2
+---
+
+Un opérateur régional d'aviation vous demande de concevoir un système de réservation pour ses appareils.
+
+Vous avez à votre disposition :
+- L'illustration de l'<a href="avion.svg" download>avion</a> vide
+- L'illustration d'un <a href="siege.svg" download>siège</a>
+
+## Travail à faire
+
+1. Incorporer l'illustration de l'avion dans une page html.
+2. Ajouter le siège comme un symbole réutilisable de l'illustration.
+3. Modifier le symbole pour qu'il puisse être colorier avec 3 couleurs, une pour le contour, une pour l'assise (rect) et une pour le dossier (path)
+
+4. Créer 3 classes css pour représenter les 3 états des sièges : libre,
+réservé et occupé. Utiliser un générateur de nuances comme [material.io](https://material.io/resources/color/)
+
+5. Ajouter une zone située à (200px, 280px) qui correspond à la cabine.
+
+6. Ajouter dans la page html un champ de saisie qui permet de choisir un nombre de rangées entre 2 et 10. Ajouter un bouton "appliquer" pour ajouter, avec un script, le nombre sélectionné de rangées de sièges.
+Les rangées sont espacées de 40px verticalement, les sièges ont le statut libre. Les sièges d'une rangées sont placés horizontalement à 0, 28, 87 et 115.
+
+7. Lorsque l'on clique sur un siège celui ci passe de l'état libre à réservé puis à occupé. Vérifier que les couleurs changent bien en fonction de son état.
+
+Références : 
+- https://www.seatguru.com/airlines/Air_Canada/Air_Canada_Dash_81.php
+- https://www.chronoaviation.com/flotte/dash-8-100
--- a/examen2/plane.html
+++ b/examen2/plane.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <input id="rangees">
+  <button onclick="Appliquer()">Appliquer</button>
+  <div>
+  <svg width="540" height="1122" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <style>
+        .body { fill:#fff; stroke: #666; }
+        .exit { fill:#666; stroke:none}
+        .motor{ fill:#f2f2f2; stroke: none; }
+        .wings { fill:#f2f2f2; stroke: none; }
+        .fret { fill:#800080 }
+        .glass { fill:#000; }
+        .nose { fill:none; stroke:#000; stroke-width:1px }
+        .closet { fill:#008080; stroke-width:1.08978; }
+        .occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
+          .reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
+          .libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
+        @media (prefers-color-scheme:dark) {
+          .body { fill:#333; stroke: #888; }
+          .exit { fill:#888; stroke:none}
+          .motor{ fill:#222; stroke: #444; }
+          .wings { fill:#222; stroke: #444; }
+          .fret { fill:#600060 }
+          .glass { fill:#000; }
+          .nose { fill:none; stroke:#000; stroke-width:1px }
+          .closet { fill:#006060; stroke-width:1.08978; }
+          .occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
+          .reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
+          .libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
+        }
+      </style>
+      <symbol id="siege">
+        <rect fill="currentColor" stroke-width=".7" width="20.749941" 
+          height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
+          <path stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 0.35027964,5.0379069 V 25.657144 c 0,0.08831 0.007065,0.173093 0.0176625,0.257873 a 3.4335958,3.4335958 0 0 0 -0.0176625,0.328523 v 0.339121 c 0,1.872228 1.51191256,3.387673 3.39120576,3.387673 H 22.870005 a 3.3806082,3.3806082 0 0 0 3.384141,-3.391206 v -0.469823 a 2.2431413,2.2431413 0 0 0 0.04239,-0.452161 V 5.0379069 c 0,-1.2293121 -0.989102,-2.2254788 -2.225479,-2.2254788 H 23.212658 A 2.2219463,2.2219463 0 0 0 20.98718,5.0379069 V 22.8594 c -4.934911,1.928748 -10.06411,1.67794 -15.3240114,0 V 5.0379069 c 0,-1.2293121 -0.9891017,-2.2254788 -2.2254787,-2.2254788 z"/>
+      </symbol>
+    </defs>
+    <g class="motor">
+      <path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-424.983 27.81)"/>
+      <path style="stroke-width:1.17754px" d="M424.983 321.926H578.19" transform="translate(-424.983 27.81)"/>
+    </g>
+    <g class="motor">
+      <path style="stroke-width:1px" d="M504.96 308.244c-9.548-.215-15.55 23.123-18.843 37.174l.256 81.062 2.066 141.989s10.817 83.895 16.522 83.9c5.705-.006 16.521-83.9 16.521-83.9l2.067-141.989.258-81.062c-3.294-14.05-9.297-37.389-18.846-37.174z" transform="translate(-39.828 27.39)"/>
+      <path style="stroke-width:1.18px" d="M424.983 321.926H578.19" transform="translate(-39.828 27.39)"/>
+    </g>
+    <path class="wings" d="m353.383 421.355-312.89 1.69v139.894L352.864 564l152.813-.242V423.133z" />
+    <path class="body" d="M270.318.5c-16.4 0-51.1 76.9-81 181.7-1 4-1.5 8.1-1.5 12.2v579.7c0 4.1.5 8.1 1.5 12.1 23.735 93.102 44.226 177.891 59.99 232.075L73.06 1044.293l-.567 77.137 412.34-.352-1.031-76.07-187.166-26.635c13.412-54.18 30.992-139.019 54.682-232.174 1-4 1.5-8 1.5-12.1V194.5c0-4.2-.602-8.3-1.602-12.3C320.716 79 286.518.5 270.318.5Z"/>
+    <path class="closet" d="M286.217 212.6h61.3c.7 0 1.3.712 1.3 1.543v35.154c0 .832-.6 1.544-1.3 1.544h-61.3c-.7 0-1.3-.712-1.3-1.544v-35.154c.1-.95.6-1.544 1.3-1.544z"/>
+    <path class="exit" d="m182.117 247.6 7-8.3h7.1l-7.1 8.3 7.1 8.3h-7.1z"/>
+    <path class="exit" d="m192.317 247.6 7.1-8.3h7l-7 8.3 7 8.3h-7z"/>
+    <path class="nose" d="m234.722 52.646 70.463-.182"/>
+    <path class="fret" d="m348.116 685.2-155.4.6-.56 95.233 44.932 121.029 70.669.012 40.75-122.378z"/>
+    <path class="glass" d="m178.214 145.202-.258 29.56c15.464-11.893 24.525-13.296 32.528-13.554 0-6.325.258-29.043.258-29.043-9.748-.26-21.445 4.62-32.528 13.037zm-31.231 82.92c1.576-31.27 10.327-63.27 28.66-80.503l.364 28.842c-8.253 11.314-16.287 32.621-18.62 51.66zm129.519 0c-1.577-31.27-10.328-63.27-28.66-80.503l-.365 28.842c8.253 11.314 16.288 32.621 18.62 51.66zm-31.232-82.92.259 29.56c-15.464-11.893-24.526-13.296-32.529-13.554 0-6.325-.258-29.043-.258-29.043 9.748-.26 21.446 4.62 32.529 13.037z" transform="translate(58.017 -29.5)"/>
+    <g id="cabine" transform="translate(200 280)">
+     
+    </g>
+  </svg> 
+</div>
+<script>
+  function Appliquer()
+  {
+    const colonnes = [0, 28, 87, 115];
+
+    let rangees = document.getElementById("rangees").value;
+    
+    let cabine = document.getElementById("cabine");
+    while (cabine.lastChild)
+      cabine.removeChild(cabine.lastChild);
+
+    for (let i = 0 ; i < rangees; i++)
+    {
+      for (let col = 0 ; col < colonnes.length; col++)
+      {
+        let siege = document.createElementNS("http://www.w3.org/2000/svg", "use");
+        siege.setAttribute("href", "#siege");
+        siege.setAttribute("y", i * 40);
+        siege.setAttribute("x", colonnes[col]);
+        siege.setAttribute("class", "libre");
+        siege.addEventListener("click", (evt) => { 
+          let siege = evt.currentTarget;
+          if (siege.classList.contains("libre"))
+           siege.setAttribute("class", "reserve");
+          else if (siege.classList.contains("reserve"))
+           siege.setAttribute("class", "occupe");
+        })
+        cabine.appendChild(siege);
+      }
+    }
+  }
+</script>
+</body>
+</html>
--- a/examen2/reponse.md
+++ b/examen2/reponse.md
@@ -0,0 +1,70 @@
+---
+layout: layouts/page.njk
+title: Évaluation 2
+---
+
+Le symbole, utilisation de **currentColor** pour gérer la deuxième couleur de remplissage.
+
+```svg
+<symbol id="siege">
+  <rect fill="currentColor" stroke-width=".7" width="20.749941" 
+    height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
+  <path stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 z"/>
+</symbol>
+```
+
+Les classes
+
+```css
+.occupe { fill:#ba6b6c; color: #ef9a9a; stroke:#ececec }
+.reserve { fill:#5d99c6; color: #90caf9; stroke:#ececec }
+.libre { fill:#75a478; color: #a5d6a7; stroke:#ececec }
+```
+
+```svg
+<g id="cabine" transform="translate(200 280)">
+</g>
+```
+
+Le champ de saisie et le bouton
+
+```html
+<input id="rangees">
+<button onclick="Appliquer()">Appliquer</button>
+```
+
+Effacer les éléments de la cabine avec un nouveau remplissage
+
+```javascript
+let cabine = document.getElementById("cabine");
+  while (cabine.lastChild)
+    cabine.removeChild(cabine.lastChild);
+```
+
+Ajouter les sièges en rangées et en colonnes
+
+```javascript
+const colonnes = [0, 28, 87, 115];
+let rangees = document.getElementById("rangees").value;
+
+for (let i = 0 ; i < rangees; i++)
+{
+  for (let col = 0 ; col < colonnes.length; col++)
+    {
+      let siege = document.createElementNS("http://www.w3.org/2000/svg", "use");
+      siege.setAttribute("href", "#siege");
+      siege.setAttribute("y", i * 40);
+      siege.setAttribute("x", colonnes[col]);
+      siege.setAttribute("class", "libre");
+      siege.addEventListener("click", (evt) => { 
+        let siege = evt.currentTarget;
+        if (siege.classList.contains("libre"))
+          siege.setAttribute("class", "reserve");
+        else if (siege.classList.contains("reserve"))
+          siege.setAttribute("class", "occupe");
+      })
+      cabine.appendChild(siege);
+    }
+  }
+}
+```
--- a/examen2/siege.svg
+++ b/examen2/siege.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 27 31" xmlns="http://www.w3.org/2000/svg">
+<rect fill="#ccc" stroke="#333" stroke-width=".7" width="20.749941" 
+  height="26.691616" x="2.7700462" y="0.35027146" ry="2.9567075"/>
+<path fill="#fff" stroke="#333" stroke-width=".7" d="M 2.5722259,2.8124281 A 2.2184138,2.2184138 0 0 0 0.35027964,5.0379069 V 25.657144 c 0,0.08831 0.007065,0.173093 0.0176625,0.257873 a 3.4335958,3.4335958 0 0 0 -0.0176625,0.328523 v 0.339121 c 0,1.872228 1.51191256,3.387673 3.39120576,3.387673 H 22.870005 a 3.3806082,3.3806082 0 0 0 3.384141,-3.391206 v -0.469823 a 2.2431413,2.2431413 0 0 0 0.04239,-0.452161 V 5.0379069 c 0,-1.2293121 -0.989102,-2.2254788 -2.225479,-2.2254788 H 23.212658 A 2.2219463,2.2219463 0 0 0 20.98718,5.0379069 V 22.8594 c -4.934911,1.928748 -10.06411,1.67794 -15.3240114,0 V 5.0379069 c 0,-1.2293121 -0.9891017,-2.2254788 -2.2254787,-2.2254788 z"/>
+</svg>
--- a/examen2/solution.html
+++ b/examen2/solution.html
--- a/examen2/svgo.config.js
+++ b/examen2/svgo.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    multipass: true,        // boolean. false by default
+    collapseGroups: true,   // collapse useless groups
+    cleanupIDs: true,       // remove unused and minify used IDs
+    convertTransform: true, // collapse multiple transforms into one, convert matrices to the short aliases, and much more
+    convertStyleToAttrs: true, // convert styles into attributes
+    convertColors: false,
+    js2svg: {
+      indent: 2,            // string with spaces or number of spaces. 4 by default
+      pretty: true,         // boolean, false by default
+    },
+  };
--- a/examen3/avion.svg
+++ b/examen3/avion.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800">
+  <path
+     d="m 800,41.803859 q 0,49.821051 -85.3257,135.146751 l -137.43737,137.43735 81.88976,427.20115 0.57266,3.43594 q 0,8.01718 -5.15391,13.17108 L 617.89548,794.8461 Q 612.74158,800 604.7244,800 592.69864,800 588.11739,789.69219 L 431.20972,460.41517 290.90909,600.71583 q 38.94058,136.29203 38.94058,144.30922 0,8.01718 -5.1539,13.17108 L 288.04581,794.8461 Q 282.8919,800 274.87472,800 q -10.30781,0 -16.03434,-9.1625 L 170.07874,630.49391 9.7351463,541.73228 Q 0,536.57838 0,525.69791 0,517.68073 5.1539015,512.52682 L 41.803865,475.30423 q 5.1539,-5.1539 13.171079,-5.1539 8.017182,0 144.309236,38.94058 L 339.58483,368.79026 10.307803,211.88261 Q 0,207.30136 0,195.27559 0,187.25841 5.1539015,182.10451 L 41.803865,145.45454 q 5.1539,-5.1539 13.171079,-5.1539 2.290624,0 3.435936,0.57266 L 485.61202,222.76306 623.04939,85.325699 Q 708.37509,0 758.19613,0 776.5211,0 788.26056,11.73944 800,23.47888 800,41.803859 Z"
+   />
+</svg>
--- a/examen3/europe-2.svg
+++ b/examen3/europe-2.svg
--- a/examen3/europe.svg
+++ b/examen3/europe.svg
--- a/examen3/examen3.png
+++ b/examen3/examen3.png
--- a/examen3/index.md
+++ b/examen3/index.md
@@ -0,0 +1,24 @@
+---
+layout: layouts/page.njk
+title: SVG - Évaluation 3
+---
+
+On vous demande de simuler la trajectoire d'un avion sur une carte.
+
+Concevoir une page html et insérer la carte de l'<a href="europe.svg" download>Europe</a>.
+
+L'opérateur ne veut pas voir toute la carte mais afficher uniquement une zone de 445px/380px à partir du point 155px/215px
+
+Ajouter un symbole <a href="avion.svg" download>avion</a> dans le fichier SVG.
+
+Placer le symbole de l'avion à l'origine de l'illustration. Sa taille dans l'illustration est de 10px/10px. Faire une rotation et une translation pour aligner le nez de l'avion avec l'axe des x (abscises).
+
+Ajouter un chemin sur la carte, le chemin aura une épaisseur de 2px et sera en pointillé de 5px.
+
+Attacher un événement sur le clic des cercles. Lors du clic sur le premier cercle définir le départ du chemin. Lors des clics suivants ajouter un segment de droite au chemin.
+
+Ajouter une animation de parcours sur le symbole de l'avion. Prendre comme référence de chemin la trajectoire dessinée précédemment. Effectuer une rotation automatique du symbole le long de la trajectoire. Ne pas redémarrer l'animation tant qu'elle est en cours.
+
+Calculer la distance entre 2 clics successifs sur les cercles. Calculer la distance euclidienne entre ces points. Calculer la durée de l'animation pour que la vitesse soit constante et de 20 px/seconde. 
+
+![](examen3.png)
--- a/examen3/reponse3.html
+++ b/examen3/reponse3.html
--- a/examen3/solution3.md
+++ b/examen3/solution3.md
@@ -0,0 +1,118 @@
+---
+layout: layouts/page.njk
+title: Solution de l'évaluation SVG n° 3
+---
+
+Ajouter le svg de la carte de l'Europe dans la page. Ajouter une propriété `viewbox` pour [recadrer](../../zone/) la carte.
+
+```svg
+<svg width="990.133" height="797.822" xmlns="http://www.w3.org/2000/svg" viewbox="155 215 445 380">
+```
+
+Ajouter un [symbole](../../bibliotheque/) dans un bloc de définition `defs`ne pas oublier le `viewbox` pour pouvoir le redimensionner plus tard
+
+```svg
+<defs>
+<symbol id="plane" viewBox="0 0 800 800">
+  <path  d="m 800,41.803859 q 0,49.821051 Z"/>
+</symbol>
+</defs>
+```
+
+Ajouter le symbole dans l'illustration. Appliquer deux [transformations](../../transformation) : une rotation de 45° et une translation pour aligner le nez de l'avion avec l'abscisse x=0
+
+```svg
+<use id="avion" x="0" href="#plane" width="10" height="10" transform="rotate(45) translate(-9 0)" />
+```
+Ajouter le [chemin](../../formes). Pour l'instant il ne contient qu'un point d'origine. 
+
+```svg
+<path id="trajectoire" d="M0,0" fill="none" stroke-dasharray="5 5" 
+  stroke-width="2" stroke="red"></path>
+```
+
+Attacher un événement `clic` sur les cercles.
+
+```javascript
+document.querySelectorAll("circle").forEach(ville => ville.addEventListener("click", evt => {
+```
+
+La fonction pour calculer la distance euclidienne entre 2 points
+
+```javascript
+function getDistance(x1, y1, x2, y2) {
+   return Math.sqrt( Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) );
+}
+```
+
+Déclaration des variables globales. L'élément svg avion, le cercle de départ, le chemin tel qu'il sera construit et la durée totale de l'animation
+
+```javascript
+let avion = document.querySelector("#avion");
+let depart;
+let path = "";
+let dur = 0;
+```
+
+Lors du clic, si le départ n'est pas encore défini, le définir et commencer le chemin par une commande **M** suivi d'une commande **L** pour les segments à venir
+
+```javascript
+if (depart) 
+{ }
+else {
+  depart = evt.currentTarget; 
+  path = `M${depart.getAttribute("cx")},${depart.getAttribute("cy")}L` ;
+}
+```
+
+Si il y a deja un départ. Prendre le point d'arrivée, calculer la longueur du segment (depart et arrivée). Calculer la durée totale en divisant par 20 le nombre de pixels de distance. Ajouter le point d'arrivée au chemin. Fixer l'arrivée comme le _prochain_ départ. 
+
+```javascript
+if (depart) 
+{ 
+  let arrivee = evt.currentTarget; 
+  let longueur = getDistance(arrivee.getAttribute("cx"), arrivee.getAttribute("cy"), 
+                             depart.getAttribute("cx"), depart.getAttribute("cy"));
+  dur += longueur / 20;
+  path += ` ${arrivee.getAttribute("cx")},${arrivee.getAttribute("cy")}`; 
+  depart = arrivee;
+}
+```
+
+Ajouter une [animation](../../animation) de chemin `animateMotion` avec comme référence la trajectoire.
+
+```svg
+<use id="avion" x="0" href="#plane" width="10" height="10" transform="rotate(45) translate(-9 0)" >
+  <animateMotion dur="5s" repeatCount="1" restart="whenNotActive" rotate="auto" fill="freeze">
+    <mpath href="#trajectoire"/>
+  </animateMotion>
+</use>
+```
+
+Si une durée a été calculée. Appliquer le chemin `path` construit à l'élément trajectoire. Fixer aussi la durée de l'animation et démarrer l'animation
+
+```javascript
+if (dur)
+{
+  let trajectoire = document.querySelector("#trajectoire");
+  trajectoire.setAttribute("d", path);
+
+  let anim = avion.querySelector("animateMotion");
+  anim.setAttribute("dur", `${dur}s`);
+  anim.beginElement();
+}
+```
+
+Si il n'y a pas encore de durée, stopper l'animation.
+
+```javascript
+else
+{
+  let anim = avion.querySelector("animateMotion");
+  anim.endElement();
+}
+```
+
+<a href="../reponse3" download>télécharger</a> la solution
+
+Voir la [solution](../reponse3)
--- a/exercices/CNBC_logo.svg
+++ b/exercices/CNBC_logo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1"
+	 id="svg3100" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="NBC_30_Conn.png" inkscape:version="0.48.5 r10040"
+	 xmlns="http://www.w3.org/2000/svg"  >
+<g>
+
+
+
+</g>
+</svg>
--- a/exercices/ambiance/filter.svg
+++ b/exercices/ambiance/filter.svg
@@ -0,0 +1,189 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg23458"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="filter.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview23460"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.9411127"
+     inkscape:cx="205.0764"
+     inkscape:cy="238.54741"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs23455" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:20.2046;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-94-6-8"
+       cx="63.813255"
+       cy="77.828316"
+       r="2.9819276" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:20.2046;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-94-6"
+       cx="49.5"
+       cy="92.042168"
+       r="2.9819276" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870"
+       cx="16.189644"
+       cy="60.620365"
+       r="6.6599627" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870-9"
+       cx="38.787003"
+       cy="32.425556"
+       r="6.6599627" />
+    <circle
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.87799;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870-0"
+       cx="32.905491"
+       cy="106.22681"
+       r="6.6599627" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870-7"
+       cx="32.963989"
+       cy="81.370613"
+       rx="3.5114081"
+       ry="3.5114067" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870-7-6"
+       cx="16.301205"
+       cy="120.96687"
+       rx="3.5114081"
+       ry="3.5114067" />
+    <ellipse
+       style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:3.175;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path23870-7-2"
+       cx="44.941402"
+       cy="58.906761"
+       rx="3.511409"
+       ry="3.5114086" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.70417;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.638553,32.006024 c 8.523727,-0.116451 13.848027,8.268714 21.542227,8.291172 7.62552,0.02226 14.23677,-8.315291 21.39753,-8.092378"
+       id="path24157"
+       sodipodi:nodetypes="cac" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.70417;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.672492,54.613016 c 8.523728,-0.116451 13.848028,8.268714 21.542228,8.291172 7.62552,0.02226 14.23677,-8.315291 21.39753,-8.092378"
+       id="path24157-7"
+       sodipodi:nodetypes="cac" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.70417;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.391353,78.509817 c 8.523727,-0.116451 13.848027,8.268714 21.542227,8.291172 7.62552,0.02226 14.23677,-8.315291 21.39753,-8.092378"
+       id="path24157-4"
+       sodipodi:nodetypes="cac" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.70417;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 92.672496,101.5632 c 8.523724,-0.11645 13.848024,8.26872 21.542224,8.29117 7.62552,0.0223 14.23677,-8.31529 21.39753,-8.09237"
+       id="path24157-9"
+       sodipodi:nodetypes="cac" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594"
+       cx="69.7771"
+       cy="52.034637"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.73488;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-4"
+       cx="70.671684"
+       cy="64.707832"
+       r="0.99397588" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-6"
+       cx="12.126506"
+       cy="31.409637"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-9"
+       cx="31.210842"
+       cy="47.710842"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-5"
+       cx="50.891567"
+       cy="77.927711"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-91"
+       cx="60.23494"
+       cy="63.61446"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-1"
+       cx="71.168678"
+       cy="88.46386"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-94"
+       cx="44.927711"
+       cy="120.07229"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:11.4493;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-97"
+       cx="12.524096"
+       cy="98.40361"
+       r="1.689759" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.73488;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-4-3"
+       cx="70.77108"
+       cy="41.3494"
+       r="0.99397588" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.73488;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-4-5"
+       cx="75.939766"
+       cy="75.740959"
+       r="0.99397588" />
+    <circle
+       style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:6.73488;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none"
+       id="path24594-4-4"
+       cx="67.987953"
+       cy="99"
+       r="0.99397588" />
+    <path
+       style="fill:none;stroke:#000000;stroke-width:3.175;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 60.163712,86.871902 59.882574,108.23845 82.654819,132.13525 82.935957,9.8398593 59.039156,34.017799 59.320294,54.822073"
+       id="path25078" />
+  </g>
+</svg>
--- a/exercices/ambiance/index.md
+++ b/exercices/ambiance/index.md
@@ -0,0 +1,11 @@
+---
+layout: layouts/page.njk
+title: Atelier
+---
+
+Avec Inkscape ajouter le plan de l'IUT. Dessiner par dessus
+Supprimer le calque
+
+
+### Panneau d'informations
+
--- a/exercices/ambiance/picto.svg
+++ b/exercices/ambiance/picto.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1000" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 400">
+<defs>
+<symbol id="temperature" viewBox="0 0 53.24 125">
+  <path d="m0,75l19.88,0l0,-58.70959c0,-2.73 -1.12,-5.22 -2.92,-7.02c-1.8,-1.8 -4.29,-2.92 -7.02,-2.92c-2.73,0 -5.22,1.12 -7.02,2.92c-1.8,1.8 -2.92,4.29 -2.92,7.02l0,58.70959zm24.97,0.71041c6.87,4.81 11.36,12.790001 11.36,21.810001c0,14.7 -11.92,26.62 -26.62,26.62c-14.7,0 -26.62,-11.92 -26.62,-26.62c0,-9.22 4.69,-17.350001 11.82,-22.120001l0,-59.11c0,-4.14 1.69,-7.89 4.41,-10.62c2.72,-2.72 6.48,-4.41 10.62,-4.41c4.14,0 7.89,1.69 10.62,4.41c2.72,2.72 4.41,6.48 4.41,10.62l0,59.42z" id="path1036"/>
+  <rect height="40" width="22.25" x="-1" y="35"/>
+</symbol>
+<symbol id="sound" viewBox="0 0 122.870 95.130">
+  <path d="m 100.95,23.32 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z M 0,31.82 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 31.49 c 0,2.09 -1.69,3.78 -3.78,3.78 C 1.69,67.09 0,65.4 0,63.31 Z m 14.42,-8.5 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z M 28.9,13.9 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 V 81.24 C 36.34,83.32 34.67,85 32.62,85 30.56,85 28.9,83.32 28.9,81.24 Z M 43.26,3.78 C 43.26,1.69 44.95,0 47.04,0 c 2.09,0 3.78,1.69 3.78,3.78 v 87.57 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m 43.27,28.04 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 31.49 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z m -14.42,-8.5 c 0,-2.09 1.69,-3.78 3.78,-3.78 2.09,0 3.78,1.69 3.78,3.78 v 48.5 c 0,2.09 -1.69,3.78 -3.78,3.78 -2.09,0 -3.78,-1.69 -3.78,-3.78 z M 57.74,13.9 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 v 67.34 c 0,2.08 -1.67,3.76 -3.72,3.76 -2.06,0 -3.72,-1.68 -3.72,-3.76 V 13.9 Z m 57.69,0 c 0,-2.08 1.67,-3.76 3.72,-3.76 2.06,0 3.72,1.68 3.72,3.76 v 67.34 c 0,2.08 -1.67,3.76 -3.72,3.76 -2.06,0 -3.72,-1.68 -3.72,-3.76 z"/>
+</symbol>
+
+</defs>
+<use href="#temperature" x="10" width="100" height="100"/>
+<use href="#sound" x="100" width="100" height="100"/>
+<use href="#drop" x="200" width="100" height="100"/>
+<use href="#co2" x="300" width="100" height="100"/>
+<use href="#uv" x="400" width="100" height="100" />
+<path fill="#fff" d="M133.735,146.855h0.771V20.152C134.506,9.023,125.483,0,114.353,0S94.201,9.023,94.201,20.152v126.703h0.771
+	c-14.135,7.106-23.84,21.73-23.84,38.63c0,23.871,19.351,43.222,43.222,43.222s43.222-19.351,43.222-43.222
+	C157.575,168.585,147.87,153.961,133.735,146.855z M103.374,166.073c-1.844,0.942-17.594,9.677-10.484,29.58
+	c0.929,2.601-0.427,5.462-3.027,6.391c-0.556,0.199-1.123,0.293-1.682,0.293c-2.054,0-3.979-1.275-4.709-3.319
+	c-8.211-22.987,6.505-37.452,15.433-41.89c2.474-1.228,5.475-0.22,6.703,2.252C106.833,161.846,105.833,164.838,103.374,166.073z
+	 M124.089,56.597h-19.471V22.058c0-5.368,4.367-9.735,9.735-9.735s9.735,4.367,9.735,9.735V56.597z" />
+
+</svg>
--- a/exercices/ambiance/reponse.html
+++ b/exercices/ambiance/reponse.html
--- a/exercices/atelier/atelier.png
+++ b/exercices/atelier/atelier.png
--- a/exercices/atelier/demo.html
+++ b/exercices/atelier/demo.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <style>
+    body { margin: 0}
+  </style>
+</head>
+<body>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 420" preserveAspectRatio="xMinYMin" 
+  width="1500" height="840">
+    <defs>
+        <pattern id="tenthGrid" width="25" height="25" x="5" y="5"
+          patternUnits="userSpaceOnUse">
+          <path d="M 25 0 L 0 0 0 25" fill="none" stroke="black" stroke-width="1"/>
+        </pattern>
+    </defs>
+    
+    <g id="grille" fill="none" stroke="#000" transform="translate(360 0) rotate(30) skewX(-30)">
+      <rect x="5" y="5" stroke="#000" stroke-width="1" width="400" height="400" fill="url(#tenthGrid)" id="grille" transform="scale(1 0.86603)"/>
+      <rect x="5" y="5" width="25" height="25" stroke="#000" stroke-width="1" fill="red" stroke="none" id="rect" transform="scale(1 0.86603)"/>
+    </g>
+    
+    <g transform="matrix(.86603 .5 -.93301 .46132 198.205 56.699)">
+      <circle cx="365" cy="410" r="0.5" fill="red" /></g>
+    <g id="atelier"></g>
+       <!--
+
+    <circle cx="256.75" cy="222.5" r="3" fill="red" />
+    -->
+    <!-- x = 360 + 25 x sin(60) x (h - v)
+    y = 410 - 25 x v + (v-h) * 25 /2
+    -->
+  </svg>
+  <script>
+    'use strict'; 
+
+    let coord = document.getElementsByTagName("svg")[0].getBoundingClientRect();
+    var zoom = Math.min(750.0 / coord.width, 420.0 / coord.height);
+    var angle = - Math.PI / 6;
+    const rect = document.getElementById("rect");
+
+    document.getElementById("grille").addEventListener("mousemove", function (evt) {
+            
+      let {x, y} = planToIsometric(evt.offsetX, evt.offsetY)
+      
+      rect.setAttribute("x", Math.floor(x * zoom / 25) * 25 + 5);
+      rect.setAttribute("y", Math.floor(y * zoom / 25) * 25 + 5);
+
+    });
+
+    function planToIsometric(x , y) {
+      x = x - 360 / zoom;
+      y = y;
+
+      let X = x * Math.cos(angle) - y * Math.sin(angle); 
+      let Y = x * Math.sin(angle) + y * Math.cos(angle);
+
+      x = X + Y * Math.tan(Math.PI / 6); 
+      y = Y / Math.cos(angle);
+
+      return { x, y };
+    }
+
+    function gridToPlan(h , v) {
+      var x = 360 + 25 * Math.sin(60) * (h - v);
+      var y = 410 - 25 * v + (v-h) * 25 / 2;
+      return { x, y };
+    }
+
+    function isometricToPlan(h , v) {
+      
+      let Y = v * 0.86603;
+      let X = h - Y * Math.tan(Math.PI / 6);
+
+      let x = (X + Y * Math.tan(angle)) * Math.cos(angle); 
+      let y = (Y - x * Math.sin(angle)) / Math.cos(angle);
+
+      x = x + 360;
+
+      return { x, y };
+    }
+
+    document.getElementById("grille").addEventListener("click", async function (evt) {
+      
+      const m = document.getElementsByTagName("select")[0].value;
+      
+      const data = await fetch(`machine-${m}-o.svg`)
+      const str = await data.text(); 
+      const xml = new window.DOMParser().parseFromString(str, "image/svg+xml");
+      const svg = xml.children[0];
+      
+      const option = document.querySelector(`option[value='${m}']`)
+      let scale = option.dataset["scale"];
+      let width = option.dataset["width"];
+      let height = option.dataset["height"];
+      let originx = option.dataset["originx"];
+      let originy = option.dataset["originy"];
+
+      svg.setAttribute("width", width * scale);
+      svg.setAttribute("height", height * scale);
+     
+      let {x, y} = planToIsometric(evt.clientX , evt.clientY);
+      
+      x = Math.ceil(x * zoom / 25) * 25 + 5;
+      y = Math.ceil(y * zoom / 25) * 25 + 5;
+      
+      ({x, y} = isometricToPlan(x , y));
+      
+      svg.setAttribute("x", x - originx * scale);
+      svg.setAttribute("y", y - originy * scale);
+    
+      document.getElementById("atelier").appendChild(svg);
+      
+      /*
+      var ligne = Math.ceil((evt.clientY - 5) / 25)
+      var x = Math.ceil((evt.clientX - 20 )/ 43) * 43 + 20;
+      var y =  ligne * 25 + 5;
+      */ 
+/*
+      let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+      circle.setAttribute("cx", x);
+      circle.setAttribute("cy", y);
+      circle.setAttribute("r", "2");
+      circle.setAttribute("fill", "red");
+*/
+      
+    });
+  </script>
+  <select name="machine">
+    <option value="1" data-width="66.860" data-height="69.700" data-scale="1.7" data-originx="14.20" data-originy="69.70">inspection</option>
+    <option value="2" data-width="63.140" data-height="82.689" data-scale="1.2" data-originx="17.79" data-originy="82.689">cn</option>
+    <option value="3" data-width="40.580" data-height="79.180" data-scale="1.6" data-originx="13.99" data-originy="79.180">perceuse</option>
+    <option value="4" data-width="89.020" data-height="94.630" data-scale="1.2" data-originx="17.78" data-originy="94.630">tour</option>
+    <option value="5" data-width="63.250" data-height="97.190" data-scale="1.35" data-originx="14.25" data-originy="97.190">foreuse</option>
+    <option value="6" data-width="78.780" data-height="85.510" data-scale="1.6" data-originx="29.76" data-originy="85.510">robot</option>
+    <option value="7" data-width="80.130" data-height="98.880" data-scale="1.33" data-originx="15.44" data-originy="98.880">fraiseuse</option>
+  </select>
+</body>
+</html>
--- a/exercices/atelier/demo.svg
+++ b/exercices/atelier/demo.svg
@@ -0,0 +1,366 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 420" preserveAspectRatio="xMinYMin">
+ <defs>
+    <pattern id="tenthGrid" width="25" height="25" x="10" y="10"
+      patternUnits="userSpaceOnUse">
+      <path d="M 25 0 L 0 0 0 25" fill="none" stroke="black" stroke-width="1"/>
+    </pattern>
+    <symbol id="machine1">
+    <g  style="display:inline">
+  	  <g transform="translate(-36.58,-38.34)">
+		    <g>
+			    <g>
+				    <g>
+              <polygon fill="#ff8800" points="39.53,82.15 41.43,76.55 85.94,50.85 87.84,54.26 87.83,73.64 39.52,101.53 " />
+              <polygon fill="#ffa500" points="41.43,76.55 39.53,82.15 38.53,81.56 40.42,75.97 " />
+              <polygon fill="#ffb833" points="84.93,50.27 85.94,50.85 41.43,76.55 40.42,75.97 " />
+              <polygon fill="#ffa500" points="50.81,88.66 50.8,108.04 38.52,100.95 38.53,81.56 " />
+    				</g>
+		  		<g>
+            <polygon fill="#ffa500" points="53.37,73.47 48.66,76.19 48.66,76.76 53.76,73.82 53.76,70.64 53.37,70.86 " />
+            <polygon fill="#eb7600" points="48.66,76.19 53.37,73.47 53.37,70.86 48.66,73.58 " />
+            <polygon fill="#ffa500" points="41.83,80.13 41.55,80.87 47.52,77.42 47.52,74.24 47.13,74.47 47.13,77.08 " />
+            <polygon fill="#eb7600" points="47.13,77.08 47.13,74.47 43.11,76.79 41.83,80.13 " />
+            <polygon fill="#ffa500" points="85.48,54.93 79.9,58.15 79.9,58.72 85.87,55.28 84.31,53 84.2,53.06 " />
+            <polygon fill="#eb7600" points="79.9,58.15 85.48,54.93 84.2,53.06 79.9,55.54 " />
+            <polygon fill="#ffa500" points="59.61,69.87 54.9,72.58 54.9,73.16 60,70.22 60,67.04 59.61,67.26 " />
+            <polygon fill="#eb7600" points="54.9,72.58 59.61,69.87 59.61,67.26 54.9,69.98 " />
+            <polygon fill="#ffa500" points="65.85,66.27 61.14,68.98 61.14,69.56 66.24,66.62 66.24,63.43 65.85,63.66 " />
+  					<polygon fill="#eb7600" points="61.14,68.98 65.85,66.27 65.85,63.66 61.14,66.37 " />
+            <polygon fill="#ffa500" points="72.09,62.66 67.38,65.38 67.38,65.95 72.48,63.01 72.48,59.83 72.09,60.05" />
+            <polygon fill="#eb7600" points="67.38,65.38 72.09,62.66 72.09,60.05 67.38,62.77" />
+            <polygon fill="#ffa500" points="78.33,59.06 73.62,61.77 73.62,62.35 78.72,59.41 78.72,56.22 78.33,56.45" />
+            <polygon fill="#eb7600" points="73.62,61.77 78.33,59.06 78.33,56.45 73.62,59.17" />
+      	</g>
+	      <g>
+		      <path fill="#5c5c5c" d="m 90.97,51.54 c -0.02,-0.01 -0.04,-0.02 -0.06,-0.03 v 0 0 c -0.25,-0.13 -0.59,-0.1 -0.97,0.12 v 0 L 72.68,61.6 37.99,81.62 c -0.05,0.03 -0.1,0.06 -0.14,0.09 v 0 c -0.71,0.5 -1.27,1.51 -1.27,2.36 v 0.13 c 0,0.45 0.16,0.76 0.41,0.91 v 0 c 0,0 0.01,0 0.01,0.01 l 8.51,4.91 53.89,-33.62 z" />
+	        <path fill="#212121" d="m 99.54,57.49 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.36,0.21 -0.69,0.2 -0.9,0.01 0.16,0.01 0.34,-0.04 0.54,-0.15 l 51.96,-30 c 0.62,-0.36 1.13,-1.24 1.13,-1.96 v -0.13 c 0,-0.3 -0.09,-0.52 -0.24,-0.66 0.35,0.01 0.6,0.31 0.6,0.8 z" />
+	        <path fill="#878787"  d="m 99.18,57.34 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.2,0.11 -0.38,0.16 -0.54,0.15 -0.15,-0.14 -0.23,-0.36 -0.23,-0.66 V 88.8 c 0,-0.72 0.51,-1.6 1.13,-1.96 l 51.96,-30 c 0.2,-0.11 0.38,-0.16 0.54,-0.15 0.14,0.13 0.23,0.36 0.23,0.65 z" />
+	        <path fill="#363636"  d="m 98.41,56.84 c 0.62,-0.36 1.13,-0.07 1.13,0.65 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.62,0.36 -1.13,0.07 -1.13,-0.65 V 88.8 c 0,-0.72 0.51,-1.6 1.13,-1.96 z m 0,-0.33 -51.96,30 c -0.78,0.45 -1.42,1.55 -1.42,2.45 v 0.13 c 0,0.9 0.63,1.27 1.42,0.82 l 51.96,-30 c 0.78,-0.45 1.41,-1.55 1.41,-2.45 v -0.13 c 0,-0.9 -0.63,-1.27 -1.41,-0.82 z" />
+          <polygon fill="#363636" points="72.36,61.78 80.82,66.66 80.27,66.98 71.8,62.1" />
+          <polygon fill="#363636" points="70.1,63.08 78.56,67.97 78,68.29 69.54,63.41" />
+          <polygon fill="#363636" points="67.84,64.39 76.3,69.27 75.73,69.6 67.27,64.71" />
+          <polygon fill="#363636" points="65.57,65.7 74.03,70.58 73.47,70.91 65.01,66.02" />
+          <polygon fill="#363636" points="63.31,67 71.77,71.89 71.21,72.21 62.74,67.33" />
+          <polygon fill="#363636" points="61.04,68.31 69.5,73.2 68.94,73.52 60.48,68.64" />
+          <polygon fill="#363636" points="58.78,69.62 67.24,74.5 66.68,74.83 58.22,69.94" />
+          <polygon fill="#363636" points="56.51,70.93 64.97,75.81 64.41,76.14 55.95,71.25" />
+          <polygon fill="#363636" points="54.25,72.24 62.71,77.12 62.15,77.44 53.69,72.56" />
+          <polygon fill="#363636" points="88.22,52.62 96.68,57.51 96.12,57.83 87.66,52.95" />
+          <polygon fill="#363636" points="85.95,53.93 94.41,58.82 93.85,59.14 85.39,54.25" />
+          <polygon fill="#363636" points="83.69,55.24 92.15,60.12 91.59,60.45 83.13,55.56" />
+          <polygon fill="#363636" points="81.42,56.54 89.88,61.43 89.32,61.75 80.86,56.87" />
+          <polygon fill="#363636" points="79.16,57.85 87.62,62.74 87.06,63.06 78.6,58.18" />
+          <polygon fill="#363636" points="76.89,59.16 85.35,64.04 84.79,64.37 76.33,59.48" />
+          <polygon fill="#363636" points="74.63,60.47 83.09,65.35 82.53,65.68 74.07,60.79" />
+          <polygon fill="#363636" points="51.98,73.54 60.44,78.43 59.88,78.75 51.42,73.87" />
+          <polygon fill="#363636" points="49.72,74.85 58.18,79.74 57.62,80.06 49.16,75.17" />
+          <polygon fill="#363636" points="47.45,76.16 55.91,81.04 55.35,81.37 46.89,76.48" />
+          <polygon fill="#363636" points="45.19,77.47 53.65,82.35 53.09,82.67 44.63,77.79" />
+          <polygon fill="#363636" points="42.92,78.77 51.38,83.66 50.82,83.98 42.36,79.1" />
+          <polygon fill="#363636" points="40.66,80.08 49.12,84.96 48.56,85.29 40.1,80.4" />
+          <polygon fill="#363636" points="38.39,81.39 46.85,86.27 46.29,86.6 37.84,81.72" />
+					<g>
+		        <path fill="#a6a6a6" d="m 49.65,85.92 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 49.84,86.4 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 49.45,86.62 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.09 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z" />
+		        <path fill="#4a4a4a" d="m 49.27,86.54 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.04 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 54.18,83.31 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 54.36,83.79 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.49 0.35,-1.1 0.78,-1.35 0.44,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 53.97,84.01 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 53.79,83.92 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 58.14,81.02 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 L 57,82.9 57.05,82.82 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.08 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 58.33,81.5 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 57.94,81.72 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 57.76,81.63 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+		        <path fill="#a6a6a6" d="m 62.1,78.73 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+		        <path fill="#5c5c5c" d="m 62.29,79.21 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+		        <path fill="#a6a6a6" d="m 61.9,79.43 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.09 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+		        <path fill="#4a4a4a" d="m 61.72,79.34 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.12 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 66.06,76.45 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 C 65.65,77.89 66,77.29 66,76.8 66,76.72 65.99,76.66 65.98,76.6 Z" />
+            <path fill="#5c5c5c" d="m 66.25,76.92 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.04 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 65.86,77.15 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.09 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 65.68,77.06 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.68 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.06 0.05,0.12 0.05,0.2 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="M 70.03,74.16 69.7,73.99 v 0 c -0.14,-0.06 -0.32,-0.04 -0.52,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 70.22,74.63 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.24 0.78,-0.04 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 69.83,74.86 c 0,0.25 -0.17,0.55 -0.39,0.68 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,-0.02 0.23,0.09 0.23,0.27 z" />
+            <path fill="#4a4a4a" d="m 69.65,74.77 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.68 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.06 0.05,0.12 0.05,0.2 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="M 73.99,71.87 73.66,71.7 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.08 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 74.18,72.34 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.24 0.78,-0.04 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 73.79,72.57 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 73.61,72.48 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.04 0.11,-0.05 0.16,-0.05 0.04,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 77.96,69.58 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 78.14,70.06 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 77.75,70.28 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 77.58,70.19 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 81.92,67.29 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.22,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 82.11,67.77 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 81.72,67.99 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 81.54,67.9 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.04 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.04 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.12 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 85.89,65 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 86.07,65.48 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.44,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 85.69,65.7 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 85.51,65.61 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 89.85,62.71 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.22,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 90.04,63.19 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 89.65,63.42 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,-0.01 0.23,0.09 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 89.47,63.33 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.04 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 93.81,60.43 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.22,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.08 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 94,60.9 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 C 93.65,60.2 94,60.41 94,60.9 Z" />
+            <path fill="#a6a6a6" d="m 93.61,61.13 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 93.43,61.04 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+					<g>
+            <path fill="#a6a6a6" d="m 97.78,58.14 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z" />
+            <path fill="#5c5c5c" d="m 97.96,58.61 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.24 0.78,-0.04 0.78,0.45 z" />
+            <path fill="#a6a6a6" d="m 97.57,58.84 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z" />
+            <path fill="#4a4a4a" d="m 97.39,58.75 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.05 0.05,0.11 0.05,0.19 z" />
+					</g>
+				</g>
+				<g>
+					<polygon fill="#ff8800" points="50.81,88.66 52.71,83.06 97.21,57.36 99.11,60.77 99.11,80.16 50.8,108.04 " />
+					<g>
+						<polygon fill="#ffa500" points="60.05,82.79 60.05,83.36 65.15,80.42 65.15,77.24 64.76,77.46 64.76,80.07 " />
+						<polygon fill="#eb7600" points="60.05,80.18 60.05,82.79 64.76,80.07 64.76,77.46 " />
+						<polygon fill="#ffa500" points="52.94,87.47 58.91,84.03 58.91,80.84 58.52,81.07 58.52,83.68 53.22,86.73 " />
+						<polygon fill="#eb7600" points="53.22,86.73 58.52,83.68 58.52,81.07 54.5,83.39 " />
+						<polygon fill="#ffa500" points="91.29,64.75 91.29,65.33 97.26,61.88 95.7,59.6 95.59,59.66 96.87,61.53 " />
+						<polygon fill="#eb7600" points="91.29,62.14 91.29,64.75 96.87,61.53 95.59,59.66 " />
+						<polygon fill="#ffa500" points="66.29,79.19 66.29,79.76 71.39,76.82 71.39,73.64 71,73.86 71,76.47 " />
+						<polygon fill="#eb7600" points="66.29,76.58 66.29,79.19 71,76.47 71,73.86 " />
+						<polygon fill="#ffa500" points="72.53,75.58 72.53,76.16 77.63,73.22 77.63,70.03 77.24,70.26 77.24,72.87 " />
+						<polygon fill="#eb7600" points="72.53,72.97 72.53,75.58 77.24,72.87 77.24,70.26 " />
+						<polygon fill="#ffa500" points="78.77,71.98 78.77,72.55 83.87,69.61 83.87,66.43 83.48,66.65 83.48,69.26 " />
+						<polygon fill="#eb7600" points="78.77,69.37 78.77,71.98 83.48,69.26 83.48,66.65 " />
+						<polygon fill="#ffa500" points="85.01,68.38 85.01,68.95 90.11,66.01 90.11,62.83 89.72,63.05 89.72,65.66 " />
+						<polygon fill="#eb7600" points="85.01,65.77 85.01,68.38 89.72,65.66 89.72,63.05 " />
+					</g>
+					<polygon fill="#ffa500" points="52.71,83.06 50.81,88.66 49.8,88.07 51.7,82.48 " />
+					<polygon fill="#ffb833" points="96.21,56.78 97.21,57.36 52.71,83.06 51.7,82.48 " />
+				</g>
+			</g>
+			<g>
+				<polygon fill="#ff8800" points="66.91,49.9 80.76,41.9 80.76,57.58 66.91,65.57 " />
+				<polygon opacity="0.2" enable-background="new " points="66.91,49.9 80.76,41.9 80.76,57.58 66.91,65.57 " />
+				<polygon fill="#ff8800" points="65.32,46.47 79.2,55.86 84.07,70.75 84.07,93.7 98.14,85.58 98.14,69.14 103.44,68.63 103.44,65.7 98.14,62.63 94.87,47.24 79.39,38.34 " />
+				<g>
+					<polygon fill="#ffa500" points="93.19,51.34 95.31,61.32 86.19,66.59 86.03,65.84 94.39,61.02 92.43,51.78 " />
+          <path fill="#0d0d0d" d="m 94.39,61.02 c -2.09,2.68 -8.36,4.83 -8.36,4.83 l -1.96,-9.24 8.36,-4.83 c 0,0 2.16,4.24 1.96,9.24 z" />
+					<polygon fill="#75c425" points="85.11,57.95 84.99,57.4 90.97,53.94 91.09,54.5 " />
+					<polygon fill="#75c425" points="85.41,59.33 85.29,58.77 91.27,55.32 91.39,55.87 " />
+					<polygon fill="#75c425" points="86.56,64.9 86.45,64.35 92.43,60.89 92.55,61.45 " />
+					<polygon fill="#75c425" points="86.38,63.71 85.9,61.2 91.88,57.75 92.37,60.26 " />
+					<polygon fill="#75c425" points="85.72,60.58 85.6,60.03 89.39,57.85 89.5,58.4 " />
+				</g>
+				<polygon fill="#ffa500" points="84.07,70.75 98.14,62.63 103.44,65.7 89.38,73.82 " />
+				<g>
+					<polygon points="98.4,66.16 99.18,65.71 96.34,64.07 95.56,64.52 " />
+					<polygon points="99.5,65.52 100.28,65.07 97.44,63.43 96.66,63.88 " />
+					<polygon fill="#a62626" points="98.9,64.17 96.84,65.36 96.06,64.91 96.06,64.45 98.9,63.71 " />
+					<polygon fill="#d63a3a" points="96.84,64.9 96.06,64.45 98.12,63.26 98.9,63.71 " />
+				</g>
+				<g>
+					<polygon fill="#1c4b94" points="86.35,70.54 87.14,70.08 87.94,70.54 87.14,71 " />
+					<polygon fill="#d63a3a" points="87.72,69.75 88.51,69.29 89.3,69.75 88.51,70.21 " />
+					<polygon fill="#1c4b94" points="89.07,68.97 89.86,68.51 90.65,68.97 89.86,69.43 " />
+					<polygon fill="#d63a3a" points="87.68,71.31 88.47,70.85 89.27,71.31 88.47,71.76 " />
+					<polygon fill="#1c4b94" points="89.05,70.52 89.84,70.06 90.63,70.52 89.84,70.97 " />
+					<polygon fill="#d63a3a" points="90.4,69.74 91.19,69.28 91.98,69.74 91.19,70.2 " />
+					<polygon fill="#d63a3a" points="89.04,72.09 89.83,71.63 90.62,72.09 89.83,72.55 " />
+					<polygon fill="#25a4c4" points="90.41,71.3 91.2,70.84 91.99,71.3 91.2,71.76 " />
+					<polygon fill="#1c4b94" points="91.75,70.52 92.54,70.07 93.34,70.52 92.54,70.98 " />
+				</g>
+				<g>
+					<polygon fill="#1c4b94" points="91.22,67.72 92.02,67.26 92.81,67.72 92.02,68.18 " />
+					<polygon fill="#d63a3a" points="92.59,66.93 93.38,66.47 94.18,66.93 93.38,67.39 " />
+					<polygon fill="#1c4b94" points="93.94,66.16 94.73,65.7 95.52,66.16 94.73,66.61 " />
+					<polygon fill="#d63a3a" points="92.55,68.49 93.35,68.03 94.14,68.49 93.35,68.95 " />
+					<polygon fill="#1c4b94" points="93.92,67.7 94.71,67.24 95.51,67.7 94.71,68.16 " />
+					<polygon fill="#d63a3a" points="95.27,66.92 96.06,66.47 96.85,66.92 96.06,67.38 " />
+					<polygon fill="#d63a3a" points="93.91,69.27 94.7,68.82 95.49,69.27 94.7,69.73 " />
+					<polygon fill="#25a4c4" points="95.28,68.48 96.07,68.03 96.86,68.48 96.07,68.94 " />
+					<polygon fill="#1c4b94" points="96.62,67.71 97.42,67.25 98.21,67.71 97.42,68.16 " />
+				</g>
+				<polygon fill="#ffa500" points="66.91,50.35 75.98,55.59 75.98,68.45 76.63,68.08 77.76,68.73 77.76,90.06 84.07,93.7 84.07,77.26 89.38,76.75 89.38,73.82 84.07,70.75 80.8,55.37 65.32,46.47 65.32,61.58 66.34,62.17 66.34,65.25 66.91,65.57 " />
+				<polygon fill="#ff8800" points="89.38,73.82 103.44,65.7 103.44,68.63 89.38,76.75 " />
+				<g>
+          <path opacity="0.3" d="m 77.6,47.02 c 1.06,0.61 2.78,0.61 3.84,0 1.06,-0.61 1.06,-1.6 0,-2.21 -1.06,-0.61 -2.78,-0.61 -3.84,0 -1.06,0.6 -1.06,1.6 0,2.21 z" />
+          <path fill="#0d0d0d" d="m 81.89,44.5 v 1.21 h -0.01 c 0,0.35 -0.23,0.7 -0.69,0.96 -0.92,0.53 -2.42,0.53 -3.34,0 -0.46,-0.27 -0.69,-0.62 -0.69,-0.96 V 44.5 Z" />
+          <path fill="#232323" d="m 77.85,45.47 c 0.92,0.53 2.42,0.53 3.34,0 0.92,-0.53 0.92,-1.4 0,-1.93 -0.92,-0.53 -2.42,-0.53 -3.34,0 -0.92,0.53 -0.92,1.4 0,1.93 z" />
+          <path fill="#a62626" d="m 79.52,45.57 c -0.53,0 -1.03,-0.12 -1.41,-0.34 -0.43,-0.25 -0.66,-0.59 -0.66,-0.97 V 41.5 c 0,-1.14 0.93,-2.07 2.07,-2.07 1.14,0 2.07,0.93 2.07,2.07 v 2.76 c 0,0.38 -0.23,0.72 -0.66,0.97 -0.38,0.22 -0.88,0.34 -1.41,0.34 z m 0,-5.62 c -0.85,0 -1.55,0.69 -1.55,1.55 v 2.76 c 0,0.18 0.15,0.37 0.4,0.51 0.3,0.17 0.72,0.27 1.15,0.27 0.43,0 0.85,-0.1 1.15,-0.27 0.25,-0.15 0.4,-0.33 0.4,-0.51 V 41.5 c 0,-0.85 -0.7,-1.55 -1.55,-1.55 z" />
+          <path fill="#d63a3a" d="m 79.52,39.95 c -0.85,0 -1.55,0.69 -1.55,1.55 v 2.76 c 0,0.18 0.15,0.37 0.4,0.51 0.3,0.17 0.72,0.27 1.15,0.27 0.43,0 0.85,-0.1 1.15,-0.27 0.25,-0.15 0.4,-0.33 0.4,-0.51 V 41.5 c 0,-0.85 -0.7,-1.55 -1.55,-1.55 z" />
+          <path fill="#f5b400" d="m 80.1,42.68 c 0,0.66 -0.26,1.2 -0.58,1.2 -0.32,0 -0.58,-0.54 -0.58,-1.2 0,-0.66 0.26,-1.2 0.58,-1.2 0.32,0 0.58,0.54 0.58,1.2 z" />
+				</g>
+			</g>
+			<g>
+				<g>
+					<polygon fill="#ffdaab" points="69.99,65 75.59,61.77 69.82,58.45 64.21,61.69 " />
+					<polygon fill="#9c805f" points="73.22,63.13 67.44,59.81 66.59,60.31 72.37,63.62 " />
+				</g>
+				<polygon fill="#f5cb95" points="69.99,65 64.21,61.69 64.21,67.81 69.99,71.13 " />
+				<polygon fill="#d1ad7f" points="69.99,71.13 75.59,67.9 75.59,61.77 69.99,65 " />
+				<polygon fill="#705c44" points="73.22,63.13 72.37,63.62 72.37,65.49 73.22,64.99 " />
+				<g>
+					<polygon fill="#ebebeb" points="75.19,64.41 75.19,62.69 73.59,63.62 73.59,65.34 " />
+					<polygon fill="#9e9e9e" points="75.04,63.16 75.04,63 73.82,63.7 73.82,63.86 " />
+					<polygon fill="#9e9e9e" points="75.04,63.58 75.04,63.42 73.82,64.13 73.82,64.29 " />
+					<polygon fill="#9e9e9e" points="75.04,64 75.04,63.84 73.82,64.55 73.82,64.71 " />
+					<polygon fill="#9e9e9e" points="74.51,64.67 74.51,64.51 73.82,64.91 73.82,65.07 " />
+				</g>
+				<g>
+					<polygon fill="#9c8469" points="72.79,68.01 72.79,67.8 70.52,69.11 70.52,69.32 " />
+					<polygon fill="#9c8469" points="72.79,68.73 72.79,68.52 70.52,69.83 70.52,70.04 " />
+					<polygon fill="#9c8469" points="72.79,69.09 72.79,68.88 70.52,70.19 70.52,70.4 " />
+					<polygon fill="#9c8469" points="71.66,69.03 71.66,68.82 70.52,69.47 70.52,69.69 " />
+				</g>
+				<g>
+					<polygon fill="#ebebeb" points="75.19,65.54 75.19,64.72 73.59,65.65 73.59,66.47 " />
+					<g>
+						<polygon fill="#424242" points="74.57,65.61 74.61,65.59 74.61,65.2 74.57,65.23 " />
+						<polygon fill="#424242" points="74.96,65.38 74.99,65.36 74.99,64.98 74.96,65 " />
+						<polygon fill="#424242" points="74.04,65.91 74.08,65.89 74.08,65.51 74.04,65.53 " />
+						<polygon fill="#424242" points="73.94,65.97 73.98,65.95 73.98,65.57 73.94,65.59 " />
+						<polygon fill="#424242" points="75.06,65.32 75.13,65.29 75.13,64.9 75.06,64.94 " />
+						<polygon fill="#424242" points="74.65,65.56 74.71,65.52 74.71,65.14 74.65,65.18 " />
+						<polygon fill="#424242" points="74.45,65.68 74.47,65.67 74.47,65.29 74.45,65.29 " />
+						<polygon fill="#424242" points="74.83,65.46 74.84,65.45 74.84,65.07 74.83,65.08 " />
+						<polygon fill="#424242" points="74.39,65.71 74.4,65.71 74.4,65.32 74.39,65.33 " />
+						<polygon fill="#424242" points="74.33,65.75 74.34,65.74 74.34,65.36 74.33,65.37 " />
+						<polygon fill="#424242" points="74.88,65.43 74.9,65.42 74.9,65.04 74.88,65.04 " />
+						<polygon fill="#424242" points="74.14,65.86 74.15,65.85 74.15,65.47 74.14,65.47 " />
+						<polygon fill="#424242" points="73.87,66.01 73.88,66 73.88,65.62 73.87,65.63 " />
+						<polygon fill="#424242" points="74.51,65.64 74.53,65.63 74.53,65.25 74.51,65.26 " />
+						<polygon fill="#424242" points="74.76,65.5 74.78,65.49 74.78,65.1 74.76,65.11 " />
+						<polygon fill="#424242" points="74.21,65.81 74.28,65.78 74.28,65.39 74.21,65.43 " />
+						<polygon fill="#424242" points="73.73,66.09 73.79,66.06 73.79,65.67 73.73,65.71 " />
+					</g>
+				</g>
+			</g>
+			<g>
+				<g>
+					<polygon fill="#ffdaab" points="61.89,69.96 67.49,66.73 61.71,63.41 56.11,66.64 " />
+					<polygon fill="#9c805f" points="65.12,68.09 59.34,64.77 58.49,65.27 64.26,68.58 " />
+				</g>
+				<polygon fill="#f5cb95" points="61.89,69.96 56.11,66.64 56.11,72.77 61.89,76.09 " />
+				<polygon fill="#d1ad7f" points="61.89,76.09 67.49,72.85 67.49,66.73 61.89,69.96 " />
+				<polygon fill="#705c44" points="65.12,68.09 64.26,68.58 64.26,70.44 65.12,69.95 " />
+				<g>
+					<polygon fill="#ebebeb" points="67.09,69.37 67.09,67.65 65.49,68.57 65.49,70.3 " />
+					<polygon fill="#9e9e9e" points="66.93,68.12 66.93,67.96 65.71,68.66 65.71,68.82 " />
+					<polygon fill="#9e9e9e" points="66.93,68.54 66.93,68.38 65.71,69.08 65.71,69.24 " />
+					<polygon fill="#9e9e9e" points="66.93,68.96 66.93,68.8 65.71,69.51 65.71,69.67 " />
+					<polygon fill="#9e9e9e" points="66.41,69.63 66.41,69.47 65.71,69.87 65.71,70.03 " />
+				</g>
+				<g>
+					<polygon fill="#9c8469" points="64.69,72.97 64.69,72.76 62.42,74.07 62.42,74.28 " />
+					<polygon fill="#9c8469" points="64.69,73.69 64.69,73.48 62.42,74.78 62.42,74.99 " />
+					<polygon fill="#9c8469" points="64.69,74.05 64.69,73.84 62.42,75.15 62.42,75.36 " />
+					<polygon fill="#9c8469" points="63.55,73.99 63.55,73.78 62.42,74.43 62.42,74.64 " />
+				</g>
+				<g>
+					<polygon fill="#ebebeb" points="67.09,70.5 67.09,69.68 65.49,70.61 65.49,71.43 " />
+					<g>
+						<polygon fill="#424242" points="66.46,70.57 66.5,70.55 66.5,70.16 66.46,70.19 " />
+						<polygon fill="#424242" points="66.85,70.34 66.89,70.32 66.89,69.94 66.85,69.96 " />
+						<polygon fill="#424242" points="65.94,70.87 65.97,70.85 65.97,70.47 65.94,70.49 " />
+						<polygon fill="#424242" points="65.83,70.93 65.87,70.91 65.87,70.53 65.83,70.55 " />
+						<polygon fill="#424242" points="66.96,70.28 67.02,70.24 67.02,69.86 66.96,69.9 " />
+						<polygon fill="#424242" points="66.55,70.52 66.61,70.48 66.61,70.1 66.55,70.14 " />
+						<polygon fill="#424242" points="66.35,70.63 66.36,70.63 66.36,70.24 66.35,70.25 " />
+						<polygon fill="#424242" points="66.72,70.42 66.74,70.41 66.74,70.03 66.72,70.04 " />
+						<polygon fill="#424242" points="66.28,70.67 66.3,70.66 66.3,70.28 66.28,70.29 " />
+						<polygon fill="#424242" points="66.23,70.7 66.24,70.7 66.24,70.31 66.23,70.32 " />
+						<polygon fill="#424242" points="66.78,70.39 66.8,70.38 66.8,69.99 66.78,70 " />
+						<polygon fill="#424242" points="66.03,70.81 66.05,70.81 66.05,70.42 66.03,70.43 " />
+						<polygon fill="#424242" points="65.76,70.97 65.78,70.96 65.78,70.58 65.76,70.59 " />
+						<polygon fill="#424242" points="66.41,70.6 66.43,70.59 66.43,70.21 66.41,70.22 " />
+						<polygon fill="#424242" points="66.66,70.46 66.68,70.44 66.68,70.06 66.66,70.07 " />
+						<polygon fill="#424242" points="66.11,70.77 66.18,70.73 66.18,70.35 66.11,70.39 " />
+						<polygon fill="#424242" points="65.62,71.05 65.69,71.02 65.69,70.63 65.62,70.67 " />
+					</g>
+				</g>
+			</g>
+			<g>
+				<g>
+					<polygon fill="#ffdaab" points="52.16,74.99 57.76,71.76 51.98,68.44 46.38,71.67 " />
+					<polygon fill="#9c805f" points="55.39,73.12 49.61,69.8 48.76,70.29 54.53,73.61 " />
+				</g>
+				<polygon fill="#f5cb95" points="52.16,74.99 46.38,71.67 46.38,77.8 52.16,81.12 " />
+				<polygon fill="#d1ad7f" points="52.16,81.12 57.76,77.88 57.76,71.76 52.16,74.99 " />
+				<polygon fill="#705c44" points="55.39,73.12 54.53,73.61 54.53,75.47 55.39,74.98 " />
+				<g>
+					<polygon fill="#ebebeb" points="57.36,74.4 57.36,72.68 55.76,73.6 55.76,75.33 " />
+					<polygon fill="#9e9e9e" points="57.2,73.14 57.2,72.98 55.98,73.69 55.98,73.85 " />
+					<polygon fill="#9e9e9e" points="57.2,73.57 57.2,73.41 55.98,74.11 55.98,74.27 " />
+					<polygon fill="#9e9e9e" points="57.2,73.99 57.2,73.83 55.98,74.54 55.98,74.69 " />
+					<polygon fill="#9e9e9e" points="56.68,74.65 56.68,74.5 55.98,74.9 55.98,75.05 " />
+				</g>
+				<g>
+					<polygon fill="#9c8469" points="54.96,78 54.96,77.79 52.69,79.1 52.69,79.31 " />
+					<polygon fill="#9c8469" points="54.96,78.71 54.96,78.5 52.69,79.81 52.69,80.02 " />
+					<polygon fill="#9c8469" points="54.96,79.08 54.96,78.87 52.69,80.18 52.69,80.39 " />
+					<polygon fill="#9c8469" points="53.82,79.02 53.82,78.81 52.69,79.46 52.69,79.67 " />
+				</g>
+				<g>
+					<polygon fill="#ebebeb" points="57.36,75.53 57.36,74.71 55.76,75.64 55.76,76.46" />
+					<g>
+						<polygon fill="#424242" points="56.73,75.6 56.77,75.57 56.77,75.19 56.73,75.21 " />
+						<polygon fill="#424242" points="57.12,75.37 57.16,75.35 57.16,74.97 57.12,74.99 " />
+						<polygon fill="#424242" points="56.2,75.9 56.24,75.88 56.24,75.5 56.2,75.52 " />
+						<polygon fill="#424242" points="56.1,75.96 56.14,75.94 56.14,75.55 56.1,75.58 " />
+						<polygon fill="#424242" points="57.23,75.31 57.29,75.27 57.29,74.89 57.23,74.93 " />
+						<polygon fill="#424242" points="56.82,75.55 56.88,75.51 56.88,75.13 56.82,75.16 " />
+						<polygon fill="#424242" points="56.62,75.66 56.63,75.65 56.63,75.27 56.62,75.28 " />
+						<polygon fill="#424242" points="56.99,75.45 57.01,75.44 57.01,75.05 56.99,75.06 " />
+						<polygon fill="#424242" points="56.55,75.7 56.57,75.69 56.57,75.31 56.55,75.32 " />
+						<polygon fill="#424242" points="56.49,75.73 56.51,75.72 56.51,75.34 56.49,75.35 " />
+						<polygon fill="#424242" points="57.05,75.41 57.06,75.4 57.06,75.02 57.05,75.03 " />
+						<polygon fill="#424242" points="56.3,75.84 56.32,75.83 56.32,75.45 56.3,75.46 " />
+						<polygon fill="#424242" points="56.03,76 56.05,75.99 56.05,75.61 56.03,75.62 " />
+						<polygon fill="#424242" points="56.68,75.63 56.7,75.62 56.7,75.23 56.68,75.25 " />
+						<polygon fill="#424242" points="56.93,75.48 56.95,75.47 56.95,75.09 56.93,75.1 " />
+						<polygon fill="#424242" points="56.38,75.8 56.44,75.76 56.44,75.38 56.38,75.42 " />
+						<polygon fill="#424242" points="55.89,76.08 55.96,76.04 55.96,75.66 55.89,75.7 " />
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+    </symbol>
+  </defs>
+<g fill="none" stroke="#000" transform="translate(365 0) rotate(30) skewX(-30)">
+<path stroke-width="10" d="M5,5h410v410H5Z" fill="url(#tenthGrid)" transform="scale(1 0.86603)"/>
+</g>
+<use href="#machine1" x="242.53" y="152.8"/>
+<g transform="matrix(.86603 .5 -.93301 .46132 198.205 56.699)">
+</g>
+<circle cx="365" cy="410" r="0.5" fill="red" />
+<circle cx="581.5" cy="285" r="0.5" fill="red" />
+<circle cx="256.75" cy="222.5" r="3" fill="red" />
+
+<!-- x = 365 + 25 x sin(60) x (h - v)
+y = 410 - 25 x v + (v-h) * 25 /2
+-->
+</svg>
--- a/exercices/atelier/demo/machine-1-o.svg
+++ b/exercices/atelier/demo/machine-1-o.svg
@@ -0,0 +1,156 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 66.86 69.7" preserveAspectRatio="xMinYmin">
+  <path fill="#f80" d="M51.25 35.3 2.94 63.19l.01-19.38 1.9-5.6 44.51-25.7 1.9 3.41z"/>
+  <path fill="orange" d="m1.95 43.22 1.89-5.59 1.01.58-1.9 5.6z"/>
+  <path fill="#ffb833" d="m4.85 38.21-1.01-.58 44.51-25.7 1.01.58z"/>
+  <path fill="orange" d="m1.94 62.61.01-19.39 12.28 7.1-.01 19.38zm10.14-24.19 5.1-2.94V32.3l-.39.22v2.61l-4.71 2.72z"/>
+  <path fill="#eb7600" d="m12.08 37.85 4.71-2.72v-2.61l-4.71 2.72z"/>
+  <path fill="orange" d="M10.94 39.08V35.9l-.39.23v2.61l-5.3 3.05-.28.74z"/>
+  <path fill="#eb7600" d="M10.55 38.74v-2.61l-4.02 2.32-1.28 3.34z"/>
+  <path fill="orange" d="m43.32 20.38 5.97-3.44-1.56-2.28-.11.06 1.28 1.87-5.58 3.22z"/>
+  <path fill="#eb7600" d="m43.32 19.81 5.58-3.22-1.28-1.87-4.3 2.48z"/>
+  <path fill="orange" d="m18.32 34.82 5.1-2.94V28.7l-.39.22v2.61l-4.71 2.71z"/>
+  <path fill="#eb7600" d="m18.32 34.24 4.71-2.71v-2.61l-4.71 2.72z"/>
+  <path fill="orange" d="m24.56 31.22 5.1-2.94v-3.19l-.39.23v2.61l-4.71 2.71z"/>
+  <path fill="#eb7600" d="m24.56 30.64 4.71-2.71v-2.61l-4.71 2.71z"/>
+  <path fill="orange" d="m30.8 27.61 5.1-2.94v-3.18l-.39.22v2.61l-4.71 2.72z"/>
+  <path fill="#eb7600" d="m30.8 27.04 4.71-2.72v-2.61l-4.71 2.72z"/>
+  <path fill="orange" d="m37.04 24.01 5.1-2.94v-3.19l-.39.23v2.61l-4.71 2.71z"/>
+  <path fill="#eb7600" d="m37.04 23.43 4.71-2.71v-2.61l-4.71 2.72z"/>
+  <path fill="#5c5c5c" d="m54.39 13.2-.06-.03c-.25-.13-.59-.1-.97.12L36.1 23.26 1.41 43.28c-.05.03-.1.06-.14.09-.71.5-1.27 1.51-1.27 2.36v.13c0 .45.16.76.41.91 0 0 .01 0 .01.01l8.51 4.91 53.89-33.62z"/>
+  <path fill="#212121" d="M62.96 19.15v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.36.21-.69.2-.9.01.16.01.34-.04.54-.15l51.96-30c.62-.36 1.13-1.24 1.13-1.96v-.13c0-.3-.09-.52-.24-.66.35.01.6.31.6.8z"/>
+  <path fill="#878787" d="M62.6 19v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.2.11-.38.16-.54.15-.15-.14-.23-.36-.23-.66v-.12c0-.72.51-1.6 1.13-1.96l51.96-30c.2-.11.38-.16.54-.15.14.13.23.36.23.65z"/>
+  <path fill="#363636" d="M61.83 18.5c.62-.36 1.13-.07 1.13.65v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.62.36-1.13.07-1.13-.65v-.13c0-.72.51-1.6 1.13-1.96zm0-.33-51.96 30c-.78.45-1.42 1.55-1.42 2.45v.13c0 .9.63 1.27 1.42.82l51.96-30c.78-.45 1.41-1.55 1.41-2.45v-.13c0-.9-.63-1.27-1.41-.82z"/>
+  <path d="m35.78 23.44 8.46 4.88-.55.32-8.47-4.88zm-2.26 1.3 8.46 4.89-.56.32-8.46-4.88zm-2.26 1.31 8.46 4.88-.57.33-8.46-4.89zm-2.27 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.26 1.3 8.46 4.89-.56.32-8.47-4.88zm-2.27 1.31 8.46 4.89-.56.32-8.46-4.88zm-2.26 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.27 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.26 1.31 8.46 4.88-.56.32-8.46-4.88zm33.97-19.62 8.46 4.89-.56.32-8.46-4.88zm-2.27 1.31 8.46 4.89-.56.32-8.46-4.89zm-2.26 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.27 1.3 8.46 4.89-.56.32-8.46-4.88zm-2.26 1.31 8.46 4.89-.56.32-8.46-4.88zm-2.27 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.26 1.31 8.46 4.88-.56.33-8.46-4.89zM15.4 35.2l8.46 4.89-.56.32-8.46-4.88zm-2.26 1.31 8.46 4.89-.56.32-8.46-4.89zm-2.27 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.26 1.31 8.46 4.88-.56.32-8.46-4.88zm-2.27 1.3 8.46 4.89-.56.32-8.46-4.88zm-2.26 1.31 8.46 4.88-.56.33-8.46-4.89zm-2.27 1.31 8.46 4.88-.56.33-8.45-4.88z" fill="#363636"/>
+  <path fill="#a6a6a6" d="m13.07 47.58-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M13.26 48.06c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M12.87 48.28c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M12.69 48.2c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.04.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m17.6 44.97-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M17.78 45.45c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45 0-.49.35-1.1.78-1.35.44-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M17.39 45.67c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M17.21 45.58c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m21.56 42.68-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M21.75 43.16c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M21.36 43.38c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M21.18 43.29c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m25.52 40.39-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M25.71 40.87c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M25.32 41.09c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M25.14 41c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.12.05.19z"/>
+  <path fill="#a6a6a6" d="m29.48 38.11-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.02.16-.05.25-.1.42-.26.77-.86.77-1.35 0-.08-.01-.14-.02-.2Z"/>
+  <path fill="#5c5c5c" d="M29.67 38.58c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M29.28 38.81c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.09.23.28z"/>
+  <path fill="#4a4a4a" d="M29.1 38.72c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.04.06.05.12.05.2z"/>
+  <path fill="#a6a6a6" d="m33.45 35.82-.33-.17c-.14-.06-.32-.04-.52.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M33.64 36.29c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M33.25 36.52c0 .25-.17.55-.39.68-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.13-.02.23.09.23.27z"/>
+  <path fill="#4a4a4a" d="M33.07 36.43c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.03.06.05.12.05.2z"/>
+  <path fill="#a6a6a6" d="m37.41 33.53-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M37.6 34c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M37.21 34.23c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M37.03 34.14c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67a.27.27 0 0 1 .16-.05c.04.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m41.38 31.24-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M41.56 31.72c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M41.17 31.94c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M41 31.85c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m45.34 28.95-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.22.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M45.53 29.43c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M45.14 29.65c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M44.96 29.56c0 .25-.17.55-.39.67a.27.27 0 0 1-.16.05.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67a.27.27 0 0 1 .16-.05c.03.05.05.12.05.19z"/>
+  <path fill="#a6a6a6" d="m49.31 26.66-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M49.49 27.14c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.44-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M49.11 27.36c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M48.93 27.27c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m53.27 24.37-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.22.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M53.46 24.85c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M53.07 25.08c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13-.01.23.09.23.28z"/>
+  <path fill="#4a4a4a" d="M52.89 24.99c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.04.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m57.23 22.09-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.22.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M57.42 22.56c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.04.78.45Z"/>
+  <path fill="#a6a6a6" d="M57.03 22.79c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M56.85 22.7c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m61.2 19.8-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M61.38 20.27c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M60.99 20.5c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M60.81 20.41c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+  <path fill="#f80" d="m14.22 69.7.01-19.38 1.9-5.6 44.5-25.7 1.9 3.41v19.39z"/>
+  <path fill="orange" d="M23.47 44.45v.57l5.1-2.94V38.9l-.39.22v2.61z"/>
+  <path fill="#eb7600" d="M28.18 41.73v-2.61l-4.71 2.72v2.61z"/>
+  <path fill="orange" d="m16.36 49.13 5.97-3.44V42.5l-.39.23v2.61l-5.3 3.05z"/>
+  <path fill="#eb7600" d="m21.94 42.73-4.02 2.32-1.28 3.34 5.3-3.05z"/>
+  <path fill="orange" d="M54.71 26.41v.58l5.97-3.45-1.56-2.28-.11.06 1.28 1.87z"/>
+  <path fill="#eb7600" d="m60.29 23.19-1.28-1.87-4.3 2.48v2.61z"/>
+  <path fill="orange" d="M29.71 40.85v.57l5.1-2.94V35.3l-.39.22v2.61z"/>
+  <path fill="#eb7600" d="M34.42 38.13v-2.61l-4.71 2.72v2.61z"/>
+  <path fill="orange" d="M35.95 37.24v.58l5.1-2.94v-3.19l-.39.23v2.61z"/>
+  <path fill="#eb7600" d="M40.66 34.53v-2.61l-4.71 2.71v2.61z"/>
+  <path fill="orange" d="M42.19 33.64v.57l5.1-2.94v-3.18l-.39.22v2.61z"/>
+  <path fill="#eb7600" d="M46.9 30.92v-2.61l-4.71 2.72v2.61z"/>
+  <path fill="orange" d="M48.43 30.04v.57l5.1-2.94v-3.18l-.39.22v2.61z"/>
+  <path fill="#eb7600" d="M53.14 27.32v-2.61l-4.71 2.72v2.61z"/>
+  <path fill="orange" d="m13.22 49.73 1.9-5.59 1.01.58-1.9 5.6z"/>
+  <path fill="#ffb833" d="m16.13 44.72-1.01-.58 44.51-25.7 1 .58z"/>
+  <path fill="#f80" d="M44.18 3.56v15.68l-13.85 7.99V11.56z"/>
+  <path opacity=".2" d="M44.18 3.56v15.68l-13.85 7.99V11.56z"/>
+  <path fill="#f80" d="M47.49 32.41v22.95l14.07-8.12V30.8l5.3-.51v-2.93l-5.3-3.07L58.29 8.9 42.81 0 28.74 8.13l13.88 9.39z"/>
+  <path fill="orange" d="m49.45 27.5 8.36-4.82-1.96-9.24.76-.44 2.12 9.98-9.12 5.27z"/>
+  <path fill="#0d0d0d" d="M57.81 22.68c-2.09 2.68-8.36 4.83-8.36 4.83l-1.96-9.24 8.36-4.83s2.16 4.24 1.96 9.24z"/>
+  <path fill="#75c425" d="m54.51 16.16-5.98 3.45-.12-.55 5.98-3.46zm.3 1.37-5.98 3.46-.12-.56 5.98-3.45zm1.16 5.58-5.99 3.45-.11-.55 5.98-3.46zm-.18-1.19-5.99 3.45-.48-2.51 5.98-3.45zm-2.87-1.86-3.78 2.18-.12-.55 3.79-2.18z"/>
+  <path fill="orange" d="m61.56 24.29 5.3 3.07-14.06 8.12-5.31-3.07z"/>
+  <path d="m58.98 26.18 2.84 1.64.78-.45-2.84-1.64zm1.1-.64 2.84 1.64.78-.45-2.84-1.64z"/>
+  <path fill="#a62626" d="m62.32 25.83-2.06 1.19-.78-.45v-.46l2.84-.74z"/>
+  <path fill="#d63a3a" d="m62.32 25.37-2.06 1.19-.78-.45 2.06-1.19z"/>
+  <path fill="#1c4b94" d="m50.56 32.66-.79-.46.79-.46.8.46z"/>
+  <path fill="#d63a3a" d="m51.93 31.87-.79-.46.79-.46.79.46z"/>
+  <path fill="#1c4b94" d="m53.28 31.09-.79-.46.79-.46.79.46z"/>
+  <path fill="#d63a3a" d="m51.89 33.42-.79-.45.79-.46.8.46z"/>
+  <path fill="#1c4b94" d="m53.26 32.63-.79-.45.79-.46.79.46z"/>
+  <path fill="#d63a3a" d="m54.61 31.86-.79-.46.79-.46.79.46zm-1.36 2.35-.79-.46.79-.46.79.46z"/>
+  <path fill="#25a4c4" d="m54.62 33.42-.79-.46.79-.46.79.46z"/>
+  <path fill="#1c4b94" d="m55.96 32.64-.79-.46.79-.45.8.45zm-.52-2.8-.8-.46.8-.46.79.46z"/>
+  <path fill="#d63a3a" d="m56.8 29.05-.79-.46.79-.46.8.46z"/>
+  <path fill="#1c4b94" d="m58.15 28.27-.79-.45.79-.46.79.46z"/>
+  <path fill="#d63a3a" d="m56.77 30.61-.8-.46.8-.46.79.46z"/>
+  <path fill="#1c4b94" d="m58.13 29.82-.79-.46.79-.46.8.46z"/>
+  <path fill="#d63a3a" d="m59.48 29.04-.79-.46.79-.45.79.45zm-1.36 2.35-.79-.46.79-.45.79.45z"/>
+  <path fill="#25a4c4" d="m59.49 30.6-.79-.46.79-.45.79.45z"/>
+  <path fill="#1c4b94" d="m60.84 29.82-.8-.45.8-.46.79.46z"/>
+  <path fill="orange" d="m28.74 23.24 1.02.59v3.08l.57.32V12.01l9.07 5.24v12.86l.65-.37 1.13.65v21.33l6.31 3.64V38.92l5.31-.51v-2.93l-5.31-3.07-3.27-15.38-15.48-8.9z"/>
+  <path fill="#f80" d="M66.86 27.36v2.93L52.8 38.41v-2.93z"/>
+  <path opacity=".3" d="M41.02 8.68c1.06.61 2.78.61 3.84 0s1.06-1.6 0-2.21c-1.06-.61-2.78-.61-3.84 0-1.06.6-1.06 1.6 0 2.21z"/>
+  <path fill="#0d0d0d" d="M45.31 6.16v1.21h-.01c0 .35-.23.7-.69.96-.92.53-2.42.53-3.34 0-.46-.27-.69-.62-.69-.96V6.16Z"/>
+  <path fill="#232323" d="M41.27 7.13c.92.53 2.42.53 3.34 0 .92-.53.92-1.4 0-1.93s-2.42-.53-3.34 0c-.92.53-.92 1.4 0 1.93z"/>
+  <path fill="#a62626" d="M42.94 7.23c-.53 0-1.03-.12-1.41-.34-.43-.25-.66-.59-.66-.97V3.16c0-1.14.93-2.07 2.07-2.07 1.14 0 2.07.93 2.07 2.07v2.76c0 .38-.23.72-.66.97-.38.22-.88.34-1.41.34zm0-5.62c-.85 0-1.55.69-1.55 1.55v2.76c0 .18.15.37.4.51.3.17.72.27 1.15.27.43 0 .85-.1 1.15-.27.25-.15.4-.33.4-.51V3.16c0-.85-.7-1.55-1.55-1.55z"/>
+  <path fill="#d63a3a" d="M42.94 1.61c-.85 0-1.55.69-1.55 1.55v2.76c0 .18.15.37.4.51.3.17.72.27 1.15.27.43 0 .85-.1 1.15-.27.25-.15.4-.33.4-.51V3.16c0-.85-.7-1.55-1.55-1.55z"/>
+  <path fill="#f5b400" d="M43.52 4.34c0 .66-.26 1.2-.58 1.2-.32 0-.58-.54-.58-1.2 0-.66.26-1.2.58-1.2.32 0 .58.54.58 1.2z"/>
+  <path fill="#ffdaab" d="m27.63 23.35 5.78 3.31 5.6-3.23-5.77-3.32z"/>
+  <path fill="#9c805f" d="m35.79 25.28.85-.49-5.78-3.32-.85.5z"/>
+  <path fill="#f5cb95" d="M27.63 23.35v6.12l5.78 3.32v-6.13z"/>
+  <path fill="#d1ad7f" d="M39.01 29.56v-6.13l-5.6 3.23v6.13z"/>
+  <path fill="#705c44" d="M35.79 25.28v1.87l.85-.5v-1.86z"/>
+  <path fill="#ebebeb" d="m37.01 27 1.6-.93v-1.72l-1.6.93z"/>
+  <path fill="#9e9e9e" d="m37.24 25.52 1.22-.7v-.16l-1.22.7zm0 .43 1.22-.71v-.16l-1.22.71zm0 .42 1.22-.71v-.16l-1.22.71zm0 .36.69-.4v-.16l-.69.4z"/>
+  <path fill="#9c8469" d="m33.94 30.98 2.27-1.31v-.21l-2.27 1.31zm0 .72 2.27-1.31v-.21l-2.27 1.31zm0 .36 2.27-1.31v-.21l-2.27 1.31zm0-.71 1.14-.66v-.21l-1.14.65z"/>
+  <path fill="#ebebeb" d="m37.01 28.13 1.6-.93v-.82l-1.6.93z"/>
+  <path d="M38.03 27.25v-.39l-.04.03v.38zm.38-.23v-.38l-.03.02v.38zm-.91.53v-.38l-.04.02v.38zm-.1.06v-.38l-.04.02v.38zm1.15-.66v-.39l-.07.04v.38zm-.42.23v-.38l-.06.04v.38zm-.24.15v-.38h-.02v.39zm.37-.22v-.38l-.01.01v.38zm-.44.26v-.39l-.01.01v.38zm-.06.03v-.38l-.01.01v.38zm.56-.32v-.38h-.02v.39zm-.75.43v-.38h-.01v.39zm-.27.15v-.38l-.01.01v.38zm.65-.37v-.38l-.02.01v.38zm.25-.14v-.39l-.02.01v.39zm-.5.29v-.39l-.07.04v.38zm-.49.28v-.39l-.06.04v.38z" fill="#424242"/>
+  <path fill="#ffdaab" d="m19.53 28.3 5.78 3.32 5.6-3.23-5.78-3.32z"/>
+  <path fill="#9c805f" d="m27.68 30.24.86-.49-5.78-3.32-.85.5z"/>
+  <path fill="#f5cb95" d="M19.53 28.3v6.13l5.78 3.32v-6.13z"/>
+  <path fill="#d1ad7f" d="M30.91 34.51v-6.12l-5.6 3.23v6.13z"/>
+  <path fill="#705c44" d="M27.68 30.24v1.86l.86-.49v-1.86z"/>
+  <path fill="#ebebeb" d="m28.91 31.96 1.6-.93v-1.72l-1.6.92z"/>
+  <path fill="#9e9e9e" d="m29.13 30.48 1.22-.7v-.16l-1.22.7zm0 .42 1.22-.7v-.16l-1.22.7zm0 .43 1.22-.71v-.16l-1.22.71zm0 .36.7-.4v-.16l-.7.4z"/>
+  <path fill="#9c8469" d="m25.84 35.94 2.27-1.31v-.21l-2.27 1.31zm0 .71 2.27-1.3v-.21l-2.27 1.3zm0 .37 2.27-1.31v-.21l-2.27 1.31zm0-.72 1.13-.65v-.21l-1.13.65z"/>
+  <path fill="#ebebeb" d="m28.91 33.09 1.6-.93v-.82l-1.6.93z"/>
+  <path d="M29.92 32.21v-.39l-.04.03v.38zm.39-.23v-.38l-.04.02V32zm-.92.53v-.38l-.03.02v.38zm-.1.06v-.38l-.04.02v.38zm1.15-.67v-.38l-.06.04v.38zm-.41.24v-.38l-.06.04v.38zm-.25.15v-.39l-.01.01v.38zm.38-.22v-.38l-.02.01v.38zm-.44.25v-.38l-.02.01v.38zm-.06.04v-.39l-.01.01v.38zm.56-.32v-.39l-.02.01v.39zm-.75.43v-.39l-.02.01v.38zm-.27.15v-.38l-.02.01v.38zm.65-.37v-.38l-.02.01v.38zm.25-.15v-.38l-.02.01v.39zm-.5.29v-.38l-.07.04v.38zm-.49.29v-.39l-.07.04v.38z" fill="#424242"/>
+  <path fill="#ffdaab" d="m9.8 33.33 5.78 3.32 5.6-3.23-5.78-3.32z"/>
+  <path fill="#9c805f" d="m17.95 35.27.86-.49-5.78-3.32-.85.49z"/>
+  <path fill="#f5cb95" d="M9.8 33.33v6.13l5.78 3.32v-6.13z"/>
+  <path fill="#d1ad7f" d="M21.18 39.54v-6.12l-5.6 3.23v6.13z"/>
+  <path fill="#705c44" d="M17.95 35.27v1.86l.86-.49v-1.86z"/>
+  <path fill="#ebebeb" d="m19.18 36.99 1.6-.93v-1.72l-1.6.92z"/>
+  <path fill="#9e9e9e" d="m19.4 35.51 1.22-.71v-.16l-1.22.71zm0 .42 1.22-.7v-.16l-1.22.7zm0 .42 1.22-.7v-.16l-1.22.71zm0 .36.7-.4v-.15l-.7.4z"/>
+  <path fill="#9c8469" d="m16.11 40.97 2.27-1.31v-.21l-2.27 1.31zm0 .71 2.27-1.31v-.21l-2.27 1.31zm0 .37 2.27-1.31v-.21l-2.27 1.31zm0-.72 1.13-.65v-.21l-1.13.65z"/>
+  <path fill="#ebebeb" d="m19.18 38.12 1.6-.93v-.82l-1.6.93z"/>
+  <path d="M20.19 37.23v-.38l-.04.02v.39zm.39-.22v-.38l-.04.02v.38zm-.92.53v-.38l-.04.02v.38zm-.1.06v-.39l-.04.03v.38zm1.15-.67v-.38l-.06.04v.38zm-.41.24v-.38l-.06.03v.39zm-.25.14v-.38l-.01.01v.38zm.38-.21v-.39l-.02.01v.39zm-.44.25v-.38l-.02.01v.38zm-.06.03V37l-.02.01v.38zm.55-.32v-.38l-.01.01v.38zm-.74.43v-.38l-.02.01v.38zm-.27.16v-.38l-.02.01v.38zm.65-.37v-.39l-.02.02v.38zm.25-.15v-.38l-.02.01v.38zm-.51.29v-.38l-.06.04v.38zm-.48.28v-.38l-.07.04v.38z" fill="#424242"/>
+</svg>
--- a/exercices/atelier/demo/machine-1.svg
+++ b/exercices/atelier/demo/machine-1.svg
--- a/exercices/atelier/demo/machine-2-o.svg
+++ b/exercices/atelier/demo/machine-2-o.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.14 82.689" preserveAspectRatio="xMinYmin">
+  <path fill="#d49c00" d="M41.5 19.499v20.13l4.25-2.45v-20.13l-10.53-6.08z"/>
+  <path fill="#f5b400" d="M30.96 13.419v19.34l10.54 6.08v-19.34l4.25-2.45-10.53-6.08z"/>
+  <path fill="#808285" d="m32.58 22.149 2.07-1.2.01.02c.53-.31 1.26-.26 2.07.21 1.62.93 2.93 3.21 2.93 5.07 0 .93-.33 1.59-.86 1.9l-2.07 1.2z"/>
+  <path fill="#a7a9ac" d="M37.59 27.449c0-1.87-1.31-4.14-2.93-5.07-1.62-.93-2.93-.18-2.93 1.69 0 1.87 1.31 4.14 2.93 5.07 1.62.94 2.93.18 2.93-1.69z"/>
+  <path fill="#808285" d="M35.79 26.409c0-.72-.51-1.6-1.13-1.96-.63-.36-1.13-.07-1.13.65s.51 1.6 1.13 1.96c.63.37 1.13.08 1.13-.65zm-16.7 6.78 2.85-1.65c.17-.1.41-.08.67.07.52.3.95 1.04.95 1.64 0 .3-.11.51-.28.61l-2.84 1.65z"/>
+  <path fill="#a7a9ac" d="M20.71 34.909c0-.6-.42-1.34-.95-1.64-.52-.3-.95-.06-.95.55 0 .6.42 1.34.95 1.64.53.29.95.05.95-.55z"/>
+  <path fill="#808285" d="M20.13 34.569c0-.23-.16-.52-.37-.63-.2-.12-.37-.02-.37.21 0 .23.16.52.37.63.21.12.37.02.37-.21z"/>
+  <path fill="#6d6e71" d="m15.61 33.689 2.67-1.54c.34-.2.8-.17 1.32.13 1.03.59 1.87 2.04 1.87 3.23 0 .6-.21 1.01-.55 1.21l-2.66 1.55z"/>
+  <path fill="#a7a9ac" d="M18.8 37.069c0-1.19-.84-2.64-1.87-3.23-1.03-.59-1.87-.11-1.87 1.08 0 1.19.84 2.64 1.87 3.23 1.04.59 1.87.11 1.87-1.08z"/>
+  <path fill="#808285" d="M17.66 36.409c0-.46-.32-1.02-.72-1.25-.4-.23-.72-.04-.72.42 0 .46.32 1.02.72 1.25.4.23.72.04.72-.42z"/>
+  <path fill="#808285" d="m10.35 34.989 4.18-2.41c.53-.31 1.26-.26 2.07.21 1.62.93 2.93 3.21 2.93 5.07 0 .93-.33 1.59-.86 1.9l-4.17 2.43z"/>
+  <path fill="#a7a9ac" d="M15.36 40.279c0-1.87-1.31-4.14-2.93-5.07-1.62-.93-2.93-.18-2.93 1.69 0 1.87 1.31 4.14 2.93 5.07 1.62.94 2.93.18 2.93-1.69z"/>
+  <path fill="#808285" d="M13.57 39.249c0-.72-.51-1.6-1.13-1.96-.63-.36-1.13-.07-1.13.65s.51 1.6 1.13 1.96c.62.36 1.13.07 1.13-.65z"/>
+  <path fill="#d49c00" d="M63.14 32.849v28.85l-12.23 7.06-10.31-43.48 12.23-7.07 3.43 1.98z"/>
+  <path fill="#d63a3a" d="m50.17 36.109.7 1.29 8.46-4.89-.7-1.28zm-4.91-8.87.7 1.29 1.4-.81-.7-1.28zm1.23 2.27.7 1.28 1.4-.81-.7-1.28zm1.24 2.26.7 1.29 1.4-.81-.7-1.29zm1.15 2.09.7 1.29 1.4-.81-.7-1.28z"/>
+  <path fill="#f5b400" d="m50.91 68.759-10.31-5.95v-37.53l3.42 1.98 6.89 12.66z"/>
+  <path fill="#2565c4" d="m54.75 22.749 3.68 6.77 1.4-.81-3.68-6.77z"/>
+  <path fill="#25a4c4" d="m52.32 24.149 3.68 6.77 1.4-.81-3.68-6.77z"/>
+  <path fill="#0d0d0d" d="m47.89 26.709 2.95 5.42 1.13-.65-2.95-5.42z"/>
+  <path fill="#d1d3d4" d="m48.32 27.489-.43-.78 6.29-3.63.42.78z"/>
+  <path fill="#d63a3a" d="M55.44 23.489a.95.95 0 1 1-1.9 0 .95.95 0 0 1 1.9 0z"/>
+  <path fill="#232323" d="m45.95 23.809-.69-.38v-3.8l.68.33z"/>
+  <path fill="#0d0d0d" d="m51 20.889-5.05 2.92-.01-3.79 5.06-2.92z"/>
+  <path fill="#454545" d="m40.09 10.039 17.32-10c.09-.05.17-.05.23-.01l1.35.73-.35.5-.1-.09v11.78c0 .2-.14.44-.31.54l-16.91 9.76-.11.55-1.33-.72c-.06-.03-.09-.1-.09-.2v-12.29a.66.66 0 0 1 .3-.55z"/>
+  <path fill="#0d0d0d" d="m41.44 23.779 17.32-10c.17-.1.31-.34.31-.54V.949c0-.2-.14-.28-.31-.18l-17.32 10c-.17.1-.31.34-.31.54v12.29c-.01.2.13.28.31.18z"/>
+  <path fill="#232323" d="m58 12.139-16.12 9.31v.31l16.4-9.47V1.919l-.28.16z"/>
+  <path d="m58 12.139-16.12 9.31v-10.06L58 2.079z"/>
+  <path fill="#75c425" d="M52.33 10.819v-2.27l3.87-2.23v2.26zm2.84-5.65v-.44l-12.53 7.23v.44zm-6.14 4.86v-.44l-6.39 3.69v.44zm0 1.26v-.45l-6.39 3.69v.44zm0 4.49v-.44l-6.39 3.69v.44zm4.46-3.83v-.44l-10.85 6.26v.44z"/>
+  <path fill="#454545" d="M58.28 13.349v-.44l-4.01 2.31v.45z"/>
+  <path fill="#f5b400" d="M0 72.409v-19.76l17.81 10.28v19.76z"/>
+  <path fill="#808285" d="M17.81 62.929 0 52.649v-2.08l40.6-7.45 5.76 1.24v2.08z"/>
+  <path fill="#a7a9ac" d="m0 50.569 30.96-17.81 10.54 6.08 4.86 5.52-28.55 16.49z"/>
+  <path fill="#d49c00" d="M17.81 82.689v-19.76l28.55-16.49v19.77z"/>
+  <path fill="#939598" d="m38.68 33.239-22.04 16.71-4.06-2.35v-3.97l22.04-12.74z"/>
+  <path fill="#454545" d="m15.89 45.199-.53-.31 21.02-12.13.53.3zm-1.62-.94-.53-.3 21.02-12.14.53.31z"/>
+  <path fill="#808285" d="M16.64 49.949v-3.98l22.04-12.73v3.97z"/>
+  <path fill="#d49c00" d="M12.99 37.319v20.13l4.25-2.46v-20.12l-10.53-6.08z"/>
+  <path fill="#f5b400" d="M2.46 31.239v20.13l10.53 6.08v-20.13l4.25-2.45-10.53-6.08zm43.9 6.86-22.32 19.15-4.07-2.35v-6.26l22.32-12.88z"/>
+  <path fill="#d49c00" d="M24.04 57.249v-6.26l22.32-12.89v6.26z"/>
+  <path fill="#232323" d="M21.84 49.389v-1.08l20.57-11.87 2.23 1.29-20.57 12.95z"/>
+  <path fill="#0d0d0d" d="m44.64 38.819-20.57 11.86v-1.09l20.57-11.86z"/>
+  <g opacity=".6">
+    <path fill="#1c4b94" d="m23.99 48.899-.91-.52v-9.11l-4.16-10.17.78-.1 4.29 10.5z"/>
+    <path fill="#2565c4" d="m43.13 37.849-19.14 11.05v-9.4l-4.29-10.5-.78.1 19.15-11.05.77-.1 4.29 10.49z"/>
+    <path opacity=".35" d="m43.13 37.849-19.14 11.05v-9.4l19.14-11.06z"/>
+  </g>
+  <path fill="#808285" d="m4.92 39.139 1.65-.95.01.01c.42-.24 1-.21 1.65.16 1.29.74 2.33 2.55 2.33 4.04 0 .74-.26 1.27-.68 1.51l-1.65.95z"/>
+  <path fill="#a7a9ac" d="M8.91 43.349c0-1.49-1.04-3.3-2.33-4.04-1.29-.74-2.33-.14-2.33 1.35 0 1.49 1.04 3.3 2.33 4.04 1.29.75 2.33.14 2.33-1.35z"/>
+  <path fill="#808285" d="M7.48 42.529c0-.58-.4-1.28-.9-1.56-.5-.29-.9-.05-.9.52 0 .58.4 1.28.9 1.56.5.29.9.05.9-.52z"/>
+</svg>
--- a/exercices/atelier/demo/machine-2.svg
+++ b/exercices/atelier/demo/machine-2.svg
@@ -0,0 +1,333 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   viewBox="0 0 63.140 82.689"
+   preserveAspectRatio="xMinYmin"
+   id="svg4192"
+   sodipodi:docname="machine-2.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4196" />
+  <sodipodi:namedview
+     id="namedview4194"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="9.0338497"
+     inkscape:cx="29.721548"
+     inkscape:cy="41.3445"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g4100" />
+  <g
+     id="g4190">
+    <g
+       transform="translate(-36.09,-116.90115)"
+       id="g4188">
+      <g
+         id="g4186">
+        <g
+           id="g4042">
+          <polygon
+             fill="#d49c00"
+             points="77.59,136.4 77.59,156.53 81.84,154.08 81.84,133.95 71.31,127.87 "
+             id="polygon4038" />
+          <polygon
+             fill="#f5b400"
+             points="71.31,127.87 67.05,130.32 67.05,149.66 77.59,155.74 77.59,136.4 81.84,133.95 "
+             id="polygon4040" />
+        </g>
+        <g
+           id="g4050">
+          <path
+             fill="#808285"
+             d="m 68.67,139.05 2.07,-1.2 0.01,0.02 c 0.53,-0.31 1.26,-0.26 2.07,0.21 1.62,0.93 2.93,3.21 2.93,5.07 0,0.93 -0.33,1.59 -0.86,1.9 l -2.07,1.2 z"
+             id="path4044" />
+          <path
+             fill="#a7a9ac"
+             d="m 73.68,144.35 c 0,-1.87 -1.31,-4.14 -2.93,-5.07 -1.62,-0.93 -2.93,-0.18 -2.93,1.69 0,1.87 1.31,4.14 2.93,5.07 1.62,0.94 2.93,0.18 2.93,-1.69 z"
+             id="path4046" />
+          <path
+             fill="#808285"
+             d="m 71.88,143.31 c 0,-0.72 -0.51,-1.6 -1.13,-1.96 -0.63,-0.36 -1.13,-0.07 -1.13,0.65 0,0.72 0.51,1.6 1.13,1.96 0.63,0.37 1.13,0.08 1.13,-0.65 z"
+             id="path4048"
+             style="display:inline" />
+        </g>
+        <g
+           id="g4058">
+          <path
+             fill="#808285"
+             d="m 55.18,150.09 2.85,-1.65 c 0.17,-0.1 0.41,-0.08 0.67,0.07 0.52,0.3 0.95,1.04 0.95,1.64 0,0.3 -0.11,0.51 -0.28,0.61 l -2.84,1.65 z"
+             id="path4052" />
+          <path
+             fill="#a7a9ac"
+             d="m 56.8,151.81 c 0,-0.6 -0.42,-1.34 -0.95,-1.64 -0.52,-0.3 -0.95,-0.06 -0.95,0.55 0,0.6 0.42,1.34 0.95,1.64 0.53,0.29 0.95,0.05 0.95,-0.55 z"
+             id="path4054" />
+          <path
+             fill="#808285"
+             d="m 56.22,151.47 c 0,-0.23 -0.16,-0.52 -0.37,-0.63 -0.2,-0.12 -0.37,-0.02 -0.37,0.21 0,0.23 0.16,0.52 0.37,0.63 0.21,0.12 0.37,0.02 0.37,-0.21 z"
+             id="path4056" />
+        </g>
+        <g
+           id="g4066">
+          <path
+             fill="#6d6e71"
+             d="m 51.7,150.59 2.67,-1.54 c 0.34,-0.2 0.8,-0.17 1.32,0.13 1.03,0.59 1.87,2.04 1.87,3.23 0,0.6 -0.21,1.01 -0.55,1.21 l -2.66,1.55 z"
+             id="path4060" />
+          <path
+             fill="#a7a9ac"
+             d="m 54.89,153.97 c 0,-1.19 -0.84,-2.64 -1.87,-3.23 -1.03,-0.59 -1.87,-0.11 -1.87,1.08 0,1.19 0.84,2.64 1.87,3.23 1.04,0.59 1.87,0.11 1.87,-1.08 z"
+             id="path4062" />
+          <path
+             fill="#808285"
+             d="m 53.75,153.31 c 0,-0.46 -0.32,-1.02 -0.72,-1.25 -0.4,-0.23 -0.72,-0.04 -0.72,0.42 0,0.46 0.32,1.02 0.72,1.25 0.4,0.23 0.72,0.04 0.72,-0.42 z"
+             id="path4064" />
+        </g>
+        <g
+           id="g4074">
+          <path
+             fill="#808285"
+             d="m 46.44,151.89 4.18,-2.41 c 0.53,-0.31 1.26,-0.26 2.07,0.21 1.62,0.93 2.93,3.21 2.93,5.07 0,0.93 -0.33,1.59 -0.86,1.9 l -4.17,2.43 z"
+             id="path4068" />
+          <path
+             fill="#a7a9ac"
+             d="m 51.45,157.18 c 0,-1.87 -1.31,-4.14 -2.93,-5.07 -1.62,-0.93 -2.93,-0.18 -2.93,1.69 0,1.87 1.31,4.14 2.93,5.07 1.62,0.94 2.93,0.18 2.93,-1.69 z"
+             id="path4070" />
+          <path
+             fill="#808285"
+             d="m 49.66,156.15 c 0,-0.72 -0.51,-1.6 -1.13,-1.96 -0.63,-0.36 -1.13,-0.07 -1.13,0.65 0,0.72 0.51,1.6 1.13,1.96 0.62,0.36 1.13,0.07 1.13,-0.65 z"
+             id="path4072" />
+        </g>
+        <g
+           id="g4100"
+           style="display:inline"
+           inkscape:label="Layer2">
+          <polygon
+             fill="#d49c00"
+             points="87,185.66 76.69,142.18 88.92,135.11 92.35,137.09 99.23,149.75 99.23,178.6 "
+             id="polygon4076" />
+          <polygon
+             fill="#d63a3a"
+             points="95.42,149.41 94.72,148.13 86.26,153.01 86.96,154.3 "
+             id="polygon4078" />
+          <polygon
+             fill="#d63a3a"
+             points="83.45,144.62 82.75,143.34 81.35,144.14 82.05,145.43 "
+             id="polygon4080" />
+          <polygon
+             fill="#d63a3a"
+             points="84.68,146.88 83.98,145.6 82.58,146.41 83.28,147.69 "
+             id="polygon4082" />
+          <polygon
+             fill="#d63a3a"
+             points="85.92,149.15 85.22,147.86 83.82,148.67 84.52,149.96 "
+             id="polygon4084" />
+          <polygon
+             fill="#d63a3a"
+             points="87.07,151.24 86.37,149.96 84.97,150.76 85.67,152.05 "
+             id="polygon4086" />
+          <polygon
+             fill="#f5b400"
+             points="87,156.82 87,185.66 76.69,179.71 76.69,142.18 80.11,144.16 "
+             id="polygon4088" />
+          <polygon
+             fill="#2565c4"
+             points="95.92,145.61 92.24,138.84 90.84,139.65 94.52,146.42 "
+             id="polygon4090" />
+          <polygon
+             fill="#25a4c4"
+             points="93.49,147.01 89.81,140.24 88.41,141.05 92.09,147.82 "
+             id="polygon4092" />
+          <polygon
+             fill="#0d0d0d"
+             points="88.06,148.38 85.11,142.96 83.98,143.61 86.93,149.03 "
+             id="polygon4094" />
+          <polygon
+             fill="#d1d3d4"
+             points="90.27,139.98 90.69,140.76 84.41,144.39 83.98,143.61 "
+             id="polygon4096" />
+          <path
+             fill="#d63a3a"
+             d="m 91.53,140.39 c 0,0.53 -0.43,0.95 -0.95,0.95 -0.53,0 -0.95,-0.43 -0.95,-0.95 0,-0.53 0.43,-0.95 0.95,-0.95 0.52,0 0.95,0.42 0.95,0.95 z"
+             id="path4098" />
+        </g>
+        <g
+           id="g4128">
+          <polygon
+             fill="#232323"
+             points="82.03,136.86 82.04,140.71 81.35,140.33 81.35,136.53 "
+             id="polygon4102" />
+          <polygon
+             fill="#0d0d0d"
+             points="87.09,134 87.09,137.79 82.04,140.71 82.03,136.92 "
+             id="polygon4104" />
+          <path
+             fill="#454545"
+             d="m 76.18,126.94 17.32,-10 c 0.09,-0.05 0.17,-0.05 0.23,-0.01 v 0 l 1.35,0.73 -0.35,0.5 -0.1,-0.09 v 11.78 c 0,0.2 -0.14,0.44 -0.31,0.54 l -16.91,9.76 -0.11,0.55 -1.33,-0.72 v 0 0 0 c -0.06,-0.03 -0.09,-0.1 -0.09,-0.2 v -12.29 c -0.01,-0.21 0.13,-0.45 0.3,-0.55 z"
+             id="path4106" />
+          <path
+             fill="#0d0d0d"
+             d="m 77.53,140.68 17.32,-10 c 0.17,-0.1 0.31,-0.34 0.31,-0.54 v -12.29 c 0,-0.2 -0.14,-0.28 -0.31,-0.18 l -17.32,10 c -0.17,0.1 -0.31,0.34 -0.31,0.54 v 12.29 c -0.01,0.2 0.13,0.28 0.31,0.18 z"
+             id="path4108" />
+          <polygon
+             fill="#232323"
+             points="94.37,129.19 94.37,118.82 94.09,118.98 94.09,129.04 77.97,138.35 77.97,138.66 "
+             id="polygon4110" />
+          <polygon
+             points="94.09,118.98 94.09,129.04 77.97,138.35 77.97,128.29 "
+             id="polygon4112" />
+          <polygon
+             fill="#75c425"
+             points="92.29,125.48 88.42,127.72 88.42,125.45 92.29,123.22 "
+             id="polygon4114" />
+          <polygon
+             fill="#75c425"
+             points="78.73,129.3 91.26,122.07 91.26,121.63 78.73,128.86 "
+             id="polygon4116" />
+          <polygon
+             fill="#75c425"
+             points="78.73,130.62 85.12,126.93 85.12,126.49 78.73,130.18 "
+             id="polygon4118" />
+          <polygon
+             fill="#75c425"
+             points="78.73,131.87 85.12,128.19 85.12,127.74 78.73,131.43 "
+             id="polygon4120" />
+          <polygon
+             fill="#75c425"
+             points="78.73,136.37 85.12,132.68 85.12,132.24 78.73,135.93 "
+             id="polygon4122" />
+          <polygon
+             fill="#75c425"
+             points="78.73,135.11 89.58,128.85 89.58,128.41 78.73,134.67 "
+             id="polygon4124" />
+          <polygon
+             fill="#454545"
+             points="90.36,132.57 94.37,130.25 94.37,129.81 90.36,132.12 "
+             id="polygon4126" />
+        </g>
+        <g
+           id="g4138">
+          <polygon
+             fill="#f5b400"
+             points="53.9,199.59 36.09,189.31 36.09,169.55 53.9,179.83 "
+             id="polygon4130" />
+          <polygon
+             fill="#808285"
+             points="76.69,160.02 82.45,161.26 82.45,163.34 53.9,179.83 36.09,169.55 36.09,167.47 "
+             id="polygon4132" />
+          <polygon
+             fill="#a7a9ac"
+             points="82.45,161.26 53.9,177.75 36.09,167.47 67.05,149.66 77.59,155.74 "
+             id="polygon4134" />
+          <polygon
+             fill="#d49c00"
+             points="82.45,183.11 53.9,199.59 53.9,179.83 82.45,163.34 "
+             id="polygon4136" />
+        </g>
+        <g
+           id="g4148"
+           style="display:inline">
+          <polygon
+             fill="#939598"
+             points="48.67,164.5 48.67,160.53 70.71,147.79 74.77,150.14 52.73,166.85 "
+             id="polygon4140" />
+          <polygon
+             fill="#454545"
+             points="73,149.96 51.98,162.1 51.45,161.79 72.47,149.66 "
+             id="polygon4142" />
+          <polygon
+             fill="#454545"
+             points="71.38,149.03 50.36,161.16 49.83,160.86 70.85,148.72 "
+             id="polygon4144" />
+          <polygon
+             fill="#808285"
+             points="74.77,154.11 52.73,166.85 52.73,162.87 74.77,150.14 "
+             id="polygon4146" />
+        </g>
+        <g
+           id="g4154">
+          <polygon
+             fill="#d49c00"
+             points="53.33,151.77 42.8,145.69 49.08,154.22 49.08,174.35 53.33,171.89 "
+             id="polygon4150" />
+          <polygon
+             fill="#f5b400"
+             points="49.08,154.22 53.33,151.77 42.8,145.69 38.55,148.14 38.55,168.27 49.08,174.35 "
+             id="polygon4152" />
+        </g>
+        <g
+           id="g4160"
+           style="display:inline">
+          <polygon
+             fill="#f5b400"
+             points="56.06,171.8 56.06,165.54 78.38,152.66 82.45,155 60.13,174.15 "
+             id="polygon4156" />
+          <polygon
+             fill="#d49c00"
+             points="82.45,161.26 60.13,174.15 60.13,167.89 82.45,155 "
+             id="polygon4158" />
+        </g>
+        <g
+           id="g4176"
+           style="display:inline">
+          <g
+             id="g4166">
+            <polygon
+               fill="#232323"
+               points="57.93,165.21 78.5,153.34 80.73,154.63 60.16,167.58 57.93,166.29 "
+               id="polygon4162" />
+            <polygon
+               fill="#0d0d0d"
+               points="80.73,154.63 80.73,155.72 60.16,167.58 60.16,166.49 "
+               id="polygon4164" />
+          </g>
+          <g
+             opacity="0.6"
+             id="g4174">
+            <polygon
+               fill="#1c4b94"
+               points="60.08,156.4 60.08,165.8 59.17,165.28 59.17,156.17 55.01,146 55.79,145.9 "
+               id="polygon4168" />
+            <polygon
+               fill="#2565c4"
+               points="55.79,145.9 55.01,146 74.16,134.95 74.93,134.85 79.22,145.34 79.22,154.75 60.08,165.8 60.08,156.4 "
+               id="polygon4170" />
+            <polygon
+               opacity="0.35"
+               points="79.22,145.34 79.22,154.75 60.08,165.8 60.08,156.4 "
+               id="polygon4172" />
+          </g>
+        </g>
+        <g
+           id="g4184"
+           style="display:inline">
+          <path
+             fill="#808285"
+             d="m 41.01,156.04 1.65,-0.95 0.01,0.01 c 0.42,-0.24 1,-0.21 1.65,0.16 1.29,0.74 2.33,2.55 2.33,4.04 0,0.74 -0.26,1.27 -0.68,1.51 l -1.65,0.95 z"
+             id="path4178" />
+          <path
+             fill="#a7a9ac"
+             d="m 45,160.25 c 0,-1.49 -1.04,-3.3 -2.33,-4.04 -1.29,-0.74 -2.33,-0.14 -2.33,1.35 0,1.49 1.04,3.3 2.33,4.04 1.29,0.75 2.33,0.14 2.33,-1.35 z"
+             id="path4180" />
+          <path
+             fill="#808285"
+             d="m 43.57,159.43 c 0,-0.58 -0.4,-1.28 -0.9,-1.56 -0.5,-0.29 -0.9,-0.05 -0.9,0.52 0,0.58 0.4,1.28 0.9,1.56 0.5,0.29 0.9,0.05 0.9,-0.52 z"
+             id="path4182" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-3-o.svg
+++ b/exercices/atelier/demo/machine-3-o.svg
@@ -0,0 +1,42 @@
+<svg viewBox="0 0 40.58 79.18" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#a62626" d="m28.03 58.04 3.99-8.25 8.56 4.94v9.09l-8.62 4.98z"/>
+  <path fill="#d63a3a" d="m32.02 49.79 8.56 4.94-8.62 4.85v9.22l-8.56-4.94v-9.22z"/>
+  <path fill="#a62626" d="m40.58 15.31-5.07 2.92-3.93-8.13.44-6.2 8.56 4.94z"/>
+  <path fill="#d63a3a" d="M26.95 13.29V6.71l5.07-2.81 8.56 4.94-5.07 2.81v6.58z"/>
+  <path fill="#808285" d="M35.51 9.79v47.8l-3.55 1.99-5.05-54.75z"/>
+  <path fill="#a7a9ac" d="M23.37 54.62V6.87l3.54-2.04 8.6 4.96-3.55 2.05v47.74z"/>
+  <path fill="#6d6e71" d="m26.38 52.92-1.73-1V9.84l.72.42v41.25l1.01.59z"/>
+  <path fill="#808285" d="m25.37 10.26 1.01.58V52.1l-1.01-.59z"/>
+  <path fill="#6d6e71" d="m30.54 55.3-1.74-1V12.22l.72.41v41.26l1.02.59z"/>
+  <path fill="#808285" d="m29.52 12.63 1.02.59v41.26l-1.02-.59z"/>
+  <path fill="#a62626" d="m31.96 68.8-14.05 8.18-3.93-26.42 9.42-11.38 8.56 4.94z"/>
+  <path fill="#d63a3a" d="M9.35 72.04V47.17l14.05-7.99 8.56 4.94-14.05 7.99v24.87z"/>
+  <path fill="#808285" d="M16.16 43.96v2.35h.02c0 .6.4 1.2 1.19 1.66 1.59.92 4.16.92 5.75 0 .79-.46 1.19-1.06 1.19-1.66v-2.35z"/>
+  <path fill="#a7a9ac" d="M23.12 45.62c-1.59.92-4.16.92-5.75 0-1.59-.92-1.59-2.4 0-3.32 1.59-.92 4.16-.92 5.75 0 1.59.91 1.59 2.4 0 3.32z"/>
+  <path fill="#808285" d="M21.36 44.6c-.61.36-1.61.36-2.22 0-.61-.35-.61-.93 0-1.29.61-.35 1.61-.35 2.23 0 .6.36.6.93-.01 1.29z"/>
+  <path fill="#a62626" d="m17.91 76.98-3.93 2.2-4.33-29.1-.3-13.71 8.56 4.95z"/>
+  <path fill="#d63a3a" d="M5.43 74.24V38.57l3.92-2.2 8.56 4.95-3.93 2.19v35.67zM1.9 49.61a.95.95 0 1 1-.95-.95c.53 0 .95.42.95.95z"/>
+  <path fill="#d1d3d4" d="M7.84 46.17 1.56 49.8s-.35.19-.57-.16c-.23-.36.14-.62.14-.62l6.28-3.63z"/>
+  <path fill="#d63a3a" d="M1.46 36.08a.95.95 0 0 0 .42 1.28.95.95 0 0 0 1.28-.42.95.95 0 0 0-.42-1.28.95.95 0 0 0-1.28.42z"/>
+  <path fill="#d1d3d4" d="m7.12 42.8-4.01-6.04s-.23-.32-.58-.11c-.36.22-.15.62-.15.62l4.01 6.04zm2.57 5.56 3.83 5.81s.23.32.58.11c.36-.22.15-.62.15-.62l-3.79-5.75z"/>
+  <path fill="#d63a3a" d="M13.29 53.85a.95.95 0 0 0 .42 1.28.95.95 0 0 0 1.28-.42.95.95 0 0 0-.42-1.28.95.95 0 0 0-1.28.42z"/>
+  <path fill="#808285" d="m6.07 42.81 1.65-.95.01.01c.42-.24 1-.21 1.65.16 1.29.74 2.33 2.55 2.33 4.04 0 .74-.26 1.27-.68 1.51l-1.65.95z"/>
+  <path fill="#a7a9ac" d="M10.06 47.03c0-1.49-1.04-3.3-2.33-4.04-1.29-.74-2.33-.14-2.33 1.35 0 1.49 1.05 3.3 2.33 4.04 1.29.74 2.33.14 2.33-1.35z"/>
+  <path fill="#808285" d="M8.63 46.21c0-.58-.4-1.28-.9-1.56-.5-.29-.9-.05-.9.52 0 .58.4 1.28.9 1.56.5.29.9.05.9-.52z"/>
+  <path fill="#d1d3d4" d="m16.64 41.03-6.28 3.63s-.35.19-.57-.16c-.23-.36.14-.62.14-.62l6.28-3.63z"/>
+  <path fill="#d63a3a" d="M17.47 40.66a.95.95 0 1 1-.95-.95c.53 0 .95.42.95.95z"/>
+  <path fill="#363636" d="M21.58 29.2v4.79h-.01c0 .2-.13.4-.4.56-.53.31-1.39.31-1.92 0-.27-.15-.4-.35-.4-.56V29.2z"/>
+  <path fill="#5c5c5c" d="M19.25 29.76c.53.31 1.39.31 1.92 0s.53-.8 0-1.11c-.53-.31-1.39-.31-1.92 0-.53.3-.53.8 0 1.11z"/>
+  <path fill="#363636" d="M22.84 23.29v5.7h-.01c0 .39-.26.77-.77 1.07-1.02.59-2.68.59-3.7 0-.51-.3-.77-.68-.77-1.07v-5.7z"/>
+  <path fill="#5c5c5c" d="M18.36 24.36c1.02.59 2.68.59 3.7 0s1.02-1.55 0-2.14c-1.02-.59-2.68-.59-3.7 0-1.03.59-1.02 1.55 0 2.14z"/>
+  <path fill="#a62626" d="m28.8 22.45-8.57 4.95-1.15-15L20.24 5l8.56 4.94z"/>
+  <path fill="#d63a3a" d="M11.67 22.46V9.95L20.24 5l8.56 4.94-8.57 4.95V27.4z"/>
+  <path fill="#808285" d="M25.44 21.55V25l5.79-3.34v-3.45z"/>
+  <path fill="#a7a9ac" d="M25.44 25v-3.45l5.79-3.34-2.44-1.41-5.8 3.34v3.45z"/>
+  <path fill="#808285" d="M25.44 15.81v3.45l5.79-3.35v-3.45z"/>
+  <path fill="#a7a9ac" d="M25.44 19.26v-3.45l5.79-3.35-2.44-1.41-5.8 3.35v3.45z"/>
+  <path fill="#363636" d="M23.38 7.95v1.86c0 .47-.31.94-.93 1.29-1.24.71-3.25.71-4.49 0-.62-.36-.93-.83-.93-1.29V7.95z"/>
+  <path fill="#5c5c5c" d="M17.96 9.25c1.24.72 3.25.72 4.49 0 1.24-.72 1.24-1.88 0-2.59s-3.25-.71-4.49 0c-1.24.71-1.24 1.87 0 2.59z"/>
+  <path fill="#363636" d="M23.03 1.64v6.15c0 .42-.28.84-.83 1.15-1.1.64-2.89.64-4 0-.55-.32-.83-.74-.83-1.15V1.64z"/>
+  <path fill="#5c5c5c" d="M18.21 2.79c1.1.64 2.89.64 4 0 1.1-.64 1.1-1.67 0-2.31-1.1-.64-2.89-.64-4 0-1.1.64-1.1 1.68 0 2.31z"/>
+</svg>
--- a/exercices/atelier/demo/machine-3.svg
+++ b/exercices/atelier/demo/machine-3.svg
@@ -0,0 +1,257 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 40.580 79.180"
+   sodipodi:docname="machine-3.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs4689" />
+  <sodipodi:namedview
+     id="namedview4687"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="9.4342006"
+     inkscape:cx="20.298487"
+     inkscape:cy="39.59"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g4682" />
+  <g
+     id="g4684">
+    <g
+       transform="translate(-175.47,-336.3)"
+       id="g4682"
+       inkscape:label="Layer2">
+      <g
+         id="g4572">
+        <polygon
+           fill="#a62626"
+           points="216.05,391.03 216.05,400.12 207.43,405.1 203.5,394.34 207.49,386.09 "
+           id="polygon4568" />
+        <polygon
+           fill="#d63a3a"
+           points="207.43,395.88 207.43,405.1 198.87,400.16 198.87,390.94 207.49,386.09 216.05,391.03 "
+           id="polygon4570" />
+      </g>
+      <g
+         id="g4578">
+        <polygon
+           fill="#a62626"
+           points="207.05,346.4 207.49,340.2 216.05,345.14 216.05,351.61 210.98,354.53 "
+           id="polygon4574" />
+        <polygon
+           fill="#d63a3a"
+           points="207.49,340.2 216.05,345.14 210.98,347.95 210.98,354.53 202.42,349.59 202.42,343.01 "
+           id="polygon4576" />
+      </g>
+      <g
+         id="g4592">
+        <polygon
+           fill="#808285"
+           points="202.38,341.13 210.98,346.09 210.98,393.89 207.43,395.88 "
+           id="polygon4580" />
+        <polygon
+           fill="#a7a9ac"
+           points="210.98,346.09 207.43,348.14 207.43,395.88 198.84,390.92 198.84,343.17 202.38,341.13 "
+           id="polygon4582" />
+        <polygon
+           fill="#6d6e71"
+           points="200.84,346.56 200.84,387.81 201.85,388.4 201.85,389.22 200.12,388.22 200.12,346.14 "
+           id="polygon4584" />
+        <polygon
+           fill="#808285"
+           points="200.84,387.81 200.84,346.56 201.85,347.14 201.85,388.4 "
+           id="polygon4586" />
+        <polygon
+           fill="#6d6e71"
+           points="204.99,348.93 204.99,390.19 206.01,390.78 206.01,391.6 204.27,390.6 204.27,348.52 "
+           id="polygon4588" />
+        <polygon
+           fill="#808285"
+           points="204.99,390.19 204.99,348.93 206.01,349.52 206.01,390.78 "
+           id="polygon4590" />
+      </g>
+      <g
+         id="g4598">
+        <polygon
+           fill="#a62626"
+           points="189.45,386.86 198.87,375.48 207.43,380.42 207.43,405.1 193.38,413.28 "
+           id="polygon4594" />
+        <polygon
+           fill="#d63a3a"
+           points="198.87,375.48 207.43,380.42 193.38,388.41 193.38,413.28 184.82,408.34 184.82,383.47 "
+           id="polygon4596" />
+      </g>
+      <g
+         id="g4606">
+        <path
+           fill="#808285"
+           d="m 191.63,380.26 v 2.35 h 0.02 c 0,0.6 0.4,1.2 1.19,1.66 1.59,0.92 4.16,0.92 5.75,0 0.79,-0.46 1.19,-1.06 1.19,-1.66 v -2.35 z"
+           id="path4600" />
+        <path
+           fill="#a7a9ac"
+           d="m 198.59,381.92 c -1.59,0.92 -4.16,0.92 -5.75,0 -1.59,-0.92 -1.59,-2.4 0,-3.32 1.59,-0.92 4.16,-0.92 5.75,0 1.59,0.91 1.59,2.4 0,3.32 z"
+           id="path4602" />
+        <path
+           fill="#808285"
+           d="m 196.83,380.9 c -0.61,0.36 -1.61,0.36 -2.22,0 -0.61,-0.35 -0.61,-0.93 0,-1.29 0.61,-0.35 1.61,-0.35 2.23,0 0.6,0.36 0.6,0.93 -0.01,1.29 z"
+           id="path4604" />
+      </g>
+      <g
+         id="g4612">
+        <polygon
+           fill="#a62626"
+           points="185.12,386.38 184.82,372.67 193.38,377.62 193.38,413.28 189.45,415.48 "
+           id="polygon4608" />
+        <polygon
+           fill="#d63a3a"
+           points="184.82,372.67 193.38,377.62 189.45,379.81 189.45,415.48 180.9,410.54 180.9,374.87 "
+           id="polygon4610" />
+      </g>
+      <g
+         id="g4636">
+        <path
+           fill="#d63a3a"
+           d="m 177.37,385.91 c 0,0.53 -0.43,0.95 -0.95,0.95 -0.53,0 -0.95,-0.43 -0.95,-0.95 0,-0.53 0.43,-0.95 0.95,-0.95 0.53,0 0.95,0.42 0.95,0.95 z"
+           id="path4614" />
+        <path
+           fill="#d1d3d4"
+           d="m 183.31,382.47 -6.28,3.63 c 0,0 -0.35,0.19 -0.57,-0.16 -0.23,-0.36 0.14,-0.62 0.14,-0.62 l 6.28,-3.63 z"
+           id="path4616" />
+        <path
+           fill="#d63a3a"
+           d="m 176.93,372.38 c -0.24,0.47 -0.05,1.04 0.42,1.28 0.47,0.24 1.04,0.05 1.28,-0.42 0.24,-0.47 0.05,-1.04 -0.42,-1.28 -0.47,-0.24 -1.04,-0.05 -1.28,0.42 z"
+           id="path4618" />
+        <path
+           fill="#d1d3d4"
+           d="m 182.59,379.1 -4.01,-6.04 c 0,0 -0.23,-0.32 -0.58,-0.11 -0.36,0.22 -0.15,0.62 -0.15,0.62 l 4.01,6.04 z"
+           id="path4620" />
+        <path
+           fill="#d1d3d4"
+           d="m 185.16,384.66 3.83,5.81 c 0,0 0.23,0.32 0.58,0.11 0.36,-0.22 0.15,-0.62 0.15,-0.62 l -3.79,-5.75 z"
+           id="path4622" />
+        <path
+           fill="#d63a3a"
+           d="m 188.76,390.15 c -0.24,0.47 -0.05,1.04 0.42,1.28 0.47,0.24 1.04,0.05 1.28,-0.42 0.24,-0.47 0.05,-1.04 -0.42,-1.28 -0.47,-0.24 -1.04,-0.05 -1.28,0.42 z"
+           id="path4624" />
+        <path
+           fill="#808285"
+           d="m 181.54,379.11 1.65,-0.95 0.01,0.01 c 0.42,-0.24 1,-0.21 1.65,0.16 1.29,0.74 2.33,2.55 2.33,4.04 0,0.74 -0.26,1.27 -0.68,1.51 l -1.65,0.95 z"
+           id="path4626" />
+        <path
+           fill="#a7a9ac"
+           d="m 185.53,383.33 c 0,-1.49 -1.04,-3.3 -2.33,-4.04 -1.29,-0.74 -2.33,-0.14 -2.33,1.35 0,1.49 1.05,3.3 2.33,4.04 1.29,0.74 2.33,0.14 2.33,-1.35 z"
+           id="path4628" />
+        <path
+           fill="#808285"
+           d="m 184.1,382.51 c 0,-0.58 -0.4,-1.28 -0.9,-1.56 -0.5,-0.29 -0.9,-0.05 -0.9,0.52 0,0.58 0.4,1.28 0.9,1.56 0.5,0.29 0.9,0.05 0.9,-0.52 z"
+           id="path4630" />
+        <path
+           fill="#d1d3d4"
+           d="m 192.11,377.33 -6.28,3.63 c 0,0 -0.35,0.19 -0.57,-0.16 -0.23,-0.36 0.14,-0.62 0.14,-0.62 l 6.28,-3.63 z"
+           id="path4632" />
+        <path
+           fill="#d63a3a"
+           d="m 192.94,376.96 c 0,0.53 -0.43,0.95 -0.95,0.95 -0.53,0 -0.95,-0.43 -0.95,-0.95 0,-0.53 0.43,-0.95 0.95,-0.95 0.53,0 0.95,0.42 0.95,0.95 z"
+           id="path4634" />
+      </g>
+      <g
+         id="g4642">
+        <path
+           fill="#363636"
+           d="m 197.05,365.5 v 4.79 h -0.01 c 0,0.2 -0.13,0.4 -0.4,0.56 -0.53,0.31 -1.39,0.31 -1.92,0 -0.27,-0.15 -0.4,-0.35 -0.4,-0.56 v -4.79 z"
+           id="path4638" />
+        <path
+           fill="#5c5c5c"
+           d="m 194.72,366.06 c 0.53,0.31 1.39,0.31 1.92,0 0.53,-0.31 0.53,-0.8 0,-1.11 -0.53,-0.31 -1.39,-0.31 -1.92,0 -0.53,0.3 -0.53,0.8 0,1.11 z"
+           id="path4640" />
+      </g>
+      <g
+         id="g4648">
+        <path
+           fill="#363636"
+           d="m 198.31,359.59 v 5.7 h -0.01 c 0,0.39 -0.26,0.77 -0.77,1.07 -1.02,0.59 -2.68,0.59 -3.7,0 -0.51,-0.3 -0.77,-0.68 -0.77,-1.07 v -5.7 z"
+           id="path4644" />
+        <path
+           fill="#5c5c5c"
+           d="m 193.83,360.66 c 1.02,0.59 2.68,0.59 3.7,0 1.02,-0.59 1.02,-1.55 0,-2.14 -1.02,-0.59 -2.68,-0.59 -3.7,0 -1.03,0.59 -1.02,1.55 0,2.14 z"
+           id="path4646" />
+      </g>
+      <g
+         id="g4654">
+        <polygon
+           fill="#a62626"
+           points="194.55,348.7 195.71,341.3 204.27,346.24 204.27,358.75 195.7,363.7 "
+           id="polygon4650" />
+        <polygon
+           fill="#d63a3a"
+           points="195.71,341.3 204.27,346.24 195.7,351.19 195.7,363.7 187.14,358.76 187.14,346.25 "
+           id="polygon4652" />
+      </g>
+      <g
+         id="g4660">
+        <polygon
+           fill="#808285"
+           points="206.7,357.96 206.7,354.51 200.91,357.85 200.91,361.3 "
+           id="polygon4656" />
+        <polygon
+           fill="#a7a9ac"
+           points="206.7,354.51 204.26,353.1 198.46,356.44 198.46,359.89 200.91,361.3 200.91,357.85 "
+           id="polygon4658" />
+      </g>
+      <g
+         id="g4666">
+        <polygon
+           fill="#808285"
+           points="206.7,352.21 206.7,348.76 200.91,352.11 200.91,355.56 "
+           id="polygon4662" />
+        <polygon
+           fill="#a7a9ac"
+           points="206.7,348.76 204.26,347.35 198.46,350.7 198.46,354.15 200.91,355.56 200.91,352.11 "
+           id="polygon4664" />
+      </g>
+      <g
+         id="g4680">
+        <g
+           id="g4672">
+          <path
+             fill="#363636"
+             d="m 198.85,344.25 v 1.86 c 0,0.47 -0.31,0.94 -0.93,1.29 -1.24,0.71 -3.25,0.71 -4.49,0 -0.62,-0.36 -0.93,-0.83 -0.93,-1.29 v -1.86 z"
+             id="path4668" />
+          <path
+             fill="#5c5c5c"
+             d="m 193.43,345.55 c 1.24,0.72 3.25,0.72 4.49,0 1.24,-0.72 1.24,-1.88 0,-2.59 -1.24,-0.71 -3.25,-0.71 -4.49,0 -1.24,0.71 -1.24,1.87 0,2.59 z"
+             id="path4670" />
+        </g>
+        <g
+           id="g4678">
+          <path
+             fill="#363636"
+             d="m 198.5,337.94 v 6.15 c 0,0.42 -0.28,0.84 -0.83,1.15 -1.1,0.64 -2.89,0.64 -4,0 -0.55,-0.32 -0.83,-0.74 -0.83,-1.15 v -6.15 z"
+             id="path4674" />
+          <path
+             fill="#5c5c5c"
+             d="m 193.68,339.09 c 1.1,0.64 2.89,0.64 4,0 1.1,-0.64 1.1,-1.67 0,-2.31 -1.1,-0.64 -2.89,-0.64 -4,0 -1.1,0.64 -1.1,1.68 0,2.31 z"
+             id="path4676" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-4-o.svg
+++ b/exercices/atelier/demo/machine-4-o.svg
@@ -0,0 +1,51 @@
+<svg viewBox="0 0 89.02 94.63" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#a62626" d="m71.93 72.44 17.09-9.86V14.79L63.41 0l8.52 24.66z"/>
+  <path fill="#d63a3a" d="M63.41 0 46.32 9.87v47.78l25.61 14.79V24.66l17.09-9.87zM0 64.59l17.8 10.28v19.76L0 84.35z"/>
+  <path fill="#808285" d="M64.08 48.15 17.8 74.87 0 64.59v-2.08l55.97-16.33 8.11-.11z"/>
+  <path fill="#a7a9ac" d="M64.08 46.07 17.8 72.79 0 62.51l46.34-26.69z"/>
+  <path fill="#a62626" d="m17.8 74.87 46.28-26.72v19.76L17.8 94.63z"/>
+  <path fill="#6d6e71" d="m15.61 45.63 2.66-1.54c.34-.2.8-.17 1.32.13 1.03.59 1.87 2.04 1.87 3.23 0 .59-.21 1.01-.55 1.21l-2.66 1.55z"/>
+  <path fill="#a7a9ac" d="M18.8 49.01c0-1.19-.84-2.64-1.87-3.23-1.03-.59-1.87-.11-1.87 1.08 0 1.19.84 2.64 1.87 3.23 1.04.59 1.87.11 1.87-1.08z"/>
+  <path fill="#808285" d="M17.66 48.35c0-.46-.32-1.02-.72-1.25-.4-.23-.72-.04-.72.42 0 .46.32 1.02.72 1.25.4.23.72.04.72-.42z"/>
+  <path fill="#808285" d="m10.35 46.93 4.18-2.41c.53-.31 1.26-.26 2.07.21 1.62.93 2.93 3.21 2.93 5.07 0 .93-.33 1.59-.86 1.9l-4.17 2.43z"/>
+  <path fill="#a7a9ac" d="M15.36 52.22c0-1.87-1.31-4.14-2.93-5.07-1.62-.93-2.93-.18-2.93 1.69 0 1.87 1.31 4.14 2.93 5.07 1.62.94 2.93.18 2.93-1.69z"/>
+  <path fill="#808285" d="M13.57 51.19c0-.72-.51-1.6-1.13-1.96-.62-.36-1.13-.07-1.13.65s.51 1.6 1.13 1.96c.62.36 1.13.07 1.13-.65zm33.52-27.05L52.54 21c.69-.4 1.64-.34 2.69.27 2.11 1.21 3.81 4.17 3.81 6.6 0 1.22-.43 2.07-1.12 2.47l-5.43 3.17z"/>
+  <path fill="#a7a9ac" d="M53.62 31.03c0-2.43-1.71-5.39-3.81-6.6S46 24.2 46 26.63s1.71 5.39 3.81 6.6c2.1 1.22 3.8.23 3.81-2.2z"/>
+  <path fill="#808285" d="M51.28 29.68c0-.94-.66-2.08-1.48-2.56-.81-.47-1.47-.09-1.47.85s.66 2.09 1.47 2.56c.82.48 1.48.09 1.48-.85zM14.1 60.53l-1.42-.82v-1.38L50.2 36.66l1.42.82z"/>
+  <path fill="#6d6e71" d="m14.1 59.15 37.52-21.67v1.39L14.1 60.53z"/>
+  <path fill="#808285" d="m16.96 66.38-1.42-.82v-1.39L56.7 40.42l1.42.82z"/>
+  <path fill="#6d6e71" d="m16.96 64.99 41.16-23.75v1.38L16.96 66.38z"/>
+  <path fill="#a62626" d="m12.99 69.39 4.25-2.46V46.81L6.71 40.73l6.28 8.53z"/>
+  <path fill="#d63a3a" d="m6.71 40.73-4.25 2.45v20.13l10.53 6.08V49.26l4.25-2.45z"/>
+  <path fill="#5c5c5c" d="m11.45 51.51-2.81 1.63v11.79l-6.67-3.85V49.29l2.81-1.63z"/>
+  <path fill="#363636" d="m8.64 53.14 2.81-1.63V63.3l-2.81 1.63z"/>
+  <path fill="#f5b400" d="m2.67 55.49 2.66-3 2.66 6.08z"/>
+  <path d="m5.28 52.81 2.34 5.34-4.69-2.71zm.05-.32-2.66 3L8 58.56z"/>
+  <path d="m5.11 54.8.31-.64-.51-.43-.16 1.09.65.55-.55.97.94-.99z"/>
+  <path fill="#a62626" d="m30.44 43.8 4.64-2.68v3.99l-4.64 2.68z"/>
+  <path opacity=".3" d="m30.44 43.8 4.64-2.68v3.99l-4.64 2.68z"/>
+  <path fill="#a62626" d="m28.65 46.75 1.79 1.04v-3.3l13.19 7.61v3.3l1.79 1.03v-5.56l-16.77-9.68z"/>
+  <path fill="#d63a3a" d="M55.55 50.59v-5.57l-16.77-9.68-10.13 5.85 16.77 9.68v5.56z"/>
+  <path fill="#1c4b94" d="m88.15 27.46-4.55 2.63v-2.05l4.55-2.63z"/>
+  <path fill="#2565c4" d="m74.96 41.35-1.07-.61v-2.05l6.12-3.53 1.06.61z"/>
+  <path fill="#1c4b94" d="m74.96 39.3 6.11-3.53v2.05l-6.11 3.53z"/>
+  <path fill="#f5b400" d="m88.15 29.52-4.55 2.63v-1.03l4.55-2.62z"/>
+  <path fill="#d49c00" d="m84.12 24.67-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.32.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M83.1 25.75c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.34.2-.6.04-.6-.34z"/>
+  <path fill="#d49c00" d="m86.3 23.41-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.33.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M85.28 24.49c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.33.2-.6.04-.6-.34z"/>
+  <path fill="#d49c00" d="m88.37 22.22-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.32.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M87.35 23.3c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.33.19-.6.04-.6-.34z"/>
+  <path fill="#d49c00" d="m84.12 22.22-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.32.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M83.1 23.3c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.34.19-.6.04-.6-.34z"/>
+  <path fill="#d49c00" d="m86.3 20.96-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.32.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M85.28 22.04c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.33.19-.6.04-.6-.34z"/>
+  <path fill="#d49c00" d="m88.37 19.76-.72-.42c-.11-.06-.26-.05-.42.04-.33.19-.6.65-.6 1.03 0 .19.07.32.17.39l.72.42z"/>
+  <path fill="#f5b400" d="M87.35 20.84c0-.38.27-.84.6-1.03.33-.19.6-.04.6.34s-.27.84-.6 1.03c-.33.2-.6.04-.6-.34z"/>
+  <path fill="#2565c4" d="m80.36 24.85.06-.13-.8-.46c-.85-.41-1.93-.24-3.01.38-1.14.66-2.27 1.81-3.14 3.32-1.7 2.95-1.73 6.13-.09 7.2l.88.51.07-.18c.7.08 1.49-.13 2.28-.59 1.14-.66 2.68-1.41 3.55-2.91 1.5-2.61 1.29-5.79.2-7.14zm-3.75.78c.81-.47 1.58-.6 2.2-.39l-1.8 3.13c-.12.01-.26.06-.41.14-.14.08-.27.19-.39.31l-1.47-.85c.64-.92 1.06-1.87 1.87-2.34zm-2.79 8.32c-1.03-.89-.6-2.76.42-4.85l1.37.79c-.05.17-.07.33-.07.49 0 .17.03.32.08.43zm2.79-.06c-.51.29-1 .45-1.44.48-.26.02.35-.41.13-.48l1.32-2.17c.11-.02-.13-.64 0-.71.14-.08.27-.19.39-.31l1.81 1.04c-.64.93-1.4 1.68-2.21 2.15zm2.81-3.21-1.81-1.04c.05-.17.07-.33.07-.49 0-.15.46-.04.41-.15l1.47-2.56c.15.13.14-.54.24-.35.24.42.37.97.37 1.62.01.92-.25 1.96-.75 2.97z"/>
+  <path fill="#1c4b94" d="M80.5 24.75c-.87-.5-2-.35-3.14.31-1.14.66-2.27 1.81-3.14 3.32-1.73 3-1.73 6.25 0 7.25.87.5 2 .35 3.14-.31 1.14-.66 2.27-1.81 3.14-3.31 1.73-3.01 1.73-6.26 0-7.26zm-2.14 5.31c.05-.17.07-.33.07-.49 0-.15-.02-.28-.07-.39l1.81-3.15c.49.44.76 1.17.76 2.1 0 .93-.27 1.97-.76 2.98zm1.2-4.39-1.8 3.13c-.13.01-.26.06-.41.14-.14.08-.27.19-.39.31l-1.81-1.04c.63-.93 1.39-1.68 2.2-2.15.81-.46 1.58-.6 2.21-.39zm-5.02 3.6 1.81 1.05c-.05.17-.07.33-.07.49 0 .17.03.31.08.43l-1.8 3.13c-1.03-.89-1.03-3.01-.02-5.1zm.64 5.45 1.81-3.15c.12-.02.24-.06.37-.14.14-.08.27-.19.39-.31l1.81 1.05c-.63.93-1.39 1.68-2.2 2.15-.8.46-1.56.59-2.18.4z"/>
+  <path fill="#d49c00" d="m78.21 30.03-.49-.28c-.07-.04-.17-.04-.28.03-.22.13-.4.44-.4.69 0 .13.04.22.12.26l.49.28z"/>
+  <path fill="#f5b400" d="M77.52 30.75c0-.25.18-.57.4-.69.22-.13.4-.02.4.23 0 .26-.18.57-.4.69-.22.13-.4.03-.4-.23z"/>
+  <path fill="#808285" d="m39.88 45.28-7.5-4.33V38.6l13.04 1.12v2.36z"/>
+  <path fill="#a7a9ac" d="m32.38 38.6 5.54-3.2 7.5 4.32-5.54 3.2z"/>
+</svg>
--- a/exercices/atelier/demo/machine-4.svg
+++ b/exercices/atelier/demo/machine-4.svg
@@ -0,0 +1,322 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 89.020 94.630"
+   sodipodi:docname="machine-4.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs5764" />
+  <sodipodi:namedview
+     id="namedview5762"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="7.8939026"
+     inkscape:cx="44.528039"
+     inkscape:cy="47.315"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g5755" />
+  <g
+     id="g5759">
+    <g
+       transform="translate(-320.33,-100.29)"
+       id="g5757">
+      <g
+         id="g5755"
+         inkscape:label="Layer2">
+        <g
+           id="g5609">
+          <polygon
+             fill="#a62626"
+             points="383.74,100.29 392.26,124.95 392.26,172.73 409.35,162.87 409.35,115.08 "
+             id="polygon5605" />
+          <polygon
+             fill="#d63a3a"
+             points="392.26,172.73 392.26,124.95 409.35,115.08 383.74,100.29 366.65,110.16 366.65,157.94 "
+             id="polygon5607" />
+        </g>
+        <g
+           id="g5619">
+          <polygon
+             fill="#d63a3a"
+             points="320.33,184.64 320.33,164.88 338.13,175.16 338.13,194.92 "
+             id="polygon5611" />
+          <polygon
+             fill="#808285"
+             points="320.33,162.8 376.3,146.47 384.41,146.36 384.41,148.44 338.13,175.16 320.33,164.88 "
+             id="polygon5613" />
+          <polygon
+             fill="#a7a9ac"
+             points="366.67,136.11 384.41,146.36 338.13,173.08 320.33,162.8 "
+             id="polygon5615" />
+          <polygon
+             fill="#a62626"
+             points="338.13,194.92 338.13,175.16 384.41,148.44 384.41,168.2 "
+             id="polygon5617" />
+        </g>
+        <g
+           id="g5627">
+          <path
+             fill="#6d6e71"
+             d="m 335.94,145.92 2.66,-1.54 c 0.34,-0.2 0.8,-0.17 1.32,0.13 1.03,0.59 1.87,2.04 1.87,3.23 0,0.59 -0.21,1.01 -0.55,1.21 l -2.66,1.55 z"
+             id="path5621" />
+          <path
+             fill="#a7a9ac"
+             d="m 339.13,149.3 c 0,-1.19 -0.84,-2.64 -1.87,-3.23 -1.03,-0.59 -1.87,-0.11 -1.87,1.08 0,1.19 0.84,2.64 1.87,3.23 1.04,0.59 1.87,0.11 1.87,-1.08 z"
+             id="path5623" />
+          <path
+             fill="#808285"
+             d="m 337.99,148.64 c 0,-0.46 -0.32,-1.02 -0.72,-1.25 -0.4,-0.23 -0.72,-0.04 -0.72,0.42 0,0.46 0.32,1.02 0.72,1.25 0.4,0.23 0.72,0.04 0.72,-0.42 z"
+             id="path5625" />
+        </g>
+        <g
+           id="g5635">
+          <path
+             fill="#808285"
+             d="m 330.68,147.22 4.18,-2.41 c 0.53,-0.31 1.26,-0.26 2.07,0.21 1.62,0.93 2.93,3.21 2.93,5.07 0,0.93 -0.33,1.59 -0.86,1.9 l -4.17,2.43 z"
+             id="path5629" />
+          <path
+             fill="#a7a9ac"
+             d="m 335.69,152.51 c 0,-1.87 -1.31,-4.14 -2.93,-5.07 -1.62,-0.93 -2.93,-0.18 -2.93,1.69 0,1.87 1.31,4.14 2.93,5.07 1.62,0.94 2.93,0.18 2.93,-1.69 z"
+             id="path5631" />
+          <path
+             fill="#808285"
+             d="m 333.9,151.48 c 0,-0.72 -0.51,-1.6 -1.13,-1.96 -0.62,-0.36 -1.13,-0.07 -1.13,0.65 0,0.72 0.51,1.6 1.13,1.96 0.62,0.36 1.13,0.07 1.13,-0.65 z"
+             id="path5633" />
+        </g>
+        <g
+           id="g5643">
+          <path
+             fill="#808285"
+             d="m 367.42,124.43 5.45,-3.14 c 0.69,-0.4 1.64,-0.34 2.69,0.27 2.11,1.21 3.81,4.17 3.81,6.6 0,1.22 -0.43,2.07 -1.12,2.47 l -5.43,3.17 z"
+             id="path5637" />
+          <path
+             fill="#a7a9ac"
+             d="m 373.95,131.32 c 0,-2.43 -1.71,-5.39 -3.81,-6.6 -2.1,-1.21 -3.81,-0.23 -3.81,2.2 0,2.43 1.71,5.39 3.81,6.6 2.1,1.22 3.8,0.23 3.81,-2.2 z"
+             id="path5639" />
+          <path
+             fill="#808285"
+             d="m 371.61,129.97 c 0,-0.94 -0.66,-2.08 -1.48,-2.56 -0.81,-0.47 -1.47,-0.09 -1.47,0.85 0,0.94 0.66,2.09 1.47,2.56 0.82,0.48 1.48,0.09 1.48,-0.85 z"
+             id="path5641" />
+        </g>
+        <g
+           id="g5649">
+          <polygon
+             fill="#808285"
+             points="370.53,136.95 371.95,137.77 334.43,160.82 333.01,160 333.01,158.62 "
+             id="polygon5645" />
+          <polygon
+             fill="#6d6e71"
+             points="334.43,160.82 334.43,159.44 371.95,137.77 371.95,139.16 "
+             id="polygon5647" />
+        </g>
+        <g
+           id="g5655">
+          <polygon
+             fill="#808285"
+             points="377.03,140.71 378.45,141.53 337.29,166.67 335.87,165.85 335.87,164.46 "
+             id="polygon5651" />
+          <polygon
+             fill="#6d6e71"
+             points="337.29,166.67 337.29,165.28 378.45,141.53 378.45,142.91 "
+             id="polygon5653" />
+        </g>
+        <g
+           id="g5661">
+          <polygon
+             fill="#a62626"
+             points="327.04,141.02 333.32,149.55 333.32,169.68 337.57,167.22 337.57,147.1 "
+             id="polygon5657" />
+          <polygon
+             fill="#d63a3a"
+             points="333.32,169.68 333.32,149.55 337.57,147.1 327.04,141.02 322.79,143.47 322.79,163.6 "
+             id="polygon5659" />
+        </g>
+        <g
+           id="g5675">
+          <polygon
+             fill="#5c5c5c"
+             points="322.3,161.37 322.3,149.58 325.11,147.95 331.78,151.8 328.97,153.43 328.97,165.22 "
+             id="polygon5663" />
+          <polygon
+             fill="#363636"
+             points="328.97,165.22 328.97,153.43 331.78,151.8 331.78,163.59 "
+             id="polygon5665" />
+          <g
+             id="g5673">
+            <polygon
+               fill="#f5b400"
+               points="323,155.78 325.66,152.78 328.32,158.86 "
+               id="polygon5667" />
+            <path
+               d="m 325.61,153.1 2.34,5.34 -4.69,-2.71 z m 0.05,-0.32 -2.66,3 5.33,3.07 z"
+               id="path5669" />
+            <polygon
+               points="325.08,155.11 325.73,155.66 325.18,156.63 326.12,155.64 325.44,155.09 325.75,154.45 325.24,154.02 "
+               id="polygon5671" />
+          </g>
+        </g>
+        <g
+           id="g5685">
+          <polygon
+             fill="#a62626"
+             points="350.77,148.08 350.77,144.09 355.41,141.41 355.41,145.4 "
+             id="polygon5677" />
+          <polygon
+             opacity="0.3"
+             points="350.77,148.08 350.77,144.09 355.41,141.41 355.41,145.4 "
+             id="polygon5679" />
+          <polygon
+             fill="#a62626"
+             points="363.96,152.39 363.96,155.69 365.75,156.72 365.75,151.16 348.98,141.48 348.98,147.04 350.77,148.08 350.77,144.78 "
+             id="polygon5681" />
+          <polygon
+             fill="#d63a3a"
+             points="348.98,141.48 365.75,151.16 365.75,156.72 375.88,150.88 375.88,145.31 359.11,135.63 "
+             id="polygon5683" />
+        </g>
+        <polygon
+           fill="#1c4b94"
+           points="408.48,125.7 408.48,127.75 403.93,130.38 403.93,128.33 "
+           id="polygon5687" />
+        <g
+           id="g5693">
+          <polygon
+             fill="#2565c4"
+             points="400.34,135.45 401.4,136.06 395.29,141.64 394.22,141.03 394.22,138.98 "
+             id="polygon5689" />
+          <polygon
+             fill="#1c4b94"
+             points="395.29,141.64 395.29,139.59 401.4,136.06 401.4,138.11 "
+             id="polygon5691" />
+        </g>
+        <polygon
+           fill="#f5b400"
+           points="408.48,128.79 408.48,129.81 403.93,132.44 403.93,131.41 "
+           id="polygon5695" />
+        <g
+           id="g5733">
+          <g
+             id="g5701">
+            <path
+               fill="#d49c00"
+               d="m 404.45,124.96 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.32 0.17,0.39 l 0.72,0.42 z"
+               id="path5697" />
+            <path
+               fill="#f5b400"
+               d="m 403.43,126.04 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.34,0.2 -0.6,0.04 -0.6,-0.34 z"
+               id="path5699" />
+          </g>
+          <g
+             id="g5707">
+            <path
+               fill="#d49c00"
+               d="m 406.63,123.7 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.33 0.17,0.39 l 0.72,0.42 z"
+               id="path5703" />
+            <path
+               fill="#f5b400"
+               d="m 405.61,124.78 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.33,0.2 -0.6,0.04 -0.6,-0.34 z"
+               id="path5705" />
+          </g>
+          <g
+             id="g5713">
+            <path
+               fill="#d49c00"
+               d="m 408.7,122.51 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.32 0.17,0.39 l 0.72,0.42 z"
+               id="path5709" />
+            <path
+               fill="#f5b400"
+               d="m 407.68,123.59 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.33,0.19 -0.6,0.04 -0.6,-0.34 z"
+               id="path5711" />
+          </g>
+          <g
+             id="g5719">
+            <path
+               fill="#d49c00"
+               d="m 404.45,122.51 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.32 0.17,0.39 l 0.72,0.42 z"
+               id="path5715" />
+            <path
+               fill="#f5b400"
+               d="m 403.43,123.59 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.34,0.19 -0.6,0.04 -0.6,-0.34 z"
+               id="path5717" />
+          </g>
+          <g
+             id="g5725">
+            <path
+               fill="#d49c00"
+               d="m 406.63,121.25 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.32 0.17,0.39 l 0.72,0.42 z"
+               id="path5721" />
+            <path
+               fill="#f5b400"
+               d="m 405.61,122.33 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.33,0.19 -0.6,0.04 -0.6,-0.34 z"
+               id="path5723" />
+          </g>
+          <g
+             id="g5731">
+            <path
+               fill="#d49c00"
+               d="m 408.7,120.05 -0.72,-0.42 v 0 c -0.11,-0.06 -0.26,-0.05 -0.42,0.04 -0.33,0.19 -0.6,0.65 -0.6,1.03 0,0.19 0.07,0.32 0.17,0.39 l 0.72,0.42 z"
+               id="path5727" />
+            <path
+               fill="#f5b400"
+               d="m 407.68,121.13 c 0,-0.38 0.27,-0.84 0.6,-1.03 0.33,-0.19 0.6,-0.04 0.6,0.34 0,0.38 -0.27,0.84 -0.6,1.03 -0.33,0.2 -0.6,0.04 -0.6,-0.34 z"
+               id="path5729" />
+          </g>
+        </g>
+        <g
+           id="g5747">
+          <g
+             id="g5739">
+            <path
+               fill="#2565c4"
+               d="m 400.69,125.14 0.06,-0.13 -0.8,-0.46 v 0 c -0.85,-0.41 -1.93,-0.24 -3.01,0.38 -1.14,0.66 -2.27,1.81 -3.14,3.32 -1.7,2.95 -1.73,6.13 -0.09,7.2 l 0.88,0.51 0.07,-0.18 c 0.7,0.08 1.49,-0.13 2.28,-0.59 1.14,-0.66 2.68,-1.41 3.55,-2.91 1.5,-2.61 1.29,-5.79 0.2,-7.14 z m -3.75,0.78 c 0.81,-0.47 1.58,-0.6 2.2,-0.39 l -1.8,3.13 c -0.12,0.01 -0.26,0.06 -0.41,0.14 -0.14,0.08 -0.27,0.19 -0.39,0.31 l -1.47,-0.85 c 0.64,-0.92 1.06,-1.87 1.87,-2.34 z m -2.79,8.32 c -1.03,-0.89 -0.6,-2.76 0.42,-4.85 l 1.37,0.79 c -0.05,0.17 -0.07,0.33 -0.07,0.49 0,0.17 0.03,0.32 0.08,0.43 z m 2.79,-0.06 c -0.51,0.29 -1,0.45 -1.44,0.48 -0.26,0.02 0.35,-0.41 0.13,-0.48 l 1.32,-2.17 c 0.11,-0.02 -0.13,-0.64 0,-0.71 0.14,-0.08 0.27,-0.19 0.39,-0.31 l 1.81,1.04 c -0.64,0.93 -1.4,1.68 -2.21,2.15 z m 2.81,-3.21 -1.81,-1.04 c 0.05,-0.17 0.07,-0.33 0.07,-0.49 0,-0.15 0.46,-0.04 0.41,-0.15 l 1.47,-2.56 c 0.15,0.13 0.14,-0.54 0.24,-0.35 0.24,0.42 0.37,0.97 0.37,1.62 0.01,0.92 -0.25,1.96 -0.75,2.97 z"
+               id="path5735" />
+            <path
+               fill="#1c4b94"
+               d="m 400.83,125.04 c -0.87,-0.5 -2,-0.35 -3.14,0.31 -1.14,0.66 -2.27,1.81 -3.14,3.32 -1.73,3 -1.73,6.25 0,7.25 0.87,0.5 2,0.35 3.14,-0.31 1.14,-0.66 2.27,-1.81 3.14,-3.31 1.73,-3.01 1.73,-6.26 0,-7.26 z m -2.14,5.31 c 0.05,-0.17 0.07,-0.33 0.07,-0.49 0,-0.15 -0.02,-0.28 -0.07,-0.39 l 1.81,-3.15 c 0.49,0.44 0.76,1.17 0.76,2.1 0,0.93 -0.27,1.97 -0.76,2.98 z m 1.2,-4.39 -1.8,3.13 c -0.13,0.01 -0.26,0.06 -0.41,0.14 -0.14,0.08 -0.27,0.19 -0.39,0.31 l -1.81,-1.04 c 0.63,-0.93 1.39,-1.68 2.2,-2.15 0.81,-0.46 1.58,-0.6 2.21,-0.39 z m -5.02,3.6 1.81,1.05 c -0.05,0.17 -0.07,0.33 -0.07,0.49 0,0.17 0.03,0.31 0.08,0.43 l -1.8,3.13 c -1.03,-0.89 -1.03,-3.01 -0.02,-5.1 z m 0.64,5.45 1.81,-3.15 c 0.12,-0.02 0.24,-0.06 0.37,-0.14 0.14,-0.08 0.27,-0.19 0.39,-0.31 l 1.81,1.05 c -0.63,0.93 -1.39,1.68 -2.2,2.15 -0.8,0.46 -1.56,0.59 -2.18,0.4 z"
+               id="path5737" />
+          </g>
+          <g
+             id="g5745">
+            <path
+               fill="#d49c00"
+               d="m 398.54,130.32 -0.49,-0.28 v 0 c -0.07,-0.04 -0.17,-0.04 -0.28,0.03 -0.22,0.13 -0.4,0.44 -0.4,0.69 0,0.13 0.04,0.22 0.12,0.26 l 0.49,0.28 z"
+               id="path5741" />
+            <path
+               fill="#f5b400"
+               d="m 397.85,131.04 c 0,-0.25 0.18,-0.57 0.4,-0.69 0.22,-0.13 0.4,-0.02 0.4,0.23 0,0.26 -0.18,0.57 -0.4,0.69 -0.22,0.13 -0.4,0.03 -0.4,-0.23 z"
+               id="path5743" />
+          </g>
+        </g>
+        <g
+           id="g5753">
+          <polygon
+             fill="#808285"
+             points="365.75,140.01 365.75,142.37 360.21,145.57 352.71,141.24 352.71,138.89 "
+             id="polygon5749" />
+          <polygon
+             fill="#a7a9ac"
+             points="360.21,143.21 352.71,138.89 358.25,135.69 365.75,140.01 "
+             id="polygon5751" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-5-o.svg
+++ b/exercices/atelier/demo/machine-5-o.svg
@@ -0,0 +1,168 @@
+<svg viewBox="0 0 63.25 97.19" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#f80" d="M44.2 66.93V9.85L33.03 3.4l-2.35 14.26v57.08z"/>
+  <path fill="orange" d="M44.2 9.85 27.14 0 13.62 7.81v57.08l17.06 9.85V17.66z"/>
+  <path fill="#a62626" d="m23.86 26.37 1.37-.79v.01c.2-.12.49-.1.8.08.62.36 1.13 1.24 1.13 1.96 0 .36-.13.62-.33.73l-1.37.79z"/>
+  <path fill="#d63a3a" d="M25.79 28.41c0-.72-.51-1.6-1.13-1.96-.62-.36-1.13-.07-1.13.65s.51 1.6 1.13 1.96c.63.37 1.13.08 1.13-.65z"/>
+  <path fill="#1c4b94" d="m23.2 15.43.46-.26c.07-.04.16-.03.27.03.21.12.38.41.38.66 0 .12-.04.21-.11.25l-.46.27z"/>
+  <path fill="#2565c4" d="M23.84 16.11c0-.24-.17-.54-.38-.66s-.38-.02-.38.22.17.53.38.65c.21.13.38.03.38-.21z"/>
+  <path fill="#1c4b94" d="m23.2 18.06.46-.27c.07-.04.16-.03.27.03.21.12.38.41.38.65 0 .12-.04.21-.11.25l-.46.27z"/>
+  <path fill="#2565c4" d="M23.84 18.74c0-.24-.17-.53-.38-.66-.21-.12-.38-.02-.38.22s.17.53.38.65c.21.13.38.03.38-.21z"/>
+  <path fill="#1c4b94" d="m23.2 20.68.46-.27c.07-.04.16-.03.27.03.21.12.38.41.38.66 0 .12-.04.21-.11.25l-.46.26z"/>
+  <path fill="#2565c4" d="M23.84 21.36c0-.24-.17-.53-.38-.66-.21-.12-.38-.02-.38.22s.17.53.38.65c.21.13.38.04.38-.21z"/>
+  <path fill="#f80" d="m14.88 10 .54.31v8.55l6.93 4v.64l-7.47-4.31z"/>
+  <path fill="#0d0d0d" d="m15.42 10.31 6.93 4v8.55l-6.93-4z"/>
+  <path fill="#75c425" d="m15.94 11.74 5.46 3.15v.43l-5.46-3.15zm0 1.18 5.46 3.15v.43l-5.46-3.15zm0 1.06 5.46 3.16v.43l-5.46-3.16zm0 2.26 2.73 1.57v.43l-2.73-1.57zm0 1 4.39 2.52v.43l-4.39-2.52z"/>
+  <path fill="#1c4b94" d="m25.82 15.68 3.26 1.89v1.6l-.46.28-3.27-3.49z"/>
+  <path fill="#2565c4" d="M28.62 17.85v1.6l-3.27-1.89v-1.6z"/>
+  <path fill="#a62626" d="m25.82 18.31 3.26 1.89v1.6l-.46.28-3.27-3.49z"/>
+  <path fill="#d63a3a" d="M28.62 20.47v1.61l-3.27-1.89v-1.6z"/>
+  <path fill="#61a31f" d="m25.82 20.94 3.26 1.88v1.61l-.46.27-3.27-3.49z"/>
+  <path fill="#75c425" d="M28.62 23.1v1.6l-3.27-1.89v-1.6z"/>
+  <path d="M24.15 23.71c.07.12.17.22.25.27.1.05.14.04.14-.03s-.06-.13-.15-.23l-.13-.14c-.11-.11-.21-.27-.21-.44 0-.2.15-.27.37-.14.12.07.24.19.33.35l-.12.1a.742.742 0 0 0-.21-.22c-.08-.05-.13-.04-.13.03s.07.14.16.23l.13.14c.12.13.2.27.2.44 0 .2-.14.29-.39.14-.13-.08-.28-.22-.38-.39zm.98-.06-.28-.16v-.22l.8.46v.23l-.28-.16v.96l-.23-.13v-.98zm1.09 1.3-.31-.18-.06.25-.24-.14.32-1 .28.16.32 1.37-.25-.14zm-.05-.23-.02-.12a5.47 5.47 0 0 1-.08-.43h-.01c-.02.11-.05.23-.08.33l-.02.09zm1.02 1.08-.2-.54-.13-.07v.43l-.23-.13v-1.18l.37.21c.22.13.39.32.39.6 0 .17-.07.24-.18.24l.23.61zm-.32-.83.12.07c.12.07.19.05.19-.07 0-.12-.07-.19-.19-.26l-.12-.07zm.91.21-.28-.16v-.23l.8.46v.22l-.28-.16v.96l-.23-.13v-.96zm-12.84-4.15v1.5l1.3.74v-1.49zm0 1.98v1.49l1.3.75v-1.49z" fill="#d63a3a"/>
+  <path fill="#75c425" d="M14.94 24.99v1.49l1.3.75v-1.49z"/>
+  <path fill="#d63a3a" d="M16.66 22.02v1.5l1.29.74v-1.49z"/>
+  <path fill="#2565c4" d="M16.66 24v1.49l1.29.75v-1.49z"/>
+  <path fill="#75c425" d="M16.66 25.98v1.49l1.29.75v-1.49z"/>
+  <path fill="#2565c4" d="m19.66 23.76-1.29-.75v1.49l1.29.75z"/>
+  <path fill="#d63a3a" d="M18.37 24.99v1.49l1.29.75v-1.49zm0 1.98v1.49l1.29.75v-1.49z"/>
+  <path opacity=".3" d="M26.38 9.64c1.06.61 2.78.61 3.84 0s1.06-1.6 0-2.21c-1.06-.61-2.78-.61-3.84 0s-1.06 1.6 0 2.21z"/>
+  <path fill="#0d0d0d" d="M30.67 7.13v1.21h-.01c0 .35-.23.7-.69.96-.92.53-2.42.53-3.34 0-.46-.27-.69-.62-.69-.96V7.13z"/>
+  <path fill="#232323" d="M26.63 8.09c.92.53 2.42.53 3.34 0 .92-.53.92-1.4 0-1.93s-2.42-.53-3.34 0c-.92.54-.92 1.4 0 1.93z"/>
+  <path fill="#a62626" d="M28.3 8.19c-.53 0-1.03-.12-1.41-.34-.43-.25-.66-.59-.66-.97V4.12c0-1.14.93-2.07 2.07-2.07 1.14 0 2.07.93 2.07 2.07v2.76c0 .38-.23.72-.66.97-.38.22-.88.34-1.41.34zm0-5.61c-.85 0-1.55.69-1.55 1.55v2.76c0 .18.15.37.4.51.3.17.72.27 1.15.27.43 0 .85-.1 1.15-.27.25-.15.4-.33.4-.51V4.13c0-.86-.7-1.55-1.55-1.55z"/>
+  <path fill="#d63a3a" d="M28.3 2.58c-.85 0-1.55.69-1.55 1.55v2.76c0 .18.15.37.4.51.3.17.72.27 1.15.27.43 0 .85-.1 1.15-.27.25-.15.4-.33.4-.51V4.13c0-.86-.7-1.55-1.55-1.55z"/>
+  <path fill="#f5b400" d="M28.88 5.31c0 .66-.26 1.2-.58 1.2-.32 0-.58-.54-.58-1.2 0-.66.26-1.2.58-1.2.32 0 .58.53.58 1.2z"/>
+  <path fill="#5c5c5c" d="m22.69 32.28 5.92 3.42-2.5 1.44v10.47l-5.92-3.42V33.72z"/>
+  <path fill="#363636" d="M28.61 35.7v10.47l-2.5 1.44V37.14z"/>
+  <path fill="#f5b400" d="m25.54 41.96-4.73-2.73 2.36-2.66z"/>
+  <path d="m23.13 36.85 2.08 4.75-4.16-2.4zm.04-.28-2.36 2.66 4.73 2.73z"/>
+  <path d="m23.25 38.05-.45-.38-.14.97.58.49-.5.86.84-.88-.61-.49z"/>
+  <path fill="#f80" d="M4.86 65.7 49.37 40l1.89 3.41-.01 19.38-48.3 27.89.01-19.39z"/>
+  <path fill="orange" d="m3.85 65.11 1.01.59-1.9 5.59-1.01-.58z"/>
+  <path fill="#ffb833" d="m3.85 65.11 44.51-25.69 1.01.58L4.86 65.7z"/>
+  <path fill="orange" d="m1.95 70.71 12.29 7.09-.01 19.39L1.94 90.1zm10.14-5.37v.57l5.09-2.94v-3.18l-.39.22v2.61z"/>
+  <path fill="#eb7600" d="M12.09 62.73v2.61l4.7-2.72v-2.61z"/>
+  <path fill="orange" d="m4.97 70.02 5.97-3.45v-3.18l-.39.23v2.6l-5.3 3.06z"/>
+  <path fill="#eb7600" d="m5.25 69.28 5.3-3.06v-2.6l-4.02 2.32z"/>
+  <path fill="orange" d="M43.33 47.3v.57l5.96-3.44-1.56-2.28-.11.06 1.28 1.87z"/>
+  <path fill="#eb7600" d="M43.33 44.69v2.61l5.57-3.22-1.28-1.87z"/>
+  <path fill="orange" d="M18.33 61.73v.58l5.09-2.94v-3.19l-.38.23v2.61z"/>
+  <path fill="#eb7600" d="M18.33 59.13v2.6l4.71-2.71v-2.61z"/>
+  <path fill="orange" d="M24.57 58.13v.58l5.09-2.95v-3.18l-.38.23v2.6z"/>
+  <path fill="#eb7600" d="M24.57 55.52v2.61l4.71-2.72v-2.6z"/>
+  <path fill="orange" d="M30.81 54.53v.57l5.09-2.94v-3.18l-.38.22v2.61z"/>
+  <path fill="#eb7600" d="M30.81 51.92v2.61l4.71-2.72V49.2z"/>
+  <path fill="orange" d="M37.05 50.92v.58l5.09-2.94v-3.19l-.38.23v2.61z"/>
+  <path fill="#eb7600" d="M37.05 48.32v2.6l4.71-2.71V45.6z"/>
+  <path fill="#5c5c5c" d="m54.4 40.69-.06-.03c-.25-.13-.59-.1-.97.12l-17.26 9.97-34.7 20.02c-.05.03-.1.06-.14.09-.71.5-1.27 1.52-1.27 2.36v.13c0 .45.16.76.41.91 0 0 .01 0 .01.01l8.51 4.91 53.91-33.62z"/>
+  <path fill="#212121" d="M62.96 46.64v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.36.21-.69.2-.9.01.16.01.34-.04.54-.15l51.96-30c.62-.36 1.13-1.24 1.13-1.96v-.13c0-.3-.09-.52-.23-.66.35.01.59.31.59.8z"/>
+  <path fill="#878787" d="M62.6 46.49v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.19.11-.38.16-.54.15-.15-.14-.24-.36-.24-.66v-.13c0-.72.51-1.6 1.13-1.96l51.96-30c.19-.11.38-.16.54-.16.15.15.24.37.24.67z"/>
+  <path fill="#363636" d="M61.83 45.99c.62-.36 1.13-.07 1.13.65v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.62.36-1.13.07-1.13-.65v-.13c0-.72.51-1.6 1.13-1.96zm0-.33-51.96 30c-.78.45-1.42 1.55-1.42 2.45v.13c0 .9.64 1.27 1.42.82l51.96-30c.78-.45 1.42-1.55 1.42-2.45v-.13c-.01-.91-.64-1.27-1.42-.82zm-26.6 5.59.56-.33 8.46 4.89-.56.32z"/>
+  <path fill="#363636" d="m32.96 52.56.56-.33 8.46 4.89-.55.32zm-2.26 1.3.56-.32 8.46 4.88-.56.33zm-2.27 1.31.56-.32 8.47 4.88-.56.32zm-2.26 1.31.56-.33 8.46 4.89-.56.32zm-2.26 1.31.56-.33 8.46 4.89-.56.32zm-2.27 1.3.56-.32 8.46 4.88-.56.33zm-2.26 1.31.56-.32 8.46 4.88-.56.32zm-2.27 1.31.56-.33 8.46 4.89-.56.32zM51.08 42.1l.56-.33 8.46 4.89-.56.32zm-2.26 1.3.56-.32 8.46 4.88-.56.33zm-2.27 1.31.56-.32 8.46 4.88-.56.33zm-2.26 1.31.56-.33 8.46 4.89-.56.32zm-2.27 1.31.56-.33 8.46 4.89-.56.32zm-2.26 1.3.56-.32 8.46 4.88-.56.33zm-2.27 1.31.56-.32 8.46 4.88-.56.32zM14.85 63.02l.56-.33 8.46 4.89-.56.32zm-2.27 1.3.56-.32 8.46 4.88-.56.33zm-2.26 1.31.56-.32 8.46 4.88-.56.33zm-2.27 1.31.56-.33 8.46 4.89-.56.32zm-2.26 1.3.56-.32 8.46 4.89-.56.32zm-2.27 1.31.56-.32 8.46 4.88-.56.33zm-2.25 1.31.55-.32 8.46 4.88-.56.32z"/>
+  <path fill="#a6a6a6" d="m13.07 75.07-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M13.26 75.55c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M12.87 75.77c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M12.69 75.68c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.12.05.19z"/>
+  <path fill="#a6a6a6" d="m17.6 72.46-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M17.79 72.93c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45 0-.49.35-1.1.78-1.35.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M17.4 73.16c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M17.22 73.07c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m21.56 70.17-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M21.75 70.65c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M21.36 70.87c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M21.18 70.78c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m25.53 67.88-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M25.71 68.36c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.44-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M25.32 68.58c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M25.15 68.49c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.12.05.19z"/>
+  <path fill="#a6a6a6" d="m29.49 65.59-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08a.57.57 0 0 0 .25-.1c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M29.68 66.07c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M29.29 66.29c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M29.11 66.21c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.03.05.05.12.05.2z"/>
+  <path fill="#a6a6a6" d="m33.45 63.31-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M33.64 63.78c0 .5-.35 1.1-.78 1.35-.43.25-.78.04-.78-.45 0-.5.35-1.1.78-1.35.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M33.25 64.01c0 .25-.17.55-.39.68-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14-.02.23.09.23.27z"/>
+  <path fill="#4a4a4a" d="M33.07 63.92c0 .25-.18.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.03.06.05.12.05.2z"/>
+  <path fill="#a6a6a6" d="m37.42 61.02-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M37.61 61.49c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M37.22 61.72c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13-.01.23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M37.04 61.63c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m41.38 58.73-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08a.57.57 0 0 0 .25-.1c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M41.57 59.2c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M41.18 59.43c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M41 59.34c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m45.34 56.44-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M45.53 56.92c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M45.14 57.14c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M44.96 57.05c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m49.31 54.15-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M49.5 54.63c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M49.11 54.85c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M48.93 54.76c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67a.27.27 0 0 1 .16-.05c.03.05.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m53.27 51.86-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M53.46 52.34c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M53.07 52.56c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M52.89 52.47c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.12.05.19z"/>
+  <path fill="#a6a6a6" d="m57.24 49.57-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M57.43 50.05c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+  <path fill="#a6a6a6" d="M57.04 50.28c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13-.01.23.09.23.28z"/>
+  <path fill="#4a4a4a" d="M56.86 50.19c0 .25-.17.55-.39.67a.27.27 0 0 1-.16.05.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67a.27.27 0 0 1 .16-.05c.03.04.05.11.05.19z"/>
+  <path fill="#a6a6a6" d="m61.2 47.29-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+  <path fill="#5c5c5c" d="M61.39 47.76c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+  <path fill="#a6a6a6" d="M61 47.99c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.1.23.28z"/>
+  <path fill="#4a4a4a" d="M60.82 47.9c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+  <path fill="#f80" d="m16.13 72.21 44.51-25.7 1.9 3.41V69.3L14.23 97.19l.01-19.39z"/>
+  <path fill="orange" d="m28.18 69.22-4.7 2.72v.57l5.1-2.94v-3.18l-.4.22z"/>
+  <path fill="#eb7600" d="m23.48 71.94 4.7-2.72v-2.61l-4.7 2.72z"/>
+  <path fill="orange" d="m16.64 75.88-.28.74 5.97-3.45v-3.18l-.39.23v2.6z"/>
+  <path fill="#eb7600" d="M21.94 72.82v-2.6l-4.02 2.32-1.28 3.34z"/>
+  <path fill="orange" d="m60.29 50.68-5.57 3.22v.57l5.96-3.44-1.56-2.28-.11.06z"/>
+  <path fill="#eb7600" d="m54.72 53.9 5.57-3.22-1.28-1.87-4.29 2.48z"/>
+  <path fill="orange" d="m34.43 65.62-4.71 2.71v.58l5.1-2.94v-3.19l-.39.23z"/>
+  <path fill="#eb7600" d="m29.72 68.33 4.71-2.71v-2.61l-4.71 2.72z"/>
+  <path fill="orange" d="m40.67 62.02-4.71 2.71v.58l5.1-2.95v-3.18l-.39.23z"/>
+  <path fill="#eb7600" d="m35.96 64.73 4.71-2.71v-2.61l-4.71 2.71z"/>
+  <path fill="orange" d="m46.91 58.41-4.71 2.72v.57l5.1-2.94v-3.18l-.39.22z"/>
+  <path fill="#eb7600" d="m42.2 61.13 4.71-2.72V55.8l-4.71 2.72z"/>
+  <path fill="orange" d="m53.15 54.81-4.71 2.71v.58l5.1-2.94v-3.19l-.39.23z"/>
+  <path fill="#eb7600" d="m48.44 57.52 4.71-2.71V52.2l-4.71 2.72z"/>
+  <path fill="orange" d="m15.12 71.62 1.01.59-1.89 5.59-1.01-.58z"/>
+  <path fill="#ffb833" d="m15.12 71.62 44.51-25.69 1.01.58-44.51 25.7z"/>
+  <path fill="#f80" d="M41.07 24.06v8.03l11.03-6.37v-8.03l-9.12-5.26z"/>
+  <path fill="orange" d="m31.95 37.82 9.12-5.73v-8.03l11.03-6.37-9.12-5.26-11.03 6.37z"/>
+  <path fill="#ff9800" d="M41.81 14.74v6.58l-5.69-3.29v-6.57l6.36-3.68 5.69 3.29z"/>
+  <path fill="#cf7c00" d="M41.81 21.32v-6.58l6.36-3.67v6.57z"/>
+  <path fill="#363636" d="M45.25 9.11v1.83c0 .46-.31.92-.91 1.27-1.22.7-3.19.7-4.41 0-.61-.35-.91-.81-.91-1.27V9.11z"/>
+  <path fill="#5c5c5c" d="M39.93 10.38c1.22.7 3.19.7 4.41 0 1.22-.7 1.22-1.84 0-2.54s-3.19-.7-4.41 0c-1.21.7-1.21 1.83 0 2.54z"/>
+  <path fill="#363636" d="M44.91 2.91v6.03c0 .41-.27.82-.81 1.13-1.08.62-2.84.62-3.92 0-.54-.31-.81-.72-.81-1.13V2.91z"/>
+  <path fill="#5c5c5c" d="M40.18 4.04c1.08.62 2.84.62 3.92 0s1.08-1.64 0-2.26c-1.08-.62-2.84-.62-3.92 0-1.09.63-1.09 1.64 0 2.26z"/>
+  <path fill="#f5b400" d="m55.77 8.13-12.48 7.2-1.47-2.53L54.3 5.59z"/>
+  <path fill="#232323" d="m52.72 9.89-1.52.88-.37-3.18 1.52-.88zm-3.08 1.78-1.52.88-.37-3.18 1.52-.88zm-3.08 1.78-1.52.87-.36-3.17 1.52-.88z"/>
+  <path fill="#363636" d="M43.99 13.79c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.28.16.49.54.49.85zm10.49-6.05c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+  <path fill="#d49c00" d="m54.308 5.587 1.143-.66 1.466 2.537-1.143.66z"/>
+  <path fill="#363636" d="M52.91 36.01v3.78c0 .11-.07.21-.21.3-.28.16-.74.16-1.02 0-.14-.08-.21-.19-.21-.3v-3.78z"/>
+  <path fill="#5c5c5c" d="M51.68 36.3c.28.16.74.16 1.02 0s.28-.43 0-.59c-.28-.16-.74-.16-1.02 0-.29.16-.29.43 0 .59z"/>
+  <path fill="#d49c00" d="M54.31 35.3v.61h-.01c0 .31-.21.63-.62.87-.83.48-2.17.48-3 0-.41-.24-.62-.55-.62-.87v-.61z"/>
+  <path fill="#f5b400" d="M50.68 36.17c.83.48 2.17.48 3 0 .83-.48.83-1.25 0-1.73s-2.17-.48-3 0c-.82.48-.82 1.25 0 1.73z"/>
+  <path fill="#363636" d="M53.73 30.49v4.68h-.01c0 .23-.15.46-.45.63-.6.35-1.57.35-2.17 0-.3-.17-.45-.4-.45-.63v-4.68z"/>
+  <path fill="#5c5c5c" d="M51.1 31.11c.6.35 1.57.35 2.17 0 .6-.35.6-.91 0-1.25-.6-.35-1.57-.35-2.17 0-.6.34-.6.91 0 1.25z"/>
+  <path fill="#d49c00" d="M55.47 30.27v.95h-.02c0 .48-.32.96-.96 1.33-1.28.74-3.35.74-4.62 0-.64-.37-.96-.85-.96-1.33v-.95z"/>
+  <path fill="#f5b400" d="M49.87 31.61c1.28.74 3.35.74 4.62 0 1.28-.74 1.28-1.93 0-2.67s-3.35-.74-4.62 0c-1.28.73-1.28 1.93 0 2.67z"/>
+  <path fill="#363636" d="M54.65 24.69v5.34h-.01c0 .36-.24.73-.72 1-.96.55-2.51.55-3.47 0-.48-.28-.72-.64-.72-1v-5.34z"/>
+  <path fill="#5c5c5c" d="M50.45 25.69c.96.55 2.51.55 3.47 0 .96-.55.96-1.45 0-2s-2.51-.55-3.47 0c-.96.55-.96 1.45 0 2z"/>
+  <path fill="#d49c00" d="M56.33 23.02v1.2h-.02c0 .61-.4 1.22-1.21 1.69-1.61.93-4.23.93-5.85 0-.81-.47-1.21-1.08-1.21-1.69v-1.2z"/>
+  <path fill="#f5b400" d="M49.25 24.7c1.61.93 4.23.93 5.85 0 1.61-.93 1.61-2.44 0-3.38-1.61-.93-4.23-.93-5.85 0-1.61.94-1.61 2.45 0 3.38z"/>
+  <path fill="#d49c00" d="M55.4 15.72v6.98h-.02c0 .47-.31.95-.94 1.31-1.25.72-3.28.72-4.54 0-.63-.36-.94-.83-.94-1.31v-6.98z"/>
+  <path fill="#f5b400" d="M49.91 17.03c1.25.72 3.28.72 4.54 0 1.25-.72 1.25-1.9 0-2.62-1.25-.72-3.28-.72-4.54 0-1.25.73-1.25 1.9 0 2.62z"/>
+  <path fill="#d49c00" d="M54.9 14.78v.79h-.01c0 .4-.26.8-.79 1.1-1.06.61-2.77.61-3.83 0-.53-.31-.79-.71-.79-1.1v-.78z"/>
+  <path fill="#f5b400" d="M50.27 15.89c1.06.61 2.77.61 3.83 0s1.06-1.6 0-2.21c-1.06-.61-2.77-.61-3.83 0s-1.06 1.6 0 2.21z"/>
+  <path fill="#363636" d="M53.71 10.27v4.42c0 .22-.15.45-.45.62-.59.34-1.56.34-2.15 0-.3-.17-.45-.4-.45-.62v-4.42z"/>
+  <path fill="#5c5c5c" d="M51.11 10.89c.59.34 1.56.34 2.15 0 .59-.34.59-.9 0-1.24-.59-.34-1.56-.34-2.15 0-.6.34-.59.9 0 1.24z"/>
+  <path fill="#d49c00" d="M55.47 10.18v.95h-.02c0 .48-.32.96-.96 1.33-1.28.74-3.35.74-4.62 0-.64-.37-.96-.85-.96-1.33v-.95z"/>
+  <path fill="#f5b400" d="M49.87 11.52c1.28.74 3.35.74 4.62 0 1.28-.74 1.28-1.93 0-2.67s-3.35-.74-4.62 0c-1.28.74-1.28 1.93 0 2.67z"/>
+  <path fill="orange" d="m51.9 13.08-3.82-2.21V6.46l4.27-2.47 3.82 2.21-4.27 2.47z"/>
+  <path fill="#f80" d="m56.17 10.61-4.27 2.47V8.67l4.27-2.47z"/>
+  <path fill="#f5b400" d="m37.43 15.317 12.479-7.205 1.465 2.537-12.48 7.205z"/>
+  <path fill="#232323" d="m48.34 12.42-1.52.88-.37-3.18 1.52-.88zm-3.08 1.78-1.52.87-.36-3.17 1.52-.88zm-3.08 1.77-1.52.88-.36-3.18 1.52-.87z"/>
+  <path fill="#363636" d="M39.62 16.32c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85zm10.48-6.05c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+  <path fill="#d49c00" d="m49.925 8.107 1.143-.66 1.466 2.537-1.143.66z"/>
+</svg>
--- a/exercices/atelier/demo/machine-5.svg
+++ b/exercices/atelier/demo/machine-5.svg
--- a/exercices/atelier/demo/machine-6-o.svg
+++ b/exercices/atelier/demo/machine-6-o.svg
@@ -0,0 +1,146 @@
+<svg viewBox="0 0 78.78 85.51" xmlns="http://www.w3.org/2000/svg">
+  <g style="display:inline">
+    <path fill="#f80" d="m2.3 39.82 12.47 4.96.21-17.26L0 36.14z"/>
+    <path fill="orange" d="m0 36.14 8.62 2.4.18 6.04L0 39.52z"/>
+    <path fill="#ff9800" d="m44.57 63.13-7.61-4.4V33.82l11.65-6.72 7.61 4.39-11.65 6.73z"/>
+    <path fill="#cf7c00" d="m56.22 56.4-11.65 6.73V38.22l11.65-6.73z"/>
+    <path fill="orange" d="m44.9 36.63-5.58-3.22V19.35l6.24-3.6 5.58 3.22-6.24 3.6z"/>
+    <path fill="#f80" d="m51.14 33.03-6.24 3.6V22.57l6.24-3.6z"/>
+    <path fill="#363636" d="M47.9 17.7v1.83c0 .46-.31.92-.92 1.28-1.22.71-3.2.71-4.43 0-.61-.35-.92-.81-.92-1.28V17.7z"/>
+    <path fill="#5c5c5c" d="M42.56 18.98c1.22.71 3.2.71 4.43 0 1.22-.71 1.22-1.85 0-2.55-1.22-.71-3.2-.71-4.43 0-1.22.7-1.22 1.85 0 2.55z"/>
+    <path fill="#363636" d="M47.56 11.48v6.06c0 .41-.27.82-.82 1.14-1.09.63-2.85.63-3.94 0-.54-.31-.82-.72-.82-1.14v-6.06z"/>
+    <path fill="#5c5c5c" d="M42.81 12.62c1.09.63 2.85.63 3.94 0 1.09-.63 1.09-1.65 0-2.27-1.09-.63-2.85-.63-3.94 0-1.09.62-1.09 1.64 0 2.27z"/>
+    <path fill="#f80" d="m11.77 25.67-.2 17.26 6.63 28.08 5.38 4.37 18.45-10.65V17.79l-30.79 3.54z"/>
+    <path fill="orange" d="m8.62 38.54 2.62-17.21 18.45-10.66 12.34 7.12-18.45 10.66v46.93L8.26 66.54V47.52z"/>
+    <path fill="#5c5c5c" d="m17.95 45.58-6.67-3.85V29.94l2.81-1.62 6.67 3.85-2.81 1.62z"/>
+    <path fill="#363636" d="m20.76 43.96-2.81 1.62V33.79l2.81-1.62z"/>
+    <path fill="#f5b400" d="m17.3 39.22-5.32-3.07 2.66-3z"/>
+    <path d="m14.59 33.46 2.34 5.34-4.69-2.71zm.05-.31-2.66 3 5.33 3.07z"/>
+    <path d="m14.71 36.02-.55.98.94-1-.69-.55.32-.64-.51-.43-.16 1.09z"/>
+    <path fill="#f80" d="M66.79 51.12 18.49 79l.01-19.38 1.89-5.6 44.51-25.7 1.9 3.41z"/>
+    <path fill="orange" d="m17.49 59.04 1.9-5.6 1 .58-1.89 5.6z"/>
+    <path fill="#ffb833" d="m20.39 54.02-1-.58 44.51-25.7 1 .58z"/>
+    <path fill="orange" d="m17.48 78.42.01-19.38 12.28 7.09-.01 19.38zm15.24-30.31-.39.23v2.61l-4.71 2.71v.58l5.1-2.95z"/>
+    <path fill="#eb7600" d="m32.33 48.34-4.71 2.71v2.61l4.71-2.71z"/>
+    <path fill="orange" d="M26.09 51.94v2.61l-5.3 3.05-.28.74 5.97-3.44v-3.19z"/>
+    <path fill="#eb7600" d="m22.07 54.26-1.28 3.34 5.3-3.05v-2.61z"/>
+    <path fill="orange" d="m63.27 30.47-.11.06 1.28 1.87-5.58 3.22v.58l5.97-3.45z"/>
+    <path fill="#eb7600" d="m63.16 30.53-4.3 2.48v2.61l5.58-3.22z"/>
+    <path fill="orange" d="m38.96 44.51-.39.22v2.61l-4.71 2.72v.57l5.1-2.94z"/>
+    <path fill="#eb7600" d="m38.57 44.73-4.71 2.72v2.61l4.71-2.72z"/>
+    <path fill="orange" d="m45.2 40.9-.39.23v2.61l-4.71 2.71v.58l5.1-2.94z"/>
+    <path fill="#eb7600" d="m44.81 41.13-4.71 2.72v2.6l4.71-2.71z"/>
+    <path fill="orange" d="m51.44 37.3-.39.23v2.6l-4.71 2.72v.58l5.1-2.95z"/>
+    <path fill="#eb7600" d="m51.05 37.53-4.71 2.71v2.61l4.71-2.72z"/>
+    <path fill="orange" d="m57.68 33.7-.39.22v2.61l-4.71 2.72v.57l5.1-2.94z"/>
+    <path fill="#eb7600" d="m57.29 33.92-4.71 2.72v2.61l4.71-2.72z"/>
+    <path fill="#5c5c5c" d="m69.93 29.02-.06-.03h-.01c-.25-.13-.59-.1-.97.12l-17.26 9.97-34.69 20.03c-.05.03-.1.06-.14.09-.71.5-1.27 1.52-1.27 2.36v.13c0 .45.16.76.41.91 0 0 .01 0 .01.01l8.51 4.91L78.37 33.9z"/>
+    <path fill="#212121" d="M78.5 34.96v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.36.21-.69.2-.9.01.16.01.34-.04.54-.15l51.96-30c.62-.36 1.13-1.24 1.13-1.96v-.13c0-.3-.09-.52-.23-.66.35.02.59.31.59.8z"/>
+    <path fill="#878787" d="M78.14 34.82v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.19.11-.38.16-.54.15-.15-.14-.24-.36-.24-.66v-.13c0-.72.51-1.6 1.13-1.96l51.96-30c.19-.11.38-.16.54-.15.15.13.24.36.24.66z"/>
+    <path fill="#363636" d="M77.37 34.31c.62-.36 1.13-.07 1.13.65v.13c0 .72-.51 1.6-1.13 1.96l-51.96 30c-.62.36-1.13.07-1.13-.65v-.13c0-.72.51-1.6 1.13-1.96zm0-.33-51.96 30c-.78.45-1.42 1.55-1.42 2.45v.13c0 .9.64 1.27 1.42.82l51.96-30c.78-.45 1.41-1.55 1.41-2.45v-.13c0-.9-.63-1.27-1.41-.82z"/>
+    <path fill="#363636" d="m59.23 44.46-8.46-4.89.56-.32 8.46 4.88zm-2.27 1.3-8.46-4.88.56-.33 8.46 4.89zm-2.26 1.31-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.89.56-.32 8.46 4.88zm-2.26 1.31-8.46-4.89.56-.32 8.46 4.88zm-2.27 1.3-8.46-4.88.56-.33 8.46 4.89zm-2.26 1.31-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.89.56-.32 8.46 4.88zm-2.26 1.3-8.46-4.88.56-.32 8.46 4.88zM75.08 35.3l-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.88.57-.33 8.45 4.89zm-2.26 1.31-8.46-4.89.56-.32 8.46 4.89zm-2.26 1.31-8.47-4.89.56-.32 8.47 4.88zm-2.27 1.3-8.46-4.88.56-.33 8.46 4.89zm-2.26 1.31-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.89.56-.32 8.46 4.88zM38.84 56.22l-8.46-4.88.56-.33 8.46 4.89zm-2.26 1.31-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.89.56-.32 8.46 4.88zm-2.26 1.31-8.46-4.89.56-.32 8.46 4.88zm-2.26 1.3-8.46-4.88.56-.33 8.46 4.89zm-2.27 1.31-8.46-4.88.56-.33 8.46 4.89zm-2.26 1.31-8.46-4.88.56-.33 8.46 4.88z"/>
+    <path fill="#a6a6a6" d="m28.61 63.39-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M28.8 63.87c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M28.41 64.1c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.09.23.28z"/>
+    <path fill="#4a4a4a" d="M28.23 64.01c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m33.14 60.78-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M33.33 61.26c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45 0-.49.35-1.1.78-1.35.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M32.94 61.48c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M32.76 61.39c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m37.1 58.49-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M37.29 58.97c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M36.9 59.19c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M36.72 59.1c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.12.05.19z"/>
+    <path fill="#a6a6a6" d="m41.06 56.2-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.25.52l.23.11.05-.08c.08-.02.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M41.25 56.68c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.04.78.45z"/>
+    <path fill="#a6a6a6" d="M40.86 56.91c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M40.68 56.82c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.68.06-.03.11-.05.16-.05.04.06.05.12.05.2z"/>
+    <path fill="#a6a6a6" d="m45.03 53.92-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M45.22 54.39c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+    <path fill="#a6a6a6" d="M44.83 54.62c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.13-.01.23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M44.65 54.53c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.03.06.05.12.05.2z"/>
+    <path fill="#a6a6a6" d="m48.99 51.63-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.08-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M49.18 52.11c0 .5-.35 1.1-.78 1.35-.43.25-.78.04-.78-.45 0-.5.35-1.1.78-1.35.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M48.79 52.33c0 .25-.17.55-.39.68-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.43.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.09.23.27z"/>
+    <path fill="#4a4a4a" d="M48.61 52.24c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.68.06-.03.11-.05.16-.05.03.06.05.12.05.2z"/>
+    <path fill="#a6a6a6" d="m52.96 49.34-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M53.14 49.82c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M52.75 50.04c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M52.57 49.95c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m56.92 47.05-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.09a.69.69 0 0 0 .25-.09c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M57.11 47.53c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M56.72 47.75c0 .25-.17.55-.39.67-.15.09-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M56.54 47.66c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m60.88 44.76-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M61.07 45.24c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M60.68 45.46c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M60.5 45.37c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.12.05.19z"/>
+    <path fill="#a6a6a6" d="m64.85 42.47-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.1.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M65.04 42.95c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M64.65 43.17c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M64.47 43.09c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67.06-.03.11-.05.16-.05.03.04.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m68.81 40.19-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08a.57.57 0 0 0 .25-.1c.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M69 40.66c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.04.78.45z"/>
+    <path fill="#a6a6a6" d="M68.61 40.89c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .11-.02.16-.05.22-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.09.23.28z"/>
+    <path fill="#4a4a4a" d="M68.43 40.8c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.17-.55.39-.67a.27.27 0 0 1 .16-.05c.03.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m72.77 37.9-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M72.96 38.37c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.24.78-.04.78.45z"/>
+    <path fill="#a6a6a6" d="M72.57 38.6c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.14-.01.23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M72.39 38.51c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.04.05.05.11.05.19z"/>
+    <path fill="#a6a6a6" d="m76.74 35.61-.33-.17c-.14-.06-.32-.04-.51.07-.43.25-.78.85-.78 1.35 0 .26.1.44.26.52l.23.11.05-.08c.08-.01.16-.05.25-.09.43-.25.78-.85.78-1.35 0-.07-.01-.14-.02-.2z"/>
+    <path fill="#5c5c5c" d="M76.93 36.09c0 .5-.35 1.1-.78 1.35-.43.25-.78.05-.78-.45s.35-1.1.78-1.35c.43-.25.78-.05.78.45z"/>
+    <path fill="#a6a6a6" d="M76.54 36.31c0 .25-.17.55-.39.67-.15.08-.28.06-.34-.04.05 0 .1-.02.16-.05.21-.12.39-.42.39-.67 0-.08-.02-.14-.05-.19.13 0 .23.1.23.28z"/>
+    <path fill="#4a4a4a" d="M76.36 36.22c0 .25-.17.55-.39.67-.06.03-.11.05-.16.05a.356.356 0 0 1-.05-.19c0-.25.18-.55.39-.67.06-.03.11-.05.16-.05.03.05.05.11.05.19z"/>
+    <path fill="#f80" d="M78.07 57.63 29.76 85.51l.01-19.38 1.9-5.6 44.51-25.7 1.89 3.41z"/>
+    <path fill="orange" d="M39.02 60.26v.58l5.09-2.95v-3.18l-.39.23v2.61z"/>
+    <path fill="#eb7600" d="M43.72 57.55v-2.61l-4.7 2.71v2.61z"/>
+    <path fill="orange" d="m31.9 64.94 5.97-3.44v-3.19l-.39.23v2.61l-5.3 3.05z"/>
+    <path fill="#eb7600" d="m37.48 58.54-4.02 2.32-1.28 3.34 5.3-3.05z"/>
+    <path fill="orange" d="M70.25 42.22v.58l5.97-3.45-1.56-2.28-.11.06L75.83 39z"/>
+    <path fill="#eb7600" d="m75.83 39-1.28-1.87-4.3 2.48v2.61z"/>
+    <path fill="orange" d="M45.26 56.66v.57l5.09-2.94v-3.18l-.39.22v2.61z"/>
+    <path fill="#eb7600" d="M49.96 53.94v-2.61l-4.7 2.72v2.61z"/>
+    <path fill="orange" d="M51.5 53.05v.58l5.09-2.94V47.5l-.39.23v2.61z"/>
+    <path fill="#eb7600" d="M56.2 50.34v-2.61l-4.7 2.72v2.6z"/>
+    <path fill="orange" d="M57.74 49.45v.58l5.09-2.95V43.9l-.39.23v2.61z"/>
+    <path fill="#eb7600" d="M62.44 46.74v-2.61l-4.7 2.71v2.61z"/>
+    <path fill="orange" d="M63.98 45.85v.57l5.09-2.94V40.3l-.39.22v2.61z"/>
+    <path fill="#eb7600" d="M68.68 43.13v-2.61l-4.7 2.72v2.61z"/>
+    <path fill="orange" d="m28.76 65.55 1.9-5.6 1.01.58-1.9 5.6z"/>
+    <path fill="#ffb833" d="m31.67 60.53-1.01-.58 44.51-25.7 1.01.58z"/>
+    <path fill="orange" d="m68.34 30.81 1.35.98-.25-2.69 1.34-4.1-1.34-.98-1.81 1.04-1.07 3.7z"/>
+    <path fill="#f80" d="m70.78 31.16-.56-2.63.56-3.53-1.8 1.04-1.07 3.7 1.78 2.05z"/>
+    <path fill="orange" d="m71.39 29.05.56-3.28-.56-2.88 1.81-1.04 1.34.98-1.8 7.2z"/>
+    <path fill="#f80" d="m72.74 30.03.56-3.28-.56-2.88 1.8-1.04 1.07 2.46-1.77 4.1z"/>
+    <path fill="#5c5c5c" d="M66.17 23.53v1.76l2.58 1.49 6.64-5.6-2.57-1.48z"/>
+    <path fill="#363636" d="M75.39 22.94v-1.76l-6.64 3.84v1.76z"/>
+    <path fill="orange" d="m70.67 24.54-3.82-2.21V20.3l4.27-2.46 3.82 2.2-4.27 2.47z"/>
+    <path fill="#f80" d="m74.94 22.07-4.27 2.47v-2.03l4.27-2.47z"/>
+    <path fill="#363636" d="M73.12 18.87v1.27c0 .32-.21.64-.64.89-.85.49-2.22.49-3.07 0-.42-.25-.64-.57-.64-.89v-1.27z"/>
+    <path fill="#5c5c5c" d="M69.42 19.75c.85.49 2.22.49 3.07 0 .85-.49.85-1.28 0-1.77s-2.22-.49-3.07 0c-.85.49-.85 1.28 0 1.77z"/>
+    <path fill="#363636" d="M72.89 14.55v4.21c0 .29-.19.57-.57.79-.75.44-1.98.44-2.73 0-.38-.22-.57-.5-.57-.79v-4.21z"/>
+    <path fill="#5c5c5c" d="M69.59 15.34c.75.44 1.98.44 2.73 0s.75-1.14 0-1.58c-.75-.44-1.98-.44-2.73 0-.76.44-.76 1.14 0 1.58z"/>
+    <path fill="#d49c00" d="m57.73.08 17.78 10.26v2.94l-1.04.6L56.69.68z"/>
+    <path fill="#f5b400" d="M74.47 13.88 56.69 3.61V.68l17.78 10.26z"/>
+    <path fill="#363636" d="M58.35 3.19c0 .31-.22.44-.49.28-.27-.16-.49-.54-.49-.85 0-.31.22-.44.49-.28.27.15.49.53.49.85zm15.37 8.87c0 .31-.22.44-.49.28-.27-.16-.49-.54-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+    <path fill="#232323" d="m70.8 11.76-1.6-.92 1.81-1.89 1.58.91zm-3.49-2.02-1.6-.92 1.81-1.89 1.58.91zm-3.49-2.01-1.6-.92 1.81-1.89 1.58.91zm-3.49-2.02-1.6-.92 1.81-1.89 1.58.91z"/>
+    <path fill="#f5b400" d="m58.82 4.18-12.48 7.21-1.47-2.54 12.48-7.21z"/>
+    <path fill="#232323" d="m55.76 5.94-1.51.88-.37-3.18 1.52-.87zm-3.07 1.78-1.52.88-.37-3.18 1.52-.88zM49.61 9.5l-1.52.87-.37-3.17 1.52-.88z"/>
+    <path fill="#363636" d="M47.04 9.85c0 .31-.22.44-.49.28-.27-.16-.49-.54-.49-.85 0-.31.22-.44.49-.28.27.16.49.53.49.85zm10.49-6.06c0 .31-.22.44-.49.28-.27-.16-.49-.54-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+    <path fill="#d49c00" d="m57.364 1.637 1.143-.661 1.466 2.537-1.143.66z"/>
+    <path fill="orange" d="m44.6 16.25-5.03-2.91V7.53l5.62-3.25 5.03 2.91-5.62 3.25z"/>
+    <path fill="#f80" d="m50.22 13-5.62 3.25v-5.81l5.62-3.25z"/>
+    <path fill="orange" d="m54.91 9.09-3.82-2.21V2.47L55.36 0l3.82 2.21-4.27 2.46z"/>
+    <path fill="#f80" d="m59.18 6.62-4.27 2.47V4.67l4.27-2.46z"/>
+    <path fill="orange" d="m70.6 18.99-4.91-2.84v-5.68l5.49-3.17 4.92 2.84-5.5 3.17z"/>
+    <path fill="#f80" d="m76.1 15.81-5.5 3.18v-5.68l5.5-3.17z"/>
+    <path fill="#f5b400" d="m40.485 11.361 12.48-7.205 1.464 2.538-12.479 7.205z"/>
+    <path fill="#232323" d="m51.39 8.47-1.52.88-.37-3.18 1.52-.88zm-3.08 1.78-1.52.88-.37-3.18 1.52-.88zm-3.08 1.78-1.52.87-.36-3.17 1.51-.88z"/>
+    <path fill="#363636" d="M42.66 12.37c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85zm10.49-6.05c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+    <path fill="#d49c00" d="m52.98 4.169 1.142-.66 1.466 2.536-1.143.66z"/>
+    <path fill="#d49c00" d="m51.84 3.48 17.78 10.26v2.93l-1.04.61L50.8 4.08z"/>
+    <path fill="#f5b400" d="M68.58 17.28 50.8 7.01V4.08l17.78 10.26z"/>
+    <path fill="#363636" d="M52.46 6.58c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85zm15.37 8.88c0 .31-.22.44-.49.28-.27-.16-.49-.53-.49-.85 0-.31.22-.44.49-.28.27.16.49.54.49.85z"/>
+    <path fill="#232323" d="m64.91 15.16-1.6-.93 1.82-1.88 1.57.91zm-3.49-2.02-1.6-.92 1.82-1.89 1.57.91zm-3.49-2.01-1.6-.93 1.82-1.88 1.57.91zm-3.49-2.02-1.6-.92 1.82-1.89 1.57.91z"/>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-6.svg
+++ b/exercices/atelier/demo/machine-6.svg
@@ -0,0 +1,897 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 78.780 85.510"
+   sodipodi:docname="machine-6.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8788" />
+  <sodipodi:namedview
+     id="namedview8786"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="8.7358204"
+     inkscape:cx="39.435335"
+     inkscape:cy="42.755"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g8779" />
+  <g
+     transform="translate(-35.27,-338.76)"
+     id="g8783">
+    <g
+       id="g8781">
+      <g
+         id="g8348"
+         style="display:inline">
+        <polygon
+           fill="#ff8800"
+           points="35.27,374.9 37.57,378.58 50.04,383.54 50.25,366.28 "
+           id="polygon8344" />
+        <polygon
+           fill="#ffa500"
+           points="35.27,378.28 35.27,374.9 43.89,377.3 44.07,383.34 "
+           id="polygon8346" />
+      </g>
+      <g
+         id="g8779"
+         style="display:inline"
+         inkscape:label="Layer2">
+        <g
+           id="g8358">
+          <polygon
+             fill="#ff9800"
+             points="79.84,376.98 79.84,401.89 72.23,397.49 72.23,372.58 83.88,365.86 91.49,370.25 "
+             id="polygon8350" />
+          <polygon
+             fill="#cf7c00"
+             points="79.84,401.89 79.84,376.98 91.49,370.25 91.49,395.16 "
+             id="polygon8352" />
+          <polygon
+             fill="#ffa500"
+             points="80.17,361.33 80.17,375.39 74.59,372.17 74.59,358.11 80.83,354.51 86.41,357.73 "
+             id="polygon8354" />
+          <polygon
+             fill="#ff8800"
+             points="80.17,375.39 80.17,361.33 86.41,357.73 86.41,371.79 "
+             id="polygon8356" />
+        </g>
+        <g
+           id="g8370">
+          <g
+             id="g8368">
+            <path
+               fill="#363636"
+               d="m 83.17,356.46 v 1.83 c 0,0.46 -0.31,0.92 -0.92,1.28 -1.22,0.71 -3.2,0.71 -4.43,0 -0.61,-0.35 -0.92,-0.81 -0.92,-1.28 v -1.83 z"
+               id="path8360" />
+            <path
+               fill="#5c5c5c"
+               d="m 77.83,357.74 c 1.22,0.71 3.2,0.71 4.43,0 1.22,-0.71 1.22,-1.85 0,-2.55 -1.22,-0.71 -3.2,-0.71 -4.43,0 -1.22,0.7 -1.22,1.85 0,2.55 z"
+               id="path8362" />
+            <path
+               fill="#363636"
+               d="m 82.83,350.24 v 6.06 c 0,0.41 -0.27,0.82 -0.82,1.14 -1.09,0.63 -2.85,0.63 -3.94,0 -0.54,-0.31 -0.82,-0.72 -0.82,-1.14 v -6.06 z"
+               id="path8364" />
+            <path
+               fill="#5c5c5c"
+               d="m 78.08,351.38 c 1.09,0.63 2.85,0.63 3.94,0 1.09,-0.63 1.09,-1.65 0,-2.27 -1.09,-0.63 -2.85,-0.63 -3.94,0 -1.09,0.62 -1.09,1.64 0,2.27 z"
+               id="path8366" />
+          </g>
+        </g>
+        <g
+           id="g8376">
+          <polygon
+             fill="#ff8800"
+             points="58.85,414.14 77.3,403.49 77.3,356.55 46.51,360.09 47.04,364.43 46.84,381.69 53.47,409.77 "
+             id="polygon8372" />
+          <polygon
+             fill="#ffa500"
+             points="46.51,360.09 64.96,349.43 77.3,356.55 58.85,367.21 58.85,414.14 43.53,405.3 43.53,386.28 43.89,377.3 "
+             id="polygon8374" />
+        </g>
+        <g
+           id="g8390">
+          <polygon
+             fill="#5c5c5c"
+             points="53.22,372.55 53.22,384.34 46.55,380.49 46.55,368.7 49.36,367.08 56.03,370.93 "
+             id="polygon8378" />
+          <polygon
+             fill="#363636"
+             points="53.22,384.34 53.22,372.55 56.03,370.93 56.03,382.72 "
+             id="polygon8380" />
+          <g
+             id="g8388">
+            <polygon
+               fill="#f5b400"
+               points="47.25,374.91 49.91,371.91 52.57,377.98 "
+               id="polygon8382" />
+            <path
+               d="m 49.86,372.22 2.34,5.34 -4.69,-2.71 z m 0.05,-0.31 -2.66,3 5.33,3.07 z"
+               id="path8384" />
+            <polygon
+               points="49.49,373.14 49.33,374.23 49.98,374.78 49.43,375.76 50.37,374.76 49.68,374.21 50,373.57 "
+               id="polygon8386" />
+          </g>
+        </g>
+        <g
+           id="g8656">
+          <g
+             id="g8400">
+            <polygon
+               fill="#ff8800"
+               points="53.76,417.76 53.77,398.38 55.66,392.78 100.17,367.08 102.07,370.49 102.06,389.88 "
+               id="polygon8392" />
+            <polygon
+               fill="#ffa500"
+               points="53.77,398.38 52.76,397.8 54.66,392.2 55.66,392.78 "
+               id="polygon8394" />
+            <polygon
+               fill="#ffb833"
+               points="100.17,367.08 55.66,392.78 54.66,392.2 99.17,366.5 "
+               id="polygon8396" />
+            <polygon
+               fill="#ffa500"
+               points="65.03,424.27 52.75,417.18 52.76,397.8 65.04,404.89 "
+               id="polygon8398" />
+          </g>
+          <g
+             id="g8430">
+            <polygon
+               fill="#ffa500"
+               points="67.6,387.1 67.6,389.71 62.89,392.42 62.89,393 67.99,390.05 67.99,386.87 "
+               id="polygon8402" />
+            <polygon
+               fill="#eb7600"
+               points="67.6,389.71 67.6,387.1 62.89,389.81 62.89,392.42 "
+               id="polygon8404" />
+            <polygon
+               fill="#ffa500"
+               points="61.36,393.31 56.06,396.36 55.78,397.1 61.75,393.66 61.75,390.47 61.36,390.7 "
+               id="polygon8406" />
+            <polygon
+               fill="#eb7600"
+               points="61.36,390.7 57.34,393.02 56.06,396.36 61.36,393.31 "
+               id="polygon8408" />
+            <polygon
+               fill="#ffa500"
+               points="98.43,369.29 99.71,371.16 94.13,374.38 94.13,374.96 100.1,371.51 98.54,369.23 "
+               id="polygon8410" />
+            <polygon
+               fill="#eb7600"
+               points="99.71,371.16 98.43,369.29 94.13,371.77 94.13,374.38 "
+               id="polygon8412" />
+            <polygon
+               fill="#ffa500"
+               points="73.84,383.49 73.84,386.1 69.13,388.82 69.13,389.39 74.23,386.45 74.23,383.27 "
+               id="polygon8414" />
+            <polygon
+               fill="#eb7600"
+               points="73.84,386.1 73.84,383.49 69.13,386.21 69.13,388.82 "
+               id="polygon8416" />
+            <polygon
+               fill="#ffa500"
+               points="80.08,379.89 80.08,382.5 75.37,385.21 75.37,385.79 80.47,382.85 80.47,379.66 "
+               id="polygon8418" />
+            <polygon
+               fill="#eb7600"
+               points="80.08,382.5 80.08,379.89 75.37,382.61 75.37,385.21 "
+               id="polygon8420" />
+            <polygon
+               fill="#ffa500"
+               points="86.32,376.29 86.32,378.89 81.61,381.61 81.61,382.19 86.71,379.24 86.71,376.06 "
+               id="polygon8422" />
+            <polygon
+               fill="#eb7600"
+               points="86.32,378.89 86.32,376.29 81.61,379 81.61,381.61 "
+               id="polygon8424" />
+            <polygon
+               fill="#ffa500"
+               points="92.56,372.68 92.56,375.29 87.85,378.01 87.85,378.58 92.95,375.64 92.95,372.46 "
+               id="polygon8426" />
+            <polygon
+               fill="#eb7600"
+               points="92.56,375.29 92.56,372.68 87.85,375.4 87.85,378.01 "
+               id="polygon8428" />
+          </g>
+          <g
+             id="g8616">
+            <path
+               fill="#5c5c5c"
+               d="m 105.2,367.78 c -0.02,-0.01 -0.04,-0.02 -0.06,-0.03 h -0.01 v 0 c -0.25,-0.13 -0.59,-0.1 -0.97,0.12 v 0 l -17.26,9.97 -34.69,20.03 c -0.05,0.03 -0.1,0.06 -0.14,0.09 v 0 c -0.71,0.5 -1.27,1.52 -1.27,2.36 v 0.13 c 0,0.45 0.16,0.76 0.41,0.91 v 0 c 0,0 0.01,0 0.01,0.01 l 8.51,4.91 53.91,-33.62 z"
+               id="path8432" />
+            <path
+               fill="#212121"
+               d="m 113.77,373.72 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.36,0.21 -0.69,0.2 -0.9,0.01 0.16,0.01 0.34,-0.04 0.54,-0.15 l 51.96,-30 c 0.62,-0.36 1.13,-1.24 1.13,-1.96 v -0.13 c 0,-0.3 -0.09,-0.52 -0.23,-0.66 0.35,0.02 0.59,0.31 0.59,0.8 z"
+               id="path8434" />
+            <path
+               fill="#878787"
+               d="m 113.41,373.58 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.19,0.11 -0.38,0.16 -0.54,0.15 -0.15,-0.14 -0.24,-0.36 -0.24,-0.66 v -0.13 c 0,-0.72 0.51,-1.6 1.13,-1.96 l 51.96,-30 c 0.19,-0.11 0.38,-0.16 0.54,-0.15 0.15,0.13 0.24,0.36 0.24,0.66 z"
+               id="path8436" />
+            <path
+               fill="#363636"
+               d="m 112.64,373.07 c 0.62,-0.36 1.13,-0.07 1.13,0.65 v 0.13 c 0,0.72 -0.51,1.6 -1.13,1.96 l -51.96,30 c -0.62,0.36 -1.13,0.07 -1.13,-0.65 v -0.13 c 0,-0.72 0.51,-1.6 1.13,-1.96 z m 0,-0.33 -51.96,30 c -0.78,0.45 -1.42,1.55 -1.42,2.45 v 0.13 c 0,0.9 0.64,1.27 1.42,0.82 l 51.96,-30 c 0.78,-0.45 1.41,-1.55 1.41,-2.45 v -0.13 c 0,-0.9 -0.63,-1.27 -1.41,-0.82 z"
+               id="path8438" />
+            <polygon
+               fill="#363636"
+               points="95.06,382.89 94.5,383.22 86.04,378.33 86.6,378.01 "
+               id="polygon8440" />
+            <polygon
+               fill="#363636"
+               points="92.79,384.2 92.23,384.52 83.77,379.64 84.33,379.31 "
+               id="polygon8442" />
+            <polygon
+               fill="#363636"
+               points="90.53,385.51 89.97,385.83 81.51,380.95 82.07,380.62 "
+               id="polygon8444" />
+            <polygon
+               fill="#363636"
+               points="88.26,386.81 87.7,387.14 79.24,382.25 79.8,381.93 "
+               id="polygon8446" />
+            <polygon
+               fill="#363636"
+               points="86,388.12 85.44,388.45 76.98,383.56 77.54,383.24 "
+               id="polygon8448" />
+            <polygon
+               fill="#363636"
+               points="83.73,389.43 83.17,389.75 74.71,384.87 75.27,384.54 "
+               id="polygon8450" />
+            <polygon
+               fill="#363636"
+               points="81.47,390.74 80.91,391.06 72.45,386.18 73.01,385.85 "
+               id="polygon8452" />
+            <polygon
+               fill="#363636"
+               points="79.2,392.04 78.64,392.37 70.18,387.48 70.74,387.16 "
+               id="polygon8454" />
+            <polygon
+               fill="#363636"
+               points="76.94,393.35 76.38,393.67 67.92,388.79 68.48,388.47 "
+               id="polygon8456" />
+            <polygon
+               fill="#363636"
+               points="110.91,373.74 110.35,374.06 101.89,369.18 102.45,368.85 "
+               id="polygon8458" />
+            <polygon
+               fill="#363636"
+               points="108.64,375.05 108.08,375.37 99.62,370.49 100.19,370.16 "
+               id="polygon8460" />
+            <polygon
+               fill="#363636"
+               points="106.38,376.36 105.82,376.68 97.36,371.79 97.92,371.47 "
+               id="polygon8462" />
+            <polygon
+               fill="#363636"
+               points="104.12,377.66 103.56,377.99 95.09,373.1 95.65,372.78 "
+               id="polygon8464" />
+            <polygon
+               fill="#363636"
+               points="101.85,378.97 101.29,379.29 92.83,374.41 93.39,374.08 "
+               id="polygon8466" />
+            <polygon
+               fill="#363636"
+               points="99.59,380.28 99.03,380.6 90.57,375.72 91.13,375.39 "
+               id="polygon8468" />
+            <polygon
+               fill="#363636"
+               points="97.32,381.58 96.76,381.91 88.3,377.02 88.86,376.7 "
+               id="polygon8470" />
+            <polygon
+               fill="#363636"
+               points="74.67,394.66 74.11,394.98 65.65,390.1 66.21,389.77 "
+               id="polygon8472" />
+            <polygon
+               fill="#363636"
+               points="72.41,395.97 71.85,396.29 63.39,391.41 63.95,391.08 "
+               id="polygon8474" />
+            <polygon
+               fill="#363636"
+               points="70.14,397.27 69.58,397.6 61.12,392.71 61.68,392.39 "
+               id="polygon8476" />
+            <polygon
+               fill="#363636"
+               points="67.88,398.58 67.32,398.91 58.86,394.02 59.42,393.7 "
+               id="polygon8478" />
+            <polygon
+               fill="#363636"
+               points="65.62,399.89 65.06,400.21 56.6,395.33 57.16,395 "
+               id="polygon8480" />
+            <polygon
+               fill="#363636"
+               points="63.35,401.2 62.79,401.52 54.33,396.64 54.89,396.31 "
+               id="polygon8482" />
+            <polygon
+               fill="#363636"
+               points="61.09,402.5 60.53,402.83 52.07,397.95 52.63,397.62 "
+               id="polygon8484" />
+            <g
+               id="g8494">
+              <path
+                 fill="#a6a6a6"
+                 d="m 63.88,402.15 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8486" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 64.07,402.63 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8488" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 63.68,402.86 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.09 0.23,0.28 z"
+                 id="path8490" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 63.5,402.77 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8492" />
+            </g>
+            <g
+               id="g8504">
+              <path
+                 fill="#a6a6a6"
+                 d="m 68.41,399.54 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8496" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 68.6,400.02 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.49 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8498" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 68.21,400.24 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.09 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z"
+                 id="path8500" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 68.03,400.15 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8502" />
+            </g>
+            <g
+               id="g8514">
+              <path
+                 fill="#a6a6a6"
+                 d="m 72.37,397.25 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8506" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 72.56,397.73 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8508" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 72.17,397.95 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z"
+                 id="path8510" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 71.99,397.86 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.12 0.05,0.19 z"
+                 id="path8512" />
+            </g>
+            <g
+               id="g8524">
+              <path
+                 fill="#a6a6a6"
+                 d="M 76.33,394.96 76,394.79 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.25,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.02 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.08 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8516" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 76.52,395.44 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.04 0.78,0.45 z"
+                 id="path8518" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 76.13,395.67 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.09 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.1 0.23,0.28 z"
+                 id="path8520" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 75.95,395.58 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.68 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.06 0.05,0.12 0.05,0.2 z"
+                 id="path8522" />
+            </g>
+            <g
+               id="g8534">
+              <path
+                 fill="#a6a6a6"
+                 d="m 80.3,392.68 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8526" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 80.49,393.15 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.24 0.78,-0.04 0.78,0.45 z"
+                 id="path8528" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 80.1,393.38 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,-0.01 0.23,0.1 0.23,0.28 z"
+                 id="path8530" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 79.92,393.29 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.68 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.06 0.05,0.12 0.05,0.2 z"
+                 id="path8532" />
+            </g>
+            <g
+               id="g8544">
+              <path
+                 fill="#a6a6a6"
+                 d="m 84.26,390.39 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.08 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8536" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 84.45,390.87 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.04 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8538" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 84.06,391.09 c 0,0.25 -0.17,0.55 -0.39,0.68 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.43 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.09 0.23,0.27 z"
+                 id="path8540" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 83.88,391 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.68 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.06 0.05,0.12 0.05,0.2 z"
+                 id="path8542" />
+            </g>
+            <g
+               id="g8554">
+              <path
+                 fill="#a6a6a6"
+                 d="m 88.23,388.1 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8546" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 88.41,388.58 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8548" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 88.02,388.8 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z"
+                 id="path8550" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 87.84,388.71 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8552" />
+            </g>
+            <g
+               id="g8564">
+              <path
+                 fill="#a6a6a6"
+                 d="m 92.19,385.81 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.09 c 0.08,-0.01 0.16,-0.04 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8556" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 92.38,386.29 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8558" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 91.99,386.51 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.09 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z"
+                 id="path8560" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 91.81,386.42 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8562" />
+            </g>
+            <g
+               id="g8574">
+              <path
+                 fill="#a6a6a6"
+                 d="m 96.15,383.52 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8566" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 96.34,384 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8568" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 95.95,384.22 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,0 0.23,0.1 0.23,0.28 z"
+                 id="path8570" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 95.77,384.13 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.12 0.05,0.19 z"
+                 id="path8572" />
+            </g>
+            <g
+               id="g8584">
+              <path
+                 fill="#a6a6a6"
+                 d="m 100.12,381.23 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8576" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 100.31,381.71 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8578" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 99.92,381.93 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z"
+                 id="path8580" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 99.74,381.85 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.04 0.05,0.11 0.05,0.19 z"
+                 id="path8582" />
+            </g>
+            <g
+               id="g8594">
+              <path
+                 fill="#a6a6a6"
+                 d="m 104.08,378.95 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.04 0.25,-0.1 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8586" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 104.27,379.42 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.04 0.78,0.45 z"
+                 id="path8588" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 103.88,379.65 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.11,-0.02 0.16,-0.05 0.22,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.09 0.23,0.28 z"
+                 id="path8590" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 103.7,379.56 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.17,-0.55 0.39,-0.67 0.06,-0.04 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8592" />
+            </g>
+            <g
+               id="g8604">
+              <path
+                 fill="#a6a6a6"
+                 d="m 108.04,376.66 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8596" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 108.23,377.13 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.24 0.78,-0.04 0.78,0.45 z"
+                 id="path8598" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 107.84,377.36 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.14,-0.01 0.23,0.1 0.23,0.28 z"
+                 id="path8600" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 107.66,377.27 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.04,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8602" />
+            </g>
+            <g
+               id="g8614">
+              <path
+                 fill="#a6a6a6"
+                 d="m 112.01,374.37 -0.33,-0.17 v 0 c -0.14,-0.06 -0.32,-0.04 -0.51,0.07 -0.43,0.25 -0.78,0.85 -0.78,1.35 0,0.26 0.1,0.44 0.26,0.52 l 0.23,0.11 0.05,-0.08 c 0.08,-0.01 0.16,-0.05 0.25,-0.09 0.43,-0.25 0.78,-0.85 0.78,-1.35 0,-0.07 -0.01,-0.14 -0.02,-0.2 z"
+                 id="path8606" />
+              <path
+                 fill="#5c5c5c"
+                 d="m 112.2,374.85 c 0,0.5 -0.35,1.1 -0.78,1.35 -0.43,0.25 -0.78,0.05 -0.78,-0.45 0,-0.5 0.35,-1.1 0.78,-1.35 0.43,-0.25 0.78,-0.05 0.78,0.45 z"
+                 id="path8608" />
+              <path
+                 fill="#a6a6a6"
+                 d="m 111.81,375.07 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.15,0.08 -0.28,0.06 -0.34,-0.04 0.05,0 0.1,-0.02 0.16,-0.05 0.21,-0.12 0.39,-0.42 0.39,-0.67 0,-0.08 -0.02,-0.14 -0.05,-0.19 0.13,0 0.23,0.1 0.23,0.28 z"
+                 id="path8610" />
+              <path
+                 fill="#4a4a4a"
+                 d="m 111.63,374.98 c 0,0.25 -0.17,0.55 -0.39,0.67 -0.06,0.03 -0.11,0.05 -0.16,0.05 -0.03,-0.05 -0.05,-0.11 -0.05,-0.19 0,-0.25 0.18,-0.55 0.39,-0.67 0.06,-0.03 0.11,-0.05 0.16,-0.05 0.03,0.05 0.05,0.11 0.05,0.19 z"
+                 id="path8612" />
+            </g>
+          </g>
+          <g
+             id="g8654">
+            <polygon
+               fill="#ff8800"
+               points="65.03,424.27 65.04,404.89 66.94,399.29 111.45,373.59 113.34,377 113.34,396.39 "
+               id="polygon8618" />
+            <g
+               id="g8648">
+              <polygon
+                 fill="#ffa500"
+                 points="79.38,393.47 78.99,393.7 78.99,396.31 74.29,399.02 74.29,399.6 79.38,396.65 "
+                 id="polygon8620" />
+              <polygon
+                 fill="#eb7600"
+                 points="78.99,393.7 74.29,396.41 74.29,399.02 78.99,396.31 "
+                 id="polygon8622" />
+              <polygon
+                 fill="#ffa500"
+                 points="72.75,397.3 72.75,399.91 67.45,402.96 67.17,403.7 73.14,400.26 73.14,397.07 "
+                 id="polygon8624" />
+              <polygon
+                 fill="#eb7600"
+                 points="68.73,399.62 67.45,402.96 72.75,399.91 72.75,397.3 "
+                 id="polygon8626" />
+              <polygon
+                 fill="#ffa500"
+                 points="109.93,375.83 109.82,375.89 111.1,377.76 105.52,380.98 105.52,381.56 111.49,378.11 "
+                 id="polygon8628" />
+              <polygon
+                 fill="#eb7600"
+                 points="109.82,375.89 105.52,378.37 105.52,380.98 111.1,377.76 "
+                 id="polygon8630" />
+              <polygon
+                 fill="#ffa500"
+                 points="85.62,389.87 85.23,390.09 85.23,392.7 80.53,395.42 80.53,395.99 85.62,393.05 "
+                 id="polygon8632" />
+              <polygon
+                 fill="#eb7600"
+                 points="85.23,390.09 80.53,392.81 80.53,395.42 85.23,392.7 "
+                 id="polygon8634" />
+              <polygon
+                 fill="#ffa500"
+                 points="91.86,386.26 91.47,386.49 91.47,389.1 86.77,391.81 86.77,392.39 91.86,389.45 "
+                 id="polygon8636" />
+              <polygon
+                 fill="#eb7600"
+                 points="91.47,386.49 86.77,389.21 86.77,391.81 91.47,389.1 "
+                 id="polygon8638" />
+              <polygon
+                 fill="#ffa500"
+                 points="98.1,382.66 97.71,382.89 97.71,385.5 93.01,388.21 93.01,388.79 98.1,385.84 "
+                 id="polygon8640" />
+              <polygon
+                 fill="#eb7600"
+                 points="97.71,382.89 93.01,385.6 93.01,388.21 97.71,385.5 "
+                 id="polygon8642" />
+              <polygon
+                 fill="#ffa500"
+                 points="104.34,379.06 103.95,379.28 103.95,381.89 99.25,384.61 99.25,385.18 104.34,382.24 "
+                 id="polygon8644" />
+              <polygon
+                 fill="#eb7600"
+                 points="103.95,379.28 99.25,382 99.25,384.61 103.95,381.89 "
+                 id="polygon8646" />
+            </g>
+            <polygon
+               fill="#ffa500"
+               points="65.04,404.89 64.03,404.31 65.93,398.71 66.94,399.29 "
+               id="polygon8650" />
+            <polygon
+               fill="#ffb833"
+               points="111.45,373.59 66.94,399.29 65.93,398.71 110.44,373.01 "
+               id="polygon8652" />
+          </g>
+        </g>
+        <g
+           id="g8674">
+          <g
+             id="g8666">
+            <polygon
+               fill="#ffa500"
+               points="102.9,363.82 101.83,367.52 103.61,369.57 104.96,370.55 104.71,367.86 106.05,363.76 104.71,362.78 "
+               id="polygon8658" />
+            <polygon
+               fill="#ff8800"
+               points="105.49,367.29 106.05,363.76 104.25,364.8 103.18,368.5 104.96,370.55 106.05,369.92 "
+               id="polygon8660" />
+            <polygon
+               fill="#ffa500"
+               points="107.22,364.53 106.66,361.65 108.47,360.61 109.81,361.59 108.01,368.79 106.66,367.81 "
+               id="polygon8662" />
+            <polygon
+               fill="#ff8800"
+               points="108.57,365.51 108.01,362.63 109.81,361.59 110.88,364.05 109.11,368.15 108.01,368.79 "
+               id="polygon8664" />
+          </g>
+          <g
+             id="g8672">
+            <polygon
+               fill="#5c5c5c"
+               points="108.09,358.46 101.44,362.29 101.44,364.05 104.02,365.54 110.66,359.94 "
+               id="polygon8668" />
+            <polygon
+               fill="#363636"
+               points="104.02,365.54 110.66,361.7 110.66,359.94 104.02,363.78 "
+               id="polygon8670" />
+          </g>
+        </g>
+        <g
+           id="g8680">
+          <polygon
+             fill="#ffa500"
+             points="105.94,361.27 105.94,363.3 102.12,361.09 102.12,359.06 106.39,356.6 110.21,358.8 "
+             id="polygon8676" />
+          <polygon
+             fill="#ff8800"
+             points="105.94,363.3 105.94,361.27 110.21,358.8 110.21,360.83 "
+             id="polygon8678" />
+        </g>
+        <g
+           id="g8694">
+          <g
+             id="g8686">
+            <path
+               fill="#363636"
+               d="m 108.39,357.63 v 1.27 c 0,0.32 -0.21,0.64 -0.64,0.89 -0.85,0.49 -2.22,0.49 -3.07,0 -0.42,-0.25 -0.64,-0.57 -0.64,-0.89 v -1.27 z"
+               id="path8682" />
+            <path
+               fill="#5c5c5c"
+               d="m 104.69,358.51 c 0.85,0.49 2.22,0.49 3.07,0 0.85,-0.49 0.85,-1.28 0,-1.77 -0.85,-0.49 -2.22,-0.49 -3.07,0 -0.85,0.49 -0.85,1.28 0,1.77 z"
+               id="path8684" />
+          </g>
+          <g
+             id="g8692">
+            <path
+               fill="#363636"
+               d="m 108.16,353.31 v 4.21 c 0,0.29 -0.19,0.57 -0.57,0.79 -0.75,0.44 -1.98,0.44 -2.73,0 -0.38,-0.22 -0.57,-0.5 -0.57,-0.79 v -4.21 z"
+               id="path8688" />
+            <path
+               fill="#5c5c5c"
+               d="m 104.86,354.1 c 0.75,0.44 1.98,0.44 2.73,0 0.75,-0.44 0.75,-1.14 0,-1.58 -0.75,-0.44 -1.98,-0.44 -2.73,0 -0.76,0.44 -0.76,1.14 0,1.58 z"
+               id="path8690" />
+          </g>
+        </g>
+        <g
+           id="g8712">
+          <polygon
+             fill="#d49c00"
+             points="110.78,352.04 109.74,352.64 91.96,339.44 93,338.84 110.78,349.1 "
+             id="polygon8696" />
+          <polygon
+             fill="#f5b400"
+             points="91.96,342.37 91.96,339.44 109.74,349.7 109.74,352.64 "
+             id="polygon8698" />
+          <path
+             fill="#363636"
+             d="m 93.62,341.95 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.54 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.15 0.49,0.53 0.49,0.85 z"
+             id="path8700" />
+          <path
+             fill="#363636"
+             d="m 108.99,350.82 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.54 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8702" />
+          <polygon
+             fill="#232323"
+             points="104.47,349.6 106.28,347.71 107.86,348.62 106.07,350.52 "
+             id="polygon8704" />
+          <polygon
+             fill="#232323"
+             points="100.98,347.58 102.79,345.69 104.37,346.6 102.58,348.5 "
+             id="polygon8706" />
+          <polygon
+             fill="#232323"
+             points="97.49,345.57 99.3,343.68 100.88,344.59 99.09,346.49 "
+             id="polygon8708" />
+          <polygon
+             fill="#232323"
+             points="94,343.55 95.81,341.66 97.39,342.57 95.6,344.47 "
+             id="polygon8710" />
+        </g>
+        <g
+           id="g8727">
+          <polygon
+             fill="#f5b400"
+             points="81.61,350.15 80.14,347.61 92.62,340.4 94.09,342.94 "
+             id="polygon8714" />
+          <polygon
+             fill="#232323"
+             points="89.52,345.58 89.15,342.4 90.67,341.53 91.03,344.7 "
+             id="polygon8716" />
+          <polygon
+             fill="#232323"
+             points="86.44,347.36 86.07,344.18 87.59,343.3 87.96,346.48 "
+             id="polygon8718" />
+          <polygon
+             fill="#232323"
+             points="83.36,349.13 82.99,345.96 84.51,345.08 84.88,348.26 "
+             id="polygon8720" />
+          <path
+             fill="#363636"
+             d="m 82.31,348.61 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.54 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.53 0.49,0.85 z"
+             id="path8722" />
+          <path
+             fill="#363636"
+             d="m 92.8,342.55 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.54 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8724" />
+          <rect
+             x="93.279999"
+             y="339.87"
+             transform="matrix(0.8658,-0.5004,0.5004,0.8658,-158.1985,92.8144)"
+             fill="#d49c00"
+             width="1.3200001"
+             height="2.9300001"
+             id="rect33482" />
+        </g>
+        <g
+           id="g8733">
+          <polygon
+             fill="#ffa500"
+             points="79.87,349.2 79.87,355.01 74.84,352.1 74.84,346.29 80.46,343.04 85.49,345.95 "
+             id="polygon8729" />
+          <polygon
+             fill="#ff8800"
+             points="79.87,355.01 79.87,349.2 85.49,345.95 85.49,351.76 "
+             id="polygon8731" />
+        </g>
+        <g
+           id="g8739"
+           style="display:inline">
+          <polygon
+             fill="#ffa500"
+             points="86.36,345.64 86.36,341.23 90.63,338.76 94.45,340.97 90.18,343.43 90.18,347.85 "
+             id="polygon8735" />
+          <polygon
+             fill="#ff8800"
+             points="90.18,347.85 90.18,343.43 94.45,340.97 94.45,345.38 "
+             id="polygon8737" />
+        </g>
+        <g
+           id="g8745">
+          <polygon
+             fill="#ffa500"
+             points="105.87,352.07 105.87,357.75 100.96,354.91 100.96,349.23 106.45,346.06 111.37,348.9 "
+             id="polygon8741" />
+          <polygon
+             fill="#ff8800"
+             points="105.87,357.75 105.87,352.07 111.37,348.9 111.37,354.57 "
+             id="polygon8743" />
+        </g>
+        <g
+           id="g8759"
+           style="display:inline">
+          <rect
+             x="75.529999"
+             y="346.32999"
+             transform="matrix(0.866,-0.5,0.5,0.866,-162.8188,87.9646)"
+             fill="#f5b400"
+             width="14.41"
+             height="2.9300001"
+             id="rect33504" />
+          <polygon
+             fill="#232323"
+             points="85.14,348.11 84.77,344.93 86.29,344.05 86.66,347.23 "
+             id="polygon8748" />
+          <polygon
+             fill="#232323"
+             points="82.06,349.89 81.69,346.71 83.21,345.83 83.58,349.01 "
+             id="polygon8750" />
+          <polygon
+             fill="#232323"
+             points="78.98,351.66 78.62,348.49 80.13,347.61 80.5,350.79 "
+             id="polygon8752" />
+          <path
+             fill="#363636"
+             d="m 77.93,351.13 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.53 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8754" />
+          <path
+             fill="#363636"
+             d="m 88.42,345.08 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.53 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8756" />
+          <rect
+             x="88.889999"
+             y="342.39999"
+             transform="matrix(0.8658,-0.5004,0.5004,0.8658,-160.0488,90.9593)"
+             fill="#d49c00"
+             width="1.3200001"
+             height="2.9300001"
+             id="rect33516" />
+        </g>
+        <g
+           id="g8777">
+          <polygon
+             fill="#d49c00"
+             points="104.89,355.43 103.85,356.04 86.07,342.84 87.11,342.24 104.89,352.5 "
+             id="polygon8761" />
+          <polygon
+             fill="#f5b400"
+             points="86.07,345.77 86.07,342.84 103.85,353.1 103.85,356.04 "
+             id="polygon8763" />
+          <path
+             fill="#363636"
+             d="m 87.73,345.34 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.53 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8765" />
+          <path
+             fill="#363636"
+             d="m 103.1,354.22 c 0,0.31 -0.22,0.44 -0.49,0.28 -0.27,-0.16 -0.49,-0.53 -0.49,-0.85 0,-0.31 0.22,-0.44 0.49,-0.28 0.27,0.16 0.49,0.54 0.49,0.85 z"
+             id="path8767" />
+          <polygon
+             fill="#232323"
+             points="98.58,352.99 100.4,351.11 101.97,352.02 100.18,353.92 "
+             id="polygon8769" />
+          <polygon
+             fill="#232323"
+             points="95.09,350.98 96.91,349.09 98.48,350 96.69,351.9 "
+             id="polygon8771" />
+          <polygon
+             fill="#232323"
+             points="91.6,348.96 93.42,347.08 94.99,347.99 93.2,349.89 "
+             id="polygon8773" />
+          <polygon
+             fill="#232323"
+             points="88.11,346.95 89.93,345.06 91.5,345.97 89.71,347.87 "
+             id="polygon8775" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-7-o.svg
+++ b/exercices/atelier/demo/machine-7-o.svg
@@ -0,0 +1,38 @@
+<svg viewBox="0 0 80.13 98.88" xmlns="http://www.w3.org/2000/svg">
+  <g style="display:inline">
+    <path fill="#f80" d="m38.1 25.47 2.3 3.68 12.48 4.96.2-17.27z"/>
+    <path fill="orange" d="M38.1 32.1v-6.63l8.63 2.39.17 9.3z"/>
+    <path fill="#f80" d="m49.87 14.99-.2 17.27 6.63 35.52 5.38 4.37L80.13 61.5V7.12l-30.78 3.53z"/>
+    <path fill="orange" d="m46.73 27.86 2.62-17.21L67.8 0l12.33 7.12-18.45 10.65v54.38l-15.32-8.84V36.85zM15.4 98.88 0 89.98V70.21l15.4 8.91z"/>
+    <path fill="#808285" d="M0 70.21v-2.08l55.97-16.32 5.71-1.49v2.08L15.4 79.12z"/>
+    <path fill="#a7a9ac" d="m0 68.13 46.33-26.68 15.35 8.87L15.4 77.03z"/>
+    <path fill="#f80" d="M61.68 72.16 15.4 98.88V79.12L61.68 52.4z"/>
+    <path fill="#939598" d="m12.93 66.14 40.13-23.17 4.06 2.35L17 70.88l-4.07-2.35z"/>
+    <path fill="#454545" d="M55.35 45.14 16.24 67.71l-.52-.31 39.1-22.56zm-1.62-.93-39.1 22.56-.53-.3L53.2 43.9z"/>
+    <path fill="#808285" d="M57.12 47.72 17 70.88v-2.4l40.12-23.16z"/>
+    <path fill="#f80" d="m38.11 51.6-4.64 2.68v-3.02l4.64-2.68z"/>
+    <path opacity=".3" d="m38.11 51.6-4.64 2.68v-3.02l4.64-2.68z"/>
+    <path fill="orange" d="m32.4 54.89 1.07-.61v-2.33l7.46 4.26v3.56l1.79 1.03v-5.83l-11.04-6.32v5.83z"/>
+    <path fill="#f80" d="m41.81 42.8-10.13 5.85 11.04 6.32v5.83l10.12-5.85v-5.82z"/>
+    <path fill="#808285" d="M38.1 46.91v2.35h.02c0 .6.4 1.2 1.19 1.66 1.59.92 4.16.92 5.75 0 .79-.46 1.19-1.06 1.19-1.66v-2.35z"/>
+    <path fill="#a7a9ac" d="M45.06 48.57c-1.59.92-4.16.92-5.75 0-1.59-.92-1.59-2.4 0-3.32 1.59-.92 4.16-.92 5.75 0 1.59.92 1.59 2.41 0 3.32z"/>
+    <path fill="#808285" d="M43.3 47.56c-.62.36-1.61.36-2.23 0-.61-.35-.61-.93 0-1.29.61-.35 1.61-.35 2.23 0 .61.36.61.93 0 1.29z"/>
+    <path fill="#d49c00" d="M18.02 50.34 7.49 44.26l6.28 8.54v22.32l4.25-2.45z"/>
+    <path fill="#f5b400" d="m3.23 69.04 10.54 6.08V52.8l4.25-2.46-10.53-6.08-4.26 2.46z"/>
+    <path fill="#808285" d="m61.68 21.36-8.01-4.61 4.77 6.48v5.61l3.24-1.87z"/>
+    <path fill="#a7a9ac" d="m50.43 24.23 8.01 4.61v-5.61l3.24-1.87-8.01-4.61-3.24 1.86z"/>
+    <path fill="#f80" d="m29.89 43.17-9.48-5.46 5.65 7.67v3.88l3.83-2.21z"/>
+    <path fill="orange" d="m16.58 43.8 9.48 5.46v-3.88l3.83-2.21-9.48-5.46-3.83 2.21z"/>
+    <path fill="#808285" d="m18.63 45.49 37.52-21.67 1.42.82L20.05 47.7l-1.42-.82z"/>
+    <path fill="#6d6e71" d="M57.57 26.03 20.05 47.7v-1.39l37.52-21.67z"/>
+    <path fill="#808285" d="M13.75 42.67 51.27 21l1.42.82-37.52 23.06-1.42-.82z"/>
+    <path fill="#6d6e71" d="M52.69 23.21 15.17 44.88v-1.39l37.52-21.67z"/>
+    <path fill="#808285" d="M21.77 46.06 6.64 37.33l9.02 12.25v6.91l6.11-3.53z"/>
+    <path fill="#a7a9ac" d="m.54 47.75 15.12 8.74v-6.91l6.11-3.52-15.13-8.73-6.1 3.52z"/>
+    <path fill="#363636" d="m69.97 38.89 9.61-5.55v-17l-9.61 5.55z"/>
+    <path fill="#5c5c5c" d="m65.92 36.55 4.05 2.34v-17l9.61-5.55-4.05-2.33-9.61 5.54z"/>
+    <path fill="#f5b400" d="m78.58 25.29-3.84-4.32-3.84 8.75z"/>
+    <path d="m74.81 21.42 3.38 3.8-6.75 3.9zm-.07-.45-3.84 8.75 7.68-4.43z"/>
+    <path d="m75.44 26.52-1.36-1.44.98-.79-.45-.93.73-.62.23 1.58-.93.79z"/>
+  </g>
+</svg>
--- a/exercices/atelier/demo/machine-7.svg
+++ b/exercices/atelier/demo/machine-7.svg
@@ -0,0 +1,207 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 80.130 98.880"
+   sodipodi:docname="machine-7.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs7681" />
+  <sodipodi:namedview
+     id="namedview7679"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="7.5546117"
+     inkscape:cx="40.041767"
+     inkscape:cy="49.44"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g7674" />
+  <g
+     id="g7676">
+    <g
+       transform="translate(-339.31,-220.14)"
+       id="g7674"
+       inkscape:label="Layer2">
+      <g
+         id="g7612">
+        <polygon
+           fill="#ff8800"
+           points="392.19,254.25 392.39,236.98 377.41,245.61 379.71,249.29 "
+           id="polygon7588" />
+        <polygon
+           fill="#ffa500"
+           points="386.04,248 386.21,257.3 377.41,252.24 377.41,245.61 "
+           id="polygon7590" />
+        <polygon
+           fill="#ff8800"
+           points="395.61,287.92 400.99,292.29 419.44,281.64 419.44,227.26 388.66,230.79 389.18,235.13 388.98,252.4 "
+           id="polygon7592" />
+        <polygon
+           fill="#ffa500"
+           points="407.11,220.14 419.44,227.26 400.99,237.91 400.99,292.29 385.67,283.45 385.67,256.99 386.04,248 388.66,230.79 "
+           id="polygon7594" />
+        <polygon
+           fill="#ffa500"
+           points="339.31,290.35 354.71,299.26 354.71,319.02 339.31,310.12 "
+           id="polygon7596" />
+        <polygon
+           fill="#808285"
+           points="395.28,271.95 400.99,270.46 400.99,272.54 354.71,299.26 339.31,290.35 339.31,288.27 "
+           id="polygon7598" />
+        <polygon
+           fill="#a7a9ac"
+           points="400.99,270.46 354.71,297.17 339.31,288.27 385.64,261.59 "
+           id="polygon7600" />
+        <polygon
+           fill="#ff8800"
+           points="354.71,299.26 400.99,272.54 400.99,292.3 354.71,319.02 "
+           id="polygon7602" />
+        <polygon
+           fill="#939598"
+           points="396.43,265.46 356.31,291.02 352.24,288.67 352.24,286.28 392.37,263.11 "
+           id="polygon7604" />
+        <polygon
+           fill="#454545"
+           points="355.03,287.54 394.13,264.98 394.66,265.28 355.55,287.85 "
+           id="polygon7606" />
+        <polygon
+           fill="#454545"
+           points="353.41,286.61 392.51,264.04 393.04,264.35 353.94,286.91 "
+           id="polygon7608" />
+        <polygon
+           fill="#808285"
+           points="356.31,288.62 396.43,265.46 396.43,267.86 356.31,291.02 "
+           id="polygon7610" />
+      </g>
+      <g
+         id="g7622">
+        <polygon
+           fill="#ff8800"
+           points="372.78,271.4 377.42,268.72 377.42,271.74 372.78,274.42 "
+           id="polygon7614" />
+        <polygon
+           opacity="0.3"
+           points="372.78,271.4 377.42,268.72 377.42,271.74 372.78,274.42 "
+           id="polygon7616" />
+        <polygon
+           fill="#ffa500"
+           points="372.78,272.09 380.24,276.35 380.24,279.91 382.03,280.94 382.03,275.11 370.99,268.79 370.99,274.62 371.71,275.03 372.78,274.42 "
+           id="polygon7618" />
+        <polygon
+           fill="#ff8800"
+           points="382.03,275.11 382.03,280.94 392.15,275.09 392.15,269.27 381.12,262.94 370.99,268.79 "
+           id="polygon7620" />
+      </g>
+      <g
+         id="g7630">
+        <path
+           fill="#808285"
+           d="m 377.41,267.05 v 2.35 h 0.02 c 0,0.6 0.4,1.2 1.19,1.66 1.59,0.92 4.16,0.92 5.75,0 0.79,-0.46 1.19,-1.06 1.19,-1.66 v -2.35 z"
+           id="path7624" />
+        <path
+           fill="#a7a9ac"
+           d="m 384.37,268.71 c -1.59,0.92 -4.16,0.92 -5.75,0 -1.59,-0.92 -1.59,-2.4 0,-3.32 1.59,-0.92 4.16,-0.92 5.75,0 1.59,0.92 1.59,2.41 0,3.32 z"
+           id="path7626" />
+        <path
+           fill="#808285"
+           d="m 382.61,267.7 c -0.62,0.36 -1.61,0.36 -2.23,0 -0.61,-0.35 -0.61,-0.93 0,-1.29 0.61,-0.35 1.61,-0.35 2.23,0 0.61,0.36 0.61,0.93 0,1.29 z"
+           id="path7628" />
+      </g>
+      <g
+         id="g7636">
+        <polygon
+           fill="#d49c00"
+           points="353.08,272.94 353.08,295.26 357.33,292.81 357.33,270.48 346.8,264.4 "
+           id="polygon7632" />
+        <polygon
+           fill="#f5b400"
+           points="353.08,272.94 357.33,270.48 346.8,264.4 342.54,266.86 342.54,289.18 353.08,295.26 "
+           id="polygon7634" />
+      </g>
+      <g
+         id="g7642">
+        <polygon
+           fill="#808285"
+           points="397.75,243.37 397.75,248.98 400.99,247.11 400.99,241.5 392.98,236.89 "
+           id="polygon7638" />
+        <polygon
+           fill="#a7a9ac"
+           points="397.75,243.37 400.99,241.5 392.98,236.89 389.74,238.75 389.74,244.37 397.75,248.98 "
+           id="polygon7640" />
+      </g>
+      <g
+         id="g7672">
+        <polygon
+           fill="#ff8800"
+           points="365.37,265.52 365.37,269.4 369.2,267.19 369.2,263.31 359.72,257.85 "
+           id="polygon7644" />
+        <polygon
+           fill="#ffa500"
+           points="365.37,265.52 369.2,263.31 359.72,257.85 355.89,260.06 355.89,263.94 365.37,269.4 "
+           id="polygon7646" />
+        <polygon
+           fill="#808285"
+           points="396.88,244.78 359.36,267.84 357.94,267.02 357.94,265.63 395.46,243.96 "
+           id="polygon7648" />
+        <polygon
+           fill="#6d6e71"
+           points="359.36,266.45 396.88,244.78 396.88,246.17 359.36,267.84 "
+           id="polygon7650" />
+        <polygon
+           fill="#808285"
+           points="392,241.96 354.48,265.02 353.06,264.2 353.06,262.81 390.58,241.14 "
+           id="polygon7652" />
+        <polygon
+           fill="#6d6e71"
+           points="354.48,263.63 392,241.96 392,243.35 354.48,265.02 "
+           id="polygon7654" />
+        <polygon
+           fill="#808285"
+           points="354.97,269.72 354.97,276.63 361.08,273.1 361.08,266.2 345.95,257.47 "
+           id="polygon7656" />
+        <polygon
+           fill="#a7a9ac"
+           points="354.97,269.72 361.08,266.2 345.95,257.47 339.85,260.99 339.85,267.89 354.97,276.63 "
+           id="polygon7658" />
+        <polygon
+           fill="#363636"
+           points="418.89,236.48 409.28,242.03 409.28,259.03 418.89,253.48 "
+           id="polygon7660" />
+        <polygon
+           fill="#5c5c5c"
+           points="409.28,242.03 418.89,236.48 414.84,234.15 405.23,239.69 405.23,256.69 409.28,259.03 "
+           id="polygon7662" />
+        <g
+           id="g7670">
+          <polygon
+             fill="#f5b400"
+             points="410.21,249.86 417.89,245.43 414.05,241.11 "
+             id="polygon7664" />
+          <path
+             d="m 414.12,241.56 3.38,3.8 -6.75,3.9 z m -0.07,-0.45 -3.84,8.75 7.68,-4.43 z"
+             id="path7666" />
+          <polygon
+             points="414.37,244.43 413.92,243.5 414.65,242.88 414.88,244.46 413.95,245.25 414.75,246.66 413.39,245.22 "
+             id="polygon7668" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
--- a/exercices/atelier/index.md
+++ b/exercices/atelier/index.md
@@ -0,0 +1,98 @@
+---
+layout: layouts/page.njk
+title: Atelier
+---
+
+La société [Ewattch](https://ewattch.com/logiciels/#easyvision) de Saint Dié implémente des solutions iot de suivi de consommation électrique de machine industrielles.
+
+Un des module consiste à modéliser un atelier en 3D isométrique.
+
+Reproduire ce module
+
+![](atelier.png)
+
+Vous disposez des illustrations svg des machines.
+
+#|machine|largeur|hauteur|échelle|origine x|origine y
+--:|---|--:|--:|--:|--:|--:|
+1|<a href="demo/machine-1.svg" download>inspection</a>|66.860|69.700|1.7|14.20|69.700
+2|<a href="demo/machine-2.svg" download>cn</a>|63.140|82.689|1.2|17.79|82.689
+3|<a href="demo/machine-3.svg" download>perceuse</a>|40.580|79.180|1.6|13.99|79.180
+4|<a href="demo/machine-4.svg" download>tour</a>|89.020|94.630|1.2|17.78|94.630
+5|<a href="demo/machine-5.svg" download>foreuse</a>|63.250|97.190|1.35|14.25|97.190
+6|<a href="demo/machine-6.svg" download>robot</a>|78.780|85.510|1.6|29.76|85.510
+7|<a href="demo/machine-7.svg" download>fraiseuse</a>|80.130|98.880|1.33|15.44|98.880
+
+
+### Optimiser les fichiers SVG
+
+Installer le composant nodejs [svgo](https://github.com/svg/svgo). 
+Optimiser les illustrations des machines.
+
+Attention : Il faudra peut être ajouter à la variable d'environnement PATH le dossier d'installation de svgo qui se trouve par défaut dans  `C:\Users\VotreCompte\AppData\Roaming\npm`
+
+### Dessiner la gille
+
+Dessiner un carré de 400px de côté, remplir avec un motif `pattern` de dessiner une grille avec un pas de 25px.
+
+Appliquer une transformation isométrique à la grille.
+
+### Choix de la machine
+
+Ajouter un champ de sélection select pour choisir la machine 
+
+Lorsque l'on clique sur la grille la machine sélectionnée est téléchargée, ajouter à l'illustration svg et positionnée sur la grille
+
+Attention le téléchargement d'éléments extérieurs à la page html ne peut s'effectuer que si la page est hébergée sur un serveur web.
+
+Installer le serveur web de développement Live Server dans Visual Studio. Cliquer sur le menu `Go Live` à gauche de la barre de statut de VS Code pour démarrer le serveur.
+
+### Fonctions Javascript
+
+Pour vous aider dans le développement, voici quelques fonctions javascript utiles.
+
+
+Transformer des coordonnées du plan de l'écrans en coordonnées isométriques. La valeur 360 correspond à un déplacement arbitraire pour centrer la grille dans l'écran.
+
+```javascript
+function planToIsometric(x , y) {
+  x = x - 360 / zoom;
+  y = y;
+
+  let X = x * Math.cos(angle) - y * Math.sin(angle); 
+  let Y = x * Math.sin(angle) + y * Math.cos(angle);
+
+  x = X + Y * Math.tan(Math.PI / 6); 
+  y = Y / Math.cos(angle);
+
+  return { x, y };
+}
+```
+
+Transformer des coordonnées isométriques en coordonnées du plan
+
+```javascript
+function isometricToPlan(h , v) {  
+  let Y = v * 0.86603;
+  let X = h - Y * Math.tan(Math.PI / 6);
+
+  let x = (X + Y * Math.tan(angle)) * Math.cos(angle); 
+  let y = (Y - x * Math.sin(angle)) / Math.cos(angle);
+
+  x = x + 360;
+
+  return { x, y };
+}
+```
+
+
+Convertir du texte (récupéré avec une fonction fetch) en objet xml et extraire l'élément SVG.
+
+```javascript
+const xml = new window.DOMParser().parseFromString(str, "image/svg+xml");
+const svg = xml.children[0];
+```
+
+Fixer les attributs width et height en fonction des machines et ajuster au facteur d'échelle.
+
+Décaler l'origine de la machine en fonction de la machine
--- a/exercices/atelier/reponse.md
+++ b/exercices/atelier/reponse.md
@@ -0,0 +1,198 @@
+---
+layout: layouts/page.njk
+title: Atelier
+---
+
+
+Optimisation des fichiers SVG
+
+```
+svgo machine-1.svg -o machine-1-o.svg
+```
+
+Si vous n'arrivez pas à utiliser la commande svg vous pouvez utiliser le module Visual Studio Code `svgo`
+
+
+Du fait de la projection isométrique le viewbox de l'illustration doit être plus grand que la grille.
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 420" preserveAspectRatio="xMinYMin" 
+  width="1500" height="840">
+```
+
+Le motif. Seuls les côté haut et droit sont dessinés les autres sont commun au motif suivant.
+
+```svg
+<defs>
+  <pattern id="tenthGrid" width="25" height="25" x="5" y="5" patternUnits="userSpaceOnUse">
+    <path d="M 25 0 L 0 0 0 25" fill="none" stroke="black" stroke-width="1"/>
+  </pattern>
+</defs>
+```
+
+La grille et un rectangle de sélection rouge. La grille fait 400 x 400 le rectangle 25 x 25
+
+```svg
+<g id="grille" fill="none" stroke="#000">
+  <rect x="5" y="5" stroke="#000" stroke-width="1" width="400" height="400" fill="url(#tenthGrid)" id="grille" />
+  <rect x="5" y="5" width="25" height="25" stroke="#000" stroke-width="1" fill="red" stroke="none" id="rect" />
+</g>
+```
+
+La projection isométrique
+
+```svg
+<g id="grille" fill="none" stroke="#000" transform="translate(360 0) rotate(30) skewX(-30)">
+  <rect x="5" y="5" stroke="#000" stroke-width="1" width="400" height="400" fill="url(#tenthGrid)" id="grille" transform="scale(1 0.86603)"/>
+  <rect x="5" y="5" width="25" height="25" stroke="#000" stroke-width="1" fill="red" stroke="none" id="rect" transform="scale(1 0.86603)"/>
+</g>
+```
+
+Le groupe qui va contenir les machines
+
+```svg
+<g id="atelier"></g>
+```
+
+### le sélecteur
+
+les différentes valeurs des machines sont stockées dans des champs data des éléments html.
+
+```html
+<select name="machine">
+  <option value="1" data-width="66.860" data-height="69.700" data-scale="1.7" data-originx="14.20" data-originy="69.70">inspection</option>
+  <option value="2" data-width="63.140" data-height="82.689" data-scale="1.2" data-originx="17.79" data-originy="82.689">cn</option>
+  </select>
+```
+
+### Le javascript
+
+Récupérer les coordonnées de l'illustration svg et en déduire le facteur de zoom avec le viewbox. 
+
+Définir l'angle de projection isométrique = 30°
+
+Récupérer le rectangle de sélection rouge
+
+```javascript
+let coord = document.getElementsByTagName("svg")[0].getBoundingClientRect();
+const zoom = Math.min(750.0 / coord.width, 420.0 / coord.height);
+const angle = - Math.PI / 6;
+const rect = document.getElementById("rect");
+```
+
+Lorsque la souris bouge au dessus de la grille, lire les coordonnées `offsetX` et `offsetY` et les convertir dans la projection isométrique.
+
+Fixer les coordonnées x,y  du rectangle rouge avec les coordonnées calculées, en prenant soin de faire un modulo du pas de 25 et d'inclure la marge de 5px du bord de l'écran.
+
+```javascript
+document.getElementById("grille").addEventListener("mousemove", function (evt) 
+{           
+  let {x, y} = planToIsometric(evt.offsetX, evt.offsetY)
+  
+  rect.setAttribute("x", Math.floor(x * zoom / 25) * 25 + 5);
+  rect.setAttribute("y", Math.floor(y * zoom / 25) * 25 + 5);
+});
+```
+
+Au clic sur la grille  lire la valeur du sélecteur
+
+```javascript
+document.getElementById("grille").addEventListener("click", async function (evt) {
+  
+  const m = document.getElementsByTagName("select")[0].value;
+```
+
+Récupérer le fichier svg optimisé de la machine correspondante
+
+```javascript
+const data = await fetch(`machine-${m}-o.svg`)
+const str = await data.text(); 
+```
+
+Convertir le texte reçu au format xml et extraire l'élément svg.
+
+```javascript
+const xml = new window.DOMParser().parseFromString(str, "image/svg+xml");
+const svg = xml.children[0];
+```
+
+Récupérer les différentes données de la machine
+
+```javascript
+const option = document.querySelector(`option[value='${m}']`)
+let scale = option.dataset["scale"];
+let width = option.dataset["width"];
+let height = option.dataset["height"];
+let originx = option.dataset["originx"];
+let originy = option.dataset["originy"];
+```
+
+Ajuster la taille du svg en fonction des données
+  
+```javascript
+svg.setAttribute("width", width * scale);
+svg.setAttribute("height", height * scale);
+```
+
+Convertir les coordonnées de la souris sur la grille en coordonnées isométriques. Ajuster ces coordonnées au pas de la grille de 25 px en tenant compte de la marge de 5px avec le bord de l'écran.
+
+```javascript
+let {x, y} = planToIsometric(evt.clientX , evt.clientY);
+  
+x = Math.ceil(x * zoom / 25) * 25 + 5;
+y = Math.ceil(y * zoom / 25) * 25 + 5;
+```
+
+Retourner les coordonnées isométrique en coordonnées réelles, car les illustrations des machines sont déja en 3D et ne doivent pas donc subir de nouvelle transformation
+
+```javascript
+({x, y} = isometricToPlan(x , y));
+```
+
+Placer l'illustration de la machine aux coordonnées trouvées en se décalant à l'origine (coin inférieur droit) de la machine et ajuster au facteur d'échelle.
+
+```javascript
+svg.setAttribute("x", x - originx * scale);
+svg.setAttribute("y", y - originy * scale);
+
+document.getElementById("atelier").appendChild(svg);
+```
+
+Fonction complète :
+
+```javascript
+document.getElementById("grille").addEventListener("click", async function (evt) {
+  
+  const m = document.getElementsByTagName("select")[0].value;
+  
+  const data = await fetch(`machine-${m}-o.svg`)
+  const str = await data.text(); 
+  const xml = new window.DOMParser().parseFromString(str, "image/svg+xml");
+  const svg = xml.children[0];
+  
+  const option = document.querySelector(`option[value='${m}']`)
+  let scale = option.dataset["scale"];
+  let width = option.dataset["width"];
+  let height = option.dataset["height"];
+  let originx = option.dataset["originx"];
+  let originy = option.dataset["originy"];
+
+  svg.setAttribute("width", width * scale);
+  svg.setAttribute("height", height * scale);
+  
+  let {x, y} = planToIsometric(evt.clientX , evt.clientY);
+  
+  x = Math.ceil(x * zoom / 25) * 25 + 5;
+  y = Math.ceil(y * zoom / 25) * 25 + 5;
+  
+  ({x, y} = isometricToPlan(x , y));
+  
+  svg.setAttribute("x", x - originx * scale);
+  svg.setAttribute("y", y - originy * scale);
+
+  document.getElementById("atelier").appendChild(svg);
+});
+```
+
+télécharger le fichier <a href="../demo/index.html" download>html</a>
+
--- a/exercices/atelier/svgo.config.js
+++ b/exercices/atelier/svgo.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+    multipass: true,        // boolean. false by default
+    collapseGroups: true,   // collapse useless groups
+    cleanupIDs: true,       // remove unused and minify used IDs
+    convertTransform: true, // collapse multiple transforms into one, convert matrices to the short aliases, and much more
+    convertStyleToAttrs: true, // convert styles into attributes
+    convertColors: false,
+    js2svg: {
+      indent: 2,            // string with spaces or number of spaces. 4 by default
+      pretty: true,         // boolean, false by default
+    },
+  };
--- a/exercices/background/background.md
+++ b/exercices/background/background.md
@@ -0,0 +1,4 @@
+---
+layout: layouts/page.njk
+title: Background
+---
--- a/exercices/background/background.svg
+++ b/exercices/background/background.svg
@@ -0,0 +1,54 @@
+<svg width="2261" height="1272" viewBox="0 0 2261 1272" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1130.5 -102.5) rotate(90) scale(1438.5 4422.5)">
+    <stop stop-color="#4354E6"/>
+    <stop offset="1" stop-color="#2E24AA" stop-opacity="0"/>
+  </radialGradient>
+  <radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1372 -159.5) rotate(90) scale(1455.5 1832)">
+    <stop stop-color="#F89797"/>
+    <stop offset="0.484375" stop-color="#D676E6" stop-opacity="0.5"/>
+    <stop offset="1" stop-color="#4F477C" stop-opacity="0"/>
+  </radialGradient>
+  <radialGradient id="paint2_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(400.5 -509) rotate(90) scale(1673 1860.5)">
+    <stop stop-color="#FF8A36"/>
+    <stop offset="0.348958" stop-color="#FB5A67" stop-opacity="0.5"/>
+    <stop offset="1" stop-color="#68105F" stop-opacity="0"/>
+  </radialGradient>
+  <radialGradient id="paint3_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(520.5 -305) rotate(90) scale(702 980.5)">
+    <stop stop-color="#FF8A36"/>
+    <stop offset="1" stop-color="#833F6E" stop-opacity="0"/>
+  </radialGradient>
+  <radialGradient id="paint4_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(500 -160) rotate(90) scale(290 1049)">
+    <stop offset="0.313131" stop-color="#FBC55A"/>
+    <stop offset="0.597854" stop-color="#FF8A36" stop-opacity="0.5"/>
+    <stop offset="1" stop-color="#A63D8F" stop-opacity="0"/>
+  </radialGradient>
+  <clipPath id="clip0">
+    <rect width="2261" height="1272" fill="white"/>
+  </clipPath>
+</defs>
+<g clip-path="url(#clip0)">
+  <rect width="2261" height="1272" fill="black"/>
+  <rect x="-1147" y="-916" width="4532" height="2576" fill="black"/>
+  <ellipse opacity="0.5" cx="1130.5" cy="-102.5" rx="4422.5" ry="1438.5" fill="url(#paint0_radial)">
+    
+  </ellipse>
+  <ellipse opacity="0.33" cx="1372" cy="-159.5" rx="1832" ry="1455.5" fill="url(#paint1_radial)">
+    <animate attributeName="cx" values="1372;0;1372" dur="10s" repeatCount="indefinite" />
+    <animate attributeName="cy" values="-159.5;50;-159.5" dur="10s" repeatCount="indefinite" />
+  </ellipse>
+  <ellipse opacity="0.7" cx="400.5" cy="-509" rx="1860.5" ry="1673" fill="url(#paint2_radial)">
+    <animate attributeName="cx" values="1372;0;1372" dur="10s" repeatCount="indefinite" />
+    <animate attributeName="cy" values="-159.5;50;-159.5" dur="10s" repeatCount="indefinite" />
+  </ellipse>
+  <ellipse opacity="0.7" cx="520.5" cy="-305" rx="980.5" ry="702" fill="url(#paint3_radial)">
+    <animate attributeName="cx" values="520.5;0;520.5" dur="10s" repeatCount="indefinite" />
+    <animate attributeName="cy" values="980.5;-50;980.5" dur="10s" repeatCount="indefinite" />
+  </ellipse>
+  <ellipse opacity="0.5" cx="500" cy="-160" rx="1049" ry="290" fill="url(#paint4_radial)">
+    <animate attributeName="cx" values="500;0;500" dur="10s" repeatCount="indefinite" />
+    <animate attributeName="cy" values="-160;50;-160" dur="10s" repeatCount="indefinite" />
+  </ellipse>
+</g>
+
+</svg>
--- a/exercices/carte/europe-elargie.svg
+++ b/exercices/carte/europe-elargie.svg
--- a/exercices/carte/france.svg
+++ b/exercices/carte/france.svg
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="575" height="575" 
+viewBox="0 0 575 575">
+<g style="fill:#f6ffd5;stroke:#000000;stroke-width:1.5;">
+<path id="FR-BRE" 
+  d="m 180.351,159.954 0,-4.177 -0.963,-0.774 0.189,-5.511 -1.735,-0.868 -2.374,-0.031 -2.115,-1.679 -2.234,2.665 -1.764,0.22 -1.521,2.065 -1.297,-0.312 -3.228,-2.833 -1.126,-3.619 -0.646,-2.698 -9.746,0 -3.181,-1.938 2.488,-3.318 -5.397,-0.216 -2.066,2.342 0,0.003 -1.048,1.182 -3.845,-0.42 -0.386,2.203 -1.81,0.146 -0.181,-2.623 -2.354,-0.709 -0.978,1.11 0,-3.71 -2.723,2.028 -3.591,-0.606 -1.239,2.456 -7.291,3.947 0,1.851 -0.963,0 0,-3.421 -4.073,-1.931 0.371,-3.487 -3.704,-2.731 0,-3.401 -2.732,-0.592 0.188,-3.158 -2.114,-0.188 0.188,-2.184 -4.455,0 -0.418,1.36 -0.983,-2.316 -2.024,1.562 -4.517,0.569 -0.897,1.23 -3.052,-2.289 -4.531,3.043 1.618,2.2 -2.437,3.329 -3.18,-1.852 -5.845,0.199 0,3.896 -1.021,0 -0.384,-1.792 -2.308,0.369 -0.439,-4.861 -2.44,2.694 -2.22,-0.917 -4.565,0.43 -0.792,1.963 -2.074,0.486 -0.401,-2.127 -5.011,0.666 0,1.354 -2.738,0.165 -1.436,-1.012 -1.858,0.929 -0.392,2.253 -5.141,0.187 -3.038,3.659 2.29,1.71 -3.022,2.478 1.038,1.875 -0.818,4.486 3.584,0.466 1.052,-1.049 0.488,0.646 7.579,-0.988 1.544,-1.064 -1.313,1.257 0.478,2.472 3.665,-1.644 -0.709,2.497 4.354,0.189 -0.094,0.561 -4.355,-0.168 -3.665,-0.949 -4.706,-2.255 -3.163,3.635 3.712,1.262 -0.203,5.684 1.48,-1.194 2.063,-3.145 3.851,2.203 1.873,0.399 0.707,2.827 -1.036,1.854 -2.363,-0.176 -2.389,0.005 -3.878,0.591 -6.795,0.383 -1.632,2.159 2.311,1.377 2.124,-0.188 1.748,1.563 2.51,-0.188 3.972,4.517 0.937,4.882 -1.507,3.014 4.554,0.861 4.667,-0.229 1.144,-2.063 -1.177,-1.576 0.771,0.344 1.767,-0.186 3.138,1.757 2.288,-0.443 0,-0.986 0.189,0.81 2.646,4.314 5.891,0.401 0.135,-0.714 1.007,1.452 3.521,0.62 2.376,0 0.022,0.035 2.279,3.646 3.449,0.862 0.265,-0.401 -0.16,0.605 2.903,1.268 3.459,3.432 1.088,2.026 -0.794,5.171 2.713,2.026 1.529,-1.771 -1.273,-1.677 0,-3.019 2.242,0.538 0.62,-1.859 0.282,0.654 2.881,2.495 1.45,-2.404 -0.171,-0.387 0.667,0.905 0.146,-0.021 -1.888,2.378 2.647,0.883 1.792,2.783 10.698,-0.979 2.086,0.455 -1.007,0.866 0.218,2.068 0.585,0.438 1.062,-0.189 1.587,-1.587 1.035,1.201 3.263,0 3.829,-1.958 5.649,-2.229 0.188,-5.494 1.267,-0.685 0,0 3.621,-1.932 12.229,-0.6 0.824,-2.28 1.852,-1.817 4.42,-0.613 0.181,-2.08 2.5,0.346 1.739,2.33 4.279,1.053 0.874,-1.83 0.986,-3.5 2.492,-6.151 1.198,-0.683 3.55,0.437 0,-5.744 -1.375,-1.375 0,-5.532 -0.594,-1.979 0,-2.956 1.967,-1.975 z m -69.249,37.71 1.736,2.1 -0.733,1.183 -2.271,-0.695 -2.993,-1.401 2.882,-0.432 -0.487,-1.19 1.866,0.435 z"
+  />
+<polygon id="FR-NOR" 
+  points="287.819,80.766 285.81,77.1 285.207,73.554 276.58,65.117 275.542,63.042 273.257,63.241 271.432,62.463 270.057,64.15 261.73,70.548 246.918,74.26 237.095,77.78 229.095,82.093 224.301,89.222 223.254,94.988 227.308,98.037 231.562,98.933 227.624,99.635 220.128,103.964 211.885,107.224 205.353,103.577 189.3,101.206 185.525,99.236 179.953,100.652 179.953,100.651 178.147,101.109 177.97,96.689 172.927,90.717 174.347,87.167 176.73,87.167 174.579,81.296 165.872,80.875 161.455,83.94 156.558,80.738 148.966,78.467 148.002,80.897 152.188,84.258 152.188,88.321 150.522,90.386 151.724,91.582 152.169,91.886 151.773,95.506 153.181,98.705 157.679,103.787 158.631,108.21 159.593,109.617 159.593,116.552 161.937,121.31 161.937,126.637 159.378,131.756 162.203,139.06 166.477,140.02 166.771,141.564 164.92,142.411 160.917,142.411 161.605,145.265 162.79,149.064 166.194,152.058 168.081,152.547 169.685,150.37 171.424,150.151 173.437,147.756 175.259,149.2 177.636,149.2 178.969,149.867 178.969,150.321 182.67,150.775 184.599,149.246 187.235,150.32 187.261,150.364 187.424,150.689 187.443,150.673 188.575,152.587 190.98,154.359 193.919,152.389 195.847,153.757 201.205,150.588 206.462,151.362 209.559,150.096 210.351,148.21 211.979,148.051 213.554,149.459 214.347,153.804 216.895,154.78 217.915,158.375 221.565,158.582 226.858,153.693 231.873,153.515 233.296,155.454 234.277,162.589 237.67,163.804 239.673,166.793 243.667,166.793 243.815,167.878 244.414,167.862 244.575,166.195 244.923,166.195 247.654,170.264 250.257,170.685 250.258,165.609 248.89,163.797 248.556,162.509 251.256,160.9 254.249,160.297 256.329,157.778 255.938,150.313 251.813,146.813 251.625,143.452 251.152,143.135 253.605,140.789 256.207,140.789 263.283,137.132 265.468,138.05 270.63,138.071 271.942,136.508 271.942,133.647 275.851,131.71 275.851,128.541 276.928,127.65 276.833,126.757 278.122,125.468 276.065,125.028 276.065,123.623 275.136,122.168 275.724,121.438 281.215,119.872 282.649,117.424 283.853,113.099 285.303,111.301 285.567,109.341 287.043,110.154 288.931,109.64 287.747,107.792 287.181,103.248 285.483,101.732 285.978,100.217 287.347,97.664 288.39,95.87 286.2,95.87 286.2,92.744 285.06,90.834 285.803,87.092 286.747,84.714 285.185,84.714 285.784,83.231 "
+  />
+<polygon id="FR-PDL" 
+  points="221.346,157.964 218.667,157.811 218.667,157.811 218.377,157.796 217.394,154.326 214.88,153.363 214.111,149.146 212.186,147.428 209.939,147.645 209.106,149.633 206.391,150.743 201.086,149.958 195.88,153.038 193.933,151.655 190.998,153.623 189.061,152.219 187.667,149.842 184.503,148.55 182.496,150.144 178.983,149.714 178.778,155.284 179.752,156.069 179.752,159.709 177.784,161.677 177.784,164.926 178.377,166.909 178.377,172.643 179.752,174.018 179.752,178.837 176.677,178.46 175.125,179.341 172.544,185.719 171.56,189.209 171.26,189.866 170.919,190.548 170.607,190.479 167.324,189.665 165.562,187.306 162.187,186.839 161.994,189.071 157.85,189.645 155.81,191.652 155.025,193.732 143.13,194.316 137.757,197.151 137.57,202.596 132.256,204.693 128.603,206.597 125.689,206.597 124.413,205.112 122.5,207.025 121.036,207.297 122.316,208.177 118.646,211.447 119.619,212.42 120.297,213.776 118.234,216.655 120.692,217.973 124.776,218.844 125.075,217.601 126.937,219.977 130.747,219.977 133.277,217.227 135.187,217.227 132.64,218.502 132.847,220.674 133.569,222.33 131.647,224.253 129.083,224.253 129.58,227.841 134.021,227.03 138.798,231.426 138.738,231.502 138.517,231.779 138.522,231.783 132.85,239.1 132.653,244.017 138.675,249.852 138.467,251.789 140.335,251.789 144.025,262.858 148,264.83 151.958,268.789 156.388,268.789 158.138,272.694 162.483,272.694 164.376,275.564 169.164,277.959 169.338,275.397 170.136,276.149 176.238,272.443 178.691,272.276 179.878,275.484 183.727,273.867 186.859,276.216 189.505,274.969 191.752,274.35 192.752,273.155 195.744,271.232 193.362,268.812 192.006,269.842 191.892,268.894 193.302,266.267 191.942,263.947 193.05,262.451 192.444,256.866 190.578,254.006 191.973,252.197 188.813,248.655 189.983,246.095 185.227,242.132 185.227,239.835 183.452,237.312 183.933,237.111 183.926,237.105 187.113,235.737 193.205,237.12 196.166,235.179 196.166,232.577 201.206,232.186 206.033,231.223 211.108,231.044 211.622,232.23 213.353,233.728 214.833,231.131 218.462,227.318 220.062,227.318 222.325,219.162 225.483,215.402 225.264,211.113 227.227,208.557 227.227,207.192 226.312,206.07 226.873,204.923 228.007,202.653 231.707,205.257 234.362,205.257 233.297,201.76 235.225,203.029 236.673,200.905 242.55,199.284 241.519,196.789 242.735,195.238 245.674,194.084 248.506,190.405 248.506,186.884 250.401,186.884 251.256,183.88 251.45,179.646 249.586,177.932 251.005,175.458 253.512,172.272 250.538,170.152 248.008,169.714 245.241,165.596 244.028,165.596 243.971,166.19 239.992,166.19 238.057,163.303 234.822,162.143 233.879,155.293 232.167,152.902 226.616,153.099 "
+  />
+<polygon id="FR-CVL" 
+  points="315.312,167.854 312.884,166.626 310.878,163.631 305.573,163.253 303.292,161.398 300.646,163.849 295.603,164.291 295.61,164.272 295.09,164.335 294.874,164.354 294.869,164.362 294.796,164.371 294.403,159.349 293.996,158.747 293.601,156.072 289.401,155.269 287.748,153.263 287.167,148.814 284.812,148.437 284.421,146.372 281.674,144.414 280.39,141.288 281.798,138.885 280.354,137.245 280.354,135.473 281.185,133.187 279.544,131.548 278.95,129.205 276.761,127.016 275.253,128.247 275.253,131.329 271.348,133.266 271.348,136.282 270.352,137.467 265.645,137.467 263.257,136.467 256.135,140.186 253.371,140.186 250.201,143.215 251.043,143.777 251.229,147.1 255.354,150.6 255.716,157.576 253.921,159.748 251.088,160.318 247.861,162.219 248.327,164.001 249.661,165.806 249.661,170.589 250.25,170.679 252.65,172.391 252.001,173.204 251.997,173.202 251.776,173.486 251.619,173.683 251.622,173.685 250.509,175.119 248.828,178.046 250.838,179.894 250.668,183.778 249.947,186.28 247.905,186.28 247.905,190.197 245.301,193.585 242.363,194.737 240.833,196.688 241.319,197.897 241.309,197.896 241.466,198.264 241.562,198.502 241.568,198.502 241.734,198.889 236.303,200.389 235.064,202.206 232.245,200.349 233.555,204.663 231.899,204.663 227.786,201.765 225.605,206.159 226.628,207.415 226.628,208.359 224.652,210.928 224.873,215.202 221.821,218.831 219.437,227.321 219.833,227.321 220.62,230.401 224.283,231.172 224.283,233.498 228.97,234.873 228.971,238.342 228.757,241.009 234.995,241.002 240.369,239.75 239.945,237.512 241.095,236.799 242.542,238.797 243.855,239.361 244.998,243.982 248.33,247.469 248.705,250.224 251.908,253.394 252.219,253.706 252.219,257.252 251.386,259.75 255.245,262.794 257.253,264.803 260.286,265.197 261.453,269.222 263.507,270.34 263.186,272.856 261.84,273.098 261.829,273.686 262.432,273.817 267.477,274.205 269.111,272.567 272.254,275.711 276.187,271.172 277.806,272.269 280.168,272.049 280.872,272.412 284.747,272.645 285.896,269.535 295.401,270.687 299.174,271.67 300.571,271.512 300.571,271.517 301.052,271.458 301.167,271.445 301.167,271.444 305.692,270.885 306.685,268.773 309.122,265.975 313.819,265.011 316.461,265.816 319.438,263.494 319.214,261.639 318.263,260.872 318.263,258.013 323.204,253.044 325.173,255.201 327.067,253.266 328.649,253.079 331.347,249.606 335.425,249.947 335.474,250.752 336.06,250.822 337.599,245.92 336.608,244.135 336.792,241.706 337.399,236.466 335.242,234.338 335.642,229.71 333.662,225.562 333.469,222.767 329.916,220 329.409,217.888 331.135,215.39 331.135,211.467 329.306,209.326 329.319,209.319 328.937,208.894 328.894,208.843 328.892,208.844 328.788,208.731 328.635,207.108 332.584,205.938 331.919,203.521 331.324,200.396 328.771,196.82 328.297,195.095 331.903,195.095 334.841,192.995 335.249,189.822 333.61,187.981 338.576,183.808 338.576,180.018 335.979,177.263 335.008,174.13 331.259,170.58 326.535,173.244 326.202,171.855 323.604,171.63 322.989,173.249 321.284,173.586 315.909,173.394 313.866,174.7 312.569,173.543 315.521,171.507 "
+  />
+<path id="FR-NAQ" 
+  d="m 318.815,292.762 -1.562,-1.988 -0.369,-5.969 -2.23,-5.279 -2.174,-0.787 -1.729,-3.042 -1.413,1.799 -1.046,-1.363 0,-2.337 -2.502,-3.538 -6.562,0.796 -3.703,-0.962 -10.018,-1.215 -1.16,3.139 -3.246,-0.172 -0.804,-0.417 -2.323,0.217 -1.883,-1.272 -3.041,3.491 0,-0.012 -0.416,0.489 -0.168,0.192 0,0.005 -0.248,0.292 -3.106,-3.108 -1.862,1.866 -3.522,-0.267 0.422,-3.306 -2.187,-1.196 -1.208,-4.162 -3.219,-0.418 -1.895,-1.889 -3.554,-2.807 0.715,-2.146 0.015,-3.938 -3.547,-3.52 -0.375,-2.745 -3.354,-3.513 -1.173,-4.754 -1.438,-0.62 -1.678,-2.313 -1.978,1.224 0.394,2.076 -4.746,1.114 -5.521,0 0.163,-2.047 0,-3.94 -4.688,-1.375 0,-2.363 -3.773,-0.792 -0.792,-3.17 -2.11,0 -3.853,4.056 -0.438,0.761 -0.001,-0.013 -0.727,1.281 -1.044,-0.878 -0.646,-1.498 -5.534,0.2 -4.839,0.964 -5.561,0.428 0,2.834 -2.477,1.623 -6.033,-1.367 -4.524,1.936 2.099,2.976 0,2.392 4.619,3.85 -1.146,2.501 3.09,3.46 -1.354,1.754 2.016,3.024 0.573,5.279 -1.204,1.627 1.39,2.366 -1.34,2.498 0.264,2.179 1.769,-1.348 1.494,1.521 -2.409,1.55 -0.976,1.146 -2.114,0.588 -2.355,1.103 -0.046,-0.035 -0.512,-0.426 0.001,0.046 -2.572,-1.915 -3.588,1.507 -1.125,-3.042 -2.974,0.203 -6.446,3.876 1.478,1.347 -2.938,2.386 -0.354,1.858 -2.563,0.326 -1.536,-1.72 -3.803,-0.364 -0.387,-1.873 -2.571,-1.716 -3.822,1.37 2.467,3.576 2.789,0 2.648,1.684 2.245,1.821 4.004,-0.188 0.76,1.701 2.706,0.592 0.987,2.688 1.67,0.745 -0.144,1.623 -2.214,-0.354 -1.003,1.483 1.792,2.592 -0.883,3.933 -2.421,-0.19 -0.603,-1.355 -0.956,-0.812 -0.416,-4.808 -3.435,-0.42 -3.128,-3.812 -0.461,7.771 4.521,3.33 0.365,3.608 0.777,4.256 0.435,4.605 2.521,-0.23 4.04,3.295 2.612,1.48 0.194,2.012 2.287,0.432 6.122,6.121 1.501,6.898 0.015,0 1.587,6.625 0.369,5.559 -0.52,0.844 -0.821,-3.965 -2.772,-10.807 -9.93,-8.969 0.228,-4.236 -2.435,-0.229 -3.269,4.902 -0.971,16.459 -2.531,16.6 -1.784,12.898 -0.188,3.346 0.586,0.104 1.359,-4.449 2.488,-3.229 3.608,3.266 0.381,1.084 0.863,1.188 -4.141,0.188 -0.823,-1.252 -2.327,0.938 -0.419,3.031 -2.169,2.955 0.004,4.52 -0.024,0.148 -3.471,18.576 -4.504,17.203 -1.373,6.646 -1.145,4.646 -2.743,4.717 -0.004,-0.002 -0.125,0.225 -0.173,0.299 0.005,0.002 -0.629,1.121 -4.452,5.404 -3.361,1.328 -2.787,0.414 0,2.547 2.52,2.318 3.344,0.178 0.186,2.523 3.22,0.26 0.75,-1.707 3.491,1.461 2.168,0.549 0.477,1.992 -1.309,1.16 0,3.635 -2.732,1.367 -0.219,2.045 1.894,2.129 3.522,1.094 0.643,-3.184 1.108,-1.227 -0.13,1.766 1.525,2.184 3.504,0 1.545,2.104 4.75,0.791 4.522,2.766 7.219,0 0.393,3.953 5.118,3.939 2.125,2.527 2.333,-1.25 1.736,-0.363 1.012,1.014 5.528,-3.029 0.315,-4.061 1.555,-1.184 0.788,-6.24 2.71,0.555 1.514,-0.992 -1.389,-2.779 5.102,-4.348 3.169,-7.078 2.068,-2.701 -3.882,-5.811 2.148,-1.961 -3.521,-5.812 -5.27,-0.375 -0.044,-0.074 -0.213,-0.393 -0.008,0.004 -1.155,-2.02 1.311,-3.545 1.992,-2.605 -0.591,-3.287 1.617,-1.615 -2.325,-3.928 1.735,-2.1 1.963,-0.365 2.024,0.812 2.549,-2.174 0.829,2.514 1.13,1.629 2.597,-0.715 -0.199,-2.701 0.645,-1.422 0.527,-1.096 2.226,1.896 3.071,-3.07 1.278,1.807 3.479,-0.625 3.684,-0.393 1.562,-2.748 5.548,-0.533 3.046,3.014 1.159,-1.123 2.151,-0.656 -0.779,-2.707 2.626,-0.699 4.052,-0.854 -0.867,-2.504 1.074,-1.242 1.073,-3.996 -2.15,-2.34 1.212,-3.938 2.706,1.613 4.804,-0.871 -2.113,-4.615 -1.466,-5.484 3.729,-0.18 0.955,-2.518 -0.004,-0.002 0.062,-0.172 1.814,-1.781 0.178,-2.795 4.164,-0.365 3.061,-4.348 -1.38,-0.473 -0.146,-1.645 3.26,-0.396 0.229,-2.033 1.443,-0.922 1.955,-3.418 -1.816,-2.016 0,-1.9 1.438,-1.234 -0.014,-0.02 0.139,-0.021 4.111,-1.904 4.77,2.131 3.898,5.578 2.495,-0.314 3.104,-3.105 1.097,1.939 2.375,-2.342 2.674,0.717 0.138,0.941 3.125,-2.197 -0.869,-2.158 -1.062,-1.098 1.305,-1.615 1.639,0 1.055,-3.291 0.82,-1.646 -0.59,-3.504 2.422,-3.352 3.617,-2.209 0.179,-5.145 1.276,0.707 2.025,2.219 2.207,0 1.396,-1.615 -1,-2.42 0.959,-3.471 -0.619,-3.461 -1.17,-1.354 0,-2.557 1.795,-2.928 -0.438,-2.955 -0.269,-0.266 0.016,-0.014 -4.238,-4.236 -0.312,-1.449 3.521,-2.043 2.279,-1.227 0.562,-2.773 2.404,-1.795 -0.822,-3.909 z m -151.654,9.988 -0.284,-1.195 1.712,-2.291 0.196,2.839 0.354,0.647 -1.978,0 z"
+  />
+<polygon id="FR-HDF" 
+  points="377.462,52.956 376.565,51.167 370.146,46.121 358.937,46.728 357.786,48.658 356.89,48.658 357.071,42.007 353.763,38.103 351.416,38.478 350.003,36.875 346.084,38.631 344.813,37.362 342.153,36.969 341.44,34.659 341.25,26.697 339.474,25.904 339.237,24.627 338.084,24.627 337.674,22.259 334.802,22.515 329.842,24.105 327.528,26.97 325.476,26.97 324.041,25.193 323.463,23.097 321.371,20.721 318.666,20.721 317.63,18.82 317.63,15.639 318.998,13.477 318.162,10.356 315.5,5 309.021,8.044 299.31,9.6 298.978,9.659 298.978,9.658 298.903,9.672 298.338,9.771 298.343,9.778 287.962,11.758 279.125,18.53 279.126,45.029 279.043,46.067 279.045,46.068 278.522,52.391 282.849,56.307 282.849,57.62 277.796,54.631 271.039,62.954 273.162,63.855 275.188,63.679 276.063,65.434 284.646,73.852 285.226,77.256 287.099,80.706 286.569,81.36 285.292,82.887 284.296,85.317 285.858,85.317 285.226,86.927 284.421,90.949 285.594,92.914 285.594,96.474 287.341,96.474 285.421,99.992 284.798,101.927 286.608,103.546 287.162,107.933 287.983,109.276 287.124,109.512 285.097,108.389 284.58,112.211 285.065,111.598 285.64,112.927 286.906,114.996 292.396,115.413 296.198,114.997 298.633,113.134 301.56,114.946 303.235,116.221 305.771,115.576 307.765,114.668 311.745,116.749 315.99,119.26 317.513,120.781 319.901,119.187 321.644,120.221 322.926,121.269 324.933,121.05 326.039,119.594 328.653,121.098 332.035,119.709 334.021,120.316 336.026,118.688 337.05,118.177 337.136,118.242 337.135,118.252 337.44,118.472 337.677,118.649 337.679,118.642 338.961,119.564 339.551,123.852 344.876,128.986 346.606,129.605 347.62,131.969 351.229,132.726 351.79,132.025 352.744,130.001 355.688,128.621 357.263,124.502 359.188,123.19 357.919,121.441 355.463,121.441 355.219,120.566 356.812,119.855 357.808,118.344 355.997,117.148 356.431,115.774 361.149,115.381 360.165,113.165 357.507,111.423 357.507,106.485 360.995,103.884 365.39,103.884 364.958,101.827 366.929,100.984 370.219,103.129 371.952,102.654 371.758,95.803 372.339,93.509 373.188,90.557 370.646,89.192 371.086,88.029 374.882,87.232 374.882,84.649 377.769,83.115 378.63,80.524 377.64,78.923 377.812,76.203 379.646,74.565 377.833,71.132 378.397,67.416 375.046,67.416 375.06,67.408 374.041,67.408 373.896,65.929 377.813,63.579 377.159,59.466 373.748,58.578 374.44,57.859 374.44,55.172 "
+  />
+<polygon id="FR-IDF" 
+  points="339.521,119.227 337.112,117.483 335.709,118.193 333.896,119.655 332.008,119.077 328.701,120.436 325.881,118.815 324.61,120.484 323.112,120.645 321.987,119.73 319.89,118.477 317.591,120.008 317.254,119.672 317.253,119.676 316.388,118.809 312.034,116.224 307.776,114 305.569,115.011 303.368,115.57 301.896,114.455 298.597,112.408 295.965,114.421 292.386,114.816 287.257,114.422 286.169,112.653 285.224,110.445 283.349,112.77 282.112,117.153 280.96,119.106 280.942,119.098 280.819,119.343 280.812,119.355 275.377,120.916 274.399,122.127 275.469,123.797 275.469,125.513 276.917,125.822 276.207,126.535 276.372,128.077 276.71,127.822 278.403,129.517 279,131.861 280.483,133.347 279.771,135.325 279.751,137.477 281.058,138.962 279.717,141.247 281.183,144.808 283.873,146.725 284.295,148.97 286.626,149.343 287.171,153.519 289.077,155.827 292.354,156.443 293.065,156.586 293.412,158.908 293.819,159.56 294.246,165.034 300.897,164.434 303.313,162.197 305.342,163.844 310.54,164.215 311.757,166.043 311.758,166.043 311.758,166.037 312.472,167.095 314.729,168.241 314.897,171.213 311.599,173.488 313.801,175.458 316.071,174.01 321.328,174.189 323.431,173.783 324.002,172.275 325.717,172.424 326.134,174.164 331.354,171.218 335.731,166.078 334.127,164.279 335.375,161.616 338.71,159.947 346.368,160.322 347.996,159.072 348.396,159.472 348.91,155.608 349.677,151.771 351.063,149.975 351.245,147.724 353.979,146.561 353.979,144.48 350.963,144.674 350.513,143.63 351.468,141.902 350.625,138.733 349.129,137.806 349.483,135.418 351.104,134.381 350.874,133.164 351.661,132.203 348.049,131.445 347.06,129.123 345.246,128.507 340.119,123.563 "
+  />
+<path id="FR-GES" 
+  d="m 529.514,118.649 -3.278,-2.602 -4.907,-0.567 -4.412,-2.206 -2.864,1.708 -1.483,-1.666 -2.263,0 -3.086,0.847 0.019,-0.028 -0.665,0.206 -0.186,0.05 -0.005,0.008 -0.07,0.022 -1.222,-1.757 -3.938,-2.396 -1.438,-2.25 -4.974,0.434 -2.741,2.52 -6.413,0.182 -1.83,-1.276 c -0.249,-0.443 -1.165,-1.986 -2.021,-2.465 -0.039,-0.021 -0.103,-0.056 -0.153,-0.076 -0.038,-0.019 -0.092,-0.032 -0.125,-0.048 l -0.175,-0.036 0,0.299 -0.097,-0.299 c -0.688,0 -2.104,-0.729 -2.755,-1.115 l -0.13,-0.077 -3.059,1.285 -0.188,2.282 -2.86,0.352 -1.932,-3.64 -1.062,-0.375 0,-2.704 -2.758,-1.191 -0.188,-4.614 -2.057,-2.021 -4.174,-2.023 -2.16,-0.028 -0.595,0.406 -1.768,0 -2.729,-2.354 -3.155,0.202 -2.42,2.032 -0.568,0.896 -3.019,0 -1.155,-1.188 -0.349,0 0,-0.002 -2.776,0 -3.53,-3.906 -4.75,0 -2.351,2.163 -3.322,0.188 -1.147,1.184 -0.402,0 0,0.004 -0.415,0 -0.749,-3.568 -1.697,-1.695 -0.773,-0.107 0.004,-0.005 -1.646,-0.254 -0.763,-3.814 -1.723,-1.307 -5.369,-0.583 -0.938,-2.451 -1.861,-1.209 -6.137,-0.797 -0.343,-4.119 0.771,-0.77 0,-2.04 -3.075,-1.939 0.521,-1.909 0.862,-2.137 -1.28,-1.103 2.002,-1.802 0,-3.816 -0.982,-0.708 -3.189,0 -2.021,2.996 -1.836,1.866 0,4.059 -2.178,1.45 -4.264,1.371 -2.188,0.899 -2.688,-2.109 -4.08,0 -0.585,3.818 1.686,3.193 -1.666,1.487 -0.198,3.154 0.942,1.525 -0.697,2.096 -2.989,1.591 0,2.471 -3.646,0.764 -0.744,1.962 2.58,1.385 -0.717,2.495 -0.604,2.384 0.136,5.201 0.005,0 0.044,1.277 -1.019,0.274 -3.334,-2.17 -2.719,1.16 0.383,1.818 -3.854,0 -3.888,2.896 0,5.564 2.775,1.82 0.572,1.283 -4.277,0.357 -0.688,2.187 1.688,1.116 -0.564,0.865 -1.907,0.85 0.507,1.814 2.606,0 0.728,1.001 -1.57,1.063 -1.555,4.069 -2.927,1.37 -1.006,2.162 -1.062,1.295 0.205,1.093 -1.507,0.964 -0.456,3.049 1.629,1.013 0.726,2.706 -0.981,1.77 0.737,1.704 2.797,-0.18 0,0.403 -0.006,0.001 0,0.639 -2.704,1.146 -0.195,2.439 -1.316,1.711 -0.844,4.049 -0.459,3.448 1.436,1.173 2.32,0 4.877,5.087 -0.602,5.31 3.842,2.956 1.926,-1.344 2.892,3.44 0.375,3.52 2.172,2.916 1.044,2.323 8.075,0.42 3.716,-1.873 1.09,2.034 1.746,0.238 1.016,-2.188 6.253,-0.181 2.796,-1.482 0.392,-2.425 5.323,0 1.325,0.746 -0.002,-0.008 1.692,0.948 3.445,3.658 4.352,5.862 -2.601,2.792 1.917,1.301 0.193,3.465 3.229,-0.19 0.771,1.537 2.604,0.208 1.604,-0.893 2.938,3.676 0.488,1.162 4.687,-1.059 0.78,-1.894 0.302,0.053 0,-2.126 2.428,-1.063 3.121,1.189 2.99,-1.21 1.949,0 0.621,-4.078 1.271,-1.524 -2.062,-0.221 -0.146,-1.834 2.67,-0.583 0.186,-1.509 2.783,0 0,-2.621 2.242,-0.814 -0.611,-1.618 0.542,-0.343 1.442,-0.873 -0.752,-1.158 0.487,-0.299 1.354,1.575 2.271,-1.59 0.569,-1.857 3.374,-0.543 0.771,0.604 -0.188,2.158 2.76,2.109 1.77,-0.212 1.731,-1.363 3.854,0 2.938,3.313 1.188,0 1.748,-1.083 0.216,-1.14 1.271,-0.64 1.571,1.039 1.727,1.939 6.189,3.289 0.021,0.014 0.854,1.665 3.204,0.192 3.396,2.645 0.505,1.204 -0.179,2.208 -0.983,1.813 0.438,2.738 2.78,-0.411 0.52,1.892 1.032,4.428 2.166,-0.353 -0.356,1.874 1.596,1.376 7.438,-0.194 3.904,-3.084 0.188,-4.355 2.062,-2.648 -2.694,-3.088 -1.257,-2.927 1.521,-2.063 0,-4.946 0.943,-2.289 0.021,-3.927 1.812,-2.627 -2.007,-2.817 -0.168,-5.059 0.007,0.003 -0.021,-0.461 -0.007,-0.207 -0.003,-0.001 -0.021,-0.355 5.061,-9.896 0.04,-0.08 -0.6,-5.685 2.338,-7.628 0.582,-6.521 5.075,-3.697 0,-2.394 1.814,-2.366 1.538,0 1.938,-1.94 -0.383,-3.385 1.667,-4.467 3.189,-0.693 z"       
+  />
+<polygon id="FR-BFC" 
+  points="484.847,188.445 481.801,188.262 481.149,186.958 481.148,186.958 481.054,186.768 474.767,183.436 473.053,181.508 471.099,180.206 469.247,181.131 469.024,182.302 467.646,183.156 466.898,183.156 463.96,179.843 459.628,179.843 457.86,181.23 456.504,181.393 454.199,179.631 454.387,177.476 453.157,176.514 449.156,177.161 448.539,179.178 446.877,180.339 445.543,178.789 444.095,179.676 444.845,180.833 442.958,181.986 443.53,183.499 441.464,184.248 441.464,186.687 438.748,186.687 438.554,188.302 435.788,188.906 436.017,191.76 437.455,191.915 436.792,192.705 436.226,196.437 434.731,196.437 431.795,197.602 428.666,196.415 425.651,197.727 425.651,199.535 425.59,199.524 424.746,201.572 420.858,202.454 420.549,201.716 417.226,197.542 415.332,198.589 413.247,198.422 412.453,196.835 409.431,197.016 409.251,193.856 407.668,192.782 410.131,190.136 405.46,183.846 401.96,180.128 398.69,178.281 392.705,178.281 392.278,180.922 389.938,182.192 383.828,182.371 383.694,181.713 383.384,182.383 383.218,182.388 383.269,182.635 382.401,184.501 381.397,184.361 380.176,182.085 376.081,184.147 368.526,183.755 367.603,181.71 365.497,178.869 365.121,175.328 361.759,171.329 359.747,172.732 356.521,170.254 357.11,165.002 351.862,159.524 349.503,159.524 348.024,158.286 346.171,159.709 338.579,159.335 334.915,161.167 333.412,164.378 334.933,166.08 330.793,170.974 334.474,174.459 335.418,177.508 337.967,180.257 337.967,183.528 332.745,187.921 334.604,190.017 334.265,192.661 331.702,194.498 327.499,194.498 328.192,197.034 330.731,200.576 331.317,203.659 331.837,205.529 329.867,206.118 329.874,206.119 327.976,206.68 328.196,208.992 330.532,211.697 330.532,215.214 328.758,217.776 329.376,220.353 332.885,223.086 333.063,225.671 335.024,229.831 334.617,234.578 336.769,236.696 336.188,241.659 335.998,244.277 336.942,245.996 335.465,250.711 335.608,252.411 339.058,254.019 341.521,256.714 343.858,255.404 345.476,254.457 345.843,256.041 349.173,256.041 349.909,254.567 351.261,255.172 351.89,257.851 353.847,257.386 357.454,252.442 359.091,253.604 359.521,254.421 359.535,254.412 362.974,260.875 362.974,263.844 364.101,265.224 367.401,265.224 368.56,266.788 371.681,266.788 372.91,268.516 372.728,275.897 368.685,278.982 368.354,279.751 369.085,279.669 369.422,279.771 369.608,282.922 372.591,283.523 372.979,284.941 374.853,284.941 377.173,283.583 383.222,284.521 384.551,285.85 386.244,284.17 388.522,284.17 389.707,277.789 390.312,277.327 392.06,277.327 394.551,278.966 396.229,277.469 397.396,279.046 399.347,277.129 401.124,276.971 402.042,279.834 402.833,283.952 404.646,284.196 405.938,281.191 409.599,266.826 410.896,264.431 412.771,264.244 414.95,266.043 416.663,265.597 418.592,264.253 420.281,264.601 421.427,267.104 422.663,267.584 422.663,267.585 424.981,268.487 428.884,273.948 431.312,275.057 431.312,277.959 434.706,277.491 438.345,273.484 441.103,274.862 441.103,277.318 447.188,277.318 455.662,268.005 455.156,267.728 455.507,263.924 458.652,260.177 456.521,259.332 456.683,258.307 456.685,258.299 468.703,247.025 468.806,246.931 468.433,237.613 472.534,235.58 475.472,234.205 478.355,231.54 478.572,227.873 481.137,226.573 487.599,219.143 486.669,216.897 488.562,216.047 491.374,212.629 489.693,210.945 485.13,211.888 485.046,211.54 489.523,206.383 489.508,206.377 489.923,205.889 492.727,205.452 491.682,200.969 491.018,198.557 488.298,198.959 487.985,197.008 488.905,195.317 489.134,192.784 488.513,191.3 "
+  />
+<path id="FR-ARA" 
+  d="m 502.33,323.022 -2.722,-1.041 -0.771,-2.725 -5.229,-3.096 c 0.052,-1.123 0.255,-5.865 -0.226,-7.013 l 0.367,-0.332 -0.938,0 c -0.646,0.162 -2.888,0.341 -3.486,0.388 l -2.761,-3.145 0.101,-3.375 -0.002,0 0.083,-2.938 6.594,-2.729 0.854,-2.121 -0.424,-4.485 -4.519,-4.713 -1.13,0.642 0,-4.359 -3.74,-1.791 -0.147,-1.264 2.145,-2.326 0,-2.958 -3.54,-3.728 -0.2,-2.702 -6.982,0.004 -4.546,0.794 -4.115,3.341 -1.069,-1.623 -2.509,0.221 -2.041,4.472 -0.036,0.077 0.243,1.953 1.906,1.562 -3.604,2.369 -2.441,2.264 -4.301,0 -0.013,0.011 -1.722,0 0,-3.247 2.142,-1.258 3.679,-0.396 0.267,-2.391 -1.063,-0.703 2.839,-3.592 -0.5,-1.425 -3.652,-1.943 -8.188,9.012 -5.23,0 0,-2.229 -3.491,-1.746 -3.801,4.182 -2.486,0.345 0,-2.6 -2.637,-1.203 -3.908,-5.477 -3.501,-1.362 -1.169,-2.562 -2.246,-0.463 -1.999,1.419 -1.357,0.354 -2.138,-1.765 -2.438,0.247 -1.479,2.739 -3.671,14.395 -0.53,1.188 0,0.008 -0.012,-0.004 -0.564,1.354 -0.937,-0.128 -0.721,-3.729 -1.07,-3.354 -2.476,0.218 -1.607,1.583 -1.146,-1.549 -1.821,1.628 -2.259,-1.485 -2.129,0 -0.953,0.729 -0.459,2.541 0.003,0.002 -0.669,3.568 -2.03,0 -1.438,1.438 -1.047,-1.045 -6.347,-0.984 -0.104,-0.016 -2.363,1.388 -1.252,0 -0.36,-1.333 -2.896,-0.584 -0.19,-3.104 -0.539,-0.17 3.849,-2.938 0.192,-7.87 -1.521,-2.146 -3.131,0 -1.152,-1.563 -3.32,0 -0.812,-0.995 0,-2.831 -3.974,-7.547 -2.271,-1.65 -3.827,5.244 -1.16,0.279 -0.563,-2.381 -2.145,-0.959 -0.828,1.651 -2.48,0 -0.439,-1.916 -2.314,1.36 -1.918,1.072 -2.184,-2.39 -3.279,-1.557 -0.191,-2.612 -4.918,-0.407 -2.737,3.527 -1.543,0.188 -1.608,1.631 -1.968,-2.156 -5.562,5.593 0,3.395 0.982,0.793 0.153,1.271 -2.462,1.928 -2.487,-0.761 -5.048,1.036 -2.604,2.983 -1.229,2.605 0.548,-0.106 2.178,3.075 0,2.35 1.646,2.137 1.338,-1.703 1.396,2.459 2.144,0.773 2.085,4.896 0.098,1.553 0.008,0.004 0.275,4.542 1.578,1.955 0.729,3.461 -2.283,1.705 -0.559,2.724 -2.041,1.097 -3.904,2.27 0.438,2.049 4.488,4.492 0.38,2.545 -1.771,2.887 0,2.945 1.205,1.396 0.568,3.164 -0.438,1.561 0.002,0.002 -0.543,1.973 0.938,2.27 -0.979,1.135 -1.666,0 -1.883,-2.062 -2.254,-1.27 -0.197,5.799 -3.395,2.07 -2.689,3.684 0.598,3.561 -0.756,1.521 -0.934,2.916 -1.486,0 -1.816,2.26 1.335,1.334 0.669,1.66 -2.49,1.752 1.08,6.838 3.221,2.396 -2.521,5.867 2.521,1.105 -1.123,3.396 2.742,0.355 1.67,-2.773 2.449,0 0.531,0.812 6.447,0 1.123,-2.537 1.43,-0.582 0.551,-4.316 1.411,0 0,-4.848 5.169,-4.41 0.338,0.506 0.562,3.824 3.877,-0.562 0.842,5.488 1.894,0 0.533,5.266 0.012,0.088 2.086,2.58 3.021,-6.951 2.628,-8.215 3.465,2.316 1.655,-3.709 4.937,-1.789 0.135,-0.045 3.527,8.994 5.508,-1.699 0.363,-2.273 1.484,0 0.801,2.777 3.717,-0.895 4.254,5.434 -0.002,0 0.182,0.23 0.213,0.27 0.001,-0.002 0.161,0.205 1.359,7.115 0.02,0.084 3.271,3.555 -0.568,4.186 4.186,2.516 0,5.852 2.5,-1.271 4.604,2.998 2.566,0.941 0.551,-4.033 2.295,-0.438 0.81,3.014 3.265,-0.33 0.498,-2.84 6.244,3.514 1.104,-2.234 2.772,-0.42 0,-0.006 2.189,-0.314 0.963,1.145 -0.562,3.902 1.071,1.328 3.062,-3.098 2.646,-0.189 0.76,-2.104 -3.463,-0.426 -0.511,-3.164 1.979,-3.092 2.471,-0.193 2.43,2.287 -2.678,3.631 0.953,1.682 4.188,0.438 1.574,-1.344 -0.829,1.77 0.466,2.662 4.323,0.396 5.269,0.395 0.75,2.43 3.086,2.271 2.744,0.203 1.908,-1.701 0.881,-2.586 1.19,1.047 1.604,1.912 0.889,-8.229 -2.061,-0.396 -1.185,-2.521 -6.59,-1.77 -0.722,-2.939 2.566,-1.688 -2.165,-1.514 0.304,-1.311 2.812,0.17 2.873,1.453 2.513,-2.943 -2.272,-1.846 0.162,-2.119 1.127,-3.525 3.896,-0.391 3.51,-1.408 0.301,-0.688 0.006,0.002 0.068,-0.17 0.182,-0.414 -0.012,0 0.195,-0.479 -1.646,-0.822 0,-1.857 4.699,0 1.812,-1.811 -0.953,-1.729 2.188,-1.699 1.79,0.783 2.562,-2.188 4.493,0.785 1.577,-1.771 3.894,0.197 0,-4.783 -1.611,-0.807 -0.805,-2.605 -4.146,-0.408 -0.455,-0.74 0.739,-3.877 1.212,-1.049 3.318,-0.354 0.992,0.992 0.633,2.93 4,-0.463 0.415,-3.002 1.531,-0.689 4.188,0.213 -0.146,-0.295 5.396,-2.164 2.103,1.34 2.521,0 0.194,-2.457 2.392,-1.299 1.007,-1.17 5.182,-2.004 0.646,-3.594 -0.966,-1.506 2.814,-4.841 z"
+  />
+<polygon id="FR-OCC"      
+  points="375.976,382.143 375.123,381.62 375.679,377.551 372.328,373.915 370.969,366.809 365.823,360.188 362.291,361.04 361.522,358.381 359.076,358.381 358.688,360.795 354.067,362.219 350.536,353.206 344.672,355.315 343.203,358.606 339.667,356.239 336.808,365.184 334.188,371.2 332.835,369.532 332.255,363.819 330.335,363.819 329.481,358.25 325.608,358.813 325.125,355.514 324.328,354.268 318.433,359.295 318.433,363.819 317.092,363.819 316.519,368.313 315.192,368.854 314.13,371.256 308.396,371.256 307.866,370.442 304.752,370.442 303.104,373.174 302.806,373.141 301.478,372.961 302.543,369.731 300.063,368.647 302.542,362.891 299.14,360.354 298.002,353.094 294.615,352.188 292.552,354.219 291.458,352.28 287.937,355.801 285.999,356.047 282.211,350.625 277.042,348.315 272.8,350.295 271.786,350.454 272.021,350.809 270.773,351.881 270.773,354.292 272.458,356.151 270.85,359.024 269.23,360.059 269.021,361.905 265.66,362.317 265.889,364.924 266.882,365.264 264.443,368.729 260.046,369.116 259.85,372.196 258.15,373.866 257.182,376.352 253.1,376.547 254.775,382.797 256.486,386.542 256.585,386.76 252.762,387.45 249.593,385.563 248.055,390.563 250.217,392.913 249.307,396.403 248.052,397.856 248.81,400.045 245.412,400.76 242.178,401.618 242.962,404.346 241.945,404.649 241.93,404.635 241.426,404.805 241.274,404.85 241.283,404.858 240.39,405.682 237.561,402.883 231.422,403.475 229.859,406.225 226.462,406.588 223.337,407.147 221.868,405.081 218.685,408.258 216.287,406.215 214.711,409.581 214.886,411.94 213.171,412.417 212.35,411.25 211.255,407.93 208.304,410.448 206.454,409.702 204.102,410.143 201.961,412.733 204.262,416.624 202.754,418.131 203.352,421.467 201.498,423.893 200.031,427.823 201.743,430.836 206.545,431.17 207.028,431.213 210.134,436.34 207.969,438.317 211.899,444.2 210.056,446.62 206.958,453.59 201.55,458.196 202.912,460.918 202.05,461.485 198.949,460.85 198.109,467.485 196.542,468.676 196.176,473.403 197.014,472.93 200.15,474.792 203.962,477.655 204.336,479.993 207.633,482.663 210.302,482.663 216.656,479.975 219.293,483.004 223.319,484.088 224.681,481.78 226.186,482.452 229.789,482.706 229.789,482.711 238.306,483.278 238.725,473.704 241.057,474.051 244.683,476.161 244.667,476.174 246.089,476.969 252.267,478.163 254.682,478.163 258,482.481 266.389,482.077 269.743,487.424 272.838,486.172 281.136,487.319 281.675,490.42 281.673,490.42 282.081,492.858 285.092,495.676 290.854,497.254 291.039,500.661 294.364,503.59 296.961,503.141 300.308,499.045 304.217,498.299 310.524,500.409 316.187,505.262 317.843,503.172 318.979,503.172 320.42,504.188 321.894,503.471 322.08,500.77 327.843,499.422 329.79,496.879 332.593,495.952 336.509,495.952 339.063,498.661 342.627,498.911 342.627,495.366 340.959,493.063 338.312,491.92 337.892,475.53 337.894,475.532 337.724,469.471 337.954,462.698 335.449,462.899 333.685,460.295 334.955,458.215 338.185,461.264 341.349,458.739 343.394,456.727 343.624,454.829 343.629,454.829 343.771,453.688 350.745,451.549 351.506,449.844 356.924,449.657 358.714,447.44 369.265,439.045 375.801,434.418 377.669,434.547 377.667,434.549 381.094,434.799 381.094,438.739 385.847,438.506 388.46,438.641 390.254,434.473 396.792,430.481 395.319,428.415 396.838,424.381 402.681,425.204 404.104,414.553 411.847,410.133 411.847,407.336 406.033,401.553 406.033,397.157 402.638,391.518 395.292,387.397 394.729,390.625 392.426,390.854 391.606,387.799 388.341,388.424 387.831,392.147 386.021,391.489 381.188,388.336 379.25,389.315 379.25,384.102 "
+  />
+<polygon id="FR-PAC" 
+  points="496.931,379.26 494.875,377.448 492.936,376.838 492.064,374.563 492.774,372.971 496.346,369.176 495.781,366.426 496.079,366.11 496.08,366.11 496.156,366.026 496.62,365.532 496.613,365.532 497.921,364.112 500.226,364.319 500.226,362.055 497.488,360.672 496.892,354.989 494.488,354.118 491.787,354.522 486.922,352.071 486.137,346.2 483.17,345.213 482.232,343.364 480.874,340.387 476.869,340.188 474.903,341.065 474.506,343.938 471.507,344.284 470.95,341.715 469.632,340.397 465.863,340.797 464.34,342.112 463.518,346.422 464.25,347.616 468.293,348.018 469.054,350.481 470.566,351.237 470.566,355.018 467.02,354.838 465.472,356.571 461.029,355.795 458.531,357.92 456.761,357.143 453.886,359.379 454.867,361.155 453.556,362.469 448.503,362.469 448.503,365.299 449.979,366.034 449.545,367.036 446.387,368.319 442.142,368.737 440.879,372.715 440.679,375.215 442.719,376.87 440.916,378.987 438.405,377.719 434.912,377.485 434.401,379.68 436.174,380.918 433.989,382.354 434.896,386.045 441.558,387.836 442.75,390.379 444.565,390.729 443.924,396.692 443.924,396.692 443.892,397.008 443.155,396.137 441.255,394.465 440.136,397.756 438.542,399.178 438.153,399.147 438.151,399.143 437.874,399.122 437.536,399.094 437.537,399.1 436.224,399.006 433.437,396.961 432.623,394.325 426.955,393.905 423.089,393.553 422.738,391.528 424.072,388.676 423.606,388.321 421.173,390.393 417.548,390.016 416.938,388.946 419.702,385.198 416.69,382.362 413.662,382.606 411.394,386.139 412.009,389.975 415.173,390.362 414.806,391.389 412.325,391.571 409.575,394.35 409.086,393.741 409.647,389.836 408.298,388.229 402.694,389.057 401.467,391.549 402.209,391.961 405.438,397.319 405.438,401.799 411.251,407.579 411.251,409.78 408.61,411.28 408.612,411.282 403.556,414.176 402.169,424.524 396.446,423.719 394.649,428.5 395.933,430.305 389.778,434.063 387.821,438.612 394.437,438.911 402.542,439.497 403.515,440.469 401.128,440.469 398.894,444.288 407.731,446.137 415.036,444.868 411.313,441.348 413.257,439.741 416.703,441.19 418.481,444.973 429.887,445.163 432.553,444.073 432.981,445.362 429.44,448.442 434.084,448.643 433.479,450.172 431.896,452.006 442.063,452.006 446.618,453.524 446.968,453.989 447.606,454.856 451.046,456.389 452.024,460.34 454.493,460.807 456.552,459.368 459.966,457.266 465.621,457.821 465.489,458.918 463.668,459.813 463.785,460.381 469.233,460.635 467.613,458.971 467.252,456.721 469.505,455.163 472.304,456.088 473.405,456.434 474.494,457.77 476.203,456.565 476.583,453.987 477.976,452.788 482.117,452.788 483.274,451.057 485.885,451.807 489.29,450.342 489.29,444.739 486.031,444.887 488.179,443.557 489.824,441.323 490.257,438.286 495.796,437.522 498.812,434.147 498.819,434.155 498.999,433.938 499.212,433.698 499.203,433.692 499.252,433.633 499.43,429.413 503.175,430.161 504.549,428.383 506.684,428.823 506.874,422.672 511.208,422.313 515.104,418.788 518.764,418.788 518.961,416.512 522.588,414.327 520.602,409.792 523.505,407.288 522.93,404.442 527.142,403.1 528.359,398.594 527.782,395.588 526.776,393.807 525.924,391.014 522.778,391.252 513.56,394.563 510.78,394.563 505.802,390.536 500.598,389.104 497.882,389.094 497.882,385.696 493.787,383.167 493.787,379.688 "
+  />
+<path id="FR-COR" 
+  d="m 529.67718,518.0164 -10e-4,-0.002 0,0 -0.082,-0.158 -1.854,-3.641 -0.597,-11.73 -1.419,-2.225 -0.001,-0.002 0,0 -2.487,-1.934 -0.396,-7.051 1.197,-3.352 -1.585,-5.354 -0.969,-4.281 -0.854,-1.291 -10e-4,0 0,0 -2.016,-1.146 -3.262,2.184 0.447,2.139 1.436,1.854 -1.704,1.311 0.397,0.805 0.401,0.803 -1.131,1.311 0,1.992 10e-4,0.002 0,0 1.971,1.779 0,2.521 -1.111,2.367 -1.021,0.451 -0.576,-0.797 -0.942,-1.303 -2.812,0.227 -0.583,-0.396 -2.557,0 -2.274,2.107 -0.788,3.213 -4.951,0.947 -4.023,3.416 -0.729,2.012 -1.584,-0.15 -1.338,-1.59 0,0 -0.001,-0.002 -0.646,3.816 -1.386,0.562 -0.438,3.381 0.531,1.229 -2.034,1.479 -0.554,1.451 -1.652,0 0,2.611 2.117,1.479 3.188,1.859 0.163,1.164 -1.69,0.516 -3.366,0.645 0,1.713 1.162,1.195 0.227,4 4.498,1.438 1.443,0.352 1.198,1.885 -0.798,1.135 -1.58,0.568 -1.209,2.207 -1.245,1.479 0.628,3.904 3.102,-0.197 0.844,0.643 2.726,-1.359 0.479,0.48 -1.375,2.938 1.277,1.275 -2.133,1.59 -1.738,3.9 4.678,1.092 5.479,0.51 -2.02,2.344 c -0.411,-0.139 -1.271,-0.361 -1.771,-0.133 -0.029,0.016 -0.062,0.029 -0.133,0.086 -0.007,0.006 -0.042,0.035 -0.095,0.092 -0.018,0.016 -0.049,0.043 -0.076,0.09 l -0.052,0.104 0.002,0.023 c -0.004,0.012 -0.009,0.02 -0.009,0.021 l -0.016,0.045 c -0.016,0.025 -0.023,0.064 -0.033,0.121 l -0.001,0.084 c 0,0.732 -0.94,2.557 -1.309,3.193 l -0.104,0.188 2.085,2.283 3.597,2.213 6.669,1.771 1.934,0.775 1.479,0.646 -1.292,2.348 3.458,-0.207 0.589,1.361 3.563,0 0.894,-4.25 -1.732,-0.355 2.573,-2.727 -1.066,-1.104 0.153,-1.455 3.533,-1.938 0.229,-2.615 -2.771,-0.223 -1.161,0.998 0,-1.002 3.029,-0.186 1.041,-2.52 0.802,-6.928 0.007,-0.049 -0.599,-2.932 -0.061,-2.641 0.003,-0.002 -0.127,-5.854 4.688,-6.621 0,-11.03 0.006,0 0,0.006 -0.004,0 10e-4,0.004 0,0 z"
+  />
+</g>
+</svg>
--- a/exercices/carte/index.md
+++ b/exercices/carte/index.md
@@ -0,0 +1,48 @@
+---
+layout: layouts/page.njk
+title: SVG - Colorier une carte
+---
+
+Vous devez colorier une carte de France suivant le classement des régions dans différents critères.
+
+1. Créer un page HTML
+
+2. Incorporer la carte de <a href="france.svg" download>France</a> dans la page.
+
+3. Ajouter une feuille de style pour représenter 9 nuances de couleur 
+Utiliser le site [Color Brewer](https://colorbrewer2.org/#type=sequential&scheme=YlOrRd&n=5) pour générer la palette de couleur
+
+4. Ajouter un bloc javascript à la fin de la page. Définir le tableau suivant :
+
+Région|Code|Taux
+---|---|--:|
+Auvergne-Rhône-Alpes|FR-ARA|21
+Bourgogne-Franche-Comté|FR-BFC|31
+Bretagne|FR-BRE|33
+Corse|FR-COR|12
+Centre-Val de Loire|FR-CVL|18
+Grand Est|FR-GES|22
+Hauts-de-France|FR-HDF|38
+Île-de-France|FR-IDF|34
+Normandie|FR-NOR|4
+Nouvelle-Aquitaine|FR-NAQ|17
+Occitanie|FR-OCC|28
+Pays de la Loire|FR-PDL|30
+Provence-Alpes-Côte d'Azur|FR-PAC|9
+
+
+5. Ajouter un bouton et au clic colorier la carte suivant le taux
+
+Couleur|Bornes
+---|---|
+#ffffe5 |0 < taux <= 5
+#f7fcb9 | 5 < taux <= 10
+#d9f0a3 |10 < taux <= 15
+#addd8e |15 < taux <= 19
+#78c679 |19 < taux <= 23
+#41ab5d |23 < taux <= 27
+#238443 |27 < taux <= 31
+#006837 |31 < taux <= 35
+#004529 |35 < taux <= 40
+
+Voir la [réponse](reponse)
--- a/exercices/carte/reponse.md
+++ b/exercices/carte/reponse.md
@@ -0,0 +1,80 @@
+---
+layout: layouts/page.njk
+title: Colorier une carte
+---
+
+### La feuille de style
+
+```css
+ <style>
+  .niveau1 { fill: #fff7f3; }
+  .niveau2 { fill: #fde0dd; }
+  .niveau3 { fill: #fcc5c0; }
+  .niveau4 { fill: #fa9fb5; }
+  .niveau5 { fill: #f768a1; }
+  .niveau6 { fill: #dd3497; }
+  .niveau7 { fill: #ae017e; }
+  .niveau8 { fill: #7a0177; }
+  .niveau9 { fill: #49006a; }
+</style>
+```
+
+### Le tableau
+
+```javascript
+<script>
+const tableau = [
+{ nom:"Auvergne-Rhône-Alpes", code: "FR-ARA", taux: 21 },
+{ nom:"Bourgogne-Franche-Comté", code:"FR-BFC", taux: 31},
+{ nom:"Bretagne", code:"FR-BRE", taux: 33},
+{ nom:"Corse", code:"FR-COR", taux: 12},
+{ nom:"Centre-Val de Loire", code:"FR-CVL", taux: 18},
+{ nom:"Grand Est", code:"FR-GES", taux: 22},
+{ nom:"Hauts-de-France", code:"FR-HDF", taux: 38},
+{ nom:"Île-de-France", code:"FR-IDF", taux: 34},
+{ nom:"Normandie", code:"FR-NOR", taux: 4},
+{ nom:"Nouvelle-Aquitaine", code:"FR-NAQ", taux: 17},
+{ nom:"Occitanie", code:"FR-OCC", taux: 28},
+{ nom:"Pays de la Loire", code:"FR-PDL", taux: 30},
+{ nom:"Provence-Alpes-Côte d'Azur", code:"FR-PAC", taux: 9}
+]
+</script>
+``` 
+### Le bouton
+
+```html
+<button onclick="colorier()">Colorier</button>
+```
+### La fonction colorier
+
+```javascript
+function colorier()
+{
+  for(const region of tableau)
+  {
+    if (region.taux <= 5.0)
+      document.getElementById(region.code).classList.add("niveau1")
+    else if (region.taux <= 10.0)
+      document.getElementById(region.code).classList.add("niveau2")
+    else if (region.taux <= 15.0)
+      document.getElementById(region.code).classList.add("niveau3")
+    else if (region.taux <= 19.0)
+      document.getElementById(region.code).classList.add("niveau4")
+    else if (region.taux <= 23.0)
+      document.getElementById(region.code).classList.add("niveau5")
+    else if (region.taux <= 27.0)
+      document.getElementById(region.code).classList.add("niveau6")
+    else if (region.taux <= 31.0)
+      document.getElementById(region.code).classList.add("niveau7")
+    else if (region.taux <= 35.0)
+      document.getElementById(region.code).classList.add("niveau8")
+    else if (region.taux <= 40.0)
+      document.getElementById(region.code).classList.add("niveau9")
+  }
+}
+</script>
+```
+
+Voir la [solution](../solution)
+
+Télécharger la <a href="../solution" download>solution</a>
--- a/exercices/carte/solution.html
+++ b/exercices/carte/solution.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <style>
+      .niveau1 {
+        fill: #fff7f3;
+      }
+      .niveau2 {
+        fill: #fde0dd;
+      }
+      .niveau3 {
+        fill: #fcc5c0;
+      }
+      .niveau4 {
+        fill: #fa9fb5;
+      }
+      .niveau5 {
+        fill: #f768a1;
+      }
+      .niveau6 {
+        fill: #dd3497;
+      }
+      .niveau7 {
+        fill: #ae017e;
+      }
+      .niveau8 {
+        fill: #7a0177;
+      }
+      .niveau9 {
+        fill: #49006a;
+      }
+    </style>
+  </head>
+  <body>
+    <h2>Taux d'incidence par région</h2>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="575"
+      height="575"
+      viewBox="0 0 575 575"
+    >
+      <g style="fill: #f6ffd5; stroke: #000000; stroke-width: 1.5">
+        <path
+          id="FR-BRE"
+          d="m 180.351,159.954 0,-4.177 -0.963,-0.774 0.189,-5.511 -1.735,-0.868 -2.374,-0.031 -2.115,-1.679 -2.234,2.665 -1.764,0.22 -1.521,2.065 -1.297,-0.312 -3.228,-2.833 -1.126,-3.619 -0.646,-2.698 -9.746,0 -3.181,-1.938 2.488,-3.318 -5.397,-0.216 -2.066,2.342 0,0.003 -1.048,1.182 -3.845,-0.42 -0.386,2.203 -1.81,0.146 -0.181,-2.623 -2.354,-0.709 -0.978,1.11 0,-3.71 -2.723,2.028 -3.591,-0.606 -1.239,2.456 -7.291,3.947 0,1.851 -0.963,0 0,-3.421 -4.073,-1.931 0.371,-3.487 -3.704,-2.731 0,-3.401 -2.732,-0.592 0.188,-3.158 -2.114,-0.188 0.188,-2.184 -4.455,0 -0.418,1.36 -0.983,-2.316 -2.024,1.562 -4.517,0.569 -0.897,1.23 -3.052,-2.289 -4.531,3.043 1.618,2.2 -2.437,3.329 -3.18,-1.852 -5.845,0.199 0,3.896 -1.021,0 -0.384,-1.792 -2.308,0.369 -0.439,-4.861 -2.44,2.694 -2.22,-0.917 -4.565,0.43 -0.792,1.963 -2.074,0.486 -0.401,-2.127 -5.011,0.666 0,1.354 -2.738,0.165 -1.436,-1.012 -1.858,0.929 -0.392,2.253 -5.141,0.187 -3.038,3.659 2.29,1.71 -3.022,2.478 1.038,1.875 -0.818,4.486 3.584,0.466 1.052,-1.049 0.488,0.646 7.579,-0.988 1.544,-1.064 -1.313,1.257 0.478,2.472 3.665,-1.644 -0.709,2.497 4.354,0.189 -0.094,0.561 -4.355,-0.168 -3.665,-0.949 -4.706,-2.255 -3.163,3.635 3.712,1.262 -0.203,5.684 1.48,-1.194 2.063,-3.145 3.851,2.203 1.873,0.399 0.707,2.827 -1.036,1.854 -2.363,-0.176 -2.389,0.005 -3.878,0.591 -6.795,0.383 -1.632,2.159 2.311,1.377 2.124,-0.188 1.748,1.563 2.51,-0.188 3.972,4.517 0.937,4.882 -1.507,3.014 4.554,0.861 4.667,-0.229 1.144,-2.063 -1.177,-1.576 0.771,0.344 1.767,-0.186 3.138,1.757 2.288,-0.443 0,-0.986 0.189,0.81 2.646,4.314 5.891,0.401 0.135,-0.714 1.007,1.452 3.521,0.62 2.376,0 0.022,0.035 2.279,3.646 3.449,0.862 0.265,-0.401 -0.16,0.605 2.903,1.268 3.459,3.432 1.088,2.026 -0.794,5.171 2.713,2.026 1.529,-1.771 -1.273,-1.677 0,-3.019 2.242,0.538 0.62,-1.859 0.282,0.654 2.881,2.495 1.45,-2.404 -0.171,-0.387 0.667,0.905 0.146,-0.021 -1.888,2.378 2.647,0.883 1.792,2.783 10.698,-0.979 2.086,0.455 -1.007,0.866 0.218,2.068 0.585,0.438 1.062,-0.189 1.587,-1.587 1.035,1.201 3.263,0 3.829,-1.958 5.649,-2.229 0.188,-5.494 1.267,-0.685 0,0 3.621,-1.932 12.229,-0.6 0.824,-2.28 1.852,-1.817 4.42,-0.613 0.181,-2.08 2.5,0.346 1.739,2.33 4.279,1.053 0.874,-1.83 0.986,-3.5 2.492,-6.151 1.198,-0.683 3.55,0.437 0,-5.744 -1.375,-1.375 0,-5.532 -0.594,-1.979 0,-2.956 1.967,-1.975 z m -69.249,37.71 1.736,2.1 -0.733,1.183 -2.271,-0.695 -2.993,-1.401 2.882,-0.432 -0.487,-1.19 1.866,0.435 z"
+        />
+        <polygon
+          id="FR-NOR"
+          points="287.819,80.766 285.81,77.1 285.207,73.554 276.58,65.117 275.542,63.042 273.257,63.241 271.432,62.463 270.057,64.15 261.73,70.548 246.918,74.26 237.095,77.78 229.095,82.093 224.301,89.222 223.254,94.988 227.308,98.037 231.562,98.933 227.624,99.635 220.128,103.964 211.885,107.224 205.353,103.577 189.3,101.206 185.525,99.236 179.953,100.652 179.953,100.651 178.147,101.109 177.97,96.689 172.927,90.717 174.347,87.167 176.73,87.167 174.579,81.296 165.872,80.875 161.455,83.94 156.558,80.738 148.966,78.467 148.002,80.897 152.188,84.258 152.188,88.321 150.522,90.386 151.724,91.582 152.169,91.886 151.773,95.506 153.181,98.705 157.679,103.787 158.631,108.21 159.593,109.617 159.593,116.552 161.937,121.31 161.937,126.637 159.378,131.756 162.203,139.06 166.477,140.02 166.771,141.564 164.92,142.411 160.917,142.411 161.605,145.265 162.79,149.064 166.194,152.058 168.081,152.547 169.685,150.37 171.424,150.151 173.437,147.756 175.259,149.2 177.636,149.2 178.969,149.867 178.969,150.321 182.67,150.775 184.599,149.246 187.235,150.32 187.261,150.364 187.424,150.689 187.443,150.673 188.575,152.587 190.98,154.359 193.919,152.389 195.847,153.757 201.205,150.588 206.462,151.362 209.559,150.096 210.351,148.21 211.979,148.051 213.554,149.459 214.347,153.804 216.895,154.78 217.915,158.375 221.565,158.582 226.858,153.693 231.873,153.515 233.296,155.454 234.277,162.589 237.67,163.804 239.673,166.793 243.667,166.793 243.815,167.878 244.414,167.862 244.575,166.195 244.923,166.195 247.654,170.264 250.257,170.685 250.258,165.609 248.89,163.797 248.556,162.509 251.256,160.9 254.249,160.297 256.329,157.778 255.938,150.313 251.813,146.813 251.625,143.452 251.152,143.135 253.605,140.789 256.207,140.789 263.283,137.132 265.468,138.05 270.63,138.071 271.942,136.508 271.942,133.647 275.851,131.71 275.851,128.541 276.928,127.65 276.833,126.757 278.122,125.468 276.065,125.028 276.065,123.623 275.136,122.168 275.724,121.438 281.215,119.872 282.649,117.424 283.853,113.099 285.303,111.301 285.567,109.341 287.043,110.154 288.931,109.64 287.747,107.792 287.181,103.248 285.483,101.732 285.978,100.217 287.347,97.664 288.39,95.87 286.2,95.87 286.2,92.744 285.06,90.834 285.803,87.092 286.747,84.714 285.185,84.714 285.784,83.231 "
+        />
+        <polygon
+          id="FR-PDL"
+          points="221.346,157.964 218.667,157.811 218.667,157.811 218.377,157.796 217.394,154.326 214.88,153.363 214.111,149.146 212.186,147.428 209.939,147.645 209.106,149.633 206.391,150.743 201.086,149.958 195.88,153.038 193.933,151.655 190.998,153.623 189.061,152.219 187.667,149.842 184.503,148.55 182.496,150.144 178.983,149.714 178.778,155.284 179.752,156.069 179.752,159.709 177.784,161.677 177.784,164.926 178.377,166.909 178.377,172.643 179.752,174.018 179.752,178.837 176.677,178.46 175.125,179.341 172.544,185.719 171.56,189.209 171.26,189.866 170.919,190.548 170.607,190.479 167.324,189.665 165.562,187.306 162.187,186.839 161.994,189.071 157.85,189.645 155.81,191.652 155.025,193.732 143.13,194.316 137.757,197.151 137.57,202.596 132.256,204.693 128.603,206.597 125.689,206.597 124.413,205.112 122.5,207.025 121.036,207.297 122.316,208.177 118.646,211.447 119.619,212.42 120.297,213.776 118.234,216.655 120.692,217.973 124.776,218.844 125.075,217.601 126.937,219.977 130.747,219.977 133.277,217.227 135.187,217.227 132.64,218.502 132.847,220.674 133.569,222.33 131.647,224.253 129.083,224.253 129.58,227.841 134.021,227.03 138.798,231.426 138.738,231.502 138.517,231.779 138.522,231.783 132.85,239.1 132.653,244.017 138.675,249.852 138.467,251.789 140.335,251.789 144.025,262.858 148,264.83 151.958,268.789 156.388,268.789 158.138,272.694 162.483,272.694 164.376,275.564 169.164,277.959 169.338,275.397 170.136,276.149 176.238,272.443 178.691,272.276 179.878,275.484 183.727,273.867 186.859,276.216 189.505,274.969 191.752,274.35 192.752,273.155 195.744,271.232 193.362,268.812 192.006,269.842 191.892,268.894 193.302,266.267 191.942,263.947 193.05,262.451 192.444,256.866 190.578,254.006 191.973,252.197 188.813,248.655 189.983,246.095 185.227,242.132 185.227,239.835 183.452,237.312 183.933,237.111 183.926,237.105 187.113,235.737 193.205,237.12 196.166,235.179 196.166,232.577 201.206,232.186 206.033,231.223 211.108,231.044 211.622,232.23 213.353,233.728 214.833,231.131 218.462,227.318 220.062,227.318 222.325,219.162 225.483,215.402 225.264,211.113 227.227,208.557 227.227,207.192 226.312,206.07 226.873,204.923 228.007,202.653 231.707,205.257 234.362,205.257 233.297,201.76 235.225,203.029 236.673,200.905 242.55,199.284 241.519,196.789 242.735,195.238 245.674,194.084 248.506,190.405 248.506,186.884 250.401,186.884 251.256,183.88 251.45,179.646 249.586,177.932 251.005,175.458 253.512,172.272 250.538,170.152 248.008,169.714 245.241,165.596 244.028,165.596 243.971,166.19 239.992,166.19 238.057,163.303 234.822,162.143 233.879,155.293 232.167,152.902 226.616,153.099 "
+        />
+        <polygon
+          id="FR-CVL"
+          points="315.312,167.854 312.884,166.626 310.878,163.631 305.573,163.253 303.292,161.398 300.646,163.849 295.603,164.291 295.61,164.272 295.09,164.335 294.874,164.354 294.869,164.362 294.796,164.371 294.403,159.349 293.996,158.747 293.601,156.072 289.401,155.269 287.748,153.263 287.167,148.814 284.812,148.437 284.421,146.372 281.674,144.414 280.39,141.288 281.798,138.885 280.354,137.245 280.354,135.473 281.185,133.187 279.544,131.548 278.95,129.205 276.761,127.016 275.253,128.247 275.253,131.329 271.348,133.266 271.348,136.282 270.352,137.467 265.645,137.467 263.257,136.467 256.135,140.186 253.371,140.186 250.201,143.215 251.043,143.777 251.229,147.1 255.354,150.6 255.716,157.576 253.921,159.748 251.088,160.318 247.861,162.219 248.327,164.001 249.661,165.806 249.661,170.589 250.25,170.679 252.65,172.391 252.001,173.204 251.997,173.202 251.776,173.486 251.619,173.683 251.622,173.685 250.509,175.119 248.828,178.046 250.838,179.894 250.668,183.778 249.947,186.28 247.905,186.28 247.905,190.197 245.301,193.585 242.363,194.737 240.833,196.688 241.319,197.897 241.309,197.896 241.466,198.264 241.562,198.502 241.568,198.502 241.734,198.889 236.303,200.389 235.064,202.206 232.245,200.349 233.555,204.663 231.899,204.663 227.786,201.765 225.605,206.159 226.628,207.415 226.628,208.359 224.652,210.928 224.873,215.202 221.821,218.831 219.437,227.321 219.833,227.321 220.62,230.401 224.283,231.172 224.283,233.498 228.97,234.873 228.971,238.342 228.757,241.009 234.995,241.002 240.369,239.75 239.945,237.512 241.095,236.799 242.542,238.797 243.855,239.361 244.998,243.982 248.33,247.469 248.705,250.224 251.908,253.394 252.219,253.706 252.219,257.252 251.386,259.75 255.245,262.794 257.253,264.803 260.286,265.197 261.453,269.222 263.507,270.34 263.186,272.856 261.84,273.098 261.829,273.686 262.432,273.817 267.477,274.205 269.111,272.567 272.254,275.711 276.187,271.172 277.806,272.269 280.168,272.049 280.872,272.412 284.747,272.645 285.896,269.535 295.401,270.687 299.174,271.67 300.571,271.512 300.571,271.517 301.052,271.458 301.167,271.445 301.167,271.444 305.692,270.885 306.685,268.773 309.122,265.975 313.819,265.011 316.461,265.816 319.438,263.494 319.214,261.639 318.263,260.872 318.263,258.013 323.204,253.044 325.173,255.201 327.067,253.266 328.649,253.079 331.347,249.606 335.425,249.947 335.474,250.752 336.06,250.822 337.599,245.92 336.608,244.135 336.792,241.706 337.399,236.466 335.242,234.338 335.642,229.71 333.662,225.562 333.469,222.767 329.916,220 329.409,217.888 331.135,215.39 331.135,211.467 329.306,209.326 329.319,209.319 328.937,208.894 328.894,208.843 328.892,208.844 328.788,208.731 328.635,207.108 332.584,205.938 331.919,203.521 331.324,200.396 328.771,196.82 328.297,195.095 331.903,195.095 334.841,192.995 335.249,189.822 333.61,187.981 338.576,183.808 338.576,180.018 335.979,177.263 335.008,174.13 331.259,170.58 326.535,173.244 326.202,171.855 323.604,171.63 322.989,173.249 321.284,173.586 315.909,173.394 313.866,174.7 312.569,173.543 315.521,171.507 "
+        />
+        <path
+          id="FR-NAQ"
+          d="m 318.815,292.762 -1.562,-1.988 -0.369,-5.969 -2.23,-5.279 -2.174,-0.787 -1.729,-3.042 -1.413,1.799 -1.046,-1.363 0,-2.337 -2.502,-3.538 -6.562,0.796 -3.703,-0.962 -10.018,-1.215 -1.16,3.139 -3.246,-0.172 -0.804,-0.417 -2.323,0.217 -1.883,-1.272 -3.041,3.491 0,-0.012 -0.416,0.489 -0.168,0.192 0,0.005 -0.248,0.292 -3.106,-3.108 -1.862,1.866 -3.522,-0.267 0.422,-3.306 -2.187,-1.196 -1.208,-4.162 -3.219,-0.418 -1.895,-1.889 -3.554,-2.807 0.715,-2.146 0.015,-3.938 -3.547,-3.52 -0.375,-2.745 -3.354,-3.513 -1.173,-4.754 -1.438,-0.62 -1.678,-2.313 -1.978,1.224 0.394,2.076 -4.746,1.114 -5.521,0 0.163,-2.047 0,-3.94 -4.688,-1.375 0,-2.363 -3.773,-0.792 -0.792,-3.17 -2.11,0 -3.853,4.056 -0.438,0.761 -0.001,-0.013 -0.727,1.281 -1.044,-0.878 -0.646,-1.498 -5.534,0.2 -4.839,0.964 -5.561,0.428 0,2.834 -2.477,1.623 -6.033,-1.367 -4.524,1.936 2.099,2.976 0,2.392 4.619,3.85 -1.146,2.501 3.09,3.46 -1.354,1.754 2.016,3.024 0.573,5.279 -1.204,1.627 1.39,2.366 -1.34,2.498 0.264,2.179 1.769,-1.348 1.494,1.521 -2.409,1.55 -0.976,1.146 -2.114,0.588 -2.355,1.103 -0.046,-0.035 -0.512,-0.426 0.001,0.046 -2.572,-1.915 -3.588,1.507 -1.125,-3.042 -2.974,0.203 -6.446,3.876 1.478,1.347 -2.938,2.386 -0.354,1.858 -2.563,0.326 -1.536,-1.72 -3.803,-0.364 -0.387,-1.873 -2.571,-1.716 -3.822,1.37 2.467,3.576 2.789,0 2.648,1.684 2.245,1.821 4.004,-0.188 0.76,1.701 2.706,0.592 0.987,2.688 1.67,0.745 -0.144,1.623 -2.214,-0.354 -1.003,1.483 1.792,2.592 -0.883,3.933 -2.421,-0.19 -0.603,-1.355 -0.956,-0.812 -0.416,-4.808 -3.435,-0.42 -3.128,-3.812 -0.461,7.771 4.521,3.33 0.365,3.608 0.777,4.256 0.435,4.605 2.521,-0.23 4.04,3.295 2.612,1.48 0.194,2.012 2.287,0.432 6.122,6.121 1.501,6.898 0.015,0 1.587,6.625 0.369,5.559 -0.52,0.844 -0.821,-3.965 -2.772,-10.807 -9.93,-8.969 0.228,-4.236 -2.435,-0.229 -3.269,4.902 -0.971,16.459 -2.531,16.6 -1.784,12.898 -0.188,3.346 0.586,0.104 1.359,-4.449 2.488,-3.229 3.608,3.266 0.381,1.084 0.863,1.188 -4.141,0.188 -0.823,-1.252 -2.327,0.938 -0.419,3.031 -2.169,2.955 0.004,4.52 -0.024,0.148 -3.471,18.576 -4.504,17.203 -1.373,6.646 -1.145,4.646 -2.743,4.717 -0.004,-0.002 -0.125,0.225 -0.173,0.299 0.005,0.002 -0.629,1.121 -4.452,5.404 -3.361,1.328 -2.787,0.414 0,2.547 2.52,2.318 3.344,0.178 0.186,2.523 3.22,0.26 0.75,-1.707 3.491,1.461 2.168,0.549 0.477,1.992 -1.309,1.16 0,3.635 -2.732,1.367 -0.219,2.045 1.894,2.129 3.522,1.094 0.643,-3.184 1.108,-1.227 -0.13,1.766 1.525,2.184 3.504,0 1.545,2.104 4.75,0.791 4.522,2.766 7.219,0 0.393,3.953 5.118,3.939 2.125,2.527 2.333,-1.25 1.736,-0.363 1.012,1.014 5.528,-3.029 0.315,-4.061 1.555,-1.184 0.788,-6.24 2.71,0.555 1.514,-0.992 -1.389,-2.779 5.102,-4.348 3.169,-7.078 2.068,-2.701 -3.882,-5.811 2.148,-1.961 -3.521,-5.812 -5.27,-0.375 -0.044,-0.074 -0.213,-0.393 -0.008,0.004 -1.155,-2.02 1.311,-3.545 1.992,-2.605 -0.591,-3.287 1.617,-1.615 -2.325,-3.928 1.735,-2.1 1.963,-0.365 2.024,0.812 2.549,-2.174 0.829,2.514 1.13,1.629 2.597,-0.715 -0.199,-2.701 0.645,-1.422 0.527,-1.096 2.226,1.896 3.071,-3.07 1.278,1.807 3.479,-0.625 3.684,-0.393 1.562,-2.748 5.548,-0.533 3.046,3.014 1.159,-1.123 2.151,-0.656 -0.779,-2.707 2.626,-0.699 4.052,-0.854 -0.867,-2.504 1.074,-1.242 1.073,-3.996 -2.15,-2.34 1.212,-3.938 2.706,1.613 4.804,-0.871 -2.113,-4.615 -1.466,-5.484 3.729,-0.18 0.955,-2.518 -0.004,-0.002 0.062,-0.172 1.814,-1.781 0.178,-2.795 4.164,-0.365 3.061,-4.348 -1.38,-0.473 -0.146,-1.645 3.26,-0.396 0.229,-2.033 1.443,-0.922 1.955,-3.418 -1.816,-2.016 0,-1.9 1.438,-1.234 -0.014,-0.02 0.139,-0.021 4.111,-1.904 4.77,2.131 3.898,5.578 2.495,-0.314 3.104,-3.105 1.097,1.939 2.375,-2.342 2.674,0.717 0.138,0.941 3.125,-2.197 -0.869,-2.158 -1.062,-1.098 1.305,-1.615 1.639,0 1.055,-3.291 0.82,-1.646 -0.59,-3.504 2.422,-3.352 3.617,-2.209 0.179,-5.145 1.276,0.707 2.025,2.219 2.207,0 1.396,-1.615 -1,-2.42 0.959,-3.471 -0.619,-3.461 -1.17,-1.354 0,-2.557 1.795,-2.928 -0.438,-2.955 -0.269,-0.266 0.016,-0.014 -4.238,-4.236 -0.312,-1.449 3.521,-2.043 2.279,-1.227 0.562,-2.773 2.404,-1.795 -0.822,-3.909 z m -151.654,9.988 -0.284,-1.195 1.712,-2.291 0.196,2.839 0.354,0.647 -1.978,0 z"
+        />
+        <polygon
+          id="FR-HDF"
+          points="377.462,52.956 376.565,51.167 370.146,46.121 358.937,46.728 357.786,48.658 356.89,48.658 357.071,42.007 353.763,38.103 351.416,38.478 350.003,36.875 346.084,38.631 344.813,37.362 342.153,36.969 341.44,34.659 341.25,26.697 339.474,25.904 339.237,24.627 338.084,24.627 337.674,22.259 334.802,22.515 329.842,24.105 327.528,26.97 325.476,26.97 324.041,25.193 323.463,23.097 321.371,20.721 318.666,20.721 317.63,18.82 317.63,15.639 318.998,13.477 318.162,10.356 315.5,5 309.021,8.044 299.31,9.6 298.978,9.659 298.978,9.658 298.903,9.672 298.338,9.771 298.343,9.778 287.962,11.758 279.125,18.53 279.126,45.029 279.043,46.067 279.045,46.068 278.522,52.391 282.849,56.307 282.849,57.62 277.796,54.631 271.039,62.954 273.162,63.855 275.188,63.679 276.063,65.434 284.646,73.852 285.226,77.256 287.099,80.706 286.569,81.36 285.292,82.887 284.296,85.317 285.858,85.317 285.226,86.927 284.421,90.949 285.594,92.914 285.594,96.474 287.341,96.474 285.421,99.992 284.798,101.927 286.608,103.546 287.162,107.933 287.983,109.276 287.124,109.512 285.097,108.389 284.58,112.211 285.065,111.598 285.64,112.927 286.906,114.996 292.396,115.413 296.198,114.997 298.633,113.134 301.56,114.946 303.235,116.221 305.771,115.576 307.765,114.668 311.745,116.749 315.99,119.26 317.513,120.781 319.901,119.187 321.644,120.221 322.926,121.269 324.933,121.05 326.039,119.594 328.653,121.098 332.035,119.709 334.021,120.316 336.026,118.688 337.05,118.177 337.136,118.242 337.135,118.252 337.44,118.472 337.677,118.649 337.679,118.642 338.961,119.564 339.551,123.852 344.876,128.986 346.606,129.605 347.62,131.969 351.229,132.726 351.79,132.025 352.744,130.001 355.688,128.621 357.263,124.502 359.188,123.19 357.919,121.441 355.463,121.441 355.219,120.566 356.812,119.855 357.808,118.344 355.997,117.148 356.431,115.774 361.149,115.381 360.165,113.165 357.507,111.423 357.507,106.485 360.995,103.884 365.39,103.884 364.958,101.827 366.929,100.984 370.219,103.129 371.952,102.654 371.758,95.803 372.339,93.509 373.188,90.557 370.646,89.192 371.086,88.029 374.882,87.232 374.882,84.649 377.769,83.115 378.63,80.524 377.64,78.923 377.812,76.203 379.646,74.565 377.833,71.132 378.397,67.416 375.046,67.416 375.06,67.408 374.041,67.408 373.896,65.929 377.813,63.579 377.159,59.466 373.748,58.578 374.44,57.859 374.44,55.172 "
+        />
+        <polygon
+          id="FR-IDF"
+          points="339.521,119.227 337.112,117.483 335.709,118.193 333.896,119.655 332.008,119.077 328.701,120.436 325.881,118.815 324.61,120.484 323.112,120.645 321.987,119.73 319.89,118.477 317.591,120.008 317.254,119.672 317.253,119.676 316.388,118.809 312.034,116.224 307.776,114 305.569,115.011 303.368,115.57 301.896,114.455 298.597,112.408 295.965,114.421 292.386,114.816 287.257,114.422 286.169,112.653 285.224,110.445 283.349,112.77 282.112,117.153 280.96,119.106 280.942,119.098 280.819,119.343 280.812,119.355 275.377,120.916 274.399,122.127 275.469,123.797 275.469,125.513 276.917,125.822 276.207,126.535 276.372,128.077 276.71,127.822 278.403,129.517 279,131.861 280.483,133.347 279.771,135.325 279.751,137.477 281.058,138.962 279.717,141.247 281.183,144.808 283.873,146.725 284.295,148.97 286.626,149.343 287.171,153.519 289.077,155.827 292.354,156.443 293.065,156.586 293.412,158.908 293.819,159.56 294.246,165.034 300.897,164.434 303.313,162.197 305.342,163.844 310.54,164.215 311.757,166.043 311.758,166.043 311.758,166.037 312.472,167.095 314.729,168.241 314.897,171.213 311.599,173.488 313.801,175.458 316.071,174.01 321.328,174.189 323.431,173.783 324.002,172.275 325.717,172.424 326.134,174.164 331.354,171.218 335.731,166.078 334.127,164.279 335.375,161.616 338.71,159.947 346.368,160.322 347.996,159.072 348.396,159.472 348.91,155.608 349.677,151.771 351.063,149.975 351.245,147.724 353.979,146.561 353.979,144.48 350.963,144.674 350.513,143.63 351.468,141.902 350.625,138.733 349.129,137.806 349.483,135.418 351.104,134.381 350.874,133.164 351.661,132.203 348.049,131.445 347.06,129.123 345.246,128.507 340.119,123.563 "
+        />
+        <path
+          id="FR-GES"
+          d="m 529.514,118.649 -3.278,-2.602 -4.907,-0.567 -4.412,-2.206 -2.864,1.708 -1.483,-1.666 -2.263,0 -3.086,0.847 0.019,-0.028 -0.665,0.206 -0.186,0.05 -0.005,0.008 -0.07,0.022 -1.222,-1.757 -3.938,-2.396 -1.438,-2.25 -4.974,0.434 -2.741,2.52 -6.413,0.182 -1.83,-1.276 c -0.249,-0.443 -1.165,-1.986 -2.021,-2.465 -0.039,-0.021 -0.103,-0.056 -0.153,-0.076 -0.038,-0.019 -0.092,-0.032 -0.125,-0.048 l -0.175,-0.036 0,0.299 -0.097,-0.299 c -0.688,0 -2.104,-0.729 -2.755,-1.115 l -0.13,-0.077 -3.059,1.285 -0.188,2.282 -2.86,0.352 -1.932,-3.64 -1.062,-0.375 0,-2.704 -2.758,-1.191 -0.188,-4.614 -2.057,-2.021 -4.174,-2.023 -2.16,-0.028 -0.595,0.406 -1.768,0 -2.729,-2.354 -3.155,0.202 -2.42,2.032 -0.568,0.896 -3.019,0 -1.155,-1.188 -0.349,0 0,-0.002 -2.776,0 -3.53,-3.906 -4.75,0 -2.351,2.163 -3.322,0.188 -1.147,1.184 -0.402,0 0,0.004 -0.415,0 -0.749,-3.568 -1.697,-1.695 -0.773,-0.107 0.004,-0.005 -1.646,-0.254 -0.763,-3.814 -1.723,-1.307 -5.369,-0.583 -0.938,-2.451 -1.861,-1.209 -6.137,-0.797 -0.343,-4.119 0.771,-0.77 0,-2.04 -3.075,-1.939 0.521,-1.909 0.862,-2.137 -1.28,-1.103 2.002,-1.802 0,-3.816 -0.982,-0.708 -3.189,0 -2.021,2.996 -1.836,1.866 0,4.059 -2.178,1.45 -4.264,1.371 -2.188,0.899 -2.688,-2.109 -4.08,0 -0.585,3.818 1.686,3.193 -1.666,1.487 -0.198,3.154 0.942,1.525 -0.697,2.096 -2.989,1.591 0,2.471 -3.646,0.764 -0.744,1.962 2.58,1.385 -0.717,2.495 -0.604,2.384 0.136,5.201 0.005,0 0.044,1.277 -1.019,0.274 -3.334,-2.17 -2.719,1.16 0.383,1.818 -3.854,0 -3.888,2.896 0,5.564 2.775,1.82 0.572,1.283 -4.277,0.357 -0.688,2.187 1.688,1.116 -0.564,0.865 -1.907,0.85 0.507,1.814 2.606,0 0.728,1.001 -1.57,1.063 -1.555,4.069 -2.927,1.37 -1.006,2.162 -1.062,1.295 0.205,1.093 -1.507,0.964 -0.456,3.049 1.629,1.013 0.726,2.706 -0.981,1.77 0.737,1.704 2.797,-0.18 0,0.403 -0.006,0.001 0,0.639 -2.704,1.146 -0.195,2.439 -1.316,1.711 -0.844,4.049 -0.459,3.448 1.436,1.173 2.32,0 4.877,5.087 -0.602,5.31 3.842,2.956 1.926,-1.344 2.892,3.44 0.375,3.52 2.172,2.916 1.044,2.323 8.075,0.42 3.716,-1.873 1.09,2.034 1.746,0.238 1.016,-2.188 6.253,-0.181 2.796,-1.482 0.392,-2.425 5.323,0 1.325,0.746 -0.002,-0.008 1.692,0.948 3.445,3.658 4.352,5.862 -2.601,2.792 1.917,1.301 0.193,3.465 3.229,-0.19 0.771,1.537 2.604,0.208 1.604,-0.893 2.938,3.676 0.488,1.162 4.687,-1.059 0.78,-1.894 0.302,0.053 0,-2.126 2.428,-1.063 3.121,1.189 2.99,-1.21 1.949,0 0.621,-4.078 1.271,-1.524 -2.062,-0.221 -0.146,-1.834 2.67,-0.583 0.186,-1.509 2.783,0 0,-2.621 2.242,-0.814 -0.611,-1.618 0.542,-0.343 1.442,-0.873 -0.752,-1.158 0.487,-0.299 1.354,1.575 2.271,-1.59 0.569,-1.857 3.374,-0.543 0.771,0.604 -0.188,2.158 2.76,2.109 1.77,-0.212 1.731,-1.363 3.854,0 2.938,3.313 1.188,0 1.748,-1.083 0.216,-1.14 1.271,-0.64 1.571,1.039 1.727,1.939 6.189,3.289 0.021,0.014 0.854,1.665 3.204,0.192 3.396,2.645 0.505,1.204 -0.179,2.208 -0.983,1.813 0.438,2.738 2.78,-0.411 0.52,1.892 1.032,4.428 2.166,-0.353 -0.356,1.874 1.596,1.376 7.438,-0.194 3.904,-3.084 0.188,-4.355 2.062,-2.648 -2.694,-3.088 -1.257,-2.927 1.521,-2.063 0,-4.946 0.943,-2.289 0.021,-3.927 1.812,-2.627 -2.007,-2.817 -0.168,-5.059 0.007,0.003 -0.021,-0.461 -0.007,-0.207 -0.003,-0.001 -0.021,-0.355 5.061,-9.896 0.04,-0.08 -0.6,-5.685 2.338,-7.628 0.582,-6.521 5.075,-3.697 0,-2.394 1.814,-2.366 1.538,0 1.938,-1.94 -0.383,-3.385 1.667,-4.467 3.189,-0.693 z"
+        />
+        <polygon
+          id="FR-BFC"
+          points="484.847,188.445 481.801,188.262 481.149,186.958 481.148,186.958 481.054,186.768 474.767,183.436 473.053,181.508 471.099,180.206 469.247,181.131 469.024,182.302 467.646,183.156 466.898,183.156 463.96,179.843 459.628,179.843 457.86,181.23 456.504,181.393 454.199,179.631 454.387,177.476 453.157,176.514 449.156,177.161 448.539,179.178 446.877,180.339 445.543,178.789 444.095,179.676 444.845,180.833 442.958,181.986 443.53,183.499 441.464,184.248 441.464,186.687 438.748,186.687 438.554,188.302 435.788,188.906 436.017,191.76 437.455,191.915 436.792,192.705 436.226,196.437 434.731,196.437 431.795,197.602 428.666,196.415 425.651,197.727 425.651,199.535 425.59,199.524 424.746,201.572 420.858,202.454 420.549,201.716 417.226,197.542 415.332,198.589 413.247,198.422 412.453,196.835 409.431,197.016 409.251,193.856 407.668,192.782 410.131,190.136 405.46,183.846 401.96,180.128 398.69,178.281 392.705,178.281 392.278,180.922 389.938,182.192 383.828,182.371 383.694,181.713 383.384,182.383 383.218,182.388 383.269,182.635 382.401,184.501 381.397,184.361 380.176,182.085 376.081,184.147 368.526,183.755 367.603,181.71 365.497,178.869 365.121,175.328 361.759,171.329 359.747,172.732 356.521,170.254 357.11,165.002 351.862,159.524 349.503,159.524 348.024,158.286 346.171,159.709 338.579,159.335 334.915,161.167 333.412,164.378 334.933,166.08 330.793,170.974 334.474,174.459 335.418,177.508 337.967,180.257 337.967,183.528 332.745,187.921 334.604,190.017 334.265,192.661 331.702,194.498 327.499,194.498 328.192,197.034 330.731,200.576 331.317,203.659 331.837,205.529 329.867,206.118 329.874,206.119 327.976,206.68 328.196,208.992 330.532,211.697 330.532,215.214 328.758,217.776 329.376,220.353 332.885,223.086 333.063,225.671 335.024,229.831 334.617,234.578 336.769,236.696 336.188,241.659 335.998,244.277 336.942,245.996 335.465,250.711 335.608,252.411 339.058,254.019 341.521,256.714 343.858,255.404 345.476,254.457 345.843,256.041 349.173,256.041 349.909,254.567 351.261,255.172 351.89,257.851 353.847,257.386 357.454,252.442 359.091,253.604 359.521,254.421 359.535,254.412 362.974,260.875 362.974,263.844 364.101,265.224 367.401,265.224 368.56,266.788 371.681,266.788 372.91,268.516 372.728,275.897 368.685,278.982 368.354,279.751 369.085,279.669 369.422,279.771 369.608,282.922 372.591,283.523 372.979,284.941 374.853,284.941 377.173,283.583 383.222,284.521 384.551,285.85 386.244,284.17 388.522,284.17 389.707,277.789 390.312,277.327 392.06,277.327 394.551,278.966 396.229,277.469 397.396,279.046 399.347,277.129 401.124,276.971 402.042,279.834 402.833,283.952 404.646,284.196 405.938,281.191 409.599,266.826 410.896,264.431 412.771,264.244 414.95,266.043 416.663,265.597 418.592,264.253 420.281,264.601 421.427,267.104 422.663,267.584 422.663,267.585 424.981,268.487 428.884,273.948 431.312,275.057 431.312,277.959 434.706,277.491 438.345,273.484 441.103,274.862 441.103,277.318 447.188,277.318 455.662,268.005 455.156,267.728 455.507,263.924 458.652,260.177 456.521,259.332 456.683,258.307 456.685,258.299 468.703,247.025 468.806,246.931 468.433,237.613 472.534,235.58 475.472,234.205 478.355,231.54 478.572,227.873 481.137,226.573 487.599,219.143 486.669,216.897 488.562,216.047 491.374,212.629 489.693,210.945 485.13,211.888 485.046,211.54 489.523,206.383 489.508,206.377 489.923,205.889 492.727,205.452 491.682,200.969 491.018,198.557 488.298,198.959 487.985,197.008 488.905,195.317 489.134,192.784 488.513,191.3 "
+        />
+        <path
+          id="FR-ARA"
+          d="m 502.33,323.022 -2.722,-1.041 -0.771,-2.725 -5.229,-3.096 c 0.052,-1.123 0.255,-5.865 -0.226,-7.013 l 0.367,-0.332 -0.938,0 c -0.646,0.162 -2.888,0.341 -3.486,0.388 l -2.761,-3.145 0.101,-3.375 -0.002,0 0.083,-2.938 6.594,-2.729 0.854,-2.121 -0.424,-4.485 -4.519,-4.713 -1.13,0.642 0,-4.359 -3.74,-1.791 -0.147,-1.264 2.145,-2.326 0,-2.958 -3.54,-3.728 -0.2,-2.702 -6.982,0.004 -4.546,0.794 -4.115,3.341 -1.069,-1.623 -2.509,0.221 -2.041,4.472 -0.036,0.077 0.243,1.953 1.906,1.562 -3.604,2.369 -2.441,2.264 -4.301,0 -0.013,0.011 -1.722,0 0,-3.247 2.142,-1.258 3.679,-0.396 0.267,-2.391 -1.063,-0.703 2.839,-3.592 -0.5,-1.425 -3.652,-1.943 -8.188,9.012 -5.23,0 0,-2.229 -3.491,-1.746 -3.801,4.182 -2.486,0.345 0,-2.6 -2.637,-1.203 -3.908,-5.477 -3.501,-1.362 -1.169,-2.562 -2.246,-0.463 -1.999,1.419 -1.357,0.354 -2.138,-1.765 -2.438,0.247 -1.479,2.739 -3.671,14.395 -0.53,1.188 0,0.008 -0.012,-0.004 -0.564,1.354 -0.937,-0.128 -0.721,-3.729 -1.07,-3.354 -2.476,0.218 -1.607,1.583 -1.146,-1.549 -1.821,1.628 -2.259,-1.485 -2.129,0 -0.953,0.729 -0.459,2.541 0.003,0.002 -0.669,3.568 -2.03,0 -1.438,1.438 -1.047,-1.045 -6.347,-0.984 -0.104,-0.016 -2.363,1.388 -1.252,0 -0.36,-1.333 -2.896,-0.584 -0.19,-3.104 -0.539,-0.17 3.849,-2.938 0.192,-7.87 -1.521,-2.146 -3.131,0 -1.152,-1.563 -3.32,0 -0.812,-0.995 0,-2.831 -3.974,-7.547 -2.271,-1.65 -3.827,5.244 -1.16,0.279 -0.563,-2.381 -2.145,-0.959 -0.828,1.651 -2.48,0 -0.439,-1.916 -2.314,1.36 -1.918,1.072 -2.184,-2.39 -3.279,-1.557 -0.191,-2.612 -4.918,-0.407 -2.737,3.527 -1.543,0.188 -1.608,1.631 -1.968,-2.156 -5.562,5.593 0,3.395 0.982,0.793 0.153,1.271 -2.462,1.928 -2.487,-0.761 -5.048,1.036 -2.604,2.983 -1.229,2.605 0.548,-0.106 2.178,3.075 0,2.35 1.646,2.137 1.338,-1.703 1.396,2.459 2.144,0.773 2.085,4.896 0.098,1.553 0.008,0.004 0.275,4.542 1.578,1.955 0.729,3.461 -2.283,1.705 -0.559,2.724 -2.041,1.097 -3.904,2.27 0.438,2.049 4.488,4.492 0.38,2.545 -1.771,2.887 0,2.945 1.205,1.396 0.568,3.164 -0.438,1.561 0.002,0.002 -0.543,1.973 0.938,2.27 -0.979,1.135 -1.666,0 -1.883,-2.062 -2.254,-1.27 -0.197,5.799 -3.395,2.07 -2.689,3.684 0.598,3.561 -0.756,1.521 -0.934,2.916 -1.486,0 -1.816,2.26 1.335,1.334 0.669,1.66 -2.49,1.752 1.08,6.838 3.221,2.396 -2.521,5.867 2.521,1.105 -1.123,3.396 2.742,0.355 1.67,-2.773 2.449,0 0.531,0.812 6.447,0 1.123,-2.537 1.43,-0.582 0.551,-4.316 1.411,0 0,-4.848 5.169,-4.41 0.338,0.506 0.562,3.824 3.877,-0.562 0.842,5.488 1.894,0 0.533,5.266 0.012,0.088 2.086,2.58 3.021,-6.951 2.628,-8.215 3.465,2.316 1.655,-3.709 4.937,-1.789 0.135,-0.045 3.527,8.994 5.508,-1.699 0.363,-2.273 1.484,0 0.801,2.777 3.717,-0.895 4.254,5.434 -0.002,0 0.182,0.23 0.213,0.27 0.001,-0.002 0.161,0.205 1.359,7.115 0.02,0.084 3.271,3.555 -0.568,4.186 4.186,2.516 0,5.852 2.5,-1.271 4.604,2.998 2.566,0.941 0.551,-4.033 2.295,-0.438 0.81,3.014 3.265,-0.33 0.498,-2.84 6.244,3.514 1.104,-2.234 2.772,-0.42 0,-0.006 2.189,-0.314 0.963,1.145 -0.562,3.902 1.071,1.328 3.062,-3.098 2.646,-0.189 0.76,-2.104 -3.463,-0.426 -0.511,-3.164 1.979,-3.092 2.471,-0.193 2.43,2.287 -2.678,3.631 0.953,1.682 4.188,0.438 1.574,-1.344 -0.829,1.77 0.466,2.662 4.323,0.396 5.269,0.395 0.75,2.43 3.086,2.271 2.744,0.203 1.908,-1.701 0.881,-2.586 1.19,1.047 1.604,1.912 0.889,-8.229 -2.061,-0.396 -1.185,-2.521 -6.59,-1.77 -0.722,-2.939 2.566,-1.688 -2.165,-1.514 0.304,-1.311 2.812,0.17 2.873,1.453 2.513,-2.943 -2.272,-1.846 0.162,-2.119 1.127,-3.525 3.896,-0.391 3.51,-1.408 0.301,-0.688 0.006,0.002 0.068,-0.17 0.182,-0.414 -0.012,0 0.195,-0.479 -1.646,-0.822 0,-1.857 4.699,0 1.812,-1.811 -0.953,-1.729 2.188,-1.699 1.79,0.783 2.562,-2.188 4.493,0.785 1.577,-1.771 3.894,0.197 0,-4.783 -1.611,-0.807 -0.805,-2.605 -4.146,-0.408 -0.455,-0.74 0.739,-3.877 1.212,-1.049 3.318,-0.354 0.992,0.992 0.633,2.93 4,-0.463 0.415,-3.002 1.531,-0.689 4.188,0.213 -0.146,-0.295 5.396,-2.164 2.103,1.34 2.521,0 0.194,-2.457 2.392,-1.299 1.007,-1.17 5.182,-2.004 0.646,-3.594 -0.966,-1.506 2.814,-4.841 z"
+        />
+        <polygon
+          id="FR-OCC"
+          points="375.976,382.143 375.123,381.62 375.679,377.551 372.328,373.915 370.969,366.809 365.823,360.188 362.291,361.04 361.522,358.381 359.076,358.381 358.688,360.795 354.067,362.219 350.536,353.206 344.672,355.315 343.203,358.606 339.667,356.239 336.808,365.184 334.188,371.2 332.835,369.532 332.255,363.819 330.335,363.819 329.481,358.25 325.608,358.813 325.125,355.514 324.328,354.268 318.433,359.295 318.433,363.819 317.092,363.819 316.519,368.313 315.192,368.854 314.13,371.256 308.396,371.256 307.866,370.442 304.752,370.442 303.104,373.174 302.806,373.141 301.478,372.961 302.543,369.731 300.063,368.647 302.542,362.891 299.14,360.354 298.002,353.094 294.615,352.188 292.552,354.219 291.458,352.28 287.937,355.801 285.999,356.047 282.211,350.625 277.042,348.315 272.8,350.295 271.786,350.454 272.021,350.809 270.773,351.881 270.773,354.292 272.458,356.151 270.85,359.024 269.23,360.059 269.021,361.905 265.66,362.317 265.889,364.924 266.882,365.264 264.443,368.729 260.046,369.116 259.85,372.196 258.15,373.866 257.182,376.352 253.1,376.547 254.775,382.797 256.486,386.542 256.585,386.76 252.762,387.45 249.593,385.563 248.055,390.563 250.217,392.913 249.307,396.403 248.052,397.856 248.81,400.045 245.412,400.76 242.178,401.618 242.962,404.346 241.945,404.649 241.93,404.635 241.426,404.805 241.274,404.85 241.283,404.858 240.39,405.682 237.561,402.883 231.422,403.475 229.859,406.225 226.462,406.588 223.337,407.147 221.868,405.081 218.685,408.258 216.287,406.215 214.711,409.581 214.886,411.94 213.171,412.417 212.35,411.25 211.255,407.93 208.304,410.448 206.454,409.702 204.102,410.143 201.961,412.733 204.262,416.624 202.754,418.131 203.352,421.467 201.498,423.893 200.031,427.823 201.743,430.836 206.545,431.17 207.028,431.213 210.134,436.34 207.969,438.317 211.899,444.2 210.056,446.62 206.958,453.59 201.55,458.196 202.912,460.918 202.05,461.485 198.949,460.85 198.109,467.485 196.542,468.676 196.176,473.403 197.014,472.93 200.15,474.792 203.962,477.655 204.336,479.993 207.633,482.663 210.302,482.663 216.656,479.975 219.293,483.004 223.319,484.088 224.681,481.78 226.186,482.452 229.789,482.706 229.789,482.711 238.306,483.278 238.725,473.704 241.057,474.051 244.683,476.161 244.667,476.174 246.089,476.969 252.267,478.163 254.682,478.163 258,482.481 266.389,482.077 269.743,487.424 272.838,486.172 281.136,487.319 281.675,490.42 281.673,490.42 282.081,492.858 285.092,495.676 290.854,497.254 291.039,500.661 294.364,503.59 296.961,503.141 300.308,499.045 304.217,498.299 310.524,500.409 316.187,505.262 317.843,503.172 318.979,503.172 320.42,504.188 321.894,503.471 322.08,500.77 327.843,499.422 329.79,496.879 332.593,495.952 336.509,495.952 339.063,498.661 342.627,498.911 342.627,495.366 340.959,493.063 338.312,491.92 337.892,475.53 337.894,475.532 337.724,469.471 337.954,462.698 335.449,462.899 333.685,460.295 334.955,458.215 338.185,461.264 341.349,458.739 343.394,456.727 343.624,454.829 343.629,454.829 343.771,453.688 350.745,451.549 351.506,449.844 356.924,449.657 358.714,447.44 369.265,439.045 375.801,434.418 377.669,434.547 377.667,434.549 381.094,434.799 381.094,438.739 385.847,438.506 388.46,438.641 390.254,434.473 396.792,430.481 395.319,428.415 396.838,424.381 402.681,425.204 404.104,414.553 411.847,410.133 411.847,407.336 406.033,401.553 406.033,397.157 402.638,391.518 395.292,387.397 394.729,390.625 392.426,390.854 391.606,387.799 388.341,388.424 387.831,392.147 386.021,391.489 381.188,388.336 379.25,389.315 379.25,384.102 "
+        />
+        <polygon
+          id="FR-PAC"
+          points="496.931,379.26 494.875,377.448 492.936,376.838 492.064,374.563 492.774,372.971 496.346,369.176 495.781,366.426 496.079,366.11 496.08,366.11 496.156,366.026 496.62,365.532 496.613,365.532 497.921,364.112 500.226,364.319 500.226,362.055 497.488,360.672 496.892,354.989 494.488,354.118 491.787,354.522 486.922,352.071 486.137,346.2 483.17,345.213 482.232,343.364 480.874,340.387 476.869,340.188 474.903,341.065 474.506,343.938 471.507,344.284 470.95,341.715 469.632,340.397 465.863,340.797 464.34,342.112 463.518,346.422 464.25,347.616 468.293,348.018 469.054,350.481 470.566,351.237 470.566,355.018 467.02,354.838 465.472,356.571 461.029,355.795 458.531,357.92 456.761,357.143 453.886,359.379 454.867,361.155 453.556,362.469 448.503,362.469 448.503,365.299 449.979,366.034 449.545,367.036 446.387,368.319 442.142,368.737 440.879,372.715 440.679,375.215 442.719,376.87 440.916,378.987 438.405,377.719 434.912,377.485 434.401,379.68 436.174,380.918 433.989,382.354 434.896,386.045 441.558,387.836 442.75,390.379 444.565,390.729 443.924,396.692 443.924,396.692 443.892,397.008 443.155,396.137 441.255,394.465 440.136,397.756 438.542,399.178 438.153,399.147 438.151,399.143 437.874,399.122 437.536,399.094 437.537,399.1 436.224,399.006 433.437,396.961 432.623,394.325 426.955,393.905 423.089,393.553 422.738,391.528 424.072,388.676 423.606,388.321 421.173,390.393 417.548,390.016 416.938,388.946 419.702,385.198 416.69,382.362 413.662,382.606 411.394,386.139 412.009,389.975 415.173,390.362 414.806,391.389 412.325,391.571 409.575,394.35 409.086,393.741 409.647,389.836 408.298,388.229 402.694,389.057 401.467,391.549 402.209,391.961 405.438,397.319 405.438,401.799 411.251,407.579 411.251,409.78 408.61,411.28 408.612,411.282 403.556,414.176 402.169,424.524 396.446,423.719 394.649,428.5 395.933,430.305 389.778,434.063 387.821,438.612 394.437,438.911 402.542,439.497 403.515,440.469 401.128,440.469 398.894,444.288 407.731,446.137 415.036,444.868 411.313,441.348 413.257,439.741 416.703,441.19 418.481,444.973 429.887,445.163 432.553,444.073 432.981,445.362 429.44,448.442 434.084,448.643 433.479,450.172 431.896,452.006 442.063,452.006 446.618,453.524 446.968,453.989 447.606,454.856 451.046,456.389 452.024,460.34 454.493,460.807 456.552,459.368 459.966,457.266 465.621,457.821 465.489,458.918 463.668,459.813 463.785,460.381 469.233,460.635 467.613,458.971 467.252,456.721 469.505,455.163 472.304,456.088 473.405,456.434 474.494,457.77 476.203,456.565 476.583,453.987 477.976,452.788 482.117,452.788 483.274,451.057 485.885,451.807 489.29,450.342 489.29,444.739 486.031,444.887 488.179,443.557 489.824,441.323 490.257,438.286 495.796,437.522 498.812,434.147 498.819,434.155 498.999,433.938 499.212,433.698 499.203,433.692 499.252,433.633 499.43,429.413 503.175,430.161 504.549,428.383 506.684,428.823 506.874,422.672 511.208,422.313 515.104,418.788 518.764,418.788 518.961,416.512 522.588,414.327 520.602,409.792 523.505,407.288 522.93,404.442 527.142,403.1 528.359,398.594 527.782,395.588 526.776,393.807 525.924,391.014 522.778,391.252 513.56,394.563 510.78,394.563 505.802,390.536 500.598,389.104 497.882,389.094 497.882,385.696 493.787,383.167 493.787,379.688 "
+        />
+        <path
+          id="FR-COR"
+          d="m 529.67718,518.0164 -10e-4,-0.002 0,0 -0.082,-0.158 -1.854,-3.641 -0.597,-11.73 -1.419,-2.225 -0.001,-0.002 0,0 -2.487,-1.934 -0.396,-7.051 1.197,-3.352 -1.585,-5.354 -0.969,-4.281 -0.854,-1.291 -10e-4,0 0,0 -2.016,-1.146 -3.262,2.184 0.447,2.139 1.436,1.854 -1.704,1.311 0.397,0.805 0.401,0.803 -1.131,1.311 0,1.992 10e-4,0.002 0,0 1.971,1.779 0,2.521 -1.111,2.367 -1.021,0.451 -0.576,-0.797 -0.942,-1.303 -2.812,0.227 -0.583,-0.396 -2.557,0 -2.274,2.107 -0.788,3.213 -4.951,0.947 -4.023,3.416 -0.729,2.012 -1.584,-0.15 -1.338,-1.59 0,0 -0.001,-0.002 -0.646,3.816 -1.386,0.562 -0.438,3.381 0.531,1.229 -2.034,1.479 -0.554,1.451 -1.652,0 0,2.611 2.117,1.479 3.188,1.859 0.163,1.164 -1.69,0.516 -3.366,0.645 0,1.713 1.162,1.195 0.227,4 4.498,1.438 1.443,0.352 1.198,1.885 -0.798,1.135 -1.58,0.568 -1.209,2.207 -1.245,1.479 0.628,3.904 3.102,-0.197 0.844,0.643 2.726,-1.359 0.479,0.48 -1.375,2.938 1.277,1.275 -2.133,1.59 -1.738,3.9 4.678,1.092 5.479,0.51 -2.02,2.344 c -0.411,-0.139 -1.271,-0.361 -1.771,-0.133 -0.029,0.016 -0.062,0.029 -0.133,0.086 -0.007,0.006 -0.042,0.035 -0.095,0.092 -0.018,0.016 -0.049,0.043 -0.076,0.09 l -0.052,0.104 0.002,0.023 c -0.004,0.012 -0.009,0.02 -0.009,0.021 l -0.016,0.045 c -0.016,0.025 -0.023,0.064 -0.033,0.121 l -0.001,0.084 c 0,0.732 -0.94,2.557 -1.309,3.193 l -0.104,0.188 2.085,2.283 3.597,2.213 6.669,1.771 1.934,0.775 1.479,0.646 -1.292,2.348 3.458,-0.207 0.589,1.361 3.563,0 0.894,-4.25 -1.732,-0.355 2.573,-2.727 -1.066,-1.104 0.153,-1.455 3.533,-1.938 0.229,-2.615 -2.771,-0.223 -1.161,0.998 0,-1.002 3.029,-0.186 1.041,-2.52 0.802,-6.928 0.007,-0.049 -0.599,-2.932 -0.061,-2.641 0.003,-0.002 -0.127,-5.854 4.688,-6.621 0,-11.03 0.006,0 0,0.006 -0.004,0 10e-4,0.004 0,0 z"
+        />
+      </g>
+    </svg>
+
+    <button onclick="colorier()">Colorier</button>
+    <script>
+      const tableau = [
+      { nom:"Auvergne-Rhône-Alpes", code: "FR-ARA", taux: 21 },
+      { nom:"Bourgogne-Franche-Comté", code:"FR-BFC", taux: 31},
+      { nom:"Bretagne", code:"FR-BRE", taux: 33},
+      { nom:"Corse", code:"FR-COR", taux: 12},
+      { nom:"Centre-Val de Loire", code:"FR-CVL", taux: 18},
+      { nom:"Grand Est", code:"FR-GES", taux: 22},
+      { nom:"Hauts-de-France", code:"FR-HDF", taux: 38},
+      { nom:"Île-de-France", code:"FR-IDF", taux: 34},
+      { nom:"Normandie", code:"FR-NOR", taux: 4},
+      { nom:"Nouvelle-Aquitaine", code:"FR-NAQ", taux: 17},
+      { nom:"Occitanie", code:"FR-OCC", taux: 28},
+      { nom:"Pays de la Loire", code:"FR-PDL", taux: 30},
+      { nom:"Provence-Alpes-Côte d'Azur", code:"FR-PAC", taux: 9}
+    ]
+    
+    function colorier()
+    {
+        for(const region of tableau)
+        {
+          if (region.taux <= 5.0)
+            document.getElementById(region.code).classList.add("niveau1")
+          else if (region.taux <= 10.0)
+            document.getElementById(region.code).classList.add("niveau2")
+          else if (region.taux <= 15.0)
+            document.getElementById(region.code).classList.add("niveau3")
+          else if (region.taux <= 19.0)
+            document.getElementById(region.code).classList.add("niveau4")
+          else if (region.taux <= 23.0)
+            document.getElementById(region.code).classList.add("niveau5")
+          else if (region.taux <= 27.0)
+            document.getElementById(region.code).classList.add("niveau6")
+          else if (region.taux <= 31.0)
+            document.getElementById(region.code).classList.add("niveau7")
+          else if (region.taux <= 35.0)
+            document.getElementById(region.code).classList.add("niveau8")
+          else if (region.taux <= 40.0)
+            document.getElementById(region.code).classList.add("niveau9")
+        }
+    }
+    </script>
+  </body>
+</html>
--- a/exercices/cuve/cuve.png
+++ b/exercices/cuve/cuve.png
--- a/exercices/cuve/index.md
+++ b/exercices/cuve/index.md
@@ -0,0 +1,14 @@
+---
+layout: layouts/page.njk
+title: Interaction en javascript
+---
+
+Reproduire le schéma suivant.
+
+Allumer le feu rouge lorsqu'une cuve est vide
+
+Allumer le feu vert lorsqu'au moins un robinet est ouvert.
+
+![](cuve.png)
+
+Voir la [réponse](reponse)
--- a/exercices/cuve/reponse/index.md
+++ b/exercices/cuve/reponse/index.md
@@ -0,0 +1,320 @@
+---
+layout: layouts/page.njk
+title: Interaction en javascript - Solution
+---
+
+### Etats
+
+Pour commencer nous allons stocker dans un tableau javascript les états des cuves
+
+Chaque cuve possède 3 propriétés : son nom pour l'identifier, l'état du robinet (ouvert ou fermé) et enfin le niveau dans la cuve de 1 à 0.
+
+```javascript
+const etats = [
+  { nom: "rouge", robinet: false, niveau: 1 },
+  { nom: "vert",  robinet: false, niveau: 1 },
+  { nom: "bleu",  robinet: false, niveau: 1 },
+  
+];
+```
+
+### Robinets
+
+Ajouter un symbole pour le robinet dans la partie définition du svg
+
+```svg
+<symbol id="robinet" viewBox="-28 -28 56 56">
+  <circle r="12" />
+  <line y2="-24" y1="24" stroke-width="8" stroke="black" stroke-linecap="round"/>
+</symbol>
+```
+
+Le robinet est centré sur 0,0 et est placé dans un groupe pour son placement dans l'illustration. Cela permet de s'affranchir de l'origine de la tranformation
+
+```svg
+<g transform="translate(300 152)">
+  <use href="#robinet" data-nom="rouge" width="56" height="56" />
+</g>
+<g transform="translate(300 372)">
+  <use href="#robinet" data-nom="vert" width="56" height="56" />
+</g>
+<g transform="translate(300 572)">
+  <use href="#robinet" data-nom="bleu" width="56" height="56" />
+</g>
+```
+
+Code javascript pour faire tourner le robinet
+
+1. Sélection tous les éléments qui utilise un robinet `document.querySelectorAll("use[href='#robinet']")`
+2. Pour chaque élement faire `.forEach((robinet) =>`
+3. Ajouter une fonction à l'événement au clic de souris `robinet.addEventListener("click", function (event) {`
+4. Lors du clic
+5. Chercher dans le tableau des états à quel cuve correspond le robinet. La propriété `data-nom`du robinet permet d'identifier la ligne d'état. `let cuve = etats.find((elt) => elt.nom == event.currentTarget.dataset["nom"]);`
+propriété data-nom de l'élement à l'origine de l'événement `event.currentTarget.dataset["nom"]`
+6. Une fois identifié inversé l'état du robinet. Passer d'ouvert à fermé ou de fermé à ouvert. `cuve.robinet = !cuve.robinet;`
+7. Appliquer une rotation de 90° `event.currentTarget.style.transform="rotate(90deg)"` ou l'annuler `null` suivant l'état du robinet.
+
+```javascript
+document.querySelectorAll("use[href='#robinet']").forEach((robinet) =>
+  robinet.addEventListener("click", function (event) {
+      let cuve = etats.find((elt) => elt.nom == event.currentTarget.dataset["nom"]);
+      cuve.robinet = !cuve.robinet;
+      event.currentTarget.style.transform = cuve.robinet ? "rotate(90deg)" : null;
+    })
+  );
+``` 
+
+### Cuves
+
+Ajouter un symbole pour la cuve
+
+```svg
+<symbol id="cuve">
+  <g transform="translate(2 21)">
+    <rect width="200" style="height: calc(calc(var(--niveau) * var(--hauteur)) * 1px); 
+      y: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" x="1" fill-opacity="0.6" />
+    <ellipse rx="100" ry="20" cx="100" 
+      style="cy: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" class="surface" />
+    <ellipse rx="100" ry="20" cx="100" fill="none" stroke="black" stroke-width="2" />
+    <ellipse rx="100" ry="20" cx="100" filter="brightness(75%)" style="cy: calc(var(--hauteur) * 1px)" stroke="black" stroke-width="2"/>
+    <g style="transform: scaleY(calc(var(--hauteur) / 100))" vector-effect="non-scaling-stroke">
+      <line x1="0" y1="0" x2="0" y2="100px" stroke="black" stroke-width="2"/>
+      <line x1="200"  y1="0" x2="200"  y2="100px" stroke="black"  stroke-width="2"/>
+    </g>
+  </g>
+</symbol>
+```
+
+Les éléments personnalisables de la cuve sont controlé par des variables css.
+
+**--hauteur** = hauteur totale de la cuve\n
+**--niveau** = niveau à l'intérieur de la cuve
+
+Pour l'ellipse représentant le niveau, l'ordonnée du centre est contrôlé par le style cy. La multiplication par 1px permet de donner l'unité à la valeur sinon elle est ignorée.
+
+```css
+cy: calc(var(--hauteur) * 1px)
+```
+
+Les 2 lignes de chaque côté sont agrandies par un effet d'échelle scaleY. Pour une hauteur de 100 scaleY = 1, pour 200 scaleY = 2 (sans unité).
+
+vector-effect="non-scaling-stroke" permet de ne pas agrandir l'épaisseur du contour lors de l'agrandissement.
+
+```svg
+<g style="transform: scaleY(calc(var(--hauteur) / 100))" vector-effect="non-scaling-stroke">
+```
+
+La hauteur du rectangle de remplissage est controlé aussi avec une variable css. Attention dans une illustration svg l'origine est en haut donc en diminuant la hauteur du rectangle il va se réduire vers le haut. Il faut donc aussi bouger l'origine pour que celle ci soit toujours en bas de la cuve.
+Une autre solution consisterais à appliquer une transformation de symétrie verticale pour inverser le sens de la réduction.
+
+pour faire une opération à plusieurs termes en css il est nécessaire d'utiliser plusieurs fonctions calc imbriquées.
+
+hauteur du remplissage = 200 ; niveau = 0.4 ; hauteur du rectangle = 0.4 * 200 = 80. La multiplication par 1px permet de donner l'unité à la valeur sinon elle est ignorée.
+
+origine du remplissage = 200 * 1px * ( 1 - 0.4) = 120px
+
+```svg
+style="height: calc(calc(var(--niveau) * var(--hauteur)) * 1px); 
+  y: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" x="1"
+```
+
+La couleur de l'ellipse du dessous à sa luminosité qui est baissée à 75% pour un effet d'assobrissement.
+
+```
+filter="brightness(75%)"
+```
+
+Le remplissage a une opacité de 0.6 pour un effet de transparence
+
+```
+fill-opacity="0.6"
+```
+
+```svg
+<use href="#cuve" transform="translate(40 50)" class="cuve" data-nom="rouge" fill="red" style='--niveau:1;--hauteur:150;' />
+<use href="#cuve" transform="translate(40 280)" class="cuve" data-nom="vert" fill="green" style='--niveau:1;--hauteur:150;' />
+<use href="#cuve" transform="translate(40 520)" class="cuve" data-nom="bleu" fill="blue" style='--niveau:1;--hauteur:150;' />
+<use href="#cuve" transform="translate(498 200)" class="cuve" data-nom="destination" fill="white" style='--niveau:0;--hauteur:450' />
+```
+
+## Javascript
+
+## fonction principale
+
+Déclarer une fonction qui devra gérer le changement de niveau `function remplir() {`
+1. Filtrer les états pour sélectionner ceux dont le robinet est ouvert et la cuve non vide `.filter((cuve) => cuve.robinet == true && cuve.niveau > 0)`
+2. Pour chaque cuve (dont le robinet est ouvert) `.forEach((cuve) => {`
+3. Faire baisser le niveau de la cuve en question `cuve.niveau -= 0.005;`
+4. Augmenter le niveau dans la cuve de destination `destination[cuve.nom] += 0.005;`
+5. Mettre à jour le niveau de la cuve en agissant sur la variable css `document.querySelector('.cuve[data-nom='${cuve.nom}']').style.setProperty('--niveau', cuve.niveau);`. Attention à l'interpolation de la chaine, il faut utiliser les back quote (Alt Gr 7)
+6. Calculer le niveau dans la cuve de destination `destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3;`
+7. Mettre à jour le niveau de la cuve de destination en agissant sur la variable css  `document.querySelector('.cuve[data-nom='destination']').style.setProperty('--niveau', destination.niveau);`
+8. Calculer la couleur de destination. Il faut se rapporter à la couleur la plus présente et calculer la proportion des 2 autres en fonction. `destination.total = Math.max(destination.rouge, destination.vert, destination.bleu);` puis 
+`destination.couleur = 'rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})'`
+9. Mettre à jour la couleur de remplissage `document.querySelector('.cuve[data-nom='destination']').setAttribute("fill", destination.couleur);`
+10. Allumer le feu rouge lorsqu'une cuve est vide `document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0;`
+11. Allumer le feu vert lorsqu'au moins un robinet est ouvert. `document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0;`
+
+``` javascript
+function remplir() {
+  etats
+    .filter((cuve) => cuve.robinet == true && cuve.niveau > 0)
+    .forEach((cuve) => {
+      cuve.niveau -= 0.005;
+      destination[cuve.nom] += 0.005;            
+      document.querySelector(`.cuve[data-nom='${cuve.nom}']`).style.setProperty('--niveau', cuve.niveau);
+  });
+
+  destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3;
+  document.querySelector(`.cuve[data-nom='destination']`).style.setProperty('--niveau', destination.niveau);
+  
+  destination.total = Math.max(destination.rouge, destination.vert, destination.bleu);
+  destination.couleur = `rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})`;
+  document.querySelector(`.cuve[data-nom='destination']`).setAttribute("fill", destination.couleur);
+
+  document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0;
+  document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0;
+}
+``` 
+
+Répéter la fonction remplir tant qu'un robinet est ouvert et de manière continue
+
+1. déclarer une variable globale permettant d'agir sur le timer `var timer;`.
+2. Dan la fonction clic des robinets, tester si au moins un robinet est ouvert. `if (etats.some((elt) => elt.robinet))` Déclencher la fonction remplir toutes les 50ms, sauvegarder le handle de la fonction dans la variable timer. `timer = setInterval(remplir, 50) `\
+Si aucun robinet n'est ouvert annuler la répétition de la fonction `clearInterval(timer);`
+
+```javascript
+var timer;
+
+ ...    
+
+if (etats.some((elt) => elt.robinet)) 
+  timer = setInterval(remplir, 50) 
+else
+  clearInterval(timer);
+
+```
+
+## Javscript complet
+
+```javascript
+<script>
+const etats = [
+  { nom: "rouge", robinet: false, niveau: 1 },
+  { nom: "vert", robinet: false, niveau: 1 },
+  { nom: "bleu", robinet: false, niveau: 1 },
+];
+
+const destination = { rouge: 0, vert: 0, bleu: 0 };
+
+var timer;
+
+document.querySelectorAll("use[href='#robinet']").forEach((robinet) =>
+  robinet.addEventListener("click", function (event) {
+    let cuve = etats.find(
+      (elt) => elt.nom == event.currentTarget.dataset["nom"]
+    );
+    cuve.robinet = !cuve.robinet;
+    event.currentTarget.style.transform = cuve.robinet ? "rotate(90deg)" : null;
+
+    if (etats.some((elt) => elt.robinet)) 
+    timer = setInterval(remplir, 50) 
+  else
+    clearInterval(timer);
+  })
+);
+
+function remplir() {
+  etats
+    .filter((cuve) => cuve.robinet == true && cuve.niveau > 0)
+    .forEach((cuve) => {
+      cuve.niveau -= 0.005;
+      destination[cuve.nom] += 0.005;            
+      document.querySelector(`.cuve[data-nom='${cuve.nom}']`).style.setProperty('--niveau', cuve.niveau);
+  });
+
+  destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3;
+  document.querySelector(`.cuve[data-nom='destination']`).style.setProperty('--niveau', destination.niveau);
+  
+  destination.total = Math.max(destination.rouge, destination.vert, destination.bleu);
+  destination.couleur = `rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})`;
+  document.querySelector(`.cuve[data-nom='destination']`).setAttribute("fill", destination.couleur);
+
+  document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0;
+  document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0;
+}
+</script>
+```
+
+### SVG Complet
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+  <defs>
+    <symbol id="robinet" viewBox="-28 -28 56 56">
+      <circle r="12" />
+      <line y2="-24" y1="24" stroke-width="8" stroke="black" stroke-linecap="round"/>
+    </symbol>
+
+    <symbol id="cuve">
+      <g transform="translate(2 21)">
+      <rect width="200" style="height: calc(calc(var(--niveau) * var(--hauteur)) * 1px); 
+      y: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" x="1" fill-opacity="0.6" />
+      <ellipse rx="100" ry="20" cx="100" style="cy: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" class="surface" />
+      <ellipse rx="100" ry="20" cx="100" fill="none" stroke="black" stroke-width="2" />
+      <ellipse rx="100" ry="20" cx="100" filter="brightness(75%)" style="cy: calc(var(--hauteur) * 1px)" stroke="black" stroke-width="2"/>
+      <g style="transform: scaleY(calc(var(--hauteur) / 100))" vector-effect="non-scaling-stroke">
+        <line x1="0" y1="0" x2="0" y2="100px" stroke="black" stroke-width="2"/>
+        <line x1="200"  y1="0" x2="200"  y2="100px" stroke="black"  stroke-width="2"/>
+      </g>
+      </g>
+    </symbol>
+  </defs>
+</svg>
+```
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 700 800">
+  <g id="feu" transform="translate(440 25)">
+    <rect width="50" height="107.5" stroke-width="2" stroke="black" fill="white" rx="5" ry="5"/>
+    <circle id="feu-rouge" cx="25" cy="27.5" r="20" fill="red" stroke="black" stroke-width="0.5" fill-opacity="1" class="feu"/>
+    <circle id="feu-vert" cx="25" cy="80" r="20" fill="green" stroke="black" stroke-width="0.5" class="feu"/>
+  </g>
+
+  <use href="#cuve" transform="translate(40 50)" class="cuve" data-nom="rouge" fill="red" style='--niveau:1;--hauteur:150;' />
+  <use href="#cuve" transform="translate(40 280)" class="cuve" data-nom="vert" fill="green" style='--niveau:1;--hauteur:150;' />
+  <use href="#cuve" transform="translate(40 520)" class="cuve" data-nom="bleu" fill="blue" style='--niveau:1;--hauteur:150;' />
+  <use href="#cuve" transform="translate(498 200)" class="cuve" data-nom="destination" fill="white" style='--niveau:0;--hauteur:450' />
+
+  <polyline points="240 180 400 180 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+  <polyline points="240 400 400 400 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+  <polyline points="240 600 400 600 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+
+  <g transform="translate(300 152)">
+    <use href="#robinet" data-nom="rouge" width="56" height="56" />
+  </g>
+  <g transform="translate(300 372)">
+    <use href="#robinet" data-nom="vert" width="56" height="56" />
+  </g>
+  <g transform="translate(300 572)">
+    <use href="#robinet" data-nom="bleu" width="56" height="56" />
+  </g>
+</svg>
+```
+
+### Feuille de style
+
+```css
+<style>
+use[href="#robinet"] {
+  transform-origin: 28px 28px;
+  transition: 1s transform;
+}
+
+.feu {
+  transition: fill-opacity 1s;
+}
+</style>
+```
+
+Voir la [solution](solution).
--- a/exercices/cuve/reponse/solution.html
+++ b/exercices/cuve/reponse/solution.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head> 
+    <style>
+     
+      use[href="#robinet"] {
+        transform-origin: 28px 28px;
+        transition: 1s transform;
+      }
+
+      .feu {
+        transition: fill-opacity 1s;
+      }
+    </style>
+  </head>
+
+  <body>
+    <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+      <defs>
+        <symbol id="robinet" viewBox="-28 -28 56 56">
+          <circle r="12" />
+          <line y2="-24" y1="24" stroke-width="8" stroke="black" stroke-linecap="round"/>
+        </symbol>
+
+        <symbol id="cuve">
+          <g transform="translate(2 21)">
+          <rect width="200" style="height: calc(calc(var(--niveau) * var(--hauteur)) * 1px); 
+          y: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" x="1" fill-opacity="0.6" />
+          <ellipse rx="100" ry="20" cx="100" style="cy: calc(calc(var(--hauteur) * 1px) * calc(1 - var(--niveau)));" class="surface" />
+          <ellipse rx="100" ry="20" cx="100" fill="none" stroke="black" stroke-width="2" />
+          <ellipse rx="100" ry="20" cx="100" filter="brightness(75%)" style="cy: calc(var(--hauteur) * 1px)" stroke="black" stroke-width="2"/>
+          <g style="transform: scaleY(calc(var(--hauteur) / 100))" vector-effect="non-scaling-stroke">
+            <line x1="0" y1="0" x2="0" y2="100px" stroke="black" stroke-width="2"/>
+            <line x1="200"  y1="0" x2="200"  y2="100px" stroke="black"  stroke-width="2"/>
+          </g>
+          </g>
+        </symbol>
+      </defs>
+    </svg>
+
+    <svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 700 800">
+      <g id="feu" transform="translate(440 25)">
+        <rect width="50" height="107.5" stroke-width="2" stroke="black" fill="white" rx="5" ry="5"/>
+        <circle id="feu-rouge" cx="25" cy="27.5" r="20" fill="red" stroke="black" stroke-width="0.5" fill-opacity="1" class="feu"/>
+        <circle id="feu-vert" cx="25" cy="80" r="20" fill="green" stroke="black" stroke-width="0.5" class="feu"/>
+      </g>
+
+      <use href="#cuve" transform="translate(40 50)" class="cuve" data-nom="rouge" fill="red" style='--niveau:1;--hauteur:150;' />
+      <use href="#cuve" transform="translate(40 280)" class="cuve" data-nom="vert" fill="green" style='--niveau:1;--hauteur:150;' />
+      <use href="#cuve" transform="translate(40 520)" class="cuve" data-nom="bleu" fill="blue" style='--niveau:1;--hauteur:150;' />
+      <use href="#cuve" transform="translate(498 200)" class="cuve" data-nom="destination" fill="white" style='--niveau:0;--hauteur:450' />
+
+      <polyline points="240 180 400 180 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+      <polyline points="240 400 400 400 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+      <polyline points="240 600 400 600 400 500 500 500" stroke="black" stroke-width="4" fill="none" />
+
+      <g transform="translate(300 152)">
+        <use href="#robinet" data-nom="rouge" width="56" height="56" />
+      </g>
+      <g transform="translate(300 372)">
+        <use href="#robinet" data-nom="vert" width="56" height="56" />
+      </g>
+      <g transform="translate(300 572)">
+        <use href="#robinet" data-nom="bleu" width="56" height="56" />
+      </g>
+    </svg>
+    <script>
+      const etats = [
+        { nom: "rouge", robinet: false, niveau: 1 },
+        { nom: "vert", robinet: false, niveau: 1 },
+        { nom: "bleu", robinet: false, niveau: 1 },
+      ];
+
+      const destination = { rouge: 0, vert: 0, bleu: 0 };
+
+      var timer;
+
+      document.querySelectorAll("use[href='#robinet']").forEach((robinet) =>
+        robinet.addEventListener("click", function (event) {
+          let cuve = etats.find(
+            (elt) => elt.nom == event.currentTarget.dataset["nom"]
+          );
+          cuve.robinet = !cuve.robinet;
+          event.currentTarget.style.transform = cuve.robinet ? "rotate(90deg)" : null;
+
+         if (etats.some((elt) => elt.robinet)) 
+          timer = setInterval(remplir, 50) 
+        else
+          clearInterval(timer);
+        })
+      );
+
+      function remplir() {
+        etats
+          .filter((cuve) => cuve.robinet == true && cuve.niveau > 0)
+          .forEach((cuve) => {
+            cuve.niveau -= 0.005;
+            destination[cuve.nom] += 0.005;            
+            document.querySelector(`.cuve[data-nom='${cuve.nom}']`).style.setProperty('--niveau', cuve.niveau);
+        });
+
+        destination.niveau = (destination.rouge + destination.vert + destination.bleu) / 3;
+        document.querySelector(`.cuve[data-nom='destination']`).style.setProperty('--niveau', destination.niveau);
+        
+        destination.total = Math.max(destination.rouge, destination.vert, destination.bleu);
+        destination.couleur = `rgb( ${(destination.rouge / destination.total) * 255} ${(destination.vert / destination.total) * 255} ${(destination.bleu / destination.total) * 255})`;
+        document.querySelector(`.cuve[data-nom='destination']`).setAttribute("fill", destination.couleur);
+
+        document.getElementById("feu-rouge").style.fillOpacity = etats.some((cuve) => cuve.hauteur == 0) ? 1: 0;
+        document.getElementById("feu-vert").style.fillOpacity = etats.some((cuve) => cuve.robinet) ? 1 : 0;
+      }
+    </script>
+    
+  </body>
+</html>
--- a/exercices/dessin.svg
+++ b/exercices/dessin.svg
@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="dessin.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.49497475"
+     inkscape:cx="375.15863"
+     inkscape:cy="729.71831"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1280"
+     inkscape:window-height="961"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect10"
+       width="103.16604"
+       height="70.02462"
+       x="16.570711"
+       y="21.177847"
+       style="stroke-width:0.26458332;fill:#00ff00" />
+    <ellipse
+       id="path12"
+       cx="119.20221"
+       cy="102.69505"
+       rx="41.694046"
+       ry="33.94323"
+       style="stroke-width:0.26458332;fill:#d35f5f" />
+  </g>
+</svg>
--- a/exercices/guitare/couleurs.png
+++ b/exercices/guitare/couleurs.png
--- a/exercices/guitare/guitare.png
+++ b/exercices/guitare/guitare.png
--- a/exercices/guitare/guitare.svg
+++ b/exercices/guitare/guitare.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="600"
+    viewBox="0 0 430 1225" preserveAspectRatio="xMidYMid meet">
+    <path id="body" d="m 252.93463,801.83216 c 0.33331,4.13171 0.82218,5.18793 1.75547,6.51339 3.82203,5.88172 14.31041,8.69832 27.28756,7.29002 22.04337,-2.31955 41.51576,-7.16091 48.49066,-36.21669 6.22003,-15.46452 7.13219,-35.47491 18.34623,-36.89528 9.38161,-0.76319 18.07078,10.03946 22.68006,16.8845 4.60927,6.84505 9.13474,18.61448 10.02358,36.25965 1.1555,21.37302 -0.34535,42.2521 -17.3223,81.85018 -10.13284,23.52689 -10.9328,26.42633 -10.48838,38.0241 0.26665,7.86991 0.79996,10.35514 3.64427,17.89369 3.91092,10.60364 8.44403,20.13044 23.28775,48.79344 20.53234,39.76384 23.46553,46.97104 27.55422,67.51564 10.22173,51.6929 0.53331,86.8175 -31.90956,116.2261 -18.75464,16.9825 -37.33152,26.095 -67.81893,33.385 -19.11018,4.5563 -38.48702,6.6273 -73.32977,7.8699 -12.16148,0.8643 -20.37812,1.2169 -25.50987,1.4083 l -35.82048,-0.497 c -37.06487,-0.4971 -46.75328,-1.1598 -62.13032,-4.6391 -19.376834,-4.2249 -38.131484,-13.0061 -55.463974,-25.7636 -24.97656,-18.4736 -39.19809,-47.8822 -41.86463,-86.6519 -1.77769,-27.0062 8.88846,-61.3853 34.75387,-112.16694 9.86618,-19.302 14.48818,-31.4797 17.68803,-46.39109 3.28873,-15.40846 4.35534,-27.42043 3.82203,-42.58037 -0.79996,-20.95881 -4.08869,-35.20749 -16.17699,-70.08363 -13.15492,-37.85841 -19.19907,-68.26112 -17.8658,-90.71108 1.1555,-19.13631 5.59973,-42.33184 10.31061,-53.51539 5.7775,-13.50311 14.22153,-23.9411 22.66557,-27.58611 5.86638,-2.65092 14.7568,-4.81997 20.68232,-4.42193 7.36487,0.54341 11.249844,4.76233 13.716014,8.97819 2.46617,4.21586 6.21995,21.6621 9.15511,43.82298 1.86657,16.07119 4.622,26.26065 9.42176,34.87613 7.19965,12.84038 16.35476,19.55052 29.68745,21.53871 8.6218,1.32546 12.97715,0.16568 18.31022,-4.97047 4.04425,-3.89354 5.95527,-5.19829 6.933,-11.87736 l 0.17195,97.02373 75.00438,-8.3e-4 z" />
+    <path id="guard" d="m 150.55967,779.54966 c 14.29347,-7.94079 36.77602,10.63359 72.52613,27.26349 14.3948,6.69603 42.35104,18.7933 65.64409,20.91081 20.88993,1.89906 41.82165,-16.9404 47.90963,-29.11631 5.82328,-11.6465 8.86263,-22.78633 10.58775,-31.23389 1.28164,-6.27593 1.58816,-18.26388 6.08793,-14.29343 3.41471,3.01303 8.31477,8.83189 10.58778,19.58734 4.06712,19.24476 0.47833,40.03585 -6.35265,61.40897 -5.23905,16.39221 -21.91744,48.44764 -23.55774,67.497 -1.25113,14.52982 1.51717,32.47523 7.94077,47.90962 7.51261,18.051 22.32215,48.9379 25.94003,57.70334 3.71324,8.9964 14.82285,39.1746 16.9404,50.2918 2.11755,11.1171 6.35265,24.8812 2.64697,31.2338 -3.70575,6.3527 -13.23472,11.6466 -22.23435,6.8821 -8.99955,-4.7645 -27.52812,-21.4401 -34.93954,-28.8516 -7.41143,-7.4114 -21.44027,-18.7933 -42.08635,-21.9696 -20.64615,-3.1763 -72.79084,-2.647 -90.79003,-3.1764 -17.99919,-0.5293 -35.78996,3.0819 -44.46858,0.5294 -13.49938,-3.9704 -24.88123,-16.1463 -30.1751,-30.9691 -5.29389,-14.82294 -2.64694,-35.20434 0.26469,-47.38034 1.88337,-7.876 11.91122,-34.93958 19.85204,-54.52696 7.94082,-19.58737 13.90385,-42.965 11.64654,-68.02632 -1.30794,-14.52101 -3.0855,-29.59662 -5.55858,-38.38059 -2.52297,-8.96116 -5.02918,-17.20519 1.58817,-23.29313 z" />
+    <path id="neck" d="m 235.46949,5.4741916 c -3.64442,0.1034003 -7.11117,0.7039058 -10.44434,1.822266 -7.55519,2.485233 -15.1988,7.9527554 -19.8208,14.0830084 -3.82204,5.053312 -8.60735,17.289465 -9.68848,19.800292 -7.17357,19.964213 -12.83119,41.52015 -18.9331,62.378912 -0.14508,0.63166 -13.06536,48.7108 -13.4209,49.125 -5.94599,24.25373 -13.62412,50.23606 -18.6665,71.74072 -2.75544,11.26639 -2.84469,15.49012 -0.62256,20.04639 2.13323,4.30774 5.68956,6.7933 15.11133,10.604 14.3104,5.71604 18.50214,9.01588 22.75488,16.37256 3.62663,5.82924 3.97017,15.61667 4.67871,27.271 1.22062,36.05733 -1.0583,59.30298 -2.56934,119.36279 -1.51104,58.90009 -4.26547,209.83613 -5.06543,273.78955 -0.31109,25.3908 -0.35528,37.44495 -1.33301,44.124 l 0.15381,97.02248 h 75.02198 l 0.30908,-31.18508 c -0.33334,-4.13167 -0.51068,-11.3394 -0.82178,-24.96675 -0.35554,-15.73995 -1.06677,-56.66347 -1.68896,-90.79395 -0.53331,-34.21356 -1.33387,-81.34947 -1.77833,-104.79348 -0.88883,-42.33189 -1.77748,-96.34383 -3.55517,-200.06103 -0.53331,-29.6571 -1.34749,-54.87327 -2.14746,-82.87353 0,0 -1.78232,-33.55739 -1.50586,-40.27149 0.10456,-8.05972 4.03079,-25.86051 11.4082,-32.73633 4.08869,-3.89353 8.44411,-6.3795 14.93262,-8.61621 3.99983,-1.4083 4.44413,-3.89326 3.28861,-18.30762 -1.77774,-22.28427 -5.59866,-38.85272 -15.55374,-67.10156 -6.66636,-18.88779 -8.4443,-26.01134 -8.62208,-35.289554 -0.26665,-7.869908 0.44443,-9.113535 7.46631,-14.58105 11.28834,-8.698335 15.91006,-13.42053 19.02101,-19.302248 8.1774,-15.40845 5.42242,-32.224732 -7.37697,-45.147952 C 260.57926,11.521811 254.80207,8.3740081 246.98023,6.6343479 242.93598,5.7645181 239.1139,5.3708019 235.46949,5.4741916 Z" />
+    <g class="frets" stroke="#000000" stroke-width="0.75px">
+      <line x1="186.41821" y1="298.71834" x2="245" y2="298.71834" />
+      <line x1="186.46362" y1="340.64372" x2="245" y2="340.64372" />
+      <line x1="184.92087" y1="379.57443" x2="245" y2="379.57443" />
+      <line x1="183.79787" y1="419.25381" x2="246" y2="419.25381" />
+      <line x1="183.04920" y1="453.50534" x2="248" y2="453.50534" />
+      <line x1="182.30054" y1="485.88522" x2="249" y2="485.88522" />
+      <line x1="181.92619" y1="517.32925" x2="250" y2="517.32925" />
+      <line x1="180.80319" y1="548.02462" x2="250" y2="548.02462" />
+      <line x1="180.99037" y1="574.78949" x2="251" y2="574.78949" />
+      <line x1="180.05454" y1="601.92868" x2="251" y2="601.92868" />
+      <line x1="179.30587" y1="626.82188" x2="251" y2="626.82188" />
+      <line x1="179.49303" y1="651.52791" x2="251" y2="651.52791" />
+      <line x1="178.93152" y1="670.99326" x2="251" y2="670.99326" />
+      <line x1="178.74437" y1="692.89178" x2="251" y2="692.89178" />
+      <line x1="178.55720" y1="712.91866" x2="251" y2="712.91866" />
+      <line x1="251.17794" y1="731.82247" x2="178" y2="731.82247" />
+      <line x1="251.36511" y1="749.41616" x2="178" y2="749.41616" />
+      <line x1="251.73945" y1="766.07404" x2="178" y2="766.07404" />
+      <line x1="252.11378" y1="781.23453" x2="178" y2="781.23453" />
+      <line x1="252.30095" y1="795.64641" x2="178" y2="795.64641" />
+      <line x1="252.48811" y1="809.49671" x2="178" y2="809.49671" />
+      <line x1="252.48812" y1="822.03692" x2="178" y2="822.03692" />
+    </g>
+    <g id="elements">
+      <path id="jack"
+        d="m 283.74499,1080.3272 c 7.48665,-8.984 24.06253,-2.094 28.07505,-0.3743 13.10167,5.615 37.80771,32.9414 42.67402,41.1767 4.86631,8.2353 9.35836,17.2194 5.61503,22.8344 -3.74333,5.615 -21.33704,1.4974 -24.33172,0 -2.99467,-1.4973 -37.80773,-25.0804 -42.67403,-31.4441 -4.86637,-6.3636 -16.845,-23.2087 -9.35835,-32.1927 z" />
+      <path id="bridge"
+        d="m 166.04072,1033.6555 0.25857,35.0703 c -0.19822,6.2636 1.53474,6.8642 7.29023,7.0155 l 87.34968,0.213 c 4.75457,0.2617 6.33257,-1.5761 6.51281,-6.1607 l -0.66383,-19.5873 c -0.0774,-4.3966 -1.57712,-6.1939 -6.90925,-5.8589 -4.73693,-0.2027 -4.64415,-0.1448 -4.5776,-5.5338 l 0.14151,-7.1469 c -0.0965,-4.157 -1.29824,-4.8137 -6.15569,-4.8703 l -76.63034,-0.8022 c -5.12944,-0.1424 -6.63351,2.1274 -6.61609,7.6613 z"  />
+      <g id="knobs">
+        <circle id="volume"  cx="276.75244" cy="1004.738" r="15.15"/>
+        <circle id="tone1" cx="323.53717" cy="1030.0825" r="15.15" />
+        <circle id="tone2" cx="362.84424" cy="1065.4192" r="15.15" />
+      </g>
+      <g id="pickups">
+        <path d="m 178.36737,841.98589 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+        <path d="m 180.09967,975.74276 66.3078,11.9729 c 0,0 8.30447,2.8746 6.67095,12.2127 -1.63352,9.33844 -10.66194,9.89004 -10.66194,9.89004 l -66.30781,-11.97294 c 0,0 -6.83043,-4.2969 -5.33416,-12.9127 1.49629,-8.616 9.32516,-9.19 9.32516,-9.19 z" />
+        <path d="m 177.05982,912.25142 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+      </g>
+    </g>
+   </svg>
--- a/exercices/guitare/index.md
+++ b/exercices/guitare/index.md
@@ -0,0 +1,43 @@
+---
+layout: layouts/page.njk
+title: Guitare
+---
+
+Dans un page html ajouter l'illustration de la [guitare](guitare.svg) dans une définition de symbole
+
+Ajouter une illustration SVG de 800px de large et 800px de haut
+
+Dupliquer le symbole de la guitare plusieurs fois
+
+Colorier à l'aide de variables css les éléments de la guitare
+
+palette|neck|body|guard|knobs|pickups|bridge|jack
+---|---|---|---|---|---|---|---
+1|#debd8a|#406872|#ffffff|#62a600|#000|#ccc|#ccc
+2|#97723a|#b00015|#111111|#ffffff|#eee|#333|#333
+3|#935540|#2c0544|#111111|#b909ae|#fff|#999|#999
+4|#000|#333|#ffffff|#ca0606|#000|#b9b9b9|#b9b9b9
+
+Définir dans chaque classe les valeurs des variables
+
+```css
+.theme1 {
+  --primary-color: red;
+}
+
+.theme2 {
+  --primary-color: yellow;
+}
+```
+
+Utilisez la variable pour définir le remplissage des différentes parties.
+
+```svg
+<path fill="var(--primary-color)">
+```
+
+![](couleurs.png)
+
+Références
+- https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/
+- https://frontstuff.io/multi-colored-svg-symbol-icons-with-css-variables
--- a/exercices/guitare/reponse/index.md
+++ b/exercices/guitare/reponse/index.md
@@ -0,0 +1,118 @@
+---
+layout: layouts/page.njk
+title: Colorier un symbole
+---
+
+
+## Définition des symboles
+
+pour chaque propriété personnalisable il faut attribuer la valeur non pas avec la propriété directement mais il faut utiliser les variables css. `fill="var(--body-color)"` à la place de `fill="red"`
+
+```svg
+<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="900" >
+  <defs >
+    <symbol id="guitare" viewBox="0 0 430 1225" preserveAspectRatio="xMidYMid meet">
+    <path class="body" fill="var(--body-color)"
+      d="m 252.93463,801.83216 c 0.33331,4.13171 0.82218,5.18793 1.75547,6.51339 3.82203,5.88172 14.31041,8.69832 27.28756,7.29002 22.04337,-2.31955 41.51576,-7.16091 48.49066,-36.21669 6.22003,-15.46452 7.13219,-35.47491 18.34623,-36.89528 9.38161,-0.76319 18.07078,10.03946 22.68006,16.8845 4.60927,6.84505 9.13474,18.61448 10.02358,36.25965 1.1555,21.37302 -0.34535,42.2521 -17.3223,81.85018 -10.13284,23.52689 -10.9328,26.42633 -10.48838,38.0241 0.26665,7.86991 0.79996,10.35514 3.64427,17.89369 3.91092,10.60364 8.44403,20.13044 23.28775,48.79344 20.53234,39.76384 23.46553,46.97104 27.55422,67.51564 10.22173,51.6929 0.53331,86.8175 -31.90956,116.2261 -18.75464,16.9825 -37.33152,26.095 -67.81893,33.385 -19.11018,4.5563 -38.48702,6.6273 -73.32977,7.8699 -12.16148,0.8643 -20.37812,1.2169 -25.50987,1.4083 l -35.82048,-0.497 c -37.06487,-0.4971 -46.75328,-1.1598 -62.13032,-4.6391 -19.376834,-4.2249 -38.131484,-13.0061 -55.463974,-25.7636 -24.97656,-18.4736 -39.19809,-47.8822 -41.86463,-86.6519 -1.77769,-27.0062 8.88846,-61.3853 34.75387,-112.16694 9.86618,-19.302 14.48818,-31.4797 17.68803,-46.39109 3.28873,-15.40846 4.35534,-27.42043 3.82203,-42.58037 -0.79996,-20.95881 -4.08869,-35.20749 -16.17699,-70.08363 -13.15492,-37.85841 -19.19907,-68.26112 -17.8658,-90.71108 1.1555,-19.13631 5.59973,-42.33184 10.31061,-53.51539 5.7775,-13.50311 14.22153,-23.9411 22.66557,-27.58611 5.86638,-2.65092 14.7568,-4.81997 20.68232,-4.42193 7.36487,0.54341 11.249844,4.76233 13.716014,8.97819 2.46617,4.21586 6.21995,21.6621 9.15511,43.82298 1.86657,16.07119 4.622,26.26065 9.42176,34.87613 7.19965,12.84038 16.35476,19.55052 29.68745,21.53871 8.6218,1.32546 12.97715,0.16568 18.31022,-4.97047 4.04425,-3.89354 5.95527,-5.19829 6.933,-11.87736 l 0.17195,97.02373 75.00438,-8.3e-4 z" />
+    <path class="guard" fill="var(--guard-color)" d="m 150.55967,779.54966 c 14.29347,-7.94079 36.77602,10.63359 72.52613,27.26349 14.3948,6.69603 42.35104,18.7933 65.64409,20.91081 20.88993,1.89906 41.82165,-16.9404 47.90963,-29.11631 5.82328,-11.6465 8.86263,-22.78633 10.58775,-31.23389 1.28164,-6.27593 1.58816,-18.26388 6.08793,-14.29343 3.41471,3.01303 8.31477,8.83189 10.58778,19.58734 4.06712,19.24476 0.47833,40.03585 -6.35265,61.40897 -5.23905,16.39221 -21.91744,48.44764 -23.55774,67.497 -1.25113,14.52982 1.51717,32.47523 7.94077,47.90962 7.51261,18.051 22.32215,48.9379 25.94003,57.70334 3.71324,8.9964 14.82285,39.1746 16.9404,50.2918 2.11755,11.1171 6.35265,24.8812 2.64697,31.2338 -3.70575,6.3527 -13.23472,11.6466 -22.23435,6.8821 -8.99955,-4.7645 -27.52812,-21.4401 -34.93954,-28.8516 -7.41143,-7.4114 -21.44027,-18.7933 -42.08635,-21.9696 -20.64615,-3.1763 -72.79084,-2.647 -90.79003,-3.1764 -17.99919,-0.5293 -35.78996,3.0819 -44.46858,0.5294 -13.49938,-3.9704 -24.88123,-16.1463 -30.1751,-30.9691 -5.29389,-14.82294 -2.64694,-35.20434 0.26469,-47.38034 1.88337,-7.876 11.91122,-34.93958 19.85204,-54.52696 7.94082,-19.58737 13.90385,-42.965 11.64654,-68.02632 -1.30794,-14.52101 -3.0855,-29.59662 -5.55858,-38.38059 -2.52297,-8.96116 -5.02918,-17.20519 1.58817,-23.29313 z" />
+    <path id="neck" fill="var(--neck-color)" d="m 235.46949,5.4741916 c -3.64442,0.1034003 -7.11117,0.7039058 -10.44434,1.822266 -7.55519,2.485233 -15.1988,7.9527554 -19.8208,14.0830084 -3.82204,5.053312 -8.60735,17.289465 -9.68848,19.800292 -7.17357,19.964213 -12.83119,41.52015 -18.9331,62.378912 -0.14508,0.63166 -13.06536,48.7108 -13.4209,49.125 -5.94599,24.25373 -13.62412,50.23606 -18.6665,71.74072 -2.75544,11.26639 -2.84469,15.49012 -0.62256,20.04639 2.13323,4.30774 5.68956,6.7933 15.11133,10.604 14.3104,5.71604 18.50214,9.01588 22.75488,16.37256 3.62663,5.82924 3.97017,15.61667 4.67871,27.271 1.22062,36.05733 -1.0583,59.30298 -2.56934,119.36279 -1.51104,58.90009 -4.26547,209.83613 -5.06543,273.78955 -0.31109,25.3908 -0.35528,37.44495 -1.33301,44.124 l 0.15381,97.02248 h 75.02198 l 0.30908,-31.18508 c -0.33334,-4.13167 -0.51068,-11.3394 -0.82178,-24.96675 -0.35554,-15.73995 -1.06677,-56.66347 -1.68896,-90.79395 -0.53331,-34.21356 -1.33387,-81.34947 -1.77833,-104.79348 -0.88883,-42.33189 -1.77748,-96.34383 -3.55517,-200.06103 -0.53331,-29.6571 -1.34749,-54.87327 -2.14746,-82.87353 0,0 -1.78232,-33.55739 -1.50586,-40.27149 0.10456,-8.05972 4.03079,-25.86051 11.4082,-32.73633 4.08869,-3.89353 8.44411,-6.3795 14.93262,-8.61621 3.99983,-1.4083 4.44413,-3.89326 3.28861,-18.30762 -1.77774,-22.28427 -5.59866,-38.85272 -15.55374,-67.10156 -6.66636,-18.88779 -8.4443,-26.01134 -8.62208,-35.289554 -0.26665,-7.869908 0.44443,-9.113535 7.46631,-14.58105 11.28834,-8.698335 15.91006,-13.42053 19.02101,-19.302248 8.1774,-15.40845 5.42242,-32.224732 -7.37697,-45.147952 C 260.57926,11.521811 254.80207,8.3740081 246.98023,6.6343479 242.93598,5.7645181 239.1139,5.3708019 235.46949,5.4741916 Z" />
+    <g id="frets" stroke="#000000" stroke-width="0.75px">
+      <line x1="186.41821" y1="298.71834" x2="245" y2="298.71834" />
+      <line x1="186.46362" y1="340.64372" x2="245" y2="340.64372" />
+      <line x1="184.92087" y1="379.57443" x2="245" y2="379.57443" />
+      <line x1="183.79787" y1="419.25381" x2="246" y2="419.25381" />
+      <line x1="183.04920" y1="453.50534" x2="248" y2="453.50534" />
+      <line x1="182.30054" y1="485.88522" x2="249" y2="485.88522" />
+      <line x1="181.92619" y1="517.32925" x2="250" y2="517.32925" />
+      <line x1="180.80319" y1="548.02462" x2="250" y2="548.02462" />
+      <line x1="180.99037" y1="574.78949" x2="251" y2="574.78949" />
+      <line x1="180.05454" y1="601.92868" x2="251" y2="601.92868" />
+      <line x1="179.30587" y1="626.82188" x2="251" y2="626.82188" />
+      <line x1="179.49303" y1="651.52791" x2="251" y2="651.52791" />
+      <line x1="178.93152" y1="670.99326" x2="251" y2="670.99326" />
+      <line x1="178.74437" y1="692.89178" x2="251" y2="692.89178" />
+      <line x1="178.55720" y1="712.91866" x2="251" y2="712.91866" />
+      <line x1="251.17794" y1="731.82247" x2="178" y2="731.82247" />
+      <line x1="251.36511" y1="749.41616" x2="178" y2="749.41616" />
+      <line x1="251.73945" y1="766.07404" x2="178" y2="766.07404" />
+      <line x1="252.11378" y1="781.23453" x2="178" y2="781.23453" />
+      <line x1="252.30095" y1="795.64641" x2="178" y2="795.64641" />
+      <line x1="252.48811" y1="809.49671" x2="178" y2="809.49671" />
+      <line x1="252.48812" y1="822.03692" x2="178" y2="822.03692" />
+    </g>
+    <g id="elements">
+      <path id="jack" fill="var(--jack-color)"
+        d="m 283.74499,1080.3272 c 7.48665,-8.984 24.06253,-2.094 28.07505,-0.3743 13.10167,5.615 37.80771,32.9414 42.67402,41.1767 4.86631,8.2353 9.35836,17.2194 5.61503,22.8344 -3.74333,5.615 -21.33704,1.4974 -24.33172,0 -2.99467,-1.4973 -37.80773,-25.0804 -42.67403,-31.4441 -4.86637,-6.3636 -16.845,-23.2087 -9.35835,-32.1927 z" />
+      <path id="bridge" fill="var(--bridge-color)"
+        d="m 166.04072,1033.6555 0.25857,35.0703 c -0.19822,6.2636 1.53474,6.8642 7.29023,7.0155 l 87.34968,0.213 c 4.75457,0.2617 6.33257,-1.5761 6.51281,-6.1607 l -0.66383,-19.5873 c -0.0774,-4.3966 -1.57712,-6.1939 -6.90925,-5.8589 -4.73693,-0.2027 -4.64415,-0.1448 -4.5776,-5.5338 l 0.14151,-7.1469 c -0.0965,-4.157 -1.29824,-4.8137 -6.15569,-4.8703 l -76.63034,-0.8022 c -5.12944,-0.1424 -6.63351,2.1274 -6.61609,7.6613 z"  />
+      <g id="knobs" fill="var(--knobs-color)">
+        <circle id="volume"  cx="276.75244" cy="1004.738" r="15.15"/>
+        <circle id="tone1" cx="323.53717" cy="1030.0825" r="15.15" />
+        <circle id="tone2" cx="362.84424" cy="1065.4192" r="15.15" />
+      </g>
+      <g id="pickups" style="fill: var(--pickups-color)">
+        <path d="m 178.36737,841.98589 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+        <path d="m 180.09967,975.74276 66.3078,11.9729 c 0,0 8.30447,2.8746 6.67095,12.2127 -1.63352,9.33844 -10.66194,9.89004 -10.66194,9.89004 l -66.30781,-11.97294 c 0,0 -6.83043,-4.2969 -5.33416,-12.9127 1.49629,-8.616 9.32516,-9.19 9.32516,-9.19 z" />
+        <path d="m 177.05982,912.25142 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+      </g>
+    </g>
+    </symbol>
+  </defs>
+</svg>
+```
+
+## Utilisation des symbole   
+
+Une classe différente pour chaque symbole
+
+```svg
+<use href="#guitare" class="tidepool" width="200" height="600"/>
+<use href="#guitare" class="crimson" width="200" height="600" x="200"/>
+<use href="#guitare" class="prince" width="200" height="600" x="400"/>
+<use href="#guitare" class="black" width="200" height="600" x="600"/>
+```
+
+## Le style
+
+finalement déclarer les variables
+
+```css
+<style>
+.tidepool {
+  --neck-color: #debd8a;
+  --body-color: #406872;
+  --guard-color: #ffffff;
+  --knobs-color: #62a600;
+  --pickups-color: #000;
+  --bridge-color: #ccc;
+  --jack-color: #ccc;
+}
+.crimson {
+  --neck-color: #97723a;
+  --body-color: #b00015;
+  --guard-color: #111111;
+  --knobs-color: #ffffff;
+  --pickups-color: #eee;
+  --bridge-color: #333;
+  --jack-color: #333;
+}
+.prince {
+  --neck-color: #935540;
+  --body-color: #2c0544;
+  --guard-color: #111111;
+  --knobs-color: #b909ae;
+  --pickups-color: #fff;
+  --bridge-color: #999;
+  --jack-color: #999;
+}
+.black {
+  --neck-color: #000;
+  --body-color: #333;
+  --guard-color: #ffffff;
+  --knobs-color: #ca0606;
+  --pickups-color: #000;
+  --bridge-color: #b9b9b9;
+  --jack-color: #b9b9b9;
+}
+ </style>
+```
--- a/exercices/guitare/reponse/solution.html
+++ b/exercices/guitare/reponse/solution.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<style>
+   .tidepool {
+    --neck-color: #debd8a;
+    --body-color: #406872;
+    --guard-color: #ffffff;
+    --knobs-color: #62a600;
+    --pickups-color: #000;
+    --bridge-color: #ccc;
+    --jack-color: #ccc;
+  }
+
+  .crimson {
+    --neck-color: #97723a;
+    --body-color: #b00015;
+    --guard-color: #111111;
+    --knobs-color: #ffffff;
+    --pickups-color: #eee;
+    --bridge-color: #333;
+    --jack-color: #333;
+  }
+
+  .prince {
+    --neck-color: #935540;
+    --body-color: #2c0544;
+    --guard-color: #111111;
+    --knobs-color: #b909ae;
+    --pickups-color: #fff;
+    --bridge-color: #999;
+    --jack-color: #999;
+    
+  }
+
+  .black {
+    --neck-color: #000;
+    --body-color: #333;
+    --guard-color: #ffffff;
+    --knobs-color: #ca0606;
+    --pickups-color: #000;
+    --bridge-color: #b9b9b9;
+    --jack-color: #b9b9b9;
+  }
+ </style>
+
+<body>
+
+  <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="900" >
+    <defs >
+      <symbol id="guitare" viewBox="0 0 430 1225" preserveAspectRatio="xMidYMid meet">
+      <path class="body" fill="var(--body-color)"
+        d="m 252.93463,801.83216 c 0.33331,4.13171 0.82218,5.18793 1.75547,6.51339 3.82203,5.88172 14.31041,8.69832 27.28756,7.29002 22.04337,-2.31955 41.51576,-7.16091 48.49066,-36.21669 6.22003,-15.46452 7.13219,-35.47491 18.34623,-36.89528 9.38161,-0.76319 18.07078,10.03946 22.68006,16.8845 4.60927,6.84505 9.13474,18.61448 10.02358,36.25965 1.1555,21.37302 -0.34535,42.2521 -17.3223,81.85018 -10.13284,23.52689 -10.9328,26.42633 -10.48838,38.0241 0.26665,7.86991 0.79996,10.35514 3.64427,17.89369 3.91092,10.60364 8.44403,20.13044 23.28775,48.79344 20.53234,39.76384 23.46553,46.97104 27.55422,67.51564 10.22173,51.6929 0.53331,86.8175 -31.90956,116.2261 -18.75464,16.9825 -37.33152,26.095 -67.81893,33.385 -19.11018,4.5563 -38.48702,6.6273 -73.32977,7.8699 -12.16148,0.8643 -20.37812,1.2169 -25.50987,1.4083 l -35.82048,-0.497 c -37.06487,-0.4971 -46.75328,-1.1598 -62.13032,-4.6391 -19.376834,-4.2249 -38.131484,-13.0061 -55.463974,-25.7636 -24.97656,-18.4736 -39.19809,-47.8822 -41.86463,-86.6519 -1.77769,-27.0062 8.88846,-61.3853 34.75387,-112.16694 9.86618,-19.302 14.48818,-31.4797 17.68803,-46.39109 3.28873,-15.40846 4.35534,-27.42043 3.82203,-42.58037 -0.79996,-20.95881 -4.08869,-35.20749 -16.17699,-70.08363 -13.15492,-37.85841 -19.19907,-68.26112 -17.8658,-90.71108 1.1555,-19.13631 5.59973,-42.33184 10.31061,-53.51539 5.7775,-13.50311 14.22153,-23.9411 22.66557,-27.58611 5.86638,-2.65092 14.7568,-4.81997 20.68232,-4.42193 7.36487,0.54341 11.249844,4.76233 13.716014,8.97819 2.46617,4.21586 6.21995,21.6621 9.15511,43.82298 1.86657,16.07119 4.622,26.26065 9.42176,34.87613 7.19965,12.84038 16.35476,19.55052 29.68745,21.53871 8.6218,1.32546 12.97715,0.16568 18.31022,-4.97047 4.04425,-3.89354 5.95527,-5.19829 6.933,-11.87736 l 0.17195,97.02373 75.00438,-8.3e-4 z" />
+      <path class="guard" fill="var(--guard-color)" d="m 150.55967,779.54966 c 14.29347,-7.94079 36.77602,10.63359 72.52613,27.26349 14.3948,6.69603 42.35104,18.7933 65.64409,20.91081 20.88993,1.89906 41.82165,-16.9404 47.90963,-29.11631 5.82328,-11.6465 8.86263,-22.78633 10.58775,-31.23389 1.28164,-6.27593 1.58816,-18.26388 6.08793,-14.29343 3.41471,3.01303 8.31477,8.83189 10.58778,19.58734 4.06712,19.24476 0.47833,40.03585 -6.35265,61.40897 -5.23905,16.39221 -21.91744,48.44764 -23.55774,67.497 -1.25113,14.52982 1.51717,32.47523 7.94077,47.90962 7.51261,18.051 22.32215,48.9379 25.94003,57.70334 3.71324,8.9964 14.82285,39.1746 16.9404,50.2918 2.11755,11.1171 6.35265,24.8812 2.64697,31.2338 -3.70575,6.3527 -13.23472,11.6466 -22.23435,6.8821 -8.99955,-4.7645 -27.52812,-21.4401 -34.93954,-28.8516 -7.41143,-7.4114 -21.44027,-18.7933 -42.08635,-21.9696 -20.64615,-3.1763 -72.79084,-2.647 -90.79003,-3.1764 -17.99919,-0.5293 -35.78996,3.0819 -44.46858,0.5294 -13.49938,-3.9704 -24.88123,-16.1463 -30.1751,-30.9691 -5.29389,-14.82294 -2.64694,-35.20434 0.26469,-47.38034 1.88337,-7.876 11.91122,-34.93958 19.85204,-54.52696 7.94082,-19.58737 13.90385,-42.965 11.64654,-68.02632 -1.30794,-14.52101 -3.0855,-29.59662 -5.55858,-38.38059 -2.52297,-8.96116 -5.02918,-17.20519 1.58817,-23.29313 z" />
+      <path id="neck" fill="var(--neck-color)" d="m 235.46949,5.4741916 c -3.64442,0.1034003 -7.11117,0.7039058 -10.44434,1.822266 -7.55519,2.485233 -15.1988,7.9527554 -19.8208,14.0830084 -3.82204,5.053312 -8.60735,17.289465 -9.68848,19.800292 -7.17357,19.964213 -12.83119,41.52015 -18.9331,62.378912 -0.14508,0.63166 -13.06536,48.7108 -13.4209,49.125 -5.94599,24.25373 -13.62412,50.23606 -18.6665,71.74072 -2.75544,11.26639 -2.84469,15.49012 -0.62256,20.04639 2.13323,4.30774 5.68956,6.7933 15.11133,10.604 14.3104,5.71604 18.50214,9.01588 22.75488,16.37256 3.62663,5.82924 3.97017,15.61667 4.67871,27.271 1.22062,36.05733 -1.0583,59.30298 -2.56934,119.36279 -1.51104,58.90009 -4.26547,209.83613 -5.06543,273.78955 -0.31109,25.3908 -0.35528,37.44495 -1.33301,44.124 l 0.15381,97.02248 h 75.02198 l 0.30908,-31.18508 c -0.33334,-4.13167 -0.51068,-11.3394 -0.82178,-24.96675 -0.35554,-15.73995 -1.06677,-56.66347 -1.68896,-90.79395 -0.53331,-34.21356 -1.33387,-81.34947 -1.77833,-104.79348 -0.88883,-42.33189 -1.77748,-96.34383 -3.55517,-200.06103 -0.53331,-29.6571 -1.34749,-54.87327 -2.14746,-82.87353 0,0 -1.78232,-33.55739 -1.50586,-40.27149 0.10456,-8.05972 4.03079,-25.86051 11.4082,-32.73633 4.08869,-3.89353 8.44411,-6.3795 14.93262,-8.61621 3.99983,-1.4083 4.44413,-3.89326 3.28861,-18.30762 -1.77774,-22.28427 -5.59866,-38.85272 -15.55374,-67.10156 -6.66636,-18.88779 -8.4443,-26.01134 -8.62208,-35.289554 -0.26665,-7.869908 0.44443,-9.113535 7.46631,-14.58105 11.28834,-8.698335 15.91006,-13.42053 19.02101,-19.302248 8.1774,-15.40845 5.42242,-32.224732 -7.37697,-45.147952 C 260.57926,11.521811 254.80207,8.3740081 246.98023,6.6343479 242.93598,5.7645181 239.1139,5.3708019 235.46949,5.4741916 Z" />
+      <g id="frets" stroke="#000000" stroke-width="0.75px">
+        <line x1="186.41821" y1="298.71834" x2="245" y2="298.71834" />
+        <line x1="186.46362" y1="340.64372" x2="245" y2="340.64372" />
+        <line x1="184.92087" y1="379.57443" x2="245" y2="379.57443" />
+        <line x1="183.79787" y1="419.25381" x2="246" y2="419.25381" />
+        <line x1="183.04920" y1="453.50534" x2="248" y2="453.50534" />
+        <line x1="182.30054" y1="485.88522" x2="249" y2="485.88522" />
+        <line x1="181.92619" y1="517.32925" x2="250" y2="517.32925" />
+        <line x1="180.80319" y1="548.02462" x2="250" y2="548.02462" />
+        <line x1="180.99037" y1="574.78949" x2="251" y2="574.78949" />
+        <line x1="180.05454" y1="601.92868" x2="251" y2="601.92868" />
+        <line x1="179.30587" y1="626.82188" x2="251" y2="626.82188" />
+        <line x1="179.49303" y1="651.52791" x2="251" y2="651.52791" />
+        <line x1="178.93152" y1="670.99326" x2="251" y2="670.99326" />
+        <line x1="178.74437" y1="692.89178" x2="251" y2="692.89178" />
+        <line x1="178.55720" y1="712.91866" x2="251" y2="712.91866" />
+        <line x1="251.17794" y1="731.82247" x2="178" y2="731.82247" />
+        <line x1="251.36511" y1="749.41616" x2="178" y2="749.41616" />
+        <line x1="251.73945" y1="766.07404" x2="178" y2="766.07404" />
+        <line x1="252.11378" y1="781.23453" x2="178" y2="781.23453" />
+        <line x1="252.30095" y1="795.64641" x2="178" y2="795.64641" />
+        <line x1="252.48811" y1="809.49671" x2="178" y2="809.49671" />
+        <line x1="252.48812" y1="822.03692" x2="178" y2="822.03692" />
+      </g>
+      <g id="elements">
+        <path id="jack" fill="var(--jack-color)"
+          d="m 283.74499,1080.3272 c 7.48665,-8.984 24.06253,-2.094 28.07505,-0.3743 13.10167,5.615 37.80771,32.9414 42.67402,41.1767 4.86631,8.2353 9.35836,17.2194 5.61503,22.8344 -3.74333,5.615 -21.33704,1.4974 -24.33172,0 -2.99467,-1.4973 -37.80773,-25.0804 -42.67403,-31.4441 -4.86637,-6.3636 -16.845,-23.2087 -9.35835,-32.1927 z" />
+        <path id="bridge" fill="var(--bridge-color)"
+          d="m 166.04072,1033.6555 0.25857,35.0703 c -0.19822,6.2636 1.53474,6.8642 7.29023,7.0155 l 87.34968,0.213 c 4.75457,0.2617 6.33257,-1.5761 6.51281,-6.1607 l -0.66383,-19.5873 c -0.0774,-4.3966 -1.57712,-6.1939 -6.90925,-5.8589 -4.73693,-0.2027 -4.64415,-0.1448 -4.5776,-5.5338 l 0.14151,-7.1469 c -0.0965,-4.157 -1.29824,-4.8137 -6.15569,-4.8703 l -76.63034,-0.8022 c -5.12944,-0.1424 -6.63351,2.1274 -6.61609,7.6613 z"  />
+        <g id="knobs" fill="var(--knobs-color)">
+          <circle id="volume"  cx="276.75244" cy="1004.738" r="15.15"/>
+          <circle id="tone1" cx="323.53717" cy="1030.0825" r="15.15" />
+          <circle id="tone2" cx="362.84424" cy="1065.4192" r="15.15" />
+        </g>
+        <g id="pickups" style="fill: var(--pickups-color)">
+          <path d="m 178.36737,841.98589 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+          <path d="m 180.09967,975.74276 66.3078,11.9729 c 0,0 8.30447,2.8746 6.67095,12.2127 -1.63352,9.33844 -10.66194,9.89004 -10.66194,9.89004 l -66.30781,-11.97294 c 0,0 -6.83043,-4.2969 -5.33416,-12.9127 1.49629,-8.616 9.32516,-9.19 9.32516,-9.19 z" />
+          <path d="m 177.05982,912.25142 h 67.38008 c 0,0 8.68307,1.35306 8.7349,10.83298 0.0518,9.47992 -8.7349,11.62706 -8.7349,11.62706 h -67.38008 c 0,0 -7.48527,-3.01478 -7.54378,-11.75941 -0.0585,-8.74462 7.54378,-10.70063 7.54378,-10.70063 z" />
+        </g>
+      </g>
+      </symbol>
+    </defs>
+    <use href="#guitare" class="tidepool" width="200" height="600"/>
+    <use href="#guitare" class="crimson" width="200" height="600" x="200"/>
+    <use href="#guitare" class="prince" width="200" height="600" x="400"/>
+    <use href="#guitare" class="black" width="200" height="600" x="600"/>
+   </svg>
+   
+
+</body>
+</html>
--- a/exercices/horloge/horloge.png
+++ b/exercices/horloge/horloge.png
--- a/exercices/horloge/index.md
+++ b/exercices/horloge/index.md
@@ -0,0 +1,32 @@
+---
+layout: layouts/page.njk
+title: Horloge
+---
+
+Vous devez réaliser un outil d'apprentissage de l'heure
+
+![](horloge.png){ width: 500px; }
+
+## Dessiner une horloge
+
+Dans un canvas de 220px de largeur et 240px de hauteur
+
+Définir un trait de longueur 17px et 3.8px d'épaisseur pour les heures.
+
+Définir un trait de longueur 5px et un de 1.2px pour les minutes
+
+Définir un groupe représentant 5 minutes composé d'un trait d'heure et de 4 traits de minutes.
+
+Répéter ce bloc autant de fois que nécessaire pour faire un cercle complet
+
+Ajouter 2 aiguilles une pour les heures et une pour les minutes. 
+
+*Facultatif* : 
+
+Marquer les heures et les minutes avec du texte
+
+## Ajouter 2 slider
+
+Un pour les heures de 0 à 12 et l'autre pour les minutes
+
+Lorsque l'on bouge les sliders faire bouger les aiguilles.
--- a/exercices/horloge/reponse.md
+++ b/exercices/horloge/reponse.md
@@ -0,0 +1,103 @@
+---
+layout: layouts/page.njk
+title: Horloge
+---
+
+Les heures
+
+```svg
+<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
+```
+
+Les minutes
+
+```svg
+<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
+```
+
+Le bloc, chaque minute représente 6° (360 / 60)
+
+```svg
+<g id="bloc" viewbox="-100 -100 200 200">
+  <use href="#heure"/>
+  <use href="#minute" transform="rotate( 6)"/>
+  <use href="#minute" transform="rotate(12)"/>
+  <use href="#minute" transform="rotate(18)"/>
+  <use href="#minute" transform="rotate(24)"/>
+</g>
+```
+
+Le viewBox permet de centrer sur le centre de l'horloge ou sur le bloc de 5 minutes
+Attention si on utilise un symbole tous les éléments dans les coordonnées négatives ne sont pas affichés.
+
+
+Chaque bloc de 5 minutes représente 30° (360 / 12)
+
+```svg
+<use href="#bloc" transform="rotate(  0)"/>
+<use href="#bloc" transform="rotate( 30)"/>
+<use href="#bloc" transform="rotate( 60)"/>
+...
+<use href="#bloc" transform="rotate(300)"/>
+<use href="#bloc" transform="rotate(330)"/>
+```
+
+### Les aiguilles
+
+```svg
+<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
+<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>
+```
+
+### Le texte
+
+Il convient de redresser le texte après la rotation pour l'amener à sa position sur le cercle.
+
+```svg
+<g transform="rotate(240)">
+  <text y="70" transform="rotate(-240 0 65)">2</text>
+</g>
+<g transform="rotate(210)">
+  <text y="115" transform="rotate(-210 0 110)">5</text>
+</g>
+```
+
+### Les sliders
+
+```html
+Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
+Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />
+```
+
+Télécharger le fichier <a href="../solution.svg" download>svg</a>
+
+### Le code javascript
+
+Récupérer les éléments
+
+```javascript
+const inputh = document.querySelector("input.heure");
+const inputm = document.querySelector("input.minute");
+const aiguilleh = document.getElementById("aiguilleh");
+const aigiullem = document.getElementById("aiguillem");
+```
+
+La fonction pour afficher les aiguilles dans la bonne position
+
+```javascript
+function Show() {
+  aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
+  aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
+}
+```
+
+Attacher la fonctions aux événements `input` des sliders.
+
+```javascript
+inputm.oninput = Show;
+inputh.oninput = Show;
+```
+
+Télécharger le fichier <a href="../solution/index.html" download>html</a>
+
+
--- a/exercices/horloge/solution.html
+++ b/exercices/horloge/solution.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <svg xmlns="http://www.w3.org/2000/svg" width="440" height="480" 
+viewBox="-110 -120 220 240">
+  <defs> 
+    <line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
+	  <line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
+    <g id="bloc" viewbox="-100 -100 200 200">
+      <use href="#heure"/>
+      <use href="#minute" transform="rotate( 6)"/>
+      <use href="#minute" transform="rotate(12)"/>
+      <use href="#minute" transform="rotate(18)"/>
+      <use href="#minute" transform="rotate(24)"/>
+    </g>
+  </defs>
+  <!--<rect fill="yellow" x="-130" y="-150" width="450" height="310"/>-->
+  <use href="#bloc" transform="rotate(  0)"/>
+  <use href="#bloc" transform="rotate( 30)"/>
+  <use href="#bloc" transform="rotate( 60)"/>
+  <use href="#bloc" transform="rotate( 90)"/>
+  <use href="#bloc" transform="rotate(120)"/>
+  <use href="#bloc" transform="rotate(150)"/>
+  <use href="#bloc" transform="rotate(180)"/>
+  <use href="#bloc" transform="rotate(210)"/>
+  <use href="#bloc" transform="rotate(240)"/>
+  <use href="#bloc" transform="rotate(270)"/>
+  <use href="#bloc" transform="rotate(300)"/>
+  <use href="#bloc" transform="rotate(330)"/>
+
+  <line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
+  <line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>
+  
+  <circle cx="0" cy="0" r="6" fill="black"/>
+  
+  <g text-anchor="middle">
+    <g transform="rotate(210)">
+      <text y="70" transform="rotate(-210 0 65)">1</text>
+    </g>
+    <g transform="rotate(240)">
+      <text y="70" transform="rotate(-240 0 65)">2</text>
+    </g>
+    <g transform="rotate(270)">
+      <text y="70" transform="rotate(-270 0 65)">3</text>
+    </g>
+    <g transform="rotate(300)">
+      <text y="70" transform="rotate(-300 0 65)">4</text>
+    </g>
+    <g transform="rotate(330)">
+      <text y="70" transform="rotate(-330 0 65)">5</text>
+    </g>
+    <g transform="rotate(0)">
+      <text y="70" transform="rotate(-0 0 65)">6</text>
+    </g>
+    <g transform="rotate(30)">
+      <text y="70" transform="rotate(-30 0 65)">7</text>
+    </g>
+    <g transform="rotate(60)">
+      <text y="70" transform="rotate(-60 0 65)">8</text>
+    </g>
+    <g transform="rotate(90)">
+      <text y="70" transform="rotate(-90 0 65)">9</text>
+    </g>
+    <g transform="rotate(120)">
+      <text y="70" transform="rotate(-120 0 65)">10</text>
+    </g>
+    <g transform="rotate(150)">
+    <text y="70" transform="rotate(-150 0 65)">11</text>
+    </g>
+    <g transform="rotate(180)">
+      <text y="70" transform="rotate(-180 0 65)">12</text>
+    </g>
+    </g>
+    <g text-anchor="middle" font-size="12">
+    <g transform="rotate(210)">
+      <text  y="115" transform="rotate(-210 0 110)">5</text>
+    </g>
+    <g transform="rotate(240)">
+      <text  y="115" transform="rotate(-240 0 110)">10</text>
+    </g>
+    <g transform="rotate(270)">
+      <text  y="115" transform="rotate(-270 0 110)">15</text>
+    </g>
+    <g transform="rotate(300)">
+      <text  y="115" transform="rotate(-300 0 110)">20</text>
+    </g>
+    <g transform="rotate(330)">
+      <text  y="115" transform="rotate(-330 0 110)">25</text>
+    </g>
+    <g transform="rotate(  0)">
+      <text  y="115" >30</text>
+    </g>
+    <g transform="rotate( 30)">
+      <text  y="115" transform="rotate(-30 0 110)">35</text>
+    </g>
+    <g transform="rotate( 60)">
+      <text  y="115" transform="rotate(-60 0 110)">40</text>
+    </g>
+    <g transform="rotate( 90)">
+      <text  y="115" transform="rotate(-90 0 110)">45</text>
+    </g>
+    <g transform="rotate(120)">
+      <text  y="115" transform="rotate(-120 0 110)">50</text>
+    </g>
+    <g transform="rotate(150)">
+      <text y="115" transform="rotate(-150 0 110)">55</text>
+    </g>
+    <g transform="rotate(180)">
+      <text y="115" transform="rotate(-180 0 110)">00</text>
+    </g>
+  </g>
+</svg>
+<p>
+Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
+Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />
+</p>
+<script>
+
+const inputh = document.querySelector("input.heure");
+const inputm = document.querySelector("input.minute");
+const aiguilleh = document.getElementById("aiguilleh");
+const aigiullem = document.getElementById("aiguillem");
+
+function Show() {
+  aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
+  aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
+}
+
+inputm.oninput = Show;
+inputh.oninput = Show;
+
+
+</script>
+</body>
+</html>
--- a/exercices/horloge/solution.svg
+++ b/exercices/horloge/solution.svg
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-110 -150 450 320">
+  <defs> 
+    <line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
+	  <line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
+    <g id="bloc" viewbox="-100 -100 200 200">
+      <use href="#heure"/>
+      <use href="#minute" transform="rotate( 6)"/>
+      <use href="#minute" transform="rotate(12)"/>
+      <use href="#minute" transform="rotate(18)"/>
+      <use href="#minute" transform="rotate(24)"/>
+    </g>
+  </defs>
+  <!--<rect fill="yellow" x="-130" y="-150" width="450" height="310"/>-->
+  <use href="#bloc" transform="rotate(  0)"/>
+  <use href="#bloc" transform="rotate( 30)"/>
+  <use href="#bloc" transform="rotate( 60)"/>
+  <use href="#bloc" transform="rotate( 90)"/>
+  <use href="#bloc" transform="rotate(120)"/>
+  <use href="#bloc" transform="rotate(150)"/>
+  <use href="#bloc" transform="rotate(180)"/>
+  <use href="#bloc" transform="rotate(210)"/>
+  <use href="#bloc" transform="rotate(240)"/>
+  <use href="#bloc" transform="rotate(270)"/>
+  <use href="#bloc" transform="rotate(300)"/>
+  <use href="#bloc" transform="rotate(330)"/>
+
+  <line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" transform="rotate(192)"/>
+  <line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" transform="rotate(76)"/>
+  
+  <circle cx="0" cy="0" r="6" fill="black"/>
+  <g text-anchor="middle">
+    <g transform="rotate(210)">
+      <text y="70" transform="rotate(-210 0 65)">1</text>
+    </g>
+    <g transform="rotate(240)">
+      <text y="70" transform="rotate(-240 0 65)">2</text>
+    </g>
+    <g transform="rotate(270)">
+      <text y="70" transform="rotate(-270 0 65)">3</text>
+    </g>
+    <g transform="rotate(300)">
+      <text y="70" transform="rotate(-300 0 65)">4</text>
+    </g>
+    <g transform="rotate(330)">
+      <text y="70" transform="rotate(-330 0 65)">5</text>
+    </g>
+    <g transform="rotate(0)">
+      <text y="70" transform="rotate(-0 0 65)">6</text>
+    </g>
+    <g transform="rotate(30)">
+      <text y="70" transform="rotate(-30 0 65)">7</text>
+    </g>
+    <g transform="rotate(60)">
+      <text y="70" transform="rotate(-60 0 65)">8</text>
+    </g>
+    <g transform="rotate(90)">
+      <text y="70" transform="rotate(-90 0 65)">9</text>
+    </g>
+    <g transform="rotate(120)">
+      <text y="70" transform="rotate(-120 0 65)">10</text>
+    </g>
+    <g transform="rotate(150)">
+    <text y="70" transform="rotate(-150 0 65)">11</text>
+    </g>
+    <g transform="rotate(180)">
+      <text y="70" transform="rotate(-180 0 65)">12</text>
+    </g>
+    </g>
+    <g text-anchor="middle" font-size="12">
+    <g transform="rotate(210)">
+      <text  y="115" transform="rotate(-210 0 110)">5</text>
+    </g>
+    <g transform="rotate(240)">
+      <text  y="115" transform="rotate(-240 0 110)">10</text>
+    </g>
+    <g transform="rotate(270)">
+      <text  y="115" transform="rotate(-270 0 110)">15</text>
+    </g>
+    <g transform="rotate(300)">
+      <text  y="115" transform="rotate(-300 0 110)">20</text>
+    </g>
+    <g transform="rotate(330)">
+      <text  y="115" transform="rotate(-330 0 110)">25</text>
+    </g>
+    <g transform="rotate(  0)">
+      <text  y="115" >30</text>
+    </g>
+    <g transform="rotate( 30)">
+      <text  y="115" transform="rotate(-30 0 110)">35</text>
+    </g>
+    <g transform="rotate( 60)">
+      <text  y="115" transform="rotate(-60 0 110)">40</text>
+    </g>
+    <g transform="rotate( 90)">
+      <text  y="115" transform="rotate(-90 0 110)">45</text>
+    </g>
+    <g transform="rotate(120)">
+      <text  y="115" transform="rotate(-120 0 110)">50</text>
+    </g>
+    <g transform="rotate(150)">
+      <text y="115" transform="rotate(-150 0 110)">55</text>
+    </g>
+    <g transform="rotate(180)">
+      <text y="115" transform="rotate(-180 0 110)">00</text>
+    </g>
+  </g>
+  <g font-family="HelveticaNeueLTStd,Arial,sans-serif">
+  <text x="340" y="-120" font-size="26" text-anchor="end">
+    Apprendre à lire l'heure
+  </text>
+  <text x="340" y="10" font-size="32" text-anchor="end">Il est 
+    <tspan fill="#0092d4">2</tspan> h <tspan fill="#F07882">34</tspan></text>
+  <text x="60" y="135">La petite aiguille indique l'heure</text>
+  <text x="60" y="155">La grande aiguille indique les minutes</text>
+</g>
+</svg>
--- a/exercices/lion.jfif
+++ b/exercices/lion.jfif
--- a/exercices/logo/couper.png
+++ b/exercices/logo/couper.png
--- a/exercices/logo/extermites.png
+++ b/exercices/logo/extermites.png
--- a/exercices/logo/guitare.png
+++ b/exercices/logo/guitare.png
--- a/exercices/logo/index.md
+++ b/exercices/logo/index.md
@@ -0,0 +1,189 @@
+---
+layout: layouts/page.njk
+title: Création de logo
+---
+
+On vous demande de créer un logo à partir d'une image. Ce logo devra pouvoir être décliné suivant plusieurs schémas de couleurs. Vous décidez de le faire en SVG.
+
+## Le logo
+
+### Le cartouche
+
+Le cartouche est un anneau contenant du texte.
+
+### Dessiner l'anneau. 
+
+Maintenir la touche `ctrl` pour un cercle parfait sinon vous aurez une ellipse.\
+Fixer le rayon à 100 px.\
+Ne pas remplir le cercle (cliquer sur la croix rouge dans la palette de couleur tout en bas) et fixer le contour en noir (Shift + clic sur la couleur noire).\
+Régler l'épaisseur du contour à 1px (Menu Object – Fill and Stroke – Stroke Style)
+
+
+Dupliquer le cercle en place (Ctrl + C ; Ctrl + Alt + V).\
+Cliquer sur l'outil cercle pour retrouver les propriété et fixer le rayon à 75 px. 
+
+Sinon Pour accéder à toutes propriétés xml des l'objets : Menu Edit – XML Editor ou Shift + Ctrl + X.
+
+### Guide du texte
+
+Dupliquer encore une fois le cercle en place (Ctrl + C ; Ctrl + Alt + V)\
+Fixer le rayon à 87.5 px.
+
+Afficher la liste des objets (Menu Object – Objects …) Cacher le cercle de rayon 87.5 (cliquer sur l'œil)
+
+Sélectionner les 2 cercles restants à l'écran (100 et 75 px).\
+Faire une exclusion : L'objet au premier plan est soustrait à l'autre. 
+
+Nous avons maintenant un anneau.
+
+Remplir l'anneau de noir et supprimer le contour. (Menu Object - Fill and Stroke)
+
+### Texte
+
+Cacher l'anneau que vous venez de construire. 
+
+Afficher maintenant le cercle de rayon 87.5 px. Dupliquer le (copier-coller en place Crtl + C ; Ctrl + Alt + V)
+
+Écrire 2 textes à n'importe quel endroit de la page par exemple :\
+♬ Boutique de Guitare ♬\
+★ Depuis 1973 ★
+
+Police Century Gothic - Bold – taille 36 pt – Texte aligné au centre
+
+Sélectionner un texte et un cercle (Shift + Clic après la première sélection).\
+Positionner le texte sur le chemin (Menu Text – Put on Path)\
+Cacher le chemin et le texte.
+
+Sur le 2e cercle de 87.5px. Inverser son sens (Menu Path – Object to Path et Menu Path – Reverse). Rien n'est visible mais cela va permettre au texte d'être écrit dans l'autre sens.
+
+Sélectionner le 2e texte avec le 2e cercle et positionner le texte sur le chemin (Menu Text – Put on Path)
+
+Déplacer les textes le long de la circonférence du texte. Pour cela il faut effectuer une rotation du cercle support du texte.\
+Cliquer sur le cercle, les contours affiche les poignées de modification de la taille.\
+Cliquer une deuxième fois pour faire apparaitre les **poignées de rotation**. 
+
+![poignees](poignees.png)
+
+
+Éditer le texte, placer le curseur en tout début de la phrase (avec les flèches) et appuyer sur Alt flèche du haut ou Alt Flèche du bas pour positionner le texte verticalement et le centrer sur le cercle support.
+
+## La guitare
+
+Nous avons pour continuer notre logo, un modèle au format png. Importer le fichier [png](guitare.png) dans l'illustration. File – Import (Type d'importation Link)
+
+Transformer l'image au format bitmap en objet vectoriel (Menu Path – Trace Bitmap) Laisser les options par défaut Cliquer sur update puis sur Apply si le résultat est satisfaisant.
+
+Vous pouvez supprimer l'image depuis la liste des objets
+
+Redimensionner la guitare en appuyant sur Ctrl pour conserver les proportions.
+
+Cliquer une deuxième fois pour activer les poignées de rotation. Effectuer une légère rotation de la guitare.
+
+N'oubliez de nommer les objets dans le panneau des objets
+
+Dupliquer l'anneau. Sélectionner la copie et la guitare faire une soustraction
+Attention à l'ordre des objets (l'anneau doit être avant la guitare). Utiliser les flêche du panneau Objets pour déplacer les objets vers le haut ou vers le bas.\
+Menu Path – Difference
+
+La guitare est découpée suivant l'anneau mais nous voulons que le manche soit complet
+
+### Recoller le manche
+
+Sélectionner les 4 points des 2 extrémités du manche.\
+Couper le path ![](couper.png) à ces 4 points. Les chemins sont coupés en 2 segments et sont toujours présents. 
+
+![](extermites.png)
+
+Supprimer les segments des extrémités 
+
+![](segments.png)
+
+Sélectionner 2 points de chaque partie et joindre les points avec un segment ![](joindre.png). Faire cela pour les 2 côtés.
+
+Décomposer la guitare en éléments constitutifs Menu Path Break Apart
+
+Réorganiser les objets car certains sont invisible. Remplir de couleur certaines parties pour qu'elles apparaissent
+
+![logo](logo.png)
+
+Couleurs utilisées :
+Anneau : remplissage #8fcdcc ;  contour 3px #fbebd1\
+Guitare : remplissage #384d6c ;  contour 3px #fbebd1\
+Plaque de protection : remplissage #fbebd1\
+Texte : remplissage #384d6c
+
+## utilisation dans une page
+
+Modifier les propriété du document pour que la page englobe bien le logo.\
+File - Document Properties
+
+Sauvegarder le fichier au format SVG
+
+Créer une page html
+
+Ajouter le code du logo dans une définition de symbole. N'ajouter que la partie utile du svg.
+Pour le viewBox du symbole vous devez reprendre le viewBox du document.
+Le SVG contenant la définition n'a pas à être visible. Régler sa taille à 0
+
+```svg
+<svg width="0" height="0">
+  <defs>
+    <symbol id="logo" viewBox=0 0 212 318">
+      <path d="M 104.1688
+    ...
+    </symbol>
+  </defs>
+</svg>
+```
+Ajouter un deuxième bloc SVG celui-ci servira à l'affichage de notre logo
+
+```svg
+<svg width="750" height="800">
+  <use href="#logo" width="250" height="500" x="0"/>
+  <use href="#logo" width="250" height="500" x="250"/>
+  <use href="#logo" width="250" height="500" x="500"/>
+</svg>
+```
+
+Retirer un style de remplissage de tous les éléments du symbole et ajouter le directement sur la balise use
+
+```svg
+<path style="fill:#384d6c;stroke-width:0.37352">
+<path style="stroke-width:0.37352">
+```
+
+```svg
+<use href="#logo" fill="#384d6c" />
+```
+
+Procéder de la même manière pour la propriété stroke
+
+```svg
+<path style="stroke:#fbebd1;stroke-width:0.37352">
+<path style="stroke-width:0.37352">
+```
+
+```svg
+<use href="#logo" fill="#384d6c" stroke="#fbebd1" />
+```
+
+### Comment faire pour remplacer la 3e couleur ?
+
+Il existe une astuce qui fonctionne uniquement pour cette 3e couleur. Nous allons utiliser la propriété color qui sert pour l'html et le css mais qui n'est pas présente dans les spécification du svg
+
+Prendre la dernière couleur et remplacer la proprété par `currentColor`
+
+```svg
+<path style="fill:#8fcdcc;stroke-width:0.37352">
+<path style="fill:currentColor;stroke-width:0.37352">
+```
+
+Ajouter maintenant la propriété `color` sur la balise `use`
+
+```svg
+<use href="#logo" fill="#384d6c" stroke="#fbebd1" color="#8fcdcc" />
+```
+
+Utlisez un générateur de [palette](https://coolors.co/) pour colorier votre logo
+
+![réponse](reponse.png)
--- a/exercices/logo/joindre.png
+++ b/exercices/logo/joindre.png
--- a/exercices/logo/logo.png
+++ b/exercices/logo/logo.png
--- a/exercices/logo/logo.svg
+++ b/exercices/logo/logo.svg
@@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   sodipodi:docname="logo.svg"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   id="svg33768"
+   version="1.1"
+   viewBox="0 0 211.66673 317.50001"
+   height="1200"
+   width="800"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview33770"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:pageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="true"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.47055635"
+     inkscape:cx="463.28139"
+     inkscape:cy="738.48754"
+     inkscape:window-width="1680"
+     inkscape:window-height="997"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1"
+     width="211mm"
+     units="px" />
+  <defs
+     id="defs33765" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="path34102-3"
+       style="display:inline;fill:#8fcdcc;fill-opacity:1;stroke:#fbebd1;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 104.23504,110.47425 A 100,100 0 0 0 4.2349596,210.47435 100,100 0 0 0 104.23504,310.47444 100,100 0 0 0 204.23462,210.47435 100,100 0 0 0 104.23504,110.47425 Z m 0,25.00002 a 75,75 0 0 1 75.00008,75.00008 75,75 0 0 1 -75.00008,75.00007 75,75 0 0 1 -75.000057,-75.00007 75,75 0 0 1 75.000057,-75.00008 z" />
+    <path
+       style="display:inline;fill:#384d6c;fill-opacity:1;stroke:#fbebd1;stroke-width:3;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 151.40116,122.29781 c 1.80158,-4.26514 4.26943,-10.0602 6.6983,-15.69516 8.35991,-19.39459 14.44103,-34.054253 16.32097,-39.346438 1.00941,-2.841577 3.36242,-6.303719 5.40225,-7.948869 1.46934,-1.18504 3.55483,-1.799871 5.90868,-1.742011 l 1.55598,0.03824 1.56167,-4.078822 c 1.90607,-4.977905 2.72427,-8.891188 3.46852,-16.592267 0.61436,-6.356969 1.45299,-10.324838 2.45049,-11.593607 0.37639,-0.478761 2.01998,-1.196248 4.11345,-1.795757 5.55883,-1.591844 8.16049,-4.111 8.76587,-8.487854 0.33524,-2.423684 -0.36752,-5.1816006 -1.94148,-7.6196906 -0.8726,-1.351809 -1.29116,-1.643838 -4.23334,-2.958992 -2.27806,-1.018291 -3.05842,-1.319083 -4.14186,-1.293979 -0.36115,0.0084 -0.75604,0.05314 -1.25109,0.119372 -4.3135,0.577101 -6.53623,2.455587 -15.68793,13.2606926 -6.32213,7.464308 -21.96075,26.722808 -24.65638,30.363519 -1.68431,2.274692 -1.7561,2.440599 -1.7048,3.943429 0.0453,1.327484 0.43065,2.020081 2.50579,4.505667 2.75223,3.296586 3.51998,4.805619 3.50418,6.885368 -0.0159,2.094815 -3.87912,11.155479 -11.13576,26.116753 -4.539,9.358215 -8.84197,18.342936 -13.0638,27.254666 l -10.69082,22.82186 c -1.34055,2.89142 -2.67861,5.76501 -4.02663,8.6956 -4.67911,10.17236 -9.37447,20.118 -10.43398,22.10149 l -1.92599,3.6065 -1.98437,0.68006 c -1.72964,0.59299 -2.19415,0.58601 -3.61683,-0.0517 -3.240527,-1.45304 -5.039973,-3.60982 -5.837363,-6.99647 -0.68649,-2.91559 -0.34811,-5.68341 1.5906,-13.00179 2.357373,-8.89882 2.476383,-10.52474 0.893476,-12.1977 -0.874616,-0.92439 -3.091926,-1.74361 -5.722646,-2.1146 -3.30275,-0.46578 -8.350326,2.60985 -11.794108,7.18664 -6.906903,9.17929 -9.130742,15.70744 -10.849467,31.8518 -1.13102,10.62397 -2.014895,14.64379 -4.389395,19.95589 -3.356311,7.50854 -6.235602,11.07514 -14.69626,18.20302 -9.707893,8.17864 -15.231494,14.02551 -18.290357,20.08043 10.853179,29.3935 38.835226,48.94244 70.16832,49.0213 7.65143,-0.01 15.2563,-1.19059 22.55056,-3.50108 0.23575,-0.46303 0.45374,-0.88014 0.73225,-1.45056 4.19435,-8.59031 4.85849,-13.24549 4.16874,-29.23129 -0.62807,-14.55622 -0.56318,-15.53387 1.27072,-19.14095 1.25932,-2.47694 1.92548,-3.27423 6.17947,-7.39593 6.34066,-6.14343 8.39371,-8.74629 10.89546,-13.81208 2.28989,-4.63679 3.30179,-8.08848 3.28249,-11.19828 -0.0149,-2.39269 -0.97313,-5.68306 -2.0469,-7.02955 -1.99271,-2.49881 -3.86496,-1.78745 -7.74062,2.94039 -5.64969,6.89195 -8.36282,8.11874 -14.81615,6.69985 -3.41218,-0.75023 -6.94061,-2.51898 -7.84913,-3.93516 -0.34323,-0.53503 -0.59764,-1.45864 -0.56534,-2.05207 0.0331,-0.60935 2.06332,-5.79197 4.66432,-11.9078 2.53303,-5.95606 6.28059,-14.77567 8.32765,-19.5988 1.92684,-4.53998 5.53729,-12.98879 8.28787,-19.40192 z"
+       id="path57386" />
+    <path
+       style="display:inline;fill:#8fcdcc;fill-opacity:1;stroke-width:0.37352"
+       d="m 98.987826,179.06644 c 1.186294,-0.0227 2.564984,0.69733 3.994584,2.10943 l 1.63194,1.61231 -2.65668,5.94279 -2.656684,5.9433 8.866124,3.96307 8.86612,3.96306 0.77825,-1.74149 c 0.68047,-1.52231 0.8404,-1.67765 1.26866,-1.23558 0.26946,0.27816 1.77748,1.53803 3.35121,2.79983 4.89594,3.9255 8.83224,4.73199 14.27045,2.92385 3.8223,-1.27087 7.04324,-4.26652 11.57914,-10.76989 1.04125,-1.49291 1.93962,0.081 1.97042,3.4525 0.0163,1.80167 -0.21473,2.55391 -1.98644,6.46163 -2.45512,5.4149 -3.74323,7.06022 -11.24376,14.36088 -6.65368,6.47638 -7.50704,7.58909 -9.12192,11.89384 -1.65633,4.41523 -1.93629,7.0484 -1.87689,17.64285 0.0747,13.31827 -0.96066,23.13482 -2.9037,27.53217 -0.80113,1.813 -1.37762,2.28111 -3.18172,2.58537 -3.07443,0.51851 -5.00536,-1.95538 -8.98239,-11.5073 -1.72999,-4.15502 -3.78362,-7.07055 -6.52829,-9.26869 -2.4458,-1.95876 -16.190803,-8.78034 -24.249673,-12.03492 -9.865633,-3.98426 -10.149785,-4.18029 -11.822017,-8.15299 -1.830152,-4.3479 -1.246085,-8.71772 1.913059,-14.30972 1.871173,-3.31215 2.968635,-4.59234 9.636622,-11.24376 6.56063,-6.54432 8.949776,-9.48291 11.103716,-13.65705 1.73229,-3.35701 4.19387,-10.85418 4.80487,-14.63373 0.44513,-2.75334 0.93828,-3.7972 2.05828,-4.35942 0.34757,-0.17448 0.72129,-0.26477 1.116719,-0.27234 z"
+       id="path60593" />
+    <path
+       style="display:inline;fill:#384d6c;fill-opacity:1;stroke-width:0.37352"
+       d="m 83.717445,228.85875 c -2.221939,-0.18303 -3.689598,3.52801 -1.939417,4.90409 0.436806,0.34345 3.531457,2.53238 6.877099,4.86431 3.34564,2.33194 6.5473,4.46823 7.11481,4.74699 1.04755,0.51465 2.59324,0.12265 3.568259,-0.90485 0.790864,-0.83346 0.733904,-2.76285 -0.1049,-3.54604 -0.425079,-0.3969 -3.851149,-2.8043 -7.613489,-5.34954 -5.08697,-3.44137 -7.11284,-4.64996 -7.902362,-4.71496 z"
+       id="path60599" />
+    <path
+       style="display:inline;fill:#384d6c;fill-opacity:1;stroke-width:0.37352"
+       d="m 89.952207,213.52894 c -0.13053,0.0105 -0.25023,0.035 -0.3731,0.0677 -1.47645,0.39326 -2.32131,2.31023 -1.74718,3.96565 l 0.42478,1.2237 8.07857,3.61115 c 7.656603,3.4225 8.141973,3.59544 9.292973,3.30626 1.54938,-0.3893 2.61118,-2.46184 2.0345,-3.97082 -0.35656,-0.93285 -0.8319,-1.18975 -8.694044,-4.70411 -6.665599,-2.97952 -8.102769,-3.57316 -9.016499,-3.49952 z"
+       id="path60597" />
+    <path
+       style="display:inline;fill:#384d6c;fill-opacity:1;stroke-width:0.37352"
+       d="m 98.355307,196.70619 -1.21077,0.46302 c -0.66613,0.25458 -1.35501,0.78424 -1.53066,1.17719 -0.40167,0.8986 -0.29733,2.99683 0.17312,3.48403 0.19551,0.20245 3.973416,2 8.395863,3.99458 7.64083,3.44614 8.10123,3.61171 9.25524,3.32177 1.5494,-0.3893 2.61119,-2.46184 2.03451,-3.97082 -0.35667,-0.93326 -0.83135,-1.19021 -8.74676,-4.7284 z"
+       id="path60595" />
+    <path
+       id="path34102-5"
+       style="display:none;fill:none;stroke:#000000;stroke-linejoin:round"
+       d="M 111.25815,18.14912 A 87.5,87.5 0 0 0 16.95635,98.271957 87.5,87.5 0 0 0 97.079177,192.57377 87.5,87.5 0 0 0 191.38099,112.45093 87.5,87.5 0 0 0 111.25815,18.14912 Z" />
+    <path
+       id="path34102-5-0"
+       style="display:none;fill:none;stroke:#000000;stroke-linejoin:round"
+       d="M 82.586028,190.1579 A 87.5,87.5 0 0 1 19.372212,83.778797 87.5,87.5 0 0 1 125.75131,20.564983 87.5,87.5 0 0 1 188.96513,126.94408 87.5,87.5 0 0 1 82.586028,190.1579 Z" />
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;display:inline;fill:#384d6c;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       id="text35037"
+       transform="translate(0.06622166,105.11282)"><textPath
+         xlink:href="#path34102-5-0"
+         startOffset="50%"
+         id="textPath48599"
+         style="font-size:12.7px;fill:#384d6c;fill-opacity:1"><tspan
+           id="tspan35035"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;fill:#384d6c;fill-opacity:1;stroke-width:0.264583"
+           dy="3.5783134">♬ Boutique de          Guitare ♬</tspan></textPath></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;display:inline;fill:#384d6c;fill-opacity:1;stroke:none;stroke-width:0.264583"
+       id="text35037-0"
+       transform="translate(0.06622166,105.11282)"><textPath
+         xlink:href="#path34102-5"
+         startOffset="50%"
+         id="textPath48621"
+         style="font-size:12.7px;fill:#384d6c;fill-opacity:1"><tspan
+           id="tspan35035-3"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;fill:#384d6c;fill-opacity:1;stroke-width:0.264583"
+           dy="4.3734941">★ Depuis 1973 ★</tspan></textPath></text>
+  </g>
+</svg>
--- a/exercices/logo/modèle.jpg
+++ b/exercices/logo/modèle.jpg
--- a/exercices/logo/poignees.png
+++ b/exercices/logo/poignees.png
--- a/exercices/logo/reponse.png
+++ b/exercices/logo/reponse.png
--- a/exercices/logo/reponse/reponse.md
+++ b/exercices/logo/reponse/reponse.md
@@ -0,0 +1,114 @@
+---
+layout: layouts/page.njk
+title: Création de logo - Solution
+---
+
+Mettre la guitare dans un symbole
+
+```svg
+ <svg width="0" height="0">
+    <defs>
+      <symbol id="logo" viewBox="0 0 212 318">
+        <path d="M 104.23504,110.47425 z" />
+     <path ... />
+```
+
+AJouter llorsque cela est nécessaire le remplissage avec la couleur courante
+
+```svg
+<path
+  style="fill:currentColor;stroke-width:3;"
+  d="M 104.23504,110.47425 A 100,100 0 0 0 4.2349596,210.47435 100 z" />
+<path
+  style="stroke-width:3;"
+  d="m 151.40116,122.29781 c 1.80158,-4.26514 4.26943,-10.0602 6.6983,-15.69516 8.35991,-19.39459 14.44103,-34.054253 16.z" />
+```
+
+Ajouter le symbole de la guitare dans le SVG à l'aide de la balise use
+
+```svg
+<use href="#logo" width="250" height="500"  />
+<use href="#logo" width="250" height="500" x="250" />
+<use href="#logo" width="250" height="500" x="500" />
+```
+
+Ajouter pour chaque symbole les couleurs de remplissage, de contour et courante.
+
+```svg
+<use href="#logo" width="250" height="500" fill="#384d6c" stroke="#fbebd1" color="#8fcdcc" />
+<use href="#logo" width="250" height="500" x="250" fill="#780000" stroke="#c1121f" color="#fdf0d5"/>
+<use href="#logo" width="250" height="500" x="500" fill="#ffc8dd" stroke="#ffafcc" color="#bde0fe"/>
+```
+
+## Le code complet
+
+Mais tout doit être fait avec Inkscape
+
+```svg
+<svg width="0" height="0">
+  <defs>
+    <symbol id="logo" viewBox="0 0 212 318">
+      <path
+      style="fill:currentColor;stroke-width:3;"
+      d="M 104.23504,110.47425 A 100,100 0 0 0 4.2349596,210.47435 100,100 0 0 0 104.23504,310.47444 100,100 0 0 0 204.23462,210.47435 100,100 0 0 0 104.23504,110.47425 Z m 0,25.00002 a 75,75 0 0 1 75.00008,75.00008 75,75 0 0 1 -75.00008,75.00007 75,75 0 0 1 -75.000057,-75.00007 75,75 0 0 1 75.000057,-75.00008 z" />
+    <path
+      style="stroke-width:3;"
+      d="m 151.40116,122.29781 c 1.80158,-4.26514 4.26943,-10.0602 6.6983,-15.69516 8.35991,-19.39459 14.44103,-34.054253 16.32097,-39.346438 1.00941,-2.841577 3.36242,-6.303719 5.40225,-7.948869 1.46934,-1.18504 3.55483,-1.799871 5.90868,-1.742011 l 1.55598,0.03824 1.56167,-4.078822 c 1.90607,-4.977905 2.72427,-8.891188 3.46852,-16.592267 0.61436,-6.356969 1.45299,-10.324838 2.45049,-11.593607 0.37639,-0.478761 2.01998,-1.196248 4.11345,-1.795757 5.55883,-1.591844 8.16049,-4.111 8.76587,-8.487854 0.33524,-2.423684 -0.36752,-5.1816006 -1.94148,-7.6196906 -0.8726,-1.351809 -1.29116,-1.643838 -4.23334,-2.958992 -2.27806,-1.018291 -3.05842,-1.319083 -4.14186,-1.293979 -0.36115,0.0084 -0.75604,0.05314 -1.25109,0.119372 -4.3135,0.577101 -6.53623,2.455587 -15.68793,13.2606926 -6.32213,7.464308 -21.96075,26.722808 -24.65638,30.363519 -1.68431,2.274692 -1.7561,2.440599 -1.7048,3.943429 0.0453,1.327484 0.43065,2.020081 2.50579,4.505667 2.75223,3.296586 3.51998,4.805619 3.50418,6.885368 -0.0159,2.094815 -3.87912,11.155479 -11.13576,26.116753 -4.539,9.358215 -8.84197,18.342936 -13.0638,27.254666 l -10.69082,22.82186 c -1.34055,2.89142 -2.67861,5.76501 -4.02663,8.6956 -4.67911,10.17236 -9.37447,20.118 -10.43398,22.10149 l -1.92599,3.6065 -1.98437,0.68006 c -1.72964,0.59299 -2.19415,0.58601 -3.61683,-0.0517 -3.240527,-1.45304 -5.039973,-3.60982 -5.837363,-6.99647 -0.68649,-2.91559 -0.34811,-5.68341 1.5906,-13.00179 2.357373,-8.89882 2.476383,-10.52474 0.893476,-12.1977 -0.874616,-0.92439 -3.091926,-1.74361 -5.722646,-2.1146 -3.30275,-0.46578 -8.350326,2.60985 -11.794108,7.18664 -6.906903,9.17929 -9.130742,15.70744 -10.849467,31.8518 -1.13102,10.62397 -2.014895,14.64379 -4.389395,19.95589 -3.356311,7.50854 -6.235602,11.07514 -14.69626,18.20302 -9.707893,8.17864 -15.231494,14.02551 -18.290357,20.08043 10.853179,29.3935 38.835226,48.94244 70.16832,49.0213 7.65143,-0.01 15.2563,-1.19059 22.55056,-3.50108 0.23575,-0.46303 0.45374,-0.88014 0.73225,-1.45056 4.19435,-8.59031 4.85849,-13.24549 4.16874,-29.23129 -0.62807,-14.55622 -0.56318,-15.53387 1.27072,-19.14095 1.25932,-2.47694 1.92548,-3.27423 6.17947,-7.39593 6.34066,-6.14343 8.39371,-8.74629 10.89546,-13.81208 2.28989,-4.63679 3.30179,-8.08848 3.28249,-11.19828 -0.0149,-2.39269 -0.97313,-5.68306 -2.0469,-7.02955 -1.99271,-2.49881 -3.86496,-1.78745 -7.74062,2.94039 -5.64969,6.89195 -8.36282,8.11874 -14.81615,6.69985 -3.41218,-0.75023 -6.94061,-2.51898 -7.84913,-3.93516 -0.34323,-0.53503 -0.59764,-1.45864 -0.56534,-2.05207 0.0331,-0.60935 2.06332,-5.79197 4.66432,-11.9078 2.53303,-5.95606 6.28059,-14.77567 8.32765,-19.5988 1.92684,-4.53998 5.53729,-12.98879 8.28787,-19.40192 z"
+        />
+    <path
+      style="fill:currentColor;stroke-width:0.37352"
+      d="m 98.987826,179.06644 c 1.186294,-0.0227 2.564984,0.69733 3.994584,2.10943 l 1.63194,1.61231 -2.65668,5.94279 -2.656684,5.9433 8.866124,3.96307 8.86612,3.96306 0.77825,-1.74149 c 0.68047,-1.52231 0.8404,-1.67765 1.26866,-1.23558 0.26946,0.27816 1.77748,1.53803 3.35121,2.79983 4.89594,3.9255 8.83224,4.73199 14.27045,2.92385 3.8223,-1.27087 7.04324,-4.26652 11.57914,-10.76989 1.04125,-1.49291 1.93962,0.081 1.97042,3.4525 0.0163,1.80167 -0.21473,2.55391 -1.98644,6.46163 -2.45512,5.4149 -3.74323,7.06022 -11.24376,14.36088 -6.65368,6.47638 -7.50704,7.58909 -9.12192,11.89384 -1.65633,4.41523 -1.93629,7.0484 -1.87689,17.64285 0.0747,13.31827 -0.96066,23.13482 -2.9037,27.53217 -0.80113,1.813 -1.37762,2.28111 -3.18172,2.58537 -3.07443,0.51851 -5.00536,-1.95538 -8.98239,-11.5073 -1.72999,-4.15502 -3.78362,-7.07055 -6.52829,-9.26869 -2.4458,-1.95876 -16.190803,-8.78034 -24.249673,-12.03492 -9.865633,-3.98426 -10.149785,-4.18029 -11.822017,-8.15299 -1.830152,-4.3479 -1.246085,-8.71772 1.913059,-14.30972 1.871173,-3.31215 2.968635,-4.59234 9.636622,-11.24376 6.56063,-6.54432 8.949776,-9.48291 11.103716,-13.65705 1.73229,-3.35701 4.19387,-10.85418 4.80487,-14.63373 0.44513,-2.75334 0.93828,-3.7972 2.05828,-4.35942 0.34757,-0.17448 0.72129,-0.26477 1.116719,-0.27234 z"
+        />
+    <path
+      style="stroke-width:0.37352"
+      d="m 83.717445,228.85875 c -2.221939,-0.18303 -3.689598,3.52801 -1.939417,4.90409 0.436806,0.34345 3.531457,2.53238 6.877099,4.86431 3.34564,2.33194 6.5473,4.46823 7.11481,4.74699 1.04755,0.51465 2.59324,0.12265 3.568259,-0.90485 0.790864,-0.83346 0.733904,-2.76285 -0.1049,-3.54604 -0.425079,-0.3969 -3.851149,-2.8043 -7.613489,-5.34954 -5.08697,-3.44137 -7.11284,-4.64996 -7.902362,-4.71496 z"
+      id="path60599" />
+    <path
+      style="stroke-width:0.37352"
+      d="m 89.952207,213.52894 c -0.13053,0.0105 -0.25023,0.035 -0.3731,0.0677 -1.47645,0.39326 -2.32131,2.31023 -1.74718,3.96565 l 0.42478,1.2237 8.07857,3.61115 c 7.656603,3.4225 8.141973,3.59544 9.292973,3.30626 1.54938,-0.3893 2.61118,-2.46184 2.0345,-3.97082 -0.35656,-0.93285 -0.8319,-1.18975 -8.694044,-4.70411 -6.665599,-2.97952 -8.102769,-3.57316 -9.016499,-3.49952 z"
+      id="path60597" />
+    <path
+      style="stroke-width:0.37352"
+      d="m 98.355307,196.70619 -1.21077,0.46302 c -0.66613,0.25458 -1.35501,0.78424 -1.53066,1.17719 -0.40167,0.8986 -0.29733,2.99683 0.17312,3.48403 0.19551,0.20245 3.973416,2 8.395863,3.99458 7.64083,3.44614 8.10123,3.61171 9.25524,3.32177 1.5494,-0.3893 2.61119,-2.46184 2.03451,-3.97082 -0.35667,-0.93326 -0.83135,-1.19021 -8.74676,-4.7284 z"
+        />
+    <path
+      id="path34102-5"
+      style="display:none;fill:none"
+      d="M 111.25815,18.14912 A 87.5,87.5 0 0 0 16.95635,98.271957 87.5,87.5 0 0 0 97.079177,192.57377 87.5,87.5 0 0 0 191.38099,112.45093 87.5,87.5 0 0 0 111.25815,18.14912 Z" />
+    <path
+      id="path34102-5-0"
+      style="display:none;fill:none"
+      d="M 82.586028,190.1579 A 87.5,87.5 0 0 1 19.372212,83.778797 87.5,87.5 0 0 1 125.75131,20.564983 87.5,87.5 0 0 1 188.96513,126.94408 87.5,87.5 0 0 1 82.586028,190.1579 Z" />
+    <text
+      style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.264583"
+      id="text35037"
+      transform="translate(0.06622166,105.11282)"><textPath
+        xlink:href="#path34102-5-0"
+        startOffset="50%"
+        id="textPath48599"
+        style="font-size:12.7px;"><tspan
+          id="tspan35035"
+          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;stroke-width:0.264583"
+          dy="3.5783134">♬ Boutique de          Guitare ♬</tspan></textPath></text>
+    <text
+      xml:space="preserve"
+      style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.264583"
+      id="text35037-0"
+      transform="translate(0.06622166,105.11282)"><textPath
+        xlink:href="#path34102-5"
+        startOffset="50%"
+        id="textPath48621"
+        style="font-size:12.7px;"><tspan
+          id="tspan35035-3"
+          style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;stroke-width:0.264583"
+          dy="4.3734941">★ Depuis 1973 ★</tspan></textPath></text>
+
+    </symbol>
+  </defs>
+</svg>
+<svg width="750" height="800">
+  <use href="#logo" width="250" height="500" fill="#384d6c" stroke="#fbebd1" color="#8fcdcc" />
+  <use href="#logo" width="250" height="500" x="250" fill="#780000" stroke="#c1121f" color="#fdf0d5"/>
+  <use href="#logo" width="250" height="500" x="500" fill="#ffc8dd" stroke="#ffafcc" color="#bde0fe"/>
+</svg>
+```
--- a/exercices/logo/reponse/solution.html
+++ b/exercices/logo/reponse/solution.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Logo</title>
+</head>
+<body>
+  <svg width="0" height="0">
+    <defs>
+      <symbol id="logo" viewBox="0 0 212 318">
+        <path
+        style="fill:currentColor;stroke-width:3;"
+        d="M 104.23504,110.47425 A 100,100 0 0 0 4.2349596,210.47435 100,100 0 0 0 104.23504,310.47444 100,100 0 0 0 204.23462,210.47435 100,100 0 0 0 104.23504,110.47425 Z m 0,25.00002 a 75,75 0 0 1 75.00008,75.00008 75,75 0 0 1 -75.00008,75.00007 75,75 0 0 1 -75.000057,-75.00007 75,75 0 0 1 75.000057,-75.00008 z" />
+     <path
+        style="stroke-width:3;"
+        d="m 151.40116,122.29781 c 1.80158,-4.26514 4.26943,-10.0602 6.6983,-15.69516 8.35991,-19.39459 14.44103,-34.054253 16.32097,-39.346438 1.00941,-2.841577 3.36242,-6.303719 5.40225,-7.948869 1.46934,-1.18504 3.55483,-1.799871 5.90868,-1.742011 l 1.55598,0.03824 1.56167,-4.078822 c 1.90607,-4.977905 2.72427,-8.891188 3.46852,-16.592267 0.61436,-6.356969 1.45299,-10.324838 2.45049,-11.593607 0.37639,-0.478761 2.01998,-1.196248 4.11345,-1.795757 5.55883,-1.591844 8.16049,-4.111 8.76587,-8.487854 0.33524,-2.423684 -0.36752,-5.1816006 -1.94148,-7.6196906 -0.8726,-1.351809 -1.29116,-1.643838 -4.23334,-2.958992 -2.27806,-1.018291 -3.05842,-1.319083 -4.14186,-1.293979 -0.36115,0.0084 -0.75604,0.05314 -1.25109,0.119372 -4.3135,0.577101 -6.53623,2.455587 -15.68793,13.2606926 -6.32213,7.464308 -21.96075,26.722808 -24.65638,30.363519 -1.68431,2.274692 -1.7561,2.440599 -1.7048,3.943429 0.0453,1.327484 0.43065,2.020081 2.50579,4.505667 2.75223,3.296586 3.51998,4.805619 3.50418,6.885368 -0.0159,2.094815 -3.87912,11.155479 -11.13576,26.116753 -4.539,9.358215 -8.84197,18.342936 -13.0638,27.254666 l -10.69082,22.82186 c -1.34055,2.89142 -2.67861,5.76501 -4.02663,8.6956 -4.67911,10.17236 -9.37447,20.118 -10.43398,22.10149 l -1.92599,3.6065 -1.98437,0.68006 c -1.72964,0.59299 -2.19415,0.58601 -3.61683,-0.0517 -3.240527,-1.45304 -5.039973,-3.60982 -5.837363,-6.99647 -0.68649,-2.91559 -0.34811,-5.68341 1.5906,-13.00179 2.357373,-8.89882 2.476383,-10.52474 0.893476,-12.1977 -0.874616,-0.92439 -3.091926,-1.74361 -5.722646,-2.1146 -3.30275,-0.46578 -8.350326,2.60985 -11.794108,7.18664 -6.906903,9.17929 -9.130742,15.70744 -10.849467,31.8518 -1.13102,10.62397 -2.014895,14.64379 -4.389395,19.95589 -3.356311,7.50854 -6.235602,11.07514 -14.69626,18.20302 -9.707893,8.17864 -15.231494,14.02551 -18.290357,20.08043 10.853179,29.3935 38.835226,48.94244 70.16832,49.0213 7.65143,-0.01 15.2563,-1.19059 22.55056,-3.50108 0.23575,-0.46303 0.45374,-0.88014 0.73225,-1.45056 4.19435,-8.59031 4.85849,-13.24549 4.16874,-29.23129 -0.62807,-14.55622 -0.56318,-15.53387 1.27072,-19.14095 1.25932,-2.47694 1.92548,-3.27423 6.17947,-7.39593 6.34066,-6.14343 8.39371,-8.74629 10.89546,-13.81208 2.28989,-4.63679 3.30179,-8.08848 3.28249,-11.19828 -0.0149,-2.39269 -0.97313,-5.68306 -2.0469,-7.02955 -1.99271,-2.49881 -3.86496,-1.78745 -7.74062,2.94039 -5.64969,6.89195 -8.36282,8.11874 -14.81615,6.69985 -3.41218,-0.75023 -6.94061,-2.51898 -7.84913,-3.93516 -0.34323,-0.53503 -0.59764,-1.45864 -0.56534,-2.05207 0.0331,-0.60935 2.06332,-5.79197 4.66432,-11.9078 2.53303,-5.95606 6.28059,-14.77567 8.32765,-19.5988 1.92684,-4.53998 5.53729,-12.98879 8.28787,-19.40192 z"
+         />
+     <path
+        style="fill:currentColor;stroke-width:0.37352"
+        d="m 98.987826,179.06644 c 1.186294,-0.0227 2.564984,0.69733 3.994584,2.10943 l 1.63194,1.61231 -2.65668,5.94279 -2.656684,5.9433 8.866124,3.96307 8.86612,3.96306 0.77825,-1.74149 c 0.68047,-1.52231 0.8404,-1.67765 1.26866,-1.23558 0.26946,0.27816 1.77748,1.53803 3.35121,2.79983 4.89594,3.9255 8.83224,4.73199 14.27045,2.92385 3.8223,-1.27087 7.04324,-4.26652 11.57914,-10.76989 1.04125,-1.49291 1.93962,0.081 1.97042,3.4525 0.0163,1.80167 -0.21473,2.55391 -1.98644,6.46163 -2.45512,5.4149 -3.74323,7.06022 -11.24376,14.36088 -6.65368,6.47638 -7.50704,7.58909 -9.12192,11.89384 -1.65633,4.41523 -1.93629,7.0484 -1.87689,17.64285 0.0747,13.31827 -0.96066,23.13482 -2.9037,27.53217 -0.80113,1.813 -1.37762,2.28111 -3.18172,2.58537 -3.07443,0.51851 -5.00536,-1.95538 -8.98239,-11.5073 -1.72999,-4.15502 -3.78362,-7.07055 -6.52829,-9.26869 -2.4458,-1.95876 -16.190803,-8.78034 -24.249673,-12.03492 -9.865633,-3.98426 -10.149785,-4.18029 -11.822017,-8.15299 -1.830152,-4.3479 -1.246085,-8.71772 1.913059,-14.30972 1.871173,-3.31215 2.968635,-4.59234 9.636622,-11.24376 6.56063,-6.54432 8.949776,-9.48291 11.103716,-13.65705 1.73229,-3.35701 4.19387,-10.85418 4.80487,-14.63373 0.44513,-2.75334 0.93828,-3.7972 2.05828,-4.35942 0.34757,-0.17448 0.72129,-0.26477 1.116719,-0.27234 z"
+         />
+     <path
+        style="stroke-width:0.37352"
+        d="m 83.717445,228.85875 c -2.221939,-0.18303 -3.689598,3.52801 -1.939417,4.90409 0.436806,0.34345 3.531457,2.53238 6.877099,4.86431 3.34564,2.33194 6.5473,4.46823 7.11481,4.74699 1.04755,0.51465 2.59324,0.12265 3.568259,-0.90485 0.790864,-0.83346 0.733904,-2.76285 -0.1049,-3.54604 -0.425079,-0.3969 -3.851149,-2.8043 -7.613489,-5.34954 -5.08697,-3.44137 -7.11284,-4.64996 -7.902362,-4.71496 z"
+        id="path60599" />
+     <path
+        style="stroke-width:0.37352"
+        d="m 89.952207,213.52894 c -0.13053,0.0105 -0.25023,0.035 -0.3731,0.0677 -1.47645,0.39326 -2.32131,2.31023 -1.74718,3.96565 l 0.42478,1.2237 8.07857,3.61115 c 7.656603,3.4225 8.141973,3.59544 9.292973,3.30626 1.54938,-0.3893 2.61118,-2.46184 2.0345,-3.97082 -0.35656,-0.93285 -0.8319,-1.18975 -8.694044,-4.70411 -6.665599,-2.97952 -8.102769,-3.57316 -9.016499,-3.49952 z"
+        id="path60597" />
+     <path
+        style="stroke-width:0.37352"
+        d="m 98.355307,196.70619 -1.21077,0.46302 c -0.66613,0.25458 -1.35501,0.78424 -1.53066,1.17719 -0.40167,0.8986 -0.29733,2.99683 0.17312,3.48403 0.19551,0.20245 3.973416,2 8.395863,3.99458 7.64083,3.44614 8.10123,3.61171 9.25524,3.32177 1.5494,-0.3893 2.61119,-2.46184 2.03451,-3.97082 -0.35667,-0.93326 -0.83135,-1.19021 -8.74676,-4.7284 z"
+         />
+     <path
+        id="path34102-5"
+        style="display:none;fill:none"
+        d="M 111.25815,18.14912 A 87.5,87.5 0 0 0 16.95635,98.271957 87.5,87.5 0 0 0 97.079177,192.57377 87.5,87.5 0 0 0 191.38099,112.45093 87.5,87.5 0 0 0 111.25815,18.14912 Z" />
+     <path
+        id="path34102-5-0"
+        style="display:none;fill:none"
+        d="M 82.586028,190.1579 A 87.5,87.5 0 0 1 19.372212,83.778797 87.5,87.5 0 0 1 125.75131,20.564983 87.5,87.5 0 0 1 188.96513,126.94408 87.5,87.5 0 0 1 82.586028,190.1579 Z" />
+     <text
+        xml:space="preserve"
+        style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.264583"
+        id="text35037"
+        transform="translate(0.06622166,105.11282)"><textPath
+          xlink:href="#path34102-5-0"
+          startOffset="50%"
+          id="textPath48599"
+          style="font-size:12.7px;"><tspan
+            id="tspan35035"
+            style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;stroke-width:0.264583"
+            dy="3.5783134">♬ Boutique de          Guitare ♬</tspan></textPath></text>
+     <text
+        xml:space="preserve"
+        style="font-style:normal;font-weight:normal;font-size:12.7px;line-height:1.25;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.264583"
+        id="text35037-0"
+        transform="translate(0.06622166,105.11282)"><textPath
+          xlink:href="#path34102-5"
+          startOffset="50%"
+          id="textPath48621"
+          style="font-size:12.7px;"><tspan
+            id="tspan35035-3"
+            style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:12.7px;font-family:'Century Gothic';-inkscape-font-specification:'Century Gothic Bold';text-align:center;text-anchor:middle;stroke-width:0.264583"
+            dy="4.3734941">★ Depuis 1973 ★</tspan></textPath></text>
+  
+      </symbol>
+    </defs>
+  </svg>
+  <svg width="750" height="800">
+    <use href="#logo" width="250" height="500" fill="#384d6c" stroke="#fbebd1" color="#8fcdcc" />
+    <use href="#logo" width="250" height="500" x="250" fill="#780000" stroke="#c1121f" color="#fdf0d5"/>
+    <use href="#logo" width="250" height="500" x="500" fill="#ffc8dd" stroke="#ffafcc" color="#bde0fe"/>
+  </svg>
+</body>
+</html>
--- a/exercices/logo/segments.png
+++ b/exercices/logo/segments.png
--- a/exercices/page.html
+++ b/exercices/page.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+<title>SVG</title>
+</head>
+<body>
+	<h1>Mon dessin</h1>
+	<img src="dessin.svg">
+</body>
+</html>
--- a/exercices/page2.html
+++ b/exercices/page2.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+<head>
+<title>SVG</title>
+<style>
+#box {
+	background: url(dessin.svg);
+	background-size: cover;
+	width: 300px;
+	height: 300px;
+}
+</style>
+</head>
+<body>
+	<h1>Mon dessin</h1>
+	<div id="box"></div>
+</body>
+</html>
--- a/exercices/page3.html
+++ b/exercices/page3.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+<title>SVG</title>
+<style>
+	.rose { fill: pink; }
+</style>
+</head>
+<body>
+	<h1>Mon dessin</h1>
+	<svg>
+	<g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       id="rect10"
+	   class="rose"
+       width="103.16604"
+       height="70.02462"
+       x="16.570711"
+       y="21.177847"
+       style="stroke-width:0.26458332" />
+    <ellipse
+       id="path12"
+       cx="119.20221"
+       cy="102.69505"
+       rx="41.694046"
+       ry="33.94323"
+       style="stroke-width:0.26458332;fill:#d35f5f" />
+  </g>
+  </svg>
+<script>
+setInterval(function() { 
+document.getElementById("path12").setAttribute("cx", 
+parseInt(document.getElementById("path12").getAttribute("cx")) + 10)
+}, 500);
+</script>
+  </body>
+</html>
--- a/exercices/paysage.jpg
+++ b/exercices/paysage.jpg
--- a/Show More
+++ b/Show More