updated 404 page

webpack/scss/constants.scss

@@ -17,3 +17,6 @@ $rd-form-valid-color:   '27a560';
 $rd-form-neutral-color: '2193e6';
 $rd-form-search-color:  '5630ed';
 $rd-form-invalid-color: 'd52918';
+
+
+$c404-bubble-width: 40vh;

webpack/scss/global.scss

@@ -263,4 +263,28 @@ button.neutral.active,
 button.search.active,
 .search > button.active{
 	background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg')  !important;
+}
+
+
+// Liens
+a{
+	color: inherit;
+	text-decoration: none;
+
+	&:after{
+		content: '';
+		display: block;
+
+		width: 0%;
+		height: .1em;
+
+		background-color: #ddd;
+
+		transition: width .1s ease-in-out;
+
+	}
+
+	&:hover:after{
+		width: 100%;
+	}
 }

webpack/scss/layout.scss

@@ -1,3 +1,5 @@
+@import 'constants';
+
 * {
 	margin: 0;
 	padding: 0;
@@ -19,6 +21,68 @@ body{
 	color: #333;
 }
 
+
+
+#WRAPPER{
+	display: block;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+	background: #eee;
+
+
+	&.login{
+		background: #ddd;
+	}
+}
+
+
+#cont404{
+	display: flex;
+	position: fixed;
+		top: calc( 50% - #{$c404-bubble-width / 2} - 2em );
+		left: calc( 50% - #{$c404-bubble-width / 2} - 2em );
+		width: #{$c404-bubble-width};
+		height: $c404-bubble-width;
+
+	padding: 2em;
+
+	background-color: #fff;
+	border: 1px solid #ddd;
+	box-shadow: 0 0 5px #ddd;
+
+	border-radius: 50% / 50%;
+
+	font-size: 3vh;
+	color: #444;
+
+	flex-direction: column;
+	justify-content: space-around;
+	align-items: center;
+
+	p{
+		text-align: center;
+	}
+
+	svg{
+
+		path{ fill: #888 !important; }
+		transform: translateY(0em) scale(2);
+		cursor: pointer;
+
+		transition: transform .2s ease-in-out;
+		&:hover{
+			transform: translateY(-.5em) scale(2);
+			path{ fill: #222 !important; }
+		}
+	}
+}
+
+
+
 /* [4] Popup background - window
 ==========================================*/
 #POPUP{