diff --git a/SRC/public/css/app.css b/SRC/public/css/app.css
index 5550625..dc93351 100755
--- a/SRC/public/css/app.css
+++ b/SRC/public/css/app.css
@@ -2818,9 +2818,28 @@ fieldset[disabled] .btn-default.active {
   background-color: #333333;
 }
 .btn-primary {
-  color: #ffffff;
+  /*color: #ffffff;
   background-color: #337ab7;
-  border-color: #2e6da4;
+  border-color: #2e6da4;*/
+  
+   /*border-radius*/
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 1px;
+    border-radius: 3px;
+    color: white;
+    font-size: 12px;
+    font-weight : normal;
+    border-top: 1px solid #3B96D7;
+    padding: 3%;
+    background: rgb(98,186,236);
+    background: -moz-linear-gradient(top, rgba(98,186,236,1) 0%, rgba(18,128,211,1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(98,186,236,1)), color-stop(100%,rgba(18,128,211,1)));
+    background: -webkit-linear-gradient(top, rgba(98,186,236,1) 0%,rgba(18,128,211,1) 100%);
+    background: -o-linear-gradient(top, rgba(98,186,236,1) 0%,rgba(18,128,211,1) 100%);
+    background: -ms-linear-gradient(top, rgba(98,186,236,1) 0%,rgba(18,128,211,1) 100%);
+    background: linear-gradient(top, rgba(98,186,236,1) 0%,rgba(18,128,211,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62baec', endColorstr='#1280d3',GradientType=0 );
+
 }
 .btn-primary:hover,
 .btn-primary:focus,
@@ -2829,7 +2848,14 @@ fieldset[disabled] .btn-default.active {
 .btn-primary.active,
 .open > .dropdown-toggle.btn-primary {
   color: #ffffff;
-  background-color: #286090;
+ background: rgb(55,148,216);
+    background: -moz-linear-gradient(top, rgba(55,148,216,1) 0%, rgba(3,81,184,1) 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(55,148,216,1)), color-stop(100%,rgba(3,81,184,1)));
+    background: -webkit-linear-gradient(top, rgba(55,148,216,1) 0%,rgba(3,81,184,1) 100%);
+    background: -o-linear-gradient(top, rgba(55,148,216,1) 0%,rgba(3,81,184,1) 100%);
+    background: -ms-linear-gradient(top, rgba(55,148,216,1) 0%,rgba(3,81,184,1) 100%);
+    background: linear-gradient(top, rgba(55,148,216,1) 0%,rgba(3,81,184,1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3794d8', endColorstr='#0351b8',GradientType=0 );
   border-color: #204d74;
 }
 .btn-primary:active,
diff --git a/SRC/public/css/referent.css b/SRC/public/css/referent.css
index b4a32ce..20f0256 100644
--- a/SRC/public/css/referent.css
+++ b/SRC/public/css/referent.css
@@ -1,7 +1,5 @@
 body
 {
-margin : auto;
-
 background-image:url("../pictures/setting_picture/fond.jpg");
   background-attachment:fixed;
   background-repeat:no-repeat;
@@ -9,24 +7,67 @@ background-image:url("../pictures/setting_picture/fond.jpg");
   background-size:cover;
 }
 
-.ccmd3
+.listg
 {
+	background: #a7cfdf; /* Old browsers */
+background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
+background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
+background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
+background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* IE10+ */
+background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
+
 	margin: 1%;
 	padding: 1%;
-	background: white;
 	border-radius: 7px;
 	border: 1px solid grey;
-	box-shadow: 1px 1px 2px dimgrey;
+	box-shadow: 0px 0px 2px dimgrey;
 }
 
-.ccmd9
+.listg legend
+{
+	color: white;
+}
+
+.listRecherche
+{
+
+}
+
+.filtred
+{
+	background: #eeeeee; /* Old browsers */
+	background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%); /* IE10+ */
+	background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%); /* W3C */
+
+	padding: 1%;
+	border-radius: 3px;
+	border: 1px solid grey;
+	box-shadow: 0px 0px 2px dimgrey;
+}
+
+.princ
 {
 	margin: 1%;
 	padding: 1%;
 	background: white;
 	border-radius: 7px;
 	border: 1px solid grey;
-	box-shadow: 1px 1px 2px dimgrey;
+	box-shadow: 0px 0px 2px dimgrey;
 	width : 40%;
 }
 
+.jeux
+{
+	margin: 1%;
+	padding: 1%;
+	background: white;
+	border-radius: 7px;
+	border: 1px solid grey;
+	box-shadow: 0px 0px 2px dimgrey;
+}
+
diff --git a/SRC/resources/views/referent.blade.php b/SRC/resources/views/referent.blade.php
index 59a3fec..fbc5cd3 100755
--- a/SRC/resources/views/referent.blade.php
+++ b/SRC/resources/views/referent.blade.php
@@ -3,136 +3,132 @@
 @section('content')
 <link href="css/referent.css" rel="stylesheet" type="text/css"/>
 <br>
-<div class="col-md-3 ccmd3">
-<legend>Créer une liste oeuvre:</legend>
-<form class="form-inline" method="POST" role="form" action="addListeOeuvre">
-  <input type="hidden" name="idUser" value="{{ $me->id }}">
-  <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
-  <div class="form-group">
-    <div class="input-group">
-      <input type="text" class="form-control" required="required" name="name" placeholder="Ajouter une liste d'oeuvre">
-    </div>
-  </div>
-  <button type="submit" class="btn btn-primary">Ajouter</button>
-</form>
-
-<br><br>
-<legend>Mes listes d'oeuvres:</legend>
-<table class="table table-hover">
-  @foreach ($listeoeuvres as $listeoeuvre)
-  <tr class="active listeoeuvre">
-    <form method="POST" role="form" action="deleteListeOeuvre">
-    <input type="hidden" name="idUser" value="{{ $me->id }}">
-    <input type="hidden" class="idListeOeuvre" name="idListeOeuvre" value="{{ $listeoeuvre->id }}">
-    <input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
-		<td>{{$listeoeuvre->nom}}</td>
-		<td><button type="submit" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash"></span></a></td>
-	</tr>
-  </form>
-  @endforeach
-</table>
+<div class="col-md-3 listg">
+	<legend>Créer une liste oeuvre:</legend>
+	<form class="form-inline" method="POST" role="form" action="addListeOeuvre">
+  		<input type="hidden" name="idUser" value="{{ $me->id }}">
+  		<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
+  		<div class="form-group">
+    		<div class="input-group">
+      			<input type="text" class="form-control" required="required" name="name" placeholder="Ajouter une liste d'oeuvre">
+    		</div>
+ 		</div>
+  		<button type="submit" class="btn btn-primary">Ajouter</button>
+	</form>
+	<br><br>
+	<legend>Mes listes d'oeuvres:</legend>
+	<table class="table table-hover">
+ 	@foreach ($listeoeuvres as $listeoeuvre)
+		<tr class="active listeoeuvre">
+    		<form method="POST" role="form" action="deleteListeOeuvre">
+    			<input type="hidden" name="idUser" value="{{ $me->id }}">
+    			<input type="hidden" class="idListeOeuvre" name="idListeOeuvre" value="{{ $listeoeuvre->id }}">
+    			<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />
+				<td>{{$listeoeuvre->nom}}</td>
+				<td>
+					<button type="submit" class="btn btn-sm btn-danger">
+					<span class="glyphicon glyphicon-trash"></span></a>
+				</td>
+			</form>
+		</tr>
+	@endforeach
+	</table>
 </div>
 
-<div class="col-md-9 ccmd9">
+<div class="col-md-9 princ">
+	<div class="panel panel-default col-md-9"><br>
+  		<ul class="nav nav-tabs">
+    		<li role="presentation" class="active"><a href="#">Ma sélection</a></li>
+    		<li role="presentation"><a href="#">Ajouter des images</a></li>
+ 	 	</ul>
+  		<br><br><br><br>
+	</div>
+	
+	<br><br><br>
+	<legend>Falbala: (Activer ou Désactiver la listeoeuvre)</legend>
 
+	<div class="col-md-9">
+		<span style="float: right">Sélectionner tout -- Annuler sélection</span>
+		<br>
+		<div class="panel panel-default">
+  			<div class="panel-body" id="oeuvrePic">
 
-<div class="panel panel-default col-md-9"><br>
-  <ul class="nav nav-tabs">
-    <li role="presentation" class="active"><a href="#">Ma sélection</a></li>
-    <li role="presentation"><a href="#">Ajouter des images</a></li>
-  </ul>
-  <br><br><br><br>
+				<!-- // TODO -->
+  			<button style="float: right" class="btn btn-primary">Enregistrer</button>
+			</div>
+		</div>
+	</div>
 </div>
 
-<div class="col-md-3">
-
-<legend>Mes jeux associés</legend>
-<div class="col-md-8">
-<select class="form-control">
-  <option selected="selected">Tous les éléments</option>
-  <option>1</option>
-  <option>2</option>
-</select>
-</div>
-<button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
-<br><br>
-
-<table class="table">
-  <tr>
-    <td>Montagne: noire</td>
-    <td>Supprimer</td>
-  </tr>
-  <tr>
-    <td>couleur: bleu</td>
-    <td>Supprimer</td>
-  </tr>
-</table>
-
+<div class="col-md-3 jeux">
+	<legend>Mes jeux associés</legend>
+	<div class="col-md-8">
+		<select class="form-control">
+  			<option selected="selected">Tous les éléments</option>
+  			<option>1</option>
+  			<option>2</option>
+		</select>
+	</div>
+	<button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
+	<br><br>
+	<table class="table">
+  		<tr>
+    		<td>Montagne: noire</td>
+    		<td>Supprimer</td>
+  		</tr>
+  		<tr>
+    		<td>couleur: bleu</td>
+    		<td>Supprimer</td>
+  		</tr>
+	</table>
 </div>
 
-<br><br><br>
+<div class="col-md-3 filtred">
+	<legend>Ajouter un filtre:</legend>
+	<h4>Par critère:</h4>
+	<select class="form-control">
+  		<option selected="selected">Selectionner catégorie</option>
+  		<option>1</option>
+  		<option>2</option>
+	</select>
+	<select class="form-control">
+  		<option selected="selected">Tous les éléments</option>
+  		<option>1</option>
+  		<option>2</option>
+	</select>
+	<button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
+	<br><br>
 
-<legend>Falbala: (Activer ou Désactiver la listeoeuvre)</legend>
-
-<div class="col-md-9">
-
-<span style="float: right">Sélectionner tout -- Annuler sélection</span><br>
-<div class="panel panel-default">
-  <div class="panel-body" id="oeuvrePic">
-
-<!-- // TODO -->
-
-  <button style="float: right" class="btn btn-primary">Enregistrer</button>
-  </div>
+	<h4>Par mot clé:</h4>
+	<form class="form-inline">
+  		<div class="col-sm-8 form-group">
+    		<div class="input-group">
+      			<input type="text" class="form-control" id="exampleInputAmount" placeholder="Par mot clé">
+    		</div>
+  		</div>
+ 		<button type="submit" class="btn btn-primary">Ajouter</button>
+		<br><br>
+		<legend>Mes filtres</legend>
+		<table class="table">
+			<tr>
+				<td>Montagne: noire</td>
+				<td>Supprimer</td>
+			</tr>
+			<tr>
+				<td>couleur: bleu</td>
+				<td>Supprimer</td>
+			</tr>
+			<tr>
+				<td>âge: 10 ans</td>
+				<td>Supprimer</td>
+			</tr>
+		</table>
+	</form>
 </div>
 
+<div class="col-md-3 listRecherche">
+	<p>Liste, résultat de recherche</p>
 </div>
-</div>
-
-<div class="col-md-3 ccmd3">
-
-<legend>Ajouter un filtre:</legend>
-<h4>Par critère:</h4>
-<select class="form-control">
-  <option selected="selected">Selectionner catégorie</option>
-  <option>1</option>
-  <option>2</option>
-</select>
-
-<select class="form-control">
-  <option selected="selected">Tous les éléments</option>
-  <option>1</option>
-  <option>2</option>
-</select>
-<button style="margin-top: 5px" class="btn btn-primary">Ajouter</button>
-<br><br>
-
-<h4>Par mot clé:</h4>
-<form class="form-inline">
-  <div class="col-sm-8 form-group">
-    <div class="input-group">
-      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Par mot clé">
-    </div>
-  </div>
-  <button type="submit" class="btn btn-primary">Ajouter</button>
-
-<br><br>
-<legend>Mes filtres</legend>
-
-<table class="table">
-	<tr>
-		<td>Montagne: noire</td>
-		<td>Supprimer</td>
-	</tr>
-	<tr>
-		<td>couleur: bleu</td>
-		<td>Supprimer</td>
-	</tr>
-	<tr>
-		<td>âge: 10 ans</td>
-		<td>Supprimer</td>
-	</tr>
-</table>
-</div>
+	
 @endsection