diff --git a/public/bibliotheque.php b/public/bibliotheque.php
index 32f044148427fdd1d59dbcd2e73b56192b67dda2..8b373c2867accca841f019a67a676c89924aae6c 100644
--- a/public/bibliotheque.php
+++ b/public/bibliotheque.php
@@ -42,8 +42,7 @@ urlHasArgument();
 
 
 <html>
-<?php generateHeader('Bibliothèque');
-		generateUserBanner();?>
+<?php generateHeader('Bibliothèque');?>
 <body onload="startviewer()">
 	<!-- génération des bannières -->
 	<?php
diff --git a/public/css/customCss.css b/public/css/customCss.css
index 933cac8c3e1792479c22eed75682ce2f20e68761..ffdd2355339f17361404386d0a2c79535a39ce79 100644
--- a/public/css/customCss.css
+++ b/public/css/customCss.css
@@ -115,6 +115,12 @@
   color: yellow;
 }
 
+.etoile_remove {
+  width: 1vw;
+  height: 1vw;
+  margin-bottom: 0.75vw;
+  margin-right: 0.5vw;
+}
 
 
 @keyframes appearcontent {
diff --git a/public/image_alea.php b/public/image_alea.php
index c01339f431af9a89804687da3914054168ac34a9..be33faf5d09766582e667e23a4ed496add858937 100644
--- a/public/image_alea.php
+++ b/public/image_alea.php
@@ -30,6 +30,13 @@ urlHasArgument();
 
 ?>
 
+<?php
+	$url_alea = 'https://images-api.nasa.gov/search?year_start=2007&page='.random_int(0,99);
+	$resJSON = retrieveJsonFromUrl($url_alea);
+
+	$image = $resJSON->{'collection'}->{'items'}[random_int(0, 99)];
+	// var_dump($image);
+	?>
 
 
 <html>
@@ -37,37 +44,40 @@ urlHasArgument();
 	generateHeader('Image Alea');
 	generateUserbanner();
 ?>
-<body style="background-image:url('./ressources/background/test2.jpeg'); text-align: center">
+<body style="background-image:url('./ressources/background/test2.jpeg'); text-align: center" onload="initiateCDC(<?php echo "'".$_SESSION['id_user']."'"; ?>, <?php echo "'".$image->{'data'}[0]->{'nasa_id'}."'"; ?>)">
 	<!-- génération des bonnières -->
 	<?php
 	generateNavBar('image_alea');
 	?>
 
 	<h1 class="titre" style="text-align: center"> Image Aleatoire de la bibliotheque : </h1>
-	<?php
-	$url_alea = 'https://images-api.nasa.gov/search?year_start=2007&page='.random_int(0,99);
-	$resJSON = retrieveJsonFromUrl($url_alea);
-
-	$image = $resJSON->{'collection'}->{'items'}[random_int(0, 99)];
-	
-	// var_dump($image);
-	?>
 	<div class="view container-fluid">
 
-		<div class="hover-container" style="margin: 3px">
+		<div class="hover-container">
 			<img class="img-fluid" style="margin: 4px" src=<?php echo $image->{'links'}[0]->{'href'} ?>>
 			<div class="content">
-				<div class="text scrollbar">
+				<div class="text scrollbar" style="height: calc(100% - 80px);">
 					<h4><?php echo $image->{'data'}[0]->{'title'} ?></h4>
 					<p style="font-size: 15px"><?php echo $image->{'data'}[0]->{'description'} ?></p>
 				</div>
-				<div class="actionrow" style="left: -120px;">
+				<div class="actionrow">
 					<form method="POST" action="download.php" target="_blank">
 						<input type="hidden" name="urlget" value=<?php echo $image->{'href'} ?>>
 						<input type="hidden" name="nasa_id" value=<?php echo $image->{'data'}[0]->{'nasa_id'} ?>>
 						<input type="hidden" name="title" value=<?php echo $image->{'data'}[0]->{'title'} ?>>
 						<input type="hidden" name="preview" value=<?php echo $image->{'links'}[0]->{'href'} ?>>
-						<input type="image" name="submit" alt="Submit" class="download" width="13%" src="./ressources/icons/dwnld.png" onmouseover="this.src='./ressources/icons/dwnldVert.png'" onmouseout="this.src='./ressources/icons/dwnld.png'">
+						<table style="margin-right:5%"><tbody><tr><td align="left" width="10%">
+						<input type="image" name="submit" alt="Submit" class="download" width="100%" src="./ressources/icons/dwnld.png" onmouseover="this.src='./ressources/icons/dwnldVert.png'" onmouseout="this.src='./ressources/icons/dwnld.png'"></td>
+						<td width="61%"></td>
+						<td width="19%"></td>
+						<td align="right" width="10%">
+							<?php if (isset($_SESSION["id_user"])): ?>
+					<div id="emplacementCDC"></div>
+					<?php endif; ?>
+				</td>
+			</tr>
+		</tbody>
+	</table>
 					</form>
 				</div>
 			</div>
@@ -81,4 +91,4 @@ urlHasArgument();
 
 	<?php generateFooter(); ?>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/js/connexion.js b/public/js/connexion.js
index 6d0916cefb2ac7e188a9d660fc7f2b6c32f195c3..f2f6f374c4172030a520e01e29f98655061f122f 100644
--- a/public/js/connexion.js
+++ b/public/js/connexion.js
@@ -28,8 +28,13 @@ function fenetreModalFermee(fenetreModal)
     console.log("modal = connexion");
   }
   
+  
+  document.getElementById('logoPhp').setAttribute('href', 'index.php?modal=' + modal);
   document.getElementById('indexPhp').setAttribute('href', 'index.php?modal=' + modal);
   document.getElementById('imageRandomPhp').setAttribute('href', 'image_alea.php?modal=' + modal);
   document.getElementById('bibliothequePhp').setAttribute('href', 'bibliotheque.php?modal=' + modal);
 
-};
\ No newline at end of file
+  
+
+};
+
diff --git a/public/js/picture_browser.js b/public/js/picture_browser.js
index bcd7742d366df65f54244c22550e6c460e3eb863..e9729901ff5933229012d63be999c258561eef2e 100644
--- a/public/js/picture_browser.js
+++ b/public/js/picture_browser.js
@@ -372,6 +372,15 @@ function switchCDCbutton(user, encodedId, ancienEtat) {
 	}
 }
 
+
+// fonction appelée au chargement de image_alea.php pour démarrer les infos des coups de coeur
+function initiateCDC(user, Id) {
+	console.log("COUCOU");
+	var encodedId = stringToIntList(Id);
+	console.log(encodedId);
+	document.getElementById('emplacementCDC').innerHTML = '<div id="emplacementCDC_'+encodedId+'"><img alt="Coup de coeur" width="105%" style="cursor: pointer;" onclick="switchCDCbutton(' + user + ',\'' + encodedId + '\',\'blanc\')" src="./ressources/icons/coeurBlanc.png"></img></div>';
+}
+
 function isInReviewlist(id) {
 	var liste = $('#' + 'Reviewlist' + " li");
 	var encoded_id = stringToIntList(id);
@@ -390,6 +399,7 @@ function isInReviewlist(id) {
 
 
 function updateEtoile(user, encoded_id, nbEtoile, option) {
+	icon_etoile = '<img class="etoile_remove" style="cursor: pointer;" onclick="remove_etoile(\'' + user + '\',\'' + encoded_id + '\')" src="./ressources/icons/croix_blanche.png" onmouseout="this.src=\'./ressources/icons/croix_blanche.png\'" onmouseover="this.src=\'./ressources/icons/croix_rouge.png\'">';
 
 	if (nbEtoile >= 5) {
 		console.log(nbEtoile);
@@ -398,7 +408,8 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 			'<span class="etoile" title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
 			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
 			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
-			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
+			icon_etoile;
 		
 		if (option == 'update') {
 			ajaxRemoveReview(user, encoded_id);
@@ -411,7 +422,8 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 			'<span class="etoile" title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
 			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
 			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
-			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
+			icon_etoile;
 		
 		if (option == 'update') {
 			ajaxRemoveReview(user, encoded_id);
@@ -424,7 +436,8 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
 			'<span class="etoile" title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
 			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
-			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
+			icon_etoile;
 		
 		if (option == 'update') {
 			ajaxRemoveReview(user, encoded_id);
@@ -437,7 +450,8 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
 			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
 			'<span class="etoile" title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
-			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
+			icon_etoile;
 		
 		if (option == 'update') {
 			ajaxRemoveReview(user, encoded_id);
@@ -450,7 +464,8 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
 			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
 			'<span title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
-			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+			'<span class="etoile" title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>' +
+			icon_etoile
 		
 		if (option == 'update') {
 			ajaxRemoveReview(user, encoded_id);
@@ -472,3 +487,13 @@ function updateEtoile(user, encoded_id, nbEtoile, option) {
 	}
 }
 
+function remove_etoile(user, encoded_id) {
+	document.getElementById('emplacementEtoile_' + encoded_id).innerHTML =	
+			'<span title="5 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 5, \'update\')">★</span>' + 
+			'<span title="4 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 4, \'update\')">★</span>' +
+			'<span title="3 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 3, \'update\')">★</span>' +
+			'<span title="2 étoiles" onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 2, \'update\')">★</span>' +
+			'<span title="1 étoile"  onclick="updateEtoile(\'' + user + '\',\'' + encoded_id + '\', 1, \'update\')">★</span>';
+	ajaxRemoveReview(user, encoded_id);
+}
+
diff --git a/public/js/picture_displayer.js b/public/js/picture_displayer.js
index 5c7158d39bb1befcd8a5c2edd50c44b88237a8c3..680b6da4a0f98170af7f90bc14c8a2099f69a45b 100644
--- a/public/js/picture_displayer.js
+++ b/public/js/picture_displayer.js
@@ -50,6 +50,54 @@ var displayer = {
 
 
 
+var displayerMoyReview = {
+
+	startdisplay: function(idToDat, whereToDisplay) {
+		var liste = $('#'+idToDat+" li");
+
+		$('#'+whereToDisplay).html('<div id="'+whereToDisplay+'row" class="row"></div>');
+		liste.each(function() {
+			var currentID = intListToString(this. getElementsByClassName('idPhoto')[0].innerHTML);
+			var moyenne = this.getElementsByClassName('moyenne')[0].innerHTML;
+			console.log("id : "+currentID+" ; moyenne : "+moyenne);
+			requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/asset/'+currentID, function(json) {
+				$('#'+whereToDisplay+'row').append('<div class="col"><img width=300 src="'+json.collection.items[2].href+'"><p>Cette photo à été notée avec une moyenne de '+displayerMoyReview.troncate(moyenne)+' étoiles</p></div>')
+			});
+		});
+
+	},
+
+	troncate: function(moy) {
+		var length = 3;
+		return moy.substring(0, length)
+	}
+}
+
+
+
+
+
+var displayerNbCDC = {
+
+	startdisplay: function(idToDat, whereToDisplay) {
+		var liste = $('#'+idToDat+" li");
+
+		$('#'+whereToDisplay).html('<div id="'+whereToDisplay+'row" class="row"></div>');
+		liste.each(function() {
+			console.log("coucou");
+			var currentID = intListToString(this.getElementsByClassName('idPhoto')[0].innerHTML);
+			var nbCDC = this.getElementsByClassName('nbCDC')[0].innerHTML;
+			console.log("id : "+currentID+" ; nbCDC : "+nbCDC);
+			requestHandler.retrieveJsonFromUrl('https://images-api.nasa.gov/asset/'+currentID, function(json) {
+				$('#'+whereToDisplay+'row').append('<div class="col"><img width=300 src="'+json.collection.items[2].href+'"><p>Cette photo a '+nbCDC+' coups de coeur</p></div>');
+			});
+		});
+
+	}
+}
+
+
+
 
 
 
@@ -105,4 +153,15 @@ var requestHandler = {
 function startDisplayer(IDsource, IDdestination) {
 	console.log("démarrage");
 	displayer.startdisplay(IDsource, IDdestination);
+}
+
+
+function startDisplayerNbCDC(IDsource, IDdestination) {
+	console.log("démarrage displayer CDC");
+	displayerNbCDC.startdisplay(IDsource, IDdestination);
+}
+
+function startDisplayerMoyReview(IDsource, IDdestination) {
+	console.log("démarrage du displayer Moyenne des reviews");
+	displayerMoyReview.startdisplay(IDsource, IDdestination);
 }
\ No newline at end of file
diff --git a/public/leaderboard.php b/public/leaderboard.php
index b7164c0f18006b6a46b801391bb6272435027dae..04127bc447c258a65ed230220e4474de5ccadaed 100644
--- a/public/leaderboard.php
+++ b/public/leaderboard.php
@@ -45,7 +45,7 @@ urlHasArgument();
 <!DOCTYPE html>
 <html>
 <?php generateHeader('leaderboard'); ?>
-<body onload="startDisplayer('NoteLeaderboard', 'NoteLeaderboardDisplayArea'); startDisplayer('CDCLeaderboard', 'CDCLeaderboardDisplayArea')" style="text-align: center;
+<body onload="startDisplayerMoyReview('NoteLeaderboard', 'NoteLeaderboardDisplayArea'); startDisplayerNbCDC('CDCLeaderboard', 'CDCLeaderboardDisplayArea')" style="text-align: center;
     background-image:url('./ressources/background/test2.jpeg');
      background-repeat: no-repeat; 
      background-attachment: fixed;">
@@ -59,7 +59,7 @@ urlHasArgument();
 		$test = $orderRepository->fetchAvgNoteOrder();
 
 		foreach ($test as $elem): ?>
-			<li><?php echo $elem->getIdPhoto(); ?></li>
+			<li><div class="idPhoto"><?php echo $elem->getIdPhoto(); ?></div><div class="moyenne"><?php echo $elem->getNote(); ?></div></li>
 		<?php endforeach; ?>
 	</div>
 
@@ -68,7 +68,7 @@ urlHasArgument();
 		$test = $orderRepository->fetchCDCOrder();
 
 		foreach ($test as $elem): ?>
-			<li><?php echo $elem->getIdPhoto(); ?></li>
+			<li><div class="idPhoto"><?php echo $elem->getIdPhoto(); ?></div><div class="nbCDC"><?php echo $elem->getNbCDC(); ?></div></li>
 		<?php endforeach; ?>
 	</div>
 
diff --git a/public/ressources/icons/croix_blanche.png b/public/ressources/icons/croix_blanche.png
new file mode 100644
index 0000000000000000000000000000000000000000..a44f249214649c707f9c24750d64d278bbd2c0c5
Binary files /dev/null and b/public/ressources/icons/croix_blanche.png differ
diff --git a/public/ressources/icons/croix_rouge.png b/public/ressources/icons/croix_rouge.png
new file mode 100644
index 0000000000000000000000000000000000000000..d3fb0c6ad0f0a1aa4bd3a211baa2f2f23495a40c
Binary files /dev/null and b/public/ressources/icons/croix_rouge.png differ
diff --git a/public/utils/content.php b/public/utils/content.php
index 0dc18bfed179ea65af7d4194aabfc59604794441..268b1e73b277a4989ce7d2fc051c9ff4bb8f255a 100644
--- a/public/utils/content.php
+++ b/public/utils/content.php
@@ -199,7 +199,9 @@ function generateNavBar($page){
 	// pour mettre en surbrillance l'onglet sélectionné
 	echo 
 		'<nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top" style="margin-top:0px;font-family:Abang">
-			<a class="navbar-brand" href="index.php"><img src="./ressources/logo/logo_transparent_recadre.png" height="36" width="67"></a>
+			<a class="navbar-brand" id=logoPhp href="index.php">
+				<img src="./ressources/logo/logo_transparent_recadre.png" height="36" width="67">
+			</a>
 			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
     		<span class="navbar-toggler-icon"></span>
   		</button>