--- a/crea/inte-crea/css/ldt-commun.css	Wed Jan 25 17:57:01 2012 +0100
+++ b/crea/inte-crea/css/ldt-commun.css	Wed Jan 25 17:59:42 2012 +0100
@@ -117,6 +117,36 @@
     margin: 10px;
 }
 
+.img_and_polemic {
+    float: left; position: relative;
+}
+
+.polemics {
+    position: absolute; bottom: 5px; list-style: none; z-index: 2;
+    width: 95%; font-size: 9px; color: #ffffff;
+}
+
+.polemics li {
+    text-align: left; overflow: hidden; padding: 0 0 0 3px; margin: 2px 0; clear: both;
+    width: 100%; box-shadow: 2px 2px 2px #000000;
+}
+
+.pol-positive {
+    background: #00a000;
+}
+
+.pol-negative {
+    background: #ff0000;
+}
+
+.pol-reference {
+    background: #e0e000; color: #000000;
+}
+
+.pol-question {
+    background: #0040ff;
+}
+
 .img_media {
     background: #000000; border: 2px solid #ffffff; padding: 1px;
 }

--- a/crea/inte-crea/home.html	Wed Jan 25 17:57:01 2012 +0100
+++ b/crea/inte-crea/home.html	Wed Jan 25 17:59:42 2012 +0100
@@ -68,7 +68,13 @@
                 <h2>Médias les plus annotés</h2>
             </li>
             <li class="li_media">
-                <a href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" /></a>
+                <a class="img_and_polemic" href="#"><img class="img_media" src="img/placeholder_16_9.jpg" width="134" height="75" />
+                <ul class="polemics">
+                    <li class="pol-negative" style="width:17%">17%</li>
+                    <li class="pol-positive" style="width:80%">80%</li>
+                    <li class="pol-reference" style="width:33%">33%</li>
+                    <li class="pol-question" style="width:33%">33%</li>
+                </ul></a>
                 <div class="bulle_annot">120</div>
                 <p><a href="#"><b>Lorem Ipsum</b></a></p>
                 <p class="font_11">par <a class="under" href="#">Ars Industrialis</a> | 1h30</p>

--- a/src/ldt/ldt/ldt_utils/templates/front/front_home.html	Wed Jan 25 17:57:01 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_home.html	Wed Jan 25 17:59:42 2012 +0100
@@ -46,7 +46,15 @@
     </li>
     {% for content in most_contents %}
     <li class="li_media">
-        <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "134x75" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}</a>
+        <a class="img_and_polemic" href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">
+        {% thumbnail content.image "134x75" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
+            <ul class="polemics">
+                <li class="pol-negative" style="width:0%">0%</li>
+                <li class="pol-positive" style="width:0%">0%</li>
+                <li class="pol-reference" style="width:0%">0%</li>
+                <li class="pol-question" style="width:0%">0%</li>
+            </ul>
+        </a>
         <div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotation %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotation }}</div>
         <p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}" title="{% trans 'open this media' %}"><b>{% if content.title|length > 69 %}{{content.title|slice:":69"}}...{% else %}{{content.title}}{% endif %}</b></a></p>
         <p class="font_11">{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>

--- a/src/ldt/ldt/static/ldt/css/front_common.css	Wed Jan 25 17:57:01 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_common.css	Wed Jan 25 17:59:42 2012 +0100
@@ -132,6 +132,35 @@
 .img_media {
     background: #000000; border: 2px solid #ffffff; padding: 1px;
 }
+.img_and_polemic {
+    float: left; position: relative;
+}
+
+.polemics {
+    position: absolute; bottom: 8px; list-style: none; z-index: 2;
+    width: 95%; font-size: 9px; color: #ffffff;
+}
+
+.polemics li {
+    text-align: left; overflow: hidden; padding: 0 0 0 3px; margin: 2px 0; clear: both;
+    width: 100%; box-shadow: 2px 2px 2px #000000;
+}
+
+.pol-positive {
+    background: #00a000;
+}
+
+.pol-negative {
+    background: #ff0000;
+}
+
+.pol-reference {
+    background: #e0e000; color: #000000;
+}
+
+.pol-question {
+    background: #0040ff;
+}
 
 .under, a.under {
     text-decoration: underline;