diff -r fab11ecbceb1 -r 5229a85e53e7 integration/gabarit.html
--- a/integration/gabarit.html	Tue Oct 23 16:15:42 2012 +0200
+++ b/integration/gabarit.html	Mon Oct 29 11:21:54 2012 +0100
@@ -168,55 +168,15 @@
                                 <div class="inner-article clearfix">
                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="number-article">
-                                        <a href="#">48 articles</a>
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
                                     </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
 
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
                                     </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles</a>
-                                    </p>
                                     <div class="article-content">
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -230,78 +190,6 @@
                                                 <li><a href="#">Karachi crise</a></li>
                                             </ul>
                                         </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles</a>
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
                                     </div>
                                 </div>
                             </div><!--article -->
@@ -310,8 +198,15 @@
                                 <div class="inner-article clearfix">
                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="number-article">
-                                        <a href="#">48 articles</a>
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
                                     </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
                                     <div class="article-content">
                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -326,32 +221,126 @@
                                                 <li><a href="#">Karachi crise</a></li>
                                             </ul>
                                         </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. 
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
                                             </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
 
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. 
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
                                     </div>
                                 </div>
                             </div><!--article -->