diff --git a/client/src/Cascading_Style_Sheets/pichart.css b/client/src/Cascading_Style_Sheets/pichart.css
deleted file mode 100644
index fc09b4cf1121399cfa30ff887e91dc0975573c8c..0000000000000000000000000000000000000000
--- a/client/src/Cascading_Style_Sheets/pichart.css
+++ /dev/null
@@ -1,23 +0,0 @@
-div#app {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- width: 960px;
- height: 500px;
- position: relative;
- }
-
- svg {
- width: 100%;
- height: 100%;
- }
-
- path.slice{
- stroke-width:2px;
- }
-
- polyline{
- opacity: .3;
- stroke: black;
- stroke-width: 2px;
- fill: none;
- }
-
\ No newline at end of file
diff --git a/client/src/Cascading_Style_Sheets/style.css b/client/src/Cascading_Style_Sheets/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..7c8e550f5b7697848727b86626dc74f174a6f29c
--- /dev/null
+++ b/client/src/Cascading_Style_Sheets/style.css
@@ -0,0 +1,190 @@
+body,
+html {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ font-size: 14px;
+ font-family: Arial;
+}
+.conteneur {
+ max-width: 1150px;
+ margin: 0 auto;
+ box-shadow: 0 2px 30px #000;
+}
+.content {
+ position: relative;
+ width: 960px;
+ margin: 0 auto;
+}
+.clear {
+ clear: both;
+}
+.left {
+ float: left;
+}
+.right {
+ float: right;
+}
+.corps {
+ background: url('../images/root.png');
+ background-repeat: repeat;
+ background-color: linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
+ linear-gradient(#20262b, #191d22),
+ radial-gradient(
+ center 50% 0%,
+ radius 100%,
+ rgba(114, 131, 148, 0.9),
+ rgba(255, 255, 255, 0)
+ );
+}
+
+.root {
+ background-image: url('../images/fond.jpg');
+ background-repeat: repeat;
+ background-color: linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
+ linear-gradient(#20262b, #191d22),
+ radial-gradient(
+ center 50% 0%,
+ radius 100%,
+ rgba(114, 131, 148, 0.9),
+ rgba(255, 255, 255, 0)
+ );
+}
+
+.root2 {
+ background-image: url('../images/root.png');
+ background-repeat: repeat;
+ background-color: linear-gradient(#38424b 0%, #1f2429 20%, #191d22 100%),
+ linear-gradient(#20262b, #191d22),
+ radial-gradient(
+ center 50% 0%,
+ radius 100%,
+ rgba(114, 131, 148, 0.9),
+ rgba(255, 255, 255, 0)
+ );
+}
+
+nav {
+ position: relative;
+ width: 100%;
+ height: 109px;
+ background: url('../images/nav-bg.jpg') no-repeat;
+}
+nav .logo {
+ position: absolute;
+ left: 0;
+ top: 31px;
+}
+nav .menu {
+ margin: 38px 0 0 0;
+ padding: 0;
+ list-style-type: none;
+ float: right;
+}
+nav .menu li {
+ margin: 0;
+ padding: 0;
+ float: left;
+}
+nav .menu li a {
+ color: #0b4c6e;
+ font-weight: bold;
+ font-size: 18px;
+ text-decoration: none;
+ display: block;
+ margin: 0 0 0 20px;
+}
+nav .menu li a:hover {
+ color: #148ccb;
+}
+.footer {
+ clear: both;
+}
+.footer .content {
+ margin: 20px auto 20px auto;
+ padding: 10px 0 20px 0;
+ color: #999;
+ text-align: center;
+ border-top: solid 2px #7f7f7f;
+}
+.home h1 {
+ margin: 0;
+ padding: 0;
+ text-indent: -999px;
+ overflow: hidden;
+ height: 437px;
+}
+.home .teaser {
+ background: url('/images/home-teaser-bg.jpg') no-repeat top center; height: 411px;
+}
+
+.admin {
+ font-size: 16px;
+}
+.admin .container {
+ padding: 20px;
+ max-width: 900px;
+}
+.admin hr {
+ margin: 10px 0 10px 0;
+ border-top: none;
+ border-bottom: dotted 1px #999;
+}
+.admin .list-picture {
+ max-width: 70px;
+}
+.admin .list-column {
+ width: 60%;
+}
+.admin .list-column table {
+ width: 94%;
+}
+.admin .list-column table td {
+ border-bottom: solid 1px #999;
+ border-right: dotted 1px #999;
+ padding: 4px;
+}
+.admin .list-column a {
+ color: #000;
+}
+.admin .list-column a:hover {
+ color: #999;
+}
+.admin .form-column {
+ width: 40%;
+}
+.admin .form-column input[type="text"] {
+ width: 100%;
+}
+.admin .form-column textarea {
+ width: 100%;
+ height: 250px;
+}
+.admin input[type="text"],
+.admin select,
+.admin textarea {
+ border: solid 2px #999;
+ background: none;
+ padding: 4px 6px;
+ border-radius: 4px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+}
+
+.bb, .bb::before, .bb::after {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+.bb {
+ width: 100px;
+ height: 110px;
+ margin: auto;
+ background: url("https://www.franck-berna-immo.fr/wp-content/uploads/2017/12/Home-icon-1.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
+ color: #69ca62;
+}
+
diff --git a/client/src/Helpers/Bar.js b/client/src/Helpers/Bar.js
index 518ae76fa40432734657821859cd849e31be6400..24fbe6f68cdbc286daeab39e7b56e25ab66e8603 100644
--- a/client/src/Helpers/Bar.js
+++ b/client/src/Helpers/Bar.js
@@ -74,11 +74,12 @@ const Bar = props => {
return (
<>