diff -r 57d5dd58202e -r 4bdf2fdf4bcb integration/v2/15-detail_fragment.html
--- a/integration/v2/15-detail_fragment.html	Thu Jun 20 15:03:38 2013 +0200
+++ b/integration/v2/15-detail_fragment.html	Thu Jun 20 15:21:47 2013 +0200
@@ -55,7 +55,7 @@
         </header>
         <section>
             <div class="title-page">
-                <h2>MEDÉE</h2>
+                <h2>VISAGE DE MEDÉE</h2>
             </div>
             <div class="bar-tools clearfix">
                 <ul class="clearfix left">
@@ -64,7 +64,13 @@
                 </ul>
                 <ul class="clearfix">
                     <li>
-                        <a class="icon cut" href="#">Créer un fragment</a>
+                        <a class="icon edit" href="#">Modifier ce fragment</a>
+                    </li>
+                    <li>
+                        <a class="icon trash" href="#">Supprimer ce fragment</a>
+                    </li>
+                    <li>
+                        <a class="icon save" href="#">Enregistrer sous</a>
                     </li>
                     <li>
                         <a class="icon plus" href="#">Ajouter à ma collection</a>
@@ -113,25 +119,67 @@
                     </table>
                 </div>
                 <div class="box-edition">
-                    <h3>Mots clés :</h3>
-                    <ul class="list-key-search clearfix">
-                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                    </ul>
+                    <table>
+                        <tbody>
+                            <tr>
+                                <th class="va-top">Mots clés :</th>
+                                <td>
+                                    <ul class="list-key-search no-before list-keywords clearfix">
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                    </ul>
+                                </td>
+                            </tr>
+                            
+                        </tbody>
+                    </table>
+        
+                    
                 </div>
                 <div class="box-edition">
                     <h3>Fragments de cette image :</h3>
-                    <p class="null">Pas de fragment</p>
+                    <ul class="list-simple clearfix">
+                        <li>
+                            <a href="#">
+                                <div class="fragment">                
+                                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0.3548 0.232193846154 0.357 0.276812307692" height="100%" width="100%" preserveAspectRatio="none">
+                                        <defs>
+                                            <clipPath id="fragment-clip68">
+                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                            </clipPath>
+                                        </defs>
+                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                    </svg>      
+                                </div><!-- ./fragment -->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <div class="fragment">                
+                                    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0.3548 0.232193846154 0.357 0.276812307692" height="100%" width="100%" preserveAspectRatio="none">
+                                        <defs>
+                                            <clipPath id="fragment-clip68">
+                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                            </clipPath>
+                                        </defs>
+                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                    </svg>      
+                                </div><!-- ./fragment -->
+                            </a>
+                        </li>
+                    </ul>
                 </div>
                 <div class="box-edition">
                     <h3>Collections liées à cette image :</h3>
@@ -148,7 +196,9 @@
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/masonry.min.js"></script>
+    <script src="lib/tag-it/js/tag-it.min.js"></script>
     <script src="js/main.js"></script>
 </body>
 </html>