Modification Lot 2 page Santé nutrition

- suppression des 4 pages
- ajout de 2 nouvelle pages
- redirection des anciennes pages vers le nouvelles
- Le nouvelle page ne sont plus statiques (basés sur engagement)
- Ajout du Model NutritionPage
- Ajout des Enums NutritionBlocType, NutritionType
- Intégration complete avec responsive des deux nouvelles pages
- modification des composants vu pour créer une instance de Vuejs par composant existant pour ajouter et enlever des dropdowns
- Suppression des balanced menus
- fix login center image
- Modification de l'intégration de CKeditor
- Ajout de UploadController avec methode pour image
- html purifier fix config using ckeditor
- ckeditor set css base style on front and back (for nutrition pages on front)

app/Enums/BalancedMenuType.php

@@ -1,26 +0,0 @@
-<?php
-
-namespace App\Enums;
-
-use Kwaadpepper\Enum\BaseEnumRoutable;
-
-/**
- * @method static self kid()
- * @method static self teenager()
- * @method static self woman()
- * @method static self man()
- * @method static self senior()
- */
-final class BalancedMenuType extends BaseEnumRoutable
-{
-    protected static function values(): array
-    {
-        return [
-            'kid' => 1,
-            'teenager' => 2,
-            'woman' => 3,
-            'man' => 4,
-            'senior' => 5
-        ];
-    }
-}

app/Enums/InputType.php

@@ -13,6 +13,8 @@ use Kwaadpepper\Enum\BaseEnumRoutable;
  * @method static self url()
  * @method static self imageArray()
  * @method static self labelArray()
+ * @method static self dropdownArray()
+ * html autorisé
  */
 final class InputType extends BaseEnumRoutable
 {
@@ -25,7 +27,8 @@ final class InputType extends BaseEnumRoutable
             'text' => 3,
             'url' => 4,
             'imageArray' => 5,
-            'labelArray' => 6
+            'labelArray' => 6,
+            'dropdownArray' => 7
         ];
     }
 }

app/Enums/NutritionBlocType.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace App\Enums;
+
+use Kwaadpepper\Enum\BaseEnumRoutable;
+
+/**
+ * @method static self bloc1()
+ * Text et dropdowns array
+ * @method static self bloc2()
+ * Text et label array
+ * @method static self bloc3()
+ * Big image et optional button
+ * @method static self bloc4()
+ * Big image et dropdowns array
+ * @method static self bloc5()
+ * Green encart
+ */
+final class NutritionBlocType extends BaseEnumRoutable
+{
+    protected static function values(): array
+    {
+        return [
+            'bloc1' => 0,
+            'bloc2' => 1,
+            'bloc3' => 2,
+            'bloc4' => 3,
+            'bloc5' => 4
+        ];
+    }
+
+    protected static function labels(): array
+    {
+        return [
+            'bloc1' => __('Bloc 1, (Text et dropdowns array)'),
+            'bloc2' => __('Bloc 2 (Text et label array)'),
+            'bloc3' => __('Bloc 3 (Big image et optional button'),
+            'bloc4' => __('Bloc 4 (Big image et dropdowns array)'),
+            'bloc5' => __('Bloc 5 (Green encart)')
+        ];
+    }
+}

app/Enums/NutritionType.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Enums;
+
+use Kwaadpepper\Enum\BaseEnumRoutable;
+
+/**
+ * @method static self poultry()
+ * @method static self quality()
+ */
+final class NutritionType extends BaseEnumRoutable
+{
+    protected static function values(): array
+    {
+        return [
+            'poultry' => 0,
+            'quality' => 1
+        ];
+    }
+
+    protected static function labels(): array
+    {
+        return [
+            'poultry' => __('Page volaille'),
+            'quality' => __('Page qualité nutrition')
+        ];
+    }
+}

app/Http/Controllers/Bo/BalancedMenusController.php

@@ -1,127 +0,0 @@
-<?php
-
-namespace App\Http\Controllers\Bo;
-
-use App\Http\Controllers\Controller;
-use Illuminate\Http\Request;
-use Illuminate\Support\Str;
-use App\Models\BalancedMenus;
-use App\Models\Products;
-use App\Traits\UpdateModelStatus;
-
-class BalancedMenusController extends Controller
-{
-    use UpdateModelStatus;
-
-    public function index()
-    {
-        $m = BalancedMenus::paginate();
-        return view('bo.balanced-menus.index', compact('m'));
-    }
-
-    public function create()
-    {
-        $p = Products::all();
-        return view('bo.balanced-menus.create', compact('p'));
-    }
-
-    public function store(Request $request)
-    {
-        $productId = $request->product_id;
-        $type = $request->type;
-        $picture = $request->picture;
-        $entree = $request->entree;
-        $meal = $request->meal;
-        $dessert = $request->dessert;
-        $status = 0;
-
-        $request->validate([
-            'picture' => 'required|image|mimes:jpeg,png,jpg|max:2048|dimensions:width=770,height=684',
-            'entree' => 'required|max:4000',
-            'meal' => 'required|max:4000',
-            'dessert' => 'required|max:4000',
-        ]);
-
-        $m = new BalancedMenus();
-        $m->type = $type;
-
-        $imageName = 'menu-' . Str::slug($m->type->label) . '-' .
-            date('d-m-Y-h-i-s') . '-le-gaulois.' . $picture->extension();
-        $picture->move(public_path('uploads/images/menus-equilibres/' . date('Y') . '/' . date('m')), $imageName);
-
-        $m->product_id = $productId;
-        $m->picture = 'uploads/images/menus-equilibres/' . date('Y') . '/' . date('m') . '/' . $imageName;
-        $m->entree = $entree;
-        $m->meal = $meal;
-        $m->dessert = $dessert;
-        $m->status = $status;
-        $m->save();
-
-        return redirect()->route('bo.balanced-menus.index');
-    }
-
-    // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClass
-    public function edit(BalancedMenus $m)
-    {
-        $p = Products::all();
-        return view('bo.balanced-menus.edit', compact('m', 'p'));
-    }
-
-    public function update(Request $request, BalancedMenus $m)
-    {
-        $productId = $request->product_id;
-        $type = $request->type;
-        $picture = $request->picture;
-        $entree = $request->entree;
-        $meal = $request->meal;
-        $dessert = $request->dessert;
-        $status = $request->status === null ? 0 : 1;
-
-        $request->validate([
-            'entree' => 'required|max:4000',
-            'meal' => 'required|max:4000',
-            'dessert' => 'required|max:4000',
-        ]);
-
-        if ($picture !== null) {
-            $request->validate([
-                'picture' => 'required|image|mimes:jpeg,png,jpg|max:2048|dimensions:width=770,height=684',
-            ]);
-        }
-
-        $m->type = $type;
-
-        if ($picture !== null) {
-            if (file_exists(public_path() . '/' . $m->picture)) {
-                unlink(public_path() . '/' . $m->picture);
-            }
-            $imageName = 'menu-' . Str::slug($m->type->label) . '-' .
-            date('d-m-Y-h-i-s') . '-le-gaulois.' . $picture->extension();
-            $picture->move(public_path('uploads/images/menus-equilibres/' . date('Y') . '/' . date('m')), $imageName);
-        }
-
-        $m->product_id = $productId;
-        if ($picture !== null) {
-            $m->picture = 'uploads/images/menus-equilibres/' . date('Y') . '/' . date('m') . '/' . $imageName;
-        }
-        $m->entree = $entree;
-        $m->meal = $meal;
-        $m->dessert = $dessert;
-        $m->status = $status;
-        $m->save();
-
-        return redirect()->route('bo.balanced-menus.edit', $m->id)->with('success', 'Enregistré !');
-    }
-
-    public function destroy(BalancedMenus $m)
-    {
-        if (file_exists(public_path() . '/' . $m->picture)) {
-            unlink(public_path() . '/' . $m->picture);
-        }
-
-        $m->delete();
-
-        return redirect()->route('bo.balanced-menus.index')
-        ->with('warning', 'Le contenu à bien été supprimé');
-    }
-}

app/Http/Controllers/Bo/HealthNutritionController.php

@@ -0,0 +1,56 @@
+<?php
+
+namespace App\Http\Controllers\Bo;
+
+use App\Enums\InputType;
+use App\Http\Controllers\Controller;
+use App\Http\Requests\UpdateNutritionPageRequest;
+use App\Models\NutritionPage;
+use App\Traits\UpdateModelStatus;
+
+class HealthNutritionController extends Controller
+{
+    use UpdateModelStatus;
+
+    public function index()
+    {
+        $pages = NutritionPage::paginate();
+        return view('bo.health-nutrition.index', compact('pages'));
+    }
+
+    public function edit(NutritionPage $page)
+    {
+        return view('bo.health-nutrition.edit', ['page' => $page]);
+    }
+
+    public function update(UpdateNutritionPageRequest $request, NutritionPage $page)
+    {
+        $page->fill(array_replace_recursive(
+            $this->clearImagesLabelsDropdownsArrays($page->toArray()),
+            $request->validated()
+        ));
+        $page->saveOrFail();
+        return redirect()->route('bo.nutrition-page.edit', $page)
+            ->with('success', 'Enregistré !');
+    }
+
+    private function clearImagesLabelsDropdownsArrays(array $page): array
+    {
+        foreach ($page['content'] as &$block) {
+            if (isset($block['content'])) {
+                foreach ($block['content'] as &$input) {
+                    if ($input['inputType']['value'] === InputType::imageArray()->value) {
+                        $input['value'] = [];
+                    }
+                    if ($input['inputType']['value'] === InputType::labelArray()->value) {
+                        $input['value'] = [];
+                    }
+                    if ($input['inputType']['value'] === InputType::dropdownArray()->value) {
+                        $input['value'] = [];
+                    }
+                }
+            }
+        }
+        return $page;
+    }
+}

app/Http/Controllers/Bo/UploadController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Controllers\Bo;
+
+use App\Http\Controllers\Controller;
+use App\Http\Requests\UploadFileRequest;
+
+class UploadController extends Controller
+{
+    public function uploadFile(UploadFileRequest $request)
+    {
+        /** @var \Illuminate\Http\UploadedFile $image */
+        $image = $request->upload;
+        $newPath = $this->prepareMoveFile($image->getClientOriginalName(), 'uploads');
+        $newPath = str_replace(storage_path('app'), '', $newPath);
+        $image->storePubliclyAs(pathinfo($newPath, \PATHINFO_DIRNAME), pathinfo($newPath, \PATHINFO_BASENAME));
+        return response()->json([
+            'url' => '/storage' . str_replace('/public', '', $newPath)
+        ]);
+    }
+}

app/Http/Controllers/KitchenSideController.php

@@ -0,0 +1,28 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Enums\NutritionType;
+use App\Models\NutritionPage;
+use Illuminate\Support\Facades\View;
+
+class KitchenSideController extends Controller
+{
+    public function __construct()
+    {
+        View::share('nutritionPageMenu', NutritionPage::get(['type', 'menutitle']));
+    }
+    public function nutritionPoultry()
+    {
+        $page = NutritionPage::where('type', NutritionType::poultry())
+            ->firstOrFail();
+        return view('front.health-nutrition.nutrition-page', compact('page'));
+    }
+
+    public function nutritionQuality()
+    {
+        $page = NutritionPage::where('type', NutritionType::quality())
+            ->firstOrFail();
+        return view('front.health-nutrition.nutrition-page', compact('page'));
+    }
+}

app/Http/Controllers/ProductsController.php

@@ -3,7 +3,6 @@
 namespace App\Http\Controllers;
 
 use App\Enums\GeneralConfigType;
-use App\Models\BalancedMenus;
 use App\Models\ConsumptionTimes;
 use App\Models\ProductSliderPictures;
 use App\Models\MeatTypes;
@@ -12,7 +11,6 @@ use App\Models\Range;
 use App\Models\Recipes;
 use App\Models\SubRange;
 use Illuminate\Database\Eloquent\Model;
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Route;
 
 class ProductsController extends Controller
@@ -133,12 +131,4 @@ class ProductsController extends Controller
 
         return view('front.products.product', compact('product', 'recipes', 'recipeVideo', 'generalConfig'));
     }
-
-    public function indexMenusAjax(Request $request)
-    {
-        if (!$request->ajax()) {
-            abort(400);
-        }
-        return response()->json(BalancedMenus::productsAjax());
-    }
 }

app/Http/Controllers/RecipesController.php

@@ -2,19 +2,15 @@
 
 namespace App\Http\Controllers;
 
-use App\Enums\BalancedMenuType;
 use App\Enums\RecipeFilter;
 use App\Enums\RecipeFilterTimes;
 use App\Enums\RecipeType;
 use App\Http\Requests\RecipeIndexRequest;
 use App\Http\Requests\RecipeRateRequest;
-use App\Models\BalancedMenus;
 use App\Models\ConsumptionTimes;
-use App\Models\Products;
 use App\Models\Range;
 use App\Models\Recipes;
 use BadMethodCallException;
-use Illuminate\Http\Request;
 use Illuminate\Support\Facades\DB;
 
 class RecipesController extends Controller
@@ -147,14 +143,4 @@ class RecipesController extends Controller
         }
         return view('front.kitchenside', compact('featuredRecipes', 'videoRecipes'));
     }
-
-    public function showForBalancedMenu(BalancedMenuType $type, Products $product, Request $request)
-    {
-        if (!$request->ajax()) {
-            abort(400);
-        }
-        // NE vérifie pas balancedmenu status car il faut afficher la recette du produit si il est publié
-        return response()->json(BalancedMenus::where('product_id', $product->id)
-        ->where('type', $type)->where('status', true)->firstOrFail());
-    }
 }

app/Http/Requests/UpdateNutritionPageRequest.php

@@ -0,0 +1,183 @@
+<?php
+
+namespace App\Http\Requests;
+
+use App\Enums\InputType;
+use App\Lib\Utils;
+use Illuminate\Foundation\Http\FormRequest;
+use Illuminate\Validation\ValidationException;
+
+class UpdateNutritionPageRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        if (auth()->check()) {
+            $this->merge([
+                'status' => $this->status === null ? 0 : 1
+            ]);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        $rules = [
+            'menutitle' => 'required|string|min:7|max:50',
+            'title' => 'required|string|min:7|max:255',
+            'metaTitle' => 'required|string|min:20|max:60',
+            'metaDescription' => 'required|string|min:130|max:160',
+            'headerContent' => 'required|string|min:10'
+        ];
+        $arrayContent = $this->nutrition_page;
+        foreach ($arrayContent->content as $i => $block) {
+            foreach ($block['content'] as $iptName => $input) {
+                switch ($input['inputType']['value']) {
+                    case InputType::string()->value:
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value" => 'required|string|min:4'
+                        ]);
+                        break;
+                    case InputType::text()->value:
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value" => 'required|string|min:15'
+                        ]);
+                        break;
+                    case InputType::image()->value:
+                        $ipt = $arrayContent->content[$i]['content'][$iptName];
+                        $max = isset($ipt['dimensionsMax']);
+                        $dim = collect(explode(
+                            ',',
+                            $ipt['dimensions'] ?? $ipt['dimensionsMax']
+                        ))->mapWithKeys(function ($v) {
+                            $v = explode(' ', $v);
+                            return [$v[0] => $v[1]];
+                        });
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value" => [
+                                'sometimes',
+                                'image',
+                                'mimes:png,jpg',
+                                sprintf(
+                                    'dimensions:%s=%d,%s=%d',
+                                    $max ? 'max_height' : 'height',
+                                    $dim['hauteur'],
+                                    $max ? 'max_width' : 'width',
+                                    $dim['largeur']
+                                )
+                            ]
+                        ]);
+                        break;
+                    case InputType::imageArray()->value:
+                        $ipt = $arrayContent->content[$i]['content'][$iptName];
+                        $max = isset($ipt['dimensionsMax']);
+                        $dim = collect(explode(
+                            ',',
+                            $ipt['dimensions'] ?? $ipt['dimensionsMax']
+                        ))->mapWithKeys(function ($v) {
+                            $v = explode(' ', $v);
+                            return [$v[0] => $v[1]];
+                        });
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value.*" => 'sometimes|array'
+                        ]);
+                        if (is_array($this->input("content.$i.content.$iptName.value.*"))) {
+                            $all = $this->all();
+                            $images = $this->input("content.$i.content.$iptName.value");
+                            if (is_array($images)) {
+                                ksort($images);
+                                $all['content'][$i]['content'][$iptName]['value'] = $images;
+                                $this->merge($all);
+                            }
+                            foreach ($this->input("content.$i.content.$iptName.value.*") as $imageK => $image) {
+                                if (!is_string($image)) {
+                                    $rules = array_merge($rules, [
+                                        "content.$i.content.$iptName.value.$imageK" => [
+                                            'image',
+                                            'mimes:png,jpg',
+                                            sprintf(
+                                                'dimensions:%s=%d,%s=%d',
+                                                $max ? 'max_height' : 'height',
+                                                $dim['hauteur'],
+                                                $max ? 'max_width' : 'width',
+                                                $dim['largeur']
+                                            )
+                                        ]
+                                    ]);
+                                } else {
+                                    $rules = array_merge($rules, [
+                                        "content.$i.content.$iptName.value.$imageK" => 'string'
+                                    ]);
+                                }
+                            }
+                        }
+                        break;
+                    case InputType::url()->value:
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value" => [
+                                'required', 'url',
+                                // @phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundInExtendedClassBeforeLastUsed
+                                function ($attribute, $value, $fail) {
+                                    try {
+                                        Utils::assertNoInternalUrls($attribute, $value);
+                                    } catch (ValidationException $e) {
+                                        $fail(collect($e->errors())->first()[0]);
+                                    }
+                                }
+                            ]
+                        ]);
+                        break;
+                    case InputType::labelArray()->value:
+                        $all = $this->all();
+                        foreach ($this->input("content.$i.content.$iptName.value") as $labelIndex => $label) {
+                            if ($labelIndex === 'X') {
+                                unset($all['content'][$i]['content'][$iptName]['value'][$labelIndex]);
+                                continue;
+                            }
+                            $rules = array_merge($rules, [
+                                "content.$i.content.$iptName.value.$labelIndex.*" => 'string'
+                            ]);
+                        }
+                        $this->merge($all);
+                        break;
+                    case InputType::dropdownArray()->value:
+                        $all = $this->all();
+                        foreach ($this->input("content.$i.content.$iptName.value") as $dropdownIndex => $dropdown) {
+                            if ($dropdownIndex === 'X') {
+                                unset($all['content'][$i]['content'][$iptName]['value'][$dropdownIndex]);
+                                continue;
+                            }
+                            $rules = array_merge($rules, [
+                                "content.$i.content.$iptName.value.$dropdownIndex.*" => 'string'
+                            ]);
+                        }
+                        $this->merge($all);
+                        break;
+                    case InputType::boolean()->value:
+                        $all = $this->all();
+                        $nested = Utils::dotStringToNestedArray(
+                            "content.$i.content.$iptName.value",
+                            $this->input("content.$i.content.$iptName.value") ? true : false
+                        );
+                        $all = array_merge_recursive_distinct($all, $nested);
+                        $this->merge($all);
+                        $rules = array_merge($rules, [
+                            "content.$i.content.$iptName.value" => 'boolean'
+                        ]);
+                        break;
+                }
+            }
+        }
+        return $rules;
+    }
+}

app/Http/Requests/UploadFileRequest.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class UploadFileRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return auth()->check() and $this->ajax();
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'upload' => 'required|image|mimes:jpeg,png,jpg|max:2048'
+        ];
+    }
+}

app/Lib/Utils.php

@@ -2,9 +2,13 @@
 
 namespace App\Lib;
 
+use Exception;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Route;
+use Illuminate\Support\Str;
 use Illuminate\Validation\ValidationException;
+use SplFileInfo;
 use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
 
 // phpcs:disable Generic.Files.LineLength.TooLong
@@ -153,4 +157,47 @@ class Utils
         }
         return $arr;
     }
+
+    public static function storeImage($image, string $folderName): string
+    {
+        if (\is_object($image) and get_class($image) === UploadedFile::class) {
+            /** @var UploadedFile */
+            $image = $image;
+            $newPath = self::prepareMoveFile($image->getClientOriginalName(), $folderName);
+            $newPath = str_replace(storage_path('app'), '', $newPath);
+            $image->storePubliclyAs(pathinfo($newPath, \PATHINFO_DIRNAME), pathinfo($newPath, \PATHINFO_BASENAME));
+            return '/storage' . str_replace('/public', '', $newPath);
+        }
+        if (\is_object($image) and get_class($image) === SplFileInfo::class) {
+            /** @var SplFileInfo */
+            $image = $image;
+            $newPath = self::prepareMoveFile($image->getBaseName(), $folderName);
+            if (!File::copy($image->getRealPath(), $newPath)) {
+                throw new \Exception(sprintf(
+                    'Failed to copy file %s to %s',
+                    $image->getRealPath(),
+                    $newPath
+                ));
+            }
+            return str_replace(\storage_path('app/public'), '/storage', $newPath);
+        }
+        if (\is_string($image)) {
+            return $image;
+        }
+        throw new Exception(sprintf('Cannot handle image %s', \gettype($image)));
+    }
+
+    private static function prepareMoveFile(string $filename, string $folderName): string
+    {
+        $pathFolder = \storage_path("app/public/images/$folderName");
+        if (!File::exists($pathFolder)) {
+            File::makeDirectory($pathFolder, 0755, true);
+        }
+        $filename = sprintf('%s-%s', Str::uuid(), $filename);
+        $fullPath = sprintf('%s/%s', $pathFolder, $filename);
+        if (File::exists($fullPath)) {
+            File::delete($fullPath);
+        }
+        return $fullPath;
+    }
 }

app/Models/BalancedMenus.php

@@ -1,42 +0,0 @@
-<?php
-
-namespace App\Models;
-
-use App\Enums\BalancedMenuType;
-use Illuminate\Database\Eloquent\Model;
-use Kwaadpepper\Enum\Traits\CastsEnums;
-
-class BalancedMenus extends Model
-{
-    use CastsEnums;
-
-    protected $enumCasts = [
-        'type' => BalancedMenuType::class
-    ];
-
-    protected $table = 'balanced_menus';
-
-    protected static function booted()
-    {
-        static::creating(function ($menu) {
-            $menu->entree = clean($menu->entree);
-            $menu->meal = clean($menu->meal);
-            $menu->dessert = clean($menu->dessert);
-        });
-        static::updating(function ($menu) {
-            $menu->entree = clean($menu->entree);
-            $menu->meal = clean($menu->meal);
-            $menu->dessert = clean($menu->dessert);
-        });
-    }
-
-    public function product()
-    {
-        return $this->belongsTo(Products::class);
-    }
-
-    public static function productsAjax()
-    {
-        return Products::whereHas('balancedMenu')->get(['id', 'picture', 'name']);
-    }
-}

app/Models/Engagement.php

@@ -280,17 +280,18 @@ class Engagement extends Model
         ));
     }
 
+    // phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh
     private function serializeContent(array $content): string
     {
         foreach ($content as $i => $bloc) {
             foreach ($bloc['content'] as $o => $input) {
                 switch ($input['inputType']->value ?? $input['inputType']['value']) {
                     case InputType::image()->value:
-                        $content[$i]['content'][$o]['value'] = $this->storeImage($input['value']);
+                        $content[$i]['content'][$o]['value'] = Utils::storeImage($input['value'], $this->getTable());
                         break;
                     case InputType::imageArray()->value:
                         foreach ($input['value'] as $k => $image) {
-                            $content[$i]['content'][$o]['value'][$k] = $this->storeImage($image);
+                            $content[$i]['content'][$o]['value'][$k] = Utils::storeImage($image, $this->getTable());
                         }
                         break;
                     case InputType::labelArray()->value:
@@ -309,7 +310,10 @@ class Engagement extends Model
                         Utils::assertNoInternalUrls('content', $input['value']);
                         break;
                     default:
-                        throw new \Exception(sprintf('Unknown input Type %s', $input['inputType']->label ?? $input['inputType']['label']));
+                        throw new \Exception(sprintf(
+                            'Unknown input Type %s',
+                            $input['inputType']->label ?? $input['inputType']['label']
+                        ));
                 }
             }
         }

app/Models/NutritionPage.php

@@ -0,0 +1,298 @@
+<?php
+
+namespace App\Models;
+
+use App\Enums\InputType;
+use App\Enums\NutritionBlocType;
+use App\Enums\NutritionType;
+use App\Lib\Utils;
+use Illuminate\Database\Eloquent\Model;
+use Kwaadpepper\Enum\Traits\CastsEnums;
+
+class NutritionPage extends Model
+{
+    use CastsEnums;
+
+    protected $enumCasts = [
+        'type' => NutritionType::class
+    ];
+
+    protected $casts = [
+        'content' => 'array',
+    ];
+
+    protected $fillable = [
+        'menutitle', 'title',
+        'metaTitle', 'metaDescription',
+        'headerContent', 'content'
+    ];
+
+    // cast content
+    public function setContentAttribute($value)
+    {
+        $this->setContent($value);
+    }
+
+    public function getContentAttribute()
+    {
+        $content = json_decode($this->getRawOriginal('content'), true);
+        return isset($content->header) ? $content->header : $content;
+    }
+
+    /**
+     * Fill the model with an array of attributes.
+     *
+     * @param  array  $attributes
+     * @return $this
+     *
+     * @throws \Illuminate\Database\Eloquent\MassAssignmentException
+     */
+    public function fill(array $attributes)
+    {
+        parent::fill($attributes);
+        if (isset($attributes['content'])) {
+            $this->setContent($attributes['content']);
+        }
+    }
+
+    /**
+     * Get Blocks Template Data
+     *
+     * @return array
+     */
+    public static function getBlocks(): array
+    {
+        return [
+            NutritionBlocType::bloc1()->value => [
+                'type' => NutritionBlocType::bloc1(),
+                'content' => [
+                    'img' => [
+                        'dimensions' => 'largeur 486,hauteur 682',
+                        'label' => 'Illustration',
+                        'inputType' => InputType::image(),
+                        'alt' => '',
+                        'value' => ''
+                    ],
+                    'title' => [
+                        'label' => 'Titre (h2)',
+                        'inputType' => InputType::string(),
+                        'value' => ''
+                    ],
+                    'content' => [
+                        'label' => 'Contenu',
+                        'inputType' => InputType::text(),
+                        'value' => ''
+                    ],
+                    'side' => [
+                        'label' => 'Orientation de l\'image (gauche ou droite)',
+                        'inputType' => InputType::boolean(),
+                        'value' => ''
+                    ],
+                    'dropdownArray' => [
+                        'label' => 'Dropdowns',
+                        'inputType' => InputType::dropdownArray(),
+                        'value' => []
+                    ]
+                ]
+            ],
+            NutritionBlocType::bloc2()->value => [
+                'type' => NutritionBlocType::bloc2(),
+                'content' => [
+                    'img' => [
+                        'dimensions' => 'largeur 486,hauteur 682',
+                        'label' => 'Illustration',
+                        'inputType' => InputType::image(),
+                        'alt' => '',
+                        'value' => ''
+                    ],
+                    'title' => [
+                        'label' => 'Titre (h2)',
+                        'inputType' => InputType::string(),
+                        'value' => ''
+                    ],
+                    'content' => [
+                        'label' => 'Contenu',
+                        'inputType' => InputType::text(),
+                        'value' => ''
+                    ],
+                    'labels' => [
+                        'label' => 'Labels avec titre',
+                        'inputType' => InputType::labelArray(),
+                        'value' => []
+                    ]
+                ]
+            ],
+            NutritionBlocType::bloc3()->value => [
+                'type' => NutritionBlocType::bloc3(),
+                'content' => [
+                    'img' => [
+                        'dimensions' => 'largeur 792,hauteur 792',
+                        'label' => 'Illustration',
+                        'inputType' => InputType::image(),
+                        'alt' => '',
+                        'value' => ''
+                    ],
+                    'title' => [
+                        'label' => 'Titre (h2)',
+                        'inputType' => InputType::string(),
+                        'value' => ''
+                    ],
+                    'content' => [
+                        'label' => 'Contenu',
+                        'inputType' => InputType::text(),
+                        'value' => ''
+                    ],
+                    'link' => [
+                        'label' => 'Lien en bas du bloc',
+                        'inputType' => InputType::url(),
+                        'status' => true,
+                        'newtab' => false,
+                        'text' => '',
+                        'value' => ''
+                    ],
+                    'side' => [
+                        'label' => 'Orientation de l\'image (gauche ou droite)',
+                        'inputType' => InputType::boolean(),
+                        'value' => ''
+                    ],
+                ]
+            ],
+            NutritionBlocType::bloc4()->value => [
+                'type' => NutritionBlocType::bloc4(),
+                'content' => [
+                    'img' => [
+                        'dimensions' => 'largeur 792,hauteur 792',
+                        'label' => 'Illustration',
+                        'inputType' => InputType::image(),
+                        'alt' => '',
+                        'value' => ''
+                    ],
+                    'title' => [
+                        'label' => 'Titre (h2)',
+                        'inputType' => InputType::string(),
+                        'value' => ''
+                    ],
+                    'content' => [
+                        'label' => 'Contenu',
+                        'inputType' => InputType::text(),
+                        'value' => ''
+                    ],
+                    'dropdownArray' => [
+                        'label' => 'Dropdowns',
+                        'inputType' => InputType::dropdropdownArraydown(),
+                        'value' => []
+                    ]
+                ]
+            ],
+            NutritionBlocType::bloc5()->value => [
+                'type' => NutritionBlocType::bloc5(),
+                'content' => [
+                    'img' => [
+                        'dimensionsMax' => 'largeur 384,hauteur 260',
+                        'label' => 'Pictogramme Titre',
+                        'inputType' => InputType::image(),
+                        'alt' => '',
+                        'value' => ''
+                    ],
+                    'content' => [
+                        'label' => 'Contenu',
+                        'inputType' => InputType::text(),
+                        'value' => ''
+                    ]
+                ]
+            ],
+        ];
+    }
+
+    /**
+     * Get Label Template Data
+     *
+     * @return array
+     */
+    public static function getLabel(): array
+    {
+        return [
+            'bigText' => '',
+            'text' => '',
+            'fullLine' => false
+        ];
+    }
+
+    /**
+     * Get Dropdown Template Data
+     *
+     * @return array
+     */
+    public static function getDropdown(): array
+    {
+        return [
+            'title' => '',
+            'content' => ''
+        ];
+    }
+
+    private function setContent($content): void
+    {
+        $attrs = $this->attributes;
+        if (isset($attrs['content'])) {
+            unset($attrs['content']);
+        }
+        if (is_string($content)) {
+            $content = sprintf('{"header" : "%s"}', $content);
+        } else {
+            $content = $this->serializeContent($content);
+        }
+        $this->setRawAttributes(\array_merge_recursive(
+            $attrs,
+            ['content' => $content]
+        ));
+    }
+
+    // phpcs:ignore Generic.Metrics.CyclomaticComplexity.TooHigh
+    private function serializeContent(array $content): string
+    {
+        foreach ($content as $i => $bloc) {
+            foreach ($bloc['content'] as $o => $input) {
+                switch ($input['inputType']->value ?? $input['inputType']['value']) {
+                    case InputType::image()->value:
+                        $content[$i]['content'][$o]['value'] = Utils::storeImage($input['value'], $this->getTable());
+                        break;
+                    case InputType::imageArray()->value:
+                        foreach ($input['value'] as $k => $image) {
+                            $content[$i]['content'][$o]['value'][$k] = Utils::storeImage($image, $this->getTable());
+                        }
+                        break;
+                    case InputType::labelArray()->value:
+                        foreach ($input['value'] as $k => $label) {
+                            $content[$i]['content'][$o]['value'][$k] = \array_replace(
+                                static::getLabel(),
+                                $content[$i]['content'][$o]['value'][$k]
+                            );
+                        }
+                        break;
+                    case InputType::dropdownArray()->value:
+                        foreach ($input['value'] as $k => $label) {
+                            $content[$i]['content'][$o]['value'][$k] = \array_replace(
+                                static::getDropdown(),
+                                $content[$i]['content'][$o]['value'][$k]
+                            );
+                        }
+                        break;
+                    case InputType::boolean()->value:
+                    case InputType::text()->value:
+                    case InputType::string()->value:
+                        break;
+                    case InputType::url()->value:
+                        Utils::assertNoInternalUrls('content', $input['value']);
+                        break;
+                    default:
+                        throw new \Exception(sprintf(
+                            'Unknown input Type %s',
+                            $input['inputType']->label ?? $input['inputType']['label']
+                        ));
+                }
+            }
+        }
+        return json_encode($content);
+    }
+}

app/Models/Products.php

@@ -68,11 +68,6 @@ class Products extends Model
         return $this->hasOne(IncoNutritionalValues::class, 'product_id');
     }
 
-    public function balancedMenu()
-    {
-        return $this->hasOne(BalancedMenus::class, 'product_id');
-    }
-
     public function recipes()
     {
         return $this->belongsToMany(Recipes::class, 'recipes_products', 'product_id', 'recipe_id');

app/Providers/RouteServiceProvider.php

@@ -7,7 +7,6 @@ use App\Enums\GeneralConfigType;
 use App\Models\Actu;
 use App\Models\Ads;
 use App\Models\Articles;
-use App\Models\BalancedMenus;
 use App\Models\BreederPortrait;
 use App\Models\ConsumptionTimes;
 use App\Models\Engagement;
@@ -17,6 +16,7 @@ use App\Models\HomeSliderPictures;
 use App\Models\MeatTypes;
 use App\Models\Moments;
 use App\Models\NewsSliderPictures;
+use App\Models\NutritionPage;
 use App\Models\OCBBreeder;
 use App\Models\OCBContent;
 use App\Models\Products;
@@ -132,9 +132,6 @@ class RouteServiceProvider extends ServiceProvider
         Route::bind('recipe', function ($value) {
             return Recipes::where('id', $value)->orWhere('slug', $value)->firstOrFail();
         });
-        Route::bind('balanced_menu', function ($value) {
-            return BalancedMenus::where('id', $value)->firstOrFail();
-        });
         Route::bind('actu', function ($value) {
             return Actu::where('id', $value)->orWhere('slug', $value)->firstOrFail();
         });
@@ -147,6 +144,9 @@ class RouteServiceProvider extends ServiceProvider
         Route::bind('breederportrait', function ($value) {
             return BreederPortrait::where('id', $value)->firstOrFail();
         });
+        Route::bind('nutrition_page', function ($value) {
+            return NutritionPage::where('id', $value)->firstOrFail();
+        });
         Route::bind('ocb', function ($value) {
             return OCBContent::where('id', $value)->firstOrFail();
         });

build/ckeditor.js

@@ -0,0 +1,11 @@
+
+/*!
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	
+/******/ 	
+/******/ })()
+;

config/app.php

@@ -260,7 +260,9 @@ return [
         'InputType' => \App\Enums\InputType::class,
         'GeneralConfigType' => \App\Enums\GeneralConfigType::class,
         'Carbon' => 'Carbon\Carbon',
-        'RangeColor' => \App\Enums\RangeColor::class
+        'RangeColor' => \App\Enums\RangeColor::class,
+        'NutritionType' => \App\Enums\NutritionType::class,
+        'NutritionBlocType' => \App\Enums\NutritionBlocType::class
     ],
 
 ];

config/purifier.php

@@ -25,24 +25,23 @@ return [
     'cacheFileMode' => 0755,
     'settings'      => [
         'default' => [
+            'HTML.SafeIframe'          => true, // For iframes
+            'URI.SafeIframeRegexp'     => "%^(http://|https://|//)(vimeo.com)%",
             'HTML.Doctype'             => 'HTML 4.01 Transitional',
-            'HTML.Allowed'             => 'h1,h2,h3,h4,h5,h6,div,b,strong,i,em,u,a[href|title],ul,ol,li,p[style],br,span[style],img[width|height|alt|src]',
-            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align',
+            'HTML.Allowed'             => 'h1[style],h2[style],h3[style],h4[style],h5[style],h6[style],figure[class],oembed[url],div,b,strong,i,em,u,a[href|title],ul[style],ol[style],dl[style],li,p[style],br,span[style|class],img[width|height|alt|src],iframe[src|width|height|class|frameborder],table,thead,tbody,th,tr,td,hr',
+            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,font-family,text-decoration,padding-left,color,background-color,text-align,list-style-type',
             'AutoFormat.AutoParagraph' => false,
             'AutoFormat.RemoveEmpty'   => false,
             'AutoFormat.RemoveEmpty.RemoveNbsp' => false,
         ],
-        'test'    => [
-            'Attr.EnableID' => 'true',
-        ],
         "youtube" => [
             "HTML.SafeIframe"      => 'true',
-            "URI.SafeIframeRegexp" => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/)%",
+            "URI.SafeIframeRegexp" => "%^(http://|https://|//)(www.youtube.com/embed/|player.vimeo.com/video/|vimeo.com/)%",
         ],
         'custom_definition' => [
             'id'  => 'html5-definitions',
             'rev' => 1,
-            'debug' => false,
+            'debug' => true,
             'elements' => [
                 // http://developers.whatwg.org/sections.html
                 ['section', 'Block', 'Flow', 'Common'],
@@ -59,6 +58,7 @@ return [
                 // http://developers.whatwg.org/grouping-content.html
                 ['figure', 'Block', 'Optional: (figcaption, Flow) | (Flow, figcaption) | Flow', 'Common'],
                 ['figcaption', 'Inline', 'Flow', 'Common'],
+                ['oembed', 'Inline', 'Flow', 'Common'],
 
                 // http://developers.whatwg.org/the-video-element.html#the-video-element
                 ['video', 'Block', 'Optional: (source, Flow) | (Flow, source) | Flow', 'Common', [
@@ -95,13 +95,19 @@ return [
                 ['tr', 'width', 'Text'],
                 ['tr', 'height', 'Text'],
                 ['tr', 'border', 'Text'],
+                ['figure', 'class', 'Text'],
+                ['oembed', 'url', 'Text'],
+                ['span', 'style', 'Text'],
             ],
         ],
         'custom_attributes' => [
             ['a', 'target', 'Enum#_blank,_self,_target,_top'],
+            ['ol', 'style', 'Text'],
+            ['oembed', 'url', 'Text'],
         ],
         'custom_elements' => [
             ['u', 'Inline', 'Inline', 'Common'],
+            ['oembed', 'Inline', 'Inline', 'Common'],
         ],
     ],
 

config/refresh-sitemap.php

@@ -1,6 +1,5 @@
 <?php
 
-use App\Enums\BalancedMenuType;
 use App\Enums\EleveurOcbStatus;
 use App\Models\Articles;
 use App\Models\ConsumptionTimes;
@@ -20,7 +19,6 @@ return [
         '/le-club-des-gaulois/la-boutique',
         '/password/confirm',
         '/produit/from-menus',
-        '/cote-cuisine/sante-et-nutrition/menu-equilibre-j',
         '/la-marque/tracabilite/search',
         '/frame',
         '/map',
@@ -41,9 +39,6 @@ return [
         'products.meat-type' => [
             'slugMeatType' => [MeatTypes::class, 'slug']
         ],
-        'kitchen-side.health-nutrition.balanced-menu.menu' => [
-            'type' => [BalancedMenuType::class, 'type']
-        ],
         'club.infos.child' => [
             'publishedArticle' => [Articles::class, 'slug']
         ],

database/migrations/2021_06_29_124751_create_engagements_table.php

@@ -3,11 +3,8 @@
 use App\Enums\EngagementBlocType;
 use App\Enums\EngagementType;
 use App\Models\Engagement;
-use App\Models\MeatTypes;
 use Illuminate\Database\Migrations\Migration;
 use Illuminate\Database\Schema\Blueprint;
-use Illuminate\Http\UploadedFile;
-use Illuminate\Support\Facades\File;
 use Illuminate\Support\Facades\Schema;
 
 class CreateEngagementsTable extends Migration

database/migrations/2021_09_25_094347_create_nutrition_pages_table.php

@@ -0,0 +1,348 @@
+<?php
+
+use App\Enums\NutritionBlocType;
+use App\Enums\NutritionType;
+use App\Models\NutritionPage;
+use Faker\Factory as Faker;
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class CreateNutritionPagesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('nutrition_pages', function (Blueprint $table) {
+            $table->id();
+
+            /** \App\Enums\NutritionType */
+            $table->string('type');
+
+            $table->string('menutitle', 50);
+            $table->string('title');
+            $table->string('metaTitle');
+            $table->string('metaDescription');
+            $table->text('headerContent');
+
+            // contient un tableau de blocks (json)
+            $table->mediumText('content');
+
+            $table->timestamps();
+        });
+
+        $faker = Faker::create('fr_FR');
+
+        $pagePoultry = new NutritionPage([
+            'menutitle' => 'bienfaits nutritionnels de la volaille',
+            'title' => $faker->sentence(3),
+            'metaTitle' => $faker->sentence(6),
+            'metaDescription' => $faker->sentence(9),
+            'headerContent' => $faker->text(330),
+            'content' => [
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc1()->value],
+                    [
+                        'type' => NutritionBlocType::bloc1(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/poultry/le-gaulois-sante-nutrition-volaille-bon-pour-sante.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(7)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(620)
+                            ],
+                            'side' => [
+                                // image à gauche
+                                'value' => false
+                            ],
+                            'dropdownArray' => [
+                                'value' => (function () use ($faker) {
+                                    $out = [];
+                                    $max = rand(1, 3);
+                                    for ($i = 0; $i < $max; $i++) {
+                                        $out[] = [
+                                            'title' => $faker->sentence(8),
+                                            'content' =>
+                                            // phpcs:ignore Generic.Files.LineLength.TooLong
+                                            '<a href="#">En savoir + sur chenilles à pattes de poulets</a>&nbsp;'
+                                                . $faker->text(620)
+                                        ];
+                                    }
+                                    return $out;
+                                })()
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc1()->value],
+                    [
+                        'type' => NutritionBlocType::bloc1(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/poultry/le-gaulois-sante-nutrition-volaille-a-deguster-a-tous-les-ages.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(9)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(600)
+                            ],
+                            'side' => [
+                                // image à droite
+                                'value' => true
+                            ],
+                            'dropdownArray' => [
+                                'value' => (function () use ($faker) {
+                                    $out = [];
+                                    $max = rand(1, 3);
+                                    for ($i = 0; $i < $max; $i++) {
+                                        $out[] = [
+                                            'title' => $faker->sentence(8),
+                                            'content' =>
+                                            // phpcs:ignore Generic.Files.LineLength.TooLong
+                                            '<a href="#">En savoir + sur chenilles à pattes de poulets</a>&nbsp;'
+                                                . $faker->text(620)
+                                        ];
+                                    }
+                                    return $out;
+                                })()
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc3()->value],
+                    [
+                        'type' => NutritionBlocType::bloc3(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/poultry/le-gaulois-sante-nutrition-sandwich-poulet.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(9)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(600)
+                            ],
+                            'link' => [
+                                'status' => false,
+                                'newtab' => false,
+                                'text' => $faker->sentence(3),
+                                'value' => 'url'
+                            ],
+                            'side' => [
+                                // image à gauche
+                                'value' => false
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc4()->value],
+                    [
+                        'type' => NutritionBlocType::bloc4(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/poultry/le-gaulois-sante-nutrition-facile-a-cuisiner.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(9)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(750)
+                            ],
+                            'dropdownArray' => [
+                                'value' => (function () use ($faker) {
+                                    $out = [];
+                                    $max = rand(1, 3);
+                                    for ($i = 0; $i < $max; $i++) {
+                                        $out[] = [
+                                            'title' => $faker->sentence(8),
+                                            'content' =>
+                                            // phpcs:ignore Generic.Files.LineLength.TooLong
+                                            '<a href="#">En savoir + sur chenilles à pattes de poulets</a>&nbsp;'
+                                                . $faker->text(620)
+                                        ];
+                                    }
+                                    return $out;
+                                })()
+                            ]
+                        ]
+                    ]
+                )
+            ]
+        ]);
+
+        $pagePoultry->type = NutritionType::poultry();
+        $pagePoultry->saveOrFail();
+
+        $pageQuality = new NutritionPage([
+            'menutitle' => 'Qualité nutritionnelle : le gaulois s’engage',
+            'title' => $faker->words(3, true),
+            'metaTitle' => $faker->words(6, true),
+            'metaDescription' => $faker->words(9, true),
+            'headerContent' => $faker->text(330),
+            'content' => [
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc1()->value],
+                    [
+                        'type' => NutritionBlocType::bloc1(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/quality/poele.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(7)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(620)
+                            ],
+                            'side' => [
+                                // image à droite
+                                'value' => true
+                            ],
+                            'dropdownArray' => [
+                                'value' => (function () use ($faker) {
+                                    $out = [];
+                                    $max = rand(2, 3);
+                                    for ($i = 0; $i < $max; $i++) {
+                                        $out[] = [
+                                            'title' => $faker->sentence(8),
+                                            'content' =>
+                                            // phpcs:ignore Generic.Files.LineLength.TooLong
+                                            '<a href="#">En savoir + sur chenilles à pattes de poulets</a>&nbsp;'
+                                                . $faker->text(620)
+                                        ];
+                                    }
+                                    return $out;
+                                })()
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc2()->value],
+                    [
+                        'type' => NutritionBlocType::bloc2(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/quality/cordon.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(7)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(620)
+                            ],
+                            'labels' => [
+                                'value' => (function () use ($faker) {
+                                    $out = [];
+                                    $max = rand(1, 3);
+                                    for ($i = 0; $i < $max; $i++) {
+                                        $out[] = [
+                                            'bigText' => $faker->sentence(4),
+                                            'text' => $faker->sentence(2)
+                                        ];
+                                    }
+                                    return $out;
+                                })()
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc3()->value],
+                    [
+                        'type' => NutritionBlocType::bloc3(),
+                        'content' => [
+                            'img' => [
+                                'alt' => '',
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/quality/rayon.jpg'
+                                ))
+                            ],
+                            'title' => [
+                                'value' => $faker->sentence(9)
+                            ],
+                            'content' => [
+                                'value' => $faker->text(600)
+                            ],
+                            'link' => [
+                                'status' => true,
+                                'newtab' => false,
+                                'text' => $faker->sentence(3),
+                                'value' => 'url'
+                            ],
+                            'side' => [
+                                // image à droite
+                                'value' => true
+                            ]
+                        ]
+                    ]
+                ),
+                array_replace_recursive(
+                    NutritionPage::getBlocks()[NutritionBlocType::bloc5()->value],
+                    [
+                        'type' => NutritionBlocType::bloc5(),
+                        'content' => [
+                            'img' => [
+                                'value' => new SplFileInfo(resource_path(
+                                    // phpcs:ignore Generic.Files.LineLength.TooLong
+                                    'assets/images/sante-nutrition/quality/cuisine.jpg'
+                                ))
+                            ],
+                            'content' => [
+                                'value' => $faker->text(600)
+                            ]
+                        ]
+                    ]
+                )
+            ]
+        ]);
+        $pageQuality->type = NutritionType::quality();
+        $pageQuality->saveOrFail();
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('nutrition_pages');
+    }
+}

database/migrations/2021_09_29_160949_drop_balanced_menus.php

@@ -0,0 +1,46 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class DropBalancedMenus extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::drop('balanced_menus');
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::create('balanced_menus', function (Blueprint $table) {
+            $table->id();
+
+            //* \App\Enums\BalancedMenuType
+            $table->integer('type')->default(0);
+
+            $table->string('picture');
+
+            $table->text('entree');
+            $table->text('meal');
+            $table->text('dessert');
+
+            $table->boolean('status')->default(false);
+
+            $table->timestamps();
+
+            $table->foreignId('product_id');
+            $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
+        });
+    }
+}

package.json

@@ -16,6 +16,7 @@
         "bs-custom-file-input": "^1.3.4",
         "clean-webpack-plugin": "^3.0.0",
         "cross-env": "^7.0.3",
+        "css-loader": "^5.2.7",
         "del-cli": "^3.0.1",
         "fslightbox": "^3.3.0",
         "jquery": "^3.6.0",
@@ -23,18 +24,22 @@
         "laravel-mix-polyfill": "^3.0.1",
         "lodash": "^4.17.21",
         "popper.js": "^1.16.1",
+        "postcss": "^8.3.8",
+        "postcss-loader": "^4.3.0",
+        "raw-loader": "^4.0.2",
         "resolve-url-loader": "^3.1.4",
         "sass": "1.32.*",
         "sass-loader": "^8.0.2",
+        "style-loader": "^2.0.0",
         "sweetalert2": "^11.1.5",
         "vue": "^2.6.14",
         "vue-loader": "^15.9.8",
         "vue-nestable": "^2.6.0",
-        "vue-template-compiler": "^2.6.14"
+        "vue-template-compiler": "^2.6.14",
+        "webpack": "^5.56.0",
+        "webpack-cli": "^4.8.0"
     },
     "dependencies": {
-        "@ckeditor/ckeditor5-build-classic": "^24.0.0",
-        "@ckeditor/ckeditor5-vue2": "^1.0.5",
         "@fancyapps/fancybox": "^3.5.7",
         "animate.css": "^3.7.2",
         "detect-element-overflow": "^1.2.0",

resources/js/app.js

@@ -14,7 +14,6 @@ $(document).ready(function () {
 })
 
 window.Vue = require('vue/dist/vue.min.js');
-import CKEditor from '@ckeditor/ckeditor5-vue2';
 import VueSelectImage from 'vue-select-image';
 // ES6 Modules or TypeScript
 import Swal from 'sweetalert2';
@@ -50,7 +49,6 @@ $(document).ready(function () {
     })
 })
 
-Vue.use( CKEditor );
 Vue.use( VueSelectImage )
 
 /**
@@ -78,6 +76,6 @@ Vue.component('ranges-subranges', require('./components/bo/RangesSubRangesCompon
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-const app = new Vue({
-    el: '#app',
-});
+for (let el of document.getElementsByClassName('vueComponent')) {
+    new Vue({ el: el });
+}

resources/js/components/bo/CKEditorComponent.vue

@@ -1,12 +1,13 @@
 <template>
     <div>
-        <ckeditor :editor="editor" v-model="dbtext"></ckeditor>
-        <input :id="id" type="hidden" :name="name" :value="dbtext" :required="required ? true : false">
+        <div ref="ckeditor"></div>
+        <input :id="id" class="form-control" type="hidden" :name="name" :value="dbtext" :required="required ? true : false">
     </div>
 </template>
 
 <script>
-    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+    import './../../vendor/ckeditor/build/ckeditor'
+    import { CKUploadAdaptater } from '../../front/CkUploadAdaptater'
 
     export default {
         props: [
@@ -15,9 +16,68 @@
             'dbtext',
             'required',
         ],
+        mounted() {
+            let self = this
+            ClassicEditor
+                .create(this.$refs.ckeditor, {
+                    extraPlugins: [(editor) => {
+                        editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
+                            // Configure the URL to the upload script in your back-end here!
+                            return new CKUploadAdaptater(loader);
+                        }
+                    }],
+                    mediaEmbed: {
+                        previewsInData: false,
+                        removeProviders: [
+                            'instagram', 'twitter', 'googleMaps', 'flickr', 'facebook',
+                            'dailymotion', 'spotify', 'youtube'
+                        ]
+                    },
+                    toolbar: {
+                        items: [
+                            'heading', '|',
+                            'bold','italic','underline','link','bulletedList','numberedList','|',
+                            'outdent','indent','alignment','|',
+                            'imageUpload','blockQuote','insertTable','mediaEmbed','|',
+                            'fontColor','fontFamily','fontSize','horizontalLine','|',
+                            'removeFormat','|',
+                            'undo','redo'
+                        ]
+                    },
+                    language: 'fr',
+                    image: {
+                        toolbar: [
+                            'imageTextAlternative',
+                            'imageStyle:inline',
+                            'imageStyle:block',
+                            'imageStyle:side',
+                            'linkImage'
+                        ]
+                    },
+                    stylesSet: [
+                        {
+                            name: 'test',
+                            element: 'span',
+                            attributes: { 'class': 'text-danger' }
+                        }
+                    ]
+                })
+                .then( editor => {
+                    editor.setData(this.dbtext)
+                    this.editor = editor.model.document.on('change:data', () => {
+                        self.$set(self, 'dbtext', editor.getData())
+                    })
+                })
+                .catch( error => {
+                    console.error( 'Oops, something went wrong!' );
+                    console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
+                    console.warn( 'Build id: x0tjc6omqq4d-iydt761tuj51' );
+                    console.error( error );
+                });
+        },
         data() {
             return {
-                editor: ClassicEditor
+                editor: null
             }
         }
     }

resources/js/components/bo/MomentStratesComponent.vue

@@ -59,7 +59,7 @@
 </template>
 
 <script>
-    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
+    // import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
     export default {
         mounted() {
@@ -71,12 +71,12 @@
             'dbdatas',
         ],
         data() {
-          return {
-              datas: [],
-              response: null,
-              processing: false,
-              editor: ClassicEditor
-          }
+            return {
+                datas: [],
+                response: null,
+                processing: false,
+                editor: null
+            }
         },
         watch: {
 

resources/js/front/CkUploadAdaptater.js

@@ -0,0 +1,55 @@
+import axios from 'axios';
+
+class CKUploadAdaptater {
+    constructor(loader) {
+        // The file loader instance to use during the upload.
+        this.loader = loader;
+    }
+
+    // Starts the upload process.
+    upload() {
+        return this.loader.file
+            .then(file => new Promise((resolve, reject) => {
+                this._initRequest();
+                this._sendRequest(file, resolve, reject);
+            }));
+    }
+
+    // Aborts the upload process.
+    abort() {
+        if (this.cancel) {
+            this.cancel.abort();
+        }
+    }
+
+    // Initializes the XMLHttpRequest object using the URL passed to the constructor.
+    _initRequest() {
+        this.cancel = axios.CancelToken.source();
+        this.route = require('../modules/route').default.methods.route('bo.upload')
+    }
+
+    // Prepares the data and sends the request.
+    _sendRequest(file, resolve, reject) {
+        // Prepare the form data.
+        const data = new FormData();
+        data.append('upload', file);
+        axios.post(this.route, data, {
+            headers: {
+                'Content-Type': 'multipart/form-data'
+            },
+            onUploadProgress: (evt) => {
+                this.loader.uploadTotal = evt.total;
+                this.loader.uploaded = evt.loaded;
+            }
+        }).then((response) => {
+            resolve({
+                default: response.data.url
+            })
+        }).catch((error) => {
+            console.error(error);
+            reject('Le fichier à été marbré')
+        })
+    }
+}
+
+export { CKUploadAdaptater }

resources/js/main.js

@@ -12,16 +12,23 @@ window.Toastify = Toastify;
 window.tns = tns;
 window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
 
-/**
- * The following block of code may be used to automatically register your
- * Vue components. It will recursively scan this directory for the Vue
- * components and automatically register them with their "basename".
- *
- * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
- */
+// cookie notice
+import { LdcwebCn } from "./front/ldcweb-cn.js";
+window.LdcwebCn = LdcwebCn;
 
-// const files = require.context('./', true, /\.vue$/i)
-// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+// ProgressBar de l'inscription
+require("./front/functions.js");
+__Gaul.detectElementOverflow = detectElementOverflow;
+
+const pages = require.context("./pages", true, /\.js$/i);
+const ignorePages = ["history.js", "onepage.js"];
+pages.keys().map(key => {
+    key = key.replace("./", "");
+    if (ignorePages.includes(key)) {
+        return;
+    }
+    require(`./pages/${key}`);
+});
 
 let vueOptions = {
     el: "#app"
@@ -72,24 +79,6 @@ Vue.filter('str_limit', function (value, size) {
     return value.substr(0, size) + '...';
 });
 
-// cookie notice
-import { LdcwebCn } from "./front/ldcweb-cn.js";
-window.LdcwebCn = LdcwebCn;
-
-// ProgressBar de l'inscription
-require("./front/functions.js");
-__Gaul.detectElementOverflow = detectElementOverflow;
-
-const pages = require.context("./pages", true, /\.js$/i);
-const ignorePages = ["history.js", "onepage.js"];
-pages.keys().map(key => {
-    key = key.replace("./", "");
-    if (ignorePages.includes(key)) {
-        return;
-    }
-    require(`./pages/${key}`);
-});
-
 // Alias for Vuejs
 Vue.prototype.__Gaul = window.__Gaul;
 Vue.prototype.scrollTo = window.scrollTo;

resources/js/pages/balanced-menu.js

@@ -1,201 +0,0 @@
-if (document.querySelector('.content.menu')) {
-    function hide(el) {
-        el.style.height = "0px";
-    };
-    function slideUp(el) {
-        el.style.transition = "all 2s ease-in-out";
-        el.style.height = "0px";
-    };
-    function slideDown(el) {
-        el.style.transition = "all 2s ease-in-out";
-        el.style.height = 'inherit';
-    };
-    var menuData = {
-        tnsDefault: {
-            container: '',
-            items: 1.5,
-            controls: false,
-            nav: false,
-            center: true,
-            mouseDrag: true,
-            preventScrollOnTouch: 'auto',
-            prevButton: null,
-            nextButton: null,
-            responsive: {
-                350: {
-                    items: 2.8
-                },
-                500: {
-                    items: 3.6
-                },
-                768: {
-                    controls: true
-                },
-                1024: {
-                    items: 4,
-                }
-            },
-            events: {
-                touchStart: function (info) {
-                    console.log('touch')
-                    let tns = this;
-                    let el = info.event.target.classList.contains('tns-item') ? info.event.target : info.event.target.parentElement;
-                    el = el.classList.contains('tns-item') ? el : el.parentElement;
-                    let container = el.parentElement.parentElement;
-                    let overflow = __Gaul.detectElementOverflow(el, container);
-                    setTimeout(function () {
-                        if (overflow.collidedLeft) {
-                            tns.goTo('prev');
-                        }
-                        if (overflow.collidedRight) {
-                            tns.goTo('next');
-                        }
-                    }, 200)
-                }
-            }
-        },
-        addTns: function (selector) {
-            menuData.tnsDefault.container = selector;
-            let slider = tns(menuData.tnsDefault);
-            for (let eventName in menuData.tnsDefault.events) {
-                slider.events.on(eventName, menuData.tnsDefault.events[eventName].bind(slider));
-            }
-        },
-        genre: null,
-        productID: null,
-        productItem: null,
-        menuIsShown: false,
-        menuNotFound: false,
-        getProducts: function (callback) {
-            axios.get(window.product_from_menu)
-                .then(function (response) {
-                    callback(response.data);
-                }).catch(function (error) {
-                    console.log(error);
-                });
-        },
-        getMenu: function (callback) {
-            axios.get(window.balanced_menu_url.replace('#genre#', menuData.genre).replace('#productID#', menuData.productID))
-                .then(function (response) {
-                    callback(response.data);
-                }).catch(function (error) {
-                    if (error.response.status == 404) {
-                        callback(null)
-                    } else {
-                        console.log(error)
-                    }
-                });
-        },
-        setActivableItem: function (items, callback) {
-            for (let item of document.querySelectorAll(items)) {
-                item.onclick = function (e) {
-                    for (let item of document.querySelectorAll(items)) {
-                        item.classList.remove('active');
-                    }
-                    item.classList.add('active');
-                    callback(item);
-                };
-            }
-        },
-        setMenuInfo: function (item) {
-            let nomenu = document.getElementById('nomenu'),
-                menu = document.getElementById('menuSection'),
-                svg = menu.querySelector('svg'),
-                figure = menu.querySelector('figure'),
-                img = figure.querySelector('img'),
-                details = menu.querySelector('.details'),
-                entree = menu.querySelector('.entree'),
-                plat = menu.querySelector('.plat'),
-                dessert = menu.querySelector('.dessert');
-
-            menu.classList.add('show'); // For loading svg
-            img.setAttribute('src', '');
-            svg.classList.remove('fadeOut');
-            svg.classList.add('animated');
-            svg.classList.add('fadeIn');
-            figure.classList.remove('fadeInLeft');
-            figure.classList.add('fadeOut');
-            details.classList.remove('fadeInUp');
-            details.classList.add('fadeOut');
-
-            menuData.productID = item.dataset.id;
-            menuData.getMenu(function (balancedmenu) {
-                if (!balancedmenu) {
-                    nomenu.classList.remove('display-none')
-                    menu.classList.add('display-none')
-                    menuData.menuNotFound = true;
-                } else {
-                    nomenu.classList.add('display-none')
-                    menu.classList.remove('display-none')
-                    img.setAttribute('src', balancedmenu.picture.indexOf('/') !== 0 ? '/' + balancedmenu.picture : balancedmenu.picture);
-                    entree.innerHTML = balancedmenu.entree;
-                    plat.innerHTML = balancedmenu.meal;
-                    dessert.innerHTML = balancedmenu.dessert;
-                    menuData.menuNotFound = false;
-                }
-                svg.classList.remove('fadeIn');
-                svg.classList.add('fadeOut');
-                figure.classList.remove('fadeOut')
-                figure.classList.add('fadeInLeft');
-                details.classList.remove('fadeOut')
-                details.classList.add('fadeInUp');
-                menuData.menuIsShown = true;
-            });
-        }
-    };
-
-    // Hide products and menu
-    document.getElementById('productSection')
-    document.getElementById('menuSection')
-
-    // Set profiles carousel
-    menuData.tnsDefault.prevButton = document.querySelector('#profiles .control.left');
-    menuData.tnsDefault.nextButton = document.querySelector('#profiles .control.right');
-    // menuData.addTns('#profiles div');
-
-    // Click on genres
-    menuData.setActivableItem('.genreBtn', function (item) {
-        menuData.genre = item.dataset.genre;
-        item.classList.add('active');
-        document.getElementById('productSection').classList.add('show')
-        if (menuData.menuIsShown) {
-            menuData.setMenuInfo(menuData.productItem);
-            if (!menuData.menuNotFound) {
-                __Gaul.scrollToContent('menuSection', 110)
-            } else {
-                __Gaul.scrollToContent('nomenu', 110)
-            }
-        } else {
-            __Gaul.scrollToContent('productSection', 110)
-        }
-    });
-
-    // Set Time out to let JS parse inline vars in push scripts page
-    setTimeout(function () {
-        // Get all products on page load
-        // Set product carousel
-        // Set product click events
-        menuData.getProducts(function (data) {
-            let template = document.querySelector('#templates .produitBtn');
-            let container = document.querySelector('#products .produits');
-            document.querySelector('#products svg').remove();
-            for (let product of data) {
-                let newProd = template.cloneNode(true);
-                let img = newProd.querySelector('img');
-                let p = newProd.querySelector('p');
-                newProd.dataset.id = product.id;
-                img.setAttribute('src', product.picture.indexOf('/') !== 0 ? '/' + product.picture : product.picture);
-                p.textContent = product.name;
-                container.appendChild(newProd);
-            }
-            menuData.tnsDefault.prevButton = document.querySelector('#products .control.left');
-            menuData.tnsDefault.nextButton = document.querySelector('#products .control.right');
-            menuData.addTns(container);
-            menuData.setActivableItem('.produitBtn', function (item) {
-                menuData.productItem = item;
-                menuData.setMenuInfo(item);
-                __Gaul.scrollToContent('menuSection', 110)
-            });
-        });
-    }, 600);
-}

resources/js/vendor/ckeditor/src/ckeditor.js

@@ -26,6 +26,9 @@ import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage.js';
 import List from '@ckeditor/ckeditor5-list/src/list.js';
 import ListStyle from '@ckeditor/ckeditor5-list/src/liststyle.js';
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed.js';
+import MediaEmbedEditing from '@ckeditor/ckeditor5-media-embed/src/mediaembedediting';
+import MediaEmbedUI from '@ckeditor/ckeditor5-media-embed/src/mediaembedui';
+import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph.js';
 import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice.js';
 import RemoveFormat from '@ckeditor/ckeditor5-remove-format/src/removeformat.js';
@@ -61,7 +64,10 @@ Editor.builtinPlugins = [
 	LinkImage,
 	List,
 	ListStyle,
-	MediaEmbed,
+    MediaEmbed,
+    MediaEmbedEditing,
+    MediaEmbedUI,
+    Widget,
 	Paragraph,
 	PasteFromOffice,
 	RemoveFormat,

resources/sass/_variables.scss

@@ -84,6 +84,8 @@ $body-bg: $color1;
 // Products
 $filterSubRangesBg: #E6D6C7;
 
+// HEALTH NUTRITION
+$healthColor: #ABCCB7;
 
 // Bourse
 $gives: #CF1D40;

resources/sass/app.scss

@@ -14,3 +14,4 @@ $custom-file-text: (
 // Custom
 @import 'app-icon';
 @import "front/modules/patterns";
+@import "front/modules/ckEditorContent";

resources/sass/front/_body.scss

@@ -24,13 +24,6 @@ html {
             background-color: $white;
         }
 
-        & p {
-            color: $color5;
-            font-size: 1.5em;
-            font-family: 'Catamaran-Regular';
-            line-height: 125%;
-        }
-
         .quote {
             font-family: 'CreamyScriptRegular';
             color: $color5;

resources/sass/front/_sub_header.scss

@@ -1953,6 +1953,7 @@
         & .title {
             margin: 10em 0 0 !important;
             & div {
+                display: block;
                 font-size: 6em !important;
             }
         }

resources/sass/front/modules/_ckEditorContent.scss

@@ -0,0 +1,594 @@
+// CKeditor fix in alert
+.ck-editor__main {
+    color: initial;
+}
+
+// CK Content
+.ck-content {
+    // reset from body general styles
+    strong {
+        font-family: inherit;
+    }
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: inherit;
+        font-family: inherit;
+    }
+    h1 {
+        @include min-width($tablet) {
+            font-size: inherit;
+        }
+    }
+    h2 {
+        @include min-width($tablet) {
+            font-size: inherit;
+        }
+    }
+    h3 {
+        @include min-width($tablet) {
+            font-size: inherit;
+        }
+    }
+    h4 {
+        @include min-width($tablet) {
+            font-size: inherit;
+        }
+    }
+
+    h6 {
+        font-family: inherit;
+    }
+
+    // nunito headings
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    .h1,
+    .h2,
+    .h3,
+    .h4,
+    .h5,
+    .h6 {
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+        line-height: 1.2;
+    }
+
+    h1,
+    .h1 {
+        font-size: 2.25rem;
+    }
+
+    h2,
+    .h2 {
+        font-size: 1.8rem;
+    }
+
+    h3,
+    .h3 {
+        font-size: 1.575rem;
+    }
+
+    h4,
+    .h4 {
+        font-size: 1.35rem;
+    }
+
+    h5,
+    .h5 {
+        font-size: 1.125rem;
+    }
+
+    h6,
+    .h6 {
+        font-size: 0.9rem;
+    }
+
+    // nunito hr
+    hr {
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        border: 0;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    p {
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+        text-align: left;
+    }
+
+    ol,
+    ul,
+    dl {
+        list-style: inherit;
+        margin-top: 0;
+        margin-bottom: 1rem;
+        padding-left: 2.666rem + 0.539rem;
+    }
+    ol {
+        list-style: decimal;
+    }
+
+    ul ul {
+        list-style: circle;
+    }
+
+    .text-huge {
+        font-size: 1.8em;
+    }
+
+    .text-big {
+        font-size: 1.4em;
+    }
+
+    .text-small {
+        font-size: 0.85em;
+    }
+
+    .text-tiny {
+        font-size: 0.7em;
+    }
+
+    blockquote {
+        overflow: hidden;
+        padding-right: 1.5em;
+        padding-left: 1.5em;
+        margin-left: 0;
+        margin-right: 0;
+        font-style: italic;
+        border-left: 5px solid #ccc;
+    }
+
+    .image {
+        display: table;
+        clear: both;
+        text-align: center;
+        margin: 0.9em auto;
+        min-width: 50px;
+    }
+
+    .image-inline {
+        display: inline-flex;
+        max-width: 100%;
+        align-items: flex-start;
+    }
+
+    .image.image_resized {
+        max-width: 100%;
+        display: block;
+        box-sizing: border-box;
+    }
+
+    img {
+        object-fit: contain;
+        width: 100%;
+    }
+
+    .image-style-side {
+        float: right;
+    }
+
+    /*
+        * CKEditor 5 (v30.0.0) content styles.
+        * Generated on Wed, 29 Sep 2021 11:41:17 GMT.
+        * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
+        */
+
+    :root {
+        --ck-color-image-caption-background: hsl(0, 0%, 97%);
+        --ck-color-image-caption-text: hsl(0, 0%, 20%);
+        --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
+        --ck-color-mention-text: hsl(341, 100%, 30%);
+        --ck-color-table-caption-background: hsl(0, 0%, 97%);
+        --ck-color-table-caption-text: hsl(0, 0%, 20%);
+        --ck-highlight-marker-blue: hsl(201, 97%, 72%);
+        --ck-highlight-marker-green: hsl(120, 93%, 68%);
+        --ck-highlight-marker-pink: hsl(345, 96%, 73%);
+        --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
+        --ck-highlight-pen-green: hsl(112, 100%, 27%);
+        --ck-highlight-pen-red: hsl(0, 85%, 49%);
+        --ck-image-style-spacing: 1.5em;
+        --ck-inline-image-style-spacing: calc(
+            var(--ck-image-style-spacing) / 2
+        );
+        --ck-todo-list-checkmark-size: 16px;
+    }
+
+    /* ckeditor5-image/theme/imagecaption.css */
+    .image > figcaption {
+        display: table-caption;
+        caption-side: bottom;
+        word-break: break-word;
+        color: var(--ck-color-image-caption-text);
+        background-color: var(--ck-color-image-caption-background);
+        padding: 0.6em;
+        font-size: 0.75em;
+        outline-offset: -1px;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-block-align-left,
+    .image-style-block-align-right {
+        max-width: calc(100% - var(--ck-image-style-spacing));
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-align-left,
+    .image-style-align-right {
+        clear: none;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-side {
+        float: right;
+        margin-left: var(--ck-image-style-spacing);
+        max-width: 50%;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-align-left {
+        float: left;
+        margin-right: var(--ck-image-style-spacing);
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-align-center {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-align-right {
+        float: right;
+        margin-left: var(--ck-image-style-spacing);
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-block-align-right {
+        margin-right: 0;
+        margin-left: auto;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-style-block-align-left {
+        margin-left: 0;
+        margin-right: auto;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    p + .image-style-align-left,
+    p + .image-style-align-right,
+    p + .image-style-side {
+        margin-top: 0;
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-inline.image-style-align-left,
+    .image-inline.image-style-align-right {
+        margin-top: var(--ck-inline-image-style-spacing);
+        margin-bottom: var(--ck-inline-image-style-spacing);
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-inline.image-style-align-left {
+        margin-right: var(--ck-inline-image-style-spacing);
+    }
+    /* ckeditor5-image/theme/imagestyle.css */
+    .image-inline.image-style-align-right {
+        margin-left: var(--ck-inline-image-style-spacing);
+    }
+    /* ckeditor5-font/theme/fontsize.css */
+    .text-tiny {
+        font-size: 0.7em;
+    }
+    /* ckeditor5-font/theme/fontsize.css */
+    .text-small {
+        font-size: 0.85em;
+    }
+    /* ckeditor5-font/theme/fontsize.css */
+    .text-big {
+        font-size: 1.4em;
+    }
+    /* ckeditor5-font/theme/fontsize.css */
+    .text-huge {
+        font-size: 1.8em;
+    }
+    /* ckeditor5-code-block/theme/codeblock.css */
+    pre {
+        padding: 1em;
+        color: hsl(0, 0%, 20.8%);
+        background: hsla(0, 0%, 78%, 0.3);
+        border: 1px solid hsl(0, 0%, 77%);
+        border-radius: 2px;
+        text-align: left;
+        direction: ltr;
+        tab-size: 4;
+        white-space: pre-wrap;
+        font-style: normal;
+        min-width: 200px;
+    }
+    /* ckeditor5-code-block/theme/codeblock.css */
+    pre code {
+        background: unset;
+        padding: 0;
+        border-radius: 0;
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .marker-yellow {
+        background-color: var(--ck-highlight-marker-yellow);
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .marker-green {
+        background-color: var(--ck-highlight-marker-green);
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .marker-pink {
+        background-color: var(--ck-highlight-marker-pink);
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .marker-blue {
+        background-color: var(--ck-highlight-marker-blue);
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .pen-red {
+        color: var(--ck-highlight-pen-red);
+        background-color: transparent;
+    }
+    /* ckeditor5-highlight/theme/highlight.css */
+    .pen-green {
+        color: var(--ck-highlight-pen-green);
+        background-color: transparent;
+    }
+    /* ckeditor5-image/theme/image.css */
+    .image {
+        display: table;
+        clear: both;
+        text-align: center;
+        margin: 0.9em auto;
+        min-width: 50px;
+    }
+    /* ckeditor5-image/theme/image.css */
+    .image img {
+        display: block;
+        margin: 0 auto;
+        max-width: 100%;
+        min-width: 100%;
+    }
+    /* ckeditor5-image/theme/image.css */
+    .image-inline {
+        /*
+     * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
+     * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
+     * This strange behavior does not happen with inline-flex.
+     */
+        display: inline-flex;
+        max-width: 100%;
+        align-items: flex-start;
+    }
+    /* ckeditor5-image/theme/image.css */
+    .image-inline picture {
+        display: flex;
+    }
+    /* ckeditor5-image/theme/image.css */
+    .image-inline picture,
+    .image-inline img {
+        flex-grow: 1;
+        flex-shrink: 1;
+        max-width: 100%;
+    }
+    /* ckeditor5-image/theme/imageresize.css */
+    .image.image_resized {
+        max-width: 100%;
+        display: block;
+        box-sizing: border-box;
+    }
+    /* ckeditor5-image/theme/imageresize.css */
+    .image.image_resized img {
+        width: 100%;
+    }
+    /* ckeditor5-image/theme/imageresize.css */
+    .image.image_resized > figcaption {
+        display: block;
+    }
+    /* ckeditor5-block-quote/theme/blockquote.css */
+    blockquote {
+        overflow: hidden;
+        padding-right: 1.5em;
+        padding-left: 1.5em;
+        margin-left: 0;
+        margin-right: 0;
+        font-style: italic;
+        border-left: solid 5px hsl(0, 0%, 80%);
+    }
+    /* ckeditor5-block-quote/theme/blockquote.css */
+    .ck-content[dir="rtl"] blockquote {
+        border-left: 0;
+        border-right: solid 5px hsl(0, 0%, 80%);
+    }
+    /* ckeditor5-basic-styles/theme/code.css */
+    code {
+        background-color: hsla(0, 0%, 78%, 0.3);
+        padding: 0.15em;
+        border-radius: 2px;
+    }
+    /* ckeditor5-table/theme/table.css */
+    .table {
+        margin: 0.9em auto;
+        display: table;
+    }
+    /* ckeditor5-table/theme/table.css */
+    .table table {
+        border-collapse: collapse;
+        border-spacing: 0;
+        width: 100%;
+        height: 100%;
+        border: 1px double hsl(0, 0%, 70%);
+    }
+    /* ckeditor5-table/theme/table.css */
+    .table table td,
+    .table table th {
+        min-width: 2em;
+        padding: 0.4em;
+        border: 1px solid hsl(0, 0%, 75%);
+    }
+    /* ckeditor5-table/theme/table.css */
+    .table table th {
+        font-weight: bold;
+        background: hsla(0, 0%, 0%, 5%);
+    }
+    /* ckeditor5-table/theme/table.css */
+    .ck-content[dir="rtl"] .table th {
+        text-align: right;
+    }
+    /* ckeditor5-table/theme/table.css */
+    .ck-content[dir="ltr"] .table th {
+        text-align: left;
+    }
+    /* ckeditor5-table/theme/tablecaption.css */
+    .table > figcaption {
+        display: table-caption;
+        caption-side: top;
+        word-break: break-word;
+        text-align: center;
+        color: var(--ck-color-table-caption-text);
+        background-color: var(--ck-color-table-caption-background);
+        padding: 0.6em;
+        font-size: 0.75em;
+        outline-offset: -1px;
+    }
+    /* ckeditor5-page-break/theme/pagebreak.css */
+    .page-break {
+        position: relative;
+        clear: both;
+        padding: 5px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    /* ckeditor5-page-break/theme/pagebreak.css */
+    .page-break::after {
+        content: "";
+        position: absolute;
+        border-bottom: 2px dashed hsl(0, 0%, 77%);
+        width: 100%;
+    }
+    /* ckeditor5-page-break/theme/pagebreak.css */
+    .page-break__label {
+        position: relative;
+        z-index: 1;
+        padding: 0.3em 0.6em;
+        display: block;
+        text-transform: uppercase;
+        border: 1px solid hsl(0, 0%, 77%);
+        border-radius: 2px;
+        font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
+        font-size: 0.75em;
+        font-weight: bold;
+        color: hsl(0, 0%, 20%);
+        background: hsl(0, 0%, 100%);
+        box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+    /* ckeditor5-media-embed/theme/mediaembed.css */
+    .media {
+        clear: both;
+        margin: 0.9em 0;
+        display: block;
+        min-width: 15em;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list {
+        list-style: none;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list li {
+        margin-bottom: 5px;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list li .todo-list {
+        margin-top: 5px;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label > input {
+        -webkit-appearance: none;
+        display: inline-block;
+        position: relative;
+        width: var(--ck-todo-list-checkmark-size);
+        height: var(--ck-todo-list-checkmark-size);
+        vertical-align: middle;
+        border: 0;
+        left: -25px;
+        margin-right: -15px;
+        right: 0;
+        margin-left: 0;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label > input::before {
+        display: block;
+        position: absolute;
+        box-sizing: border-box;
+        content: "";
+        width: 100%;
+        height: 100%;
+        border: 1px solid hsl(0, 0%, 20%);
+        border-radius: 2px;
+        transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background,
+            250ms ease-in-out border;
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label > input::after {
+        display: block;
+        position: absolute;
+        box-sizing: content-box;
+        pointer-events: none;
+        content: "";
+        left: calc(var(--ck-todo-list-checkmark-size) / 3);
+        top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
+        width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
+        height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
+        border-style: solid;
+        border-color: transparent;
+        border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8)
+            calc(var(--ck-todo-list-checkmark-size) / 8) 0;
+        transform: rotate(45deg);
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label > input[checked]::before {
+        background: hsl(126, 64%, 41%);
+        border-color: hsl(126, 64%, 41%);
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label > input[checked]::after {
+        border-color: hsl(0, 0%, 100%);
+    }
+    /* ckeditor5-list/theme/todolist.css */
+    .todo-list .todo-list__label .todo-list__label__description {
+        vertical-align: middle;
+    }
+    /* ckeditor5-language/theme/language.css */
+    span[lang] {
+        font-style: italic;
+    }
+    /* ckeditor5-horizontal-line/theme/horizontalline.css */
+    hr {
+        margin: 15px 0;
+        height: 4px;
+        background: hsl(0, 0%, 87%);
+        border: 0;
+    }
+    /* ckeditor5-mention/theme/mention.css */
+    .mention {
+        background: var(--ck-color-mention-background);
+        color: var(--ck-color-mention-text);
+    }
+    @media print {
+        /* ckeditor5-page-break/theme/pagebreak.css */
+        .page-break {
+            padding: 0;
+        }
+        /* ckeditor5-page-break/theme/pagebreak.css */
+        .page-break::after {
+            display: none;
+        }
+    }
+}

resources/sass/front/modules/_ckvideo.scss

@@ -0,0 +1,15 @@
+.ckvideo {
+    & > a {
+        position: relative;
+        & > svg {
+            position: absolute;
+            text-shadow: 0px 0px 6px #000000;
+            color: #f3ebe4;
+            opacity: 0.9;
+            font-size: 3rem;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -60%);
+        }
+    }
+}

resources/sass/front/pages/brand/_quality.scss

@@ -66,6 +66,12 @@
                 width: 100%;
             }
             .content-engagements{
+                & p {
+                    color: $color5;
+                    font-size: 1.5em;
+                    font-family: 'Catamaran-Regular';
+                    line-height: 125%;
+                }
                 width: 80%;
                 @include max-width($tablet){
                     margin: 1rem;

resources/sass/front/pages/health-nutrition/_balanced-menu.scss

@@ -1,437 +0,0 @@
-.content.menu {
-    max-width: 100%;
-    position: relative;
-
-    h2 {
-        font-family: "CreamyScriptRegular";
-        color: $color5;
-        text-align: center;
-    }
-
-    h1 {
-        color: #4e3238;
-        font-family: "Veneer";
-        padding-bottom: 47px;
-        text-align: center;
-        text-decoration: underline;
-        padding-top: 30px;
-
-        @include max-width($tablet) {
-            font-size: 4.5em;
-        }
-
-        &.title-desktop {
-            display: none;
-        }
-        &.title-mobile {
-            display: block;
-        }
-        @include min-width($desktop) {
-            &.title-desktop {
-                display: block;
-            }
-            &.title-mobile {
-                display: none;
-            }
-        }
-    }
-
-    // TNS Left and right control
-    .control {
-        width: 1.5em;
-        height: 1.5em;
-        border-radius: 1em;
-        background-color: $color6;
-        display: block;
-        font-size: 2.5em;
-        cursor: pointer;
-        &.left {
-            position: absolute;
-            top: 50%;
-            left: -2.5em;
-        }
-        &.right {
-            position: absolute;
-            top: 50%;
-            right: -2.5em;
-        }
-        & > svg {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translateX(-50%) translateY(-50%);
-        }
-    }
-
-    // Cursor on tns Items
-    .tns-item {
-        cursor: pointer;
-        &:active {
-            cursor: grabbing;
-        }
-        img:active {
-            cursor: grabbing;
-        }
-    }
-
-    // Overload icomoon to fit BalancedMenuType
-    // kid
-    .icon-menu-1:before {
-        content: "\e923";
-    }
-    // teenager
-    .icon-menu-2:before {
-        content: "\e922";
-    }
-    // woman
-    .icon-menu-3:before {
-        content: "\e924";
-    }
-    // man
-    .icon-menu-4:before {
-        content: "\e925";
-    }
-    // senior
-    .icon-menu-5:before {
-        content: "\e926";
-    }
-
-    // Min height for svg loader
-    #productSection,
-    #menuSection {
-        position: relative;
-        min-height: 15em;
-    }
-
-    #profiles,
-    #products,
-    #menu {
-        position: relative;
-    }
-
-    #menuHeader {
-        max-width: 1200px;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 1em;
-        font-size: 0.8em;
-
-        h1, h2 {
-            width: 80%;
-            margin-left: auto;
-            margin-right: auto;
-            text-align: center;
-        }
-    }
-
-    #templates {
-        display: none;
-    }
-
-    #genderSection {
-        user-select: none;
-        max-width: 1200px;
-        margin-left: auto;
-        margin-right: auto;
-        padding: 1em;
-        margin-bottom: 2rem;
-
-        @include min-width($tablet) {
-            overflow: inherit;
-            padding: 0 7em;
-            margin-top: 2rem;
-            margin-bottom: 3rem;
-        }
-
-        header {
-            font-family: "Veneer";
-            font-size: 3em;
-            color: $color5;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            @include max-width($tablet) {
-                font-size: 2em;
-            }
-
-            div {
-                opacity: 0;
-                width: 1.3em;
-                height: 1.3em;
-                border: 2px solid $color5;
-                border-radius: 20px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 10px;
-            }
-        }
-        .profils {
-            margin-top: 40px;
-            display: flex;
-            justify-content: center;
-            overflow: hidden;
-            flex-flow: wrap;
-
-            .genreBtn {
-                background-color: #ffffff;
-                border-bottom: 5px solid transparent;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-                border-radius: 5px;
-                cursor: pointer;
-                min-width: 8rem;
-                margin: 1rem;
-
-                @include min-width($mobile) {
-                    min-width: 10rem;
-                }
-                @include min-width($tablet) {
-                    min-width: 11rem;
-                }
-                @include min-width($desktop) {
-                }
-
-                i {
-                    color: $color11;
-                    font-size: 11em;
-                    margin: 1rem;
-                    transition: color 500ms ease;
-                    font-size: 7em;
-
-                    &.kid {
-                        font-size: 5em;
-                        height: 1.3em;
-                        display: flex;
-                        align-items: center;
-                    }
-                }
-                p {
-                    text-align: center;
-                    font-family: "Veneer";
-                    text-transform: uppercase;
-                    color: $color11;
-                    transition: color 500ms ease;
-                    font-size: 1.6em;
-                }
-                &:hover {
-                    background-color: #fff;
-                    p,
-                    i {
-                        color: $color5;
-                    }
-                }
-                &.active {
-                    border-bottom: 5px solid #abccb7;
-                    background-color: #fff;
-                    p,
-                    i {
-                        color: $color5;
-                    }
-                }
-                @include min-width($mobile) {
-                    p {
-                        font-size: 2em;
-                    }
-                }
-                @include min-width($tablet) {
-                    i {
-                        font-size: 10em;
-                        &.kid {
-                            font-size: 7em;
-                            height: 1.3em;
-                        }
-                    }
-                    p {
-                        font-size: 2.5em;
-                    }
-                }
-            }
-        }
-    }
-    #productSection {
-        user-select: none;
-        max-width: 1200px;
-        margin-left: auto;
-        margin-right: auto;
-        display: none;
-        padding: 1em;
-
-        @include min-width($tablet) {
-            overflow: inherit;
-            padding: 0 7em;
-        }
-
-        &.show {
-            display: block;
-        }
-        header {
-            font-family: "Veneer";
-            font-size: 3em;
-            color: $color5;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 1em;
-
-            @include max-width($tablet) {
-                font-size: 2em;
-            }
-
-            div {
-                width: 1.3em;
-                height: 1.3em;
-                border: 2px solid $color5;
-                border-radius: 20px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-right: 10px;
-            }
-        }
-        .produits {
-            .produitBtn {
-                background-color: #ffffff;
-                border-bottom: 5px solid transparent;
-                border-radius: 5px;
-                margin-right: 1rem;
-                cursor: pointer;
-                min-width: 8rem;
-                padding: 1em;
-
-                @include min-width($mobile) {
-                    min-width: 10rem;
-                    margin-right: 2rem;
-                }
-                @include min-width($tablet) {
-                    min-width: 11rem;
-                }
-                @include min-width($desktop) {
-                    margin-right: 4.2rem;
-                }
-
-                figure {
-                    display: flex;
-                    justify-content: center;
-                    img {
-                        width: 100%;
-                        height: 100%;
-                    }
-                }
-                p {
-                    font-family: "CreamyScriptRegular";
-                    text-align: center;
-                    font-size: 3em;
-                    margin-top: 10px;
-                    @include max-width($tablet) {
-                        font-size: 2.4em;
-                    }
-                }
-                &:hover {
-                    background-color: #fff;
-                }
-                &.active {
-                    border-bottom: 5px solid #abccb7;
-                    background-color: #fff;
-                }
-            }
-        }
-        #products > svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translateX(50%) translateY(50%);
-        }
-    }
-    #menuSection {
-        margin-top: 100px;
-        margin-bottom: 50px;
-        height: 500px;
-        background-color: #abccb7;
-        display: none;
-        position: relative;
-        &.show {
-            display: flex;
-        }
-        @include max-width($tablet) {
-            flex-direction: column;
-            height: inherit;
-        }
-        header {
-            position: absolute;
-            z-index: 5;
-            left: 50%;
-            top: -20px;
-            padding: 5px 30px;
-            background-color: #ffffff;
-            transform: translateX(-50%) rotate(-5deg);
-            @include max-width($tablet) {
-                top: 270px;
-            }
-        }
-        figure {
-            width: 50%;
-            background-color: #666666;
-            opacity: 0;
-            position: relative;
-            height: 100%;
-            overflow: hidden;
-            @include max-width($tablet) {
-                width: 100%;
-                min-height: 300px;
-            }
-            img {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                -webkit-transform: translateX(-50%) translateY(-50%);
-                -ms-transform: translateX(-50%) translateY(-50%);
-                transform: translateX(-50%) translateY(-50%);
-                min-width: 100%;
-                min-height: 100%;
-                width: auto;
-                height: auto;
-                overflow: hidden;
-            }
-        }
-        .details {
-            padding: 60px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            width: 50%;
-            opacity: 0;
-            @include max-width($tablet) {
-                width: 100%;
-                align-items: center;
-                padding: 70px 30px;
-            }
-            h5 {
-                margin: 5px 0;
-                color: #fff;
-                font-size: 3.5em;
-            }
-            div {
-                color: #fff;
-                font-size: 1.7em;
-                text-align: left;
-                p {
-                    font-size: 1.1em;
-                    color: #fff;
-                }
-                @include max-width($tablet) {
-                    text-align: center;
-                }
-            }
-        }
-        & > svg {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translateX(50%) translateY(50%);
-        }
-    }
-}

resources/sass/front/pages/health-nutrition/_health_nutrition.scss

@@ -1,71 +0,0 @@
-.health-nutrition {
-    & .content {
-        max-width: 1200px;
-        margin: 0 auto;
-
-        &>h1 {
-            margin: 20px;
-            color: $color5;
-            font-family: "Veneer";
-            font-size: 4.2em;
-            text-decoration: none;
-            text-align: center;
-        }
-
-        &>p {
-            color: black;
-            width: 60%;
-            font-size: 1.5em;
-            margin: 0 auto;
-            font-family: 'Catamaran-Regular';
-            text-align: center;
-        }
-
-        &>div {
-            margin-top: 1rem;
-            position: relative;
-            display: grid;
-            grid-template-columns: 50% 50%;
-            margin-bottom: 10px;
-
-            @include max-width($tablet) {
-                display: flex;
-                flex-direction: column;
-            }
-
-            &>a {
-                position: relative;
-                margin: 10px 10px;
-                overflow: hidden;
-                border-radius: 5px;
-
-                &>img {
-                    object-fit: cover;
-                    width: 100%;
-                    height: auto;
-                    filter: brightness(0.6);
-                    transition: all 1s;
-                }
-
-                &>span {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translateX(-50%) translateY(-50%);
-                    width: 80%;
-                    font-family: 'Veneer';
-                    font-size: 4em;
-                    color: white;
-                    text-align: center;
-                }
-
-                &:hover {
-                    &>img {
-                        transform: scale(1.1);
-                        filter: brightness(0.5);
-                    }
-                }
-            }
-        }
-    }
-}

resources/sass/front/pages/health-nutrition/_nutrition.scss

@@ -1,495 +0,0 @@
-.content.nutrition {
-    position: relative;
-    justify-content: center;
-
-    & .title {
-        color: $color5;
-        font-family: "CreamyScriptRegular";
-        line-height: 1em;
-        padding: 0 0 40px;
-    }
-
-    & .content-nutrition {
-        position: relative;
-        color: $color5;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 4em;
-
-        & > h1 {
-            font-family: "Veneer";
-            padding-bottom: 47px;
-            text-align: center;
-            text-decoration: underline;
-        }
-
-        & > div {
-            display: flex;
-
-            @include max-width($desktop) {
-                flex-direction: column;
-
-                & > div {
-                    width: 100% !important;
-                    margin: 2em 0 !important;
-                }
-            }
-
-            & .bloc-left {
-                width: 40%;
-                margin-right: 60px;
-
-                & > img {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-
-            & .bloc-right {
-                width: 60%;
-
-                .tabs {
-                    overflow: hidden;
-                    margin: 20px 0;
-                }
-
-                .tab {
-                    width: 100%;
-                    overflow: hidden;
-                    margin-bottom: 10px;
-
-                    &-label {
-                        position: relative;
-                        display: flex;
-                        justify-content: space-between;
-                        padding: 20px;
-                        background-color: white;
-                        color: $color5;
-                        font-family: "CreamyScriptRegular";
-                        cursor: pointer;
-                        transition: all 0.35s;
-                        font-size: 3em;
-
-                        &:hover {
-                            background-color: #abccb7;
-                            color: white;
-                        }
-                        &::after {
-                            position: absolute;
-                            top: 45%;
-                            right: 10px;
-                            font-family: "icomoon";
-                            content: "\e91b";
-                            transform: rotate(-90deg);
-                            font-size: 0.3em;
-                            text-align: center;
-                            transition: transform 0.35s;
-                        }
-                    }
-                    &-content {
-                        max-height: 0;
-                        color: white;
-                        background-color: #abccb7;
-                        transition: all 0.35s;
-                        font-size: 15px;
-                        padding: 0;
-                    }
-                    input {
-                        position: absolute;
-                        opacity: 0;
-                        z-index: -1;
-                    }
-                    input:checked {
-                        + .tab-label {
-                            background-color: #abccb7;
-                            color: white;
-                            &::after {
-                                transform: rotate(0deg);
-                                color: white;
-                            }
-                        }
-                        ~ .tab-content {
-                            max-height: none;
-                            padding: 20px 40px 40px;
-                        }
-                    }
-                }
-
-                & .bloc-text {
-                    display: flex;
-                    flex-direction: row;
-
-                    & .img-bloc {
-                        flex-basis: 20%;
-                    }
-
-                    & > div {
-                        flex-basis: 80%;
-
-                        & > p {
-                            font-size: 1.6em;
-                        }
-
-                        & > ul {
-                            list-style: none;
-                            & > li {
-                                @extend p;
-                                font-size: 1.6em !important;
-
-                                & > a {
-                                    text-decoration: underline;
-                                    font-weight: bold;
-                                    color: $color3;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        .bloc-full {
-            margin: 0 20%;
-            @include max-width($desktop) {
-                margin: 0 4em;
-            }
-
-            .img-bloc {
-                padding: 1em 0;
-            }
-        }
-    }
-
-    & .content-menus {
-        position: relative;
-        background-color: #b4d1be;
-
-        & .content {
-            max-width: 1200px;
-            margin: 75px auto;
-            padding: 60px 0;
-
-            & > h3 {
-                color: white;
-                font-family: "Veneer";
-                padding-bottom: 45px;
-                text-align: center;
-
-                @include max-width($tablet) {
-                    margin: 0 1em;
-                    padding-bottom: 0;
-                }
-            }
-
-            & .bloc-menus {
-                display: flex;
-                flex-direction: row;
-                @include max-width($tablet) {
-                    flex-direction: row;
-                    flex-wrap: wrap;
-                }
-
-                & > a {
-                    display: flex;
-                    flex-direction: column;
-                    background-color: white;
-                    width: 33%;
-                    margin: 0 1em;
-                    height: 100%;
-                    text-align: center;
-                    align-items: center;
-                    font-size: 0.8em;
-                    border-radius: 1em;
-                    overflow: hidden;
-
-                    @include max-width($tablet) {
-                        width: 100%;
-                        margin: 4em;
-                        padding: 4em;
-                        border-radius: 1em;
-                    }
-
-                    & > img {
-                        width: 100%;
-                        height: auto;
-
-                        @include max-width($tablet) {
-                            border-radius: 1em;
-                        }
-                    }
-
-                    & > h4 {
-                        font-family: "Catamaran-Bold";
-                        line-height: 20px;
-                        padding: 20px 10px;
-                        text-transform: uppercase;
-                        color: $color5;
-                        @include min-width($tablet) {
-                            font-size: 2em;
-                        }
-                    }
-
-                    & .btn-bloc {
-                        border: 2px solid $color10;
-                        color: $color10;
-                        display: inline-block;
-                        font-family: "Catamaran-Black";
-                        text-transform: uppercase;
-                        padding: 5px 20px 5px;
-                        margin: 0 10px 20px;
-                        border-radius: 50px;
-                        width: fit-content;
-                        font-size: 1.5em;
-
-                        @include max-width($tablet) {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    & .content-sport {
-        position: relative;
-        margin-bottom: 50px;
-
-        & .content {
-            max-width: 1148px;
-            margin: 0 auto;
-            padding: 0 4em;
-
-            & .bloc-head {
-                display: flex;
-                flex-direction: row;
-
-                @include max-width($tablet) {
-                    flex-direction: column-reverse;
-
-                    & .text-head, .img-head {
-                        width: 100% !important;
-                    }
-
-                    & .img-head {
-                        margin: 2em auto !important;
-                    }
-                }
-
-                & .text-head {
-                    width: 60%;
-
-                    &>h3 {
-                        color: $color5;
-                        font-family: 'Veneer';
-                        margin-bottom: 15px;
-                        text-align: left;
-                    }
-
-                    & > p {
-                        font-size: 1.4em;
-                    }
-                }
-
-                & .img-head {
-                    text-align: center;
-                    width: 40%;
-
-                    & > img {
-                        margin: 0 20px;
-                    }
-                }
-            }
-
-            & > h4 {
-                font-family: "Veneer";
-                padding: 50px 0;
-                text-align: center;
-                color: $color5;
-            }
-
-            & .sport-fields {
-                display: flex;
-                flex-direction: row;
-
-                @include max-width($tablet) {
-                    flex-direction: column;
-                }
-
-                & .column {
-                    display: flex;
-                    flex-direction: column;
-                    flex-wrap: wrap;
-                    flex-basis: 50%;
-                    padding: 0 5px;
-
-                    & .row {
-                        display: flex;
-                        flex-direction: row;
-                        border-radius: 5px;
-                        overflow: hidden;
-                        margin: 0;
-
-                        @include max-width($mobile) {
-                            flex-direction: column;
-                        }
-
-                        & .img-cell {
-                            position: relative;
-                            margin: 5px 0;
-                            padding: 0;
-                            min-height: 27em;
-                            border-radius: 5px;
-                            overflow: hidden;
-
-                            & > img {
-                                width: 100%;
-                                height: 100%;
-                                max-height: 564px;
-                                border-radius: 5px;
-
-                                @include max-width($tablet) {
-                                    position: absolute;
-                                    top: 50%;
-                                    left: 50%;
-                                    transform: translate(-50%, -50%);
-                                    width: 100%;
-                                    height: auto;
-                                }
-                            }
-
-                            &-text-right {
-                                right: -5px;
-                            }
-
-                            &-text-left {
-                                left: -10px;
-
-                                & > p {
-                                    padding-left: 35px;
-                                }
-                            }
-
-                            &-text {
-                                position: absolute;
-                                top: 50%;
-                                left: 50%;
-                                transform: translate(-50%, -50%) rotate(-5deg);
-                                width: 80%;
-
-                                & > p {
-                                    font-family: "Veneer";
-                                    font-size: 5.8em;
-                                    color: white;
-                                    margin-bottom: 15px;
-                                }
-
-                                & > span, > div {
-                                    font-family: "CreamyScriptRegular";
-                                    color: white;
-                                    padding: 10px 35px;
-                                    font-size: 3em;
-                                    text-align: center;
-                                }
-
-                                @include max-width($desktop) {
-                                    & > p {
-                                        font-size: 4.8em;
-                                    }
-
-                                    & > span, > div {
-                                        font-size: 2.5em;
-                                    }
-                                }
-                            }
-                        }
-
-                        & .cell {
-                            padding: 5px;
-                            flex-basis: 50%;
-                            height: 280px;
-                            background-color: white;
-
-                            & > div {
-                                display: flex;
-                                flex-direction: column;
-                                align-items: center;
-                                justify-content: center;
-                                border-radius: 5px;
-                                background-color: white;
-                                height: 100%;
-                                font-size: 3em;
-
-                                & > p {
-                                    color: $color5;
-                                    font-family: 'Veneer';
-                                    text-transform: uppercase;
-                                    margin-top: 38px;
-                                    font-size: inherit;
-                                }
-
-                                & > span {
-                                    color: $color5;
-                                    font-family: 'CreamyScriptRegular';
-                                }
-                            }
-                        }
-
-                        & .icon {
-                            font-family: "icomoon";
-                            font-size: 55px;
-                            font-style: normal;
-                        }
-
-                        & .icon-training {
-                            color: #ea7c2c;
-
-                            &:before {
-                                content: "\e92d";
-                            }
-                        }
-
-                        & .icon-shopping {
-                            color: #ffbd18;
-
-                            &:before {
-                                content: "\e92a";
-                            }
-                        }
-
-                        & .icon-stairs {
-                            color: #ffbd18;
-
-                            &:before {
-                                content: "\e92b";
-                            }
-                        }
-
-                        & .icon-smile {
-                            color: #d93a4c;
-
-                            &:before {
-                                content: "\e92e";
-                            }
-                        }
-
-                        & .icon-cleaning {
-                            color: #ffbd18;
-
-                            &:before {
-                                content: "\e92c";
-                            }
-                        }
-
-                        & .icon-jumping {
-                            color: #d93a4c;
-
-                            &:before {
-                                content: "\e92f";
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}

resources/sass/front/pages/health-nutrition/_nutritional_values.scss

@@ -1,514 +0,0 @@
-.nutrional-values-head {
-    position: relative;
-
-    & .content {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 1em;
-
-        &>h1 {
-            color: $color5;
-            font-family: 'Veneer';
-            padding-bottom: 47px;
-            text-align: center;
-            text-decoration: underline;
-            padding-top: 30px;
-            font-size: 5.5em;
-            @include max-width($tablet) {
-                font-size: 4.5em;
-            }
-        }
-
-        &>h2 {
-            font-family: 'Veneer';
-            color: $color5;
-            text-align: center;
-        }
-
-        & .item {
-            display: flex;
-            padding-top: 30px;
-
-            @include max-width($tablet) {
-                flex-direction: column-reverse;
-            }
-
-            &>figure {
-                width: 40%;
-                height: auto;
-                text-align: center;
-
-                @include max-width($tablet) {
-                    width: 100%;
-                }
-
-                &>picture {
-                    &>img {
-                        margin: 0 50px 45px 0;
-                        max-width: 100%;
-                    }
-                }
-            }
-
-            &>div {
-                width: 60%;
-
-                @include max-width($tablet) {
-                    width: 100%;
-                    padding: 1em;
-                }
-
-                &>h3 {
-                    font-family: 'Veneer';
-                    color: $color5;
-                    padding-bottom: 30px;
-                }
-
-                &>ul {
-                    list-style: none;
-
-                    &>li {
-                        position: relative;
-                        color: $color5;
-                        margin-bottom: 20px;
-                        padding-left: 20px;
-                        font-size: 1.5em;
-                        overflow: hidden;
-
-                        &:before {
-                            position: absolute;
-                            top: 0;
-                            left: 0;
-                            color: #abccb7;
-                            display: block;
-                            float: left;
-                            content: "\e91c";
-                            font-family: "icomoon";
-                        }
-                    }
-                }
-
-                &>h4 {
-                    color: $color5;
-                    font-family: 'CreamyScriptRegular';
-                    line-height: 86%;
-                    margin-bottom: 18px;
-                }
-
-                &>p {
-                    padding-bottom: 20px;
-                }
-            }
-        }
-
-        & .header3 {
-            width: 60%;
-            margin-left: 40%;
-            @include max-width($desktop) {
-                width: 90%;
-                margin-left: 2rem;
-            }
-        }
-    }
-}
-
-.nutritional-values {
-    background-color: #abccb7;
-
-    & .content {
-        display: flex;
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 4em;
-
-        @include max-width($desktop) {
-            flex-direction: column;
-        }
-
-        & .left {
-            position: relative;
-            width: 50%;
-            color: $color5;
-
-            &>div {
-                position:absolute;
-                padding: 30px;
-                top: 55px;
-                background-color: white;
-                margin-bottom:55px;
-                height:auto;
-                width:100%;
-            }
-
-            & .triangle {
-                position: absolute;
-                top: 0;
-                transform: scale(1.5);
-                color: white;
-                background-color: transparent;
-                padding: 0;
-                right: 2%;
-                font-size: 4em;
-            }
-
-            & .energy {
-                display: none;
-            }
-
-            & .fat {
-                display: none;
-            }
-
-            & .fatty-acids {
-                display: none;
-            }
-
-            & .carbohydrates {
-                display: none;
-            }
-
-            & .dietary-fiber {
-                display: none;
-            }
-
-            & .protein {
-                display: none;
-            }
-
-            & .salt {
-                display: none;
-            }
-        }
-
-        & .right {
-            width: 50%;
-
-            @include max-width($desktop) {
-                width: 100%;
-                &>h5 {
-                    display: none !important;
-                }
-            }
-
-            &>h5 {
-                font-family: 'CreamyScriptRegular';
-                color: white;
-                font-size: 3.5em;
-                margin-bottom: 20px;
-            }
-
-            &>p {
-                color: #749981;
-                font-size: 1.5em;
-                margin: 20px 0;
-            }
-
-            &>div {
-                color: white;
-                width: 100%;
-
-                &>div {
-                    display: table;
-                    width: 100%;
-                    &>label {
-                        display: table-row;
-                        &>div {
-                            display: table-cell;
-                            font-family: 'Catamaran-Regular';
-                            text-align: center;
-                            color: white;
-                            font-weight: bold;
-                            font-size: 1.5em;
-                            padding: 10px 15px;
-                        }
-                    }
-                }
-
-                &>div {
-
-                    &:first-child {
-                        &>label {
-                            background-color: inherit !important;
-                        }
-
-                        &:hover{
-                            &>label {
-                                background-color: inherit;
-                                &>div {
-                                    color: inherit;
-                                }
-                            }
-                        }
-                    }
-
-                    &>label {
-                        position: relative;
-                        cursor: pointer;
-
-                        @include max-width($desktop) {
-                            // Nasty hack hide duplicate
-                            &:first-child > div:first-child .tooltip {
-                                display: none;
-                            }
-                        }
-
-                        &:nth-child(odd) {
-                            background-color: #b9d6c4;
-                        }
-
-                        &:hover {
-                            background-color: white;
-                            cursor: pointer;
-                            &>div {
-                                color: black;
-                            }
-                        }
-
-                        &>div {
-                            position: relative;
-                            font-family: 'Catamaran-Regular';
-                            font-size: 1.5em;
-                            padding: 10px 15px;
-                            text-align: center;
-
-                            @include max-width($desktop) {
-                                display: none;
-                                margin: 1em;
-
-                                &:first-child {
-                                    display: block;
-                                    font-size: 0;
-                                    padding: 0;
-
-                                    input {
-                                        display: none;
-                                    }
-
-                                    & .showcheck ~ .tooltip {
-                                        visibility: visible;
-                                    }
-
-                                    .tooltip {
-                                        position: relative;
-                                        right: 0;
-                                        left: 0;
-                                        top: 0;
-                                        width: 100%;
-
-                                        & > h3 {
-                                            font-size: 2rem;
-                                        }
-
-                                        & > p {
-                                            display: none;
-                                        }
-                                    }
-                                }
-                            }
-
-                            &:first-child {
-                                font-weight: bold;
-                                text-align: left;
-                            }
-
-                            & .showcheck {
-                                visibility: hidden;
-                            }
-                            & .showcheck:checked ~ .tooltip {
-                                visibility: visible;
-                            }
-
-                            & .tooltip {
-                                visibility: hidden;
-                                background-color: white;
-                                color: $color5;
-                                text-align: left;
-                                border-radius: 2px;
-                                padding: 30px;
-
-                                /* Position the tooltip */
-                                position: absolute;
-                                top: 0;
-                                right: 120%;
-                                z-index: 1;
-
-                                @include min-width($desktop) {
-                                    min-width: 30rem;
-                                }
-
-                                &>h3 {
-                                    font-family: 'Veneer';
-                                    font-size: 3em;
-                                }
-
-                                &>p {
-                                    position: absolute;
-                                    left: 98%;
-                                    top: -0.6rem;
-                                    font-size: 3rem;
-                                    color: white;
-                                }
-
-                                &>div {
-                                    font-size: 13px;
-
-                                    &>p {
-                                        font-size: 1em !important;
-                                        padding-bottom: 10px;
-
-                                        &:first-child {
-                                            font-weight: bold;
-                                            padding-top: 10px;
-                                        }
-                                    }
-
-                                    &>ul {
-                                        list-style: none;
-
-                                        &>li {
-                                            position: relative;
-                                            font-family: "Catamaran-Regular";
-                                            margin-left: 20px;
-                                            margin-bottom: 10px;
-
-                                            &:before {
-                                                content: "• ";
-                                                color: #abccb7;
-                                                font-size: 2.9em;
-                                                left: -17px;
-                                                line-height: 1em;
-                                                position: absolute;
-                                                top: -10px;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        @include min-width($desktop) {
-                            &[data-hover="carbohydrates"] {
-                                &>div .tooltip {
-                                    top: -73px;
-                                }
-
-                                &>div .tooltip>p {
-                                    top: 26%;
-                                }
-                            }
-
-                            &[data-hover="carbohydrates-sugar"] {
-                                &>div .tooltip {
-                                    top: -118px;
-                                }
-
-                                &>div .tooltip>p {
-                                    top: 42%;
-                                }
-                            }
-
-                            &[data-hover="dietary-fiber"] {
-                                &>div .tooltip {
-                                    top: -17px;
-                                }
-
-                                &>div .tooltip>p {
-                                    top: 15%;
-                                }
-                            }
-
-                            &[data-hover="protein"] {
-                                &>div .tooltip {
-                                    top: -94px;
-                                }
-
-                                &>div .tooltip>p {
-                                    top: 54%;
-                                }
-                            }
-
-                            &[data-hover="salt"] {
-                                &>div .tooltip {
-                                    top: -211px;
-                                }
-
-                                &>div .tooltip>p {
-                                    top: 84%;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.table-nutriments-mobile{
-    display:none;
-    @include max-width($desktop){
-        display:block;
-        order:1;
-    }
-    ul{
-        display: flex;
-        width: 100%;
-        margin:10px 0;
-        li{
-            width:50%;
-            font-size:1.6em;
-            text-align:center;
-            font-weight:bold;
-            font-family:"Catamaran-Regular";
-            color:#749981;
-            &:first-child{
-                border-right:1px solid #FFF;
-            }
-            &.active{
-                color:#FFF;
-            }
-        }
-    }
-    table{
-        width:100%;
-        color:#FFFFFF;
-        font-family: 'Catamaran-Regular';
-        font-size: 1.7em;
-        thead{
-            th{
-                text-align:center;
-                font-weight:bold;
-                padding:15px;
-            }
-        }
-        tbody{
-            position: relative;
-            tr{
-                cursor:pointer;
-                &:nth-child(odd){
-                    background-color:#b9d6c4;
-                }
-                td{
-                    padding:10px 15px;
-                    text-align:center;
-                    &:first-child{
-                        text-align:left;
-                        font-weight:bold;
-                    }
-                    &.aqr {
-                        display:none;
-                    }
-                }
-            }
-        }
-    }
-    p{
-        color:#749981;
-        margin-top: 20px;
-        margin-left: 10px;
-        margin-right:10px;
-        strong{
-            font-weight: bold;
-        }
-    }
-}

resources/sass/front/pages/health-nutrition/_pleasure_balance.scss

@@ -1,123 +0,0 @@
-.pleasure-balance {
-    position: relative;
-
-    & .content {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 1em;
-
-        &>h1 {
-            color: #4e3238;
-            font-family: "Veneer";
-            padding-bottom: 47px;
-            text-align: center;
-            text-decoration: underline;
-            padding-top: 30px;
-            font-size: 5.5em;
-            @include max-width($tablet) {
-                font-size: 4.5em;
-            }
-        }
-
-        &>h2 {
-            font-family: "CreamyScriptRegular";
-            text-align: center;
-            padding-bottom: 30px;
-        }
-
-        & .items {
-            margin: 0 auto 50px auto;
-            padding: 2em;
-
-            & .item {
-                display: flex;
-                padding-top: 30px;
-                border-bottom: 1px solid #dfd2c7;
-
-                @include max-width($tablet) {
-                    flex-direction: column;
-                }
-
-                &:nth-last-child(1) {
-                    border-bottom: 0;
-                }
-
-                &>figure {
-                    flex: 0 0 27em;
-                    height: auto;
-                    text-align: center;
-                    margin: 1em;
-                    @include max-width($tablet) {
-                        overflow: hidden;
-                        position: relative;
-                        height: 12rem;
-                    }
-
-                    &>picture {
-                        @include max-width($tablet) {
-                            position: absolute;
-                            width: 100%;
-                            top: 50%;
-                            left: 50%;
-                            transform: translate(-50%, -50%);
-                            & > img {
-                                width: 100%;
-                            }
-                        }
-
-                        &>img {
-                            margin: 0 50px 45px 0;
-                            max-width: 100%;
-                            float: left;
-                        }
-                    }
-                }
-
-                div {
-                    &>h3 {
-                        font-family: 'Veneer';
-                        padding-bottom: 30px;
-                    }
-
-                    &>ul {
-                        list-style: none;
-
-                        &>li {
-                            position: relative;
-                            color: $color5;
-                            margin-bottom: 20px;
-                            padding-left: 20px;
-                            font-size: 1.5em;
-                            overflow: hidden;
-
-                            &:before {
-                                position: absolute;
-                                top: 0;
-                                left: 0;
-                                color: $orange;
-                                display: block;
-                                float: left;
-                                content: "\e91c";
-                                font-family: "icomoon";
-                            }
-                        }
-                    }
-                }
-
-                &>h4 {
-                    font-family: 'CreamyScriptRegular';
-                    line-height: 86%;
-                    margin-bottom: 18px;
-                }
-
-                &>p {
-                    &>a {
-                        font-weight: bold;
-                        color: $color5;
-                        text-decoration: underline;
-                    }
-                }
-            }
-        }
-    }
-}

resources/sass/front/pages/health-nutrition/bloc1.scss

@@ -0,0 +1,84 @@
+.content.nutrition {
+    .bloc1 {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        & > img {
+            position: absolute;
+            left: 0;
+            object-fit: contain;
+            width: 40%;
+            border-radius: 0.3rem;
+            z-index: 1;
+        }
+        &.right {
+            flex-direction: row;
+            & > img {
+                position: absolute;
+                right: 0;
+                left:inherit;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+                padding: 4.799rem 6.799rem 3.732rem 3.466rem;
+            }
+        }
+        & > .content {
+            position: relative;
+            right: 0;
+            min-width: 52.794rem;
+            margin-top: 6.932rem;
+            border-radius: 0.333rem;
+            color: $color5;
+            background-color: #FFF;
+            padding: 4.799rem 3.466rem 3.732rem 6.799rem;
+            width: 55%;
+            @import "./title";
+            @import "./content";
+            // content positionning
+            & > .text {
+                padding-top: 1.6rem;
+                padding-bottom: 4.266rem;
+            }
+            @import "./dropdowns";
+        }
+    }
+    @include max-width($engagementMajorBreakPoint) {
+        .bloc1, & .bloc1.right {
+            flex-direction: column;
+            position: relative !important;
+            left: 50% !important;
+            transform: translateX(-50%) !important;
+            width: calc(100vw - 1.334rem) !important;
+            & > img {
+                position: relative;
+                right: inherit;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 100%;
+                // 486 px
+                max-width: 32.396rem;
+                z-index: 0;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+                left: 50%;
+                margin-top: -2.6rem;
+                transform: translateX(-50%);
+                min-width: inherit;
+                max-width: 46.132rem;
+                width: calc(100vw - 1.334rem);
+                border-radius: 0.333rem;
+                padding: 4.799rem 3.466rem 3.732rem 3.466rem;
+                @include max-width(32.396rem + 1.334rem*2) {
+                    border-radius: 0 0 0.333rem 0.333rem;
+                }
+                @include max-width($mobile) {
+                    padding: 2.466rem;
+                }
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/bloc2.scss

@@ -0,0 +1,96 @@
+.content.nutrition {
+    .bloc2 {
+        position: relative;
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-end;
+        & > img {
+            position: absolute;
+            left: 0;
+            object-fit: contain;
+            width: 40%;
+            z-index: 1;
+            border-radius: 0.3rem;
+        }
+        & > .content {
+            position: relative;
+            right: 0;
+            min-width: 46.132rem;
+            color: $color5;
+            background-color: #FFF;
+            padding: 3.466rem;
+            width: 67%;
+            margin-bottom: 6.934rem;
+            padding-left: 10%;
+            border-radius: 0.333rem;
+            @import "./title";
+            @import "./content";
+            // content positionning
+            & > .text {
+                padding-top: 1.6rem;
+                padding-bottom: 4.266rem;
+            }
+            @import "./link";
+            & > .link {
+                padding-bottom: 4.266rem;
+                &::after {
+                    position: absolute;
+                    bottom: 0;
+                    content: " ";
+                    display: block;
+                    height: 0.2rem;
+                    width: 4.266rem;
+                    background-color: $engagementLightGreen;
+                }
+            }
+            @import "./labels";
+        }
+        &.right {
+            flex-direction: row;
+            & > img {
+                position: absolute;
+                right: 0;
+                left:inherit;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+                padding-left: 3.466rem;
+                padding-right: 10%;
+            }
+        }
+
+        @include max-width($engagementMajorBreakPoint) {
+            flex-direction: column !important;
+            align-items: flex-start !important;
+            position: relative !important;
+            left: 50% !important;
+            transform: translateX(-50%) !important;
+            width: calc(100vw - 1.334rem) !important;
+            & > img {
+                position: relative !important;
+                right: inherit !important;
+                width: 100% !important;
+                // 486 px
+                max-width: 32.396rem !important;
+                left: 50% !important;
+                transform: translateX(-50%) !important;
+                z-index: 0 !important;
+                border-radius: 0.6rem !important;
+                top: 1rem;
+            }
+            & > .content {
+                width: calc(100vw - 1.334rem) !important;
+                max-width: 46.132rem;
+                min-width: inherit !important;
+                width: 100%;
+                left: 50%;
+                transform: translateX(-50%);
+                margin: 0;
+                @include max-width(32.396rem + 1.334rem*2) {
+                    border-radius: 0 0 0.6rem 0.6rem;
+                }
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/bloc3.scss

@@ -0,0 +1,81 @@
+.content.nutrition {
+    .bloc3 {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        overflow: hidden;
+        & > img {
+            position: absolute;
+            left: 0;
+            object-fit: contain;
+            width: 52.794rem;
+            border-radius: 0.3rem;
+        }
+        &.right {
+            flex-direction: row;
+            & > img {
+                position: absolute;
+                right: 0;
+                left:inherit;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+            }
+        }
+        & > .content {
+            position: relative;
+            right: 0;
+            min-height: 46.01rem;
+            width: 39.196rem;
+            margin-top: 6.932rem;
+            border-radius: 0.333rem;
+            color: $color5;
+            background-color: #FFF;
+            padding: 4.799rem 3.732rem 3.732rem 3.732rem;
+            @import "./title";
+            @import "./content";
+            // content positionning
+            & > .text {
+                padding-top: 1.6rem;
+                padding-bottom: 4.266rem;
+            }
+            @import "./link";
+        }
+    }
+    @include max-width($engagementMajorBreakPoint) {
+        .bloc3, & .bloc3.right {
+            position: relative;
+            left: 50%;
+            transform: translateX(-50%);
+            width: calc(100vw - 1.334rem);
+            flex-direction: column;
+            & > img {
+                left: 50%;
+                transform: translateX(-50%);
+                position: relative;
+                right: 0;
+                width: 100%;
+                // 792px
+                max-width: 52.794rem;
+            }
+            & > .content {
+                left: 50%;
+                transform: translateX(-50%);
+                position: relative;
+                right: inherit;
+                margin-top: -2.6rem;
+                width: 100%;
+                min-width: inherit;
+                max-width: 46.132rem;
+                border-radius: 0.333rem;
+                @include max-width(52.794rem + 1.334rem*2) {
+                    border-radius: 0 0 0.333rem 0.333rem;
+                }
+                @include max-width($mobile) {
+                    padding: 2.466rem;
+                }
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/bloc4.scss

@@ -0,0 +1,73 @@
+.content.nutrition {
+    .bloc4 {
+        display: flex;
+        flex-direction: row-reverse;
+        align-items: flex-start;
+        overflow: hidden;
+        & > img {
+            position: absolute;
+            left: 0;
+            object-fit: contain;
+            width: 52.794rem;
+            border-radius: 0.3rem;
+        }
+        &.right {
+            flex-direction: row;
+            & > img {
+                position: absolute;
+                right: 0;
+                left:inherit;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+            }
+        }
+        & > .content {
+            position: relative;
+            right: 0;
+            min-height: 46.01rem;
+            width: 39.196rem;
+            margin-top: 6.932rem;
+            border-radius: 0.333rem;
+            color: $color5;
+            background-color: #FFF;
+            padding: 4.799rem 3.732rem 3.732rem 3.732rem;
+            @import "./title";
+            @import "./content";
+            // content positionning
+            & > .text {
+                padding-top: 1.6rem;
+                padding-bottom: 4.266rem;
+            }
+            @import "./dropdowns";
+        }
+    }
+    @include max-width($engagementMajorBreakPoint) {
+        .bloc4, & .bloc4.right {
+            flex-direction: column;
+            & > img {
+                position: relative;
+                right: inherit;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 100%;
+                max-width: 792px;
+            }
+            & > .content {
+                position: relative;
+                right: inherit;
+                left: 50%;
+                margin-top: -2.6rem;
+                transform: translateX(-50%);
+                min-width: inherit;
+                max-width: 46.132rem;
+                width: calc(100vw - 1.334rem);
+                border-radius: 0.6rem;
+                @include max-width($mobile) {
+                    padding: 2.466rem;
+                }
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/bloc5.scss

@@ -0,0 +1,47 @@
+.content.nutrition {
+    .bloc5 {
+        background-color: $healthColor;
+        border-radius: 0.333rem;
+        & > div {
+            display: flex;
+            flex-direction: row;
+            padding: 2.666rem 6.799rem 3.199rem 6.799rem;
+            @include max-width($desktop) {
+                padding: 2.666rem 1.1rem 3.199rem 1.1rem;
+            }
+            @include max-width($tablet) {
+                flex-direction: column;
+            }
+            & > div:first-child > img {
+                position: relative;
+                object-fit: contain;
+                max-width: 384px;
+                border-radius: 0.333rem;
+                @include max-width($tablet) {
+                    transform: inherit;
+                    width: 100%;
+                    left: inherit;
+                }
+            }
+            & > .content {
+                padding-top: 0.533rem;
+                margin-left: 4.132rem;
+                @include max-width($mobile) {
+                    margin-left: 0;
+                }
+                & > .text {
+                    font-size: 1.199rem;
+                    line-height: 1.733rem;
+                    font-family: 'Catamaran-Regular';
+                    color: $color5;
+                }
+            }
+        }
+        @include max-width($engagementMajorBreakPoint) {
+            position: relative;
+            width: calc(100vw - 1.334rem) !important;
+            transform: translateX(-50%);
+            left: 50%;
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/common.scss

@@ -0,0 +1,62 @@
+.content.nutrition {
+    position: relative;
+    justify-content: center;
+
+    @include max-width($tablet) {
+        padding-top: 5rem;
+    }
+    @include max-width($mobile) {
+        padding-top: 12rem;
+    }
+
+    @import "./nutrition-nav";
+
+    & .nutritionPage {
+        margin-bottom: 6.399rem;
+
+        // custom links green
+        & a {
+            font-family: 'Catamaran-Bold';
+            color: $engagementDarkGreen;
+            text-decoration: underline;
+        }
+
+        & > .header {
+            margin: 0 auto;
+            margin-top: 4.266rem;
+            max-width: 52.794rem;
+            color: $color5;
+
+            & > h1 {
+                font-family: 'Veneer';
+                font-size: 4.332rem;
+                line-height: 4.932rem;
+                margin-bottom: 2.666rem;
+                text-align: center;
+            }
+            & > div {
+                font-family: 'Catamaran-Regular';
+                font-size: 1.399rem;
+                line-height: 1.866rem;
+            }
+            @include max-width($engagementMajorBreakPoint) {
+                position: relative;
+                left: 50%;
+                transform: translateX(-50%);
+                width: calc(100vw - 1.334rem);
+                margin-left: 0;
+                margin-right: 0;
+                & > h1 {
+                    font-size: 3.332rem;
+                    line-height: 3.932rem;
+                }
+            }
+        }
+        & > .blocs {
+            margin-top: 3.199rem;
+            & > div:not(:first-child) {
+                margin-top: 6.399rem;
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/content.scss

@@ -0,0 +1,5 @@
+& > .text {
+    font-family: 'Catamaran-Regular';
+    line-height: 1.733rem;
+    font-size: 1.199rem;
+}

resources/sass/front/pages/health-nutrition/dropdowns.scss

@@ -0,0 +1,84 @@
+& > .dropdowns {
+    position: relative;
+    padding-top: 4.266rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    &::before {
+        position: absolute;
+        display: block;
+        content: " ";
+        top: 0;
+        left: 0;
+        width: 4.266rem;
+        height: 0.199rem;
+        background-color: $healthColor;
+    }
+
+    & > .dropdown {
+        color: $color5;
+        overflow: hidden;
+
+        &:not(:first-child) {
+            margin-top: 1.599rem;
+        }
+
+        & > input {
+            position: absolute;
+            opacity: 0;
+            z-index: -1;
+        }
+        & > label {
+            position: relative;
+            display: block;
+            padding: 0 0.799rem;
+            padding-bottom: 1.066rem;
+            padding-right: 0.799rem + 0.933rem;
+            cursor: pointer;
+            transition: border-bottom-color 0.35s;
+            border-bottom: 3px solid transparentize($color: $healthColor, $amount: 0);
+            & > h3 {
+                font-family: CreamyScriptRegular;
+                line-height: 2.399rem;
+                font-size: 1.999rem;
+            }
+            &:after {
+                position: absolute;
+                top: 10%;
+                right: 10px;
+                font-family: "icomoon";
+                content: "";
+                font-size: 0.933rem;
+                text-align: center;
+                transition: transform 0.35s;
+                transform: rotate(-180deg);
+            }
+        }
+        & > div {
+            font-family: 'Catamaran-Regular';
+            font-size: 1.199rem;
+            line-height: 1.733rem;
+            transition: all 0.35s;
+            transition-property: 'max-height', padding;
+            opacity: 0;
+            max-height: 0;
+            padding: 0;
+            padding-bottom: 1.066rem*2;
+        }
+
+        & input:checked ~ div {
+            opacity: 1;
+            max-height: 199rem;
+            padding: 0 0.799rem;
+            padding-bottom: 1.066rem*2;
+            border-bottom: 3px solid transparentize($color: $healthColor, $amount: 0);
+        }
+        & input:checked + label {
+            border-bottom: 3px solid transparentize($color: $healthColor, $amount: 1);
+        }
+        & input:checked + label:after {
+            transform: rotate(0deg);
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/labels.scss

@@ -0,0 +1,60 @@
+& > .labels {
+    position: relative;
+    padding-top: 4.266rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    &::before {
+        position: absolute;
+        display: block;
+        content: " ";
+        top: 0;
+        left: 0;
+        width: 4.266rem;
+        height: 0.199rem;
+        background-color: $healthColor;
+    }
+    & > p {
+        color: $color5;
+        width: 49%;
+        &:nth-child(n+3) {
+            margin-top: 1rem;
+        }
+        & > span {
+            display: block;
+        }
+        & > span.bigText {
+            font-family: 'Veneer';
+            font-size: 2.799rem;
+            line-height: 3.199rem;
+        }
+        & > span.text {
+            font-family: 'Catamaran-Regular';
+            font-size: 1.199rem;
+            line-height: 1.466rem;
+            font-weight: 700;
+        }
+        &.w-100 {
+            width: 100%;
+            margin-bottom: 1.6rem;
+            & > span.bigText {
+                font-size: 3rem;
+                line-height: 3rem;
+            }
+            & > span.text {
+                font-size: 1.4rem;
+                line-height: 1.4rem;
+            }
+        }
+    }
+    @include max-width($tablet - 100px) {
+        flex-direction: column;
+        & > p {
+            width: 100%;
+            &:nth-child(n+2) {
+                margin-top: 1rem;
+            }
+        }
+    }
+}

resources/sass/front/pages/health-nutrition/link.scss

@@ -0,0 +1,19 @@
+& > .link {
+    padding-top: 1.6rem;
+    position: relative;
+    & > a {
+        background-color: $engagementDarkGreen;
+        color: #FFF;
+        display: inline-block;
+        min-height: 2.867rem;
+        font-family: 'Catamaran';
+        font-size: 1.066rem;
+        font-weight: bold;
+        padding: 0.6rem 1rem;
+        border-radius: 2rem;
+        text-transform: uppercase;
+    }
+    &.noborder::after {
+        display: none;
+    }
+}

resources/sass/front/pages/health-nutrition/nutrition-nav.scss

@@ -1,83 +1,75 @@
-.health-nutrition-global {
+.nutrition-nav {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -5rem;
+    max-width: 1200px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
     @include max-width($tablet) {
-        padding-top: 5rem;
+        & > ul {
+            flex-wrap: wrap !important;
+            & > li {
+                width: 50% !important;
+                border-bottom: 5px solid #e5d5c7 !important;
+            }
+        }
     }
     @include max-width($mobile) {
-        padding-top: 12rem;
+        & > ul {
+            flex-flow: column !important;
+            & > li {
+                width: 100% !important;
+            }
+        }
     }
 
-    .nutrition-nav {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: -5rem;
-        max-width: 1200px;
+    &>ul {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+        z-index: 20;
+        list-style: none;
         width: 100%;
-        margin-left: auto;
-        margin-right: auto;
 
-        @include max-width($tablet) {
-            & > ul {
-                flex-wrap: wrap !important;
-                & > li {
-                    width: 50% !important;
-                    border-bottom: 5px solid #e5d5c7 !important;
-                }
-            }
-        }
-        @include max-width($mobile) {
-            & > ul {
-                flex-flow: column !important;
-                & > li {
-                    width: 100% !important;
-                }
+        &>li {
+            background-color: white;
+            z-index: 21;
+            flex-grow: 1;
+            height: 70px;
+            box-sizing: border-box;
+            border-bottom: 5px solid transparent;
+            border-right: 1px solid #e5d5c7;
+
+            &>a {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                text-align: center;
+                font-family: 'Catamaran-Bold';
+                color: $color5;
+                font-size: 1.4em;
+                font-weight: 700;
+                text-transform: uppercase;
+                padding: 10px;
+                width: 100%;
+                height: 65px;
+                margin-top: 5px;
+            }
+
+            &:hover {
+                border-bottom: 5px solid #abccb7;
+            }
+
+            &:nth-last-child(1) {
+                border-right: 0;
             }
         }
+    }
 
-        &>ul {
-            display: flex;
-            justify-content: center;
-            flex-direction: row;
-            z-index: 20;
-            list-style: none;
-
-            &>li {
-                background-color: white;
-                z-index: 21;
-                width: 33%;
-                height: 70px;
-                box-sizing: border-box;
-                border-bottom: 5px solid transparent;
-                border-right: 1px solid #e5d5c7;
-
-                &>a {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    text-align: center;
-                    font-family: 'Catamaran-Bold';
-                    color: $color5;
-                    font-size: 1.4em;
-                    font-weight: 700;
-                    text-transform: uppercase;
-                    padding: 10px;
-                    width: 100%;
-                    height: 65px;
-                    margin-top: 5px;
-                }
-
-                &:hover {
-                    border-bottom: 5px solid #abccb7;
-                }
-
-                &:nth-last-child(1) {
-                    border-right: 0;
-                }
-            }
-        }
-
-        & .active {
-            border-bottom: 5px solid #abccb7 !important;
-        }
+    & .active {
+        border-bottom: 5px solid #abccb7 !important;
     }
 }

resources/sass/front/pages/health-nutrition/title.scss

@@ -0,0 +1,9 @@
+& > .title {
+    font-family: 'Veneer';
+    font-size: 3.334rem;
+    line-height: 3.599rem;
+    @include max-width($engagementMajorBreakPoint) {
+        font-size: 2.334rem;
+        line-height: 2.599rem;
+    }
+}

resources/sass/front/pages/ocb/_traceability.scss

@@ -3,6 +3,13 @@
     max-width: 100%;
     flex-direction: column;
 
+    & p {
+        color: $color5;
+        font-size: 1.5em;
+        font-family: 'Catamaran-Regular';
+        line-height: 125%;
+    }
+
     & .middle {
         border-right: 1px solid #e5d5c7;
         border-left: 1px solid #e5d5c7;

resources/sass/main.scss

@@ -16,6 +16,8 @@
 @import "front/modules/flexgrid";
 @import "front/modules/notifications";
 @import "front/modules/ldcweb-cn";
+@import "front/modules/ckvideo";
+@import "front/modules/ckEditorContent";
 
 @import "front/body";
 @import "front/header";
@@ -51,12 +53,12 @@
 @import "front/pages/ocb/testimonials";
 @import "front/pages/ocb/traceability";
 
-@import "front/pages/health-nutrition/nutrition-nav";
-@import "front/pages/health-nutrition/health_nutrition";
-@import "front/pages/health-nutrition/nutrition";
-@import "front/pages/health-nutrition/pleasure_balance";
-@import "front/pages/health-nutrition/nutritional_values";
-@import "front/pages/health-nutrition/balanced-menu";
+@import "front/pages/health-nutrition/common";
+@import "front/pages/health-nutrition/bloc1";
+@import "front/pages/health-nutrition/bloc2";
+@import "front/pages/health-nutrition/bloc3";
+@import "front/pages/health-nutrition/bloc4";
+@import "front/pages/health-nutrition/bloc5";
 
 @import "front/pages/login";
 @import "front/pages/register";

resources/views/auth/login.blade.php

@@ -71,6 +71,11 @@
                 color: #e43b4e;
                 padding: 5px 10px;
             }
+            .logo {
+                left: 50%;
+                position: relative;
+                transform: translateX(-50%);
+            }
         </style>
     </head>
     <body class="text-center">
@@ -78,7 +83,7 @@
         <main class="form-signin">
             <form method="POST" action="{{ route('login') }}">
                 @csrf
-                <img class="mb-4" src="{{ asset('assets/images/logo-lgl_378.png') }}" alt="Le Gaulois">
+                <img class="mb-4 logo" src="{{ asset('assets/images/logo-lgl_378.png') }}" alt="Le Gaulois">
                 @if($errors->has('email'))
                     <div class="error">{{ $errors->first('email') }}</div>
                 @endif

resources/views/bo/actus/form-inputs.blade.php

@@ -10,9 +10,12 @@
     <label for="seo_description"><small>{{ __('Seo description') }} *</small></label>
     <input id="seo_description" type="text" class="form-control" name="seo_description" placeholder="Seo description" value="{{old('seo_description') ?? $actu->seo_description ?? ''}}">
 </div>
-<div class="form-group">
+<div class="form-group vueComponent">
     <label class="col-form-label">{{ __('Entête') }} *</label>
-    <custom-ckeditor name="header" dbtext="{{ old('header') ?? $actu->header ?? '' }}"></custom-ckeditor>
+    <custom-ckeditor
+        name="header"
+        csrf="{{ csrf_token() }}"
+        dbtext="{{ old('header') ?? $actu->header ?? '' }}"></custom-ckeditor>
 </div>
 <div class="form-group">
     <label class="col-form-label">{{ __('Étiquettes') }}</label>
@@ -40,10 +43,10 @@
     <input id="imageAlt" type="text" class="form-control" name="picture_alt" placeholder="{{ __('Texte alternatif à l\'image') }}" value="{{ old('picture_alt') ?? $actu->picture_alt ?? '' }}">
     <br>
     @if(isset($actu->picture) and strlen($actu->picture))
-    <img src="{{ $actu->picture }}" alt="image" style="max-height: 200px;width: 100%; object-fit:contain;">
+    <img src="{{ $actu->picture }}" alt="image" style="max-height:200px;max-width:100%;object-fit:contain;margin:0 auto;display:block;">
     @endif
 </div>
-<div class="form-group">
+<div class="form-group vueComponent">
     <label class="col-form-label">{{ __('Contenu') }} *</label>
     <custom-ckeditor name="content" dbtext="{{ old('content') ?? $actu->content ?? '' }}"></custom-ckeditor>
 </div>

resources/views/bo/articles/create.blade.php

@@ -24,7 +24,7 @@
                             <label>Visuel * de type JPEG/PNG - 2Mo max. - 780 x 508px</label></br>
                             <input type="file" name="picture_r" accept="image/png, image/jpeg" required>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group vueComponent">
                             <label class="col-form-label">Contenu *</label>
                             <custom-ckeditor name="content" dbtext="{{ old('content') }}"></custom-ckeditor>
                         </div>

resources/views/bo/articles/edit.blade.php

@@ -35,7 +35,7 @@
                             </br>
                             <img src="{{ asset($article->picture_r) }}" style="max-height: 200px;">
                         </div>
-                        <div class="form-group">
+                        <div class="form-group vueComponent">
                             <label class="col-form-label">Contenu *</label>
                             <custom-ckeditor name="content" dbtext="{{ old('content') ?? $article->content ?? '' }}"></custom-ckeditor>
                         </div>

resources/views/bo/balanced-menus/create.blade.php

@@ -1,56 +0,0 @@
-@extends('layouts.bo')
-
-@section('content')
-
-    <div class="card">
-        <div class="card-header">
-            Ajout d'un menu
-            <a href="{{route('bo.balanced-menus.index')}}" class="btn btn-sm btn-primary float-right">Retour</a>
-        </div>
-
-        <div class="card-body">
-            <form action="{{route('bo.balanced-menus.store')}}" method="POST" enctype="multipart/form-data">
-                @csrf
-                <div class="row">
-                    <div class="col-md-8 offset-md-2">
-                        <div class="form-group row">
-                            <label class="col-form-label col-md-4">Produit associé *</label>
-                            <select class="custom-select col-md-8" name="product_id">
-                                @foreach ($p as $product)
-                                    <option value="{{$product->id}}" @if (old('product_id') == $product->id)selected @endif>{{$product->name}}</option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="form-group row">
-                            <label class="col-form-label col-md-4">Genre *</label>
-                            <select class="custom-select col-md-8" name="type">
-                                @foreach (BalancedMenuType::toArray() as $profil)
-                                <option value="{{$profil->value}}">{{__($profil->label)}}</option>
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 770 x 684px</label></br>
-                            <input type="file" name="picture" accept="image/png, image/jpeg" required>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Entrée *</label>
-                            <custom-ckeditor name="entree" dbtext="{{ old('entree') }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Plat *</label>
-                            <custom-ckeditor name="meal" dbtext="{{ old('meal') }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Dessert *</label>
-                            <custom-ckeditor name="dessert" dbtext="{{ old('dessert') }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group text-center">
-                            <input type="submit" class="btn btn-secondary" value="Ajouter">
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-@endsection

resources/views/bo/balanced-menus/edit.blade.php

@@ -1,82 +0,0 @@
-@extends('layouts.bo')
-
-@section('content')
-    <div class="card">
-        <div class="card-header">
-            Modification d'un menu
-            <a href="{{route('bo.balanced-menus.index')}}" class="btn btn-sm btn-primary float-right ml-2">Retour</a>
-            <form action="{{route('bo.balanced-menus.destroy', $m)}}" method="POST" class="d-inline confirmDeleteJS">
-                @method('DELETE')
-                @csrf
-                <input type="submit" class="btn btn-sm btn-danger float-right" value="Supprimer">
-            </form>
-        </div>
-
-        <div class="card-body">
-            <form action="{{route('bo.balanced-menus.update', $m)}}" method="POST" enctype="multipart/form-data">
-                @method('PUT')
-                @csrf
-                <div class="row">
-                    <div class="col-md-8 offset-md-2">
-                        <div class="form-group row">
-                            <label class="col-form-label col-md-4">Produit associé *</label>
-                            <select class="custom-select col-md-8" name="product_id">
-                                @foreach ($p as $product)
-                                    @if ($product->id === $m->product->id)
-                                        <option value="{{$product->id}}" selected>{{$product->name}}</option>
-                                    @else
-                                        <option value="{{$product->id}}">{{$product->name}}</option>
-                                    @endif
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="form-group row">
-                            <label class="col-form-label col-md-4">Genre *</label>
-                            <select class="custom-select col-md-8" name="type">
-                                @foreach (BalancedMenuType::toArray() as $profil)
-                                    @if ($m->type->equals($profil))
-                                        <option value="{{$profil->value}}" selected>{{__($profil->label)}}</option>
-                                    @else
-                                        <option value="{{$profil->value}}">{{__($profil->label)}}</option>
-                                    @endif
-                                @endforeach
-                            </select>
-                        </div>
-                        <div class="form-group">
-                            <label>Visuel * de type JPEG/PNG - 2Mo max. - 770 x 684px</label></br>
-                            <input type="file" name="picture" accept="image/png, image/jpeg">
-                            </br>
-                            </br>
-                            <img src="{{ asset($m->picture) }}" style="max-height: 200px;">
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Entrée *</label>
-                            <custom-ckeditor name="entree" dbtext="{{ old('entree') ?? $m->entree }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Plat *</label>
-                            <custom-ckeditor name="meal" dbtext="{{ old('meal') ?? $m->meal }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group">
-                            <label class="col-form-label">Dessert *</label>
-                            <custom-ckeditor name="dessert" dbtext="{{ old('dessert') ?? $m->dessert }}"></custom-ckeditor>
-                        </div>
-                        <div class="form-group">
-                            <label>
-                                @if ($m->status === 1)
-                                    <input type="checkbox" name="status" value="1" checked>
-                                @else
-                                    <input type="checkbox" name="status" value="1">
-                                @endif
-                                Publié ?
-                            </label>
-                        </div>
-                        <div class="form-group text-center">
-                            <input type="submit" class="btn btn-secondary" value="Modifier">
-                        </div>
-                    </div>
-                </div>
-            </form>
-        </div>
-    </div>
-@endsection

resources/views/bo/balanced-menus/index.blade.php

@@ -1,45 +0,0 @@
-@extends('layouts.bo')
-
-@section('content')
-    <div class="card">
-        <div class="card-header">
-            Liste des menus équilibrés
-            <a href="{{route('bo.balanced-menus.create')}}" class="btn btn-sm btn-primary float-right">Ajouter</a>
-        </div>
-
-        <div class="card-body">
-            {{ $m->withQueryString()->links() }}
-            <table class="table text-center">
-                <thead class="thead-dark">
-                <tr>
-                    <th scope="col">Titre</th>
-                    <th scope="col">Profil</th>
-                    <th scope="col">Date de création</th>
-                    <th scope="col">Publié ?</th>
-                    <th scope="col"></th>
-                </tr>
-                </thead>
-                <tbody>
-                @foreach($m as $menu)
-                <tr>
-                    <th>{{$menu->product->name}} Le Gaulois</th>
-                    <td>{{ __($menu->type->label) }}</td>
-                    <td>{{$menu->created_at->format('d/m/Y')}}</td>
-                    <td>
-                        <a href="{{route('bo.balanced-menus.change-published', $menu)}}" class="btn-link">
-                            @if ($menu->status)
-                            <i class="fas fa-check check-green"></i>
-                            @else
-                            <i class="fas fa-times cross-red"></i>
-                            @endif
-                        </a>
-                    </td>
-                    <td><a href="{{route('bo.balanced-menus.edit', $menu->id)}}" class="btn btn-sm btn-primary">Éditer</a></td>
-                </tr>
-                @endforeach
-                </tbody>
-            </table>
-            {{ $m->withQueryString()->links() }}
-        </div>
-    </div>
-@endsection

resources/views/bo/breederportraits/formInputs.blade.php

@@ -15,7 +15,7 @@
     <img src="{{ asset($breederportrait->picture ?? '') }}" style="max-height: 200px;">
     @endif
 </div>
-<div class="form-group">
+<div class="form-group vueComponent">
     <label for="testimony"><small>{{ __('Témoignage de l\'éleveur *') }}</small></label>
     <custom-ckeditor id="testimony" name="testimony" dbtext="{{ old('testimony') ?? $breederportrait->testimony ?? '' }}"></custom-ckeditor>
 </div>

resources/views/bo/engagements/edit.blade.php

@@ -8,7 +8,7 @@
         </div>
 
         <div class="card-body">
-            <form id="engagementForm" action="{{route('bo.engagements.update', $engagement->id)}}" method="POST" enctype="multipart/form-data">
+            <form id="engagementForm" action="{{route('bo.engagements.update', $engagement)}}" method="POST" enctype="multipart/form-data">
                 @method('PUT')
                 @csrf
                 <div class="row">

resources/views/bo/engagements/form-inputs.blade.php

@@ -3,7 +3,7 @@
     <input id="title" type="text" class="form-control" name="title" placeholder="Titre *" value="{{ old('title') ?? $engagement->title ?? '' }}" required>
 </div>
 @if($engagement->type->equals(EngagementType::header()))
-<div class="form-group">
+<div class="form-group vueComponent">
     <label class="col-form-label">{{ __('Contenu entête') }}*</label>
     <custom-ckeditor name="content" dbtext="{{ old('content.header') ?? $engagement->content['header'] ?? '' }}"></custom-ckeditor>
 </div>
@@ -37,7 +37,7 @@ $content = $engagement->content;
                 </div>
                 @break
             @case(InputType::text()->value)
-                <div class="form-group">
+                <div class="form-group vueComponent">
                     <label class="col-form-label">{{ $input['label'] }}*</label>
                     <custom-ckeditor name="content[{{$i}}][content][{{$k}}][value]" dbtext="{{ old("content.$i.content.$k.value") ?? $input['value'] ?? '' }}"></custom-ckeditor>
                 </div>
@@ -59,7 +59,7 @@ $content = $engagement->content;
                     <input id="{{ $i.$k }}alt" type="text" class="form-control" name="content[{{$i}}][content][{{$k}}][alt]" placeholder="{{ __('Texte alternatif à l\'image') }}" value="{{ old("content.$i.content.$k.alt") ?? $input['alt'] ?? '' }}">
                     <br>
                     @if(isset($input['value']) and strlen($input['value']))
-                    <img src="{{ $input['value'] }}" alt="image" style="max-height: 200px;width: 100%; object-fit:contain;">
+                    <img src="{{ $input['value'] }}" alt="image" style="max-height:200px;max-width:100%;object-fit:contain;margin:0 auto;display:block;">
                     @endif
                 </div>
                 @break

resources/views/bo/engagements/image-input.blade.php

@@ -7,7 +7,7 @@
         <input type="file" name="content[{{$i}}][content][{{$k}}][value][{{$tmpl ? 'X' : $o}}]" accept="image/png,image/jpeg,.svg" @if(!$tmpl)data-old-value="{{ $image }}" @endif>
         <br>
         @if(!$tmpl)
-        <img class="img-responsive" src="{{ $image }}" alt="image" style="max-height: 200px;">
+        <img class="img-responsive" src="{{ $image }}" alt="image" style="max-height:200px;max-width:100%;object-fit:contain;margin:0 auto;display:block;">
         @endif
     </div>
 </div>

resources/views/bo/health-nutrition/dropdown-input.blade.php

@@ -0,0 +1,19 @@
+@php
+$o = $o ?? 'X';
+@endphp
+<div class="alert alert-warning @if(!$tmpl)dropdownGroup @else d-none dropdownTemplate @endif" role="alert">
+    <button type="button" class="close" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+    <div class="form-group">
+        <label for="{{ $i.$k }}_title_{{ ($tmpl ? 'X' : $o) }}" data-count="{{ $o }}"><small>{{ __('Titre') }}*</small></label>
+        <input id="{{ $i.$k }}_title_{{ ($tmpl ? 'X' : $o) }}" type="text" class="form-control" name="content[{{$i}}][content][{{$k}}][value][{{ ($tmpl ? 'X' : $o) }}][title]" placeholder="Titre" value="{{ old("content.$i.content.$k.value.$o.title") ?? (!$tmpl ? ($dropdown['title'] ?? '') : '') }}">
+        <br>
+        <label for="{{ $i.$k }}_content_{{ ($tmpl ? 'X' : $o) }}"><small>{{ __('Contenu') }}*</small></label>
+        <custom-ckeditor
+            id="{{ $i.$k }}_content_{{ ($tmpl ? 'X' : $o) }}"
+            class="CKEDITOR"
+            name="content[{{$i}}][content][{{$k}}][value][{{ ($tmpl ? 'X' : $o) }}][content]"
+            dbtext="{{ old("content.$i.content.$k.value.$o.content") ?? (!$tmpl ? ($dropdown['content'] ?? '') : '') }}"></custom-ckeditor>
+    </div>
+</div>