front end

app/components/section/Decalage.vue

@@ -2,7 +2,7 @@
     <div class="decalage_cont"
          :class="[
             `decalage_cont--${position}`
-        ]""
+        ]"
     >
         <div class="decalage"
              :class="[
@@ -11,7 +11,7 @@
              ]"
              >
             <div class="decalage_inner">
-                <DsHeading v-if="$slots.title" :tone=titleTone as="h2" textcase="uppercase">
+                <DsHeading v-if="$slots.title" :tone="titleTone" as="h2" textcase="uppercase">
                   <slot name="title" />
                 </DsHeading>
                 <slot />
@@ -19,7 +19,7 @@
                     <slot name="button" />
                 </div>
                 <div v-if="ensavoirplusTarget" class="decalage_button">
-                    <DsButton :textColor=buttonTone :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
+                    <DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
                 </div>
             </div>
         </div>
@@ -72,7 +72,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
           width: 67vw;
         }
         @media (min-width: 800px) {
-          width: 50vw;
+          width: 60vw;
         }
         
         /* tons = arrière-plan section */
@@ -86,23 +86,26 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
         &--right {
             
             .decalage_inner {
-                
-                padding-left: 50px;                
+                padding-right: 20px;
+                padding-left: 50px;
                 
                 @media (max-width: 599px) {
-                  padding-left: 40px;
+                    padding-right: 15px;
+                    padding-left: 40px;
                 }
             }
         }
         
         &--left {
-            justify-content: flex-end;            
+            justify-content: flex-end;
            
             .decalage_inner {
                 padding-right: 50px;
+                padding-left: 20px;
                 
                 @media (max-width: 599px) {
                     padding-right: 40px;
+                    padding-left: 15px;
                   }
             }
             
@@ -113,38 +116,38 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
     .decalage_inner {
         
         @media (min-width: 0px) {
-                width: 100%;                
-            }
-            @media (min-width: 600px) {
-                width: calc(290px + 39vw);
-            }
-            @media (min-width: 700px) {
-                width: calc(330px + 17vw);
-            }
-            @media (min-width: 800px) {
-                width: 390px;
-            }   
-            @media (min-width: 900px) {
-                width: 430px;
-            }
-            @media (min-width: 1000px) {
-                width: 475px;
-            }
-            @media (min-width: 1100px) {
-                width: 510px;
-            }
-            @media (min-width: 1200px) {
-                width: 550px;
-            }
-            @media (min-width: 1300px) {
-                width: 600px;
-            }
-            @media (min-width: 1400px) {
-                width: 650px;
-            }
-            @media (min-width: 1500px) {
-                width: 700px;
-            }
+            width: 100%;                
+        }
+        @media (min-width: 600px) {
+            width: calc(290px + 39vw);
+        }
+        @media (min-width: 700px) {
+            width: calc(330px + 17vw);
+        }
+        @media (min-width: 800px) {
+            width: calc(330px + 17vw);
+        }   
+        @media (min-width: 900px) {
+            width: 600px;
+        }
+        @media (min-width: 1000px) {
+            width: 600px;
+        }
+        @media (min-width: 1100px) {
+            width: 600px;
+        }
+        @media (min-width: 1200px) {
+            width: 600px;
+        }
+        @media (min-width: 1300px) {
+            width: 600px;
+        }
+        @media (min-width: 1400px) {
+            width: 600px;
+        }
+        @media (min-width: 1500px) {
+            width: 600px;
+        }
     }
     
     .decalage_button {
@@ -155,4 +158,4 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
     .decalage_ensavoirplus--hidden {
         display: none;
     }
-</style>
+</style>

app/components/section/PageSection.vue

@@ -27,8 +27,6 @@
 </template>
 
 <script setup>
-    import { computed } from 'vue'
-
     const props = defineProps({
         tone: { type: String, default: 'default' },        // default / brand / muted / dark…
         padded_size: { type: String, default: '' }, // none | sm | md | lg
@@ -39,7 +37,6 @@
         position : { type: String, default: '' },
         overflow : { type: String, default: '' }
     })
-
 </script>
 
 <style lang="scss">
@@ -57,6 +54,9 @@
         &--dark    { background: var(--c-backgroud-black); }
         &--brandreverse    { background: var(--c-backgroud-brandreverse); }
         &--jaune { background: var(--c-background-jaune); }
+        &--bleu { background: var(--c-background-bleu); }
+        &--rouge45 { background: var(--c-brand_rouge45); }
+        &--rouge-weak { background: var(--c-brand_rouge-weak); }
 
         // padding en haut et en bas
         &--padded {
@@ -69,7 +69,6 @@
                 padding-bottom: 120px;
             }
         }
-
     }
 
 </style>

app/components/section/PageSectionInner.vue

@@ -43,7 +43,6 @@
 
             @media (min-width: 0px) {
                 max-width: 100%;
-                
             }
             @media (min-width: 600px) {
                 max-width: 580px;