investigation responsive

assets/css/base/_body.scss

@@ -29,6 +29,8 @@ body{
 
     color: var(--color-txt);
     background-color: var(--color-bg);
+
+   
 }
 
 img{

assets/css/components/_bottom-bar.scss

@@ -64,13 +64,9 @@
         color: var(--color-txt-light);
         flex-grow: 1;
         width: 100%;
-        white-space: nowrap;
+        padding-top: 5px;
-        // overflow: hidden;
-        // text-overflow: ellipsis;
-     
-     
-        //  align-items: center;
        
+        min-width: 0; 
        
         .type{
                 text-transform: uppercase;
@@ -84,23 +80,39 @@
 
         }
 
+        .title{
+          min-width: 0; 
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
       
     }
 
 
       @media #{$small} {
 
+            // display: flex;
+            // align-items: center;
+            // justify-content: center;
+        .bottom-bar__inner{
+           height: calc(var(--header-h)*0.75);
+            justify-content: center;
+            align-items: center;
+         }
+
+       
+
+        .btn--download, .btn--back-to-top{ display: none; }
+    }
+
+    @media #{$x-small} {
             display: flex;
             align-items: center;
             justify-content: center;
-        .bottom-bar__inner{
+        .title-group{
-           height: calc(var(--header-h)*0.5);
+            display: none;
-            justify-content: center;
-            align-items: center;
         }
-
-       
-
-        .title-group, .btn--download, .btn--back-to-top{ display: none; }
         }
 }

assets/css/components/_buttons.scss

@@ -23,7 +23,7 @@ button:disabled{
 
 }
 
-.soutenir{
+.support{
     a{
         color: var(--color-accent);
         &:hover{

assets/css/components/_investigation-hero.scss

@@ -1,13 +1,11 @@
    #investigation__hero{
+
         width: 100%;
-        position: relative;
-        left: 0;
-        padding-top: calc(var(--spacing)*4);
-        margin-bottom: calc(var(--spacing)*3);
         max-width: var(--max-w-cards);
         margin-inline: auto;
 
        
+
         figcaption{
             color: var(--color-txt-light);
             font-size: var(--fs-small);
@@ -15,7 +13,7 @@
             padding: calc(var(--spacing)*0.5) var(--padding-body);
             padding-bottom: 0;
             text-align: center;
-            width: var(--max-w-content);
+            max-width: var(--max-w-content);
             margin-inline: auto;
             
         }
@@ -97,3 +95,7 @@
 
 
     }
+
+
+
+

assets/css/components/_swiper.scss

@@ -1,5 +1,8 @@
 .swiper {
 
+    width: 100%!important;
+    min-width: 0;
+
     .swiper-button-prev,
     .swiper-button-next{
         color: var(--color-txt);

assets/css/partials/_page-header.scss

@@ -20,6 +20,14 @@
     white-space: nowrap;
     text-transform: uppercase;
 
+      @media #{$small} {
+          height: calc(var(--h-block)*0.75);
+       font-size: var(--fs-xsmall);
+           padding: 0 1ch;
+             padding-top: 3px;
+
+    }
+
 }
 
 
@@ -29,7 +37,7 @@ main .page__header {
     margin-bottom: calc(var(--spacing) * 2);
  
     @media #{$small} {
-      margin-top: calc(var(--spacing) * 2);
+      margin-top: calc(var(--spacing) * 1);
 
     }
 
@@ -42,7 +50,14 @@ main .page__header {
       line-height: var(--leading-title);
       margin-top: calc(var(--spacing) * 1);
       margin-bottom: calc(var(--spacing) * 1.5);
+
+       @media #{$small-up} {
       text-wrap: balance;
+         }
+      
+       @media #{$small} {
+        margin-bottom: calc(var(--spacing) * 1);
+         }
       
     }
 
@@ -51,9 +66,5 @@ main .page__header {
       margin-bottom: calc(var(--spacing) * 3);
     }
 
-    // .description-medium{
+    
-    //   font-size: var(--fs-medium);
-    //    max-width: 58ch;
-    //    line-height: 1.1;
-    // }
 }

assets/css/partials/_site-footer.scss

@@ -1,5 +1,8 @@
 #site-footer {
 
+ 
+
+
     background-color: var(--dark);
         padding: calc(var(--spacing)*2) var(--padding-body);
     z-index: 500;

assets/css/partials/_site-header.scss

@@ -1,5 +1,7 @@
 #site-header {
 
+
+
   z-index: var(--z-header);
   --gap: 3ch;
 
@@ -42,9 +44,11 @@
 
     svg{
       width: 100px;
-      @media #{$small}{
-        width: 80px;
     }
+
+    @media #{$small}{
+        svg{ width: 80px; }
+        top: -4px;
       }
   }
 
@@ -60,13 +64,37 @@
          gap: var(--gap); 
            list-style-type: none;
 
+           li{
+            white-space: nowrap;
+           }
+
+
+       
+               
       }
     }
+
+
     #nav-highlight ul{
          font-weight: 500;
         text-transform: uppercase;
 
+         @media #{$medium}{
+          font-size: var(--fs-small);
+
         }
+        @media screen and (max-width: 890px){
+          justify-content: flex-end;
+          padding-right: 2ch;
+
+          li{ display: none; }
+          li.support{ display: block; }
+          
+        }
+
+     
+    }
+
     
 
     #nav-investigation{
@@ -80,6 +108,41 @@
         transition: top 0.3s ease;
         pointer-events: none;
 
+
+          min-width: 0; 
+ 
+
+        
+        .title{ 
+          text-transform: uppercase;
+          font-size: var(--fs-small);
+          font-weight: 500;
+
+  
+          max-width: 100%;
+          min-width: 0; 
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-left: 2ch;
+          padding-right: 2ch;
+          text-align: center;
+          color: var(--color-txt-light);
+     
+        }
+
+          @media #{$medium}{
+
+            ul{
+               font-size: var(--fs-small);
+              padding-left: 6ch;
+              padding-right: 6ch;
+            }
+         
+        }
+
+   
+
         li{ 
           color: var(--color-txt-light); 
           transition: color 0.3s ease;
@@ -95,22 +158,13 @@
               }
           }
         }
+
+        
     }  
 
 
 
-    &.has-nav-investigation{
+   
-      #nav-highlight{
-        display: none;
-      }
-      #nav-investigation{
-        position: relative;
-        opacity: 1;
-      transform: translateY(0);
-      top: 0px;
-      pointer-events: auto;
-      }
-    }
 
 
 
@@ -162,10 +216,73 @@
 
 
 
-@media #{$medium}{
+
+// Animation, change header
+
+ #site-header.has-nav-investigation{
     #nav-highlight{
       display: none;
     }
+    #nav-investigation{
+      position: relative;
+      opacity: 1;
+    transform: translateY(0);
+    top: 0px;
+    pointer-events: auto;
+    }
+  }
+
+
+@media #{$small-up}{
+
+  #site-header #nav-investigation .title{
+    display: none;
+  }
+
 }
 
 
+@media #{$small}{
+
+
+
+  #site-header #nav-highlight ul{
+        display: none;
+  }
+
+  #site-header #nav-investigation .title{
+      display: none;
+    }
+
+  #site-header.has-nav-investigation{
+    #nav-investigation{
+      ul{ display: none; }
+      .title{ display: block; }
+    }
+  }
+  
+}
+
+
+// @media #{$x-small}{
+//   #site-header.has-nav-investigation{
+//     #nav-investigation{
+//       .title{ display: none; }
+//     }
+//   }
+  
+
+// }
+
+
+
+//   @media #{$x-small}{
+// [data-template="investigation"] #site-header{
+
+//     #lang-toggle{ display: none; }
+//     #theme-toggle{ padding-right: 1ch; }
+//     #nav-investigation .title{
+//       font-size: var(--fs-xsmall);
+//     }
+//   }
+// }

assets/css/style.css

@@ -195,6 +195,9 @@ body.is-hidden .bottom-bar__inner {
   #site-header #site-title svg {
     width: 80px;
   }
+  #site-header #site-title {
+    top: -4px;
+  }
 }
 #site-header #nav-highlight,
 #site-header #nav-investigation {
@@ -209,10 +212,31 @@ body.is-hidden .bottom-bar__inner {
   gap: var(--gap);
   list-style-type: none;
 }
+#site-header #nav-highlight ul li,
+#site-header #nav-investigation ul li {
+  white-space: nowrap;
+}
 #site-header #nav-highlight ul {
   font-weight: 500;
   text-transform: uppercase;
 }
+@media screen and (max-width: 1080px) {
+  #site-header #nav-highlight ul {
+    font-size: var(--fs-small);
+  }
+}
+@media screen and (max-width: 890px) {
+  #site-header #nav-highlight ul {
+    justify-content: flex-end;
+    padding-right: 2ch;
+  }
+  #site-header #nav-highlight ul li {
+    display: none;
+  }
+  #site-header #nav-highlight ul li.support {
+    display: block;
+  }
+}
 #site-header #nav-investigation {
   position: absolute;
   top: 10%;
@@ -221,6 +245,28 @@ body.is-hidden .bottom-bar__inner {
   opacity: 0;
   transition: top 0.3s ease;
   pointer-events: none;
+  min-width: 0;
+}
+#site-header #nav-investigation .title {
+  text-transform: uppercase;
+  font-size: var(--fs-small);
+  font-weight: 500;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 2ch;
+  padding-right: 2ch;
+  text-align: center;
+  color: var(--color-txt-light);
+}
+@media screen and (max-width: 1080px) {
+  #site-header #nav-investigation ul {
+    font-size: var(--fs-small);
+    padding-left: 6ch;
+    padding-right: 6ch;
+  }
 }
 #site-header #nav-investigation li {
   color: var(--color-txt-light);
@@ -236,16 +282,6 @@ body.is-hidden .bottom-bar__inner {
 #site-header #nav-investigation li.is-selected:hover a:hover {
   color: var(--color-txt);
 }
-#site-header.has-nav-investigation #nav-highlight {
-  display: none;
-}
-#site-header.has-nav-investigation #nav-investigation {
-  position: relative;
-  opacity: 1;
-  transform: translateY(0);
-  top: 0px;
-  pointer-events: auto;
-}
 #site-header #theme-toggle {
   width: var(--h-block);
   height: var(--h-block);
@@ -284,9 +320,34 @@ body.is-hidden .bottom-bar__inner {
   fill: var(--grey-200) !important;
 }
 
-@media screen and (max-width: 1080px) {
+#site-header.has-nav-investigation #nav-highlight {
-  #nav-highlight {
   display: none;
+}
+#site-header.has-nav-investigation #nav-investigation {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  top: 0px;
+  pointer-events: auto;
+}
+
+@media screen and (min-width: 768px) {
+  #site-header #nav-investigation .title {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  #site-header #nav-highlight ul {
+    display: none;
+  }
+  #site-header #nav-investigation .title {
+    display: none;
+  }
+  #site-header.has-nav-investigation #nav-investigation ul {
+    display: none;
+  }
+  #site-header.has-nav-investigation #nav-investigation .title {
+    display: block;
   }
 }
 button {
@@ -314,10 +375,10 @@ button:disabled {
   cursor: auto;
 }
 
-.soutenir a {
+.support a {
   color: var(--color-accent);
 }
-.soutenir a:hover {
+.support a:hover {
   color: var(--color-accent) !important;
   text-decoration: underline !important;
 }
@@ -698,10 +759,6 @@ button.sort[data-sort-type=up] .arrow {
 }
 #investigation__hero {
   width: 100%;
-  position: relative;
-  left: 0;
-  padding-top: calc(var(--spacing) * 4);
-  margin-bottom: calc(var(--spacing) * 3);
   max-width: var(--max-w-cards);
   margin-inline: auto;
 }
@@ -718,7 +775,7 @@ button.sort[data-sort-type=up] .arrow {
   padding: calc(var(--spacing) * 0.5) var(--padding-body);
   padding-bottom: 0;
   text-align: center;
-  width: var(--max-w-content);
+  max-width: var(--max-w-content);
   margin-inline: auto;
 }
 #investigation__hero figure {
@@ -1954,6 +2011,10 @@ button.sort[data-sort-type=up] .arrow {
 }
 
 @container opengraph (width < 500px) {}
+.swiper {
+  width: 100% !important;
+  min-width: 0;
+}
 .swiper .swiper-button-prev,
 .swiper .swiper-button-next {
   color: var(--color-txt);
@@ -2123,7 +2184,8 @@ button.sort[data-sort-type=up] .arrow {
   color: var(--color-txt-light);
   flex-grow: 1;
   width: 100%;
-  white-space: nowrap;
+  padding-top: 5px;
+  min-width: 0;
 }
 #bottom-bar .title-group .type {
   text-transform: uppercase;
@@ -2133,18 +2195,29 @@ button.sort[data-sort-type=up] .arrow {
   padding-left: 1ch;
   padding-right: 1ch;
 }
+#bottom-bar .title-group .title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 @media screen and (max-width: 768px) {
+  #bottom-bar .bottom-bar__inner {
+    height: calc(var(--header-h) * 0.75);
+    justify-content: center;
+    align-items: center;
+  }
+  #bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
+    display: none;
+  }
+}
+@media screen and (max-width: 560px) {
   #bottom-bar {
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  #bottom-bar .bottom-bar__inner {
+  #bottom-bar .title-group {
-    height: calc(var(--header-h) * 0.5);
-    justify-content: center;
-    align-items: center;
-  }
-  #bottom-bar .title-group, #bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
     display: none;
   }
 }
@@ -2241,6 +2314,9 @@ button.sort[data-sort-type=up] .arrow {
   #site-header #site-title svg {
     width: 80px;
   }
+  #site-header #site-title {
+    top: -4px;
+  }
 }
 #site-header #nav-highlight,
 #site-header #nav-investigation {
@@ -2255,10 +2331,31 @@ button.sort[data-sort-type=up] .arrow {
   gap: var(--gap);
   list-style-type: none;
 }
+#site-header #nav-highlight ul li,
+#site-header #nav-investigation ul li {
+  white-space: nowrap;
+}
 #site-header #nav-highlight ul {
   font-weight: 500;
   text-transform: uppercase;
 }
+@media screen and (max-width: 1080px) {
+  #site-header #nav-highlight ul {
+    font-size: var(--fs-small);
+  }
+}
+@media screen and (max-width: 890px) {
+  #site-header #nav-highlight ul {
+    justify-content: flex-end;
+    padding-right: 2ch;
+  }
+  #site-header #nav-highlight ul li {
+    display: none;
+  }
+  #site-header #nav-highlight ul li.support {
+    display: block;
+  }
+}
 #site-header #nav-investigation {
   position: absolute;
   top: 10%;
@@ -2267,6 +2364,28 @@ button.sort[data-sort-type=up] .arrow {
   opacity: 0;
   transition: top 0.3s ease;
   pointer-events: none;
+  min-width: 0;
+}
+#site-header #nav-investigation .title {
+  text-transform: uppercase;
+  font-size: var(--fs-small);
+  font-weight: 500;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: 2ch;
+  padding-right: 2ch;
+  text-align: center;
+  color: var(--color-txt-light);
+}
+@media screen and (max-width: 1080px) {
+  #site-header #nav-investigation ul {
+    font-size: var(--fs-small);
+    padding-left: 6ch;
+    padding-right: 6ch;
+  }
 }
 #site-header #nav-investigation li {
   color: var(--color-txt-light);
@@ -2282,16 +2401,6 @@ button.sort[data-sort-type=up] .arrow {
 #site-header #nav-investigation li.is-selected:hover a:hover {
   color: var(--color-txt);
 }
-#site-header.has-nav-investigation #nav-highlight {
-  display: none;
-}
-#site-header.has-nav-investigation #nav-investigation {
-  position: relative;
-  opacity: 1;
-  transform: translateY(0);
-  top: 0px;
-  pointer-events: auto;
-}
 #site-header #theme-toggle {
   width: var(--h-block);
   height: var(--h-block);
@@ -2330,9 +2439,34 @@ button.sort[data-sort-type=up] .arrow {
   fill: var(--grey-200) !important;
 }
 
-@media screen and (max-width: 1080px) {
+#site-header.has-nav-investigation #nav-highlight {
-  #nav-highlight {
   display: none;
+}
+#site-header.has-nav-investigation #nav-investigation {
+  position: relative;
+  opacity: 1;
+  transform: translateY(0);
+  top: 0px;
+  pointer-events: auto;
+}
+
+@media screen and (min-width: 768px) {
+  #site-header #nav-investigation .title {
+    display: none;
+  }
+}
+@media screen and (max-width: 768px) {
+  #site-header #nav-highlight ul {
+    display: none;
+  }
+  #site-header #nav-investigation .title {
+    display: none;
+  }
+  #site-header.has-nav-investigation #nav-investigation ul {
+    display: none;
+  }
+  #site-header.has-nav-investigation #nav-investigation .title {
+    display: block;
   }
 }
 #site-menu {
@@ -2535,6 +2669,14 @@ body main .page__content {
   white-space: nowrap;
   text-transform: uppercase;
 }
+@media screen and (max-width: 768px) {
+  .page__type {
+    height: calc(var(--h-block) * 0.75);
+    font-size: var(--fs-xsmall);
+    padding: 0 1ch;
+    padding-top: 3px;
+  }
+}
 
 main .page__header {
   margin-top: calc(var(--spacing) * 3);
@@ -2542,7 +2684,7 @@ main .page__header {
 }
 @media screen and (max-width: 768px) {
   main .page__header {
-    margin-top: calc(var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * 1);
   }
 }
 main .page__header .page__title {
@@ -2554,7 +2696,16 @@ main .page__header .page__title {
   line-height: var(--leading-title);
   margin-top: calc(var(--spacing) * 1);
   margin-bottom: calc(var(--spacing) * 1.5);
+}
+@media screen and (min-width: 768px) {
+  main .page__header .page__title {
     text-wrap: balance;
+  }
+}
+@media screen and (max-width: 768px) {
+  main .page__header .page__title {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
 }
 main .page__header .description {
   font-size: var(--fs-text);
@@ -2683,6 +2834,18 @@ main .page__header .description {
 [data-template=investigation] main .page__content {
   max-width: 100%;
 }
+@media screen and (min-width: 768px) {
+  [data-template=investigation] main #investigation__hero {
+    padding-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+}
+@media screen and (max-width: 768px) {
+  [data-template=investigation] main #investigation__hero {
+    padding-top: calc(var(--spacing) * 1.5);
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+}
 [data-template=investigation] main .investigation__content {
   font-size: var(--fs-text);
 }
@@ -2693,6 +2856,11 @@ main .page__header .description {
   margin-inline: auto;
   font-size: var(--fs-normal);
 }
+@media screen and (max-width: 768px) {
+  [data-template=investigation] main #investigation__dl {
+    font-size: var(--fs-small);
+  }
+}
 [data-template=investigation] main #investigation__dl .dl__group {
   display: grid;
   grid-gap: var(--padding-inner);
@@ -2727,9 +2895,6 @@ main .page__header .description {
 #investigation__content {
   padding-top: calc(var(--spacing) * 4);
 }
-#investigation__content .section-content {
-  margin-bottom: calc(var(--spacing) * 4);
-}
 #investigation__content .section-title-only {
   margin-bottom: 0;
 }
@@ -2778,27 +2943,70 @@ main .page__header .description {
   margin-bottom: calc(var(--spacing) * 2);
   padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
 }
-#investigation__content .subsection-w-media {
+#investigation__content .subsection-txt {
+  max-width: var(--max-w-content);
+}
+@media screen and (min-width: 768px) {
+  #investigation__content .section-content {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  #investigation__content .subsection-w-media {
     display: grid;
-  grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: var(--padding-body);
     position: relative;
-}
+  }
-#investigation__content .subsection-w-media .media {
+  #investigation__content .subsection-w-media .media {
     margin-inline: auto;
     max-width: var(--max-w-content);
-  padding-left: var(--padding-inner);
-  padding-right: var(--padding-inner);
     position: sticky;
     top: calc(var(--header-h) + var(--spacing));
     align-self: start;
+  }
 }
-#investigation__content .subsection-txt {
+@media screen and (min-width: 768px) and (min-width: 1080px) {
+  #investigation__content .subsection-w-media .media {
+    padding-left: var(--padding-inner);
+    padding-right: var(--padding-inner);
+  }
+}
+@media screen and (min-width: 768px) {
+  #investigation__content .subsection-txt {
     min-height: calc(100vh - var(--header-h));
-  max-width: var(--max-w-content);
     padding-left: var(--padding-inner);
     padding-right: var(--padding-inner);
     padding-bottom: calc(var(--spacing) * 6);
+  }
+}
+@media screen and (max-width: 768px) {
+  #investigation__content .section-content:not(.section-title-only) {
+    padding-bottom: calc(var(--spacing) * 1);
+    margin-bottom: calc(var(--spacing) * 2);
+    border-bottom: var(--border-light);
+  }
+  #investigation__content .section-title-only {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  #investigation__content .media {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  #investigation__content h3 {
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 1.5);
+    font-size: 1.35em;
+  }
+  #investigation__content h4 {
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 1);
+    font-size: 1em;
+  }
+  #investigation__content h4, #investigation__content h5 {
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  #investigation__content .subsection-txt .insert {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
 }
 #investigation__content .subsection-w-hscroll {
   position: relative;

assets/css/template/_investigation.scss

@@ -8,6 +8,8 @@
     margin-inline: auto;
     max-width: var(--max-w-content);
     margin-bottom: 0px;
+
+ 
     .description{
       margin-bottom: 0px;
     }
@@ -18,6 +20,17 @@
 
   }
 
+     #investigation__hero{
+        @media #{$small-up} {
+        padding-top: calc(var(--spacing)*4);
+        margin-bottom: calc(var(--spacing)*3);
+         }
+          @media #{$small} {
+        padding-top: calc(var(--spacing)*1.5);
+        margin-bottom: calc(var(--spacing)*2);
+         }
+      }
+
   .investigation__content{
     font-size: var(--fs-text);
   }
@@ -74,6 +87,10 @@
     margin-inline: auto;
       font-size: var(--fs-normal);
 
+      @media #{$small} {
+         font-size: var(--fs-small);
+        }
+
     .dl__group {
       @include grid-content();
       column-gap: 1ch;

assets/css/template/_investigation_content.scss

@@ -3,13 +3,8 @@
 
     padding-top: calc(var(--spacing) * 4);
  
-    .section-content {
   
 
-          margin-bottom: calc(var(--spacing)*4);
-
-    }
-
     .section-title-only{
         margin-bottom: 0;
     }
@@ -74,9 +69,22 @@
     }
 
 
+      .subsection-txt {
+        max-width: var(--max-w-content);
+    
+    }
+
+
+
+    @media #{$small-up}{
+
+          .section-content {
+        margin-bottom: calc(var(--spacing)*4);
+    }
+
         .subsection-w-media{
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
         gap: var(--padding-body);
         position: relative;
 
@@ -84,24 +92,69 @@
             .media{
                 margin-inline: auto;
                 max-width: var(--max-w-content);
-            padding-left: var(--padding-inner);
+
-            padding-right: var(--padding-inner);
                 position: sticky;
                 top: calc(var(--header-h) + var(--spacing));
                 align-self: start;
+
+                     @media #{$medium-up}{
+                padding-left: var(--padding-inner);
+                padding-right: var(--padding-inner);
+                }
             }
 
         }
 
-
           .subsection-txt {
             min-height: calc(100vh - var(--header-h));
-        max-width: var(--max-w-content);
             padding-left: var(--padding-inner);
             padding-right: var(--padding-inner);
             padding-bottom: calc(var(--spacing)*6);
           }
 
+    }
+
+
+     @media #{$small}{
+
+          .section-content:not(.section-title-only) {
+            padding-bottom: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*2);
+        border-bottom: var(--border-light);
+    }
+
+        .section-title-only{
+            margin-bottom: calc(var(--spacing)*1.5);
+        }
+        .media{
+            margin-bottom: calc(var(--spacing)*2);
+         }  
+         
+         h3{
+                margin-top: calc(var(--spacing)*3);
+             margin-bottom: calc(var(--spacing)*1.5);
+             font-size: 1.35em;
+         }
+
+         h4{
+ margin-top: calc(var(--spacing)*3);
+            margin-bottom: calc(var(--spacing)*1);
+             font-size: 1em; 
+         }
+
+        h4, h5{
+             margin-top: calc(var(--spacing)*3);
+            margin-bottom: calc(var(--spacing)*1);
+         }
+
+         .subsection-txt  .insert{
+             margin-top: calc(var(--spacing)*1.5);
+         }
+        }
+    
+
+
+  
     .subsection-w-hscroll{
         position: relative;
         margin-bottom: calc(var(--spacing)*4);

site/snippets/header.php

@@ -46,11 +46,12 @@
             <li><a href="/enquetes">Enquêtes</a></li>
             <li><a href="/impacts">Impacts</a></li>
              <li><a href="/laboratoire">Laboratoire</a></li>
-            <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
+            <li class="support"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
         </ul>
     </nav>
 
     <nav id="nav-investigation">
+      <!-- <p class="title"><?= $page->title()->esc() ?></p> -->
       <ul>
            <li class="is-selected"><a href="#investigation__hero">Vidéo</a></li>
             <li><a href="#investigation__content">Enquête</a></li>

site/snippets/nav.php

@@ -17,7 +17,7 @@ de la vérité et de la justice.</p>
 
 <nav>
     <ul>
-        <li class="soutenir highlight"><a href="#">Soutenez-nous</a></li>
+        <li class="support highlight"><a href="#">Soutenez-nous</a></li>
         <li class="highlight"><a href="/enquetes">Enquêtes</a></li>
         <li class="highlight"><a href="/impacts">Impact</a></li>
         <li><a href="/dossiers">Dossiers</a></li>