--- a/cms/app-client/app/components/playlist-component.js	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/components/playlist-component.js	Mon Oct 17 14:50:30 2016 +0530
@@ -7,6 +7,7 @@
     filter: Ember.inject.service(),
     player: Ember.inject.service(),
 
+    model: [],
     documents: Ember.computed('model', 'filter.location', 'filter.language', 'filter.discourse', 'filter.date', 'filter.theme', function() {
         return this.get('model');
     }),
@@ -24,22 +25,20 @@
         if(this.$() && this.get('player').get('item')) {
             var ul = this.$().find('ul');
             var li = this.$().find('li#' + this.get('player').get('item').replace('.', '\\.').replace('/', '\\/'));
-            if(li.offset().top - ul.offset().top < 0) {
-                ul.animate({
-                    'scrollTop': ul.scrollTop() + li.offset().top - ul.offset().top
-                });
-            } else if(li.offset().top + li.outerHeight() - ul.offset().top > ul.outerHeight()) {
-                ul.animate({
-                    'scrollTop': ul.scrollTop() + li.offset().top  + li.outerHeight() - ul.offset().top  - ul.height()
-                });
+            if(li.length) {
+                if(li.offset().top - ul.offset().top < 0) {
+                    ul.animate({
+                        'scrollTop': ul.scrollTop() + li.offset().top - ul.offset().top
+                    });
+                } else if(li.offset().top + li.outerHeight() - ul.offset().top > ul.outerHeight()) {
+                    ul.animate({
+                        'scrollTop': ul.scrollTop() + li.offset().top  + li.outerHeight() - ul.offset().top  - ul.height()
+                    });
+                }
             }
         }
     }),
 
-    init: function() {
-        this._super(...arguments);
-    },
-
     didRender: function() {
         this._super(...arguments);
         this.$().find('ul').height(Ember.$('.corpus-app-wrapper').outerHeight() - (Ember.$('.filter-component').outerHeight() + this.$().find('h2').outerHeight()));
@@ -47,6 +46,14 @@
 
     actions: {
 
+        previous: function() {
+            this.sendAction('pageAction', 'previous');
+        },
+
+        next: function() {
+            this.sendAction('pageAction', 'next');
+        },
+
         select: function(id) {
             this.get('player').select(id);
             this.get('player').displayMetadata('notice');

--- a/cms/app-client/app/components/visu-langues.js	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/components/visu-langues.js	Mon Oct 17 14:50:30 2016 +0530
@@ -47,6 +47,7 @@
                 })
                 .round(false);
 
+                console.log('width', width, Ember.$('#' + self.get('elementId')).parent().width(), Ember.$('#' + self.get('elementId')).parent().parent().width(), Ember.$('#' + self.get('elementId')).parent().parent().parent().width());
             var element = d3.select('#' + self.get('elementId'))
                 .style("width", width + margin.left + margin.right + 'px')
                 .style("height", height + margin.bottom + margin.top + 'px')

--- a/cms/app-client/app/routes/application.js	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/routes/application.js	Mon Oct 17 14:50:30 2016 +0530
@@ -2,9 +2,25 @@
 
 export default Ember.Route.extend({
 
-    model: function() {
-        return this.store.findAll('document');
-    },
+    page: 1,
+    limit: 10,
+
+    documents: [],
+    model: Ember.observer('page', function() {
+        var self = this;
+        var promise = this.store.query('document', {
+            page: this.get('page'),
+            perpage: this.get('limit')
+        });
+        promise.then(function(value) {
+            if(self.controller) {
+                self.controller.set('page', self.get('page'));
+                self.controller.set('documents', self.get('documents'));
+            }
+            self.set('documents', value);
+        });
+        return promise;
+    }),
 
     serializeQueryParam: function(value, urlKey) {
         if (urlKey === 'date') {
@@ -13,6 +29,13 @@
         return '' + value;
     },
 
+    setupController: function(controller) {
+        this._super(...arguments);
+        controller.set('page', this.get('page'));
+        controller.set('limit', this.get('limit'));
+        controller.set('documents', this.get('documents'));
+    },
+
     deserializeQueryParam: function(value, urlKey) {
         if (urlKey === 'date') {
             var array = [];
@@ -26,6 +49,18 @@
 
     actions: {
 
+        setPageQueryparams: function(type) {
+            var page = this.get('page');
+            if(type === 'previous') {
+                page = page - 1;
+            } else if(type === 'next') {
+                page = page + 1;
+            }
+            this.propertyWillChange('page');
+            this.set('page', page);
+            this.propertyDidChange('page');
+        },
+
         willTransition: function() {
             // Prevent navigation from removing query parameters
             var _this = this,

--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Mon Oct 17 14:50:30 2016 +0530
@@ -2,13 +2,40 @@
     background-color: $dark-blue;
 }
 
-.playlist-component h2 {
+.playlist-component .header {
     line-height: 40px;
+    height: 40px;
+    width: 100%;
     text-transform: none;
     padding: 0px 15px;
     text-align: left;
     color: $light-white;
     font-size: 13px;
+    display: block;
+    margin: 0;
+    border: none;
+    box-sizing: border-box;
+}
+
+.playlist-component .header h2 {
+    line-height: 40px;
+    color: $light-white;
+    font-size: 13px;
+    display: inline-block;
+}
+
+.playlist-component .header .pagination {
+    float: right;
+}
+
+.playlist-component .header .pagination .fa.disabled {
+    pointer-events: none;
+    opacity: 0.3;
+}
+
+.playlist-component .header .pagination .span {
+    display: inline-block;
+    margin: 0 10px;
 }
 
 .playlist-component ul {

--- a/cms/app-client/app/templates/application.hbs	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/templates/application.hbs	Mon Oct 17 14:50:30 2016 +0530
@@ -19,7 +19,7 @@
 
     <div class="corpus-app-wrapper">
         {{ filter-component }}
-        {{ playlist-component notice=notice model=model }}
+        {{ playlist-component model=documents page=page limit=limit pageAction='setPageQueryparams' }}
     </div>
 
 </div>
\ No newline at end of file

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Mon Oct 17 00:33:28 2016 +0530
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Mon Oct 17 14:50:30 2016 +0530
@@ -1,4 +1,11 @@
-<h2>Résultat <span class="count">({{ documents.length }})</span></h2>
+<div class="header">
+    <h2>Résultat <span class="count">({{ model.meta.total }})</span></h2>
+    <div class="pagination">
+        <i class="fa fa-step-backward{{if (eq model.meta.prev_page_url null) ' disabled'}}" {{action 'previous'}}></i>
+        <span>{{page}} sur {{model.meta.last_page}}</span>
+        <i class="fa fa-step-forward{{if (eq model.meta.next_page_url null) ' disabled'}}" {{action 'next'}}></i>
+    </div>
+</div>
 <ul>
     {{#each documents as |document| }}
     <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}" {{action 'select' document.id}}>