first commit

2025-12-10 15:12:06 +01:00 · 2025-12-10 15:12:06 +01:00 · a3620a1f5f
commit a3620a1f5f
1042 changed files with 226722 additions and 0 deletions
--- a/assets/css/base/_body.scss
+++ b/assets/css/base/_body.scss
@ -0,0 +1,44 @@
+* {
+    margin: 0;
+    padding: 0;
+
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    -o-font-smoothing: antialiased;
+
+    scroll-behavior: smooth;
+}
+a {
+    color: currentColor;
+}
+button{
+    background: none;
+    outline: none;
+    border: none;
+    color: var(--color-txt);
+}
+iframe{
+    border: none;
+}
+
+body{
+    font-family: var(--font);
+    line-height: var(--leading-normal);
+    font-size: var(--fs-normal);
+
+    color: var(--color-txt);
+    background-color: var(--color-bg);
+    padding: 0px var(--padding-body);
+
+    width: 100vw;
+    overflow-x: hidden;
+    
+}
+
+
+
+main{
+    padding-top:  var(--header-h);
+    // padding-bottom: 10vh;
+}
--- a/assets/css/base/_responsive.scss
+++ b/assets/css/base/_responsive.scss
@ -0,0 +1,11 @@
+$desktop: "screen and (min-width: 1200px)";
+$medium: "screen and (max-width: 1080px)";
+$medium-up: "screen and (min-width: 1080px)";
+$small-up: "screen and (min-width: 720px)";
+$small: "screen and (max-width: 720px)";
+$x-small: "screen and (max-width: 560px)";
+$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
+
+@media #{$medium}{
+
+}
--- a/assets/css/base/_var.scss
+++ b/assets/css/base/_var.scss
@ -0,0 +1,60 @@
+:root {
+  --font: 'Executive', Arial, sans-serif;
+  --title: 'System', Arial, sans-serif;
+
+  // --fs-x-small: 10px;
+  // --fs-small: 12px;
+  // --fs-normal: 16px;
+  // --fs-medium: 22px;
+  // --fs-big: 38px;
+
+  --fs-x-small: 10px;
+  --fs-small: 12px;
+  --fs-normal: 16px;
+  --fs-medium: 20px;
+  --fs-big: 30px;
+  --fs-x-big: 38px;
+
+  --fs-button-bold: 22px;
+
+  @media #{$small} {
+    --fs-medium: 20px;
+    --fs-big: 26px;
+  }
+
+  --leading-tight: 1;
+  --leading-normal: 1.2;
+  // --leading-relaxed: 1.4;
+  // --leading-loose: 1.8;
+
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
+  --color-bg: #161616;
+  --color-txt: #ffffff;
+  --color-accent: #00ff00;
+  --color-accent-50: #e9ffe9;
+  --color-accent-100: #d8fdd8;
+
+  --grey-100: #d8d8d8;
+  --grey-300: #b9b9b9;
+  --grey-400: #969696;
+  --grey-600: #6d6d6d;
+  --grey-800: #383838;
+
+  --border: 1px solid var(--color-txt);
+  --border-light: 1px solid var(--grey-800);
+
+  --header-h: 80px;
+  --header-h-shrinked: 50px;
+
+  // responsive
+  --padding-body: 20px;
+
+  --radius-small: 4px;
+  --spacing: 30px;
+  --h-block: 30px;
+
+  --curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
--- a/assets/css/components/_btn--default.scss
+++ b/assets/css/components/_btn--default.scss
@ -0,0 +1,79 @@
+.btn__default{
+
+    
+    --size: calc(var(--h-block) - 8px);
+    font-size: var(--fs-normal);
+    font-weight: var(--fw-normal);
+    height: var(--size);
+    padding-right: 1.5ch;
+
+    position: relative;
+
+
+    display: flex;
+    align-items: center;
+    gap: 0ch;
+    // padding-right: 0.5ch;
+    color: var(--color-accent);
+    font-weight: var(--fw-medium);
+    text-decoration: none;
+
+    cursor: pointer;
+
+
+    .icon, .txt{ z-index: 10; }
+
+    .icon{
+        width: var(--size);
+        height: var(--size);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--color-bg);
+        text-align: center;
+
+        svg{
+            fill: var(--color-bg);
+            width: 80%;
+        }
+    }
+
+    .txt{
+        font-family: var(--font-title);
+        color: var(--color-accent);
+        font-size: var(--fs-normal);
+        font-weight: var(--fw-bold);
+        padding-left: 1ch;
+    }
+
+    &::after{
+        content: '';
+        display: block;
+        background-color: var(--color-accent);
+        border-radius: calc(var(--size)/2);
+        width: var(--size);
+        height: var(--size);
+        position: absolute; 
+        left: 0;
+        z-index: 0;
+        transition: width .2s
+    }
+
+    &:hover{
+        // 
+        .txt{
+            color: var(--color-bg);
+                        display: block;
+                    }
+        &::after{
+            width: 100%;
+        }
+    }
+
+    
+
+
+
+   
+}
+
--- a/assets/css/components/_btn--don.scss
+++ b/assets/css/components/_btn--don.scss
@ -0,0 +1,60 @@
+#btn--don__mobile {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding-top: calc(var(--spacing) * 0.5);
+  padding-bottom: calc(var(--spacing) * 1.5);
+  position: fixed;
+  bottom: 0px;
+  left: 0;
+  z-index: 100;
+  opacity: 0;
+  transition: opacity ease-in 0.2s;
+
+  pointer-events: none;
+  &.is-visible {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  &.is-sticky {
+    position: relative;
+  }
+
+  @media #{$small-up} {
+    display: none !important;
+  }
+}
+
+.btn--don {
+  --vertical-padding: 0.5ch;
+  height: calc(var(--h-block) + var(--vertical-padding));
+  border-radius: calc(var(--h-block) / 1);
+  padding: var(--vertical-padding) 2ch;
+  background-color: var(--color-accent);
+  color: var(--color-bg);
+  font-family: var(--font);
+  font-size: var(--fs-medium);
+  font-weight: var(--fw-bold);
+
+  a {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5ch;
+  }
+
+  .icon {
+    height: 28px;
+    position: relative;
+    top: 1px;
+  }
+
+  svg {
+    fill: var(--color-bg);
+    width: 24px;
+    height: 24px;
+  }
+}
--- a/assets/css/components/_form-newsletter.scss
+++ b/assets/css/components/_form-newsletter.scss
@ -0,0 +1,127 @@
+.form__newsletter{
+    --size: 24px;
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+
+
+    input[type="email"]{
+        
+        height: calc(var(--h-block)*1.25);
+        width: 100%;
+        border-radius: calc(var(--h-block)*0.625);
+        outline: none;
+        border: none;
+        padding: 0 2ch;
+        font-family: var(--font);
+
+        font-size: var(--fs-normal);
+        z-index: 40;
+        padding-top: 4px;
+        &::placeholder{
+            font-family: var(--font);
+            font-size: var(--fs-normal);
+        }
+
+        &:focus{
+            outline: 3px solid var(--grey-400);
+        }
+
+      
+    }
+
+    button[type="submit"].btn--bold{
+        position: absolute;
+        right: 2px;
+        z-index: 100;
+    }
+
+
+    button[type="submit"].btn--bold {
+
+    
+        --size: calc(var(--h-block)*1.25 - 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;
+
+
+        .icon, .txt{ z-index: 10; }
+
+        .icon{
+            width: var(--size);
+            height: var(--size);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--color-bg);
+            text-align: center;
+
+            svg{
+                fill: var(--color-bg);
+                width: 80%;
+            }
+        }
+
+        .txt{
+            position: relative;
+            top: 2px;
+            font-size: var(--fs-normal);
+            display: none;
+            padding-left: 1ch;
+        }
+    
+        &::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 .2s
+        }
+    
+        &:hover{
+            .txt{
+                color: var(--color-bg);
+                            display: block;
+                        }
+            &::after{
+                width: 100%;
+            }
+        }
+
+        // @media #{$small}{ 
+        //     .txt{
+        //         color: var(--color-bg);
+        //                     display: block;
+        //                 }
+        //     &::after{
+        //         width: 100%;
+        //     }
+        // }
+
+    
+       
+    }
+
+
+
+
+}
--- a/assets/css/components/_gauge.scss
+++ b/assets/css/components/_gauge.scss
@ -0,0 +1,90 @@
+.gauge__container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+  position: relative;
+  top: calc(var(--spacing) * 0.25);
+
+  padding: 0 calc(var(--spacing) * 0.5);
+}
+
+#gauge {
+  --gauge-h: 12px;
+  width: 100%;
+  margin-bottom: calc(var(--spacing) * 0.25);
+  height: var(--gauge-h);
+  border-radius: calc(var(--gauge-h) * 0.5);
+  background-color: var(--color-bg);
+  border: 1px solid var(--color-txt);
+  position: relative;
+  // overflow: hidden;
+  box-shadow: 7px 6px 5px -3px rgba(0, 0, 0, 0.14);
+  &::before {
+    content: '';
+    display: block;
+    height: calc(var(--gauge-h) - 2px);
+    border-radius: calc(var(--gauge-h) * 0.5);
+    width: var(--pourcent);
+    min-width: 20px;
+    background-color: var(--color-accent);
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    transition: width cubic-bezier(0.86, 0, 0.07, 1) 1s;
+  }
+}
+
+.gauge--infos {
+  .property {
+    font-size: var(--fs-small);
+    padding-bottom: 3px;
+  }
+
+  .value {
+    font-size: var(--fs-small);
+  }
+
+  &:last-of-type {
+    text-align: right;
+  }
+}
+
+#gauge--infos__donors {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .value {
+    font-weight: bold;
+    display: inline;
+  }
+
+  .property {
+    display: inline;
+    padding-bottom: 0;
+  }
+}
+
+
+@media #{$small-up} {
+  #gauge {
+    --gauge-h: 18px;
+    
+    border: 2px solid var(--color-txt);
+    &::before {
+      height: calc(var(--gauge-h) - 4px);
+    }
+  }
+
+  .gauge--infos {
+    .property {
+      font-size: var(--fs-small);
+    }
+    .value {
+      font-size: var(--fs-normal);
+    }
+  }
+}
--- a/assets/css/components/_nav-tabs.scss
+++ b/assets/css/components/_nav-tabs.scss
@ -0,0 +1,40 @@
+.nav--tabs{
+    height: calc(var(--h-block)*1);
+    width: auto;
+    border: var(--border);
+    border-radius: var(--radius-small);
+    overflow: hidden;
+
+
+    display: inline-flex;
+
+    width: auto;
+    margin: 0 auto;  
+    margin-bottom: var(--spacing);
+ 
+
+    .nav--tabs__btn{
+        font-family: var(--font);
+        font-size: var(--fs-small);
+        font-weight: var(--fw-medium);
+        padding: 0 2ch;
+
+        &.is-selected{
+            background-color: var(--color-txt);
+            color: var(--color-bg);
+        }
+
+        &:not(.is-selected):hover{
+            background-color: var(--grey-800);
+            cursor: pointer;
+        }
+
+    }
+
+    .nav--tabs__btn +  .nav--tabs__btn{
+        border-left: var(--border);
+
+    }
+
+
+}
--- a/assets/css/components/_text.scss
+++ b/assets/css/components/_text.scss
@ -0,0 +1,65 @@
+[data-template="subscription-newsletter"],
+[data-template="thanks"],
+[data-template="support"],
+[data-template="store"] {
+  .p__baseline-big {
+    font-family: var(--title);
+    font-size: var(--fs-big);
+    font-weight: var(--fw-bold);
+    line-height: 1.1;
+    text-align: center;
+    margin: calc(var(--spacing) * 1) 0;
+
+    strong {
+      font-weight: var(--fw-bolf);
+      color: var(--color-accent);
+    }
+
+    .link-don {
+      display: block;
+      color: var(--color-accent);
+      text-decoration: none;
+      // &::after{
+      //     content: ' ↗';
+      //     font-size: 0.8em;
+      // }
+      &:hover {
+        text-decoration: underline 2px;
+        text-underline-offset: 4px;
+      }
+    }
+  }
+
+  .p__baseline {
+    font-size: var(--fs-medium);
+    font-weight: var(--fw-medium);
+    line-height: 1.1;
+    text-align: center;
+    margin: calc(var(--spacing) * 1) 0;
+    @media #{$small} {
+      text-align: center;
+      margin: var(--spacing) 0;
+    }
+  }
+
+  .p__details {
+    font-size: var(--fs-small);
+    margin-bottom: 0.5em;
+    color: var(--grey-400);
+  }
+
+  .section__heading {
+    font-size: var(--fs-normal);
+    font-weight: var(--fw-medium);
+    line-height: 1;
+    text-align: center;
+    margin-top: calc(var(--spacing) * 0.5);
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
+  ul,
+  ol {
+    margin-left: 3ch;
+    margin-bottom: 0.5em;
+  }
+}
--- a/assets/css/partials/_site-footer.scss
+++ b/assets/css/partials/_site-footer.scss
@ -0,0 +1,112 @@
+#site-footer {
+  background-color: black;
+
+  width: 100vw;
+  position: relative;
+  left: calc(var(--padding-body) * -1);
+  padding: calc(var(--padding-body) * 2) var(--padding-body);
+  //    border-top: var(--border-light);
+
+  p {
+    margin: calc(var(--spacing) * 0.5) 0;
+
+    a {
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .p__small {
+    font-size: var(--fs-x-small);
+    // margin-top: calc(var(--spacing)*0.5)
+  }
+
+  #list-socials {
+    list-style: none;
+    columns: 2;
+    max-width: 500px;
+    margin: 0;
+    a {
+      display: flex;
+      align-items: center;
+      gap: 1ch;
+      text-decoration: none;
+      height: calc(var(--spacing) * 1);
+
+      &::after {
+        content: "↗";
+        color: var(--grey-300);
+      }
+    }
+
+    .text {
+      line-height: 1;
+    }
+
+    .icon {
+      width: 20px;
+      height: 20px;
+      position: relative;
+      top: -2px;
+    }
+    svg {
+      display: flex;
+      align-items: center;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  @media #{$small} {
+    margin-top: calc(var(--spacing) * 2);
+    .footer__socials {
+      margin-top: calc(var(--spacing) * 1.5);
+    }
+    .footer__mentions {
+      margin-top: calc(var(--spacing) * 0.5);
+      p {
+        // font-size: var(--font-size);
+        margin-top: calc(var(--spacing) * 2);
+      }
+    }
+  }
+
+  @media #{$small-up} {
+    .site-footer__container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      column-gap: calc(var(--spacing) * 2);
+
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .footer__mentions {
+      grid-column: span 2;
+      text-align: center;
+      p {
+        font-size: var(--font-size);
+        margin-top: calc(var(--spacing) * 2);
+      }
+    }
+  }
+
+  @media #{$medium-up} {
+    .site-footer__container {
+      column-gap: calc(var(--spacing) * 4);
+    }
+  }
+
+  @media #{$small} {
+    .footer__mentions {
+      padding-top: calc(var(--spacing) * 1);
+      p {
+        margin-top: 0;
+      }
+
+      text-align: center;
+    }
+  }
+}
--- a/assets/css/partials/_site-header.scss
+++ b/assets/css/partials/_site-header.scss
@ -0,0 +1,78 @@
+@keyframes add-border {
+  from {
+    border-bottom-color: transparent;
+  }
+  to {
+    border-bottom: var(--grey-800);
+  }
+}
+
+#site-header {
+  position: fixed;
+  left: var(--padding-body);
+  top: 0px;
+  z-index: 900;
+
+  width: calc(100vw - var(--padding-body) * 2);
+  // padding: 0 var(--padding-body);
+  height: var(--header-h);
+  &.is-shrinked {
+    height: var(--header-h-shrinked);
+    // animation: add-border 0.2s linear 0.2s;
+    border-bottom: var(--border-light);
+  }
+  // transition: all ease-in 0.2s;
+
+  background-color: var(--color-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .site-title {
+    display: flex;
+    width: 120px;
+    transition: all ease-in 0.2s;
+    overflow: hidden;
+    svg {
+      fill: var(--color-txt);
+    }
+  }
+  &.is-shrinked {
+    .site-title {
+      width: 80px !important;
+    }
+  }
+
+  .header-left,
+  .header-right {
+    width: 90px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .header-center {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  #toggle-lang {
+    list-style: none;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75ch;
+    text-transform: uppercase;
+    color: var(--grey-400);
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+
+    a {
+      text-decoration: none;
+    }
+    li.is-selected {
+      color: var(--color-txt);
+    }
+  }
+}
--- a/assets/css/style.css
+++ b/assets/css/style.css
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -0,0 +1,27 @@
+@charset "UTF-8";
+@import "base/responsive";
+@import "base/var";
+@import "base/body";
+
+@import "components/nav-tabs";
+@import "components/btn--default";
+@import "components/btn--don";
+@import "components/form-newsletter";
+@import "components/gauge";
+@import "components/text";
+
+@import "partials/site-header";
+@import "partials/site-footer";
+
+@import "template/support/layout";
+@import "template/support/section--donation";
+@import "template/support/section--comments";
+@import "template/support/section--questions";
+@import "template/support/section--video";
+
+@import "template/shop/layout";
+@import "template/shop/section--product";
+@import "template/shop/thanks";
+@import "template/shop/snipcart";
+
+@import "template/subscription-newsletter/layout";
--- a/assets/css/template/shop/_layout.scss
+++ b/assets/css/template/shop/_layout.scss
@ -0,0 +1,84 @@
+[data-template="store"] {
+  main {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+
+  .p__baseline-big {
+    margin-top: calc(var(--spacing) * 2);
+  }
+
+  #store__container {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 4);
+    width: 100%;
+    max-width: 1000px;
+
+    .store__product {
+      position: relative;
+      figure {
+        aspect-ratio: 4/3;
+        background-color: var(--color-bg);
+        background-color: var(--data-bg);
+        margin-bottom: calc(var(--spacing) * 0.5);
+        overflow: hidden;
+      }
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        transition: var(--curve) 0.5s;
+      }
+
+      a {
+        text-decoration: none;
+      }
+
+      .link-block {
+        display: block;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        cursor: pointer;
+      }
+
+      &:hover {
+        figure {
+          overflow: hidden;
+        }
+        img {
+          transform: scale(1.05);
+        }
+
+        .line-1 {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    @media #{$small} {
+      .store__product {
+        margin-top: calc(var(--spacing) * 1.5);
+        margin-bottom: calc(var(--spacing) * 0.5);
+      }
+    }
+
+    @media #{$small-up} {
+      display: grid;
+      grid-template-columns: repeat(6, 1fr);
+      column-gap: calc(var(--padding-body) * 0.75);
+      row-gap: calc(var(--spacing) * 2);
+      margin-left: auto;
+      margin-right: auto;
+
+      .store__product {
+        grid-column: span 2;
+      }
+      .store__product:nth-of-type(1),
+      .store__product:nth-of-type(2) {
+        grid-column: span 3;
+      }
+    }
+  }
+}
--- a/assets/css/template/shop/_section--product.scss
+++ b/assets/css/template/shop/_section--product.scss
@ -0,0 +1,171 @@
+.section__product,
+.store__nav {
+  max-width: 1000px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.store__nav {
+  padding-top: calc(var(--spacing) * 1);
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  a::before {
+    content: "← ";
+  }
+}
+
+.section__product {
+  figure {
+    aspect-ratio: 1/1;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .product-options__list {
+    list-style: none;
+    display: flex;
+    gap: 2ch;
+
+    li {
+      position: relative;
+
+      input[type="radio"] {
+        position: fixed;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      label {
+        font-family: var(--title);
+        font-size: var(--fs-normal);
+        height: 4ch;
+        width: 4ch;
+        border-radius: 50%;
+        border: var(--border);
+        border-color: transparent;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-top: 0px;
+        cursor: pointer;
+      }
+
+      input[type="radio"]:checked + label {
+        border-color: var(--color-txt);
+      }
+
+      input[type="radio"]:not(:checked) + label:hover {
+        border-color: var(--grey-600);
+        background-color: var(--grey-800);
+      }
+    }
+  }
+
+  .hero {
+    margin-bottom: calc(var(--spacing) * 1);
+    padding-top: calc(var(--spacing) * 0.5);
+    border-top: var(--border-light);
+
+    .p__baseline-big {
+      margin: 0;
+      text-align: left;
+    }
+  }
+
+  .add-to-cart,
+  .product-options {
+    margin: 0;
+    border-bottom: var(--border-light);
+    padding: calc(var(--spacing) * 0.5) 0;
+  }
+
+  .product-options__label {
+    font-weight: 600;
+    margin-bottom: calc(var(--spacing) * 0.25);
+  }
+}
+
+@media #{$small} {
+  .store__nav a {
+    padding-top: 0;
+    font-size: var(--fs-small);
+  }
+
+  .section__product {
+    display: flex;
+    flex-direction: column;
+
+    .col-left {
+      display: contents;
+    }
+
+    .hero {
+      margin-top: calc(var(--spacing) * 0.5);
+      order: 1;
+    }
+    figure {
+      order: 2;
+      margin-bottom: calc(var(--spacing) * 1);
+    }
+
+    .details {
+      order: 3;
+      margin-bottom: calc(var(--spacing) * 1.5);
+    }
+
+    .product-options {
+      border-top: var(--border-light);
+      order: 4;
+    }
+
+    .add-to-cart {
+      order: 5;
+    }
+  }
+}
+
+@media #{$small-up} {
+  .section__product {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    aspect-ratio: 2/1;
+
+    margin-top: calc(var(--spacing) * 0.5);
+    position: relative;
+
+    .col-left {
+      padding-right: var(--padding-body);
+    }
+
+    .details {
+      margin-bottom: calc(var(--spacing) * 3);
+    }
+
+    .add-to-cart,
+    .product-options {
+      width: calc(50% - var(--padding-body));
+    }
+
+    .add-to-cart {
+      position: absolute;
+      bottom: 10px;
+    }
+
+    .product-options {
+      position: absolute;
+      bottom: calc(var(--spacing) * 2);
+      border-top: var(--border-light);
+    }
+  }
+}
--- a/assets/css/template/shop/_snipcart.scss
+++ b/assets/css/template/shop/_snipcart.scss
@ -0,0 +1,3 @@
+.snipcart-modal__container {
+  z-index: 1000;
+}
--- a/assets/css/template/shop/_thanks.scss
+++ b/assets/css/template/shop/_thanks.scss
@ -0,0 +1,29 @@
+[data-template="thanks"]{
+    .p__baseline-big {
+        margin-top: calc(var(--spacing) * 3);
+        margin-bottom: calc(var(--spacing) * 3);
+        // font-size: var(--fs-x-big);
+    }
+    
+    .p__baseline {
+        // font-size: var(--fs-big);
+        text-align: left;
+        max-width: 800px;
+        margin: var(--spacing) auto;
+
+        a{
+            color: var(--color-accent);
+            text-decoration: none;
+            &:hover{
+                text-decoration: underline;
+            }
+        }
+    }
+
+    #site-footer{
+        border-top: none;
+        margin-top: calc(var(--spacing) * 4);
+
+    }
+
+}
--- a/assets/css/template/subscription-newsletter/_layout.scss
+++ b/assets/css/template/subscription-newsletter/_layout.scss
@ -0,0 +1,55 @@
+[data-template="subscription-newsletter"]{
+
+    main{
+        margin-top: calc(var(--spacing)*2);
+    }
+    
+    
+    #form__newsletter__container{
+    max-width: 700px;
+    margin: calc(var(--spacing)*3) auto;
+    margin-bottom: calc(var(--spacing)*4);
+
+
+        .form__newsletter{
+            margin: calc(var(--spacing)*1) 0;
+
+            input[type="email"]{
+                height: calc(var(--h-block)*1.75);
+                border-radius: calc(var(--h-block)*0.875);
+                font-size: var(--fs-medium);
+                &::placeholder{
+                    font-size: var(--fs-medium);
+                }
+            }
+            button[type="submit"].btn--bold {
+                --size: calc(var(--h-block)*1.75 - 4px);
+                
+                .icon svg{
+                    width: 28px;
+                }
+            }
+            .txt{
+                padding-left: 2ch;
+            }
+        }
+
+        .p__baseline{
+            max-width: 52ch;
+            // margin: 0 auto;
+            text-align: left; 
+        }
+
+        .p__details{
+            color: var(--color-txt);
+            max-width: 80ch;
+        }
+
+    }
+
+   #site-footer{
+    margin-top: calc(var(--spacing)*4);
+    padding-top: 0px;
+   }
+
+}
--- a/assets/css/template/support/_layout.scss
+++ b/assets/css/template/support/_layout.scss
@ -0,0 +1,176 @@
+[data-template="support"]{
+
+    section{
+        display: flex;
+        flex-direction: column;
+        margin: 0 auto;
+        padding-bottom: calc(var(--spacing)*0.75);
+        margin-bottom: calc(var(--spacing)*0.75);
+        border-bottom: var(--border-light);
+    }
+
+    #section__hero{
+        margin-top: calc(var(--spacing)*1);
+        display: block;
+    }
+
+    #section__questions{
+        border-bottom: none;
+    }
+
+    #section__donation:target{
+        padding-top: calc(var(--header-h)*1.25);
+    }
+
+    #section__video{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .video-container{
+            display: flex;
+        } 
+        video{
+            width: 100%;
+            border: 1px solid var(--grey-800);
+            max-height: 90vh;
+            display: flex;
+        }
+    }
+
+
+    @media #{$medium-up}{
+
+        main{
+            display: grid;
+            grid-template-columns: 50% 50%;
+            grid-template-rows: repeat(4, auto);
+            max-width: 1200px;
+            margin: 0 auto;
+            padding-bottom: 0;
+        }
+
+        #section__donation{
+            padding-top: calc(var(--spacing)*1);
+        }
+
+        #section__donation,
+        #section__comments{
+            border: none;
+        }
+
+        #section__baseline{
+            padding: calc(var(--spacing)*0.5) 0;
+        }
+
+        .gauge__container{
+            padding-top: calc(var(--spacing)*1);
+        }
+
+        .col-left,
+        .col-right{
+            padding-top: calc(var(--spacing)*1);
+        }
+        .col-left{
+            grid-column: 1;
+            grid-row: 1/5;
+        }
+        .col-right{
+            position: sticky;
+            top: calc(var(--spacing)*2.5);
+            grid-column: 2;
+            grid-row: 1;
+            overflow: hidden;
+        }
+
+    }
+
+
+    @media #{$medium}{
+        main{
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            justify-content: stretch;  
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        section{
+            width: 100%;
+        }
+        
+
+        .col-left,
+        .col-right{
+            display: contents;
+        }
+
+        #section__hero{
+            order: 1;  
+        }
+        #section__donation{
+            order: 2;  
+        }
+        #section__baseline{
+            order: 3;  
+        }
+        #section__video{
+            order: 4;  
+        }
+        #section__comments{
+            order: 5;  
+        }
+        #section__questions{
+            order: 6;  
+       
+        }
+
+    }
+
+
+    @media #{$paysage}{
+        .col-left,
+        .col-right{
+            display: contents;
+        }
+
+        section{
+            width: 100%;
+        }
+
+        #section__donation{
+            grid-row: 1; 
+            grid-column: 2; 
+            position: sticky;
+            top: calc(var(--spacing)*3.75);
+        }
+        
+        #section__hero{
+            grid-row: 1; 
+            grid-column: 1;
+        }
+        #section__baseline{
+            grid-row: 2; 
+            grid-column: 1;
+        }
+        #section__video{
+            grid-row: 3; 
+            grid-column: 1;
+        }
+        #section__comments{
+            grid-row: 4; 
+            grid-column: 1; 
+            border-bottom: var(--border-light);
+
+        }
+        #section__questions{
+            grid-row: 5; 
+            grid-column: 1;
+        }
+
+    }
+
+
+
+}
--- a/assets/css/template/support/_section--comments.scss
+++ b/assets/css/template/support/_section--comments.scss
@ -0,0 +1,55 @@
+
+  .comment__text{
+    font-size: var(--fs-medium);
+    font-weight: var(--fw-medium);
+    line-height: var(--leading-tight);
+    line-height: 1.1; 
+    max-width: 28ch;
+    text-align: center;
+  }
+  
+  .comment__name {
+    margin-top: calc(var(--spacing)*0.5);
+    text-align: center;
+  }
+  
+
+
+
+  .swiper {
+    width: 100%;
+    max-width: 700px;
+    height: auto;
+    position: relative;
+    padding-bottom: 40px; /* espace réservé pour les dots */
+   
+    .swiper-slide{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .comments-slider__dots{
+      position: absolute;
+      bottom: 10px; /* espace du bas */
+      left: 0;
+      width: 100%;
+      text-align: center;
+
+      .swiper-pagination-bullet{ 
+        background-color: var(--grey-600);
+        opacity: 1;
+      }
+      .swiper-pagination-bullet-active{
+        background-color: var(--color-txt);
+        opacity: 1;
+      }
+      
+
+    }
+
+    
+  }
+
+ 
+  
--- a/assets/css/template/support/_section--donation.scss
+++ b/assets/css/template/support/_section--donation.scss
@ -0,0 +1,63 @@
+#section__donation{
+
+    display: flex;
+    align-items: center;
+
+
+
+    .btn--donation__container{
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: calc(var(--padding-body)*0.75);
+
+        @media #{$medium-up}{
+            width: 420px;
+        }
+
+        @media #{$medium}{
+            width: 100%;
+            max-width: 420px;
+        }
+
+        .btn--donation__grow-2{
+            grid-column: span 2;
+        }
+
+        display: none;
+        &.is-selected{
+            display: grid;
+        }
+    }
+
+
+    .btn--donation{
+        background-color: var(--color-txt);
+        color: var(--color-bg);
+        border-radius: var(--radius-small);
+        height: calc(var(--h-block)*2);
+
+        .bold{
+            font-family: var(--title);
+            font-size: var(--fs-medium);
+            font-weight: var(--fw-bold);
+            margin-bottom: 0.25em;
+        }
+
+        .small{
+            font-family: var(--font);
+            font-weight: var(--fw-medium);
+            font-size: var(--fs-small);
+        }
+
+        &:hover{
+            outline: 4px solid var(--color-accent);
+            cursor: pointer;
+        }
+
+    }
+
+
+
+
+   
+}
--- a/assets/css/template/support/_section--questions.scss
+++ b/assets/css/template/support/_section--questions.scss
@ -0,0 +1,48 @@
+#section__questions{
+
+    max-width: 700px;
+
+
+    summary::marker{
+        content: "";
+        display: none; 
+    }
+    summary::-webkit-details-marker{
+        content: "";
+        display: none;
+    }
+
+
+    details{
+        
+        border-bottom: var(--border);
+        &:first-of-type{
+            border-top: var(--border);
+        }
+
+        summary{
+            padding-top: calc(var(--spacing)*0.25 + 2px);
+            padding-bottom: calc(var(--spacing)*0.25);
+            cursor: pointer;
+            position: relative;
+            padding-right: 2ch;
+        }
+
+        &[open] summary::after{
+            content: "✕";
+            position: absolute;
+            right: 0;
+        }
+  
+
+        p{
+            margin: calc(var(--spacing)*0.5) 0;
+        }
+
+        ul, ol{
+            margin-bottom: calc(var(--spacing)*0.5);
+        }
+        
+    }
+
+}
--- a/assets/css/template/support/_section--video.scss
+++ b/assets/css/template/support/_section--video.scss
@ -0,0 +1,120 @@
+#section__video{
+    margin-bottom: calc(var(--spacing)*2);
+
+    .btn__deploy{
+        margin-top: calc(var(--spacing)*1);
+        --size: var(--h-block);
+        font-family: var(--font);
+        font-size: var(--fs-small);
+        font-weight: var(--fw-normal);
+        line-height: 1;
+        border: var(--border-light);
+        height: var(--size);
+        border-radius: calc(var(--size)/2);
+        padding-left: 1.5ch;
+        padding-right: 2ch;
+        padding-top: 1px;
+    
+        position: relative;
+        cursor: pointer;
+    
+        display: flex;
+        align-items: center;
+        gap: 1ch;
+        // padding-right: 0.5ch;
+        font-weight: var(--fw-medium);
+        text-decoration: none;
+
+      
+    
+        cursor: pointer;
+
+        svg{ 
+            fill: var(--color-txt);
+            width: 10px;
+            position: relative;
+            top: 1px; 
+            left: 1px;
+        }
+    
+    }
+
+
+    .videos__ul{
+        list-style: none;
+        width: 100%;
+        margin-top: calc(var(--spacing)*1);
+        display: none;
+
+        .videos__li{
+
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            gap: 1ch;
+            margin-bottom: calc(var(--spacing)*0.5);
+
+            cursor: pointer;
+
+            .icon{
+                --size: 20px;
+                width: var(--size);
+                height: var(--size);
+                border-radius: calc(var(--size)/2);
+                border: var(--border);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                
+
+
+            }
+
+            svg{
+                fill: var(--color-txt);
+                width: 7px; 
+            }
+        }
+    }
+
+    #videos__input{ display: none }
+
+    #videos__input:checked ~ .videos__ul{
+        display: block;
+    }
+}
+
+
+#video__fullscreen{
+
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--color-bg);
+    padding: var(--padding-body);
+    position: fixed;
+    top: 0px;
+    left: 0;
+    z-index: 3000;
+    
+
+    iframe{
+        width: 90%;
+        height: 100%;
+        border: var(--border);
+    }
+
+    #video__close{
+        height: 10%;
+        font-size: 20px;
+        width: 100%;
+        font-weight: bold;
+        display: flex; 
+        align-items: top;
+        justify-content: flex-end;
+
+    }
+}
+
+body.is-fullscreen{
+    overflow: hidden;
+}
--- a/assets/favicon.png
+++ b/assets/favicon.png
--- a/assets/fonts/Executive-55Regular.woff
+++ b/assets/fonts/Executive-55Regular.woff
--- a/assets/fonts/Executive-56Italic.woff
+++ b/assets/fonts/Executive-56Italic.woff
--- a/assets/fonts/Executive-65Medium.woff
+++ b/assets/fonts/Executive-65Medium.woff
--- a/assets/fonts/Executive-66MediumIt.woff
+++ b/assets/fonts/Executive-66MediumIt.woff
--- a/assets/fonts/System-Bold.woff2
+++ b/assets/fonts/System-Bold.woff2
--- a/assets/fonts/System-BoldItalic.woff2
+++ b/assets/fonts/System-BoldItalic.woff2
--- a/assets/fonts/System-Medium.woff2
+++ b/assets/fonts/System-Medium.woff2
--- a/assets/fonts/System-MediumItalic.woff2
+++ b/assets/fonts/System-MediumItalic.woff2
--- a/assets/fonts/stylesheet.css
+++ b/assets/fonts/stylesheet.css
@ -0,0 +1,57 @@
+/* Executive - Regular */
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-55Regular.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-56Italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-65Medium.woff") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Executive";
+  src: url("Executive-66MediumIt.woff") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-MediumItalic.woff2") format("woff2");
+  font-weight: 500;
+  font-style: italic;
+}
+
+
+@font-face {
+  font-family: "System";
+  src: url("System-Bold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "System";
+  src: url("System-BoldItalic.woff2") format("woff2");
+  font-weight: 600;
+  font-style: italic;
+}
--- a/assets/icons/arrow-left.svg
+++ b/assets/icons/arrow-left.svg
@ -0,0 +1,6 @@
+<svg width="34px" height="34px" viewBox="0 0 16 13" 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="15.43" height="12.636" style="fill:none;"/>
+    <g id="Artboard11" serif:id="Artboard1">
+        <path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
+    </g>
+</svg>
--- a/assets/icons/arrow-top-right.svg
+++ b/assets/icons/arrow-top-right.svg
@ -0,0 +1,10 @@
+<svg width="34px" height="34px" viewBox="0 0 34 34" 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;">
+    <g transform="matrix(2.125,0,0,2.125,0,3.1875)">
+        <rect x="0" y="0" width="15.43" height="12.636" style="fill:none;"/>
+    </g>
+    <g transform="matrix(1.5026,-1.5026,1.5026,1.5026,-4.69164,18.7124)">
+        <g>
+            <path d="M0,7.29L0,5.373L9.801,5.373C10.67,5.373 11.757,5.4 12.387,5.427C11.952,5.022 11.366,4.455 10.888,3.969L8.432,1.404L9.366,0L15.43,6.318L9.366,12.636L8.432,11.232L10.888,8.667C11.366,8.181 11.952,7.614 12.387,7.236C11.757,7.263 10.67,7.29 9.801,7.29L0,7.29Z" style="fill-rule:nonzero;"/>
+        </g>
+    </g>
+</svg>
--- a/assets/icons/bluesky.svg
+++ b/assets/icons/bluesky.svg
@ -0,0 +1,9 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="39.2157" height="39.2157" fill="url(#pattern0_310_283)"/>
+<defs>
+<pattern id="pattern0_310_283" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_310_283" transform="scale(0.01)"/>
+</pattern>
+<image id="image0_310_283" width="100" height="100" preserveAspectRatio="none" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAklEQVR4nO2dW4hWVRTHT5OYTdnNzG7YFYIIuliSYaVmxBSk5fQgaqFI9aKRBZV2gW6WUBRkoUk+1EMIjYNp6UAmNV6iNFApIyvGkiyVqajRcZx+sXE9TMP3fbPPOfvsvc7M/sEHwwzMXmv9v3POPmutvXeSRCKRSCQSiUQikUgkUgugDrgSmAw0AuOA4aHt0g5wlsTqHomdiWFd3n/6APALlfkWeBq4xJkXJcfEAngG2FUlZj8Ds7P+87ew41+gFWhIBihAg8TAxMKGN9IOMJ1sfAaMTQYIwFjxOQtTbQc5DthNPlYAw5J+CnAqsCRnjH4wsbYZ7GbcsBe4Pemft6e9jmJ0o82A83HLotyzCz2zzZcdx+Zxm4HN7cY1q4ChSUkBhooPrnnfZvBPKYbtwIVJyQDOB7YWFJP1NgYUNbjhN+DqpCQAo4DfC4zHVzZGbKNY2oHRiXKAa4CDBcfCSpANFM8fwPWJ7ivjoIc4WN2yinh4VRNlTKIM4AbgT08xaLYx6D38YRwflSgBuBb4y6P/77rMYblin4YEJXCpTDp8stjGsBfwj0nVjPAS+co+Dwe+C+D3szbGzSMMXwIne1Hg//7WA5sD+fyQjYEzCMca4HgvShzzdRCwNqC/02yTZyFZ5EWNY76+EtjX22yMvI7wTPUgxrTQTlrNMIGLQlsJHDJT0ALFuAr4J7STwAW2mU0NtJlGgQLEGAb8iA5OsjXafEM1sM5lLUVqGi3ooCON4XvQw2MOBXkCPbSlMfwL9NBl8ksOxBgNHEEPm9MY34wu9gBn5BDjNOAndNGUxoE30ceKHIJ8gD4Wp3HgKXQyNYMYWXvMimZBGidmo5MDwNkp/DjHU6EpC7PSCHIHelmVwo8m9NKQtp6smekWPtyLbuybPcxtAd3sr9WqCpwptzfN2Nd/pL+3A90sqWH/MnTTYdXX28sps/5DM92VOlckW23+pplvUokhjplikXa29ixomZ899JW5YE0WQUyTdBmYVYLpev4inHkJoxy0AUPkoykpmq90W2WmYhJ7ZeBh4BHKwdHMHTZSjygD++VTBloyiSGC3BXa+n7I5LwVtp2hPehH7HSxVn1ciuW+kdrcmkuMHqK808dAkb5524kYIsgQZWXdsmFeYOudCSKijAB2hPashGwvrJFc3k2y7lwwENlQ+AYK0qC8UFkHhzZMbJ43sSpUjF7CXAF8FNpzZZjZ6Grgcm9CVKkuLpXVtQOVdtn7RM+Sb+AEYIJcqitNzh/o7KNIs09yO1o4KjbVKs51im+mXv8cMB4YnJQBed6MBC6WzyTgdVkks0tpIalbbFsrtt7Zw/6RXp8LRWBa7qXPq8xT5h3Ak1bLB7Qit68WpVdBVrrFp/FJWZC13hvp/2zUtMa+2kP9NWUP6aIxvr5qfE80Ieu8feyRovlqsW5xLRRJp2hvGfLB90Uswcsyrd3kxd1y0OpznX0lQR4NHQGFzAslRv0AT5dUo9157cNSkPuqmhSZEUKQZcru3a3oYWkIQTQF4EHgfvTweQhBtqCDTtmd4XTgMDpoDSHIx+iguYdNJu1fzu52B4KYMq4GpvSwaQo6eDGEILeE9ppjB6QM6vWian4XmgkhBKlT0P4/v4JdCxQsjwhz+IDZMzCg44cr5Y4ktxZyN6M5QcQQ5wfLwSQhWF7DruWBbNodvL4O3BSgBnIUuKyPPXi7AlQT/T87KgG8pO1NGP+ZhIWJFmT1a5PH7cnPtdz8wFfyc7W6bhTJ/m7S9NAE5nqwZ0uQ7K4NsoHmJwU6vyFNAUiu3CJLy+uBUxLNyMyriHOsDppGtQz2nFfQglCz696JSRmQb6bp93XFIXOcX85leS7fTZYGLdVmQTawmesgA9tlWlAd2DPJwVT4cNAXP4fd8V9nDMABYKJDWybm2LZpm6ru9jxI0m+OdJbbsq6IY/ZkK/U0myn/KrbrmtY6nBrPlLMSK63A+hv40GSSPdgyUcYyY/bmiMygZpbmwZ0Xc3iLbG7cCNxtDggjQB5IZoVjxIZGscn7wTKRSCQSiUQikUgkEokkhv8Ar2Kl60ZaukcAAAAASUVORK5CYII="/>
+</defs>
+</svg>
--- a/assets/icons/facebook.svg
+++ b/assets/icons/facebook.svg
@ -0,0 +1,3 @@
+<svg width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.2549 0C7.72549 0 0 7.72549 0 17.2549C0 25.9059 6.37255 33.0486 14.6761 34.2965V21.8282H10.4071V17.2925H14.6761V14.2745C14.6761 9.27765 17.1106 7.08392 21.2635 7.08392C23.2526 7.08392 24.3043 7.23137 24.8024 7.29882V11.258H21.9694C20.2063 11.258 19.5906 12.9294 19.5906 14.8133V17.2925H24.7576L24.0565 21.8282H19.5906V34.3333C28.0126 33.1906 34.5098 25.9898 34.5098 17.2549C34.5098 7.72549 26.7843 0 17.2549 0Z" fill="white"/>
+</svg>
--- a/assets/icons/instagram.svg
+++ b/assets/icons/instagram.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14777 0C4.10333 0 0 4.10713 0 9.15288V22.2248C0 27.2692 4.10713 31.3725 9.15288 31.3725H22.2248C27.2692 31.3725 31.3725 27.2654 31.3725 22.2197V9.14777C31.3725 4.10333 27.2654 0 22.2197 0H9.14777ZM24.8366 5.22876C25.5582 5.22876 26.1438 5.81438 26.1438 6.53595C26.1438 7.25752 25.5582 7.84314 24.8366 7.84314C24.115 7.84314 23.5294 7.25752 23.5294 6.53595C23.5294 5.81438 24.115 5.22876 24.8366 5.22876ZM15.6863 7.84314C20.0118 7.84314 23.5294 11.3608 23.5294 15.6863C23.5294 20.0118 20.0118 23.5294 15.6863 23.5294C11.3608 23.5294 7.84314 20.0118 7.84314 15.6863C7.84314 11.3608 11.3608 7.84314 15.6863 7.84314ZM15.6863 10.4575C14.2995 10.4575 12.9696 11.0084 11.989 11.989C11.0084 12.9696 10.4575 14.2995 10.4575 15.6863C10.4575 17.073 11.0084 18.403 11.989 19.3836C12.9696 20.3641 14.2995 20.915 15.6863 20.915C17.073 20.915 18.403 20.3641 19.3836 19.3836C20.3641 18.403 20.915 17.073 20.915 15.6863C20.915 14.2995 20.3641 12.9696 19.3836 11.989C18.403 11.0084 17.073 10.4575 15.6863 10.4575Z" fill="white"/>
+</svg>
--- a/assets/icons/linkedin.svg
+++ b/assets/icons/linkedin.svg
@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.1905 0H3.80952C1.70667 0 0 1.70667 0 3.80952V28.1905C0 30.2933 1.70667 32 3.80952 32H28.1905C30.2933 32 32 30.2933 32 28.1905V3.80952C32 1.70667 30.2933 0 28.1905 0ZM9.90476 12.1905V26.6667H5.33333V12.1905H9.90476ZM5.33333 7.97714C5.33333 6.91048 6.24762 6.09524 7.61905 6.09524C8.99048 6.09524 9.85143 6.91048 9.90476 7.97714C9.90476 9.04381 9.05143 9.90476 7.61905 9.90476C6.24762 9.90476 5.33333 9.04381 5.33333 7.97714ZM26.6667 26.6667H22.0952C22.0952 26.6667 22.0952 19.6114 22.0952 19.0476C22.0952 17.5238 21.3333 16 19.4286 15.9695H19.3676C17.5238 15.9695 16.7619 17.539 16.7619 19.0476C16.7619 19.741 16.7619 26.6667 16.7619 26.6667H12.1905V12.1905H16.7619V14.141C16.7619 14.141 18.2324 12.1905 21.1886 12.1905C24.2133 12.1905 26.6667 14.2705 26.6667 18.4838V26.6667Z" fill="white"/>
+</svg>
--- a/assets/icons/play-button.svg
+++ b/assets/icons/play-button.svg
@ -0,0 +1,10 @@
+<svg height="80px" width="80px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<g>
+	<g>
+		<path d="M500.203,236.907L30.869,2.24c-6.613-3.285-14.443-2.944-20.736,0.939C3.84,7.083,0,13.931,0,21.333v469.333
+			c0,7.403,3.84,14.251,10.133,18.155c3.413,2.112,7.296,3.179,11.2,3.179c3.264,0,6.528-0.747,9.536-2.24l469.333-234.667
+			C507.435,271.467,512,264.085,512,256S507.435,240.533,500.203,236.907z"/>
+	</g>
+</g>
+</svg>
--- a/assets/icons/threads.svg
+++ b/assets/icons/threads.svg
@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.4 3.5V25.9C29.4 27.8299 27.8299 29.4 25.9 29.4H3.5C1.5701 29.4 0 27.8299 0 25.9V3.5C0 1.5701 1.5701 0 3.5 0H25.9C27.8299 0 29.4 1.5701 29.4 3.5ZM20.6808 22.3391C22.5785 20.4435 22.5253 18.074 21.903 16.6201C21.525 15.7416 20.8474 14.9891 19.9444 14.4445L19.7883 14.3479C19.5573 14.2023 19.362 14.0854 19.0561 13.9685C19.0505 13.7739 19.0386 13.5793 19.0155 13.4036C18.6025 10.2109 16.5298 9.5291 14.8589 9.5186C13.3511 9.5186 12.0967 10.1626 11.3281 11.333L12.4985 12.1016C13.0137 11.3169 13.8082 10.9193 14.8547 10.9193C16.5116 10.9298 17.3922 11.7754 17.6267 13.58C16.828 13.4183 15.9285 13.3602 14.9618 13.4169C12.215 13.5751 11.0691 15.2306 11.1524 16.8021C11.2462 18.5423 12.747 19.7575 14.8036 19.7575C14.8946 19.7575 14.9849 19.7554 15.0724 19.7498C16.6803 19.6616 18.6459 18.8468 18.9994 15.5057C19.0141 15.5148 19.0281 15.5239 19.0428 15.533L19.2199 15.6429C19.8723 16.0363 20.3546 16.5648 20.6157 17.1724C21.0658 18.2231 21.0931 19.9472 19.6903 21.3486C18.4779 22.5596 17.0219 23.0839 14.8351 23.1C12.4061 23.0818 10.5658 22.2985 9.3667 20.7725C8.2495 19.3529 7.6727 17.3054 7.651 14.6986C7.6727 12.089 8.2495 10.0464 9.3667 8.6275C10.5665 7.1008 12.411 6.3182 14.8365 6.3C17.2809 6.3182 19.152 7.1043 20.3973 8.6366C21.0021 9.3807 21.4648 10.3229 21.7728 11.4352L23.1224 11.0628C22.7626 9.7622 22.2117 8.6485 21.4837 7.7532C19.9619 5.8814 17.7296 4.9217 14.8365 4.9C11.9525 4.9217 9.7419 5.8842 8.2656 7.7623C6.9531 9.4304 6.2748 11.7607 6.2503 14.6993C6.2748 17.6344 6.9531 19.9696 8.2656 21.6384C9.7419 23.5158 11.949 24.479 14.8351 24.5C17.3999 24.4811 19.2031 23.8147 20.6808 22.3391ZM17.4951 14.9835C17.5441 14.9947 17.5917 15.0052 17.6365 15.0157C17.633 15.0703 17.6295 15.1179 17.626 15.1543C17.4062 17.9039 16.0195 18.2966 14.9933 18.3526C14.9296 18.3561 14.8666 18.3582 14.8036 18.3582C13.5079 18.3582 12.6028 17.703 12.551 16.7279C12.5055 15.8753 13.1362 14.9247 15.0437 14.8155C15.2516 14.8029 15.456 14.7966 15.6562 14.7966C16.3275 14.7959 16.9463 14.8589 17.4951 14.9835Z" fill="white"/>
+</svg>
--- a/assets/icons/youtube.svg
+++ b/assets/icons/youtube.svg
@ -0,0 +1,3 @@
+<svg width="34" height="26" viewBox="0 0 34 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8615 4.31373C32.549 2.58885 31.0601 1.33272 29.3321 0.940564C26.7463 0.392157 21.9608 0 16.7831 0C11.6085 0 6.74632 0.392157 4.15748 0.940564C2.4326 1.33272 0.940564 2.50919 0.628064 4.31373C0.3125 6.27451 0 9.01961 0 12.549C0 16.0784 0.3125 18.8235 0.704657 20.7843C1.02022 22.5092 2.50919 23.7653 4.23407 24.1575C6.97917 24.7059 11.6851 25.098 16.8627 25.098C22.0404 25.098 26.7463 24.7059 29.4914 24.1575C31.2163 23.7653 32.7053 22.5888 33.0208 20.7843C33.3333 18.8235 33.7255 15.9988 33.8051 12.549C33.6458 9.01961 33.2537 6.27451 32.8615 4.31373ZM12.549 18.0392V7.05882L22.117 12.549L12.549 18.0392Z" fill="white"/>
+</svg>
--- a/assets/images/abrs-visuel-couverture-min.png
+++ b/assets/images/abrs-visuel-couverture-min.png
--- a/assets/images/casquette-01.png
+++ b/assets/images/casquette-01.png
--- a/assets/images/hero-1.png
+++ b/assets/images/hero-1.png
--- a/assets/images/hero-2.png
+++ b/assets/images/hero-2.png
--- a/assets/images/hero-3.png
+++ b/assets/images/hero-3.png
--- a/assets/images/poster-video-campagne.jpg
+++ b/assets/images/poster-video-campagne.jpg
--- a/assets/images/publi-lebal.jpg
+++ b/assets/images/publi-lebal.jpg
--- a/assets/images/tshirt-01.png
+++ b/assets/images/tshirt-01.png
--- a/assets/index-logo.svg
+++ b/assets/index-logo.svg
@ -0,0 +1,14 @@
+<svg width="100%" height="100%" viewBox="0 0 162 29" 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;">
+    <title>Index.ngo</title>
+    <g transform="matrix(1.04516,0,0,0.659091,57.4839,-6.59091)">
+        <rect x="-55" y="10" width="155" height="44" style="fill:none;"/>
+        <clipPath id="_clip1">
+            <rect x="-55" y="10" width="155" height="44"/>
+        </clipPath>
+        <g clip-path="url(#_clip1)">
+            <g transform="matrix(0.95679,0,0,1.51724,-55,10)">
+                <path d="M162,29L148.198,29L141.174,20.767L134.15,29L91.184,29L91.184,0.004L120.653,0.004L120.653,7.351L102.637,7.351L102.637,10.867L120.137,10.867L120.137,18.13L102.637,18.13L102.637,21.606L120.926,21.606L120.926,28.951L134.273,14.414L120.807,0L134.56,0L141.388,7.767L147.76,0L161.201,0L148.236,13.79L161.996,28.997L162,29ZM68.58,29L54.224,29L54.224,0.004L68.637,0.004C74.672,0.004 78.31,0.004 82.046,2.045C86.259,4.379 88.674,8.889 88.674,14.417C88.674,19.406 86.862,23.405 83.427,25.975C79.463,29 75.345,29 68.58,29ZM49.819,29L38.775,29L31.499,19.815C29.746,17.735 28.088,15.545 27.307,14.495C27.387,15.813 27.524,17.238 27.524,20.499L27.524,29L15.965,29L15.965,0.004L27.009,0.004L33.798,8.349C36.223,11.121 37.709,12.993 38.393,13.881C38.347,12.615 38.26,9.911 38.26,6.84L38.26,0.004L49.819,0.004L49.819,29ZM11.559,29L0,29L0,0.004L11.559,0.004L11.559,29ZM65.784,21.818L67.904,21.818C70.918,21.818 73.067,21.818 74.728,20.531C76.074,19.491 76.845,17.308 76.845,14.541C76.845,11.526 76.084,9.541 74.525,8.476C72.895,7.411 71.461,7.224 67.578,7.224L65.784,7.224L65.784,21.818Z" style="fill-rule:nonzero;"/>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/assets/js/donation.js
+++ b/assets/js/donation.js
@ -0,0 +1,154 @@
+(function () {
+  'use strict';
+
+  const DONORBOX_CAMPAIGN_URL = 'https://donorbox.org/soutenir-index-2025-don';
+  const TAX_REDUCTION_RATE = 0.66;
+
+  const AMOUNTS = {
+    oneOff: [200, 100, 50, 20],
+    monthly: [50, 20, 10, 5],
+  };
+
+  const TRANSLATIONS = {
+    fr: {
+      afterTax: 'Soit {amount}&#8239;€ après impôts',
+      perMonth: '€/mois',
+      withTaxReduction: 'Avec 66&#8239;% de déduction fiscale',
+    },
+    en: {
+      afterTax: 'That is {amount}&#8239;€ after tax',
+      perMonth: '€/month',
+      withTaxReduction: 'With 66&#8239;% tax deduction',
+    },
+  };
+
+  function getLanguage() {
+    return document.documentElement.lang || 'fr';
+  }
+
+  function translate(key, params = {}) {
+    const lang = getLanguage();
+    let text = TRANSLATIONS[lang][key] || TRANSLATIONS['fr'][key];
+    Object.keys(params).forEach((param) => {
+      text = text.replace(`{${param}}`, params[param]);
+    });
+    return text;
+  }
+
+  function calculateAfterTax(amount) {
+    const result = amount * (1 - TAX_REDUCTION_RATE);
+    const rounded = Math.round(result * 100) / 100;
+    return rounded % 1 === 0 ? Math.round(rounded) : rounded.toFixed(2);
+  }
+
+  function formatAmount(amount) {
+    return amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '\u202F');
+  }
+
+  function generateDonorboxUrl(amount, isMonthly) {
+    const params = new URLSearchParams();
+    params.append('default_interval', isMonthly ? 'm' : 'o');
+    if (amount) {
+      params.append('amount', amount);
+    }
+
+    // Récupérer les paramètres UTM de l'URL actuelle
+    const currentUrlParams = new URLSearchParams(window.location.search);
+    const utmParams = [
+      'utm_source',
+      'utm_medium',
+      'utm_campaign',
+      'utm_term',
+      'utm_content',
+    ];
+
+    utmParams.forEach((utmParam) => {
+      const value = currentUrlParams.get(utmParam);
+      if (value) {
+        params.append(utmParam, value);
+      }
+    });
+
+    return `${DONORBOX_CAMPAIGN_URL}?${params.toString()}`;
+  }
+
+  function initTabs() {
+    const tabButtons = document.querySelectorAll('.nav--tabs__btn');
+    const containers = document.querySelectorAll('.btn--donation__container');
+
+    tabButtons.forEach((button, index) => {
+      button.addEventListener('click', () => {
+        tabButtons.forEach((btn) => btn.classList.remove('is-selected'));
+        containers.forEach((container) =>
+          container.classList.remove('is-selected')
+        );
+
+        button.classList.add('is-selected');
+        containers[index].classList.add('is-selected');
+      });
+    });
+  }
+
+  function initDonationButtons() {
+    const oneOffContainer = document.querySelector(
+      '[data-donnation="one-off"]'
+    );
+    const oneOffButtons = oneOffContainer.querySelectorAll('.btn--donation');
+
+    oneOffButtons.forEach((button, index) => {
+      if (index < AMOUNTS.oneOff.length) {
+        const amount = AMOUNTS.oneOff[index];
+        const afterTax = calculateAfterTax(amount);
+
+        button.innerHTML = `
+          <p class="bold">${formatAmount(amount)}&#8239;€</p>
+          <p class="small">${translate('afterTax', {
+            amount: formatAmount(afterTax),
+          })}</p>
+        `;
+
+        button.addEventListener('click', () => {
+          window.open(generateDonorboxUrl(amount, false), '_blank');
+        });
+      } else {
+        button.addEventListener('click', () => {
+          window.open(generateDonorboxUrl(null, false), '_blank');
+        });
+      }
+    });
+
+    const monthlyContainer = document.querySelector(
+      '[data-donnation="monthly"]'
+    );
+    const monthlyButtons = monthlyContainer.querySelectorAll('.btn--donation');
+
+    monthlyButtons.forEach((button, index) => {
+      if (index < AMOUNTS.monthly.length) {
+        const amount = AMOUNTS.monthly[index];
+        const afterTax = calculateAfterTax(amount);
+
+        button.innerHTML = `
+          <p class="bold">${formatAmount(amount)}&#8239;${translate(
+          'perMonth'
+        )}</p>
+          <p class="small">${translate('afterTax', {
+            amount: formatAmount(afterTax),
+          })}</p>
+        `;
+
+        button.addEventListener('click', () => {
+          window.open(generateDonorboxUrl(amount, true), '_blank');
+        });
+      } else {
+        button.addEventListener('click', () => {
+          window.open(generateDonorboxUrl(null, true), '_blank');
+        });
+      }
+    });
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    initTabs();
+    initDonationButtons();
+  });
+})();
--- a/assets/js/donorbox-gauge.js
+++ b/assets/js/donorbox-gauge.js
@ -0,0 +1,105 @@
+const DONORBOX_CONFIG = {
+  proxyUrl: '/api/donorbox-proxy.php',
+};
+
+function formatCurrency(amount) {
+  const rounded = Math.round(amount * 100) / 100;
+  const hasDecimals = rounded % 1 !== 0;
+
+  const formatted = rounded.toLocaleString('fr-FR', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: hasDecimals ? 2 : 0,
+  });
+
+  return formatted.replace(/[\s\u00A0\u202F]/g, '\u202F') + '\u202F€';
+}
+
+async function fetchDonorboxData() {
+  try {
+    const response = await fetch(DONORBOX_CONFIG.proxyUrl, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error ${response.status}: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+
+    if (data.error) {
+      throw new Error(data.error);
+    }
+
+    return data;
+  } catch (error) {
+    console.error('Error fetching Donorbox data:', error);
+    throw error;
+  }
+}
+
+function updateGaugeDisplay(campaignData) {
+  const collected = campaignData.total_raised || 0;
+  const goal = campaignData.goal_amt || 50000;
+  const percentage = Math.min((collected / goal) * 100, 100);
+
+  const gaugeElement = document.getElementById('gauge');
+  if (gaugeElement) {
+    gaugeElement.style.setProperty(
+      '--pourcent',
+      `${percentage > 2.5 ? percentage : 2.5}%`
+    );
+  }
+
+  const collectedElement = document.querySelector(
+    '#gauge--infos__donateurs .value'
+  );
+  if (collectedElement) {
+    collectedElement.textContent = formatCurrency(collected);
+  }
+
+  const goalElement = document.querySelector('#gauge--infos__objectif .value');
+  if (goalElement) {
+    goalElement.textContent = formatCurrency(goal);
+  }
+
+  const donorsCount = campaignData.donations_count || 0;
+  const donorsElement = document.querySelector('#gauge--infos__donors .value');
+  if (donorsElement) {
+    donorsElement.textContent = donorsCount;
+  }
+
+  console.log('Gauge updated:', {
+    collected: formatCurrency(collected),
+    goal: formatCurrency(goal),
+    percentage: `${percentage.toFixed(1)}%`,
+  });
+}
+
+async function initDonorboxGauge() {
+  try {
+    console.log('Fetching Donorbox data...');
+    const campaignData = await fetchDonorboxData();
+    updateGaugeDisplay(campaignData);
+  } catch (error) {
+    console.error('Failed to update gauge:', error);
+  }
+}
+
+function setupAutoRefresh(intervalMinutes = 5) {
+  const intervalMs = intervalMinutes * 60 * 1000;
+  setInterval(initDonorboxGauge, intervalMs);
+  console.log(`Auto-refresh configured: every ${intervalMinutes} minutes`);
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    initDonorboxGauge();
+    setupAutoRefresh(5);
+  });
+} else {
+  initDonorboxGauge();
+  setupAutoRefresh(5);
+}
--- a/assets/js/newsletter-brevo.js
+++ b/assets/js/newsletter-brevo.js
@ -0,0 +1,89 @@
+(function () {
+  'use strict';
+
+  const PROXY_URL = '/api/brevo-newsletter-proxy.php';
+
+  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 = location.pathname.includes('/en/')
+        ? 'Please enter a valid email address.'
+        : 'Veuillez entrer une adresse email valide.';
+      showMessage(form, messsage, true);
+      return;
+    }
+
+    const email = emailInput.value.trim();
+    submitButton.disabled = true;
+
+    try {
+      await subscribeToNewsletter(email);
+      const message = location.pathname.includes('/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);
+})();
--- a/assets/js/onload.js
+++ b/assets/js/onload.js
@ -0,0 +1,90 @@
+window.onload = function () {
+  headerShrink();
+  initCart();
+  toggleDonationButton();
+  videos();
+};
+
+window.onscroll = function () {
+  headerShrink();
+  toggleDonationButton();
+};
+
+function initCart() {
+  const items = document.querySelectorAll('.store__product .link-block');
+  const header = document.querySelector('#site-header');
+}
+
+function headerShrink() {
+  const header = document.getElementById('site-header');
+  const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+
+  if (scrollPosition > 100) {
+    header.classList.add('is-shrinked');
+  } else {
+    header.classList.remove('is-shrinked');
+  }
+}
+
+function toggleDonationButton() {
+  const btn = document.getElementById('btn--don__mobile');
+  const section = document.getElementById('section__donation');
+  const footer = document.getElementById('site-footer');
+
+  if (!btn || !section || !footer) return; // sécurité
+
+  const scrollTop = window.scrollY || window.pageYOffset;
+  const triggerPoint = section.offsetTop + section.offsetHeight / 2;
+
+  // 1️⃣ Gestion de la visibilité du bouton
+  if (scrollTop >= triggerPoint) {
+    btn.classList.add('is-visible');
+  } else {
+    btn.classList.remove('is-visible');
+  }
+
+  // 2️⃣ Gestion du stickiness quand le footer apparaît
+  const footerRect = footer.getBoundingClientRect();
+  const windowHeight = window.innerHeight;
+
+  if (footerRect.top < windowHeight) {
+    // Le footer est visible dans la fenêtre
+    btn.classList.add('is-sticky');
+  } else {
+    btn.classList.remove('is-sticky');
+  }
+}
+
+
+function videos(){
+  console.log("video");
+  let section = document.getElementById("section__video");
+  console.log(section);
+
+  let videoslinks = document.querySelectorAll(".videos__li");
+  videoslinks.forEach(function (video, index) {
+
+    video.addEventListener("click", (event) => { 
+      let data = video.getAttribute('data-video');
+
+      var div = document.createElement('section');
+      div.id = "video__fullscreen";
+      div.innerHTML = '<button id="video__close">✕</button>\
+          <iframe\
+          src="' + data + '"\
+          style="aspect-ratio: 9/16; width: 100%; border: 0"\
+          allow="autoplay; fullscreen; picture-in-picture"\
+          allowfullscreen ></iframe>';
+      document.body.appendChild(div);
+      document.body.classList.add("is-fullscreen");
+
+      let close = document.querySelector("#video__close");
+      close.addEventListener("click", (event) => { 
+        div.remove();
+        document.body.classList.remove("is-fullscreen");
+      });
+    });
+   
+  });
+  
+}
--- a/assets/js/product-size.js
+++ b/assets/js/product-size.js
@ -0,0 +1,60 @@
+/**
+ * Gestion de la sélection des options produit
+ * Met à jour les attributs Snipcart et gère les classes CSS
+ */
+
+(function() {
+    'use strict';
+
+    /**
+     * Initialise la gestion des options
+     */
+    function initOptionSelector() {
+        const optionsContainer = document.querySelector('.product-options');
+        const addToCartButton = document.querySelector('.snipcart-add-item');
+
+        if (!addToCartButton) {
+            return;
+        }
+
+        // Si pas d'options, le bouton est déjà actif
+        if (!optionsContainer) {
+            return;
+        }
+
+        const radios = optionsContainer.querySelectorAll('input[type="radio"]');
+
+        // Réinitialiser toutes les options (important pour le cache navigateur)
+        radios.forEach(radio => {
+            radio.checked = false;
+        });
+
+        // Retirer la classe is-selected de tous les li
+        const allLi = optionsContainer.querySelectorAll('li');
+        allLi.forEach(li => li.classList.remove('is-selected'));
+
+        // S'assurer que le bouton est désactivé au départ
+        addToCartButton.setAttribute('disabled', 'disabled');
+
+        // Écouter les changements de sélection
+        radios.forEach(radio => {
+            radio.addEventListener('change', function() {
+                // Mettre à jour l'attribut Snipcart
+                addToCartButton.setAttribute('data-item-custom1-value', this.value);
+
+                // Activer le bouton
+                addToCartButton.removeAttribute('disabled');
+
+                // Gérer la classe is-selected sur les li parents
+                allLi.forEach(li => li.classList.remove('is-selected'));
+                this.closest('li').classList.add('is-selected');
+            });
+        });
+    }
+
+    /**
+     * Initialisation au chargement de la page
+     */
+    document.addEventListener('DOMContentLoaded', initOptionSelector);
+
+})();
--- a/assets/js/snipcart.js
+++ b/assets/js/snipcart.js
@ -0,0 +1,82 @@
+window.SnipcartSettings = {
+  publicApiKey:
+    'NGU4ODQ3MjAtY2MzMC00MWEyLWI2YTMtNjBmNGYzMTBlOTZkNjM4OTY1NDY4OTE5MTQyMTI3',
+  loadStrategy: 'on-user-interaction',
+};
+
+(() => {
+  var c, d;
+  (d = (c = window.SnipcartSettings).version) != null || (c.version = '3.0');
+  var s, S;
+  (S = (s = window.SnipcartSettings).timeoutDuration) != null ||
+    (s.timeoutDuration = 2750);
+  var l, p;
+  (p = (l = window.SnipcartSettings).domain) != null ||
+    (l.domain = 'cdn.snipcart.com');
+  var w, u;
+  (u = (w = window.SnipcartSettings).protocol) != null ||
+    (w.protocol = 'https');
+  var f =
+      window.SnipcartSettings.version.includes('v3.0.0-ci') ||
+      (window.SnipcartSettings.version != '3.0' &&
+        window.SnipcartSettings.version.localeCompare('3.4.0', void 0, {
+          numeric: !0,
+          sensitivity: 'base',
+        }) === -1),
+    m = ['focus', 'mouseover', 'touchmove', 'scroll', 'keydown'];
+  window.LoadSnipcart = o;
+  document.readyState === 'loading'
+    ? document.addEventListener('DOMContentLoaded', r)
+    : r();
+  function r() {
+    window.SnipcartSettings.loadStrategy
+      ? window.SnipcartSettings.loadStrategy === 'on-user-interaction' &&
+        (m.forEach((t) => document.addEventListener(t, o)),
+        setTimeout(o, window.SnipcartSettings.timeoutDuration))
+      : o();
+  }
+  var a = !1;
+  function o() {
+    if (a) return;
+    a = !0;
+    let t = document.getElementsByTagName('head')[0],
+      e = document.querySelector('#snipcart'),
+      i = document.querySelector(
+        `src[src^="${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}"][src$="snipcart.js"]`
+      ),
+      n = document.querySelector(
+        `link[href^="${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}"][href$="snipcart.css"]`
+      );
+    e ||
+      ((e = document.createElement('div')),
+      (e.id = 'snipcart'),
+      e.setAttribute('hidden', 'true'),
+      document.body.appendChild(e)),
+      v(e),
+      i ||
+        ((i = document.createElement('script')),
+        (i.src = `${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}/themes/v${window.SnipcartSettings.version}/default/snipcart.js`),
+        (i.async = !0),
+        t.appendChild(i)),
+      n ||
+        ((n = document.createElement('link')),
+        (n.rel = 'stylesheet'),
+        (n.type = 'text/css'),
+        (n.href = `${window.SnipcartSettings.protocol}://${window.SnipcartSettings.domain}/themes/v${window.SnipcartSettings.version}/default/snipcart.css`),
+        t.prepend(n)),
+      m.forEach((g) => document.removeEventListener(g, o));
+  }
+  function v(t) {
+    !f ||
+      ((t.dataset.apiKey = window.SnipcartSettings.publicApiKey),
+      window.SnipcartSettings.addProductBehavior &&
+        (t.dataset.configAddProductBehavior =
+          window.SnipcartSettings.addProductBehavior),
+      window.SnipcartSettings.modalStyle &&
+        (t.dataset.configModalStyle = window.SnipcartSettings.modalStyle),
+      window.SnipcartSettings.currency &&
+        (t.dataset.currency = window.SnipcartSettings.currency),
+      window.SnipcartSettings.templatesUrl &&
+        (t.dataset.templatesUrl = window.SnipcartSettings.templatesUrl));
+  }
+})();
--- a/assets/js/temp/includeHtml.js
+++ b/assets/js/temp/includeHtml.js
@ -0,0 +1,33 @@
+// How to use
+// <header id="header" w3-include-html="components/header.html"></header>
+
+
+function includeHTML() {
+
+  var z, i, elmnt, file, xhttp;
+  /* Loop through a collection of all HTML elements: */
+  z = document.getElementsByTagName("*");
+  for (i = 0; i < z.length; i++) {
+    elmnt = z[i];
+    /*search for elements with a certain atrribute:*/
+    file = elmnt.getAttribute("w3-include-html");
+    if (file) {
+      /* Make an HTTP request using the attribute value as the file name: */
+      xhttp = new XMLHttpRequest();
+      xhttp.onreadystatechange = function() {
+        if (this.readyState == 4) {
+          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
+          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
+          /* Remove the attribute, and call this function once more: */
+          elmnt.removeAttribute("w3-include-html");
+          includeHTML();
+        }
+      }
+      xhttp.open("GET", file, true);
+      xhttp.send();
+      /* Exit the function: */
+      return;
+    }
+  }
+
+}