banner on mobile

assets/css/base/_body.scss

@@ -33,3 +33,10 @@ body{
     overflow-x: hidden;
 }
 
+// main{
+//     overflow-x: hidden;
+// }
+
+img{
+    max-width: 100%;
+}

assets/css/base/_var.scss

@@ -2,13 +2,13 @@
   --font: 'Executive', Arial, sans-serif;
   --title: 'System', Arial, sans-serif;
 
-  // --fs-x-small: 10px;
+  // --fs-xsmall: 10px;
   // --fs-small: 12px;
   // --fs-normal: 16px;
   // --fs-medium: 22px;
   // --fs-big: 38px;
 
-  --fs-x-small: 10px;
+  --fs-xsmall: 10px;
   --fs-small: 12px;
   --fs-normal: 16px;
   --fs-medium: 20px;
@@ -24,7 +24,7 @@
     --fs-big: 26px;
   }
 
-  --leading-tight: 1;
+  --leading-tight: 1.05;
   --leading-normal: 1.2;
   // --leading-relaxed: 1.4;
   // --leading-loose: 1.8;
@@ -58,6 +58,7 @@
   --header-h: 80px;
   --header-h-shrinked: 50px;
   --menu-w: 420px;
+  --banner-medium: 220px;
 
   
 
@@ -77,12 +78,12 @@
 
 @media #{$small}{ 
   :root {
-    --fs-x-small: 10px;
+    --fs-xsmall: 10px;
     --fs-small: 11px;
     --fs-normal: 14px;
-    --fs-medium: 20px;
+    --fs-medium: 18px;
-    --fs-big: 30px;
+    --fs-big: 28px;
-    --fs-x-big: 38px;
+    --fs-xbig: 32px;
 
     --header-h: 60px;
   }

assets/css/components/_buttons.scss

@@ -75,6 +75,10 @@ button:disabled{
   
 }
 
+.btn--bold-inline{
+    background-color: var(--color-bg);
+}
+
 .btn--bold-inline:hover{
     background-color: var(--grey-800);
     color: var(--color-txt);

assets/css/components/_form-newsletter.scss

@@ -33,14 +33,14 @@
       
     }
 
-    button[type="submit"].btn--bold{
+    button[type="submit"].btn--newletter{
         position: absolute;
         right: 2px;
         z-index: 100;
     }
 
 
-    button[type="submit"].btn--bold {
+    button[type="submit"].btn--newletter {
 
     
         --size: calc(var(--h-block)*1.25 - 4px);

assets/css/components/_modal-share.scss

@@ -120,16 +120,3 @@
 }
 
 
-// Action
-
-#share-banner{ display: none; }
-#share-banner ~ .modal--share{
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .2s ease-in;
-}
-
-#share-banner:checked ~ .modal--share{
-    opacity: 1;
-    pointer-events: auto;
-}

assets/css/partials/_site-footer.scss

@@ -24,7 +24,7 @@
    }
 
    .p__small{
-    font-size: var(--fs-x-small);
+    font-size: var(--fs-xsmall);
     color: var(--grey-600);
    }
 

assets/css/style.css

@@ -2,7 +2,7 @@
 :root {
   --font: "Executive", Arial, sans-serif;
   --title: "System", Arial, sans-serif;
-  --fs-x-small: 10px;
+  --fs-xsmall: 10px;
   --fs-small: 12px;
   --fs-normal: 16px;
   --fs-medium: 20px;
@@ -10,7 +10,7 @@
   --fs-xbig: 38px;
   --fs-button-bold: 22px;
   --max-w-content: 700px;
-  --leading-tight: 1;
+  --leading-tight: 1.05;
   --leading-normal: 1.2;
   --fw-normal: 400;
   --fw-medium: 500;
@@ -33,6 +33,7 @@
   --header-h: 80px;
   --header-h-shrinked: 50px;
   --menu-w: 420px;
+  --banner-medium: 220px;
   --padding-body: 26px;
   --padding-inner: 14px;
   --radius-small: 4px;
@@ -50,12 +51,12 @@
 
 @media screen and (max-width: 768px) {
   :root {
-    --fs-x-small: 10px;
+    --fs-xsmall: 10px;
     --fs-small: 11px;
     --fs-normal: 14px;
-    --fs-medium: 20px;
+    --fs-medium: 18px;
-    --fs-big: 30px;
+    --fs-big: 28px;
-    --fs-x-big: 38px;
+    --fs-xbig: 32px;
     --header-h: 60px;
   }
 }
@@ -94,6 +95,10 @@ body {
   overflow-x: hidden;
 }
 
+img {
+  max-width: 100%;
+}
+
 @keyframes add-border {
   from {
     border-bottom-color: transparent;
@@ -243,6 +248,10 @@ button:disabled {
   color: var(--color-bg);
 }
 
+.btn--bold-inline {
+  background-color: var(--color-bg);
+}
+
 .btn--bold-inline:hover {
   background-color: var(--grey-800);
   color: var(--color-txt);
@@ -370,12 +379,12 @@ button:disabled {
 .form__newsletter input[type=email]:focus {
   outline: 3px solid var(--grey-400);
 }
-.form__newsletter button[type=submit].btn--bold {
+.form__newsletter button[type=submit].btn--newletter {
   position: absolute;
   right: 2px;
   z-index: 100;
 }
-.form__newsletter button[type=submit].btn--bold {
+.form__newsletter button[type=submit].btn--newletter {
   --size: calc(var(--h-block)*1.25 - 4px);
   font-family: var(--font);
   font-size: var(--fs-button-bold);
@@ -388,10 +397,10 @@ button:disabled {
   text-decoration: none;
   cursor: pointer;
 }
-.form__newsletter button[type=submit].btn--bold .icon, .form__newsletter button[type=submit].btn--bold .txt {
+.form__newsletter button[type=submit].btn--newletter .icon, .form__newsletter button[type=submit].btn--newletter .txt {
   z-index: 10;
 }
-.form__newsletter button[type=submit].btn--bold .icon {
+.form__newsletter button[type=submit].btn--newletter .icon {
   width: var(--size);
   height: var(--size);
   display: flex;
@@ -400,18 +409,18 @@ button:disabled {
   color: var(--color-bg);
   text-align: center;
 }
-.form__newsletter button[type=submit].btn--bold .icon svg {
+.form__newsletter button[type=submit].btn--newletter .icon svg {
   fill: var(--color-bg);
   width: 80%;
 }
-.form__newsletter button[type=submit].btn--bold .txt {
+.form__newsletter button[type=submit].btn--newletter .txt {
   position: relative;
   top: 2px;
   font-size: var(--fs-normal);
   display: none;
   padding-left: 1ch;
 }
-.form__newsletter button[type=submit].btn--bold::after {
+.form__newsletter button[type=submit].btn--newletter::after {
   content: "";
   display: block;
   background-color: var(--color-accent);
@@ -423,11 +432,11 @@ button:disabled {
   z-index: 0;
   transition: width 0.2s;
 }
-.form__newsletter button[type=submit].btn--bold:hover .txt {
+.form__newsletter button[type=submit].btn--newletter:hover .txt {
   color: var(--color-bg);
   display: block;
 }
-.form__newsletter button[type=submit].btn--bold:hover::after {
+.form__newsletter button[type=submit].btn--newletter:hover::after {
   width: 100%;
 }
 
@@ -582,21 +591,6 @@ button:disabled {
   background-color: var(--color-accent);
 }
 
-#share-banner {
-  display: none;
-}
-
-#share-banner ~ .modal--share {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-in;
-}
-
-#share-banner:checked ~ .modal--share {
-  opacity: 1;
-  pointer-events: auto;
-}
-
 [data-template=subscription-newsletter] .p__baseline-big,
 [data-template=thanks] .p__baseline-big,
 [data-template=support] .p__baseline-big,
@@ -881,7 +875,7 @@ body.menu-open #menu-toggle .close {
   color: currentColor;
 }
 #site-footer .p__small {
-  font-size: var(--fs-x-small);
+  font-size: var(--fs-xsmall);
   color: var(--grey-600);
 }
 #site-footer .footer__mentions p {
@@ -944,9 +938,8 @@ body main {
   padding: 0 var(--padding-body);
 }
 
-.page-enquete header {
+.page-enquete {
-  max-width: var(--max-w-content);
+  position: relative;
-  margin: calc(var(--spacing) * 2) auto;
 }
 .page-enquete header .page-type {
   text-transform: uppercase;
@@ -955,10 +948,7 @@ body main {
 }
 .page-enquete header h2 {
   font-size: var(--fs-xbig);
-}
+  line-height: var(--leading-tight);
-.page-enquete .section__article {
-  max-width: var(--max-w-content);
-  margin: calc(var(--spacing) * 3) auto;
 }
 .page-enquete .section__article a:hover {
   color: var(--grey-200);
@@ -966,20 +956,16 @@ body main {
 .page-enquete .section__article .section__title {
   font-weight: normal;
   text-transform: uppercase;
-  font-size: var(--fs-medium);
+  margin-bottom: calc(var(--spacing) * 0.5);
-  margin-bottom: calc(var(--spacing) * 1);
 }
 .page-enquete #hero {
   width: 100vw;
   position: relative;
   left: calc(var(--padding-body) * -1);
-  margin: calc(var(--spacing) * 3) 0;
 }
 .page-enquete #hero figcaption {
   color: var(--color-txt-light);
   font-size: var(--fs-small);
-  max-width: var(--max-w-content);
-  margin: 0 auto;
   padding-top: calc(var(--spacing) * 0.5);
 }
 .page-enquete #hero.hero-video figure {
@@ -991,39 +977,6 @@ body main {
   -o-object-fit: cover;
      object-fit: cover;
 }
-@media screen and (min-width: 1080px) {
-  .page-enquete #banner--page {
-    height: calc(100vh - var(--header-h));
-    height: calc(100dvh - var(--header-h));
-    margin-bottom: calc((100vh - var(--header-h)) * -1);
-    margin-bottom: calc((100dvh - var(--header-h)) * -1);
-    padding: var(--padding-body);
-    padding-left: 0px;
-    position: sticky;
-    top: var(--header-h);
-    width: calc((100% - var(--max-w-content)) / 2);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-  }
-}
-.page-enquete .modal--share {
-  position: absolute;
-  bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
-  width: calc(100% - var(--padding-body));
-}
-.page-enquete #banner--page .btn--group {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc(var(--spacing) * 0.25);
-}
-.page-enquete #banner--page .btn--group > button,
-.page-enquete #banner--page .btn--group > label {
-  width: 100%;
-  max-width: 160px;
-  cursor: pointer;
-}
 .page-enquete #nav--page ul {
   list-style: none;
 }
@@ -1036,10 +989,8 @@ body main {
   padding: 0.3em 0;
   text-decoration: none;
 }
-.page-enquete .short {
+.page-enquete #section__short {
   font-size: var(--fs-medium);
-  margin: auto;
-  max-width: var(--max-w-content);
 }
 .page-enquete #section__dl {
   margin-top: calc(var(--spacing) * 1.5);
@@ -1053,6 +1004,7 @@ body main {
 }
 .page-enquete #section__dl dt {
   color: var(--color-txt-light);
+  padding-right: 1ch;
 }
 .page-enquete #section__dl ul:not(.keywords) {
   list-style: none;
@@ -1060,9 +1012,6 @@ body main {
 .page-enquete #section__dl ul:not(.keywords) li {
   padding-bottom: 0.2em;
 }
-.page-enquete #section__synthese {
-  font-size: var(--fs-medium);
-}
 .page-enquete #section__synthese p + p {
   margin-top: 0.5em;
 }
@@ -1076,8 +1025,159 @@ body main {
   text-underline-offset: 3px;
 }
 
-@media screen and (max-width: 1080px) {
+#share-banner__desktop {
-  #banner--page {
+  display: none;
+}
+
+#share-banner__desktop ~ .modal--share {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-in;
+}
+
+#share-banner__desktop:checked ~ .modal--share {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media screen and (max-width: 768px) {
+  .page-enquete header {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
+  .page-enquete header .page-type {
+    font-size: var(--fs-small);
+  }
+  .page-enquete .section__article {
+    margin: calc(var(--spacing) * 1.5) 0;
+  }
+  .page-enquete #section__impacts, .page-enquete #section__en-lien {
+    margin-top: 0px;
+  }
+  .page-enquete #hero {
+    margin: calc(var(--spacing) * 1.5) 0;
+  }
+  .page-enquete #hero figcaption {
+    margin: 0 var(--padding-body);
+  }
+  .page-enquete .modal--share {
+    position: absolute;
+    width: calc(100% - var(--padding-body) * 2);
+    bottom: calc(var(--spacing) * 2);
+  }
+  .page-enquete #banner--page {
+    padding: calc(var(--spacing) * 0.5) 0;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100vw;
+    padding: calc(var(--spacing) * 0.75) var(--padding-body);
+    padding-top: var(--spacing);
+    background-color: var(--color-bg);
+    background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
+    z-index: 800;
+  }
+  .page-enquete #banner--page #nav--page {
     display: none;
   }
+  .page-enquete #banner--page .btn--group {
+    display: flex;
+    gap: calc(var(--spacing) * 0.25);
+    position: relative;
+  }
+  .page-enquete #banner--page .btn--group > button,
+  .page-enquete #banner--page .btn--group > label {
+    width: 50%;
+    cursor: pointer;
+  }
+  .page-enquete #banner--page {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease-in;
+  }
+  .page-enquete #banner--page.is-visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+@media screen and (max-width: 560px) {
+  .page-enquete #section__dl .dl__group {
+    grid-template-columns: 32% 1fr;
+    -moz-column-gap: 1ch;
+         column-gap: 1ch;
+  }
+}
+@media screen and (min-width: 768px) {
+  .page-enquete #banner--page {
+    height: calc(100vh - var(--header-h));
+    height: calc(100dvh - var(--header-h));
+    margin-bottom: calc((100vh - var(--header-h)) * -1);
+    margin-bottom: calc((100dvh - var(--header-h)) * -1);
+    padding: var(--padding-body);
+    padding-left: 0px;
+    position: sticky;
+    top: var(--header-h);
+    width: var(--banner-medium);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .page-enquete #banner--page .btn--group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--spacing) * 0.25);
+  }
+  .page-enquete #banner--page .btn--group > button,
+  .page-enquete #banner--page .btn--group > label {
+    width: 100%;
+    max-width: 160px;
+    cursor: pointer;
+  }
+  .page-enquete #hero {
+    margin: calc(var(--spacing) * 3) 0;
+  }
+  .page-enquete .section__article {
+    margin-left: var(--banner-medium);
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .page-enquete #section__short {
+    margin-top: var(--padding-body);
+  }
+  .page-enquete header {
+    max-width: var(--max-w-content);
+    margin: calc(var(--spacing) * 2) auto;
+  }
+  .page-enquete .section__article .section__title {
+    font-size: var(--fs-medium);
+    margin-bottom: var(--spacing);
+  }
+  .page-enquete #section__synthese {
+    font-size: var(--fs-medium);
+  }
+  .modal--share {
+    position: absolute;
+    bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
+    width: calc(100% - var(--padding-body));
+  }
+}
+@media screen and (min-width: 1080px) {
+  .page-enquete #banner--page {
+    width: calc((100% - var(--max-w-content)) / 2);
+  }
+  .page-enquete #hero {
+    margin: calc(var(--spacing) * 3) 0;
+  }
+  .page-enquete #hero figcaption {
+    max-width: var(--max-w-content);
+    margin: 0 auto;
+  }
+  .page-enquete header {
+    max-width: var(--max-w-content);
+    margin: calc(var(--spacing) * 2) auto;
+  }
+  .page-enquete .section__article {
+    max-width: var(--max-w-content);
+    margin: calc(var(--spacing) * 3) auto;
+  }
 }/*# sourceMappingURL=style.css.map */

assets/css/template/_page-enquete.scss

@@ -1,8 +1,7 @@
 .page-enquete{
+    position: relative;
 
     header{
-        max-width: var(--max-w-content);
-        margin: calc(var(--spacing)*2) auto;
         .page-type{
             text-transform: uppercase;
             color: var(--color-txt-light);
@@ -10,41 +9,29 @@
         }
         h2{
             font-size: var(--fs-xbig);
+            line-height: var(--leading-tight);
         } 
     }
 
     .section__article{
-        max-width: var(--max-w-content);
-        margin: calc(var(--spacing)*3) auto;
         a:hover{
             color: var(--grey-200);
         }
-
-
         .section__title{
             font-weight: normal;
             text-transform: uppercase;
-            font-size: var(--fs-medium);
+            margin-bottom: calc(var(--spacing)*0.5)
-            margin-bottom: calc(var(--spacing)*1)
         }
     }
 
-
-
-    // HER0 ----------------------------------------------------
-
     #hero{
         width: 100vw;
         position: relative;
         left: calc(var(--padding-body)*-1);
 
-        margin: calc(var(--spacing)*3) 0;
-
         figcaption{
             color: var(--color-txt-light);
             font-size: var(--fs-small);
-            max-width: var(--max-w-content);
-            margin: 0 auto;
             padding-top: calc(var(--spacing)*0.5);
         }
 
@@ -63,61 +50,12 @@
         }
     }
 
-
-
-
-    // banner-page -------------------------------------------------
-
-    @media #{$medium-up}{
-        #banner--page{
-            height: calc(100vh - var(--header-h));
-            height: calc(100dvh - var(--header-h));
-            margin-bottom: calc((100vh - var(--header-h))*-1);
-            margin-bottom: calc((100dvh - var(--header-h))*-1);
-            padding: var(--padding-body);
-            padding-left: 0px;
-            position: sticky;
-            top: var(--header-h);
-            width: calc((100% - var(--max-w-content))/2);
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-    }
-
-
-    .modal--share{
-        position: absolute;
-        bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
-        width: calc(100% - var(--padding-body));
-
-    }
-
-    #banner--page .btn--group{
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: calc(var(--spacing)*0.25);
-
-        
-        > button,
-        > label {
-            width: 100%;
-            max-width: 160px;
-            cursor: pointer;
-        }
-        
-    }
-
     #nav--page{
         ul{
             list-style: none;
-            
             li{
                 text-align: center;
-                color: var(--color-txt-light);
+                color: var(--color-txt-light);                
-                // text-transform: uppercase;
-                
                 a{
                     display: block;
                     padding: 0.3em 0;
@@ -127,14 +65,8 @@
         }
     }
 
-
+    #section__short{
-
-    // DL -------------------------------------------------
-
-    .short{
         font-size: var(--fs-medium);
-        margin: auto;
-        max-width: var(--max-w-content);
     }
 
     #section__dl{
@@ -150,6 +82,7 @@
 
         dt{
             color: var(--color-txt-light);
+            padding-right: 1ch;
         }
 
         ul:not(.keywords){
@@ -162,19 +95,7 @@
     }
 
 
-   
-
-
-
-
-
-    // SYNTHESE ----------------------------------------------
-
- 
-
     #section__synthese{
-        font-size: var(--fs-medium);
-
         p + p{
             margin-top: 0.5em;
         }
@@ -197,11 +118,248 @@
 
 
 
-@media #{$medium}{
+// SHARE ACTIONS --------------------------------------------------
+// ----------------------------------------------------------------
 
-    #banner--page{
+#share-banner__desktop{ display: none; }
-        display: none;
+#share-banner__desktop ~ .modal--share{
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .2s ease-in;
+}
 
+#share-banner__desktop:checked ~ .modal--share{
+    opacity: 1;
+    pointer-events: auto;
+}
+
+
+// .page-enquete{
+//     #banner--page.is-sticky {
+//         position: fixed;
+//         bottom: 0;
+//         left: 0;
+//         right: 0;
+//         z-index: 100;
+//       }
+// }
+
+
+
+
+
+// SMALL ----------------------------------------------------------
+// ----------------------------------------------------------------
+
+
+@media #{$small}{
+
+    .page-enquete{
+
+        header{
+            padding-top: calc(var(--spacing)*1.5);
+            .page-type{
+                font-size: var(--fs-small);
+            }
+        }  
+
+        .section__article{
+            margin: calc(var(--spacing)*1.5) 0;
+        }  
+
+        #section__impacts, #section__en-lien{
+            margin-top: 0px;
+        }
+
+        #hero{
+            margin: calc(var(--spacing)*1.5) 0;
+            figcaption{ 
+                margin: 0 var(--padding-body);
+            }
+        }
+
+        .modal--share{
+            position: absolute;
+            width: calc(100% - var(--padding-body)*2);
+            bottom: calc(var(--spacing) * 2);
+        }
+
+
+        #banner--page {
+            padding: calc(var(--spacing)*0.5) 0;
+
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100vw;
+            padding: calc(var(--spacing)*0.75) var(--padding-body);
+            padding-top: var(--spacing);
+            background-color: var(--color-bg);
+            background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
+            z-index: 800;
+
+            #nav--page{
+                display: none;
+            }
+            .btn--group{
+               
+                display: flex;
+                gap: calc(var(--spacing)*0.25);
+                position: relative;
+                
+                > button,
+                > label {
+                    width: 50%;
+                    cursor: pointer;
+                }
+                
+            }
+            
+        }
+
+
+        // action
+
+        #banner--page{
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity .2s ease-in;
+        }
+
+        #banner--page.is-visible{
+            opacity: 1;
+            pointer-events: auto;
+        }
+       
+
+        
     }
 
+}
+
+
+
+@media #{$x-small}{
+    .page-enquete{
+        #section__dl .dl__group{
+            grid-template-columns: 32% 1fr;
+            column-gap: 1ch;
+        } 
+    } 
+} 
+
+
+
+
+
+// DESKTOP ----------------------------------------------------------
+// ----------------------------------------------------------------
+
+
+@media #{$small-up}{
+
+    .page-enquete{
+
+        #banner--page{
+            height: calc(100vh - var(--header-h));
+            height: calc(100dvh - var(--header-h));
+            margin-bottom: calc((100vh - var(--header-h))*-1);
+            margin-bottom: calc((100dvh - var(--header-h))*-1);
+            padding: var(--padding-body);
+            padding-left: 0px;
+            position: sticky;
+            top: var(--header-h);
+            width: var(--banner-medium);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        #banner--page .btn--group{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: calc(var(--spacing)*0.25);
+            
+            > button,
+            > label {
+                width: 100%;
+                max-width: 160px;
+                cursor: pointer;
+            }
+            
+        }
+
+        #hero{
+            margin: calc(var(--spacing)*3) 0;
+
+        }
+
+      .section__article{
+            margin-left: var(--banner-medium);
+            margin-top: calc(var(--spacing)*3);
+            margin-bottom: calc(var(--spacing)*3);
+        }
+
+        #section__short{
+            margin-top: var(--padding-body);
+        }
+
+        header{
+            max-width: var(--max-w-content);
+            margin: calc(var(--spacing)*2) auto;
+        }
+
+        .section__article{
+            .section__title{
+                font-size: var(--fs-medium);
+                margin-bottom: var(--spacing);
+            } 
+        }  
+
+        #section__synthese{
+            font-size: var(--fs-medium);
+        }
+    }
+    .modal--share{
+        position: absolute;
+        bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
+        width: calc(100% - var(--padding-body));
+    }
+}  
+
+
+
+
+@media #{$medium-up}{
+
+    .page-enquete{
+
+        #banner--page{
+            width: calc((100% - var(--max-w-content))/2);
+        }
+
+        #hero{
+            margin: calc(var(--spacing)*3) 0;
+            figcaption{ 
+                max-width: var(--max-w-content);
+                margin: 0 auto;
+            }
+        }
+
+
+        header{
+            max-width: var(--max-w-content);
+            margin: calc(var(--spacing)*2) auto;
+        }
+
+        .section__article{
+            max-width: var(--max-w-content);
+            margin: calc(var(--spacing)*3) auto;
+        }
+
+      
+
+        
+    }
 }

assets/js/mobile-sticky.js

@@ -0,0 +1,50 @@
+let isInitialized = false;
+
+export function btnSticky(responsiveSmall) {
+    if (isInitialized) return;
+
+    let main = document.querySelector("main");
+    if (!main || !main.classList.contains("page-enquete")) return;
+
+    let bannerPage = main.querySelector("#banner--page");
+    let sectionDl = document.querySelector("#section__dl");
+    let footer = document.querySelector("#site-footer");
+
+    if (!bannerPage || !sectionDl || !footer) return;
+
+    function checkScroll() {
+        const screenWidth = window.innerWidth;
+
+        // Vérifier que l'écran est plus petit que responsiveSmall
+        if (screenWidth >= responsiveSmall) {
+            bannerPage.classList.remove('is-visible');
+            bannerPage.style.transform = 'translateY(0)';
+            return;
+        }
+
+        const sectionTop = sectionDl.getBoundingClientRect().top;
+        const footerTop = footer.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
+
+        // Activer le banner quand #section__dl arrive en bas de l'écran
+        if (sectionTop <= windowHeight) {
+            bannerPage.classList.add('is-visible');
+
+            // Pousser le banner vers le haut si le footer arrive en bas de l'écran
+            if (footerTop < windowHeight) {
+                const pushUp = windowHeight - footerTop;
+                bannerPage.style.transform = `translateY(-${pushUp}px)`;
+            } else {
+                bannerPage.style.transform = 'translateY(0)';
+            }
+        } else {
+            bannerPage.classList.remove('is-visible');
+            bannerPage.style.transform = 'translateY(0)';
+        }
+    }
+
+    window.addEventListener('scroll', checkScroll);
+    checkScroll();
+
+    isInitialized = true;
+}

assets/js/onload.js

@@ -1,5 +1,9 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
+import { btnSticky } from './mobile-sticky.js';
+
+const responsiveMedium = 1080;
+const responsiveSmall = 768;
 
 // TEMP, with includeHTML() --------------------------------------
 
@@ -31,4 +35,20 @@ function initAfterLoad() {
   headerToggle();
   headerScrollVisibility();
   copyLink();
+  btnSticky(responsiveSmall);
+}
+
+function responsiveLoader() {
+  let isLoaded = false;
+
+  function checkResize() {
+    if (window.innerWidth < responsiveSmall && !isLoaded) {
+      
+      // other functions qui ne chargent que pour la version mobile ...
+      isLoaded = true;
+    }
+  }
+
+  checkResize();
+  window.addEventListener('resize', checkResize);
 }

assets/js/share.js

@@ -17,7 +17,3 @@ export function copyLink() {
     });
 }
 
-
-export function shareModal() {
-    let buttons = document.querySelectorAll('.btn__share');
-}

components/site-footer.html

@@ -14,7 +14,7 @@
           placeholder="Votre adresse e-mail"
           required
         />
-        <button class="btn--bold" type="submit" aria-label="s’inscrire">
+        <button class="btn--newletter" type="submit" aria-label="s’inscrire">
           <span class="txt">S’inscrire</span>
           <span class="icon">
             <svg

page-enquete/index.html

@@ -42,17 +42,16 @@
 
                 <div class="btn--group">
                     <button class="btn--bold"><a href="#">Lire le rapport</a></button>
-                    <label for="share-banner" class="btn--bold-inline no-link">Partager</label>
+                    <label for="share-banner__desktop" class="btn--bold-inline no-link">Partager</label>
                 </div>
 
-                <input type="checkbox" id="share-banner">
+                <input type="checkbox" id="share-banner__desktop">
                 <div class="modal--share"  w3-include-html="/components/modal-share.html"></div>
 
-
             </div>
 
 
-            <p class="short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
+            <p class="section__article" id="section__short">À partir d’images exclusives, l’analyse conjointe de B’Tselem et Index démontre que les deux hommes ont été abattus par des soldats israéliens alors qu’ils ne présentaient aucun danger.</p>
 
     
 
@@ -69,7 +68,7 @@
                     <dt>Conséquences</dt>
                     <dd>Mort</dd>
                 </div>
-                <div class="dl__group">
+                <div class="dl__group dl__group__keywords">
                     <dt>Mots-clés</dt>
                     <dd>
                         <ul class="keywords">