diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 531d1bc..3e187fd 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -21,15 +21,24 @@ li:nth-of-type(odd){
 }
 
 tag{
-  background : #00B7FF;
+  background : #00b7ff;
   padding: 0.5em;
   border-radius: 0.15em;
 }
+button{
+  border: 0;
+  padding: 0.5em 1em;
+  border-radius: 0.2em;
+  cursor:pointer;
+}
 .toggle + ul{
  height: 0;
   visibility: collapse;
 }
-
+.toggle:focus{
+  background:#00b7ff;
+  color: white;
+}
 .toggle:focus + ul{
   height: 100%;
   transition: all ease 0.5s;
@@ -39,3 +48,34 @@ tag{
   padding: 0.5em;
   margin-left: 1em;
 }
+.text-right{
+  text-align: right;
+}
+
+.proportion-over-95{
+  background: #b9ffbe;
+}
+.proportion-over-90{
+  background: aquamarine;
+}
+.proportion-over-80{
+  background: #b8ffe8;
+}
+.proportion-over-65{
+  background: #e5ffb8;
+}
+.proportion-over-50{
+  background: #ffffd9;
+}
+.proportion-over-40{
+  background: #ffeed5;
+}
+.proportion-over-25{
+  background: #d6bcaa;
+}
+.proportion-over-15{
+  background: #e5cbd0;
+}
+.proportion-over-0{
+  background: #a59098;
+}
diff --git a/routes/index.js b/routes/index.js
index df4e10c..8f8d766 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -10,10 +10,10 @@ let convertFiles = false;
 let computeDataOnExtract = true;
 
 let jsonAllData = {
-  tasks : {},
-  stats : {},
-  projects : {},
-  tags : {},
+  tasks   : {},
+  stats   : {},
+  projects: {},
+  tags    : {},
 }
 /* GET home page. */
 /**
@@ -21,12 +21,12 @@ let jsonAllData = {
  */
 router.get('/', async function (req, res, next) {
 
-  if(convertFiles){
+  if (convertFiles) {
 
-  convertOneXmlToJson('gtg_tasks',res)
-  convertOneXmlToJson('tags',res)
-  convertOneXmlToJson('projects',res)
-  }else{
+    convertOneXmlToJson('gtg_tasks', res)
+    convertOneXmlToJson('tags', res)
+    convertOneXmlToJson('projects', res)
+  } else {
     console.log('================== conversion de fichiers désactivée dans index.js ================== ')
   }
 
@@ -34,28 +34,32 @@ router.get('/', async function (req, res, next) {
   jsonAllData.tags = require('../sources/tags_gtg.json')
   jsonAllData.tasks = require('../sources/gtg_tasks_gtg.json')
 
-  if(computeDataOnExtract){
+  if (computeDataOnExtract) {
 
-  jsonAllData = computeData(jsonAllData)
-    computeDataOnExtract =false;
-  }else{
+    jsonAllData = computeData(jsonAllData)
+    computeDataOnExtract = false;
+  } else {
     console.log('================== calcul de stats désactivé dans index.js ================== ')
   }
-  console.log('json files read' )
-  res.render('index', {title: "Conversion de GTG tâches",
-    json: jsonAllData,
-    getPercentOfOpenTasks})
+  console.log('json files read')
+  res.render('index', {
+    title: "Conversion de GTG tâches",
+    json : jsonAllData,
+    getPercent,
+    computeBgColorOnProportionOfOpenTasks,
+    getPercentOfOpenTasks
+  })
 });
 
-async function readfileJson(fileToOpen){
+async function readfileJson(fileToOpen) {
   fs.readFile(`sources/${fileToOpen}`, "utf-8", function (err, data) {
     if (err) console.log(err);
-    console.log('ok ', fileToOpen )
+    console.log('ok ', fileToOpen)
     return JSON.parse(data)
   });
 }
 
-function computeData(jsonAllData){
+function computeData(jsonAllData) {
 
   // trouver le nombre de tâches ayant un tag en particulier
   // et rajouter ce nombre à chaque tag, dans countTasks : N
@@ -63,51 +67,51 @@ function computeData(jsonAllData){
 
   jsonAllData.stats = {
     tasksCount : jsonAllData.tasks.project.task.length,
-    tasksClosed : 0,
-    tasksOpen : 0,
-    listOpen: [],
-    listClosed: [],
+    tasksClosed: 0,
+    tasksOpen  : 0,
+    listOpen   : [],
+    listClosed : [],
   }
 
-  for(let t of jsonAllData.tasks.project.task ) {
+  for (let t of jsonAllData.tasks.project.task) {
     // console.log('t', t)
     let tags = t["$"].tags.split(',')
-    for(let tag of tags){
+    for (let tag of tags) {
       // console.log('tag', tag)
-      jsonAllData.tags.tagstore.tag.map( elem =>{
+      jsonAllData.tags.tagstore.tag.map(elem => {
         // console.log('elem', elem)
-        if(elem['$'].name == tag){
-          if(!elem.tasks){
+        if (elem['$'].name == tag) {
+          if (!elem.tasks) {
             elem.tasks = 0
           }
-          if(!elem.tasksListById){
+          if (!elem.tasksListById) {
             elem.tasksListById = []
           }
-          if(!elem.tasksListByTitle){
+          if (!elem.tasksListByTitle) {
             elem.tasksListByTitle = []
           }
-          if(!elem.tasksListIsActiveByTitle){
+          if (!elem.tasksListIsActiveByTitle) {
             elem.tasksListIsActiveByTitle = []
           }
-          if(!elem.tasksListIsDoneByTitle){
+          if (!elem.tasksListIsDoneByTitle) {
             elem.tasksListIsDoneByTitle = []
           }
           elem.tasks++
           elem.tasksListById.push(t['$'].id)
           elem.tasksListByTitle.push(t.title)
-          if(t['$'].status == "Active"){
-          elem.tasksListIsActiveByTitle.push(t.title)
+          if (t['$'].status == "Active") {
+            elem.tasksListIsActiveByTitle.push(t.title)
           }
-          if(t['$'].status == "Done"){
-          elem.tasksListIsDoneByTitle.push(t.title)
+          if (t['$'].status == "Done") {
+            elem.tasksListIsDoneByTitle.push(t.title)
           }
         }
       })
     }
-    if(t.donedate){
+    if (t.donedate) {
       jsonAllData.stats.tasksClosed++;
       jsonAllData.stats.listOpen.push(t);
-    }else{
+    } else {
       jsonAllData.stats.tasksOpen++;
     }
     // console.log('tags', tags)
@@ -115,7 +119,8 @@ function computeData(jsonAllData){
   return jsonAllData
 
 }
-function convertOneXmlToJson(fileToOpen,res){
+
+function convertOneXmlToJson(fileToOpen, res) {
   fs.readFile(`sources/${fileToOpen}.xml`, "utf-8", function (err, data) {
     if (err) console.log(err);
     const results = transformToJson(data, fileToOpen, res)
@@ -124,10 +129,51 @@ function convertOneXmlToJson(fileToOpen,res){
   });
 }
 
-function getPercentOfOpenTasks(someCount){
-  return Math.round( 100*someCount / jsonAllData.stats.tasksOpen)
+function getPercentOfOpenTasks(someCount) {
+  return Math.round(100 * someCount / jsonAllData.stats.tasksOpen)
 }
-function transformToJson(xml,fileToOpen, res) {
+
+function getPercent(someCount, total) {
+  return Math.round(100 * someCount / total)
+}
+
+function computeBgColorOnProportionOfOpenTasks(someProportionNumber) {
+  let result = '';
+
+  if(someProportionNumber >= 95){
+    result = 'proportion-over-95'
+  }
+  else if(someProportionNumber >= 90){
+    result = 'proportion-over-90'
+  }
+  else if(someProportionNumber >= 80){
+    result = 'proportion-over-80'
+  }
+  else if(someProportionNumber >= 65){
+    result = 'proportion-over-65'
+  }
+  else if(someProportionNumber >= 50){
+    result = 'proportion-over-50'
+  }
+  else if(someProportionNumber >= 40){
+    result = 'proportion-over-40'
+  }
+  else if(someProportionNumber >= 25){
+    result = 'proportion-over-25'
+  }
+  else if(someProportionNumber >= 15){
+    result = 'proportion-over-15'
+  }
+
+  console.log('result', someProportionNumber, result)
+  return result;
+}
+
+function exportToMarkdown() {
+
+}
+
+function transformToJson(xml, fileToOpen, res) {
   return parseString(xml, function (err, result) {
     if (err) console.log(err);
 
@@ -151,5 +197,4 @@ function transformToJson(xml,fileToOpen, res) {
   });
 }
 
-
 module.exports = router;
diff --git a/views/index.jade b/views/index.jade
index b53a1cc..45ecac4 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -24,13 +24,15 @@ block content
           span.name= t['$'].name
           span.color= t['$'].color
           span.parent= t['$'].parent
-          span.tasks= t.tasks
           if t.tasksListIsDoneByTitle
-            span.tasks= t.tasksListIsDoneByTitle.length
+            span.text-right= t.tasks
+          if t.tasksListIsDoneByTitle
+            span.text-right.tasks= t.tasksListIsDoneByTitle.length
           if t.tasksListIsActiveByTitle
-            span.tasks #{t.tasksListIsActiveByTitle.length}
-            span.tasks #{getPercentOfOpenTasks(t.tasksListIsActiveByTitle.length)} %
-            button.toggle voir
+            span.text-right.tasks #{t.tasksListIsActiveByTitle.length}
+            span.text-right.tasks(class=computeBgColorOnProportionOfOpenTasks(getPercent(t.tasksListIsActiveByTitle.length, t.tasks))) #{getPercent(t.tasksListIsActiveByTitle.length, t.tasks)} %
+            span.text-right.tasks #{getPercentOfOpenTasks(t.tasksListIsActiveByTitle.length)} %
+            button.text-right.toggle voir
             ul
               each activetask in t.tasksListIsActiveByTitle
                 li.task_item= activetask