couleurs en canvas et responsive sass

index.html

@@ -23,21 +23,18 @@
                 <path rx="0" ry="0" d="M-8219.035,17632.029L-8107.295,17867.024L-8229.636,17969.717L-8291.783,18096.894L-8492.425,17938.383L-8596.599,17808.682L-8580.356,17588.946L-8468.630,17500.749L-8219.035,17632.029Z">
                 </path>
             </svg>
-
-            <div id="BG_BG_BG"></div>
-            <div id="BG_BG_BG_tmp"></div>
         </div>
 
-        <div id="grain-bg"></div>
+        <canvas></canvas>
 
         <div id="buttons_container">
             <div class="niveau_profondeur">
                 <p class="selected" onclick="toggleProfondeur(this)">L'atlas</p>
                 <p onclick="toggleProfondeur(this)">Les cartes</p>
             </div>
-            <div class="arrow" onclick="toggleMode('prev')">
+            <button class="arrow" onclick="toggleMode('prev')">
                 <svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
-            </div>
+            </button>
             <!-- svg pictos loadés avec svgloader  pour pouvoir les manipuler avec css -->
             <div class="mode active">
                 <svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
@@ -75,9 +72,9 @@
                     <p>Doléancer</p>
                 </div>
             </div>
-            <div class="arrow" onclick="toggleMode('next')">
+            <button class="arrow" onclick="toggleMode('next')">
                 <svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
-            </div>
+            </button>
 
 
         </div>
@@ -102,7 +99,6 @@
         </div>
 
 
-        <script src="grained/grained.js" defer></script>
         <script src="background.js" defer></script>
     </body>
 </html>