diff --git a/app/app.php b/app/app.php
index 3f6d5da..9542152 100644
--- a/app/app.php
+++ b/app/app.php
@@ -20,6 +20,13 @@ $app->before(function () use ($app) {
     $app['twig']->addGlobal('layout', $app['twig']->loadTemplate('layout.twig'));
 });
 
+$app['twig'] = $app->share($app->extend('twig', function($twig) {
+  $twig->addFilter(new Twig_SimpleFilter('getDomain', function ($url) {
+    return parse_url($url, PHP_URL_HOST);
+  }));
+  return $twig;
+}));
+
 $app->register(new ConsoleServiceProvider(), [
     'console.name' => 'Poche console',
     'console.version' => '0.1',
diff --git a/app/views/_entry.twig b/app/views/_entry.twig
index 27db457..d392cfe 100644
--- a/app/views/_entry.twig
+++ b/app/views/_entry.twig
@@ -1,10 +1,10 @@
-    <li>
+    <article id="item-{{entry.id}}">
         <h2><a href="{{ path('view_entry', {'id': entry.id}) }}">{{ entry.title }}</a></h2>
-        <p>{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
-        <ul class="entry_options">
+        <p class="preview">{{ entry.content|striptags|slice(0, 300) }}&hellip;</p>
+        <ul class="tools">
             <li>{% if entry.status == "read" %}<a href="{{ path('mark_entry_unread', {'id': entry.id}) }}">{{ 'mark as unread'|trans }}</a>{% else %}<a href="{{ path('mark_entry_read', {'id': entry.id}) }}">{{ 'mark as read'|trans }}</a>{% endif %}</li>
             <li><a href="#">{% if entry.bookmark == 1 %}<a href="{{ path('unstar_entry', {'id': entry.id}) }}">{{ 'unstar'|trans }}</a>{% else %}<a href="{{ path('star_entry', {'id': entry.id}) }}">{{ 'star'|trans }}</a>{% endif %}</a></li>
             <li><a href="{{ path('remove_entry', {'id': entry.id}) }}">{{ 'delete'|trans }}</a></li>
-            <li><a href="{{ entry.url }}">{{ 'view original'|trans }}</a></li>
+            <li><a href="{{ entry.url }}" class="external" title="{{ 'view original'|trans }}">{{ entry.url | getDomain }}</a></li>
         </ul>
-    </li>
\ No newline at end of file
+    </article>
\ No newline at end of file
diff --git a/app/views/_footer.twig b/app/views/_footer.twig
index ccf7379..2d6c255 100644
--- a/app/views/_footer.twig
+++ b/app/views/_footer.twig
@@ -1,3 +1,3 @@
-        <footer class="w600p center mt3 mb3 smaller txtright">
-            <p>powered by <a href="http://inthepoche.com">poche</a></p>
+        <footer role="contentinfo">
+            <p>powered by <a href="http://www.inthepoche.com">poche</a></p>
         </footer>
diff --git a/app/views/_menu.twig b/app/views/_menu.twig
deleted file mode 100644
index 6f6b415..0000000
--- a/app/views/_menu.twig
+++ /dev/null
@@ -1,11 +0,0 @@
-{% if entries is defined %} 
-{% set count = entries|length %}
-{% endif %}
-<nav role="navigation">
-    <ul>
-        <li><a href="/">{{ 'unread'|trans }}</a>{% if app.request.requesturi == '/' %} ({{count}}){% endif %}</li>
-        <li><a href="/bookmarks">{{ 'bookmarks'|trans }}</a>{% if app.request.requesturi == '/bookmarks' %} ({{count}}){% endif %}</li>
-        <li><a href="/archive">{{ 'archive'|trans }}</a>{% if app.request.requesturi == '/archive' %} ({{count}}){% endif %}</li>
-        <li><a href="{{ path('add') }}">{{ 'entry.add'|trans }}</a></li>
-    </ul>
-</nav>
\ No newline at end of file
diff --git a/app/views/_top.twig b/app/views/_top.twig
index 8720605..f96e5b2 100644
--- a/app/views/_top.twig
+++ b/app/views/_top.twig
@@ -1,5 +1,14 @@
-        <header class="w600p center mbm">
-            <h1>
-                <a href="/" title="back to home" ><img src="/assets/img/logo.png" alt="poche logo" /></a>
-            </h1>
-        </header>
+{% if entries is defined %} 
+{% set count = entries|length %}
+{% endif %}
+    <header>
+        <nav role="navigation">
+            <a class="logo" href="/">poche</a>
+            <ul>
+                <li {% if app.request.requesturi == '/' %}class="active"{% endif %}><a href="/">{{ 'unread'|trans }}</a>{% if app.request.requesturi == '/' %} ({{count}}){% endif %}</li>
+                <li {% if app.request.requesturi == '/bookmarks' %}class="active"{% endif %}><a href="/bookmarks">{{ 'bookmarks'|trans }}</a></li>
+                <li {% if app.request.requesturi == '/archive' %}class="active"{% endif %}><a href="/archive">{{ 'archive'|trans }}</a></li>
+                <li {% if app.request.requesturi == '/add' %}class="active"{% endif %}><a href="{{ path('add') }}">{{ 'entry.add'|trans }}</a></li>
+            </ul>
+        </nav>
+    </header>
diff --git a/app/views/add.twig b/app/views/add.twig
index 4008c2a..308ea4d 100644
--- a/app/views/add.twig
+++ b/app/views/add.twig
@@ -1,19 +1,6 @@
 {% extends layout %}
 
-{% block menu %}
-
-<nav role="navigation">
-    <ul>
-        <li><a href="/">{{ 'unread'|trans }}</a></li>
-        <li>{{ 'starred'|trans }}</li>
-        <li><a href="/archive">{{ 'archive'|trans }}</a></li>
-        <li><a href="{{ path('add') }}">{{ 'entry.add'|trans }}</a></li>
-    </ul>
-</nav>
-{% endblock %}
-
 {% block content %}
-
 <h2>{{ 'entry.add'|trans }}</h2>
 
 <form action="#" method="post">
@@ -21,5 +8,4 @@
 
     <input type="submit" name="submit" />
 </form>
-<p><a href="/">back to home</a></p>
 {% endblock %}
\ No newline at end of file
diff --git a/app/views/archive.twig b/app/views/archive.twig
index b8259f7..491c60b 100644
--- a/app/views/archive.twig
+++ b/app/views/archive.twig
@@ -3,13 +3,13 @@
 
 {% block content %}
 {% if entries is empty %}
-<div class="messages warning"><p>{{ 'No link available here!'|trans }}</p></div>
+<div class="alert alert-info">{{ 'No link available here!'|trans }}</div>
 {% else %}
-    <ul>
+    <section id="listing" class="items">
     {% for entry in entries %}
         {% include "_entry.twig" %}
     {% endfor %}
-    </ul>
+    </section>
 
 {% endif %}
 
diff --git a/app/views/bookmarks.twig b/app/views/bookmarks.twig
index 77b3010..693482e 100644
--- a/app/views/bookmarks.twig
+++ b/app/views/bookmarks.twig
@@ -3,13 +3,13 @@
 
 {% block content %}
 {% if entries is empty %}
-<div class="messages warning"><p>{{ 'No link available here!'|trans }}</p></div>
+<div class="alert alert-info">{{ 'No link available here!'|trans }}</div>
 {% else %}
-    <ul>
+    <section id="listing" class="items">
     {% for entry in entries %}
         {% include "_entry.twig" %}
     {% endfor %}
-    </ul>
+    </section>
 
 {% endif %}
 
diff --git a/app/views/index.twig b/app/views/index.twig
index e2f7700..08eb770 100644
--- a/app/views/index.twig
+++ b/app/views/index.twig
@@ -1,15 +1,18 @@
 {% extends layout %}
-{% block title %}unread{% endblock %}
+{% block title %}
+{% if entries is defined %} 
+{% set count = entries|length %}
+{% endif %}unread ({{count}}){% endblock %}
 
 {% block content %}
 {% if entries is empty %}
-<div class="messages warning"><p>{{ 'No link available here!'|trans }}</p></div>
+<div class="alert alert-info">{{ 'No link available here!'|trans }}</div>
 {% else %}
-    <ul>
+    <section id="listing" class="items">
     {% for entry in entries %}
         {% include "_entry.twig" %}
     {% endfor %}
-    </ul>
+    </section>
 
 {% endif %}
 
diff --git a/app/views/layout.twig b/app/views/layout.twig
index b04a27d..c59f380 100644
--- a/app/views/layout.twig
+++ b/app/views/layout.twig
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="en"><![endif]-->
 <!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="en"><![endif]-->
 <!--[if IE 8]><html class="no-js ie8 ie678" lang="en"><![endif]-->
 <!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->
-<html lang="en">
+<html dir="ltr" lang="en">
     <head>
         <meta name="viewport" content="initial-scale=1.0">
         <meta charset="utf-8">
@@ -11,18 +11,21 @@
         <meta http-equiv="X-UA-Compatible" content="IE=10">
         <![endif]-->
         <title>{% block title %}{% endblock %} – poche</title>
-        <link rel="stylesheet" href="/assets/css/knacss.css" media="all">
-        <link rel="stylesheet" href="/assets/css/style.css" media="all">
+        <link rel="stylesheet" href="/assets/css/reset.css" media="all">
+        <link rel="stylesheet" href="/assets/css/tinytypo.css" media="all">
+        <link rel="stylesheet" href="/assets/css/typo.css" media="all">
+        <link rel="stylesheet" href="/assets/css/custom.css" media="all">
     </head>
     <body>
+        <div id="main" class="page">
 {% include '_top.twig' %}
-        <div id="main">
-            <div id="content" class="w600p center">
-            {% include "_menu.twig" %}
+        <main role="main">
+            <div id="content">
             {% include '_alerts.twig' %}
             {% block content %}{% endblock %}
             </div>
-        </div>
+        </main>
 {% include '_footer.twig' %}
+        </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/app/views/view.twig b/app/views/view.twig
index 841c14c..9f28682 100644
--- a/app/views/view.twig
+++ b/app/views/view.twig
@@ -7,11 +7,11 @@
 <div class="messages warning"><p>{{ 'No link available here!'|trans }}</p></div>
 {% else %}
     <h2>{{ entry.title }}</h2>
-    <ul class="entry_options">
+    <ul class="tools">
         <li>{% if entry.status == "read" %}<a href="{{ path('mark_entry_unread', {'id': entry.id}) }}">{{ 'mark as unread'|trans }}</a>{% else %}<a href="{{ path('mark_entry_read', {'id': entry.id}) }}">{{ 'mark as read'|trans }}</a>{% endif %}</li>
         <li>{% if entry.bookmark == 1 %}<a href="{{ path('unstar_entry', {'id': entry.id}) }}">{{ 'unstar'|trans }}</a>{% else %}<a href="{{ path('star_entry', {'id': entry.id}) }}">{{ 'star'|trans }}</a>{% endif %}</li>
         <li><a href="{{ path('remove_entry', {'id': entry.id}) }}">{{ 'delete'|trans }}</a></li>
-        <li><a href="{{ entry.url }}">{{ 'view original'|trans }}</a></li>
+        <li><a href="{{ entry.url }}" class="external" title="{{ 'view original'|trans }}">{{ entry.url | getDomain }}</a></li>
     </ul>
 
     <article>{{ entry.content|raw }}</article>
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
new file mode 100644
index 0000000..5fa9776
--- /dev/null
+++ b/web/assets/css/custom.css
@@ -0,0 +1,139 @@
+/* --------------------------------------------------
+
+   custom.css
+
+----------------------------------------------------- */
+/* Add your styles here
+[fr] Ajoutez vos styles ici */
+
+body {
+  text-align: center;
+}
+
+.page {
+  width: 50%;
+  max-width: 700px;
+  margin: 1em auto;
+  text-align: left;
+}
+
+@media ( max-width: 940px) {
+  .page { width: 80%; }
+}
+
+@media ( max-width: 400px) {
+  .page { width: auto; margin: 1em 10px; }
+}
+
+header {
+    margin-top: 10px;
+}
+
+.logo {
+    color: #000;
+    letter-spacing: 1px;
+    float: left;
+}
+
+header ul {
+    text-align: right;
+    font-size: 90%;
+}
+
+header li {
+    display: inline;  
+}
+
+header a {
+    color: #777;
+    text-decoration: none;
+}
+
+nav .active a {
+    color: #333;
+    font-weight: bold;
+}
+
+h2 {
+    font-size: 1.2em;
+}
+
+.preview {
+    margin-bottom: 0;
+}
+
+.items article .preview {
+    color: #888;
+}
+
+.items article:hover .preview {
+    color: #333;
+}
+
+.tools li {
+  display: inline-block;
+  font-size: 0.8em;
+  color: #888;
+}
+
+.alert {
+  padding: 8px 35px 8px 14px;
+  margin-bottom: 20px;
+  color: #c09853;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  background-color: #fcf8e3;
+  border: 1px solid #fbeed5;
+  -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+}
+
+.alert h4 {
+  margin: 0;
+}
+
+.alert .close {
+  position: relative;
+  top: -2px;
+  right: -21px;
+  line-height: 20px;
+}
+
+.alert-success {
+  color: #468847;
+  background-color: #dff0d8;
+  border-color: #d6e9c6;
+}
+
+.alert-danger,
+.alert-error {
+  color: #b94a48;
+  background-color: #f2dede;
+  border-color: #eed3d7;
+}
+
+.alert-info {
+  color: #3a87ad;
+  background-color: #d9edf7;
+  border-color: #bce8f1;
+}
+
+.alert-block {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+
+.alert-block > p,
+.alert-block > ul {
+  margin-bottom: 0;
+}
+
+.alert-block p + p {
+  margin-top: 5px;
+}
+
+footer {
+  text-align: right;
+  color: #555;
+  font-size: 0.8em;
+}
\ No newline at end of file
diff --git a/web/assets/css/knacss.css b/web/assets/css/knacss.css
deleted file mode 100644
index e71d0a7..0000000
--- a/web/assets/css/knacss.css
+++ /dev/null
@@ -1,1121 +0,0 @@
-/*!
-* www.KNACSS.com V2.9 (2013-10) @author: Raphael Goetter, Alsacreations
-* Licence WTFPL http://www.wtfpl.net/ 
-*/
-
-/* ----------------------------- */
-/* ==reset                       */
-/* ----------------------------- */
-
-/* base font-size corresponds to 10px and is adapted to rem unit */
-html {
-    font-size: 62.5%;
-}
-body {
-    background-color: #fff;
-    color: #000;
-    font-family: helvetica, arial, sans-serif;
-    font-size: 1.4em; /* equiv 14px */
-    line-height: 1.5; /* adapt to your design */
-}
-
-/* font-sizing for content */
-/* preserves vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
-p,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details,
-figure {
-    margin: .75em 0 0;
-    line-height: 1.5;
-}
-h1, .h1-like {
-    margin: 0.6563em 0 0 0;
-    font-size: 2.2857em; /* equiv 32px */
-    line-height: 1.3126;
-}
-h2, .h2-like {
-    margin: 0.75em 0 0 0;
-    font-size: 2em; /* equiv 28px */
-    line-height: 1.5;
-}
-h3, .h3-like {
-    margin: 0.875em 0 0 0;
-    font-size: 1.7143em; /* equiv 24px */
-    line-height: 1.75;
-}
-h4, .h4-like {
-    margin: 1.05em 0 0 0;
-    font-size: 1.4286em; /* equiv 20px */
-    line-height: 1.05;
-}
-h5, .h5-like {
-    margin: 1.1667em 0 0 0;
-    font-size: 1.2857em; /* equiv 18px */
-    line-height: 1.1667;
-}
-h6, .h6-like {
-    margin: 1.3125em 0 0 0;
-    font-size: 1.1429em; /* equiv 16px */
-    line-height: 1.3125;
-}
-
-/* alternate font-sizing */
-.smaller {
-    font-size: .7143em; /* equiv 10px */
-}
-.small {
-    font-size: .8571em; /* equiv 12px */
-}
-.big {
-    font-size: 1.1429em; /* equiv 16px */
-}
-.bigger {
-    font-size: 1.2857em; /* equiv 18px */
-}
-.biggest {
-    font-size: 1.4286em; /* equiv 20px */
-}
-
-/* soft reset */
-html,
-body {
-    margin: 0;
-    padding: 0;
-}
-ul,
-ol {
-    padding-left: 2em;
-}
-ul.unstyled {
-    list-style: none;
-}
-code, 
-pre,
-samp,
-kbd {
-    white-space: pre-wrap;
-    font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
-    line-height: 1em;
-}
-code, kbd, mark {
-    border-radius: 2px;
-}
-em {
-    font-style: italic;
-}
-strong {
-    font-weight: bold;
-}
-kbd {
-    padding: 0 2px;
-    border: 1px solid #999;
-}
-code {
-    padding: 2px 4px;
-    background: rgba(0,0,0,.04);
-    color: #b11; 
-}
-mark {
-    padding:2px 4px;
-    background: #ff0;
-}
-sup,
-sub {
-    vertical-align: 0;
-    position: relative;
-}
-sup {
-    bottom: 1ex;
-}
-sub {
-    top: .5ex;
-}
-table { margin-bottom: 1.5em; }
-
-/* avoid top margins on first content element */
-p:first-child,
-ul:first-child,
-ol:first-child,
-dl:first-child,
-blockquote:first-child,
-pre:first-child,
-h1:first-child,
-h2:first-child,
-h3:first-child,
-h4:first-child,
-h5:first-child,
-h6:first-child {
-    margin-top: 0;
-}
-
-/* avoid margins on nested elements */
-li p,
-li ul,
-li ol {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-/* max values */
-img, table, td, blockquote, code, pre, textarea, input, video {
-    max-width: 100%;
-}
-/* pictures */
-img {
-    vertical-align: middle;
-}
-/* Google Gmap3 bug fix on images */
-:not(.gm-style) img {
-    height: auto !important;
-}
-.ie678 .gm-style img {
-    height: 100%;  /* IE678 hack */
-}
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-    max-width: none !important;
-}
-
-a img { border: 0; }
-
-/* scripts */
-body > script {display: none !important;}
-
-/* skip-links */
-.skip-links {
-    position: absolute;
-}
-.skip-links a {
-    position: absolute;
-    left: -7000px;
-    padding: 0.5em;
-    background: #000;
-    color:#fff;
-    text-decoration: none;
-}
-.skip-links a:focus {
-    position: static;
-}
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-    -webkit-box-sizing: border-box;
-       -moz-box-sizing: border-box;
-            box-sizing: border-box;
-}
-
-/* float layout */
-/* module, gains superpower "BFC" Block Formating Context */
-.mod { 
-    overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-    clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix:after,
-.line:after,
-.mod:after {
-    content: "";
-    display: table;
-    clear: both;
-}
-
-/* table layout */
-.row {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-}
-.row > *,
-.col {
-    display: table-cell;
-    vertical-align: top;
-}
-
-/* inline-block */
-.inbl {
-    display: inline-block;
-    vertical-align: top;
-}
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left elements */
-.left {
-    float: left;
-}
-img.left {
-    margin-right: 1em;
-}
-
-/* right elements */
-.right {
-    float: right;
-}
-img.right {
-    margin-left: 1em;
-}
-
-img.left, img.right {
-    margin-bottom: 5px;
-}
-
-.center    { margin-left: auto; margin-right: auto; }
-.txtleft   { text-align: left; }
-.txtright  { text-align: right; }
-.txtcenter { text-align: center; }
-
-/* blocks widths (percentages and pixels) */
-.w10    { width: 10%; }
-.w20    { width: 20%; }
-.w25    { width: 25%; }
-.w30    { width: 30%; }
-.w33    { width: 33.3333%; }
-.w40    { width: 40%; }
-.w50    { width: 50%; }
-.w60    { width: 60%; }
-.w66    { width: 66.6666%; }
-.w70    { width: 70%; }
-.w75    { width: 75%; }
-.w80    { width: 80%; }
-.w90    { width: 90%; }
-.w100   { width: 100%; }
-
-.w50p   { width: 50px; }
-.w100p  { width: 100px; }
-.w150p  { width: 150px; }
-.w200p  { width: 200px; }
-.w300p  { width: 300px; }
-.w400p  { width: 400px; }
-.w500p  { width: 500px; }
-.w600p  { width: 600px; }
-.w700p  { width: 700px; }
-.w800p  { width: 800px; }
-.w960p  { width: 960px; }
-.mw960p { max-width: 960px; }
-.w1140p  { width: 1140px; }
-.mw1140p { max-width: 1140px; }
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n,0 = small(10px),medium(20px),large(30px), zero or none(0)
-source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
-*/
-.m-reset, .ma0 { margin: 0; }
-.p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: 10px; }
-.ma2, .mam { margin: 20px; }
-.ma3, .mal { margin: 30px; }
-.pa1, .pas { padding: 10px; }
-.pa2, .pam { padding: 20px; }
-.pa3, .pal { padding: 30px; }
-
-.mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: 10px; }
-.mt2, .mtm { margin-top: 20px; }
-.mt3, .mtl { margin-top: 30px; }
-.mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: 10px; }
-.mr2, .mrm { margin-right: 20px; }
-.mr3, .mrl { margin-right: 30px; }
-.mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: 10px; }
-.mb2, .mbm { margin-bottom: 20px; }
-.mb3, .mbl { margin-bottom: 30px; }
-.ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: 10px; }
-.ml2, .mlm { margin-left: 20px; }
-.ml3, .mll { margin-left: 30px; }
-
-.pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: 10px; }
-.pt2, .ptm { padding-top: 20px; }
-.pt3, .ptl { padding-top: 30px; }
-.pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: 10px; }
-.pr2, .prm { padding-right: 20px; }
-.pr3, .prl { padding-right: 30px; }
-.pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: 10px; }
-.pb2, .pbm { padding-bottom: 20px; }
-.pb3, .pbl { padding-bottom: 30px; }
-.pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: 10px; }
-.pl2, .plm { padding-left: 20px; }
-.pl3, .pll { padding-left: 30px; }
-
-/* hiding content */
-.visually-hidden {
-    position: absolute;
-    left: -7000px;
-    overflow: hidden;
-}
-[dir=rtl] .visually-hidden {
-    left: auto;
-    right: -7000px;
-}
-
-.desktop-hidden { display: none; } /* hidden on desktop */
-
-/* ----------------------------- */
-/* ==iefix                       */
-/* ----------------------------- */
-
-/* hasLayout for IE6/IE7 */
-.ie67 .clearfix,
-.ie67 .line,
-.ie67 .mod,
-.ie67 .row,
-.ie67 .col {
-    zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs a width on IE6/IE7 */
-.ie67 .btn,
-.ie67 .col,
-.ie67 .inbl {
-    display: inline;
-    zoom: 1;
-}
-.ie8 img {
-    width: auto; /* @bugfix for IE8 */
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-    behavior: url(/js/boxsizing.htc);
-}
-*/
-
-/* ----------------------------- */
-/* ==print                       */
-/* ----------------------------- */
-
-/* quick print reset */
-@media print {
-    p,
-    blockquote {
-        orphans: 2;
-        widows: 2;
-    }
-    blockquote,
-    ul,
-    ol {
-        page-break-inside: avoid;
-    }
-    h1,
-    h2,
-    h3,
-    caption {
-        page-break-after: avoid;
-    }
-}
-
-/* debug helper */
-.knacss-debug {
-    background: pink;
-    outline: 3px solid maroon;
-}
-
-/* orientation iOS font-size fix */
-@media (orientation: landscape) and (max-device-width: 768px) {
-    html,
-    body {
-        -webkit-text-size-adjust: 100%;
-    }
-}
-
-/* ----------------------------- */
-/* ==own stylesheet              */
-/* ----------------------------- */
-
-/* Here should go your own CSS styles */
-/* You can link them with an @import or, better for webperf, just paste them here */
-
-/* @import url(my-styles.css); */
-
-
-/* ----------------------------- */
-/* ==grids                       */
-/* ----------------------------- */
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-/* font-family hack explained here : https://github.com/raphaelgoetter/KNACSS/issues/37 */
-
-.grid {
-    overflow: hidden;
-    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
-}
-.grid > * {
-    display: block;
-    padding: 0;
-    margin-left: -20px; /* gutter value */
-    text-align: left;
-    letter-spacing: -0.31em;
-    text-rendering: optimizespeed;
-}
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
-    word-spacing: -0.43em;
-}
-.grid > * > * {
-    display: inline-block;
-    width: 100%;    
-    padding-left: 20px; /* gutter value */
-    margin-left: 0;
-    vertical-align: top;
-    text-align: left;
-    letter-spacing: normal;
-    word-spacing: normal;
-    text-rendering: auto;
-    *display: inline; *zoom: 1; /* IE67 hack */
-    font-family: helvetica, arial, sans-serif;
-}
-.grid2 > * {width: 50%;}
-.grid3 > * {width: 33.333%;}
-.grid4 > * {width: 25%;}
-.grid5 > * {width: 20%;}
-.grid6 > * {width: 16.667%;}
-.grid8 > * {width: 12.5%;}
-.grid10 > * {width: 10%;}
-.grid12 > * {width: 8.333%;}
-
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { width: 66.666%; }
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { width: 33.333%; }
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { width: 25%; }
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { width: 75%; }
-
-/* Responsiv-o-matic */
-@media (max-width: 1024px) {
-    .grid5 > *,
-    .grid6 > *,
-    .grid8 > *,
-    .grid10 > *,
-    .grid12 > * {width: 33.333%}
-}
-@media (max-width: 768px) {
-    .grid3 > *,
-    .grid4 > *,
-    .grid5 > *,
-    .grid6 > *,
-    .grid8 > *,
-    .grid10 > *,
-    .grid12 > * {width: 50%}
-}
-@media (max-width: 640px) {
-    .grid > * > * {width: 100% !important}
-}
-
-/* ----------------------------- */
-/* ==tables                      */
-/* ----------------------------- */
-
-table,
-.table {
-    max-width : 100%;
-    table-layout: fixed;
-    border-collapse: collapse;
-    vertical-align: top;
-}
-table {
-    width: 100%;
-}
-.table {
-    display: table;
-}
-table#recaptcha_table,
-table.table-auto {
-    table-layout:auto;
-}
-caption {
-    padding: 10px;
-    color: #555;
-    font-style: italic; 
-}
-table { 
-    border: 1px solid #ccc;
-}
-tr > * + * {
-    border-left: 1px solid #ccc;
-}
-th,
-td {
-    padding: .3em .8em;
-    text-align: left;
-    border-bottom: 1px solid #ccc;
-}
-td {
-    color: #333;
-}
-
-/* alternate tables */
-.alternate { border: 0; }
-.alternate tbody { 
-    border: 1px solid #ccc; 
-}
-.alternate thead tr > * + * {
-    border-left: 0;
-}
-.alternate tbody tr > * + * {
-    border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-.alternate-vert { 
-    border: 0;
-    border-right: 1px solid #ccc;
-}
-.alternate-vert tr > :first-child {
-    border-bottom: 0;
-}
-.alternate-vert tr > * + * {
-    border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-.striped tbody tr:nth-child(odd) {
-    background: #eee;
-    background: rgba(0, 0, 0, .05);
-}
-
-/* striped-vert tables */
-.striped-vert tr > :first-child {
-    background: #eee;
-    background: rgba(0, 0, 0, .05);
-}
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize 
-* and www.sitepen.com
-*/
-
-
-/* buttons */
-.btn {
-    display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-    border: none;
-}
-input,
-button,
-select,
-label,
-.btn {
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
-}
-label { 
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-}
-legend {
-    border: 0;
-    white-space: normal;
-}
-textarea {
-    overflow: auto; /* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-    min-height: 5em;
-    vertical-align: top;
-    font-family: inherit;
-    font-size: inherit;
-    resize: vertical;
-}
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-    cursor: pointer;
-    -webkit-appearance: button; /* clickable input types in iOS */
-}
-input[type="checkbox"],
-input[type="radio"] {
-    padding: 0; /* Corrects excess space around these inputs in IE8/9 */
-}
-input[type="search"] {
-    -webkit-appearance: textfield;
-}
-
-/* if select styling bugs on WebKit */
-/* select { -webkit-appearance: none; } */
-
-/* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-    display: none;
-}
-::-webkit-input-placeholder {
-    color: #777;
-}
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-    color: #777;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/* ----------------------------- */
-/* ==icons and bullets           */
-/* ----------------------------- */
-
-.icon {display: inline-block;}
-
-.icon:before,
-.icon.after:after {
-    content: "";
-    display: inline-block;
-    vertical-align: middle;
-    position: relative; top: -.1em;
-    margin: 0 0.3em 0 0;
-    font: 1.4em/1 sans-serif;
-    color: #000;
-    text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-    speak: none;
-}
-
-@media (min-device-width: 768px) {
-    .icon:before,
-    .icon.after:after {
-    font: 1em/0.6 sans-serif;
-    -webkit-transform: rotateZ(0.05deg);
-    }
-}
-
-.icon.after:after {
-    margin: 0 0 0 8px;
-}
-.icon.after:before {
-    content: "" !important
-}
-.icon-rate:before,
-.icon-rate.after:after {
-    content: "\2605";
-}
-.icon-unrate:before,
-.icon-unrate.after:after{
-    content: "\2606";
-}
-.icon-check:before,
-.icon-check.after:after{
-    content: "\2713";
-}
-.icon-uncheck:before,
-.icon-uncheck.after:after{
-    content: "\2717";
-}
-.icon-cloud:before,
-.icon-cloud.after:after {
-    content: "\2601";
-}
-.icon-dl:before,
-.icon-dl.after:after {
-    content: "\21E3";
-    font-weight: bold;
-}
-.icon-cross:before,
-.icon-cross.after:after {
-    content: "\2716";
-    font-weight: bold;
-}
-.icon-arrow1:before, 
-.icon-arrow1.after:after {
-    content: "\2192";
-    position: relative; 
-        top: -0.15em;
-}
-.icon-arrow2:before,
-.icon-arrow2.after:after {
-    content: "\279E";
-}
-.icon-arrow3:before,
-.icon-arrow3.after:after {
-    content: "\279A";
-}
-.icon-bracket1:before,
-.icon-bracket1.after:after {
-    content: "\2039";
-    font-weight: bold;
-    font-size: 1.6em;
-    position: relative; 
-        top: -0.15em;
-}
-.icon-bracket2:before,
-.icon-bracket2.after:after {
-    content: "\203A";
-    font-weight: bold;
-    font-size: 1.6em;
-    position: relative; 
-        top: -0.15em;
-}
-.icon-up:before,
-.icon-up.after:after {
-    content: "\25B2";
-}
-.icon-down:before,
-.icon-down.after:after {
-    content: "\25BC";
-}
-.icon-bull:before,
-.icon-bull.after:after {
-    content: "\2022";
-    font-size: 1.2em;
-    top: -0.05em;
-}
-.icon-bull2:before,
-.icon-bull2.after:after {
-    content: "\25E6";
-    top: -0.05em;
-}
-.icon-bull3:before,
-.icon-bull3.after:after{
-    content: "\2023";
-    font-size: 1.6em;
-    top: -0.05em;
-}
-.icon-nav:before,
-.icon-nav.after:after {
-    content: "\2261";
-    font-weight: bold;
-}
-.icon-losange:before,
-.icon-losange.after:after {
-    content: "\25C6";
-}
-.icon-asteri:before,
-.icon-asteri.after:after {
-    content: "\2731";
-    font-weight: bold;
-}
-.icon-mail:before,
-.icon-mail.after:after {
-    content: "\2709";
-    font-size: 1.6em;
-    top: -.05em;
-}
-
-
-/* ----------------------------- */
-/* ==flexbox classes */
-/* ----------------------------- */
-
-/* flexbox layout context on container */
-.flex {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-}
-/* horizontal alignment */
-.flex-h {
-        -webkit-box-orient: horizontal;
-           -moz-box-orient: horizontal;
-    -webkit-flex-direction: row;
-        -ms-flex-direction: row;
-            flex-direction: row;
-}
-/* vertical alignment */
-.flex-v {
-        -webkit-box-orient: vertical;
-           -moz-box-orient: vertical;
-    -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-            flex-direction: column;
-}
-/* for fluid items */
-.flex-fluid {
-    -moz-box-flex: 1;
-     -webkit-flex: 1;
-        -moz-flex: 1;
-         -ms-flex: 1;
-             flex: 1;
-}
-/* for items that must appear first */
-.flex-start {
-    -webkit-box-ordinal-group: -1;
-       -moz-box-ordinal-group: 0;
-               -ms-flex-order: -1;
-                -webkit-order: -1;
-                   -moz-order: -1;
-                        order: -1;
-}
-/* for items that must appear middle */
-.flex-mid {
-    -webkit-box-ordinal-group: 1;
-       -moz-box-ordinal-group: 1;
-               -ms-flex-order: 1;
-                -webkit-order: 1;
-                   -moz-order: 1;
-                        order: 1;
-}
-/* for items that must appear at the end */
-.flex-end {
-    -webkit-box-ordinal-group: 42;
-       -moz-box-ordinal-group: 42;
-               -ms-flex-order: 42;
-                -webkit-order: 42;
-                   -moz-order: 42;
-                        order: 42;
-}
-
-/* ----------------------------- */
-/* ==viewport fixing for RWD     */
-/* ----------------------------- */
-@-webkit-viewport {
-    width: device-width;
-    zoom: 1.0;
-}
-@-moz-viewport {
-    width: device-width;
-    zoom: 1.0;
-}
-@-ms-viewport {
-    width: device-width;
-    zoom: 1.0;
-}
-@-o-viewport {
-    width: device-width;
-    zoom: 1.0;
-}
-@viewport {
-    width: device-width;
-    zoom: 1.0;
-}
-
-/* ----------------------------- */
-/* ==desktop and retina medias   */
-/* ----------------------------- */
-
-@media (min-width: 641px) {
-/* here go rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* Style adjustments for retina devices */
-}
-
-/* ---------------------------------- */
-/* ==Responsive large / small / tiny  */
-/* ---------------------------------- */
-
-@media (min-width: 1280px) {
-
-    /* layouts for large (l) screens */
-    .large-hidden,
-    .tablet-hidden { display: none !important; }
-    .large-visible { display: block !important; }
-    .large-no-float {float: none; }
-    .large-inbl {
-        display: inline-block;
-        float: none;
-        vertical-align: top;
-    }
-    .large-row {
-        display: table;
-        table-layout: fixed;
-        width: 100% !important;
-    }
-    .large-col {
-        display: table-cell;
-        vertical-align: top;
-    }
-
-    /* widths for large (l) screens */
-    .large-w25 { width: 25% !important; }
-    .large-w33 { width: 33.3333% !important; }
-    .large-w50 { width: 50% !important; }
-    .large-w66 { width: 66.6666% !important; }
-    .large-w75 { width: 75% !important; }
-    .large-w100 {
-        display: block !important;
-        float: none !important;
-        clear: none !important;
-        width: auto !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        border: 0;      
-    }
-
-    /* margins for large (l) screens */
-    .large-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: 768px) {
-
-    /* quick tablet reset */
-    .w600p,
-    .w700p,
-    .w800p,
-    .w960p,
-    .mw960p,
-    .small-wauto { 
-        width: auto;
-        float: none;
-        } 
-
-    /* you shall not pass */
-    div, textarea, table, td, th, code, pre, samp {
-        word-wrap: break-word;
-        -webkit-hyphens: auto;
-           -moz-hyphens: auto;
-            -ms-hyphens: auto;
-             -o-hyphens: auto;
-                hyphens: auto;
-    }
-
-    /* layouts for small (s) screens */
-    .small-hidden,
-    .tablet-hidden { display: none !important; }
-    .small-visible { display: block !important; }
-    .small-no-float {float: none; }
-    .small-inbl {
-        display: inline-block;
-        float: none;
-        vertical-align: top;
-    }
-    .small-row {
-        display: table !important;
-        table-layout: fixed !important;
-        width: 100% !important;
-    }
-    .small-col {
-        display: table-cell !important;
-        vertical-align: top !important;
-    }
-
-    /* widths for small (s) screens */
-    .small-w25 { width: 25% !important; }
-    .small-w33 { width: 33.3333% !important; }
-    .small-w50 { width: 50% !important; }
-    .small-w66 { width: 66.6666% !important; }
-    .small-w75 { width: 75% !important; }
-    .small-w100 {
-        display: block !important;
-        float: none !important;
-        clear: none !important;
-        width: auto !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        border: 0;      
-    }
-    /* margins for small (s) screens */
-    .small-ma0 { margin: 0 !important; }
-}
-
-@media (max-width: 640px) {
-
-    /* quick smartphone reset */
-    .mod,
-    .col,
-    fieldset {
-        display: block !important;
-        float: none !important;
-        clear: none !important;
-        width: auto !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        border: 0;
-    }
-    .w300p,
-    .w400p,
-    .w500p {
-        width: auto;
-        float: none;
-    }
-    .row { 
-        display: block !important;
-        width: 100% !important;
-    }
-
-    /* layouts for tiny (t) screens */
-    .tiny-hidden,
-    .phone-hidden { display: none !important; }
-    .tiny-visible { display: block !important; }
-    .tiny-no-float {float: none;}
-    .tiny-inbl {
-        display: inline-block;
-        float: none;
-        vertical-align: top;
-    }
-    .tiny-row {
-        display: table !important;
-        table-layout: fixed !important;
-        width: 100% !important;
-    }
-    .tiny-col {
-        display: table-cell !important;
-        vertical-align: top !important;
-    }
-    th,
-    td {
-        display: block !important;
-        width: auto !important;
-        text-align: left !important;
-    }
-    thead { display: none; }
-
-    /* widths for tiny (t) screens */
-    .tiny-w25 { width: 25% !important; }
-    .tiny-w33 { width: 33.3333% !important; }
-    .tiny-w50 { width: 50% !important; }
-    .tiny-w66 { width: 66.6666% !important; }
-    .tiny-w75 { width: 75% !important; }
-    .tiny-w100 { 
-        display: block !important;
-        float: none !important;
-        clear: none !important;
-        width: auto !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        border: 0;
-    }
-    /* margins for tiny (t) screens */
-    .tiny-ma0 { margin: 0 !important; }
-}
\ No newline at end of file
diff --git a/web/assets/css/reset.css b/web/assets/css/reset.css
new file mode 100644
index 0000000..1e67e73
--- /dev/null
+++ b/web/assets/css/reset.css
@@ -0,0 +1,137 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+/* Print styles from HTML5 Boilerplate */
+@media print {
+  * {
+    text-shadow: none !important;
+    color: #000 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+}
diff --git a/web/assets/css/style.css b/web/assets/css/style.css
deleted file mode 100644
index ef93a22..0000000
--- a/web/assets/css/style.css
+++ /dev/null
@@ -1,95 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/Roboto.woff) format('woff');
-}
-
-body {
-    margin: 10px;
-    font-family: 'Roboto',Verdana,Geneva,sans-serif;
-    font-size: 16px;
-    color: #000;
-}
-
-header {
-    text-align: center;
-}
-
-header h1 {
-    font-size: 1.3em;
-}
-
-nav ul li, ul.entry_options li {
-  display: inline-block;
-}
-
-a,
-a:hover,
-a:visited {
-    color: #000;
-}
-
-footer {
-    clear: both;
-}
-
-.reading-time {
-    font-size: 0.8em;
-}
-
-.alert {
-  padding: 8px 35px 8px 14px;
-  margin-bottom: 20px;
-  color: #c09853;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  background-color: #fcf8e3;
-  border: 1px solid #fbeed5;
-  -webkit-border-radius: 4px;
-     -moz-border-radius: 4px;
-          border-radius: 4px;
-}
-
-.alert h4 {
-  margin: 0;
-}
-
-.alert .close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  line-height: 20px;
-}
-
-.alert-success {
-  color: #468847;
-  background-color: #dff0d8;
-  border-color: #d6e9c6;
-}
-
-.alert-danger,
-.alert-error {
-  color: #b94a48;
-  background-color: #f2dede;
-  border-color: #eed3d7;
-}
-
-.alert-info {
-  color: #3a87ad;
-  background-color: #d9edf7;
-  border-color: #bce8f1;
-}
-
-.alert-block {
-  padding-top: 14px;
-  padding-bottom: 14px;
-}
-
-.alert-block > p,
-.alert-block > ul {
-  margin-bottom: 0;
-}
-
-.alert-block p + p {
-  margin-top: 5px;
-}
\ No newline at end of file
diff --git a/web/assets/css/tinytypo.css b/web/assets/css/tinytypo.css
new file mode 100644
index 0000000..b546a88
--- /dev/null
+++ b/web/assets/css/tinytypo.css
@@ -0,0 +1,903 @@
+/* --------------------------------------------------
+
+   Composition helpers
+   [fr] Aides à la composition
+   
+   Tiny Typo v1.0 | MIT License
+   (c) 2010-2013 tinytypo.tetue.net
+
+----------------------------------------------------- */
+/* Box model
+[fr] http://blog.goetter.fr/post/27612618411/box-sizing-et-pourquoi-pas
+[en] http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
+*,
+*:before,
+*:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+/* Blocks */
+.block {
+  display: block;
+  margin-bottom: 1.5em;
+}
+.inline {
+  display: inline;
+}
+.inline-block {
+  display: inline-block;
+}
+/* Positioning */
+.left {
+  float: left;
+}
+.right {
+  float: right;
+}
+.center {
+  margin-right: auto;
+  margin-left: auto;
+}
+/* Blocks spacer
+[fr] Espaceur de blocs : http://romy.tetue.net/657 */
+.clear {
+  clear: both;
+}
+br.clear {
+  clear: both;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  height: 0;
+  line-height: 1px;
+  font-size: 1px;
+}
+hr.clear {
+  visibility: hidden;
+}
+/* clearfix : http://www.positioniseverything.net/easyclearing.html */
+.clearfix:after {
+  content: "\0020";
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+  overflow: hidden;
+}
+.clearfix {
+  display: inline-table;
+}
+/* Hides from IE-mac \*/
+.clearfix {
+  height: 1%;
+}
+.clearfix {
+  display: block;
+}
+/* End hide from IE-mac */
+/* Not visible */
+.offscreen {
+  position: absolute;
+  left: -999em;
+  height: 1%;
+}
+.hidden {
+  visibility: hidden;
+}
+.none {
+  display: none;
+}
+/* debug */
+.todo {
+  opacity: 0.5;
+}
+.todo:hover {
+  opacity: 1;
+}
+.blink {
+  text-decoration: blink;
+}
+/* --------------------------------------------------
+
+   Typographical base
+   
+   Tiny Typo v1.0 | MIT License
+   (c) 2010-2013 tinytypo.tetue.net
+
+----------------------------------------------------- */
+html {
+  font-size: 100.01%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/
+et http://forum.alsacreations.com/topic-4-54377-1.html
+[en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */
+body {
+  font-size: 1em;
+  line-height: 1.5;
+}
+/* Titraille / Intertitres */
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  display: block;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  font-weight: normal;
+}
+h1,
+.h1 {
+  font-size: 2em;
+  line-height: 1.5;
+  margin-bottom: .75em;
+}
+h2,
+.h2 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+h3,
+.h3 {
+  font-size: 1.25em;
+  line-height: 1.2;
+  margin-bottom: 1.2em;
+}
+h4,
+.h4 {
+  font-size: 1.1em;
+  line-height: 1.364;
+  margin-bottom: 1.364em;
+}
+h5,
+.h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1.5em;
+}
+h6,
+.h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+h1 small,
+.h1 small,
+h2 small,
+.h2 small,
+h3 small,
+.h3 small,
+h4 small,
+.h4 small,
+h5 small,
+.h5 small,
+h6 small,
+.h6 small {
+  font-size: 60%;
+  line-height: 0;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+  margin: 1.5em 0;
+  border: solid;
+  border-width: 1px 0 0;
+}
+/* Typographical enhancements */
+em,
+i,
+.i {
+  font-style: italic;
+}
+strong,
+b,
+.b {
+  font-weight: bold;
+}
+mark,
+.mark {
+  background: #ff0;
+  color: #000;
+}
+.smaller {
+  font-size: 75%;
+}
+small,
+.small {
+  font-size: 80%;
+}
+big,
+.big {
+  font-size: 130%;
+}
+.bigger {
+  font-size: 175%;
+}
+.biggest {
+  font-size: 200%;
+}
+abbr[title],
+acronym[title] {
+  border-bottom: .1em dotted;
+  cursor: help;
+}
+@media print {
+  abbr[title] {
+    border-bottom: 0;
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+}
+dfn,
+.dfn {
+  font-weight: bold;
+  font-style: italic;
+}
+s,
+strike,
+del,
+.del {
+  opacity: .5;
+  text-decoration: line-through;
+}
+ins,
+.ins {
+  background-color: rgba(255, 255, 204, 0.5);
+  text-decoration: none;
+}
+u,
+.u {
+  text-decoration: underline;
+}
+sup,
+.sup,
+sub,
+.sub {
+  font-size: 80%;
+  font-variant: normal;
+  line-height: 0;
+}
+sup,
+.sup {
+  vertical-align: super;
+}
+.ie sup {
+  vertical-align: text-top;
+}
+sub,
+.sub {
+  vertical-align: sub;
+}
+.ie sub {
+  vertical-align: text-bottom;
+}
+.lead {
+  font-size: 120%;
+}
+.caps {
+  font-variant: small-caps;
+}
+.quiet {
+  color: #555555;
+}
+/* Alignment */
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.text-justify {
+  text-align: justify;
+  text-justify: newspaper;
+}
+/* Lists */
+ul {
+  list-style-type: disc;
+}
+ul ul {
+  list-style-type: circle;
+}
+ul ul ul {
+  list-style-type: square;
+}
+ol {
+  list-style-type: decimal;
+}
+ol ol {
+  list-style-type: lower-alpha;
+}
+ol ol ol {
+  list-style-type: lower-greek;
+}
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+ol,
+ul {
+  margin-left: 1.5em;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 1.5em;
+}
+.list-none {
+  margin-left: 0;
+  list-style: none;
+}
+.list-none li:before {
+  content: '';
+}
+.list-square {
+  margin-left: 1.5em;
+  list-style: square;
+}
+.list-square li:before {
+  content: '';
+}
+.list-disc {
+  margin-left: 1.5em;
+  list-style: disc;
+}
+.list-disc li:before {
+  content: '';
+}
+.list-circle {
+  margin-left: 1.5em;
+  list-style: circle;
+}
+.list-circle li:before {
+  content: '';
+}
+.list-decimal {
+  margin-left: 1.5em;
+  list-style: decimal;
+}
+.list-decimal li:before {
+  content: '';
+}
+.list-inline {
+  margin-left: 0;
+}
+.list-inline li {
+  display: inline-block;
+  margin: 0;
+  margin-right: 1em;
+}
+.list-inline li:Last-Child {
+  margin-right: 0;
+}
+.list-inline.list-inline-sep li {
+  margin-right: 0;
+}
+.list-inline.list-inline-sep li:after {
+  content: " | ";
+}
+.list-inline.list-inline-sep li:Last-Child:after {
+  content: '';
+}
+.list-inline.list-inline-dash li {
+  margin-right: 0;
+}
+.list-inline.list-inline-dash li:after {
+  content: " - ";
+}
+.list-inline.list-inline-dash li:Last-Child:after {
+  content: '';
+}
+.list-inline.list-inline-comma li {
+  margin-right: 0;
+}
+.list-inline.list-inline-comma li:after {
+  content: ", ";
+}
+.list-inline.list-inline-comma li:Last-Child:after {
+  content: ". ";
+}
+.list-block li {
+  display: block;
+  margin-right: 0;
+}
+/* Tables */
+table {
+  max-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.table {
+  width: 100%;
+}
+.table caption,
+.table th,
+.table td {
+  padding: 0.375em;
+}
+.table caption {
+  font-weight: bold;
+  text-align: left;
+  border-bottom: 2px solid;
+}
+.table th {
+  font-weight: bold;
+}
+.table th,
+.table td {
+  border-bottom: 1px solid;
+}
+.table thead th {
+  vertical-align: bottom;
+}
+.table tbody tr:hover td {
+  background-color: rgba(34, 34, 34, 0.050000000000000044);
+}
+.table tfoot {
+  font-style: italic;
+}
+.table tfoot td {
+  border-bottom: 0;
+  vertical-align: top;
+}
+@media (max-width: 640px) {
+  .table-responsive {
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    margin-bottom: 1.5em;
+  }
+  .table-responsive table {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .table-responsive thead,
+  .table-responsive tbody,
+  .table-responsive tfoot,
+  .table-responsive tr,
+  .table-responsive th,
+  .table-responsive td {
+    white-space: nowrap;
+  }
+}
+/* Quotes, code and poetry */
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(en) > q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(fr) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
+}
+:lang(es) > q {
+  quotes: "\00AB" "\00BB" "\201C" "\201D";
+}
+:lang(it) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
+}
+:lang(de) > q {
+  quotes: "\00BB" "\00AB" "\203A" "\2039";
+}
+:lang(no) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A";
+}
+/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+blockquote {
+  position: relative;
+  padding-left: 1.5em;
+  border: solid rgba(34, 34, 34, 0.19999999999999996);
+  border-width: 0 0 0 5px;
+}
+blockquote:before {
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "\00AB";
+  line-height: 0;
+  font-size: 10em;
+  color: rgba(34, 34, 34, 0.09999999999999998);
+}
+cite,
+.cite {
+  font-style: italic;
+}
+address {
+  font-style: italic;
+}
+pre,
+code,
+kbd,
+samp,
+var,
+tt {
+  font-family: monospace;
+  font-size: 1em;
+}
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+kbd {
+  white-space: nowrap;
+  padding: .1em .3em;
+  background-color: #eee;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
+  color: #333;
+}
+samp {
+  font-weight: bold;
+}
+var {
+  font-style: italic;
+}
+/* Box */
+.box {
+  display: block;
+  margin-bottom: 1.5em;
+  padding: 1.5em 1.5em;
+  padding-bottom: .1em;
+  border: 1px solid;
+}
+@media print {
+  .box {
+    border: 1px solid !important;
+  }
+}
+@media (min-width: 640px) {
+  .box.right {
+    width: 33%;
+    margin-left: 1.5em;
+  }
+  .box.left {
+    width: 33%;
+    margin-right: 1.5em;
+  }
+  .box.center {
+    width: 75%;
+  }
+}
+/* Paragraphs */
+p,
+.p,
+ul,
+ol,
+dl,
+dd,
+blockquote,
+address,
+pre,
+.table,
+fieldset {
+  margin-bottom: 1.5em;
+}
+/* Typography for small screens
+[fr] http://www.alsacreations.com/astuce/lire/1177 */
+@media (max-width: 640px) {
+  /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
+  img,
+  table,
+  td,
+  blockquote,
+  code,
+  pre,
+  textarea,
+  input,
+  iframe,
+  object,
+  embed,
+  video {
+    max-width: 100% !important;
+  }
+  /* gestion des mots longs */
+  textarea,
+  table,
+  td,
+  th,
+  pre,
+  code,
+  samp {
+    word-wrap: break-word;
+    /* cesure forcee */
+  }
+  pre,
+  code,
+  samp {
+    white-space: pre-line;
+    /* passage a la ligne specifique pour les elements a chasse fixe */
+  }
+}
+/* orientation iOS5 font-size fix */
+@media (orientation: landscape) and (max-device-width: 640px) {
+  html,
+  body {
+    -webkit-text-size-adjust: 100%;
+  }
+}
+/* Print styles from HTML5 Boilerplate
+Inlined to avoid required HTTP connection: h5bp.com/r */
+@media print {
+  pre,
+  blockquote {
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  @page  {
+    margin: 2cm .5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+/* --------------------------------------------------
+
+   Hyperlinks
+   
+   Tiny Typo v1.0 | MIT License
+   (c) 2010-2013 tinytypo.tetue.net
+
+----------------------------------------------------- */
+/* Hyperlinks
+[fr] Signalétique des hyperliens : http://letrainde13h37.fr/43/signaletique-hyperliens/ */
+a {
+  background: transparent;
+  color: inherit;
+}
+a:link {
+  transition: .5s;
+}
+a:visited {
+  color: inherit;
+}
+a:focus {
+  outline: thin dotted;
+  background: #222222 !important;
+  border-color: #222222 !important;
+  color: #f8f8f8 !important;
+  text-shadow: none;
+}
+a:hover {
+  outline: 0;
+  cursor: pointer;
+}
+a:active {
+  outline: 0;
+}
+/* a { outline: none; }
+[en] http://www.outlinenone.com
+[fr] http://www.outlinenone.fr
+*/
+a:after,
+a:before,
+a small {
+  font-size: 90%;
+  opacity: .9;
+}
+a[hreflang]:after {
+  content: "\0000a0[" attr(hreflang) "]";
+}
+/* External Links */
+a.external:after {
+  content: "\0000a0\279A";
+}
+a[hreflang].external:after {
+  content: "\0000a0[" attr(hreflang) "]\0000a0\279A";
+}
+/* mailto / tel */
+a.mailto:after {
+  content: "\0000a0\2709";
+}
+a.tel:after {
+  content: "\0000a0\2706";
+}
+/* Documents */
+a.download:after {
+  content: "\0000a0\21A7";
+}
+a[hreflang].download:after {
+  content: "\0000a0[" attr(hreflang) "]\0000a0\21A7";
+}
+a.audio:after {
+  content: "\0000a0\266B";
+}
+a[hreflang].audio:after {
+  content: "\0000a0[" attr(hreflang) "]\0000a0\266B";
+}
+/* Linked images */
+a img {
+  border: 0;
+}
+a:focus img,
+a:active img {
+  -moz-transform: translateY(1px);
+  -webkit-transform: translateY(1px);
+  -o-transform: translateY(1px);
+  -ms-transform: translate(1px);
+  transform: translateY(1px);
+}
+@media print {
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+  a:after {
+    content: '';
+  }
+  a[rel="external"]:after,
+  a.external:after {
+    content: " (" attr(href) ")";
+  }
+  .ir a:after,
+  a[href^="javascript:"]:after,
+  a[href^="#"]:after {
+    content: '';
+  }
+  /* Don't show links for images, or javascript/internal links */
+}
+/* --------------------------------------------------
+
+   Illustrations, images and albums
+   
+   Tiny Typo v1.0 | MIT License
+   (c) 2010-2013 tinytypo.tetue.net
+
+----------------------------------------------------- */
+/* Make images responsive by default */
+img,
+object,
+embed {
+  max-width: 100%;
+  height: auto;
+}
+object,
+embed {
+  height: 100%;
+}
+@media print {
+  img {
+    max-width: 100% !important;
+  }
+}
+/* Remove the gap between images, videos, audio and canvas
+and the bottom of their containers: h5bp.com/i/440 */
+audio,
+canvas,
+video,
+img {
+  vertical-align: middle;
+}
+/* Correct `inline-block` display not defined in IE 8/9 */
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+/* Prevent modern browsers from displaying `audio` without controls.
+Remove excess height in iOS 5 devices. */
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+img {
+  border: 0;
+}
+/* Bicubic resizing for non-native sized IMG:
+code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
+img {
+  -ms-interpolation-mode: bicubic;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+/* thumbnail */
+.thumb,
+.thumb.left {
+  margin: 0 10px 10px 0;
+}
+.thumb.right {
+  margin: 0 0 10px 10px;
+}
+/* style effects */
+img.round {
+  border-radius: 5px;
+}
+img.circle {
+  border-radius: 50%;
+}
+img.border {
+  padding: 4px;
+  background-color: #fff;
+  border: 1px solid #bbb;
+}
+img.shadow {
+  box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
+}
+/* figure */
+figure {
+  margin: 0;
+  margin-bottom: 0.75em;
+  text-align: center;
+}
+figure.center {
+  margin-bottom: 1.5em;
+}
+figure.left {
+  margin-right: 1.5em;
+}
+figure.right {
+  margin-left: 1.5em;
+}
+@media (max-width: 640px) {
+  figure {
+    margin-bottom: 1.5em;
+  }
+  figure.left {
+    float: none;
+    margin-right: 0;
+  }
+  figure.right {
+    float: none;
+    margin-left: 0;
+  }
+}
+/* album */
+.album {
+  margin-bottom: 1.5em;
+}
+.album ul {
+  overflow: hidden;
+  margin: 0;
+  list-style: none;
+}
+.album li {
+  float: left;
+  margin: 0;
+  margin: 0 10px 10px 0;
+}
+.album .thumb {
+  margin: 0;
+}
diff --git a/web/assets/css/typo.css b/web/assets/css/typo.css
new file mode 100644
index 0000000..fb0bc69
--- /dev/null
+++ b/web/assets/css/typo.css
@@ -0,0 +1,575 @@
+/* --------------------------------------------------
+
+   Typographical base
+   
+   Tiny Typo v1.0 | MIT License
+   (c) 2010-2013 tinytypo.tetue.net
+
+----------------------------------------------------- */
+html {
+  font-size: 100.01%;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+/* Cf.: http://www.pompage.net/pompe/definir-des-tailles-de-polices-en-CSS/
+et http://forum.alsacreations.com/topic-4-54377-1.html
+[en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */
+body {
+  font-size: 1em;
+  line-height: 1.5;
+}
+/* Titraille / Intertitres */
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  display: block;
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  font-weight: normal;
+}
+h1,
+.h1 {
+  font-size: 2em;
+  line-height: 1.5;
+  margin-bottom: .75em;
+}
+h2,
+.h2 {
+  font-size: 1.5em;
+  line-height: 1;
+  margin-bottom: 1em;
+}
+h3,
+.h3 {
+  font-size: 1.25em;
+  line-height: 1.2;
+  margin-bottom: 1.2em;
+}
+h4,
+.h4 {
+  font-size: 1.1em;
+  line-height: 1.364;
+  margin-bottom: 1.364em;
+}
+h5,
+.h5 {
+  font-size: 1em;
+  font-weight: bold;
+  margin-bottom: 1.5em;
+}
+h6,
+.h6 {
+  font-size: 1em;
+  font-weight: bold;
+}
+h1 small,
+.h1 small,
+h2 small,
+.h2 small,
+h3 small,
+.h3 small,
+h4 small,
+.h4 small,
+h5 small,
+.h5 small,
+h6 small,
+.h6 small {
+  font-size: 60%;
+  line-height: 0;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+  margin: 1.5em 0;
+  border: solid;
+  border-width: 1px 0 0;
+}
+/* Typographical enhancements */
+em,
+i,
+.i {
+  font-style: italic;
+}
+strong,
+b,
+.b {
+  font-weight: bold;
+}
+mark,
+.mark {
+  background: #ff0;
+  color: #000;
+}
+.smaller {
+  font-size: 75%;
+}
+small,
+.small {
+  font-size: 80%;
+}
+big,
+.big {
+  font-size: 130%;
+}
+.bigger {
+  font-size: 175%;
+}
+.biggest {
+  font-size: 200%;
+}
+abbr[title],
+acronym[title] {
+  border-bottom: .1em dotted;
+  cursor: help;
+}
+@media print {
+  abbr[title] {
+    border-bottom: 0;
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+}
+dfn,
+.dfn {
+  font-weight: bold;
+  font-style: italic;
+}
+s,
+strike,
+del,
+.del {
+  opacity: .5;
+  text-decoration: line-through;
+}
+ins,
+.ins {
+  background-color: rgba(255, 255, 204, 0.5);
+  text-decoration: none;
+}
+u,
+.u {
+  text-decoration: underline;
+}
+sup,
+.sup,
+sub,
+.sub {
+  font-size: 80%;
+  font-variant: normal;
+  line-height: 0;
+}
+sup,
+.sup {
+  vertical-align: super;
+}
+.ie sup {
+  vertical-align: text-top;
+}
+sub,
+.sub {
+  vertical-align: sub;
+}
+.ie sub {
+  vertical-align: text-bottom;
+}
+.lead {
+  font-size: 120%;
+}
+.caps {
+  font-variant: small-caps;
+}
+.quiet {
+  color: #555555;
+}
+/* Alignment */
+.text-left {
+  text-align: left;
+}
+.text-right {
+  text-align: right;
+}
+.text-center {
+  text-align: center;
+}
+.text-justify {
+  text-align: justify;
+  text-justify: newspaper;
+}
+/* Lists */
+ul {
+  list-style-type: disc;
+}
+ul ul {
+  list-style-type: circle;
+}
+ul ul ul {
+  list-style-type: square;
+}
+ol {
+  list-style-type: decimal;
+}
+ol ol {
+  list-style-type: lower-alpha;
+}
+ol ol ol {
+  list-style-type: lower-greek;
+}
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+ol,
+ul {
+  margin-left: 1.5em;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+}
+dt {
+  font-weight: bold;
+}
+dd {
+  margin-left: 1.5em;
+}
+.list-none {
+  margin-left: 0;
+  list-style: none;
+}
+.list-none li:before {
+  content: '';
+}
+.list-square {
+  margin-left: 1.5em;
+  list-style: square;
+}
+.list-square li:before {
+  content: '';
+}
+.list-disc {
+  margin-left: 1.5em;
+  list-style: disc;
+}
+.list-disc li:before {
+  content: '';
+}
+.list-circle {
+  margin-left: 1.5em;
+  list-style: circle;
+}
+.list-circle li:before {
+  content: '';
+}
+.list-decimal {
+  margin-left: 1.5em;
+  list-style: decimal;
+}
+.list-decimal li:before {
+  content: '';
+}
+.list-inline {
+  margin-left: 0;
+}
+.list-inline li {
+  display: inline-block;
+  margin: 0;
+  margin-right: 1em;
+}
+.list-inline li:Last-Child {
+  margin-right: 0;
+}
+.list-inline.list-inline-sep li {
+  margin-right: 0;
+}
+.list-inline.list-inline-sep li:after {
+  content: " | ";
+}
+.list-inline.list-inline-sep li:Last-Child:after {
+  content: '';
+}
+.list-inline.list-inline-dash li {
+  margin-right: 0;
+}
+.list-inline.list-inline-dash li:after {
+  content: " - ";
+}
+.list-inline.list-inline-dash li:Last-Child:after {
+  content: '';
+}
+.list-inline.list-inline-comma li {
+  margin-right: 0;
+}
+.list-inline.list-inline-comma li:after {
+  content: ", ";
+}
+.list-inline.list-inline-comma li:Last-Child:after {
+  content: ". ";
+}
+.list-block li {
+  display: block;
+  margin-right: 0;
+}
+/* Tables */
+table {
+  max-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+.table {
+  width: 100%;
+}
+.table caption,
+.table th,
+.table td {
+  padding: 0.375em;
+}
+.table caption {
+  font-weight: bold;
+  text-align: left;
+  border-bottom: 2px solid;
+}
+.table th {
+  font-weight: bold;
+}
+.table th,
+.table td {
+  border-bottom: 1px solid;
+}
+.table thead th {
+  vertical-align: bottom;
+}
+.table tbody tr:hover td {
+  background-color: rgba(34, 34, 34, 0.050000000000000044);
+}
+.table tfoot {
+  font-style: italic;
+}
+.table tfoot td {
+  border-bottom: 0;
+  vertical-align: top;
+}
+@media (max-width: 640px) {
+  .table-responsive {
+    width: 100%;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    margin-bottom: 1.5em;
+  }
+  .table-responsive table {
+    width: 100%;
+    margin-bottom: 0;
+  }
+  .table-responsive thead,
+  .table-responsive tbody,
+  .table-responsive tfoot,
+  .table-responsive tr,
+  .table-responsive th,
+  .table-responsive td {
+    white-space: nowrap;
+  }
+}
+/* Quotes, code and poetry */
+q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(en) > q {
+  quotes: "\201C" "\201D" "\2018" "\2019";
+}
+:lang(fr) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";
+}
+:lang(es) > q {
+  quotes: "\00AB" "\00BB" "\201C" "\201D";
+}
+:lang(it) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";
+}
+:lang(de) > q {
+  quotes: "\00BB" "\00AB" "\203A" "\2039";
+}
+:lang(no) > q {
+  quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A";
+}
+/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */
+q:before {
+  content: open-quote;
+}
+q:after {
+  content: close-quote;
+}
+blockquote {
+  position: relative;
+  padding-left: 1.5em;
+  border: solid rgba(34, 34, 34, 0.19999999999999996);
+  border-width: 0 0 0 5px;
+}
+blockquote:before {
+  z-index: -1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  content: "\00AB";
+  line-height: 0;
+  font-size: 10em;
+  color: rgba(34, 34, 34, 0.09999999999999998);
+}
+cite,
+.cite {
+  font-style: italic;
+}
+address {
+  font-style: italic;
+}
+pre,
+code,
+kbd,
+samp,
+var,
+tt {
+  font-family: monospace;
+  font-size: 1em;
+}
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+kbd {
+  white-space: nowrap;
+  padding: .1em .3em;
+  background-color: #eee;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
+  color: #333;
+}
+samp {
+  font-weight: bold;
+}
+var {
+  font-style: italic;
+}
+/* Box */
+.box {
+  display: block;
+  margin-bottom: 1.5em;
+  padding: 1.5em 1.5em;
+  padding-bottom: .1em;
+  border: 1px solid;
+}
+@media print {
+  .box {
+    border: 1px solid !important;
+  }
+}
+@media (min-width: 640px) {
+  .box.right {
+    width: 33%;
+    margin-left: 1.5em;
+  }
+  .box.left {
+    width: 33%;
+    margin-right: 1.5em;
+  }
+  .box.center {
+    width: 75%;
+  }
+}
+/* Paragraphs */
+p,
+.p,
+ul,
+ol,
+dl,
+dd,
+blockquote,
+address,
+pre,
+.table,
+fieldset {
+  margin-bottom: 1.5em;
+}
+/* Typography for small screens
+[fr] http://www.alsacreations.com/astuce/lire/1177 */
+@media (max-width: 640px) {
+  /* fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
+  img,
+  table,
+  td,
+  blockquote,
+  code,
+  pre,
+  textarea,
+  input,
+  iframe,
+  object,
+  embed,
+  video {
+    max-width: 100% !important;
+  }
+  /* gestion des mots longs */
+  textarea,
+  table,
+  td,
+  th,
+  pre,
+  code,
+  samp {
+    word-wrap: break-word;
+    /* cesure forcee */
+  }
+  pre,
+  code,
+  samp {
+    white-space: pre-line;
+    /* passage a la ligne specifique pour les elements a chasse fixe */
+  }
+}
+/* orientation iOS5 font-size fix */
+@media (orientation: landscape) and (max-device-width: 640px) {
+  html,
+  body {
+    -webkit-text-size-adjust: 100%;
+  }
+}
+/* Print styles from HTML5 Boilerplate
+Inlined to avoid required HTTP connection: h5bp.com/r */
+@media print {
+  pre,
+  blockquote {
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+  @page  {
+    margin: 2cm .5cm;
+  }
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}