diff --git a/app/assets/javascripts/public.js.coffee b/app/assets/javascripts/public.js.coffee
index 7131599..4df1deb 100644
--- a/app/assets/javascripts/public.js.coffee
+++ b/app/assets/javascripts/public.js.coffee
@@ -46,6 +46,51 @@ $("document").ready ->
     
   
   
+  $("#video").click ->
+    maxwidth = 1000
+    maxheight = 900
+
+    
+    
+    
+    prev_link = $(this)
+    $("body").append "<div id='large'></div>"
+    title = false
+    
+    
+    
+    $("#large").append "<div class='img_container first' style='width:90%;margin:auto;'></div>"
+    $(".img_container.first").append '<iframe width="1000" height="563" src="//www.youtube.com/embed/ED4b38n4d-U?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>'
+    
+    
+    $(".img_container.first").append "<h3>Vidéo de présentation</h3>"
+      
+    
+    $("#large").fadeIn(500)
+    position_img();
+    if $(window).height() > (maxheight+100)
+      $("#large .large-img").css
+        "max-height" : maxheight
+    else
+      $("#large .large-img").css
+        "max-height" : "85%"
+        
+    if $(window).width() > (maxwidth+100)
+      $("#large .large-img").css
+        "max-width" : maxwidth
+    else
+      $("#large .large-img").css
+        "max-width" : "85%"
+    resize();
+    
+    $("#large .img_container.first").css
+      "padding-top": (($(window).height()- $("#large .img_container.first iframe").height()-50)/ 2)+"px"
+    #position_img();
+    
+    
+    false
+  
+  
   $(".expandable_image").click ->
     maxwidth = 1000
     maxheight = 900
diff --git a/app/assets/javascripts/redactor_plugins/fontfamily.js b/app/assets/javascripts/redactor_plugins/fontfamily.js
index 17004e0..5e42671 100755
--- a/app/assets/javascripts/redactor_plugins/fontfamily.js
+++ b/app/assets/javascripts/redactor_plugins/fontfamily.js
@@ -5,7 +5,7 @@ RedactorPlugins.fontfamily = function()
 	return {
 		init: function ()
 		{
-			var fonts = [ 'Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace' ];
+			var fonts = [ 'Lato', 'Stylograph','Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'Monospace' ];
 			var that = this;
 			var dropdown = {};
 
diff --git a/app/assets/stylesheets/public.scss b/app/assets/stylesheets/public.scss
index cd83f0e..7a58c4c 100644
--- a/app/assets/stylesheets/public.scss
+++ b/app/assets/stylesheets/public.scss
@@ -404,6 +404,8 @@ background:rgba(230,0,125,1);
 text-align:center;
 }
 
+
+
 .beton{
   
   border-left:17px solid #333333;
@@ -415,7 +417,11 @@ text-align:center;
 h1,h2,h3,h4{
   text-align:left;
 font-weight: 400;
-text-transform:uppercase;
+
+}
+h1{
+  
+  text-transform:uppercase;
 }
 
 
@@ -434,7 +440,7 @@ text-transform:uppercase;
   box-shadow:0 0 15px rgba(0,0,0,0.8);
   background-image:url("/fond-beton-5.jpg");
   color:#E6E6E6;
-  margin-top:100px;
+  margin-top:120px;
 }
 .infos{
   position:relative;
@@ -495,4 +501,12 @@ text-transform:uppercase;
   padding:8px;
   
 }
+
+.cristal-protect .main.principal{
+  background:url("/fond-ligne.png")  no-repeat;
+  background-size:contain;
+  
+  
+  
+}
    
\ No newline at end of file
diff --git a/app/views/layouts/public.html.haml b/app/views/layouts/public.html.haml
index 4a4fb0d..45dd930 100644
--- a/app/views/layouts/public.html.haml
+++ b/app/views/layouts/public.html.haml
@@ -15,7 +15,7 @@
     = csrf_meta_tag 
     
     = stylesheet_link_tag 'public' 
-
+    = stylesheet_link_tag '/fonts/Stylograph/stylesheet.css' 
     <script src="//use.typekit.net/twa3qoy.js"></script>
     <script>try{Typekit.load();}catch(e){}</script>
     
@@ -90,11 +90,27 @@
             -description = menu_item.menu_content.description if menu_item.menu_content and menu_item.menu_content_type == "Page"
             =link_to raw("<h4>#{menu_item.name}</h4>"),menu_item_path(:url => menu_item.url), :class => ("active" if @menu_item and (@menu_item == menu_item or @menu_item.ancestors.include?(menu_item)))
     #corps{:class => (@menu_item.slug if @menu_item)}
-      .main=yield
-    
+      .main.principal{:style => "position:relative;"}
+        =yield
+      
+        -if @menu_item and @menu_item.slug == "index"
+          <p style="text-align: right;-webkit-transform: rotate(-8deg);margin-top:4em;margin-bottom:-3em;">
+          <span style="font-size: 16px;" data-redactor-tag="span">
+          <span style="font-family: Stylograph;"><span style="font-size: 24px;">Notre ambition 
+          ? Concrétiser vos idées...
+          </span></span>
+          </span>
+          </p>
+        
+        -if @menu_item and @menu_item.slug == "index"
+          =link_to image_tag("/video.png", :style => "width:150px;position:absolute;bottom:-60px;right:10px;"),"#", :id => "video"
+      
+      
       .bottom
         .infos
-          .main
+          
+          .main{:style => ""}
+            
             .address
               
               %h4 Cris Graphic
diff --git a/public/bottom.png b/public/bottom.png
index e0b82ee..56efa95 100644
Binary files a/public/bottom.png and b/public/bottom.png differ
diff --git a/public/fond-ligne.jpg b/public/fond-ligne.jpg
new file mode 100644
index 0000000..05f96e4
Binary files /dev/null and b/public/fond-ligne.jpg differ
diff --git a/public/fond-ligne.png b/public/fond-ligne.png
new file mode 100644
index 0000000..a886fec
Binary files /dev/null and b/public/fond-ligne.png differ
diff --git a/public/fonts/Stylograph/styl-webfont.eot b/public/fonts/Stylograph/styl-webfont.eot
new file mode 100755
index 0000000..2153d79
Binary files /dev/null and b/public/fonts/Stylograph/styl-webfont.eot differ
diff --git a/public/fonts/Stylograph/styl-webfont.ttf b/public/fonts/Stylograph/styl-webfont.ttf
new file mode 100755
index 0000000..1047cc0
Binary files /dev/null and b/public/fonts/Stylograph/styl-webfont.ttf differ
diff --git a/public/fonts/Stylograph/styl-webfont.woff b/public/fonts/Stylograph/styl-webfont.woff
new file mode 100755
index 0000000..93211e3
Binary files /dev/null and b/public/fonts/Stylograph/styl-webfont.woff differ
diff --git a/public/fonts/Stylograph/stylesheet.css b/public/fonts/Stylograph/stylesheet.css
new file mode 100755
index 0000000..bbba1aa
--- /dev/null
+++ b/public/fonts/Stylograph/stylesheet.css
@@ -0,0 +1,14 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 28, 2013 */
+
+
+
+@font-face {
+    font-family: 'Stylograph';
+    src: url('styl-webfont.eot');
+    src: url('styl-webfont.eot?#iefix') format('embedded-opentype'),
+         url('styl-webfont.woff') format('woff'),
+         url('styl-webfont.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+
+}
\ No newline at end of file
diff --git a/public/video.png b/public/video.png
new file mode 100644
index 0000000..0addbc3
Binary files /dev/null and b/public/video.png differ