first commit

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;
+      }
+    }
+  }
+}

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);
+    }
+  }
+}

assets/css/template/shop/_snipcart.scss

@@ -0,0 +1,3 @@
+.snipcart-modal__container {
+  z-index: 1000;
+}

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);
+
+    }
+
+}

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;
+   }
+
+}

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;
+        }
+
+    }
+
+
+
+}

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;
+      }
+      
+
+    }
+
+    
+  }
+
+ 
+  

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;
+        }
+
+    }
+
+
+
+
+   
+}

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);
+        }
+        
+    }
+
+}

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;
+}