From d57d95dddf353d3fdaadd6d20960824d7f0ee346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Thu, 6 May 2021 15:47:50 +0200
Subject: [PATCH] tons of fix2

---
 .../components/fo/CartProductsComponent.vue   | 203 +++++++++++++++---
 .../fo/FavoritesRecipesComponent.vue          | 143 +++++++++++-
 .../js/components/fo/GoogleMapMarkers.vue     |   2 +-
 .../components/fo/NotificationsComponent.vue  |   1 +
 resources/sass/front/_sub_header.scss         |   2 +-
 .../sass/front/pages/brand/_quality.scss      |   1 +
 resources/sass/front/pages/brand/index.scss   |  39 +++-
 resources/sass/front/pages/club/_content.scss |  32 ++-
 resources/sass/front/pages/ocb/_content.scss  |  37 ++--
 resources/views/front/brand/index.blade.php   |  12 +-
 resources/views/front/club/article.blade.php  |  19 +-
 resources/views/front/club/cart.blade.php     |  30 +--
 .../front/club/favorites-recipes.blade.php    |  30 +--
 .../views/front/club/informations.blade.php   |  18 +-
 resources/views/front/club/messages.blade.php |  17 +-
 .../club/modules/clubSubheader.blade.php      |  17 ++
 .../views/front/club/notifications.blade.php  |  18 +-
 .../views/front/club/reductions.blade.php     |  18 +-
 18 files changed, 459 insertions(+), 180 deletions(-)
 create mode 100644 resources/views/front/club/modules/clubSubheader.blade.php

diff --git a/resources/js/components/fo/CartProductsComponent.vue b/resources/js/components/fo/CartProductsComponent.vue
index 98d6aa50..c5e3fbae 100644
--- a/resources/js/components/fo/CartProductsComponent.vue
+++ b/resources/js/components/fo/CartProductsComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="list">
+    <div class="productList">
         <div class="items club-list-items">
             <div class="list-add-item">
                 <a href="/produits">
@@ -7,15 +7,19 @@
                     <p>Ajouter<br>un produit</p>
                 </a>
             </div>
-            <div v-for="(product, index) in products" class="item" :key="product.id">
+            <div v-for="(product, index) in products" class="productWrapper" :key="product.id">
                 <button @click="removeFromCart(product.id, index)" :disabled="processing">
                     <p v-if="processing" class="loader"></p>
                     <span v-else>&times;</span>
                 </button>
-                <a :href="'/produit/' + product.slug">
-                    <img :src="product.picture">
-                    <p>{{ product.name }}</p>
-                    <span>Voir le produit</span>
+                <a :href="route('product.show').replace('~PRODUCT~', product.slug)" class="favorite-recipe-text">
+                    <figure>
+                        <div class="hoverFigure">
+                            <h5>Voir le produit !</h5>
+                        </div>
+                        <img :src="product.picture" :alt="product.name + ' - Le Gaulois'">
+                    </figure>
+                    <p class="name_product">{{ product.name }}</p>
                 </a>
             </div>
         </div>
@@ -23,36 +27,167 @@
 </template>
 
 <script>
-    export default {
-        mounted() {
-            this.products = JSON.parse(this.dbproducts);
-        },
-        props: [
-            'dbproducts'
-        ],
-        data() {
-            return {
-                products: [],
-                processing: false
-            }
-        },
-        watch: {
+export default {
+    mounted() {
+        this.products = JSON.parse(this.dbproducts);
+    },
+    props: [
+        'dbproducts'
+    ],
+    data() {
+        return {
+            products: [],
+            processing: false
+        }
+    },
+    watch: {
 
-        },
-        methods: {
-            removeFromCart(productId, index) {
-                this.processing = true;
-                axios.post('/mon-compte/liste-de-courses/' + productId + '/0').then(
-                    (response) => {
-                        this.products.splice(index, 1);
-                        this.processing = false;
-                    }
-                )
-                .catch(function (error) {
-                    console.log(error);
+    },
+    methods: {
+        removeFromCart(productId, index) {
+            this.processing = true;
+            axios.post(this.route('setFav').replace('~PRODUCT~', productId)
+                .replace('~STATUS~', 0)).then(
+                (response) => {
+                    this.products.splice(index, 1);
                     this.processing = false;
-                });
+                }
+            )
+            .catch(function (error) {
+                console.log(error);
+                this.processing = false;
+            });
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.productList{
+    max-width: $big_screen;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .productWrapper {
+        position: relative;
+        text-align: center;
+        height: 237px;
+        width: 255px;
+        margin: 4em 1em;
+
+        & button {
+            position: absolute;
+            top: -5%;
+            right: 5%;
+            font-size: 45px;
+            border-radius: 50%;
+            color: white;
+            background-color: $orange;
+            height: 50px;
+            width: 50px;
+            border: 3px rgba(255,255,255,0.5) solid;
+            text-align: center;
+            font-family: "Veneer";
+            font-size: 40px;
+            line-height: 45px;
+            font-style: normal;
+            transition: opacity 0.3s;
+            opacity: 0;
+            z-index: 6;
+            cursor: pointer;
+
+            @media screen and (max-width: $tablet) {
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            & button {
+                opacity: 1;
+            }
+        }
+        figure {
+            padding: 0;
+            position: relative;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+
+            .hoverFigure{
+                position:absolute;
+                top:0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+                background-color: rgba(247, 158, 21, 0.7);
+                z-index:5;
+                opacity: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: opacity 500ms ease 0s;
+                border-radius: 1em;
+
+                &:hover{
+                    opacity: 1;
+                }
+                h5{
+                    color:#FFFFFF;
+                    font-size:4em;
+                    position: relative;
+                    &:before {
+                        background-image: url('~@/images/recette/hoverRecette.png');
+                        display: inline-block;
+                        content: "";
+                        width: 100px;
+                        height: 35px;
+                        position: absolute;
+                        top: -40px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                    }
+                    &:after {
+                        background-image: url('~@/images/recette/hoverRecette.png');
+                        display: inline-block;
+                        content: "";
+                        width: 100px;
+                        height: 35px;
+                        transform: rotate(180deg) translateX(54%);
+                        position: absolute;
+                        top: 45px;
+                        left: 50%;
+                    }
+                }
+            }
+            img {
+                min-height:100%;
+                min-width: 100%;
+                width:100%;
+                height:auto;
+            }
+        }
+        a > p {
+            font-family: 'Catamaran-Bold';
+            font-size: 18px;
+            padding: 0 40px;
+            text-transform: uppercase;
+            &:last-child {
+                color: $color6;
+                font-family: "CreamyScriptRegular";
+                font-size: 26px;
+                text-transform: none;
+                text-shadow: 1px 0 0 $color5, -1px 0 0 $color5, 0 1px 0 $color5, 0 -1px 0 $color5, 1px 1px $color5, -1px -1px 0 $color5, 1px -1px 0 $color5, -1px 1px 0 $color5;
             }
         }
     }
-</script>
+
+    h3 {
+        text-align: center;
+        margin-bottom: 2em;
+    }
+}
+</style>
diff --git a/resources/js/components/fo/FavoritesRecipesComponent.vue b/resources/js/components/fo/FavoritesRecipesComponent.vue
index 64dc6ae7..39e38258 100644
--- a/resources/js/components/fo/FavoritesRecipesComponent.vue
+++ b/resources/js/components/fo/FavoritesRecipesComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="recipeList">
+    <div class="recipeFavList">
         <div class="list-add-item recipe">
             <a href="/recettes">
                 <i></i>
@@ -8,10 +8,10 @@
         </div>
         <div v-for="(recipe, index) in recipes" :key="recipe.id" class="recipeWrapper">
             <button @click="removeFromFavs(recipe.id, index)" :disabled="processing">
-                <div v-if="processing" class="loader"></div>
+                <p v-if="processing" class="loader"></p>
                 <span v-else>&times;</span>
             </button>
-            <a :href="'/recettes/' + recipe.slug" class="favorite-recipe-text">
+            <a :href="route('recipes.show').replace('~RECIPE~', recipe.slug)" class="favorite-recipe-text">
                 <figure>
                     <div class="hoverFigure">
                         <h5>Voir la recette !</h5>
@@ -45,9 +45,9 @@
         methods: {
             removeFromFavs(recipeId, index) {
                 this.processing = true;
-                axios.post('/mon-compte/recettes-favorites/retirer', {
-                    id: recipeId
-                }).then(
+                axios.post(this.route('setFav').replace('~RECIPE~', recipeId)
+                .replace('~STATUS~', 0))
+                .then(
                     (response) => {
                         this.recipes.splice(index, 1);
                         this.processing = false;
@@ -61,3 +61,134 @@
         }
     }
 </script>
+
+<style lang="scss">
+@import '../../../sass/_variables.scss';
+.recipeFavList{
+    max-width: $big_screen;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .recipeWrapper {
+        position: relative;
+        text-align: center;
+        min-width: 36em;
+        flex-basis: 33%;
+
+        & button {
+            position: absolute;
+            top: -5%;
+            right: 5%;
+            font-size: 45px;
+            border-radius: 50%;
+            color: white;
+            background-color: $orange;
+            height: 50px;
+            width: 50px;
+            border: 3px rgba(255,255,255,0.5) solid;
+            text-align: center;
+            font-family: "Veneer";
+            font-size: 40px;
+            line-height: 45px;
+            font-style: normal;
+            transition: opacity 0.3s;
+            opacity: 0;
+            z-index: 6;
+            cursor: pointer;
+
+            @include min-width($tablet) {
+                opacity: 1;
+            }
+        }
+
+        &:hover {
+            & button {
+                opacity: 1;
+            }
+        }
+        figure {
+            height: 236px;
+            margin: 0 8px 27px;
+            border: 8px solid white;
+            padding: 0;
+            position: relative;
+            display:flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+
+            .hoverFigure{
+                position:absolute;
+                top:0;
+                left: 0;
+                height: 100%;
+                width: 100%;
+                background-color: rgba(247, 158, 21, 0.7);
+                z-index:5;
+                opacity: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: opacity 500ms ease 0s;
+                &:hover{
+                    opacity: 1;
+                }
+                h5{
+                    color:#FFFFFF;
+                    font-size:4em;
+                    position: relative;
+                    &:before {
+                        background-image: url('~@/images/recette/hoverRecette.png');
+                        display: inline-block;
+                        content: "";
+                        width: 100px;
+                        height: 35px;
+                        position: absolute;
+                        top: -40px;
+                        left: 50%;
+                        transform: translateX(-50%);
+                    }
+                    &:after {
+                        background-image: url('~@/images/recette/hoverRecette.png');
+                        display: inline-block;
+                        content: "";
+                        width: 100px;
+                        height: 35px;
+                        transform: rotate(180deg) translateX(54%);
+                        position: absolute;
+                        top: 45px;
+                        left: 50%;
+                    }
+                }
+            }
+            img {
+                background: $color5;
+                min-height:100%;
+                min-width: 100%;
+                width:100%;
+                height:auto;
+            }
+        }
+        p {
+            font-family: 'Catamaran-Bold';
+            font-size: 18px;
+            padding: 0 40px;
+            text-transform: uppercase;
+            &:last-child {
+                color: $color6;
+                font-family: "CreamyScriptRegular";
+                font-size: 26px;
+                text-transform: none;
+                text-shadow: 1px 0 0 $color5, -1px 0 0 $color5, 0 1px 0 $color5, 0 -1px 0 $color5, 1px 1px $color5, -1px -1px 0 $color5, 1px -1px 0 $color5, -1px 1px 0 $color5;
+            }
+        }
+    }
+
+    h3 {
+        text-align: center;
+        margin-bottom: 2em;
+    }
+}
+</style>
diff --git a/resources/js/components/fo/GoogleMapMarkers.vue b/resources/js/components/fo/GoogleMapMarkers.vue
index 7d0bcb24..18cdb9c8 100644
--- a/resources/js/components/fo/GoogleMapMarkers.vue
+++ b/resources/js/components/fo/GoogleMapMarkers.vue
@@ -658,7 +658,7 @@ export default {
             position: relative;
             margin-left: 1rem;
             background-color: #fff;
-            min-width: 27rem;
+            min-width: 22rem;
             width: 25vw;
             padding: 2rem;
             box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
diff --git a/resources/js/components/fo/NotificationsComponent.vue b/resources/js/components/fo/NotificationsComponent.vue
index bd80c2a1..91aa3407 100644
--- a/resources/js/components/fo/NotificationsComponent.vue
+++ b/resources/js/components/fo/NotificationsComponent.vue
@@ -61,6 +61,7 @@
             this.baseNotifications = JSON.parse(this.dbnotifications);
             this.notificationtype = JSON.parse(this.dbnotificationtype);
             this.articlecategory = JSON.parse(this.dbarticlecategory);
+            this.category = this.notificationtype.all.value;
         },
         props: [
             'dbnotifications',
diff --git a/resources/sass/front/_sub_header.scss b/resources/sass/front/_sub_header.scss
index 2c72dcc3..4b9b3012 100644
--- a/resources/sass/front/_sub_header.scss
+++ b/resources/sass/front/_sub_header.scss
@@ -25,7 +25,7 @@
             @include max-width($tablet) {
                 right: 50%;
                 transform: translateX(50%);
-                top: 75%;
+                top: 80%;
             }
 
             & > a {
diff --git a/resources/sass/front/pages/brand/_quality.scss b/resources/sass/front/pages/brand/_quality.scss
index 42cbefac..c44179cd 100644
--- a/resources/sass/front/pages/brand/_quality.scss
+++ b/resources/sass/front/pages/brand/_quality.scss
@@ -17,6 +17,7 @@
             font-family: 'Veneer';
             text-decoration: underline;
             text-shadow: 0px 0px 16px #000;
+            text-align: center;
             @include max-width($tablet){
                 position: relative;
                 top: 25px;
diff --git a/resources/sass/front/pages/brand/index.scss b/resources/sass/front/pages/brand/index.scss
index 4179ab9b..9564d8c6 100644
--- a/resources/sass/front/pages/brand/index.scss
+++ b/resources/sass/front/pages/brand/index.scss
@@ -92,7 +92,7 @@
             overflow: hidden;
             @include max-width($tablet) {
                 width: 100%;
-                min-height: 360px;
+                min-height: 17rem;
                 order: 3;
             }
             &:after {
@@ -129,6 +129,7 @@
             align-items: center;
             justify-content: center;
             overflow: hidden;
+            padding-top: 1em;
             @include max-width($tablet) {
                 width: 100%;
                 min-height: 600px;
@@ -158,6 +159,10 @@
                 }
                 @include max-width($mobile) {
                     top: 0;
+                    flex-direction: column-reverse;
+                    picture {
+                        display: none;
+                    }
                 }
                 .txt {
                     color: #fff;
@@ -282,7 +287,7 @@
                             left: 14%;
                         }
                     }
-                    img {
+                    picture {
                         width: auto;
                         height: 170px;
                         position: absolute;
@@ -293,11 +298,14 @@
                         &.logo {
                             left: -45px;
                         }
+                        img {
+                            height: 170px;
+                            width: auto;
+                        }
                     }
                 }
                 @include max-width($tablet) {
                     width: 100%;
-                    height: 40%;
                     .txtOui {
                         width: 80%;
                         a {
@@ -305,6 +313,31 @@
                             transform: translateX(-50%);
                             text-align: center;
                         }
+
+
+                    }
+                }
+                @include max-width($mobile) {
+                    .txtOui {
+                        width: 100%;
+                        a {
+                            left: 50%;
+                            transform: translateX(-50%);
+                            text-align: center;
+                            width: 96%;
+                        }
+                        picture {
+                            top: -90px;
+                            img {
+                                height: 8rem;
+                            }
+                            &.eleveur {
+                                right: 0;
+                            }
+                            &.logo {
+                                left: 0;
+                            }
+                        }
                     }
                 }
             }
diff --git a/resources/sass/front/pages/club/_content.scss b/resources/sass/front/pages/club/_content.scss
index 04582f5c..2770b41b 100644
--- a/resources/sass/front/pages/club/_content.scss
+++ b/resources/sass/front/pages/club/_content.scss
@@ -2,7 +2,7 @@
     position: relative;
     background-color: $color1;
     margin-top: -120px;
-    padding: 2rem;
+    padding-bottom: 5rem;
 
     & .content {
         max-width: 1200px;
@@ -10,8 +10,10 @@
 
         & .inner-size {
             & > h1 {
-                margin-bottom: 5px;
                 color: $color9;
+                margin:5px auto;
+                padding: 0 0.6em;
+                text-align: center;
 
                 & > i {
                     vertical-align: revert;
@@ -30,9 +32,10 @@
                 font-size: 25px;
                 padding-left: 65px;
                 padding-bottom: 40px;
+                text-align: center;
 
-                @media screen and (max-width: $tablet) {
-                    padding-bottom: 0;
+                @include max-width($tablet) {
+                    padding: 0 0.6em;
                 }
             }
 
@@ -47,16 +50,14 @@
 
 .club-list-items {
     width: 100% !important;
-
-    @media screen and (max-width: $mobile) {
-        justify-content: center !important;
-    }
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center !important;
 }
 
 .list-add-item {
     display: flex;
     flex-basis: 33%;
-    height: 390px;
     margin: 0 auto;
     max-width: 255px;
     justify-content: center;
@@ -120,7 +121,18 @@
     align-items: center;
     padding-bottom: 88px;
 
-    @media screen and (max-width: $tablet) {
+    @include max-width($tablet) {
+        padding-bottom: 0;
+        max-width: 344px;
+    }
+}
+
+.list-add-item.product {
+    max-width: 100%;
+    align-items: center;
+    padding-bottom: 88px;
+
+    @include max-width($tablet) {
         padding-bottom: 0;
         max-width: 344px;
     }
diff --git a/resources/sass/front/pages/ocb/_content.scss b/resources/sass/front/pages/ocb/_content.scss
index c9bea717..8f076358 100644
--- a/resources/sass/front/pages/ocb/_content.scss
+++ b/resources/sass/front/pages/ocb/_content.scss
@@ -181,35 +181,37 @@
             position: relative;
             align-items: center;
             justify-content: space-between;
-            padding: 20px;
-            padding-left: 120px;
+            padding: 1em;
+            padding-left: 7rem;
             background-color: #afcb03;
             margin: 50px auto;
             border: 10px solid #fff;
 
             @include max-width($tablet) {
                 padding-left: 2rem;
+                padding-left: 5rem;
             }
 
-            @media screen and (max-width: $mobile) {
+            @include max-width($mobile + 100px) {
                 flex-direction: column;
+                padding-left: 5rem;
             }
 
             & > figure {
                 position: absolute;
                 height: 160px;
                 width: auto;
-                left: -75px;
-                top: -95px;
+                left: -77px;
+                top: -100px;
 
-                @media screen and (max-width: $tablet) {
+                @include max-width($tablet) {
                     height: 140px;
                 }
 
-                @media screen and (max-width: $mobile) {
+                @include max-width($mobile) {
                     height: 120px;
-                    left: -45px;
-                    top: -65px;
+                    left: -60px;
+                    top: -85px;
                 }
 
                 & > img {
@@ -224,11 +226,11 @@
                     line-height: 1em;
                     color: #fff;
 
-                    @media screen and (max-width: $tablet) {
+                    @include max-width($tablet) {
                         font-size: 2em;
                     }
 
-                    @media screen and (max-width: $mobile) {
+                    @include max-width($mobile  + 100px) {
                         text-align: center;
                     }
                 }
@@ -237,14 +239,14 @@
                     display: block;
                     color: white;
                     font-family: "Catamaran-Regular";
-                    font-size: 15px;
+                    font-size: 2em;
                     width: 80%;
 
-                    @media screen and (max-width: $tablet) {
-                        font-size: 10px;
+                    @include max-width($tablet) {
+                        font-size: 1.3em;
                     }
 
-                    @media screen and (max-width: $mobile) {
+                    @include max-width($mobile + 100px) {
                         display: none;
                     }
                 }
@@ -267,7 +269,7 @@
                     color: #003b22;
                 }
 
-                @media screen and (max-width: $mobile) {
+                @include max-width($mobile) {
                     padding: 3px 10px;
                     font-size: 1.2em;
                     display: inline-block;
@@ -279,7 +281,8 @@
         }
     }
 
-    & .pagination li a, .pagination li span {
+    & .pagination li a,
+    .pagination li span {
         background-color: transparent;
     }
 }
diff --git a/resources/views/front/brand/index.blade.php b/resources/views/front/brand/index.blade.php
index 4a42bfd8..1fd6d02c 100644
--- a/resources/views/front/brand/index.blade.php
+++ b/resources/views/front/brand/index.blade.php
@@ -43,7 +43,7 @@
             <div class="volaillesfr">
                 <div class="col1">
                     <picture>
-                        <source srcset="{{ asset('assets/images/home/volaillesfr_landing.webp') }}" type="image/webp">
+                        <source srcset="{{ asset(resize('assets/images/home/volaillesfr_landing.png', 'landingWebp')) }}" type="image/webp">
                         <img src="{{ asset('assets/images/home/volaillesfr_landing.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
                     </picture>
                     <div class="txt">
@@ -54,11 +54,15 @@
                 </div>
                 <div class="col2">
                     <div class="txtOui">
-                        <picture>
+                        <picture class="logo">
                             <source srcset="{{ asset('assets/images/ocb/logo-oui.webp') }}" type="image/webp">
-                            <img class="logo" src="{{ asset('assets/images/ocb/logo-oui.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
+                            <img  src="{{ asset('assets/images/ocb/logo-oui.png') }}" alt="{{ __('volailles 100% Françaises') }}" />
                         </picture>
-                        <img class="eleveur" src="{{ $breeder->picture }}" alt="{{__('Photo éleveur') }}">
+                        <picture class="eleveur">
+                            <source srcset="{{ asset(resize($breeder->picture, 'landingWebp')) }}" type="image/webp">
+                            <img src="{{ $breeder->picture }}" alt="{{__('Photo éleveur') }}">
+                        </picture>
+
                         <h5>{{ __('Alimentation :') }}</h5>
                         <ul>
                             <li><i class="fa fa-chevron-right"></i>{{ __('Céréales Entières 100% Françaises') }}</li>
diff --git a/resources/views/front/club/article.blade.php b/resources/views/front/club/article.blade.php
index bfbaa818..020141d0 100644
--- a/resources/views/front/club/article.blade.php
+++ b/resources/views/front/club/article.blade.php
@@ -4,21 +4,10 @@
 
 @section('breadcrumb', request()->route()->getName())
 
-@section('sub_header')
-    <div class="sub_header entete-white sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{  __('Le Club des Gaulois - Le Gaulois') }}">
-                    {{  __('Les infos du Club') }}
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{  __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Les infos du Club'),
+    'white' => true
+])
 
 @section('content')
 <section class="white-bg">
diff --git a/resources/views/front/club/cart.blade.php b/resources/views/front/club/cart.blade.php
index 52cdf8d2..88773f1b 100644
--- a/resources/views/front/club/cart.blade.php
+++ b/resources/views/front/club/cart.blade.php
@@ -2,21 +2,9 @@
 @section('title', 'Club des Gaulois ma liste de courses')
 @section('description', "Enregistrez en quelques clics vos produits Le Gaulois préférés")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
-                    Mon compte
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Mon Compte')
+])
 
 @section('content')
 @include('front.club.modules.quicklink', ['top' => true])
@@ -35,3 +23,15 @@
     </div>
 </section>
 @endsection
+
+@push('scriptsConstants')
+<script>
+    window._locale = '{{ app()->getLocale() }}';
+    window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
+    window._asset = '{{ asset('') }}';
+    window._routes = {
+        'setFav': '{{ route('account.set-cart', ['product' => '~PRODUCT~', 'status' => '~STATUS~']) }}',
+        'product.show': '{{ route('product.show', ['product' => '~PRODUCT~']) }}'
+    };
+</script>
+@endpush
diff --git a/resources/views/front/club/favorites-recipes.blade.php b/resources/views/front/club/favorites-recipes.blade.php
index 429b61df..c8a419f8 100644
--- a/resources/views/front/club/favorites-recipes.blade.php
+++ b/resources/views/front/club/favorites-recipes.blade.php
@@ -2,21 +2,9 @@
 @section('title', 'Club des Gaulois mes recettes favorites')
 @section('description', "Retrouvez en un clic toutes vos recettes Le Gaulois préférée à essayer ou déjà testées et approuvées")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
-                    Mon compte
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Mon Compte')
+])
 
 @section('content')
 @include('front.club.modules.quicklink', ['top' => true])
@@ -36,3 +24,15 @@
     </div>
 </section>
 @endsection
+
+@push('scriptsConstants')
+<script>
+    window._locale = '{{ app()->getLocale() }}';
+    window._translations = @json(cache(sprintf('translations.%s', app()->getLocale())));
+    window._asset = '{{ asset('') }}';
+    window._routes = {
+        'setFav': '{{ route('account.set-favs-recipes', ['recipe' => '~RECIPE~', 'status' => '~STATUS~']) }}',
+        'recipes.show': '{{ route('recipes.show', ['recipe' => '~RECIPE~']) }}'
+    };
+</script>
+@endpush
diff --git a/resources/views/front/club/informations.blade.php b/resources/views/front/club/informations.blade.php
index d9f004a3..9b568e8a 100644
--- a/resources/views/front/club/informations.blade.php
+++ b/resources/views/front/club/informations.blade.php
@@ -2,21 +2,9 @@
 @section('title', 'Le Club des Gaulois')
 @section('description', "Entrez dans le Club des Gaulois pour bénéficier des avantages réservés aux membres : bons de réduction, avant-premières, Départ'aimants et bourse aux échanges")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
-                    Mon compte
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Mon Compte')
+])
 
 @section('content')
 @include('front.club.modules.quicklink', ['top' => true])
diff --git a/resources/views/front/club/messages.blade.php b/resources/views/front/club/messages.blade.php
index 89bc37d1..018e982a 100644
--- a/resources/views/front/club/messages.blade.php
+++ b/resources/views/front/club/messages.blade.php
@@ -2,20 +2,9 @@
 @section('title', 'Club des Gaulois mes notifications')
 @section('description', "Soyez averti de nouvelles activités sur le Club des Gaulois via des alertes : message, nouveautés, sondage")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{ __('Le Club des Gaulois - Le Gaulois') }}">
-                    {{ __('Mes messages') }}
-                </p>
-            </div>
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{ __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Mon Compte')
+])
 
 @section('content')
 @include('front.club.modules.quicklink', ['top' => true])
diff --git a/resources/views/front/club/modules/clubSubheader.blade.php b/resources/views/front/club/modules/clubSubheader.blade.php
new file mode 100644
index 00000000..90601deb
--- /dev/null
+++ b/resources/views/front/club/modules/clubSubheader.blade.php
@@ -0,0 +1,17 @@
+@section('sub_header')
+<div class="sub_header @if(isset($white))entete-white @endif sub_header_club">
+    <div class="content white-bg">
+        @include('front.club.modules.customerToolbar')
+        <div class="title-club-account">
+            <p>
+                <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="{{ __('Le Club des Gaulois - Le Gaulois') }}">
+                {{ $title }}
+            </p>
+        </div>
+        <picture>
+            <source srcset="{{ asset('assets/images/club/bandeau-club-mbl.png') }}" media="(max-width: 500px)">
+            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="{{ __('Le club des Gaulois - Le Gaulois') }}" class="img-club">
+        </picture>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/front/club/notifications.blade.php b/resources/views/front/club/notifications.blade.php
index 0be0fd4d..ce8838de 100644
--- a/resources/views/front/club/notifications.blade.php
+++ b/resources/views/front/club/notifications.blade.php
@@ -2,21 +2,9 @@
 @section('title', 'Club des Gaulois mes notifications')
 @section('description', "Soyez averti de nouvelles activités sur le Club des Gaulois via des alertes : message, nouveautés, sondage")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
-                    Mon compte
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Mon Compte')
+])
 
 @section('content')
 @include('front.club.modules.quicklink', ['top' => true])
diff --git a/resources/views/front/club/reductions.blade.php b/resources/views/front/club/reductions.blade.php
index 54042851..7f8fd242 100644
--- a/resources/views/front/club/reductions.blade.php
+++ b/resources/views/front/club/reductions.blade.php
@@ -2,21 +2,9 @@
 @section('title', 'Les réductions Le Gaulois')
 @section('description', "Pour accéder à vos bons de réductions, inscrivez-vous ou connectez-vous au Club des Gaulois")
 
-@section('sub_header')
-    <div class="sub_header sub_header_club">
-        <div class="content white-bg">
-            @include('front.club.modules.customerToolbar')
-            <div class="title-club-account">
-                <p>
-                    <img src="{{ asset('assets/images/club/logo-leclub.png') }}" alt="Le Club des Gaulois - Le Gaulois">
-                    {{ __('Les Promos') }}
-                </p>
-            </div>
-            <!-- TODO : GESTION IMG SI MOBILE -->
-            <img src="{{ asset('assets/images/club/bandeau-club-dsktp.png') }}" alt="Le club des Gaulois - Le Gaulois" class="img-club">
-        </div>
-    </div>
-@endsection
+@include('front.club.modules.clubSubheader', [
+    'title' => __('Les Promos')
+])
 
 @section('content')
 <a href="{{ $urlReductions }}" class="reductions-link" target="_blank">