animated background

web/themes/custom/colloque2024/css-compiled/index.css

@@ -339,15 +339,6 @@ footer h2 {
   line-height: 1.5rem; }
 
 /* Link the SVG file */
-body {
-  /* background-image: url('../images/fond-ronds.svg'); */
-  /* Add other background properties as needed */
-  width: 100%;
-  height: 100vh;
-  /* Adjust as needed */
-  background-size: cover;
-  /* Adjust as needed */ }
-
 @keyframes pulse {
   0% {
     transform: scale(0); }
@@ -356,15 +347,15 @@ body {
 
 @keyframes slidein {
   from {
-    transform: translateX(20%); }
+    transform: translateX(0%); }
   to {
-    transform: translateX(70%); } }
+    transform: translateX(100%); } }
 
 @keyframes dropDown {
   from {
-    transform: translateY(20%); }
+    transform: translateY(0%); }
   to {
-    transform: translateY(70%); } }
+    transform: translateY(100%); } }
 
 @keyframes translateAnimation {
   0% {
@@ -392,6 +383,23 @@ body {
     fill: #349a84;
     /* Final fill color */ } }
 
+@keyframes football-motion {
+  0% {
+    transform: translateX(0) translateY(0); }
+  100% {
+    transform: translateX(100px); } }
+
+@keyframes traceAppear {
+  0% {
+    opacity: 0; }
+  70% {
+    opacity: 0; }
+  100% {
+    opacity: 1; } }
+
+#path_circle_vert_clair_erable_2 {
+  animation: traceAppear 2.5s forwards; }
+
 /* Apply styles to the SVG paths
 #circle_pop_trans,
 #circle_pop_trans-2,
@@ -401,47 +409,9 @@ body {
   /* Example animation */
   /* animation: pulse 2s infinite alternate; */
   /* animation: dropDown 2s infinite alternate; */
-  /* animation: pulse 2s infinite alternate; */ }
-
-#cercle_vert_erable-4-3 {
-  animation: changeColor2 2s forwards; }
-
-/* Apply styles to the SVG paths */
-#circle_vert_clair_erable-3-1 {
-  animation: changeColor 2s forwards;
+  /* animation: pulse 2s infinite alternate; */
   /* animation: slidein 2s infinite alternate; */ }
 
-#circle_orange-7 {
-  /* animation: changeColor 2s infinite alternate; */ }
-
-#circle_orange-6 {
-  /* Main animation for the football */
-  /* animation: football-motion 2s linear infinite; */ }
-
-#circle_orange-6-bis {
-  /* Trailing effect animation */
-  /* animation: trace-motion 2s linear infinite; */ }
-
-@keyframes football-motion {
-  0% {
-    transform: translateX(0) translateY(0); }
-  100% {
-    transform: translateX(100px); } }
-
-@keyframes trace-motion {
-  0% {
-    opacity: 0.5;
-    /* Adjust the opacity to control the visibility of the trace */
-    /* Additional properties for the trailing effect */
-    transform: translateX(0px) translateY(0);
-    /* Adjust as needed */ }
-  100% {
-    opacity: 0.3;
-    /* Make the trace disappear at the end */
-    /* Additional properties for the trailing effect */
-    transform: translateX(100px);
-    /* Adjust as needed */ } }
-
 /*!
  * Hamburgers
  * @description Tasty CSS-animated hamburgers
@@ -582,8 +552,9 @@ body {
     background-size: content;
     display: block;
     position: absolute;
-    top: 0;
-    left: 0; }
+    opacity: 0.5;
+    top: 100px;
+    left: +53px; }
 
 article.publications, article.interviews {
   margin-top: 1rem; }

web/themes/custom/colloque2024/css-compiled/pages/layout.css

@@ -25,8 +25,9 @@ body {
     background-size: content;
     display: block;
     position: absolute;
-    top: 0;
-    left: 0; }
+    opacity: 0.5;
+    top: 100px;
+    left: +53px; }
 
 article.publications, article.interviews {
   margin-top: 1rem; }

web/themes/custom/colloque2024/css/configs/animation.scss

@@ -1,11 +1,3 @@
-/* Link the SVG file */
-body {
-  /* background-image: url('../images/fond-ronds.svg'); */
-  /* Add other background properties as needed */
-  width: 100%;
-  height: 100vh; /* Adjust as needed */
-  background-size: cover; /* Adjust as needed */
-}
 
 
 @keyframes pulse {
@@ -15,13 +7,13 @@ body {
 
 
 @keyframes slidein {
-  from {transform: translateX(20%);}
-  to {transform: translateX(70%);}
+  from {transform: translateX(0%);}
+  to {transform: translateX(100%);}
 }
 
 @keyframes dropDown {
-  from {transform: translateY(20%);}
-  to {transform: translateY(70%);}
+  from {transform: translateY(0%);}
+  to {transform: translateY(100%);}
 }
 
 @keyframes translateAnimation {
@@ -40,72 +32,15 @@ body {
   100% {fill: #349a84; /* Final fill color */}
 }
 
-  
-/* Apply styles to the SVG paths
-#circle_pop_trans,
-#circle_pop_trans-2,
-/* Add other SVG IDs or classes here */
-#circle_orange{
-  /* Add styles to your SVG paths */
-  /* Example animation */
-  /* animation: pulse 2s infinite alternate; */
-  /* animation: dropDown 2s infinite alternate; */
-  /* animation: pulse 2s infinite alternate; */
-
-
-}
 
-#cercle_vert_erable-4-3{
-  animation: changeColor2 2s forwards;
+@keyframes traceAppear {
+  0% {opacity: 0;}
+  70%{opacity: 0;}
+  100% {opacity: 1;}
 }
-  
-/* Apply styles to the SVG paths */
-#circle_vert_clair_erable-3-1
-{
-  animation: changeColor 2s forwards;
-  /* animation: slidein 2s infinite alternate; */
-
+#path_circle_vert_clair_erable_2{
+  animation: traceAppear 2.5s forwards;
 }
 
-#circle_orange-7{
-  /* animation: changeColor 2s infinite alternate; */
-} 
-
-
-
 
 
-#circle_orange-6 {
-  /* Main animation for the football */
-animation: football-motion 2s linear infinite; 
-}
-
-#circle_orange-6-bis {
-  /* Trailing effect animation */
-  filter: url("#blur");
-
-   animation: trace-motion 2s linear infinite; 
-   filter: url("#blur");
-  }
-
-@keyframes football-motion {
-  0% {
-    transform: translateX(0) translateY(0);
-  }
-  100% {
-    transform: translateX(100px) ;
-  }
-}
-
-@keyframes trace-motion {
-  0% {
-    opacity: 0.5; /* Adjust the opacity to control the visibility of the trace */
-    /* Additional properties for the trailing effect */
-    transform: translateX(0px) translateY(0); /* Adjust as needed */
-  }
-  100% {
-    opacity: 0.3; /* Make the trace disappear at the end */
-    /* Additional properties for the trailing effect */
-    transform: translateX(100px) ; /* Adjust as needed */
-  }
-}

web/themes/custom/colloque2024/css/pages/layout.scss

@@ -28,13 +28,14 @@ body {
     content: " ";
     width: 100%;
     height: 100%;
-    // background-image: url("../images/fond-ronds.svg");
+    // background-image: url("../images/fond-ronds-trace.svg");
     background-repeat: no-repeat;
     background-size: content;
     display: block;
     position: absolute;
-    top: 0;
-    left: 0;
+    opacity: 0.5;
+    top: 100px;
+    left: +53px;
   }
 
 

web/themes/custom/colloque2024/images/fond-ronds-trace-start.svg

@@ -0,0 +1,157 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1900"
+   height="1500"
+   viewBox="0 0 502.70834 396.875"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1" /><g
+     id="layer1"
+     transform="translate(-51.525162,-32.699875)"><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange"
+       cx="84.683075"
+       cy="132.53793"
+       r="15.890945" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_pop_trans"
+       cx="136.45699"
+       cy="76.141045"
+       r="15.890945" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_2"
+       cx="193.12822"
+       cy="74.014618"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange-9-0-8-2"
+       cx="456.90131"
+       cy="74.184013"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_3"
+       cx="61.729004"
+       cy="166.14003"
+       r="15.890945" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable_2"
+       cx="550.16675"
+       cy="168.13489"
+       r="15.890945" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_3"
+       cx="375.24548"
+       cy="166.11342"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_5"
+       cx="506.88132"
+       cy="165.2007"
+       r="15.890945" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_pop_trans_3"
+       cx="325.69421"
+       cy="214.66238"
+       r="15.890945" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_4"
+       cx="534.07587"
+       cy="216.84201"
+       r="15.890945" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable_4"
+       cx="190.17583"
+       cy="416.50134"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_6"
+       cx="139.32957"
+       cy="44.208164"
+       r="15.890945" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable_3"
+       cx="88.886528"
+       cy="61.209129"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_7"
+       cx="91.831978"
+       cy="222.5634"
+       r="22.098158" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
+       id="circle_orange_6"
+       cx="512.90173"
+       cy="41.339592"
+       r="24.167231" /><circle
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_5"
+       cx="206.20142"
+       cy="165.12646"
+       r="15.890945" /><circle
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_4"
+       cx="438.36194"
+       cy="77.165817"
+       r="15.890945" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
+       id="circle_pop_trans_4"
+       cx="52.458916"
+       cy="116.0085"
+       r="22.615427" /><circle
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable"
+       cx="194.41611"
+       cy="36.373547"
+       r="15.890945" /><path
+       style="fill:#349a84;stroke:none;stroke-width:1.26656"
+       d="m 45.411881,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.7151697,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08815998,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.6238397,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
+       id="path_circle_pop_trans_4" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
+       d="m 49.929111,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
+       id="path_circle_vert_clair_erable_3" /><path
+       style="fill:#038788;stroke:none;stroke-width:0.837592"
+       d="m 176.96306,427.97839 c 0.28713,-1.66598 0.86969,-3.23411 2.10196,-4.64922 0.98738,-1.13386 2.20392,-2.12354 3.70487,-2.87043 6.97221,-3.4694 16.7678,-1.26697 19.76085,4.79211 0.78557,1.59028 0.9903,3.27791 0.75119,4.95918 -0.36348,2.5558 -2.61938,4.53937 -3.35343,7.00485 -1.73601,5.83082 -2.62133,11.8178 -4.2762,17.66708 -0.65342,2.30955 -2.18477,5.79646 -5.66198,6.29444 -3.93982,0.56424 -5.83643,-3.36487 -6.56082,-5.67454 -0.58593,-1.8682 -0.59903,-3.8034 -0.83564,-5.70307 -0.51428,-4.12917 -0.76337,-8.33141 -1.93444,-12.39795 -0.47645,-1.6545 -1.74598,-2.95288 -2.65106,-4.46326 -0.88579,-1.47815 -1.32445,-3.33945 -1.0453,-4.95919 z"
+       id="path_circle_vert_erable_4" /><path
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 545.88364,200.04259 c -20.03075,1.78212 -17.31022,32.69312 2.6358,30.91858 20.03076,-1.7821 17.31021,-32.69315 -2.6358,-30.91858 z"
+       id="path_circle_orange_4" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
+       d="m 91.317542,195.8549 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
+       id="path_circle_vert_clair_erable_7" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none"
+       d="m 512.19816,151.34247 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93204 3.69834,-4.57 2.81908,-12.55101 -1.70959,-16.24526 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
+       id="path_circle_vert_clair_erable_5" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none"
+       d="m 124.37597,33.869337 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.6983397 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
+       id="path_circle_vert_clair_erable_6" /><path
+       style="fill:#038788;fill-opacity:1;stroke:none"
+       d="m 74.665152,53.71424 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
+       id="path_circle_vert_erable_3" /><path
+       style="fill:#038788;fill-opacity:1;stroke:none"
+       d="m 555.68419,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
+       id="path_circle_vert_erable_2" /><path
+       style="fill:#ff804d;fill-opacity:1;stroke:none"
+       d="m 203.88265,150.98761 c 2.16405,0.16719 4.2637,0.74796 6.15277,1.83301 12.5874,7.23004 6.72502,27.5444 -7.93188,26.41208 -5.739,-0.44336 -14.95781,-2.24109 -18.75404,-6.93204 -3.69834,-4.57 -2.81908,-12.55101 1.70959,-16.24526 4.33146,-3.53336 13.29117,-5.49519 18.82356,-5.06779 z"
+       id="path_circle_orange_5" /><path
+       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
+       d="m 528.79932,30.726038 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.6174301 8.72084,-23.3424601 5.74928,-4.60318005 15.78977,-3.5088 20.43731,2.12787 4.44514,5.3912101 6.91321,16.5430201 6.37552,23.4289901 z"
+       id="path_circle_orange_6" /><path
+       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 192.80832,14.964615 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
+       id="path_circle_vert_erable" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 202.47563,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
+       id="path_circle_vert_clair_erable_2" /><path
+       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 462.8305,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
+       id="path_circle_vert_clair_erable" /><circle
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_pop_trans_2"
+       cx="213.28802"
+       cy="74.286247"
+       r="15.890945" /></g></svg>

web/themes/custom/colloque2024/images/fond-ronds-trace.svg

@@ -36,7 +36,7 @@
        cy="74.014618"
        r="15.890945" /><circle
        style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_orange-9-0-8-2"
+       id="circle_vert_clair_erable"
        cx="321.56879"
        cy="74.184013"
        r="15.890945" /><circle
@@ -91,7 +91,7 @@
        cy="328.63483"
        r="22.098158" /><circle
        style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
-       id="circle_orange_6"
+       id="circle_orange_6" class=""
        cx="512.90173"
        cy="262.26077"
        r="24.167231" /><circle
@@ -111,13 +111,13 @@
        cy="116.0085"
        r="22.615427" /><circle
        style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_erable"
-       cx="194.41611"
+       id="circle_vert_erable" class="dropdown1"
+       cx="193.12822"
        cy="94.895714"
        r="15.890945" /><path
-       style="fill:#349a84;stroke:none;stroke-width:1.26656"
+       style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
        d="m 506.27395,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.71517,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08816,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.62384,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
-       id="path_circle_pop_trans_4" /><path
+       id="path_circle_pop_trans_4"  /><path
        style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
        d="m 294.25916,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
        id="path_circle_vert_clair_erable_3" /><path
@@ -150,18 +150,18 @@
        id="path_circle_orange_6" /><path
        style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
        d="m 192.80832,73.486782 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
-       id="path_circle_vert_erable" /><path
+       id="path_circle_vert_erable" class="dropdown1" /><path
        style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
        d="m 347.31799,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
        id="path_circle_vert_clair_erable_2" /><path
        style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
        d="m 327.49799,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
        id="path_circle_vert_clair_erable" /><circle
-       style="filter:url(#f5);fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
        id="circle_pop_trans_2"
        cx="358.1304"
        cy="74.286247"
        r="15.890945" />
       </g>
       
-      </svg>
+      </svg>

web/themes/custom/colloque2024/js/animation_home.js

@@ -3,32 +3,300 @@
 // Récupérer la forme SVG
 
 
-let dropdowns = document.getElementsByClassName('dropdown');
-console.log(dropdowns);
+// let dropdowns = document.getElementsByClassName('dropdown');
+// console.log(dropdowns);
 
-// Parcourir tous les éléments sélectionnés
-Array.from(dropdowns).forEach(dropdown => {
- function slideDown() {
-  let translateY = -50; // Position de départ (en bas)
+// // Parcourir tous les éléments sélectionnés
+// Array.from(dropdowns).forEach(dropdown => {
+//  function slideDown() {
+//   let translateY = -50; // Position de départ (en bas)
 
-  function animate() {
-    translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
-    dropdown.style.transform = `translateY(${translateY}px)`; // Appliquer la transformation
+//   function animate() {
+//     translateY += 1; // Déplacement d'un pixel vers le haut à chaque itération
+//     dropdown.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
           
-    // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
+//     // dropdown.setAttribute('transform', `translate(0, ${translateY})`); // Appliquer la transformation
+
+//     if (translateY < 100) { // Limite la hauteur à laquelle la forme doit être animée
+//       requestAnimationFrame(animate); // Appel récursif de la fonction animate
+//     }
+//   }
+
+//   animate(); // Lancer l'animation
+// }
+
+// slideDown(); // Lancer l'animation lorsque la page est chargée
+// });
+
+
+let dropdowns1 = document.getElementsByClassName('dropdown1');
+console.log(dropdowns1);
+Array.from(dropdowns1).forEach(dropdown1 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 6000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.3); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown1.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns2 = document.getElementsByClassName('dropdown2');
+console.log(dropdowns2);
+Array.from(dropdowns2).forEach(dropdown2 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 9000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.3); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 120 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown2.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns3 = document.getElementsByClassName('dropdown3');
+console.log(dropdowns3);
+Array.from(dropdowns3).forEach(dropdown3 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 7000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 75 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown3.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let dropdowns4 = document.getElementsByClassName('dropdown4');
+console.log(dropdowns4);
+Array.from(dropdowns4).forEach(dropdown4 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 6000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 85 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown4.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
 
-    if (translateY < 200) { // Limite la hauteur à laquelle la forme doit être animée
+let dropdowns5 = document.getElementsByClassName('dropdown5');
+console.log(dropdowns5);
+Array.from(dropdowns5).forEach(dropdown5 => {
+ function slideDown() {
+  let translateY = 0; // Position de départ (en bas)
+  let duration = 6000; // Durée de l'animation en millisecondes
+  let startTime = null; // Temps de départ de l'animation
+  function animate(timestamp) {
+    if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+    let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+    progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+    progress = easeInOut(progress);
+    translateY = 70 * progress; // Déplacement d'un pixel vers le haut à chaque itération
+    dropdown5.style.transform = `translateY(${translateY}%)`; // Appliquer la transformation
+    if (progress < 0.8) {
+      requestAnimationFrame(animate);
+    }
+  }
+  function easeInOut(t) {
+    return t < 0.5 ? 4 * t * t : -1 + (10 - 2 * t) * t;
+}
+requestAnimationFrame(animate);
+}
+slideDown(); // Lancer l'animation lorsque la page est chargée
+});
+
+let tolefts1 = document.getElementsByClassName('toleft1');
+Array.from(tolefts1).forEach(toleft1 => {
+    function slideLeft() {
+        let translateX = 0; // Position de départ (en bas)
+        let duration = 4000; // Durée de l'animation en millisecondes
+        let startTime = null; // Temps de départ de l'animation
+        function animate(timestamp) {
+            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+            progress = easeInOut(progress);
+            translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft1.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let tolefts2 = document.getElementsByClassName('toleft2');
+Array.from(tolefts2).forEach(toleft2 => {
+    function slideLeft() {
+        let translateX = 0; // Position de départ (en bas)
+        let duration = 4000; // Durée de l'animation en millisecondes
+        let startTime = null; // Temps de départ de l'animation
+        function animate(timestamp) {
+            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+            progress = easeInOut(progress);
+            translateX = -32 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft2.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+let tolefts3 = document.getElementsByClassName('toleft3');
+Array.from(tolefts3).forEach(toleft3 => {
+    function slideLeft() {
+        let translateX = 0; // Position de départ (en bas)
+        let duration = 4000; // Durée de l'animation en millisecondes
+        let startTime = null; // Temps de départ de l'animation
+        function animate(timestamp) {
+            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
+            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
+            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
+            progress = easeInOut(progress);
+            translateX = -35 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
+            toleft3.style.transform = `translateX(${translateX}%)`;
+            if (progress < 0.8) {
+                requestAnimationFrame(animate);
+            }
+        }
+        function easeInOut(t) {
+            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
+        }
+        requestAnimationFrame(animate);
+    }
+    slideLeft(); // Lancer l'animation lorsque la page est chargée
+});
+
+
+let torights1 = document.getElementsByClassName('toright1');
+Array.from(torights1).forEach(toright1 => {
+ function slideRight() {
+  let translateX = 0; // Position de départ (en bas)
+  function animate() {
+    translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
+    toright1.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 31) { // Limite la hauteur à laquelle la forme doit être animée
       requestAnimationFrame(animate); // Appel récursif de la fonction animate
     }
   }
+  animate(); // Lancer l'animation
+}
+slideRight(); // Lancer l'animation lorsque la page est chargée
+});
 
+let torights2 = document.getElementsByClassName('toright2');
+Array.from(torights2).forEach(toright2 => {
+ function slideRight() {
+  let translateX = 0; // Position de départ (en bas)
+  function animate() {
+    translateX += 0.5; // Déplacement d'un pixel vers le haut à chaque itération
+    toright2.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 0) { // Limite la hauteur à laquelle la forme doit être animée
+      requestAnimationFrame(animate); // Appel récursif de la fonction animate
+    }
+  }
   animate(); // Lancer l'animation
 }
+slideRight(); // Lancer l'animation lorsque la page est chargée
+});
 
-slideDown(); // Lancer l'animation lorsque la page est chargée
+
+
+let torights3 = document.getElementsByClassName('toright3');
+console.log(torights3)
+Array.from(torights3).forEach(toright3 => {
+ function slideRight() {
+  let translateX = 0; // Position de départ (en bas)
+  function animate() {
+    translateX += 0.9; // Déplacement d'un pixel vers le haut à chaque itération
+    toright3.style.transform = `translateX(${translateX}%)`; // Appliquer la transformation
+    if (translateX < 59) { // Limite la hauteur à laquelle la forme doit être animée
+      requestAnimationFrame(animate); // Appel récursif de la fonction animate
+    }
+  }
+  animate(); // Lancer l'animation
+}
+slideRight(); // Lancer l'animation lorsque la page est chargée
 });
 
 
+
+
+
+
+
+
+
+
 let moveups = document.getElementsByClassName('moveup');
 console.log(moveups);
 
@@ -113,44 +381,3 @@ requestAnimationFrame(animate);
 slideRightSlow(); // Lancer l'animation lorsque la page est chargée
 });
 
-let tolefts = document.getElementsByClassName('toleft');
-console.log(tolefts);
-
-// Parcourir tous les éléments sélectionnés
-Array.from(tolefts).forEach(toleft => {
-    function slideLeft() {
-        let translateX = 0; // Position de départ (en bas)
-        let duration = 4000; // Durée de l'animation en millisecondes
-        let startTime = null; // Temps de départ de l'animation
-
-        function animate(timestamp) {
-            if (!startTime) startTime = timestamp; // Initialise le temps de départ si ce n'est pas déjà fait
-            let progress = (timestamp - startTime) / duration; // Calcul de la progression de l'animation
-            progress = Math.min(progress, 0.5); // Limite la progression à 1 (pour éviter un dépassement)
-
-            // Utilise une fonction d'interpolation (ease-in-out) pour ajuster la progression
-            progress = easeInOut(progress);
-
-            // Calcule la translation en fonction de la progression
-            translateX = -20 * progress; // -20 est la distance maximale à laquelle vous voulez déplacer l'élément
-
-            // Applique la transformation à l'élément
-            toleft.style.transform = `translateX(${translateX}%)`;
-
-            // Continue l'animation si la progression n'a pas atteint 1
-            if (progress < 0.8) {
-                requestAnimationFrame(animate);
-            }
-        }
-
-        // Fonction d'interpolation (ease-in-out)
-        function easeInOut(t) {
-            return t < 0.5 ? 4 * t * t : -1 + (4 - 2 * t) * t;
-        }
-
-        // Lance l'animation
-        requestAnimationFrame(animate);
-    }
-
-    slideLeft(); // Lancer l'animation lorsque la page est chargée
-});

web/themes/custom/colloque2024/template/page--front.html.twig

@@ -82,37 +82,35 @@
    </filter>
  </defs><g
      id="layer1"
-     transform="translate(-51.525162,-32.699875)"><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+     transform="translate(-51.525162,-32.699875)">
+     <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
        id="circle_orange"
        cx="84.683075"
        cy="132.53793"
-       r="15.890945" /><circle
-       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_pop_trans"
-       cx="136.45699"
-       cy="76.141045"
-       r="15.890945" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_orange_2"
-       cx="193.12822"
-       cy="74.014618"
-       r="15.890945" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_orange-9-0-8-2"
-       cx="321.56879"
-       cy="74.184013"
-       r="15.890945" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable_3"
-       cx="306.05905"
-       cy="166.14003"
-       r="15.890945" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_erable_2"
-       cx="232.68399"
-       cy="168.13489"
-       r="15.890945" /><circle
+       r="15.890945" />
+       <circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_pop_trans" cx="136.45699" cy="76.141045" r="15.890945" />
+       <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_2" cx="193.12822" cy="74.014618" r="15.890945" />
+       <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable" class="toleft1" cx="457" cy="74.184013" r="15.890945" />
+      <path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 462.8305,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
+       id="path_circle_vert_clair_erable" class="toleft1"/> 
+       <circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable_2" class="toleft3" cx="400" cy="168.13489" r="15.890945" />
+       <path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
+       d="m 400,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
+       id="path_circle_vert_erable_2" class="toleft3"/>
+       <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_3" class="toright3" cx="20" cy="166.14003" r="15.890945" />
+       <path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
+       d="m 10,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
+       id="path_circle_vert_clair_erable_3" class="toright3"/>
+       
+       
+
+       <circle
        style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
        id="circle_orange_3"
        cx="375.24548"
@@ -137,94 +135,65 @@
        id="circle_vert_erable_4"
        cx="190.17583"
        cy="216.79443"
-       r="15.890945" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable_6"
-       cx="139.32957"
-       cy="214.65398"
-       r="15.890945" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_erable_3"
-       cx="88.886528"
-       cy="255.06381"
-       r="15.890945" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable_7"
-       cx="91.831978"
-       cy="328.63483"
-       r="22.098158" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
-       id="circle_orange_6"
-       cx="512.90173"
-       cy="262.26077"
-       r="24.167231" /><circle
-       style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_orange_5"
-       cx="484.91324"
-       cy="165.12646"
-       r="15.890945" /><circle
-       style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_clair_erable_4"
-       cx="438.36194"
-       cy="77.165817"
-       r="15.890945" /><circle
-       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
-       id="circle_pop_trans_4"
-       cx="513.32098"
-       cy="116.0085"
-       r="22.615427" /><circle
-       style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_vert_erable"
-       cx="194.41611"
-       cy="94.895714"
-       r="15.890945" /><path
-       style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
+       r="15.890945" />
+       <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_6" class="dropdown2" cx="139.32957" cy="44.208164" r="15.890945" />
+       <path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
+       d="m 124.37597,33.869337 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
+       id="path_circle_vert_clair_erable_6" class="dropdown2" />
+      
+       <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0322974;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_7" class="dropdown4" cx="91.831978" cy="60" r="22.098158" />
+       <path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
+       d="m 91.317542,30 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
+       id="path_circle_vert_clair_erable_7" class="dropdown4"/>
+        <circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable_3" class="dropdown3" cx="88.886528" cy="20" r="15.890945" />
+       <path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
+       d="m 74.665152,20 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
+       id="path_circle_vert_erable_3" class="dropdown3"/> 
+       <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0353214;paint-order:fill markers stroke"
+       id="circle_orange_6" class="dropdown5" cx="512.90173" cy="41.339592" r="24.167231" />
+       <path style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
+       d="m 528.79932,30.726038 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.61743 8.72084,-23.34246 5.74928,-4.60318 15.78977,-3.5088 20.43731,2.12787 4.44514,5.39121 6.91321,16.54302 6.37552,23.42899 z"
+       id="path_circle_orange_6" class="dropdown5"/>
+       <circle style="fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_orange_5" cx="484.91324" cy="165.12646" r="15.890945" />
+       <circle style="fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_clair_erable_4" cx="438.36194" cy="77.165817" r="15.890945" />
+       <circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0330534;paint-order:fill markers stroke"
+       id="circle_pop_trans_4" cx="513.32098" cy="116.0085" r="22.615427" />
+       <path style="filter:url(#f5);fill:#349a84;stroke:none;stroke-width:1.26656"
        d="m 506.27395,96.085496 c 2.51922,0.43418 4.89045,1.31504 7.03031,3.17846 1.71454,1.493054 3.2111,3.332644 4.34049,5.602294 5.24622,10.54298 1.91584,25.35532 -7.24636,29.88124 -2.40473,1.18789 -4.95667,1.49748 -7.49899,1.13591 -3.86474,-0.54964 -6.86418,-3.96089 -10.59233,-5.07087 -8.81705,-2.6251 -17.87023,-3.96382 -26.71517,-6.46624 -3.49238,-0.98807 -8.76508,-3.30367 -9.5181,-8.56171 -0.85321,-5.95759 5.08816,-8.82552 8.58073,-9.92091 2.82498,-0.886 5.75129,-0.90581 8.62384,-1.2636 6.24391,-0.77769 12.5983,-1.15433 18.74749,-2.92515 2.50185,-0.72048 4.46518,-2.640174 6.74909,-4.008804 2.23517,-1.33942 5.04973,-2.00274 7.499,-1.58062 z"
-       id="path_circle_pop_trans_4" /><path
-       style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:0.837592"
-       d="m 294.25916,153.49503 c 1.66599,0.28713 3.23412,0.86965 4.64923,2.10196 1.13385,0.98738 2.12354,2.20392 2.87042,3.70487 3.4694,6.97221 1.26697,16.7678 -4.79211,19.76085 -1.59028,0.78557 -3.27791,0.9903 -4.95918,0.75119 -2.5558,-0.36348 -4.53937,-2.61939 -7.00484,-3.35343 -5.83083,-1.73601 -11.81781,-2.62133 -17.66709,-4.27621 -2.30955,-0.65342 -5.79646,-2.18476 -6.29444,-5.66197 -0.56424,-3.93983 3.36487,-5.83643 5.67455,-6.56082 1.86819,-0.58593 3.8034,-0.59903 5.70306,-0.83564 4.12917,-0.51429 8.33141,-0.76337 12.39795,-1.93444 1.65451,-0.47646 2.95288,-1.74598 4.46326,-2.65107 1.47815,-0.88578 3.33945,-1.32444 4.95919,-1.04529 z"
-       id="path_circle_vert_clair_erable_3" /><path
+       id="path_circle_pop_trans_4"  />
+       <circle style="fill:#038788;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_vert_erable" class="dropdown1" cx="193.12822" cy="0" r="15.890945" />
+       <path style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       d="m 193.12822,-23 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
+       id="path_circle_vert_erable" class="dropdown1" />
+       <path
        style="filter:url(#f5);fill:#038788;stroke:none;stroke-width:0.837592"
        d="m 176.96306,228.27149 c 0.28713,-1.66598 0.86969,-3.23411 2.10196,-4.64922 0.98738,-1.13386 2.20392,-2.12354 3.70487,-2.87043 6.97221,-3.4694 16.7678,-1.26697 19.76085,4.79211 0.78557,1.59028 0.9903,3.27791 0.75119,4.95918 -0.36348,2.5558 -2.61938,4.53937 -3.35343,7.00485 -1.73601,5.83082 -2.62133,11.8178 -4.2762,17.66708 -0.65342,2.30955 -2.18477,5.79646 -5.66198,6.29444 -3.93982,0.56424 -5.83643,-3.36487 -6.56082,-5.67454 -0.58593,-1.8682 -0.59903,-3.8034 -0.83564,-5.70307 -0.51428,-4.12917 -0.76337,-8.33141 -1.93444,-12.39795 -0.47645,-1.6545 -1.74598,-2.95288 -2.65106,-4.46326 -0.88579,-1.47815 -1.32445,-3.33945 -1.0453,-4.95919 z"
        id="path_circle_vert_erable_4" /><path
        style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.19737"
        d="m 294.96985,200.04259 c -20.03075,1.78212 -17.31022,32.69312 2.6358,30.91858 20.03076,-1.7821 17.31021,-32.69315 -2.6358,-30.91858 z"
        id="path_circle_orange_4" /><path
-       style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.53571"
-       d="m 91.317542,301.92633 c -25.690903,2.28569 -22.201624,41.93132 3.380606,39.65534 25.690922,-2.28568 22.201612,-41.93136 -3.380606,-39.65534 z"
-       id="path_circle_vert_clair_erable_7" /><path
        style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
        d="m 442.70309,151.34247 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93204 3.69834,-4.57 2.81908,-12.55101 -1.70959,-16.24526 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
-       id="path_circle_vert_clair_erable_5" /><path
-       style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none"
-       d="m 124.37597,204.31515 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.5444,6.72502 26.41208,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.93204,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
-       id="path_circle_vert_clair_erable_6" /><path
-       style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
-       d="m 74.665152,247.56892 c 0.16719,2.16405 0.74796,4.2637 1.83301,6.15277 7.23004,12.5874 27.544398,6.72502 26.412078,-7.93188 -0.44336,-5.739 -2.24109,-14.95781 -6.932038,-18.75404 -4.57,-3.69834 -12.55101,-2.81908 -16.24526,1.70959 -3.53336,4.33146 -5.49519,13.29117 -5.06779,18.82356 z"
-       id="path_circle_vert_erable_3" /><path
-       style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none"
-       d="m 238.20143,153.87047 c -2.16405,0.16719 -4.2637,0.74796 -6.15277,1.83301 -12.5874,7.23004 -6.72502,27.5444 7.93188,26.41208 5.739,-0.44336 14.95781,-2.24109 18.75404,-6.93203 3.69834,-4.57001 2.81908,-12.55102 -1.70959,-16.24527 -4.33146,-3.53336 -13.29117,-5.49519 -18.82356,-5.06779 z"
-       id="path_circle_vert_erable_2" /><path
+       id="path_circle_vert_clair_erable_5" />
+       
+       <path
        style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none"
        d="m 482.59447,150.98761 c 2.16405,0.16719 4.2637,0.74796 6.15277,1.83301 12.5874,7.23004 6.72502,27.5444 -7.93188,26.41208 -5.739,-0.44336 -14.95781,-2.24109 -18.75404,-6.93204 -3.69834,-4.57 -2.81908,-12.55101 1.70959,-16.24526 4.33146,-3.53336 13.29117,-5.49519 18.82356,-5.06779 z"
-       id="path_circle_orange_5" /><path
-       style="filter:url(#f5);fill:#ff804d;fill-opacity:1;stroke:none;stroke-width:1.25134"
-       d="m 528.79932,251.64722 c -0.21033,2.69351 -0.94097,5.30686 -2.30601,7.65812 -9.09574,15.66707 -34.65217,8.37038 -33.22766,-9.87252 0.55777,-7.14312 2.8194,-18.61743 8.72084,-23.34246 5.74928,-4.60318 15.78977,-3.5088 20.43731,2.12787 4.44514,5.39121 6.91321,16.54302 6.37552,23.42899 z"
-       id="path_circle_orange_6" /><path
-       style="filter:url(#f5);fill:#038788;fill-opacity:1;stroke:none;stroke-width:1.19737"
-       d="m 192.80832,73.486782 c -20.03075,1.78212 -17.31022,32.693118 2.6358,30.918578 20.03076,-1.7821 17.31021,-32.693148 -2.6358,-30.918578 z"
-       id="path_circle_vert_erable" /><path
-       style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
+       id="path_circle_orange_5" />
+    
+       
+       <path style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
        d="m 347.31799,59.013158 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
-       id="path_circle_vert_clair_erable_2" /><path
-       style="filter:url(#f5);fill:#b9ce00;fill-opacity:1;stroke:none;stroke-width:1.19737"
-       d="m 327.49799,58.142036 c -20.03075,1.78212 -17.31022,32.693116 2.6358,30.918576 20.03076,-1.7821 17.31021,-32.693146 -2.6358,-30.918576 z"
-       id="path_circle_vert_clair_erable" /><circle
-       style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
-       id="circle_pop_trans_2"
-       cx="358.1304"
-       cy="74.286247"
-       r="15.890945" />
+       id="path_circle_vert_clair_erable_2" class="toright2"/>
+       <circle style="fill:#349a84;fill-opacity:1;stroke:none;stroke-width:0.0232253;paint-order:fill markers stroke"
+       id="circle_pop_trans_2" class="toright1" cx="200" cy="74.286247" r="15.890945" />
+      
       </g>
       
       </svg>