banner script

assets/css/base/_body.scss

@@ -31,6 +31,7 @@ body{
     background-color: var(--color-bg);
     width: 100vw;
     overflow-x: hidden;
+      
 }
 
 img{
@@ -49,3 +50,8 @@ img{
     //     background-color: rgba(255, 0, 0, 0.244);
     // }
 }
+
+
+body, #site-header, #site-footer{
+    transition: background-color 0.3s ease, color 0.3s ease;
+}

assets/css/base/_var.scss

@@ -48,7 +48,7 @@
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
   --dark: black;
-
+  --color-form: white;
 
 
   --border: 1px solid var(--color-txt);
@@ -87,5 +87,28 @@
     --fs-xbig: 32px;
 
     --header-h: 60px;
+
   }
 }
+
+
+
+:root[data-theme="light"] {
+  --grey-100: #1f1f1f;
+  --grey-200: #2f2f2f;
+  --grey-300: #4a4a4a;
+  --grey-400: #6a6a6a;
+  --grey-600: #9a9a9a;
+  --grey-800: #cfcfcf;
+
+  --color-bg: #efefef;
+  --color-txt: #000000;
+  --color-txt-light: var(--grey-400);
+
+  --color-accent: #ff00ff;
+  --color-accent-50: #ffe9ff;
+  --color-accent-100: #fdd8fd;
+
+  --dark: white;
+  --color-form: var(--color-bg);
+}

assets/css/components/_form-newsletter.scss

@@ -14,20 +14,24 @@
         width: 100%;
         border-radius: calc(var(--h-block)*0.625);
         outline: none;
-        border: none;
+        border: 1px solid var(--color-txt);
         padding: 0 2ch;
         font-family: var(--font);
 
         font-size: var(--fs-normal);
         z-index: 40;
         padding-top: 4px;
+        background: var(--color-bg);
+        color: var(--color-txt);
         &::placeholder{
             font-family: var(--font);
             font-size: var(--fs-normal);
+            color: var(--color-txt);
         }
 
         &:focus{
-            outline: 3px solid var(--grey-400);
+            border: 1px solid var(--color-accent);
+            // outline: 3px solid var(--grey-400);
         }
 
       
@@ -35,7 +39,7 @@
 
     button[type="submit"].btn--newletter{
         position: absolute;
-        right: 2px;
+        right: 4px;
         z-index: 100;
     }
 
@@ -43,7 +47,7 @@
     button[type="submit"].btn--newletter {
 
     
-        --size: calc(var(--h-block)*1.25 - 4px);
+        --size: calc(var(--h-block)*1.25 - 8px);
         font-family: var(--font);
         font-size: var(--fs-button-bold);
         height: var(--size);

assets/css/partials/_site-footer.scss

@@ -74,7 +74,7 @@
         margin: 0 auto;
     }
 
-    .footer__socials .container{
+    .footer__socials .socials{
         max-width: 400px;
         columns: 2;
         margin-top: calc(var(--spacing)*1);

assets/css/style.css

@@ -28,6 +28,7 @@
   --color-accent-50: #e9ffe9;
   --color-accent-100: #d8fdd8;
   --dark: black;
+  --color-form: white;
   --border: 1px solid var(--color-txt);
   --border-medium: 1px solid var(--grey-600);
   --border-light: 1px solid var(--grey-800);
@@ -61,6 +62,23 @@
     --header-h: 60px;
   }
 }
+:root[data-theme=light] {
+  --grey-100: #1f1f1f;
+  --grey-200: #2f2f2f;
+  --grey-300: #4a4a4a;
+  --grey-400: #6a6a6a;
+  --grey-600: #9a9a9a;
+  --grey-800: #cfcfcf;
+  --color-bg: #efefef;
+  --color-txt: #000000;
+  --color-txt-light: var(--grey-400);
+  --color-accent: #ff00ff;
+  --color-accent-50: #ffe9ff;
+  --color-accent-100: #fdd8fd;
+  --dark: white;
+  --color-form: var(--color-bg);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -110,6 +128,10 @@ img {
   cursor: pointer;
 }
 
+body, #site-header, #site-footer {
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
 @keyframes add-border {
   from {
     border-bottom-color: transparent;
@@ -423,31 +445,35 @@ button:disabled {
   width: 100%;
   border-radius: calc(var(--h-block) * 0.625);
   outline: none;
-  border: none;
+  border: 1px solid var(--color-txt);
   padding: 0 2ch;
   font-family: var(--font);
   font-size: var(--fs-normal);
   z-index: 40;
   padding-top: 4px;
+  background: var(--color-bg);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]::-moz-placeholder {
   font-family: var(--font);
   font-size: var(--fs-normal);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]::placeholder {
   font-family: var(--font);
   font-size: var(--fs-normal);
+  color: var(--color-txt);
 }
 .form__newsletter input[type=email]:focus {
-  outline: 3px solid var(--grey-400);
+  border: 1px solid var(--color-accent);
 }
 .form__newsletter button[type=submit].btn--newletter {
   position: absolute;
-  right: 2px;
+  right: 4px;
   z-index: 100;
 }
 .form__newsletter button[type=submit].btn--newletter {
-  --size: calc(var(--h-block)*1.25 - 4px);
+  --size: calc(var(--h-block)*1.25 - 8px);
   font-family: var(--font);
   font-size: var(--fs-button-bold);
   height: var(--size);
@@ -1255,7 +1281,7 @@ body.menu-open #menu-toggle .close {
     max-width: 1200px;
     margin: 0 auto;
   }
-  #site-footer .footer__socials .container {
+  #site-footer .footer__socials .socials {
     max-width: 400px;
     -moz-columns: 2;
          columns: 2;

assets/js/banner-sticky-desktop.js

@@ -0,0 +1,61 @@
+let isInitialized = false;
+
+export function bannerStickyDesktop(responsiveSmall) {
+    if (isInitialized) return;
+
+    let main = document.querySelector("main");
+    if (!main || !main.classList.contains("page-enquete")) return;
+
+    let bannerPage = main.querySelector("#banner--page");
+    let sectionDl = document.querySelector("#section__dl");
+    let footer = document.querySelector("#site-footer");
+
+    if (!bannerPage || !sectionDl || !footer) return;
+
+    // Stocker la hauteur initiale du banner
+    const bannerInitialHeight = bannerPage.offsetHeight;
+
+    // Stocker la position initiale du footer (calculée une seule fois au chargement)
+    let footerInitialTop = footer.offsetTop;
+
+    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
+            bannerPage.style.transform = '';
+            return;
+        }
+
+        // Calculer la position du bas de la fenêtre
+        const windowBottom = window.scrollY + window.innerHeight;
+
+        // Calculer de combien on dépasse le haut du footer (position initiale)
+        const overlap = windowBottom - footerInitialTop;
+
+        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);
+            bannerPage.style.transform = `translateY(-${translateValue}px)`;
+        } else {
+            // Réinitialiser la position si on n'a pas encore atteint le footer
+            bannerPage.style.transform = 'translateY(0)';
+        }
+    }
+
+    window.addEventListener('scroll', checkScroll);
+    window.addEventListener('resize', () => {
+        // Recalculer la position du footer lors du resize
+        if (window.innerWidth > responsiveSmall) {
+            bannerPage.style.transform = '';
+            footerInitialTop = footer.offsetTop;
+        }
+        checkScroll();
+    });
+
+    checkScroll();
+
+    isInitialized = true;
+}

assets/js/banner-sticky-mobile.js

@@ -1,6 +1,6 @@
 let isInitialized = false;
 
-export function btnSticky(responsiveSmall) {
+export function bannerStickyMobile(responsiveSmall) {
     if (isInitialized) return;
 
     let main = document.querySelector("main");

assets/js/script.js

@@ -1,6 +1,8 @@
 import { headerToggle, headerScrollVisibility } from './header.js';
 import { copyLink } from './share.js';
-import { btnSticky } from './mobile-sticky.js';
+import { bannerStickyMobile } from './banner-sticky-mobile.js';
+import { bannerStickyDesktop } from './banner-sticky-desktop.js';
+import { themeToggle } from './themeToggle.js';
 
 const responsiveMedium = 1080;
 const responsiveSmall = 768;
@@ -10,5 +12,7 @@ window.onload = async function () {
   headerToggle();
   headerScrollVisibility();
   copyLink();
-  btnSticky(responsiveSmall);
+  themeToggle();
+  bannerStickyMobile(responsiveSmall);
+  bannerStickyDesktop(responsiveSmall);
 }

assets/js/themeToggle.js

@@ -0,0 +1,26 @@
+export function themeToggle() {
+    const button = document.querySelector('#theme-toggle');
+    const root = document.documentElement;
+  
+    if (!button) return;
+  
+    // Appliquer le thème sauvegardé (si présent)
+    const savedTheme = localStorage.getItem('theme');
+    if (savedTheme === 'light') {
+      root.setAttribute('data-theme', 'light');
+    }
+  
+    button.addEventListener('click', () => {
+      const isLight = root.getAttribute('data-theme') === 'light';
+      const nextTheme = isLight ? 'dark' : 'light';
+  
+      root.setAttribute('data-theme', nextTheme);
+      localStorage.setItem('theme', nextTheme);
+  
+      button.setAttribute(
+        'aria-label',
+        nextTheme === 'light' ? 'Activer le mode sombre' : 'Activer le mode clair'
+      );
+    });
+  }
+