diff --git a/_includes/entete.html b/_includes/entete.html
new file mode 100644
index 0000000..f37a26b
--- /dev/null
+++ b/_includes/entete.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+    <html lang="fr">
+    <head>
+        <meta charset="UTF-8">
+        <title>Bitoduc.fr : la référence selon nous-mêmes sur les termes informatiques en français</title>
+        <link rel="icon" href="favorimage.ico" />
+        <link rel="stylesheet" type="text/css" href="bitoduc.css" />
+    </head>
+    <body>
+        <div id="tout">
+            <h1>Bitoduc.fr : termes informatiques en français</h1>
+
+            <div id="subtitle">
+                <i><b>bitoduc</b> - nm. ensemble de conducteurs d'interconnexion de plusieurs organes numériques d'un ordinateur ; syn. infoduc.</i>
+            </div>
+
+            <div id="intro">
+                De nos jours on rencontre de nombreux termes techniques en anglais : &laquo;&nbsp;megabyte&nbsp;&raquo;, &laquo;&nbsp;URL&nbsp;&raquo; ou encore &laquo;&nbsp;plugin&nbsp;&raquo;.<br/><br/> Pourtant, ces nouveaux mots ont souvent un équivalent francais qu'il conviendrait d'utiliser. En voici une liste bien pratique. Bonne lecture !
+
+                <br/><br/>
+
+                Vous avez des idées de traductions ? Parlons-en sur le
+                <a href="https://github.com/soulaklabs/bitoduc.fr/issues">
+                  dispositif de suivi de bogues</a>&nbsp;!
+                Les rustines et fusiodemandes sont toujours appréciées.
+
+                <br/><br/>
+                <div>
+                    <a id="lienInversion" href="#" ></a>
+                </div>
+            </div>
+
+            <div id="mots">
+
diff --git a/_includes/pied.html b/_includes/pied.html
new file mode 100644
index 0000000..cf57ddb
--- /dev/null
+++ b/_includes/pied.html
@@ -0,0 +1,10 @@
+            </div>
+        </div>
+        <a href="https://github.com/soulaklabs/bitoduc.fr">
+          <img class="bouton-gh"
+               src="scissionnezmoi_right_gray.png"
+               alt="Scissionnez-moi sur GitHub">
+        </a>
+    </body>
+</html>
+
diff --git a/_layouts/mots.html b/_layouts/mots.html
index 387532c..33283dd 100644
--- a/_layouts/mots.html
+++ b/_layouts/mots.html
@@ -1,16 +1,17 @@
-<a href="#ang-fra">Anglais-Français</a> - <a href="#fra-ang">Français-Anglais</a>
+{% include entete.html %}
+
+<a href="#ang-fra"><span class="mot-anglais">Anglais</span>-<span class="mot-français">Français</span></a> - <a href="#fra-ang"><span class="mot-anglais">Anglais</span>-<span class="mot-français">Français</span></a>
 
 <!-- Langue -->
-<h1><a name="ang-fra">Anglais-Français</a></h1>
+<h1><a name="ang-fra"><span class="mot-anglais">Anglais</span>-<span class="mot-français">Français</span></a></h1>
 
 <!-- Index des lettres -->
+<div class="index">
 {% assign lettres = site.data.traductions['vrais mots'] | map :"anglais" | map slice :0 | uniq | sort %}
 {% for lettre in lettres %}
 <a href="#ang-fra-{{lettre}}">{{lettre}}</a>
-	{% unless forloop.last %}
-		-
-	{% endunless %}
 {% endfor %}
+</div>
 
 <!-- Mots -->
 {% assign ang_fra = site.data.traductions['vrais mots'] | sort :"anglais" %}
@@ -18,34 +19,37 @@
 	{% capture lettre %}{{ trad['anglais'] | slice :0 }}{% endcapture %}
 
 	{% if forloop.first %}
+<div class="groupe-lettre">
 <h2><a name="ang-fra-{{lettre}}">{{lettre}}</a></h2>
 <dl>
 	{% elsif lettre != lettre_avant %}
 </dl>
+</div>
+<div class="groupe-lettre">
 <h2><a name="ang-fra-{{lettre}}">{{lettre}}</a></h2>
 <dl>
 	{% endif %}
 	{% assign lettre_avant = lettre %}
 
-<dt>{{ trad['anglais'] }}</dt>
-<dd>{{ trad['français'] }}</dd>
+<dt class="mot-anglais">{{ trad['anglais'] }}</dt>
+<dd class="mot-français">{{ trad['français'] }}</dd>
 
 	{% if forloop.last %}
 </dl>
+</div>
 	{% endif %}
 {% endfor %}
 
 <!-- Langue -->
-<h1><a name="fra-ang">Français-Anglais</a></h1>
+<h1><a name="fra-ang"><span class="mot-français">Français</span>-<span class="mot-anglais">Anglais</span></a></h1>
 
 <!-- Index des lettres -->
 {% assign lettres = site.data.traductions['vrais mots'] | map :"français" | map slice :0 | uniq | sort %}
+<div class="index">
 {% for lettre in lettres %}
 <a href="#fra-ang-{{lettre}}">{{lettre}}</a>
-	{% unless forloop.last %}
-		-
-	{% endunless %}
 {% endfor %}
+</div>
 
 <!-- Mots -->
 {% assign fra_ang = site.data.traductions['vrais mots'] | sort :"français" %}
@@ -53,20 +57,25 @@
 	{% capture lettre %}{{ trad['français'] | slice :0 }}{% endcapture %}
 
 	{% if forloop.first %}
+<div class="groupe-lettre">
 <h2><a name="fra-ang-{{lettre}}">{{lettre}}</a></h2>
 <dl>
 	{% elsif lettre != lettre_avant %}
 </dl>
+</div>
+<div class="groupe-lettre">
 <h2><a name="fra-ang-{{lettre}}">{{lettre}}</a></h2>
 <dl>
 	{% endif %}
 	{% assign lettre_avant = lettre %}
 
-<dt>{{ trad['français'] }}</dt>
-<dd>{{ trad['anglais'] }}</dd>
+<dt class="mot-français">{{ trad['français'] }}</dt>
+<dd class="mot-anglais">{{ trad['anglais'] }}</dd>
 
 	{% if forloop.last %}
 </dl>
+</div>
 	{% endif %}
 {% endfor %}
 
+{% include pied.html %}
diff --git a/bitoduc.css b/bitoduc.css
index 4aaaf2d..8a3e3b2 100644
--- a/bitoduc.css
+++ b/bitoduc.css
@@ -87,12 +87,12 @@ h3
     width : 50%;
 }
 
-#index
+.index
 {
     text-align: center;
 }
 
-#index a
+.index a
 {
     font-size: larger;
     color: black;
@@ -101,7 +101,7 @@ h3
     position:relative;
 }
 
-#index a:hover
+.index a:hover
 {
     background-color: #999;
 }
