diff --git a/communication/index.html b/communication/index.html
index 8456ef0..823f403 100644
--- a/communication/index.html
+++ b/communication/index.html
@@ -36,8 +36,15 @@ <h2>Communication</h2>
   </section>
 
   <section class="section nav-next" id="nav-next">
+    <nav class="next">
+      <h2>Suite: </h2>
+      <a href="/#toolbox">
+        <span class="next-title title-style">Toolbox</span>
+        <img src="../images/icones/systemes-de-design.svg" alt="image">
+      </a>
+    </nav>
   </section>
-
+  
   <script>
 
     var dataArray = [ 
diff --git a/credits/index.html b/credits/index.html
index d8801f6..18a61e5 100644
--- a/credits/index.html
+++ b/credits/index.html
@@ -18,7 +18,7 @@ <h1><a href="../">Design Tools Survey</a></h1>
 
     <section class="section credits">
   <h2 class="top-title">Crédits</h2>
-  <p class="texte-description">Ce projet a été réalisé en juin 2018, par une classe d'étudiants en 3e année Interactive Media Design de l'EAA La Chaux-de-Fonds.</p>
+  <p class="texte-description">Ce projet a été réalisé en mai-juin 2018, par une classe d'étudiants en 3e année Interactive Media Design de l'EAA La Chaux-de-Fonds.</p>
 
   <ul class="menu-tasks credits-list">
     <li>
@@ -77,20 +77,15 @@ <h2 class="top-title">Crédits</h2>
 <script>
 
   // Randomize Order
-  // produce a random distribution of 11 numbers.
+
   var nombres = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11 ];
 
   shuffle(nombres);
 
   for (var i = 1; i <= nombres.length; i++) {
 
-    // attribuer l'ordre à l'élément html
-    // var Projet = MenuList[i];
-
-    // console.log(nombres[i]);
     var cible = document.querySelector(".credits-list li:nth-of-type("+[i]+")");
     cible.style.order = nombres[i];
-    // cible.style.border = "1px solid red";
 
   }
 
diff --git a/css/base.css b/css/base.css
index ddfa257..91a9686 100644
--- a/css/base.css
+++ b/css/base.css
@@ -1,12 +1,10 @@
 @charset "UTF-8";
 
-@import url('https://fonts.googleapis.com/css?family=Chivo:700');
-
 @import 'global.css';
 
 @import 'graphe.css';
 
 @import 'menu.css';
 
-
+@import url('https://fonts.googleapis.com/css?family=Chivo:700');
 
diff --git a/css/global.css b/css/global.css
index 0d63a9a..a88c05a 100644
--- a/css/global.css
+++ b/css/global.css
@@ -37,7 +37,16 @@ h2, .title-style
   
   h2, .title-style
   {
-  font-size: 60px;
+    font-size: 60px;
+  }
+
+  .menu h2
+  {
+    font-size: 2em;
+  }
+
+  .top-title {
+    margin-top: 2em;
   }
   
 }
@@ -65,7 +74,8 @@ h2, .title-style
   text-align: center;
   position: absolute;
   margin-left: 60px;
-  z-index: 10;
+  margin-top: 0;
+  z-index: 1;
 }
 
 .site-header a {
@@ -78,15 +88,10 @@ h2, .title-style
   {
     font-size: 2em;
     margin-left: 70px;
+    margin-top: 7px;
   }
 }
 
-.main-nav
-{
-  position: fixed;
-  top:2em;
-}
-
 
 /* Intro */
 
@@ -95,17 +100,65 @@ h2, .title-style
   margin-top: 120px;
 }
 
+/* Participants */
 
-@media screen and (min-width: 600px){
-.charts
-{
-	display:flex;
+.charts-index h3 {
+  margin-left: 2em;
 }
-	
-	.ct-chart-2,.ct-chart-3
+
+.charts-index .legende {
+  margin: 0;
+}
+
+@media screen and (min-width: 600px){
+  
+  .charts-index .ct-chart
 	{
-		margin-left:10%;
+		margin-left: 10%;
 	}
+
+}
+
+@media screen and (min-width: 1000px){
+
+  .charts-index {
+    display: flex;
+    flex-direction: row;
+    position: relative;
+  }
+
+  .charts-index > .section {
+    margin: 0;
+    flex: 1 0 33%;
+  }
+
+  .charts-index .graphe > div {
+    flex: 1 1 50%;
+  }
+
+  .charts-index .visuel {
+    height: 0px;
+    padding-bottom: 50%;
+    padding-top: 2em;
+  }
+  
+  .charts-index h3,
+  .charts-index .legende ul {
+    margin-left: 1em;
+  }
+
+/*  .charts-index .graphe .visuel {
+    flex-basis: 60%;
+  }
+
+  .charts-index .graphe .legende {
+    flex-basis: 40%;
+  }*/
+
+  .charts-index .ct-chart
+  {
+    margin-left: 0;
+  }
 }
 
 /* Description Outil */
@@ -162,6 +215,13 @@ h2, .title-style
     column-gap: 2em;
     font-size: 1.2em;
   }
+
+  .credits .texte-description 
+  {
+    column-count: 1;
+    width: 50%;
+  }
+
 }
 
 @media screen and (min-width: 1100px) {
@@ -173,10 +233,10 @@ h2, .title-style
 
   .texte-description
   {
-    column-count: 2;
     column-gap: 3em;
     font-size: 1.5em;
   }
+  
 }
 
 /* Suite */
@@ -218,3 +278,8 @@ h2, .title-style
   height: auto;
   width: 5em;
 }
+
+/* Pages specifiques */
+
+
+
diff --git a/css/graphe.css b/css/graphe.css
index 6fcddcb..53bd43e 100644
--- a/css/graphe.css
+++ b/css/graphe.css
@@ -27,6 +27,7 @@
 
 .legende .couleur {
   width: 1em;
+  flex: 0 0 1em;
   height: 1em;
   background-color: gray;
   border-radius: 100%;
@@ -34,6 +35,9 @@
   margin-top: 0.5em;
 }
 
+.legende li span {
+}
+
 .legende li:first-of-type {
   font-weight: bold;
 }
@@ -70,6 +74,21 @@ Style du graphe
 
 /*
 
+Affichage du texte dans les tranches du graphe
+
+*/
+
+.ct-chart-donut .ct-label:first-child {
+  font-weight: bold;
+  font-size: 1em;
+}
+
+.ct-chart-donut .ct-label:nth-child(1n+7) {
+  display: none;
+}
+
+/*
+
 Couleurs par défaut du graphe
 
 */
@@ -191,6 +210,8 @@ en fonction du nombre d'éléments.
 
 .systemes-de-design .ct-slice-donut-solid  { fill: #2932FF; }
 .systemes-de-design li .couleur { background-color : #2932FF; }
+.systemes-de-design .ct-label { fill: #fff; }
+.systemes-de-design .ct-label:nth-child(1n+5) { display: none; }
 
 .communication .ct-slice-donut-solid  { fill: #058D3F; }
 .communication li .couleur { background-color : #058D3F; }
@@ -202,4 +223,5 @@ en fonction du nombre d'éléments.
 .ct-slice-donut-solid:hover {
 /*  fill: #000;
 */  opacity: 1;
+    fill: #ccc;
 }
diff --git a/css/menu.css b/css/menu.css
index 09cade0..d29e811 100644
--- a/css/menu.css
+++ b/css/menu.css
@@ -1,27 +1,43 @@
 /*nav*/
 
+
 .main-nav
 {
-	width: 100%;
-	max-width: 80em;
-	z-index: 1;
-/*	left: -16px;
-*/}
+  position: fixed;
+  top: 2em;
+  top: 0px;
+  left: 0px;
+/*  border: 1px solid red;
+*/	width: 100%;
+  width: 100vw;
+/*	max-width: 80em;
+*/	z-index: 2;
+  
+ /* left: -16px;
+  top: -16px;*/
+  margin: 0;
+  padding: 0;
+}
 
 .menu-nav a:link
 {
 	font-size: 3em;
 }
 
+.main-nav > label {
+  position: fixed;
+}
+
 .menu {
 	background-color: #fff;
 	width: 100%;
-	border: 1px solid blue;
-	margin-left: -1em;
+/*	border: 1px solid blue;
+*//*	margin-left: -1em;*/
 	z-index: 1;
 	padding: 0;
+  margin: 0;
 	overflow-y: auto;
-	max-height: 80vh;
+	height: 100vh;
 }
 
 .menu-tasks {
@@ -89,6 +105,7 @@
   border-radius: 100%;
 }
 
+
 .menu-tasks a:link
 {
 	color: black;
@@ -113,14 +130,39 @@
 	color: white;
 }
 
+/* Menu Titles */
+
+.menu h2 {
+  text-align: center;
+}
+
+.menu-title {
+  display: block;
+  text-align: center;
+}
+
+/* Menu Best-of */
+
+.menu-best img {
+  margin-bottom: 0.7em;
+}
+
+.menu-best .outil {
+  font-size: 1.3em;
+  font-weight: 800;
+  margin-top: 0.3em;
+}
+
+/* Hamburger Icon */
 
 .icon
 {
   position: relative;
   width: 60px; 
   height: 50px;
-  display:inline-block;
-  cursor:pointer;
+  display: inline-block;
+  cursor: pointer;
+  margin: 1em 0 0 1em;
 }
 
 .bar
@@ -204,3 +246,7 @@ label
   font-size: 1.5em;
   margin-top: 0.3em;
 }
+
+.credits .menu-tasks li {
+/*  padding: 0;
+*/}
diff --git a/js/graph.js b/js/graph.js
index 09eb3c6..f4e3fd3 100644
--- a/js/graph.js
+++ b/js/graph.js
@@ -13,7 +13,7 @@ if (dataArray) {
     var largeur=160;
   }
 
-  dataArray.sort(compareSecondColumn);
+  // dataArray.sort(compareSecondColumn);
 
   var dataLabels = arrayKeys(dataArray);
   var dataChiffres = arrayValues(dataArray);
@@ -30,14 +30,14 @@ if (dataArray) {
     showLabel: true
   });
 
-  legendeAutomatique(dataArray);
+  legendeAutomatique(dataArray, "legende");
 
 }
 
 // Produire la liste visuelle
 
 
-function legendeAutomatique(data) {
+function legendeAutomatique(data,targetID) {
 
   var legendeContenu = '';
 
@@ -61,7 +61,7 @@ function legendeAutomatique(data) {
   var legendeUL = document.createElement("ul");
   legendeUL.className = "liste-legende";
   legendeUL.innerHTML = legendeContenu;
-  document.getElementById("legende").appendChild(legendeUL);
+  document.getElementById(targetID).appendChild(legendeUL);
 
 
 }
diff --git a/js/menu.js b/js/menu.js
index 0f1f2ce..963851c 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -75,18 +75,20 @@ function InsertMenu() {
 </label>
 <input type="checkbox" id="menu-toggle"/>
 <ul id="menu" class="menu">
-  <li class="auto-menu"><a href="#">tasks</a>
-  <ul class="menu-tasks">`;
+  <li class="auto-menu">
+    <h2>Les outils du design</h2>
+    <ul class="menu-tasks">`;
 
   menuContent += ProduceMenu();
 
   menuContent += `</ul>
 
-  </li>
+  </li><!-- .auto-menu -->
     
-  <li><a href="#">Toolbox</a></li>
-  <li><a href="#">Participants</a></li>
-</ul>`;
+  <li><h2><a class="menu-title" href="/#toolbox">Toolbox</a></h2></li>
+  <li><h2><a class="menu-title" href="/#participants">Participants</a></h2></li>
+  <li><h2><a class="menu-title" href="/credits/">Credits</a></h2></li>
+</ul><!-- .menu -->`;
 
  menuContainer.innerHTML = menuContent;
 
diff --git a/participants/data-participants.js b/participants/data-participants.js
index c153bef..360ffae 100644
--- a/participants/data-participants.js
+++ b/participants/data-participants.js
@@ -1,9 +1,9 @@
 // On définit les choses:
 
 var dataPays = [
-  [ 'Belgique', 11  ],
   [ 'France',   38  ],
   [ 'Suisse',   29 ],
+  [ 'Belgique', 11  ],
   [ 'New Zealand',   1 ],
 ];
 
@@ -11,26 +11,26 @@ var labelsPays = arrayKeys(dataPays);
 var seriesPays = arrayValues(dataPays);
 
 var dataCompany = [
-  [ 'Agences de communication', 8  ],
-  [ 'Agence de design',   1  ],
-  [ 'Agences web',   10 ],
   [ 'Freelance',   31 ],
-  [ 'Collectif',   1 ],
-  [ 'Consulting Communication',   1 ],
-  [ 'Ecoles',   5 ],
+  [ 'Agence web',   10 ],
+  [ 'Agence de com', 8  ],
+  [ 'Ecole',   5 ],
   [ 'Indépendant',   3 ],
   [ 'Start-up',   2 ],
-  [ 'Studios',   2 ],
+  [ 'Studio',   2 ],
+  // [ 'Agence de design',   1  ],
+  // [ 'Collectif',   1 ],
+  // [ 'Consulting Communication',   1 ],
 ];
 
 var labelsCompany = arrayKeys(dataCompany);
 var seriesCompany = arrayValues(dataCompany);
 
 var dataAges = [
-  [ '19 ou moins', 4  ],
-  [ '20 à 29',   19  ],
   [ '30 à 39',   31 ],
   [ '40 à 49',   23 ],
+  [ '20 à 29',   19  ],
+  [ '19 ou moins', 4  ],
   [ '50 à 59',   1 ],
 	[ '60 et plus',   1 ],
 ];
diff --git a/toc.html b/toc.html
index c0288d7..96e40de 100644
--- a/toc.html
+++ b/toc.html
@@ -6,11 +6,16 @@
   <!-- feuilles de style -->
   <link rel="stylesheet" href="libs/chartist/chartist.min.css">
   <link href="css/base.css" rel="stylesheet" type="text/css">
+  <link href="css/graphe.css" rel="stylesheet" type="text/css">
   <!-- scripts -->
+  <script>
+    var dataArray;
+  </script>
   <script src="js/fonctions.js"></script>
   <script defer src="js/menu.js"></script>
   <script src="libs/chartist/chartist.min.js"></script>
   <script src="participants/data-participants.js"></script>
+  <script src="js/graph.js"></script>
 </head>
 
 <body class="home">
@@ -39,20 +44,82 @@ <h2>Les outils du design</h2>
   </div>
 </section>
 
-<section class="section toolbox">
-	<h2>Les plus populaires</h2>
+<section class="section toolbox" id="toolbox">
+  <h2>Les plus populaires</h2>
   <p class="texte-description">Voici les outils qui dans notre sondage se sont avérés les populaires dans leur domaine.</p>
+  <ul class="menu-tasks menu-best">
+      <li>
+        <img src="images/best/papiercrayon.svg">
+        <div class="categorie">Brainstorming</div>
+        <div class="outil">Papier & Post-its</div>
+      </li>
+      <li>
+        <img src="images/icones/design-interface.svg">
+        <div>Wireframing</div>
+        <div class="outil">Papier</div>
+      </li>
+      <li>
+        <img src="images/best/psd.svg">
+        <div>Design d’interface</div>
+        <div class="outil">Photoshop</div>
+      </li>
+      <li>
+        <img src="images/icones/edition-code.svg">
+        <div>Prototypage</div>
+        <div class="outil">HTML / CSS</div>
+      </li>
+      <li>
+        <img src="images/best/sublimetext.svg">
+        <div>Édition de code</div>
+        <div class="outil">Sublime Text</div>
+      </li>
+      <li>
+        <img src="images/best/wordpress.svg">
+        <div>CMS/frameworks</div>
+        <div class="outil">WordPress</div>
+      </li>
+      <li>
+        <img src="images/best/github.svg">
+        <div>Gestion de version</div>
+        <div class="outil">Github</div>
+      </li>
+      <li>
+        <img src="images/best/sketch.svg">
+        <div>Systèmes de design</div>
+        <div class="outil">Sketch</div>
+      </li>
+      <li>
+        <img src="images/best/slack.svg">
+        <div>Communication</div>
+        <div class="outil">Slack</div>
+      </li>
+    </ul>
+
+</section>
 
-<section class="section participants">
+<section class="section participants" id="participants">
   <h2>Les participants</h2>
 
-  <p class="texte-description">Voici quelques informations statistiques sur les participants au sondage.</p>
+  <p class="texte-description">Voici quelques informations statistiques sur les participants ayant répondu au sondage.</p>
+
+  <div class="charts-index">
+  
+    <section class="section graphe brainstorming">
+      <div class="ct-chart ct-square visuel ct-chart-1"></div>
+      <div class="legende" id="legende-1"><h3>Pays</h3></div>
+    </section>
+
+    <section class="section graphe wireframing">
+      <div class="ct-chart ct-square visuel ct-chart-2"></div>
+      <div class="legende" id="legende-2"><h3>Statut professionnel</h3></div>
+    </section>
+
+    <section class="section graphe cms-frameworks">
+      <div class="ct-chart ct-square visuel ct-chart-3"></div>
+      <div class="legende" id="legende-3"><h3>Âge</h3></div>
+    </section>    
 
-  <div class="charts">
-  <div class="ct-chart ct-square ct-chart-1 brainstorming"></div>
-  <div class="ct-chart ct-square ct-chart-2"></div>
-  <div class="ct-chart ct-square ct-chart-3"></div>
-</div>
+  </div>
   <script>
 
   new Chartist.Pie('.ct-chart-1', {
@@ -67,7 +134,7 @@ <h2>Les participants</h2>
     showLabel: true
   });
 
-
+  legendeAutomatique(dataPays, "legende-1");
 
   new Chartist.Pie('.ct-chart-2', {
 
@@ -81,6 +148,8 @@ <h2>Les participants</h2>
     showLabel: true
   });
 
+  legendeAutomatique(dataCompany, "legende-2");
+
 
   new Chartist.Pie('.ct-chart-3', {
 
@@ -94,11 +163,21 @@ <h2>Les participants</h2>
     showLabel: true
   });
 
+  legendeAutomatique(dataAges, "legende-3");
+
   </script>
 </section>
 
+<section class="section credits" id="credits">
+  <h2>Crédits</h2>
+  <p class="texte-description">Ce projet a été réalisé en mai-juin 2018, par une classe d'étudiants en 3e année Interactive Media Design de l'EAA La Chaux-de-Fonds. Merci à tous les participants pour leurs réponses, et à Thibaud Tissaut et Nadia dalla Costa pour leur soutien.</p>
+ 
+  <a href="credits/">Liste des élèves participants</a>
+
+</section>
+
 <footer class="section site-footer">
-  <p>un projet réalisé par les éléves de l'EAA de La Chaux-de-Fonds</p>
+  <p>Un projet réalisé par les éléves de l'<a href="http://www.eaa-la-chaux-de-fonds.ch/">EAA La Chaux-de-Fonds</a>. c+p 2018.</p>
 </footer>
 
 <script>