diff --git a/pima/app/Http/Controllers/ProfilController.php b/pima/app/Http/Controllers/ProfilController.php
index 43919a1d4b34da8f5f0620d4c7dc70050fa47078..25452ad377a3863f0f301aeaa80923406305ad8f 100644
--- a/pima/app/Http/Controllers/ProfilController.php
+++ b/pima/app/Http/Controllers/ProfilController.php
@@ -6,11 +6,14 @@ use Illuminate\Http\Request;
 use App\Http\Requests\FormulaireRequest;
 use App\Message;
 use App\Tool;
+use Auth;
 
 class ProfilController extends Controller
 {
 
-  public function create(){
-    return view('profil');
+  public function create($user){
+    if (Auth::check()){
+      return view('profil',["pseudo=>$user"]);
+    }
   }
 }
diff --git a/pima/public/css/outil.css b/pima/public/css/outil.css
new file mode 100644
index 0000000000000000000000000000000000000000..3bc377546f6c32a360058aaebb04706e46a491c9
--- /dev/null
+++ b/pima/public/css/outil.css
@@ -0,0 +1,30 @@
+.column {
+    float: left;
+    width: 33.33%;
+    background-color: blue;
+}
+.column2{
+  float: left;
+  width: 33.33%;
+  background-color: pink;
+}
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.case{
+  background-color: lightblue;
+  text-align: justify;
+}
+
+@media screen and (max-width: 600px) {
+    .column{
+        width: 100%;
+    }
+    .column2{
+        width: 100%;
+    }
+
+}
diff --git a/pima/resources/views/outil.blade.php b/pima/resources/views/outil.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..fb111b148121472616548405ddcbfbf8c6532b82
--- /dev/null
+++ b/pima/resources/views/outil.blade.php
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <link rel="stylesheet" type="text/css" href="../../public/css/outil.css"/>
+    <style>
+    .column {
+        float: left;
+        width: 33%;
+        background-color: lightblue;
+    }
+    .column2{
+      float: left;
+      width: 33%;
+      background-color: pink;
+      margin-left: .5%;
+      margin-right: .5%;
+    }
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    .case{
+      background-color: lightblue;
+      text-align: justify;
+    }
+
+    @media screen and (max-width: 600px) {
+        .column{
+            width: 100%;
+        }
+        .column2{
+            width: 100%;
+        }
+
+    }
+    </style>
+
+  </head>
+
+  <body>
+
+    <div class="row">
+      <div class="column">
+          <h1> Nom de l'outil </h1>
+          <div class="category">
+            Catégorie
+          </div>
+          <div class="description">
+            Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus.
+          </div>
+        </div>
+
+      <div class="column2">
+          <h1> Nom de l'outil </h1>
+          <div class="category">
+            Catégorie
+          </div>
+          <div class="description">
+            Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus.
+          </div>
+      </div>
+
+      <div class="column">
+          <h1> Nom de l'outil </h1>
+          <div class="category">
+            Catégorie
+          </div>
+          <div class="description">
+            Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus.
+        </div>
+    </div>
+<p>
+  Maintenant on fait appel à des données !
+</p>
+<!--test sur un outil en flat avant de le faire à travers les requêtes -->
+<?php $i=0;
+foreach ($tasks as $task){
+  if ($i%3==0){
+    echo "<p></p><div class='row'> <div class='column'>";?>
+    {{$task}}
+    <?php
+    echo("</div>");}
+  else{
+    if ($i%3==1){
+      echo "<div class='row'> <div class='column2'>";
+      echo $task;
+      echo("</div>");
+    }
+  else{
+    if ($i%3==2){
+      echo "<div class='row'> <div class='column'>";
+      echo $task;
+      echo("</div></div>");
+      }
+  }
+}$i++;
+}
+ ?>
+
+  </body>
+
+</html>
diff --git a/pima/resources/views/profil.blade.php b/pima/resources/views/profil.blade.php
index c76505fc9868cfedc5c37eb64fa131f8b98c51f9..cbc8ba15fee990efc719751a667b0a47c2c749ec 100644
--- a/pima/resources/views/profil.blade.php
+++ b/pima/resources/views/profil.blade.php
@@ -6,60 +6,75 @@ Profil
 
 @section('contenu')
 
-<!--Header des pages-->
-	<header>
-		<nav class="topnav">
-			<ul>
-				<li><a href="#coordonnees">Coordonnées</a></li>
-				<li><a href="#liste_outils">Liste d'outils</a></li>
-				<li><a href="#edit">Édition</a></li>
-			</ul>
-		</nav>
-	</header>
-       
-	<!--Blabla avant découpe -->
+
 
 	<!--Navigation-->
 	
-		<section>
-			<nav id="nav" class="side">
+	<div class="top">
+				<ul>
+					<li><a href="#coordonnees">Coordonnées</a></li>
+					<li><a href="#liste_outils">Liste d'outils</a></li>
+					<li><a href="#edit">Édition</a></li>
+				</ul>
+			</div>
+	<div class="side">
 				<ul>
 					<li><a href="#coordonnees">Coordonnées</a></li>
 					<li><a href="#liste_outils">Liste d'outils</a></li>
 					<li><a href="#edit">Édition</a></li>
 				</ul>
-			</nav>
-		</section>
-		
+	</div>
 		<article>
         	<h1 id="coordonnees">Les coordonnées</h1>
-            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-</p>
+			    <?php /*Connection avec la BDD.*/
+        $con=mysqli_connect("localhost", "root", "","trocentrop");
+	if (mysqli_connect_errno())
+				  {
+				  echo "Failed to connect to MySQL: " . mysqli_connect_error();
+				  }
+
+	if(Auth::check()){/*Récupération des données de l'user*/
+
+		  echo "<p>NOM :".Auth::user()->name."</p>";
+			echo "<p>MAIL :".Auth::user()->email."</p>";
+			echo "<p>TEL :".Auth::user()->telephone."</p>";
+			echo "<p>ADRESSE :".Auth::user()->adresse."</p>";
+	}
+    ?>
             <h1 id="liste_outils">Les outils</h1>
-            	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
+						<div class="row">
+							<div class="column">
+									<h1> Nom de l'outil </h1>
+									<div class="category">
+										Catégorie
+									</div>
+									<div class="description">
+										Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus.
+									</div>
+								</div>
+
+							<div class="column2">
+									<h1> Nom de l'outil </h1>
+									<div class="category">
+										Catégorie
+									</div>
+									<div class="description">
+										Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus. et qu'est ce qu'il se passe si le texte est plus long ? C'est une super bonne question ça mon brave ldg
+									</div>
+							</div>
+
+							<div class="column">
+									<h1> Nom de l'outil </h1>
+									<div class="category">
+										Catégorie
+									</div>
+									<div class="description">
+										Description de l'objet, modèle, format... cadre limité avec suite du texte qui apparait si on passe sa souris dessus.
+								</div>
+						</div>
+					</div>
 
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
-
-Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-</p>
             <h1 id="edit">Les edit</h1>
             	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
@@ -75,8 +90,5 @@ Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. A
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam libero arcu, euismod a scelerisque vel, mattis et nisi. Donec vitae libero faucibus, vehicula sapien id, eleifend ligula. Fusce diam est, gravida non velit non, gravida aliquet ligula. Duis efficitur mi id fringilla facilisis. Quisque in sagittis dolor. Suspendisse rhoncus convallis suscipit. Ut aliquet sodales sapien quis fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc facilisis sapien ac tellus pharetra, sit amet rhoncus velit fringilla. Vestibulum eget diam nunc. Maecenas eros eros, consectetur id gravida ac, luctus non nunc.
 
 Pellentesque ullamcorper massa at sapien fringilla, et lobortis ante bibendum. Aenean dui leo, laoreet in nisi nec, sagittis venenatis velit. Nunc suscipit malesuada finibus. Maecenas pharetra congue aliquet. Nullam eu turpis nulla. Nullam laoreet vehicula ipsum ac convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
-			<!-- Pop les pages à la suite, IL FAUT METTRE DES TITRES STYLES <h1 id=" . "> avec coordonnees, liste_outils et edit -->
 		</article>
-		
-		</section>
-@endsection
\ No newline at end of file
+@endsection
diff --git a/pima/resources/views/template.blade.php b/pima/resources/views/template.blade.php
index 348c993c69ca9a24a38256b6ae749e19a899e7b1..9822fa27fc9159c4b32fb27ab64d3d5234401059 100644
--- a/pima/resources/views/template.blade.php
+++ b/pima/resources/views/template.blade.php
@@ -39,117 +39,106 @@ body {
 	padding: 0px 0px 2px 30px;
 }
 
-
-/* Concerne la barre de navigation de haut de page */
-
-
-.topnav{
-	font-size: 30px;
-    height: 50px;
-	width:100%;
-	position: fixed;
-	margin-bottom: 20px;
-	padding-bottom: 5px;
-	border-bottom: 5px solid grey;
-}
-
-
-.topnav ul {
+.top ul {		/*barre de navigation du haut*/
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
+    background-color: #212F3D;
     position: fixed;
     top: 0;
     width: 100%;
+    border-bottom: 5px solid grey;
 }
 
-.topnav li {
+.top li {
     float: right;
 }
 
-.topnav a {
-  color: #f2f2f2;
-  text-align: center;
-  padding: 14px 16px;
-  text-decoration: none;
-  font-size: 17px;
-}
-
-.topnav a:visited{
-	color:white;
+.top a,.side a{ /*lien dans barre de navigation*/
+    display: block;
+    color: #f2f2f2;
     background-color: #686868;
+    text-align: center;
+    padding: 14px 16px;
     text-decoration: none;
-    padding: 0px 10px 0px 10px;
+    font-size: 21px;
 }
 
-.topnav a:link{
-	color:white;
-    background-color: #686868;
-    text-decoration: none;
-    padding: 0px 10px 0px 10px;
-}
-
-.topnav a:hover{
-	color:white;
-    background-color: #a8a6a6;
-    text-decoration: none;
-    padding: 0px 10px 0px 10px;
-}
-
-/* Barre de navigation de côté style Profil */
-
-nav.side{
-	font-size: 30px;
-    float: left;
-    width: 15%;
-    padding: 20px;
-    height: 100px;
-    margin-right: 20px;
-	position: fixed;
-	overflow: auto;
-	height:100%;
-}
-
-nav.side a:link {
+.top a:hover,.side a:hover{
+	display: block;
     color: white;
-    border-radius: 50px 50px 50px 50px;
-    background-color: #686868;
-    padding: 0px 10px 0px 10px;
-    text-decoration: none;
-}
-
-nav.side a:visited{
-	color:white;
-    border-radius: 50px 50px 50px 50px;
-    background-color: #686868;
+    background-color: #a8a6a6;
+    text-align: center;
+    padding: 14px 16px;
     text-decoration: none;
-    padding: 0px 10px 0px 10px;
+    font-size: 21px;
 }
 
-nav.side ul{
+.side ul { /*sidebar*/
     list-style-type: none;
+    margin: 0;
     padding: 0;
-}
-
-nav.side a:hover {
-    color: white;
-    border-radius: 50px 50px 50px 50px;
-    background-color: #a8a6a6;
-    text-decoration: none;
-    padding: 0px 10px 0px 10px;
+    width: 20%;
+    background-color: #212F3D;
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+    top: 60px;
 }
 
 /* Le contenu des pages */
 
 article{
 	float: right;
-	width: 80%;
+	width: 75%;
 	margin-left: 10px;
 	margin-top: 60px;
 	padding-left: 15px;
 	border-left: 5px solid grey
 }
+
+
+
+
+
+
+
+    .column {
+        float: left;
+        width: 33%;
+        background-color: lightblue;
+				color: black;
+    }
+    .column2{
+      float: left;
+      width: 33%;
+      background-color: pink;
+      margin-left: .5%;
+      margin-right: .5%;
+			color:black;
+    }
+    .row:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+
+    .case{
+      background-color: lightblue;
+      text-align: justify;
+    }
+
+@media screen and (max-width: 600px) {
+	.column{
+		width: 100%;
+	}
+	
+	.column2{
+		width: 100%;
+	}
+}
+
 </style>
     <title>@yield('titre')</title>
 </head>