diff --git a/public_html/asset/svg/warning_radio.svg b/public_html/asset/svg/warning.svg
similarity index 100%
rename from public_html/asset/svg/warning_radio.svg
rename to public_html/asset/svg/warning.svg
diff --git a/webpack/component/ue/view.vue b/webpack/component/ue/view.vue
index fee4744..0de6f4e 100644
--- a/webpack/component/ue/view.vue
+++ b/webpack/component/ue/view.vue
@@ -73,12 +73,11 @@
 
 
 				<!-- if VIEW MODE -->
-				<div v-show='gstore.edit_i!=pi' class='sub warning' :data-state='ue.required ? 1 : 0'>{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
+				<div v-show='gstore.edit_i!=pi' :class="ue.required ? 'sub pin' : 'sub pin neutral'">{{ ue.required ? 'UE obligatoire' : 'UE optionnelle' }}</div>
 				<div v-show='gstore.edit_i!=pi' class='sub'><strong>{{ ue.volumeCours + ue.volumeTD + ue.volumeTP }}h</strong> totales</div>
 				<div v-show='gstore.edit_i!=pi' class='taglist'>
-					<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'search' : ''">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
-					<span class='search'>M2 INFO (S1)</span>
-					<span>LPRO</span>
+					<span v-if='ue.formations.length==0' class='tag invalid'>Aucune formation</span>
+					<span v-for='form_id in ue.formations' :class="!!gstore.form_by_id(form_id).isInternal ? 'tag search' : 'tag'">{{ gstore.form_by_id(form_id).labelForm || '???' }}</span>
 				</div>
 
 				<!-- if EDIT MODE -->
diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss
index 794396d..1f0cfc4 100644
--- a/webpack/scss/container.scss
+++ b/webpack/scss/container.scss
@@ -117,8 +117,8 @@
 		display: inline-block;
 		position: relative;
 
-		//                   - marg  - padd   - [NEW] - separ
-		flex: 0 1 calc( 100% - 2*1em - 2*.5em - 2em - 2*1em );
+		flex: 1 0 70%; // 70% to almost fill the line
+		height: 1.2em;
 
 		margin: 1em .5em;
 		padding: .5em 1em;
@@ -384,21 +384,21 @@
 			justify-content: flex-start;
 			flex-wrap:       nowrap;
 
-			&.warning:before{
-				content: '';
+			// &.warning:before{
+			// 	content: '';
 
-				display: inline-block;
-				position: relative;
-					width: 1.2em;
-					height: 1em;
+			// 	display: inline-block;
+			// 	position: relative;
+			// 		width: 1.2em;
+			// 		height: 1em;
 
-				margin-right: .3em;
+			// 	margin-right: .3em;
 
-				background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
-				background-size: auto 90%;
+			// 	background: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}') center bottom no-repeat;
+			// 	background-size: auto 90%;
 
-				text-anchor: center;
-			}
+			// 	text-anchor: center;
+			// }
 
 			/* (5-edit) Card title -> edit inputs */
 			& input{
@@ -651,87 +651,9 @@
 
 			color: lighten($primary-color, 20%);
 
-			&:before{
-				content: '';
-
-				display: inline-block;
-				position: relative;
-					width: 0em;
-					height: 1em;
-
-				background: center bottom -.1em no-repeat;
-				background-size: auto .9em;
-
-				text-anchor: center;
-			}
-
-			&.warning{
-
-				color: $form-invalid-color;
-
-				&:before{
-					width: 1em;
-					margin-right: .3em;
-					background-image: url('/asset/svg/warning_radio.svg@#{$rd-form-invalid-color}');
-				}
-
-				&[data-valid='1']{
-					color: $form-valid-color;
-				}
-
-				// state style
-				&[data-state]{
-					color: $form-neutral-color;
-
-					&:before,
-					&[data-state='0']:before{
-						background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}');
-						background-position: center center;
-						background-size: auto 100%;
-					}
-
-					&[data-state='1']:before{
-						background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
-					}
-				};
-
-			}
-
 		}
 
-		/* (9) Card tag list */
-		& > div.taglist{
 
-			display: flex;
-			margin-top: 1em;
-
-			flex-direction:  row;
-			justify-content: flex-start;
-			align-items:     flex-start;
-			flex-wrap:       wrap;
-
-			/* (9.1) inner tags */
-			& > span{
-				padding: .2em .5em;
-				margin-right: .5em;
-
-				border: 1px solid lighten($form-neutral-color, 5%);
-				border-radius: 3px;
-
-				background-color: #f9f9f9;
-
-				color: #999;
-				font-size: .8em;
-
-				cursor: default;
-
-				&.valid{   border-color: lighten($form-valid-color,   20%); }
-				&.invalid{ border-color: lighten($form-invalid-color, 20%); }
-				&.search{  border-color: lighten($form-search-color,  10%); }
-
-			}
-
-		}
 
 	}
 
diff --git a/webpack/scss/global.scss b/webpack/scss/global.scss
index c11eab5..286ed28 100644
--- a/webpack/scss/global.scss
+++ b/webpack/scss/global.scss
@@ -1,235 +1,23 @@
 @import 'constants';
 
-/* (1) Champs de texte */
-input[type=text],     .neutral > input[type=text],
-input[type=mail],     .neutral > input[type=mail],
-input[type=password], .neutral > input[type=password],
-select,               .neutral > select,
-input[type=text].neutral,
-input[type=mail].neutral,
-input[type=password].neutral,
-select.neutral{
+/* (1) Input */
+@import 'global/input';
 
-	display: inline-block;
-	margin: 1em;
-	padding: .5em 1em;
+/* (2) Button */
+@import 'global/button';
 
-	border-radius: 3px;
-	border: 1px solid $form-neutral-color;
+/* (3) classes that add icons before text */
+@import 'global/before-icon';
 
-	background-color: #fff;
-
-	font-family: inherit;
-
-	color: lighten($primary-color, 15%);
-
-	transition: border .2s ease-in-out,
-				color .2s ease-in-out;
-
-	&:focus, &:hover{
-		border-color: darken($form-neutral-color, 10%);
-		color: $primary-color;
-	}
-
-}
-
-
-select{
-	width: 100%;
-	display: block;
-	background: #fff;
-
-	option{
-		padding: .5em;
-	}
-}
-
-
-// Champs valides
-.valid > input[type=text],
-.valid > input[type=mail],
-.valid > input[type=password],
-.valid > select,
-input.valid[type=text],
-input.valid[type=mail],
-input.valid[type=password],
-select.valid{
-
-	border-color: darken($form-valid-color, 0%);
-
-
-	&:focus, &:hover{
-		border-color: darken($form-valid-color, 10%);
-	}
-
-}
-
-// Champs neutres
-.invalid > input[type=text],
-.invalid > input[type=mail],
-.invalid > input[type=password],
-.invalid > select,
-input.invalid[type=text],
-input.invalid[type=mail],
-input.invalid[type=password],
-select.invalid{
-
-	border-color: darken($form-invalid-color, 0%);
-
-
-	&:focus, &:hover{
-		border-color: darken($form-invalid-color, 10%);
-	}
-
-}
-
-// Champs neutres
-.search > input[type=text],
-.search > input[type=mail],
-.search > input[type=password],
-.search > select,
-input.search[type=text],
-input.search[type=mail],
-input.search[type=password]{
-
-	border-color: darken($form-search-color, 0%);
-
-
-	&:focus, &:hover{
-		border-color: darken($form-search-color, 10%);
-	}
-
-}
+/* (4) tags */
+@import 'global/tag';
 
 
 
-/* (2) Boutons */
-button,             .neutral > button,
-input[type=button], .neutral > input[type=button],
-input[type=submit], .neutral > input[type=submit],
-button.neutral,
-input[type=button].neutral,
-input[type=submit].neutral{
-
-	display: inline-block;
-	position: relative;
-
-	padding: .5em 1em;
-
-	border-radius: 3px;
-	border:        1px solid $form-neutral-color;
-
-	background:     #fff center center no-repeat;
-	text-transform: uppercase;
-	font-weight:    normal;
-	font-family:    inherit;
 
 
-	color: $primary-color;
 
-	cursor: pointer;
-
-	transition: color .2s ease-in-out,
-				border-color .1s ease-in-out,
-				background .2s ease-in-out;
-
-	&:hover, &[data-active='1']{
-		color: #fff;
-		border-color: $form-neutral-color;
-		background-color: $form-neutral-color;
-	}
-}
-
-// Boutons grisés
-button:disabled,
-button.grey,             .grey > button,
-input[type=button].grey, .grey > input[type=button],
-input[type=submit].grey, .grey > input[type=submit]{
-
-	color: $form-grey-color;
-
-	&:hover, &[data-active='1']{
-		color:          #fff;
-		border-color:     $form-grey-color;
-		background-color: $form-grey-color;
-	}
-
-	cursor: default;
-}
-
-// Boutons valides
-button.valid,             .valid > button,
-input[type=button].valid, .valid > input[type=button],
-input[type=submit].valid, .valid > input[type=submit]{
-
-	color: $form-valid-color;
-
-	&:hover, &[data-active='1']{
-		color:          #fff;
-		border-color:     $form-valid-color;
-		background-color: $form-valid-color;
-	}
-
-}
-
-// Boutons invalides
-button.invalid,             .invalid > button,
-input[type=button].invalid, .invalid > input[type=button],
-input[type=submit].invalid, .invalid > input[type=submit]{
-
-	color: $form-invalid-color;
-
-	&:hover, &[data-active='1']{
-		color:          #fff;
-		border-color:     $form-invalid-color;
-		background-color: $form-invalid-color;
-	}
-
-}
-
-// Boutons recherche
-button.search,             .search > button,
-input[type=button].search, .search > input[type=button],
-input[type=submit].search, .search > input[type=submit]{
-
-	color: $form-search-color;
-
-	&:hover, &[data-active='1']{
-		color:          #fff;
-		border-color:     $form-search-color;
-		background-color: $form-search-color;
-	}
-
-}
-
-
-// Boutons quand action validee
-.invalid > button.active,
-button.invalid.active,
-button.active{
-	background-color: #fff;
-	background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
-	background-size: 1em auto;
-
-	color: transparent !important;
-}
-
-
-button.valid.active,
-.valid > button.active{
-	background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg')   !important;
-}
-button.neutral.active,
-.neutral > button.active{
-	background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
-}
-button.search.active,
-.search > button.active{
-	background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg')  !important;
-}
-
-
-// Liens
+/* (4) Links */
 a{
 	color: inherit;
 	text-decoration: none;
@@ -252,8 +40,8 @@ a{
 	}
 }
 
-
-// Textes
+/* (5) Greyed text */
 .grey{
 	color: $secondary-color;
-}
\ No newline at end of file
+}
+
diff --git a/webpack/scss/global/before-icon.scss b/webpack/scss/global/before-icon.scss
new file mode 100644
index 0000000..e7162e1
--- /dev/null
+++ b/webpack/scss/global/before-icon.scss
@@ -0,0 +1,49 @@
+@import '../constants';
+
+
+
+/* (1) Warning icon */
+.warning,
+.pin{
+
+	// add icon before
+	&:before{
+		content: '';
+
+		display: inline-block;
+		position: relative;
+			width: 1.2em;
+			height: 1em;
+
+		margin-right: .3em;
+
+		background: url('/asset/svg/warning.svg@#{$rd-form-invalid-color}') center center no-repeat;
+		background-size: auto 90%;
+
+		text-anchor: center;
+	}
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/warning.svg@#{$rd-form-neutral-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/warning.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/warning.svg@#{$rd-form-search-color}');  }
+
+	// force red text
+	&.invalid{ color: $form-invalid-color; }
+}
+
+
+/* (2) Pin icon */
+.pin{
+
+	// add icon before
+	&:before{
+		background-image: url('/asset/svg/pin.svg@#{$rd-form-invalid-color}');
+	}
+
+	// icon color variants
+	&.neutral:before{ background-image: url('/asset/svg/pin.svg@#{$rd-form-neutral-color}'); }
+	&.valid:before{   background-image: url('/asset/svg/pin.svg@#{$rd-form-valid-color}');   }
+	&.search:before{  background-image: url('/asset/svg/pin.svg@#{$rd-form-search-color}');  }
+
+}
\ No newline at end of file
diff --git a/webpack/scss/global/button.scss b/webpack/scss/global/button.scss
new file mode 100644
index 0000000..60bb8da
--- /dev/null
+++ b/webpack/scss/global/button.scss
@@ -0,0 +1,102 @@
+@import '../constants';
+
+
+
+/* (1) BUTTON (neutral) */
+button,             .neutral > button,
+input[type=button], .neutral > input[type=button],
+input[type=submit], .neutral > input[type=submit],
+button.neutral,
+input[type=button].neutral,
+input[type=submit].neutral{
+
+	display: inline-block;
+	position: relative;
+
+	padding: .5em 1em;
+
+	border-radius: 3px;
+	border:        1px solid $form-neutral-color;
+
+	background:     #fff center center no-repeat;
+	text-transform: uppercase;
+	font-weight:    normal;
+	font-family:    inherit;
+
+
+	color: $primary-color;
+
+	cursor: pointer;
+
+	transition: color .2s ease-in-out,
+				border-color .1s ease-in-out,
+				background .2s ease-in-out;
+
+	&:hover, &[data-active='1']{
+		color: #fff;
+		border-color: $form-neutral-color;
+		background-color: $form-neutral-color;
+	}
+}
+
+/* (1) valid */
+button.valid,             .valid > button,
+input[type=button].valid, .valid > input[type=button],
+input[type=submit].valid, .valid > input[type=submit]{
+
+	color: $form-valid-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-valid-color;
+		background-color: $form-valid-color;
+	}
+
+}
+
+/* (1) invalid */
+button.invalid,             .invalid > button,
+input[type=button].invalid, .invalid > input[type=button],
+input[type=submit].invalid, .invalid > input[type=submit]{
+
+	color: $form-invalid-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-invalid-color;
+		background-color: $form-invalid-color;
+	}
+
+}
+
+/* (1) search */
+button.search,             .search > button,
+input[type=button].search, .search > input[type=button],
+input[type=submit].search, .search > input[type=submit]{
+
+	color: $form-search-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-search-color;
+		background-color: $form-search-color;
+	}
+
+}
+
+/* (1) valid grey */
+button:disabled,
+button.grey,             .grey > button,
+input[type=button].grey, .grey > input[type=button],
+input[type=submit].grey, .grey > input[type=submit]{
+
+	color: $form-grey-color;
+
+	&:hover, &[data-active='1']{
+		color:          #fff;
+		border-color:     $form-grey-color;
+		background-color: $form-grey-color;
+	}
+
+	cursor: default;
+}
\ No newline at end of file
diff --git a/webpack/scss/global/input.scss b/webpack/scss/global/input.scss
new file mode 100644
index 0000000..1ed887c
--- /dev/null
+++ b/webpack/scss/global/input.scss
@@ -0,0 +1,123 @@
+@import '../constants';
+
+
+
+/* (1) INPUT (neutral) */
+input[type=text],     .neutral > input[type=text],
+input[type=mail],     .neutral > input[type=mail],
+input[type=password], .neutral > input[type=password],
+select,               .neutral > select,
+input[type=text].neutral,
+input[type=mail].neutral,
+input[type=password].neutral,
+select.neutral{
+
+	display: inline-block;
+	margin: 1em;
+	padding: .5em 1em;
+
+	border-radius: 3px;
+	border: 1px solid $form-neutral-color;
+
+	background-color: #fff;
+
+	font-family: inherit;
+
+	color: lighten($primary-color, 15%);
+
+	transition: border .2s ease-in-out,
+				color .2s ease-in-out;
+
+	&:focus, &:hover{
+		border-color: darken($form-neutral-color, 10%);
+		color: $primary-color;
+	}
+
+}
+
+
+/* (2) SELECT (neutral) */
+select{
+	width: 100%;
+	display: block;
+	background: #fff;
+
+	option{
+		padding: .5em;
+	}
+}
+
+
+/* (1)(2) valid */
+.valid > input[type=text],
+.valid > input[type=mail],
+.valid > input[type=password],
+.valid > select,
+input.valid[type=text],
+input.valid[type=mail],
+input.valid[type=password],
+select.valid{
+
+	border-color: darken($form-valid-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-valid-color, 10%);
+	}
+
+}
+
+/* (1)(2) invalid */
+.invalid > input[type=text],
+.invalid > input[type=mail],
+.invalid > input[type=password],
+.invalid > select,
+input.invalid[type=text],
+input.invalid[type=mail],
+input.invalid[type=password],
+select.invalid{
+
+	border-color: darken($form-invalid-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-invalid-color, 10%);
+	}
+
+}
+
+/* (1)(2) search */
+.search > input[type=text],
+.search > input[type=mail],
+.search > input[type=password],
+.search > select,
+input.search[type=text],
+input.search[type=mail],
+input.search[type=password]{
+
+	border-color: darken($form-search-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-search-color, 10%);
+	}
+
+}
+
+/* (1)(2) grey */
+.grey > input[type=text],
+.grey > input[type=mail],
+.grey > input[type=password],
+.grey > select,
+input.grey[type=text],
+input.grey[type=mail],
+input.grey[type=password]{
+
+	border-color: darken($form-grey-color, 0%);
+
+
+	&:focus, &:hover{
+		border-color: darken($form-grey-color, 10%);
+	}
+
+}
\ No newline at end of file
diff --git a/webpack/scss/global/tag.scss b/webpack/scss/global/tag.scss
new file mode 100644
index 0000000..736c44c
--- /dev/null
+++ b/webpack/scss/global/tag.scss
@@ -0,0 +1,37 @@
+@import '../constants';
+
+
+
+/* (1) Tag list */
+.taglist{
+
+	display: flex;
+	margin-top: 1em;
+
+	flex-direction:  row;
+	justify-content: flex-start;
+	align-items:     flex-start;
+	flex-wrap:       wrap;
+
+	/* (9.1) inner tags */
+	& > span.tag{
+		padding: .2em .5em;
+		margin-right: .5em;
+
+		border: 1px solid lighten($form-neutral-color, 5%);
+		border-radius: 3px;
+
+		background-color: #f9f9f9;
+
+		color: #999;
+		font-size: .8em;
+
+		cursor: default;
+
+		&.valid{   border-color: lighten($form-valid-color,   20%); }
+		&.invalid{ border-color: lighten($form-invalid-color, 20%); }
+		&.search{  border-color: lighten($form-search-color,  10%); }
+
+	}
+
+}
\ No newline at end of file