diff --git a/css/style.css b/css/style.css
index 7365aaf..903d0b6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,3 +1,334 @@
+/* ------------------ GLOBAL STYLE ------------------- */
+#wrapper {
+  background: #64b5f6 url("../img/background.png") center bottom repeat-x; }
+
+.no-pills {
+  list-style: none; }
+
+.align-center {
+  text-align: center; }
+
+.align-left {
+  text-align: left; }
+
+.align-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 transparent;
+  padding-bottom: 0px;
+  margin: auto;
+  text-align: center;
+  line-height: 1.5em; }
+
+.navbar {
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-left: 0;
+  border-right: 0; }
+  .navbar ul {
+    padding-bottom: 0; }
+  .navbar li {
+    margin: 0; }
+
+.dropdown-menu {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+
+/* ------------------ FOOTER ------------------- */
+footer {
+  margin-top: 40px; }
+
+/* social media */
+ul.social {
+  font-size: 1.5em;
+  padding-bottom: 1em;
+  margin: auto;
+  text-align: center; }
+  ul.social li {
+    margin: 0;
+    list-style: none;
+    display: inline; }
+    ul.social li a {
+      color: #FFFFFF;
+      background-color: #000000;
+      padding: 0.3em;
+      padding-left: 0.36em;
+      padding-right: 0.36em;
+      vertical-align: middle;
+      border-radius: 100%; }
+      ul.social li a:hover {
+        color: #000;
+        background-color: #FFF; }
+
+/* ------------------ CARDS ------------------- */
+.card {
+  border-radius: 3px 3px 3px 3px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
+  border: none;
+  margin-bottom: 1.2em; }
+
+.card-shadow {
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+
+.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 transparent; }
+
+/* header and titles */
+.card-header {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  font-size: 1.1em;
+  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  font-weight: 600;
+  border-radius: 0; }
+  .card-header:first-child {
+    border-radius: 3px 3px 3px 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0; }
+  .card-header:last-child {
+    border-radius: 3px 3px 3px 3px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0; }
+  .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header 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: 1px solid rgba(0, 0, 0, 0.2); }
+  .card-meta.media {
+    -ms-flex-align: center !important;
+    align-items: center !important; }
+  .card-meta .media-left .media-object {
+    height: 64px;
+    width: 64px;
+    border-radius: 10px;
+    margin-right: 1em; }
+  .card-meta author {
+    display: block;
+    font-weight: 600; }
+  .card-meta 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 {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px 3px 3px 3px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }
+
+.btn:hover {
+  position: relative;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  top: 1px;
+  border: 1px solid rgba(0, 0, 0, 0.3); }
+
+.btn:active {
+  position: relative;
+  box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
+  top: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.3); }
+
+.btn-group {
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
+
+.btn-group .btn {
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  border-radius: 3px 3px 3px 3px; }
+  .btn-group .btn:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0; }
+  .btn-group .btn:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0; }
+
+.btn-group .btn:hover {
+  position: relative;
+  top: 1px;
+  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+
+.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 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
+  top: 2px;
+  border: 1px solid rgba(0, 0, 0, 0.3); }
+
+.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: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
+  top: 1px;
+  outline: none; }
+
+/* ------------------ ALERTS ------------------- */
+.alert {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px 3px 3px 3px;
+  color: rgba(0, 0, 0, 0.7);
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
+
+.alert a, .alert-link {
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: bold; }
+
+/* ------------------ BREADCRUMB ------------------- */
+.breadcrumb {
+  border-radius: 3px 3px 3px 3px;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
+  border: 0;
+  background-color: #eeeeec;
+  margin-bottom: 1.2em; }
+  .breadcrumb li {
+    margin: 0; }
+
+/* ------------------ 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 (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 {
+  border-radius: 3px 3px 3px 3px;
+  width: 100%;
+  margin: auto;
+  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
+
+.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; }
+
 /* ------------------ COULEURS ------------------- */
 a, a:hover, a:active {
   color: #4e63c9; }
@@ -515,334 +846,3 @@ a, a:hover, a:active {
 
 .text-success {
   color: #75b82d; }
-
-/* ------------------ GLOBAL STYLE ------------------- */
-#wrapper {
-  background: #64b5f6 url("../img/background.png") center bottom repeat-x; }
-
-.no-pills {
-  list-style: none; }
-
-.align-center {
-  text-align: center; }
-
-.align-left {
-  text-align: left; }
-
-.align-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 transparent;
-  padding-bottom: 0px;
-  margin: auto;
-  text-align: center;
-  line-height: 1.5em; }
-
-.navbar {
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-left: 0;
-  border-right: 0; }
-  .navbar ul {
-    padding-bottom: 0; }
-  .navbar li {
-    margin: 0; }
-
-.dropdown-menu {
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-/* ------------------ FOOTER ------------------- */
-footer {
-  margin-top: 40px; }
-
-/* social media */
-ul.social {
-  font-size: 1.5em;
-  padding-bottom: 1em;
-  margin: auto;
-  text-align: center; }
-  ul.social li {
-    margin: 0;
-    list-style: none;
-    display: inline; }
-    ul.social li a {
-      color: #FFFFFF;
-      background-color: #000000;
-      padding: 0.3em;
-      padding-left: 0.36em;
-      padding-right: 0.36em;
-      vertical-align: middle;
-      border-radius: 100%; }
-      ul.social li a:hover {
-        color: #000;
-        background-color: #FFF; }
-
-/* ------------------ CARDS ------------------- */
-.card {
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
-  border: none;
-  margin-bottom: 1.2em; }
-
-.card-shadow {
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-.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 transparent; }
-
-/* header and titles */
-.card-header {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  font-size: 1.1em;
-  box-shadow: inset 0px 2px 0px rgba(255, 255, 255, 0.1);
-  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
-  font-weight: 600;
-  border-radius: 0; }
-  .card-header:first-child {
-    border-radius: 3px 3px 3px 3px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0; }
-  .card-header:last-child {
-    border-radius: 3px 3px 3px 3px;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0; }
-  .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header 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: 1px solid rgba(0, 0, 0, 0.2); }
-  .card-meta.media {
-    -ms-flex-align: center !important;
-    align-items: center !important; }
-  .card-meta .media-left .media-object {
-    height: 64px;
-    width: 64px;
-    border-radius: 10px;
-    margin-right: 1em; }
-  .card-meta author {
-    display: block;
-    font-weight: 600; }
-  .card-meta 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 {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
-  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.3); }
-
-.btn:hover {
-  position: relative;
-  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
-  top: 1px;
-  border: 1px solid rgba(0, 0, 0, 0.3); }
-
-.btn:active {
-  position: relative;
-  box-shadow: inset 0px 2px 0px rgba(0, 0, 0, 0.2);
-  top: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.3); }
-
-.btn-group {
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
-
-.btn-group .btn {
-  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2);
-  border-radius: 3px 3px 3px 3px; }
-  .btn-group .btn:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0; }
-  .btn-group .btn:not(:last-child) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0; }
-
-.btn-group .btn:hover {
-  position: relative;
-  top: 1px;
-  box-shadow: inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-.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 0px 2px 0px rgba(0, 0, 0, 0.2) !important;
-  top: 2px;
-  border: 1px solid rgba(0, 0, 0, 0.3); }
-
-.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: 0px 2px 6px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
-  top: 1px;
-  outline: none; }
-
-/* ------------------ ALERTS ------------------- */
-.alert {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 3px 3px 3px 3px;
-  color: rgba(0, 0, 0, 0.7);
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3); }
-
-.alert a, .alert-link {
-  color: rgba(0, 0, 0, 0.7);
-  font-weight: bold; }
-
-/* ------------------ BREADCRUMB ------------------- */
-.breadcrumb {
-  border-radius: 3px 3px 3px 3px;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2);
-  border: 0;
-  background-color: #eeeeec;
-  margin-bottom: 1.2em; }
-  .breadcrumb li {
-    margin: 0; }
-
-/* ------------------ 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 (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 {
-  border-radius: 3px 3px 3px 3px;
-  width: 100%;
-  margin: auto;
-  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3), inset 0px -2px 0px rgba(0, 0, 0, 0.2); }
-
-.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/_colorize.scss b/scss/_colorize.scss
new file mode 100644
index 0000000..a45d3aa
--- /dev/null
+++ b/scss/_colorize.scss
@@ -0,0 +1,197 @@
+/* ------------------ 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); }
+  
+  &-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); }
+  
+  &-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); }
+  
+  &-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); }
+  
+  &-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); }
+  
+  &-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); }
+  
+  &-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); }
+}
diff --git a/scss/_palette.scss b/scss/_palette.scss
index 8afb749..4226281 100644
--- a/scss/_palette.scss
+++ b/scss/_palette.scss
@@ -1,5 +1,3 @@
-/* ------------------ COULEURS ------------------- */
-
 $color-blue: #4e63c9;
 $color-violet: #ce4dcd;
 $color-purple: #7951c0;
@@ -20,199 +18,3 @@ $color-success: $color-green;
 
 $color-link: $color-blue;
 $color-selection: $color-blue;
-
-@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); }
-  
-  &-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); }
-  
-  &-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); }
-  
-  &-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); }
-  
-  &-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); }
-  
-  &-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); }
-  
-  &-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); }
-}
diff --git a/scss/style.scss b/scss/style.scss
index 3e863ef..439f8b8 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -446,3 +446,5 @@ a.list-group-item:hover {
   margin-bottom:0.4em;
   display:block;
 }
+
+@import 'colorize';