diff --git a/scss/_commons.scss b/scss/_commons.scss
new file mode 100644
index 0000000..90d702b
--- /dev/null
+++ b/scss/_commons.scss
@@ -0,0 +1,419 @@
+/* ------------------ GLOBAL STYLE ------------------- */
+
+.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/style.scss b/scss/style.scss
index 439f8b8..d36756d 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -1,6 +1,6 @@
 @import 'palette';
 
-/* ------------------ GLOBAL STYLE ------------------- */
+/* ------------------ CUSTOM STYLE ------------------- */
 
 $large-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
 $narrow-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
@@ -29,422 +29,6 @@ $border-size: 1px;
   background: #64b5f6 url('../img/background.png') center bottom repeat-x;
 }
 
-.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;
-}
+@import 'commons';
 
 @import 'colorize';