diff -r d84290f64c4c -r 58ba3ae2d3d9 front_idill/src/mosaic/js/notifications.js
--- a/front_idill/src/mosaic/js/notifications.js	Fri Sep 21 16:13:20 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Sat Sep 22 14:28:35 2012 +0200
@@ -2218,7 +2218,7 @@
 	
 	//Panneau des crédits.
 	//On crée les flèches au niveau du container en cas d'overflow du texte.
-	var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
+	var credits = "<div id='notify_credits'><div id='credits_upArrow_mask' class='credits_masks'></div><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow_mask' class='credits_masks'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
 	
 	//Pied de page des crédits.
 	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>";
@@ -2232,7 +2232,7 @@
 	notify_credits.append(credits_footer);
 	
 	//Elements html contenant les crédits.
-	var credits_elements = "<div id='credits_content'><div id='credits_title' class='credits_text'>" + this.creditsMetadata.title + "<br /></div><div id='credits_subtitle' class='credits_text'><i>" + this.creditsMetadata.subtitle + "</i><br /><br /></div>";
+	var credits_elements = "<div id='credits_content_left' class='credits_content'><div id='credits_title' class='credits_text'>" + this.creditsMetadata.title + "<br /></div><div id='credits_subtitle' class='credits_text'><i>" + this.creditsMetadata.subtitle + "</i><br /><br /></div>";
 	
 	for(var i = 0 ; i < this.tabCredits.length ; i++)
 	{
@@ -2259,6 +2259,15 @@
 		}
 		
 		credits_elements += "<br /></div>"
+		
+		if(i == Math.floor(this.tabCredits.length / 3))
+		{
+			credits_elements += "</div><div id='credits_content_center' class='credits_content'>"
+		}
+		else if(i == Math.floor(this.tabCredits.length * 2 / 3))
+		{
+			credits_elements += "</div><div id='credits_content_right' class='credits_content'>"
+		}
 	}
 	
 	credits_elements += "</div>";
@@ -2290,14 +2299,38 @@
 	$('#credits_container').css(
 	{
 		position: 'absolute',
-		'-moz-column-width': this.column_width,
+		/*,'-moz-column-width': this.column_width,
 		'-webkit-column-width': this.column_width,
 		'-moz-column-gap': this.column_gap,
 		'-webkit-column-gap': this.column_gap,
 		'-moz-column-rule': '1px solid #ddccb5',
-		'-webkit-column-rule': '1px solid #ddccb5'
+		'-webkit-column-rule': '1px solid #ddccb5'*/
     });
 	
+	$('.credits_content').css(
+	{
+		position: 'absolute',
+		width: Math.floor(notify_credits.width() / 3)
+	});
+	$('#credits_content_left').css(
+	{
+		top: 0,
+		left: 0
+	});
+	$('#credits_content_center').css(
+	{
+		top: 0,
+		left: Math.floor(notify_credits.width() / 3)
+	});
+	$('#credits_content_right').css(
+	{
+		top: 0,
+		left: Math.floor(notify_credits.width() * 2 / 3)
+	});
+	
+	//On récupère la hauteur de la colonne la plus longue.
+	var credits_content_max_height = Math.max(Math.max($('#credits_content_left').height(), $('#credits_content_center').height()), $('#credits_content_right').height());
+	
 	//CSS du pied de page.
 	$('#credits_footer').css(
 	{
@@ -2349,16 +2382,34 @@
 		left: notify_credits.width() / 2 - arrowWidth / 2
 	});
 	
-	//Hauteur totale du texte des crédits.
-	var credits_total_height = $('#credits_content').height();
+	//On masque ce qu'il y a derrière les flèches.
+	$('.credits_masks').css(
+	{
+		position: 'absolute',
+		left: 0,
+		'background-color': '#D1D2D4',
+		width: notify_credits.width(),
+		height: arrowHeight,
+		opacity: 0,
+		'z-index': 100
+	});
+	$('#credits_upArrow_mask').css(
+	{
+		top: 0
+	});
+	$('#credits_downArrow_mask').css(
+	{
+		top: $('#credits_footer').position().top - arrowHeight
+	});
+	
 	//Nombre de pages de crédits.
-	this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3));
+	this.creditsPageLength = Math.ceil(credits_content_max_height / (notify_credits.height() - footer_height - 2 * arrowHeight));
 	
 	//On suppose qu'il n'y a pas d'overflow du texte des crédits.
 	this.isCreditsTextOverflow = false;
 	
 	//Si la taille totale des crédits excède celle de la hauteur du panneau des crédits x 3, alors le panneau sera en plusieurs parties.
-	if(credits_total_height > notify_credits.height() * 3)
+	if(credits_content_max_height > (notify_credits.height() - footer_height - 2 * arrowHeight))
 	{
 		//Si on est arrivé là, on a constaté un overflow du texte des crédits.
 		this.isCreditsTextOverflow = true;
@@ -2372,12 +2423,12 @@
 				//top: 0,
 				height: notify_credits.height() - footer_height - arrowHeight
 			});
-			$('#credits_downArrow').css('opacity', '1');
+			$('#credits_downArrow, #credits_downArrow_mask').css('opacity', '1');
 		}
 		//Sinon si on est sur la dernière page des crédits.
 		else if(this.creditsPageNumber + 1 == creditsPageLength)
 		{
-			$('#credits_downArrow').css('opacity', '0');
+			$('#credits_downArrow, #credits_downArrow_mask').css('opacity', '0');
 		}
 		//Sinon on laisse la place pour revenir en arrière ou en avant.
 		else