diff -r 39a17b6e0b57 -r 09ad16c9fee5 integration/v2/18-19-20-21-collection_vue_mosaique.html
--- a/integration/v2/18-19-20-21-collection_vue_mosaique.html	Wed Jun 26 18:22:30 2013 +0200
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html	Thu Jun 27 11:09:25 2013 +0200
@@ -156,23 +156,25 @@
             <div class="clearfix">
                 <div class="filters-wrap float-left">
                     <ul class="filters">
-                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="azerty" href="#">
-                            Paris, musée Victor Hugo <a class="icon-action cross" href="#"></a>
+                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="Musée Grévin" href="#">
+                            Musée Grévin <a class="icon-action cross" href="#"></a>
                         </a></li>
-                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="lorem"  href="#">
-                            Bonjour hello world lorem ipsum dolor <a class="icon-action cross" href="#"></a>
+                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="Beaux Arts"  href="#">
+                            Beaux Arts <a class="icon-action cross" href="#"></a>
                         </a></li>
-                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="ipsum" href="#">
-                            ipsum tag <a class="icon-action cross" href="#"></a>
+                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="éè" href="#">
+                            éè <a class="icon-action cross" href="#"></a>
                         </a></li>
-                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="hello"  href="#">
-                            hello tag tag it <a class="icon-action cross" href="#"></a>
+                        <li class="box-shadow-2"><a class="display-keyword" data-keyword="über ällës"  href="#">
+                            über ällës <a class="icon-action cross" href="#"></a>
                         </a></li>
                     </ul>
                 </div>
 
                 <ul class="list-projets-5 mosaic float-left clearfix masonry-177">
-                    <li class="item-masonry keyword-azerty">
+
+
+                    <li class="item-masonry" data-keywords="Musée Grévin, über ällës, Beaux Arts, éè">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x224.png" alt="">
@@ -198,85 +200,8 @@
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
                         </div>
                     </li>
-                    <li class="item-masonry keyword-ipsum">
-                        <div class="curtain"></div>
-                        <div class="visuel-project">
-                            <img src="img/177x264.png" alt="">
-                            <div class="tools toggle">
-                                <div class="title-project">
-                                    <h3>Dolores ipsum des dolores</h3>
-                                    <h4>Théodore Chasseriau</h4>
-                                </div>
-                                <ul class="clearfix">
-                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
-                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
-                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
-                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
-                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="content-project">
-                            <div class="title-project">
-                                <h3>Dolores ipsum des dolores</h3>
-                                <h4>Théodore Chasseriau</h4>
-                            </div>
-                            <p>Lorem ipsum dolor</p>
-                        </div>
-                    </li>
-                    <li class="item-masonry keyword-azerty">
-                        <div class="curtain"></div>
-                        <div class="visuel-project">
-                            <img src="img/177x232.png" alt="">
-                            <div class="tools toggle">
-                                <div class="title-project">
-                                    <h3>azerty qwerty allo hello</h3>
-                                    <h4>Théodore Chasseriau</h4>
-                                </div>
-                                <ul class="clearfix">
-                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
-                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
-                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
-                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
-                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="content-project">
-                            <div class="title-project">
-                                <h3>azerty qwerty allo hello</h3>
-                                <h4>Théodore Chasseriau</h4>
-                            </div>
-                            <p>azerty qwerty allo hello azerty qwerty allo hello</p>
-                        </div>
-                    </li>
-                    <li class="item-masonry keyword-hello">
-                        <div class="curtain"></div>
-                        <div class="visuel-project">
-                            <img src="img/177x224.png" alt="">
-                            <div class="tools toggle">
-                                <div class="title-project">
-                                    <h3>Sapho</h3>
-                                    <h4>Théodore Chasseriau</h4>
-                                </div>
-                                <ul class="clearfix">
-                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
-                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
-                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
-                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
-                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="content-project">
-                            <div class="title-project">
-                                <h3>Sapho</h3>
-                                <h4>Théodore Chasseriau</h4>
-                            </div>
-                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
-                        </div>
-                    </li>
-                    <li class="item-masonry keyword-azerty">
+
+                    <li class="item-masonry" data-keywords="Beaux Arts">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x264.png" alt="">
@@ -302,33 +227,8 @@
                             <p>Lorem ipsum dolor</p>
                         </div>
                     </li>
-                    <li class="item-masonry keyword-ipsum">
-                        <div class="curtain"></div>
-                        <div class="visuel-project">
-                            <img src="img/177x232.png" alt="">
-                            <div class="tools toggle">
-                                <div class="title-project">
-                                    <h3>azerty qwerty allo hello</h3>
-                                    <h4>Théodore Chasseriau</h4>
-                                </div>
-                                <ul class="clearfix">
-                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
-                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
-                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
-                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
-                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
-                                </ul>
-                            </div>
-                        </div>
-                        <div class="content-project">
-                            <div class="title-project">
-                                <h3>azerty qwerty allo hello</h3>
-                                <h4>Théodore Chasseriau</h4>
-                            </div>
-                            <p>azerty qwerty allo hello azerty qwerty allo hello</p>
-                        </div>
-                    </li>
-                    <li class="item-masonry keyword-azerty">
+
+                    <li class="item-masonry" data-keywords="éè">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x232.png" alt="">
@@ -354,7 +254,35 @@
                             <p>azerty qwerty allo hello azerty qwerty allo hello</p>
                         </div>
                     </li>
-                    <li class="item-masonry keyword-lorem">
+
+                    <li class="item-masonry" data-keywords="über ällës">
+                        <div class="curtain"></div>
+                        <div class="visuel-project">
+                            <img src="img/177x224.png" alt="">
+                            <div class="tools toggle">
+                                <div class="title-project">
+                                    <h3>Sapho</h3>
+                                    <h4>Théodore Chasseriau</h4>
+                                </div>
+                                <ul class="clearfix">
+                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="content-project">
+                            <div class="title-project">
+                                <h3>Sapho</h3>
+                                <h4>Théodore Chasseriau</h4>
+                            </div>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+                        </div>
+                    </li>
+                    
+                    <li class="item-masonry" data-keywords="Musée Grévin, über ällës">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x224.png" alt="">
@@ -380,7 +308,8 @@
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
                         </div>
                     </li>
-                    <li class="item-masonry keyword-hello">
+
+                    <li class="item-masonry" data-keywords="Beaux Arts">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x264.png" alt="">
@@ -406,7 +335,8 @@
                             <p>Lorem ipsum dolor</p>
                         </div>
                     </li>
-                    <li class="item-masonry keyword-lorem">
+
+                    <li class="item-masonry" data-keywords="éè">
                         <div class="curtain"></div>
                         <div class="visuel-project">
                             <img src="img/177x232.png" alt="">
@@ -432,6 +362,33 @@
                             <p>azerty qwerty allo hello azerty qwerty allo hello</p>
                         </div>
                     </li>
+
+                    <li class="item-masonry" data-keywords="über ällës">
+                        <div class="curtain"></div>
+                        <div class="visuel-project">
+                            <img src="img/177x224.png" alt="">
+                            <div class="tools toggle">
+                                <div class="title-project">
+                                    <h3>Sapho</h3>
+                                    <h4>Théodore Chasseriau</h4>
+                                </div>
+                                <ul class="clearfix">
+                                    <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                                    <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                                    <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+                                    <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                                    <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                        <div class="content-project">
+                            <div class="title-project">
+                                <h3>Sapho</h3>
+                                <h4>Théodore Chasseriau</h4>
+                            </div>
+                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+                        </div>
+                    </li>
                 </ul>
             </div>