diff --git a/src/org/april/libreencadeau/website/charter/charter.html b/src/org/april/libreencadeau/website/charter/charter.html
index 24f960c..a4862bb 100644
--- a/src/org/april/libreencadeau/website/charter/charter.html
+++ b/src/org/april/libreencadeau/website/charter/charter.html
@@ -12,7 +12,7 @@
 <body id="charter">
     <div id="header_container">
         <div id="logo_zone">
-            <a href="/"><img src="/charter/libreencadeau-logo.png"/></a>
+            <a href="/"><img src="/charter/logo-cadal-48x.png"/></a>
         </div>
         <div id="title">LibreEnCadeau</div>
     </div>
diff --git a/src/org/april/libreencadeau/website/charter/charter2.html b/src/org/april/libreencadeau/website/charter/charter2.html
index a06350e..f4d20f7 100644
--- a/src/org/april/libreencadeau/website/charter/charter2.html
+++ b/src/org/april/libreencadeau/website/charter/charter2.html
@@ -6,13 +6,14 @@
 	<meta charset="UTF-8" />
 	<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 	<link rel="stylesheet" type="text/css" href="/charter/kiss4web.css" />
-	<link rel="stylesheet" type="text/css" href="/charter/libreencadeau.css" />
+	<link rel="stylesheet" media="screen and (min-width: 1000px)" type="text/css" href="/charter/libreencadeau.css" />
+<link rel="stylesheet" media="screen and (max-width: 1000px)" type="text/css" href="/charter/libreencadeau-small.css" /> 
 	<meta name="keywords" content="LibreEnCadeau" />
 </head>
 <body id="charter">
     <div id="header_container">
         <div id="logo_zone">
-            <a href="/"><img src="/charter/logo_cadal_48.jpg"/></a>
+            <a href="/"><img src="/charter/logo-cadal-48x.png"/></a>
         </div>
         <div id="title">CADAL</div>
     </div>
@@ -24,7 +25,7 @@
             Content…
         </div>
     </div>
-    <div id="basic_menu">
+    <div id="footer_menu">
     <table width="100%" >
 	<col width="64*"></col>
 	<col width="64*"></col>
diff --git a/src/org/april/libreencadeau/website/charter/libreencadeau-logo.png b/src/org/april/libreencadeau/website/charter/libreencadeau-logo.png
deleted file mode 100644
index 1b138cb..0000000
Binary files a/src/org/april/libreencadeau/website/charter/libreencadeau-logo.png and /dev/null differ
diff --git a/src/org/april/libreencadeau/website/charter/libreencadeau-small.css b/src/org/april/libreencadeau/website/charter/libreencadeau-small.css
new file mode 100644
index 0000000..30b07cd
--- /dev/null
+++ b/src/org/april/libreencadeau/website/charter/libreencadeau-small.css
@@ -0,0 +1,190 @@
+/**************** GENERIC PAGE CHARTER ****************/
+* {
+    margin: 0px;
+    padding: 0px;
+    color: #2e2d30;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+p
+{
+    margin-bottom: 10px;
+    margin-top: 10px;
+}
+
+hr
+{
+    border:dashed #CCC 1px;
+    border-bottom:0px;
+    border-left:0px;
+    width:100%;
+    margin: 10px 2px;
+    padding: 0px 5px;
+}
+
+
+ul, ol 
+{
+    margin-left:30px;
+}
+
+/***** CHARTER *****/
+#charter
+{
+    width: 100%;
+    font-size: 13px;
+}
+
+/***** CHARTER HEADER *****/
+#charter #header_container
+{
+    margin: 0px;
+    height: 100px;
+    width: 670px;
+    margin: 0 auto;
+    position: relative;
+    border: 1px solid blue;
+}
+
+#charter #header_container #logo_zone
+{
+    position: absolute;
+    top: 5px;
+    width: 320px;
+    height: 100px;
+    color: white;
+    background-repeat: no-repeat;
+    display: inline;
+    float: left;
+}
+
+#charter #header_container #logo_zone img
+{
+    border: 0px none white;
+}
+
+#charter #header_container #title
+{
+	position: relative;
+    top: 7px;
+    left: 55px;
+    font-size: 50px;
+}
+
+#header_container{
+	background-color:#90ee90;
+}
+/***** CHARTER BODY *****/
+#charter #body_container
+{
+    position: relative;
+    margin: 10px auto 10px auto;
+    width: 670px;
+    height: 100px;
+    min-height: 520px;
+}
+
+/***** CHARTER MENU *****/
+#charter #body_container #menu_container
+{
+    padding: 30px 10px 0 0;
+}
+
+.submenu
+{
+    margin: 10px 10px 10px 10px;
+    width: 160px;
+    background-color: #ECECEC;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 50px;
+}
+
+.submenu a.active {
+    color:white;
+    text-decoration:none;
+    background-color:#333;
+}
+
+.submenu a {
+    color:#333;
+    padding:3px;
+    display:block;
+    text-decoration:none;
+}
+
+.submenu a:hover {
+    color:white;
+    text-decoration:none;
+    background-color:#333;
+}
+
+.submenu ul {
+    margin-left:0px;
+}
+
+.submenu li {
+    list-style-type:none;
+}
+
+.submenu_content {
+    margin-left: 50px;
+    width: 650px;
+}
+
+
+/***** CHARTER CONTENT *****/
+#charter #body_container #content_container
+{
+    margin: 10px auto 20px auto;
+    width: 750px;
+    border: 0px none lightgreen;
+}
+#basic_menu
+{
+	margin: 0 ;
+	position: relative;
+	height : 40px;
+	width: 970px;
+	margin: 0 auto;
+	clear: both;
+}
+
+/***** CHARTER FOOTER *****/
+#charter #footer_container
+{
+    margin: 0;
+    position: relative;
+    width:970px;
+    margin:0 auto;
+    clear: both;
+    height: auto;
+    border: 1px solid red;
+}
+
+/*********************/
+table.table_classic
+{
+    border:0px;
+    width:100%;
+    margin: 5px;
+    border-collapse: collapse;
+}
+
+table.table_classic > tr > th,
+table.table_classic > thead > tr > th
+{
+    background-color:#ECECEC;
+    border:1px solid #DCDCDC;
+    margin: 5px;
+    padding: 5px;
+}
+
+table.table_classic > tr > td,
+table.table_classic > tbody > tr > td,
+table.table_classic > tfoot > tr > td
+{
+    border:1px solid #ECECEC;
+    margin: 5px;
+    padding: 5px;
+}
diff --git a/src/org/april/libreencadeau/website/charter/libreencadeau.css b/src/org/april/libreencadeau/website/charter/libreencadeau.css
index 2238fb0..f5f403e 100644
--- a/src/org/april/libreencadeau/website/charter/libreencadeau.css
+++ b/src/org/april/libreencadeau/website/charter/libreencadeau.css
@@ -140,7 +140,11 @@ ul, ol
     width: 750px;
     border: 0px none lightgreen;
 }
-#basic_menu{
+
+
+/***** CHARTER FOOTER *****/
+#footer_menu
+{
 	margin: 0 ;
 	position: relative;
 	height : 40px;
@@ -148,8 +152,6 @@ ul, ol
 	margin: 0 auto;
 	clear: both;
 }
-
-/***** CHARTER FOOTER *****/
 #charter #footer_container
 {
     margin: 0;
diff --git a/src/org/april/libreencadeau/website/charter/logo-cadal-48x.png b/src/org/april/libreencadeau/website/charter/logo-cadal-48x.png
new file mode 100644
index 0000000..167e7f1
Binary files /dev/null and b/src/org/april/libreencadeau/website/charter/logo-cadal-48x.png differ
diff --git a/src/org/april/libreencadeau/website/charter/logo_cadal_48.jpg b/src/org/april/libreencadeau/website/charter/logo_cadal_48.jpg
deleted file mode 100644
index 1b1124d..0000000
Binary files a/src/org/april/libreencadeau/website/charter/logo_cadal_48.jpg and /dev/null differ
