summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMartial Simon <msimon_fr@hotmail.com>2024-08-15 18:25:10 +0200
committerMartial Simon <msimon_fr@hotmail.com>2024-08-15 18:25:10 +0200
commit0b789f49b1a242a3e06eb79b33f7ed7fd94550d5 (patch)
tree8ddaea069977d960adcaaf275a9ea4e53f18bd04
parentc4fb17fe6f55bdd48d69e5e2fbe68b21aac6b1d4 (diff)
feat: finished the Web Revival section
-rw-r--r--img/flowchart music.drawio207
-rw-r--r--img/music flowchart.svg1
-rw-r--r--index.html26
-rw-r--r--style.css9
4 files changed, 241 insertions, 2 deletions
diff --git a/img/flowchart music.drawio b/img/flowchart music.drawio
new file mode 100644
index 0000000..fc7f39a
--- /dev/null
+++ b/img/flowchart music.drawio
@@ -0,0 +1,207 @@
+<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0" version="24.7.6">
+ <diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">
+ <mxGraphModel dx="1517" dy="377" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+ <root>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-0" />
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-1" parent="WIyWlLk6GJQsqaUBKTNV-0" />
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-2" value="" style="rounded=0;html=1;jettySize=auto;orthogonalLoop=1;fontSize=11;endArrow=classic;endFill=1;endSize=8;strokeWidth=1;shadow=0;labelBackgroundColor=none;edgeStyle=orthogonalEdgeStyle;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="WIyWlLk6GJQsqaUBKTNV-3" target="WIyWlLk6GJQsqaUBKTNV-6" edge="1">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-3" value="Album des Beatles" style="rounded=1;whiteSpace=wrap;html=1;fontSize=12;glass=0;strokeWidth=1;shadow=0;arcSize=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+ <mxGeometry x="160" y="80" width="120" height="40" as="geometry" />
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-4" value="Oui" style="rounded=0;html=1;jettySize=auto;orthogonalLoop=1;fontSize=11;endArrow=classic;endFill=1;endSize=8;strokeWidth=1;shadow=0;labelBackgroundColor=none;edgeStyle=orthogonalEdgeStyle;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="WIyWlLk6GJQsqaUBKTNV-6" target="WIyWlLk6GJQsqaUBKTNV-10" edge="1">
+ <mxGeometry y="20" relative="1" as="geometry">
+ <mxPoint as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-5" value="&lt;div&gt;Non&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;fontSize=11;endArrow=classic;endFill=1;endSize=8;strokeWidth=1;shadow=0;labelBackgroundColor=none;entryX=1;entryY=0.5;entryDx=0;entryDy=0;exitX=1;exitY=0;exitDx=0;exitDy=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="WIyWlLk6GJQsqaUBKTNV-6" target="5niXAWvAoySI-JjVDqC7-0" edge="1">
+ <mxGeometry y="10" relative="1" as="geometry">
+ <mxPoint as="offset" />
+ <mxPoint x="320" y="210" as="targetPoint" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-6" value="Energisé•e•s ?" style="rhombus;whiteSpace=wrap;html=1;shadow=0;fontFamily=Helvetica;fontSize=12;align=center;strokeWidth=1;spacing=6;spacingTop=-4;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+ <mxGeometry x="170" y="170" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-8" value="Non" style="rounded=0;html=1;jettySize=auto;orthogonalLoop=1;fontSize=11;endArrow=classic;endFill=1;endSize=8;strokeWidth=1;shadow=0;labelBackgroundColor=none;edgeStyle=orthogonalEdgeStyle;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="WIyWlLk6GJQsqaUBKTNV-10" target="5niXAWvAoySI-JjVDqC7-7" edge="1">
+ <mxGeometry x="0.3333" y="20" relative="1" as="geometry">
+ <mxPoint as="offset" />
+ <mxPoint x="220" y="430" as="targetPoint" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-9" value="Oui" style="edgeStyle=orthogonalEdgeStyle;rounded=0;html=1;jettySize=auto;orthogonalLoop=1;fontSize=11;endArrow=classic;endFill=1;endSize=8;strokeWidth=1;shadow=0;labelBackgroundColor=none;" parent="WIyWlLk6GJQsqaUBKTNV-1" source="WIyWlLk6GJQsqaUBKTNV-10" target="WIyWlLk6GJQsqaUBKTNV-12" edge="1">
+ <mxGeometry y="10" relative="1" as="geometry">
+ <mxPoint as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-10" value="&lt;div&gt;Envie de&lt;/div&gt;&lt;div&gt;danser ?&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;shadow=0;fontFamily=Helvetica;fontSize=12;align=center;strokeWidth=1;spacing=6;spacingTop=-4;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+ <mxGeometry x="170" y="290" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="WIyWlLk6GJQsqaUBKTNV-12" value="&lt;div&gt;&lt;u&gt;Blue Suede Shoes&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Elvis Presley&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;fontSize=12;glass=0;strokeWidth=1;shadow=0;arcSize=0;" parent="WIyWlLk6GJQsqaUBKTNV-1" vertex="1">
+ <mxGeometry x="320" y="310" width="120" height="40" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-2" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-0" target="5niXAWvAoySI-JjVDqC7-1">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-10" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-2">
+ <mxGeometry x="0.52" y="1" relative="1" as="geometry">
+ <mxPoint x="9" y="4" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-0" target="5niXAWvAoySI-JjVDqC7-3">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-9" value="&lt;div&gt;Non&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-4">
+ <mxGeometry x="-0.5" relative="1" as="geometry">
+ <mxPoint y="-10" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-0" value="&lt;div&gt;Envie&lt;/div&gt;&lt;div&gt;d&#39;énergie ?&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="10" y="120" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-31" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-1" target="5niXAWvAoySI-JjVDqC7-30">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-1" value="&lt;u&gt;Humility&lt;/u&gt;, Gorillaz" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry y="220" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-3" value="&lt;u&gt;Sea Change&lt;/u&gt;, Beck" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="-150" y="130" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-15" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-7" target="5niXAWvAoySI-JjVDqC7-14">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-16" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-15">
+ <mxGeometry x="-0.2" y="-1" relative="1" as="geometry">
+ <mxPoint y="9" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-19" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-7" target="5niXAWvAoySI-JjVDqC7-18">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-20" value="Non" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-19">
+ <mxGeometry x="-0.45" y="-1" relative="1" as="geometry">
+ <mxPoint x="-19" y="-1" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-7" value="&lt;div&gt;Envie de&lt;/div&gt;&lt;div&gt;bouger ?&lt;br&gt;&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="170" y="410" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-22" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-14" target="5niXAWvAoySI-JjVDqC7-21">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-23" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-22">
+ <mxGeometry x="-0.25" y="-3" relative="1" as="geometry">
+ <mxPoint y="7" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-25" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-14" target="5niXAWvAoySI-JjVDqC7-24">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-26" value="&lt;div&gt;Non&lt;/div&gt;" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-25">
+ <mxGeometry x="-0.2" y="3" relative="1" as="geometry">
+ <mxPoint x="7" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-14" value="&lt;div&gt;Envie de&lt;/div&gt;&lt;div&gt;casser des&lt;/div&gt;&lt;div&gt;trucs ?&lt;br&gt;&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="320" y="410" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-28" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-18" target="5niXAWvAoySI-JjVDqC7-27">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-29" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-28">
+ <mxGeometry x="-0.0857" y="2" relative="1" as="geometry">
+ <mxPoint y="13" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-34" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-18" target="5niXAWvAoySI-JjVDqC7-33">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-38" value="Non" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-34">
+ <mxGeometry x="-0.25" y="-4" relative="1" as="geometry">
+ <mxPoint x="14" y="5" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-18" value="&lt;div&gt;Envie de&lt;/div&gt;&lt;div&gt;rêver ?&lt;br&gt;&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="170" y="530" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-21" value="&lt;div&gt;&lt;u&gt;Hertz&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Amyl and The Sniffers&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;fontStyle=0" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="460" y="420" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-24" value="&lt;u&gt;1612&lt;/u&gt;, Vulfpeck" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="310" y="530" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-27" value="&lt;div&gt;&lt;u&gt;The Dark Side&lt;/u&gt;&lt;/div&gt;&lt;div&gt;&lt;u&gt;Of The Moon&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Pink Floyd&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry y="540" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-32" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-30" target="WIyWlLk6GJQsqaUBKTNV-10">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-30" value="&lt;u&gt;Lover Boy&lt;/u&gt;, Supertramp" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry y="300" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-36" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-33" target="5niXAWvAoySI-JjVDqC7-35">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-37" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-36">
+ <mxGeometry x="-0.3" y="-1" relative="1" as="geometry">
+ <mxPoint x="-4" y="9" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-49" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-33" target="5niXAWvAoySI-JjVDqC7-48">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-33" value="&lt;div&gt;Une soirée&lt;/div&gt;&lt;div&gt;romantique ?&lt;br&gt;&lt;/div&gt;" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="170" y="650" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-40" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-35" target="5niXAWvAoySI-JjVDqC7-39">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-35" value="&lt;div&gt;&lt;u&gt;The Red Album&lt;/u&gt; (Disque 1)&lt;/div&gt;&lt;div&gt;The Beatles&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="310" y="660" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-39" value="&lt;div&gt;&lt;u&gt;Nothing But The Best&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Frank Sinatra&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="470" y="660" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-51" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-48" target="5niXAWvAoySI-JjVDqC7-50">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-54" value="Oui" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-51">
+ <mxGeometry x="-0.15" relative="1" as="geometry">
+ <mxPoint y="-10" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-56" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-48" target="5niXAWvAoySI-JjVDqC7-55">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-61" value="Non" style="edgeLabel;html=1;align=center;verticalAlign=middle;resizable=0;points=[];" vertex="1" connectable="0" parent="5niXAWvAoySI-JjVDqC7-56">
+ <mxGeometry x="-0.3" y="2" relative="1" as="geometry">
+ <mxPoint x="8" as="offset" />
+ </mxGeometry>
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-48" value="Un réveil ?" style="rhombus;whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="170" y="770" width="100" height="80" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-53" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-50" target="5niXAWvAoySI-JjVDqC7-52">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-50" value="&lt;div&gt;&lt;u&gt;4 A.M.&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Herbie Hancock avec Jaco Pastorius&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="10" y="780" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-52" value="&lt;div&gt;&lt;u&gt;Portrait of Tracy&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Jaco Pastorius&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="-160" y="780" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-60" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" edge="1" parent="WIyWlLk6GJQsqaUBKTNV-1" source="5niXAWvAoySI-JjVDqC7-55" target="5niXAWvAoySI-JjVDqC7-59">
+ <mxGeometry relative="1" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-55" value="&lt;div&gt;De la musique pour&lt;/div&gt;&lt;div&gt;travailler alors&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="160" y="890" width="120" height="60" as="geometry" />
+ </mxCell>
+ <mxCell id="5niXAWvAoySI-JjVDqC7-59" value="&lt;div&gt;&lt;u&gt;Real Illusions: Reflections&lt;/u&gt;,&lt;/div&gt;&lt;div&gt;Steve Vai&lt;br&gt;&lt;/div&gt;" style="whiteSpace=wrap;html=1;" vertex="1" parent="WIyWlLk6GJQsqaUBKTNV-1">
+ <mxGeometry x="160" y="990" width="120" height="60" as="geometry" />
+ </mxCell>
+ </root>
+ </mxGraphModel>
+ </diagram>
+</mxfile>
diff --git a/img/music flowchart.svg b/img/music flowchart.svg
new file mode 100644
index 0000000..f9a9111
--- /dev/null
+++ b/img/music flowchart.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="752px" height="972px" viewBox="-0.5 -0.5 752 972"><defs/><g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-0"><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-1"><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-2"><g><path d="M 380 40 L 380 82.13" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 88.88 L 375.5 79.88 L 380 82.13 L 384.5 79.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-3"><g><rect x="320" y="0" width="120" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 20px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Album des Beatles</div></div></div></foreignObject><text x="380" y="24" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Album des Beatles</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-4"><g><path d="M 380 170 L 380 202.13" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 208.88 L 375.5 199.88 L 380 202.13 L 384.5 199.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 190px; margin-left: 400px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Oui</div></div></div></foreignObject><text x="400" y="193" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-5"><g><path d="M 405 110 L 300.04 110.04 L 300.04 80.04 L 277.87 80.01" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 271.12 80 L 280.12 75.51 L 277.87 80.01 L 280.11 84.51 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 120px; margin-left: 322px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;"><div>Non</div></div></div></div></foreignObject><text x="322" y="123" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-6"><g><path d="M 380 90 L 430 130 L 380 170 L 330 130 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 128px; margin-left: 335px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Energisé•e•s ?</div></div></div></foreignObject><text x="380" y="132" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Energisé•e•s ?</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-8"><g><path d="M 380 290 L 380 322.13" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 328.88 L 375.5 319.88 L 380 322.13 L 384.5 319.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 317px; margin-left: 400px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Non</div></div></div></foreignObject><text x="400" y="320" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-9"><g><path d="M 430 250 L 472.13 250" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 478.88 250 L 469.88 254.5 L 472.13 250 L 469.88 245.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 240px; margin-left: 455px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">Oui</div></div></div></foreignObject><text x="455" y="243" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-10"><g><path d="M 380 210 L 430 250 L 380 290 L 330 250 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 248px; margin-left: 335px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Envie de</div><div>danser ?</div></div></div></div></foreignObject><text x="380" y="252" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Envie de...</text></switch></g></g></g><g data-cell-id="WIyWlLk6GJQsqaUBKTNV-12"><g><rect x="480" y="230" width="120" height="40" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 250px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>Blue Suede Shoes</u>,</div><div>Elvis Presley<br /></div></div></div></div></foreignObject><text x="540" y="254" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Blue Suede Shoes,...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-2"><g><path d="M 220.04 119.97 L 220.04 140.04 L 220.04 120.04 L 220.04 133.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 220.04 138.88 L 216.54 131.88 L 220.04 133.63 L 223.54 131.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-10"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 130px; margin-left: 230px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="230" y="133" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-4"><g><path d="M 170 80 L 136.37 80" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 131.12 80 L 138.12 76.5 L 136.37 80 L 138.12 83.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-9"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 70px; margin-left: 160px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;"><div>Non</div></div></div></div></foreignObject><text x="160" y="74" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-0"><g><path d="M 220 40 L 270 80 L 220 120 L 170 80 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 80px; margin-left: 171px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Envie</div><div>d'énergie ?</div></div></div></div></foreignObject><text x="220" y="84" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Envie...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-31"><g><path d="M 220.04 200 L 220.04 220.04 L 220.04 200.04 L 220.04 213.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 220.04 218.88 L 216.54 211.88 L 220.04 213.63 L 223.54 211.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-1"><g><rect x="160" y="140" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 170px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><u>Humility</u>, Gorillaz</div></div></div></foreignObject><text x="220" y="174" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Humility, Gorillaz</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-3"><g><rect x="10" y="50" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 80px; margin-left: 11px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><u>Sea Change</u>, Beck</div></div></div></foreignObject><text x="70" y="84" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Sea Change, Beck</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-15"><g><path d="M 430 370 L 473.63 370" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 478.88 370 L 471.88 373.5 L 473.63 370 L 471.88 366.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-16"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 380px; margin-left: 450px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="450" y="384" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-19"><g><path d="M 380 410 L 380 443.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 448.88 L 376.5 441.88 L 380 443.63 L 383.5 441.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-20"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 421px; margin-left: 360px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Non</div></div></div></foreignObject><text x="360" y="424" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-7"><g><path d="M 380 330 L 430 370 L 380 410 L 330 370 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 370px; margin-left: 331px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Envie de</div><div>bouger ?<br /></div></div></div></div></foreignObject><text x="380" y="374" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Envie de...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-22"><g><path d="M 580 370 L 613.63 370" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 618.88 370 L 611.88 373.5 L 613.63 370 L 611.88 366.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-23"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 380px; margin-left: 595px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="595" y="384" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-25"><g><path d="M 530 410 L 530 443.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 530 448.88 L 526.5 441.88 L 530 443.63 L 533.5 441.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-26"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 426px; margin-left: 540px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;"><div>Non</div></div></div></div></foreignObject><text x="540" y="429" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-14"><g><path d="M 530 330 L 580 370 L 530 410 L 480 370 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 370px; margin-left: 481px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Envie de</div><div>casser des</div><div>trucs ?<br /></div></div></div></div></foreignObject><text x="530" y="374" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Envie de...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-28"><g><path d="M 330 490 L 286.37 490" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 281.12 490 L 288.12 486.5 L 286.37 490 L 288.12 493.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-29"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 505px; margin-left: 308px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="308" y="509" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-34"><g><path d="M 380 530 L 380 563.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 568.88 L 376.5 561.88 L 380 563.63 L 383.5 561.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-38"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 550px; margin-left: 390px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Non</div></div></div></foreignObject><text x="390" y="554" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-18"><g><path d="M 380 450 L 430 490 L 380 530 L 330 490 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 490px; margin-left: 331px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Envie de</div><div>rêver ?<br /></div></div></div></div></foreignObject><text x="380" y="494" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Envie de...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-21"><g><rect x="620" y="340" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 370px; margin-left: 621px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>Hertz</u>,</div><div>Amyl and The Sniffers<br /></div></div></div></div></foreignObject><text x="680" y="374" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Hertz,...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-24"><g><rect x="470" y="450" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 480px; margin-left: 471px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><u>1612</u>, Vulfpeck</div></div></div></foreignObject><text x="530" y="484" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">1612, Vulfpeck</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-27"><g><rect x="160" y="460" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 490px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>The Dark Side</u></div><div><u>Of The Moon</u>,</div><div>Pink Floyd<br /></div></div></div></div></foreignObject><text x="220" y="494" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">The Dark Side...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-32"><g><path d="M 280 250 L 323.63 250" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 328.88 250 L 321.88 253.5 L 323.63 250 L 321.88 246.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-30"><g><rect x="160" y="220" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 250px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><u>Lover Boy</u>, Supertramp</div></div></div></foreignObject><text x="220" y="254" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Lover Boy, Supertramp</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-36"><g><path d="M 430 610 L 463.63 610" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 468.88 610 L 461.88 613.5 L 463.63 610 L 461.88 606.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-37"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 620px; margin-left: 440px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="440" y="624" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-49"><g><path d="M 380 650 L 380 683.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 688.88 L 376.5 681.88 L 380 683.63 L 383.5 681.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-33"><g><path d="M 380 570 L 430 610 L 380 650 L 330 610 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 610px; margin-left: 331px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>Une soirée</div><div>romantique ?<br /></div></div></div></div></foreignObject><text x="380" y="614" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Une soirée...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-40"><g><path d="M 590 610 L 623.63 610" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 628.88 610 L 621.88 613.5 L 623.63 610 L 621.88 606.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-35"><g><rect x="470" y="580" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 610px; margin-left: 471px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>The Red Album</u> (Disque 1)</div><div>The Beatles<br /></div></div></div></div></foreignObject><text x="530" y="614" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">The Red Album (Disqu...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-39"><g><rect x="630" y="580" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 610px; margin-left: 631px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>Nothing But The Best</u>,</div><div>Frank Sinatra<br /></div></div></div></div></foreignObject><text x="690" y="614" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Nothing But The Best...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-51"><g><path d="M 330 730 L 296.37 730" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 291.12 730 L 298.12 726.5 L 296.37 730 L 298.12 733.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-54"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 720px; margin-left: 313px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Oui</div></div></div></foreignObject><text x="313" y="724" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Oui</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-56"><g><path d="M 380 770 L 380 803.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 808.88 L 376.5 801.88 L 380 803.63 L 383.5 801.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-61"><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 784px; margin-left: 390px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255); "><div style="display: inline-block; font-size: 11px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: nowrap;">Non</div></div></div></foreignObject><text x="390" y="788" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="11px" text-anchor="middle">Non</text></switch></g></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-48"><g><path d="M 380 690 L 430 730 L 380 770 L 330 730 Z" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 730px; margin-left: 331px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Un réveil ?</div></div></div></foreignObject><text x="380" y="734" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Un réveil ?</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-53"><g><path d="M 170 730 L 126.37 730" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 121.12 730 L 128.12 726.5 L 126.37 730 L 128.12 733.5 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-50"><g><rect x="170" y="700" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 730px; margin-left: 171px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>4 A.M.</u>,</div><div>Herbie Hancock avec Jaco Pastorius</div></div></div></div></foreignObject><text x="230" y="734" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">4 A.M.,...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-52"><g><rect x="0" y="700" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 730px; margin-left: 1px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>Portrait of Tracy</u>,</div><div>Jaco Pastorius<br /></div></div></div></div></foreignObject><text x="60" y="734" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Portrait of Tracy,...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-60"><g><path d="M 380 870 L 380 903.63" fill="none" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 380 908.88 L 376.5 901.88 L 380 903.63 L 383.5 901.88 Z" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)" stroke-miterlimit="10" pointer-events="all"/></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-55"><g><rect x="320" y="810" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 840px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div>De la musique pour</div><div>travailler alors<br /></div></div></div></div></foreignObject><text x="380" y="844" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">De la musique pour...</text></switch></g></g></g><g data-cell-id="5niXAWvAoySI-JjVDqC7-59"><g><rect x="320" y="910" width="120" height="60" fill="rgb(255, 255, 255)" stroke="rgb(0, 0, 0)" pointer-events="all"/></g><g><g transform="translate(-0.5 -0.5)"><switch><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 940px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0px; text-align: center;" data-drawio-colors="color: rgb(0, 0, 0); "><div style="display: inline-block; font-size: 12px; font-family: &quot;Helvetica&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;"><div><u>Real Illusions: Reflections</u>,</div><div>Steve Vai<br /></div></div></div></div></foreignObject><text x="380" y="944" fill="rgb(0, 0, 0)" font-family="&quot;Helvetica&quot;" font-size="12px" text-anchor="middle">Real Illusions: Refl...</text></switch></g></g></g></g></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.drawio.com/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg> \ No newline at end of file
diff --git a/index.html b/index.html
index 4b39f10..985b7d9 100644
--- a/index.html
+++ b/index.html
@@ -108,6 +108,11 @@
<p>Atelier théâtre du lycée St Thomas d'Aquin Oullins</p>
<p>Bénévolat pour 3 pièces différentes, 2 mois et demi</p>
</div>
+ <div class="event work">
+ <h4>Auxiliaire d'été</h4>
+ <p>Société Générale - Agence de Saint-Genis-Laval</p>
+ <p>Accueil de clients &amp; tâches administratives (gestion de dossiers client, entrées et sorties de stock...) (1 mois)</p>
+ </div>
</div>
</div>
</section>
@@ -128,10 +133,12 @@
</ul>
</div>
<div>
- <h4>Outils</h4>
+ <h4>Technologies</h4>
<ul>
<li>Éditeurs de texte : (neo)vim, suite JetBrains, VSCode, Microsoft Visual Studio</li>
<li><abbr title="Amazon Web Service">AWS</abbr> : suivi de la formation (en anglais) en ligne "AWS Academy Cloud Foundations sur le Cloud Computing avec AWS</li>
+ <li>Systèmes Unix</li>
+ <li>Serveur Web nginx</li>
</ul>
</div>
</div>
@@ -143,12 +150,16 @@
<li>Français : natif</li>
<li>Anglais : C1</li>
<li>Allemand : B1</li>
+ <li>Apprentissage autonome du japonais et suédois</li>
</ul>
</div>
<div>
<h4>Autres</h4>
<ul>
<li>Permis B</li>
+ <li>Guitariste depuis 2013</li>
+ <li>Bassiste depuis 2018</li>
+ <li>Compétences en <abbr title="Musique Assistée par Ordinateur">MAO</abbr></li>
</ul>
</div>
</div>
@@ -168,13 +179,24 @@
<p><u>Tant que le café est encore chaud</u> est un roman de Toshikazu Kawaguchi, qui parle de voyage dans le temps. Voyage dans le temps qui s'effectue en buvant une tasse de café, mais soumis à de nombreuses règles, notamment la règle eponyme dictant que le voyage ne dure que tant que le café est encore chaud. Les règles tendent à repousser la plupart des curieux, mais certains sont prèt à tout pour changer leur vie, et l'auteur montre de multiples façon comment un voyage dans le temps qui se veut observateur peut tout changer.</p>
<h3>Écoutes (toujours pas exhaustives) :</h3>
<p>Mon éducation musicale s'est faîte à partir des classiques du rock et des standards de jazz: d'un côté Pink Floyd, Led Zeppelin et les solos de guitare lunaires, de l'autre Dave Brubeck, John Coltrane et Jaco Pastorius.</p>
- <p>Ces 2 directions sont bien distinctes mais souvent guidées par mon parcours de musicien: en apprenant la guitare basse, j'ai immédiatement préféré le jazz et ses voisins funk et soul, inspiré par Jaco Pastorius, Marcus Miller, Victor Wooten, et Joe Dart dans le groupe Vulfpeck. Autrement, après des années de guitare, je me suis orienté vers des influences découlant du rock, m'essayant au metal et à ses variations, .</p>
+ <p>Ces 2 directions sont bien distinctes mais souvent guidées par mon parcours de musicien: en apprenant la guitare basse, j'ai immédiatement préféré le jazz et ses voisins funk et soul, inspiré par Jaco Pastorius, Marcus Miller, Victor Wooten, et Joe Dart dans le groupe Vulfpeck. Autrement, après des années de guitare, je me suis orienté vers des influences découlant du rock, m'essayant au metal et à ses variations, puis en découvrant le punk à travers le <u>Journal</u> de Kurt Cobain.</p>
<h4>Vous reprendrez bien une recommendation ?</h4>
+ <p>Ou peut-être plus d'une : Commencez avec un album des Beatles, si vous voulez de l'énergie, écoutez <u>Lover Boy</u> de Supertramp. Puis, si ça vous a donné envie de tout casser, je vous conseille <u>Hertz</u> d'Amyl and The Sniffers, ou bien si vous voulez seulement bouger, partez sur <u>1612</u> de Vulfpeck. Pour des situations plus spécifiques, référez vous à <a href="img/music flowchart.svg" alt="flowchart" class="text-link" style="color:#9370db" target="_blank">ce diagramme</a>.</p>
<div class="citation">
<p>"Je veux que toutes les filles du monde prennent une guitare et se mettent à crier"</p>
<p class="author">Courtney Love</p>
</div>
<!-- Courtney Love : I want every girl in the world to pick up a guitar and start screaming -->
+ <h3>Web Revival</h3>
+ <h4>Quésaco ?</h4>
+ <p>Le mouvement du <i>Web Revival</i> est une initiative virtuelle soutenue par diverses communautées sur Internet. L'origine et les motivations initiales sont assez floues, et chaque acteur du mouvement en a sa propre vision, mais dans les grandes lignes, l'objectif du Web Revival est de lutter contre un Internet régi par les grandes entreprises, et contre la centralisation des réseaux sociaux. C'est une cause que j'ai à coeur de soutenir en ajoutant ma contribution à travers mon propre site web.</p>
+ <h4>GeoCities</h4>
+ <p>En 1994, avant l'ubiquité informatique, est né GeoCities, un service gratuit d'hébergement de sites web. Jusqu'en 2009, des utilisateurs pouvaient créer des sites pour tout et n'importe quoi et surtout créer des liens vers les sites d'autres utilisateurs, principe même du World Wide Web. À la fermeture de GeoCities en 2009, au moins 38 millions de pages étaient diffusées à travers le service. Depuis, plusieurs entités cherchent à sauvegarder ce patrimoine virtuel, dont l'<a class="text-link link-color" href="https://archive.org">Internet Archive</a> et <a class="text-link link-color" href=https://geocities.restorativland.org">The Geocities Gallery</a>. Ce dernier est un des projet de Kyle Drake, créateur du contemporain de GeoCities, <a class="text-link link-color" href="https://neocities.org">Neocities</a>, lancé en 2013. Neocities est aussi un service d'hébergement gratuit et open source, qui offre (pour la version gratuite) 1Go de stockage par site web. En avril 2024, il héberge près de 765 600 sites (source: Wikipedia), la plupart du temps rattachés au mouvement du Web Revival.</p>
+ <h4>Yesterweb</h4>
+ <p>Un autre acteur du Web Revival est la communauté <a class="text-link link-color" href="https://yesterweb.org">Yesterweb</a>, active de 2021 à 2023. Bien que les forums soient fermés depuis mai 2023, Yesterweb a posé de solides bases dans son manifeste au sujet d'Internet, des communautés virtuelles, et des enjeux sociaux au sein de ces communautés. En plus de promouvoir les communautés indépendantes et décentralisées, Yesterweb critique le "Web 3.0", une bulle spéculative autour des cryptomonnaies, de la blockchain, et des NFT.</p>
+ <h4>Melonland</h4>
+ <p>Enfin, on peut citer la communauté <a class="text-link link-color" href="https://melonland.net">Melonland</a>, menée par l'artiste irlandais Daniel Murray. À travers une sorte d'annuaire de sites, Melonland sert la décentralisation du web : en guise de profil, chaque utilisateur a son site personnel, personnalisable à souhait. Un des problèmes des réseaux sociaux contemporains, c'est le manque de liberté d'expression laissée aux utilisateurs dans leur page de profil. Souvent, l'utilisateur est limité à un pseudonyme, une image de profil, et une courte biographie, ce qui est bien peu comparé à un site entier qui le représente.</p>
+ <p>Je crois que le Web Revival n'a pas pour but de changer la façon dont le monde entier utilise Internet, mais plutôt de permettre l'existence d'un Internet indépendant et libéré des grandes entreprises. Inciter les utilisateurs à créer leur propre site permet de leur faire prendre conscience de l'outil qu'ils emploient tous les jours, et de les rendre plus responsables dans leur usage du web.</p>
</section>
</div>
<footer>Site réalisé à la &nbsp;<span style="color: beige;">󱠡</span> &nbsp; et avec &nbsp;<span style="color: red">󰩖</span> &nbsp; par <a href="https://marcellus.cc">Martial</a><br>
diff --git a/style.css b/style.css
index 33c00d2..ea2b9cb 100644
--- a/style.css
+++ b/style.css
@@ -57,6 +57,10 @@ nav sep {
margin: auto 0;
}
+.text-link:hover {
+ font-weight: bold;
+}
+
.text-link::after {
content: '<';
}
@@ -65,6 +69,10 @@ nav sep {
content: '>';
}
+.link-color {
+ color: var(--lblue);
+}
+
section>span>p {
padding-left: 30vw;
}
@@ -209,6 +217,7 @@ h1:hover,h2:hover {
}
.event:hover {
+ border-right: none;
box-shadow: 2px 2px rgb(20, 20, 255);
transform: translate(-2px, -2px);
animation: 1s ease-in-out alternate infinite blue-shift;