# HG changeset patch
# User veltr
# Date 1358849714 -3600
# Node ID fde72f8d0ed0a8a138fbc40a19180196a4885139
# Parent  873b0e9ff7f6f8e6ec328895b0a8eda556c729f6
Updated Mode d emploi and URLs

diff -r 873b0e9ff7f6 -r fde72f8d0ed0 integration/css/theend.css
--- a/integration/css/theend.css	Mon Jan 21 21:05:32 2013 +0100
+++ b/integration/css/theend.css	Tue Jan 22 11:15:14 2013 +0100
@@ -551,37 +551,37 @@
 }
 
 .lightBox {
-    position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+    position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%; color: #FFFFFF;
 }
 
 .lightBoxScroll {
-    position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+    position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: auto;
 }
 
 .lightBox h3 {
-    color: #FFFFFF; font-family: "arial_black", sans-serif;
-    font-size: 18px; text-align: center; margin: 3px 0;
+    font-family: "arial_black", sans-serif;
+    font-size: 24px; text-align: center; margin: 3px 0;
 }
 
 a.lightBoxClose {
-    float: right; font-size: 24px; color: #ACACAC;
-    font-family: "arial_black", sans-serif;
+    float: right; font-size: 30px; color: #ACACAC;
+    font-weight: bold;
 }
 
 a.lightBoxClose:hover {
     color: #FFFFFF;
 }
 
-.lightBoxScroll {
-    color: #ACACAC;
-}
-
 .lightBoxScroll p {
-    font-size: 14px; margin: 0 0 1.5em; line-height: 16px;
+    font-size: 14px; margin: 14px 20px 14px 0; line-height: 21px;
 }
 
 .lightBoxScroll h4 {
-    font-size: 14px; font-weight: bold; margin: 0 0 0.5em;
+    font-size: 18px; font-family: "arial_black", sans-serif; margin: 18px 0;
+}
+
+.grey {
+    color: #9B9A9A;
 }
 
 /* METANAV COMPENSATION */
diff -r 873b0e9ff7f6 -r fde72f8d0ed0 integration/home.html
--- a/integration/home.html	Mon Jan 21 21:05:32 2013 +0100
+++ b/integration/home.html	Tue Jan 22 11:15:14 2013 +0100
@@ -49,10 +49,14 @@
             <div class="lightBoxBg"></div>
             <div class="lightBox">
                 <a href="#" class="lightBoxClose">&times;</a>
-                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <h3>
+                    THE END, ETC.
+                    <br />
+                    de Laetitia Masson.
+                </h3>
                 <div class="lightBoxScroll">
                     <p>
-                        À l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
+                        À l’aube d’une nouvelle ère numérique, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement&nbsp;: politique, humain, amoureux…
                         <br />
                         Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.
                     </p>
@@ -73,7 +77,7 @@
                     <p>
                         Une expérience de cinéma qui débute par trois clics.
                         <br />
-                        Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. 
+                        Le principe est simple&nbsp;: trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film «&nbsp;The End, etc.&nbsp;» Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. 
                         <br />
                         Vous pouvez recommencer à l’infini. 
                         <br />
@@ -90,8 +94,8 @@
                     <p>
                         Un espace transitoire vous permet de naviguer entre ces différents niveaux et de partager votre film sur les réseaux sociaux.
                     </p>
-                    <p>
-                        Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. 
+                    <p class="grey">
+                        Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. «&nbsp;THE END, ETC.&nbsp;» nécessite une connexion internet haut-débit pour une utilisation idéale. 
                         <br />
                         Préférez les navigateurs Safari ou Chrome.
                     </p>
diff -r 873b0e9ff7f6 -r fde72f8d0ed0 src/theend/static/theend/css/theend.css
--- a/src/theend/static/theend/css/theend.css	Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/static/theend/css/theend.css	Tue Jan 22 11:15:14 2013 +0100
@@ -551,37 +551,37 @@
 }
 
 .lightBox {
-    position: absolute; top: 120px; left: 120px; right: 120px; bottom: 120px;
+    position: absolute; top: 15%; left: 15%; right: 15%; bottom: 15%; color: #FFFFFF;
 }
 
 .lightBoxScroll {
-    position: absolute; top: 30px; left: 0; right: 0; bottom: 0; overflow: auto;
+    position: absolute; top: 60px; left: 0; right: 0; bottom: 0; overflow: auto;
 }
 
 .lightBox h3 {
-    color: #FFFFFF; font-family: "arial_black", sans-serif;
-    font-size: 18px; text-align: center; margin: 3px 0;
+    font-family: "arial_black", sans-serif;
+    font-size: 24px; text-align: center; margin: 3px 0;
 }
 
 a.lightBoxClose {
-    float: right; font-size: 24px; color: #ACACAC;
-    font-family: "arial_black", sans-serif;
+    float: right; font-size: 30px; color: #ACACAC;
+    font-weight: bold;
 }
 
 a.lightBoxClose:hover {
     color: #FFFFFF;
 }
 
-.lightBoxScroll {
-    color: #ACACAC;
-}
-
 .lightBoxScroll p {
-    font-size: 14px; margin: 0 0 1.5em; line-height: 16px;
+    font-size: 14px; margin: 14px 20px 14px 0; line-height: 21px;
 }
 
 .lightBoxScroll h4 {
-    font-size: 14px; font-weight: bold; margin: 0 0 0.5em;
+    font-size: 18px; font-family: "arial_black", sans-serif; margin: 18px 0;
+}
+
+.grey {
+    color: #9B9A9A;
 }
 
 /* METANAV COMPENSATION */
diff -r 873b0e9ff7f6 -r fde72f8d0ed0 src/theend/templates/theend/home.html
--- a/src/theend/templates/theend/home.html	Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/templates/theend/home.html	Tue Jan 22 11:15:14 2013 +0100
@@ -44,7 +44,7 @@
 {% block main_content %}
         <header class="home_header">
             <a id="btnInfo" class="btn" href="#" title="Mode d’emploi"></a>
-            <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
+            <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition-the-end-etc.html" title="Retour au menu principal"></a>
             <form id="form_tag">
                 <input type="search" name="tag" placeholder="Rechercher" />
             </form>
@@ -63,10 +63,14 @@
             <div class="lightBoxBg"></div>
             <div class="lightBox">
                 <a href="#" class="lightBoxClose">&times;</a>
-                <h3>THE END, ETC. de Laetitia Masson.</h3>
+                <h3>
+                    THE END, ETC.
+                    <br />
+                    de Laetitia Masson.
+                </h3>
                 <div class="lightBoxScroll">
                     <p>
-                        À l’aube d’une nouvelle ère digitale, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement : politique, humain, amoureux…
+                        À l’aube d’une nouvelle ère numérique, Laetitia Masson a choisi de questionner nos sociétés à travers le prisme de l’engagement et du désengagement&nbsp;: politique, humain, amoureux…
                         <br />
                         Autant de points de vue pour saisir l’ampleur d’un phénomène global et intemporel.
                     </p>
@@ -87,7 +91,7 @@
                     <p>
                         Une expérience de cinéma qui débute par trois clics.
                         <br />
-                        Le principe est simple : trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film « The End, etc. » Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. 
+                        Le principe est simple&nbsp;: trois écrans successifs, vous choisissez un mot par écran, le site assemble votre film «&nbsp;The End, etc.&nbsp;» Et cætera, parce que ce n’est qu’un début. Chaque combinaison assemble un film différent, de 5 à 15 minutes. 
                         <br />
                         Vous pouvez recommencer à l’infini. 
                         <br />
@@ -104,8 +108,8 @@
                     <p>
                         Un espace transitoire vous permet de naviguer entre ces différents niveaux et de partager votre film sur les réseaux sociaux.
                     </p>
-                    <p>
-                        Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. « THE END, ETC. » nécessite une connexion internet haut-débit pour une utilisation idéale. 
+                    <p class="grey">
+                        Ce site proposé en HTML5 nécessite une mise à jour de votre navigateur dans sa dernière version. Cette technologie vous permet de profiter d’une expérience optimale sur PC mais également sur tablette. «&nbsp;THE END, ETC.&nbsp;» nécessite une connexion internet haut-débit pour une utilisation idéale. 
                         <br />
                         Préférez les navigateurs Safari ou Chrome.
                     </p>
diff -r 873b0e9ff7f6 -r fde72f8d0ed0 src/theend/templates/theend/tag.html
--- a/src/theend/templates/theend/tag.html	Mon Jan 21 21:05:32 2013 +0100
+++ b/src/theend/templates/theend/tag.html	Tue Jan 22 11:15:14 2013 +0100
@@ -101,7 +101,7 @@
                 <a id="btnFwd" class="btn txt_hidden" href="#" title="Segment suivant"></a>
     {% endblock %}
     
-                <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition.html" title="Retour au menu principal"></a>
+                <a id="btnChoice" class="btn" href="{{ BASE_URL }}transition-the-end-etc.html" title="Retour au menu principal"></a>
             </section>
             <!-- /Controlbar container -->
         </footer>
diff -r 873b0e9ff7f6 -r fde72f8d0ed0 web/transition-the-end-etc.html
--- a/web/transition-the-end-etc.html	Mon Jan 21 21:05:32 2013 +0100
+++ b/web/transition-the-end-etc.html	Tue Jan 22 11:15:14 2013 +0100
@@ -54,7 +54,7 @@
 						<p><a href="partage-du-film-aleatoire-the-end-etc.html">Partagez</a></p>
 						<p><a href="choix-de-mots-the-end-etc.html">Recommencez</a></p>
 						<p class="margin_exeptionTop"><a href="the-end-etc.html">The end, etc.</a></p>
-						<p class="margin_exeptionBottom"><a href="experience-the-end-etc.html">Prolongez l'expérience</a></p>
+						<p class="margin_exeptionBottom"><a href="theend/prolonger">Prolongez l'expérience</a></p>
 						<p><a href="credits-the-end-etc.html">Crédits</a></p>
 					</div>
 				</div>