diff --git a/css/categories.css b/css/categories.css
deleted file mode 100755
index 4564496..0000000
--- a/css/categories.css
+++ /dev/null
@@ -1,47 +0,0 @@
-main{
-  margin-top: 10%;
-}
-
-article{
-  margin-top: auto;
-  border: solid;
-  border-width: 1%;
-  border-radius: 5%;
-  background-color: pink;
-}
-
-article h2{
-  text-align: center;
-}
-
-.caramels{
-  float:left;
-  width:40%;
-  margin:2%;
-}
-
-.sirops{
-  float:left;
-  width:40%;
-  margin:2%;
-}
-.pubimg{
-  float:left;
-  width:40%;
-  margin:2%;
-}
-
-.PD{
- float:left;
- width:40%;
- margin:2%;
-}
-
-.Product{
-  float:left;
-  margin : 3%;
-}
-.Product p, .Product h3{
-  margin-top: -5px;
-  width:150px;
-}
\ No newline at end of file
diff --git a/css/header.css b/css/header.css
index b934d67..30c56c6 100755
--- a/css/header.css
+++ b/css/header.css
@@ -1,3 +1,5 @@
+
+
 header{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -6,6 +8,12 @@ header{
     text-align: center;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     background-color: rgb(134, 196, 221);
+
+    grid-column-start: 1;
+    grid-column-end: 4;
+    grid-row-start: 1;
+    grid-row-end: 1;
+    position: static;
   }
   .Titre {
     grid-column-start:2;
@@ -15,6 +23,7 @@ header{
     margin-top:2%;
     z-index:2;
   }
+
   .rotate{
     position: absolute;
     margin-left: auto;
@@ -25,6 +34,7 @@ header{
     margin-top: -30%;
     z-index:1;
     animation: rotation 50s infinite linear;
+    pointer-events: none;
   }
   @keyframes rotation {
     from {
@@ -45,6 +55,7 @@ header{
     margin-top: -15%;
     z-index:1;
     animation: rotation2 10s infinite linear;
+    pointer-events: none;
   }
   @keyframes rotation2 {
     from {
diff --git a/css/index.css b/css/index.css
index 3887305..7a5b66b 100755
--- a/css/index.css
+++ b/css/index.css
@@ -1,81 +1,43 @@
 
 
-.text-intro{
-  width:80%;
-  margin:auto;
-  border: solid;
-  border-width: 5px;
-  background-color: darkorange;
-}
-
-.content{
-  display:grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: auto auto;
-  margin-left: 8%;
-}
-
-@media only screen and (min-width: 600px) {
-  .content{
-    margin-left: 8%;
+:root{
+    --meme-wsize: 50vw;
+    --meme-vsize: 26vw;
   }
-}
-
-article{
-  border: solid;
-  border-width: 1%;
-  border-radius: 45px;
-  background-color: rosybrown;
-}
-
-article h2{
-  text-align: center;
-}
-
-.NewsLetter{
-  grid-column-start: 1;
-  grid-column-end: 1;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  width:35%;
-  margin:2%;
-}
-@media only screen and (max-width: 600px) {
-  .NewsLetter{
-    margin-left:-8%;
-    width:45%;
+  
+  .page{
+    background:linear-gradient(rgb(189, 211, 255), rgb(55, 15, 141));
+    z-index:2;
   }
-}
-
-.Vedette{
-  grid-column-start: 1;
-  grid-column-end: 2;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  width:58%;
-  margin:2%;
-  margin-left: 40%;
-}
-
-.Product{
-  float:left;
-  margin : 1.5%;
-}
-.Product p, .Product h3{
-  margin-top: -5px;
-  width:150px;
-}
-.Product .desc{
-  font-size: 10px;
-}
-.Pack{
-  grid-column-start: 1;
-  grid-column-end: 2;
-  grid-row-start: 2;
-  grid-row-end: 2;
-  width:96%;
-  margin:2%;
-}
-.Pack .Product{
-  float:left;
-}
+  
+  .Liste{
+    width:100%;
+    height:100vh;
+    overflow: scroll;
+  }
+  
+  .Product{
+    float:left;
+    margin : 5%;
+    width: 80%;
+  }
+  .Product p, .Product h3{
+    margin-top: -5px;
+  
+  }
+  
+  .memeContainer {
+    position: absolute;
+    width:25wh;
+    padding-bottom: 25%;
+    float: left;
+    margin : 5%;
+    height: 0;
+  
+  }
+  .meme{
+    width: inherit;
+    height: inherit;
+    position: absolute;
+    left: 0;
+  }
\ No newline at end of file
diff --git a/css/panier.css b/css/panier.css
deleted file mode 100755
index 21612cc..0000000
--- a/css/panier.css
+++ /dev/null
@@ -1,108 +0,0 @@
-
-main{
-  display: grid;
-  grid-template-columns: 1fr, 1fr;
-}
-.Liste{
-  grid-column-start: 1;
-  grid-row-start:1;
-  background-color: rgba(226, 180, 127, 0.3);
-  border:solid;
-  border-color: brown;
-  border-width:15px;
-  width:100%;
-  height:100vh;
-  overflow: scroll;
-}
-
-.Product{
-  float:left;
-  margin : 3%;
-  width:25%;
-}
-.Product p, .Product h3{
-  margin-top: -5px;
-  width:150px;
-}
-#panier1{
-  grid-column-start: 2;
-  grid-row-start:1;
-  width:80%;
-  margin:auto;
-}
-
-#panier2{
-  grid-column-start: 1;
-  grid-column-end: 2;
-  grid-row-start:1;
-  width:80%;
-  height: 100%;
-  margin:auto;
-}
-#panier2 form div{
-  margin:4%;
-  margin-left: 35%;
-}
-#panier2 button{
-  margin:4%;
-  margin-left: 35%;
-}
-#panier2 form{
-  border:solid;
-  border-color:tan;
-  margin:4%;
-}
-
-#panier3{
-  height:100vh;
-}
-
-.panier h1{
-  text-align: center;
-  font-weight: bold;
-}
-.panier p{
-  font-weight: bold;
-}
-.panier li{
-  margin-left:15%;
-}
-.panier h1{
-  text-align: center;
-}
-.panier button{
-  position: center;
-  width:20%;
-}
-
-
-
-.Ariane{
-  margin:auto;
-  margin-left: 25%;
-}
-.ligne{
-  width:21%;
-  height: 2px;
-  background-color: black;
-  float:left;
-  margin-left:2%;
-  margin-right:2%;
-  margin-bottom: 10%;
-  margin-top: 10%;
-}
-.point{
-  width:10px;
-  height:10px;
-  background-color: white;
-  border:solid;
-  border-color: black;
-  border-width:1px;
-  border-radius: 50%;
-  float: left;
-  margin-bottom: 10%;
-  margin-top: 10%;
-}
-#active{
-  background-color: crimson;
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 82ae522..48a39d4 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,8 +1,5 @@
 
-:root{
-  --meme-wsize: 50vw;
-  --meme-vsize: 26vw;
-}
+
 
 html{
   font-family: Arial, Helvetica, sans-serif;
@@ -14,39 +11,23 @@ html{
 body{
   display: grid;
   width:100%;
-  grid-template-columns: 5% 1fr 5%;
+  grid-template-columns: 10vw 80vw 10vw;
   grid-template-rows: auto auto auto;
   grid-auto-rows: minmax(auto, auto);
-  background:linear-gradient(lightgray, sandybrown);
+  background:linear-gradient(lightgray, #775cff);
 }
 
-header{
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  position: static;
+
+main{
+  grid-column-start: 2;
+  grid-column-end: 2;
+  grid-row-start: 2;
+  grid-row-end: 2;
+  width: 100%;
+  background: rgba(255, 0, 0, 0.1);
+  z-index:3;
 }
 
-.rotate{
-  z-index:1;
-  pointer-events: none;
-}
-.rotate2{
-  z-index:1;
-  pointer-events: none;
-}
-.page{
-  grid-column-start: 1;
-  grid-column-end: 4;
-  background:linear-gradient(rgb(189, 184, 184), sandybrown);
-  z-index:2;
-
-  display: grid;
-  grid-template-columns: 10vw, 80vw, 10vw;
-  grid-template-rows: 5%, auto, 5%;
-  grid-auto-rows: minmax(auto, auto);
-}
 .pubG{
   grid-column-start : 1;
   grid-column-end: 1;
@@ -54,7 +35,7 @@ header{
   grid-row-end: 2;
   z-index:3;
   background-color: red;
-  margin:4%;
+  margin:1%;
 }
 .pubD{
   grid-column-start : 3;
@@ -63,21 +44,8 @@ header{
   grid-row-end: 2;
   z-index:3;
   background-color: green;
-  margin-top: 4%;
-  padding-right: 4%;
+}
 
-}
-main{
-  grid-column-start: 2;
-  grid-column-end: 3;
-  grid-row-start: 2;
-  grid-row-end: 2;
-  width: 97%;
-  background: rgba(255, 0, 0, 0.1);
-  margin-left:1.5%;
-  margin-right:1.5%;
-  z-index:3;
-}
 
 
 @media only screen and (max-width: 600px) {
diff --git a/index.php b/index.php
index f79d170..ab5a5a7 100755
--- a/index.php
+++ b/index.php
@@ -2,7 +2,7 @@
     include_once("config.php");
 // on tente de se connecter a la base de donnees
 
-    ?>
+?>
 <!Doctype html>
 <html lang="fr">
     <head>
@@ -12,64 +12,66 @@
         <link rel="stylesheet" href="css/header.css" >
         <link rel="stylesheet" href="css/style.css" >
         <link rel="stylesheet" href="css/index.css" >
-        <link rel="stylesheet" href="css/cat_all.css" >
     </head>
     <body>
         <?php include("header.php");?>
-        
-        <div class="page">
-        <a class=pubG href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
-            <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
-            <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
-        </a>
-            <main>
+        <div class=pubG>
+            <a href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
+                <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
+                <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
+            </a>
+        </div>
+        <main>
+            <div class="page">
                 <section class=Liste>
-                    <div class="Product">
-                        <img src="img/meme/bouton.jpg" class=meme height="500vw" width="100%">
+                    <div class="memeContainer">
+                        <img src="img/meme/bouton.jpg" class=meme>
                     </div>
-                    <div class="Product">
-                        <img src="img/meme/DecouvreSodaraMeme.jpg" class=meme  height="500vw" width="500vw">
+                    <div class="memeContainer">
+                        <img src="img/meme/DecouvreSodaraMeme.jpg" class=meme>
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/insulit.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/matrix.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/megamindSoda.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/mort.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/shitting.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/sodarameme.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/sodaramemev3.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/SodaSupHaribo.png" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/toiletramel.jpg" class=meme alt="" height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/uno.jpg" class=meme height="500vw" width="500vw">
                     </div>
-                    <div class="Product">
+                    <div class="memeContainer">
                         <img src="img/meme/sodabaguette.png" class=meme height="500vw" width="500vw">
                     </div>
                                                                                       
                 </section>
-            </main>
-        <a class=pubD href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
-            <img src="img/sodaramel.png" height="100px" width="100px" >
-            <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
-        </a>
+            </div>
+        </main>
+        <div class=pubD>
+            <a href="https://dwarves.iut-fbleau.fr/~catanese/SAE_WEB_2022/index.html" >
+                <img src="img/sodaramel.png"  alt="" height="100px" width="100px" >   
+                <h5>Une glycémie trop basse venez voir notre boutique de sodaramel</h5>
+            </a>
         </div>
         <?php include("footer.php");?>
     </body>
\ No newline at end of file