panel : improve menu

- Add impact-media blueprint (entries field + linked investigation)
- Add minimal impact-media template
- Refactor card-open-graph snippet: accepts $url param, Kirby cache (6h TTL), decode HTML entities, empty alt on images
- Update impacts.yml to allow impact-media pages
- Render impact-media in investigation aside with dynamic count + details/summary
- Add OG cache config in config.php
- CSS formatting fixes (body, card-block-small, category)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitignore

@@ -49,6 +49,12 @@ Icon
 
 /site/config/.license
 
+# Host-specific config (credentials)
+# ---------------
+
+/site/config/config.index.ngo.php
+/site/config/config.localhost.php
+
 
 # Content
 # ---------------

assets/css/base/_body.scss

@@ -48,8 +48,11 @@ img{
   // }
 }
 
-.swiper-button-next, .swiper-button-prev,
+.swiper-button-next,
-body, #site-header, #site-footer{
+.swiper-button-prev,
+body,
+#site-header,
+#site-footer {
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
@@ -60,7 +63,6 @@ body, #site-header, #site-footer{
   position: relative;
 }
 
-
 @mixin hide-scroll() {
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -83,7 +85,7 @@ body, #site-header, #site-footer{
   }
   position: relative;
   &::before {
-        content: '';
+    content: "";
     width: 100%;
     border-top: 1px solid transparent;
     position: absolute;
@@ -91,16 +93,16 @@ body, #site-header, #site-footer{
     left: 0;
   }
 
+  &:not([data-impact-type="media"]) {
     &:hover {
       background-color: var(--grey-950);
       border-color: var(--color-txt);
       &::before {
         border-color: var(--color-txt);
       }
-      
     }
   }
-
+}
 
 @mixin pin() {
   .pin {
@@ -117,15 +119,19 @@ body, #site-header, #site-footer{
   }
 }
 
-
+@mixin icon($size) {
+  .icon {
+    display: flex;
+    width: $size;
+    height: $size;
+    svg {
+      width: $size;
+      height: $size;
+    }
+  }
+}
 
 body.menu-open,
 body.is-hidden {
   overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top{
-        transition: opacity .3s ease-in;
-        opacity: 0.1;
 }
-}
-
-

assets/css/base/_var.scss

@@ -18,6 +18,7 @@
 
   --max-w-content: 700px;
   --max-w-cards: 940px;
+  --max-w-site: 1600px;
   --z-header: 2000;
   --panel-w: 310px;
 
@@ -29,7 +30,7 @@
   --leading-tight: 1.05;
   --leading-normal: 1.3;
 
-  --leading-title: 1.1;
+  --leading-title: 1.2;
   // --leading-relaxed: 1.4;
   // --leading-loose: 1.8;
 
@@ -79,15 +80,18 @@
   --h-block: 30px;
 
   --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --transition-scroll: .5s ease-in-out;
+
+
 }
 
 
 @media #{$small}{ 
   :root {
-    --fs-xsmall: 13px;
+    --fs-xsmall: 12px;
-    --fs-small: 16px;
+    --fs-small: 14px;
-    --fs-normal: 20px;
+    --fs-normal: 18px;
-     --fs-text: 20px;
+     --fs-text: 18px;
     --fs-medium: 24px;
     --fs-big: 34px;
 
@@ -112,6 +116,8 @@
   --color-txt: #161616;
   --color-txt-light: var(--grey-400);
 
+   --border-light: 1px solid var(--grey-800);
+
   --color-accent: #ff00ff;
   --color-accent-50: #ffe9ff;
   --color-accent-100: #fdd8fd;

assets/css/components/_bottom-bar.scss

@@ -0,0 +1,112 @@
+#bottom-bar {
+  position: fixed;
+  left: 0;
+  bottom: calc(var(--header-h) * -0.75);
+  &.is-visible {
+    bottom: 0px;
+  }
+
+  z-index: calc(var(--z-header) - 10);
+  height: calc(var(--header-h) * 0.75);
+  width: 100vw;
+  background-color: var(--color-bg);
+
+  padding-left: var(--padding-body);
+  padding-right: var(--padding-body);
+
+  transition: bottom var(--transition-scroll);
+
+  .progress-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 2px;
+    width: 100vw;
+    background-color: var(--grey-800);
+
+    .progress-bar {
+      height: 2px;
+      background-color: var(--color-txt);
+      width: 40%;
+    }
+  }
+
+  .bottom-bar__inner {
+    height: calc(var(--header-h) * 0.75);
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--padding-inner);
+  }
+
+  .btn--back-to-top {
+    @include icon(20px);
+    position: relative;
+    top: -3px;
+    width: 100px;
+
+    a {
+      justify-content: flex-end;
+    }
+
+    .icon {
+      transform: rotate(-90deg);
+      transform-origin: center;
+      svg {
+        fill: var(--color-txt);
+      }
+    }
+  }
+
+  .title-group {
+    font-size: var(--fs-small);
+    display: flex;
+    color: var(--color-txt-light);
+    flex-grow: 1;
+    width: 100%;
+    padding-top: 5px;
+
+    min-width: 0;
+
+    .title-type {
+      text-transform: uppercase;
+      &::after {
+        content: "/";
+        padding-left: 1ch;
+        padding-right: 1ch;
+      }
+    }
+
+    .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;
+    .title-group {
+      display: none;
+    }
+  }
+}

assets/css/components/_buttons.scss

@@ -23,7 +23,7 @@ button:disabled{
 
 }
 
-.soutenir{
+.support{
     a{
         color: var(--color-accent);
         &:hover{
@@ -93,24 +93,20 @@ button:disabled{
     svg{ fill: var(--color-bg); }
 }
 
-.btn--bold, 
+
-.btn--bold-inline{
+.btn--simple{
-    display: block;
     height: calc(var(--h-block)*1);
-    border: var(--border);
+    font-size: var(--fs-small);
-    border-radius: var(--radius-btn);
-    font-size: var(--fs-xsmall);
     font-weight: 500;
     text-transform: uppercase;
     line-height: 1;
-    overflow: hidden;
     white-space: nowrap;
-    svg{
+    @include icon(20px);
-        width: 18px;
+    .icon{
-        height: 18px;
         position: relative;
-        top: -1px;
+        top: -2px;
     }
+
    a{
         display: flex;
         align-items: center;
@@ -120,6 +116,7 @@ button:disabled{
         height: 100%;
         padding: 0 2ch;
         padding-top: 4px;
+          white-space: nowrap;
     }
     &.no-link{
         display: flex;
@@ -130,6 +127,45 @@ button:disabled{
         padding-top: 4px;
 
     }
+}
+ 
+.btn--bold{
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: var(--border);
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-small);
+    // font-weight: 500;
+    // text-transform: uppercase;
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    @include icon(12px);
+    svg{
+        position: relative; 
+        top: -1px;
+    }
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+    }
+    &.no-link{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+
+    }
+
+
  
     
 }
@@ -151,9 +187,98 @@ button:disabled{
   
 }
 
-.btn--bold-inline{
+.btn--see-more{
+
+    margin-top: calc(var(--spacing)*1);
+    margin-inline: auto;
+    
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: 1px solid var(--color-txt-light);
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-small);
+
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+
+    color: var(--color-txt-light);
     background-color: var(--color-bg);
-    svg{ fill: var(--color-txt); }
+
+
+    @include icon(12px);
+    .icon{
+        position: relative; 
+        top: -2px;
+        
+    }
+    svg{
+fill: var(--color-txt-light);
+    }
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+            font-size: var(--fs-small);
+    }
+
+
+
+ 
+    &:hover{
+        background-color: var(--grey-950);
+        color: var(--grey-100);
+        border-color: var(--grey-100);
+        a{
+            background-color: var(--grey-950);
+            color: var(--grey-100);
+        }
+        svg{ fill: var(--grey-100); }
+    }
+    
+}
+
+
+.btn--home{
+    
+    display: block;
+    height: calc(var(--h-block)*1);
+    border: var(--border);
+    border-radius: var(--radius-btn);
+    font-size: var(--fs-small);
+
+    line-height: 1;
+    overflow: hidden;
+    white-space: nowrap;
+
+       background-color: var(--color-bg);
+       font-weight: 500;
+
+
+    @include icon(12px);
+    .icon{
+        position: relative; 
+        top: -2px;
+    }
+    a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 1.25ch;
+        padding-top: 4px;
+    }
+
+
+
+ 
     &:hover{
         background-color: var(--grey-950);
         color: var(--grey-100);
@@ -193,16 +318,16 @@ button:disabled{
         }
         @media #{$small}{
              svg{
-                width: 11px;
+                width: 12px;
-                height: 11px;
+                height: 12px;
               }
         }
         @media #{$x-small}{
                 right: calc(var(--padding-inner)*0.5);
                 bottom: calc(var(--padding-inner)*0.25);
              svg{
-                width: 11px;
+                width: 12px;
-                height: 11px;
+                height: 12px;
               }
         }
     }
@@ -228,41 +353,88 @@ button:disabled{
         
 
 
-.btn--back-to-top{
+#btn--back-to-top{
-    display: flex;
+
-    border-color: var(--color-txt);
     width: fit-content;
-    margin: var(--spacing) auto;
+    margin-bottom: var(--spacing);
-    font-size: var(--fs-xsmall);
+    margin-left: auto;
-      @media #{$small}{
+    margin-right: var(--padding-body);
-        margin-bottom: calc(var(--spacing)*2);
+
+ 
+  
+    a{
+        display: flex;
+    align-items: center;
+    gap: 1ch;
+    text-decoration: none;
+    }
+
+    .text{
+        font-size: var(--fs-small);
+        padding-top: 2px;
     }
 
     .icon{
-        width: 12px;
+        flex-shrink: 0;
-        height: 12px;
+        --size: 26px;
+        border: 1px solid var(--color-txt);
+        background-color: var(--color-bg);
+            border-radius: 50%;
+        width: var(--size);
+        height: var(--size);
+  
         transform: rotate(-90deg);
-        transform-origin: center;
+
-        position: relative;
+          display: flex;
-        top: -1px;
+          align-items: center;
+          justify-content: center;
         svg{
             width: 12px;
             height: 12px;
+            fill: var(--color-txt);
         }
     }
 
     &:hover{
-        background-color: var(--grey-950);
+        opacity: 0.8;
-        color: var(--grey-100);
-        border-color: var(--grey-100);
-        a{
-            background-color: var(--grey-950);
-            color: var(--grey-100);
     }
-        svg{ fill: var(--grey-100); }
+
+
+    @media #{$x-small}{
+        opacity: 0;
+        transition: opacity .5s ease;
+        position: fixed;
+        bottom: calc(var(--padding-body)*1.5);
+        right: var(--padding-body);
+        z-index: var(--z-header);
+        margin-right: 0;
+        margin-bottom: 0;
+       
+        .icon{
+            --size: 32px;
+             border-width: 2px;
+            svg{
+                   width: 19px;
+            height: 19px;
+            }
+        }
+        .text{
+            display: none;
+        }
+        &.is-visible{
+            opacity: 1;
         }
     }
 
 
+}
 
 
+.btn--support{
+    color: var(--color-accent);
+    &:hover{
+        color: var(--color-accent);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+}

assets/css/components/_card-article-small.scss

@@ -10,33 +10,14 @@
         border-top: var(--border-light);
     }
 
-    // &.has-link {
+
-    //     @include hover-card-line();
-    // }
 
     @include figure-16-9();
 
-    figure {
-        @media #{$x-small} {
-            margin-left: 0px;
-        }
-    }
 
     .type {
 
-        display: inline-flex;
-        flex-grow: 0;
-        height: calc(var(--h-block)*0.75);
-        border-radius: var(--radius-small);
-        border: var(--border-medium);
-        align-items: center;
-        padding: 5px 1ch 0 1ch;
 
-
-        font-size: var(--fs-xsmall);
-        text-transform: uppercase;
-        font-weight: 500;
-        color: var(--color-txt-light);
         margin-bottom: calc(var(--spacing)*0.75);
 
     }
@@ -92,9 +73,8 @@
     .description {
         font-size: var(--fs-small);
         @include clamp(2);
-        // margin-bottom: calc(var(--spacing)*0.75);
+        // margin-top: calc(var(--spacing)*-0.5);
-        margin-top: calc(var(--spacing)*0.25);
+        // display: none;
-        display: none;
     }
 
 
@@ -102,9 +82,7 @@
     @include btn--go-to();
     @include hover-card-line();
 
-    .keywords {
+ 
-        display: none;
-    }
 
     @media #{$medium} {
         .title {
@@ -113,25 +91,71 @@
         }
     }
 
-    @media #{$x-small} {
+    @media #{$small} {
+        row-gap: 0;
+        display: block;
 
         .content{
-            display: contents;
+            padding: calc(var(--spacing)*0.5) var(--padding-inner);
+        }
+
+        .type{
+             margin-bottom: calc(var(--spacing)*0.75);
         }
 
          .title{
-            font-size: var(--fs-small);
+               margin-bottom:  calc(var(--spacing)*0.25);
-            padding-top: calc(var(--spacing)*0.25);
          }
 
-        figure {
+         .details,
-            grid-row: 1/3;
+         .date{
+              margin-top:  calc(var(--spacing)*0.5);
          }
 
-        .description {
+         .btn--go-to{
-            grid-column: span 2;
+            bottom: calc(var(--padding-inner) * 0.75);
+
+                right: calc(var(--padding-inner)*0.75);
          }
 
+  
+
+        // .content {
+        //         align-self: auto;
+        //         height: 100%;
+
+        //     padding: 0;
+        //      padding-bottom: calc(var(--padding-inner)*0.5);
+        //      display: flex;
+        //      flex-direction: column;
+            
+        //      align-content: center;
+         
+             
+        // }
+
+        // .type{
+        //     display: none;
+        // }
+
+        // .title {
+        //     font-size: var(--fs-xsmall);
+        //     padding-top: calc(var(--spacing)*0.5);
+        //     padding-right: 2ch;
+        //     text-wrap: wrap;
+        //     flex-grow: 1;
+        // }
+
+        // .date{
+        //      font-size: var(--fs-xsmall);
+        // }
+
+        // figure {
+        //      grid-row: 1
+        // }
+
+    
+
     }
 
 

assets/css/components/_card-article.scss

@@ -6,20 +6,29 @@
 
     padding: var(--padding-inner);
 
-    
-
     @include figure-16-9();
     @include pin();
    
-    & > figure{
+    & > figure,
+    .video-extract{
         width: calc(100% + var(--padding-inner)*2);
         position: relative;
         left: calc(var(--padding-inner)*-1);
         top: calc(var(--padding-inner)*-1);
+
+     
+    }
+
+    .video-extract video{
+        width: 100%;
+        width: 100%;
+        aspect-ratio: 16/9;
+        object-fit: cover;
+        position: relative;
+
     }
 
     .content{
-        // padding: var(--padding-inner);
         display: flex;
         flex-direction: column;
     }
@@ -41,13 +50,13 @@
         line-height: var(--leading-title);
         font-weight: 500;
         text-transform: uppercase;
-         text-wrap: balance;
+        //  text-wrap: balance;
 
         a{ text-decoration: none;}
     }
 
     .description{
-        margin-top: calc(var(--spacing)*0.5);
+        margin-top: calc(var(--spacing)*1.25);
         display: -webkit-box;
         -webkit-line-clamp: 3;    
         -webkit-box-orient: vertical;
@@ -56,14 +65,18 @@
     }
 
     .dl{
-        margin-top: calc(var(--spacing)*0.5);
+        margin-top: calc(var(--spacing)*0.75);
         // font-size: var(--fs-small);
-        border-bottom: var(--border-light);
+    
          font-size: var(--fs-small);
+         flex-grow: 2;
         .dl__group{
             @include grid-content();
             border-top: var(--border-light);
             padding: calc(var(--spacing)*0.5) 0;
+            &:last-of-type{
+                    border-bottom: var(--border-light);
+            }
         }
 
         dt{
@@ -86,12 +99,78 @@
         background-color: var(--grey-950);
     }
 
-    .link-block{
+
-          z-index: 2000;
+
+    .keywords-wrapper{
+        padding-top: calc(var(--spacing)*0.75);
+        z-index: 100;
+        .keywords li a{
+            font-size: var(--fs-xsmall);
+        }
     }
 
 
 
   
 
+    
+
+}
+
+
+  
+[data-template="home"] .pinned-home{
+    grid-column: span 2;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: calc(var(--padding-inner)*2);
+
+
+    figure, 
+    picture, 
+    .video-extract{
+        grid-column: span 2;
+        display: flex;
+
+        width: calc(100% + var(--padding-inner)*4);
+        position: relative;
+        left: calc(var(--padding-inner)*-2);
+        top: calc(var(--padding-inner)*-2);
+    }
+
+
+    .title{
+        grid-column: span 2;
+        font-size: var(--fs-text);
+        padding-right: 3ch;
+        margin-bottom: calc(var(--spacing)*1);
+        margin-top: calc(var(--spacing)*0.5);
+    }
+
+
+     .description{
+        grid-column: 1;
+        grid-row: 3;
+        padding-right: 3ch;
+        display: block;
+        -webkit-line-clamp: unset;
+        -webkit-box-orient: unset;
+        overflow: visible;
+        font-size: var(--fs-normal);
+        margin-top: 0px;
+    }
+
+    dl{
+        margin-top: 0px;
+        grid-column: 2;
+        grid-row: 3;
+    }
+
+    .keywords-wrapper{
+        grid-column: span 2;
+        grid-row: 4;
+    }
+
+
 }

assets/css/components/_card-block-small.scss

@@ -0,0 +1,141 @@
+.card--block-small {
+  border-bottom: var(--border-light);
+  padding: var(--padding-inner) 0;
+  padding-bottom: calc(var(--spacing) * 0.75);
+
+  &:first-of-type {
+    border-top: var(--border-light);
+  }
+
+  @include grid-content();
+  @include hover-card-line();
+
+  .group-top {
+    position: relative;
+    // top: -5px;
+  }
+
+  @include btn--go-to();
+
+  .btn--go-to {
+    top: calc(var(--padding-inner) * 1);
+    bottom: auto;
+  }
+
+  .title {
+    grid-column: 2;
+    grid-row: 2;
+    font-size: var(--fs-normal);
+    line-height: var(--leading-title);
+    font-weight: 500;
+    text-transform: uppercase;
+    margin-right: 4ch;
+  }
+
+  .date {
+    font-size: var(--fs-small);
+    grid-column: 2;
+    grid-row: 1;
+    margin-top: 4px;
+  }
+
+  @media #{$small} {
+    display: block;
+    padding-bottom: calc(var(--spacing) * 0.5);
+
+    .btn--go-to {
+      top: auto;
+      bottom: calc(var(--padding-inner) * 1);
+    }
+
+    .group-top {
+      top: 0px;
+      margin-bottom: calc(var(--spacing) * 0.5);
+    }
+
+    .title {
+      margin-bottom: calc(var(--spacing) * 0.75);
+      margin-right: 1ch;
+    }
+
+    .date {
+      margin-top: 0px;
+    }
+  }
+}
+
+.card--block-small {
+  .card--open-graph {
+    grid-column: 2;
+    z-index: 10;
+  }
+
+  .card--open-graph:not(:last-child) {
+    margin-bottom: 1rem;
+  }
+
+  .open-graph__details {
+    grid-column: 2;
+
+    summary,
+    .summary-inner {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 0.5ch;
+    }
+
+    .arrow-details {
+      line-height: 0;
+      --size: 11px;
+      height: var(--size);
+      width: var(--size);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      top: -2px;
+
+      svg {
+        transition: transform 0.2s ease-in;
+        width: 100%;
+        fill: var(--color-txt);
+      }
+    }
+
+    summary:hover {
+      color: var(--color-txt);
+
+      .arrow-details svg {
+        fill: var(--color-txt);
+      }
+    }
+
+    &[open] {
+      .arrow-details svg {
+        transform: rotate(90deg);
+      }
+    }
+
+    summary {
+      color: var(--color-txt-light);
+
+      .arrow-details svg {
+        fill: var(--color-txt-light);
+      }
+    }
+
+    @media #{$x-small} {
+      summary {
+        @include grid-content();
+        grid-row-gap: 0;
+
+        .summary-inner {
+          grid-column: 2;
+        }
+      }
+
+      grid-column: 1/3;
+    }
+  }
+}

assets/css/components/_card-block.scss

@@ -1,4 +1,4 @@
-.card--impact {
+.card--block {
 
     container-type: inline-size;
     container-name: impact;
@@ -14,35 +14,61 @@
 
 
     @include hover-card-line();
-    @include figure-3-1();
+    @include figure-16-9();
     @include pin();
 
+
+
+    .group-top{
+        display: flex;
+        gap: calc(var(--padding-inner)*0.5);
+    }
+
+    
+
     .title{
         font-size: var(--fs-normal);
         font-weight: 500;
         text-transform: uppercase;
         line-height: var(--leading-title);
-        padding-top:  calc(var(--spacing)*0.5);
+        padding-top:  calc(var(--spacing)*0.75);
+         padding-bottom:  calc(var(--spacing)*1);
         margin-right: 2ch;
     }
 
     .date{
          font-size: var(--fs-small);
-         margin-top: calc(var(--spacing)*1.5);
     }
 
     .investigations{
         text-decoration: none;
         list-style: none;
+        // border-top: var(--border-light);
+        padding-top: calc(var(--spacing)*0.5);
+        width: 100%;
+
+        z-index: 100;
         li{
-            font-size: var(--fs-small);
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
             color: var(--color-txt-light);
+            font-size: var(--fs-small);
             a{
                 text-decoration: none;
+                color: var(--color-txt-light);
             }
             a::before{
                 content: "↪ "
             }
+            &:hover{
+                a{
+                    text-decoration: underline 1px;
+                    text-underline-offset: 2px;
+                    color: var(--color-txt);
+                }
+            }
         }
     }
 
@@ -69,6 +95,10 @@
         top: 3px;
     }
 
+    // .link-block{
+    //     background-color: rgba(255, 0, 0, 0.781);
+    // }
+
    
 
 
@@ -76,7 +106,7 @@
 
 
 @media #{$small-up}{
-.card--impact,
+.card--block,
 .grid-sizer{
     width: calc(50% - 13px);
 }

assets/css/components/_card-impact-small.scss

@@ -1,104 +0,0 @@
-
-.card--impact-small {
-
-    border-bottom: var(--border-light);
-    &:first-of-type{
-        border-top: var(--border-light);
-    }
-
-    @include grid-content();
-    padding: var(--padding-inner) 0;
-
-    &.has-link {
-        @include hover-card-line();
-    }
-
-    @include btn--go-to();
-
-    .btn--go-to {
-        top: calc(var(--padding-inner)*1);
-        bottom: auto;
-    }
-
-    .title {
-        grid-column: 2;
-        font-size: var(--fs-normal);
-        font-weight: 500;
-        text-transform: uppercase;
-        margin-right: 4ch;
-    }
-
-    .date{
-        font-size: var(--fs-small);
-    }
-
-    .card--open-graph {
-        grid-column: 2;
-        z-index: 10;
-    }
-
-    .keywords {
-        grid-column: 2;
-        z-index: 10;
-        @media #{$x-small} { display: none; }
-
-
-    }
-
-        &:not([data-impact-type="media"]) .content, 
-        .keywords {
-            @media #{$x-small} {
-                grid-column: span 2;
-            }
-        }
-
-        .category {
-            width: auto;
-            justify-self: start;
-            position: relative;
-            top: -5px;
-        }
-
-        &:not([data-impact-type="media"]) {
-            .content {
-                padding-right: calc(var(--padding-inner)*2.5);
-                @media #{$x-small} {
-                    padding-right: 0;
-                }
-            }
-
-        }
-
-
-        .open-graph__details {
-            grid-column: 2;
-            @include details-summary();
-
-            summary {
-                color: var(--color-txt-light);
-
-                .arrow-details svg {
-                    fill: var(--color-txt-light);
-                }
-            }
-
-            @media #{$x-small} {
-                summary {
-                    @include grid-content();
-                    grid-row-gap: 0;
-
-                    .summary-inner {
-                        grid-column: 2;
-                    }
-                }
-
-                grid-column: 1/3;
-            }
-        }
-
-
-
-    
-}
-
-

assets/css/components/_card-open-graph.scss

@@ -2,6 +2,7 @@
 
      container-type: inline-size;
     container-name: opengraph;
+  z-index: calc(var(--z-header) - 100);
 
     .open-graph__inner{
         @include grid-content();

assets/css/components/_card-package.scss

@@ -1,94 +0,0 @@
-// .card--package {
-//   position: relative;
-//   max-width: var(--max-w-cards);
-//   border: var(--border-light);
-
-//   @include grid-content();
-//   @include figure-16-9();
-
-//   container-type: inline-size;
-//   container-name: cardpackage;
-
-//   figure {
-//     border-radius: var(--radius-small);
-//     background-color: var(--color-accent);
-
-//     img {
-//       opacity: 0.8;
-//       filter: grayscale(1);
-//     }
-//   }
-
-//   .content {
-//     display: flex;
-//     flex-direction: column;
-//     font-size: var(--fs-small);
-//   }
-
-//   .title {
-//     font-weight: 500;
-//     font-size: var(--fs-normal);
-//     line-height: var(--leading-title);
-
-//     margin-bottom: 0.75em;
-//     text-wrap: balance;
-//     max-width: 42ch;
-//     text-transform: uppercase;
-//     padding-top: calc(var(--spacing) * 0.25);
-//     a {
-//       text-decoration: none;
-//     }
-
-//     @media #{$small} {
-//       font-size: var(--fs-normal);
-//     }
-
-//     .icon {
-//       padding-right: 1ch;
-//       position: relative;
-//       top: 1px;
-//       svg {
-//         height: 15px;
-//         width: 15px;
-//         fill: var(--color-txt);
-//       }
-//     }
-//   }
-
-//   .short {
-//     @include clamp(3);
-//     flex-grow: 1;
-//     padding-right: calc(var(--padding-inner) * 2);
-//   }
-
-//   ul {
-//     display: flex;
-//     list-style: none;
-//     gap: 1ch;
-//     color: var(--color-txt-light);
-//     padding-top: calc(var(--spacing) * 0.5);
-
-//     li + li {
-//       &::before {
-//         content: "|";
-//         padding-right: 1ch;
-//       }
-//     }
-//     @media #{$small} {
-//       font-size: var(--fs-small);
-//     }
-//   }
-
-//   .btn--go-to {
-//     position: absolute;
-//     right: calc(var(--padding-inner) * 1);
-//     bottom: var(--padding-inner);
-//   }
-
-//   @include btn--go-to();
-
-//   &:hover {
-//     background-color: var(--grey-950);
-//     border-color: var(--color-txt);
-//   }
-// }

assets/css/components/_category.scss

@@ -0,0 +1,102 @@
+.type {
+  height: calc(var(--h-block) * 0.75);
+  // border-radius: calc(var(--h-block)*0.75/2);
+  border-radius: var(--radius-small);
+  width: max-content;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1ch;
+  padding-top: 3px;
+
+  font-size: var(--fs-xsmall);
+  line-height: 1;
+  font-weight: 500;
+
+  background-color: var(--color-txt);
+  color: var(--color-bg);
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.category {
+  height: calc(var(--h-block) * 0.75);
+  border-radius: var(--radius-small);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1ch;
+  padding-top: 3px;
+
+  font-size: var(--fs-xsmall);
+  line-height: 1;
+  font-weight: 500;
+
+  border: var(--border-medium);
+  background-color: var(--color-bg);
+  color: var(--color-txt-light);
+
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.page__category {
+  height: calc(var(--h-block) * 1);
+  border-radius: var(--radius-small);
+  border: var(--border-medium);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5ch;
+  padding-top: 5px;
+
+  font-size: var(--fs-small);
+
+  background-color: var(--color-bg);
+  color: var(--color-txt-light);
+  font-weight: 500;
+
+  overflow: hidden;
+  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;
+  }
+}
+
+.page__type {
+  height: calc(var(--h-block) * 1);
+  border-radius: var(--radius-small);
+  margin-left: calc(var(--padding-inner) * 0.25);
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 1.5ch;
+  padding-top: 5px;
+
+  font-size: var(--fs-small);
+
+  background-color: var(--color-txt);
+  color: var(--color-bg);
+  font-weight: 500;
+
+  overflow: hidden;
+  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;
+  }
+}

assets/css/components/_details-summary.scss

@@ -1,46 +0,0 @@
-
-
-
-@mixin details-summary(){
-
-
-    summary,
-    .summary-inner{
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-        gap: 0.5ch;
-    }
-
-    .arrow-details{
-        line-height: 0;
-        --size:  11px;
-        height: var(--size);
-        width: var(--size);
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        top: -2px;
-    
-        svg{
-            transition: transform 0.2s ease-in;
-            width: 100%;
-            fill: var(--color-txt);
-        }
-        
-    }
-
-    summary:hover{
-        color: var(--color-txt);
-        .arrow-details svg{
-            fill: var(--color-txt);
-        } 
-    }
-
-    &[open]{
-        .arrow-details svg{
-            transform: rotate(90deg);
-        } 
-    }
-}

assets/css/components/_dl-table.scss

@@ -0,0 +1,37 @@
+
+  .dl-table {
+    margin-top: calc(var(--spacing) * 1.5);
+    border-bottom: var(--border-light);
+    max-width: var(--max-w-content);
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    font-size: var(--fs-normal);
+
+      @media #{$small} {
+         font-size: var(--fs-small);
+        }
+
+    .dl__group {
+      @include grid-content();
+      column-gap: 1ch;
+      border-top: var(--border-light);
+      padding: calc(var(--spacing) * 0.5) 0;
+    }
+
+    dt {
+      color: var(--color-txt-light);
+      padding-right: 1ch;
+    }
+
+    ul:not(.keywords) {
+      list-style: none;
+
+      li {
+        padding-bottom: 0.2em;
+      }
+    }
+
+    a:hover{
+      opacity: 0.8;
+    }
+  }

assets/css/components/_dropdown.scss

@@ -10,7 +10,7 @@
         position: absolute;
         top: 100%;
         left: 0;
-        min-width: 180px;
+
         margin-top: var(--padding-inner);
         background-color: var(--color-bg);
         border: var(--border);
@@ -19,7 +19,7 @@
         visibility: hidden;
         transform: translateY(-4px);
         transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
-        z-index: 100;
+        z-index: calc(var(--z-header) - 100);
 
         &::before {
             content: "◀";
@@ -29,13 +29,16 @@
             top: -13px;
             left: 16px;
         }
+
         ul {
             list-style: none;
             margin: 0;
             padding: var(--padding-inner);
+            min-width: 180px;
         }
 
-        a, button {
+        a,
+        button {
             display: block;
             width: 100%;
             padding: 0.75em 1ch;
@@ -58,6 +61,7 @@
     &--align-right .dropdown__content {
         left: auto;
         right: 0;
+
         &::before {
             left: auto;
             right: 16px;
@@ -73,35 +77,39 @@
         }
     }
 
-    // PANEL 
     &--position-mobile .dropdown__content {
-                top: auto;
+        background-color: red;
-                bottom: calc(var(--h-block) + var(--padding-inner)*2);
+    }
-                left: auto;
-                right: 0;
-                margin-top: 0;
-                margin-left: 4px;
 
-                &::before{
+    // PANEL
-                    font-family: Arial;
+    // &--position-mobile .dropdown__content {
-                    content: "◀";
+    //         top: auto;
-                    transform: rotate(-90deg);
+    //         bottom: calc(var(--h-block) + var(--padding-inner)*2);
-                    font-size: 14px;
+    //         left: auto;
-                    position: absolute;
+    //         right: 0;
-                    top: auto;
+    //         margin-top: 0;
-                    bottom: -13px;
+    //         margin-left: 4px;
-                    left: auto;
+
-                    right: 10%;
+    //         &::before{
-                }
+    //             font-family: Arial;
-            }
+    //             content: "◀";
+    //             transform: rotate(-90deg);
+    //             font-size: 14px;
+    //             position: absolute;
+    //             top: auto;
+    //             bottom: -13px;
+    //             left: auto;
+    //             right: 10%;
+    //         }
+    //     }
 
 
 
-            &--position-mobile.is-open {
+    //     &--position-mobile.is-open {
-                .dropdown__content {
+    //         .dropdown__content {
-                    transform: translateX(0);
+    //             transform: translateX(0);
-                }
+    //         }
-            }
+    //     }
 
 
 
@@ -141,6 +149,9 @@
 
         .dropdown__content {
             width: calc(100vw - var(--padding-body)*2);
+            left: auto;
+            right: 0;
+
             .modal--share {
                 width: 100%;
             }
@@ -153,18 +164,42 @@
 
 
 
-@media screen and (max-width: 1280px){
+#bottom-bar {
+
 
-    [data-template="investigations"]{
     .dropdown .dropdown__content {
+        top: auto;
+        bottom: calc(var(--h-block) + var(--padding-inner)*2);
         left: auto;
         right: 0;
+        margin-top: 0;
+        margin-left: 4px;
+
         &::before {
+            font-family: Arial;
+            content: "◀";
+            transform: rotate(-90deg);
+            font-size: 14px;
+            position: absolute;
+            top: auto;
+            bottom: -13px;
             left: auto;
-                right: 16px;
+            right: 10%;
+              @media #{$x-small} {
+                  left: 20%;
+            right: auto;
+                }
 
         }
+
+    }
+
+
+
+    .dropdown.is-open {
+        .dropdown__content {
+            transform: translateX(0);
+        }
     }
 }
 
-}

assets/css/components/_figures.scss

@@ -1,64 +1,23 @@
-
 @mixin figure-16-9 {
-    & > picture, 
   & > figure {
     aspect-ratio: 16/9;
     display: flex;
     overflow: hidden;
-        img{
+    img,
+    picture {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-
     }
   }
 }
 
-
+figcaption,
-
+.caption {
-@mixin figure-3-1(){
+  font-size: var(--fs-small) !important;
-    & > picture,
+  color: var(--color-txt-light);
-    & > figure{
+  font-weight: 500;
-        aspect-ratio: 3/1;
+  line-height: 1.1;
-        overflow: hidden;
+  margin: calc(var(--spacing) * 0.5) 0 !important;
-        img{
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
 }
-    }
-}
-
-
-
-// @mixin figure-2-1(){
-//     & > picture,
-//     & > figure{
-//         aspect-ratio: 2/1;
-//         overflow: hidden;
-//         img{
-//             width: 100%;
-//             height: 100%;
-//             object-fit: cover;
-//         }
-//     }
-// }
-
-// @mixin figure-16-9-hover{
-//     figure{
-//         aspect-ratio: 16/9;
-//         display: flex;
-//         overflow: hidden;
-//         img{
-//             width: 100%;
-//             height: 100%;
-//             object-fit: cover;
-//             transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
-
-//         }
-//     }
-//     &:hover{
-//         figure img{  transform: scale(1.05);  }
-//     }
-// }

assets/css/components/_investigation-hero.scss

@@ -0,0 +1,91 @@
+#investigation__hero {
+  width: 100%;
+  max-width: var(--max-w-cards);
+  margin-inline: auto;
+
+  figcaption {
+    color: var(--color-txt-light);
+    font-size: var(--fs-small);
+    @media #{$x-small} {
+      font-size: var(--fs-xsmall);
+    }
+    padding: calc(var(--spacing) * 0.5) var(--padding-body);
+    padding-bottom: 0;
+    text-align: center;
+    max-width: var(--max-w-content);
+    margin-inline: auto;
+  }
+
+  figure {
+    width: 100%;
+    position: relative;
+    img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 2/1;
+      object-fit: cover;
+    }
+  }
+
+  .player-container {
+    width: 100%;
+    position: relative;
+    aspect-ratio: 2/1;
+
+    .extract,
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      position: relative;
+    }
+
+    .video-full {
+      width: 100%;
+      height: 100%;
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+      display: none;
+    }
+
+    #hero-play-video {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      text-transform: uppercase;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .btn--bold {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        padding: 0 1ch;
+        opacity: 0.8;
+        &:hover {
+          opacity: 1;
+        }
+      }
+
+      .text {
+        color: black;
+        font-weight: 500;
+        line-height: 1;
+        padding-top: 4px;
+      }
+
+      svg {
+        width: 18px;
+        height: 18px;
+        fill: black;
+        opacity: 0.8;
+      }
+    }
+  }
+}

assets/css/components/_lightbox.scss

@@ -0,0 +1,81 @@
+#lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-header) + 10);
+  background-color: rgba(0, 0, 0, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+
+  body.lightbox-open & {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+}
+
+#lightbox-close {
+  position: absolute;
+  top: var(--padding-body);
+  right: var(--padding-body);
+  background: none;
+  border: none;
+  color: var(--color-txt);
+  cursor: pointer;
+  padding: 8px;
+  z-index: 1;
+  line-height: 0;
+
+  svg {
+    width: 30px;
+    fill: var(--color-txt);
+    transition: fill 0.2s ease;
+  }
+
+  &:hover svg {
+    fill: var(--grey-400);
+  }
+}
+
+#lightbox-swiper {
+  width: 90vw;
+
+  .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    figure {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: default;
+
+      img {
+        max-width: 90vw;
+        max-height: calc(90dvh - 100px);
+        width: auto;
+        height: auto;
+        object-fit: contain;
+      }
+
+      figcaption {
+        margin-top: calc(var(--spacing) * 0.5);
+        color: var(--color-txt-light);
+        font-size: var(--fs-small);
+        text-align: center;
+      }
+    }
+  }
+}
+
+// Cursor zoom-in sur les figures éligibles — desktop uniquement
+@media (min-width: 1080px) {
+  figure[data-lightbox] {
+    cursor: zoom-in;
+  }
+}

assets/css/components/_list-socials.scss

@@ -3,65 +3,82 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 400px;
+    max-width: 350px;
     a{
         display: flex;
         align-items: center;
         text-decoration: none;
     }
 
+    li{
+        --size-icon: 20px;
+    }
+
+    li[data-socials="youtube"]{
+        --size-icon: 26px;
+    }
+
+
+    
     .icon{
-        width: 20px;
+        width: var(--size-icon);
-        height: 20px;
+        height: var(--size-icon);
         position: relative;
         top: -2px;
     }
     svg{
         display: flex;
         align-items: center;
-        width: 20px;
+        width: var(--size-icon);
-        height: 20px;
+        height: var(--size-icon);
+        fill: var(--color-txt);
       
     }
 
-    .text{ display: none; }
+    
+
+    a:hover{
+        svg{
+               fill: var(--color-txt-light);
+        }
+    }
 }
 
 
 
 // with text
-@media #{$small-up}{
+// @media #{$small-up}{
-    .footer__socials .list-socials{
+//     .footer__socials .list-socials{
 
-        display: block;
+//         display: block;
         
-        li{
+//         li{
-            margin-bottom: calc(var(--spacing)*0.25);
+//             margin-bottom: calc(var(--spacing)*0.25);
-            break-inside: avoid;
+//             break-inside: avoid;
-            font-size: var(--fs-small);
+//             font-size: var(--fs-small);
           
-        }
+//         }
         
-        a{
+//         a{
-            gap: 1ch;
+//             gap: 1ch;
         
-            height: calc(var(--spacing)*1);
+//             height: calc(var(--spacing)*1);
-            &::after{
+//             &::after{
-                content: '↗';
+//                 content: '↗';
-                color: var(--grey-300);
+//                 color: var(--grey-300);
-            }
+//             }
 
-            &:hover{
+//             &:hover{
-                color: var(--color-accent);
+//                 color: var(--color-accent);
-                &::after{
+//                 &::after{
-                    color: var(--color-accent);
+//                     color: var(--color-accent);
-                    opacity: 0.5;
+//                     opacity: 0.5;
-                }
+//                 }
-            }
+//             }
-        }
+//         }
-        .text{
+//         .text{
-            display: block;
+//             display: block;
-            line-height: 1;
+//             line-height: 1;
-        }
+//         }
-    }
+//     }
-}
+// }

assets/css/components/_modal-share.scss

@@ -4,7 +4,7 @@
     background-color: var(--color-bg);
 
     .title {
-        font-size: var(--fs-xsmall);
+        font-size: var(--fs-small);
         line-height: 1.2;
          padding: var(--padding-inner);
          padding-bottom: 0px;
@@ -23,7 +23,7 @@
         list-style: none;
 
         li{
-           font-size: var(--fs-xsmall); 
+           font-size: var(--fs-small); 
            border-bottom: var(--border-light);
            &:first-of-type{
             border-top: var(--border-light);
@@ -34,7 +34,7 @@
                 align-items: center;
                 gap: 2ch;
                 text-decoration: none;
-                  font-size: var(--fs-xsmall); 
+                  font-size: var(--fs-small); 
             }
             .icon {
                 width: 16px;

assets/css/components/_newsletter-form.scss

@@ -0,0 +1,112 @@
+.form__newsletter {
+margin-top: calc(var(--spacing)*2);
+  --size: 24px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  position: relative;
+
+  max-width: var(--max-w-content);
+  margin-inline: auto;
+}
+.form__newsletter input[type=email] {
+  height: calc(var(--h-block) * 1.5);
+  width: 100%;
+  border-radius: calc(var(--h-block) * 0.75);
+  outline: none;
+  border: none;
+  padding: 0 2ch;
+  font-family: var(--font);
+  font-size: var(--fs-normal);
+  z-index: 40;
+  padding-top: 4px;
+  border: 1px solid var(--color-txt);
+  background-color: white;
+
+    font-family: var(--font);
+    font-size: var(--fs-normal);
+    font-weight: 500;
+    color: black;
+
+  &::-moz-placeholder,
+  &::placeholder {
+    font-family: var(--font);
+    font-size: var(--fs-normal);
+    font-weight: 500;
+    color: black!important;
+}
+  
+}
+
+.form__newsletter input[type=email]:focus {
+  outline: 3px solid var(--grey-400);
+}
+.form__newsletter button[type=submit] {
+  position: absolute;
+  right: 2px;
+  z-index: 100;
+  --size: calc(var(--h-block)*1.5 - 4px);
+  font-family: var(--font);
+  font-size: var(--fs-button-bold);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  gap: 0.75ch;
+  color: var(--color-accent);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  cursor: pointer;
+}
+.form__newsletter button[type=submit] .icon, 
+.form__newsletter button[type=submit] .txt {
+  z-index: 10;
+}
+.form__newsletter button[type=submit] .icon {
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-bg);
+  text-align: center;
+}
+.form__newsletter button[type=submit] .icon svg {
+  fill: var(--color-bg);
+  width: 80%;
+}
+.form__newsletter button[type=submit] .txt {
+  position: relative;
+  top: 2px;
+  font-size: var(--fs-normal);
+  display: none;
+  padding-left: 1ch;
+}
+.form__newsletter button[type=submit]::after {
+  content: "";
+  display: block;
+  background-color: var(--color-accent);
+  border-radius: calc(var(--size) / 2);
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  right: 0;
+  z-index: 0;
+  transition: width 0.2s;
+}
+.form__newsletter button[type=submit]:hover .txt {
+  color: var(--color-bg);
+  display: block;
+}
+.form__newsletter button[type=submit]:hover::after {
+  width: 100%;
+}
+
+
+[data-template="newsletter"]{
+
+    .details p{
+        font-size: var(--fs-xsmall);
+        margin-top: calc(var(--spacing)*1);
+    }
+
+}

assets/css/components/_slider-before-after.scss

@@ -1,6 +1,4 @@
-
 .slider-before-after {
-
   width: 100%;
 
   max-width: 700px;
@@ -16,7 +14,6 @@
     max-width: 100%;
   }
 
-
   .image-container {
     position: relative;
     width: 100%;
@@ -25,8 +22,6 @@
     // aspect-ratio: 1/1;
   }
 
-
-      
   .slider-image {
     width: 100%;
     height: 100%;
@@ -58,7 +53,7 @@
   .slider-line {
     position: absolute;
     inset: 0;
-        width: .2rem;
+    width: 0.2rem;
     height: 100%;
     background-color: #fff;
     /* z-index: 10; */
@@ -71,7 +66,7 @@
     position: absolute;
     background-color: #fff;
     color: black;
-        padding: .5rem;
+    padding: 0.5rem;
     border-radius: 100vw;
     display: grid;
     place-items: center;
@@ -80,7 +75,6 @@
     transform: translate(-50%, -50%);
     pointer-events: none;
     /* z-index: 100; */
-        box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
+    box-shadow: 1px 1px 1px hsl(0, 50%, 2%, 0.5);
   }
-
 }

assets/css/components/_summary-hero.scss

@@ -1,136 +0,0 @@
-   #summary__hero{
-        width: 100%;
-        position: relative;
-       left: 0;
-
-
-        figcaption{
-            color: var(--color-txt-light);
-            font-size: var(--fs-small);
-            @media #{$x-small}{    font-size: var(--fs-xsmall); }
-            padding: calc(var(--spacing)*0.5) var(--padding-body);
-            padding-bottom: 0;
-                
-            
-        }
-
-        figure{
-            width: 100%;
-            position: relative;
-            img{
-                width: 100%;
-                aspect-ratio: 2/1;
-                object-fit: cover;
-            }
-        }
-
-        .swiper-slide{
-            position: relative;
-        }
-
-        .swiper-button-prev, .swiper-button-next{
-            --swiper-navigation-sides-offset: 32px;
-            --swiper-navigation-size: 32px;
-
-            @media #{$x-small}{
-                --swiper-navigation-sides-offset: 15px;
-                --swiper-navigation-size: 15px;
-            }
-            opacity: 0.8;
-
-            // Position buttons relative to the image (16/9 aspect ratio)
-            // Calculate: 50% of image height = 50% * (9/16) of width
-            // Image is 100vw wide, so center at: (100vw * 9/16) / 2
-            top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
-            margin-top: 0;
-
-            svg{ color: white; }
-        }
-
-        .swiper-pagination{
-            position: static;
-            margin-top: calc(var(--spacing)*0.5);
-            padding: 0 var(--padding-body);
-            text-align: center;
-
-            .swiper-pagination-bullet{
-                width: 15px;
-                height: 4px;
-                border-radius: 2px;
-                background: var(--color-txt-light);
-                // opacity: 0.4;
-            }
-
-            .swiper-pagination-bullet-active{
-                background: var(--color-txt);
-                opacity: 0.8;
-            }
-        }
-
-
-        .player-container{
-            width: 100%;
-            position: relative;
-            aspect-ratio: 2/1;
-      
-            .extract, video{
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                position: relative;
-            }
-
-
-       
-            .video-full{ 
-                width: 100%;
-                height: 100%;
-                iframe{
-                    width: 100%;
-                    height: 100%;
-                }
-                display: none; 
-            }
-
-            #hero-play-video{
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                top: 0;
-                left: 0;
-                text-transform: uppercase;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              
-
-                .btn--bold{
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    gap: 1ch;
-                    padding: 0 1ch;
-                    opacity: 0.8;
-                    &:hover{
-                        opacity: 1;
-                    }
-                }
-
-                .text{
-                    color: black;
-                    line-height: 1;
-                    padding-top: 4px;
-                }
-
-                svg{
-                    width: 18px;
-                    height: 18px;
-                    fill: black;
-                    opacity: 0.8;
-                }
-            }
-        
-        }
-
-
-    }

assets/css/components/_support-bar.scss

@@ -0,0 +1,63 @@
+#support-bar {
+    height: var(--header-h);
+    background-color: var(--color-accent);
+    color: var(--color-bg);
+    padding: 0 var(--padding-body);
+
+    
+
+    .support-bar__container {
+        max-width: var(--max-w-cards);
+        margin: 0 auto;
+
+        height: 100%;
+        display: flex;
+
+        @media #{$small-up} {
+
+            align-items: center;
+            justify-content: space-between;
+            gap: 2ch;
+        }
+
+        @media #{$small} {
+            flex-direction: column;
+            font-size: var(--fs-small);
+            line-height: 1.1;
+            align-items: flex-start;
+            justify-content: center;
+        }
+
+    }
+
+    .baseline {
+        text-transform: uppercase;
+        font-weight: 500;
+
+    }
+
+    .btn {
+        text-transform: uppercase;
+        color: var(--color-bg);
+        font-weight: 500;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        word-wrap: nowrap;
+        white-space: nowrap;
+
+        &:hover {
+            opacity: 0.7;
+        }
+    }
+
+
+     @media #{$small} {
+            height: auto;
+            padding: calc(var(--spacing)*0.75) var(--padding-body);
+            .btn{
+                margin-top: calc(var(--spacing)*0.75);
+            }
+    }
+
+
+}

assets/css/components/_swiper.scss

@@ -1,49 +1,14 @@
 .swiper {
 
-
+    width: 100%!important;
-    --slide-padding: 30px;
+    min-width: 0;
-
 
     .swiper-button-prev,
     .swiper-button-next{
-        --swiper-navigation-size: 32px;
         color: var(--color-txt);
-        background-color: var(--color-bg);
-        height: 100%;
-        width: var(--slide-padding);
-        top: 0px!important;
-        height: calc(100% - var(--spacing)*1);
-        // background-color: red;
-
          svg {
-            width: 14px;
+            width: 20px;
         }
-
-        &.swiper-button-disabled {
-            opacity: 1;
-
-            svg {
-                opacity: 0.05;
-            }
-        }
-    }
-
-    .swiper-button-prev {
-        left: 0px!important;
-        top: 0px;
-        justify-content: flex-start;
-    }
-
-    .swiper-button-next {
-        right: 0px!important;
-        top: 0px;
-        justify-content: flex-end;
-  
-    }
-
-    .swiper-slide {
-        padding-left: var(--slide-padding);
-        padding-right: var(--slide-padding);
     }
 
     .swiper-pagination {
@@ -63,15 +28,28 @@
         }
     }
 
-    @media #{$x-small} {
 
-        .swiper-button-prev,
+    .swiper-wrapper {
-        .swiper-button-next {
+        height: max-content;
-            display: none;
+        align-items: center;
     }
 
     .swiper-slide {
-            padding: 0px;
+        height: auto;
-        }
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
+
+    // @media #{$x-small} {
+
+    //     .swiper-button-prev,
+    //     .swiper-button-next {
+    //         display: none;
+    //     }
+
+    //     .swiper-slide {
+    //         padding: 0px;
+    //     }
+    // }
 }

assets/css/components/_tags.scss

@@ -1,25 +0,0 @@
-.category{
-    height: calc(var(--h-block)*0.75);
-    // border-radius: calc(var(--h-block)*0.75/2);
-    border-radius: var(--radius-small);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1ch;
-    padding-top: 3px;
-
-    font-size: var(--fs-xsmall);
-    line-height: 1;
-    font-weight: 500;
-
-    background-color: var(--color-txt);
-    color: var(--color-bg);
-
-    overflow: hidden;
-    white-space: nowrap;
-
-}
-
-
-

assets/css/components/_text.scss

@@ -0,0 +1,98 @@
+[data-template="package"] .page__content,
+.main__single .page__content,
+#investigation__content {
+  font-size: var(--fs-text);
+
+  p,
+  li,
+  ul {
+    font-size: var(--fs-text);
+  }
+
+  h3,
+  h4,
+  h5 {
+    font-weight: 500;
+    max-width: var(--max-w-content);
+    margin-inline: auto;
+  }
+
+  h3 {
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 2);
+    font-size: 1.45em;
+    text-transform: uppercase;
+  }
+
+  h4 {
+    margin-top: calc(var(--spacing) * 3);
+    margin-bottom: calc(var(--spacing) * 1.5);
+    font-size: 1.2em;
+    text-transform: uppercase;
+  }
+
+  h5 {
+    margin-top: calc(var(--spacing) * 1.5);
+    margin-bottom: calc(var(--spacing) * 1);
+    font-size: 1.2em;
+    text-decoration: 1px underline var(--grey-600);
+    text-underline-offset: 5px;
+  }
+
+  p {
+    margin: calc(var(--spacing) * 0.75) 0;
+  }
+
+  ul {
+    padding-left: 3ch;
+
+    li {
+      margin: calc(var(--spacing) * 0.5) 0;
+    }
+  }
+
+  video,
+  figure,
+  img:not(.slider-before-after img),
+  picture {
+    width: 100%;
+    height: auto;
+  }
+
+  .insert {
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+    border: 1px solid var(--grey-600);
+    padding: calc(var(--padding-inner) * 3);
+    @media #{$small} {
+      padding: calc(var(--padding-inner) * 1);
+    }
+    background-color: var(--grey-800);
+
+    .insert--inner {
+      max-width: var(--max-w-content);
+      margin-inline: auto;
+    }
+
+    h3,
+    h4,
+    h5 {
+      margin-top: 0;
+      @media #{$small} {
+        margin-top: calc(var(--spacing) * 0.5);
+        margin-bottom: calc(var(--spacing) * 0.75);
+      }
+    }
+  }
+
+  & > .insert,
+  & > .swiper,
+  & > .slider-before-after,
+  & > figure {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 2);
+    & + .caption {
+      margin-top: calc(var(--spacing) * -1.5) !important;
+    }
+  }
+}

assets/css/panel.css

@@ -0,0 +1,68 @@
+/* Executive - Regular */
+@font-face {
+  font-family: "Executive";
+  src: url("../fonts/Executive-55Regular.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("../fonts/Executive-56Italic.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("../fonts/Executive-65Medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("../fonts/Executive-66MediumIt.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+
+:root {
+  --font: "Executive", Arial, Helvetica, sans-serif;
+  --color-green: #00ff00;
+}
+
+body * {
+  font-family: var(--font);
+}
+
+.k-login-dialog::before {
+  content: "";
+  text-align: center;
+  height: 7rem;
+  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22200px%22%20viewBox%3D%220%200%20162%2029%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill%3A%20%23fff%22%3E%3Ctitle%3EIndex.ngo%3C%2Ftitle%3E%3Cg%20transform%3D%22matrix(1.04516%2C0%2C0%2C0.659091%2C57.4839%2C-6.59091)%22%3E%3Crect%20x%3D%22-55%22%20y%3D%2210%22%20width%3D%22155%22%20height%3D%2244%22%20style%3D%22fill%3Anone%3B%22%3E%3C%2Frect%3E%3CclipPath%20id%3D%22_clip1%22%3E%3Crect%20x%3D%22-55%22%20y%3D%2210%22%20width%3D%22155%22%20height%3D%2244%22%3E%3C%2Frect%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23_clip1)%22%3E%3Cg%20transform%3D%22matrix(0.95679%2C0%2C0%2C1.51724%2C-55%2C10)%22%3E%3Cpath%20d%3D%22M162%2C29L148.198%2C29L141.174%2C20.767L134.15%2C29L91.184%2C29L91.184%2C0.004L120.653%2C0.004L120.653%2C7.351L102.637%2C7.351L102.637%2C10.867L120.137%2C10.867L120.137%2C18.13L102.637%2C18.13L102.637%2C21.606L120.926%2C21.606L120.926%2C28.951L134.273%2C14.414L120.807%2C0L134.56%2C0L141.388%2C7.767L147.76%2C0L161.201%2C0L148.236%2C13.79L161.996%2C28.997L162%2C29ZM68.58%2C29L54.224%2C29L54.224%2C0.004L68.637%2C0.004C74.672%2C0.004%2078.31%2C0.004%2082.046%2C2.045C86.259%2C4.379%2088.674%2C8.889%2088.674%2C14.417C88.674%2C19.406%2086.862%2C23.405%2083.427%2C25.975C79.463%2C29%2075.345%2C29%2068.58%2C29ZM49.819%2C29L38.775%2C29L31.499%2C19.815C29.746%2C17.735%2028.088%2C15.545%2027.307%2C14.495C27.387%2C15.813%2027.524%2C17.238%2027.524%2C20.499L27.524%2C29L15.965%2C29L15.965%2C0.004L27.009%2C0.004L33.798%2C8.349C36.223%2C11.121%2037.709%2C12.993%2038.393%2C13.881C38.347%2C12.615%2038.26%2C9.911%2038.26%2C6.84L38.26%2C0.004L49.819%2C0.004L49.819%2C29ZM11.559%2C29L0%2C29L0%2C0.004L11.559%2C0.004L11.559%2C29ZM65.784%2C21.818L67.904%2C21.818C70.918%2C21.818%2073.067%2C21.818%2074.728%2C20.531C76.074%2C19.491%2076.845%2C17.308%2076.845%2C14.541C76.845%2C11.526%2076.084%2C9.541%2074.525%2C8.476C72.895%2C7.411%2071.461%2C7.224%2067.578%2C7.224L65.784%2C7.224L65.784%2C21.818Z%22%20style%3D%22fill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  background-size: 100%;
+  display: grid;
+  place-items: flex-end;
+  justify-content: center;
+  margin: 0 var(--dialog-padding);
+}
+
+.k-login-dialog .k-dialog-body {
+  padding-top: 0;
+}
+
+.k-button[data-theme^="green"]:not(.k-page-status-icon-option),
+.k-button[data-theme^="positive"]:not(.k-page-status-icon-option) {
+  background-color: var(--color-green);
+}
+.k-button[data-theme^="green"] .k-icon:not([data-type="status-listed"]),
+.k-button[data-theme^="positive"] .k-icon:not([data-type="status-listed"]) {
+  color: #000;
+}
+
+.k-icon[data-type="status-listed"] {
+  color: var(--color-green);
+}

assets/css/partials/_main-layout.scss

@@ -12,21 +12,22 @@ body{
         flex-grow: 1;
         padding: 0 var(--padding-body);
         padding-top: var(--header-h);
-        padding-bottom: calc(var(--spacing)*2);
+        padding-bottom: calc(var(--spacing)*6);
 
-        min-height: 100dvh;
+        // min-height: 100dvh;
-        min-height: 100vh;
+        // min-height: 100vh;
 
-        .page__header,
         .page__content{
             max-width: var(--max-w-cards);
             margin-inline: auto;
         }
+
+         .page__header{
+            max-width: var(--max-w-cards);
+            margin-inline: auto;
+        }
     }
 
    
     
-
-   
-    
 }

assets/css/partials/_page-aside.scss

@@ -0,0 +1,20 @@
+.package__section, 
+.page__aside{
+    max-width: var(--max-w-cards);
+    margin-inline: auto;
+   padding-top: calc(var(--spacing)*4);
+       @media #{$small} {
+              padding-top: calc(var(--spacing)*3);
+         }
+
+    .section__title,
+    .aside__title{
+      font-weight: 500;
+      text-transform: uppercase;
+      margin-bottom: calc(var(--spacing)*1);
+      font-size: 1.2em;
+       @media #{$small} {
+             font-size: var(--fs-normal);
+         }
+    }
+  }

assets/css/partials/_page-header.scss

@@ -1,36 +1,17 @@
-.page__type{
-    
-    height: calc(var(--h-block)*1);
-    border-radius: var(--radius-small);
-    border: var(--border-medium);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 1.5ch;
-    padding-top: 5px;
-
-    font-size: var(--fs-small);
-
-    background-color: var(--color-bg);
-    color: var(--color-txt-light);
-    font-weight: 500;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-transform: uppercase;
-
-}
-
 
 
 main .page__header {
     margin-top: calc(var(--spacing) * 3);
     margin-bottom: calc(var(--spacing) * 2);
   
-    @media #{$small} {
-      margin-top: calc(var(--spacing) * 2);
  
+    @media #{$small} {
+      margin-top: calc(var(--spacing) * 1);
+
+    }
+
+    .page__type{
+margin-bottom: calc(var(--spacing) * 1);
     } 
 
     .page__title {
@@ -40,20 +21,79 @@ main .page__header {
       font-size: var(--fs-medium);
       font-weight: 500;
       line-height: var(--leading-title);
-      margin-top: calc(var(--spacing) * 1);
+      margin-bottom: calc(var(--spacing) * 2);
-      margin-bottom: calc(var(--spacing) * 1.5);
+
+       @media #{$small-up} {
       text-wrap: balance;
+         }
+      
+       @media #{$small} {
+        margin-bottom: calc(var(--spacing) * 1);
+         }
       
     }
 
-    .description {
+    .page__cover{
+       margin-top: calc(var(--spacing) * 2);
+    }
+
+    .date{
+      display: block;
+       margin-top: calc(var(--spacing) * -1.5);
+      margin-bottom: calc(var(--spacing) * 2);
+      color: var(--color-txt-light);
+        @media #{$small} {
+                margin-bottom: calc(var(--spacing) * 1);
+             margin-top: calc(var(--spacing) * -0.75);
+         }
+    }
+
+    .page__description {
       font-size: var(--fs-text);
       margin-bottom: calc(var(--spacing) * 3);
+        @media #{$small} {
+           margin-bottom: calc(var(--spacing) * 1.5);
+         }
+      max-width: var(--max-w-content);
     }
 
-    // .description-medium{
+    ul.list-nav{
-    //   font-size: var(--fs-medium);
+      display: flex;
-    //    max-width: 58ch;
+      // justify-content: space-between;
-    //    line-height: 1.1;
+      flex-wrap: wrap;
-    // }
+      // gap: 3ch;
+      list-style: none;
+      margin-top: calc(var(--spacing) * -1.5);
+      @media #{$small} {
+             margin-top: calc(var(--spacing) * -0.5);
+         }
+      color: var(--color-txt-light);
+
+      li{
+       white-space: nowrap;
+       margin-right: 2ch;
+       &:last-of-type{
+        margin-right: 0;
+       }
+         @media #{$small} {
+       width: 12ch;
+        }
+       margin-bottom: calc(var(--spacing) * 0.25);
+      }
+
+      a{
+        text-decoration: none;
+        text-transform: lowercase;
+        &::after{
+          content: " ↓";
+        }
+      }
+      li:hover{
+        color: var(--color-txt)
+      }
+
+    }
+
+
+   
 }

assets/css/partials/_site-footer.scss

@@ -1,116 +1,146 @@
 #site-footer {
 
+ 
+
+
     background-color: var(--dark);
-   padding: calc(var(--padding-body)*2) var(--padding-body);
+    padding: calc(var(--spacing)*2) var(--padding-body) calc(var(--spacing)*1) var(--padding-body);
     z-index: 500;
 
     .site-footer__container {
         max-width: var(--max-w-cards);
         margin: 0 auto;
-        padding: 0 var(--padding-body);
+    
+        font-size: var(--fs-small);
     }
 
+
+
     .logo {
-    margin-top: calc(var(--spacing)*0.25);
+        // margin-top: calc(var(--spacing)*0.25);
-    margin-bottom: calc(var(--spacing)*1);
+        margin-bottom: calc(var(--spacing)*0.5);
+
         svg {
             width: 100px;
         }
     }
 
-   p{
+    .baseline{
-    margin: calc(var(--spacing)*0.5) 0;
+        max-width: 40ch;
-    font-size: var(--fs-small);
+    }
+
+    .list-links {
+        
+
+        ul {
+            list-style: none;
+
+             li {
+                margin-bottom: calc(var(--spacing)*0.25);
+            }
+
             a {
                 text-decoration: none;
-        &:hover{
+            }
+
+            li:hover a {
                 text-decoration: underline;
-            color: currentColor;
-        }
-    }
-   }
-
-   .p__small{
-    font-size: var(--fs-xsmall);
-    color: var(--grey-600);
-   }
-
-   .footer__mentions{
-        p{       
-            font-size: var(--fs-xsmall);
-            color: var(--color-txt)
             }
         }
 
-
+        .hightlight {
-    .footer__socials > p{
+            text-transform: uppercase;
             font-weight: 500;
+        }
+    }
+
+
+    
+
+    // @media #{$medium} {
+        
+
+    //       }
+
+    @media #{$small-up} {
+        .site-footer__container {
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            column-gap: calc(var(--padding-inner)*2);
+
+            .logo{ grid-column: span 2;}
+            .baseline{
+                grid-column: 1;
+                grid-row: 2;
+            }
+            .list-links{
+                grid-column: 2;
+                grid-row: 2;
+                    max-width: 350px;
+                 display: flex;
+                 justify-content: space-between;
+                 gap: var(--padding-inner);
+                 
+                 
+                  
+                    li {
+                        // margin-bottom: calc(var(--spacing)*1);
+                    }
+            }
+            .socials{
+                grid-column: 1;
+                grid-row: 3;
+            }
+
+
+            .credits {
+                font-size: var(--fs-xsmall);
+                 grid-column: 1;
+                grid-row: 4;
+                   margin-top: calc(var(--spacing)*2);
+            }
+        }
+
+      
+
+
         
     }
 
     @media #{$small} {
 
+        .list-links {
+            margin-top: calc(var(--spacing)*1);
+            // li {
+            //     margin-bottom: calc(var(--spacing)*0.25);
+            // }
 
-    .footer__socials{
+            .hightlight {
-        margin-top: calc(var(--spacing)*0.75);
-        padding-top: calc(var(--spacing)*0.25);
-        border-top: var(--border-light);
-
-    
-
-        .list-socials{
                 margin-top: calc(var(--spacing)*0.5);
-            margin-bottom: calc(var(--spacing)*0.75);
             }
         }
-    .footer__mentions{
 
-        border-top: var(--border-light);
+  
-        padding-top: calc(var(--spacing)*0.25);
+
-        p{       
+    .socials {
-            font-size: 12px;
+        margin-top: calc(var(--spacing)*1);
+    }
+
+        .credits {
+            margin-top: calc(var(--spacing)*2);
+        }
+
+
+
+    }
+
+       @media #{$x-small} {
+          .credits {
             text-align: center;
         }
              }
 
-    .p__small{
-        font-size: 12px;
-    }
-   }
 
 
-   @media #{$small-up}{
-
-    .site-footer__container{
-        display: grid;
-        grid-template-columns: 3fr 2fr;
-        column-gap:  calc(var(--spacing)*2);
-    }
-
-    .footer__newsletter{
-        grid-column: 1;
-        grid-row: 2;
-    }
-
-    .footer__socials{
-        grid-column: 2;
-        grid-row: 2;
-    }
-
-    .footer__socials .socials{
-        columns: 2;
-        margin-top: calc(var(--spacing)*1);
-    }
-    
-    .footer__mentions{
-        grid-column: span 2;
-        p{       
-            margin-top: calc(var(--spacing)*1);
-        }
-
-    }
-
-   }
-
 
 }

assets/css/partials/_site-header.scss

@@ -1,5 +1,4 @@
 #site-header {
-
   z-index: var(--z-header);
   --gap: 3ch;
 
@@ -17,16 +16,13 @@
   .site-header__inner {
     width: 100%;
     height: 100%;
-    // border-bottom: 1px solid var(--color-bg);
-    // transition: border-color ease-in .5s;
 
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--gap);
+    gap: calc(var(--gap) * 0.25);
   }
 
-
   a {
     text-decoration: none;
     &:hover {
@@ -34,40 +30,113 @@
     }
   }
 
-
   #site-title {
-    flex-grow: 2;
+    position: relative;
-    // opacity: 0;
+    top: -3px;
+    width: 140px;
+
     svg {
       width: 100px;
+    }
+
     @media #{$small} {
+      svg {
         width: 80px;
       }
+      top: -4px;
     }
   }
 
-  .header__title-page{
+  #nav-highlight,
-    display: none;
+  #nav-investigation {
     flex-grow: 2;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    text-transform: uppercase;
-    font-size: var(--fs-small);
-    line-height: 2;
-   
-  }
-
     ul {
-    list-style-type: none;
+      width: 100%;
       display: flex;
       align-items: center;
+      justify-content: center;
       gap: var(--gap);
-    text-transform: uppercase;
+      list-style-type: none;
-    font-weight: 500;
+
+      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 {
+    position: absolute;
+    // transition: top var(--transition-scroll);
+    top: 10%;
+    left: 0;
+    display: flex;
+    opacity: 0;
+    // transform: translateY(-10px);
+    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;
+    }
+
+    li.is-selected {
+      color: var(--color-txt);
+      &:hover {
+        color: var(--color-txt);
+        pointer-events: none;
+        a:hover {
+          color: var(--color-txt);
+        }
+      }
+    }
+  }
 
   #theme-toggle {
     width: var(--h-block);
@@ -79,17 +148,20 @@
       width: 18px;
       position: relative;
       top: -2px;
-    
     }
   }
 
   #lang-toggle {
     display: flex;
-    gap: 1ch;
+    gap: 0.75ch;
-    button{
+    padding-right: 1.5ch;
+    a {
+      font-size: var(--fs-small);
       font-weight: 500;
     }
-    button:disabled{ color: var(--color-txt-light); }
+    button:disabled {
+      color: var(--color-txt-light);
+    }
   }
 
   #menu-toggle {
@@ -98,32 +170,90 @@
       width: 30px;
       fill: var(--color-txt);
     }
-    .close{ display: none; }
+    .close {
-  
-  }
-
-  button{
-    
-    &:hover{
-      svg{ fill: var(--grey-200)!important; }
-    }
-  }
-
-}
-
-
-
-#site-header.is-visible{
-  // .site-header__inner{
-  //   border-color: var(--grey-800);
-  // }
-}
-
-
-@media #{$medium}{
-  #nav-highlight{
       display: none;
     }
   }
 
+  button {
+    &:hover {
+      svg {
+        fill: var(--grey-200) !important;
+      }
+    }
+  }
+}
 
+// 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);
+//     }
+//   }
+// }
+
+// Quand le menu est ouvert : on dimme tout sauf le logo
+body.menu-open #site-header {
+  cursor: pointer;
+
+  #nav-highlight,
+  #nav-investigation {
+    opacity: 0.15;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in;
+  }
+}

assets/css/partials/_site-menu.scss

@@ -19,8 +19,15 @@
         right: -100vw;
     }
 
-    display: flex;
+
-    flex-direction: column;
+    .site-menu__inner{
+        height: 100%;
+        overflow: scroll;
+        @include hide-scroll();
+
+    }
+    // display: flex;
+    // flex-direction: column;
 
 
     .search-form{
@@ -28,40 +35,62 @@
         margin-bottom: calc(var(--spacing)*1);
     }
 
+
+
     nav{
-        flex-grow: 1;
+          margin-top: calc(var(--spacing)*1.5);
         ul{
             list-style-type: none;
-            text-transform: uppercase;
-            font-weight: 500;
             li{
-                font-size: var(--fs-normal);
+                margin-bottom: calc(var(--spacing)*0.5);
-                a{
-                    display: block;
-                    text-decoration: none;
-                    padding: 0.5em 0;
-                    &:hover{
-                        text-decoration: underline;
             }
+            a{
+                text-decoration: none;
+                font-weight: 500;
             }
         }
 
-            .highlight{
+    }
+
+    #nav-pages{
+        li{
             text-transform: uppercase;
         }
+
     }
+
+    .support{
+  text-transform: uppercase;
     }
 
+    #nav-aside{
+        margin-top: calc(var(--spacing)*1);
+    }
+
+
+
     .socials{
+              margin-top: calc(var(--spacing)*2);
         padding-bottom: calc(var(--spacing)*0.75);
     }
 }
 
+#menu-overlay{
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-header) - 2);
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .3s ease-in, visibility .3s ease-in;
+}
+
 body.menu-open{
 
     #site-menu{
         right: 0;
-
     }
 
     #menu-toggle{
@@ -69,4 +98,10 @@ body.menu-open{
         .close{ display: block!important; }
     }
 
+    #menu-overlay{
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
 }

assets/css/style.scss

@@ -8,14 +8,13 @@
 // @import 'components/nav-tabs';
 // @import 'components/btn--default';
 @import "components/buttons";
-@import "components/tags";
+@import "components/category";
 @import "components/keywords";
-@import "components/details-summary";
 @import "components/sort";
 @import "components/btn-group-mobile";
 
 @import "components/figures";
-@import "components/summary-hero";
+@import "components/investigation-hero";
 @import "components/form-newsletter";
 @import "components/search-form";
 @import "components/list-socials";
@@ -24,22 +23,28 @@
 @import "components/text";
 @import "components/card-article";
 @import "components/card-article-small";
-@import "components/card-impact";
+@import "components/card-block";
-@import "components/card-impact-small";
+@import "components/card-block-small";
-// @import "components/card-package";
 @import "components/card-open-graph";
 @import "components/swiper";
+@import "components/lightbox";
 @import "components/slider-before-after";
+@import "components/dl-table";
+@import "components/bottom-bar";
+@import "components/newsletter-form";
+@import "components/support-bar";
+
 
 @import "partials/site-header";
 @import "partials/site-menu";
 @import "partials/site-footer";
 @import "partials/main-layout";
 @import "partials/page-header";
+@import "partials/page-aside";
 @import "partials/container-cards";
 
 @import "template/home";
+@import "template/page-single";
 @import "template/investigation";
 @import "template/investigation_content";
-@import "template/package";
 @import "template/impacts";

assets/css/template/_home.scss

@@ -7,12 +7,14 @@
     @media #{$medium} {
         padding-bottom: calc(var(--spacing)*4);
         margin-bottom: calc(var(--spacing)*4);
+
             &:first-of-type{
             padding-top: calc(var(--spacing)*2);
         }
         .col-left{
             margin-bottom: calc(var(--spacing)*3); 
         }
+  
     }
 
     .baseline-section {
@@ -22,19 +24,7 @@
         margin-bottom: calc(var(--spacing)*1);
     }
 
-    .btn--bold-inline{
+
-        text-transform: none;
-        font-weight: 500;
-        font-size: var(--fs-small);
-        .icon{
-            position: relative;
-            top: 2px;
-        }
-        svg{
-            width: 13px;
-            height: 13px;
-        }
-    }
 
 
     @media #{$medium-up} {
@@ -45,16 +35,16 @@
             margin-bottom: calc(var(--spacing)*4);
             padding-top: calc(var(--spacing)*4);
             display: grid;
-            --gap: calc(var(--padding-body)*2);
+            // grid-template-columns: 1fr 2fr;
-            grid-template-columns: 1fr 2fr;
+            grid-template-columns: minmax(360px, 1fr) 2fr;
-            grid-gap: var(--gap);
+            grid-gap: calc(var(--padding-body)*3);
         }
 
     
         .col-left {
             align-self: start;
             position: sticky;
-            top: calc(var(--header-h) + var(--spacing)*4);
+            top: calc(var(--header-h) + var(--spacing)*1.5);
 
         }
 
@@ -63,6 +53,13 @@
             height: 100%;
         }
 
+            &#home__investigations .section--inner{
+            .section--inner{ padding-top: calc(var(--spacing)*1); }
+             .col-left{ top: calc(var(--header-h) + var(--spacing)*1.5); }
+        }
+
+
+
 
     }
 
@@ -70,7 +67,7 @@
         @media #{$small} {
 
             .card--article, 
-            .card--impact{
+            .card--block{
                 margin-bottom: calc(var(--spacing)*1);
             }
 
@@ -93,53 +90,19 @@
 
 
 
-
 #home__investigations {
 
+    .section--inner{
+        padding-top: calc(var(--spacing)*1.5);
+    }
+
      @media #{$small-up} {
         .col-right{
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: var(--padding-body);
 
-            .card--article:first-of-type{
-                grid-column: span 2;
        
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-
-                figure, 
-                picture{
-                    grid-column: span 2;
-                }
-
-                .title{
-                    grid-column: span 2;
-                    font-size: var(--fs-medium);
-                    padding-right: 3ch;
-                    margin-bottom: calc(var(--spacing)*1);
-                }
-
-                .description{
-                    grid-column: 1;
-                    grid-row: 3;
-                    padding-right: 3ch;
-                    display: block;
-                    -webkit-line-clamp: unset;
-                    -webkit-box-orient: unset;
-                    overflow: visible;
-                }
-
-                dl{
-                    grid-column: 2;
-                    grid-row: 3;
-                }
-
-                .keywords-wrapper{
-                    grid-column: 2;
-                    grid-row: 4;
-                }
-            }
 
             .see-more{
                 grid-column: span 2;
@@ -151,6 +114,8 @@
 
    
 
+   
+
 }
 
 

assets/css/template/_investigation.scss

@@ -2,11 +2,15 @@
   position: relative;
 
 
-
-
   .page__header {
     margin-inline: auto;
     max-width: var(--max-w-content);
+    margin-bottom: 0px;
+
+ 
+    .page__description{
+      margin-bottom: 0px;
+    }
   }
 
   .page__content{
@@ -14,118 +18,32 @@
 
   }
 
-  .investigation__content{
+     #investigation__hero{
-    font-size: var(--fs-text);
+        @media #{$small-up} {
+        padding-top: calc(var(--spacing)*2.5);
+        margin-bottom: calc(var(--spacing)*3);
          }
-
+          @media #{$small} {
-
+        padding-top: calc(var(--spacing)*1.5);
-
+        margin-bottom: calc(var(--spacing)*2);
-  // @media screen and (max-width: 1340px) {
-  //   margin-left: auto;
-  //   margin-right: calc(var(--padding-body) * 3);
-  //   .panel-left {
-  //     width: calc(100vw - var(--max-w-cards) - var(--padding-body) * 6);
-  //   }
-  // }
-
-  // @media screen and (max-width: 1220px) {
-  //   margin-left: auto;
-  //   margin-right: 0px;
-  //   width: calc(100% - var(--panel-w) * 0.5 - var(--padding-body));
-  //   .panel-left {
-  //     width: calc(var(--panel-w) * 0.5);
-  //   }
-  // }
-
-  // .section__article {
-  //   background-color: red;
-  //   margin-top: calc(var(--spacing) * 3);
-  //   margin-bottom: calc(var(--spacing) * 3);
-  //   max-width: var(--max-w-content);
-  //   margin-inline: auto;
-
-  //   &:target {
-  //     padding-top: calc(var(--header-h) + var(--spacing) * 1);
-  //   }
-
-  //   a:hover {
-  //     color: var(--grey-200);
-  //   }
-
-  //   .section__title {
-  //     font-weight: 500;
-  //     text-transform: uppercase;
-  //     margin-bottom: calc(var(--spacing) * 1);
-  //     padding-right: 2ch;
-  //     text-wrap: balance;
-  //   }
-  // }
-
-
-
-  #investigation__dl {
-    margin-top: calc(var(--spacing) * 1.5);
-    border-bottom: var(--border-light);
-    max-width: var(--max-w-content);
-    margin-inline: auto;
-      font-size: var(--fs-normal);
-
-    .dl__group {
-      @include grid-content();
-      column-gap: 1ch;
-      border-top: var(--border-light);
-      padding: calc(var(--spacing) * 0.5) 0;
-    }
-
-    dt {
-      color: var(--color-txt-light);
-      padding-right: 1ch;
-    }
-
-    ul:not(.keywords) {
-      list-style: none;
-
-      li {
-        padding-bottom: 0.2em;
-      }
-    }
-  }
-
-
-  .investigation__aside{
-    max-width: var(--max-w-cards);
-    margin: calc(var(--spacing)*4) auto;
-
-    .aside__title{
-      font-weight: 500;
-      text-transform: uppercase;
-      margin-bottom: calc(var(--spacing)*1)
-      
          }
       }
 
 
 
 
-// SMALL ----------------------------------------------------------
-// ----------------------------------------------------------------
 
-// @media #{$small} {
-//   [data-template="investigation"] main {
-//     width: 100%;
 
-//     header {
-//       margin-bottom: calc(var(--spacing) * 1);
-//     }
 
-//     .section__article {
-//       margin-top: calc(var(--spacing) * 2);
-//       margin-bottom: calc(var(--spacing) * 2);
-//     }
 
-//     .panel-left {
+
-//       display: none;
+
-//     }
+ 
-//   }
+ 
+
 
 }
+
+
+
+

assets/css/template/_investigation_content.scss

@@ -1,72 +1,100 @@
+#investigation__content {
+  padding-top: calc(var(--spacing) * 4);
 
-.investigation__content {
+  .section-title-only {
-
+    margin-bottom: 0;
-    margin-top: calc(var(--spacing) * 4);
-
-    .section-content {
-        // min-height: calc(100vh - var(--header-h));
-        padding-left: calc(var(--padding-body)*1.5);
-        padding-right: calc(var(--padding-body)*1.5);
-        margin-bottom: calc(var(--spacing)*6);
-        &:target{
-            padding-top: calc(var(--header-h) + var(--spacing)*2);
-            @media #{$small}{   padding-top: calc(var(--header-h) + var(--spacing)*0.5);  }
-        }
-
-    }
-
-
-
-    .section-title {
-
-        max-width: var(--max-w-content);
-        margin-inline: auto;
-        margin-bottom: calc(var(--spacing)*2);
-
-        font-size: var(--fs-medium);
-        
-        font-weight: 500;
-        // text-transform: uppercase;
-        text-wrap: balance;
-        max-width: var(--max-w-content);
   }
 
   .section-txt {
     max-width: var(--max-w-content);
     margin-inline: auto;
+  }
 
+  .subsection-txt .insert {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 2);
+    padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
+  }
 
+  .subsection-txt {
+    max-width: var(--max-w-content);
+  }
+
+  img {
+    max-height: 75vh;
+    object-fit: cover;
+  }
+
+  @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);
-        margin-bottom: calc(var(--spacing)*4);
-        margin-top: calc(var(--spacing)*2);
       position: relative;
 
-
       .media {
         margin-inline: auto;
-            max-width: var(--max-w-content);
+        width: 100%;
-            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;
@@ -92,7 +120,8 @@
       max-width: 700px;
       padding: 0 calc(var(--spacing) * 1);
 
-            figure, img{
+      figure,
+      img {
         width: 100%;
       }
     }
@@ -106,21 +135,15 @@
       gap: 8px;
       z-index: 10;
     }
-
   }
 
-
+  .insert--inner > :last-child {
-
+    margin-bottom: 0px;
-    p {
-        margin: calc(var(--spacing)*0.75) 0;
-    }
-
-    ul {
-        padding-left: 3ch;
-
-        li{
-            margin: calc(var(--spacing)*0.5) 0;
   }
+  .insert--inner > :first-child,
+  .subsection-txt > :first-child,
+  .section-content > :first-child {
+    margin-top: 0px;
   }
 }
 
@@ -128,9 +151,7 @@
   padding-top: calc(var(--header-h) * 2 + var(--spacing)) !important;
 }
 
-
 .media {
-
   video {
     width: 100%;
   }
@@ -138,16 +159,4 @@
   figure {
     height: auto;
   }
-
-    .caption{
-        font-size: var(--fs-small);
-        color: var(--color-txt-light);
-        font-weight: 500;
-        line-height: 1.1;
-    }
-
-    .swiper{
-        width: calc(100% - 60px);
-        max-width: 600px;
-    }
 }

assets/css/template/_package.scss

@@ -1,88 +0,0 @@
-.content-package {
-  // max-width: 1300px;
-  max-width: var(--max-w-cards);
-  margin: 0 auto;
-  display: grid;
-  grid-gap: calc(var(--padding-body) * 1.5);
-  // grid-template-columns: 60% cacl(40% - var(--padding-body)*1.5);
-
-  position: relative;
-
-  .container-cards {
-    display: block;
-    align-self: start;
-  }
-
-  #section__investigations article {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
-
-  .container__title {
-    font-weight: normal;
-    font-size: var(--fs-small);
-    font-weight: 500;
-
-    text-transform: uppercase;
-    margin-bottom: calc(var(--spacing) * 0.75);
-  }
-
-  @media #{$medium} {
-    #section__investigations {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: calc(var(--padding-inner) * 1.5) !important;
-      margin-bottom: calc(var(--spacing) * 3);
-      article {
-        margin-bottom: 0px;
-      }
-      .container__title {
-        grid-column: span 2;
-        margin-bottom: 0px;
-      }
-    }
-    section:target {
-      padding-top: calc(var(--header-h) + var(--spacing));
-    }
-  }
-
-  @media #{$medium-up} {
-    #nav-package {
-      display: none;
-    }
-    grid-template-columns: 1fr 1fr;
-    #section__investigations {
-      display: block;
-      margin-bottom: 0px;
-      article {
-        margin-bottom: calc(var(--spacing) * 1);
-      }
-    }
-  }
-
-  @media #{$small} {
-    display: block;
-    #section__investigations {
-      display: block;
-    }
-    .container__title {
-      margin-bottom: calc(var(--spacing) * 0.5) !important;
-    }
-  }
-}
-
-#nav-package {
-  display: flex;
-  margin-top: calc(var(--spacing) * -1);
-  margin-bottom: calc(var(--spacing) * 2);
-
-  svg {
-    width: 10px;
-    height: 10px;
-    transform: rotate(90deg);
-  }
-}
-@media #{$medium-up} {
-  #nav-package {
-    display: none;
-  }
-}

assets/css/template/_page-single.scss

@@ -0,0 +1,51 @@
+.main__single {
+
+    .page__header{
+        max-width: var(--max-w-content);
+          border-bottom: var(--border-light);
+            padding-bottom: calc(var(--spacing)*1);
+
+        .page__description{
+            margin-bottom: calc(var(--spacing)*1);
+          
+        }
+        @include figure-16-9();
+    }
+
+
+    .page__content{
+        max-width: var(--max-w-content);
+        margin-top: calc(var(--spacing)*3);
+          @media #{$small} {
+             margin-top: calc(var(--spacing)*1.25);
+         }
+    }
+
+}
+
+
+.page__header + #related-investigations{
+    padding-top: calc(var(--spacing) * 1);
+       @media #{$small} {
+             padding-top: 0;
+         }
+}
+
+
+
+[data-template="newsletter"],
+[data-template="about"],
+[data-template="privacy-policy"],
+[data-template="legal-notices"]{
+    .page__header{
+        border-bottom: none;
+        padding-bottom: 0px;
+
+        .page__title{
+            text-align: center;
+            border-bottom: var(--border-medium);
+              padding-bottom: calc(var(--spacing) * 0.5);
+
+        }
+    }
+}

assets/icons/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 375 375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="-0" y="0" width="375" height="375" style="fill:none;"/><path d="M213.542,291.667c0,7.194 -5.827,13.021 -13.021,13.021l-78.125,0c-7.194,0 -13.021,-5.827 -13.021,-13.021c0,-7.194 5.827,-13.021 13.021,-13.021l78.125,0c7.194,0 13.021,5.827 13.021,13.021Zm39.062,-65.104l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021c0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021Zm78.125,-117.187l0,221.354c0,21.533 -17.529,39.062 -39.062,39.062l-208.333,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-286.458c0,-21.533 17.529,-39.062 39.062,-39.062l143.229,0c3.45,0 6.771,1.367 9.212,3.809l91.146,91.146c2.441,2.441 3.809,5.762 3.809,9.212l0,0Zm-104.167,-13.021c0,7.178 5.843,13.021 13.021,13.021l59.717,0l-72.737,-72.737l0,59.717Zm78.125,39.062l-65.104,0c-21.533,0 -39.062,-17.529 -39.062,-39.062l0,-65.104l-117.187,0c-7.178,0 -13.021,5.843 -13.021,13.021l0,286.458c0,7.178 5.843,13.021 13.021,13.021l208.333,0c7.178,0 13.021,-5.843 13.021,-13.021l0,-195.312Zm-195.312,52.083c-0,7.194 5.827,13.021 13.021,13.021l130.208,0c7.194,0 13.021,-5.827 13.021,-13.021c0,-7.194 -5.827,-13.021 -13.021,-13.021l-130.208,0c-7.194,0 -13.021,5.827 -13.021,13.021Z" style="fill-rule:nonzero;"/></svg>

assets/icons/share.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 338 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><rect id="Artboard1" x="0" y="0" width="337.5" height="350" style="fill:none;"/><g><path d="M206.452,92.421l-82.875,46.517c-11.725,-17.346 -31.575,-28.758 -54.067,-28.758c-35.987,0 -65.204,29.217 -65.204,65.204c0,35.987 29.217,65.204 65.204,65.204c21.5,0 40.583,-10.429 52.467,-26.5l83.408,46.817c-1.692,5.804 -2.6,11.933 -2.6,18.275c0,35.987 29.217,65.204 65.204,65.204c35.988,0 65.204,-29.217 65.204,-65.204c0,-35.988 -29.217,-65.204 -65.204,-65.204c-20.317,0 -38.479,9.312 -50.438,23.896l-84.575,-47.471c1.138,-4.821 1.738,-9.85 1.738,-15.017c0,-4.167 -0.392,-8.246 -1.138,-12.196l86.262,-48.417c11.925,13.058 29.088,21.258 48.15,21.258c35.988,0 65.204,-29.221 65.204,-65.208c0,-35.988 -29.217,-65.204 -65.204,-65.204c-35.988,-0 -65.204,29.217 -65.204,65.204c0,7.571 1.292,14.838 3.667,21.6Zm61.538,147.596c21.617,0 39.163,17.546 39.163,39.163c0,21.612 -17.546,39.162 -39.163,39.162c-21.613,0 -39.163,-17.55 -39.163,-39.162c0,-21.617 17.55,-39.163 39.163,-39.163Zm-198.479,-103.796c21.617,0 39.163,17.546 39.163,39.162c0,21.612 -17.546,39.162 -39.163,39.162c-21.612,0 -39.162,-17.55 -39.162,-39.162c0,-21.617 17.55,-39.162 39.162,-39.162Zm198.479,-104.562c21.617,-0 39.163,17.55 39.163,39.162c0,21.617 -17.546,39.167 -39.163,39.167c-21.613,0 -39.163,-17.55 -39.163,-39.167c0,-21.613 17.55,-39.162 39.163,-39.162Z"/></g></svg>

assets/js/back-to-top.js

@@ -0,0 +1,24 @@
+export function backToTop(){
+  const btn = document.getElementById('btn--back-to-top');
+  if (!btn) return;
+
+  let lastY = window.scrollY;
+  let peakY = window.scrollY;
+
+  window.addEventListener('scroll', () => {
+    const currentY = window.scrollY;
+
+    if (currentY > lastY) {
+      peakY = currentY;
+      btn.classList.remove('is-visible');
+    } else {
+      if (currentY <= 800) {
+        btn.classList.remove('is-visible');
+      } else if (peakY - currentY >= 200 && peakY > 600) {
+        btn.classList.add('is-visible');
+      }
+    }
+
+    lastY = currentY;
+  }, { passive: true });
+}

assets/js/banner-sticky-desktop.js

@@ -1,58 +0,0 @@
-let isInitialized = false;
-
-export function bannerStickyDesktop(responsiveSmall) {
-    if (isInitialized) return;
-
-    let body = document.body;
-    let panel = body.querySelector(".panel-left");
-
-    if (!panel) return;
-
-    let footer = document.querySelector("#site-footer");
-
-    // Stocker la hauteur initiale du banner
-    const bannerInitialHeight = panel.offsetHeight;
-
-    function checkScroll() {
-        const screenWidth = window.innerWidth;
-
-        // Vérifier que l'écran est plus grand que responsiveSmall
-        if (screenWidth <= responsiveSmall) {
-            // Réinitialiser le transform si on est en dessous de responsiveSmall
-            panel.style.transform = '';
-            return;
-        }
-
-        // Calculer la position du bas de la fenêtre
-        const windowBottom = window.scrollY + window.innerHeight;
-
-        // Calculer dynamiquement la position du footer à chaque scroll
-        // Utiliser getBoundingClientRect() + scrollY pour une valeur toujours à jour
-        const footerTop = footer.getBoundingClientRect().top + window.scrollY;
-
-        // Calculer de combien on dépasse le haut du footer
-        const overlap = windowBottom - footerTop;
-
-        if (overlap > 0) {
-            // Le bas de la fenêtre a atteint le haut du footer
-            // Déplacer le banner vers le haut du nombre de pixels de dépassement
-            const translateValue = Math.min(overlap, bannerInitialHeight);
-            panel.style.transform = `translateY(-${translateValue}px)`;
-        } else {
-            // Réinitialiser la position si on n'a pas encore atteint le footer
-            panel.style.transform = 'translateY(0)';
-        }
-    }
-
-    window.addEventListener('scroll', checkScroll);
-    window.addEventListener('resize', () => {
-        if (window.innerWidth > responsiveSmall) {
-            panel.style.transform = '';
-        }
-        checkScroll();
-    });
-
-    checkScroll();
-
-    isInitialized = true;
-}

assets/js/bottom-bar.js

@@ -0,0 +1,59 @@
+
+
+export function progressBar(){
+  const bar = document.getElementById('progressBar');
+  if (!bar) return;
+
+  window.addEventListener('scroll', () => {
+    const scrollTop = window.scrollY;
+    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+    const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
+    bar.style.width = `${progress}vw`;
+  }, { passive: true });
+}
+
+
+export function scrollBack(){
+  const bottomBar = document.getElementById('bottom-bar');
+  const navInvestigation = document.getElementById('nav-investigation');
+  const header = document.getElementById('site-header');
+  const footerEl = document.getElementById('support-bar') || document.getElementById('site-footer');
+
+  let lastY = window.scrollY;
+  let peakY = window.scrollY;
+  let visible = false;
+
+  window.addEventListener('scroll', () => {
+    const currentY = window.scrollY;
+
+    // header : basé uniquement sur la position absolue
+    if (navInvestigation && header) {
+      header.classList.toggle('has-nav-investigation', currentY >= 160);
+    }
+
+    // zone footer : bottom-bar masquée et verrouillée
+    const inFooterZone = footerEl && (currentY + window.innerHeight >= footerEl.offsetTop);
+
+    if (inFooterZone) {
+      if (visible) {
+        visible = false;
+        if (bottomBar) bottomBar.classList.remove('is-visible');
+      }
+    } else if (currentY > lastY) {
+      // scroll bas
+      peakY = currentY;
+      if (!visible && currentY > 280) {
+        visible = true;
+        if (bottomBar) bottomBar.classList.add('is-visible');
+      }
+    } else {
+      // scroll haut : hide après 200px remontés
+      if (visible && peakY - currentY >= 200) {
+        visible = false;
+        if (bottomBar) bottomBar.classList.remove('is-visible');
+      }
+    }
+
+    lastY = currentY;
+  }, { passive: true });
+}

assets/js/btn-group-mobile.js

@@ -1,35 +0,0 @@
-let isInitialized = false;
-
-export function btnGroupMobile() {
-    if (isInitialized) return;
-    const btnGroup = document.querySelector(".btn--group__mobile");
-    let footer = document.querySelector("#site-footer");
-
-    if (!btnGroup) return;
-
-    function checkScroll() {
-
-        const windowHeight = window.innerHeight;
-        const scrollY = window.scrollY;
-        const footerTop = footer.getBoundingClientRect().top;
-
-        if (scrollY > windowHeight * 0.6) {
-            btnGroup.classList.add('is-visible');
-
-            if (footerTop < windowHeight) {
-                   btnGroup.classList.remove('is-visible');
-            }
-        } else {
-            btnGroup.classList.remove('is-visible');
-        }
-    }
-
-    window.addEventListener('scroll', checkScroll);
-    checkScroll();
-
-    isInitialized = true;
-
-
-}
-
-

assets/js/dropdown.js

@@ -1,4 +1,4 @@
-export function initDropdowns(responsiveSmall) {
+export function initDropdowns(responsiveSmall, responsiveSmallX) {
   const dropdowns = document.querySelectorAll('.dropdown');
 
   function updateBodyOverflow(isOpen, dropdownElement = null) {
@@ -33,12 +33,14 @@ export function initDropdowns(responsiveSmall) {
         if (other !== dropdown) {
           other.classList.remove('is-open', 'dropdown--align-right');
           other.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+          const otherContent = other.querySelector('.dropdown__content');
+          if (otherContent) otherContent.style.transform = '';
         }
       });
 
       const isOpening = !dropdown.classList.contains('is-open');
 
-      if (isOpening) {
+      if (isOpening && !dropdown.closest('#bottom-bar')) {
         // Vérifie s'il y a la place à droite
         const content = dropdown.querySelector('.dropdown__content');
         const triggerRect = trigger.getBoundingClientRect();
@@ -56,6 +58,19 @@ export function initDropdowns(responsiveSmall) {
       dropdown.classList.toggle('is-open');
       trigger.classList.toggle('is-selected');
 
+      // Décalage horizontal pour #bottom-bar sur petit écran
+      if (dropdown.closest('#bottom-bar') && window.innerWidth < responsiveSmallX) {
+        if (dropdown.classList.contains('is-open')) {
+          requestAnimationFrame(() => {
+            const rect = content.getBoundingClientRect();
+            const paddingBody = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--padding-body')) || 0;
+            content.style.transform = `translateX(${-rect.left + paddingBody}px)`;
+          });
+        } else {
+          content.style.transform = '';
+        }
+      }
+
       // Gère l'overflow du body sur mobile
       updateBodyOverflow(dropdown.classList.contains('is-open'), dropdown);
     });
@@ -70,6 +85,8 @@ export function initDropdowns(responsiveSmall) {
       }
       dropdown.classList.remove('is-open', 'dropdown--align-right');
       dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+      const c = dropdown.querySelector('.dropdown__content');
+      if (c) c.style.transform = '';
     });
     updateBodyOverflow(false);
   });
@@ -80,6 +97,8 @@ export function initDropdowns(responsiveSmall) {
       dropdowns.forEach(dropdown => {
         dropdown.classList.remove('is-open', 'dropdown--align-right');
         dropdown.querySelector('.dropdown__trigger')?.classList.remove('is-selected');
+        const c = dropdown.querySelector('.dropdown__content');
+        if (c) c.style.transform = '';
       });
       updateBodyOverflow(false);
     }

assets/js/header.js

@@ -1,10 +1,38 @@
 export function headerToggle() {
   const header = document.getElementById("site-header");
   const buttonToggle = document.querySelector("#menu-toggle");
+  const siteMenu = document.getElementById("site-menu");
+  const overlay = document.getElementById("menu-overlay");
 
   if (!header || !buttonToggle) return;
-  buttonToggle.addEventListener("click", () => {
+
-    const isOpen = document.body.classList.toggle("menu-open");
+  function openMenu() {
+    document.body.classList.add("menu-open");
+    buttonToggle.setAttribute("aria-expanded", "true");
+    buttonToggle.setAttribute("aria-label", "Fermer le menu");
+    siteMenu?.removeAttribute("inert");
+  }
+
+  function closeMenu() {
+    document.body.classList.remove("menu-open");
+    buttonToggle.setAttribute("aria-expanded", "false");
+    buttonToggle.setAttribute("aria-label", "Ouvrir le menu");
+    siteMenu?.setAttribute("inert", "");
+  }
+
+  buttonToggle.addEventListener("click", (e) => {
+    e.stopPropagation();
+    document.body.classList.contains("menu-open") ? closeMenu() : openMenu();
+  });
+
+  header.addEventListener("click", () => {
+    if (document.body.classList.contains("menu-open")) closeMenu();
+  });
+
+  overlay?.addEventListener("click", closeMenu);
+
+  document.addEventListener("keydown", (e) => {
+    if (e.key === "Escape" && document.body.classList.contains("menu-open")) closeMenu();
   });
 }
 

assets/js/hero-slider.js

@@ -1,50 +0,0 @@
-import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
-
-export function initHeroSlider() {
-  const heroSlider = document.querySelector('.hero-slider');
-
-  if (!heroSlider) {
-    return;
-  }
-
-  const swiper = new Swiper('.hero-slider', {
-    // Optional parameters
-    loop: true,
-    speed: 600,
-    effect: 'fade',
-    fadeEffect: {
-      crossFade: true
-    },
-
-    // Touch/Swipe settings (activé par défaut, mais configuré ici pour optimisation)
-    touchRatio: 1,
-    touchAngle: 45,
-    grabCursor: true,
-    simulateTouch: true,
-    allowTouchMove: true,
-
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev',
-    },
-
-    // Pagination
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true,
-    },
-
-    // Keyboard control
-    keyboard: {
-      enabled: true,
-    },
-
-    // Accessibility
-    a11y: {
-      prevSlideMessage: 'Diapositive précédente',
-      nextSlideMessage: 'Diapositive suivante',
-      paginationBulletMessage: 'Aller à la diapositive {{index}}',
-    },
-  });
-}

assets/js/hero-video.js

@@ -1,38 +1,49 @@
 
 export function playVideo() {
   const playButton = document.querySelector('#hero-play-video');
+  if (!playButton) return;
 
-  if (!playButton) {
+  const playerDiv = document.querySelector('#youtube-player');
-    return;
+  if (!playerDiv) return;
-  }
+
+  // Charger l'API YouTube IFrame Player
+  const tag = document.createElement('script');
+  tag.src = 'https://www.youtube.com/iframe_api';
+  document.head.appendChild(tag);
+
+  let ytReady = false;
+  window.onYouTubeIframeAPIReady = () => { ytReady = true; };
 
   playButton.addEventListener('click', function () {
     const extract = document.querySelector('.extract');
     const videoFull = document.querySelector('.video-full');
     const titleSmall = document.querySelector('.page-title-small');
 
-
+    if (extract) extract.style.display = 'none';
-    if (extract) {
+    if (titleSmall) titleSmall.style.display = 'none';
-      extract.style.display = 'none';
-    }
-
-    if(titleSmall){
-      titleSmall.style.display = 'none';
-    }
 
     if (videoFull) {
       videoFull.style.display = 'block';
 
-      const iframe = videoFull.querySelector('iframe');
+      function createPlayer() {
-      if (iframe) {
+        new YT.Player('youtube-player', {
-        const src = iframe.src;
+          videoId: playerDiv.dataset.videoId,
-
+          width: '100%',
-        // Ajouter les paramètres autoplay et mute pour YouTube
+          height: '100%',
-        if (src) {
+          playerVars: {
-          const separator = src.includes('?') ? '&' : '?';
+            autoplay: 1,
-          iframe.src = src + separator + 'autoplay=1&mute=1';
+            rel: 0,
-          iframe.setAttribute('allow', 'autoplay; encrypted-media');
+          },
+          events: {
+            onReady: (e) => e.target.playVideo(),
+          },
+        });
       }
+
+      if (ytReady) {
+        createPlayer();
+      } else {
+        window.onYouTubeIframeAPIReady = createPlayer;
       }
     }
   });

assets/js/investigation.js

@@ -1,11 +1,32 @@
-export function initSliderBeforeAfter(container = document){
+export function navInvestigation(){
-  const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
+  const nav = document.getElementById('nav-investigation');
-  slidersBeforeAfter.forEach(function (sliderContainer, index) {
+  if (!nav) return;
-    const sliderInput = sliderContainer.querySelector('.slider');
+
-    if (sliderInput) {
+  const items = nav.querySelectorAll('li');
-      sliderInput.addEventListener('input', (e) => {
+  const headerOffset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--h-header')) || 0;
-        sliderContainer.style.setProperty('--position', `${e.target.value}%`);
+
-      });
+  const sections = Array.from(items).map(li => {
+    const href = li.querySelector('a')?.getAttribute('href');
+    const target = href ? document.querySelector(href) : null;
+    return { li, target };
+  }).filter(s => s.target);
+
+  const update = () => {
+    const scrollY = window.scrollY + headerOffset;
+    let current = sections[0];
+
+    for (const section of sections) {
+      if (section.target.offsetTop <= scrollY) {
+        current = section;
       }
-  });
     }
+
+    items.forEach(li => li.classList.remove('is-selected'));
+    if (current) current.li.classList.add('is-selected');
+  };
+
+  window.addEventListener('scroll', update, { passive: true });
+  update();
+}
+
+

assets/js/lightbox.js

@@ -0,0 +1,162 @@
+import Swiper from 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.mjs';
+
+const DESKTOP = window.matchMedia('(min-width: 1080px)');
+
+// Inline du close.svg (assets/icons/close.svg)
+const CLOSE_SVG = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect y="22.3249" width="31.1111" height="2.22222" transform="rotate(-45 0 22.3249)"/><rect x="1.80078" width="31.1111" height="2.22222" transform="rotate(45 1.80078 0)"/></svg>`;
+
+let lightboxEl = null;
+let lightboxSwiper = null;
+
+function createLightboxDOM() {
+  const el = document.createElement('div');
+  el.id = 'lightbox';
+  el.setAttribute('aria-modal', 'true');
+  el.setAttribute('role', 'dialog');
+  el.setAttribute('aria-label', 'Image agrandie');
+  el.setAttribute('inert', '');
+
+  el.innerHTML = `
+    <button id="lightbox-close" aria-label="Fermer">${CLOSE_SVG}</button>
+    <div id="lightbox-swiper" class="swiper">
+      <div class="swiper-wrapper"></div>
+      <div class="swiper-button-prev"></div>
+      <div class="swiper-button-next"></div>
+      <div class="swiper-pagination"></div>
+    </div>
+  `;
+
+  document.body.appendChild(el);
+
+  el.querySelector('#lightbox-close').addEventListener('click', closeLightbox);
+
+  // Fermeture au clic sur le fond (pas sur le swiper)
+  el.addEventListener('click', (e) => {
+    if (e.target === el) closeLightbox();
+  });
+
+  return el;
+}
+
+function ensureLightboxDOM() {
+  if (!lightboxEl) {
+    lightboxEl = createLightboxDOM();
+  }
+}
+
+function getImageData(figure) {
+  const img = figure.querySelector('img');
+
+  // 1. figcaption dans la figure
+  // 2. p.caption dans la figure (horizontal-gallery)
+  // 3. p.caption sibling de la figure (covers : resource, news-item, impact…)
+  const captionEl =
+    figure.querySelector('figcaption') ||
+    figure.querySelector('p.caption') ||
+    (figure.nextElementSibling?.matches('p.caption') ? figure.nextElementSibling : null);
+
+  return {
+    src: img?.src || '',
+    alt: img?.alt || '',
+    caption: captionEl?.innerHTML || '',
+  };
+}
+
+function buildSlides(images) {
+  const wrapper = lightboxEl.querySelector('.swiper-wrapper');
+  wrapper.innerHTML = '';
+
+  images.forEach(({ src, alt, caption }) => {
+    const slide = document.createElement('div');
+    slide.className = 'swiper-slide';
+    slide.innerHTML = `
+      <figure>
+        <img src="${src}" alt="${alt}">
+        ${caption ? `<figcaption>${caption}</figcaption>` : ''}
+      </figure>
+    `;
+    wrapper.appendChild(slide);
+  });
+}
+
+function openLightbox(images, startIndex = 0) {
+  ensureLightboxDOM();
+  buildSlides(images);
+
+  const swiperEl = lightboxEl.querySelector('#lightbox-swiper');
+
+  // Détruire l'instance précédente si elle existe
+  if (swiperEl.swiper) {
+    swiperEl.swiper.destroy(true, true);
+  }
+
+  lightboxSwiper = new Swiper(swiperEl, {
+    slidesPerView: 1,
+    initialSlide: startIndex,
+    speed: 400,
+    watchOverflow: true,
+    keyboard: { enabled: true },
+    navigation: {
+      nextEl: swiperEl.querySelector('.swiper-button-next'),
+      prevEl: swiperEl.querySelector('.swiper-button-prev'),
+    },
+    pagination: {
+      el: swiperEl.querySelector('.swiper-pagination'),
+      clickable: true,
+    },
+    a11y: {
+      prevSlideMessage: 'Image précédente',
+      nextSlideMessage: 'Image suivante',
+    },
+  });
+
+  lightboxEl.removeAttribute('inert');
+  document.body.classList.add('lightbox-open');
+  lightboxEl.querySelector('#lightbox-close').focus();
+}
+
+function closeLightbox() {
+  document.body.classList.remove('lightbox-open');
+  lightboxEl.setAttribute('inert', '');
+}
+
+function isEligible(figure) {
+  // Exclure les figures dans un <a>
+  if (figure.closest('a')) return false;
+  // Exclure si le parent direct contient un .link-block (card navigable)
+  if (figure.parentElement.querySelector(':scope > .link-block')) return false;
+  return true;
+}
+
+export function initLightbox() {
+  // Fermeture à la touche Echap
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && document.body.classList.contains('lightbox-open')) {
+      closeLightbox();
+    }
+  });
+
+  document.querySelectorAll('figure').forEach((figure) => {
+    if (!isEligible(figure)) return;
+
+    // Marquer les figures éligibles (pour le cursor CSS)
+    figure.setAttribute('data-lightbox', '');
+
+    figure.addEventListener('click', () => {
+      if (!DESKTOP.matches) return;
+
+      const slide = figure.closest('.swiper-slide');
+
+      if (slide) {
+        // Galerie : ouvrir toutes les images du swiper parent
+        const swiperEl = slide.closest('.swiper');
+        const allFigures = [...swiperEl.querySelectorAll('.swiper-slide > figure')];
+        const startIndex = allFigures.indexOf(figure);
+        openLightbox(allFigures.map(getImageData), startIndex);
+      } else {
+        // Image standalone
+        openLightbox([getImageData(figure)], 0);
+      }
+    });
+  });
+}

assets/js/newsletter-brevo.js

@@ -0,0 +1,89 @@
+(function () {
+  'use strict';
+
+  const PROXY_URL = '/newsletter/subscribe';
+
+  async function subscribeToNewsletter(email, attributes = {}) {
+    const response = await fetch(PROXY_URL, {
+      method: 'POST',
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ email, attributes }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      const error = new Error(
+        data.user_message || data.message || 'Subscription error'
+      );
+      error.code = data.error;
+      error.data = data;
+      throw error;
+    }
+
+    return data;
+  }
+
+  function showMessage(form, text, isError = false) {
+    const oldMessages = form.parentNode.querySelectorAll('.newsletter-message');
+    oldMessages.forEach((msg) => msg.remove());
+
+    const message = document.createElement('p');
+    message.className = 'newsletter-message';
+    message.textContent = text;
+    message.style.marginTop = '0.5rem';
+    message.style.fontSize = '0.9rem';
+    message.style.color = isError
+      ? 'var(--color-error, #ef4444)'
+      : 'var(--color-success, #22c55e)';
+
+    form.parentNode.insertBefore(message, form.nextSibling);
+
+    if (!isError) {
+      setTimeout(() => message.remove(), 5000);
+    }
+  }
+
+  async function handleFormSubmit(event) {
+    event.preventDefault();
+
+    const form = event.target;
+    const emailInput = form.querySelector('input[type="email"]');
+    const submitButton = form.querySelector('button[type="submit"]');
+
+    if (!emailInput || !emailInput.value) {
+      const message = document.documentElement.lang.startsWith('en')
+        ? 'Please enter a valid email address.'
+        : 'Veuillez entrer une adresse email valide.';
+      showMessage(form, message, true);
+      return;
+    }
+
+    const email = emailInput.value.trim();
+    submitButton.disabled = true;
+
+    try {
+      await subscribeToNewsletter(email);
+      const message = document.documentElement.lang.startsWith('en')
+        ? 'Thank you! Your subscription has been confirmed.'
+        : 'Merci, votre inscription est confirmée !';
+      showMessage(form, message, false);
+      form.reset();
+    } catch (error) {
+      const isAlreadySubscribed = error.code === 'email_already_exists';
+      showMessage(form, error.message, !isAlreadySubscribed);
+    } finally {
+      submitButton.disabled = false;
+    }
+  }
+
+  function initNewsletterForms() {
+    const forms = document.querySelectorAll('.form__newsletter');
+    forms.forEach((form) => form.addEventListener('submit', handleFormSubmit));
+  }
+
+  document.addEventListener('DOMContentLoaded', initNewsletterForms);
+})();

assets/js/panel.js

@@ -1,60 +0,0 @@
-export function panelToggle(responsiveSmall) {
-    const toggleBtn = document.querySelector('#toggle-panel');
-    const toggleBtnMobile = document.querySelector('#toggle-panel__mobile');
-    const main = document.querySelector('main');
-    const closeBtn = document.querySelector('.panel-left .panel__header');
-
-    function openPanel() {
-        main.classList.add('panel-open');
-        const screenWidth = window.innerWidth;
-        if (screenWidth <= responsiveSmall) {
-            console.log("small screen");
-            document.body.style.overflowY = 'hidden';
-        }
-
-    }
-
-    function closePanel() {
-        main.classList.remove('panel-open');
-        main.classList.add('panel-close');
-        document.body.style.overflowY = '';
-    }
-
-    if (toggleBtn) {
-        toggleBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            openPanel();
-        });
-    }
-
-    if (toggleBtnMobile) {
-        toggleBtnMobile.addEventListener('click', (e) => {
-            e.stopPropagation();
-            openPanel();
-        });
-    }
-
-    if (closeBtn) {
-        closeBtn.addEventListener('click', closePanel);
-    }
-}
-
-
-export function tocMobile(responsiveSmall) {
-    const toc = document.querySelector('#toc');
-    const main = document.querySelector('main');
-
-    if (!toc) return;
-
-    const tocLinks = toc.querySelectorAll('a');
-
-    tocLinks.forEach(link => {
-        link.addEventListener('click', () => {
-            if (window.innerWidth <= responsiveSmall) {
-                main.classList.remove('panel-open');
-                main.classList.add('panel-close');
-                document.body.style.overflowY = '';
-            }
-        });
-    });
-}

assets/js/script.js

@@ -1,61 +1,79 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
-import { panelToggle, tocMobile } from './panel.js';
+import { backToTop } from './back-to-top.js';
-import { btnGroupMobile } from './btn-group-mobile.js';
-import { bannerStickyDesktop } from './banner-sticky-desktop.js';
 import { themeToggle } from './themeToggle.js';
-import { initHeroSlider } from './hero-slider.js';
 import { playVideo } from './hero-video.js';
 import { initDropdowns } from './dropdown.js';
 import { initSwipers } from './swipers.js';
-import { initSliderBeforeAfter } from './investigation.js';
+import { initSliderBeforeAfter} from './sliderBeforeAfter.js';
+import { navInvestigation } from './investigation.js';
+import { progressBar, scrollBack} from './bottom-bar.js';
+import { initSort } from './sort.js';
+import { initLightbox } from './lightbox.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
+const responsiveSmallX = 560;
 
 window.onload = async function () {
   console.log("SCRIPT LOADED");
+
   headerToggle();
-  panelToggle(responsiveSmall);
   themeToggle();
-
+  backToTop();
-
-  tocMobile(responsiveSmall);
-  copyLink();
-  btnGroupMobile(responsiveSmall)
-  bannerStickyDesktop(responsiveSmall);
-  initHeroSlider();
-  playVideo();
-  initDropdowns(responsiveSmall);
-  initSwipers();
 
    initSliderBeforeAfter();
 
-  var elem = document.querySelector('.grid-masonry');
+  copyLink();
-  var msnry = null;
+  playVideo();
+  initDropdowns(responsiveSmall, responsiveSmallX);
+  initSwipers();
+  initLightbox();
+
+  progressBar();
+
+ 
+  scrollBack();   
+  navInvestigation();  
+
+  var elems = document.querySelectorAll('.grid-masonry');
+  var msnries = [];
 
   function initMasonry() {
-    if (!elem) return;
+    if (!elems.length) return;
     if (window.innerWidth >= responsiveSmall) {
-      if (!msnry) {
+      elems.forEach(function(elem, i) {
-        msnry = new Masonry(elem, {
+        if (!msnries[i]) {
-          itemSelector: '.card--impact',
+          msnries[i] = new Masonry(elem, {
+            itemSelector: '.card--block:not(.is-sort-hidden)',
             columnWidth: '.grid-sizer',
             percentPosition: true,
             gutter: 26
           });
         }
+      });
     } else {
+      msnries.forEach(function(msnry, i) {
         if (msnry) {
           msnry.destroy();
-        msnry = null;
+          msnries[i] = null;
         }
+      });
     }
   }
 
   initMasonry();
   window.addEventListener('resize', initMasonry);
 
+  initSort(() => {
+    msnries.forEach(function(msnry) {
+      if (msnry) {
+        msnry.reloadItems();
+        msnry.layout();
+      }
+    });
+  });
+
 
 
 }

assets/js/sliderBeforeAfter.js

@@ -0,0 +1,11 @@
+export function initSliderBeforeAfter(container = document){
+  const slidersBeforeAfter = container.querySelectorAll('.slider-before-after');
+  slidersBeforeAfter.forEach(function (sliderContainer, index) {
+    const sliderInput = sliderContainer.querySelector('.slider');
+    if (sliderInput) {
+      sliderInput.addEventListener('input', (e) => {
+        sliderContainer.style.setProperty('--position', `${e.target.value}%`);
+      });
+    }
+  });
+}

assets/js/sort.js

@@ -0,0 +1,63 @@
+const HIDDEN_CLASS = 'is-sort-hidden';
+
+// Injecte la règle CSS pour masquer les cards filtrées
+const style = document.createElement('style');
+style.textContent = `.${HIDDEN_CLASS} { display: none !important; }`;
+document.head.appendChild(style);
+
+export function initSort(onLayoutChange) {
+  const pageSort = document.querySelector('.page__sort');
+  if (!pageSort) return;
+
+  const container = document.querySelector('[data-sort-container]');
+  if (!container) return;
+
+  const getCards = () => Array.from(container.querySelectorAll('[data-date]'));
+
+  // — Sort by date —
+  const sortBtn = pageSort.querySelector('[data-sort-type]');
+  if (sortBtn) {
+    sortBtn.addEventListener('click', () => {
+      const dir = sortBtn.getAttribute('data-sort-type') === 'down' ? 'up' : 'down';
+      sortBtn.setAttribute('data-sort-type', dir);
+
+      const cards = getCards();
+      cards.sort((a, b) => {
+        const da = new Date(a.dataset.date || 0);
+        const db = new Date(b.dataset.date || 0);
+        return dir === 'up' ? da - db : db - da;
+      });
+      cards.forEach(c => container.appendChild(c));
+
+      onLayoutChange?.();
+    });
+  }
+
+  // — Filter by category / location —
+  const filterBtns = Array.from(pageSort.querySelectorAll('[data-filter]'));
+  filterBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      const wasSelected = btn.classList.contains('is-selected');
+
+      // Ferme le dropdown parent
+      btn.closest('.dropdown')?.classList.remove('is-open');
+
+      // Bascule la sélection
+      filterBtns.forEach(b => b.classList.remove('is-selected'));
+      const value = wasSelected ? null : btn.getAttribute('data-filter');
+      if (!wasSelected) btn.classList.add('is-selected');
+
+      // Affiche / cache les cards
+      getCards().forEach(card => {
+        if (!value) {
+          card.classList.remove(HIDDEN_CLASS);
+        } else {
+          const cardFilters = (card.dataset.filter || '').split(' ').filter(Boolean);
+          card.classList.toggle(HIDDEN_CLASS, !cardFilters.includes(value));
+        }
+      });
+
+      onLayoutChange?.();
+    });
+  });
+}

assets/js/swipers.js

@@ -18,6 +18,7 @@ export function initSwipers(container = document) {
       slidesPerView: 1,
       spaceBetween: 20,
       speed: 600,
+      loop: true,
 
       // Touch/Swipe settings
       touchRatio: 1,

assets/vendor/swiper/swiper-bundle.min.mjs

@@ -0,0 +1,14 @@
+/**
+ * Swiper 12.1.2
+ * Most modern mobile touch slider and framework with hardware accelerated transitions
+ * https://swiperjs.com
+ *
+ * Copyright 2014-2026 Vladimir Kharlampidi
+ *
+ * Released under the MIT License
+ *
+ * Released on: February 18, 2026
+ */
+
+import{S as Swiper}from"./shared/swiper-core.min.mjs";import Virtual from"./modules/virtual.min.mjs";import Keyboard from"./modules/keyboard.min.mjs";import Mousewheel from"./modules/mousewheel.min.mjs";import Navigation from"./modules/navigation.min.mjs";import Pagination from"./modules/pagination.min.mjs";import Scrollbar from"./modules/scrollbar.min.mjs";import Parallax from"./modules/parallax.min.mjs";import Zoom from"./modules/zoom.min.mjs";import Controller from"./modules/controller.min.mjs";import A11y from"./modules/a11y.min.mjs";import History from"./modules/history.min.mjs";import HashNavigation from"./modules/hash-navigation.min.mjs";import Autoplay from"./modules/autoplay.min.mjs";import Thumb from"./modules/thumbs.min.mjs";import freeMode from"./modules/free-mode.min.mjs";import Grid from"./modules/grid.min.mjs";import Manipulation from"./modules/manipulation.min.mjs";import EffectFade from"./modules/effect-fade.min.mjs";import EffectCube from"./modules/effect-cube.min.mjs";import EffectFlip from"./modules/effect-flip.min.mjs";import EffectCoverflow from"./modules/effect-coverflow.min.mjs";import EffectCreative from"./modules/effect-creative.min.mjs";import EffectCards from"./modules/effect-cards.min.mjs";const modules=[Virtual,Keyboard,Mousewheel,Navigation,Pagination,Scrollbar,Parallax,Zoom,Controller,A11y,History,HashNavigation,Autoplay,Thumb,freeMode,Grid,Manipulation,EffectFade,EffectCube,EffectFlip,EffectCoverflow,EffectCreative,EffectCards];Swiper.use(modules);export{Swiper,Swiper as default};
+//# sourceMappingURL=swiper-bundle.min.mjs.map

site/blueprints/blocks/heading-sub.yml

@@ -0,0 +1,23 @@
+name: Titre
+icon: title
+wysiwyg: true
+preview: heading
+fields:
+  level:
+    label: Niveau
+    type: toggles
+    empty: false
+    default: "h4"
+    labels: false
+    options:
+      - value: h4
+        icon: h4
+        text: H4
+      - value: h5
+        icon: h5
+        text: H5
+  text:
+    label: Texte
+    type: writer
+    inline: true
+    placeholder: Titre…

site/blueprints/blocks/insert.yml

@@ -0,0 +1,29 @@
+name: Insert (conclusion, hightlight, notes)
+icon: text
+preview: fields
+fields:
+  title:
+    label: Titre
+    type: text
+    width: 2/3
+  level:
+    label: Niveau
+    type: select
+    default: h3
+    width: 1/3
+    options:
+      h3: H3
+      h4: H4
+      h5: H5
+  text:
+    type: writer
+    size: huge
+    marks:
+      - bold
+      - italic
+      - underline
+      - link
+      - strike
+    nodes:
+      - bulletList
+    placeholder: Texte d'insert...

site/blueprints/fields/investigations.yml

@@ -1,9 +1,12 @@
 label: Enquêtes
 type: pages
 parent: page('enquetes')
+template: investigation
 layout: cards
-text: "{{ page.title }}, {{ page.subtitle }}"
+text: "{{ page.title }}"
 info: "{{ page.incidentConsequences }} à {{ page.incidentLocation }}"
+size: huge
+search: true
 image:
   cover: true
   ratio: 16/9

site/blueprints/pages/about.yml

@@ -4,4 +4,20 @@ tabs:
   contentTab:
     label: Contenu
     icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
+          - image
+          - beforeafter
+          - video
+          - gallery
+          - insert
   seo: seo/page

site/blueprints/pages/contact.yml

@@ -3,4 +3,17 @@ title: Contact
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading
+          - text
+          - image
   seo: seo/page

site/blueprints/pages/database.yml

@@ -24,6 +24,18 @@ columns:
       methodologies:
         label: Méthodologies
         type: tags
+      impactCategories:
+        label: Catégories des impacts
+        type: tags
+      newsCategories:
+        label: Catégories des brèves
+        type: tags
+      projectCategories:
+        label: Catégories des projets
+        type: tags
+      resourceCategories:
+        label: Catégories des ressources
+        type: tags
       robots:
         type: hidden
         default: noindex, nofollow

site/blueprints/pages/home.yml

@@ -5,14 +5,37 @@ tabs:
     label: Contenu
     icon: page
     fields:
-      mainBaseline:
+      sections:
-        label: Baseline
+        label: Sections
+        type: structure
+        fields:
+          baseline:
+            label: Baseline (colonne gauche)
+            type: text
+            width: 1/1
+          buttonText:
+            label: Texte du bouton
             type: text
-        help: À gauche des enquêtes.
             width: 1/2
-      impactsBaseline:
+          buttonLink:
-        label: Phrase d'introduction des impacts
+            label: Lien du bouton
-        type: text
+            type: url
-        help: À gauche des impacts.
+            width: 1/2
+          contentType:
+            label: Type de contenu
+            type: select
+            required: true
+            options:
+              investigations: "Enquêtes"
+              impacts: Impacts
+              packages: Dossiers
+              projects: "Projets (Lab)"
+              news: "Brèves"
+            width: 1/2
+          count:
+            label: "Nombre d'éléments (min. 4)"
+            type: number
+            min: 4
+            default: 6
             width: 1/2
   seo: seo/page

site/blueprints/pages/impact-media.yml

@@ -0,0 +1,18 @@
+title: Impact médiatique
+
+fields:
+  linkedInvestigation:
+    label: Enquête liée
+    type: pages
+    query: page('enquetes').children.listed
+    multiple: false
+    layout: list
+    text: "{{ page.title }}"
+    info: "{{ page.created }}"
+    width: 1/2
+  entries:
+    label: Articles et reprises
+    type: entries
+    width: 1/2
+    field:
+      type: url

site/blueprints/pages/impact.yml

@@ -2,9 +2,63 @@ title: Impact
 
 tabs:
   contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').impactCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des impacts. Format 16/9.
+              
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
           linkedInvestigations:
+            label: Enquêtes liées
             type: pages
-      template: investigation
+            query: page('enquetes').children.listed
-    linkedMedias:
+            multiple: true
-      type: url
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
   seo: seo/page

site/blueprints/pages/impacts.yml

@@ -3,4 +3,26 @@ title: Impacts
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          impactsSection:
+            type: pages
+            label: Liste des impacts
+            templates:
+              - impact
+              - impact-media
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
   seo: seo/page

site/blueprints/pages/investigation.yml

@@ -1,4 +1,11 @@
 title: Investigation
+status:
+  draft:
+    label: Brouillon
+    text: La page est accessible uniquement pour les éditeurs connectés ou via un lien secret
+  listed:
+    label: Public
+    text: La page est accessible par tout le monde
 
 tabs:
   contentTab:
@@ -24,7 +31,7 @@ tabs:
                 image:
                   ratio: 12/7
                   cover: true
-                help: Image utilisée dans les listes d'enquêtes
+                help: Image utilisée dans les listes d'enquêtes. Format 16/9.
       - width: 4/6
         fields:
           chapo:
@@ -32,37 +39,24 @@ tabs:
             type: writer
             nodes: false
             buttons: false
-          heroType:
-            label: Type de hero
-            type: select
-            default: image
-            options:
-              image: Image simple
-              video: Vidéo
-            default: image
-            width: 1/3
-          heroImages:
-            label: Images hero
-            type: files
-            multiple: true
-            layout: cards
-            width: 1/3
-            when:
-              heroType: image
           videoPreview:
-            label: Preview
+            label: Preview vidéo
             type: files
             multiple: false
-            help: Extrait joué en autoplay muet.
+            help: "Extrait joué en autoplay muet. À remplir avec l'URL vidéo — les deux champs vont ensemble."
-            width: 1/3
+            width: 1/2
-            when:
-              heroType: video
           videoUrl:
             label: URL vidéo complète (YouTube embed)
             type: url
-            width: 1/3
+            width: 1/2
-            when:
+            help: "À remplir avec la preview — les deux champs vont ensemble."
-              heroType: video
+          heroCaption:
+            label: Légende du hero
+            type: writer
+            nodes: false
+            marks:
+              - italic
+            help: "Recommandé : 140 caractères max"
           body:
             label: Corps
             type: layout
@@ -77,6 +71,7 @@ tabs:
               - video
               # - horizontal-gallery
               - gallery
+              - insert
   metadataTab:
     label: Métadonnées
     icon: table
@@ -127,7 +122,7 @@ tabs:
       team:
         label: Équipe Index
         type: structure
-        width: 2/4
+        help: Le « rôle » s’affiche entre parenthèses
         columns:
           name:
             label: Nom

site/blueprints/pages/investigations.yml

@@ -3,6 +3,41 @@ title: Investigations
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
         sections:
           investigations: fields/investigations
+  starredTab:
+    label: En avant
+    icon: star
+    fields:
+      featuredInvestigation:
+        label: À la une
+        type: pages
+        query: page('enquetes').children.listed
+        multiple: false
+        max: 1
+        layout: list
+        text: "{{ page.title }}"
+        info: "{{ page.incidentDate }}"
+        width: 1/3
+        help: Affichée en tête et en plus grand, avec son média de couverture (vidéo ou image).
+      pinnedInvestigations:
+        label: Enquêtes épinglées
+        type: pages
+        query: page('enquetes').children.listed
+        multiple: true
+        layout: list
+        text: "{{ page.title }}"
+        info: "{{ page.incidentDate }}"
+        width: 2/3
+        help: Affichées après l'enquête "à la une", avant les autres mais dans le même format, simplement marquées par une 📌.
   seo: seo/page

site/blueprints/pages/lab.yml

@@ -0,0 +1,27 @@
+title: Laboratoire
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          projectsSection:
+            type: pages
+            label: Liste des projets
+            template: project
+            create: project
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
+  seo: seo/page

site/blueprints/pages/laboratory.yml

@@ -1,6 +0,0 @@
-title: Laboratoire
-
-tabs:
-  contentTab:
-    label: Contenu
-  seo: seo/page

site/blueprints/pages/legal-notices.yml

@@ -3,4 +3,37 @@ title: Mentions légales
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      definitions:
+        label: Tableau de définitions
+        help: Affiché sous forme de liste en deux colonnes (terme — définition)
+        type: structure
+        fields:
+          term:
+            label: Terme
+            type: text
+            width: 1/3
+          definition:
+            label: Définition
+            type: writer
+            width: 2/3
+            marks:
+              - bold
+              - italic
+              - highlight
+              - link
+            nodes:
+              - bulletList
+              - orderedList
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
   seo: seo/page

site/blueprints/pages/news-item.yml

@@ -0,0 +1,64 @@
+title: Brève
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').newsCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des brèves. Format 16/9.
+
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
+          linkedInvestigations:
+            label: Enquêtes liées
+            type: pages
+            query: page('enquetes').children.listed
+            multiple: true
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
+  seo: seo/page

site/blueprints/pages/news.yml

@@ -0,0 +1,27 @@
+title: Brèves
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          newsSection:
+            type: pages
+            label: Liste des brèves
+            template: news-item
+            create: news-item
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
+  seo: seo/page

site/blueprints/pages/newsletter.yml

@@ -0,0 +1,30 @@
+title: Newsletter
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: email
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      chapo:
+        label: Chapeau
+        type: writer
+        nodes: false
+        marks:
+          - bold
+          - italic
+          - underline
+          - link
+      details:
+        label: Détails
+        type: writer
+        nodes: false
+        marks:
+          - bold
+          - italic
+          - underline
+          - link
+  seo: seo/page

site/blueprints/pages/package.yml

@@ -9,18 +9,35 @@ tabs:
         label: Visuel de couverture
         type: files
         multiple: false
+        required: true
         layout: cards
         width: 1/3
         image:
           ratio: 12/7
           cover: true
-        help: Image utilisée dans la liste des dossiers
+        help: Image utilisée dans la liste des dossiers. Format 16/9.
       description:
         label: Description
         type: writer
         width: 2/3
       linkedContent:
-        label: Contenu
+        label: Enquêtes
         type: pages
         query: site.find('enquetes').children
+      linkedImpacts:
+        label: Impacts
+        type: pages
+        query: site.find('impacts').children
+      linkedResources:
+        label: Ressources
+        type: pages
+        query: site.find('ressources').children
+      linkedNews:
+        label: Brèves
+        type: pages
+        query: site.find('news').children
+      linkedProjects:
+        label: Projets (Lab)
+        type: pages
+        query: site.find('laboratoire').children
   seo: seo/page

site/blueprints/pages/packages.yml

@@ -3,6 +3,16 @@ title: Dossiers
 tabs:
   contentTab:
     label: Contenu
+    icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
         sections:
           packages:
             label: Dossiers

site/blueprints/pages/privacy-policy.yml

@@ -0,0 +1,18 @@
+title: Politique de confidentialité
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    fields:
+      title:
+        label: Titre
+        type: text
+        required: true
+      body:
+        label: Corps
+        type: blocks
+        fieldsets:
+          - heading-sub
+          - text
+  seo: seo/page

site/blueprints/pages/project.yml

@@ -0,0 +1,64 @@
+title: Projet
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').projectCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des projets. Format 16/9.
+
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
+          linkedInvestigations:
+            label: Enquêtes liées
+            type: pages
+            query: page('enquetes').children.listed
+            multiple: true
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
+  seo: seo/page

site/blueprints/pages/resource.yml

@@ -0,0 +1,64 @@
+title: Ressource
+
+tabs:
+  contentTab:
+    label: Contenu
+    icon: page
+    columns:
+      - width: 2/6
+        sections:
+          createdSection:
+            type: fields
+            fields:
+              created:
+                label: Date de publication
+                type: date
+                display: DD / MM / YYYY
+                default: today
+                width: 1/2
+              category:
+                label: Catégorie
+                type: tags
+                max: 1
+                options: query
+                query: page('database').resourceCategories.split
+              cover:
+                label: Image de couverture
+                type: files
+                multiple: false
+                layout: cards
+                image:
+                  ratio: 12/7
+                  cover: true
+                help: Optionnelle — utilisée dans la liste des ressources. Format 16/9.
+
+      - width: 4/6
+        fields:
+          chapo:
+            label: Chapeau
+            type: writer
+            nodes: false
+            marks:
+              - bold
+              - italic
+          linkedInvestigations:
+            label: Enquêtes liées
+            type: pages
+            query: page('enquetes').children.listed
+            multiple: true
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.created }}"
+          body:
+            label: Corps
+            type: blocks
+            fieldsets:
+              - heading
+              - text
+              - image
+              - beforeafter
+              - video
+              - gallery
+              - insert
+
+  seo: seo/page

site/blueprints/pages/resources.yml

@@ -1,7 +1,27 @@
-title: Resources
+title: Ressources
 
 tabs:
   contentTab:
     label: Contenu
     icon: page
+    columns:
+      - width: 1/3
+        fields:
+          chapo:
+            label: Introduction
+            type: writer
+            nodes: false
+            buttons: false
+      - width: 2/3
+        sections:
+          resourcesSection:
+            type: pages
+            label: Liste des ressources
+            template: resource
+            create: resource
+            layout: list
+            text: "{{ page.title }}"
+            info: "{{ page.category }} — {{ page.created.toDate('d/m/Y') }}"
+            sortBy: created desc
+
   seo: seo/page

site/blueprints/pages/support.yml

@@ -1,46 +0,0 @@
-title: Nous soutenir
-
-tabs:
-  contentTab:
-    sections:
-      supportFields:
-        type: fields
-        fields:
-          heroHeadline:
-            type: headline
-            label: Hero
-          heroMedia:
-            label: Media de couverture
-            type: files
-            multiple: false
-            layout: cards
-            help: image ou vidéo affichée dans le héro, sous la phrase d'accroche
-          heroCatchPhrase:
-            label: Phrase d'accroche
-            type: text
-          heroBaseline:
-            label: Baseline
-            type: text
-          donorLine:
-            type: line
-          donorHeadline:
-            label: Dons
-            type: headline
-          donorCatchPhrase:
-            label: Phrase d'accroche
-            type: text
-          FAQLine:
-            type: line
-          FAQHeadline:
-            label: Questions fréquentes
-            type: headline
-          FAQQuestions:
-            label: Questions / réponses
-            type: structure
-            fields:
-              question:
-                type: text
-              answer:
-                label: Réponse
-                type: text
-  seo: seo/page

site/config/config.php

@@ -4,6 +4,11 @@ return [
   'debug' => true,
   'languages' => true,
   'date.handler'  => 'intl',
+  // 'auth' => [
+  //   'methods' => [
+  //       'password' => ['2fa' => true]
+  //   ]
+  // ],
   'thumbs' => [
     'quality' => 80,
     'presets' => [
@@ -17,15 +22,52 @@ return [
     'srcsets' => [
       'default' => [200, 400, 600, 800, 1024, 1440, 2048],
       'webp' => [
-        '300w' => ['width' => 300 * 1.2, 'format' => 'webp'],
+        '300w'  => ['width' => 300,  'format' => 'webp'],
-        '600w' => ['width' => 600 * 1.2, 'format' => 'webp'],
+        '600w'  => ['width' => 600,  'format' => 'webp'],
-        '900w' => ['width' => 900 * 1.2, 'format' => 'webp'],
+        '900w'  => ['width' => 900,  'format' => 'webp'],
-        '1200w' => ['width' => 1200 * 1.2, 'format' => 'webp'],
+        '1200w' => ['width' => 1200, 'format' => 'webp'],
+      ],
+      // Cover cards investigations : 465px fixe ≥1000px, 50vw 728–1000px, 100vw <728px
+      // Widths couvrent 1x et 2x (retina) pour chaque breakpoint
+      'cover-card' => [465, 728, 930, 1000, 1456],
+      'cover-card-webp' => [
+        '465w'  => ['width' => 465,  'format' => 'webp'],
+        '728w'  => ['width' => 728,  'format' => 'webp'],
+        '930w'  => ['width' => 930,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1456w' => ['width' => 1456, 'format' => 'webp'],
+      ],
+      // Hero cover investigation : 940px fixe ≥1000px, 90vw en dessous
+      'cover-hero' => [680, 940, 1200, 1880],
+      'cover-hero-webp' => [
+        '680w'  => ['width' => 680,  'format' => 'webp'],
+        '940w'  => ['width' => 940,  'format' => 'webp'],
+        '1200w' => ['width' => 1200, 'format' => 'webp'],
+        '1880w' => ['width' => 1880, 'format' => 'webp'],
+      ],
+      // Body 1 colonne : 100vw
+      'body-full' => [750, 1000, 1440, 1880],
+      'body-full-webp' => [
+        '750w'  => ['width' => 750,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1440w' => ['width' => 1440, 'format' => 'webp'],
+        '1880w' => ['width' => 1880, 'format' => 'webp'],
+      ],
+      // Body 2 colonnes : 50vw ≥768px, 90vw en dessous
+      'body-half' => [680, 720, 1000, 1380, 1440],
+      'body-half-webp' => [
+        '680w'  => ['width' => 680,  'format' => 'webp'],
+        '720w'  => ['width' => 720,  'format' => 'webp'],
+        '1000w' => ['width' => 1000, 'format' => 'webp'],
+        '1380w' => ['width' => 1380, 'format' => 'webp'],
+        '1440w' => ['width' => 1440, 'format' => 'webp'],
       ],
     ],
   ],
   'panel' => [
-    'menu' => require_once __DIR__ . '/menu.php'
+    'menu' => require_once __DIR__ . '/menu.php',
+    'css' => '/assets/css/panel.css',
+    'home' => 'pages/home',
   ],
   'donorbox' => [
     'api_key' => '', // À remplir avec la clé API Donorbox
@@ -35,6 +77,14 @@ return [
   ],
   'tobimori.seo.canonicalBase' => 'https://www.index.ngo',
 
+  'cache' => [
+    'og' => true,
+  ],
+
+  'routes' => [
+    require(__DIR__ . '/routes/newsletter.php'),
+  ],
+
   'hooks' => [
     'page.update:after' => function ($newPage) {
       if ($newPage->intendedTemplate()->name() !== 'investigation') {

site/config/menu.php

@@ -1,25 +1,16 @@
 <?php
 
 return [
-  'dashboard' => [
-    'label'   => 'Dashboard',
-    'icon'    => 'bolt',
-    'link'    => '/',
-    'current' => function (string $current): bool {
-      $path = Kirby\Cms\App::instance()->path();
-      return Str::contains($path, '/site');
-    }
-  ],
-  '-',
   'home' => [
     'label'   => 'Accueil',
     'icon'    => 'home',
     'link'    => 'pages/home',
     'current' => function (string $current): bool {
       $path = Kirby\Cms\App::instance()->path();
-      return Str::contains($path, 'pages/home');
+      return $path === '' || Str::contains($path, 'pages/home');
     }
   ],
+  '-',
   'enquetes' => [
     'label' => 'Enquêtes',
     'icon' => 'pen',
@@ -38,6 +29,15 @@ return [
         return Str::contains($path, 'pages/impacts');
     }
   ],
+  'news' => [
+    'label' => 'Brèves',
+    'icon' => 'bell',
+    'link' => 'pages/news',
+    'current' => function (string $current): bool {
+        $path = Kirby\Cms\App::instance()->path();
+        return Str::contains($path, 'pages/news');
+    }
+  ],
   'dossiers' => [
     'label' => 'Dossiers',
     'icon' => 'folder',
@@ -77,13 +77,31 @@ return [
   ],
   'legal-notices' => [
     'label'   => 'Mentions légales',
-    'icon'    => 'email',
+    'icon'    => 'edit-line',
     'link'    => 'pages/mentions-legales',
     'current' => function (string $current): bool {
       $path = Kirby\Cms\App::instance()->path();
       return Str::contains($path, 'pages/mentions-legales');
     }
   ],
+  'newsletter' => [
+    'label'   => 'Newsletter',
+    'icon'    => 'email',
+    'link'    => 'pages/newsletter',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/newsletter');
+    }
+  ],
+  'privacy-policy' => [
+    'label'   => 'Politique de confidentialité',
+    'icon'    => 'lock',
+    'link'    => 'pages/politique-de-confidentialite',
+    'current' => function (string $current): bool {
+      $path = Kirby\Cms\App::instance()->path();
+      return Str::contains($path, 'pages/politique-de-confidentialite');
+    }
+  ],
   '-',
   'database' => [
     'label' => 'Bases de données',

site/config/routes/newsletter.php

@@ -0,0 +1,116 @@
+<?php
+
+return [
+  'pattern' => 'newsletter/subscribe',
+  'method'  => 'POST|OPTIONS',
+  'action'  => function () {
+    header('Content-Type: application/json');
+
+    if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
+      http_response_code(200);
+      die();
+    }
+
+    $config = kirby()->option('brevo');
+    $apiKey = $config['api_key'] ?? '';
+    $listId = (int)($config['list_id'] ?? 2);
+    $apiUrl = $config['api_url'] ?? 'https://api.brevo.com/v3/contacts';
+
+    if (empty($apiKey)) {
+      http_response_code(500);
+      die(json_encode(['error' => 'Server configuration error', 'message' => 'Brevo API key not configured']));
+    }
+
+    $input = file_get_contents('php://input');
+    $data  = json_decode($input, true);
+
+    if (!isset($data['email']) || empty($data['email'])) {
+      http_response_code(400);
+      die(json_encode(['error' => 'Email required']));
+    }
+
+    $email = filter_var($data['email'], FILTER_VALIDATE_EMAIL);
+    if ($email === false) {
+      http_response_code(400);
+      die(json_encode(['error' => 'Invalid email']));
+    }
+
+    $brevoData = [
+      'email'         => $email,
+      'listIds'       => [$listId],
+      'updateEnabled' => true,
+    ];
+
+    if (isset($data['attributes']) && is_array($data['attributes']) && !empty($data['attributes'])) {
+      $brevoData['attributes'] = $data['attributes'];
+    }
+
+    $ch = curl_init();
+    curl_setopt_array($ch, [
+      CURLOPT_URL            => $apiUrl,
+      CURLOPT_RETURNTRANSFER => true,
+      CURLOPT_POST           => true,
+      CURLOPT_POSTFIELDS     => json_encode($brevoData),
+      CURLOPT_HTTPHEADER     => [
+        'Content-Type: application/json',
+        'api-key: ' . $apiKey,
+        'User-Agent: Index-NGO-Newsletter',
+      ],
+      CURLOPT_TIMEOUT        => 10,
+      CURLOPT_SSL_VERIFYPEER => true,
+    ]);
+
+    $response  = curl_exec($ch);
+    $httpCode  = curl_getinfo($ch, CURLINFO_HTTP_CODE);
+    $curlError = curl_error($ch);
+    curl_close($ch);
+
+    if ($response === false) {
+      http_response_code(500);
+      die(json_encode(['error' => 'Connection error', 'details' => $curlError]));
+    }
+
+    $responseData = json_decode($response, true);
+
+    switch ($httpCode) {
+      case 201:
+      case 204:
+        http_response_code(200);
+        die(json_encode(['success' => true, 'message' => 'Successfully subscribed', 'email' => $email]));
+
+      case 400:
+        $isDuplicate = isset($responseData['code']) && $responseData['code'] === 'duplicate_parameter';
+        http_response_code(400);
+        die(json_encode([
+          'error'        => $isDuplicate ? 'email_already_exists' : 'invalid_data',
+          'message'      => $isDuplicate ? 'You are already subscribed!' : 'Invalid email address.',
+          'user_message' => $isDuplicate ? 'Vous êtes déjà inscrit·e !' : 'Veuillez vérifier votre adresse email.',
+        ]));
+
+      case 401:
+        http_response_code(500);
+        die(json_encode([
+          'error'        => 'invalid_api_key',
+          'message'      => 'Invalid API key',
+          'user_message' => 'Une erreur technique est survenue. Veuillez réessayer plus tard.',
+        ]));
+
+      case 404:
+        http_response_code(500);
+        die(json_encode([
+          'error'        => 'list_not_found',
+          'message'      => 'Contact list not found',
+          'user_message' => 'Une erreur technique est survenue. Veuillez réessayer plus tard.',
+        ]));
+
+      default:
+        http_response_code($httpCode);
+        die(json_encode([
+          'error'        => 'api_error',
+          'message'      => 'Error communicating with subscription service',
+          'user_message' => 'Une erreur est survenue. Veuillez réessayer.',
+          'http_code'    => $httpCode,
+        ]));
+    }
+  },
+];

site/languages/en.php

@@ -6,4 +6,29 @@ return [
   'locale'    => 'en_US.UTF-8',
   'name'      => 'English',
   'url'       => '/en',
+  'translations' => [
+    'impact.type'           => 'Impact',
+    'impact.type.plural'    => 'Impacts',
+    'impacts.title'         => 'Impacts',
+    'news.type'             => 'News',
+    'news.type.plural'      => 'News',
+    'news.title'            => 'News',
+    'investigation.type'        => 'Investigation',
+    'investigation.type.plural' => 'Investigations',
+    'investigations.title'      => 'Investigations',
+    'investigations.related' => 'Related investigations',
+    'investigations.see_all' => 'See all investigations',
+    'filter.all'             => 'All',
+    'filter.all.m'           => 'All',
+    'package.type'           => 'Folder',
+    'packages.title'         => 'Folders',
+    'project.type'           => 'Project',
+    'project.type.plural'    => 'Projects',
+    'projects.title'         => 'Projects',
+    'lab.title'              => 'Laboratory',
+    'resource.type'          => 'Resource',
+    'resource.type.plural'   => 'Resources',
+    'resources.title'        => 'Resources',
+    'resources.methodologies' => 'Methodologies',
+  ],
 ];

site/languages/fr.php

@@ -7,4 +7,29 @@ return [
   'locale'    => 'fr_FR.UTF-8',
   'name'      => 'Français',
   'url'       => '/',
+  'translations' => [
+    'impact.type'           => 'Impact',
+    'impact.type.plural'    => 'Impacts',
+    'impacts.title'         => 'Impacts',
+    'news.type'             => 'Brève',
+    'news.type.plural'      => 'Brèves',
+    'news.title'            => 'Brèves',
+    'investigation.type'        => 'Enquête',
+    'investigation.type.plural' => 'Enquêtes',
+    'investigations.title'      => 'Enquêtes',
+    'investigations.related' => 'Enquêtes liées',
+    'investigations.see_all' => 'Voir toutes les enquêtes',
+    'filter.all'             => 'Toutes',
+    'filter.all.m'           => 'Tous',
+    'package.type'           => 'Dossier',
+    'packages.title'         => 'Dossiers',
+    'project.type'           => 'Projet',
+    'project.type.plural'    => 'Projets',
+    'projects.title'         => 'Projets',
+    'lab.title'              => 'Laboratoire',
+    'resource.type'          => 'Ressource',
+    'resource.type.plural'   => 'Ressources',
+    'resources.title'        => 'Ressources',
+    'resources.methodologies' => 'Méthodologies',
+  ],
 ];

site/snippets/back-to-top.php

@@ -1 +1 @@
-<button class="btn--small btn--back-to-top"><a href="#">Revenir en haut <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>
+<button id="btn--back-to-top"><a href="#"><span class="text">Revenir en haut </span><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span></a></button>

site/snippets/blocks/gallery.php

@@ -0,0 +1,30 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+$images      = $block->images()->toFiles();
+$imgSizes    = $imgSizes    ?? '(min-width: 768px) 50vw, 90vw';
+$imgSrcset   = $imgSrcset   ?? 'body-half';
+?>
+
+<div class="swiper">
+    <div class="swiper-wrapper">
+        <?php foreach ($images as $image): ?>
+        <div class="swiper-slide">
+            <figure>
+                <?php snippet('picture', [
+                    'file'       => $image,
+                    'alt'        => $image->alt()->value(),
+                    'sizes'      => $imgSizes,
+                    'srcsetName' => $imgSrcset,
+                    'lazy'       => true,
+                ]) ?>
+                <?php if ($image->caption()->isNotEmpty()): ?>
+                <figcaption><?= $image->caption()->html() ?></figcaption>
+                <?php endif ?>
+            </figure>
+        </div>
+        <?php endforeach ?>
+    </div>
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+    <div class="swiper-pagination"></div>
+</div>

site/snippets/blocks/insert.php

@@ -0,0 +1,11 @@
+<?php
+/** @var \Kirby\Cms\Block $block */
+?>
+<div class="insert">
+    <div class="insert--inner">
+        <?php if ($block->title()->isNotEmpty()): ?>
+        <<?= $block->level()->or('h3') ?>><?= $block->title()->esc() ?></<?= $block->level()->or('h3') ?>>
+        <?php endif ?>
+        <?= $block->text() ?>
+    </div>
+</div>

site/snippets/bottom-bar.php

@@ -0,0 +1,43 @@
+<div id="bottom-bar">
+
+    <div class="bottom-bar__inner">
+
+            <div class="progress-container">
+                <div class="progress-bar" id="progressBar"></div>
+            </div>
+
+            <?php if ($page->intendedTemplate()->name() === 'investigation'): ?>
+            <div class="title-group">
+                <p class="title-type">Enquête</p>
+                <p class="title"><?= $page->title()->esc() ?></p>
+            </div>
+            <?php endif ?>
+
+            <div class="dropdown">
+            <button class="dropdown__trigger btn--simple no-link">
+                <span class="icon"><?= svg('assets/icons/share.svg') ?></span>
+                <span class="text">Partager</span>
+            </button>
+            <div class="dropdown__content">
+                    <?php snippet('modal-share') ?>
+                </div>
+            </div>
+
+
+            <?php if ($page->intendedTemplate()->name() === 'investigation'): ?>
+              <button class="btn--simple btn--download">
+                <a href="#" download>
+                    <span class="icon"><?= svg('assets/icons/download.svg') ?></span>
+                    <span class="text">Télécharger</span>
+                </a>
+            </button>
+            <?php endif ?>
+
+            <button class="btn--simple btn--support"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></button>
+
+            <button class="btn--simple btn--back-to-top">
+                <a href="#"><span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></a>
+            </button>
+
+    </div>
+</div>

site/snippets/card-open-graph.php

@@ -1,82 +1,81 @@
 <?php
-                        // URL à scraper (remplacez par l'URL souhaitée)
+/**
-                        $url = 'https://www.lemonde.fr/societe/article/2025/07/16/au-c-ur-des-emeutes-de-nouvelle-caledonie-quand-la-mort-de-banane-abattu-par-le-gign-lance-le-siege-de-saint-louis_6621496_3224.html';
+ * Card Open Graph snippet
+ * Fetches and displays OG data from an external URL with cache.
+ *
+ * @var string $url The URL to scrape OG data from
+ */
 
-                        // Fonction pour récupérer les données Open Graph
+if (empty($url)) return;
-                        function getOpenGraphData($url) {
+
+$cache = kirby()->cache('og');
+$cacheKey = md5($url);
+$ogData = $cache->get($cacheKey);
+
+if ($ogData === null) {
     $ogData = [
         'title'       => '',
         'description' => '',
         'image'       => '',
         'site_name'   => '',
-                                'url' => $url
+        'url'         => $url,
     ];
 
-                            // Configuration du contexte pour éviter les erreurs SSL
     $context = stream_context_create([
         'http' => [
             'method'  => 'GET',
             'header'  => 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36',
-                                    'timeout' => 10
+            'timeout' => 10,
         ],
         'ssl' => [
             'verify_peer'      => false,
-                                    'verify_peer_name' => false
+            'verify_peer_name' => false,
-                                ]
+        ],
     ]);
 
-                            // Récupérer le HTML
     $html = @file_get_contents($url, false, $context);
 
-                            if ($html === false) {
+    if ($html !== false) {
-                                return $ogData;
+        // Parse OG meta tags (both property...content and content...property orders)
-                            }
+        preg_match_all('/<meta\s+(?:property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']*)["\']|content=["\']([^"\']*?)["\']\s+property=["\']og:([^"\']+)["\'])/i', $html, $matches);
-
-                            // Parser les meta tags Open Graph
-                            preg_match_all('/<meta\s+property=["\']og:([^"\']+)["\']\s+content=["\']([^"\']+)["\']/i', $html, $matches);
 
         if (!empty($matches[1])) {
             foreach ($matches[1] as $index => $property) {
-                                    $content = $matches[2][$index];
+                $prop = $property ?: $matches[4][$index];
-                                    switch ($property) {
+                $content = $matches[2][$index] ?: $matches[3][$index];
+                $content = html_entity_decode(trim($content), ENT_QUOTES | ENT_HTML5, 'UTF-8');
+                switch ($prop) {
                     case 'title':
-                                            $ogData['title'] = htmlspecialchars($content);
+                        $ogData['title'] = $content;
                         break;
                     case 'description':
-                                            $ogData['description'] = htmlspecialchars($content);
+                        $ogData['description'] = $content;
                         break;
                     case 'image':
                         $ogData['image'] = $content;
                         break;
                     case 'site_name':
-                                            $ogData['site_name'] = htmlspecialchars($content);
+                        $ogData['site_name'] = $content;
                         break;
                 }
             }
         }
 
-                            // Fallback: si pas de og:title, utiliser <title>
+        // Fallback: use <title> if no og:title
         if (empty($ogData['title'])) {
             preg_match('/<title>([^<]+)<\/title>/i', $html, $titleMatch);
             if (!empty($titleMatch[1])) {
-                                    $ogData['title'] = htmlspecialchars($titleMatch[1]);
+                $ogData['title'] = html_entity_decode($titleMatch[1], ENT_QUOTES, 'UTF-8');
+            }
         }
     }
 
-                            // Fallback: si pas de site_name, utiliser le domaine
+    // Always use domain as site_name
-                            if (empty($ogData['site_name'])) {
     $parsed = parse_url($url);
     $ogData['site_name'] = $parsed['host'] ?? '';
+
+    $cache->set($cacheKey, $ogData, 360); // 6 hours
 }
-
-                            return $ogData;
-                        }
-
-                        $ogData = getOpenGraphData($url);
-
-                        // Toujours utiliser le domaine de l'URL pour site_name
-                        $parsed = parse_url($url);
-                        $ogData['site_name'] = $parsed['host'] ?? '';
 ?>
 
 <div class="card--open-graph">
@@ -84,28 +83,27 @@
 
     <?php if (!empty($ogData['image'])): ?>
     <figure>
-                                <img src="<?= $ogData['image'] ?>" alt="<?= $ogData['title'] ?>">
+        <img src="<?= htmlspecialchars($ogData['image']) ?>" alt="">
     </figure>
-                            <?php endif; ?>
+    <?php endif ?>
 
     <div class="content">
         <?php if (!empty($ogData['site_name'])): ?>
-                                <span class="site-name"><?= $ogData['site_name'] ?></span>
+        <span class="site-name"><?= htmlspecialchars($ogData['site_name']) ?></span>
-                                <?php endif; ?>
+        <?php endif ?>
 
         <?php if (!empty($ogData['title'])): ?>
-
         <h3 class="title">
-                                    <a href="<?= $ogData['url'] ?>" target="_blank">
+            <a href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank">
-                                        <?= $ogData['title'] ?>
+                <?= htmlspecialchars($ogData['title']) ?>
             </a>
         </h3>
-                                <?php endif; ?>
+        <?php endif ?>
 
         <?php if (!empty($ogData['description'])): ?>
-                                <p class="description"><?= $ogData['description'] ?></p>
+        <p class="description"><?= htmlspecialchars($ogData['description']) ?></p>
-                                <?php endif; ?>
+        <?php endif ?>
     </div>
-                            <a class="link-block" href="<?= $ogData['url'] ?>" target="_blank"></a>
+    <a class="link-block" href="<?= htmlspecialchars($ogData['url']) ?>" target="_blank"></a>
 </div>
 </div>

site/snippets/footer.php

@@ -1,65 +1,41 @@
 <?php snippet('back-to-top') ?>
+
+<div id="support-bar">
+    <div class="support-bar__container">
+      <p class="baseline">Pour continuer à enquêter, nous avons besoin de vous</p>
+     <button class="btn"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></button>
+    </div>
+</div>
+
+
 <footer id="site-footer">
+
+
   <div class="site-footer__container">
 
     <div class="logo"><?= svg('assets/images/index-logo.svg') ?></div>
+    <p class="baseline">Index est une ONG d’investigation numérique, au&nbsp;service du public, de&nbsp;la&nbsp;vérité et&nbsp;de&nbsp;la&nbsp;justice.</p>
 
-    <div class="footer__newsletter">
+    <div class="list-links">
+      <ul>
+        <li><a target="_blank" href="<?= page('mentions-legales')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Legal notices' : 'Mentions légales' ?></a></li>
+        <li><a target="_blank" href="<?= page('politique-de-confidentialite')->url() ?>"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Privacy policy' : 'Politique de confidentialité' ?></a></li>
+      </ul>
+      <ul class="hightlight">
+        <li><a target="_blank" href="#">Contact</a></li>
+        <li><a target="_blank" href="#">Newsletter</a></li>
+      </ul>
 
-      <p>
-        Recevez les dernières enquêtes et actualités d’Index directement
-        dans votre boîte mail.
-      </p>
-      <p>Inscrivez-vous à la newsletter</p>
-  
-      <form class="form__newsletter">
-        <input
-          type="email"
-          name="email"
-          placeholder="Votre adresse e-mail"
-          required
-        />
-        <button class="btn--newletter" type="submit" aria-label="s’inscrire">
-          <span class="txt">S’inscrire</span>
-          <span class="icon">
-            <svg
-              clip-rule="evenodd"
-              fill-rule="evenodd"
-              stroke-linejoin="round"
-              stroke-miterlimit="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="m14.523 18.787s4.501-4.505 6.255-6.26c.146-.146.219-.338.219-.53s-.073-.383-.219-.53c-1.753-1.754-6.255-6.258-6.255-6.258-.144-.145-.334-.217-.524-.217-.193 0-.385.074-.532.221-.293.292-.295.766-.004 1.056l4.978 4.978h-14.692c-.414 0-.75.336-.75.75s.336.75.75.75h14.692l-4.979 4.979c-.289.289-.286.762.006 1.054.148.148.341.222.533.222.19 0 .378-.072.522-.215z"
-                fill-rule="nonzero"
-              />
-            </svg>
-          </span>
-        </button>
-      </form>
-  
-      <p class="p__small">
-        En vous inscrivant, vous acceptez les
-        <a target="_blank" href="https://www.index.ngo/mentions-legales/"
-          >conditions d’utilisation</a
-        >
-        d’Index qui vous informent notamment des droits dont vous disposez
-        sur vos données personnelles.
-      </p>
     </div>
   
-    <div class="footer__socials">
+
-      <p>Suivez Index sur les réseaux sociaux</p>
       <?php snippet('socials') ?>
-    </div>
 
-    <div class="footer__mentions">
+          <p class="credits">
-      <p>
+            © 2025 Index Investigation | Site&nbsp;développé par&nbsp;<a href="https://studio-variable.com/" target="_blank">Studio&nbsp;Variable</a>
-        © 2025 Index Investigation |
-        <a target="_blank" href="https://www.index.ngo/mentions-legales/">Mentions légales</a>
           </p>
-    </div>
+  
+ 
   </div>
 </footer>
 <?php snippet('seo/schemas'); ?>

site/snippets/header.php

@@ -7,12 +7,6 @@
   <link rel="stylesheet" type="text/css" href="<?= url('assets/fonts/stylesheet.css') ?>">
   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
   <meta name="robots" content="noindex,nofollow">
-  <title>
-    <?php if ($page->isHomePage() == false): ?>
-    <?= $page->title() ?>&nbsp;|&nbsp;
-    <?php endif ?>
-    <?= $site->title() ?>
-  </title>
 
   <link
       rel="stylesheet"
@@ -32,24 +26,35 @@
     <h1 id="site-title">
       <a
         href="<?= $site->url() ?>"
-        aria-label="Retour à l’accueil"
+        aria-label="Retour à l'accueil"
         title="aller au site d'Index"
       >
       <?= svg('assets/images/index-logo.svg') ?>
       </a>
     </h1>
 
-    <!-- Note: toujours mettre .header__title-page (j’en ai besoin pour la mise en forme) mais le laisser vide sur la plupart des pages sauf les pages enquêtes --> 
-    <p class="header__title-page">L’exécution de Nidal et Khaled ‘Amirah à Naplouse</p>
-
     <nav id="nav-highlight">
         <ul>
-            <li><a href="/enquetes">Enquêtes</a></li>
+          <li><a href="<?= page('enquetes')->url() ?>"><?= t('investigations.title') ?></a></li>
-            <li><a href="/impacts">Impact</a></li>
+          <li><a href="<?= page('impacts')->url() ?>"><?= t('impacts.title') ?></a></li>
-            <li class="soutenir"><a targer="_blank" href="https://soutenir.index.ngo/">Soutenez-nous</a></li>
+          <li><a href="<?= page('ressources')->url() ?>"><?= t('resources.title') ?></a></li>
+          <li class="support highlight"><a href="https://soutenir.index.ngo/" target="_blank" rel="noopener"><?= kirby()->language() && kirby()->language()->code() === 'en' ? 'Support us' : 'Soutenez-nous' ?></a></li>
         </ul>
     </nav>
 
+    <?php if ($page->template() == 'investigation'): ?>
+    <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>
+             <li><a href="#methodologies">Méthodologies</a></li>
+             <li><a href="#impacts">Impact</a></li>
+             <li><a href="#related-investigations">En lien</a></li>
+      </ul>
+    </nav>
+    <?php endif ?>
+      
     <button id="theme-toggle">
         <svg style="fill: var(--color-txt)" class="switch" width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 22
@@ -69,10 +74,11 @@
         <?php endforeach ?>
     </div>
 
-    <button id="menu-toggle">
+    <button id="menu-toggle" aria-expanded="false" aria-controls="site-menu" aria-label="Ouvrir le menu">
       <span class="open"><?= svg('assets/icons/menu.svg') ?></span>
       <span class="close"><?= svg('assets/icons/close.svg') ?></span>
     </button>
   </div>
 </header>
 <?php snippet('nav') ?>
+<div id="menu-overlay"></div>