--- a/cms/app-client/app/components/playlist-component.js	Mon Jul 04 23:54:48 2016 +0200
+++ b/cms/app-client/app/components/playlist-component.js	Tue Jul 05 01:30:27 2016 +0200
@@ -56,6 +56,23 @@
 
         setItem: function(id) {
             this.get('player').trigger('reset', id);
+        },
+
+        displayNotice: function(id) {
+            if(this.get('player').get('item') === id) {
+                if(this.get('player').get('window') !== 'notice') {
+                    this.get('player').set('window', 'notice');
+                } else {
+                    this.get('player').set('window', '');
+                }
+            } else {
+                if(this.get('notice') !== id) {
+                    this.set('notice', id);
+                } else {
+                    this.set('notice', null);
+                }
+            }
+
         }
 
     }

--- a/cms/app-client/app/controllers/application.js	Mon Jul 04 23:54:48 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Tue Jul 05 01:30:27 2016 +0200
@@ -2,7 +2,7 @@
 
 export default Ember.Controller.extend({
 
-    queryParams: ['location', 'date', {
+    queryParams: ['location', 'date', 'notice', {
         language: 'langue',
         discourse: 'discours',
         theme: 'thematique'
@@ -12,6 +12,7 @@
     discourse: null,
     language: null,
     location: null,
+    notice: null,
     theme: null,
 
     filter: Ember.inject.service(),

--- a/cms/app-client/app/styles/components/playlist-component.scss	Mon Jul 04 23:54:48 2016 +0200
+++ b/cms/app-client/app/styles/components/playlist-component.scss	Tue Jul 05 01:30:27 2016 +0200
@@ -34,6 +34,12 @@
     color: $medium-blue;
 }
 
+.playlist-component ul li.notice {
+    background-color: $dark-grey;
+    border-bottom-color: $light-white;
+    color: $light-white;
+}
+
 .playlist-component ul li .tools {
     float: right;
 }
@@ -50,22 +56,47 @@
     border-color: $medium-blue;
 }
 
+.playlist-component ul li.notice .tools button,
+.playlist-component ul li.notice .tools .fa {
+    border-color: $light-white;
+}
+
+.playlist-component ul li .tools button.active,
 .playlist-component ul li .tools button:hover,
 .playlist-component ul li .tools .fa:hover {
     background-color: $dark-grey;
     color: $light-white;
 }
 
+.playlist-component ul li.playing .tools button.active,
 .playlist-component ul li.playing .tools button:hover,
 .playlist-component ul li.playing .tools .fa:hover {
     background-color: $medium-blue;
 }
 
+.playlist-component ul li.notice .tools button.active {
+    background-color: $light-white;
+    color: $dark-grey;
+}
+
+.playlist-component ul li.notice .tools button:hover {
+    background-color: $dark-grey;
+}
+
+.playlist-component ul li.notice .tools .fa:hover {
+    background-color: $light-white;
+    color: $dark-grey;
+}
+
 .playlist-component ul li.playing .tools button:hover,
 .playlist-component ul li.playing .tools .fa:hover {
     color: $light-blue;
 }
 
+.playlist-component ul li.notice .tools button:hover {
+    color: $light-white;
+}
+
 .playlist-component ul li .tools button {
     font-size: 12px;
     background-color: transparent;

--- a/cms/app-client/app/templates/application.hbs	Mon Jul 04 23:54:48 2016 +0200
+++ b/cms/app-client/app/templates/application.hbs	Tue Jul 05 01:30:27 2016 +0200
@@ -17,13 +17,14 @@
             {{ transcript-component }}
         {{/if}}
     {{else}}
+        {{ notice }}
         {{ outlet }}
     {{/if}}
     </div>
 
     <div class="corpus-app-wrapper">
         {{ filter-component }}
-        {{ playlist-component model=model }}
+        {{ playlist-component notice=notice model=model }}
     </div>
 
 </div>

--- a/cms/app-client/app/templates/components/playlist-component.hbs	Mon Jul 04 23:54:48 2016 +0200
+++ b/cms/app-client/app/templates/components/playlist-component.hbs	Tue Jul 05 01:30:27 2016 +0200
@@ -1,7 +1,7 @@
 <h2>Résultat <span class="count">({{ documents.length }})</span></h2>
 <ul>
     {{#each documents as |document| }}
-    <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}">
+    <li id="{{document.id}}" class="{{if (eq player.item document.id) 'playing'}}{{if (eq document.id notice) 'notice'}}">
         
         <div class="tools">
             <span class="time">
@@ -12,7 +12,7 @@
             {{/if}}
                 {{ to-minutes document.duration }}
             </span>
-            <button{{action 'openNotice' document}}>Notice</button>
+            <button{{action 'displayNotice' document.id}} class="{{if (ifOr (ifAnd (eq player.window 'notice') (eq player.item document.id)) (eq document.id notice)) 'active'}}">Notice</button>
         </div>
         <span class="title">{{ document.title }}</span>
         <span class="author">{{author document.publishers}}</span>