--- a/integration/css/style.css	Tue Oct 23 18:40:16 2012 +0200
+++ b/integration/css/style.css	Wed Oct 24 14:49:53 2012 +0200
@@ -1,26 +1,33 @@
 /* fonts */
 @font-face {
-	font-family: 'OpenSans-Regular';
+	font-family: 'OpenSans';
+	font-weight: 400;
 	src: url('fonts/OpenSans-Regular.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Light';
+	font-family: 'OpenSans';
+	font-weight: 300;
 	src: url('fonts/OpenSans-Light.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Bold';
+	font-family: 'OpenSans';
+	font-weight: bold;
 	src: url('fonts/OpenSans-Bold.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Italic';
+	font-family: 'OpenSans';
+	font-style: italic;
 	src: url('fonts/OpenSans-Italic.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-Semibold';
+	font-family: 'OpenSans';
+	font-weight: 600;
 	src: url('fonts/OpenSans-Semibold.ttf');
 }
 @font-face {
-	font-family: 'OpenSans-SemiboldItalic';
+	font-family: 'OpenSans';
+	font-weight: 600px;
+	font-style: italic;
 	src: url('fonts/OpenSans-SemiboldItalic.ttf');
 }
 body{
@@ -36,7 +43,8 @@
 	background-color: #FFF;
 	width: 960px;
 	margin: 0 auto;
-	font-family: 'OpenSans-Regular';
+	font-family: 'OpenSans';
+	font-weight: 400;
 	color:#333333;
 	font-size: 13px;
   	height: 100%;
@@ -70,10 +78,10 @@
 	padding-top: 6px;
 }
 div.header h1 a span{
- 	font-family: 'OpenSans-Light';
  	font-size: 20px;
  	text-align: center;
  	padding: 0px 0 0 6px;
+ 	font-weight: 300;
 }
 div.header div.title-video-wrap{
 	width: 460px;
@@ -83,7 +91,7 @@
 	top: 10px;
 	left: 0;
 	font-size: 18px;
-	font-family: 'OpenSans-Bold';
+	font-weight: bold;
 	color: #30036d;
 	text-decoration: underline;
 	background-image: url(../img/pencil-icon.png);
@@ -146,7 +154,8 @@
 	background: url(../img/bg-previsualiser.png) repeat-x 0 0;
 	line-height: 35px;
 	font-size: 16px;
-	font-family: 'OpenSans-SemiboldItalic';
+	font-weight: 600px;
+	font-style: italic;
 }
 div.col-middle-header a{
 	color: #30036d;
@@ -247,6 +256,12 @@
 
 /******* bloc ******/
 div.bloc-pvw{
+
+}
+div.bloc-segmentation{
+	display: none;
+}
+div.bloc-vide{
 	display: none;
 }
 
@@ -263,7 +278,7 @@
 }
 div.popin.segmentation h2{
 	font-size: 14px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	color:#de2500;
 	margin-bottom: 10px;
 }
@@ -286,7 +301,7 @@
 div.popin.segmentation form label{
 	display: block;
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	margin-bottom: 4px;
 }
 div.popin.segmentation form textarea{
@@ -307,7 +322,7 @@
 div.bloc-segmentation div.existant h2{
 	color: #30036d;
 	font-size: 14px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	padding-left: 8px;
 	margin-bottom: 8px;
 }
@@ -352,7 +367,33 @@
 
 
 
+div.bloc-vide{
 
+}
+div.bloc-vide div.tutorial{
+	padding: 0 10px;
+	color: #FFF;
+	font-weight: 600;
+	height: 316px;
+	background: url(../img/visuel-player-bar.jpg) 0 276px no-repeat #333333;
+}
+div.bloc-vide div.tutorial h2{
+	padding-top: 16px;
+	font-size: 18px;
+	margin-bottom: 20px;
+}
+div.bloc-vide div.tutorial ol{
+	padding-left: 22px;
+}
+div.bloc-vide div.tutorial ol li:first-child{
+	width: 324px;
+}
+div.bloc-vide div.tutorial ol li{
+	list-style: decimal;
+	font-size: 14px;
+	margin-bottom: 16px;
+	padding-left: 20px;
+}
 
 
 
@@ -374,7 +415,7 @@
 	margin-bottom: 12px;
 	color: #30036d;
 	font-size: 16px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 }
 div.col-left form input[type=text]{
 	width: 206px;
@@ -392,11 +433,11 @@
 }
 div.col-left form input[type=text]::-webkit-input-placeholder{
 	color: #b48aed;
-	font-family: 'OpenSans-Italic';
+	font-style: italic;
 }
 div.col-left form input[type=text]:-moz-placeholder { 
 	color: #b48aed;
-	font-family: 'OpenSans-Italic';
+	font-style: italic;
 }
 div.col-left form input[type=submit]{
 	position: absolute;
@@ -427,7 +468,7 @@
 div.col-right div.liste-segment h2{
  	text-align: right;
  	color: #30036D;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	font-size: 16px;
 	margin-bottom: 12px;
 	padding-top: 8px;
@@ -526,7 +567,7 @@
 div.user.popin.info div.popin-content h2{
 	color: #7628df;
 	font-size: 18px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	margin-bottom: 2px;
 }
 div.user.popin.info div.popin-content h3{
@@ -610,7 +651,6 @@
 div.popin.segmentation form input[type=submit],
 div.popin.segment-section a.reprendre-segment{
 	margin-top: 2px;
-	font-family: 'OpenSans-Regular';
 	display: block;
 	font-size: 12px;
 	border: 0;
@@ -669,14 +709,14 @@
 div.frise-description.popin h2{
 	color: #de2500;
 	font-size: 14px;
-	font-family: 'OpenSans-Bold';
+	font-weight: bold;
 }
 div.frise-description.popin table{
 	font-size: 12px;
 }
 div.frise-description.popin table th{
 	text-align: left;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 	min-width: 75px;
 }
@@ -762,7 +802,7 @@
 }
 ul.list-video li a span.video-info span.title-video{
 	font-size: 13px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	color: #30036d;
 	display: block;
 	margin-bottom: 1px;
@@ -774,7 +814,7 @@
 }
 ul.list-video li a span.video-info span.time-lenght{
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 }
 ul.list-video li a span.video-info span.time-lenght span{
@@ -805,7 +845,7 @@
 ul.list-video li span.duration{
 	color: #7628df;
 	font-size: 12px;
-	font-family: 'OpenSans-Semibold';
+	font-weight: 600;
 	display: block;
 
 }
@@ -838,3 +878,122 @@
 div.footer ul.links-right li img {
     vertical-align: middle;
 }
+
+/* home */
+div.header div.title-header{
+	width: 460px;
+	float: left;
+	height: 60px;
+}
+div.header div.title-header h2{
+	width: 100%;
+	text-align: center;
+	line-height: 60px;
+}
+div.header div.title-header h2 a{
+	color: #de2500;
+	font-size: 24px;
+	text-decoration: underline;
+	font-weight: bold;
+}
+div.header div.title-header h2 a:hover{
+	text-decoration: none;
+}
+div.content div.left-content, div.content div.right-content{
+	padding-top: 8px;
+	float: left;
+}
+div.content div.left-content h2,
+div.content div.right-content h2{
+	padding: 6px 0;
+	margin-bottom: 14px;
+	border-bottom: 1px solid #333333;
+	color: #30036d;
+	font-size: 18px;
+	font-weight: 600;
+}
+/* left-content */
+div.content div.left-content{
+	width: 630px;
+	margin-right: 20px;
+}
+div.left-content div.hashcut-video-wrap{
+	padding-left: 10px;
+	overflow: hidden;
+	margin-bottom: 16px;
+}
+div.hashcut-video-wrap div.news{
+	width: 300px;
+	float: left;
+	margin-right: 20px;
+}
+div.hashcut-video-wrap div.news:nth-child(2n+2){
+	margin-right: 0;
+}
+div.hashcut-video-wrap  h3{
+	font-size: 12px;
+}
+div.hashcut-video-wrap  h3 strong{
+	font-weight: 600;
+}
+div.hashcut-video-wrap  div.last h3 strong{
+	margin-bottom: 2px;
+	font-weight: 600;
+	display: block;
+}
+div.left-content div.hashcut-video-wrap h3 a{
+	border-bottom: 1px solid #bababa;
+	display: inline-block;
+    line-height: 12px;
+}
+div.left-content  div.hashcut-video-wrap  h3 a:hover{
+	border-bottom: none;
+}
+div.hashcut-video-wrap  h3 span{
+	color: #de2500;
+}
+div.hashcut-video-wrap  a.screenshot{
+	display: inline-block;
+	margin-bottom: 8px;
+}
+div.hashcut-video-wrap  div.last:nth-child(4n+4){
+	margin-right: 0;
+}
+div.hashcut-video-wrap  div.last{
+	width: 140px;
+	float: left;
+	margin: 0 20px 12px 0;
+}
+div.left-content div.pagination{
+	text-align: center;
+}
+div.left-content div.pagination a{
+	font-size: 14px;
+	color: #7628df;
+	text-decoration: underline;
+}
+div.left-content div.pagination a:hover{
+	text-decoration: none;
+}
+div.left-content div.pagination a.active{
+	color: #de2500;
+	text-decoration: none;
+}
+/* right-content */
+div.content div.right-content{
+	width: 310px;
+}
+div.right-content div.definition p{
+	font-size: 12px;
+	line-height: 14px;
+}
+div.right-content div.definition p strong{
+	font-weight: bold;
+}
+div.right-content div.definition p a{
+	color: #7628df;
+	text-decoration: underline;
+}
+div.right-content div.definition p a:hover{
+	text-decoration: none;
+}
\ No newline at end of file

--- a/integration/edition.html	Tue Oct 23 18:40:16 2012 +0200
+++ b/integration/edition.html	Wed Oct 24 14:49:53 2012 +0200
@@ -164,6 +164,7 @@
                 </div><!-- col-left -->
 
                 <div class="col-middle">
+
                     <div class="bloc-segmentation">
                         <div class="col-middle-header disable">
                             <a href="#" class="segmenter ">Segmenter <em>La cuisine du Popcorn</em></a>
@@ -171,7 +172,7 @@
                         </div>
                         <div class="video">
                             <a class="publier-button" title="Publier" href="#"></a>
-                            <img src="img/visuel-player.png" alt="" />
+                            <img src="img/visuel-player.jpg" alt="" />
                         </div>
                         <div class="segment">
                             <img src="img/visuel-segment.png" alt="">
@@ -241,7 +242,7 @@
                         </div>
                         <div class="video">
                             <a class="publier-button" title="Publier" href="#"></a>
-                            <img src="img/visuel-player.png" alt="" />
+                            <img src="img/visuel-player.jpg" alt="" />
                         </div>
 
                         <div class="frise clearfix">
@@ -294,6 +295,25 @@
                     </div><!-- bloc-pvw -->
 
 
+                    <div class="bloc-vide">
+                        <div class="col-middle-header disable">
+                            <a href="#" class="segmenter disable">Segmenter</a>
+                            <a href="#" class="previsualiser disable">Prévisualiser</a>
+                        </div>
+                        <div class="video">
+                            <div class="tutorial">
+                                <h2>Créer un Hashcut, c’est facile !</h2>
+                                <ol>
+                                    <li>Commencez par choisir une vidéo dans le volet de gauche</li>
+                                    <li>Créez un segment dans la vidéo et profitez-en pour annoter votre segment</li>
+                                    <li>Ajoutez votre segment à la liste, réorganisez les segments entre eux</li>
+                                    <li>Rajoutez quelques commentaires à votre Hashcut. Vous êtes prêts à publier !</li>
+                                </ol>
+                            </div>
+                            <a class="publier-button" title="Publier" href="#"></a>
+                        </div>
+                    </div><!-- bloc-vide -->
+
                 </div><!-- col-middle -->
 
                 <div class="col-right">
@@ -377,8 +397,8 @@
                     <li><a title="cinecast" href="http://cinecast.fr/"><img src="img/logo-cinecast.png" alt="cinecast" /></a></li>
                     <li>© 2012</li>
                 </ul>
-            </div>
-        </div>
+            </div><!-- footer -->
+        </div><!-- wrap -->
         <!-- JavaScript -->
         <script src="js/vendor/jquery-1.8.0.min.js"></script>
         <script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>