Index: themes/ductile/mediaqueries.css
===================================================================
--- themes/ductile/mediaqueries.css	(revision 367)
+++ themes/ductile/mediaqueries.css	(revision 386)
@@ -2,15 +2,18 @@
 
 /* seuils retenus :
-480px
-640px
-1024px
-1280px
------------------ */
-
+jusqu'à 480px: tout en une colonne, sidebar et stickers en bas
+480px: stickers en haut
+640px: sidebar toujours en bas mais divisé en deux colonnes
+1024px: passage à deux colonnes, sidebar à droite
+1280px: décalage du post-info vers la gauche
+1600px: marges plus grandes */
+
+/* --------------------------------------------------------------------
+	Téléphones (moins de 480px)
+-------------------------------------------------------------------- */
 @media only screen and (max-width:480px) {
 	#prelude, #blogdesc, #supranav span {
 		display: none !important;
 		}
-
 	h1 {
 		font-size: 1.8em;
@@ -25,5 +28,4 @@
 		border-bottom: 1px solid #ccc;
 		}
-
 	#supranav {
 		border:none;
@@ -36,9 +38,7 @@
 		border-bottom: 1px solid #ccc;
 		}
-
 	h2.post-title {
-		font-size: 2.5em;
-		}
-
+		font-size: 2em;
+		}
 	#stickers {
 		margin: 0;
@@ -52,6 +52,6 @@
 		padding-left: 0;
 		border: 2px solid #fff;
-		border-left: 8px solid #fff;
-		border-right: 8px solid #fff;
+		border-left: 6px solid #fff;
+		border-right: 6px solid #fff;
 		}
 	#stickers img {
@@ -67,4 +67,8 @@
 		}
 }
+
+/* --------------------------------------------------------------------
+	Autres (plus de 480px)
+-------------------------------------------------------------------- */
 
 @media only screen and (min-width: 481px) {
@@ -78,5 +82,4 @@
 		margin-left: 32px;
 		}
-
 	#supranav {
 		margin: 36px 0 0;
@@ -95,5 +98,4 @@
 		display: block;
 		}
-
 	#stickers {
 		position: absolute;
@@ -113,5 +115,5 @@
 		}
 	h2.post-title {
-		font-size: 2.8em;
+		font-size: 2.6em;
 		}
 	#stickers li a:hover,
@@ -123,6 +125,14 @@
 }
 
+/* ------------------------------------------------------ special redimensionnement paysage */
+@media screen and (max-width:640px) and (orientation: landscape) { 
+  body { 
+   -webkit-text-size-adjust: 70%; 
+  } 
+}
+
+/* ------------------------------------------------------ règles communes > 640px */
 @media only screen and (max-width:639px) {
-	html {
+	body {
 		-webkit-text-size-adjust: none;
 		}
@@ -137,4 +147,5 @@
 }
 
+/* ------------------------------------------------------ spécifique 640px à 1024px */
 @media only screen and (min-width: 640px) and (max-width: 1023px) {
 	#wrapper {
@@ -152,4 +163,5 @@
 }
 
+/* ------------------------------------------------------ spécifique 840px à 1024px */
 @media only screen and (min-width: 840px) and (max-width: 1023px) {
 	#wrapper {
@@ -161,4 +173,7 @@
 }
 
+/* ------------------------------------------------------ 
+	au-delà de 1024px on passe à deux colonnes
+------------------------------------------------------ */
 @media only screen and (min-width: 1024px) {
 	#wrapper {
@@ -167,14 +182,14 @@
 	#main {
 		width : 100%;
-		margin : 0 -22% 0 0;
+		margin : 0 -17em 0 0;
 		float : left;
 		display: inline;
 		}
 	#content {
-		margin : 0 30% 0 0;
+		margin : 0 20em 0 0;
 		padding : 0 0 2em 0;
 		}
 	#sidebar {
-		width : 22%;
+		width : 17em;
 		float : right;
 		}
@@ -185,5 +200,4 @@
 		padding-right: 7%;
 		}
-
 	#sidebar #blognav div:first-child {
 		margin-top: 4.66em;
@@ -205,12 +219,15 @@
 		color: #666;
 		}
-	#sidebar div#search p {
+	#sidebar div#search:first-child p {
 		margin: .33em 0;
 		}
 }
 
+/* ------------------------------------------------------ 
+	au-delà de 1280px on décale le post-info à gauche
+------------------------------------------------------- */
 @media only screen and (min-width: 1280px) {
 	#content {
-		margin : 0 30% 0 200px;
+		margin : 0 20em 0 200px;
 		}
 	p.post-info { 
@@ -228,10 +245,11 @@
 }
 
+/* ------------------------------------------------------ au-delà de 1600px */
 @media only screen and (min-width: 1600px) {
 	#wrapper {
-		padding: 0 12%;
-		}
-	#stickers {
-		padding-right: 12%;
-		}
-}
+		padding: 0 10%;
+		}
+	#stickers {
+		padding-right: 10%;
+		}
+}
Index: themes/ductile/style.css
===================================================================
--- themes/ductile/style.css	(revision 360)
+++ themes/ductile/style.css	(revision 386)
@@ -25,4 +25,5 @@
 Liens: #666 courant, #ad3f4c titre billet et Lire la suite
 Fond formulaire comm: #eef
+Fond sidebar: #ededed
 
 Thanks to:
@@ -89,4 +90,5 @@
 h1 a {
 	text-decoration: none;
+	color: #333;
 	}
 #prelude {
@@ -104,5 +106,5 @@
 #prelude a, #prelude a:hover, #prelude a:visited {
 	position:absolute;
-	left:0px;
+	left:0;
 	top:-500px;
 	width:1px;
@@ -123,4 +125,5 @@
 	}
 #supranav {
+	font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
 	padding: 0 0 0 4px;
 	list-style-type: none;
@@ -129,5 +132,4 @@
 	}
 #supranav li {
-	font-family: "Franklin gothic medium","arial narrow","DejaVu Sans Condensed","helvetica neue",helvetica,sans-serif;
 	text-transform: uppercase;
 	vertical-align: top;
@@ -547,5 +549,5 @@
 #blognav > div, 
 #blogextra > div {
-	background: #f3f2e9;
+	background: #ededed;
 	margin-bottom: 1em;
 	padding: 4px 8px;
