diff --git a/CSS/styles.css b/CSS/styles.css
index 5c90915..e21f6a0 100644
--- a/CSS/styles.css
+++ b/CSS/styles.css
@@ -1,8 +1,11 @@
 body{
 	margin: 0;
-	background:white ;
+	background-image:url("../img/background.svg");
+
 }
 
+
+
 .txt_rouge{color: red;font-weight: bold;}
 .txt_jaune{color: gold;font-weight: bold;}
 
@@ -13,15 +16,14 @@ ul{
 
 
 
-header{
-}
+
 
 #presentation{
 	position: relative;
 	height: 100vh;
-	top: 0;
 
 }
+
 h1{
 	text-align: center;
 	margin-bottom: 10vh;
@@ -49,7 +51,7 @@ nav{
 	font-size: 20px ;
 	top: 0;
 	left: 0;
-	z-index: 1;
+	z-index: 100;
 	position: fixed;
 	display: flex;
 	align-items: center;
@@ -65,7 +67,7 @@ nav{
 	height: 2.3em;
 	margin: 0.5em;
 	background: rgb(255, 0, 0);
-	color: rgb(0, 0, 0);
+	color: white;
 	border: none;
 	border-radius: 1.625em;
 	font-size: 20px;
@@ -73,7 +75,6 @@ nav{
 	cursor: pointer;
 	position: relative;
 	z-index: 1;
-	overflow: hidden;
 }
    
 .button:hover {
@@ -85,8 +86,8 @@ nav{
 	background: rgb(0, 0, 0);
 	position: absolute;
 	z-index: -1;
-	left: -20%;
-	right: -20%;
+	left: -6%;
+	right: -6%;
 	top: 0;
 	bottom: 0;
 	transform: skewX(-45deg) scale(0, 1);
@@ -168,9 +169,9 @@ nav li{
 }
 .page p:not(:hover){transition: color linear 0.7s;transition: transform ease 0.4s ;}
 
-#page_courante p{
-	font-size: 1.4em;
-	color: rgb(0,255,25);
+#page_courante{
+	color: gold;
+	background-color: rgba(255,0,0,0.2);
 }
 
 
@@ -180,6 +181,7 @@ nav li{
 
 
 
+
 main p{
 	font-size: 25px;
 }
@@ -252,20 +254,21 @@ main p{
 
 
 #fond_2{
-	z-index: -1;
+	z-index: 10;
 	backdrop-filter: blur(10px);
 	text-align: center;
-	display: block;
+	display: flex;
 	flex-direction: column;
+	align-items: center;
 	background-color: rgba(0, 0, 0, 0.5);
 	color: white;
 	padding-bottom:20%;
 }
 
 
-
-
-
+#fond_2 video{
+	margin: 1%;
+}
 
 
 
@@ -331,3 +334,32 @@ footer #coordonne p{
 	margin-bottom: 1rem;
 }
 
+footer #autres a:hover{
+	text-decoration: underline;
+}
+
+#menu-mobile{
+	background-color: blue;
+	z-index: 10;
+	height: 10vh;
+	width: 10vw;
+	display: none;
+}
+@media only screen and (max-width: 800px){
+
+	body{
+		width: 100vw;
+	}
+	#img_droite_txt_gauche{
+		width: 100vw;
+	}
+
+	#menu-ordi{
+		display: none;
+	}
+
+	#menu-mobile{
+		position: fixed;
+		display: block;
+	}
+}
diff --git a/HTML/page_2.html b/HTML/page_2.html
index adb57ee..e5f026e 100644
--- a/HTML/page_2.html
+++ b/HTML/page_2.html
@@ -11,17 +11,19 @@
 		<header>
 
 
-			<nav> 
-				<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
+			<div id="menu-ordi">
+
+				<nav> 
+				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
 				
-				<ul>
-
-					<li> <a href= "../index.html" class="page"><p>Accueil</p> </a></li> 
-					<li> <a href= "#" class="page" id="page_courante"><p>Nos jeux</p> </a></li> 
-					<li> <a href= "page_3.html" class="page"><p>Nos partenaires</p> </a> </li> 
-					<li> <a href= "page_4.html" class="page"><p>A propos de nous</p> </a></li> 
-
-				</ul> 
-			</nav>
+					<ul>
+						<li> <a href= "../index.html" class="page" ><button class="button" type="buton" value="Accueil"> Accueil</button></a></li> 
+						<li> <a href= "#" class="page" ><button class="button" type="buton" value="Nos jeux" id="page_courante">Nos jeux</button> </a></li> 
+						<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
+						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+					</ul> 
+				</nav>
+			</div>
 		</header>
 	</body>
\ No newline at end of file
diff --git a/HTML/page_3.html b/HTML/page_3.html
index 59fb1f9..df30941 100644
--- a/HTML/page_3.html
+++ b/HTML/page_3.html
@@ -11,19 +11,19 @@
 		<header>
 
 
-			<nav> 
+			<div id="menu-ordi">
 
-
-				<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
+				<nav> 
+				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
 				
-				<ul>
-
-					<li> <a href= "../index.html" class="page"><p>Acceuil</p> </a></li> 
-					<li> <a href= "page_2.html" class="page"><p>Nos jeux</p> </a></li> 
-					<li> <a href= "#" class="page" id="page_courante"><p>Nos partenaires</p> </a> </li> 
-					<li> <a href= "page_4.html" class="page"><p>A propos de nous</p> </a></li> 
-
-				</ul> 
-			</nav>
+					<ul>
+						<li> <a href= "../index.html" class="page" ><button class="button" type="buton"value="Accueil"> Accueil</button></a></li> 
+						<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
+						<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
+						<li> <a href= "page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+					</ul> 
+				</nav>
+			</div>
 		</header>
 	</body>
\ No newline at end of file
diff --git a/HTML/page_4.html b/HTML/page_4.html
index 3a9dd6d..6fd6e2a 100644
--- a/HTML/page_4.html
+++ b/HTML/page_4.html
@@ -10,20 +10,19 @@
 	<body>
 		<header>
 
+			<div id="menu-ordi">
 
-			<nav> 
-
-
-				<a href="../"><img id="icone" src="../img/icon.png" alt="icone du site"></a>
+				<nav> 
+				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
 				
-				<ul>
-
-					<li> <a href= "../index.html" class="page"><p>Acceuil</p> </a></li> 
-					<li> <a href= "page_2.html" class="page"><p>Nos jeux</p> </a></li> 
-					<li> <a href= "page_3.html" class="page"><p>Nos partenaire</p> </a> </li> 
-					<li> <a href= "#" class="page" id="page_courante"><p>A propos de nous</p> </a></li> 
-
-				</ul> 
-			</nav>
+					<ul>
+						<li> <a href= "../index.html" class="page"><button class="button" type="buton"value="Accueil"> Accueil</button></a></li> 
+						<li> <a href= "page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
+						<li> <a href= "page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+						<li> <a href= "#" class="page"><button id="page_courante" class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
+						<li> <a href= "#" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+					</ul> 
+				</nav>
+			</div>
 		</header>
 	</body>
\ No newline at end of file
diff --git a/img/background.svg b/img/background.svg
new file mode 100644
index 0000000..7dd3e30
--- /dev/null
+++ b/img/background.svg
@@ -0,0 +1 @@
+<svg id="visual" viewBox="0 0 900 600" width="900" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><g fill="#A7233A"><circle r="118" cx="565" cy="131"></circle><circle r="67" cx="149" cy="472"></circle><circle r="69" cx="461" cy="382"></circle></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 6c0dfa9..79f59b0 100644
--- a/index.html
+++ b/index.html
@@ -8,31 +8,45 @@
 
 		<link rel = "stylesheet" type = "text/css" href = "CSS/styles.css">
 		<meta name="keywords" content="casino">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel = "icon" type = "image/png" href = "img/logo.svg">
 	</head> 
 
 	<body> 
+
+		<div id="background-image">
+		</div>
+
 		<header>
+			<div id="menu-mobile">
+				<button>
+					a
+				</button>
+			</div>
 
 
-			<nav> 
 
+			<div id="menu-ordi">
 
+				<nav> 
 				<a href="#"><img id="icone" src="img/logo.svg" alt="icone du site"></a>
 				
-				<ul>
+					<ul>
+						<li> <a href= "index.html" class="page" ><button class="button" type="buton" value="Accueil" id="page_courante"> Accueil</button></a></li> 
+						<li> <a href= "HTML/page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
+						<li> <a href= "HTML/page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
+						<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li>
+						<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> Contact</button> </a></li>  
+					</ul> 
+				</nav>
+			</div>
 
-					<li> <a href= "index.html" class="page" id="page_courante"><button class="button" type="buton" value="Accueil"> Accueil</button></a></li> 
-					<li> <a href= "HTML/page_2.html" class="page" ><button class="button" type="buton" value="Nos jeux">Nos jeux</button> </a></li> 
-					<li> <a href= "HTML/page_3.html" class="page"><button class="button" type="buton" value="Nos partenaires">Nos partenaires</button> </a> </li> 
-					<li> <a href= "HTML/page_4.html" class="page"><button class="button" type="buton" value="A propos de nous"> A propos de nous</button> </a></li> 
+			
 
-				</ul> 
-			</nav>
 		</header>
 
 		<main>
-			<img id="presentation" src="img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg" alt="icone du site">
+			<img id="presentation" src="img/163662-poker-roulette-carte_a_jouer-poker_en_ligne-jeu_de_cartes-3840x2160.jpg" alt="Image d'acceuil">
 			<h1><span class="txt_rouge">Casino du Coeur</span></h1>
 			<a href="#"><img id="btn_up" src="img/icone/arrow-up.svg" alt="icone de fleche"></a>
 
@@ -71,7 +85,10 @@
 				<h3>
 					Notre devise : <span class="txt_rouge">Tout</span> le monde est <span class="txt_jaune">Gagnant</span> !
 				</h3>
-				<img class="img_main" src="img/casion_background.jpeg">
+			
+				<video id="video-presentation">
+					
+				</video>
 			</div>
 		</main>