diff --git a/css/comic.css b/css/comic.css
index e32b02d53b719289a2279a4c80c044117cb64d3b..dac38c9d96d0482ac77b918f51a189a75ef34d7a 100644
--- a/css/comic.css
+++ b/css/comic.css
@@ -45,4 +45,9 @@
 #lecteur-vidéo {
     padding-top: 2rem;
     padding-bottom: 1rem;
-}
\ No newline at end of file
+}
+
+#vidéo video {
+    width: 100%;
+    max-width: 720px;
+}
diff --git a/index.html b/index.html
index f6655a4f42dafaebb29f03b011f3460a69307da3..3a1c2943d900296a3f85fd8dd888e4e5c1169b89 100644
--- a/index.html
+++ b/index.html
@@ -100,7 +100,7 @@ implicite. -->
     <div class="container-fluid text-center">
       <div class="row justify-content-sm-center">
         <div class="col-sm-11" id="lecteur-vidéo">
-        <video width="720" controls>
+        <video controls>
           <source src="ressources/présentation-pinep-2018-2019.mp4" type="video/mp4">
         </video>
         </div>
@@ -110,38 +110,6 @@ implicite. -->
 
   <section id="services">
     <!-- TODO: Ajouter des imagettes et des texte descriptifs de nos différents services -->
-    
-  </section>
-
-  <div class="container">
-
-    <div class="row">
-      <div class="col-md-8 mb-5">
-        <h2>What We Do</h2>
-        <hr>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat explicabo, maiores!</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.</p>
-        <a class="btn btn-primary btn-lg" href="#">Call to Action &raquo;</a>
-      </div>
-      <div class="col-md-4 mb-5">
-        <h2>Contact Us</h2>
-        <hr>
-        <address>
-          <strong>Start Bootstrap</strong>
-          <br>3481 Melrose Place
-          <br>Beverly Hills, CA 90210
-          <br>
-        </address>
-        <address>
-          <abbr title="Phone">P:</abbr>
-          (123) 456-7890
-          <br>
-          <abbr title="Email">E:</abbr>
-          <a href="mailto:#">name@example.com</a>
-        </address>
-      </div>
-    </div>
-    <!-- /.row -->
 
     <div class="row">
       <div class="col-md-4 mb-5">
@@ -183,6 +151,37 @@ implicite. -->
     </div>
     <!-- /.row -->
 
+  </section>
+
+  <div class="container">
+
+    <div class="row">
+      <div class="col-md-8 mb-5">
+        <h2>What We Do</h2>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deserunt neque tempore recusandae animi soluta quasi? Asperiores rem dolore eaque vel, porro, soluta unde debitis aliquam laboriosam. Repellat explicabo, maiores!</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis optio neque consectetur consequatur magni in nisi, natus beatae quidem quam odit commodi ducimus totam eum, alias, adipisci nesciunt voluptate. Voluptatum.</p>
+        <a class="btn btn-primary btn-lg" href="#">Call to Action &raquo;</a>
+      </div>
+      <div class="col-md-4 mb-5">
+        <h2>Contact Us</h2>
+        <hr>
+        <address>
+          <strong>Start Bootstrap</strong>
+          <br>3481 Melrose Place
+          <br>Beverly Hills, CA 90210
+          <br>
+        </address>
+        <address>
+          <abbr title="Phone">P:</abbr>
+          (123) 456-7890
+          <br>
+          <abbr title="Email">E:</abbr>
+          <a href="mailto:#">name@example.com</a>
+        </address>
+      </div>
+    </div>
+    <!-- /.row -->
   </div>
   <!-- /.container -->