diff --git a/main.css b/main.css
index 9e6b0eb..34077ec 100644
--- a/main.css
+++ b/main.css
@@ -90,8 +90,8 @@ body {
     overflow: auto;
     flex: 1;
     background-clip: border-box;
-    padding-right: 5%;
-    padding-left: 5%;
+    padding-right: 2%;
+    padding-left: 2%;
 }
 
 /* content : le cadre de base du centre de notre site
@@ -110,12 +110,27 @@ body {
     représente le contenue centrale de la page.
 */
 .recettes {
-    --UneVariable: calc( 100vw / 500 );
     display: grid;
-    grid-template-columns: repeat(var(--UneVariable), 1fr);
+    grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
-    grid-auto-rows: minmax(300px, auto);
-    grid-auto-columns: auto;
+    /* grid-auto-rows: minmax(300px, auto);
+    grid-auto-columns: auto;*/
+}
+
+@media screen and (max-width : 1200px) {
+    .recettes {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width : 600px) {
+    .recettes {
+        grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sidebar {
+        display: none;
+    }
 }
 
 /* Classe recette icone :
@@ -128,12 +143,12 @@ body {
     padding: 15px;
     vertical-align: middle;
     box-shadow: 3px 5px 5px black;
-    width: 500px;
+    max-width: 400px;
 }
 
 .recette-preview-image{
-    max-width: calc( 10vh + 10vw );
-    max-height: calc( 10vh + 10vw );
+    max-width: calc( 5vh + 5vw );
+    max-height: calc( 5vh + 5vw );
     border: 1px solid rgb(252, 223, 57);
     border-radius: 25px;
 }
diff --git a/recette.php b/recette.php
index ef894be..2a75769 100644
--- a/recette.php
+++ b/recette.php
@@ -1,15 +1,13 @@
 <div class="recettes">
-    <a href="recette-en-dur.php">
-        <div class="recette-icone"> 
-            <img class="recette-preview-image" src="random-recette.jpg">
-        </div>
+    <a class="recette-icone" href="recette-en-dur.php">
+        <img class="recette-preview-image" src="random-recette.jpg">
     </a>
-    <div class="recette-icone"> 2 </div>
-    <div class="recette-icone"> 3 </div>
-    <div class="recette-icone"> 4 </div>
-    <div class="recette-icone"> 5 </div>
-    <div class="recette-icone"> 6 </div>
-    <div class="recette-icone"> 7 </div>
-    <div class="recette-icone"> 8 </div>
-    <div class="recette-icone"> 9 </div>
+    <a class="recette-icone" href="recette-en-dur.php"> 2 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 3 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 4 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 5 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 6 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 7 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 8 </a>
+    <a class="recette-icone" href="recette-en-dur.php"> 9 </a>
 </div>
\ No newline at end of file