prend ce design la

main.css

@@ -131,6 +131,33 @@ body {
     /*display:none;*/
 }
 
+.title-site {
+    text-align: center;
+}
+
+.title {
+    width: 100%;
+    height: 50%;
+    font-size: 100px;
+}
+
+.random-proposition {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.recommandation img {
+    max-width: calc( 7vh + 7vw );
+    max-height: calc( 7vh + 7vw );
+}
+
+.line-acceuil {
+    color: #03be90;
+    box-shadow: 20px 6px 8px #007054;
+}
+
 .tag-selected-div {
     flex: 4;
 }
@@ -153,6 +180,8 @@ body {
 }
 
 .search-form {
+    margin-top: .5%;
+    padding: .5% 0 .5% .5%;
     border: 1px solid black;
     border-radius: 20px;
     box-shadow: 0px 0px 10px rgb(131, 131, 131);
@@ -182,7 +211,7 @@ nav {
 
 .tag-unselected {
     background-color: white;
-    
+
 }
 .tag-unselected:hover {
     background-color: #ffa04d;
@@ -440,8 +469,8 @@ ul {
 .formcont form .form-group input {
     width: 95%;
     box-sizing: border-box;
-        font-size:3vmin;
-        padding:1vmin;
+    font-size:3vmin;
+    padding:1vmin;
 
 }
 
@@ -458,12 +487,23 @@ ul {
     box-shadow: 2px 2px 0px #000000;
 }
 
+.btn {
+    padding: .5% 2%;
+    border: 2px solid black;
+    border-radius: 10px;
+    margin-top: .5%;
+    margin-left: .5%;
+    background-color: #ffd9a0;
+}
+
 .btn:hover {
     background-color: #0bbd90;
     box-shadow: none;
+    cursor: pointer;
 }
 
 .form-control {
+    padding: 1%;
     border-radius: 10px;
     box-shadow: 3px 4px 5px #8c8c8c;
 }
@@ -536,6 +576,8 @@ ul {
     border: 1px solid black;
     border-radius: 10px;
     box-shadow: 1px 1px 1px black;
+    margin-top: .25%;
+    margin-bottom: .25%;
 }
 
 .liste-ingr-elem:hover {
@@ -566,6 +608,8 @@ ul {
     border: 1px solid black;
     border-radius: 10px;
     box-shadow: 1px 1px 1px black;
+    margin-top: .25%;
+    margin-bottom: .25%;
 }
 
 .liste-tag-elem:hover {