ajout de dev front

app/components/section/Decalage.vue

@@ -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, ensavoirplusGroup)">En savoir +</DsButton>
                 </div>
             </div>
         </div>
@@ -27,42 +27,52 @@
 </template>
 
 <script setup>
-import DsHeading from '@root/design-system/primitives/DsHeading.vue'
-import DsText from '@root/design-system/primitives/DsText.vue'
-import DsButton from '@root/design-system/primitives/DsButton.vue'
-  
+    import DsHeading from '@root/design-system/primitives/DsHeading.vue'
+    import DsText from '@root/design-system/primitives/DsText.vue'
+    import DsButton from '@root/design-system/primitives/DsButton.vue'
     defineProps({
         tone: { type: String, default: 'default' },
         titleTone: { type: String, default: 'default' },
         buttonTone: { type: String, default: 'default' },
         position: { type: String, default: 'left' },
-        ensavoirplusTarget: { type: String, default: '' }
+        ensavoirplusTarget: { type: String, default: '' },
+        ensavoirplusGroup: { type: String, default: '' }
     })
-    
-    function toggleTarget(ensavoirplusTarget) {
-        document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
+    function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
+        const target = document.getElementById(ensavoirplusTarget)
+        if (!target) return
+
+        const isHidden = target.classList.contains('decalage_ensavoirplus--hidden')
+
+        if (ensavoirplusGroup) {
+            document
+                .querySelectorAll(`[data-ensavoirplus-group="${ensavoirplusGroup}"]`)
+                .forEach((element) => {
+                    if (element.id !== ensavoirplusTarget) {
+                        element.classList.add('decalage_ensavoirplus--hidden')
+                    }
+                })
+        }
+
+        target.classList.toggle('decalage_ensavoirplus--hidden', !isHidden)
     }
 </script>
 
 <style lang="scss">
-    
     .decalage_cont {
         margin-bottom: 70px;
         display: flex;
-        
         &--left {
             justify-content: flex-start;
         }
-        
         &--right {
             justify-content: flex-end;
-        }       
-        
+        }
     }
 
     .decalage {
         padding-top: 50px;
-        padding-bottom: 50px;
+        padding-bottom: 40px;
         display: flex;
         
         @media (min-width: 0px) and (max-width: 700px) {
@@ -74,17 +84,16 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
         @media (min-width: 800px) {
           width: 60vw;
         }
-        
+
         /* tons = arrière-plan section */
         &--default { background: transparent; }
         &--brand   { background: var(--c-brand_rouge);}
         &--dark    { background: var(--c-backgroud-black); }
         &--brandreverse    { background: var(--c-backgroud-brandreverse); }
         &--jaune { background: var(--c-background-jaune); }
-        
+
         /* position = arrière-plan section */
         &--right {
-            
             .decalage_inner {
                 padding-right: 20px;
                 padding-left: 50px;
@@ -94,8 +103,11 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
                     padding-left: 40px;
                 }
             }
+            .decalage_button {
+                text-align: left;
+            }
         }
-        
+
         &--left {
             justify-content: flex-end;
            
@@ -108,13 +120,23 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
                     padding-left: 15px;
                   }
             }
+            h2 {
+                text-align: right;
+            }
+            .decalage_button {
+                text-align: right;
+            }
             
         }
-
+        .decalage_button {
+            margin-top: 32px;
+        }
     }
-    
+
     .decalage_inner {
-        
+        h2 {
+            padding-bottom: 5px;
+        }
         @media (min-width: 0px) {
             width: 100%;                
         }
@@ -149,12 +171,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
             width: 600px;
         }
     }
-    
-    .decalage_button {
-        margin-top: 10px;
-        text-align: right;
-    }
-    
+
     .decalage_ensavoirplus--hidden {
         display: none;
     }

app/components/section/PageSection.vue

@@ -28,7 +28,7 @@
 
 <script setup>
     const props = defineProps({
-        tone: { type: String, default: 'default' },        // default / brand / muted / dark…
+        tone: { type: String, default: 'default' },        // Background 
         padded_size: { type: String, default: '' }, // none | sm | md | lg
         contentSize: { type: String, default: 'default'}, // narrow/default/wide
         content: { type: Boolean, default: true },       // contenu contraint ou full