--- a/cms/app-client/app/components/discourses-component.js	Sun Oct 02 16:50:11 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Sun Oct 02 19:14:07 2016 +0200
@@ -38,7 +38,7 @@
                 .value(function(d){
                     return Math.floor((((d.value - oldMin) * (newMax - newMin)) / (oldMax - oldMin)) + newMin);
                 })
-                .padding(25);
+                .padding(10);
 
             var element = d3.select('#' + self.get('elementId'));
 
@@ -65,7 +65,7 @@
                 });
 
             item.append("span")
-                .html(function(d) { return d.name + ' <span class="count">(' + d.value + ')</span>'; })
+                .html(function(d) { return d.name + ' <span class="count">(' + d.count + ')</span>'; })
                 .style("margin-left", function() { return ( Ember.$(this).width() > Ember.$(this).parent().width() ? - ( Ember.$(this).width() / 2 ) + ( Ember.$(this).parent().width() / 2 ) : 0 ) + 'px'; })
                 .style("margin-top", function() { return Ember.$(this).parent().height() / 2 - Ember.$(this).height() / 2 + 'px'; });
         });
@@ -75,32 +75,24 @@
 
     createNodes: function(json) {
         var self = this;
-        var nodes = {};
-        var children = {};
+        var children = [];
 
         Object.keys(json).forEach(function(key) {
             var discourse = json[key];
             var category_key = self.get('constants').DISCOURSE_CATEGORY_KEYS[key];
             var category_value = self.get('constants').DISCOURSE_CATEGORY_VALUES[category_key];
 
-            children[category_key] = children[category_key] || {};
-            children[category_key]['name'] = category_key;
-            children[category_key]['children'] = children[category_key]['children'] || [];
-            children[category_key]['children'].push({
+            children.push({
                 'id': key,
                 'name': discourse.label,
                 'value': discourse.count,
+                'count': discourse.count,
                 'fill': category_value.fill,
                 'stroke': category_value.stroke
             });
         });
 
-        nodes.children = [];
-        Object.keys(children).forEach(function(key) {
-            nodes.children.push(children[key]);
-        });
-
-        return nodes;
+        return { 'children': children };
     }
 
 });

--- a/cms/app-client/app/components/visu-langues.js	Sun Oct 02 16:50:11 2016 +0200
+++ b/cms/app-client/app/components/visu-langues.js	Sun Oct 02 19:14:07 2016 +0200
@@ -114,6 +114,14 @@
                     .style("top", function(d) { return y(d.y) + 'px'; });
             }
 
+            function hexadecimalToInteger(hexadecimal) {
+                var integer = [];
+                for(var i = 1; i < 7; i += 2) {
+                    integer.push(parseInt(hexadecimal.slice(i, i + 2), 16));
+                }
+                return integer;
+            }
+
             function display(d) {
                 breadcrumbs
                     .datum(d.parent)
@@ -130,8 +138,24 @@
                     .append("div")
                     .attr("data-id", function(d) { return d.id; });
 
+                var dMin = Math.min.apply(null, d._children.map(function(d){ return d.count; }));
+                var dMax = Math.max.apply(null, d._children.map(function(d){ return d.count; }));
+
+                function shade(d) {
+                    var color = "#becfd4";
+                    var aColor = hexadecimalToInteger(color);
+                    var solidColor = "#71848d";
+                    var aSolidColor = hexadecimalToInteger(solidColor);
+                    var aFillColor = [];
+                    for(var i = 0; i < 3; i++) {
+                        aFillColor.push((d.count - dMin) * (aSolidColor[i] - aColor[i]) / (dMax - dMin) + aColor[i]);
+                    }
+                    return '#' + (aFillColor.map(i => parseInt(i).toString(16))).join('');
+                }
+
                 node.attr("class", function(d) { return "node" + ( d.id === self.get('filter').get('language') ? " selected" : "" ); })
                     .call(position)
+                    .style("background-color", function(d) { return shade(d); })
                     .on("click", selectHandler);
 
                 node.filter(function(d) { return d._children; })

--- a/cms/app-client/app/styles/components/discourses-component.scss	Sun Oct 02 16:50:11 2016 +0200
+++ b/cms/app-client/app/styles/components/discourses-component.scss	Sun Oct 02 19:14:07 2016 +0200
@@ -1,5 +1,7 @@
 .discourses-component {
 	position: relative;
+	width: inherit;
+	height: inherit;
 }
 
 .discourses-component .item {
@@ -19,6 +21,7 @@
 	border-radius: 100%;
 	border-width: 1px;
 	border-style: solid;
+	cursor: pointer;
 }
 
 .discourses-component .item::before {
@@ -29,6 +32,7 @@
 	position: absolute;
 }
 
+.discourses-component .item:hover,
 .discourses-component .item.selected {
 	color: $light-blue;
 	background-color: $medium-blue!important;

--- a/cms/app-client/app/styles/tabs/langues.scss	Sun Oct 02 16:50:11 2016 +0200
+++ b/cms/app-client/app/styles/tabs/langues.scss	Sun Oct 02 19:14:07 2016 +0200
@@ -9,13 +9,14 @@
 }
 
 #tabs-langues .breadcrumbs:hover,
-#tabs-langues .node:hover {
-	background-color: $medium-blue;
-	color: $light-white;
+#tabs-langues .node:hover,
+#tabs-langues .node.selected {
+	background-color: $medium-blue!important;
+	color: $light-blue!important;
 }
 
 #tabs-langues .breadcrumbs {
-	background-color: $light-blue;
+	background-color: $medium-white;
     color: $medium-blue;
     position: relative;
 	line-height: 30px;
@@ -53,11 +54,7 @@
 	padding: 10px;
 	box-sizing: border-box;
 	background-color: $medium-white;
-}
-
-#tabs-langues .node.selected {
-	background-color: $medium-blue;
-	color: $light-blue;
+	color: $light-white;
 }
 
 #tabs-langues .node:hover {