--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html	Thu Jun 27 16:29:10 2013 +0200
@@ -162,7 +162,7 @@
                 <ul class="list-projets-5 mosaic float-left clearfix masonry-177">
 
 
-                    <li class="item-masonry" data-keywords="Musée Grévin, über ällës, Beaux Arts, éè">
+                    <li class="item-masonry" data-keywords="Musée Grévin, über ällës, Beaux Arts, courant stylistique (thématique ga bu zo meu)">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x224.png" alt="">

--- a/integration/v2/css/style.css	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/css/style.css	Thu Jun 27 16:29:10 2013 +0200
@@ -234,17 +234,17 @@
 .item-masonry{margin-bottom: 20px;}
 .filters{padding: 10px 0; text-align: center;}
 .filters li{ margin-bottom: 10px; position: relative; text-align: left; font-size: 12px; font-family: 'Lato'; display:inline-block; width: 200px; height: 28px; line-height: 28px; background-color: #fff;}
-.filters a:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
+.filters a.display-keyword{ overflow: hidden; color: #7F7F7F; display: block; height: 28px; overflow: hidden; margin: 0 16px 0 6px; }
 .filters li:hover{-webkit-box-shadow : none; -moz-box-shadow : none; box-shadow : none;}
-.filters .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
-.filters .cross{  background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
-.filters .circle{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
-.filters li.disabled a{opacity: 0.5;}
+.filters a.icon-action{float: right; margin: 10px 6px 0 0;width: 10px; height: 10px; display: inline-block; background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
+.filters .disabled .icon-action{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background: #7F7F7F;}
+.filters .disabled a.display-keyword{opacity: 0.5;}
 
 .float-left{float: left;}
 .filters-wrap{width: 225px; background-color: #EEE; margin-right: 17px;}
 .list-projets-5{width: 708px;}
 .curtain{display:none;z-index:10;position: absolute; width: 100%; height: 100%; background-color:rgba(0,0,0,.7);}
+.disabled .curtain{display: block;}
 .list-projets-5 .item-masonry{margin-bottom: 0;}
 .mosaic .content-project{display: none;}
 .mosaic .visuel-project .title-project{display: block;}

--- a/integration/v2/js/keyword-mosaic.js	Thu Jun 27 16:17:44 2013 +0200
+++ b/integration/v2/js/keyword-mosaic.js	Thu Jun 27 16:29:10 2013 +0200
@@ -63,11 +63,11 @@
     
     keywordslist.slice(0,100).forEach(function(kw) {
         var li = $('<li class="box-shadow-2">'),
-            outera = $('<a class="display-keyword" href="#">'),
-            innera = $('<a class="icon-action" href="#">');
-        outera.text(kw.keyword + ' ');
-        outera.append(innera);
-        li.append(outera);
+            texta = $('<a class="display-keyword" href="#">'),
+            actiona = $('<a class="icon-action" href="#">');
+        texta.text(kw.keyword + ' ');
+        li.append(actiona);
+        li.append(texta);
         kw.li = li;
         li.click(function() {
             if (kw.enabled) {
@@ -83,7 +83,7 @@
             updateKeywords();
             return false;
         });
-        innera.click(function() {
+        actiona.click(function() {
             kw.enabled = !kw.enabled;
             updateKeywords();
             return false;