le choix des couleurs de points apparait seulement si on a activé les points

code/index.css

@@ -99,5 +99,9 @@
     background-image: url("ress/green.png");
     background-repeat: no-repeat;
     background-position: center;
-    background-size: cover;
+  }
+
+  .pickr {
+    width: 30px;
+    height: 30px;
   }

code/index.php

@@ -78,16 +78,17 @@
         <input type="radio" id="no_pause" value="0" name="pause">
         <label for="no_pause">Non</label>
 
-        <div> Choisir les couleurs des points (ne fonctionne pas en mode "gemmes" ou "les deux")<br/>
+        
         <div id="color_pickers" class="color-pickers">
-            <span id="col1" class="dot col1"></span>
-            <span id="col2" class="dot col2"></span>
-            <span id="col3" class="dot col3"></span>
-            <span id="col4" class="dot col4"></span>
-            <span id="col5" class="dot col5"></span>
-            <span id="col6" class="dot col6"></span>
-            <span id="col7" class="dot col7"></span>
-            <span id="col8" class="dot col8"></span>
+        <div> Choisir les couleurs des points<br/>
+            <span id="col1" class="dot col1 pickr"></span>
+            <span id="col2" class="dot col2 pickr"></span>
+            <span id="col3" class="dot col3 pickr"></span>
+            <span id="col4" class="dot col4 pickr"></span>
+            <span id="col5" class="dot col5 pickr"></span>
+            <span id="col6" class="dot col6 pickr"></span>
+            <span id="col7" class="dot col7 pickr"></span>
+            <span id="col8" class="dot col8 pickr"></span>
         </div>
 
         <p>

code/options.js

@@ -10,6 +10,7 @@ var span = document.getElementsByClassName("close")[0];
 // When the user clicks the button, open the modal 
 btn.onclick = function() {
   modal.style.display = "block";
+  document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
 }
 
 // When the user clicks on <span> (x), close the modal
@@ -32,6 +33,10 @@ slider.oninput = function() {
   output.innerHTML = this.value;
 }
 
+document.getElementById("displays").addEventListener("click", function(){
+  document.getElementById("color_pickers").style.display= (document.getElementById("displays").value!="points" ? "none" : "inline");
+})
+
 function saveOptions() {
     setCookie("dotsAmount",document.getElementById("range_dots").value,30);
     setCookie("displayMode",document.getElementById("displays").value,30);
@@ -44,8 +49,9 @@ function saveOptions() {
 document.getElementById("gem").width=size/6;
 document.getElementById("dot").style.height=size/6;
 document.getElementById("dot").style.width=size/6;
-document.getElementById("both").style.height=size/6
-document.getElementById("both").style.width=size/6
+document.getElementById("both").style.height=size/6;
+document.getElementById("both").style.width=size/6;
+document.getElementById("both").style.backgroundSize=size/8+"px";
 
 if(getCookie("pause")!=1)
   document.getElementById("no_pause").checked=true;