update a lot of change since a while

app/components/section/PageSection.vue

@@ -0,0 +1,59 @@
+<!-- 
+    La section par défaut fait la largeur de la page.
+    On peut mettre de la couleur ou pas. 
+    C'est le contenu de la section (PageSectionInner) qui aura une marge.
+    Et avec "content" à "false" on peut dire aussi qu'on n'utilise pas le PageSectionInner, au cas où...
+-->
+<template>
+    <section
+        class="page-section"
+        :class="[
+            `page-section--${tone}`,
+            { 'page-section--padded': padded }
+        ]"
+    >
+        <!-- Si content == true -->
+        <PageSectionInner v-if="content" :size="contentSize" :padt="padt" :padb="padb">
+            <slot />
+        </PageSectionInner>
+
+        <!-- Si content == false -->
+        <template v-else>
+            <slot />
+        </template>
+
+    </section>
+</template>
+
+<script setup>
+    defineProps({
+        tone: { type: String, default: 'default' },        // default / brand / muted / dark…
+        padded: { type: Boolean, default: true },          // padding vertical
+        contentSize: { type: String, default: 'default'}, // narrow/default/wide
+        content: { type: Boolean, default: true },       // contenu contraint ou full
+        padb : { type: String, default: '' }, // props pour PageSectionInner
+        padt : { type: String, default: '' } // props pour PageSectionInner
+    })
+</script>
+
+<style lang="scss">
+    .page-section {
+        position: relative;
+        width: 100%;
+        //min-height: var(--sp-200);
+
+        /* 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); }
+
+        // padding en haut et en bas
+        &--padded {
+            padding-top: 30px;
+            padding-bottom: 50px;
+        }
+
+    }
+
+</style>