--- a/cms/app-client/app/components/visu-chrono.js	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/components/visu-chrono.js	Fri Jan 22 13:15:47 2016 +0100
@@ -10,7 +10,7 @@
 
     var isMouseDown = false,
       isHighlighted;
-    Ember.$("#our_table li").mousedown(function () {
+    Ember.$("#chrono-table li").mousedown(function () {
       isMouseDown = true;
       Ember.$(this).toggleClass("highlighted");
       isHighlighted = Ember.$(this).hasClass("highlighted");

--- a/cms/app-client/app/router.js	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/router.js	Fri Jan 22 13:15:47 2016 +0100
@@ -6,6 +6,7 @@
 });
 
 Router.map(function() {
+  this.route('tabs/detail', { path: '/detail/:document_id' });
   this.route('tabs/langues', { path: '/langues' });
   this.route('tabs/carto', { path: '/cartographie' });
   this.route('tabs/thematiques', { path: '/thematiques' });

--- a/cms/app-client/app/routes/tabs/carto.js	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/routes/tabs/carto.js	Fri Jan 22 13:15:47 2016 +0100
@@ -1,9 +1,6 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-  renderTemplate() {
-    this.render({ outlet: 'carto' });
-  },
   actions: {
     queryParamsDidChange: function() {
       console.log("carto params");

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/routes/tabs/detail.js	Fri Jan 22 13:15:47 2016 +0100
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model(params) {
+    console.log("test");
+    return this.store.findRecord('document', params.document_id);
+  }
+});

--- a/cms/app-client/app/styles/app.scss	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/styles/app.scss	Fri Jan 22 13:15:47 2016 +0100
@@ -12,6 +12,7 @@
   @import 'tabs/langues';
   @import 'tabs/discours';
   @import 'tabs/thematiques';
+  @import 'tabs/detail';
 }
 
 .mapdiv{

--- a/cms/app-client/app/styles/tabs/chrono.scss	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Fri Jan 22 13:15:47 2016 +0100
@@ -1,19 +1,23 @@
-#our_table ul {
+#chrono-table{
+  margin-top: 40px;
+}
+
+#chrono-table ul {
   margin: 0;
 }
 
-#our_table li {
+#chrono-table li {
   width:40px;
   height:40px;
   text-align:center;
   vertical-align:middle;
   background-color:#B0D1D3;
   display: inline-block;
-  margin: 1px -1px;
+  margin: 2px 0;
   line-height: 30px;
   cursor: pointer;
 }
 
-#our_table li.highlighted {
+#chrono-table li.highlighted {
   background-color:#2D7073;
 }

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/styles/tabs/detail.scss	Fri Jan 22 13:15:47 2016 +0100
@@ -0,0 +1,18 @@
+.notice{
+  // padding: 10px;
+}
+
+.notice-header,
+.notice-body,
+.notice-footer{
+  padding: 5px 10px 0;
+}
+
+.notice-header h2{
+  margin: 0;
+}
+
+.notice-body b{
+  display: inline-block;
+  min-width: 140px;
+}

--- a/cms/app-client/app/templates/components/visu-chrono.hbs	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs	Fri Jan 22 13:15:47 2016 +0100
@@ -1,4 +1,4 @@
-<div cellpadding="0" cellspacing="0" id="our_table">
+<div cellpadding="0" cellspacing="0" id="chrono-table">
   <ul id="1960"> 1960 -
     <li class="0">0</li>
     <li class="1">1</li>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/tabs/detail.hbs	Fri Jan 22 13:15:47 2016 +0100
@@ -0,0 +1,14 @@
+<div class="notice">
+  <div class="notice-header">
+    <h2>Notice</h2>
+  </div>
+  <div class="notice-body">
+    <p><b>Titre </b>{{model.title}}</p>
+    <p><b>Langue </b>{{model.language}}</p>
+    <p><b>Enregistré le </b>{{model.modified}}</p>
+    <p><b>Interviewer </b>{{model.publishers}}</p>
+    <p><b>Description </b>{{model.description}}</p>
+    <p><b>Type de Discours </b>{{model.type}}</p>
+    <p><b>Localisation </b>{{model.spatial}}</p>
+  </div>
+</div>

--- a/cms/app-client/app/templates/tabs/thematiques.hbs	Fri Jan 22 11:23:23 2016 +0100
+++ b/cms/app-client/app/templates/tabs/thematiques.hbs	Fri Jan 22 13:15:47 2016 +0100
@@ -1,5 +1,5 @@
 <div class="search-box">
-  {{input type="text" placeholder="Entrez un mot clé" action="updateUrl"}}
+  {{input type="text" placeholder="Entrez une thématique" action="updateUrl"}}
 </div>
 
 <div class="tag-cloud">