diff --git a/CSS/discretion.css b/CSS/discretion.css
new file mode 100644
index 0000000..4d5ddac
--- /dev/null
+++ b/CSS/discretion.css
@@ -0,0 +1,119 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    color:white;
+    font-family: 'Special Elite', cursive;
+    background-color: black;
+    height: 95vh;
+}
+
+    header {
+        color: #BF0909;
+        font-family: 'Special Elite', cursive;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+    }
+        h1 {
+            font-size: 4vw;
+        }
+		
+		a {
+			text-decoration: none;
+			color: black;
+		}
+		
+        header a {
+            text-decoration: none;
+            color: #494949;
+        }
+
+        header a:hover {
+            color: white;
+        }
+
+    #main {
+        display: flex;
+        flex: 4;
+    }
+
+        #content {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            width: 50vw;
+        }
+
+            #text {
+                font-family: 'Special Elite', cursive;
+                font-size: 2vw;
+                text-align: center;
+                color: white;
+            }
+
+            #buttons {
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .button {
+                outline: none;
+                border:0.2vw solid #b9b9b9;
+                border-radius: 4vw;
+                min-width: 15vw;
+                width :20vw;
+                padding: 1vw 1.2vw 1vw 1.2vw;
+                color: black;
+                font-family: 'Special Elite', cursive;
+                font-size: 1.5vw;
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
+                cursor : pointer;
+				position: absolute;
+				left: 39%;
+            }
+
+            .button:hover {
+                border: 0.2vw solid white;
+                box-shadow: 0 0 3vw  #B0C4DE;
+            }
+
+            .button:active {
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
+            }
+
+            /* Test d'animation */
+            @keyframes oscille {
+                from {
+                    transform: rotate(0);
+                }
+
+                25% {
+                    transform: rotate(8deg);
+                }
+
+                75% {
+                    transform: rotate(-8deg);
+                }
+
+                to {
+                    transform: rotate(0);
+                }
+            }
+
+            footer{
+                flex:0.5;
+                display:flex;
+                flex-direction: column;
+                justify-content:flex-end;
+                align-items: center;
+                font-size:1vw;
+                margin-top:2vw;
+            }
+            
+                #names{
+                    margin : 0;
+                }
diff --git a/HTML/course.html b/HTML/course.html
new file mode 100644
index 0000000..7c0d116
--- /dev/null
+++ b/HTML/course.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Courrez!</title>
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
+    <link rel="stylesheet" href="../CSS/QTE.css">
+  </head>
+  <body style="background: #050505">
+    <canvas id="display" width="1288" height="666">
+
+    <script>
+
+      var amorti=0.8;
+	  var t=0;
+      function Particle(x, y) {
+        this.x = this.oldX = x;
+        this.y = this.oldY = y;
+      }
+//une bonne partie de ce code vient de PlayfulJS
+      Particle.prototype.integrate = function() {
+        var velocityX = (this.x - this.oldX) * amorti;
+        var velocityY = (this.y - this.oldY) * amorti;
+		this.oldX = this.x;
+        this.oldY = this.y;
+        this.x += velocityX;
+        this.y += velocityY;
+		t++
+		if (t>10 && Math.round(this.x/10)==Math.round(mouse.x/10) && Math.round(this.y/12)==Math.round(mouse.y/12)){window.location.replace("./menu.html");}
+		//j'ai round parce que sinon au pixel près c'était ridicule
+		//	/!\ rediriger vers une age d'échec une fois qu'elles seront faites
+		if (t==220){amorti=0.86;}
+		if (t==400){amorti=0.92;}
+		if (t==480){amorti=0.97;}//on augmente la vitesse de suivi
+		if (t==680){amorti=0.99;}
+		if (t==1000){amorti=0.8;}
+		if (t==1080){window.location.replace("./couloir.html")}//condition de succès: tenir assez longtemps
+      };
+//on ajoute des méthodes à l'objet Particle
+      Particle.prototype.attract = function(x, y) {
+        var dx = x - this.x;
+        var dy = y - this.y;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        this.x += dx / distance;
+        this.y += dy / distance;
+      };
+//ctx permet de tracer sur le canvas
+      Particle.prototype.draw = function() {
+        ctx.strokeStyle = '#f00000';
+        ctx.lineWidth = 42;
+        ctx.beginPath();
+        ctx.moveTo(this.oldX, this.oldY);
+        ctx.lineTo(this.x, this.y);
+        ctx.stroke();
+		};
+
+      var display = document.getElementById('display');
+      var ctx = display.getContext('2d');
+      var particles = [];
+      var width = display.width = window.innerWidth;
+      var height = display.height = window.innerHeight;
+      var mouse = { x: width * 0.5, y: height * 0.5 };
+
+      	particle= new Particle(0.9*width, 0.1 * height);
+
+      display.addEventListener('mousemove', onMousemove);
+
+      function onMousemove(e) {
+        mouse.x = e.clientX;
+        mouse.y = e.clientY;
+      }
+
+      requestAnimationFrame(frame);
+	
+      function frame() {
+        requestAnimationFrame(frame);
+        ctx.clearRect(0, 0, width, height);
+          particle.attract(mouse.x, mouse.y);
+		  particle.integrate();
+          particle.draw();
+      }
+
+	
+    </script>  
+
+</canvas></body>
+</html>
\ No newline at end of file
diff --git a/HTML/discretion.html b/HTML/discretion.html
new file mode 100644
index 0000000..9458c87
--- /dev/null
+++ b/HTML/discretion.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>INSAïde</title>
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
+    <link rel="stylesheet" href="../CSS/discretion.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
+</head>
+<body>
+    <header>
+        <h1>De la discrétion!</h1>
+        <nav><a href='./menu.html'>Retourner au menu</a></nav>
+    </header>
+    <main id="main">
+        <section id="content">
+            <article id="text">
+                <p>
+                    Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas.
+					Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver...
+					Échappez-lui en bougeant votre souris!
+                </p>
+            </article>
+            <div id="qtevent">
+                <button class="button"><a id="buttontext" href="./course.html">Courir!</a></button>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
+        <p id="rights">Tous droits réservés </p>
+    </footer>
+</body>
+</html>
\ No newline at end of file
