front end

app/components/BannierePros.vue

@@ -78,7 +78,7 @@
     }
     @media (min-width: 500px) {
         .banniere_pros_wp {
-            grid-template-columns: 150px 270px 40px 40px;
+            grid-template-columns: 150px 250px 35px 35px;
             grid-template-rows: auto;
             //justify-content: center;
             align-items: center;

app/components/Breadcrumb.vue

@@ -118,13 +118,13 @@
     position: relative;
     z-index: 1;
     @media (min-width: 0px) {
-      padding-left: 20px;  
+      padding-left: 10px;  
     }
     @media (min-width: 600px) {
-      padding-left: 20px;
+      padding-left: 0px;
     }
     @media (min-width: 700px) {
-      padding-left: 20px;
+      padding-left: 0px;
     }
   }
   .breadcrumb__list { 

app/components/header/HeaderNav.vue

@@ -57,7 +57,7 @@
           </li>
 
           <li class="header_nav_item" :class="{ 'is-active': isMediation }">
-            Éducation et médiation
+            Action culturelle
             <ul class="header_nav_sub_menu">
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
               <li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
@@ -193,7 +193,7 @@
               :class="{ 'is-open': activeDrawer === 'education' }"
               @click="toggleDrawer('education')"
             >
-              Éducation et médiation
+              Action culturelle
               <ul class="header_drawer_sub_menu">
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
                 <li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
@@ -280,7 +280,7 @@
     route.path.startsWith('/concerts')
   )
 
-  // Éducation et médiation
+  // Action culturelle
   const isMediation = computed(() =>
     route.path.startsWith('/mediation')
   )

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;

app/components/strapiconvert/StrapiBlocksConvert.vue

@@ -102,16 +102,17 @@
     font-family: var(--font-roboto);
 
     &--p {
-      
       font-weight: var(--fw-light);
       font-size: 17px;
       line-height: 22px;
       margin-bottom: 5px;
+      text-align: justify;
     }
     h1 {
       padding-bottom: 10px;
       font-weight: var(--fw-bold);
       font-size: 30px;
+      text-transform: uppercase;
     }
     h2 {
       padding-bottom: 7px;