diff --git a/Assets/Images/Icones/arrow.png b/Assets/Images/Icones/arrow.png
index aa1b3a7..5b5daaa 100644
Binary files a/Assets/Images/Icones/arrow.png and b/Assets/Images/Icones/arrow.png differ
diff --git a/Assets/Images/Icones/cart.png b/Assets/Images/Icones/cart.png
index 0c2199f..97ca252 100644
Binary files a/Assets/Images/Icones/cart.png and b/Assets/Images/Icones/cart.png differ
diff --git a/Assets/Images/Promotions/promo1.png b/Assets/Images/Promotions/promo1.png
index 0245996..a5eae17 100644
Binary files a/Assets/Images/Promotions/promo1.png and b/Assets/Images/Promotions/promo1.png differ
diff --git a/Assets/Images/Promotions/promo2.png b/Assets/Images/Promotions/promo2.png
index d9d3885..489d7eb 100644
Binary files a/Assets/Images/Promotions/promo2.png and b/Assets/Images/Promotions/promo2.png differ
diff --git a/Assets/Images/Promotions/promo3.png b/Assets/Images/Promotions/promo3.png
index 64b2492..b065f1a 100644
Binary files a/Assets/Images/Promotions/promo3.png and b/Assets/Images/Promotions/promo3.png differ
diff --git a/Assets/Images/Promotions/promo4.png b/Assets/Images/Promotions/promo4.png
index 68eb3be..b8760d3 100644
Binary files a/Assets/Images/Promotions/promo4.png and b/Assets/Images/Promotions/promo4.png differ
diff --git a/Assets/Images/Promotions/promo5.png b/Assets/Images/Promotions/promo5.png
deleted file mode 100644
index c01abdb..0000000
Binary files a/Assets/Images/Promotions/promo5.png and /dev/null differ
diff --git a/Assets/Pages/Autres/nous.html b/Assets/Pages/Autres/nous.html
index 4537928..f25e4a3 100644
--- a/Assets/Pages/Autres/nous.html
+++ b/Assets/Pages/Autres/nous.html
@@ -16,8 +16,8 @@
     <nav id="nav">
         <div class="topnav">
             <a id="kyflo" class="active" href="../../../index.html">KyFlo</a>
-            <a id="nous" href="nous.html">A propos</a>
-            <a id="contactN" href="contact.html">Contact</a>
+            <a class="raccourci" href="#nous">A propos</a>
+            <a class="raccourci" href="contact.html">Contact</a>
             <a id="panier" href="checkout.html"><img src="../../Images/Icones/cart.png" alt></a>
             <a id="loupe" href="search_result.html">GO</a>
             <input type="text" placeholder="Rechercher sur tout le site">
diff --git a/Assets/css.css b/Assets/css.css
index 7e67cb5..5bd9079 100644
--- a/Assets/css.css
+++ b/Assets/css.css
@@ -1,166 +1,333 @@
-/*204, 25, 25*/
+/*BODY + GENERAL*/
 
-
-/*==========================================================================================*/
-
-
-/*BODY + GENERAL*/
+html{
+    scroll-behavior: smooth;
+}
 
 body {
-    background-color: rgb(0, 0, 0);
-    background-image: linear-gradient(rgba(107, 6, 6, 0.5) 2px, transparent 2px), linear-gradient(90deg, rgba(80, 7, 7, 0.5) 2px, transparent 2px), linear-gradient(rgba(61, 61, 61, 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(63, 63, 63, 0.28) 1px, transparent 1px);
-    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
-    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+    background: linear-gradient(to left, rgb(99, 1, 99), rgb(0, 0, 145));
     margin: 0;
+    padding: 0;
     font-family: 'Roboto', sans-serif;
 }
 
-#content {
-    margin-left: 8vw;
-    margin-right: 8vw;
+
+img {
+    width: 30%;
+    float: left;
+}
+
+.content {
+    background-color: #ddd;
+    padding: 2vw;
 }
 
 h1 {
     font-size: 2vw;
     color: white;
 }
-
-body>#bienvenue>h1 {
-    font-size: 2vw;
-    color: white;
-    text-align: center;
-}
-
-body>#bienvenue>h2 {
-    font-size: 1.5vw;
-    color: lightgrey;
-    text-align: center;
-}
-
-button#hautPage {
-    position: fixed;
-    z-index: 1;
-    left: 95%;
-    top: 90%;
-    padding: 1vw 1vw;
-    background-color: rgba(0, 0, 0, 0.5);
-    border: 0.1vw solid rgb(204, 25, 25);
-    color: white;
-}
-
-button#hautPage>img {
-    width: 2vw;
-}
-
-
 /*=====================================*/
 
-
 /*NAVBAR*/
 
 a#kyflo {
     font-size: 3vw;
-    color: rgb(204, 25, 25);
+    color: rgb(0, 0, 0);
     padding: 0.5vw 1vw;
     transform: none;
     border: none;
     
 }
 
-a#nous {
-    border-right: 0.15vw solid rgb(204, 25, 25);
-    border-left: 0.15vw solid rgb(204, 25, 25);
+a.raccourci {
+    border-right: 0.15vw solid rgb(0, 0, 0);
+    border-left: 0.15vw solid rgb(0, 0, 0);
 }
 
+
 #panier {
     float: right;
     width: 9%;
     padding: 1.2vw 1vw;
-    border-left: 0.15vw solid rgb(204, 25, 25);
+    border-left: 0.15vw solid rgb(0, 0, 0);
     margin-right: -6%;
 }
 
 a#panier>h3{
     margin-top :0.5vw;
     margin-bottom: 0;
+    color: black;
 }
 
-#loupe {
+#go {
     float: right;
     display: block;
-    color: rgb(255, 255, 255);
+    color: rgb(0, 0, 0);
     text-align: center;
     margin-top: 1.2vw;
     margin-right: 2vw;
     padding: 0.5vw;
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid rgb(0, 0, 0);
     text-decoration: none;
     font-size: 1vw;
     font-weight: bold;
     transform: none;
     border-left: none;
-    background-color: rgb(204, 25, 25);
+    border-top: none;
+    background-color: rgb(255, 255, 255);
 }
 
-#loupe:hover {
-    color: rgb(0, 0, 0);
+#go:hover {
+    color: rgb(255, 255, 255);
+    background-color: rgb(0, 0, 0);
     transition-duration: 0.2s;
 }
 
 .topnav {
     overflow: hidden;
-    background-color: rgba(22, 22, 22, 0.61);
-    border-bottom: 0.15vw solid rgb(204, 25, 25);
-    
-    
+    background-color: rgb(255, 255, 255);
 }
 
 .topnav a {
     float: left;
     display: block;
-    color: rgb(255, 255, 255);
+    color: rgb(0, 0, 0);
     text-align: center;
     padding: 1.8vw 1.4vw;
     text-decoration: none;
     font-size: 1vw;
-    border-right: 0.15vw solid rgb(204, 25, 25);
+    border-right: 0.15vw solid white;
     font-weight: bold;
     transform: skew(-0.2rad);
 }
 
 .topnav a:hover {
-    background-color: rgb(204, 25, 25);
-    color: rgb(0, 0, 0);
+    background-color: rgb(206, 206, 206);
+    color: black;
 }
 
-.topnav a#nous:hover,
-a#contactN:hover {
+.topnav .raccourci:hover,
+.raccourci:hover {
     padding: 1.8vw 2.5vw;
 }
 
 .topnav a#kyflo:hover {
-    color: white;
-    background-color: rgb(22, 22, 22);
+    background-color :transparent;
 }
 
 .topnav a#panier:hover {
-    background-color: black;
+    background-color: rgb(206, 206, 206);
     margin-right: -2%;
 }
 
 .topnav input[type=text] {
     float: right;
     padding: 0.5vw;
+    color: black;
     width: 40%;
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: none;
+    border-bottom: 0.1vw solid rgb(0, 0, 0);
     font-size: 1vw;
     margin-top: 1.2vw;
-    background-color: rgb(22, 22, 22);
+    background-color: rgb(255, 255, 255);
+}
+/*================================================*/
+
+/*TOP*/
+div#bienvenue{
+    padding: 3vw;
 }
 
+body>#bienvenue>h1 {
+    font-size: 3vw;
+    color: white;
+    text-align: center;
+}
 
+body>#bienvenue>h2 {
+    font-size: 2vw;
+    color: lightgrey;
+    text-align: center;
+}
+/*=================*/
+
+/*Slide des promotions*/
+
+div#slider {
+    width: 100%;
+    max-width: 1920px;
+    margin: auto;
+}
+
+div#slider figure {
+    position: relative;
+    width: 500%;
+    margin: 0;
+    padding: 0;
+    font-size: 0;
+    text-align: left;
+}
+
+div#slider figure img {
+    width: 20%;
+    height: auto;
+    float: left;
+}
+
+div#slider {
+    width: 100%;
+    max-width: 1920px;
+    overflow: hidden
+}
+
+@keyframes slidy {
+    0% {left: 0%;}
+    20% {left: 0%;}
+    25% {left: -100%;}
+    45% {left: -100%;}
+    50% {left: -200%;}
+    70% {left: -200%;}
+    75% {left: -300%;}
+    95% {left: -300%;}
+    100% {left: -400%;}
+}
+
+div#slider figure {
+    position: relative;
+    width: 500%;
+    margin: 0;
+    padding: 0;
+    font-size: 0;
+    left: 0;
+    text-align: left;
+    animation: 16s slidy infinite;
+}
 /*======================================*/
 
+/* TITRE */
+.title h1{
+    font-size: 3vw;
+    padding: 6vw;
+    margin: 0;
+    text-align: center;
+}
+
+.title{
+    background-color: rgba(255, 255, 255, 0.4)
+}
+/*================================================*/
+
+/*FLEX CONTAINER*/
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #ddd;
+    justify-content: center;
+}
+
+.flex-container>div {
+    width: 30%;
+    margin: 1vw;
+    text-align: center;
+    line-height: 3vw;
+    border-bottom: 0.2vw solid grey;
+    border-right: 0.2vw solid grey;
+    font-size: 30px;
+}
+
+.flex-container>div>a>h2 {
+    text-align: center;
+    font-size: 2vw;
+    color: rgb(0, 0, 0);
+}
+
+.flex-container>div>a>img {
+    float: none;
+    width: 50%;
+}
+
+.flex-container div:hover img{
+    width: 60%;
+    transition-duration: 0.5s;
+}
+
+.out img{
+    opacity: 0.4;
+}
+
+.out h1{
+    font-size: 2vw;
+    color: white;
+    background-color: black;
+    margin: 0;
+    padding: 0;
+}
+
+.flex-container div.out:hover img{
+    width: 50%;
+    transition-duration: 0.5s;
+}
+
+.flex-container div.out:hover{
+    cursor: none;
+    border: none;
+    border-bottom: 0.2vw solid grey;
+    border-right: 0.2vw solid grey; 
+}
+
+.flex-container div:hover{
+    border: 0.3vw solid lightseagreen;
+    transition-duration: 0.2s;
+}
+
+/*==========================================*/
+
+/* CONTACT*/
+
+#contact input{
+    width: 50%;
+    color: black;
+    display: block;
+    margin: auto;
+    font-size: 2vw;
+    background-color: transparent;
+    border: none;
+    border-bottom: 0.2vw solid rgb(0, 0, 0);
+    padding: 0.5vw;
+}
+
+#contact input:focus{
+    background-color: rgba(0,0,0,0.1);
+    border-bottom : 0.2vw solid rgb(16, 133, 172);
+    transition-duration: 0.3s;
+}
+
+#contact input:valid{
+    border-bottom : 0.2vw solid rgb(24, 216, 40);
+    transition-duration: 0.3s;
+}
+
+#contact input[type=submit]{
+    border: 0.2vw solid grey;
+    width: 30%;
+}
+
+#contact input[type=submit]:hover{
+    background-color: grey;
+    color: white;
+    transition-duration: 0.3s;
+}
+
+#contact h2{
+    margin: 0;
+    padding: 2vw;
+    font-size: 2vw;
+    text-align: center;
+}
+
+/*==========================================================*/
+
 
 /*FOOTER*/
 
@@ -171,7 +338,7 @@ footer {
 
 footer>div>table {
     width: 100%;
-    border-top: 0.1vw solid rgb(204, 25, 25);
+    border-top: 0.1vw solid white;
     background-color: rgb(27, 27, 27);
     margin: auto;
     padding: 2vw 8vw;
@@ -183,7 +350,7 @@ a {
 }
 
 a:hover {
-    color: rgb(204, 25, 25);
+    color: white;
     transition-duration: 0.4s;
 }
 
@@ -211,13 +378,13 @@ button#contactB {
     font-size: 1.5vw;
     color: lightgrey;
     background-color: rgb(27, 27, 27);
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid white;
     transform: skew(-.312rad);
     margin-bottom: 2vw;
 }
 
 button#contactB:hover {
-    background-color: rgb(204, 25, 25);
+    background-color: white;
     transition-duration: 0.5s;
     border-radius: 1vw;
 }
@@ -234,49 +401,6 @@ td#contact {
 
 /*======================================*/
 
-
-/*FLEX CONTAINER*/
-
-.flex-container {
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.flex-container>div {
-    background-color: rgba(59, 59, 59, 0.5);
-    width: 30%;
-    margin: 1vw;
-    text-align: center;
-    line-height: 3vw;
-    font-size: 30px;
-}
-
-.flex-container>div>a>h3 {
-    text-align: left;
-    font-size: 2vw;
-    margin-left: 35%;
-    color: lightgrey;
-}
-
-.flex-container>div>a>h4 {
-    text-align: left;
-    font-size: 1.5vw;
-    margin-left: 35%;
-    color: lightgrey;
-}
-
-.flex-container>div>a>img {
-    width: 30%;
-    margin-top: 10%;
-}
-
-
-
-
-
-/*==========================================*/
-
-
 /*CONFIRMATION COMMENTAIRE*/
 
 #Merci>h1 {
@@ -298,7 +422,7 @@ td#contact {
 }
 
 #Merci>h2>a:hover {
-    color: rgb(204, 25, 25);
+    color: white;
 }
 
 #Merci>img {
@@ -310,16 +434,9 @@ td#contact {
     float: none;
 }
 
-
 /*==========================================*/
 
-
-/*==========================================*/
-
-
 /* CSS DESCRIPTION PRODUIT */
-
-
 /*EN TETE PRODUIT*/
 
 #Produit {
@@ -357,7 +474,7 @@ td#contact {
 #Produit>img {
     width: 20%;
     float: left;
-    border: 0.2vw solid rgb(204, 25, 25);
+    border: 0.2vw solid white;
     border-radius: 10px;
     background-color: rgba(0, 0, 0, 0.5);
 }
@@ -370,7 +487,7 @@ td#contact {
     font-size: 2vw;
     margin-right: 10%;
     color: white;
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid white;
 }
 
 #Produit>button:hover {
@@ -379,44 +496,13 @@ td#contact {
     transition-duration: 0.5s;
     border-radius: 2vw;
 }
-
-
 /*=====================*/
 
-
-/* MOSAIQUE PRODUITS*/
-
-#produits {
-    border: 0.1vw solid red;
-    background-color: rgba(0, 0, 0, 0.5);
-    margin-top: 3vw;
-    padding: 2vw 2vw;
-}
-
-img {
-    width: 30%;
-    float: left;
-}
-
-h3,
-h4 {
-    color: white;
-}
-
-h3:hover {
-    color: rgb(204, 25, 25);
-    transition-duration: 0.2s;
-}
-
-
-/*================================================*/
-
-
 /*CARACTERISTIQUES PRODUIT*/
 
 #Carac {
     width: 100%;
-    border-top: 0.2vw solid rgb(204, 25, 25);
+    border-top: 0.2vw solid white;
     margin-top: 8%;
 }
 
@@ -430,10 +516,8 @@ h3:hover {
     color: lightgrey;
 }
 
-
 /*================================================*/
 
-
 /*COMMENTAIRES CLIENT*/
 
 #Client {
@@ -471,15 +555,13 @@ h3:hover {
     margin-right: 8%;
 }
 
-
 /*================================================*/
 
-
 /*ESPACE LAISSER COMMENTAIRE*/
 
 #Coms {
     width: 100%;
-    border-top: 0.2vw solid rgb(204, 25, 25);
+    border-top: 0.2vw solid white;
     margin-top: 5%;
     padding: 2vw 2vw;
 }
@@ -492,13 +574,13 @@ h3:hover {
 #Coms>h2 {
     font-size: 3vw;
     color: white;
-    border-top: 0.2vw dashed rgb(204, 25, 25);
+    border-top: 0.2vw dashed white;
     text-align: center;
 }
 
 #Coms {
     background-color: rgba(0, 0, 0, 0.5);
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid white;
 }
 
 #Coms>form>h1 {
@@ -506,22 +588,6 @@ h3:hover {
     color: white;
 }
 
-input,
-select {
-    width: 20%;
-    padding: 1vw 1vw;
-    font-size: 1.5vw;
-    background-color: rgb(27, 27, 27);
-    color: white;
-    border: 0.1vw solid rgba(255, 255, 255, 0.5);
-    border-radius: 3vw;
-}
-
-input:hover {
-    border-radius: 0vw;
-    transition-duration: 0.5s;
-}
-
 input:valid {
     border-radius: 0vw;
     transition-duration: 0.5s;
@@ -543,7 +609,7 @@ select {
     padding: 1vw 1vw;
     font-size: 1.5vw;
     background-color: rgba(0, 0, 0, 0.5);
-    border: 0.15vw solid rgb(204, 25, 25);
+    border: 0.15vw solid white;
     color: white;
     display: block;
     margin-left: auto;
@@ -570,84 +636,6 @@ table>tr>td>input {
 
 /*================================================*/
 
-
-/*==========================================================================================*/
-
-
-/*Slide des promotions*/
-
-div#slider {
-    width: 100%;
-    max-width: 1920px;
-    margin: auto;
-}
-
-div#slider figure {
-    position: relative;
-    width: 500%;
-    margin: 0;
-    padding: 0;
-    font-size: 0;
-    text-align: left;
-}
-
-div#slider figure img {
-    width: 20%;
-    height: auto;
-    float: left;
-}
-
-div#slider {
-    width: 100%;
-    max-width: 1920px;
-    overflow: hidden
-}
-
-@keyframes slidy {
-    0% {
-        left: 0%;
-    }
-    20% {
-        left: 0%;
-    }
-    25% {
-        left: -100%;
-    }
-    45% {
-        left: -100%;
-    }
-    50% {
-        left: -200%;
-    }
-    70% {
-        left: -200%;
-    }
-    75% {
-        left: -300%;
-    }
-    95% {
-        left: -300%;
-    }
-    100% {
-        left: -400%;
-    }
-}
-
-div#slider figure {
-    position: relative;
-    width: 500%;
-    margin: 0;
-    padding: 0;
-    font-size: 0;
-    left: 0;
-    text-align: left;
-    animation: 16s slidy infinite;
-}
-
-
-/*==========================================================================================*/
-
-
 /*Panier*/
 
 form[action="commande.html"]>h1 {
@@ -663,7 +651,7 @@ select {
 
 #livraison {
     background-color: rgba(0, 0, 0, 0.5);
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid white;
     margin-top: 5vw;
 }
 
@@ -676,7 +664,7 @@ table#basket {
     margin-top: 5vw;
     background-color: rgba(0, 0, 0, 0.5);
     text-align: center;
-    border: 0.1vw solid rgb(204, 25, 25);
+    border: 0.1vw solid white;
 }
 
 tr#cent>th {
@@ -685,81 +673,10 @@ tr#cent>th {
 
 td#total {
     text-align: right;
-    color: rgb(204, 25, 25);
+    color: white;
     font-size: 2vw;
     font-weight: bold;
     padding: 0vw 2vw;
 }
 
-
-/*=================================*/
-
-
-/*CONTACT*/
-
-#content>h1 {
-    text-align: center;
-    font-size: 3vw;
-}
-
-#content>form>h2 {
-    font-size: 1.5vw;
-    color: lightgrey;
-}
-
-table#reseaux {
-    width: 70%;
-    margin: auto;
-}
-
-tr#res>td {
-    text-align: center;
-}
-
-tr#res>td>a>img {
-    float: none;
-}
-
-
-/*===========================*/
-
-
-/*QUI SOMMES NOUS*/
-
-#content>h1 {
-    margin-top: 3vw;
-}
-
-#content>h2 {
-    font-size: 2vw;
-    color: white;
-    text-align: left;
-    margin-top: 5vw;
-}
-
-#content>ul>li>h3 {
-    font-size: 1.5vw;
-    color: lightgrey;
-}
-
-table#equipe {
-    width: 100%;
-}
-
-
-
-tr#equ>td {
-    text-align: center;
-}
-
-tr#equ>td>img {
-    float: none;
-    width: 20%;
-    border: 0.2vw solid rgb(204, 25, 25);
-}
-
-
-/*=========================*/
-
-
-/*====================================*/
\ No newline at end of file
+/*===============================================*/
diff --git a/Assets/resp.css b/Assets/resp.css
index 3bc70b5..596882a 100644
--- a/Assets/resp.css
+++ b/Assets/resp.css
@@ -24,9 +24,9 @@
         display: block;
         text-align: left;
         width: 76.5%;
+        border: 0.1vw solid black;
         margin: 0;
         padding: 2vw;
-        border: none;
         transform: none;
         font-size: 3vw;
     }
@@ -47,7 +47,7 @@
         text-align: center;
     }
     .topnav a#panier,
-    a#nous {
+    a.raccourci {
         border: none;
     }
     .topnav a#panier{
@@ -57,36 +57,27 @@
     .topnav a#panier:hover{
         margin-right: -14%;
     }
-    .topnav a#nous:hover,
-    a#contactN:hover {
+    .topnav a.raccourci:hover,
+    a.raccourci:hover {
         padding: 2vw 2vw;
     }
-    .topnav a#loupe {
+    .topnav a#go {
         width: 5%;
         padding: 1vw;
         font-size: 3vw;
-        border-left: 0.1vw solid rgb(204, 25, 25)
-    }
-    .topnav input[type=text] {
-        border: 1px solid rgb(190, 73, 73);
+        border: 0.1vw solid rgb(0, 0, 0)
     }
     .topnav a#panier>h3{
         display:none;
     }
     /*===========FLEX CONTAINER===========*/
     .flex-container>div {
-        width: 85%;
+        width: 40%;
         margin-left: auto;
         margin-right: auto;
     }
     .flex-container>div>a>img {
         width: 20%;
-        margin-top: 3%;
-        margin-left: 10%;
-    }
-    .flex-container>div>a>h3,
-    .flex-container>div>a>h4 {
-        margin-left: 50%;
     }
     #content {
         margin-left: 2vw;
diff --git a/index.html b/index.html
index 3d7bebd..db7bd40 100644
--- a/index.html
+++ b/index.html
@@ -17,10 +17,10 @@
     <nav id="nav">
         <div class="topnav">
             <a id="kyflo" class="active" href="index.html">KyFlo</a>
-            <a id="nous" href="Assets/Pages/Autres/nous.html">A propos</a>
-            <a id="contactN" href="Assets/Pages/Autres/contact.html">Contact</a>
+            <a class="raccourci" href="Assets/Pages/Autres/nous.html">A propos</a>
+            <a class="raccourci" href="#contact">Contact</a>
             <a id="panier" href="Assets/Pages/Autres/checkout.html"><img src="Assets/Images/Icones/cart.png" alt><h3>Panier</h3></a>
-            <a id="loupe" href="Assets/Pages/Autres/search_result.html">GO</a>
+            <a id="go" href="Assets/Pages/Autres/search_result.html">GO</a>
             <input type="text" placeholder="Rechercher sur tout le site...">
         </div>
     </nav>
@@ -39,50 +39,69 @@
             <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Promotions/promo1.png" alt></a>
         </figure>
     </div>
-    <button id="hautPage" onclick="window.location.href='#nav'"><img src="Assets/Images/Icones/arrow.png" alt></button>
-    <div id="content">
-        <div id="produits">
-            <h1>Tout nos produits :</h1>
-            <div class="flex-container">
-                <div>
-                    <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
-                        <h3>Robot soldat</h3>
-                        <h4>Rupture de stock</h4>
-                    </a>
-                </div>
-                <div>
-                    <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
-                        <h3>Robot Nao</h3>
-                        <h4>5 000€</h4>
-                    </a>
-                </div>>
-                <div>
-                    <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
-                        <h3>Robot r2d2</h3>
-                        <h4>500€</h4>
-                    </a>
-                </div>
-                <div>
-                    <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
-                        <h3>Robot valkyrie</h3>
-                        <h4>Rupture de stock</h4>
-                    </a>
-                </div>
-                <div>
-                    <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
-                        <h3>Robot Pepper</h3>
-                        <h4>15 000€</h4>
-                    </a>
-                </div>
-                <div>
-                    <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
-                        <h3>Terminator</h3>
-                        <h4>50 000€</h4>
-                    </a>
-                </div>
-            </div>
+    <div class="title">
+        <h1>Tout nos produits :</h1>
+    </div>
+    
+    <div class="flex-container">
+        
+        <div>
+            <a href="Assets/Pages/Produits/nao.html"><img src="Assets/Images/Produits/nao.png" alt>
+                <h2>Robot Nao</h2>
+            </a>
+        </div>
+        <div class="out">
+            <h1>Rupture de stock</h1>
+            <a href="#produits"><img src="Assets/Images/Produits/soldat.png" alt>
+                <h2>Robot soldat</h2>
+            </a>
+        </div>
+        <div>
+            <a href="Assets/Pages/Produits/r2d2.html"><img src="Assets/Images/Produits/r2d2.png" alt>
+                <h2>Robot r2d2</h2>
+            </a>
+        </div>
+        <div class="out">
+            <h1>Rupture de stock</h1>
+            <a href="#produits"><img src="Assets/Images/Produits/valkyrie.png" alt>
+                <h2>Robot valkyrie</h2>
+            </a>
+        </div>
+        <div>
+            <a href="Assets/Pages/Produits/pepper.html"><img src="Assets/Images/Produits/pepper.png" alt>
+                <h2>Robot Pepper</h2>
+            </a>
+        </div>
+        <div>
+            <a href="Assets/Pages/Produits/terminator.html"><img src="Assets/Images/Produits/terminator.png" alt>
+                <h2>Terminator</h2>
+            </a>
         </div>
     </div>
+
+    <div id="contact">
+        <div class="title">
+            <h1>Nous contacter :</h1>
+        </div>
+
+        <div class="content">
+            <form action="commentaire.html">
+                <h2>Nom et Prénom :</h2>
+                <input type="text" required>
+    
+                <h2>Email :</h2>
+                <input type="email" required>
+    
+                <h2>Question :</h2>
+                <input type="text" placeholder="Question, suggestion, remarque" required>
+    
+                <h2>Valider:</h2>
+                <input type="submit" value="Envoyer">
+            </form>
+        </div>
+    </div>
+
+    
     <footer>
         <div id="acces">
             <table>
@@ -100,7 +119,7 @@
                     <tr>
                         <td><a href="index.html#produits">Nos Produits</a></td>
                         <td><a href="Assets/Pages/Autres/checkout.html">Votre panier</a></td>
-                        <td id="contact"><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td>
+                        <td><button onclick="window.location.href='Assets/Pages/Autres/contact.html'" id="contactB">Nous contacter</button></td>
                     </tr>
                 </tbody>
             </table>