design bottom bar

assets/css/base/_body.scss

@@ -118,6 +118,21 @@ 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{

assets/css/components/_bottom-bar.scss

@@ -0,0 +1,66 @@
+.bottom-bar{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    height: calc(var(--header-h)*0.75);
+    width: 100vw;
+    background-color: var(--color-bg);
+    padding-left: var(--padding-body);
+    padding-right: var(--padding-body);
+
+    border-top: 2px solid var(--grey-800);
+
+    .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;
+        }
+    }
+
+
+    .title-group{
+        font-size: var(--fs-small);
+        display: flex;
+        color: var(--color-txt-light);
+        flex-grow: 1;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+     
+     
+        //  align-items: center;
+
+
+        .type{
+                text-transform: uppercase;
+                &::after{
+                    content: "/";
+                    padding-left: 1ch;
+                    padding-right: 1ch;
+                }
+                
+        }
+
+      
+    }
+}

assets/css/components/_buttons.scss

@@ -92,6 +92,42 @@ button:disabled{
     a{ color: var(--color-bg); }
     svg{ fill: var(--color-bg); }
 }
+
+
+.btn--simple{
+    height: calc(var(--h-block)*1);
+    font-size: var(--fs-small);
+    font-weight: 500;
+    text-transform: uppercase;
+    line-height: 1;
+    white-space: nowrap;
+    @include icon(20px);
+    .icon{
+        position: relative;
+        top: -2px;
+    }
+
+   a{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        width: 100%;
+        height: 100%;
+        padding: 0 2ch;
+        padding-top: 4px;
+          white-space: nowrap;
+    }
+    &.no-link{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1ch;
+        padding: 0 2ch;
+        padding-top: 4px;
+
+    }
+}
  
 .btn--bold, 
 .btn--bold-inline{
@@ -264,5 +300,11 @@ button:disabled{
 }
 
 
-
+.btn--support{
-
+    color: var(--color-accent);
+    &:hover{
+        color: var(--color-accent);
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+}

assets/css/style.css

@@ -344,6 +344,47 @@ button:disabled {
   fill: var(--color-bg);
 }
 
+.btn--simple {
+  height: calc(var(--h-block) * 1);
+  font-size: var(--fs-small);
+  font-weight: 500;
+  text-transform: uppercase;
+  line-height: 1;
+  white-space: nowrap;
+}
+.btn--simple .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+}
+.btn--simple .icon svg {
+  width: 20px;
+  height: 20px;
+}
+.btn--simple .icon {
+  position: relative;
+  top: -2px;
+}
+.btn--simple a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  width: 100%;
+  height: 100%;
+  padding: 0 2ch;
+  padding-top: 4px;
+  white-space: nowrap;
+}
+.btn--simple.no-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1ch;
+  padding: 0 2ch;
+  padding-top: 4px;
+}
+
 .btn--bold,
 .btn--bold-inline {
   display: block;
@@ -480,6 +521,15 @@ button:disabled {
   fill: var(--grey-100);
 }
 
+.btn--support {
+  color: var(--color-accent);
+}
+.btn--support:hover {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .category {
   height: calc(var(--h-block) * 0.75);
   border-radius: var(--radius-small);
@@ -1994,6 +2044,64 @@ button.sort[data-sort-type=up] .arrow {
   box-shadow: 1px 1px 1px hsla(0, 50%, 2%, 0.5);
 }
 
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: calc(var(--header-h) * 0.75);
+  width: 100vw;
+  background-color: var(--color-bg);
+  padding-left: var(--padding-body);
+  padding-right: var(--padding-body);
+  border-top: 2px solid var(--grey-800);
+}
+.bottom-bar .bottom-bar__inner {
+  height: calc(var(--header-h) * 0.75);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--padding-inner);
+}
+.bottom-bar .btn--back-to-top .icon {
+  display: flex;
+  width: 20px;
+  height: 20px;
+}
+.bottom-bar .btn--back-to-top .icon svg {
+  width: 20px;
+  height: 20px;
+}
+.bottom-bar .btn--back-to-top {
+  position: relative;
+  top: -3px;
+  width: 100px;
+}
+.bottom-bar .btn--back-to-top a {
+  justify-content: flex-end;
+}
+.bottom-bar .btn--back-to-top .icon {
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+.bottom-bar .title-group {
+  font-size: var(--fs-small);
+  display: flex;
+  color: var(--color-txt-light);
+  flex-grow: 1;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.bottom-bar .title-group .type {
+  text-transform: uppercase;
+}
+.bottom-bar .title-group .type::after {
+  content: "/";
+  padding-left: 1ch;
+  padding-right: 1ch;
+}
+
 #site-header {
   z-index: var(--z-header);
   --gap: 3ch;

assets/css/style.scss

@@ -29,6 +29,7 @@
 @import "components/card-open-graph";
 @import "components/swiper";
 @import "components/slider-before-after";
+@import "components/bottom-bar";
 
 @import "partials/site-header";
 @import "partials/site-menu";

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/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/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/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,10 +1,6 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
-import { panelToggle, tocMobile } from './panel.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';
@@ -15,16 +11,11 @@ const responsiveSmall = 768;
 
 window.onload = async function () {
   console.log("SCRIPT LOADED");
+
   headerToggle();
-  panelToggle(responsiveSmall);
   themeToggle();
 
-
-  tocMobile(responsiveSmall);
   copyLink();
-  btnGroupMobile(responsiveSmall)
-  bannerStickyDesktop(responsiveSmall);
-  initHeroSlider();
   playVideo();
   initDropdowns(responsiveSmall);
   initSwipers();

site/blueprints/pages/investigation.yml

@@ -115,7 +115,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/templates/investigation.php

@@ -1,6 +1,6 @@
 <?php snippet('header') ?>
 
-
+<!-- 
 <div class="btn--group__mobile">
 <div class="dropdown dropdown--position-mobile">
     <button class="dropdown__trigger btn--bold-inline no-link">
@@ -11,7 +11,9 @@
         <?php snippet('modal-share') ?>
     </div>
 </div>
-</div>
+</div> -->
+
+
 
 
 <main>
@@ -27,8 +29,6 @@
 
 
 <div class="page__content">
-
-
 <?php
 $videoPreview = $page->videoPreview()->toFile();
 $hasVideo = $videoPreview || $page->videoUrl()->isNotEmpty();
@@ -465,10 +465,57 @@ if ($package):
     </article>
     <?php endforeach ?>
 
+     <div class="see-more">
+        <button class="btn--bold-inline">
+          <a href="/enquetes">
+          <span class="text">Voir toutes les enquêtes</span>
+          <span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
+          </a>
+        </button>
+      </div>
+
 </aside>
 
 </div>
 <?php endif ?>
 
 </main>
+
+
+
+<div class="bottom-bar">
+    <div class="bottom-bar__inner">
+
+            <div class="title-group">
+                <p class="type">Enquête</p>
+                <p class="title"><?= $page->title()->esc() ?></p>
+            </div>
+
+            <div class="dropdown dropdown--position-mobile">
+            <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>
+    
+
+              <button class="btn--simple">
+                <a href="#" download>
+                    <span class="icon"><?= svg('assets/icons/printer.svg') ?></span>
+                    <span class="text">Télécharger</span>
+                </a>
+            </button>
+
+            <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>
+
 <?php snippet('footer') ?>