--- a/web/hdalab/static/hdalab/css/common.css	Wed Jul 04 10:31:59 2012 +0200
+++ b/web/hdalab/static/hdalab/css/common.css	Wed Jul 04 11:44:29 2012 +0200
@@ -88,7 +88,15 @@
 }
 
 h1 {
-    margin: 5px 0 10px; font-size: 34px; color: #ffffff;
+    margin: 5px 0 10px; font-size: 34px;
+}
+
+h1 a {
+    color: #ffffff;
+}
+
+h1 a:hover {
+    color: #e07000;
 }
 
 #nav {

--- a/web/hdalab/static/hdalab/css/index.css	Wed Jul 04 10:31:59 2012 +0200
+++ b/web/hdalab/static/hdalab/css/index.css	Wed Jul 04 11:44:29 2012 +0200
@@ -44,12 +44,24 @@
     font-weight: bold;
 }
 
-.entree-bloc {
-    width: 960px; height: 300px; margin: 5px 0 15px; cursor: pointer;
+.liste {
+    clear: both;
+}
+
+.bloc-appli {
+    width: 475px; float: left;
+}
+
+.separateur-applis {
+    width: 10px; height: 100px; float: left;
+}
+
+.fond-bloc {
+    cursor: pointer; height: 295px; margin: 5px 0 15px; padding: 5px;
 }
 
 .overlay-bloc {
-    width: 940px; padding: 5px 10px; background: rgba(255, 200, 120, .8); display: none;
+    padding: 5px 10px; background: rgba(255, 190, 100, 0.85); display: none;
 }
 
 p.goto {
@@ -57,7 +69,11 @@
 }
 
 #bloc-facettes {
-    background: url(../img/facettes-preview.jpg);
+    background: url(../img/facettes-thumb.jpg);
+}
+
+#bloc-categories {
+    background: url(../img/categories-thumb.jpg);
 }
 
 .mini-table {

Binary file web/hdalab/static/hdalab/img/categories-thumb.jpg has changed

Binary file web/hdalab/static/hdalab/img/facettes-thumb.jpg has changed

--- a/web/hdalab/templates/base.html	Wed Jul 04 10:31:59 2012 +0200
+++ b/web/hdalab/templates/base.html	Wed Jul 04 11:44:29 2012 +0200
@@ -28,7 +28,9 @@
                 <li><a class="{% block facettes_actif %}{% endblock %}" href="{% url facettes %}">Recherche par facettes</a></li>
                 <li><a class="{% block categories_actif %}{% endblock %}" href="{% url categories %}">Catégories de Wikipedia</a></li>
             </ul>
-            <h1>HdA Lab</h1>
+            <h1>
+                <a href="{% url home %}">HdA Lab</a>
+            </h1>
         </div>
         <div id="container">
 {% endblock %}

--- a/web/hdalab/templates/index.html	Wed Jul 04 10:31:59 2012 +0200
+++ b/web/hdalab/templates/index.html	Wed Jul 04 11:44:29 2012 +0200
@@ -11,10 +11,10 @@
 {{block.super}}
         <script type="text/javascript">
             $(function() {
-                $(".entree-bloc").mouseover(function() {
-                    var _id = this.id;
+                $(".fond-bloc").mouseover(function() {
+                    var _this = this;
                     $(".overlay-bloc").each(function() {
-                        if ($(this).parent().attr("id") == _id) {
+                        if (this.parentNode == _this) {
                             $(this).slideDown();
                         } else {
                             $(this).slideUp();
@@ -32,12 +32,27 @@
 
 {% block main_content %}
     <h2>Explorez autrement le portail Histoire des Arts</h2>
-    <h3>Recherche par facettes</h3>
-    <div class="entree-bloc" id="bloc-facettes">
-        <div class="overlay-bloc">
-            <p>Recherchez les contenus d'Histoire des Arts par plusieurs points d'entrée&nbsp;: pays, périodes historiques, disciplines artistiques et mots-clés liés aux &oelig;vres.</p>
-            <p>Les éléments de l'interface sont à la fois des critères de recherche et des mode de visualisation des résultats&nbsp;: Au fur et à mesure de vos recherches, ils se mettent à jour pour refléter le nombre de contenus correspondant.</p>
-            <p class="goto"><a href="{% url facettes %}">&raquo;</a></p>
+    <div class="liste-applis">
+        <div class="bloc-appli">
+            <h3>Recherche par facettes</h3>
+            <div class="fond-bloc" id="bloc-facettes">
+                <div class="overlay-bloc">
+                    <p>Recherchez les contenus d'Histoire des Arts par plusieurs points d'entrée&nbsp;: pays, périodes historiques, disciplines artistiques et mots-clés liés aux &oelig;vres.</p>
+                    <p>Les éléments de l'interface sont à la fois des critères de recherche et des mode de visualisation des résultats&nbsp;: Au fur et à mesure de vos recherches, ils se mettent à jour pour refléter le nombre de contenus correspondant.</p>
+                    <p class="goto"><a href="{% url facettes %}">&raquo;</a></p>
+                </div>
+            </div>
+        </div>
+        <div class="separateur-applis"></div>
+        <div class="bloc-appli">
+            <h3>Catégories de Wikipedia</h3>
+            <div class="fond-bloc" id="bloc-categories">
+                <div class="overlay-bloc">
+                    <p>Naviguez dans l'arbre des catégories de Wikipedia pour atteindre les contenus du portail Histoire des Arts.</p>
+                    <p>Recherchez une catégorie par son titre, puis explorez les sous-catégories et les tags qui y sont rattachés.</p>
+                    <p class="goto"><a href="{% url categories %}">&raquo;</a></p>
+                </div>
+            </div>
         </div>
     </div>
     <h3>À propos de HdA Lab</h3>