diff --git a/assets/images/icons/circle-play.svg b/assets/images/icons/circle-play.svg
new file mode 100644
index 0000000..3aefb67
--- /dev/null
+++ b/assets/images/icons/circle-play.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"/></svg>
\ No newline at end of file
diff --git a/assets/sass/adhesion.scss b/assets/sass/adhesion.scss
index ef91329..d3071c8 100644
--- a/assets/sass/adhesion.scss
+++ b/assets/sass/adhesion.scss
@@ -1,153 +1,179 @@
-
 .adhesion-body {
     overflow: hidden !important;
     height: 100%;
-}
 
-.root {
-    overflow: hidden;
-    height: 100%;
-
-    
-  display: flex;
-  flex-direction: column;
-
-
-}
-
-.adhesion-container {
-    background-color: black;
-    width: 100%;
-    flex-grow: 1;
-    // height: 100%;
-    // min-height: 100%;
-    // height: 90vh;
-
-    .video-presentation {
+    .root {
+        overflow: hidden;
         height: 100%;
-        iframe {
-            width: 100%;
+
+        display: flex;
+        flex-direction: column;
+    }
+
+    .adhesion-container {
+        background: radial-gradient(circle, rgba(0,0,0,0.6) 0%, darken($background, 15%) 100%);
+
+        width: 100%;
+        flex-grow: 1;
+
+        .video-presentation {
             height: 100%;
-        }
-    }
-
-}
-
-.adhesion {
-
-}
-
-.adhesion-footer {
-    width: 100%;
-    height: auto;
-    padding: 1rem 0;
-
-    background-color: $background;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.adhesion-btns {
-    display: flex;
-    justify-content: space-between;
-}
-
-.btn {
-    background-color: white;
-    opacity: 0.8;
-    transition: 0.2s all;
-
-    .btn__icon {
-        margin-right: 1rem;
-        width: 2rem;
-        height: 2rem;
-    }
-
-    &:hover {
-        opacity: 1;
-    }
-}
-
-.subscribe-button {
-    text-transform: uppercase;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 35px;
-    color: black;
-    text-decoration: none;
-    padding: .7rem 2rem;
-}
-
-.socials {
-
-    display: flex;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-        background-color: white;
-        border-radius: 50%;
-
-        width: 3rem;
-        height: 3rem;
-        margin-right: 1rem;
-
-        &:last-of-type {
-            margin-right: 0;
-        }
-        a { 
-            display: block;
-            width: 100%;
-            height: 100%;
-            text-transform: uppercase;
-
-            svg {
-                display: block;
-                padding: .7rem;
-                fill: black;
+            iframe {
                 width: 100%;
                 height: 100%;
             }
         }
 
     }
-}
 
-// @media (min-height: 800px) and (max-height: 900px) {
-//     .body {
-//         display: none;
-//     }
-//     .adhesion-container {
-//         height: 76vh !important;
-//     }
-//     .adhesion-footer {
-//         height: 100% !important;
-//     }
-// }
+    .video-presentation-cover {
+        position: relative;
 
-@media (max-width: $mobile-breakpoint) {
-    .adhesion-footer {
-        height: auto;
-    }
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
 
-    .adhesion-footer {
-        .subscribe-button {
-            margin-bottom: 1rem;
+        button {
+            width: 6rem;
+            background: transparent;
+            border: none;
+            border-radius: 50%;
+            cursor: pointer;
+
+            .btn-icon {
+                fill: white;
+            }
         }
-        .adhesion-btns {
-            flex-direction: column;
-        }
-        .socials {
+
+        .video-cover__back {
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background-color: $background;
+            position: absolute;
+            bottom: 0;
+
+            display: flex;
             justify-content: center;
+            align-items: center;
+            overflow: hidden;
+
+            .back-icon {
+                width: 50%;
+                fill: white;
+                opacity: 0.6;
+                position: relative;
+                top: 0rem;
+            }
+        }
+    }
+
+    .video-cover__content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        padding: 3rem;
+
+        color: white;
+        cursor: pointer;
+    }
+
+    .adhesion-footer {
+        width: 100%;
+        height: auto;
+        padding: 1rem 0;
+
+        background-color: $background;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .adhesion-btns {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .btn {
+        background-color: white;
+        opacity: 0.8;
+        transition: 0.2s all;
+
+        .btn__icon {
+            margin-right: 1rem;
+            width: 2rem;
+            height: 2rem;
+        }
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .subscribe-button {
+        text-transform: uppercase;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 35px;
+        color: black;
+        text-decoration: none;
+        padding: .7rem 2rem;
+    }
+
+    .socials {
+        display: flex;
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+
+        li {
+            background-color: white;
+            border-radius: 50%;
+
+            width: 3rem;
+            height: 3rem;
+            margin-right: 1rem;
+
+            &:last-of-type {
+                margin-right: 0;
+            }
+            a { 
+                display: block;
+                width: 100%;
+                height: 100%;
+                text-transform: uppercase;
+
+                svg {
+                    display: block;
+                    padding: .7rem;
+                    fill: black;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+
+        }
+    }
+
+    @media (max-width: $mobile-breakpoint) {
+        .adhesion-footer {
+            height: auto;
+        }
+
+        .adhesion-footer {
+            .subscribe-button {
+                margin-bottom: 1rem;
+            }
+            .adhesion-btns {
+                flex-direction: column;
+            }
+            .socials {
+                justify-content: center;
+            }
         }
     }
 }
 
-// @media (max-width: $xs-breakpoint) {
-//     .adhesion-container {
-//         height: 80vh;
-//     }
-// }
diff --git a/content/adhesion/_index.md b/content/adhesion/_index.md
index f2182d4..0dead49 100644
--- a/content/adhesion/_index.md
+++ b/content/adhesion/_index.md
@@ -1,10 +1,12 @@
 ---
-title: "Campagne d'adhésion l'Étoile de Bethléem - 2023-2024"
+title: "Campagne d'adhésion 2023-2024"
 with_header: false
 with_footer: false
 body_class: "adhesion-body"
 with_normal_config: false
-description: Adhérez et soutenez nous !
+description: Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
 featured_image:
     src: ./images/default_logo.png
 ---
+
+Découvrez la campagne d'adhésion 2023-2024 de l'association des Amis de la Chapelle de Bethléem à Aubevoye.
diff --git a/layouts/adhesion/list.html b/layouts/adhesion/list.html
index 8e1270a..503f864 100644
--- a/layouts/adhesion/list.html
+++ b/layouts/adhesion/list.html
@@ -1,22 +1,25 @@
 {{ define "main" }}
 <div class="root">
     <div class="adhesion-container">
-        <div class="video-presentation">
-        <!--     <!-1- <iframe -1-> -->
-        <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
-        <!--     <!-1-     width="100%" height="950" -1-> -->
-        <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
-        <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
-        <!--     <!-1- </iframe> -1-> -->
-        <iframe
-            width="100%"
-            src="https://www.youtube.com/embed/vJeEqDfz_4c"
-            title="YouTube video player"
-            frameborder="0"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowfullscreen
-        ></iframe>
-
+        <div class="video-presentation video-presentation-cover" id="video-cover">
+            <div class="video-cover__back">
+                {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent" "class" "back-icon") }}
+                <!-- {{ partial "helpers/svg" (dict "path" "all_logos/horizontal_white_transparent" "class" "back-icon") }} -->
+            </div>
+            <div id="video-play-btn" class="video-cover__content">
+                <button>
+                    {{ partial "helpers/svg" (dict "path" "icons/circle-play" "class" "btn-icon") }}
+                </button>
+                <p>Regarder le teaser</p>
+            </div>
+        </div>
+        <div class="video-presentation final-video-presentation" style="display: none;" id="final-video-container">
+            <!--     <!-1- <iframe -1-> -->
+            <!--     <!-1-     title="Campagne d'adhésion 2023-2024 - L'étoile de Bethléem" -1-> -->
+            <!--     <!-1-     width="100%" height="950" -1-> -->
+            <!--     <!-1-     src="https://peertube.iriseden.eu/videos/embed/575e83c9-2dd5-464c-a31e-c2aae1bfd48b?p2p=0" -1-> -->
+            <!--     <!-1-     frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"> -1-> -->
+            <!--     <!-1- </iframe> -1-> -->
         </div>
     </div>
     <div class="adhesion-footer">
@@ -57,5 +60,28 @@
 
 </div>
 
+
+<script>
+
+    let iframe_html = `<iframe
+                width="100%"
+                src="https://www.youtube.com/embed/vJeEqDfz_4c?autoplay=1"
+                title="YouTube video player"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen
+            ></iframe>`;
+
+    let btn = document.getElementById("video-play-btn")
+    const video_cover = document.getElementById("video-cover")
+
+    const final_video_container = document.getElementById("final-video-container")
+    btn.onclick = () => {
+        video_cover.style.display = "none"
+        final_video_container.innerHTML = iframe_html
+        final_video_container.style.display = "block"
+    }
+
+</script>
 {{ end }}
 
diff --git a/layouts/countdown/list.html b/layouts/countdown/list.html
index c682e8d..ad6b234 100644
--- a/layouts/countdown/list.html
+++ b/layouts/countdown/list.html
@@ -4,7 +4,7 @@
     </div>
 
     <div class="launch-logo-back">
-    {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}
+        {{ partial "helpers/svg" (dict "path" "all_logos/square_notext_white_transparent") }}
     </div>
     <div class="h-100">
         <div class="countdown-page__content__container">