diff --git a/HyperSet/.idea/workspace.xml b/HyperSet/.idea/workspace.xml
index 5396f0d..a1276c9 100644
--- a/HyperSet/.idea/workspace.xml
+++ b/HyperSet/.idea/workspace.xml
@@ -107,6 +107,7 @@
       <workItem from="1593512353865" duration="16143000" />
       <workItem from="1593594963138" duration="15031000" />
       <workItem from="1593683259701" duration="5974000" />
+      <workItem from="1593698220416" duration="2057000" />
     </task>
     <servers />
   </component>
@@ -158,10 +159,10 @@
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
     <state x="701" y="162" key="refactoring.ChangeSignatureDialog/0.0.1920.1040@0.0.1920.1040" timestamp="1593090265720" />
-    <state x="616" y="240" key="run.anything.popup" timestamp="1593610975327">
+    <state x="616" y="240" key="run.anything.popup" timestamp="1593700659090">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
-    <state x="616" y="240" key="run.anything.popup/0.0.1920.1040@0.0.1920.1040" timestamp="1593610975327" />
+    <state x="616" y="240" key="run.anything.popup/0.0.1920.1040@0.0.1920.1040" timestamp="1593700659090" />
     <state x="202" y="435" key="vcs.readOnlyHandler.ReadOnlyStatusDialog" timestamp="1592990595770">
       <screen x="0" y="0" width="1920" height="1040" />
     </state>
diff --git a/HyperSet/set.php b/HyperSet/set.php
index dd40a5c..2490f26 100644
--- a/HyperSet/set.php
+++ b/HyperSet/set.php
@@ -25,7 +25,7 @@ if (isset($_GET['action']) && $_GET['action'] == 'deal') {
     $_SESSION['deck2'] = new Deck($_GET['action']);
     $_SESSION['game2'] = new Game($_SESSION['deck2']);
     $game = $_SESSION['game2'];
-    echo json_encode($game->start(20));
+    echo json_encode($game->start(36));
 
 } else if (isset($_GET['action']) && $_GET['action'] == 'deal3') {
     $_SESSION['deck3'] = new Deck($_GET['action']);
diff --git a/HyperSet/vues/css/style.css b/HyperSet/vues/css/style.css
index 8903ddf..b1500b4 100644
--- a/HyperSet/vues/css/style.css
+++ b/HyperSet/vues/css/style.css
@@ -47,12 +47,21 @@ h1 {
 	background: lightgrey;
 }
 
-.game-board {
-	margin-top: 18%;
+.game-board44 {
+	margin-top: -16%;
 	height: auto;
 	width: auto;
 	transform: rotate(90deg);
 
+}
+
+.game-board {
+	margin-top: 1%;
+	margin-left: 13%;
+	height: 700px;
+	width: 800px;
+	transform: rotate(90deg);
+
 }
 .game-board0 {
 	margin-top: 30%;
@@ -98,8 +107,8 @@ h1 {
 .diamond.lightblue.stripped {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
-	background: repeating-linear-gradient(25deg, lightblue, lightblue 8px, white 8px, white 15px);
-	border: 2px solid lightblue;
+	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 8px, white 8px, white 15px);
+	border: 2px solid #6495ED;
 }
 .diamond.yellow.stripped {
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
@@ -136,7 +145,7 @@ h1 {
 .diamond.lightblue.stripped.rond{
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
-	background: repeating-linear-gradient(25deg, lightblue, lightblue 6px, white 7px, white 14px);
+	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 6px, white 7px, white 14px);
 	border: 7px dotted black;
 
 }
@@ -184,7 +193,7 @@ h1 {
 .diamond.lightblue.stripped.point{
 	transform: rotate(-67deg) skewX(-45deg) scaleY( 0.40);
 	width: 38px;
-	background: repeating-linear-gradient(25deg, lightblue, lightblue 6px, white 7px, white 14px);
+	background: repeating-linear-gradient(25deg, #6495ED, #6495ED 6px, white 7px, white 14px);
 	border: 4px dashed black;
 
 }
@@ -231,7 +240,7 @@ h1 {
 }
 .diamond.solid.lightblue.point{
 	border-style: dashed;
-	border-color: lightblue;
+	border-color: #6495ED;
 }
 .diamond.solid.purple.point{
 	border-style: dashed;
@@ -273,13 +282,13 @@ h1 {
 }
 
 .diamond.lightblue.quadrillage{
-	background-color: lightblue;
+	background-color: #6495ED;
 	background-image:
 			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%),
 			linear-gradient(-35deg, white 25%, transparent 25%, transparent 75%, white 75%);
 	background-size: 20px 19px;
 	background-position: 0 0, 10px 10px;
-	border: 2px solid lightblue;
+	border: 2px solid #6495ED;
 }
 .diamond.purple.quadrillage{
 	background-color: purple;
@@ -394,12 +403,12 @@ radial-gradient(#fafafa 10%, transparent 10%);
 	border: 2px solid saddlebrown;
 }
 .lightblue.pointille{
-	 background-image: radial-gradient(lightblue 40%, #F5F5F5 40%),
-	 radial-gradient(lightblue 20%, #F5F5F5 20%),
+	 background-image: radial-gradient(#6495ED 40%, #F5F5F5 40%),
+	 radial-gradient(#6495ED 20%, #F5F5F5 20%),
 	 radial-gradient(#fafafa 10%, transparent 10%);
 	background-position: 0 0, 1px 1px;
 	background-size: 15px 15px;
-	border: 2px solid lightblue;
+	border: 2px solid #6495ED;
 
 
  }
@@ -449,13 +458,13 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .lightblue.quadrillage{
-	background-color: lightblue;
+	background-color: #6495ED;
 	background-image:
 			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%),
 			linear-gradient(45deg, white 25%, transparent 25%, transparent 75%, white 75%);
 	background-size: 15px 15px;
 	background-position: 0 0, 8px 8px;
-	border: 2px solid lightblue;
+	border: 2px solid #6495ED;
 }
 .purple.quadrillage{
 	background-color: purple;
@@ -482,7 +491,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 .lightblue.rond.open {
 	border-style: dotted;
-	border-color: lightblue;
+	border-color: #6495ED;
 	border-width: 7px;
 }
 
@@ -523,7 +532,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 .lightblue.point.open{
 	 border-style: dashed;
-	 border-color: lightblue;
+	 border-color: #6495ED;
  }
 .purple.point.open{
 	border-style: dashed;
@@ -550,7 +559,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 
 
 .lightblue.solid {
-	background: lightblue;
+	background: #6495ED;
 }
 
 .red.solid {
@@ -644,7 +653,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .lightblue.open {
-	border: 2px solid lightblue;
+	border: 2px solid #6495ED;
 }
 
 .yellow.open {
@@ -666,8 +675,8 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .lightblue.stripped{
-	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
-	border: 2px solid lightblue;
+	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
+	border: 2px solid #6495ED;
 
 }
 
@@ -706,7 +715,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .lightblue.stripped.rond{
-	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
 	border: 7px dotted black;
 
 }
@@ -744,7 +753,7 @@ radial-gradient(#fafafa 10%, transparent 10%);
 }
 
 .lightblue.stripped.point{
-	background: repeating-linear-gradient(-45deg, lightblue, lightblue 5px, white 5px, white 10px);
+	background: repeating-linear-gradient(-45deg, #6495ED, #6495ED 5px, white 5px, white 10px);
 	border: 2px dashed black;
 
 }
diff --git a/HyperSet/vues/homePage.html b/HyperSet/vues/homePage.html
index e0e9a9d..fc5cfc0 100644
--- a/HyperSet/vues/homePage.html
+++ b/HyperSet/vues/homePage.html
@@ -56,16 +56,28 @@
         <img class="small-btn" id="previousBtnHS" onclick="goSelect()" src="vues/images/previous.png">
     </div>
     <div class="game-button-mode">
-        <button class="game-button text" id="playSimpleH" onclick="showGameSimple();">Hyper SET! 3*3</button>
-        <button class="game-button text" id="playSimpleHSet" onclick="showGame();">Hyper SET! 3*4</button>
-        <button class="game-button text" id="playSimpleHSetLast" onclick="showGame1();">Hyper SET! 3*5</button>
-        <button class="game-button text" id="playHSetFour" onclick="showGame2();">Hyper SET! 4*4</button>
-        <button class="game-button text" id="playSimpleHSetFive" onclick="showGame3();">Hyper SET! 4*5</button>
-        <button class="game-button text" id="playHSetFive" onclick="showGame4();">Hyper SET! 5*5</button>
+        <button class="game-button text" id="playSimpleH" onclick="showGameHS0();">(à venir)</button>
+        <button class="game-button text" id="playSimpleHSet" onclick="showGameHS();">Hyper SET! 3*4</button>
+        <button class="game-button text" id="playSimpleHSetLast" onclick="showGameHS1();">(à venir)</button>
+        <button class="game-button text" id="playHSetFour" onclick="showGameHS2();">(à venir)</button>
+        <button class="game-button text" id="playSimpleHSetFive" onclick="showGameHS3();">(à venir)</button>
+        <button class="game-button text" id="playHSetFive" onclick="showGameHS4();">(à venir)</button>
     </div>
 </div>
 
 
+<div id='gameHS' class="wrapper" style="display: none;">
+    <h1>HyperSet 3x4 </h1>
+    <div class=" back-btn small-btn">
+        <img class="small-btn" onclick="goSelectModeHyperSet()" src="vues/images/previous.png">
+    </div>
+    <p>Nombre de carte = 3;       Nombre de critères = 4</p>
+    <p>HyperSets found:  <span data-display="scoreHS" class="score">0</span></p>
+    <p>Number of HyperSets:  <span data-display="nbSetsHS" class="nbSets"></span></p>
+
+    <div id= class="game-boardHS" data-display="game-boardHS"></div>
+</div>
+
 
 <div id='game0' class="wrapper" style="display: none;">
     <h1>Set 3x3 </h1>
@@ -114,7 +126,7 @@
     <p>Sets found:  <span data-display="score2" class="score">0</span></p>
     <p>Number of Sets:  <span data-display="nbSets2" class="nbSets"></span></p>
 
-    <div class="game-board" data-display="game-board2"></div>
+    <div class="game-board44" data-display="game-board2"></div>
 </div>
 <div id='game3' class="wrapper" style="display: none;">
     <h1>Set 4x5</h1>
diff --git a/HyperSet/vues/js/Settings.js b/HyperSet/vues/js/Settings.js
index 1fb9ebe..1db4582 100644
--- a/HyperSet/vues/js/Settings.js
+++ b/HyperSet/vues/js/Settings.js
@@ -76,6 +76,10 @@ function goHome(){
     document.getElementById('home').style.display='block';
     document.getElementById('selectMode').style.display='none';
 }
+function showGameHS(){
+    document.getElementById('gameHS').style.display='block';
+    document.getElementById('selectModeHyperSet').style.display='none';
+}
 
 
 function showGame0(){
@@ -113,6 +117,11 @@ function showModeGame(){
     document.getElementById('selectMode').style.display='none';
 }
 
+function showModeGame1(){
+    document.getElementById('selectModeHyperSet').style.display='block';
+    document.getElementById('selectMode').style.display='none';
+}
+
 function showModeGames(){
     document.getElementById('selectMode').style.display='block';
     document.getElementById('home').style.display='none';
@@ -187,3 +196,9 @@ function goSelectMode0(){
     document.getElementById('selectModeSet').style.display='block';
     document.getElementById('game0').style.display='none';
 }
+
+
+function goSelectModeHyperSet(){
+    document.getElementById('selectModeHyperSet').style.display='block';
+    document.getElementById('gameHS').style.display='none';
+}
diff --git a/HyperSet/vues/js/set.js b/HyperSet/vues/js/set.js
index 5b451c3..fb5d070 100644
--- a/HyperSet/vues/js/set.js
+++ b/HyperSet/vues/js/set.js
@@ -51,7 +51,13 @@ var Game = {
 	$nbSets0: $('[data-display="nbSets0"]'),
 	$board0: $('[data-display="game-board0"]'),
 
-
+	cardsH: [],
+	selectedH : [],
+	scoreH: 0,
+	setH: 0,
+	$scoreH: $('[data-display="scoreH"]'),
+	$nbSetsH: $('[data-display="nbSetsH"]'),
+	$boardH: $('[data-display="game-boardH"]'),
 
 	deal: function() {
 		var self = this;