Merge branch 'dev' into filter

styles/main.css

@@ -159,12 +159,6 @@ article {
     text-align:left;
 }
 
-@media only screen and (max-width:1200px) {
-    article {
-        width:95vw;
-    }
-}
-
 article h1 {
     text-align:center; 
 }
@@ -722,9 +716,87 @@ article #stats .stat {
 
 article.infos .mail {
     font-weight:bold;
-    font-size:1.2rem;
+    font-size:1.4rem;
+}
+
+article.infos .stat {
+    width:40vw;
+    margin:auto;
+    margin-top:2rem;
+    text-align:center;
+}
+
+@media only screen and (max-width:600px) {
+    article.infos .stat {
+        width:90vw;
+    }
+}
+
+@media only screen and (min-width:601px) and (max-width:1000px) {
+    article.infos .stat {
+        width:70vw;
+    }
+}
+
+@media only screen and (min-width:1001px) and (max-width:1200px) {    
+    article.infos .stat {
+        width:60vw;
+    }
+}
+
+article.infos .stat canvas {
+    margin-bottom:1rem;
+}
+
+article.infos .stat .legend-cont {
+    display:inline-block;
+    text-align:center;
+    white-space:nowrap;
+}
+
+article.main.infos .stat .legend {
+    width:25px;
+    height:10px;
+    border:1px solid black;
+    display:inline-block;
+    margin-right:0.4em;
+    text-align:center;
+}
+
+article.main.infos .stat .legend + span {
+    margin-right:0.8em;
+}
+
+article.infos .stat .none {
+    background:#FB6962;
+}
+
+article.infos .stat .bad {
+    background:#FCFC99;
+}
+
+article.infos .stat .ok {
+    background:#79DE79;
+}
+
+article.infos .stat .good {
+    background:#0CC078;
 }
 
 article.infos h4 + p {
     margin-left:1rem;
+}
+
+
+
+
+
+@media only screen and (max-width:1200px) {
+    article, article.main {
+        width:95vw;
+    }
+
+    article .center {
+        text-align:left;
+    }
 }