diff --git a/scss/_colorize.scss b/scss/_colorize.scss
new file mode 100644
index 0000000..4624b9c
--- /dev/null
+++ b/scss/_colorize.scss
@@ -0,0 +1,225 @@
+/* ------------------ COULEURS ------------------- */
+
+@mixin card-color($background-color, $text-color) {
+  & > .card-header { background-color: $background-color; color:$text-color; }
+}
+
+@mixin button-lighten($background-color, $text-color) {
+  background-color: lighten($background-color, 10%); 
+  color:$text-color;
+}
+
+@mixin button-color($background-color, $text-color) {
+  background-color: $background-color;
+  color: $text-color;
+  &, &:not(.disabled):not(:disabled) {
+    &:hover, &:active, &:focus {
+      @include button-lighten($background-color, $text-color);
+    }
+  }
+}
+
+@mixin badge-color($background-color, $text-color) {
+  background-color: $background-color;
+  color: $text-color;
+    &, &:not(.disabled):not(:disabled) {
+    &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
+      @include button-lighten($background-color, $text-color);
+    }
+  }
+}
+
+@mixin background-color($background-color, $text-color) {
+  background-color: $background-color!important;
+  color: $text-color;
+}
+
+@mixin alert-color($background-color) {
+  background-color: lighten($background-color, 35%);
+  color: darken($background-color, 80%);
+}
+
+@mixin text-color($text-color) {
+  color: $text-color;
+}
+
+a, a:hover, a:active {
+  color: $color-link;
+}
+
+::selection {
+  @include background-color($color-selection, #FFF);
+}
+::-moz-selection {
+  @include background-color($color-selection, #FFF);
+}
+
+/* CARDS */
+
+.card {
+  &-blue { @include card-color($color-blue, #FFF); }
+  &-violet { @include card-color($color-violet, #FFF); }
+  &-purple { @include card-color($color-purple, #FFF); }
+  &-red { @include card-color($color-red, #FFF); }
+  &-orange { @include card-color($color-orange, #FFF); }
+  &-green { @include card-color($color-green, #FFF); }
+  &-skyblue { @include card-color($color-skyblue, #FFF); }
+  &-dark { @include card-color($color-dark, #FFF); }
+  &-light { @include card-color($color-light, #111); }
+  &-turquoise { @include card-color($color-turquoise, #FFF); }
+  &-yellow { @include card-color($color-yellow, #FFF); }
+  &-brown { @include card-color($color-brown, #FFF); }
+  &-grey { @include card-color($color-grey, #FFF); }
+  
+  &-primary { @include card-color($color-primary, #FFF); }
+  &-secondary { @include card-color($color-secondary, #FFF); }
+  &-warning { @include card-color($color-warning, #FFF); }
+  &-danger { @include card-color($color-danger, #FFF); }
+  &-info { @include card-color($color-info, #FFF); }
+  &-success { @include card-color($color-success, #FFF); }
+}
+
+/* BUTTONS & BADGES */
+
+.btn {
+  &-blue { @include button-color($color-blue, #FFF); }
+  &-violet { @include button-color($color-violet, #FFF); }
+  &-purple { @include button-color($color-purple, #FFF); }
+  &-red { @include button-color($color-red, #FFF); }
+  &-orange { @include button-color($color-orange, #FFF); }
+  &-green { @include button-color($color-green, #FFF); }
+  &-skyblue { @include button-color($color-skyblue, #FFF); }
+  &-dark { @include button-color($color-dark, #FFF); }
+  &-light { @include button-color($color-light, #111); }
+  &-turquoise { @include button-color($color-turquoise, #FFF); }
+  &-yellow { @include button-color($color-yellow, #FFF); }
+  &-brown { @include button-color($color-brown, #FFF); }
+  &-grey { @include button-color($color-grey, #FFF); }
+  
+  &-primary { @include button-color($color-primary, #FFF); }
+  &-secondary { @include button-color($color-secondary, #FFF); }
+  &-warning { @include button-color($color-warning, #FFF); }
+  &-danger { @include button-color($color-danger, #FFF); }
+  &-info { @include button-color($color-info, #FFF); }
+  &-success { @include button-color($color-success, #FFF); }
+}
+
+/* social */
+
+.btn {
+  &-facebook {@include button-color(#3B5998, #FFF);}
+  &-twitter {@include button-color(#55ACEE, #FFF);}
+  &-googleplus {@include button-color(#d34836, #FFF);}
+  &-diaspora {@include button-color(#313739, #FFF);}
+  &-mastodon {@include button-color(#282c37, #FFF);}
+}
+
+/* BADGES */
+
+.badge {
+  &-blue { @include badge-color($color-blue, #FFF); }
+  &-violet { @include badge-color($color-violet, #FFF); }
+  &-purple { @include badge-color($color-purple, #FFF); }
+  &-red { @include badge-color($color-red, #FFF); }
+  &-orange { @include badge-color($color-orange, #FFF); }
+  &-green { @include badge-color($color-green, #FFF); }
+  &-skyblue { @include badge-color($color-skyblue, #FFF); }
+  &-dark { @include badge-color($color-dark, #FFF); }
+  &-light { @include badge-color($color-light, #111); }
+  &-turquoise { @include badge-color($color-turquoise, #FFF); }
+  &-yellow { @include badge-color($color-yellow, #FFF); }
+  &-brown { @include badge-color($color-brown, #FFF); }
+  &-grey { @include badge-color($color-grey, #FFF); }
+  
+  &-primary { @include badge-color($color-primary, #FFF); }
+  &-secondary { @include badge-color($color-secondary, #FFF); }
+  &-warning { @include badge-color($color-warning, #FFF); }
+  &-danger { @include badge-color($color-danger, #FFF); }
+  &-info { @include badge-color($color-info, #FFF); }
+  &-success { @include badge-color($color-success, #FFF); }
+}
+
+/* BACKGROUNDS */
+
+.bg {
+  &-blue { @include background-color($color-blue, #FFF); }
+  &-violet { @include background-color($color-violet, #FFF); }
+  &-purple { @include background-color($color-purple, #FFF); }
+  &-red { @include background-color($color-red, #FFF); }
+  &-orange { @include background-color($color-orange, #FFF); }
+  &-green { @include background-color($color-green, #FFF); }
+  &-skyblue { @include background-color($color-skyblue, #FFF); }
+  &-dark { @include background-color($color-dark, #FFF); }
+  &-light { @include background-color($color-light, #111); }
+  &-turquoise { @include background-color($color-turquoise, #FFF); }
+  &-yellow { @include background-color($color-yellow, #FFF); }
+  &-brown { @include background-color($color-brown, #FFF); }
+  &-grey { @include background-color($color-grey, #FFF); }  
+  
+  &-primary { @include background-color($color-primary, #FFF); }
+  &-secondary { @include background-color($color-secondary, #FFF); }
+  &-warning { @include background-color($color-warning, #FFF); }
+  &-danger { @include background-color($color-danger, #FFF); }
+  &-info { @include background-color($color-info, #FFF); }
+  &-success { @include background-color($color-success, #FFF); }
+}
+
+/* ALERTS */
+
+.alert {
+  &-blue { @include alert-color($color-blue); }
+  &-violet { @include alert-color($color-violet); }
+  &-purple { @include alert-color($color-purple); }
+  &-red { @include alert-color($color-red); }
+  &-orange { @include alert-color($color-orange); }
+  &-green { @include alert-color($color-green); }
+  &-skyblue { @include alert-color($color-skyblue); }
+  &-dark { @include alert-color($color-dark); }
+  &-light { @include alert-color($color-light); }
+  &-turquoise { @include alert-color($color-turquoise); }
+  &-yellow { @include alert-color($color-yellow); }
+  &-brown { @include alert-color($color-brown); }
+  &-grey { @include alert-color($color-grey); }  
+  
+  &-primary { @include alert-color($color-primary); }
+  &-secondary { @include alert-color($color-secondary); }
+  &-warning { @include alert-color($color-warning); }
+  &-danger { @include alert-color($color-danger); }
+  &-info { @include alert-color($color-info); }
+  &-success { @include alert-color($color-success); }
+}
+
+/* TEXT */
+
+.text {
+  &-blue { @include text-color($color-blue); }
+  &-violet { @include text-color($color-violet); }
+  &-purple { @include text-color($color-purple); }
+  &-red { @include text-color($color-red); }
+  &-orange { @include text-color($color-orange); }
+  &-green { @include text-color($color-green); }
+  &-skyblue { @include text-color($color-skyblue); }
+  &-dark { @include text-color($color-dark); }
+  &-light { @include text-color($color-light); }
+  &-turquoise { @include text-color($color-turquoise); }
+  &-yellow { @include text-color($color-yellow); }
+  &-brown { @include text-color($color-brown); }
+  &-grey { @include text-color($color-grey); }  
+  
+  &-primary { @include text-color($color-primary); }
+  &-secondary { @include text-color($color-secondary); }
+  &-warning { @include text-color($color-warning); }
+  &-danger { @include text-color($color-danger); }
+  &-info { @include text-color($color-info); }
+  &-success { @include text-color($color-success); }
+}
+
+/* Clear-Typography overrides */
+
+mark {
+  background-color: lighten($color-mark, 30%)
+}
+
+blockquote, pre {
+  border-color: $color-primary;
+}
diff --git a/scss/_commons.scss b/scss/_commons.scss
new file mode 100644
index 0000000..5cb08be
--- /dev/null
+++ b/scss/_commons.scss
@@ -0,0 +1,425 @@
+/* ------------------ GLOBAL STYLE ------------------- */
+
+@mixin li-no-margin() {
+  li {
+    margin: 0;
+  }
+}
+
+.no-pills {
+	list-style:none;
+}
+
+.align {
+  &-center {text-align: center;}
+  &-left {text-align: left;}
+  &-right {text-align: right;}
+}
+
+h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
+	color:white;
+	text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4);
+}
+
+/* ------------------ HEADERS ------------------- */
+
+
+header h1 {
+	border-style:none !important;
+	color:#FFF;
+	font-weight:700;
+	font-size:5.4em;
+	font-style:oblique;
+	text-shadow: 0px 2px 12px rgba(0, 0, 0, 0);
+	padding-bottom:0px;
+  margin:auto;
+  text-align:center;
+  line-height: 1.5em;
+}
+
+.navbar {
+  box-shadow: $large-shadow;
+  @include borders();
+  border-left: 0;
+  border-right: 0;
+  ul {
+    padding-bottom:0;
+  }
+  @include li-no-margin();
+}
+
+.dropdown-menu {
+  box-shadow: $narrow-shadow, $inset-shadow;
+}
+
+
+/* ------------------ FOOTER ------------------- */
+
+footer {
+  margin-top:40px;
+}
+
+/* social media */
+
+ul.social {
+  font-size:1.5em;
+  padding-bottom:1em;
+  margin:auto;
+  text-align:center;
+  li {
+    margin:0;
+    list-style: none;
+    display: inline;
+    a {
+      color:#FFFFFF;
+      background-color:#000000;
+      padding:0.3em;
+      padding-left:0.36em;
+      padding-right:0.36em;
+      vertical-align:middle;
+      border-radius:100%;
+      &:hover {
+        color:#000;
+        background-color:#FFF
+      }
+    }
+  }
+}
+
+
+/* ------------------ CARDS ------------------- */
+
+.card {
+  @include border-radius();
+	box-shadow: $large-shadow;
+  border: none;
+  margin-bottom:1.2em;
+}
+
+.card-shadow {
+  box-shadow: $large-shadow, $inset-shadow;
+}
+
+.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,.card h7,.card h8,.card h9,.card h10  {
+	color:#333;
+	text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
+}
+
+/* header and titles */
+
+.card-header {
+  @include borders();
+  font-size:1.1em;
+  box-shadow: $inset-relief;
+	text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
+  font-weight:600;
+  border-radius: 0;
+  
+  &:first-child {
+    @include border-radius();
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  
+  &:last-child {
+    @include border-radius();
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  
+  h1, h2, h3, h4, h5, h6, h7, h8, h9, h10  {
+    font-size:1em;
+    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
+    padding:0px;
+    margin:0px;
+    color:#FFF;
+    font-weight:600;
+    line-height:1.5em;
+  }
+}
+
+/* meta */
+
+.card-meta {
+	padding:1em;
+  border-bottom: $border-size solid rgba(0,0,0,0.2);
+  
+  &.media {
+    -ms-flex-align: center !important;
+    align-items: center !important;
+  }
+  
+  .media-left .media-object {
+	  height: 64px;
+	  width: 64px;
+	  border-radius: 10px;
+    margin-right:1em;
+  }
+  
+  
+  author {
+	  display:block;
+	  font-weight:600;
+  }
+
+  time {
+  	display:block;
+  	font-style:italic;
+  }
+}
+
+/* lists */
+
+.list-group-item {
+	border: none;
+	background-color:transparent;
+}
+
+a.list-group-item:hover {
+	border-style:none;
+	border-width:0px;
+	border-radius:0px;
+	background-color:rgba(0,0,0,0.1);
+}
+
+
+/* ------------------ BUTTONS ------------------- */
+
+.btn {
+	@include borders();
+	@include border-radius();
+	box-shadow: $large-shadow, $inset-shadow;
+	text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
+}
+
+.btn:hover {
+  position:relative;
+	box-shadow: $narrow-shadow, $inset-shadow;
+  top:1px;
+	@include borders();
+}
+
+.btn:active {
+  position:relative;
+	box-shadow: $inset-shadow-inverted;
+  top:2px;
+	@include borders();
+}
+
+.btn-group {
+	box-shadow: $large-shadow;
+}
+
+.btn-group .btn {
+	box-shadow: $inset-shadow;
+	@include border-radius();
+	&:not(:first-child) {
+	  border-top-left-radius: 0;
+	  border-bottom-left-radius: 0;
+	}
+	&:not(:last-child) {
+	  border-top-right-radius: 0;
+	  border-bottom-right-radius: 0;
+	}
+}
+
+.btn-group .btn:hover {
+  position:relative;
+  top:1px;
+	box-shadow: $inset-shadow;
+}
+
+.btn-group .btn:active, .btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active,
+.show > .btn.dropdown-toggle {
+  position:relative;
+	box-shadow: $inset-shadow-inverted!important;
+  top:2px;
+	@include borders();
+}
+
+.btn:focus, .btn-primary:focus, .btn-secondary:focus, .btn-danger:focus, .btn-warning:focus, .btn-success:focus, .btn-info:focus, .btn-dark:focus, .btn-light:focus {
+  position:relative;
+	box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
+  top:1px;
+  outline: none;
+}
+
+/* ------------------ ALERTS ------------------- */
+
+.alert {
+  @include borders();
+  @include border-radius();
+  color:rgba(0, 0, 0, 0.7);
+  box-shadow: $large-shadow;
+}
+
+.alert a, .alert-link {
+  color:rgba(0, 0, 0, 0.7);
+  font-weight:bold;
+}
+
+/* ------------------ BREADCRUMB ------------------- */
+
+.breadcrumb {
+  @include border-radius();
+	box-shadow: $large-shadow, $inset-shadow;
+  border: 0;
+  background-color:#eeeeec;
+  margin-bottom:1.2em;
+  @include li-no-margin();
+}
+
+/* ------------------ PARTAGE RESEAUX SOCIAUX ------------------- */
+
+.share-buttons {
+  margin:15px;
+}
+
+.reagir {
+  text-align:right;
+}
+
+/* ------------------ PREVIEWS ------------------- */
+
+.previews-section {
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.preview-container {
+  margin-bottom:1em;
+  padding:0.4em;
+  width:100%
+}
+
+
+
+@media(max-width:767px){}
+@media(min-width:768px){}
+@media(min-width:992px){
+
+  .prev-col-2 .preview-container {
+    width:50%;
+  }
+
+  .prev-col-3 .preview-container {
+    width:33%;
+  }
+
+  .prev-col-4 .preview-container {
+    width:25%;
+  }
+
+}
+
+.card-preview {
+  @include border-radius();
+  width:100%;  
+  margin:auto;
+  box-shadow: $large-shadow, $inset-shadow;
+}
+
+.preview-link:hover {
+  text-decoration:none!important;
+}
+
+.preview-item {
+  
+  height:200px;
+  overflow:hidden;
+  font-size:0.9em;
+	line-height: 1.5em !important;
+  padding:0.2em;
+  text-align:justify;
+  background-color:rgba(0,0,0,0.05);
+  color:rgba(0,0,0,0.4);
+	position: relative;
+	
+	
+	display: flex;
+  -ms-flex-align: center !important;
+  align-items: center !important;
+  justify-content: center;
+}
+
+.preview-content {
+  max-height:200px;
+}
+
+.preview-content > p {
+  width:100%;
+  margin:auto;
+}
+
+.preview-content > p.p-img {
+  text-align:center;
+  margin:auto;
+  padding:auto;
+  display: block;
+  width:100%;
+}
+
+.preview-content > p > img {
+  max-width:100%;
+  height:auto;
+  vertical-align:middle;
+  margin:auto;
+  text-align:center;
+}
+
+.preview-item h1, .preview-item h2, .preview-item h3, .preview-item h4, .preview-item h5, .preview-item h6, .preview-item h7 {
+  margin-bottom:0px;
+  max-width:100%;
+  display:none;
+}
+
+.preview-item h1 {
+  display:none;
+}
+
+.preview-overlay {
+	height: 100%;
+	width: 100%;
+	opacity: 0;
+	top: 0;
+	left: 0;
+	position: absolute;
+	padding: 0;
+	transition: opacity .5s;
+	color: #FFF;
+	background-color: rgba(0,0,0,0.5);
+	text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
+  backdrop-filter: none;
+}
+
+.preview-overlay h1 {
+  max-width:100%;
+  padding-top:0.3em;
+  margin:auto;
+  margin-bottom:0px;
+  text-align:center;
+  display:block;
+  font-size:2em;
+  color: white;
+}
+
+.preview-overlay h1,.preview-overlay h2,.preview-overlay h3,.preview-overlay h4,.preview-overlay h5,.preview-overlay h6,.preview-overlay h7,.preview-overlay h8,.preview-overlay h9,.preview-overlay h10  {
+	color:white;
+  text-shadow: 1px 1px 0px rgba(0,0,0,0.7);
+}
+
+.preview-item:hover .preview-overlay {
+  opacity: .9;
+  transition: opacity .5s;
+  backdrop-filter: blur(2px);
+}
+
+.comment-text {
+  margin-top:0.8em;
+}
+
+.card-preview time {
+  margin-bottom:0.4em;
+  display:block;
+}
diff --git a/scss/_overrides.scss b/scss/_overrides.scss
new file mode 100644
index 0000000..e69de29
diff --git a/scss/_palette.scss b/scss/_palette.scss
new file mode 100644
index 0000000..c5d6468
--- /dev/null
+++ b/scss/_palette.scss
@@ -0,0 +1,18 @@
+$color-blue: #4e63c9;
+$color-violet: #ce4dcd;
+$color-purple: #7951c0;
+$color-red: #e33d22;
+$color-orange: #eb790a;
+$color-green: #75b82d;
+$color-skyblue: #42a0f3;
+$color-dark: #2D2D2D;
+$color-light: #eeeeec;
+$color-turquoise: #46bd9e;
+$color-yellow: #f6d32d;
+$color-brown: #986a44;
+$color-grey: #77767b;
+
+$color-warning: $color-orange;
+$color-danger: $color-red;
+$color-info: $color-skyblue;
+$color-success: $color-green;
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..896b2a5
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,36 @@
+@import 'palette';
+
+/* ------------------ CUSTOM STYLE ------------------- */
+
+$large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+$narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
+$inset-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+$inset-shadow-inverted: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
+$inset-relief: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
+
+$border-radius: 3px;
+$border-size: 1px;
+
+$color-primary: $color-purple;
+$color-secondary: $color-blue;
+$color-link: $color-blue;
+$color-selection: $color-blue;
+$color-mark: $color-yellow;
+
+@mixin borders() {
+  border: $border-size solid rgba(0, 0, 0, 0.3)
+}
+
+@mixin border-radius() {
+  border-radius: $border-radius $border-radius $border-radius $border-radius;
+}
+
+#wrapper {
+  background: #64b5f6 url('../img/background.png') center bottom repeat-x;
+}
+
+@import 'commons';
+
+@import 'colorize';
+
+@import 'overrides';