diff --git a/css/comic.css b/css/comic.css
index 56e3639841863881ecca07f488ee55a2eb503f05..30ab5ff8f3c2ad819da0f59d88bbcf07bddd27a5 100644
--- a/css/comic.css
+++ b/css/comic.css
@@ -220,4 +220,8 @@ footer p {
 
 #fish img {
     width: 100%;
+}
+
+#exemple-carrousel {
+    max-width: 700px;
 }
\ No newline at end of file
diff --git a/gabarit.html b/gabarit.html
index 84779d1554250bd090adb174a9202546ed812a7a..7c822fea279607d76a58060a16ecea5f5800e73c 100644
--- a/gabarit.html
+++ b/gabarit.html
@@ -14,8 +14,11 @@
     - Portraits ronds avec descriptifs
     - Photo légendée
     - Vidéo HTML5 légendée
-    - Galerie de photos https://juicebox.net/
+    - Carrousel de photos
     - Tournoi https://brackethq.com
+
+Quasiment tout les éléments sont tirés de la doc Bootstrap!
+https://getbootstrap.com/docs/4.5/getting-started/introduction/
  -->
 
 
@@ -266,6 +269,40 @@ implicite. -->
     <!-- /.row -->
   </section>
 
+  <!-- Carrousel -->
+  <section class="section-paire">
+    <div id="exemple-carrousel" class="container-fluid text-center">
+      <div class="row justify-content-center">
+        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
+          <ol class="carousel-indicators">
+            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+          </ol>
+          <div class="carousel-inner">
+            <div class="carousel-item active">
+              <img src="ressources/espadon.jpeg" class="d-block w-100" alt="Brochet">
+            </div>
+            <div class="carousel-item">
+              <img src="ressources/daurade.jpeg" class="d-block w-100" alt="Daurade">
+            </div>
+            <div class="carousel-item">
+              <img src="ressources/brochet-2.jpeg" class="d-block w-100" alt="Espadon">
+            </div>
+          </div>
+          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">Previous</span>
+          </a>
+          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">Next</span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </section>
+
   <!-- Bas-de-page -->
   <footer class="py-5">
     <div class="container text-center">
diff --git a/ressources/brochet-2.jpeg b/ressources/brochet-2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..3c5dea79214fe6480167e85dd14a9d2b10f95310
Binary files /dev/null and b/ressources/brochet-2.jpeg differ
diff --git a/ressources/daurade.jpeg b/ressources/daurade.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..16473193247351e735bef1faca65a9b397681801
Binary files /dev/null and b/ressources/daurade.jpeg differ
diff --git a/ressources/espadon.jpeg b/ressources/espadon.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..4d8aed7c406f769c686322ab36958e6b0d0eeb3c
Binary files /dev/null and b/ressources/espadon.jpeg differ