--- a/cms/app-client/app/components/notice-component.js	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/components/notice-component.js	Tue Jul 05 16:53:04 2016 +0200
@@ -6,14 +6,14 @@
 
     classNames: ['notice-component'],
 
-    item: Ember.computed('player.model', function() {
-        return this.get('player').get('model');
+    item: Ember.computed('model', 'player.model', function() {
+        return this.get('model') || this.get('player').get('model');
     }),
 
-    participants: Ember.computed('player.model.contributors', function() {
+    participants: Ember.computed('item.contributors', function() {
         var participants = [];
-        if(this.get('player').get('model')) {
-            this.get('player').get('model').get('contributors').forEach(function(contributor) {
+        if(this.get('item')) {
+            this.get('item').get('contributors').forEach(function(contributor) {
                 if(contributor.name) {
                     participants.push({ name: contributor.name, role: contributor.role.split('/').pop() });
                 }
@@ -22,15 +22,23 @@
         return participants;
     }),
 
-    location: Ember.computed('player.model.geoInfo', function() {
+    location: Ember.computed('item.geoInfo', function() {
         var location = '';
-        if(this.get('player').get('model')) {
-            var meta = this.get('player').get('model').get('geoInfo').notes.find(element => element.lang);
+        if(this.get('item')) {
+            var meta = this.get('item').get('geoInfo').notes.find(element => element.lang);
             if(meta) {
                 location = meta.value;
             }
         }
         return location;
-    })
+    }),
+
+    actions: {
+
+        close: function() {
+            this.set('model', null);
+        }
+
+    }
 
 });

--- a/cms/app-client/app/controllers/application.js	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Tue Jul 05 16:53:04 2016 +0200
@@ -12,7 +12,6 @@
     discourse: null,
     language: null,
     location: null,
-    notice: null,
     theme: null,
 
     filter: Ember.inject.service(),
@@ -88,13 +87,32 @@
 
     player: Ember.inject.service(),
 
-    itemIdObserver: Ember.observer('player.item', function() {
+    itemObserver: Ember.observer('player.item', function() {
         var self = this;
-        this.store.findRecord('document', this.get('player').get('item'), { reload: true }).then(function(it){
-            self.get('player').set('model', it);
+        this.store.findRecord('document', this.get('player').get('item'), { reload: true }).then(function(model){
+            self.get('player').set('model', model);
         });
     }),
 
+    notice: null,
+    noticeModel: null,
+
+    noticeObserver: Ember.observer('notice', function() {
+        var self = this;
+        if (this.get('notice')) {
+            this.store.findRecord('document', this.get('notice'), { reload: true }).then(function(model){
+                self.set('noticeModel', model);
+            });
+        }
+    }),
+    noticeModelObserver: Ember.observer('noticeModel', function() {
+        if (!this.get('noticeModel')) {
+            this.set('notice', null); 
+        }
+    }),
+
+
+
     init: function() {
         this._super(...arguments);
         this.get('player');

--- a/cms/app-client/app/styles/app.scss	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/styles/app.scss	Tue Jul 05 16:53:04 2016 +0200
@@ -2,8 +2,8 @@
 $medium-blue: #253946;
 $light-blue: #becfd4;
 $blue: #2faddd;
+$light-grey: #878e94;
 $medium-grey: #71848d;
-$light-grey: #878e94;
 $dark-grey: #59626b;
 $medium-white: #f5f5f5;
 $light-white: #fbfbfb;
@@ -17,6 +17,10 @@
     font-family: sans-serif;
 }
 
+button:focus {
+    outline:0;
+}
+
 #corpus-app {
     font-family: sans-serif;
     font-size: 12px;
@@ -58,8 +62,10 @@
 }
 
 .corpus-app-modal {
-    background-color: $light-blue;
+    background-color: $medium-white;
+    border-right: 1px solid $dark-grey;
     padding: 20px 40px;
+    z-index: 1;
 }
 
 .corpus-app-container {
@@ -79,17 +85,16 @@
     position: relative;
 }
 
-body.tabs-discours .corpus-app-container,
-body.tabs-chrono .corpus-app-container {
+#tabs-discours,
+#tabs-chrono,
+#tabs-thematiques {
     padding: 0px 20px;
 }
 
-body.tabs-thematiques .corpus-app-container {
-    padding: 0px 20px;
-}
-
-body.tabs-langues .corpus-app-container {
-    padding: 0px;
+#tabs-discours,
+#tabs-thematiques {
+    overflow: hidden;
+    height: 100%;
 }
 
 .corpus-app-wrapper {

--- a/cms/app-client/app/styles/components/notice-component.scss	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/styles/components/notice-component.scss	Tue Jul 05 16:53:04 2016 +0200
@@ -1,8 +1,20 @@
 .notice-component {
-    padding: 20px;
+    padding: 20px 40px;
     color: $dark-grey;
 }
 
+.notice-component .fa-close {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+    color: $dark-blue;
+    cursor: pointer;
+}
+
+.notice-component .fa-close::before {
+    font-size: 20px;
+}
+
 .notice-component h2 {
     color: $light-white;
     text-align: left;
@@ -18,6 +30,11 @@
     padding: 5px 0px;
 }
 
+.notice-component.overlay h2,
+.notice-component.overlay h3 {
+    color: $dark-grey;
+}
+
 .notice-component table {
     line-height: 18px;
     border-collapse: collapse;

--- a/cms/app-client/app/styles/components/playlist-component.scss	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Tue Jul 05 16:53:04 2016 +0200
@@ -35,9 +35,8 @@
 }
 
 .playlist-component ul li.notice {
-    background-color: $dark-grey;
-    border-bottom-color: $light-white;
-    color: $light-white;
+    background-color: $medium-white;
+    color: $dark-grey;
 }
 
 .playlist-component ul li .tools {
@@ -58,7 +57,7 @@
 
 .playlist-component ul li.notice .tools button,
 .playlist-component ul li.notice .tools .fa {
-    border-color: $light-white;
+    border-color: $dark-grey;
 }
 
 .playlist-component ul li .tools button.active,
@@ -75,12 +74,12 @@
 }
 
 .playlist-component ul li.notice .tools button.active {
-    background-color: $light-white;
-    color: $dark-grey;
+    background-color: $dark-grey;
+    color: $light-white;
 }
 
 .playlist-component ul li.notice .tools button:hover {
-    background-color: $dark-grey;
+    background-color: $medium-white;
 }
 
 .playlist-component ul li.notice .tools .fa:hover {
@@ -94,7 +93,7 @@
 }
 
 .playlist-component ul li.notice .tools button:hover {
-    color: $light-white;
+    color: $dark-grey;
 }
 
 .playlist-component ul li .tools button {

--- a/cms/app-client/app/styles/components/sorting-component.scss	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/styles/components/sorting-component.scss	Tue Jul 05 16:53:04 2016 +0200
@@ -17,6 +17,11 @@
 .sorting-component div.options ul {
     margin: 0;
     display: inline-block;
+
+}
+
+.sorting-component div.tags {
+    color: $dark-grey;
 }
 
 .sorting-component div.tags ul {

--- a/cms/app-client/app/templates/application.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -7,7 +7,11 @@
 </div>
 
 <div class="corpus-window">
-
+    {{#if notice}}
+    <div class="corpus-app-modal">
+        {{ notice-component class="overlay" model=noticeModel }}
+    </div>
+    {{/if}}
     <div class="corpus-app-container">
     {{#if player.window}}
         {{#if (eq player.window 'notice')}}
@@ -17,7 +21,6 @@
             {{ transcript-component }}
         {{/if}}
     {{else}}
-        {{ notice }}
         {{ outlet }}
     {{/if}}
     </div>

--- a/cms/app-client/app/templates/components/notice-component.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/components/notice-component.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,3 +1,4 @@
+<i class="fa fa-close" {{action 'close'}}>Close</i>
 <h2>Notice</h2>
 <h3>{{ item.title }}</h3>
 <table>

--- a/cms/app-client/app/templates/tabs/carto.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/tabs/carto.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,1 +1,3 @@
-{{ visu-carto documents=model }}
+<div id="tabs-carto">
+    {{ visu-carto documents=model }}
+</div>
\ No newline at end of file

--- a/cms/app-client/app/templates/tabs/chrono.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/tabs/chrono.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,3 +1,4 @@
-<h2>Sélectionner une date</h2>
-
-{{ visu-chrono }}
+<div id="tabs-chrono">
+    <h2>Sélectionner une date</h2>
+    {{ visu-chrono }}
+</div>

--- a/cms/app-client/app/templates/tabs/discours.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/tabs/discours.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,2 +1,4 @@
-<h2>Sélectionner un type de discours</h2>
-{{discourses-component}}
\ No newline at end of file
+<div id="tabs-discours">
+    <h2>Sélectionner un type de discours</h2>
+    {{discourses-component}}
+</div>
\ No newline at end of file

--- a/cms/app-client/app/templates/tabs/langues.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/tabs/langues.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,1 +1,3 @@
-{{visu-langues}}
+<div id="tabs-langues">
+    {{visu-langues}}
+</div>
\ No newline at end of file

--- a/cms/app-client/app/templates/tabs/thematiques.hbs	Tue Jul 05 01:30:27 2016 +0200
+++ b/cms/app-client/app/templates/tabs/thematiques.hbs	Tue Jul 05 16:53:04 2016 +0200
@@ -1,5 +1,4 @@
-{{outlet}}
-
-{{ filtering-component themes=model }}
-
-{{ sorting-component themes=model }}
+<div id="tabs-thematiques">
+    {{ filtering-component themes=model }}
+    {{ sorting-component themes=model }}
+</div>
\ No newline at end of file